/*! =====================================================================
   DRONE SQUAD - Foglio di stile principale  (style.css)
   ---------------------------------------------------------------------
   INDICE DELLE SEZIONI (cerca i marcatori "=====" per saltare ai blocchi):
     - Variabili / Design tokens .......... :root
     - Reset & base
     - Sfondo, spotlight, scroll progress .. .bg-fx .spotlight .progress
     - Bottoni & utility ................... .btn .eyebrow .shimmer
     - NAV ................................. .nav
     - HERO + HUD .......................... .hero .hud
     - Shell sezioni / reveal .............. .section .reveal
     - PROBLEMA / SOLUZIONE / WORKFLOW
     - TECNOLOGIA / SERVIZI / NORMATIVA
     - SETTORI / CONFRONTO / KPI / CASE
     - CTA FINALE / FOOTER
     - AREA ADMIN .......................... .admin-*
     - Cookie banner ....................... .cookie-*
     - Pagine legali ....................... .legal-*
     - Media queries (responsive) in fondo
   NOTA: tutti i colori e le spaziature sono centralizzati nelle variabili
   in :root. Per ritematizzare il sito basta modificare quelle.
   ===================================================================== */

:root{
  --primary:#7db3b4; --primary-bright:#a7d8d9; --primary-deep:#4d8485;
  --bg-0:#070a0b; --bg-1:#0b1113; --bg-2:#111a1c; --bg-3:#162224;
  --text:#eef5f5; --muted:#9fb3b4; --faint:#637576;
  --line:rgba(125,179,180,.16); --line-soft:rgba(125,179,180,.08);
  --glass:rgba(125,179,180,.045); --glass-2:rgba(125,179,180,.07);
  --alert:#ff5d54; --ok:#5fd0a0;
  --grad:linear-gradient(120deg,var(--primary) 0%,var(--primary-bright) 100%);
  --r:18px; --r-sm:12px; --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --mx:50%; --my:50%;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body); background:var(--bg-0); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* ambient grid + aurora */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-grid{position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 80%)}
.aurora{position:absolute; width:60vw; height:60vw; border-radius:50%; filter:blur(90px); opacity:.18; mix-blend-mode:screen}
.a1{background:radial-gradient(circle,var(--primary),transparent 60%); top:-15vw; left:-10vw; animation:drift1 22s var(--ease) infinite alternate}
.a2{background:radial-gradient(circle,var(--primary-deep),transparent 60%); bottom:-20vw; right:-10vw; animation:drift2 26s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(20vw,12vh) scale(1.2)}}
@keyframes drift2{to{transform:translate(-16vw,-10vh) scale(1.15)}}
/* cursor spotlight */
.spotlight{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(125,179,180,.08),transparent 70%); transition:background .1s}
/* scroll progress */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:var(--grad); box-shadow:0 0 14px var(--primary)}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
section{position:relative;z-index:2}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--primary); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--primary);opacity:.7}
.muted{color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600; font-size:15px; padding:15px 28px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .35s}
.btn-primary{background:var(--grad); color:#04181a; box-shadow:0 10px 30px -8px rgba(125,179,180,.5)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 44px -10px rgba(125,179,180,.65)}
.btn-ghost{background:rgba(255,255,255,.03); border-color:var(--line); color:var(--text); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--primary); transform:translateY(-3px); background:rgba(125,179,180,.08)}
.btn svg{width:16px;height:16px}
.shimmer{background:linear-gradient(100deg,var(--text) 30%,var(--primary-bright) 50%,var(--text) 70%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sh 6s linear infinite}
@keyframes sh{to{background-position:200% center}}

/* ===== NAV ===== */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:.4s var(--ease); padding:16px 0}
.nav.scrolled{background:rgba(7,10,11,.72); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line-soft); padding:10px 0}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:30px; width:auto; filter:brightness(0) invert(1); transition:.3s}
.brand:hover img{filter:none}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:500}
.nav-links a{color:var(--muted); transition:color .25s; position:relative; padding:4px 0}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--primary);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:12px}
.lang{display:flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden; font-family:var(--mono); font-size:11px}
.lang button{background:transparent; border:0; color:var(--muted); padding:7px 11px; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:.1em; transition:.25s}
.lang button.on{background:var(--grad); color:#04181a; font-weight:600}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ===== HERO ===== */
.hero{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:130px 0 70px}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover; filter:saturate(.85) contrast(1.05)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 25%,rgba(125,179,180,.14),transparent 55%),
    linear-gradient(180deg,rgba(7,10,11,.55) 0%,rgba(7,10,11,.62) 40%,var(--bg-0) 97%)}
.hero-inner{position:relative; z-index:3; max-width:840px; margin:0 auto}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.3rem); margin:22px 0 0}
.hero h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{font-size:clamp(1.05rem,1.7vw,1.32rem); color:var(--muted); margin:24px auto 34px; max-width:640px}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center}
.hero-trust{display:flex; gap:30px; flex-wrap:wrap; justify-content:center; margin-top:48px; padding-top:26px; border-top:1px solid var(--line-soft)}
.hero-trust div{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; display:flex; align-items:center; gap:8px}
.hero-trust b{color:var(--primary); font-weight:500}
.hud{position:absolute; inset:0; z-index:2; pointer-events:none; font-family:var(--mono); color:var(--primary)}
.hud .corner{position:absolute; width:46px; height:46px; border:1.5px solid rgba(125,179,180,.5)}
.hud .tl{top:96px;left:28px;border-right:0;border-bottom:0}.hud .tr{top:96px;right:28px;border-left:0;border-bottom:0}
.hud .bl{bottom:34px;left:28px;border-right:0;border-top:0}.hud .br{bottom:34px;right:28px;border-left:0;border-top:0}
.hud .readout{position:absolute; font-size:11px; letter-spacing:.18em; opacity:.85}
.hud .r1{top:104px; right:84px; text-align:right}
.hud .r1 .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);margin-left:8px;animation:pulse 1.6s infinite}
.hud .r2{bottom:46px; left:84px; color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.scanline{position:absolute;left:0;right:0;height:140px;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(125,179,180,.05) 50%,transparent);animation:scan 7s linear infinite}
@keyframes scan{0%{top:-140px}100%{top:100%}}

/* ===== SECTION SHELL (centered) ===== */
.section{padding:120px 0}
.section-head{max-width:760px; margin:0 auto 60px; text-align:center}
.section-head .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2rem,4.2vw,3.2rem); margin:18px 0 18px}
.section-head p{font-size:1.08rem; color:var(--muted)}
.reveal{opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* tilt cards */
.tilt{transform-style:preserve-3d; transition:transform .2s var(--ease), border-color .4s, background .4s}

/* ===== PROBLEM ===== */
.prob{background:linear-gradient(180deg,var(--bg-0),var(--bg-1))}
.grid-center{display:grid; gap:22px; justify-content:center}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.prob-card{background:var(--glass); border:1px solid var(--line-soft); border-radius:var(--r); padding:32px 28px; text-align:center}
.prob-card:hover{border-color:var(--line); background:var(--glass-2)}
.prob-card .x{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,93,84,.1);border:1px solid rgba(255,93,84,.25);color:var(--alert);font-size:20px;margin:0 auto 20px}
.prob-card h3{font-size:1.16rem;margin-bottom:10px}
.prob-card p{color:var(--muted);font-size:.95rem}

