/* ─────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────── */

.hero {
  min-height: calc(75dvh + 70px); display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; padding-block: 100px; gap: 60px;
  position: relative; overflow: hidden; background: white;
}

.hero-partnership {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.partner-chip {
  padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.pc-cw { background: var(--cw-light); color: var(--ipn-d); border:1px solid var(--cw);}
.pc-ipn { background: var(--ipn-light); color: var(--ipn-d); border:1px solid var(--ipn);}
.hero-plus {font-weight: 600; color: var(--sec); font-size:16px;}
.hp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hp-dot.cw  { background: var(--cw);  animation: dotBlink 2s ease-in-out infinite; }
.hp-dot.ipn { background: var(--ipn); animation: dotBlink 2s ease-in-out infinite .6s; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.2} }
h1.h1 {
  font-size: clamp(40px,5vw,72px); font-weight: 900;
  line-height: 1.02; color: var(--text); margin-bottom: 28px; letter-spacing: -2px;
}
h1.h1 .light { color: var(--text); font-weight: 900; } 
h1.h1 .accent { color: var(--sec); } 
.hero-desc { font-size: 17px; color: var(--muted); line-height: 1.78; max-width: 500px; margin-bottom: 44px; font-weight: 400; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-right { display: flex; align-items: flex-end; justify-content: center; }
.hero-right-img {width:100%; height:auto;}

/* ─────────────────────────────────────────────────
   STATS BAR — with sec-colored borders
───────────────────────────────────────────────── */
.stats-bar {
  background: var(--antracite); padding: 48px 60px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 3px solid var(--sec); border-bottom: 3px solid var(--sec);
}
.stat-it {
  text-align: center; padding: 20px;
  border-right: 1px solid rgba(13,148,131,.4);  
}
.stat-it:last-child { border-right: none ; }
.stat-val {
  font-size: clamp(44px,5vw,72px); font-weight: 900;
  line-height: 1; letter-spacing: -3px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.sv-m { color:  var(--white) }
.sv-a { color: var(--sec); font-size: .7em }
.sv-inf { color: var(--sec); font-size: 1em }
.stat-lbl { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.4); line-height: 1.5; letter-spacing: .2px }
.stat-lbl strong { color: rgba(255,255,255,.75); font-weight: 800; display: block }

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════ */
.section-gen { padding-block: 100px; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--sec); margin-bottom: 10px;
}
.kicker::before { content: ''; display: block; width: 24px; height: 2px; background: currentColor }
.kicker.dk { color: rgba(255,255,255,.45) }
.kicker.dk::before { background: var(--ipn) }
h2.h2 { font-size: clamp(32px,4vw,54px); font-weight: 900; line-height: 1.05; color: var(--text); margin-bottom: 40px; letter-spacing: -1.5px; margin-top:10px; }
h2.h2 em { font-style: normal; color: var(--sec) }
h2.h2.w { color: var(--white); }
h2.h2.w em { color: var(--sec) }
p.lead { font-size: 18px; color: var(--muted); line-height: 1.75; font-weight: 400; margin:10px;}
p.leadW { font-size: 18px; color: var(--white); line-height: 1.75; font-weight: 400; margin:10px;}
.p-container {max-width: 900px;}
/* <br> nei titoli: solo desktop — da mobile la frase va a capo naturale */
@media (max-width: 768px) { .br-m { display: none; } }

/* ─────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0) }
.reveal-l { opacity: 0; transform: translateX(-30px); transition: opacity .7s ease, transform .7s ease }
.reveal-l.visible { opacity: 1; transform: translateX(0) }
.reveal-r { opacity: 0; transform: translateX(30px); transition: opacity .7s ease, transform .7s ease }
.reveal-r.visible { opacity: 1; transform: translateX(0) }
.reveal-delay-1 { transition-delay: .1s }
.reveal-delay-2 { transition-delay: .2s }
.reveal-delay-3 { transition-delay: .3s }
.reveal-delay-4 { transition-delay: .4s }

/* ══════════════════════════════════════════
   ERP EXPLAINER
══════════════════════════════════════════ */
.erp-section { background: var(--white); }
.erp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.erp-grid-section {display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.erp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap:2px; align-items: flex-start; }
@media (max-width:1640px) {.erp-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width:1200px) {.erp-grid-section{grid-template-columns: 1fr;}.p-container {max-width: 100%;}}

@media (max-width: 860px) {
  .erp-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 650px) {
  .erp-grid { grid-template-columns: 1fr }
}

.erp-grid-box {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,.07);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .25s, border-color .25s;
  color:var(--white);
  height: 100%;
  border-color: rgba(29,148,132,.3);
}

.erp-grid-box h3 {min-height:48px; text-align:center; margin-bottom:16px; font-size:18px;}
.erp-grid-box p {margin-top:0; text-align:center; line-height:1.6;}
.ph-ico {
  width: 44px; height: 44px;
  /*background: rgba(29,148,132,.12);
  border: 1px solid rgba(29,148,132,.25); */
  display: flex; align-items: center; justify-content: center;
  color: var(--sec); font-size: 18px; flex-shrink: 0;
  transition: background .25s;
  margin:0 auto;
  font-size:35px;
}

/* Orbit diagram — darker nodes, glow effect */
.erp-orbit-wrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 500px; margin: 0 auto }
.orbit-center {
  position: absolute; top: 50%; left: 49%; transform: translate(-49%,-50%);
  width: 160px; height: 160px; z-index: 10;
  background-image: url('../img/helyos_pittogramma.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.oc-l { font-size: 28px; font-weight: 900; color:  var(--white); letter-spacing: 2px }
.oc-s { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55) }
.orbit-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); border-radius: 50%; border-style: solid;
}
.or1 { width: 52%; height: 52%; border-width: 1.5px; border-color: #243b64; animation: spin 18s linear infinite }
.or2 { width: 76%; height: 76%; border-width: 1px; border-style: dashed; border-color: var(--cw); animation: spin 32s linear infinite reverse }
.or3 { width: 100%; height: 100%; border-width: 1px; border-color: var(--ipn); animation: spin 50s linear infinite }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg) } }
.on { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: default }
.on-ic {
  width: 50px; height: 50px;
  border-radius: 50px;
  background: var(--antracite); /* dark background */
  border: 1.5px solid var(--sec);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 0 16px rgba(21,21,21,.2), inset 0 0 8px rgba(21,21,21,.06);
  transition: all .35s;
}
.on-ic i {color:var(--sec); font-size:23px;}
.on:hover .on-ic {
  border-color: var(--sec);
  
  transform: scale(1.12);
}
.on-lb { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; text-align:center; }

.on1 { top:3%;  left:50% }  /* CRM */
.on2 { top:19%; left:85% }  /* Processi automatizzati */
.on3 { top:42%; left:99% }  /* Magazzino */
.on4 { top:73%; left:93% }  /* Acquisti */
.on5 { top:99%; left:66% }  /* Vendite */
.on6 { top:98%; left:31% }  /* Produzione */
.on7 { top:74%; left:6%  }  /* Contabilità */
.on8 { top:42%; left:1%  }  /* Analisi */
.on9 { top:14%; left:20% }  /* Fiscalità */

@media (max-width:768px) {.on2 {top:17%; left:79%}}
/* ─────────────────────────────────────────────────
   NOI
───────────────────────────────────────────────── */
.why-list {display: flex; flex-direction: column; gap: 6px; margin-inline: 10px; line-height:1.75;}
.why-list-li {font-size: 18px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 10px;}
.why-list-li::before {
  content: '';
  width: 14px; height: 2px; 
  flex-shrink: 0;
}
.why-list-li-cw::before {background: var(--cw-l);}
.why-list-li-ipn::before {background: var(--ipn);}
.b-sep { display: flex; align-items: center; justify-content: center; padding: 0 20px; background:white;}
.b-sep-line {
  width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(29,148,132,.5), transparent);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.b-sep-ico {
  width:28px; height:28px;
  padding:10px;
  font-size:16px;
  border: 0.5px solid rgba(29,148,132,.8);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  color: #1d9484;
  background:white;
}
/* ─────────────────────────────────────────────────
   SERVIZI
───────────────────────────────────────────────── */
.svc-sec { background: var(--antracite); } 
.svc-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px; }
.svc-main { padding: 92px 52px; color: var(--white); position: relative; overflow: hidden; transition: filter .3s ease, opacity .7s ease, transform .7s ease; height:100%; display:flex;flex-direction:column;}
.svc-main:hover { filter: brightness(1.06) }
.svc-cw  { background: linear-gradient(135deg,var(--cw) 0%,var(--cw) 100%); }  /* less dark blue */
.svc-ipn { background: linear-gradient(135deg,var(--ipn2) 0%,var(--ipn2) 100%) }
.svc-wm {
  position: absolute; right: 16px; bottom: -1px;
  font-size: clamp(32px,5vw,60px); font-weight: 900; /* MUCH smaller */
  opacity: .1; line-height: 1; pointer-events: none; letter-spacing: -1px;
  white-space: nowrap;  
}
.svc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px;width:auto; }
.svc-bd { width: 7px; height: 7px; border-radius: 50%; }
.svc-badge-cw {background: var(--cw-l);}
.svc-badge-ipn {background: var(--ipn);}
.svc-main h3 { font-size: clamp(22px,2.2vw,32px); font-weight: 900; margin-bottom: 16px; line-height: 1.08; letter-spacing: -.5px }
.svc-main p { font-size: 18px; opacity: .8; line-height: 1.72; font-weight: 400 }
.svc-lnk  {
  margin-top:26px;  
  padding: 17px 32px; border: 2px solid var(--white); 
  font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .3s; font-family: var(--font);
  text-decoration:none;
  
}
.svc-lnk:hover {  border-color: rgba(255,255,255,.7); gap: 14px }
.svc-main > div:last-child {
  margin-top: auto;
}
.txt-cw {color:var(--cw-l);}
.txt-ipn {color:var(--ipn);}
.svc-lnk:hover.txt-ipn, .svc-lnk:hover.txt-cw {color:var(--white);}
/* ═══════════════════════════════════════════════════
   SERVIZI & FUNZIONALITÀ — 3 blocchi
   01 Caratteristiche · 02 Cosa fa · 03 Servizi premium
   (sfondo scuro .svc-sec, palette brand da :root)
═══════════════════════════════════════════════════ */
.sf-head { margin-bottom: 8px; }
.sf-head .lead { color: var(--lwhite); max-width: 64ch; margin: 12px 0 0; }

.sf-blk { padding-top: 56px; }
.sf-blk-hd { display: flex; align-items: flex-start; gap: 16px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; margin-bottom: 32px; }
.sf-ix { font-size: clamp(28px,3.4vw,40px); font-weight: 900; line-height: 1; letter-spacing: -2px; color: transparent;  color: var(--acc); flex-shrink: 0; }
.sf-blk-tx { flex: 1; min-width: 0; }
.sf-blk-tx h3 { font-size: clamp(24px,2.7vw,38px); font-weight: 900; letter-spacing: -.8px; line-height: 1; color: var(--white); margin: 0; }
.sf-blk-tx p { font-size: 17px; color: var(--lwhite); margin: 8px 0 0; }
.sf-tag { align-self: flex-start; margin-top: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tagc, var(--acc)); background: color-mix(in srgb, var(--tagc, var(--acc)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tagc, var(--acc)) 32%, transparent); padding: 6px 13px; white-space: nowrap; }
.sf-feat { --acc: var(--sec); --tagc: #16b8a1; }  /* verde etichetta 01 più luminoso: contrasto a norma */
.sf-do   { --acc: var(--cw-l); }
.sf-serv { --acc: var(--ipn); }
.sf-feat .sf-blk-hd { border-top: none; padding-top: 0; }

/* ── 01 · lista + canvas ── */
.sf-feat-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 52px; align-items: start; }
.sf-items { display: flex; flex-direction: column; }
.sf-item { border-top: 1px solid rgba(255,255,255,.055); padding: 20px 0; cursor: pointer; }
.sf-item-top { display: flex; align-items: center; gap: 15px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sf-item:hover .sf-item-top { transform: translateX(8px); }
.sf-item-ic { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1);  display: flex; align-items: center; justify-content: center; color: var(--sec); font-size: 17px; background: rgba(255,255,255,.02); transition: background .3s, border-color .3s, color .3s; }
.sf-item[aria-expanded="true"] .sf-item-ic { background: var(--sec); border-color: var(--sec); color: var(--white); }
.sf-item-t { font-size: 18.5px; font-weight: 800; letter-spacing: -.2px; color: var(--white); transition: color .25s; }
.sf-item[aria-expanded="true"] .sf-item-t { color: var(--sec); }
.sf-caret { margin-left: auto; flex-shrink: 0; color: rgba(255,255,255,.4); font-size: 15px; transition: transform .5s cubic-bezier(.16,1,.3,1), color .3s; }
.sf-item:hover .sf-caret, .sf-item[aria-expanded="true"] .sf-caret { color: var(--sec); }
.sf-item[aria-expanded="true"] .sf-caret { transform: rotate(180deg); }
.sf-item-d { max-height: 0; overflow: hidden; opacity: 0; padding-left: 53px; transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .34s ease; }
.sf-item[aria-expanded="true"] .sf-item-d { opacity: 1; }
.sf-item-d-in { padding-top: 12px; font-size: var(--fsize18); color: rgba(255,255,255,.62); line-height: 1.65; }
.sf-item-d-in p { margin: 0; }
.sf-fx-sub { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sec); margin: 18px 0 10px; display: flex; align-items: center; gap: 9px; }
.sf-fx-sub::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.sf-fx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-fx-list li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fsize18); color: var(--lwhite); line-height: 1.45; }
.sf-fx-list li i { color: var(--sec); font-size: 13px; margin-top: 3px; flex-shrink: 0; }

.sf-canvas { position: sticky; top: 24px; background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.1);  padding: 26px; min-height: 420px; display: flex; flex-direction: column; }
.sf-canvas-lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.sf-canvas-lbl::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sec); }
.sf-shot { background: rgba(0,0,0,.45); border-radius: 11px; padding: 9px; flex: 1; box-shadow: 0 26px 60px -24px rgba(0,0,0,.7); display: flex; flex-direction: column; }
.sf-chrome { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px 9px; }
.sf-chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sf-chrome i:first-child { background: var(--sec); }
.sf-screen { background: rgba(255,255,255,.04); border-radius: 7px; flex: 1; position: relative; overflow: hidden; min-height: 260px; }
.sf-scene { position: absolute; inset: 0; padding: 18px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none; display: flex; flex-direction: column; gap: 12px; }
.sf-scene.on { opacity: 1; transform: none; }
.sf-bar { height: 9px; border-radius: 3px; background: rgba(255,255,255,.09); }
.sf-bar.hd { height: 13px; width: 44%; background: rgba(255,255,255,.32); }
.sf-bar.acc { background: var(--sec); opacity: .9; }
.sf-cap { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.4); }
.sf-canvas-empty { display: none; }
.sf-canvas.is-empty { align-items: center; justify-content: center; text-align: center; }
.sf-canvas.is-empty .sf-shot, .sf-canvas.is-empty .sf-cap, .sf-canvas.is-empty .sf-canvas-lbl { display: none; }
.sf-canvas.is-empty .sf-canvas-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.4); font-size: 14px; }
.sf-canvas-empty i { font-size: 30px; color: rgba(255,255,255,.22); }
.sf-canvas-empty span { max-width: 24ch; line-height: 1.5; }
.sf-lock { display: flex; align-items: center; gap: 12px; }
.sf-lock .lk { width: 40px; height: 40px; border-radius: 9px; background: var(--sec); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom:20px;}
.sf-otp { display: flex; gap: 16px; margin-top:20px;}
.sf-otp span { width: 34px; height: 40px; border-radius: 7px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: flex; align-items: center; justify-content: center; color: var(--sec); font-weight: 800; }
.sf-2fa { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--sec); border: 1px solid var(--sec); border-radius: 100px; padding: 5px 11px; margin:0 auto; margin-top:20px;}
.sf-devs {display: flex; gap: 12px; align-items: center;justify-content: center; width: 100%;max-width: 465px;margin: 0 auto; min-width: 0;}
.sf-dev { flex: none; box-sizing: border-box;overflow: hidden;border: 1.5px solid rgba(255,255,255,.1);border-radius: 9px;background: rgba(255,255,255,.03);display: flex;flex-direction: column;gap: 5px;padding: 9px;}
.sf-dev b { height: 5px; border-radius: 2px; background: rgba(255,255,255,.14); display: block; }
.sf-dev b.a { background: var(--sec); opacity: .85; }
.sf-dev.dk { width: calc((100% - 54px) * 240 / 411); aspect-ratio: 240 / 176; }
.sf-dev.tb { width: calc((100% - 54px) * 125 / 411); aspect-ratio: 125 / 166; }
.sf-dev.ph { width: calc(30px + (100% - 54px) * 46 / 411); aspect-ratio: 76 / 152; }
.sf-gf { display: flex; gap: 10px; flex: 1; width:60%;}
.sf-gf-side { width: 40px; border-radius: 7px; background: linear-gradient(180deg, var(--sec), var(--sec-d)); display: flex; flex-direction: column; gap: 7px; padding: 9px 8px; align-items: center; }
.sf-gf-side b { width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.5); display: block; }
.sf-gf-side b:first-child { background: #fff; }
.sf-gf-main { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sf-sw { display: flex; gap: 7px; }
.sf-sw b { width: 26px; height: 26px; border-radius: 7px; display: block; }
.sf-kpis { display: flex; gap: 12px; width: 100%; }
.sf-kpi { flex: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 11px; background: rgba(255,255,255,.02); }
.sf-kpi .n { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.5px; line-height: 1; }
.sf-kpi .n em { color: var(--sec); font-style: normal; }
.sf-kpi .s { height: 7px; border-radius: 3px; background: rgba(255,255,255,.12); }
.sf-chart { flex: 1; width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 16px; display: flex; align-items: flex-end; gap: 10px; background: rgba(255,255,255,.02); min-height: 120px; }
.sf-chart span { flex: 1; min-width: 0; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.14); display: block; }
.sf-chart span.a { background: var(--sec); }

/* ── 02 · explorer ── */
.sf-comp-hint { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--lwhite); margin-bottom: 14px; }
.sf-comp { display: grid; grid-template-columns: 288px 1fr; border: 1px solid rgba(255,255,255,.1);  overflow: hidden; }
.sf-bricks { padding: 18px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.25)); }
.sf-brick { width: 100%; text-align: left; font-family: var(--font-normal); font-size: 16px; font-weight: 800; padding: 14px 15px;  cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 12px; transition: all .24s cubic-bezier(.4,0,.2,1); }
.sf-brick .bi { width: 32px; height: 32px; flex-shrink: 0;  border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--cw-l); font-size: 15px; transition: all .24s; }
.sf-brick small { display: block; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.4); margin-top: 2px; }
.sf-brick .bt { flex: 1;color:var(--white);}
.sf-brick .chev { color: var(--lwhite); font-size: 14px; transition: transform .24s; }
.sf-brick:hover { border-color: var(--cw-l); color: var(--white); transform: translateX(3px); }
.sf-brick[aria-pressed="true"] { background: var(--cw); border-color: var(--cw); color: var(--white); }
.sf-brick[aria-pressed="true"] .bi { background: #fff; border-color: #fff; color: var(--cw); }
.sf-brick[aria-pressed="true"] small { color: rgba(255,255,255,.78); }
.sf-brick[aria-pressed="true"] .chev { transform: rotate(90deg); color: var(--white); }
.sf-brick-custom { border-style: dashed; border-color: rgba(91,184,201,.5); }
.sf-brick-custom .bi { color: var(--ipn); }
.sf-brick-custom[aria-pressed="true"] { border-style: solid; }
.sf-readout { padding: 24px; border-left: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; background: var(--antracite); min-width: 0; }
.sf-readout h4 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0 0 4px; }
.sf-rcount { font-size: 13px; font-weight: 800; color: var(--cw-l); margin-bottom: 16px; min-height: 16px; }
.sf-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 10px; align-content: start; flex: 1; max-height: clamp(320px,48vh,480px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 7px; scrollbar-width: thin; scrollbar-color: var(--cw) transparent; }
.sf-stack::-webkit-scrollbar { width: 6px; }
.sf-stack::-webkit-scrollbar-thumb { background: var(--cw); border-radius: 3px; }
.sf-stack.scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(180deg,#000 calc(100% - 42px),transparent); mask-image: linear-gradient(180deg,#000 calc(100% - 42px),transparent); }
.sf-slab { border: 1px solid rgba(255,255,255,.1);  padding: 13px 14px; background: rgba(255,255,255,.02); animation: sfDrop .34s cubic-bezier(.34,1.3,.5,1) both; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .22s, background .22s, transform .22s; }
.sf-slab:hover { border-color: rgba(26,192,242,.45); background: rgba(26,192,242,.04); transform: translateY(-2px); }
.sf-slab-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sf-tagpill { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cw-l); background: rgba(26,192,242,.1); border: 1px solid rgba(26,192,242,.28);  padding: 3px 8px; line-height: 1.35; }
.sf-slab-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 800; color: #fff; }
.sf-slab-arr { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02); transition: color .22s, border-color .22s, background .22s, transform .22s; }
.sf-slab-arr i { font-size: 12px; }
.sf-slab:hover .sf-slab-arr { color: var(--cw-l); border-color: rgba(26,192,242,.45); background: rgba(26,192,242,.12); transform: translateX(2px); }
.sf-slab-d { font-size: 14.5px; color: var(--lwhite); line-height: 1.5; margin-top: 5px; letter-spacing:1px; }
@keyframes sfDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sf-readout-foot { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: rgba(255,255,255,.4); line-height: 1.55; }
.sf-readout.custom .sf-readout-foot { display: none; }
.sf-readout.custom .sf-stack { display: block; max-height: none; overflow: visible; }
.sf-custom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding: 8px 0; max-width: 660px; margin-inline: auto; }
.sf-custom h5 { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.3px; margin: 0; }
.sf-custom p { font-size: var(--fsize18); color: rgba(255,255,255,.62); line-height: 1.62; margin: 0; }
.sf-custom-cta { display: inline-flex; align-items: center; margin-top: 6px; background: var(--sec); color: #fff; font-weight: 800; font-size: var(--fsize18); padding: 13px 22px; border-radius: 100px; text-decoration: none; transition: transform .2s, background .2s; }
.sf-custom-cta:hover { background: var(--sec-d); transform: translateY(-2px); }
@media (max-width:768px) {.sf-brick .bi{font-size:16px;}.sf-brick small{font-size:15px;}.sf-rcount{font-size:15px;}.sf-tagpill {font-size:11px;}}
/* ── 03 · servizi premium ── */
.sf-rail { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cw), var(--ipn), var(--sec), var(--cw)); background-size: 300% 100%; animation: sfRail 7s linear infinite; margin-bottom: 30px; opacity: .85; }
@keyframes sfRail { to { background-position: 300% 0; } }
.sf-prem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.sf-pcard { position: relative; border: 1px solid rgba(255,255,255,.1); padding: 26px 24px; background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(0,0,0,.25)); overflow: hidden; transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .35s; }
.sf-pcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cw), var(--ipn), var(--sec)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.sf-pcard:hover { transform: translateY(-6px); border-color: rgba(91,184,201,.4); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.sf-pcard:hover::before { transform: scaleX(1); }
.sf-pcard-top { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.sf-pcard-ic { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: linear-gradient(135deg, var(--cw), var(--ipn)); }
.sf-pcard:nth-child(2) .sf-pcard-ic { background: linear-gradient(135deg, var(--ipn), var(--sec)); }
.sf-pcard:nth-child(3) .sf-pcard-ic { background: linear-gradient(135deg, var(--sec), var(--cw)); }
.sf-phase { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ipn); }
.sf-pcard-top h4 { font-size: 20px; font-weight: 900; letter-spacing: -.4px; color: var(--white); margin: 3px 0 0; }
.sf-plead { font-size: var(--fsize18); color: rgba(255,255,255,.62); line-height: 1.6; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.055); }
.sf-psub { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ipn); margin-bottom: 13px; }
.sf-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sf-pts li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fsize18); color: var(--white); line-height: 1.45; }
.sf-pts li i { color: var(--ipn); font-size: 14px; margin-top: 2px; flex-shrink: 0; }

