/* ============================================================
   MECTOFLY — versione DARK  ·  contenuti rev. 02 (post-call CEO)
   Struttura identica alla light: cambiano solo colori e ombre.
   Layout, spaziature e tipografia allineati ai frame Figma
   "1440w dark" / iPhone 393.
   Font: Gotham e basta — Book 400 / Medium 500 / Bold 700.
   Nessun font-weight 600: non esiste in Gotham, il browser lo
   sintetizzerebbe con un finto grassetto.
   ============================================================ */

@font-face{font-family:Gotham;src:url("assets/fonts/Gotham-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gotham;src:url("assets/fonts/Gotham-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gotham;src:url("assets/fonts/Gotham-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#050506; --deep:#020203;
  --text:#ededf0; --muted:#8a8f98;
  --accent:#007dba; --accent-soft:rgba(0,125,186,.24); --pink:#ff3484;
  --border:rgba(255,255,255,.065); --border-hi:rgba(255,255,255,.11);
  --card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  --card-hi:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  --halo:rgba(0,125,186,.11);
  --shadow:0 0 0 1px rgba(255,255,255,.01),0 18px 50px rgba(0,0,0,.25);
  --display:Gotham,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4.4vw,63px);
  --max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-open:cubic-bezier(.85,0,.1,1);
  /* scala dei raggi. Per gli elementi annidati vale: interno = esterno − distanza dal bordo.
     Il pill non è un raggio ma una forma: si usa solo per i controlli. */
  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:28px; --r-pill:999px;
  /* zone occupate dalle barre di Safari: 0 su desktop e su Android */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
/* l'header fisso occupa 122px: le ancore devono fermarsi sotto, non dietro */
section[id],article[id],.acc[id]{scroll-margin-top:150px}
/* niente overflow-x su html: su iOS 26 Safari qualunque overflow sulla radice
   (hidden o clip) interferisce con la gestione barra/viewport e può lasciare
   layout viewport e viewport visivo disallineati (i fixed finiscono ~100px più
   in basso e il contenuto "esce" dal bordo alto). Il guard orizzontale non
   serve comunque: ogni elemento che sborda (glow di .ambient, .cta-glow,
   .hero-visual al 118%, visual delle card) è già ritagliato dal proprio
   contenitore con overflow:hidden locale. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* ATTENZIONE — non rimettere z-index negativi qui sotto.
   .ambient era fixed con z-index:-3. Un elemento a indice negativo nel contesto
   radice obbliga il browser a promuovere tutto il resto della pagina su un
   livello composito separato, che non segue il ritaglio del flusso normale: su
   iOS il contenuto veniva disegnato fuori dal viewport, dietro le barre di
   Safari, mentre lo sfondo restava fermo. Con .ambient a 0 e il contenuto a 1
   il comportamento torna quello nativo. */
main,.footer-band{position:relative;z-index:1}
.hero>*:not(.hero-visual){position:relative;z-index:1}

body{position:relative;margin:0;width:100%;max-width:100%;overscroll-behavior-x:none;color:var(--text);background:var(--bg);font-family:var(--display);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
body.menu-open{overflow-y:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* niente trascinamento di immagini e loghi (né il menu da pressione lunga su iOS) */
img,svg,.logo-mark,picture{-webkit-user-drag:none;user-drag:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,p{margin-top:0}

/* ---------- sfondo ---------- */
.ambient{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(140% 95% at 50% 0%,#0a2634 0%,#08202c 10%,#071a24 20%,#061520 30%,#051119 40%,#040d13 50%,#030a0f 60%,#02080b 70%,#020608 80%,#020406 90%,#020203 100%)}
.ambient i{position:absolute;border-radius:50%}
.ambient i:nth-child(1){width:1500px;height:760px;left:calc(50% - 750px);top:-330px;background:radial-gradient(closest-side,rgba(0,125,186,0.3) 0%,rgba(0,125,186,0.285) 9%,rgba(0,125,186,0.255) 18%,rgba(0,125,186,0.213) 27%,rgba(0,125,186,0.168) 36%,rgba(0,125,186,0.126) 45%,rgba(0,125,186,0.087) 54%,rgba(0,125,186,0.057) 63%,rgba(0,125,186,0.033) 72%,rgba(0,125,186,0.0165) 81%,rgba(0,125,186,0.006) 90%,rgba(0,125,186,0.0) 100%)}
.ambient i:nth-child(2){width:1300px;height:900px;right:-360px;top:16%;background:radial-gradient(closest-side,rgba(0,125,186,0.11) 0%,rgba(0,125,186,0.1045) 9%,rgba(0,125,186,0.0935) 18%,rgba(0,125,186,0.0781) 27%,rgba(0,125,186,0.0616) 36%,rgba(0,125,186,0.0462) 45%,rgba(0,125,186,0.0319) 54%,rgba(0,125,186,0.0209) 63%,rgba(0,125,186,0.0121) 72%,rgba(0,125,186,0.006) 81%,rgba(0,125,186,0.0022) 90%,rgba(0,125,186,0.0) 100%)}

/* ---------- veil (sfocatura pagina a menu aperto) ---------- */
.page-veil{position:fixed;z-index:90;inset:0;opacity:0;visibility:hidden;pointer-events:none;background:rgba(3,5,7,.42);backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85);transition:opacity .5s var(--ease),visibility .5s var(--ease)}
body.panel-open .page-veil{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- header espandibile ---------- */
.header{position:fixed;z-index:100;isolation:isolate;top:calc(48px + var(--safe-top));left:50%;width:min(calc(100% - 132px),1308px);overflow:hidden;border-radius:var(--r-pill);background:rgba(44,44,44,.5);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transform:translateX(-50%);
  /* chiusura: la pill torna tonda solo a pannello richiuso, altrimenti il raggio si deforma mentre l'altezza cala */
  transition:top .3s var(--ease),border-radius 0s linear .55s,background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease),-webkit-backdrop-filter .45s var(--ease)}
.header.open{border-radius:var(--r-xl);background:rgba(26,28,31,.6);
  backdrop-filter:blur(34px) saturate(1.6);-webkit-backdrop-filter:blur(34px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px rgba(0,0,0,.55);
  /* apertura: il raggio scende a 28px prima che l'altezza cresca. Con 999px il browser
     riscala il raggio su meta' del lato corto: crescendo in altezza gli angoli si gonfiano. */
  transition:top .3s var(--ease),border-radius 0s linear 0s,background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease),-webkit-backdrop-filter .45s var(--ease)}
.header-bar{height:74px;padding:0 15px 0 43px;display:flex;align-items:center;justify-content:space-between}
.logo-mark{width:122px;height:auto;display:block;color:#fff;overflow:visible}
.logo img{width:122px}

/* ---------- logo: le lettere si formano, poi lineetta e pallino ---------- */
.lm-letter,.lm-bar,.lm-dot{transform-box:fill-box}
/* due tempi. Il blur delle lettere va spento appena finisce (1.33s): finche' resta,
   il figlio e' su un layer composito e il clip arrotondato dell'header non lo segue,
   percio' la pill si vede squadrata. Lineetta e pallino chiudono dopo, senza filtri. */
.logo-mark.letters-done .lm-letter{filter:none;animation:none;opacity:1;transform:none;will-change:auto}
.logo-mark.done .lm-letter,.logo-mark.done .lm-bar,.logo-mark.done .lm-dot{
  filter:none;animation:none;opacity:1;transform:none;will-change:auto}
.lm-letter{opacity:0;filter:blur(9px);transform:translateY(6px);
  animation:lm-in .62s var(--ease-open) forwards;
  animation-delay:calc(.18s + var(--i) * .075s)}
.lm-bar{opacity:0;transform-origin:left center;transform:scaleX(0);
  animation:lm-bar .8s cubic-bezier(.92,0,1,1) forwards 1.55s}
.lm-dot{opacity:0;transform-origin:center;transform:scale(0);
  animation:lm-dot .7s cubic-bezier(1,0,0,1) forwards 2.25s}

@keyframes lm-in{
  0%  {opacity:0;filter:blur(9px);transform:translateY(6px)}
  60% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes lm-bar{from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:none}}
@keyframes lm-dot{from{opacity:0;transform:scale(0)} to{opacity:1;transform:none}}
.header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;font-family:var(--display);font-size:13px;font-weight:500;color:#fff}
.header nav>a,.nav-trigger{position:relative;opacity:.92;transition:opacity .2s}
.header nav>a:hover,.nav-trigger:hover{opacity:.6}
.nav-trigger{padding:0;border:0;background:none;color:inherit;font-family:var(--display);font-size:13px;font-weight:500;cursor:pointer}
.nav-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
.header.open .nav-trigger{opacity:1}
.header.open .nav-trigger::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:24px}

/* pannello che espande la pill */
.header-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.header.open .header-panel{grid-template-rows:1fr}
.header-panel-inner{overflow:hidden;min-height:0}
.panel-solutions{padding:36px 43px 48px}
.panel-solutions-inner{display:flex;flex-direction:column;align-items:flex-start}
/* in colonna flex i figli si comprimerebbero mentre il contenitore cresce da altezza 0 */
.panel-solutions-inner>*{flex:0 0 auto}
.header-panel-inner>*{flex-shrink:0}
.panel-sub-trigger{display:none}
.panel-label.second{margin-top:26px;padding-top:22px;border-top:1px solid var(--border);width:100%}
.panel-label{margin-bottom:16px;color:#fff;font-family:var(--display);font-size:14px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease) .06s,transform .4s var(--ease) .06s}
.panel-solutions a{padding:8px 0;color:#8f959c;font-family:var(--display);font-size:17px;font-weight:400;line-height:1.1;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .25s var(--ease)}
.header.open .panel-label,.header.open .panel-solutions a{opacity:1;transform:none}
.header.open .panel-label{opacity:1}
.header.open .panel-solutions a:nth-of-type(1){transition-delay:.10s}
.header.open .panel-solutions a:nth-of-type(2){transition-delay:.15s}
.header.open .panel-solutions a:nth-of-type(3){transition-delay:.20s}
.header.open .panel-solutions a:nth-of-type(4){transition-delay:.25s}
.header.open .panel-solutions a:nth-of-type(5){transition-delay:.30s}
/* hover: dopo la cascata, altrimenti i delay dell'entrata lo rallentano */
.header.open .panel-solutions a:hover{color:#fff;opacity:1;
  transition:color .16s ease-out,opacity .16s ease-out;transition-delay:0s}
.header.open .panel-label.second{transition-delay:.24s}
.panel-mobile{display:none}
.menu{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border-hi);border-radius:50%;background:rgba(255,255,255,.05)}
.menu span{display:block;width:18px;height:1.5px;margin:0;background:var(--text);transition:.2s}
.menu em{position:absolute;width:1px;height:1px;overflow:hidden}

/* ---------- bottoni ---------- */
.button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:48px;padding:0 24px;border-radius:var(--r-pill);font-family:var(--display);font-size:13px;font-weight:500;line-height:20px;white-space:nowrap;transition:transform .2s,background .2s}
.button span{font-family:var(--display);font-size:13px}
.button::before{content:"";position:absolute;inset:-1px;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transition:transform .55s}
.button:hover::before{transform:translateX(110%)}
.button:hover{transform:translateY(-2px)}
.button:active{transform:scale(.98)}
.primary{color:#fff;background:var(--accent)}
.primary:hover{background:#0090d6}
.secondary{color:var(--text);border:1px solid var(--border);background:rgba(255,255,255,.04)}
.secondary:hover{background:rgba(255,255,255,.08);border-color:var(--border-hi)}
.button.no-ico{gap:0}
.header .primary{height:44px;padding:0 20px;gap:10px}
.button:focus-visible,.header a:focus-visible,.menu:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(clamp(150px,17vw,232px) + var(--safe-top)) var(--pad) 0;text-align:center}
.eyebrow{margin:0 0 14px;color:#fff;font-family:var(--display);font-weight:400;font-size:9.8px;line-height:15.5px;letter-spacing:1.6px;text-transform:uppercase}
h1{margin:0 0 16px;font-family:var(--display);font-weight:500;font-size:clamp(36px,5.6vw,80px);line-height:.96;letter-spacing:-.045em;background:linear-gradient(180deg,#fff 25%,rgba(255,255,255,.68));-webkit-background-clip:text;background-clip:text;color:transparent}
h1 em{display:block;font-style:normal;background:linear-gradient(90deg,#fff,#007dba 50%,#003b58);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:689px;margin:0 auto 36px;color:var(--muted);font-family:var(--display);font-size:clamp(15px,1.25vw,18px);line-height:1.55}
.hero-actions{display:flex;justify-content:center;gap:35px}
.hero-visual{position:relative;width:min(869px,96%);margin:-24px auto 0;z-index:0}
.hero-visual img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.28) 6%,rgba(0,0,0,.55) 10%,rgba(0,0,0,.8) 14%,rgba(0,0,0,.95) 18%,#000 23%,#000 77%,rgba(0,0,0,.95) 82%,rgba(0,0,0,.8) 86%,rgba(0,0,0,.55) 90%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.08) 97%,transparent 100%),
                     linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 72%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.32) 87%,rgba(0,0,0,.13) 93%,rgba(0,0,0,.03) 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.28) 6%,rgba(0,0,0,.55) 10%,rgba(0,0,0,.8) 14%,rgba(0,0,0,.95) 18%,#000 23%,#000 77%,rgba(0,0,0,.95) 82%,rgba(0,0,0,.8) 86%,rgba(0,0,0,.55) 90%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.08) 97%,transparent 100%),
             linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 72%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.32) 87%,rgba(0,0,0,.13) 93%,rgba(0,0,0,.03) 97%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ---------- sezioni ---------- */
.section{max-width:var(--max);margin:0 auto;padding:clamp(90px,10vw,168px) var(--pad) clamp(80px,9vw,150px);border-top:1px solid var(--border)}
.section-head{margin-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.section-head h2{text-align:center}
.section-label{margin:0;color:var(--accent);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:1.4px;line-height:1;text-transform:uppercase}
h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.9vw,70px);line-height:1;letter-spacing:-.05em;background:linear-gradient(180deg,#fff,rgba(255,255,255,.62));-webkit-background-clip:text;background-clip:text;color:transparent}
.claim-action{display:flex;justify-content:center;margin:-28px 0 56px}
.section-claim{max-width:62ch;margin:0 auto 56px;text-align:center;color:var(--muted);font-family:var(--display);font-size:18px;line-height:1.65}
.section-claim em{font-style:normal;color:var(--text)}

/* ---------- card comuni ---------- */
.card,.strength,.sector{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 10px var(--halo),var(--shadow);transition:transform .28s var(--ease),border-color .28s,background .28s,box-shadow .28s}
.product.spotlight:hover{transform:translateY(-4px);border-color:var(--border-hi);box-shadow:0 0 0 10px rgba(0,125,186,.16),0 26px 70px rgba(0,0,0,.36)}
.spotlight:hover{transform:translateY(-4px);border-color:var(--border-hi);background:var(--card-hi);box-shadow:0 0 0 10px rgba(0,125,186,.16),0 0 0 1px rgba(255,255,255,.025),0 26px 70px rgba(0,0,0,.36)}
.card-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--display);font-size:12px;line-height:12.4px;letter-spacing:.64px;color:var(--accent);text-transform:uppercase}
.card-head i{color:#b4b7c0;font-size:17px;font-style:normal;line-height:1}

/* ---------- icona freccia (arrow-icon.svg, nativa ↗ — inline: niente fetch) ---------- */
.ico{display:inline-block;flex:0 0 auto;width:11px;height:11px;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.84697 1.12061C7.83428 1.15934 6.79945 1.18978 5.74248 1.21191C4.68551 1.23405 3.60641 1.24512 2.50518 1.24512C2.44984 1.24512 2.40003 1.23682 2.35576 1.22021C2.31149 1.20361 2.27552 1.17318 2.24785 1.12891C2.22018 1.0791 2.19805 1.0127 2.18145 0.929688C2.17038 0.841146 2.16484 0.727702 2.16484 0.589355C2.16484 0.467611 2.17038 0.368001 2.18145 0.290527C2.19805 0.20752 2.22018 0.146647 2.24785 0.10791C2.27552 0.0636393 2.30872 0.0359701 2.34746 0.0249023C2.3862 0.00830078 2.43047 0 2.48027 0H10.2249C10.4352 0 10.604 0.0636393 10.7312 0.190918C10.8585 0.318197 10.9222 0.486979 10.9222 0.697266V8.36719C10.9222 8.41699 10.9139 8.46126 10.8973 8.5C10.8807 8.53874 10.8475 8.57194 10.7977 8.59961C10.7534 8.62728 10.6897 8.64941 10.6067 8.66602C10.5237 8.68262 10.4186 8.69092 10.2913 8.69092C10.1585 8.69092 10.0478 8.68538 9.95928 8.67432C9.87074 8.65771 9.7988 8.63558 9.74346 8.60791C9.69365 8.58024 9.65768 8.54427 9.63555 8.5C9.61341 8.45573 9.60234 8.40592 9.60234 8.35059C9.60234 7.24935 9.61341 6.17025 9.63555 5.11328C9.65768 4.05078 9.68812 3.01595 9.72686 2.00879L0.928027 10.7827C0.900358 10.8104 0.867155 10.8298 0.828418 10.8408C0.795215 10.8519 0.750944 10.8491 0.695605 10.8325C0.645801 10.8159 0.587695 10.7855 0.521289 10.7412C0.460417 10.6914 0.388477 10.625 0.305469 10.542C0.222461 10.459 0.156055 10.387 0.10625 10.3262C0.0619792 10.2598 0.031543 10.2017 0.0149414 10.1519C-0.00166016 10.0965 -0.00442708 10.0522 0.00664062 10.019C0.0177083 9.98031 0.0370768 9.9471 0.0647461 9.91943L8.84697 1.12061Z' fill='%23000'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.84697 1.12061C7.83428 1.15934 6.79945 1.18978 5.74248 1.21191C4.68551 1.23405 3.60641 1.24512 2.50518 1.24512C2.44984 1.24512 2.40003 1.23682 2.35576 1.22021C2.31149 1.20361 2.27552 1.17318 2.24785 1.12891C2.22018 1.0791 2.19805 1.0127 2.18145 0.929688C2.17038 0.841146 2.16484 0.727702 2.16484 0.589355C2.16484 0.467611 2.17038 0.368001 2.18145 0.290527C2.19805 0.20752 2.22018 0.146647 2.24785 0.10791C2.27552 0.0636393 2.30872 0.0359701 2.34746 0.0249023C2.3862 0.00830078 2.43047 0 2.48027 0H10.2249C10.4352 0 10.604 0.0636393 10.7312 0.190918C10.8585 0.318197 10.9222 0.486979 10.9222 0.697266V8.36719C10.9222 8.41699 10.9139 8.46126 10.8973 8.5C10.8807 8.53874 10.8475 8.57194 10.7977 8.59961C10.7534 8.62728 10.6897 8.64941 10.6067 8.66602C10.5237 8.68262 10.4186 8.69092 10.2913 8.69092C10.1585 8.69092 10.0478 8.68538 9.95928 8.67432C9.87074 8.65771 9.7988 8.63558 9.74346 8.60791C9.69365 8.58024 9.65768 8.54427 9.63555 8.5C9.61341 8.45573 9.60234 8.40592 9.60234 8.35059C9.60234 7.24935 9.61341 6.17025 9.63555 5.11328C9.65768 4.05078 9.68812 3.01595 9.72686 2.00879L0.928027 10.7827C0.900358 10.8104 0.867155 10.8298 0.828418 10.8408C0.795215 10.8519 0.750944 10.8491 0.695605 10.8325C0.645801 10.8159 0.587695 10.7855 0.521289 10.7412C0.460417 10.6914 0.388477 10.625 0.305469 10.542C0.222461 10.459 0.156055 10.387 0.10625 10.3262C0.0619792 10.2598 0.031543 10.2017 0.0149414 10.1519C-0.00166016 10.0965 -0.00442708 10.0522 0.00664062 10.019C0.0177083 9.98031 0.0370768 9.9471 0.0647461 9.91943L8.84697 1.12061Z' fill='%23000'/%3E %3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:transform .25s var(--ease)}
.ico.down{transform:rotate(135deg)}
/* chevron: solo la punta, per gli indicatori di apertura */
.chevron{flex:0 0 auto;width:8px;height:8px;margin-bottom:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.5;transition:transform .4s var(--ease),opacity .2s}   /* ↗ ruotata a ↓ */
.ico.right{transform:rotate(45deg)}   /* ↗ ruotata a → */
.card-head .ico{width:13px;height:13px}
.button .ico{width:11px;height:11px}
.button:hover .ico{transform:translate(2px,-2px)}
.button:hover .ico.down{transform:rotate(135deg) translate(2px,-2px)}
.pills,.chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px}
.chips span,.chips .chip,.pills span,.card-head .tag{display:inline-flex;align-items:center;padding:7px 13px;border:1px solid rgba(0,125,186,.3);border-radius:var(--r-xs);background:rgba(0,125,186,.09);color:#cfe6f4;font-family:var(--display);font-weight:500;font-size:12px;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap}

/* ---------- offerta ---------- */
/* due card principali affiancate, stesso peso */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.card{padding:34px 36px}
.card h3{position:relative;z-index:2;margin:0 0 16px;font-family:var(--display);font-weight:700;letter-spacing:-.045em}
.card p{position:relative;z-index:2;margin:0 0 24px;color:var(--muted);font-family:var(--display);font-size:16px;line-height:24.8px}
.card.lead{display:grid;grid-template-rows:auto auto 1fr auto auto;min-height:660px}
.card.lead h3{margin:34px 0 16px;font-size:clamp(28px,2.5vw,38px);line-height:1.05}
.card.lead p{max-width:46ch;margin:0 0 28px}
.lead-visual{position:relative;height:300px;margin-top:32px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-s);background:linear-gradient(180deg,rgba(0,125,186,.06),transparent)}
.lead-visual img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}

/* ---------- carosello dei macchinari proprietari ----------
   Le tre immagini sono sovrapposte nella stessa cella di griglia e si alternano
   in dissolvenza; i tag fanno da comando. Avanza da solo e si ferma quando il
   puntatore è sulla scheda o quando scegli tu una macchina. */
.sheet-figure.slideshow{display:grid;place-items:center}
.slideshow img{grid-area:1/1;opacity:0;transform:scale(.985);
  transition:opacity .55s var(--ease),transform .8s var(--ease);pointer-events:none}
.slideshow img.is-on{opacity:1;transform:none}
/* i chip sono <button>: serve azzerare l'aspetto nativo, ma NON con la
   scorciatoia font, che resetterebbe peso e corpo impostati dalla regola sopra */
.chips .chip{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;text-align:center;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.chips .chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* stato attivo: stesso tag, acceso. Quelli spenti restano identici a tutti gli
   altri tag del sito. */
.chips .chip.is-on{border-color:rgba(0,125,186,.75);background:rgba(0,125,186,.22);color:#fff}
.spotlight:hover .lead-visual img{transform:scale(1.04)}

.supply{grid-row:1/3;display:flex;flex-direction:column;min-height:750px}
.supply h3{margin-top:52px;font-size:clamp(32px,3.2vw,46px);line-height:46.08px}
.supply-visual{position:relative;height:300px;margin-top:auto;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-s)}
.supply-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.52)}
.supply-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,125,186,.22),transparent 55%)}
.blueprint-frame{position:absolute;z-index:2;inset:12%;border:1px solid rgba(0,125,186,.35)}
.blueprint-frame::before,.blueprint-frame::after{content:"";position:absolute;background:rgba(0,125,186,.3)}
.blueprint-frame::before{left:50%;top:-14%;bottom:-14%;width:1px}
.blueprint-frame::after{top:50%;left:-9%;right:-9%;height:1px}
.automation,.washers{min-height:353px;display:flex;flex-direction:column;justify-content:space-between}
.card-copy{position:relative;z-index:2;margin-top:34px}
.automation h3,.washers h3{font-size:28px;line-height:28px;letter-spacing:-.045em}
.axis-visual{position:absolute;right:-65px;top:-80px;width:320px;height:320px}
.axis-visual i{position:absolute;border-radius:50%}
.axis-visual i:nth-child(1){inset:0;border:1px solid rgba(0,125,186,.20)}
.axis-visual i:nth-child(2){inset:18%;border:1px dashed rgba(0,125,186,.45)}
.axis-visual i:nth-child(3){inset:35%;border:1px solid rgba(0,125,186,.18);background:rgba(0,125,186,.06)}
.glass-visual{position:absolute;right:36px;top:38px;width:230px;height:160px}
.glass-visual i{position:absolute;top:0;width:125px;height:101px;border:1px solid rgba(0,125,186,.40);border-radius:var(--r-m);background:rgba(0,125,186,.05);box-shadow:0 15px 40px rgba(0,0,0,.2)}
.glass-visual i:nth-child(1){right:72px;top:42px}
.glass-visual i:nth-child(2){right:36px;top:21px}
.glass-visual i:nth-child(3){right:0;top:0}

.offer-row{display:grid;grid-template-columns:1fr;gap:32px;margin-top:32px}
.offer-row.three{grid-template-columns:repeat(3,1fr);gap:28px}
/* terza area, a tutta larghezza: descrizione + capability affiancate */
.wide-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center;padding:10px 30px 36px}
/* testo, tag e capability in un'unica colonna: cosi' il lato sinistro ha un'altezza
   paragonabile all'immagine e nessuno dei due lascia scoperto un angolo */
.wide-col{display:grid;gap:28px;align-content:start}
.wide-col .capabilities{--cap-gap:26px;gap:26px;padding-top:28px;border-top:1px solid var(--border)}
.wide-grid .card-copy{margin-top:0}
.wide-grid .card-copy p{margin:0}
.wide-grid .pills{margin-top:26px}
/* soggetto scontornato: niente contenitore. Un alone freddo dietro lo stacca dal
   fondo e l'ombra proiettata, che segue la sagoma e non un rettangolo, gli dà peso.
   Il padding verticale è lo spazio di manovra della deriva: .acc-inner deve
   tagliare (gli serve overflow:hidden per animare l'altezza) e senza margine
   l'immagine finirebbe sotto la lama in cima. */
.wide-visual{position:relative;align-self:center;min-height:250px;padding:22px 0 24px;display:grid;place-items:center;isolation:isolate}
.wide-visual::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:104%;aspect-ratio:1.15;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,125,186,.40) 0%,rgba(0,125,186,.30) 20%,rgba(0,125,186,.195) 38%,rgba(0,125,186,.115) 54%,rgba(0,125,186,.06) 68%,rgba(0,125,186,.026) 80%,rgba(0,125,186,.008) 90%,transparent 100%)}
.wide-visual img{width:auto;height:auto;max-height:264px;max-width:100%;will-change:transform;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.62)) drop-shadow(0 3px 10px rgba(0,0,0,.4))}
/* la deriva è legata allo scroll (data-drift, gestito nel JS): si muove solo
   mentre la pagina scorre, da ferma resta immobile */

.capabilities{margin:0;padding:0;list-style:none;display:grid;gap:18px}
/* timeline: un nodo per voce, collegati da una linea continua */
.capabilities li{position:relative;padding-left:26px}
.capabilities li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;
  border:1.5px solid var(--accent);border-radius:50%;background:var(--bg);box-sizing:border-box}
.capabilities li:not(:last-child)::after{content:"";position:absolute;left:4px;top:16px;bottom:calc(-1 * var(--cap-gap, 18px) - 4px);
  width:1px;background:rgba(0,125,186,.35)}
.capabilities b{display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.3;color:var(--text)}
.capabilities em{display:block;margin-top:2px;color:var(--muted);font-family:var(--display);font-style:normal;font-size:13px;line-height:19px}
.card.mini{min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.card.mini h3{font-size:24px;line-height:1.15}
.card.mini p{margin:0 0 14px}
.card.mini .pills{margin-top:auto}

/* ---------- prodotti: blocchi espandibili ---------- */
.accordion{display:flex;flex-direction:column;gap:16px}
.acc{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-l);background:var(--card);transition:border-color .3s var(--ease),background .3s var(--ease)}
.acc.open{border-color:rgba(0,125,186,.28)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;transition:background .25s var(--ease)}
.acc-head:hover{background:rgba(255,255,255,.02)}
.acc.open .acc-head:hover{background:none}
.acc-head:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.acc-title b{display:block;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.acc-title em{display:block;margin-top:7px;max-width:62ch;color:var(--muted);font-family:var(--display);font-style:normal;font-size:14px;line-height:20px}
.acc-meta{flex:0 0 auto;display:flex;align-items:center;gap:18px}
.acc-chevron{transform:rotate(45deg);transition:transform .45s var(--ease),opacity .25s}
.acc-head:hover .acc-chevron{opacity:1}
.acc.open .acc-chevron{transform:rotate(-135deg);opacity:1}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}