/* ===== SPLIT (head centered, body 2-col) ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1100px; margin:0 auto}
.split .media{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.split .media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split .media .badge{position:absolute; left:18px; bottom:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; background:rgba(7,10,11,.7); backdrop-filter:blur(8px); border:1px solid var(--line); padding:9px 14px; border-radius:100px; color:var(--primary)}
.checklist{list-style:none; display:grid; gap:14px}
.checklist li{display:flex; gap:14px; align-items:flex-start; font-size:1rem; text-align:left}
.checklist li .c{flex:none; width:24px;height:24px;border-radius:7px;background:var(--grad);display:grid;place-items:center;color:#04181a;font-size:13px;font-weight:700;margin-top:1px}
.checklist li span{color:var(--muted)}

/* ===== WORKFLOW ===== */
.flow{background:linear-gradient(180deg,var(--bg-1),var(--bg-0))}
.flow-track{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:30px; max-width:1100px; margin-left:auto; margin-right:auto}
.flow-track::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--primary-deep),var(--primary),var(--primary-bright));opacity:.35}
.flow-line{position:absolute;top:34px;left:6%;height:2px;background:var(--grad);width:0;box-shadow:0 0 14px var(--primary);transition:width .7s var(--ease)}
.flow-step{position:relative; text-align:center}
.flow-step .num{width:68px;height:68px;margin:0 auto 22px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:18px;color:var(--primary);position:relative;z-index:2;transition:background .5s,color .5s,border-color .5s,box-shadow .5s,transform .5s}
.flow-step h4{font-size:1.02rem;margin-bottom:8px;font-family:var(--display);transition:color .5s,text-shadow .5s}
.flow-step p{font-size:.86rem;color:var(--muted);transition:color .5s}
.flow-step:hover .num{border-color:var(--primary);box-shadow:0 0 30px -6px var(--primary);transform:translateY(-4px)}
/* neon loop */
.flow-step.lit .num{background:var(--grad);color:#04181a;border-color:var(--primary-bright);transform:translateY(-5px) scale(1.04);box-shadow:0 0 22px var(--primary),0 0 55px rgba(125,179,180,.55),inset 0 0 12px rgba(255,255,255,.35)}
.flow-step.lit h4{color:var(--primary-bright);text-shadow:0 0 18px rgba(167,216,217,.8)}
.flow-step.lit p{color:var(--text)}

/* ===== TECH (8 cards, 4 cols) ===== */
.g4t{grid-template-columns:repeat(4,minmax(0,1fr))}
.tech-card{padding:30px 26px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--glass);position:relative;overflow:hidden;text-align:center}
.tech-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(125,179,180,.12),transparent 60%);opacity:0;transition:.4s}
.tech-card:hover{border-color:var(--line)}
.tech-card:hover::before{opacity:1}
.tech-card .ic{width:46px;height:46px;border-radius:12px;background:rgba(125,179,180,.1);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 18px;color:var(--primary)}
.tech-card .ic svg{width:22px;height:22px}
.tech-card h3{font-size:1.06rem;margin-bottom:8px}
.tech-card p{font-size:.9rem;color:var(--muted)}

/* ===== SERVICES (uniform 3x2, no holes) ===== */
.serv{background:linear-gradient(180deg,var(--bg-0),var(--bg-1))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.serv-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);min-height:340px;display:flex;align-items:flex-end}
.serv-card .img{position:absolute;inset:0;z-index:0}
.serv-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(.9)}
.serv-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,10,11,.1) 0%,rgba(7,10,11,.5) 50%,rgba(7,10,11,.95) 100%)}
.serv-card .body{position:relative;z-index:2;padding:26px}
.serv-card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--primary);text-transform:uppercase}
.serv-card h3{font-size:1.28rem;margin:10px 0 8px}
.serv-card p{font-size:.92rem;color:var(--muted)}
.serv-card:hover{border-color:var(--primary)}
.serv-card:hover .img img{transform:scale(1.08)}

/* ===== NORMATIVA ===== */
.norm{position:relative;overflow:hidden}
.norm-split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;z-index:1;max-width:1100px;margin:0 auto}
.norm-list{display:grid;gap:14px}
.norm-item{display:flex;gap:16px;padding:18px 22px;border-radius:14px;background:var(--glass);border:1px solid var(--line-soft);text-align:left}
.norm-item .k{font-family:var(--mono);color:var(--primary);font-size:13px;flex:none;width:62px}
.norm-item .v b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:3px}
.norm-item .v span{font-size:.88rem;color:var(--muted)}
.norm-cta{background:linear-gradient(135deg,var(--bg-2),var(--bg-3));border:1px solid var(--line);border-radius:24px;padding:42px 40px;text-align:left}
.norm-cta h3{font-size:1.7rem;margin:14px 0 16px}
.norm-cta p{color:var(--muted);margin-bottom:18px}

/* ===== SECTORS (centered) ===== */
.sect-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.sect-card{width:200px;padding:30px 24px;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:var(--glass);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.sect-card:hover{border-color:var(--line);background:var(--glass-2)}
.sect-card .ic{color:var(--primary)}.sect-card .ic svg{width:30px;height:30px}
.sect-card b{font-family:var(--display);font-weight:600;font-size:1.02rem}
.sect-card span{font-size:.85rem;color:var(--muted)}

/* ===== COMPARE ===== */
.cmp{background:linear-gradient(180deg,var(--bg-1),var(--bg-0))}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin:0 auto}
.cmp-col{border-radius:24px;padding:38px 34px;border:1px solid var(--line-soft);text-align:left}
.cmp-col.bad{background:rgba(255,255,255,.015)}
.cmp-col.good{background:linear-gradient(160deg,rgba(125,179,180,.12),rgba(125,179,180,.03));border-color:var(--line);position:relative;box-shadow:var(--shadow)}
.cmp-col h3{font-size:1.4rem;margin-bottom:6px}
.cmp-col .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:26px}
.cmp-col.bad .sub{color:var(--faint)}.cmp-col.good .sub{color:var(--primary)}
.cmp-col ul{list-style:none;display:grid;gap:15px}
.cmp-col li{display:flex;gap:13px;font-size:.97rem;align-items:flex-start}
.cmp-col li i{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;margin-top:1px}
.cmp-col.bad li i{background:rgba(255,93,84,.12);color:var(--alert)}
.cmp-col.good li i{background:var(--grad);color:#04181a}
.cmp-col.bad li span{color:var(--muted)}
.cmp-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#04181a;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;font-weight:600;padding:7px 14px;border-radius:100px;white-space:nowrap}

/* ===== KPI ===== */
.kpi{padding:80px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-1)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;max-width:1040px;margin:0 auto}
.kpi-grid .n{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.kpi-grid .l{font-size:.9rem;color:var(--muted);margin-top:10px}

/* ===== CASE ===== */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.case-card{border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);background:var(--glass);text-align:left}
.case-card:hover{border-color:var(--line)}
.case-card .top{aspect-ratio:16/10;overflow:hidden;position:relative}
.case-card .top img{width:100%;height:100%;object-fit:cover;transition:.8s var(--ease)}
.case-card:hover .top img{transform:scale(1.07)}
.case-card .top .yr{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;background:rgba(7,10,11,.7);border:1px solid var(--line);padding:6px 11px;border-radius:100px;color:var(--primary)}
.case-card .b{padding:24px}
.case-card .b .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.case-card .b h3{font-size:1.2rem;margin:10px 0 8px}
.case-card .b p{font-size:.9rem;color:var(--muted)}

/* ===== FINAL ===== */
.final{position:relative;overflow:hidden;text-align:center;padding:140px 0}
.final .glow{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 80% at 50% 30%,rgba(125,179,180,.18),transparent 60%)}
.final-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.final h2{font-size:clamp(2.2rem,5.5vw,4rem);margin:20px 0 22px}
.final h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.final p{font-size:1.15rem;color:var(--muted);margin-bottom:38px}
.final .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.final .micro{margin-top:30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--faint)}

/* ===== FOOTER ===== */
footer{background:var(--bg-1);border-top:1px solid var(--line-soft);padding:70px 0 36px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-brand img{height:34px;filter:brightness(0) invert(1);margin-bottom:18px}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:300px}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.92rem;margin-bottom:11px;transition:color .25s}
.foot-col a:hover{color:var(--primary)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--faint)}
.foot-bottom .badges{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em}

/* ===== ADMIN ===== */
.admin-fab{position:fixed;bottom:22px;left:22px;z-index:300;width:46px;height:46px;border-radius:50%;background:rgba(11,17,19,.8);border:1px solid var(--line);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.3s}
.admin-fab:hover{color:var(--primary);border-color:var(--primary)}
.admin-overlay{position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.3s}
body.admin .admin-overlay{opacity:1;pointer-events:auto}
body.editing .admin-overlay{opacity:0;pointer-events:none}
.admin-panel{position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;z-index:260;background:rgba(9,14,15,.98);backdrop-filter:blur(18px);border-left:1px solid var(--primary);box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);transform:translateX(105%);transition:transform .4s var(--ease);display:flex;flex-direction:column}
body.admin .admin-panel{transform:none}
.admin-panel header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.admin-panel header b{font-family:var(--display);font-size:1.05rem;display:block}
.admin-panel header .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--primary)}
.admin-panel .x{cursor:pointer;color:var(--muted);background:none;border:0;font-size:24px;line-height:1}
.admin-panel .x:hover{color:var(--text)}
.admin-body{overflow-y:auto;padding:4px 20px 30px;flex:1}
.ap-sec{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.ap-sec h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.ap-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ap-row img{width:56px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#0b1113;flex:none}
.ap-row .meta{flex:1;min-width:0}
.ap-row .meta span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-btn{font-family:var(--body);font-weight:600;font-size:12.5px;padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:.25s;white-space:nowrap}
.ap-btn:hover{border-color:var(--primary)}
.ap-btn.pri{background:var(--grad);color:#04181a;border:0}
.ap-btn.on{background:rgba(125,179,180,.14);border-color:var(--primary);color:var(--primary)}
.ap-btn.full{width:100%;padding:11px;margin-top:8px}
.ap-field{margin-bottom:12px}
.ap-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.ap-field input{width:100%;background:#0b1113;border:1px solid var(--line);border-radius:8px;padding:9px 11px;color:var(--text);font-family:var(--body);font-size:13px}
.ap-field input:focus{outline:none;border-color:var(--primary)}
.ap-hint{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:8px}
.admin-fab.live{color:var(--ok);border-color:var(--ok)}
body.editing [data-i18n]{outline:1px dashed rgba(125,179,180,.5);outline-offset:3px;border-radius:3px}
body.editing [data-i18n]:focus{outline:2px solid var(--primary);background:rgba(125,179,180,.08)}
body.admin .eimg{cursor:pointer;outline:1px dashed rgba(125,179,180,.45);outline-offset:-1px}
body.admin .serv-card:hover .img::after,body.admin .case-card:hover .top::after,body.admin .media:hover::after{content:"⟳ sostituisci immagine";position:absolute;inset:auto 8px 8px auto;z-index:9;font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:rgba(7,10,11,.9);color:var(--primary);border:1px solid var(--primary);padding:5px 9px;border-radius:6px;pointer-events:none}
body.admin .brand img,body.admin .foot-brand img{outline:2px dashed var(--primary);outline-offset:4px;cursor:pointer}

@media(max-width:980px){
  .split,.norm-split,.cmp-grid{grid-template-columns:1fr;gap:40px;max-width:560px}
  .g4,.g4t{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-grid{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:36px}
  .flow-track{grid-template-columns:1fr 1fr 1fr;gap:30px}.flow-track::before,.flow-line{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{display:none}.burger{display:flex}.nav-cta .btn-ghost{display:none}
  .g4,.g4t,.g3,.case-grid{grid-template-columns:1fr}
  .flow-track{grid-template-columns:1fr 1fr}
  .section{padding:84px 0}.hero{padding:130px 0 50px}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =====================================================================
   COOKIE BANNER  (consenso a comparsa, vedi gestione in js/main.js)
   ===================================================================== */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:320;max-width:1100px;margin:0 auto;display:none;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(11,17,19,.97);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow)}
.cookie-banner.show{display:flex}
.cookie-text{max-width:680px}
.cookie-text b{display:block;font-family:var(--display);margin-bottom:4px}
.cookie-text span{font-size:.9rem;color:var(--muted)}
.cookie-text a{color:var(--primary);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.ck-btn{font-family:var(--body);font-weight:600;font-size:14px;padding:11px 20px;border-radius:100px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);transition:.25s}
.ck-btn:hover{border-color:var(--primary)}
.ck-btn.pri{background:var(--grad);color:#04181a;border:0}

/* =====================================================================
   FOOTER - link legali e credito agenzia
   ===================================================================== */
.foot-bottom a{color:var(--muted);text-decoration:none;transition:color .25s}
.foot-bottom a:hover{color:var(--primary)}
.foot-credit{text-align:center;margin-top:18px;font-size:.78rem;color:var(--faint)}
.foot-credit a{color:var(--primary);text-decoration:none}
.foot-credit a:hover{text-decoration:underline}

/* =====================================================================
   PAGINE LEGALI  (privacy.html, cookie.html)
   ===================================================================== */
.legal-wrap{max-width:880px;margin:0 auto;padding:140px 28px 90px}
.legal-wrap .eyebrow{margin-bottom:16px}
.legal-wrap h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:8px}
.legal-wrap .updated{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.1em;margin-bottom:30px;display:block}
.legal-wrap h2{font-size:1.35rem;color:var(--primary);margin:38px 0 12px}
.legal-wrap h3{font-size:1.06rem;margin:22px 0 8px;color:var(--text)}
.legal-wrap p,.legal-wrap li{color:var(--muted);font-size:1rem;line-height:1.75}
.legal-wrap ul{margin:10px 0 12px 22px}
.legal-wrap li{margin-bottom:6px}
.legal-wrap a{color:var(--primary);text-decoration:underline}
.legal-wrap strong{color:var(--text)}
.legal-wrap table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
.legal-wrap th,.legal-wrap td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--muted);vertical-align:top}
.legal-wrap th{background:var(--glass);color:var(--text);font-family:var(--display);font-weight:600}
.legal-note{background:var(--glass);border:1px solid var(--line-soft);border-left:3px solid var(--primary);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.92rem;color:var(--muted)}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-top:44px;color:var(--primary);font-weight:600;text-decoration:none}
.legal-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,10,11,.8);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line-soft);padding:14px 0}
.legal-nav .wrap{display:flex;align-items:center;justify-content:space-between}
.legal-nav img{height:26px;filter:brightness(0) invert(1)}
.legal-nav a.home{font-size:14px;color:var(--muted);font-weight:500}
.legal-nav a.home:hover{color:var(--primary)}

