:root{
    /* I tre colori del logo: fondo #00202B, bianco ghiaccio #EEF2F3, turchese #25BFC8.
       Tutto il resto della tavolozza nasce da questi tre. */
    --ground:#00202b; --panel:rgba(6,42,54,.88); --panel-solid:#062a36; --panel-2:#0a3543;
    --line:#123f4d; --line-2:#1b5566;
    --ink:#eef2f3; --ink-2:#a6bec4; --ink-3:#6e888f;
    --neon:#25bfc8; --neon-hi:#6fe0e6; --neon-2:#109aa6; --neon-deep:#0a6b73; --neon-base:#12818a;
    --blue:#153186; --gold:#f9b718; --ok:#55d98a; --bad:#ff6b6b; --warn:#f9b718;
    --neon-soft:rgba(37,191,200,.12); --neon-glow:rgba(37,191,200,.5);
    --display:'Unbounded',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
    --r:12px; --ease:cubic-bezier(.16,1,.3,1);
    color-scheme: dark;
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  body{background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; margin:0; -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.01em}
  a{color:inherit}
  button{font:inherit; cursor:pointer}
  :focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:4px}
  .wrap{max-width:2160px; margin:0 auto; padding:0 clamp(22px, 4vw, 72px); position:relative}
  .mono{font-family:var(--mono)}
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--neon); text-shadow:0 0 12px var(--neon-glow)}
  .lede{color:var(--ink-2); max-width:60ch; margin-top:14px; font-size:17px}
  #space{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
  main, footer, nav.top{position:relative; z-index:1}

  /* ===== BOTTONI 3D NEON ===== */
  .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--r); border:none; font-weight:700; font-size:15px; letter-spacing:.02em; text-decoration:none; overflow:hidden; isolation:isolate; white-space:nowrap; transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s, background .18s}
  .btn::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform:translateX(-120%); transition:transform .7s var(--ease); pointer-events:none}
  .btn:hover::after{transform:translateX(120%)}
  .btn-primary{background:linear-gradient(180deg,#6fe0e6 0%,#25bfc8 45%,#159aa3 100%); color:#00202b; box-shadow:0 6px 0 var(--neon-base), 0 10px 18px rgba(0,0,0,.5), 0 0 14px var(--neon-glow), 0 0 34px rgba(37,191,200,.28), inset 0 1px 0 rgba(255,255,255,.7)}
  .btn-primary:hover{animation:none; transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 8px 0 var(--neon-base), 0 16px 26px rgba(0,0,0,.55), 0 0 24px rgba(37,191,200,.9), 0 0 70px rgba(37,191,200,.5), inset 0 1px 0 rgba(255,255,255,.8)}
  .btn-primary:active{animation:none; transform:translateY(4px); box-shadow:0 2px 0 var(--neon-base), 0 4px 10px rgba(0,0,0,.45), 0 0 14px var(--neon-glow)}
  .btn-ghost{background:rgba(0,32,43,.55); color:var(--neon); border:2px solid var(--neon); text-shadow:0 0 8px var(--neon-glow); box-shadow:0 5px 0 #0b5c62, 0 8px 16px rgba(0,0,0,.45), 0 0 10px rgba(37,191,200,.35), inset 0 0 12px rgba(37,191,200,.18)}
  .btn-ghost:hover{animation:none; transform:translateY(-2px); background:rgba(37,191,200,.14); color:#fff; box-shadow:0 7px 0 #0b5c62, 0 14px 22px rgba(0,0,0,.5), 0 0 18px rgba(37,191,200,.8), 0 0 48px rgba(37,191,200,.4), inset 0 0 18px rgba(37,191,200,.3)}
  .btn-ghost:active{animation:none; transform:translateY(3px); box-shadow:0 2px 0 #0b5c62, 0 3px 8px rgba(0,0,0,.4), 0 0 10px rgba(37,191,200,.5)}
  .btn-gold{background:linear-gradient(180deg,#ffd45c,#f9b718 50%,#d99a06); color:#2a1d02; box-shadow:0 6px 0 #9a6c02, 0 10px 18px rgba(0,0,0,.5), 0 0 14px rgba(249,183,24,.55), 0 0 34px rgba(249,183,24,.25), inset 0 1px 0 rgba(255,255,255,.6)}
  .btn-gold:hover{animation:none; transform:translateY(-2px); box-shadow:0 8px 0 #9a6c02, 0 16px 26px rgba(0,0,0,.55), 0 0 24px rgba(249,183,24,.9), 0 0 70px rgba(249,183,24,.45), inset 0 1px 0 rgba(255,255,255,.7)}
  .btn-gold:active{animation:none; transform:translateY(4px); box-shadow:0 2px 0 #9a6c02, 0 4px 10px rgba(0,0,0,.45), 0 0 14px rgba(249,183,24,.6)}
  .hero .actions .btn-primary, .fab{box-shadow:0 6px 0 var(--neon-base), 0 10px 18px rgba(0,0,0,.5), 0 0 18px rgba(37,191,200,.6), 0 0 44px rgba(37,191,200,.36), inset 0 1px 0 rgba(255,255,255,.7)}
  .btn-sm{min-height:42px; padding:0 16px; font-size:14px}
  .btn[disabled]{opacity:.4; animation:none; transform:none; box-shadow:0 3px 0 #0f2a3a; cursor:not-allowed; filter:grayscale(.4)}
  .btn[disabled]::after{display:none}
  .btn svg{width:18px; height:18px; flex:none}
  @keyframes neonBreath{0%,100%{box-shadow:0 6px 0 var(--neon-base), 0 10px 18px rgba(0,0,0,.5), 0 0 14px var(--neon-glow), 0 0 34px rgba(37,191,200,.28), inset 0 1px 0 rgba(255,255,255,.7)} 50%{box-shadow:0 6px 0 var(--neon-base), 0 10px 18px rgba(0,0,0,.5), 0 0 22px rgba(37,191,200,.85), 0 0 56px rgba(37,191,200,.45), inset 0 1px 0 rgba(255,255,255,.7)}}
  @keyframes neonBreathGhost{0%,100%{box-shadow:0 5px 0 #0b5c62, 0 8px 16px rgba(0,0,0,.45), 0 0 10px rgba(37,191,200,.35), inset 0 0 12px rgba(37,191,200,.18)} 50%{box-shadow:0 5px 0 #0b5c62, 0 8px 16px rgba(0,0,0,.45), 0 0 18px rgba(37,191,200,.65), inset 0 0 16px rgba(37,191,200,.28)}}
  @keyframes goldBreath{0%,100%{box-shadow:0 6px 0 #9a6c02, 0 10px 18px rgba(0,0,0,.5), 0 0 14px rgba(249,183,24,.55), 0 0 34px rgba(249,183,24,.25), inset 0 1px 0 rgba(255,255,255,.6)} 50%{box-shadow:0 6px 0 #9a6c02, 0 10px 18px rgba(0,0,0,.5), 0 0 22px rgba(249,183,24,.85), 0 0 56px rgba(249,183,24,.4), inset 0 1px 0 rgba(255,255,255,.6)}}

  /* ===== NAV con menu a tendina + WhatsApp ===== */
  nav.top{position:sticky; top:0; z-index:50; background:rgba(0,32,43,.94); border-bottom:1px solid var(--line)}
  nav.top .wrap{display:flex; align-items:center; gap:12px; height:72px}
  .logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
  .logo svg{width:38px; height:38px; filter:drop-shadow(0 0 8px var(--neon-glow))}
  .logo .mark{height:40px; width:auto; display:block; filter:drop-shadow(0 0 10px var(--neon-glow))}
  .logo b{font-family:var(--display); font-size:19px; letter-spacing:-.02em; color:#fff}
  .logo b em{font-style:normal; color:var(--neon); text-shadow:0 0 12px var(--neon-glow)}
  .logo span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--ink-3); margin-top:-2px}
  .ddwrap{position:relative}
  .dd{position:absolute; right:0; top:calc(100% + 10px); min-width:250px; background:rgba(4,33,43,.97); border:1px solid var(--line-2); border-radius:14px; padding:8px; display:none; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(37,191,200,.12); z-index:60}
  .dd.open{display:block; animation:fade .25s var(--ease)}
  .dd a{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:14.5px; transition:background .2s,color .2s}
  .dd a svg{width:20px; height:20px; color:var(--neon); filter:drop-shadow(0 0 6px var(--neon-glow)); flex:none}
  .thumb .pl svg{fill:currentColor}
  .dd a:hover, .dd a.cur{background:var(--neon-soft); color:#fff}
  .dd a.cur{box-shadow:inset 0 0 0 1px rgba(37,191,200,.4)}
  .caret{width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s}
  .ddwrap.open .caret{transform:rotate(225deg) translateY(-3px)}
  .fx{padding:0 14px}
  .fx .knob{width:30px; height:16px; border-radius:8px; border:2px solid currentColor; position:relative; flex:none; transition:opacity .2s}
  .fx .knob::after{content:""; position:absolute; top:2px; left:14px; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; transition:left .2s}
  .lite .fx .knob{opacity:.55}
  .lite .fx .knob::after{left:2px; box-shadow:none}
  @media (max-width:1100px){ .fx .lbl{display:none} .fx{padding:0 10px} }
  @media (max-width:480px){ .logo div{display:none} }
  .btn-wa svg{width:20px; height:20px}
  @media (max-width:900px){ nav.top .btn:not(.cta) .lbl{display:none} nav.top .btn-sm:not(.cta){padding:0 12px} }
  @media (max-width:720px){ #ddshopbtn .caret{display:none} }
  @media (max-width:420px){ nav.top .wrap{gap:8px; padding:0 16px} }
  @media (max-width:720px){ .logo span{display:none} .btn .lbl{display:none} .btn-sm{padding:0 12px} .cta{display:none} }

  /* ===== PAGINE + SFONDI VIDEO ===== */
  section.page{display:none; position:relative; min-height:calc(100vh - 72px); min-height:calc(100svh - 72px); overflow:hidden}
  section.page.on{display:block; animation:pagein .5s var(--ease)}
  @keyframes pagein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .pagebg{position:absolute; inset:0; z-index:0; overflow:hidden}
  .pagebg video, .pagebg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .pagebg video{opacity:0; transition:opacity 1.4s ease}
  .pagebg video.ready{opacity:.55}
  .pagebg img{opacity:.45}
  .pagebg .veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,32,43,.94) 0%, rgba(0,32,43,.75) 40%, rgba(0,32,43,.35) 100%), linear-gradient(180deg, rgba(0,32,43,.25), rgba(0,32,43,.92) 85%)}
  section.page > .wrap{z-index:1; padding-top:72px; padding-bottom:88px}
  section.page h2{font-size:clamp(26px,3.6vw,40px); font-weight:700; line-height:1.12; margin-top:12px; text-shadow:0 4px 30px rgba(0,0,0,.7)}
  .cap{position:absolute; left:22px; right:auto; bottom:16px; max-width:calc(100% - 150px); z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--neon); background:rgba(0,32,43,.55); border:1px solid rgba(37,191,200,.3); padding:5px 9px; border-radius:6px}

  /* ===== HOME: hero + widget ===== */
  .hero-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-top:80px!important}
  .hero h1{font-size:clamp(34px,5.2vw,60px); font-weight:700; line-height:1.04; margin-top:18px; text-shadow:0 4px 30px rgba(0,0,0,.7)}
  .hero h1 em{font-style:normal; color:var(--neon); text-shadow:0 0 18px var(--neon-glow), 0 0 40px rgba(37,191,200,.35)}
  .hero p{font-size:18px; color:var(--ink-2); max-width:50ch; margin:20px 0 28px}
  .actions{display:flex; gap:14px; flex-wrap:wrap}
  .console{background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(37,191,200,.08)}
  .console .head{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:14px}
  .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok)}
  .console .rows{display:grid; gap:10px; margin-top:16px; font-family:var(--mono); font-size:13px}
  .console .row{display:flex; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(0,32,43,.7); border:1px solid var(--line); border-radius:8px}
  .console .row b{color:var(--neon); font-weight:500; text-shadow:0 0 8px var(--neon-glow)}
  .liverow{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12.5px; color:var(--ink-2)}
  .pulse{width:10px; height:10px; border-radius:50%; background:var(--bad); position:relative}
  .pulse::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,107,107,.6); animation:pulse 1.6s infinite}
  @keyframes pulse{0%{transform:scale(1); opacity:1} 60%,100%{transform:scale(2.6); opacity:0}}
  @media (max-width:900px){ .hero-wrap{grid-template-columns:1fr} .console{display:none} }

  .widgets{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
  .ferma *{animation-play-state:paused!important}
  .lite video.bgv{display:none}
  .lite .pulse::after, .lite .radar .sweep, .lite .radar .blip, .lite .ticker .tk, .lite .stepsviz i::before, .lite .tk-card{animation:none}
  .lite .trk .line i{animation:none; transform:scaleX(1)}
  .presto{position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden; background:rgba(0,32,43,.35)}
  .presto span{display:block; width:200%; text-align:center; transform:rotate(-14deg); background:var(--gold); color:#00202b; font-family:var(--display); font-weight:700; font-size:clamp(24px,6vw,64px); letter-spacing:.14em; text-transform:uppercase; padding:14px 0; border-top:3px solid #00202b; border-bottom:3px solid #00202b; box-shadow:0 12px 40px rgba(0,0,0,.55)}
  .wg{position:relative; display:flex; flex-direction:column; gap:12px; min-height:230px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:18px; text-decoration:none; color:var(--ink); overflow:hidden; transition:transform .25s var(--ease), border-color .25s, box-shadow .25s}
  .wg:hover{transform:translateY(-4px); border-color:var(--neon); box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(37,191,200,.25)}
  .wg .top{display:flex; align-items:center; justify-content:space-between}
  .wg .top .eyebrow{font-size:10.5px}
  .wg .open{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}
  .wg:hover .open{color:var(--neon)}
  .wg .viz{flex:1; min-height:92px; display:flex; align-items:center; justify-content:center; position:relative}
  .wg h3{font-size:17px; font-weight:500}
  .wg p{margin:0; font-size:13.5px; color:var(--ink-2)}
  @media (max-width:900px){ .widgets{grid-template-columns:repeat(2,1fr)} }
  .wg-esperto{grid-row:span 2}
  .wg-esperto .eyebrow a{color:inherit; text-decoration:none}
  .esp-altro{align-self:flex-start; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--neon); text-decoration:none}
  .esp-altro:hover{text-decoration:underline}
  .esp-temi{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:420px}
  .esp-temi span{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); animation:esp 7s infinite}
  .esp-temi span:nth-child(2){animation-delay:1s} .esp-temi span:nth-child(3){animation-delay:2s} .esp-temi span:nth-child(4){animation-delay:3s} .esp-temi span:nth-child(5){animation-delay:4s} .esp-temi span:nth-child(6){animation-delay:5s} .esp-temi span:nth-child(7){animation-delay:6s}
  @keyframes esp{0%,12%{border-color:var(--neon); color:var(--neon); box-shadow:0 0 14px var(--neon-glow)} 20%,100%{border-color:var(--line); color:var(--ink-2); box-shadow:none}}
  @media (prefers-reduced-motion:reduce){ .esp-temi span{animation:none} }
  @media (max-width:720px){ .wg-esperto{grid-row:auto; grid-column:1/-1} .wg.wg-esperto p{display:block; font-size:12.5px} .esp-temi span{font-size:10px; padding:5px 8px} }
  /* widget 1: carosello icone */
  .viz-icons{position:relative; width:100%; height:92px}
  .viz-icons svg{position:absolute; left:50%; top:50%; width:52px; height:52px; transform:translate(-50%,-50%) scale(.6); opacity:0; color:var(--neon); filter:drop-shadow(0 0 12px var(--neon-glow)); transition:opacity .5s var(--ease), transform .5s var(--ease)}
  .viz-icons svg.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
  .viz-icons .lbl{position:absolute; left:0; right:0; bottom:-6px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}
  /* widget 2: radar */
  .radar{width:96px; height:96px; border-radius:50%; border:1px solid rgba(37,191,200,.35); position:relative; background:radial-gradient(circle, rgba(37,191,200,.08), transparent 70%)}
  .radar::before{content:""; position:absolute; inset:22px; border-radius:50%; border:1px solid rgba(37,191,200,.25)}
  .radar .sweep{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(37,191,200,.55), transparent 28%); animation:spin 2.6s linear infinite}
  .radar .blip{position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:blip 2.6s ease-out infinite}
  @keyframes blip{0%,60%{opacity:0; transform:scale(.4)} 70%{opacity:1; transform:scale(1.2)} 100%{opacity:0; transform:scale(1)}}
  /* widget 3: ticker prezzi */
  .ticker{width:100%; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .ticker .tk{display:flex; gap:10px; width:max-content; animation:tk 14s linear infinite}
  .ticker .it{font-family:var(--mono); font-size:12px; padding:8px 12px; border:1px solid var(--line-2); border-radius:8px; background:rgba(0,32,43,.7); color:var(--ink-2); white-space:nowrap}
  .ticker .it b{color:var(--gold)}
  @keyframes tk{to{transform:translateX(-50%)}}
  /* widget 4: 3 passi che si accendono */
  .stepsviz{display:flex; gap:10px; width:100%}
  .stepsviz i{flex:1; height:56px; border-radius:10px; border:1px solid var(--line-2); background:rgba(0,32,43,.7); position:relative}
  .stepsviz i::before{content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid var(--neon); box-shadow:0 0 18px rgba(37,191,200,.5), inset 0 0 12px rgba(37,191,200,.2); opacity:0; animation:lit 3.6s infinite}
  .stepsviz i::after{content:attr(data-n); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--ink-3)}
  .stepsviz i:nth-child(2)::before{animation-delay:1.2s} .stepsviz i:nth-child(3)::before{animation-delay:2.4s}
  @keyframes lit{0%,25%{opacity:1} 35%,100%{opacity:0}}
  /* widget 5: tracker con puntino che avanza */
  .trk{width:100%; position:relative; padding:10px 0}
  .trk .line{height:3px; background:var(--line-2); border-radius:2px; position:relative}
  .trk .line i{position:absolute; left:0; top:0; height:100%; width:72%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--neon-2),var(--neon)); box-shadow:0 0 10px var(--neon-glow); animation:fill 5s ease-in-out infinite}
  .trk .pts{display:flex; justify-content:space-between; margin-top:10px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em}
  .trk .live{position:absolute; right:0; top:-12px; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--bad)}
  @keyframes fill{0%{transform:scaleX(0)} 70%,100%{transform:scaleX(1)}}
  /* widget 6: card ticket */
  .tk-card{width:100%; border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; background:rgba(0,32,43,.7); font-family:var(--mono); font-size:11.5px; color:var(--ink-2); display:grid; gap:6px; animation:floaty 4s ease-in-out infinite}
  .tk-card b{color:var(--neon)}
  .tk-card .st{color:var(--ok)}
  @keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

  /* ===== componenti pagine ===== */
  .strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px}
  .strip .item{padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); display:flex; gap:12px; align-items:flex-start}
  .strip svg{flex:none; width:22px; height:22px; color:var(--neon); margin-top:2px; filter:drop-shadow(0 0 6px var(--neon-glow))}
  .strip b{display:block; font-size:14px}
  .strip span{font-size:12.5px; color:var(--ink-3)}
  @media (max-width:860px){ .strip{grid-template-columns:1fr 1fr} }
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px}
  .step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; transition:border-color .3s, box-shadow .3s}
  .step:hover{border-color:rgba(37,191,200,.5); box-shadow:0 0 30px rgba(37,191,200,.12)}
  .step .n{font-family:var(--mono); color:var(--gold); font-size:12px; letter-spacing:.12em}
  .step h3{font-size:17px; font-weight:500; margin:10px 0 8px}
  .step p{color:var(--ink-2); font-size:14.5px; margin:0}
  @media (max-width:860px){ .steps{grid-template-columns:1fr} }
  .serv{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:34px}
  .sv{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; gap:8px; min-height:150px; text-align:left; color:var(--ink); transition:border-color .2s, transform .2s var(--ease), box-shadow .2s}
  .sv:hover{border-color:var(--neon); transform:translateY(-3px); box-shadow:0 0 24px rgba(37,191,200,.25)}
  .sv svg{width:26px; height:26px; color:var(--neon); filter:drop-shadow(0 0 6px var(--neon-glow))}
  .sv b{font-size:14.5px}
  .sv span{font-size:12.5px; color:var(--ink-3)}
  .sv .from{margin-top:auto; font-family:var(--mono); font-size:12.5px; color:var(--gold)}
  @media (max-width:860px){ .serv{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:520px){ .serv{grid-template-columns:repeat(2,1fr)} }
  .ref{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
  .rc{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s, box-shadow .3s}
  .rc:hover{border-color:rgba(37,191,200,.5); box-shadow:0 0 30px rgba(37,191,200,.12)}
  .rc .img{height:150px; background:radial-gradient(140px 100px at 50% 40%, rgba(37,191,200,.22), transparent 70%), rgba(16,34,60,.8); display:flex; align-items:center; justify-content:center; color:var(--neon)}
  .rc .img svg{width:60px; height:60px; filter:drop-shadow(0 0 12px var(--neon-glow))}
  .rc .b{padding:16px 18px 18px}
  .rc .grade{display:flex; gap:4px; margin-bottom:8px}
  .rc .grade i{flex:1; height:5px; border-radius:2px; background:var(--line-2)}
  .rc .grade i.on{background:var(--ok); box-shadow:0 0 6px var(--ok)}
  .rc b{display:block; font-size:15.5px}
  .rc .meta{font-size:12.5px; color:var(--ink-3); margin:4px 0 10px}
  .rc .pr{display:flex; justify-content:space-between; align-items:baseline}
  .rc .pr .p{font-family:var(--display); font-size:20px; color:var(--gold)}
  .rc .pr s{color:var(--ink-3); font-size:13px}
  @media (max-width:860px){ .ref{grid-template-columns:1fr} }
  .track{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; margin-top:34px; align-items:stretch}
  .ph{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
  .ph .k{width:34px; height:34px; border-radius:50%; border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--ink-3); flex:none}
  .ph.done .k{border-color:var(--ok); color:var(--ok); box-shadow:0 0 10px rgba(85,217,138,.4)}
  .ph.now .k{border-color:var(--neon); color:var(--neon); box-shadow:0 0 0 6px var(--neon-soft), 0 0 16px var(--neon-glow)}
  .ph b{display:block; font-size:15px}
  .ph span{font-size:13px; color:var(--ink-3); font-family:var(--mono)}
  .ph.now b{color:var(--neon); text-shadow:0 0 10px var(--neon-glow)}
  .livebox{background:#000; border:1px solid var(--line-2); border-radius:14px; position:relative; min-height:300px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(37,191,200,.08)}
  .livebox video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85}
  .livebox .badge{position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.6); border:1px solid var(--line-2); border-radius:6px; padding:6px 10px; font-family:var(--mono); font-size:12px}
  .livebox .cam{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); background:rgba(0,0,0,.6); padding:6px 10px; border-radius:6px}
  .livebox .c{position:relative; text-align:center; color:var(--ink); font-family:var(--mono); font-size:12.5px; padding:10px 14px; background:rgba(0,32,43,.6); border-radius:8px; margin-top:200px}
  @media (max-width:860px){ .track{grid-template-columns:1fr} }
  .card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px}
  .card h4{margin:0 0 10px; font-size:15px; font-weight:700}

  /* ===== WIZARD ===== */
  .wiz{background:rgba(0,32,43,.88); border:1px solid var(--line-2); border-radius:18px; margin-top:34px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(37,191,200,.08)}
  .wiz-head{display:flex; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line); background:rgba(8,19,36,.9)}
  .wiz-head .title{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
  @media (max-width:720px){ .prog i{width:16px} .wiz-head{gap:10px; padding:14px 16px} }
  .prog{display:flex; gap:6px; margin-left:auto}
  .prog i{width:34px; height:4px; border-radius:2px; background:var(--line-2); transition:background .3s, box-shadow .3s}
  .prog i.on{background:var(--neon); box-shadow:0 0 10px var(--neon-glow)}
  .wiz-body{padding:28px 22px 26px; min-height:380px}
  .pane{display:none; animation:fade .35s var(--ease)}
  .pane.on{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
  .pane h3{font-size:22px; font-weight:500; margin-bottom:6px}
  .pane .hint{color:var(--ink-2); font-size:14.5px; margin:0 0 20px}
  .grid-cat{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
  .cat{background:rgba(8,19,36,.9); border:1px solid var(--line); border-radius:12px; padding:16px 10px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-2); min-height:96px; transition:border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s}
  .cat svg{width:28px; height:28px}
  .cat span{font-size:13px; font-weight:600; text-align:center}
  .cat:hover{border-color:var(--neon-2); color:var(--ink); transform:translateY(-2px); box-shadow:0 0 16px rgba(37,191,200,.2)}
  .cat.sel{border-color:var(--neon); color:#fff; background:var(--neon-soft); box-shadow:0 0 18px rgba(37,191,200,.35), inset 0 0 14px rgba(37,191,200,.12)}
  .cat.sel svg{color:var(--neon); filter:drop-shadow(0 0 6px var(--neon-glow))}
  @media (max-width:760px){ .grid-cat{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:460px){ .grid-cat{grid-template-columns:repeat(2,1fr)} }
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{background:rgba(8,19,36,.9); border:1px solid var(--line-2); border-radius:999px; padding:10px 16px; color:var(--ink-2); font-weight:600; font-size:14px; min-height:44px; transition:border-color .2s,color .2s,background .2s,box-shadow .2s,transform .2s}
  .chip:hover{border-color:var(--neon-2); color:var(--ink); transform:translateY(-1px)}
  .chip.sel{border-color:var(--neon); color:#fff; background:var(--neon-soft); box-shadow:0 0 14px rgba(37,191,200,.4), inset 0 0 10px rgba(37,191,200,.15)}
  label.f{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin:18px 0 6px}
  input.f, textarea.f{width:100%; background:rgba(8,19,36,.9); border:1px solid var(--line-2); border-radius:10px; color:var(--ink); padding:12px 14px; font:inherit; font-size:15px; min-height:46px; transition:border-color .2s, box-shadow .2s}
  input.f:focus, textarea.f:focus{border-color:var(--neon); box-shadow:0 0 0 3px rgba(37,191,200,.15), 0 0 16px rgba(37,191,200,.2); outline:none}
  textarea.f{min-height:96px; resize:vertical}
  .help{font-size:12.5px; color:var(--ink-3); margin-top:6px}
  .err{color:var(--bad); font-size:13px; margin-top:8px; display:none}
  .err.on{display:block}
  .wiz-foot{display:flex; align-items:center; gap:12px; padding:16px 22px; border-top:1px solid var(--line); background:rgba(8,19,36,.9)}
  .wiz-foot .sum{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .wiz-foot .spacer{flex:1}
  .analyzing{display:grid; gap:10px; margin:6px 0 18px}
  .an{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:13px; color:var(--ink-3); padding:12px 14px; background:rgba(8,19,36,.9); border:1px solid var(--line); border-radius:10px}
  .an .sp{width:14px; height:14px; border:2px solid var(--line-2); border-top-color:var(--neon); border-radius:50%; animation:spin 1s linear infinite; flex:none}
  .an.done .sp{border:none; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:none; width:10px; height:10px; margin:0 2px}
  .an.done{color:var(--ink-2)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .result{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
  @media (max-width:860px){ .result{grid-template-columns:1fr} }
  .sintesi{color:var(--ink-2); font-size:15px; margin:0 0 14px}
  .hyp{border-top:1px solid var(--line); padding:12px 0}
  .hyp .t{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
  .hyp b{font-size:15px}
  .hyp .p{font-family:var(--mono); color:var(--neon); font-size:13px; text-shadow:0 0 8px var(--neon-glow)}
  .hyp p{margin:4px 0 0; color:var(--ink-2); font-size:13.5px}
  .bar{height:4px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden}
  .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--neon-2),var(--neon)); box-shadow:0 0 10px var(--neon-glow); width:0; transition:width .8s var(--ease)}
  .tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:4px; background:var(--panel-2); color:var(--ink-2)}
  .tag.warn{color:var(--warn)} .tag.bad{color:var(--bad)} .tag.ok{color:var(--ok)}
  .quote{position:relative}
  .quote .rows{font-family:var(--mono); font-size:13.5px; display:grid; gap:8px; margin-top:6px}
  .quote .r{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line)}
  .quote .r span:first-child{color:var(--ink-2)}
  .quote .tot{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; font-family:var(--display); font-size:24px; color:var(--gold); text-shadow:0 0 16px rgba(249,183,24,.35)}
  .quote .tot small{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; text-shadow:none}
  .quote.locked .rows, .quote.locked .tot{filter:blur(7px); user-select:none; pointer-events:none}
  .lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; background:linear-gradient(180deg,rgba(8,19,36,.35),rgba(8,19,36,.9)); border-radius:14px}
  .lock svg{width:26px; height:26px; color:var(--neon); filter:drop-shadow(0 0 8px var(--neon-glow))}
  .lock b{font-size:15px}
  .lock span{font-size:13px; color:var(--ink-2); max-width:34ch}
  .quote:not(.locked) .lock{display:none}
  .src{font-size:12px; color:var(--ink-3); margin-top:12px}
  .gate{margin-top:18px}
  .gate .frm{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media (max-width:640px){ .gate .frm{grid-template-columns:1fr} }
  .gate label.f{margin-top:0}
  .chk{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin-top:12px; cursor:pointer}
  .chk input{width:18px; height:18px; margin-top:2px; accent-color:var(--neon); flex:none}
  .opt{font-weight:400; color:var(--ink-3)}
  .up{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .uphint{font-size:12.5px; color:var(--ink-3); flex:1 1 220px}
  .upl{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
  .upl:empty{margin:0}
  .upl .it{position:relative; width:104px; height:104px; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:rgba(8,19,36,.9)}
  .upl .it img, .upl .it video{width:100%; height:100%; object-fit:cover; display:block}
  .upl .it .vid{position:absolute; inset:auto 0 0 0; padding:4px 8px; font-size:11px; font-family:var(--mono); background:rgba(3,10,20,.8); color:var(--ink-2)}
  .upl .it .del{position:absolute; top:4px; right:4px; width:26px; height:26px; min-height:0; border-radius:50%; border:none; background:rgba(3,10,20,.82); color:var(--ink); font-size:16px; line-height:1; padding:0; cursor:pointer}
  .upl .it.load{display:grid; place-items:center; font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
  details.more{margin-top:18px; border:1px solid var(--line-2); border-radius:12px; padding:0 14px}
  details.more[open]{padding-bottom:14px}
  details.more summary{cursor:pointer; padding:13px 0; font-size:13.5px; font-weight:600; color:var(--ink-2)}
  details.more summary::marker{color:var(--neon)}
  .trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
  .sent{display:none}
  .sent.on{display:block}
  .mail{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:16px}
  .mail .mh{padding:12px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12.5px; color:var(--ink-3); display:grid; gap:4px}
  .mail .mh b{color:var(--ink-2); font-weight:500}
  .mail .mb{padding:18px; font-size:14.5px; color:var(--ink-2)}
  .mail .mb p{margin:0 0 10px}
  .toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--neon); color:#00202b; padding:12px 18px; border-radius:10px; font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:80; box-shadow:0 0 30px var(--neon-glow)}
  .toast.on{opacity:1; transform:translate(-50%,0)}
  .offline{font-family:var(--mono); font-size:12px; color:var(--warn); margin-top:10px; display:none}
  .offline.on{display:block}

  /* ===== AREA CLIENTE: dashboard ===== */
  .dash{margin-top:26px}
  .dash-head{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px 20px; background:var(--panel); border:1px solid var(--line-2); border-radius:16px}
  .avatar{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--neon),var(--neon-deep)); color:#00202b; font-family:var(--display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 16px var(--neon-glow); flex:none}
  .dash-head .who b{display:block; font-size:16px}
  .dash-head .who span{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
  .dash-head .who{flex:1; min-width:160px}
  .logout{display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line-2); color:var(--ink-3); border-radius:999px; padding:7px 12px; font-weight:600; font-size:12.5px; min-height:36px; transition:all .2s; order:3}
  .logout svg{width:14px; height:14px}
  .logout:hover{color:#fff; border-color:var(--bad)}
  .dtabs{display:flex; gap:4px; padding:4px; background:rgba(0,32,43,.7); border:1px solid var(--line); border-radius:999px; flex-basis:100%; order:4}
  .dtab{flex:1; background:transparent; border:1px solid transparent; color:var(--ink-2); border-radius:999px; padding:9px 14px; font-weight:600; font-size:13.5px; min-height:40px; white-space:nowrap; transition:all .2s}
  .dtab:hover{color:#fff}
  .dtab.on{background:var(--neon-soft); color:#fff; border-color:var(--neon); box-shadow:0 0 14px rgba(37,191,200,.35)}
  @media (min-width:1000px){ .dtabs{flex-basis:auto; margin-left:auto; order:2} .logout{order:3} }
  .dpane{display:none; margin-top:18px}
  .dpane.on{display:block; animation:fade .3s var(--ease)}
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
  .kpi{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
  .kpi .v{font-family:var(--display); font-size:28px; color:var(--neon); text-shadow:0 0 14px var(--neon-glow)}
  .kpi .l{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
  @media (max-width:860px){ .kpis{grid-template-columns:1fr 1fr} }
  .two{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
  @media (max-width:900px){ .two{grid-template-columns:1fr} }
  .devs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media (max-width:900px){ .devs{grid-template-columns:1fr} }
  .dev{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; gap:14px; align-items:flex-start; transition:border-color .2s, box-shadow .2s}
  .dev:hover{border-color:rgba(37,191,200,.5); box-shadow:0 0 24px rgba(37,191,200,.12)}
  .dev > svg{width:34px; height:34px; color:var(--neon); flex:none; filter:drop-shadow(0 0 8px var(--neon-glow))}
  .dev b{display:block; font-size:15px}
  .dev .m{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin:3px 0 8px}
  .dev .badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
  .pill{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap}
  .pill.ok{color:var(--ok); border-color:rgba(85,217,138,.4)} .pill.now{color:var(--neon); border-color:rgba(37,191,200,.5)} .pill.warn{color:var(--gold); border-color:rgba(249,183,24,.4)} .pill.off{color:var(--ink-3)}
  .rep{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
  .rep-h{display:grid; grid-template-columns:130px 1.5fr 1fr 120px 100px 20px; gap:12px; align-items:center; padding:14px 18px; cursor:pointer; font-size:14px}
  .rep-h:hover{background:rgba(37,191,200,.04)}
  .rep-h .id{font-family:var(--mono); color:var(--neon); font-size:12.5px}
  .rep-h .t b{display:block} .rep-h .t span{font-size:12.5px; color:var(--ink-3)}
  .rep-h .d{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
  .rep-h .p{font-family:var(--mono); color:var(--gold); text-align:right}
  .rep-h .car{width:10px; height:10px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); transition:transform .2s; justify-self:end}
  .rep.open .rep-h .car{transform:rotate(225deg)}
  .rep-b{display:none; border-top:1px solid var(--line); padding:18px; gap:18px; grid-template-columns:1fr 1fr}
  .rep.open .rep-b{display:grid; animation:fade .3s var(--ease)}
  @media (max-width:900px){ .rep-h{grid-template-columns:1fr 1fr; row-gap:6px} .rep-h .car{display:none} .rep-b{grid-template-columns:1fr} }
  .rep-b h6{margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--neon)}
  .rep-b p{margin:0 0 8px; font-size:13.5px; color:var(--ink-2)}
  .rep-b p b{color:var(--ink)}
  .tl{display:grid; gap:6px; font-size:13.5px; margin-bottom:14px}
  .tl div{display:flex; gap:10px; align-items:baseline}
  .tl i{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); flex:none; transform:translateY(-1px)}
  .tl .now i{background:var(--neon); box-shadow:0 0 10px var(--neon-glow)}
  .tl .todo i{background:var(--line-2); box-shadow:none}
  .tl span{font-family:var(--mono); font-size:12px; color:var(--ink-3); min-width:150px}
  .parts{font-family:var(--mono); font-size:12.5px; display:grid; gap:2px; color:var(--ink-2); margin-bottom:12px}
  .parts div{display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding:5px 0}
  .parts div:last-child{border-bottom:none; color:var(--gold)}
  .media-row{display:flex; gap:10px; flex-wrap:wrap}
  .thumb{position:relative; width:118px; height:78px; border-radius:8px; overflow:hidden; border:1px solid var(--line-2); cursor:pointer; background:#000; padding:0; transition:transform .2s, box-shadow .2s}
  .thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.85}
  .thumb:hover{transform:translateY(-2px); box-shadow:0 0 14px rgba(37,191,200,.4)}
  .thumb .pl{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff}
  .thumb .pl svg{width:30px; height:30px; filter:drop-shadow(0 0 8px rgba(0,0,0,.8))}
  .thumb .tag2{position:absolute; left:6px; bottom:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,32,43,.75); color:var(--neon); padding:2px 6px; border-radius:4px}
  .dl-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
  .btn-dl{min-height:40px; padding:0 14px; font-size:13px}
  .btn-dl svg{width:16px; height:16px}
  .files{display:grid; gap:8px}
  .file{display:grid; grid-template-columns:28px 1fr auto auto; gap:12px; align-items:center; padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; font-size:13.5px}
  .file > svg{width:20px; height:20px; color:var(--neon)}
  .file .n{font-weight:600} .file .s{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
  .file .sz{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
  .modal{position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.75)}
  .modal.open{display:flex}
  .modal .box{position:relative; max-width:min(960px,100%); width:100%; background:var(--ground); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(37,191,200,.12)}
  .modal video, .modal img{display:block; width:100%; max-height:70vh; object-fit:contain; background:#000}
  .modal .mt{display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}
  .modal .mt .spacer{flex:1}
  .modal .close{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:rgba(0,32,43,.7); color:#fff; z-index:2}

  /* ===== FOOTER, FAB, DRAWER ===== */
  footer{border-top:1px solid var(--line); padding:36px 0 0; color:var(--ink-3); font-size:14px; background:linear-gradient(180deg, rgba(0,32,43,.85), rgba(0,32,43,.97))}
  footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1.5fr .8fr; gap:22px 40px; align-items:start}footer .cols > div:nth-child(3) ul{grid-template-columns:1fr 1fr; column-gap:28px}
  footer .fbrand .logo{margin:0 0 10px}
  footer .fbrand p{margin:0; max-width:46ch; line-height:1.6}
  footer h5{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--neon); margin:0 0 10px; text-shadow:0 0 10px var(--neon-glow)}
  footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
  footer li{display:flex; gap:10px; align-items:flex-start}
  footer li svg{width:16px; height:16px; flex:none; color:var(--neon); margin-top:3px; filter:drop-shadow(0 0 5px var(--neon-glow))}
  footer a{text-decoration:none; color:var(--ink-2); transition:color .2s} footer a:hover{color:var(--neon)}
  .social{display:flex; gap:12px; flex-wrap:wrap}
  .social a{width:44px; height:44px; border-radius:14px; border:1.5px solid var(--neon); background:rgba(37,191,200,.06); display:flex; align-items:center; justify-content:center; color:var(--neon); box-shadow:0 4px 0 #0b5c62, 0 0 12px rgba(37,191,200,.3), inset 0 0 10px rgba(37,191,200,.12); transition:transform .18s var(--ease), box-shadow .18s, background .18s}
  .social a svg{width:24px; height:24px; filter:drop-shadow(0 0 6px var(--neon-glow))}
  .social a:hover{transform:translateY(-3px); background:rgba(37,191,200,.16); box-shadow:0 7px 0 #0b5c62, 0 0 22px rgba(37,191,200,.75), 0 0 50px rgba(37,191,200,.35), inset 0 0 14px rgba(37,191,200,.2)}
  .social a:active{transform:translateY(2px); box-shadow:0 1px 0 #0b5c62, 0 0 10px rgba(37,191,200,.4)}
  .soc-note{display:block; margin-top:10px; font-size:12.5px; color:var(--ink-3); max-width:30ch}
  footer .bar{margin-top:22px; border-top:1px solid var(--line); padding:14px 0 18px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
  @media (max-width:1000px){ footer .cols{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ footer .cols{grid-template-columns:1fr} footer .cols > div:nth-child(3) ul{grid-template-columns:1fr} }
  .fab{position:fixed; right:22px; bottom:22px; z-index:60; border-radius:999px; padding:0 22px 0 16px; height:56px; font-size:15px}
  .fab svg{width:22px; height:22px}
  .fab[hidden]{display:none}
  @media (max-width:720px){ .fab{padding:0; width:56px; justify-content:center; right:14px; bottom:14px} .fab .lbl{display:none} }
  .drawer{position:fixed; inset:0; z-index:70; display:none}
  .drawer.open{display:block}
  .drawer .bg{position:absolute; inset:0; background:rgba(0,0,0,.72)}
  .drawer .panel{position:absolute; top:0; right:0; bottom:0; width:min(680px,100%); background:var(--ground); border-left:1px solid var(--line-2); overflow:auto; padding:18px; animation:slide .4s var(--ease); box-shadow:-20px 0 80px rgba(37,191,200,.08)}
  @keyframes slide{from{transform:translateX(40px); opacity:0} to{transform:none; opacity:1}}
  .drawer .ph-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
  .drawer .ph-top h3{font-size:18px; font-weight:500}
  .drawer .close{margin-left:auto; width:44px; height:44px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel-solid); color:var(--ink)}
  .drawer .wiz{margin-top:0; box-shadow:none}
  /* ===== MOBILE (in fondo: deve vincere su tutte le regole precedenti) ===== */
  @media (max-width:720px){ .hero-wrap{padding-top:44px!important} .hero h1{font-size:clamp(30px,9vw,40px)} .hero p{font-size:16px} section.page > .wrap{padding-top:44px; padding-bottom:64px} section.page h2{font-size:clamp(24px,7vw,32px)} .actions .btn{width:100%} .strip{grid-template-columns:1fr 1fr; gap:8px} .strip .item{padding:12px; flex-direction:column; gap:8px} .strip b{font-size:13px} .strip span{font-size:11.5px} .kpis{grid-template-columns:1fr 1fr} .widgets{grid-template-columns:1fr 1fr; gap:10px; margin-top:22px} .wg{min-height:0; padding:14px 12px; gap:8px; border-radius:14px} .wg .top .open{display:none} .wg .viz{min-height:64px} .wg h3{font-size:13.5px; line-height:1.25} .wg p{display:none} .viz-icons{height:64px} .viz-icons svg{width:36px; height:36px} .viz-icons .lbl{font-size:9.5px; bottom:-4px} .radar{width:64px; height:64px} .radar::before{inset:15px} .stepsviz i{height:40px} .stepsviz i::after{font-size:10px} .trk .pts{font-size:8.5px} .tk-card{font-size:10px; padding:8px 10px} .ticker .it{font-size:10.5px; padding:6px 8px} .dtabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; border-radius:16px} .dtab{padding:10px 8px; font-size:13px; text-align:center} .logout{margin-left:auto} .rep-h{grid-template-columns:1fr; row-gap:4px} .rep-h .p{text-align:left} .grid-cat{grid-template-columns:repeat(2,1fr)} .wiz-body{padding:20px 14px} .wiz-foot{flex-wrap:wrap} .wiz-foot .sum{display:none} .cap{display:none} }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }