:root{
    --ink:#0a0e14; --ink-2:#131a24; --panel:#161d28; --line:#232c39;
    --fog:#8a97a8; --paper:#eef2f6; --white:#fff;
    --volt:#ff3d2e; --volt-deep:#c9241a; --glow:#ff5c4d;
    --grid:rgba(255,61,46,.16);
    --font-display:'Arial Black','Helvetica Neue',Impact,sans-serif;
    --font-body:'Helvetica Neue',Arial,system-ui,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);background:var(--ink);color:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
  .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--volt);font-weight:700;display:inline-block}

  /* NAV */
  header{position:sticky;top:0;z-index:50;background:rgba(10,14,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
  .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 0 rgba(255,61,46,.7);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,61,46,.55)}70%{box-shadow:0 0 0 12px rgba(255,61,46,0)}100%{box-shadow:0 0 0 0 rgba(255,61,46,0)}}
  .brand small{display:block;font-size:.62rem;font-weight:500;color:var(--fog);letter-spacing:.18em;text-transform:uppercase}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a.link{font-size:.85rem;color:var(--fog);font-weight:600;transition:color .2s}
  .nav-links a.link:hover{color:#fff}
  .nav-cta{font-size:.82rem;font-weight:700;padding:11px 20px;border-radius:2px;background:var(--volt);color:#fff;letter-spacing:.03em;transition:background .2s,transform .2s}
  .nav-cta:hover{background:var(--volt-deep);transform:translateY(-1px)}
  @media(max-width:860px){.nav-links a.link{display:none}}
  @media(max-width:640px){.brand small{display:none}}

  /* HERO */
  .hero{position:relative;padding:96px 0 88px;overflow:hidden}
  .hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 30%,transparent 78%);animation:drift 18s linear infinite}
  @keyframes drift{from{background-position:0 0}to{background-position:26px 26px}}
  .hero-inner{position:relative;z-index:2;max-width:760px}
  .hero h1{font-family:var(--font-display);font-size:clamp(2.7rem,7vw,5.4rem);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;margin:22px 0 0;color:#fff}
  .hero h1 .lit{color:var(--volt);text-shadow:0 0 26px rgba(255,61,46,.5)}
  .hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--fog);max-width:560px;margin:26px 0 0;font-weight:400}
  .hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;padding:16px 30px;border-radius:2px;letter-spacing:.02em;transition:transform .2s,background .2s,border-color .2s;cursor:pointer}
  .btn-primary{background:var(--volt);color:#fff}
  .btn-primary:hover{background:var(--volt-deep);transform:translateY(-2px)}
  .btn-ghost{border:1px solid var(--line);color:var(--paper);background:transparent}
  .btn-ghost:hover{border-color:var(--volt);color:#fff;transform:translateY(-2px)}
  .hero-spec{display:flex;gap:34px;margin-top:56px;flex-wrap:wrap;position:relative;z-index:2}
  .hero-spec .s b{font-family:var(--font-display);font-size:1.9rem;color:#fff;display:block;line-height:1}
  .hero-spec .s span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}

  /* IMAGE FRAME (placeholder pronto per foto reali) */
  .imgframe{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:linear-gradient(145deg,var(--panel),var(--ink-2))}
  .imgframe .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--fog)}
  .imgframe .ph svg{opacity:.5}
  .imgframe .ph small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
  .imgframe .phgrid{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px;opacity:.4}
  .imgframe img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
  .imgframe .cap{position:absolute;left:0;bottom:0;z-index:3;background:linear-gradient(transparent,rgba(10,14,20,.92));width:100%;padding:26px 20px 16px;font-size:.82rem;color:var(--paper)}
  .imgframe .cap b{color:var(--volt);display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}

  .hero-media{position:relative;z-index:2;margin-top:60px}
  .hero-media .imgframe{aspect-ratio:21/8}

  /* MARQUEE */
  .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden;white-space:nowrap;padding:15px 0}
  .marquee-track{display:inline-block;animation:scroll 26s linear infinite}
  .marquee span{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;letter-spacing:.06em;-webkit-text-stroke:1px var(--fog);color:transparent;margin:0 26px}
  .marquee span.hot{-webkit-text-stroke:1px var(--volt)}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{position:relative}
  .block{padding:92px 0}
  .sec-head{max-width:660px;margin-bottom:52px}
  .sec-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.02;letter-spacing:-.01em;margin-top:14px;color:#fff}
  .sec-head p{color:var(--fog);margin-top:16px;font-size:1.05rem}

  /* USE CASES */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .case{background:var(--ink-2);padding:34px 28px;transition:background .25s}
  .case:hover{background:var(--panel)}
  .case .num{font-family:var(--font-display);color:var(--volt);font-size:.9rem;letter-spacing:.1em}
  .case h3{font-size:1.15rem;margin:14px 0 8px;color:#fff;font-weight:800}
  .case p{color:var(--fog);font-size:.92rem}
  @media(max-width:820px){.cases{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.cases{grid-template-columns:1fr}}

  /* NON LASCIAMO NIENTE AL CASO */
  .process-intro{max-width:720px}
  .process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
  .step{background:var(--ink-2);padding:32px 26px;position:relative;transition:background .25s}
  .step:hover{background:var(--panel)}
  .step .k{font-family:var(--font-display);font-size:2.4rem;color:var(--line);line-height:1;transition:color .25s}
  .step:hover .k{color:var(--volt)}
  .step h3{color:#fff;font-size:1.1rem;margin:10px 0 8px;font-weight:800}
  .step p{color:var(--fog);font-size:.9rem}
  @media(max-width:860px){.process{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.process{grid-template-columns:1fr}}
  .promise{margin-top:46px;border-left:3px solid var(--volt);padding:6px 0 6px 24px;max-width:720px}
  .promise b{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:1.3rem;display:block;margin-bottom:8px}
  .promise p{color:var(--fog)}

  /* SPECS */
  .specs-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
  .spec-table{width:100%;border-collapse:collapse}
  .spec-table tr{border-bottom:1px solid var(--line)}
  .spec-table th{text-align:left;padding:16px 0;font-weight:500;color:var(--fog);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;width:52%}
  .spec-table td{text-align:right;padding:16px 0;font-weight:700;color:#fff;font-size:1rem}
  .spec-note{margin-top:24px;font-size:.82rem;color:var(--fog);line-height:1.7}
  .spec-visual{background:linear-gradient(145deg,var(--panel),var(--ink-2));border:1px solid var(--line);border-radius:3px;padding:34px;position:relative;overflow:hidden}
  .spec-visual .badge{position:absolute;top:18px;right:18px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--volt);border:1px solid var(--volt);padding:5px 10px;border-radius:2px}
  .pxgrid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:26px 0 8px}
  .pxgrid i{aspect-ratio:1;border-radius:1px;background:var(--line)}
  .spec-visual h4{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:1.3rem;margin-bottom:6px}
  .spec-visual p{color:var(--fog);font-size:.88rem}
  @media(max-width:820px){.specs-wrap{grid-template-columns:1fr;gap:40px}}

  /* WHY */
  .why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .why .card{border-top:2px solid var(--volt);padding-top:20px}
  .why .card b{display:block;font-size:1.05rem;color:#fff;margin-bottom:8px}
  .why .card p{color:var(--fog);font-size:.9rem}
  @media(max-width:820px){.why{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.why{grid-template-columns:1fr}}

  /* QUOTE/FORM */
  .quote{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .quote-grid h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;color:#fff;letter-spacing:-.01em}
  .quote-grid .sub{color:var(--fog);margin-top:20px;font-size:1.05rem}
  .contact-list{margin-top:30px;display:flex;flex-direction:column;gap:14px}
  .contact-list a{display:flex;align-items:center;gap:12px;color:var(--paper);font-weight:600;font-size:1rem;transition:color .2s}
  .contact-list a .ic{width:20px;text-align:center;color:var(--volt)}
  .contact-list a:hover{color:var(--volt)}
  form{display:grid;gap:14px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
  .field input,.field textarea,.field select{background:var(--ink);border:1px solid var(--line);color:#fff;padding:13px 14px;border-radius:2px;font-family:inherit;font-size:.95rem;transition:border-color .2s}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--volt)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  form .btn-primary{justify-content:center;margin-top:6px;border:none;font-family:inherit;width:100%}
  .form-fine{font-size:.72rem;color:var(--fog);margin-top:4px}
  @media(max-width:820px){.quote-grid{grid-template-columns:1fr;gap:40px}.row2{grid-template-columns:1fr}}

  /* FAQ */
  .faq details{border-bottom:1px solid var(--line);padding:6px 0}
  .faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:1.05rem;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pm{color:var(--volt);font-family:var(--font-display);font-size:1.4rem;transition:transform .2s}
  .faq details[open] summary .pm{transform:rotate(45deg)}
  .faq details p{color:var(--fog);padding:0 0 22px;max-width:760px}

  /* FOOTER */
  footer{padding:56px 0 40px;border-top:1px solid var(--line);background:var(--ink)}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-start}
  .foot .brand{margin-bottom:12px}
  .foot p{color:var(--fog);font-size:.85rem;max-width:320px}
  .foot .col b{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:14px}
  .foot .col a{display:block;color:var(--fog);font-size:.9rem;margin-bottom:8px;transition:color .2s}
  .foot .col a:hover{color:var(--volt)}
  .legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--fog);font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

  /* WHATSAPP FLOAT */
  .wa{position:fixed;right:20px;bottom:20px;z-index:60;background:#1faf52;color:#fff;font-weight:700;font-size:.9rem;padding:14px 20px;border-radius:40px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .2s}
  .wa:hover{transform:translateY(-2px)}
  @media(max-width:520px){.wa span{display:none}.wa{padding:15px;border-radius:50%}}

  /* HERO PRODUCT (presentazione grafica, non foto) */
  .hero-product{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center;border:1px solid var(--line);border-radius:3px;background:linear-gradient(145deg,var(--panel),var(--ink-2));padding:20px;overflow:hidden}
  .hp-screen{position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:#05070b;border:1px solid var(--line)}
  .hp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .hp-pixels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(32,1fr);grid-auto-rows:1fr;gap:2px;padding:8px;z-index:1;opacity:.28;mix-blend-mode:screen}
  .hp-pixels i{border-radius:1px;background:var(--line)}
  .hp-scan{position:absolute;top:0;left:0;width:100%;height:40%;z-index:2;background:linear-gradient(180deg,transparent,rgba(255,61,46,.12),transparent);animation:scan 4s linear infinite}
  .hp-note{font-size:.72rem;color:var(--fog);margin-top:14px;font-style:italic}
  @keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
  .hp-info .eyebrow{margin-bottom:12px}
  .hp-info p{color:var(--fog);font-size:.95rem}
  .hp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .hp-tags span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);border:1px solid var(--line);padding:6px 11px;border-radius:2px}
  @media(max-width:720px){.hero-product{grid-template-columns:1fr;gap:22px}}

  /* PRODUCT GRID */
  .prod-banner{border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:24px;background:#fff}
  .prod-banner img{width:100%;height:auto;display:block}
  .techgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
  .techcard{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:22px;transition:border-color .25s}
  .techcard:hover{border-color:var(--volt)}
  .techviz{background:#fff;border-radius:2px;overflow:hidden;margin-bottom:16px;aspect-ratio:1024/427;display:flex;align-items:center;justify-content:center}
  .techviz img{width:100%;height:100%;object-fit:cover;display:block}
  .techcard h3{color:#fff;font-size:1.05rem;font-weight:800;margin-bottom:6px}
  .techcard p{color:var(--fog);font-size:.88rem}
  @media(max-width:820px){.techgrid{grid-template-columns:1fr}}
  .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:14px}
  .prodgrid .imgframe{position:relative}
  .prodgrid .imgframe img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
  @media(max-width:720px){.prodgrid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}}
  @media(max-width:480px){.prodgrid{grid-template-columns:1fr;grid-auto-rows:200px}}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
  :focus-visible{outline:2px solid var(--volt);outline-offset:3px}
  /* ZONE SERVITE */
  .zonegrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:820px}
  .zonecol b{display:block;color:var(--volt);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
  .zonecol a{display:block;color:var(--paper);font-size:1.05rem;font-weight:600;padding:9px 0;border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s}
  .zonecol a:hover{color:var(--volt);padding-left:8px}
  @media(max-width:640px){.zonegrid{grid-template-columns:1fr;gap:30px}}

  /* PRODUCT — immagine principale */
  .prod-hero{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:24px;display:flex;align-items:center;justify-content:center;padding:30px}
  .prod-hero img{width:100%;max-width:760px;height:auto;display:block}
  .techgrid-2{grid-template-columns:1fr 1fr;max-width:760px;margin:0 auto}
  @media(max-width:820px){.techgrid-2{grid-template-columns:1fr}}