/* =====================================================================
   ACCESSIBILITA' (aggiunto il 16/09/2026)
   - .skip-link: collegamento "Salta al contenuto", nascosto fuori schermo
     e reso visibile solo quando riceve il fuoco con il tasto Tab.
   - :focus-visible: contorno ben visibile su tutto cio' che si puo'
     raggiungere da tastiera. Prima il fuoco era invisibile in diversi
     punti, quindi chi non usa il mouse non capiva dove si trovava.
     Si usa :focus-visible (non :focus) per non mostrare il contorno a chi
     clicca col mouse.
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:#07100f;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;font-size:15px;text-decoration:none}
.skip-link:focus{left:0}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,summary:focus-visible{
  outline:3px solid var(--primary-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* Il burger e' un div con role="button": senza questo il cursore non
   suggerisce che sia cliccabile. */
.burger{cursor:pointer}

/* =====================================================================
   WIDGET ACCESSIBILITA' (16/09/2026)
   Il pulsante sta dove prima c'era il lucchetto dell'area admin.
   Le classi .a11y-* su <html> sono attivate da js/main.js e applicano le
   preferenze scelte dal visitatore.
   ===================================================================== */
.a11y-fab{position:fixed;bottom:22px;left:22px;z-index:340;width:46px;height:46px;border-radius:50%;
  background:rgba(11,17,19,.85);border:1px solid var(--line);backdrop-filter:blur(10px);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.25s;padding:0}
.a11y-fab:hover{color:var(--primary);border-color:var(--primary)}
.a11y-fab[aria-expanded="true"]{color:var(--primary);border-color:var(--primary)}