/* ---------- prodotti: sistema a gruppi ordinati ---------- */

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:16px 30px 34px}
.product{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-m);background:var(--card);transition:transform .3s var(--ease),border-color .3s,background .3s}
.product[data-panel]:hover,.product[data-panel]:focus-visible{transform:translateY(-3px);border-color:rgba(0,125,186,.4);background:var(--card-hi)}
.product-visual{position:relative;height:220px;border-radius:var(--r-m) var(--r-m) 0 0;margin-bottom:22px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(0,125,186,.05),transparent)}
.product-visual img{width:auto;height:78%;max-width:82%;object-fit:contain;transition:transform .5s var(--ease)}
/* .full = fotografia che riempie tutto il riquadro, senza margini né tile chiaro.
   È il trattamento definitivo: le altre restano contenute finché sono render su
   fondo bianco, che ritagliati verrebbero massacrati. */
.product-visual.full,.sheet-figure.full,.lead-visual.full{background:none}
/* nel pannello il riquadro prende la proporzione esatta dell'immagine (1200x640):
   così cover non ritaglia niente, il soggetto resta dove è stato composto e
   risulta centrato. Con un'altezza fissa il riquadro era 2,31:1 contro 1,875:1
   dell'immagine, e il taglio verticale la faceva sembrare bassa. */
.sheet-figure.full,.lead-visual.full{aspect-ratio:1200/640;height:auto}
.product-visual.full img,.sheet-figure.full img,.lead-visual.full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.product:hover .product-visual img{transform:scale(1.05)}
.product.landed{outline:2px solid var(--accent);outline-offset:3px;transition:outline-color .5s var(--ease)}
.product-note{margin:0;padding:0 24px 26px;color:var(--accent);font-family:var(--display);font-size:13px;line-height:19px}
.product p+.product-note{margin-top:-14px}
.size-label{margin:22px 0 10px;font-family:var(--display);font-size:13px;line-height:19px;color:var(--muted)}
.sheet .pills{margin-bottom:6px}
.product h3{margin:0 0 8px;font-family:var(--display);padding:0 24px;font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.025em;color:var(--text)}
.product p{margin:0;padding:0 24px 26px;color:var(--muted);font-family:var(--display);font-size:14px;line-height:21px}

/* ---------- vantaggi ---------- */

.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1180px;margin:0 auto 56px;padding:38px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.figure{padding:0 clamp(22px,3.4vw,52px)}
.figure:first-child{padding-left:0}
.figure:last-child{padding-right:0}
.figure strong{display:block;font-family:var(--display);margin-bottom:8px;font-weight:700;font-size:clamp(34px,3.4vw,48px);line-height:1;letter-spacing:-.045em;color:var(--text)}
.figure strong em{font-style:normal;font-size:.5em;letter-spacing:-.02em;color:var(--accent)}
.figure span{display:block;color:var(--muted);font-family:var(--display);font-size:16px;line-height:24px}

.strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.strength-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
.strength.mini{min-height:200px}
.strength.mini h3{margin-top:auto;font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.03em}
.strength{min-height:277px;padding:30px 34px 34px;display:flex;flex-direction:column}
.strength strong{position:relative;z-index:2;margin-top:auto;font-weight:700;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.032em;color:var(--text)}
.strength strong em{font-style:normal;font-weight:400;color:var(--accent)}
.strength h3{position:relative;z-index:2;margin:8px 0 6px;font-family:var(--display);font-weight:500;font-size:18px;line-height:27.9px;color:#fff}
.strength p{position:relative;z-index:2;margin:0;color:var(--muted);font-family:var(--display);font-size:14px;line-height:21.7px}

.sector-track{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}

/* frecce dei caroselli: compaiono solo dove si scorre davvero */
.track-nav{display:none}
/* frecce condivise: carosello mobile e caroselli dei pannelli.
   Lo scarto di 1.71px ricentra il chevron, che è una L di bordi il cui
   baricentro d'inchiostro non coincide col centro della casella. */
.track-arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-hi);border-radius:50%;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;transition:background .2s var(--ease),opacity .25s var(--ease)}
.track-arrow:hover:not(:disabled){background:rgba(255,255,255,.12)}
.track-arrow:disabled{opacity:.25;cursor:default}
.track-arrow .chevron{width:7px;height:7px;margin:0;opacity:1}
.track-arrow.prev .chevron{transform:rotate(135deg);margin-left:1.71px}
.track-arrow.next .chevron{transform:rotate(-45deg);margin-right:1.71px}
/* nei pannelli le frecce ci sono a ogni dimensione */
.slide-nav{display:flex;justify-content:flex-end;gap:10px;margin:14px 0 0}
.sector-track{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.sector{box-shadow:var(--shadow)}
.sector{min-height:300px;padding:26px 23px 28px;display:grid;grid-template-rows:auto auto 1fr}
.sector-icon{position:relative;z-index:2;height:96px;margin:20px 0 26px;display:grid;place-items:center}
.sector-icon .sec-ico{height:114px;width:auto;overflow:visible}
/* due riferimenti diversi: fill-box = centro dell'elemento (serve a chi scala su se
   stesso), view-box = coordinate del viewBox (serve a chi ruota attorno a un punto noto) */
.gl-dot,.gl-streak,.cer-up,.cer-dn{transform-box:fill-box}
.bev-cap,.pvc-out,.pvc-in,.wd-band{transform-box:view-box}

/* ============================================================
   MICRO-ANIMAZIONI DELLE ICONE SETTORE
   I tracciati sono quelli originali: le "parti" nascono da clip
   e maschere, non da un ridisegno.
   Desktop: al passaggio del mouse. Touch: una volta sola quando
   la scheda entra in vista (classe .ico-run messa dal JS).
   ============================================================ */
:root{--ease-io:cubic-bezier(.86,0,.07,1);--ease-set:cubic-bezier(.22,1,.28,1)}
.sec-ico{color:rgba(0,125,186,.3)}
.sec-ico .shine{color:#8fd8f7}
.gl-dot,.gl-streak,.cer-up,.cer-dn{transform-box:fill-box}
.bev-cap,.pvc-out,.pvc-in,.shine-band{transform-box:view-box}

/* bagliore comune a tutte: una banda di luce che attraversa dall'alto in basso */
.shine-band{transform:translateY(-100%)}
.sector:hover .shine-band,.sector.ico-run .shine-band{animation:sh-band 1.35s var(--ease-set) both}
/* la corsa finisce a 120%: il bordo alto della banda arriva esattamente alla base
   dell'icona all'ultimo fotogramma. Cosi' l'attraversamento cade tutto nella coda
   lenta della curva — l'onda entra svelta e decelera sull'icona, che era il punto.
   Con 210% l'attraversamento finiva nel primo 20% del tempo e il resto era vuoto. */
@keyframes sh-band{from{transform:translateY(-100%)}to{transform:translateY(120%)}}

/* Ceramica — i due rombi si staccano lungo il proprio asse e si ricompongono */
.sector:hover .cer-up,.sector.ico-run .cer-up{animation:cer-up .82s var(--ease-io) both}
.sector:hover .cer-dn,.sector.ico-run .cer-dn{animation:cer-dn .82s var(--ease-io) both}
@keyframes cer-up{0%,100%{transform:none}40%{transform:translateY(-8px)}}
@keyframes cer-dn{0%,100%{transform:none}40%{transform:translateY(8px)}}

/* Vetro — la luce attraversa la lastra, poi rispondono i quattro fissaggi */
.gl-streak{transform-origin:50% 50%}
.sector:hover .gl-streak,.sector.ico-run .gl-streak{animation:gl-sweep .9s var(--ease-set) both}
.sector:hover .gl-streak.s2,.sector.ico-run .gl-streak.s2{animation-delay:.09s}
@keyframes gl-sweep{0%{transform:translate(-16px,16px);opacity:0}34%{opacity:1}100%{transform:none;opacity:1}}
.gl-dot{transform-origin:50% 50%}
.sector:hover .gl-dot,.sector.ico-run .gl-dot{animation:gl-dot .62s var(--ease-set) both}
.sector:hover .gl-dot.d1,.sector.ico-run .gl-dot.d1{animation-delay:.24s}
.sector:hover .gl-dot.d2,.sector.ico-run .gl-dot.d2{animation-delay:.31s}
.sector:hover .gl-dot.d3,.sector.ico-run .gl-dot.d3{animation-delay:.38s}
.sector:hover .gl-dot.d4,.sector.ico-run .gl-dot.d4{animation-delay:.45s}
@keyframes gl-dot{0%,100%{transform:scale(1)}45%{transform:scale(1.85)}}

/* Beverage — il tappo si solleva, svita e si riavvita */
.bev-cap{transform-origin:29.3px 10px}
.sector:hover .bev-cap,.sector.ico-run .bev-cap{animation:bev-cap .95s var(--ease-io) both}
@keyframes bev-cap{0%,100%{transform:none}30%{transform:translateY(-9px) rotate(-14deg)}
  55%{transform:translateY(-9px) rotate(10deg)}}


/* Legno — la venatura è un tracciato unico e non ha parti separabili: l'unica
   animazione onesta è sull'insieme. La tavola si presenta, si inclina e rientra. */
.ico-legno{transform-origin:50% 55%}
.sector:hover .ico-legno,.sector.ico-run .ico-legno{animation:wd-lift 1.05s var(--ease-io) both}
@keyframes wd-lift{
  0%,100%{transform:none}
  38%{transform:scale(1.11) rotate(-3.2deg)}
  70%{transform:scale(1.06) rotate(1.4deg)}}

/* PVC — i due anelli respirano come un diaframma */
.pvc-out,.pvc-in{transform-origin:50px 50px}
.sector:hover .pvc-out,.sector.ico-run .pvc-out{animation:pvc-out .85s var(--ease-io) both}
.sector:hover .pvc-in,.sector.ico-run .pvc-in{animation:pvc-in .85s var(--ease-io) both}
@keyframes pvc-out{0%,100%{transform:scale(1)}42%{transform:scale(1.11)}}
@keyframes pvc-in{0%,100%{transform:scale(1)}42%{transform:scale(.74) rotate(-38deg)}}

/* su touch l'hover non esiste: resta solo .ico-run, che parte una volta sola */
@media(hover:none){
  .sector:hover .cer-up,.sector:hover .cer-dn,.sector:hover .gl-streak,.sector:hover .gl-dot,
  .sector:hover .bev-cap,.sector:hover .ico-legno,.sector:hover .pvc-out,.sector:hover .pvc-in,
  .sector:hover .shine-band{animation:none}
}
.sector h3{position:relative;z-index:2;margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;color:#fff}
.sector p{position:relative;z-index:2;margin:0;color:rgba(183,183,183,.5);font-family:var(--display);font-size:14px;line-height:19px}


/* ---------- zona scura: il nero arriva solo prima del box contatti ---------- */
.cta-zone{position:relative;display:flow-root;padding-top:clamp(48px,9vw,150px);
  background:linear-gradient(180deg,rgba(5,5,6,0) 0,rgba(5,5,6,.55) 26%,rgba(5,5,6,.88) 52%,#050506 78%,#050506 100%)}
.sectors{padding-bottom:clamp(30px,4vw,60px)}
.footer-band{width:100%;background:#050506}
footer{position:relative;background:none}

/* ---------- cta ---------- */
.cta{position:relative;max-width:calc(var(--max) - 2*var(--pad));margin:0 auto 60px;padding:clamp(48px,5vw,72px) var(--pad);overflow:hidden;text-align:center;border:1px solid rgba(0,125,186,.14);border-radius:var(--r-l);background:linear-gradient(180deg,rgba(0,125,186,.14),rgba(255,255,255,.02));box-shadow:0 0 100px rgba(0,125,186,.06)}
.cta>.cta-glow{position:absolute;left:50%;top:-380px;width:1000px;height:760px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,125,186,0.3) 0%,rgba(0,125,186,0.285) 9%,rgba(0,125,186,0.255) 18%,rgba(0,125,186,0.213) 27%,rgba(0,125,186,0.168) 36%,rgba(0,125,186,0.126) 45%,rgba(0,125,186,0.087) 54%,rgba(0,125,186,0.057) 63%,rgba(0,125,186,0.033) 72%,rgba(0,125,186,0.0165) 81%,rgba(0,125,186,0.006) 90%,rgba(0,125,186,0.0) 100%)}
.cta>*{position:relative;z-index:2}
.cta-label{display:block;margin-bottom:22px;color:#a5aae0;font-family:var(--display);font-size:9px;line-height:13.95px;letter-spacing:1.44px;text-transform:uppercase}
.cta h2{font-weight:700;letter-spacing:-.05em}
.cta h2 em{display:block;font-style:normal;background:linear-gradient(90deg,#007dba,#9ad9f7 50%,#007dba);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{max-width:600px;margin:26px auto 34px;color:var(--muted);font-family:var(--display);font-size:16px;line-height:24.8px}
.cta .button{height:47px}

/* ---------- footer ---------- */
footer{--foot-inset:42px;max-width:var(--max);margin:0 auto;padding:clamp(50px,6vw,80px) var(--pad) calc(44px + var(--safe-bottom))}
.footer-grid{display:grid;grid-template-columns:minmax(260px,1fr) auto auto auto;gap:clamp(32px,4.5vw,68px);padding:0 var(--foot-inset) 72px}
.footer-brand img{width:122px;margin-bottom:24px}
.footer-brand p{margin:0;max-width:400px;color:#595959;font-family:var(--display);font-size:15px;font-weight:400;line-height:1.5}
.footer-col{display:flex;flex-direction:column;min-width:150px}
.footer-col h4{margin:0 0 18px;font-family:var(--display);font-weight:700;font-size:14px;line-height:27px;color:#fff;text-transform:uppercase}
.footer-col a,.footer-col span{color:#787878;font-family:var(--display);font-size:13px;line-height:29px;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-cta{color:var(--accent)!important}
.footer-legal{display:flex;align-items:center;gap:14px;font-family:var(--display);padding:26px var(--foot-inset) 0;border-top:1px solid var(--border);color:#454545;font-size:12px;line-height:27px;text-align:left}
.legal-text{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px}
.footer-legal span+span::before{content:"| ";}
.flush-credit{flex:0 0 auto;display:block;opacity:.45;transition:opacity .25s var(--ease)}
.flush-credit:hover{opacity:1}
.flush-credit img{width:72px;height:auto}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.card.reveal,.strength.reveal,.sector.reveal,.product.reveal{transform:translateY(24px) scale(.985)}
.card.reveal.visible,.strength.reveal.visible,.sector.reveal.visible,.product.reveal.visible{transform:none}
.spotlight.reveal.visible:hover{transform:translateY(-4px)}

/* ---------- responsive ---------- */
@media(max-width:1400px){
  .sector-track{grid-template-columns:repeat(3,1fr);gap:26px}
}
@media(max-width:1180px){
  .wide-grid{grid-template-columns:1fr;gap:28px;padding:4px 26px 26px}
  .wide-visual{min-height:auto}
  .wide-visual img{max-height:230px}
  .header{width:calc(100% - 40px)}
  .header-bar{padding-left:24px}
  .panel-solutions{padding-left:24px;padding-right:24px}
    .section-head{margin-bottom:14px;gap:16px}
  .section-claim{margin:0 auto 40px;font-size:16px;max-width:none}
  .bento{grid-template-columns:1fr}
  .card.lead{min-height:0}
  .supply{grid-row:auto;min-height:0}
  .offer-row,.strength-row{grid-template-columns:1fr;gap:26px;margin-top:26px}
  .offer-row.three{grid-template-columns:1fr}
  .product-grid,.product-grid.machines{grid-template-columns:repeat(2,1fr);gap:16px;padding:16px 22px 28px}
  .acc-head{padding:24px 22px}
  .figures{grid-template-columns:repeat(2,1fr);gap:34px 0}
      .footer-grid{grid-template-columns:1fr 1fr;gap:40px 44px}
  .strength-grid{grid-template-columns:1fr}
  .sector-track{grid-template-columns:repeat(3,1fr)}
  footer{--foot-inset:0px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .header{top:calc(12px + var(--safe-top));border-radius:var(--r-xl)}

  .header-bar{height:62px;padding:0 8px 0 18px}
  .logo-mark,.logo img{width:110px}
  .header nav{display:none}
  .header-actions{display:none}

  /* la pill si espande: dentro ci va tutto il menu */
  .panel-sub-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;
    margin:22px 0 0;padding:12px 20px;border:0;background:none;
    color:var(--text);font-family:var(--display);font-size:16px;font-weight:500;text-align:left;cursor:pointer}
  .panel-sub-trigger .chevron{transform:rotate(45deg)}
  .header.sub-open .panel-sub-trigger .chevron{transform:rotate(-135deg);opacity:1}
  .panel-solutions{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows .26s var(--ease-open) .1s}
  .header.sub-open .panel-solutions{grid-template-rows:1fr;transition:grid-template-rows .34s var(--ease-open)}
  .panel-solutions-inner{overflow:hidden;min-height:0;padding:0 16px 0 24px}
  .panel-label{margin:14px 0 6px;font-size:11px}
  .panel-solutions a{width:100%;padding:7px 0;font-size:clamp(12px,calc(4.5vw - 3.2px),18px);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .panel-solutions a:last-child{padding-bottom:16px}
  .panel-mobile{display:flex;flex-direction:column;padding:0 20px 22px}
  .panel-mobile>a{padding:12px 0;font-size:16px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease) .3s,transform .4s var(--ease) .3s}
  .header.open .panel-mobile>a{opacity:1;transform:none}
  .panel-mobile .button{margin-top:12px;width:100%}
  .menu{display:flex}
  .header.open .menu span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .header.open .menu span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

  section[id],article[id],.acc[id]{scroll-margin-top:92px}
  .hero{padding-top:calc(140px + var(--safe-top))}
  .hero-lead{margin-bottom:28px}
  .hero-actions{flex-wrap:wrap;justify-content:center;gap:16px}
  .button{height:44px;padding:0 20px;gap:10px;font-size:14px}
  .hero-visual{width:118%;margin:8px -9% 0}
  .hero-visual img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 10%,#000 15%,#000 85%,rgba(0,0,0,.85) 90%,rgba(0,0,0,.4) 95%,transparent 100%),
                       linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.4) 85%,rgba(0,0,0,.1) 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 10%,#000 15%,#000 85%,rgba(0,0,0,.85) 90%,rgba(0,0,0,.4) 95%,transparent 100%),
               linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.4) 85%,rgba(0,0,0,.1) 94%,transparent 100%)}
  .section{padding:52px var(--pad) 56px}
  .card,.strength{box-shadow:0 0 0 6px var(--halo),var(--shadow)}
  .bento{row-gap:26px}
  .supply h3{margin-top:32px}
  .supply-visual{height:220px;margin-top:24px}
  .automation,.washers{min-height:300px}
  .axis-visual{right:-90px;top:-90px}
  .glass-visual{right:-20px;top:26px;transform:scale(.85);transform-origin:top right}
  .automation .card-copy,.washers .card-copy{margin-top:120px}
  .strength-grid{gap:26px}
  .lead-visual{height:220px}
  .lead-visual.full{height:auto}
  .product-grid,.product-grid.machines{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;
    gap:14px;padding:16px 16px 26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .product-grid::-webkit-scrollbar{display:none}
  .product{scroll-snap-align:start}
  .product-visual{height:230px;border-radius:var(--r-l) var(--r-l) 0 0}
  .acc-head{padding:20px 16px;gap:16px}
  .wide-grid{gap:24px;padding:4px 16px 22px}
  .wide-visual img{max-height:190px}
  .acc-title b{font-size:18px}
  .acc-title em{display:none}
  /* le sottovoci entrano quando si apre il loro pannello, non insieme al menu:
     altrimenti sono già visibili e si vedono srotolare da altezza zero */
  /* Chiusura: il testo sparisce subito e il transform torna a posto DOPO la dissolvenza
     (0s ritardato), così non si vede scivolare mentre il pannello si richiude. */
  .header.open .panel-label,.header.open .panel-solutions a{
    opacity:0;transform:translateY(20px);
    transition:opacity .1s linear 0s,transform 0s linear .1s}
  /* Apertura: dissolvenza e risalita, in cascata */
  .header.sub-open .panel-label,.header.sub-open .panel-solutions a{
    opacity:1;transform:none;
    transition:opacity .58s var(--ease-open),transform .58s var(--ease-open)}
  /* cascata nell'ordine in cui si leggono, etichette comprese:
     Tutte le soluzioni → 3 aree → I prodotti → 2 gruppi. Passo 45ms. */
  .header.sub-open .panel-label{transition-delay:.06s}
  .header.sub-open .panel-solutions a:nth-of-type(1){transition-delay:.12s}
  .header.sub-open .panel-solutions a:nth-of-type(2){transition-delay:.18s}
  .header.sub-open .panel-solutions a:nth-of-type(3){transition-delay:.24s}
  .header.sub-open .panel-label.second{transition-delay:.30s}
  .header.sub-open .panel-solutions a:nth-of-type(4){transition-delay:.36s}
  .header.sub-open .panel-solutions a:nth-of-type(5){transition-delay:.42s}
  .panel-mobile>a{transition:opacity .22s var(--ease-open) .1s,transform .22s var(--ease-open) .1s}
  .panel-sub-trigger .chevron{transition:transform .28s var(--ease-open)}
  .page-veil{transition:opacity .28s var(--ease-open),visibility .28s var(--ease-open)}
  .accordion{gap:12px}
  .acc{border-radius:var(--r-xl)}
  .card,.product,.sector{border-radius:var(--r-l)}
      .chips span,.chips .chip,.pills span,.card-head .tag{font-size:11px;padding:6px 11px}
  .figures{grid-template-columns:1fr;gap:0;padding:8px 0 0}
  .figure{padding:28px 0 28px 40px}
  .figure{padding:28px 0;border-bottom:1px solid var(--border)}
  .figure:last-child{border-bottom:0;padding-bottom:8px}
  .figure strong{margin-bottom:10px;font-size:60px}
  .figure strong em{font-size:.4em}
  .figure span{font-size:17px;line-height:25px}
  .sector-track{grid-auto-flow:column;grid-auto-columns:64%;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:var(--pad);margin:0 calc(-1*var(--pad));padding:10px var(--pad)}
  .sector{scroll-snap-align:start;min-height:305px;padding:24px 21px 26px}
  .sector-icon{height:88px;margin:18px 0 24px}
  .sector-track::-webkit-scrollbar{display:none}
  .track-nav:not(.slide-nav){display:flex;justify-content:flex-end;gap:10px;margin:18px 0 0;padding-right:calc(28px - var(--pad) + 4px)}
  /* la punta è la stessa del resto del sito, solo ruotata */
  .acc-inner .track-nav{margin:0 0 20px;padding-right:calc(28px - var(--pad) + 3px)}
      .cta{margin:0 var(--pad) 40px;border-radius:var(--r-l);padding:44px 22px}

  footer{--foot-inset:18px}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding:0 var(--foot-inset) 40px}
  .footer-brand img{width:110px}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:22px;padding-top:22px;font-size:11px;line-height:19px}
  .legal-text{flex-direction:column;gap:3px}
  .footer-legal span+span::before{content:""}
  .flush-credit{margin-top:18px}
}
@media(max-width:400px){
  .panel-solutions-inner{padding:0 12px 0 18px}
}
@media(max-width:340px){
  .panel-solutions-inner{padding:0 8px 0 14px}
}
@media(prefers-reduced-motion:reduce){
  .sheet,.sheet-scrim{transition:none}
  html{scroll-behavior:auto}
  .reveal,.card.reveal,.strength.reveal,.sector.reveal{opacity:1;transform:none;transition:none}
  .lm-letter,.lm-bar,.lm-dot{animation:none;opacity:1;filter:none;transform:none}
  .sec-ico,.sec-ico *{animation:none!important;transform:none!important}
  .wide-visual img{transform:none!important}
  .hero-visual{transform:none!important}
}

/* placeholder dal PPT scontornati su bianco: tile chiaro, così il ritaglio non si nota */
.product-visual.on-light,.lead-visual.on-light,.sheet-figure.on-light{background:#fff}
.product-visual.on-light{border-bottom-color:rgba(255,255,255,.10)}
.lead-visual.on-light,.sheet-figure.on-light{border-color:rgba(255,255,255,.10)}
.sheet-figure.on-light{aspect-ratio:1847/976;height:auto}
.sheet-figure.on-light img{width:100%;height:100%;max-width:none;object-fit:cover}


/* ============================================================
   PANNELLI DI APPROFONDIMENTO (overlay + sfocatura)
   ============================================================ */
[data-panel]{cursor:pointer}
[data-panel]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sheet-layer{position:fixed;z-index:150;inset:0;display:grid;place-items:center;padding:calc(5vh + var(--safe-top)) 20px calc(5vh + var(--safe-bottom))}
.sheet-layer[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;opacity:0;background:rgba(3,5,7,.62);backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85);transition:opacity .45s var(--ease)}
body.sheet-open .sheet-scrim{opacity:1}
.sheet{position:relative;z-index:2;width:min(760px,100%);max-height:90vh;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border);border-radius:var(--r-xl);background:#0c1013;box-shadow:0 50px 120px rgba(0,0,0,.7);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sheet[hidden]{display:none}
body.sheet-open .sheet{opacity:1;transform:none}
.sheet::-webkit-scrollbar{width:10px}
.sheet::-webkit-scrollbar-thumb{border:3px solid #0c1013;border-radius:10px;background:rgba(255,255,255,.18)}
.sheet-close{position:sticky;z-index:3;top:16px;float:right;margin:16px 16px 0 0;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.07);color:var(--text);font-size:0;line-height:0;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.sheet-close::before,.sheet-close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:1px;background:currentColor}
.sheet-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.sheet-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sheet-close:hover{background:rgba(255,255,255,.14);transform:scale(1.06)}
.sheet-body{padding:52px 56px 56px}
.sheet-eyebrow{display:block;margin-bottom:16px;color:var(--accent);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:1.4px;line-height:1;text-transform:uppercase}
.sheet h2{margin:0 0 18px;font-family:var(--display);font-weight:500;font-size:clamp(28px,3.2vw,40px);line-height:1.04;letter-spacing:-.045em;background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.sheet .sheet-lead{margin:0 0 30px;color:var(--muted);font-family:var(--display);font-weight:400;font-size:17px;line-height:1.55}
.sheet h3{margin:40px 0 16px;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.sheet h3:first-of-type{margin-top:34px}
.sheet-figure+h3{margin-top:34px}
.sheet-body>.sheet-figure:last-child{margin-bottom:4px}
.sheet p{color:var(--muted);font-family:var(--display);font-size:15px;line-height:23px}
.sheet-figure{height:280px;margin:0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-s);background:linear-gradient(180deg,rgba(0,125,186,.05),transparent)}
.sheet-figure img{width:auto;height:88%;max-width:88%;object-fit:contain}
/* elenco a due livelli: nome e riga di descrizione, separati da un filetto —
   stessa grammatica dei divisori usati nel footer e nella scheda "a disegno" */
.sheet-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.sheet-list li{padding:15px 0;border-bottom:1px solid var(--border);font-family:var(--display)}
.sheet-list li:first-child{border-top:1px solid var(--border)}
.sheet-list b{display:block;font-weight:500;font-size:16px;line-height:1.25;letter-spacing:-.015em;color:var(--text)}
.sheet-list em{display:block;margin-top:5px;font-style:normal;font-size:14px;line-height:21px;color:var(--muted)}

/* tabella specifiche: etichetta a sinistra, valore allineato a destra.
   Non è in uso — le voci vanno decise dal cliente. Resta pronta per quando
   arrivano i dati veri: basta un <dl class="spec"> con delle .spec-row. */
.spec{margin:0;padding:0;display:grid;gap:0}
.spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  padding:14px 0;border-bottom:1px solid var(--border)}
.spec-row:first-child{border-top:1px solid var(--border)}
.spec dt{flex:0 0 auto;font-family:var(--display);font-size:14px;line-height:20px;color:var(--muted)}

.spec dd{margin:0;text-align:right;font-family:var(--display);font-weight:500;font-size:14px;line-height:20px;color:var(--text)}

/* ============================================================
   PANNELLI SU SCHERMO PICCOLO
   Deve stare qui e non nel blocco 760 più in alto: i media query
   non aggiungono specificità, quindi le regole base dei pannelli,
   definite sopra, vincevano sull'override e il mobile restava
   con le misure del desktop.
   ============================================================ */
@media(max-width:760px){
  .sheet-layer{padding:var(--safe-top) 0 var(--safe-bottom)}
  .sheet{width:100%;max-height:100vh;height:100%;border:0;border-radius:0}
  .sheet-body{padding:28px 22px 40px}
  .sheet-figure{height:210px}
  .sheet-figure.full,.sheet-figure.on-light,.lead-visual.full{height:auto}
  .slide-nav{margin-top:12px}
}