/* ── responsive ── */
@media (max-width: 940px) {
  .sf-feat-grid { grid-template-columns: 1fr; gap: 30px; }
  .sf-canvas { position: static; order: -1; min-height: 340px; }
  .sf-comp { grid-template-columns: 1fr; }
  .sf-readout { border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .sf-readout.collapsed { display: none; }
  .sf-stack { max-height: none; overflow: visible; }
  .sf-stack.scrollable:not(.at-end) { -webkit-mask-image: none; mask-image: none; }
  .sf-prem-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .sf-item-d { padding-left: 0; }
  .sf-blk-tx h3 { font-size: 26px; }
  .sf-blk-hd { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag tag" "ix tx"; column-gap: 14px; row-gap: 4px; align-items: start; }
  .sf-ix { grid-area: ix; }
  .sf-blk-tx { grid-area: tx; }
  .sf-tag { grid-area: tag; justify-self: start; margin: 0 0 12px; font-size:12px;}
}

@media (max-width: 950px) {
  .svc-top { grid-template-columns: 1fr }

  .b-sep {
    flex-direction: row;
    padding: 20px 0;
    height: auto;
  }
  .b-sep-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(29,148,132,.5), transparent);
    flex-direction: row;
  }

  .b-sep-ico { transform: rotate(90deg);}
}

/* ─────────────────────────────────────────────────
   SETTORI
───────────────────────────────────────────────── */
.sec-hdr { margin-bottom: 56px; }
.sec-acc { display: grid; grid-template-columns: 1fr 1fr; gap:0 50px; align-items: start;}
.sec-col { display: flex; flex-direction: column; }
.sec-col:first-child .sec-item:first-child,
.sec-col:last-child .sec-item:first-child { border-top: 1px solid var(--sec); }
.sec-item { border-bottom: 1px solid var(--sec); }
.sec-item:first-child { border-top: 1px solid var(--sec); }
.sec-trig {
  width: 100%; background: none; border: none; text-align: left; cursor: pointer;
  padding: 20px 0; display: flex; align-items: flex-start; gap: 16px; font-family: var(--font-normal);
}
.sec-num { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--white); background:var(--sec); transition: all .3s }
.sec-item.open .sec-num { background: var(--sec-d); border-color: var(--sec-d); color: var(--white);}
.sec-ico { font-size: 22px; flex-shrink: 0; }
.sec-hd { flex: 1; text-align: left;}
.sec-hd h3 { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.3px; transition: color .2s; margin:0; }
.sec-item:hover .sec-hd h4, .sec-item.open .sec-hd h4 { color: var(--sec-d); }
.sec-hd p { font-size: 16px; color: var(--muted); margin-top: 2px; font-weight: 500; padding:0; margin-bottom:0; }
.sec-arr { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--sec); font-size: 20px; color: var(--muted); transition: all .35s cubic-bezier(.77,0,.18,1) }
.sec-item:hover .sec-arr {background:var(--sec); color:var(--white);}
.sec-item.open .sec-arr { transform: rotate(45deg); border-color: transparent; color: var(--white); background: var(--sec-d); }
.sec-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.77,0,.18,1) }
.sec-item.open .sec-body { max-height: 700px }
.sec-bi { padding: 0 0 28px 48px; display: grid; display:flex; flex-direction:column; gap: 32px; align-items: start; }
.sb-desc { font-size: 1rem; color: var(--muted); line-height: 1.72; font-weight: 400; margin-bottom:0; }
.sb-feats { display: flex; flex-direction: column }
.sb-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--antracite); padding: 9px 0; }
.sb-feat:last-child { border: none }
.sb-feat::before { content: '➝'; color: var(--sec); font-size: 14px; font-weight: 900; flex-shrink: 0 }

@media (max-width:950px) {
  .sec-acc { display: grid; grid-template-columns: 1fr; align-items: start;}
  .sec-col:last-child .sec-item:first-child { border-top: none }
}

/* ─────────────────────────────────────────────────
   PROCESS 
───────────────────────────────────────────────── */
.proc-sec { background: var(--antracite); }
.proc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start }
.proc-intro { font-size: var(--fsize18); color: var(--lwhite); line-height: 1.75; margin-top: 20px; max-width: 400px }
.proc-steps { display: flex; flex-direction: column; position: relative }
.proc-steps::before { content: ''; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: linear-gradient(to bottom, var(--cw), var(--ipn)); z-index: 0 }
.ps { display: flex; gap: 24px; padding: 26px 0; position: relative; align-items:center; }
.ps-n-wrap {
  perspective: 900px;
}
.ps-n {
  width: 48px; height: 48px;
  position: relative; z-index: 1;
  transform-style: preserve-3d;
  animation: psFlip1to5 6s cubic-bezier(.77,0,.18,1) infinite;
}
.ps-face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
   
}

.ps-face-back{
  transform: rotateY(180deg); 
}

/* Ogni box usa la stessa animazione ma con un offset diverso,
   senza delay (niente sovrapposizioni nel loop) */
.ps-n.ps1{ animation-name: psFlip1; }
.ps-n.ps2{ animation-name: psFlip2; }
.ps-n.ps3{ animation-name: psFlip3; }
.ps-n.ps4{ animation-name: psFlip4; }
.ps-n.ps5{ animation-name: psFlip5; }
@keyframes psFlip1{
  0%       { transform: rotateY(0deg) }
  6%       { transform: rotateY(0deg) }     /* piccola pausa */
  14%      { transform: rotateY(180deg) }   /* flip (una volta) */
  20%      { transform: rotateY(180deg) }   /* resta girato fino a fine finestra */
  20.001%  { transform: rotateY(0deg) }     /* reset istantaneo (non percepito) */
  100%     { transform: rotateY(0deg) }
}

/* 2: finestra 20–40% */
@keyframes psFlip2{
  0%,20%   { transform: rotateY(0deg) }
  26%      { transform: rotateY(0deg) }
  34%      { transform: rotateY(180deg) }
  40%      { transform: rotateY(180deg) }
  40.001%  { transform: rotateY(0deg) }
  100%     { transform: rotateY(0deg) }
}

/* 3: finestra 40–60% */
@keyframes psFlip3{
  0%,40%   { transform: rotateY(0deg) }
  46%      { transform: rotateY(0deg) }
  54%      { transform: rotateY(180deg) }
  60%      { transform: rotateY(180deg) }
  60.001%  { transform: rotateY(0deg) }
  100%     { transform: rotateY(0deg) }
}

/* 4: finestra 60–80% */
@keyframes psFlip4{
  0%,60%   { transform: rotateY(0deg) }
  66%      { transform: rotateY(0deg) }
  74%      { transform: rotateY(180deg) }
  80%      { transform: rotateY(180deg) }
  80.001%  { transform: rotateY(0deg) }
  100%     { transform: rotateY(0deg) }
}

/* 5: finestra 80–100% */
@keyframes psFlip5{
  0%,80%   { transform: rotateY(0deg) }
  86%      { transform: rotateY(0deg) }
  94%      { transform: rotateY(180deg) }
  100%     { transform: rotateY(180deg) }   /* resta girato fino a fine ciclo */
}

/* front and back faces */
.ps-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; letter-spacing: -1px;
  border: 2px solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ps-face-back {
  transform: rotateY(180deg);
}
.ps1{background:var(--sec);border-color:var(--sec);color:var(--white);}
.ps2{background:var(--cw);border-color:var(--cw);color:var(--white);}
.ps3{background:var(--ipn-d);border-color:var(--ipn-d);color:var(--white);}
.ps4{background:var(--ipn2);border-color:var(--ipn2);color:var(--white);}
.ps5{background:var(--ipn);border-color:var(--ipn);color:var(--white);}

.ps-b h3 { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 4px; letter-spacing: -.3px; margin-top:0; }
.ps-b p { font-size: var(--fsize18); color: var(--lwhite); line-height: 1.65; margin:0; }

/* ─────────────────────────────────────────────────
   FAQ
───────────────────────────────────────────────── */
.faq-in { display: grid; grid-template-columns: 1fr 1.7fr; gap: 80px; align-items: start }
.faq-left p { font-size: var(--fsize18); color: var(--muted); line-height: 1.72; margin: 16px 0 32px }
.faq-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: var(--sec-l); font-size: 14px; font-weight: 800; color: var(--sec-d); transition: all .3s; border: 2px solid transparent }
.faq-cta:hover { background: transparent; border-color: var(--sec); color: var(--sec); }
.faq-list { display: flex; flex-direction: column }
.fi { border-bottom: 1px solid var(--sec); }
.fi:first-child { border-top: none; }
.fi-q { width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--font); font-size: var(--fsize18); font-weight: 800; color: var(--text); gap: 16px; transition: color .2s }
.fi-q:hover { color: var(--sec); }
.fi-ic { width: 30px; height: 30px; flex-shrink: 0; background: var(--off); border: 1.5px solid var(--brd); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sec); transition: all .35s cubic-bezier(.77,0,.18,1) }
.fi.open .fi-ic { transform: rotate(45deg); background: var(--sec); color:var(--white); }
.fi.open .fi-q {color:var(--sec);}
.fi-ans { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s }
.fi.open .fi-ans { max-height: 300px; padding-bottom: 22px }
.fi-ans p { font-size: var(--fsize18); color: var(--muted); line-height: 1.75; padding:0; margin:0; }
/* etichetta di gruppo FAQ (distingue le domande generali da quelle specifiche di Mexal) */
.faq-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 34px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--sec); }
.faq-group:first-child { padding-top: 0; }
.faq-group::before { content: ''; width: 22px; height: 2px; background: var(--sec); flex-shrink: 0; }
.faq-group-note { font-weight: 600; letter-spacing: .2px; text-transform: none; color: var(--muted); font-size: 13px; }

/* ─────────────────────────────────────────────────
   SEZIONE COSTI — banda verde accento (dopo #processo)
───────────────────────────────────────────────── */
#costi { background: var(--sec); color: #fff; }
#costi .kicker { color: var(--antracite); }
#costi .kicker::before { background: var(--antracite); }
#costi .h2 em { color: #111; }
#costi .costi-head { max-width: 720px; margin-bottom: 34px; }
#costi .costi-lead { font-size: var(--fsize18); color: #fff; line-height: 1.7; max-width: 60ch; margin: 0; font-weight: 500; }
#costi .costi-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#costi .costi-box { background: #fff; padding: 26px 24px; display: flex; flex-direction: column; }
#costi .cb-ico { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--sec-l); color: var(--sec); margin-bottom: 16px; font-size: 22px; }
#costi .costi-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
#costi .costi-box p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
#costi .cb-tag { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 800; color: var(--sec); text-transform: uppercase; letter-spacing: .4px; }
#costi .costi-cta { margin-top: 30px; }
#costi .costi-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--antracite); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .25s, box-shadow .25s; }
#costi .costi-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); color: #fff; }
#costi .costi-btn i { transition: transform .25s; }
#costi .costi-btn:hover i { transform: translateX(4px); }
@media (max-width: 820px) { #costi .costi-boxes { grid-template-columns: 1fr; } }

/*  ────────────────────────────────────
CTA 
──────────────────────────────────────── */

.ctaBgParallax{
  position: relative;
  overflow: hidden;
  background: var(--antracite); 
  padding: 110px 24px;
  min-height: 520px;
  text-align:center;
}


.ctaBgParallax::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/background.webp'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}



/* Slight vignette to keep text readable (keep it even if you add an image) */
.ctaBgParallax::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 650px at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.58) 100%);
  z-index: 1;
  pointer-events: none;
}

.ctaBgParallax__content{
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
 text-align: center;
}

/* Moving squares layer */
.ctaBgParallax__float{
  position: absolute;
  inset: 0;
  z-index: 1; 
  pointer-events: none;
}