/* z-index 340: deve stare SOPRA il banner cookie (320), altrimenti al
   primo accesso il banner ne copre la parte bassa e i pulsanti non si
   leggono. Stessa ragione per il pulsante tondo. */
.a11y-panel{position:fixed;bottom:78px;left:22px;z-index:340;width:min(300px,calc(100vw - 44px));
  background:rgba(9,14,16,.97);border:1px solid var(--line);border-radius:18px;padding:18px;
  backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px}
/* IMPORTANTE: senza questa riga il pannello resta SEMPRE aperto.
   L'attributo hidden dell'HTML vale "display:none", ma la regola qui
   sopra (.a11y-panel{...display:flex}) e' piu' specifica e lo annulla:
   il pannello risultava visibile anche da chiuso. */
.a11y-panel[hidden]{display:none}

.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.a11y-head h2{font-size:16px;margin:0;font-weight:600;color:var(--text)}
.a11y-x{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:4px 6px;border-radius:8px}
.a11y-x:hover{color:var(--text)}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}
.a11y-btns{display:flex;align-items:center;gap:6px}
.a11y-btns button{width:34px;height:32px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.a11y-btns button:hover{border-color:var(--primary);color:var(--primary)}
.a11y-val{min-width:44px;text-align:center;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.a11y-opt{width:100%;text-align:left;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);font-size:14px;cursor:pointer;transition:.2s;font-family:inherit}
.a11y-opt:hover{border-color:var(--primary)}
.a11y-opt.on{background:rgba(125,179,180,.16);border-color:var(--primary);color:var(--primary-bright)}
.a11y-opt.on::after{content:" ✓";font-weight:700}
.a11y-reset{margin-top:2px;padding:9px;border-radius:10px;border:1px dashed var(--line);background:none;
  color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit}
.a11y-reset:hover{color:var(--text);border-color:var(--muted)}
.a11y-link{font-size:12.5px;color:var(--muted);text-decoration:underline;margin-top:2px}
.a11y-link:hover{color:var(--primary)}
@media(max-width:520px){.a11y-panel{bottom:76px;left:12px;right:12px;width:auto}.a11y-fab{bottom:14px;left:14px}}

/* --- effetti delle preferenze scelte dal visitatore --- */
html.a11y-contrasto{--text:#ffffff;--muted:#e6f2f2;--faint:#c9dada;--line:rgba(255,255,255,.45)}
html.a11y-contrasto body{background:#000}
html.a11y-contrasto .bg-fx,html.a11y-contrasto .glow,html.a11y-contrasto .aurora{display:none}
html.a11y-contrasto .hero::after{background:rgba(0,0,0,.55)}

html.a11y-link a:not(.btn){text-decoration:underline;text-underline-offset:3px;color:var(--primary-bright)}

html.a11y-fermo *,html.a11y-fermo *::before,html.a11y-fermo *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-fermo .reveal{opacity:1!important;transform:none!important}
html.a11y-fermo video{display:none}

html.a11y-font body,html.a11y-font h1,html.a11y-font h2,html.a11y-font h3,html.a11y-font h4,
html.a11y-font h5,html.a11y-font p,html.a11y-font a,html.a11y-font span,html.a11y-font li,
html.a11y-font button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Verdana,Tahoma,sans-serif!important;
  letter-spacing:.01em;word-spacing:.08em}
html.a11y-font p,html.a11y-font li{line-height:1.85}

/* =====================================================================
   CORREZIONI RESPONSIVE (18/09/2026)
   Problemi misurati sul sito online, non ipotesi:
     - il logo si schiacciava a 1px (360px) e a 0px (768px): la barra e'
       flex e lasciava restringere marchio e selettore lingua;
     - il bottone "Richiedi una valutazione" usciva dallo schermo a 768px
       e occupava il 47% della larghezza su telefono, andando a capo su
       due righe (80px di altezza);
     - le scritte decorative dell'HUD (.readout r1/r2) finivano SOPRA
       l'occhiello e la fascia certificazioni della hero;
     - bersagli di tocco sotto i 36px (selettore lingua 28px, menu 32px).
   ===================================================================== */

/* 1. Marchio e selettore lingua non si restringono mai: erano loro a
      "sparire" quando lo spazio non bastava. */
.brand{flex:none}
.lang{flex:none}
.nav-cta{flex:none}

/* 2. Bersagli di tocco piu' grandi (linea guida: almeno 36-44px). */
.lang button{padding:11px 13px;line-height:1.2}
.burger{padding:10px}
.nav-links a{padding:7px 0}

/* 3. Etichetta corta del bottone CTA: su schermo stretto "Richiedi una
      valutazione" andava a capo. Le due varianti sono entrambe
      traducibili (n_cta / n_cta_s) e si scambiano via CSS. */
.nav-cta .btn-primary .corta{display:none}

/* 4. Le scritte decorative dell'HUD spariscono quando lo spazio non basta:
      sono ornamentali, il testo della hero no. */
@media(max-width:1199px){
  .hud .readout{display:none}
}
/* Su schermi larghi ma bassi (portatili) la riga in basso finiva comunque
   sopra la fascia delle certificazioni: la si mostra solo se c'e' altezza. */
@media(max-height:900px){
  .hud .r2{display:none}
}

/* 5. Il menu passa all'hamburger a 900px invece che a 680px: fra 700 e 900
      i link non ci stavano e spingevano fuori schermo logo e bottone. */
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .hud .corner{display:none}
}

/* 6. Barra compatta sotto i 680px. */
@media(max-width:680px){
  .nav{padding:10px 0}
  .nav .wrap{padding:0 16px}
  .brand img{height:24px}
  .nav-cta{gap:8px}
  .nav-cta .btn-primary{padding:11px 16px;font-size:13.5px;white-space:nowrap}
  .nav-cta .btn-primary .intera{display:none}
  .nav-cta .btn-primary .corta{display:inline}
  .lang{font-size:10px}
  .lang button{padding:11px 11px;line-height:1.2}
  .hero{padding:104px 0 40px}
}

/* 7. Sotto i 400px si recupera altro spazio orizzontale. */
@media(max-width:400px){
  .wrap{padding:0 16px}
  .nav-cta .btn-primary{padding:10px 13px;font-size:13px}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* 8. Banner cookie su telefono: occupava quasi meta' schermo e si
      sovrapponeva al pulsante di accessibilita' in basso a sinistra.
      Ora e' compatto e si posiziona SOPRA quel pulsante. */
/* Fino a 1140px il banner e' largo quanto lo schermo e coprirebbe il
   pulsante di accessibilita': lo si alza sopra di esso. Oltre i 1140px il
   banner e' centrato e piu' stretto, quindi il pulsante resta libero. */
@media(max-width:1140px){
  .cookie-banner{bottom:76px}
}
@media(max-width:680px){
  .cookie-banner{left:12px;right:12px;bottom:74px;padding:14px 16px;gap:10px;border-radius:14px}
  .cookie-text b{font-size:14px;margin-bottom:2px}
  .cookie-text span{font-size:12.4px;line-height:1.45}
  .cookie-actions{width:100%;gap:8px}
  .cookie-actions .ck-btn{flex:1;padding:11px 8px;font-size:13px;white-space:nowrap}
}

/* Riquadro "Sfondo della hero" nel pannello admin (18/09/2026): mostra il
   file attivo, i pulsanti di caricamento e l'esito dell'operazione. */
.ap-media{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.ap-media-now{font-family:var(--mono);font-size:11px;color:var(--primary);word-break:break-all;margin-bottom:10px}
.ap-media-btns{display:flex;gap:8px}
.ap-media-btns .ap-btn{flex:1}
.ap-media-stato{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:9px;min-height:0}
.ap-media-stato.err{color:var(--alert)}
/* lo sfondo della hero: immagine e video si comportano allo stesso modo */
.hero-bg img#heroImage{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}