/* helgi-refresh.css - impostazione grafica di helgi-europe.com
   Struttura ripresa dal Product Deck HELGI 2026, colori sul blu del logo HELGI (#2E7CB5).
   Lavora sulle classi hx-* che helgi-refresh.js assegna dopo il rendering.
   Togliendo i due tag dal <head> il sito torna esattamente com'era. */

:root{
  --hx-blue:#2E7CB5;       /* blu HELGI, quello del logo */
  --hx-blue-2:#4A9AD4;
  --hx-sky:#8EC5EC;
  --hx-ink:#163C63;        /* titoli su fondo chiaro */
  --hx-deep:#0F2A47;
  --hx-tint:#EEF5FB;
  --hx-ease:cubic-bezier(.2,.7,.2,1);
  --hx-shadow:0 18px 44px rgba(16,52,86,.10);
  --hx-shadow-hi:0 28px 64px rgba(16,52,86,.18);
  --hx-dark-bg:
    radial-gradient(circle at 90% 0%,rgba(142,197,236,.30) 0%,rgba(142,197,236,0) 38%),
    radial-gradient(circle at 0% 100%,rgba(46,124,181,.45) 0%,rgba(46,124,181,0) 45%),
    linear-gradient(135deg,#0A1A2E 0%,#133A61 58%,#2470A8 100%);
  --hx-light-bg:
    radial-gradient(circle at 92% 6%,rgba(46,124,181,.14) 0%,rgba(46,124,181,0) 34%),
    radial-gradient(circle at 4% 104%,rgba(22,60,99,.10) 0%,rgba(22,60,99,0) 40%),
    linear-gradient(160deg,#EAF3FA 0%,#F8FBFE 55%,#E2EEF7 100%);
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--hx-blue) !important;color:#fff !important;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
h1,h2{font-weight:800 !important;letter-spacing:-0.02em !important;}
a{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .2s ease;}
a:focus-visible,button:focus-visible,label:focus-visible{outline:3px solid rgba(74,154,212,.85);outline-offset:3px;border-radius:12px;}

/* Barra di avanzamento della lettura */
.hx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--hx-blue),var(--hx-sky));transform-origin:left;transform:scaleX(0);}

/* ---------- Colori ---------- */
.hx-t-blue{color:var(--hx-blue) !important;}
.hx-t-head{color:var(--hx-ink) !important;}
.hx-t-soft{color:#D3E6F5 !important;}
.hx-t-acc{background:linear-gradient(90deg,var(--hx-blue),var(--hx-blue-2));-webkit-background-clip:text;background-clip:text;color:transparent !important;}
.hx-dark .hx-t-acc{background-image:linear-gradient(90deg,#FFFFFF,var(--hx-sky));}
.hx-b-blue{border-color:var(--hx-blue) !important;}
[stroke="#7FB6DC"]{stroke:var(--hx-sky);}
[fill="#7FB6DC"]{fill:var(--hx-sky);}

/* Pulsanti e badge pieni: pillola blu HELGI */
.hx-pill{
  background:linear-gradient(135deg,var(--hx-blue),var(--hx-blue-2)) !important;
  border-color:transparent !important;color:#fff !important;
  border-radius:999px !important;
  box-shadow:0 10px 24px rgba(46,124,181,.35);
  transition:box-shadow .2s ease,transform .15s ease,filter .2s ease !important;
}
a.hx-pill:hover{filter:brightness(1.07);box-shadow:0 16px 32px rgba(46,124,181,.45);transform:translateY(-1px);}
a.hx-pill:active{transform:translateY(1px);}
.hx-dark a.hx-pill{background:linear-gradient(135deg,#FFFFFF,#DCEBF7) !important;color:var(--hx-ink) !important;box-shadow:0 12px 28px rgba(0,10,30,.28);}
.hx-ghost{border-radius:999px !important;}
.hx-ghost:hover{transform:translateY(-1px);}
.hx-dark .hx-ghost{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.28) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.hx-dark .hx-ghost:hover{background:rgba(255,255,255,.16) !important;}
.hx-chip{border-radius:999px !important;border-width:1px !important;border-color:rgba(46,124,181,.20) !important;background:#fff !important;}
.hx-chip:hover{border-color:var(--hx-blue) !important;background:var(--hx-tint) !important;}
.hx-hero-copy .hx-ghost:first-child{background:linear-gradient(135deg,#FFFFFF,#DCEBF7) !important;color:var(--hx-ink) !important;border-color:transparent !important;box-shadow:0 12px 28px rgba(0,10,30,.28);}

/* ---------- Header ---------- */
header.hx-head{background:rgba(255,255,255,.78) !important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(46,124,181,.12) !important;transition:box-shadow .25s ease;}
header.hx-head.hx-scrolled{box-shadow:0 10px 30px rgba(16,52,86,.10);}
.hlink{position:relative;}
.hlink:hover,.hitem:hover>.hlink{color:var(--hx-blue) !important;}
.hlink::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--hx-blue),var(--hx-sky));transform:scaleX(0);transform-origin:left;transition:transform .22s var(--hx-ease);}
.hitem:hover>.hlink::after{transform:scaleX(1);}
.hpanel,.hsub{border-radius:22px !important;border-color:rgba(46,124,181,.12) !important;box-shadow:var(--hx-shadow-hi) !important;padding:10px !important;}
.hpanel a,.hpanel .hrow{border-radius:12px !important;}
.hpanel a:hover,.hpanel .hrow:hover{background:var(--hx-tint) !important;color:var(--hx-blue) !important;}
.hpanel a.hgroup,.mnav a.mgrp{color:var(--hx-blue) !important;}
.hpanel a.hgroup:hover{background:transparent !important;color:var(--hx-ink) !important;}
.hgroup,.mgrp{letter-spacing:.2em !important;}
.hcta,.mcta{background:linear-gradient(135deg,var(--hx-blue),var(--hx-blue-2)) !important;border-radius:999px !important;box-shadow:0 10px 24px rgba(46,124,181,.30);}
.hlangbtn{border-radius:999px !important;border-width:1px !important;border-color:rgba(46,124,181,.25) !important;}
.hlangmenu{border-radius:18px !important;border-width:1px !important;border-color:rgba(46,124,181,.14) !important;overflow:hidden;box-shadow:var(--hx-shadow-hi) !important;}

/* ---------- Sezioni scure (hero, blu pieno, footer) ---------- */
.hx-dark,footer{background:var(--hx-dark-bg) !important;}
.hx-dark{position:relative;overflow:hidden;}
.hx-lift{position:relative;}
.hx-dark>*{z-index:1;}
.hx-blob{display:none !important;}
.hx-dark::before{
  content:"";position:absolute;left:0;top:0;width:46%;height:60%;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.26) 1.6px,transparent 2.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 0% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 0% 0%,#000 0%,transparent 70%);
}
.hx-dark::after{
  content:"";position:absolute;right:-220px;top:50%;width:900px;height:900px;transform:translateY(-50%);pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 159px,rgba(255,255,255,.13) 160px,rgba(255,255,255,0) 161px);
  -webkit-mask-image:radial-gradient(circle,#000 0%,#000 55%,transparent 72%);
          mask-image:radial-gradient(circle,#000 0%,#000 55%,transparent 72%);
}
.hx-dark.hx-box{border-radius:28px !important;}
.hx-dark .hx-card{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.22) !important;box-shadow:none !important;}

/* Onde che partono dal centro dei cerchi, come le linee dell'impronta del logo */
.hx-pulse{position:absolute;right:-220px;top:50%;width:900px;height:900px;margin-top:-450px;pointer-events:none;z-index:0;}
.hx-pulse i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(142,197,236,.55);opacity:0;transform:scale(.18);animation:hxPulse 7.5s cubic-bezier(.25,.6,.3,1) infinite;}
.hx-pulse i:nth-child(2){animation-delay:2.5s;}
.hx-pulse i:nth-child(3){animation-delay:5s;}
@keyframes hxPulse{0%{opacity:0;transform:scale(.18);}12%{opacity:.9;}100%{opacity:0;transform:scale(.72);}}

/* Hero */
.hx-hero image-slot,.hx-hero img{box-shadow:0 30px 80px rgba(0,10,30,.38);}
.hx-float{border-radius:20px !important;box-shadow:0 24px 60px rgba(0,10,30,.30) !important;}
.hx-float span{border-radius:12px !important;}
@keyframes hxRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hx-anim .hx-hero-copy>*{animation:hxRise .8s var(--hx-ease) both;}
.hx-anim .hx-hero-copy>*:nth-child(2){animation-delay:.08s;}
.hx-anim .hx-hero-copy>*:nth-child(3){animation-delay:.16s;}
.hx-anim .hx-hero-copy>*:nth-child(4){animation-delay:.24s;}
@keyframes hxFloatIn{from{opacity:0;transform:translateY(24px) scale(.96);}to{opacity:1;transform:none;}}
.hx-anim .hx-float{animation:hxFloatIn .9s .55s var(--hx-ease) both;}
.hx-sheen{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;}
.hx-sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);transform:skewX(-16deg);animation:hxSheen 1.5s .5s var(--hx-ease) both;}
@keyframes hxSheen{from{left:-60%;}to{left:130%;}}

/* ---------- Sezioni chiare ---------- */
.hx-light{background:var(--hx-light-bg) !important;border-color:rgba(46,124,181,.08) !important;}

/* ---------- Card e riquadri ---------- */
.hx-card{
  position:relative;isolation:isolate;
  background-color:#fff;
  border:1px solid rgba(46,124,181,.12) !important;
  border-radius:22px !important;
  box-shadow:var(--hx-shadow);
  overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease,transform .35s var(--hx-ease) !important;
}
/* Alone che segue il puntatore */
.hx-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--hx-mx,50%) var(--hx-my,0%),rgba(46,124,181,.12),transparent 60%);}
.hx-dark .hx-card::before{background:radial-gradient(420px circle at var(--hx-mx,50%) var(--hx-my,0%),rgba(142,197,236,.22),transparent 60%);}
.hx-card:hover::before{opacity:1;}
.hx-card:hover{box-shadow:var(--hx-shadow-hi);border-color:rgba(46,124,181,.40) !important;transform:translateY(-4px);}
.hx-card .hx-link:hover{color:var(--hx-blue) !important;}
.hx-panel{border:1px solid rgba(46,124,181,.12) !important;border-radius:26px !important;background:rgba(255,255,255,.75) !important;box-shadow:var(--hx-shadow);}
.hx-ico{border-radius:14px !important;border-width:1px !important;border-color:rgba(46,124,181,.16) !important;background:var(--hx-tint) !important;transition:transform .3s var(--hx-ease),background .3s ease !important;}
*:hover>.hx-ico{transform:translateY(-2px) rotate(-4deg);}

/* Etichette di sezione */
.hx-eyebrow{
  border-bottom:0 !important;color:var(--hx-blue) !important;letter-spacing:.28em !important;padding-bottom:16px !important;
  background-image:linear-gradient(90deg,var(--hx-blue),var(--hx-sky));background-repeat:no-repeat;background-size:56px 4px;background-position:left bottom;
}
.hx-eyebrow.hx-eyebrow-c{background-position:center bottom;}


/* Tabelle delle specifiche */
.hx-table{border-collapse:separate !important;border-spacing:0 !important;border-radius:18px;overflow:hidden;box-shadow:var(--hx-shadow);}
.hx-table th{background:linear-gradient(135deg,var(--hx-ink),var(--hx-blue)) !important;color:#fff !important;border-color:transparent !important;}
.hx-table tr{transition:background-color .15s ease;}
.hx-table tbody tr:hover{background:var(--hx-tint);}

/* ---------- Comparsa allo scorrimento ---------- */
.hx-rv{opacity:0;transform:translateY(26px);}
.hx-rv.hx-in{opacity:1;transform:none;transition:opacity .7s var(--hx-ease),transform .7s var(--hx-ease) !important;}

footer .flang{border-radius:999px;}

/* ---------- Accessibilità e stampa ---------- */
@media (prefers-reduced-motion: reduce){
  .hx-anim .hx-hero-copy>*,.hx-anim .hx-float,.hx-sheen::before{animation:none !important;}
  .hx-pulse{display:none !important;}
  .hx-rv{opacity:1 !important;transform:none !important;}
  .hx-card:hover,*:hover>.hx-ico{transform:none !important;}
}
@media (max-width:768px){
  .hx-dark::after,.hx-pulse{width:600px;height:600px;right:-260px;margin-top:-300px;}
  .hx-dark.hx-box{border-radius:22px !important;}
}
@media print{
  .hx-dark::before,.hx-dark::after,.hx-sheen,.hx-pulse,.hx-progress{display:none !important;}
  .hx-rv{opacity:1 !important;transform:none !important;}
}