.ctaRect{
  position: absolute;
  border-radius: 0; 
  background: transparent;
  border: 2px solid rgba(255,255,255,.75);
  transform: translate3d(0,0,0) rotate(0deg);
  opacity: .95;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* quadrati */
.ctaRect--a{ top: 14%; left: 9%;  width: 44px; height: 44px; border-color: rgba(13,148,131,.95); }
.ctaRect--b{ top: 18%; right: 7%; width: 84px; height: 84px; border-color: rgba(0,97,160,.95); }
.ctaRect--c{ top: 52%; left: 14%; width: 30px; height: 30px; border-color: rgba(91,184,201,.95); }
.ctaRect--d{ bottom: 12%; left: 36%; width: 96px; height: 96px; border-color: rgba(0,97,160,.85); }
.ctaRect--e{ bottom: 18%; right: 18%; width: 56px; height: 56px; border-color: rgba(13,148,131,.75); }

@media(max-width:990px) {
  .ctaBgParallax { min-height: 700px; padding: 80px 18px; }
  .ctaBgParallax::before {background-image: none;}
  .ctaRect--a{ top: 14%; left: 9%;  width: 44px; height: 44px; border-color: rgba(13,148,131,.95); }
  .ctaRect--b{ top: 18%; right: 7%; width: 84px; height: 84px; border-color: rgba(0,97,160,.95); }
  .ctaRect--c{ top: 42%; left: 14%; width: 30px; height: 30px; border-color: rgba(91,184,201,.95); }
  .ctaRect--d{ bottom: 0; left: 6%; width: 96px; height: 96px; border-color: rgba(0,97,160,.85); }
  .ctaRect--e{ bottom: 3%; right: 18%; width: 56px; height: 56px; border-color: rgba(13,148,131,.75); }
}


.cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-k {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 24px; font-weight: 800;
}
.cta-title {
  font-size: clamp(38px,5vw,68px); font-weight: 900; color: var(--white);
  line-height: 1; letter-spacing: -2.5px; margin-bottom: 16px;
}
.cta-desc {
  font-size: 17px; color: var(--lwhite); margin-bottom: 52px;
  max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.65; 
}
.cta-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(255,255,255,0.8);
  border: 1px solid var(--sec);
  margin-block: 58px;   
}
.cta-stat { background: rgba(255,255,255,.03); padding: 26px 16px }
.cta-stat + .cta-stat {border-left:1px solid var(--sec);}
.cta-stat-n {
  font-size: 40px; font-weight: 900; letter-spacing: -2px; line-height: 1;
  background: var(--sec);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cta-stat-l { font-size: 14px; color: var(--sec); margin-top: 6px; font-weight: 600 }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top:48px;  }
.btn-w {
  padding: 17px 44px; background: var(--sec); color: var(--white);
  font-size: 15px; font-weight: 900;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  transition: color .4s, transform .2s, box-shadow .3s;
  text-decoration: none;
}
.btn-w::before {
  content: ''; position: absolute; inset: 0;
  background: var(--white); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.77,0,.18,1);
}
.btn-w:hover::before { transform: scaleX(1) }
.btn-w:hover { transform: translateY(-2px);  color:var(--sec); }
.btn-w span { position: relative; z-index: 1 }
.btn-gh {
  padding: 17px 32px; border: 2px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7);
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .3s; font-family: var(--font);
  text-decoration:none;
}
.btn-gh:hover { border-color: rgba(255,255,255,.5); color:  var(--white); background: rgba(255,255,255,.06) }
.cta-wm { display: none }

/* Responsive */
@media (max-width: 820px){
  .ctaBgParallax{ padding: 90px 18px; min-height: 520px; }
  .ctaRect--a{ left: 6%; }
  .ctaRect--b{ right: 3%; width: 72px; height: 72px; }
  .ctaRect--d{ left: 18%; width: 84px; height: 84px; }
}

/* Pausa animazioni infinite quando fuori dallo schermo: main.js aggiunge .anim-off.
   Default running → se il JS non parte, girano come prima (nessuna regressione). */
.hp-dot.anim-off,
.orbit-ring.anim-off,
.ps-n.anim-off,
.sf-rail.anim-off { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .ctaRect{ transform:none !important; }
  /* Chi ha chiesto "riduci movimento": niente animazioni infinite (stato finale, fermo) */
  .hp-dot, .orbit-ring, .ps-n, .sf-rail { animation: none !important; }
}


/* ─────────────────────────────────────────────────
   CONTACT — WHITE background, no extra recapiti
───────────────────────────────────────────────── */
.contact-sec { background: var(--white) }
.contact-sec .kicker { color: var(--sec) }
.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }

/* Form card */
.form-card { background: var(--sec-l); border: 1px solid var(--sec); padding: 48px }
.form-card h3 { font-size: 24px; font-weight: 900; color: var(--text); margin-bottom: 8px; letter-spacing: -.5px }
.form-card > p { font-size: 15px; color: var(--muted); margin-bottom: 36px; line-height: 1.6 }
form.cf { display: flex; flex-direction: column; gap: 14px }
.cf .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.cf input:not([type=checkbox]), .cf textarea, .cf select {
  width: 100%; padding: 14px 18px; background: var(--white);
  border: 1.5px solid var(--sec); font-family: var(--font-normal); font-size: 14px;
  color: var(--text); outline: none; transition: all .25s; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.cf input:focus, .cf textarea:focus, .cf select:focus { border-color: var(--sec); box-shadow: 0 0 0 3px rgba(13,148,131,.08) }

/* ── honeypot anti-spam (nascosto) ── */
.cf-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ── select "Settore": freccia (appearance:none rimuove quella nativa) ── */
.cf select { padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d9483' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 15px; }
.cf select:has(option[value=""]:checked) { color: var(--muted); }

/* ── stato errore: campi obbligatori evidenziati ── */
.cf input.cf-invalid, .cf textarea.cf-invalid, .cf select.cf-invalid {
  border-color: #d64545 !important; background-color: #fdf3f3 !important; box-shadow: 0 0 0 3px rgba(214,69,69,.12) !important; }
.cf .pol-row.cf-invalid .pol-txt { color: #c0392b; }
.cf .pol-row.cf-invalid input[type=checkbox] { outline: 2px solid #d64545; outline-offset: 2px; }
.cf .cf-turnstile.cf-invalid { outline: 2px solid #d64545; outline-offset: 4px; }

/* ── messaggio riepilogo form ── */
.cf-formmsg { display: none; padding: 11px 14px; background: #fdf3f3; border: 1px solid #e7b7b7; color: #a12b2b; font-size: 13px; font-weight: 700; line-height: 1.5; }
.cf-formmsg.is-ok { background: #eef7f4; border-color: #9fd3c7; color: #0d6b5f; }
.cf textarea { height: 110px; resize: vertical }
.cf .pol-row { display: flex; align-items: center; gap: 14px; width:100%;}
.cf .pol-row input[type=checkbox] { width: 15px; height: 15px; flex-shrink: 1; margin-top: 2px; cursor: pointer; accent-color: var(--sec); border: 1.5px solid var(--sec-d) }
.pol-txt { font-size: 12px; color: var(--muted); line-height: 1.6 }
.pol-txt a { color: var(--sec); text-decoration: underline; text-underline-offset: 2px }
.rc-mock { background: var(--white); border: 1.5px solid var(--sec); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between }
.rc-left { display: flex; align-items: center; gap: 16px }
.rc-chk { width: 24px; height: 24px; border: 2px solid var(--sec-d); flex-shrink: 0; position: relative; cursor: pointer; transition: all .25s }
.rc-chk.checked { border-color: var(--sec); background: var(--sec) }
.rc-chk.checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 14px; font-weight: 900 }
.rc-lbl { font-size: 14px; font-weight: 600; color: var(--muted) }
.rc-right { text-align: right; font-size: 10px; color: var(--light); line-height: 1.5 }
.rc-logo { font-size: 18px; margin-bottom: 2px }
.cf-sub { padding: 16px 20px; background: var(--sec); border: none; color: var(--white); font-family: var(--font); font-size: 16px; font-weight: 900; cursor: pointer; position: relative; overflow: hidden; transition: all .35s; width:40%; }
.cf-sub i {color:var(--white);}
.cf-sub::before { content: ''; position: absolute; inset: 0; background: var(--antracite); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.77,0,.18,1) }
.cf-sub:hover::before { transform: scaleX(1) }
.cf-sub span, .cf-sub i { position: relative; z-index: 1 }
.cf-sub:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(13,148,131,.35) }

/* Next steps card */
.next-card { background: var(--sec-l); border: 1px solid var(--sec); padding: 44px 40px }
.next-card h3 { font-size: 26px; font-weight: 900; color: var(--text); margin-bottom: 10px; letter-spacing: -.5px }
.next-card > p { font-size: 14px; color: var(--muted); margin-bottom: 44px; line-height: 1.6 }
.ns-list { display: flex; flex-direction: column; position: relative }
.ns-list::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(to bottom, var(--sec), var(--sec-d)); }
.ns { display: flex; gap: 20px; padding: 16px 0; position: relative; align-items: flex-start; }
.ns-circ { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; z-index: 1; border: 2px solid; background: var(--white) }
.nc1{border-color:var(--sec);color:var(--sec);}
.nc2{border-color:var(--cw);color:var(--cw);}
.nc3{border-color:var(--ipn2);color:var(--ipn2);}
.nc4{border-color:var(--ipn);color:var(--ipn);}

.ns-body h4 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 3px; margin-top:0; }
.ns-body p { font-size: 1rem; color: var(--muted); margin:0; padding-top:0;}
.ns-tag { display: inline-block; margin-top: 8px; padding: 3px 10px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase }
.nt0 { background: var(--sec); color: var(--white) }
.nt1 { background: var(--cw); color: var(--white) }
.nt2 { background: linear-gradient(to right, var(--cw), var(--ipn)); color: var(--white) }

@media(max-width:1787px) {.hero { gap: 40px; }}
@media (max-width:1200px) {  
  .hero { grid-template-columns: 1fr; padding-block: 150px 80px; min-height: auto; gap: 40px; }
 
  .hero-left {margin:0 auto; width:auto;} 
  .hero-desc { font-size: 17px; line-height: 1.78; max-width: 100%; margin-bottom: 44px;  }
  h1.h1 { font-size: 60px; }
  h1.h1 br:first-of-type {display:none;}
  .cf-sub {width:100%;}
}
@media(max-width:950px) {    
  .hero { grid-template-columns: 1fr; padding-block: 120px 50px; min-height: auto;}
  .erp-orbit-wrap { max-width: 340px }

  .sec-bi { grid-template-columns: 1fr; padding-left: 48px }
  .proc-in { grid-template-columns: 1fr; gap: 40px }
  .faq-in { grid-template-columns: 1fr; gap: 40px }
  .contact-layout { grid-template-columns: 1fr }
  .fg { grid-template-columns: 1fr 1fr }
  .stats-bar { grid-template-columns: 1fr 1fr; padding: 40px 24px }
  .stat-it { border-bottom: 1px solid rgba(255,255,255,.07) }
  .stat-it:nth-child(2) { border-right: none; }
  .stat-it:nth-child(3) { border-bottom: none; }
  .stat-it:last-child { border-right: none; border-bottom: none; }
  section { padding-block: 64px;}
  footer { padding: 40px 24px 28px }
  
}
@media(max-width:600px) {
  .mo-inner { padding: 90px 28px 40px }
  h1.h1 { font-size: 36px }
  .svc-main { padding: 36px }
  .cf .fr { grid-template-columns: 1fr }
  .fg { grid-template-columns: 1fr }
  .footer-bot { flex-direction: column; align-items: flex-start }
  .fbl a:first-child { margin-left: 0 }
  .sec-bi { padding-left: 0 }
  .form-card, .next-card { padding: 28px }
  .cf-sub {width:100%;}
  .section-gen {padding-block:40px;}
  .section-gen-custom {padding-block:40px 100px;}
}
/* Turnstile su telefono: formato "normal" (basso e largo) rimpicciolito, non un quadrato alto.
   transform:scale + margini negativi per ridurre anche l'ingombro reale (fit su tutti i telefoni). */
@media (max-width: 480px) {
  .cf-ts-row .cf-turnstile { transform: scale(.6); transform-origin: center; margin: -13px -60px; }
}