/* Enkeli unified app preset. HRev_v3.html is intentionally independent. */
:root{
  --display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --navy:#071d33;
  --navy-2:#0e2440;
  --navy-3:#14315a;
  --steel:#3d5a80;
  --text:#f7f9fc;
  --soft:#b9d4f5;
  --muted:#5f7390;
  --ink:#0e2440;
  --orange:#ff7e00;
  --orange-2:#ff9a3d;
  /* Alias usati negli SVG dei diagrammi (ai, mobile, prodotti): erano
     riferiti 24 volte in fill e stroke ma non definiti da nessuna parte,
     quindi quelle forme si disegnavano nere invece che arancioni. */
  --amber:#ff7e00;
  --amber-soft:rgba(255,126,0,.28);
  --paper:#ffffff;
  --paper-2:#f4f8fc;
  --line:rgba(14,36,64,.14);
  --line-dark:rgba(255,255,255,.14);
  --shadow:0 22px 60px rgba(2,14,29,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy);overflow-x:hidden}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--body);line-height:1.58;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{width:min(1386px,calc(100% - 48px));max-width:none;margin:0 auto;padding:0}

.topbar{position:fixed;inset:0 0 auto 0;height:86px;z-index:100;background:rgba(7,29,51,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-dark)}
.topbar nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo-mark{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--display);font-size:22px;font-weight:850;letter-spacing:0}
.logo-mark img{height:56px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:28px;font-family:var(--display);font-size:14px;font-weight:760;color:#dbe9fb}
.menu a{color:#dbe9fb;transition:color .18s ease}
.menu a:hover,.menu a.active{color:var(--orange-2)}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.lang-switch button{
  min-width:34px;
  min-height:30px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#dbe9fb;
  -webkit-text-fill-color:#dbe9fb;
  font-family:var(--display);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.lang-switch button.active{
  background:var(--orange);
  color:#081525;
  -webkit-text-fill-color:#081525;
}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:8px;background:var(--orange);color:#081525;font-family:var(--display);font-size:14px;font-weight:850;border:1px solid var(--orange)}
.hrev-mobile-toggle,
.hrev-mobile-panel{
  display:none;
}

.hrev-mobile-panel{
  position:fixed;
  left:16px;
  right:16px;
  top:92px;
  z-index:90;
  padding:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(6,17,31,.96);
  box-shadow:0 28px 80px rgba(2,14,29,.36);
}

.hrev-mobile-panel a{
  display:block;
  padding:12px 4px;
  color:#dbe9fb;
  -webkit-text-fill-color:#dbe9fb;
  font-family:var(--display);
  font-size:15px;
  font-weight:760;
}

.hrev-mobile-panel a.active,
.hrev-mobile-panel a:hover{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

body.hrev-menu-open .hrev-mobile-panel{
  display:block;
}


main{background:var(--navy);color:var(--text)}
section,.block,.home-section,.phero,.hero,.pio,.mob,.ai-sec,.appro,.clients,.contact-section,.journal-page{position:relative;padding:96px 0;background:var(--navy);color:var(--text)}
.phero,.hero,.home-hero{padding-top:150px;background:linear-gradient(140deg,#071526 0%,#0e2440 58%,#173b68 100%)}
.home-hero{padding-bottom:86px}
.eyebrow,.k,.sector,.journal-kicker,.clients-kicker,.contact-kicker,.stats-eyebrow{display:block;margin:0 0 22px;color:var(--orange-2);font-family:var(--display);font-size:13px;line-height:1;font-weight:850;letter-spacing:.34em;text-transform:uppercase}
h1,h2,h3,h4,h5,.pname,.big,.yr,.tech{margin:0;color:var(--text);font-family:var(--display);letter-spacing:0;font-weight:850;text-shadow:none}
h1,.phero h1,.hero h1,.home-copy h1{max-width:940px;margin:18px 0 24px;font-size:clamp(50px,5.7vw,82px);line-height:.99;font-weight:850}
.sec-head h2,.home-head h2,.home-grid-head h2,.clients-head h1,.clients-head h2,.contact-hero h1,.contact-hero h2,.journal-hero h1,.journal-hero h2,.mob h2,.ai-sec h2,.appro h2,.pio h2,.cta-band h2{max-width:940px;margin:18px 0 18px;font-size:clamp(44px,4.7vw,58px);line-height:1.05;font-weight:850;color:var(--text)}
p,li,.lead,.sub,.sec-head p,.home-head p,.home-grid-head p,.clients-lead,.contact-intro,.journal-lead,.phero p,.hero p,.home-copy p{max-width:860px;margin:0;color:var(--soft);font-size:21px;line-height:1.45;font-weight:500}
.sec-head,.home-head,.home-grid-head,.clients-head,.contact-hero,.journal-hero{max-width:940px;margin:0 0 46px;text-align:left}

.btn,.btn-primary,.btn-ghost,.btn-amber,.contact-link,.form-submit,.band-cta,.pcta,.go,.rd{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:8px;font-family:var(--display);font-size:14px;font-weight:850;letter-spacing:0;border:1px solid transparent;cursor:pointer}
.btn-primary,.btn-amber,.contact-link,.form-submit,.band-cta,.pcta{background:var(--orange);border-color:var(--orange);color:#081525}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--text)}

.home-grid,.hero-grid,.ai-grid,.contact-grid,.client-showcase,.story-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);gap:clamp(34px,5vw,76px);align-items:center}
.pillars,.cap-grid,.fmts,.prods,.stories,.logo-row,.client-metrics,.wc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.logo-row{grid-template-columns:repeat(5,minmax(0,1fr))}.client-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}

.home-card,.home-business-card,.home-value-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo,.client-logo-board,.client-proof-card,.contact-card,.contact-form,.sf-res,.mob-card,.mcp,.phone,.ai-band,.intl,.cl-note,.cta-band,.bmap-sap,.bmap-cell,.bmap-tile{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);border:1px solid var(--line);border-radius:18px;color:var(--ink);box-shadow:var(--shadow);text-shadow:none}
.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-proof-card,.contact-card,.contact-form,.sf-res,.mob-card{padding:30px}
.home-card :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.pillar :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.cap :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.fmt :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.prod :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.story :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.wc :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.aip :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.pio-n :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.door :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.cslide :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.case :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.client-metric :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.client-logo :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.client-logo-board :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.client-proof-card :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.contact-card :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.contact-form :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.sf-res :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.mob-card :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.mcp :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.phone :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.ai-band :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.intl :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.cl-note :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.cta-band :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.bmap-sap :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.bmap-cell :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label),.bmap-tile :is(h1,h2,h3,h4,h5,p,li,span,strong,b,small,em,div,a,label){color:var(--ink);-webkit-text-fill-color:var(--ink);text-shadow:none}
:is(.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-proof-card,.contact-card,.contact-form,.sf-res,.mob-card,.mcp,.phone,.ai-band,.intl,.cl-note,.cta-band,.bmap-sap,.bmap-cell,.bmap-tile) :is(p,li,small,.sub,.lead,.l,.bmap-sub,.bmap-tsub){color:var(--steel);-webkit-text-fill-color:var(--steel);font-size:16px;line-height:1.58}
:is(.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-proof-card,.contact-card,.contact-form,.sf-res,.mob-card,.mcp,.phone,.ai-band,.intl,.cl-note,.cta-band,.bmap-cell,.bmap-tile) :is(.eyebrow,.k,.sector,.tech,.bmap-cell-h,.sapmark,.status,.chips span,.kw span,.geo span,.client-scope span){color:var(--orange);-webkit-text-fill-color:var(--orange)}
:is(.fmt h3,.prod h3,.prod .pname,.pillar h3,.cap h3,.story h4,.wc h4,.aip h4,.pio-n .yr,.pio-n .tech,.door h3,.cslide h3,.client-proof-card h3,.contact-card h3,.contact-form h3,.ai-band h3,.bmap-h,.bmap-th){font-size:24px;line-height:1.14;font-weight:850;color:var(--ink)}

/* Home business map and counters */
.bmap{display:grid;grid-template-columns:minmax(0,1fr) 416px;gap:20px;align-items:stretch}.bmap-sap{min-height:525px;padding:48px 40px 36px}.bmap-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bmap-cell{min-height:158px;padding:28px}.bmap-cell.full{grid-column:1/-1}.bmap-right{display:grid;grid-template-rows:repeat(3,1fr);gap:20px}.bmap-tile{min-height:162px;display:flex;flex-direction:column;justify-content:center;padding:30px}.bmap-tile.t-mes,.fmt.cl,.prod.hrev,.cta-band{background:linear-gradient(180deg,#ffffff 0%,#fff6ed 100%);border-color:rgba(255,126,0,.32)}
.home-value-section.stats{padding:78px 0 76px}.counter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:54px 0 0}.ct{min-height:74px;padding:0 30px;border-right:1px solid rgba(154,190,234,.22);text-align:center}.ct:last-child{border-right:0}.ct-n{display:flex;align-items:flex-end;justify-content:center;gap:3px;min-height:54px;color:var(--text);font-family:var(--display);font-size:49px;line-height:.9;font-weight:900;font-variant-numeric:tabular-nums}.ct-n i{color:var(--orange-2);font-style:normal;font-size:24px;font-weight:900}.ct-l{margin-top:14px;color:var(--soft);font-size:16px}

/* Products and diagrams */
.pio-tl{position:relative;margin-top:44px;padding:28px;border-radius:18px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:var(--shadow)}.pio-nodes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.pio-line,.tl-line{height:2px;background:linear-gradient(90deg,var(--orange),rgba(14,36,64,.24))}.mob .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);gap:54px;align-items:center}.scene,.mcp{padding:22px;border-radius:18px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:var(--shadow)}svg text,svg tspan{font-family:var(--body);font-weight:760;fill:var(--ink)}.mcp-s,.n-sub{fill:var(--steel)}svg rect[fill="#fff"]{fill:rgba(14,36,64,.06);stroke:rgba(14,36,64,.18)}.ai-points{display:grid;gap:16px}.ai-band{margin-top:44px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px}.prod{display:flex;flex-direction:column;gap:18px}.prod .chips,.kw,.geo,.client-scope,.contact-proof{display:flex;flex-wrap:wrap;gap:8px}.chips span,.kw span,.geo span,.client-scope span,.contact-proof span{border:1px solid rgba(255,126,0,.25);border-radius:999px;padding:7px 12px;background:#fff6ed;color:var(--orange);font-family:var(--display);font-size:12px;font-weight:850}

.mob,
.ai-sec{
  overflow:hidden;
}

.mob::before,
.ai-sec::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,126,0,.10),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 46%);
}

.mob > .wrap,
.ai-sec > .wrap{
  position:relative;
  z-index:1;
}

.mob-copy,
.ai-heading{
  max-width:760px;
}

.mob-copy h2,
.ai-heading h2{
  margin-top:0;
}

.mob-copy p,
.ai-sec .sub{
  color:#d3e4f8;
  -webkit-text-fill-color:#d3e4f8;
}

.mob-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.mob-tags span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(255,126,0,.28);
  border-radius:999px;
  background:rgba(255,126,0,.10);
  color:#ffd3a8;
  -webkit-text-fill-color:#ffd3a8;
  font-family:var(--display);
  font-size:12px;
  font-weight:850;
}

.mob-steps{
  display:grid;
  gap:12px;
  margin-top:30px;
}

.mob-steps div{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.055);
  box-shadow:0 18px 48px rgba(2,14,29,.16);
}

.mob-steps b{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
  font-family:var(--display);
  font-size:13px;
  font-weight:900;
}

.mob-steps span{
  color:#dbe9fb;
  -webkit-text-fill-color:#dbe9fb;
  font-size:15px;
  line-height:1.48;
}

.mob .scene,
.ai-sec .mcp{
  border-radius:14px;
  border-color:rgba(255,126,0,.22);
  background:
    linear-gradient(rgba(14,36,64,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,36,64,.045) 1px,transparent 1px),
    linear-gradient(145deg,#ffffff 0%,#f5f8fc 62%,#fff6ed 100%);
  background-size:32px 32px,32px 32px,auto;
  box-shadow:0 30px 80px rgba(2,14,29,.25),inset 0 1px 0 rgba(255,255,255,.96);
}

.ai-sec .wrap{
  align-items:stretch;
}

.ai-sec .sub{
  align-self:end;
  max-width:660px;
}

.ai-points{
  align-content:start;
}

.ai-sec .aip{
  border-radius:10px;
  border-color:rgba(255,126,0,.20);
  background:linear-gradient(145deg,#ffffff 0%,#f7faff 100%);
}

.ai-sec .aip h4{
  margin:0 0 9px;
  color:#102f55;
  -webkit-text-fill-color:#102f55;
}

.ai-sec .aip p{
  color:#385879;
  -webkit-text-fill-color:#385879;
}

.ai-sec .aip .d{
  width:9px;
  height:9px;
  display:inline-block;
  margin-right:10px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,126,0,.12);
}

.ai-band{
  border-radius:14px;
  border-color:rgba(255,126,0,.26);
  background:linear-gradient(145deg,#ffffff 0%,#fff6ed 100%);
}

.legacy-mobile-graph,
.mcp-graph{
  filter:drop-shadow(0 18px 28px rgba(2,14,29,.10));
}

.legacy-mobile-graph .graph-bg,
.mcp-graph .graph-bg{
  stroke:rgba(14,36,64,.10);
  stroke-width:1;
}

.legacy-mobile-graph .graph-kicker,
.mcp-graph .graph-kicker{
  fill:#6a7f99;
  font-family:var(--display);
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.legacy-mobile-graph .graph-divider{
  stroke:rgba(14,36,64,.12);
  stroke-width:1.3;
  stroke-dasharray:5 7;
}

.legacy-mobile-graph .legacy-flow path,
.legacy-mobile-graph .mobile-flow path,
.mcp-graph .pipe{
  vector-effect:non-scaling-stroke;
}

.legacy-mobile-graph .legacy-flow path{
  stroke-width:3.2;
  stroke-dasharray:8 10;
  animation:graphDash 2.8s linear infinite;
}

.legacy-mobile-graph .mobile-flow path{
  stroke:#14315a;
  stroke-width:3;
  stroke-dasharray:9 11;
  animation:graphDash 3.2s linear infinite reverse;
}

.legacy-mobile-graph .data-packets circle{
  filter:drop-shadow(0 0 8px rgba(255,126,0,.62));
}

.legacy-mobile-graph .legacy-nodes rect,
.mcp-graph .mcp-node rect,
.mcp-graph rect[fill="#fff"]{
  filter:drop-shadow(0 10px 14px rgba(14,36,64,.13));
}

.legacy-mobile-graph .api-node rect{
  filter:drop-shadow(0 18px 24px rgba(8,27,49,.25));
}

.legacy-mobile-graph .phone rect:first-child{
  filter:drop-shadow(0 14px 18px rgba(8,27,49,.25));
}

.mcp-graph .mcp-ring{
  stroke:rgba(255,126,0,.24);
  stroke-width:1.5;
  stroke-dasharray:4 8;
  transform-origin:210px 175px;
  animation:mcpOrbit 18s linear infinite;
}

.mcp-graph .pipe{
  stroke:rgba(255,126,0,.42);
  stroke-width:2.6;
  stroke-dasharray:7 10;
  animation:graphDash 3.6s linear infinite;
}

.mcp-graph .halo{
  opacity:.18;
  transform-origin:210px 175px;
  animation:mcpPulse 2.8s ease-in-out infinite;
}

.mcp-graph .mcp-s{
  fill:var(--muted) !important;
  stroke:none !important;
}
.mcp-graph .core circle{
  filter:drop-shadow(0 18px 24px rgba(255,126,0,.28));
}

@keyframes graphDash{
  to{stroke-dashoffset:-38}
}

@keyframes mcpOrbit{
  to{transform:rotate(360deg)}
}

@keyframes mcpPulse{
  0%,100%{transform:scale(1);opacity:.15}
  50%{transform:scale(1.08);opacity:.24}
}

@media(prefers-reduced-motion:reduce){
  .legacy-mobile-graph .legacy-flow path,
  .legacy-mobile-graph .mobile-flow path,
  .mcp-graph .pipe,
  .mcp-graph .mcp-ring,
  .mcp-graph .halo{
    animation:none;
  }
}
.ai-band h3 span{
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}
/* Clients/contact/stories */
.client-logo{min-height:86px;display:flex;align-items:center;justify-content:center;text-align:center}/* width/height stanno negli attributi HTML per riservare lo spazio durante il
   caricamento: qui vanno riportati ad auto, altrimenti max-width e max-height
   si applicano ai due assi in modo indipendente e schiacciano il marchio
   (i wordmark larghi come MBDA arrivavano al 71% di deformazione).
   Il tetto in larghezza tiene i marchi larghi dentro la tessera con un po'
   d'aria, invece di farli arrivare al bordo. */
.client-logo img{
  width:auto;
  height:auto;
  max-height:42px;
  max-width:76%;
  object-fit:contain;
  filter:none;
  opacity:1;
}.client-proof-stack{display:grid;gap:18px}.contact-panel{display:grid;gap:22px}.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.contact-form{display:grid;gap:14px}input,textarea,select{width:100%;min-height:44px;border-radius:8px;border:1px solid rgba(14,36,64,.18);background:#fff;color:var(--ink);font-family:var(--body);font-size:15px;padding:10px 12px}textarea{min-height:130px}.journal-page{background:var(--navy)}.journal-grid,.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

footer{background:#06111f;color:#b9d4f5;padding:64px 0 28px}.site-footer{border-top:1px solid rgba(255,255,255,.10)}.footer-wrap{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(230px,.92fr) minmax(210px,.72fr) minmax(260px,1fr);gap:34px;align-items:start}.footer-brand>img{width:168px;height:auto;display:block;margin-bottom:22px}.footer-brand p,.site-footer p{max-width:420px;margin:0;color:#a8c2e1;-webkit-text-fill-color:#a8c2e1;font-size:15px;line-height:1.66}.site-footer h5{margin:0 0 14px;color:#fff;-webkit-text-fill-color:#fff;font-family:var(--display);font-size:13px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}.footer-locations{display:grid;gap:22px}.site-footer a{color:#dbe9fb;-webkit-text-fill-color:#dbe9fb;text-decoration:none}.site-footer a:hover{color:var(--orange-2);-webkit-text-fill-color:var(--orange-2)}.footer-company p{max-width:360px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.11)}.footer-bottom p{max-width:none;color:#7f91aa;-webkit-text-fill-color:#7f91aa;font-size:14px}.footer-social{display:flex;align-items:center;gap:10px}.footer-social a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;-webkit-text-fill-color:#fff;font-family:var(--display);font-size:15px;font-weight:900}.footer-social a:hover{border-color:rgba(255,126,0,.44);background:rgba(255,126,0,.14)}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px}footer h5,.foot-logo{font-family:var(--display);color:#fff}.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;color:#7f91aa}

@media(max-width:1100px){.bmap,.home-grid,.hero-grid,.mob .wrap,.ai-sec .wrap,.client-showcase,.story-feat{grid-template-columns:1fr}.bmap-right{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.counter-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}.pio-nodes,.pillars,.cap-grid,.fmts,.prods,.stories,.journal-grid,.case-grid,.contact-grid{grid-template-columns:1fr 1fr}.logo-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wrap{width:min(100% - 32px,1386px)}.topbar,.topbar nav{height:82px}.logo-mark img{height:48px}.lang-switch{margin-left:auto}.lang-switch button{min-width:32px;min-height:28px;padding:0 8px}.menu{gap:14px;overflow:auto;font-size:13px}section,.block,.home-section,.phero,.hero,.pio,.mob,.ai-sec,.appro,.clients,.contact-section,.journal-page{padding:72px 0}.phero,.hero,.home-hero{padding-top:128px}h1,.phero h1,.hero h1,.home-copy h1{font-size:42px}.sec-head h2,.home-head h2,.home-grid-head h2,.clients-head h1,.clients-head h2,.contact-hero h1,.contact-hero h2,.journal-hero h1,.journal-hero h2,.mob h2,.ai-sec h2,.appro h2,.pio h2,.cta-band h2{font-size:34px}p,li,.lead,.sub,.sec-head p,.home-head p,.home-grid-head p,.clients-lead,.contact-intro,.journal-lead,.phero p,.hero p,.home-copy p{font-size:18px}.pillars,.cap-grid,.fmts,.prods,.stories,.journal-grid,.case-grid,.contact-grid,.client-metrics,.logo-row{grid-template-columns:1fr}.bmap-cells,.bmap-right{grid-template-columns:1fr}.bmap-sap{min-height:0;padding:28px 20px}.bmap-cell{min-height:0;padding:22px 18px}.bmap-tile{min-height:122px;padding:24px 20px}.counter-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}.ct{padding:0 14px;border-right:0}.ct-n{font-size:38px}.ai-band{display:grid;padding:28px}.foot-grid{grid-template-columns:1fr}.footer-wrap{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column}}

/* General premium preset: every Enkeli card-like component follows this system. */
main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  [class$="Card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo,
  .client-logo-board,
  .client-proof-card,
  .contact-form,
  .contact-panel,
  .sf-res,
  .mcp,
  .scene,
  .phone,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
){
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(248,251,255,.96) 54%,rgba(240,246,252,.98) 100%);
  border:1px solid rgba(14,36,64,.14);
  border-radius:18px;
  color:var(--ink);
  box-shadow:0 22px 54px rgba(2,14,29,.18), inset 0 1px 0 rgba(255,255,255,.95);
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo,
  .client-proof-card,
  .sf-res
){
  padding:30px;
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .sf-res,
  .mcp,
  .scene,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
)::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),rgba(255,126,0,.18));
  pointer-events:none;
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .sf-res,
  .mcp,
  .scene,
  .phone,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
) :is(h1,h2,h3,h4,h5,.pname,.big,.yr,.tech,b,strong){
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  font-family:var(--display);
  font-weight:850;
  letter-spacing:0;
  text-shadow:none;
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .sf-res,
  .mcp,
  .scene,
  .phone,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
) :is(p,li,small,span,label,div,.sub,.lead,.l,.bmap-sub,.bmap-tsub){
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  text-shadow:none;
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .sf-res,
  .mcp,
  .scene,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
) :is(.eyebrow,.k,.sector,.tech,.status,.sapmark,.who,.case-tags span,.chips span,.kw span,.geo span,.client-scope span,.contact-proof span){
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
  font-family:var(--display);
  font-weight:850;
}

main :is(.case-tags,.chips,.kw,.geo,.client-scope,.contact-proof){
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

main :is(.case-tags span,.chips span,.kw span,.geo span,.client-scope span,.contact-proof span){
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 11px;
  border:1px solid rgba(255,126,0,.24);
  border-radius:999px;
  background:#fff6ed;
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
  font-family:var(--display);
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:0;
}

main :is(.case-link,.go,.rd){
  margin-top:auto;
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
  font-family:var(--display);
  font-weight:850;
}

/* .pcta era nel gruppo qui sopra, ma a differenza degli altri ha il fondo
   arancione pieno: il testo deve restare scuro. Sotto i 981px, dove non
   valgono gli stili delle slide, era arancione su arancione e spariva. */
main .pcta{
  margin-top:auto;
  color:#081525;
  -webkit-text-fill-color:#081525;
  font-family:var(--display);
  font-weight:850;
}

.journal-grid,
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.case-card{
  min-height:242px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.case-card h2{
  font-size:24px;
  line-height:1.16;
}

.case-author{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  font-size:13px;
}

.client-metrics{
  margin:44px 0 0;
}

.client-metric{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.client-metric b{
  display:block;
  margin-bottom:8px;
  font-size:34px;
  line-height:1;
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}

.client-showcase{
  margin-top:38px;
  align-items:start;
}

.client-logo-board{
  padding:30px;
}

.client-logo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}

.client-logo{
  min-height:104px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* I file sono ritagliati sul marchio, quindi senza un tetto in larghezza i
   wordmark (MBDA, sigma-tau, Arvedi) arriverebbero a toccare i bordi della
   tessera mentre i marchi quadrati restano piccoli. Con height:auto i due
   limiti scalano l'immagine in proporzione invece di schiacciarla. */
.client-logo img{
  max-height:42px;
  max-width:74%;
  width:auto;
  height:auto;
}

.client-proof-stack{
  display:grid;
  gap:18px;
}

.contact-section{
  padding-top:150px;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,154,61,.14),transparent 34%),
    linear-gradient(145deg,#06111f 0%,#071d33 48%,#102946 100%);
}

.contact-section::before{
  content:"";
  position:absolute;
  inset:86px 0 auto;
  height:500px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(180deg,#000,transparent);
  opacity:.3;
}

.contact-section .wrap{
  position:relative;
  z-index:1;
}

.contact-hero{
  max-width:940px;
}

.contact-premium-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.43fr);
  gap:24px;
  align-items:start;
}

.contact-panel{
  display:grid;
  gap:24px;
}

.location-card,
.contact-card,
.contact-form{
  min-height:170px;
}

.contact-form-primary{
  position:relative;
  padding:38px;
  overflow:hidden;
  border-color:rgba(255,255,255,.82);
}

.contact-form-primary::before{
  content:"";
  position:absolute;
  inset:0;
  height:5px;
  background:linear-gradient(90deg,var(--orange),#ffb15f);
}

.contact-form-head{
  margin-bottom:26px;
}

.contact-form-head h3{
  margin:10px 0 12px;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.04;
}

.contact-form-head p{
  max-width:760px;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:17px;
}

.contact-side{
  display:grid;
  gap:18px;
}

.contact-direct-premium{
  padding:30px;
  background:
    linear-gradient(145deg,#071d33 0%,#102946 100%),
    radial-gradient(circle at 80% 0%,rgba(255,126,0,.2),transparent 45%);
  border-color:rgba(255,154,61,.28);
}

.contact-direct-premium :is(h3,p,.k){
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.contact-direct-premium .k,
.contact-direct-premium .contact-link.alt{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.contact-direct-premium p{
  color:#b9d4f5;
  -webkit-text-fill-color:#b9d4f5;
}

.direct-actions{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.contact-link{
  width:100%;
  min-height:48px;
}

.contact-link.alt{
  background:#fff;
  border-color:rgba(255,126,0,.26);
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}

.contact-locations-premium{
  display:grid;
  gap:18px;
}

.location-card{
  padding:24px;
  overflow:hidden;
}

.location-card h3{
  margin:8px 0 10px;
  font-size:24px;
}

.location-card p{
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:15px;
}

.location-card iframe{
  display:block;
  width:100%;
  height:168px;
  margin-top:18px;
  border:0;
  border-radius:12px;
  filter:saturate(.82) contrast(1.04);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.form-field{
  display:grid;
  gap:8px;
}

.form-field label{
  font-family:var(--display);
  font-size:13px;
  font-weight:850;
  color:#203c5f;
  -webkit-text-fill-color:#203c5f;
}

.form-field.full{
  grid-column:1/-1;
}

.form-consent{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-top:18px;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:14px;
  line-height:1.45;
}

.form-consent input{
  width:18px;
  min-height:18px;
  margin-top:2px;
  accent-color:var(--orange);
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:22px;
}

.form-note{
  color:var(--muted);
  -webkit-text-fill-color:var(--muted);
  font-size:14px;
}

input,textarea,select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(14,36,64,.18);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  padding:10px 12px;
}

textarea{
  min-height:130px;
  resize:vertical;
}

input::placeholder,textarea::placeholder{
  color:#7f91aa;
}

@media(max-width:1100px){
  .contact-premium-layout{
    grid-template-columns:1fr;
  }

  .contact-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-direct-premium{
    grid-column:1/-1;
  }

  .journal-grid,
  .case-grid,
  .client-logo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .contact-section{
    padding-top:128px;
  }

  .contact-form-primary{
    padding:28px 20px;
  }

  .contact-side,
  .form-grid{
    grid-template-columns:1fr;
  }

  .form-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .form-submit{
    width:100%;
  }

  main :is(article,form,[class$="-card"],[class*="-card "],[class*=" card"],.card,.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo,.client-proof-card,.sf-res){
    padding:24px 20px;
  }

  .journal-grid,
  .case-grid,
  .client-logo-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .case-card h2{
    font-size:22px;
  }
}

/* Premium finish: one global treatment for every Enkeli card-like component. */
:root{
  --paper-premium:#fbfdff;
  --paper-premium-2:#f1f6fb;
  --paper-premium-3:#e8f0f8;
  --premium-ring:rgba(255,126,0,.28);
  --premium-card-shadow:0 28px 80px rgba(2,14,29,.22),0 2px 8px rgba(2,14,29,.08),inset 0 1px 0 rgba(255,255,255,.95);
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .contact-form,
  .sf-res,
  .mcp,
  .scene,
  .phone,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
){
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0) 38%),
    radial-gradient(520px 220px at 100% 0%,rgba(255,126,0,.10),transparent 62%),
    linear-gradient(145deg,var(--paper-premium) 0%,var(--paper-premium-2) 62%,var(--paper-premium-3) 100%);
  border:1px solid rgba(255,255,255,.92);
  outline:1px solid rgba(14,36,64,.12);
  outline-offset:-1px;
  border-radius:18px;
  box-shadow:var(--premium-card-shadow);
  transform:translateZ(0);
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .contact-form,
  .sf-res,
  .mcp,
  .scene,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
)::before{
  height:4px;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 34%,rgba(255,126,0,.16) 100%);
  box-shadow:0 0 28px rgba(255,126,0,.26);
}

main :is(
  article,
  form,
  [class$="-card"],
  [class*="-card "],
  [class*=" card"],
  .card,
  .home-card,
  .pillar,
  .cap,
  .fmt,
  .prod,
  .story,
  .wc,
  .aip,
  .pio-n,
  .door,
  .cslide,
  .case,
  .client-metric,
  .client-logo-board,
  .client-proof-card,
  .contact-panel,
  .contact-form,
  .sf-res,
  .mcp,
  .scene,
  .ai-band,
  .intl,
  .cl-note,
  .cta-band,
  .bmap-sap,
  .bmap-cell,
  .bmap-tile,
  .pio-tl
)::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  pointer-events:none;
  z-index:-1;
}

main :is(article,[class$="-card"],[class*="-card "],[class*=" card"],.card,.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo,.client-proof-card,.sf-res):hover{
  box-shadow:0 34px 92px rgba(2,14,29,.28),0 4px 14px rgba(2,14,29,.10),inset 0 1px 0 rgba(255,255,255,1);
  transform:translateY(-3px);
}

main :is(article,[class$="-card"],[class*="-card "],[class*=" card"],.card,.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo,.client-proof-card,.sf-res){
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

main :is(article,form,[class$="-card"],[class*="-card "],[class*=" card"],.card,.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo-board,.client-proof-card,.contact-panel,.contact-form,.sf-res,.mcp,.scene,.ai-band,.intl,.cl-note,.cta-band,.bmap-sap,.bmap-cell,.bmap-tile,.pio-tl) :is(h1,h2,h3,h4,h5,.pname,.big,.yr){
  color:#081b31;
  -webkit-text-fill-color:#081b31;
  font-weight:900;
}

main :is(article,form,[class$="-card"],[class*="-card "],[class*=" card"],.card,.home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,.case,.client-metric,.client-logo-board,.client-proof-card,.contact-panel,.contact-form,.sf-res,.mcp,.scene,.ai-band,.intl,.cl-note,.cta-band,.bmap-sap,.bmap-cell,.bmap-tile,.pio-tl) :is(p,li,small,span,label,div,.sub,.lead,.l,.bmap-sub,.bmap-tsub){
  color:#345477;
  -webkit-text-fill-color:#345477;
}

main :is(.eyebrow,.k,.sector,.tech,.status,.sapmark,.who,.case-tags span,.chips span,.kw span,.geo span,.client-scope span,.contact-proof span,.bmap-cell-h){
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}

main :is(.case-tags span,.chips span,.kw span,.geo span,.client-scope span,.contact-proof span){
  background:linear-gradient(180deg,#fff8f0,#ffefd9);
  border-color:rgba(255,126,0,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.journal-grid,
.case-grid,
.client-logo-grid,
.client-proof-stack,
.contact-panel{
  align-items:stretch;
}

.case-card,
.client-proof-card,
.location-card,
.contact-card{
  min-height:100%;
}

.case-link,
.go,
.rd,
.pcta{
  position:relative;
  width:max-content;
}

.case-link::after,
.go::after,
.rd::after,
.pcta::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:1px;
  background:currentColor;
  opacity:.35;
}

.client-logo{
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,248,252,.96)),
    radial-gradient(220px 120px at 70% 0%,rgba(255,126,0,.08),transparent 70%);
}

.client-logo img{
  mix-blend-mode:multiply;
}

.footer-wrap{
  grid-template-columns:minmax(260px,1.05fr) minmax(230px,.92fr) minmax(210px,.72fr) minmax(260px,1fr);
}


.home-linkedin-float{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:96px;
  right:24px;
  z-index:99;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.home-linkedin-float svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}

.home-linkedin-float:hover{
  border-color:rgba(255,126,0,.44);
  background:rgba(255,126,0,.14);
}

.home-linkedin-float:focus-visible{
  outline:2px solid var(--orange-2);
  outline-offset:3px;
}




@media(max-width:1180px){
  .footer-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:760px){
  .home-linkedin-float{
    top:92px;
    right:16px;
    width:30px;
    height:30px;
  }

  .home-linkedin-float svg{
    width:15px;
    height:15px;
  }


}

.partners-page{
  min-height:calc(100vh - 86px);
  display:flex;
  align-items:center;
  background:
    radial-gradient(760px 420px at 84% 48%,rgba(255,126,0,.14),transparent 68%),
    linear-gradient(135deg,#071526 0%,#0b2139 58%,#071526 100%);
}

.partners-hero{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(420px,1fr);
  gap:clamp(38px,6vw,86px);
  align-items:center;
}

.partners-copy h1{
  max-width:860px;
  margin:18px 0 22px;
  color:#fff;
  font-size:clamp(48px,6vw,86px);
  line-height:1;
  font-weight:900;
}

.partners-copy p{
  max-width:760px;
  color:#c8d8ea;
  font-size:21px;
  line-height:1.58;
}

.partners-media{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,5vw,64px);
  overflow:hidden;
  border:1px solid rgba(14,36,64,.12);
  border-top:4px solid var(--orange);
  border-radius:16px;
  background:
    radial-gradient(460px 220px at 78% 0%,rgba(255,126,0,.11),transparent 70%),
    linear-gradient(180deg,#fff 0%,#f3f7fb 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.94);
}

.partners-media::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(14,36,64,.08);
  border-radius:12px;
  opacity:1;
  pointer-events:none;
}

.partners-media img{
  position:relative;
  z-index:1;
  width:min(100%,620px);
  max-height:180px;
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(2,14,29,.14));
}

@media(max-width:1100px){
  .partners-hero{
    grid-template-columns:1fr;
  }

  .partners-media{
    min-height:300px;
  }
}

@media(max-width:680px){
  .partners-copy h1{
    font-size:42px;
  }

  .partners-copy p{
    font-size:18px;
  }

  .partners-media{
    min-height:220px;
    padding:28px;
  }
}

input,textarea,select{
  box-shadow:inset 0 1px 2px rgba(2,14,29,.05);
}

.service-split > .wrap,
.service-observability > .wrap,
.service-mdm > .wrap{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);
  gap:54px;
  align-items:center;
}

.service-copy h2{
  max-width:860px;
  margin:18px 0;
  color:var(--text);
  font-size:clamp(42px,4.5vw,58px);
  line-height:1.04;
  font-weight:850;
}

.service-copy p{
  max-width:780px;
  color:var(--soft);
  font-size:20px;
  line-height:1.5;
}

.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.service-tags span{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#dbe9fb;
  font-family:var(--display);
  font-size:12px;
  font-weight:760;
}

.service-architecture-map{
  min-height:430px;
  display:grid;
  grid-template-columns:1fr 58px 1.15fr 58px 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:16px;
  align-items:center;
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:0 28px 90px rgba(0,0,0,.24);
}

.arch-node,
.arch-core{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-family:var(--display);
  font-weight:850;
}

.arch-node{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#dce9f7;
}

.arch-core{
  grid-column:3;
  grid-row:1 / 4;
  min-height:220px;
  border:1px solid rgba(255,126,0,.36);
  background:linear-gradient(180deg,rgba(255,126,0,.22),rgba(255,126,0,.08));
  color:#fff;
  box-shadow:0 20px 60px rgba(255,126,0,.12);
}

.arch-line{
  height:2px;
  background:linear-gradient(90deg,rgba(255,126,0,.12),rgba(255,126,0,.95),rgba(255,126,0,.12));
}

.arch-node.legacy{grid-column:1;grid-row:2}
.arch-node.api{grid-column:5;grid-row:1}
.arch-node.cloud{grid-column:5;grid-row:2}
.arch-node.sap{grid-column:5;grid-row:3}

.observability-board{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

.obs-card{
  min-height:145px;
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.obs-card.wide{
  grid-row:span 2;
  min-height:306px;
}

.obs-card span{
  display:block;
  color:#9eb8d8;
  font-family:var(--display);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.obs-card b{
  display:block;
  margin-top:32px;
  color:#fff;
  font-size:clamp(42px,5vw,72px);
  line-height:1;
}

.obs-card.chart{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  gap:10px;
}

.obs-card.chart span{
  grid-column:1 / -1;
}

.obs-card.chart i{
  display:block;
  border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg,var(--orange),rgba(255,126,0,.32));
}

.obs-card.chart i:nth-child(2){height:42px}
.obs-card.chart i:nth-child(3){height:72px}
.obs-card.chart i:nth-child(4){height:58px}
.obs-card.chart i:nth-child(5){height:96px}

.service-roadmap .roadmap-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
}

.roadmap-steps div{
  min-height:178px;
  padding:26px;
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--orange);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
}

.roadmap-steps b{
  display:block;
  color:var(--orange);
  font-size:34px;
  line-height:1;
}

.roadmap-steps span{
  display:block;
  margin-top:28px;
  color:#eaf2fb;
  font-size:20px;
  font-weight:800;
  line-height:1.25;
}

.mdm-stack{
  display:grid;
  gap:12px;
}

.mdm-stack div{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:22px;
  align-items:center;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.055);
}

.mdm-stack b{
  color:#fff;
  font-family:var(--display);
  font-size:17px;
}

.mdm-stack span{
  color:#b9c9dd;
  font-size:15px;
  line-height:1.35;
}

.service-mes{
  background:
    radial-gradient(680px 320px at 78% 50%,rgba(255,126,0,.12),transparent 70%),
    linear-gradient(135deg,#071526,#10233d 58%,#071526);
}

.mes-flow{
  display:grid;
  grid-template-columns:1fr 58px 1fr 58px 1fr 58px 1fr;
  align-items:center;
  gap:12px;
  margin-top:46px;
}

.mes-flow div{
  min-height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.065);
  color:#fff;
  font-family:var(--display);
  font-size:18px;
  font-weight:850;
  text-align:center;
}

.mes-flow span{
  height:2px;
  background:linear-gradient(90deg,rgba(255,126,0,.2),var(--orange));
}

@media(max-width:1100px){
  .service-split > .wrap,
  .service-observability > .wrap,
  .service-mdm > .wrap{
    grid-template-columns:1fr;
    gap:28px;
  }

  .service-roadmap .roadmap-steps,
  .mes-flow{
    grid-template-columns:1fr;
  }

  .mes-flow span{
    width:2px;
    height:34px;
    justify-self:center;
    background:linear-gradient(180deg,rgba(255,126,0,.2),var(--orange));
  }
}

@media(max-width:680px){
  .service-copy h2{
    font-size:34px;
  }

  .service-copy p{
    font-size:18px;
  }

  .service-architecture-map{
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:none;
    padding:20px;
  }

  .arch-core,
  .arch-node.legacy,
  .arch-node.api,
  .arch-node.cloud,
  .arch-node.sap{
    grid-column:auto;
    grid-row:auto;
    min-height:74px;
  }

  .arch-line{
    width:2px;
    height:28px;
    justify-self:center;
    background:linear-gradient(180deg,rgba(255,126,0,.2),var(--orange));
  }

  .observability-board{
    grid-template-columns:1fr;
  }

  .obs-card.wide{
    min-height:190px;
  }

  .mdm-stack div{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* Magnetic section slides */
@media(min-width:981px) and (prefers-reduced-motion:no-preference){
  html:is(.home-snap,.enkeli-slide-snap){
    scroll-snap-type:y mandatory;
    scroll-padding-top:86px;
  }

  html:is(.home-snap,.enkeli-slide-snap) body{
    background:var(--navy);
  }

  html.home-snap .home-premium > section,
  html.enkeli-slide-snap main > section{
    min-height:calc(100svh - 86px);
    display:flex;
    align-items:center;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  html:is(.home-snap,.enkeli-slide-snap) footer{
    scroll-snap-align:start;
  }

  html.home-snap .home-premium > .home-section,
  html.enkeli-slide-snap main > section{
    padding:64px 0;
    border-top:1px solid rgba(255,255,255,.06);
  }

  html.enkeli-slide-snap main > .phero{
    padding-top:150px;
  }

  html.home-snap .home-premium > .home-section > .wrap,
  html.enkeli-slide-snap main > section > .wrap{
    position:relative;
    width:min(1386px,calc(100% - 96px));
  }

  html.home-snap .home-premium > .home-section > .wrap::before,
  html.enkeli-slide-snap main > section > .wrap::before{
    content:"";
    position:absolute;
    inset:-34px -40px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0));
    pointer-events:none;
  }

  html.home-snap .home-premium > .home-section > .wrap > *,
  html.enkeli-slide-snap main > section > .wrap > *{
    position:relative;
  }

  /* La transizione si accende solo con .slides-motion, che lo script aggiunge
     due frame dopo aver applicato lo stato iniziale. Senza questa attesa lo
     stato di partenza veniva ANIMATO: al caricamento la pagina si rimpiccioliva
     a 98,5% e tornava a 100 in 380ms, che si legge come un ingrandimento. Su
     Safari si sommava al ricalcolo di 100svh quando la barra si assesta, e
     l'effetto sembrava doppio. */
  html.slides-motion.home-snap .home-premium > section,
  html.slides-motion.enkeli-slide-snap main > section{
    transition:opacity .38s ease,transform .38s ease;
  }

  /* .slides-ready la mette lo script solo quando e' vivo: senza JS non si
     attenua niente, invece di lasciare l'intera pagina al 72%.
     Attenuazione di base piu' override sull'attiva: niente :not(), che
     pareggiava la specificita' delle due regole. */
  html.slides-ready main > section{
    opacity:.72;
    transform:scale(.985);
  }

  html.slides-ready main > section.is-slide-active{
    opacity:1;
    transform:scale(1);
  }

  html.enkeli-slide-snap .sec-head{
    max-width:860px;
    margin-bottom:30px;
  }

  html.enkeli-slide-snap .sec-head h2,
  html.enkeli-slide-snap .mob h2,
  html.enkeli-slide-snap .ai-sec h2,
  html.enkeli-slide-snap .pio h2{
    max-width:820px;
    margin:14px 0;
    font-size:clamp(36px,3.5vw,48px);
    line-height:1.06;
  }

  html.enkeli-slide-snap :is(.sec-head p,.mob p,.ai-sec .sub,.phero p){
    max-width:820px;
    font-size:18px;
    line-height:1.42;
  }

  html.enkeli-slide-snap .product-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(330px,430px);
    gap:56px;
    align-items:center;
  }

  html.enkeli-slide-snap .product-hero-copy{
    min-width:0;
  }

  html.enkeli-slide-snap .product-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:62px;
    justify-content:flex-end;
    align-self:center;
  }

  html.enkeli-slide-snap .product-hero-card{
    width:min(100%,430px);
    min-height:138px;
    margin-left:auto;
    text-align:left;
  }

  html.enkeli-slide-snap .fmts,
  html.enkeli-slide-snap .prods{
    gap:18px;
  }

  html.enkeli-slide-snap :is(.fmt,.prod,.aip){
    padding:26px 28px;
    border-radius:10px;
  }

  html.enkeli-slide-snap .pio-tl{
    margin-top:28px;
    padding:22px;
  }

  html.enkeli-slide-snap .pio-n{
    padding:22px 18px;
  }

  html.enkeli-slide-snap .ai-band{
    margin-top:26px;
    padding:26px 30px;
  }

  html.enkeli-slide-snap .mob > .wrap{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(460px,.82fr);
    gap:clamp(42px,5vw,72px);
    align-items:center;
  }

  html.enkeli-slide-snap .mob h2{
    max-width:680px;
  }

  html.enkeli-slide-snap .mob p{
    max-width:720px;
  }

  html.enkeli-slide-snap .scene{
    width:100%;
    max-width:760px;
    justify-self:end;
    padding:20px;
    border-radius:10px;
  }

  html.enkeli-slide-snap .scene svg,
  html.enkeli-slide-snap .mcp svg{
    display:block;
    width:100%;
    height:auto;
  }

  html.enkeli-slide-snap .ai-sec > .wrap{
    display:grid;
    grid-template-columns:minmax(0,.76fr) minmax(420px,.72fr);
    grid-template-areas:
      "ai-title ai-copy"
      "ai-points ai-diagram"
      "ai-band ai-band";
    gap:24px clamp(42px,5vw,72px);
    align-items:start;
  }

  html.enkeli-slide-snap .ai-sec h2{
    grid-area:ai-title;
    max-width:690px;
    font-size:clamp(34px,3vw,46px);
  }

  html.enkeli-slide-snap .ai-sec .sub{
    grid-area:ai-copy;
    align-self:center;
    max-width:660px;
  }

  html.enkeli-slide-snap .ai-sec .ai-grid{
    display:contents;
  }

  html.enkeli-slide-snap .ai-points{
    grid-area:ai-points;
    gap:14px;
  }

  html.enkeli-slide-snap .aip{
    min-height:0;
    padding:20px 22px;
  }

  html.enkeli-slide-snap .aip h4{
    margin:0 0 8px;
    font-size:19px;
    line-height:1.18;
  }

  html.enkeli-slide-snap .aip p{
    font-size:14.5px;
    line-height:1.44;
  }

  html.enkeli-slide-snap .mcp{
    grid-area:ai-diagram;
    width:100%;
    max-width:620px;
    justify-self:end;
    padding:18px;
    border-radius:10px;
  }

  html.enkeli-slide-snap .ai-band{
    grid-area:ai-band;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
  }

  html.enkeli-slide-snap .ai-band h3{
    margin:0 0 8px;
    font-size:24px;
    line-height:1.12;
  }

  html.enkeli-slide-snap .ai-band p{
    max-width:820px;
    font-size:15px;
    line-height:1.45;
  }

  html.enkeli-slide-snap .prod .pcta{
    min-height:40px;
    padding:0 16px;
    border:1px solid rgba(255,126,0,.5);
    border-radius:8px;
    background:#fff8f0;
    color:#0e2440;
    -webkit-text-fill-color:#0e2440;
    box-shadow:none;
  }

  html.enkeli-slide-snap .prod .pcta:hover{
    border-color:var(--orange);
    background:#ffead1;
    transform:none;
  }

  html.enkeli-slide-snap .prod .pcta::after{
    display:none;
  }

  /* Nelle slide la scheda HRev e' su fondo crema, non scuro: il ghost tiene il
     testo scuro come il primario e si distingue solo per il bordo piu' tenue e
     il fondo trasparente. */
  html.enkeli-slide-snap .prod .pcta-ghost{
    background:transparent;
    border-color:rgba(14,36,64,.28);
    color:#0e2440;
    -webkit-text-fill-color:#0e2440;
  }

  html.enkeli-slide-snap .prod .pcta-ghost:hover{
    background:rgba(255,126,0,.10);
    border-color:rgba(255,126,0,.6);
  }

  html.enkeli-slide-snap .cta-band{
    max-width:980px;
    margin:0 auto;
    padding:38px 42px;
    border-radius:10px;
  }

  html.enkeli-slide-snap .cta-band h2{
    max-width:640px;
    margin:0;
    font-size:clamp(30px,3vw,42px);
    line-height:1.08;
  }

  html.enkeli-slide-snap .scene svg :is(text,tspan),
  html.enkeli-slide-snap .mcp svg :is(text,tspan){
    paint-order:stroke fill;
  }

  html.enkeli-slide-snap .scene svg rect[fill="#fff"],
  html.enkeli-slide-snap .mcp svg rect[fill="#fff"]{
    fill:#f8fbff;
    stroke:#c3cfdd;
    stroke-width:1.8;
  }

  html.enkeli-slide-snap .scene svg rect[fill="var(--navy)"],
  html.enkeli-slide-snap .mcp svg rect[fill="var(--navy)"],
  html.enkeli-slide-snap .scene svg rect[fill="var(--steel)"]{
    fill:#081b31;
  }

  html.enkeli-slide-snap .scene svg .n-white,
  html.enkeli-slide-snap .scene svg rect[fill="var(--navy)"] + text,
  html.enkeli-slide-snap .mcp svg text[fill="#fff"]{
    fill:#f7f9fc;
    stroke:rgba(8,27,49,.36);
    stroke-width:2px;
    stroke-linejoin:round;
  }

  html.enkeli-slide-snap .scene svg text[fill="#B9C4D4"],
  html.enkeli-slide-snap .mcp svg .mcp-s{
    fill:#dbe9fb;
  }

  html.enkeli-slide-snap .scene svg text[fill="#B9C4D4"]{
    stroke:rgba(8,27,49,.34);
    stroke-width:1.8px;
    stroke-linejoin:round;
  }

  html.enkeli-slide-snap .scene svg .n-label,
  html.enkeli-slide-snap .mcp svg .mcp-l{
    fill:#0e2440;
    stroke:rgba(255,255,255,.68);
    stroke-width:1.6px;
    stroke-linejoin:round;
  }

  html.enkeli-slide-snap .scene svg .n-sub{
    fill:#3d5a80;
  }

  html.enkeli-slide-snap .mcp svg rect[fill="rgba(255,255,255,.09)"]{
    fill:#eef4fb;
    stroke:#c3cfdd;
    stroke-width:1.8;
  }

  html.enkeli-slide-snap .mcp svg .core text{
    fill:#f7f9fc;
    stroke:rgba(8,27,49,.44);
    stroke-width:2px;
    stroke-linejoin:round;
  }
}

/* Home hero premium components */
html.enkeli-slide-snap .mob-copy{
  align-self:center;
}

html.enkeli-slide-snap .mob-tags,
html.enkeli-slide-snap .mob-steps{
  max-width:680px;
}

html.enkeli-slide-snap .ai-heading{
  grid-area:ai-title;
}

html.enkeli-slide-snap .ai-heading h2{
  max-width:690px;
  font-size:clamp(34px,3vw,46px);
}

html.enkeli-slide-snap .ai-heading .eyebrow{
  margin-bottom:18px;
}

html.enkeli-slide-snap .ai-sec > .wrap > h2{
  grid-area:auto;
}

@media(max-width:1100px){
  html.enkeli-slide-snap .ai-heading,
  html.enkeli-slide-snap .mob-copy{
    max-width:none;
  }
}

@media(max-width:680px){
  .mob-steps div{
    grid-template-columns:1fr;
    gap:8px;
  }

  .mob-tags span{
    min-height:32px;
  }

  html.enkeli-slide-snap .ai-heading h2{
    font-size:34px;
  }
}
.home-grid{
  grid-template-columns:minmax(0,.95fr) minmax(340px,.46fr);
  min-height:calc(100vh - 150px);
}

.home-copy{
  min-width:0;
  max-width:980px;
}

.home-copy h1 span{
  color:inherit;
  -webkit-text-fill-color:inherit;
}

.slogan-carousel{
  position:relative;
  display:grid;
  min-height:82px;
  max-width:720px;
  margin:28px 0 0;
  overflow:hidden;
}

.slogan-slide{
  grid-area:1 / 1;
  position:relative;
  width:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
  font-family:var(--display);
  font-size:clamp(24px,2.2vw,34px);
  line-height:1.16;
  font-weight:850;
  letter-spacing:0;
  pointer-events:none;
  transition:transform .24s ease;
}

.slogan-carousel:not(.is-ready) .slogan-slide:first-child,
.slogan-carousel.is-ready .slogan-slide.active,
.slogan-carousel.is-ready .slogan-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.slogan-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0 0;
}

.slogan-controls button{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
  font-family:var(--display);
  font-size:18px;
  font-weight:850;
  cursor:pointer;
  box-shadow:none;
}

.slogan-controls button:hover,
.slogan-controls button:focus-visible{
  border-color:rgba(255,154,61,.74);
  background:rgba(255,154,61,.16);
  outline:0;
}

.slogan-dots{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:4px;
}

.slogan-dot{
  width:8px;
  height:8px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}

.slogan-dot.active,
.slogan-dot.is-active{
  width:28px;
  background:var(--orange-2);
}

.home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 0;
}

.home-marquee{
  margin-top:18px;
  max-width:980px;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}

.home-marquee-track{
  display:flex;
  width:max-content;
  gap:22px;
  animation:marqueeMove 22s linear infinite;
}

.home-marquee-track span{
  color:#dbe9fb;
  -webkit-text-fill-color:#dbe9fb;
  font-family:var(--display);
  font-size:13px;
  font-weight:760;
  white-space:nowrap;
}

/* Barra clienti della home: logo affiancato al nome.
   I loghi hanno tutti il fondo bianco opaco, quindi su navy servono comunque
   una pastiglia chiara; che serve anche a uniformarli, visto che arrivano da
   file con proporzioni, colori e densita' molto diverse fra loro.
   I clienti senza logo mostrano solo il nome, allineato agli altri. */
.marquee-loghi .home-marquee-track{
  gap:34px;
  animation-duration:44s;   /* piu' contenuto per giro: senza questo scorre piu' in fretta */
}

.marquee-loghi .home-marquee-track span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:850;
  color:#e8f1fd;
  -webkit-text-fill-color:#e8f1fd;
}

/* I marchi vanno da 7:1 (MBDA) al quadrato (ETECSA): un box quadrato avrebbe
   reso i wordmark alti pochi pixel. La pastiglia ha ingombro fisso e il logo
   dentro si scala per il verso che lo limita, come in una vera logo bar.
   Il fondo chiaro serve perche' i file sono ritagliati stretti sul marchio e
   molti sono scuri: su navy sparirebbero. */
.marquee-loghi .cl-logo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:36px;
  padding:5px 8px;
  border-radius:8px;
  background:#fff;
}

.marquee-loghi .cl-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

@keyframes marqueeMove{
  to{transform:translateX(-50%)}
}

.hero-stats{
  margin-top:0;
  align-self:center;
  min-height:470px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 30px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(20,49,90,.94),rgba(8,20,36,.96));
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.hero-stats::before,
.hero-stats::after{
  display:none;
}

.hero-stats .stats-eyebrow{
  margin-bottom:18px;
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.hero-stats .counter-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 0;
  margin:0;
}

.hero-stats .ct{
  min-height:58px;
  padding:0 16px;
  border-right:1px solid rgba(255,255,255,.14);
}

.hero-stats .ct:nth-child(3n){
  border-right:1px solid rgba(255,255,255,.14);
}

.hero-stats .ct:nth-child(2n){
  border-right:0;
}

.hero-stats .ct-n{
  min-height:34px;
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
  font-size:34px;
}

.hero-stats .ct-n span{
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
}

.hero-stats .ct-n i{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
  font-size:18px;
}

.hero-stats .ct-l{
  margin-top:8px;
  color:#b9d4f5;
  -webkit-text-fill-color:#b9d4f5;
  font-size:12.5px;
  line-height:1.25;
}

.home-inline-stats{
  max-width:980px;
  min-height:0;
  margin:30px 0 0;
  padding:26px 28px;
}

.home-inline-stats .counter-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
}

.home-inline-stats .ct{
  padding:0 14px;
}

.home-inline-stats .ct:nth-child(2n){
  border-right:1px solid rgba(255,255,255,.14);
}

.home-inline-stats .ct:last-child{
  border-right:0;
}

.home-inline-stats .ct-n{
  font-size:31px;
}

.home-hero-panels{
  display:grid;
  gap:16px;
  align-self:center;
  justify-self:end;
  width:min(100%,470px);
}

.home-hero-panel{
  position:relative;
  display:grid;
  gap:8px;
  min-height:154px;
  padding:26px 54px 22px 26px;
  border:1px solid rgba(255,255,255,.72);
  border-left:4px solid #203c5f;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,252,.94));
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 24px 70px rgba(2,14,29,.22);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.home-hero-panel.panel-products{
  border-left-color:var(--orange);
}

.home-hero-panel:hover,
.home-hero-panel:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,154,61,.64);
  box-shadow:0 30px 84px rgba(2,14,29,.28);
  outline:0;
}

.home-panel-kicker{
  color:#c76d22;
  -webkit-text-fill-color:#c76d22;
  font-family:var(--display);
  font-size:11px;
  font-weight:850;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.home-panel-title{
  color:#081b31;
  -webkit-text-fill-color:#081b31;
  font-family:var(--display);
  font-size:22px;
  line-height:1.08;
  font-weight:900;
}

.home-panel-copy{
  color:#4d6380;
  -webkit-text-fill-color:#4d6380;
  font-size:15px;
  line-height:1.45;
  font-weight:650;
}

.home-panel-meta{
  justify-self:end;
  margin-top:8px;
  color:#5d6e84;
  -webkit-text-fill-color:#5d6e84;
  font-family:var(--display);
  font-size:10px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.home-panel-arrow{
  position:absolute;
  top:22px;
  right:24px;
  pointer-events:none;
  color:#173554;
  -webkit-text-fill-color:#173554;
  font-family:var(--display);
  font-size:22px;
  font-weight:850;
  line-height:1;
}

/* La scheda prodotti ha due destinazioni: il corpo apre prodotti.html, il
   "Gia' disponibili" salta direttamente all'ultima slide (il catalogo).
   Un <a> non puo' contenere un altro <a>, quindi la scheda e' un contenitore:
   il link principale copre tutta la superficie con uno pseudo-elemento e il
   secondo link ci sta sopra. */
.home-panel-link{
  color:inherit;
  -webkit-text-fill-color:inherit;
  text-decoration:none;
}

.home-panel-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}

.home-panel-jump{
  position:relative;
  z-index:1;
  text-decoration:none;
  transition:color .18s ease;
}

.home-panel-jump:hover,
.home-panel-jump:focus-visible{
  color:#c76d22;
  -webkit-text-fill-color:#c76d22;
}

/* La scheda non e' piu' un link e quindi non riceve il focus: ne replichiamo
   lo stato attivo quando il focus arriva su uno dei due link interni. */
.home-hero-panel:has(a:focus-visible){
  transform:translateY(-3px);
  border-color:rgba(255,154,61,.64);
  box-shadow:0 30px 84px rgba(2,14,29,.28);
}

@media(max-width:1100px){
  .home-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .home-hero-panels{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-self:start;
    width:100%;
    max-width:760px;
  }

  .home-hero-panel{
    min-height:170px;
  }

  .home-inline-stats .counter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 0;
  }

  .home-inline-stats .ct:nth-child(2n){
    border-right:1px solid rgba(255,255,255,.14);
  }

  .home-inline-stats .ct:nth-child(3n){
    border-right:0;
  }
}

@media(max-width:680px){
  .home-premium .wrap,
  .home-premium .home-grid,
  .home-premium .home-copy,
  .home-premium .home-head,
  .home-premium .home-grid-head{
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
  }

  .home-copy h1{
    width:100%;
    max-width:calc(100vw - 32px);
    font-size:31px;
    line-height:1.02;
    overflow-wrap:break-word;
  }

  .home-premium .home-head h2,
  .home-business-section .home-head h2{
    max-width:100%;
    font-size:31px;
    overflow-wrap:break-word;
  }

  .home-copy p,
  .slogan-slide{
    width:100%;
    max-width:calc(100vw - 32px);
    overflow-wrap:break-word;
  }

  .slogan-carousel{
    min-height:86px;
  }

  .slogan-slide{
    font-size:23px;
  }

  .hero-stats{
    margin-top:28px;
    min-height:0;
    padding:20px;
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
  }

  .hero-stats .stats-eyebrow{
    font-size:11px;
    line-height:1.35;
    letter-spacing:.24em;
    overflow-wrap:anywhere;
  }

  .hero-stats .counter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 0;
  }

  .hero-stats .ct,
  .hero-stats .ct:nth-child(3n){
    min-width:0;
    padding:0 6px;
    border-right:0;
  }

  .hero-stats .ct-n{
    font-size:30px;
  }

  .hero-stats .ct-l{
    font-size:11px;
    overflow-wrap:break-word;
  }

  .home-hero-panels{
    grid-template-columns:1fr;
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
  }

  .home-hero-panel{
    min-height:0;
    padding:22px 48px 20px 20px;
  }

  .home-panel-kicker{
    font-size:10px;
    line-height:1.4;
  }

  .home-panel-title{
    font-size:20px;
  }

  .home-panel-copy{
    font-size:14px;
  }
}

/* Home sections: compact cards and business map */
.home-premium > .home-section .home-head,
.home-premium > .home-section .home-grid-head{
  max-width:860px;
  margin-bottom:30px;
}

.home-premium > .home-section .home-head h2,
.home-premium > .home-section .home-grid-head h2{
  max-width:780px;
  margin:14px 0 14px;
  font-size:clamp(36px,3.5vw,48px);
  line-height:1.06;
}

.home-premium > .home-section .home-head p,
.home-premium > .home-section .home-grid-head p{
  max-width:820px;
  font-size:18px;
  line-height:1.42;
}

.home-premium > .home-section .eyebrow{
  margin-bottom:16px;
}

.home-premium .home-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.home-premium .home-cards + .home-partners{
  margin-top:22px;
}

.home-premium .home-cards{
  gap:18px;
}

.home-premium .home-cards ~ .home-partners{
  gap:18px;
}

.home-premium .home-cards .home-card{
  min-height:232px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:26px 28px;
  border-radius:10px;
}

.home-premium .home-cards .home-card::before,
.home-premium .home-partners .home-card::before{
  height:4px;
}

.home-premium .home-cards .home-card h3{
  max-width:360px;
  margin:0 0 10px;
  color:#081b31;
  -webkit-text-fill-color:#081b31;
  font-size:22px;
  line-height:1.12;
}

.home-premium .home-cards .home-card p{
  max-width:460px;
  color:#385879;
  -webkit-text-fill-color:#385879;
  font-size:15px;
  line-height:1.48;
}

.home-premium .home-cards .home-card a,
.home-premium .home-partners .home-card a{
  width:max-content;
  margin-top:18px;
  color:#0e2440;
  -webkit-text-fill-color:#0e2440;
  font-family:var(--display);
  font-size:14px;
  font-weight:850;
}

.home-premium .home-cards .home-card a,
.home-premium .home-partners .home-card a{
  min-height:42px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(14,36,64,.22);
  border-radius:8px;
  background:transparent;
}

.home-premium .home-partners{
  display:grid;
  /* auto-fit invece di due colonne fisse: con una sola card occupa tutta
     la riga, se domani se ne aggiunge un'altra tornano affiancate senza
     rimettere mano alla regola. */
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:22px;
  align-items:stretch;
  margin-top:22px;
}

.home-premium .home-partners .home-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:28px 30px;
  border-radius:10px;
}

/* I 260px di altezza servono a pareggiare due card affiancate. Quando ne
   resta una sola occupa tutta la riga e quel minimo diventa vuoto: e' il
   contenuto a decidere l'altezza. */
.home-premium .home-partners .home-card:only-child{
  min-height:0;
}

.home-premium .home-partners .home-card h2,
.home-premium .home-partners .home-card h3{
  max-width:660px;
  margin:0 0 12px;
  color:#081b31;
  -webkit-text-fill-color:#081b31;
  font-size:clamp(24px,1.85vw,30px);
  line-height:1.08;
}

.home-premium .home-partners .home-card p{
  max-width:620px;
  color:#385879;
  -webkit-text-fill-color:#385879;
  font-size:15.5px;
  line-height:1.48;
}

.home-business-section{
  overflow:hidden;
}

.home-business-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,126,0,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%);
}

.home-business-section .home-head{
  margin-bottom:34px;
}

.home-business-section .home-head p{
  max-width:760px;
}

.home-business-section .bmap-stage{
  position:relative;
}

.home-business-section .bmap-stage::before{
  content:"";
  position:absolute;
  left:calc(100% - 395px);
  top:50%;
  width:130px;
  height:2px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,rgba(255,126,0,.55),rgba(255,126,0,.05));
  z-index:0;
}

.home-business-section .bmap{
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,1fr) minmax(310px,410px);
  gap:24px;
  align-items:stretch;
}

.home-business-section .bmap-sap{
  display:block;
  text-decoration:none;
  min-height:390px;
  padding:34px;
  border-color:rgba(255,126,0,.32);
  border-radius:12px;
  background:
    linear-gradient(rgba(14,36,64,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,36,64,.045) 1px,transparent 1px),
    linear-gradient(145deg,#ffffff 0%,#f6f9fd 56%,#fff6ed 100%);
  background-size:34px 34px,34px 34px,auto;
  box-shadow:0 30px 74px rgba(2,14,29,.22),inset 0 1px 0 rgba(255,255,255,.96);
}

.home-business-section .bmap-sap::after,
.home-business-section .bmap-cell::after,
.home-business-section .bmap-tile::after{
  display:none;
}

.home-business-section .bmap-core-label,
.home-business-section .bmap-side-label{
  width:max-content;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,126,0,.24);
  border-radius:999px;
  background:#fff6ed;
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.home-business-section .bmap-h{
  margin-top:22px;
  color:#102f55;
  -webkit-text-fill-color:#102f55;
  font-size:clamp(34px,3.2vw,48px);
  line-height:1;
}

.home-business-section .bmap-sub{
  max-width:640px;
  margin-top:12px;
  color:#3d5a80;
  -webkit-text-fill-color:#3d5a80;
  font-size:17px;
  line-height:1.5;
}

.home-business-section .bmap-cells{
  gap:16px;
  margin-top:30px;
}

.home-business-section .bmap-cell{
  min-height:128px;
  padding:22px 24px 22px 58px;
  border-color:rgba(14,36,64,.14);
  border-radius:10px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 34px rgba(2,14,29,.12),inset 0 1px 0 rgba(255,255,255,.92);
}

.home-business-section .bmap-cell::before,
.home-business-section .bmap-tile::before{
  height:3px;
  background:linear-gradient(90deg,var(--orange),rgba(255,154,61,.18));
}

.home-business-section .bmap-num{
  position:absolute;
  left:22px;
  top:24px;
  color:rgba(14,36,64,.28);
  -webkit-text-fill-color:rgba(14,36,64,.28);
  font-family:var(--display);
  font-size:13px;
  font-weight:900;
}

.home-business-section .bmap-cell-h{
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
  font-family:var(--display);
  font-size:15px;
  font-weight:900;
}

.home-business-section .bmap-cell-sub{
  max-width:360px;
  margin-top:9px;
  color:#345477;
  -webkit-text-fill-color:#345477;
  font-size:15px;
  line-height:1.45;
}

.home-business-section .bmap-right{
  gap:18px;
}

.home-business-section .bmap-tile{
  min-height:118px;
  padding:24px 28px;
  border-radius:12px;
  text-decoration:none;
  background:linear-gradient(145deg,#ffffff 0%,#f5f8fc 100%);
  box-shadow:0 20px 48px rgba(2,14,29,.18);
}

/* Tutte e quattro le card della mappa sono link: stessa reazione al
   passaggio del mouse, compreso il blocco grande della consulenza SAP.
   L'ombra del blocco grande e' piu' profonda, quindi la sua variante in
   hover parte da li' invece che dal valore delle tessere. */
.home-business-section .bmap-sap,
.home-business-section .bmap-tile{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.home-business-section .bmap-tile:hover,
.home-business-section .bmap-tile:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,126,0,.38);
  box-shadow:0 26px 62px rgba(2,14,29,.24);
}

.home-business-section .bmap-sap:hover,
.home-business-section .bmap-sap:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,126,0,.5);
  box-shadow:0 36px 86px rgba(2,14,29,.26),inset 0 1px 0 rgba(255,255,255,.96);
}

.home-business-section .bmap-sap:focus-visible,
.home-business-section .bmap-tile:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  .home-business-section .bmap-sap,
  .home-business-section .bmap-tile{
    transition:none;
  }
  .home-business-section .bmap-sap:hover,
  .home-business-section .bmap-tile:hover{
    transform:none;
  }
}

.home-business-section .bmap-tile.t-mes{
  background:linear-gradient(145deg,#ffffff 0%,#fff6ed 100%);
}

.home-business-section .bmap-th{
  margin-top:12px;
  color:#173b68;
  -webkit-text-fill-color:#173b68;
  font-size:25px;
}

.home-business-section .bmap-tsub{
  margin-top:4px;
  color:#3d5a80;
  -webkit-text-fill-color:#3d5a80;
  font-size:15px;
}

.about-section{
  background:
    linear-gradient(180deg,rgba(7,29,51,.96),rgba(6,17,31,.98)),
    radial-gradient(circle at 18% 12%,rgba(255,126,0,.14),transparent 34%);
}

.about-head{
  max-width:920px;
}

.about-head h1{
  max-width:1050px;
  font-size:clamp(42px,4.25vw,66px);
  line-height:1.02;
}

.about-timeline{
  position:relative;
  margin-top:70px;
}

.about-timeline-line{
  position:absolute;
  left:0;
  right:0;
  top:20px;
  height:2px;
  background:linear-gradient(90deg,rgba(154,190,234,.26),rgba(255,154,61,.38),rgba(255,154,61,.8));
}

.about-timeline-items{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-timeline-items li{
  position:relative;
  min-width:0;
  padding-top:38px;
}

.about-timeline-dot{
  position:absolute;
  top:11px;
  left:0;
  width:20px;
  height:20px;
  border:2px solid rgba(255,154,61,.72);
  border-radius:50%;
  background:#102946;
  box-shadow:0 0 0 4px rgba(255,126,0,.12);
}

.about-timeline-items strong{
  display:block;
  color:#f5f8fc;
  -webkit-text-fill-color:#f5f8fc;
  font-family:var(--display);
  font-size:21px;
  line-height:1;
  font-weight:900;
  letter-spacing:0;
}

.about-timeline-items b{
  display:block;
  margin-top:12px;
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
  font-family:var(--display);
  font-size:13px;
  line-height:1.15;
  font-weight:850;
}

.about-timeline-items p{
  margin-top:12px;
  color:#b9c9dc;
  -webkit-text-fill-color:#b9c9dc;
  font-size:14px;
  line-height:1.48;
  font-weight:560;
}

/* Il 1999 precede la nascita di Enkeli (2006): e' l'esperienza delle persone,
   non ancora l'azienda. Niente arancione, che qui vale come colore del brand. */
.about-timeline-pre strong{
  color:#8ea6c2;
  -webkit-text-fill-color:#8ea6c2;
}

.about-timeline-pre b{
  color:#7e97b5;
  -webkit-text-fill-color:#7e97b5;
  font-weight:800;
}

.about-timeline-pre p{
  color:#8ba0b8;
  -webkit-text-fill-color:#8ba0b8;
}

.about-timeline-pre .about-timeline-dot{
  border-color:rgba(154,190,234,.42);
  background:#0d2340;
  box-shadow:0 0 0 4px rgba(154,190,234,.08);
}

.about-timeline-current{
  margin-top:-16px;
  padding:28px 16px 18px;
  border:1px solid rgba(255,154,61,.28);
  border-radius:10px;
  background:rgba(255,255,255,.075);
  box-shadow:0 24px 60px rgba(2,14,29,.24),inset 0 1px 0 rgba(255,255,255,.08);
}

.about-timeline-current .about-timeline-dot{
  top:24px;
  left:16px;
  background:var(--orange);
  border-color:rgba(255,186,107,.92);
}

.about-timeline-current strong{
  padding-left:26px;
}

.about-timeline-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:44px;
}

.about-timeline-tags span{
  /* inline-block, non inline-flex: il flex scarta gli spazi fra i nodi di testo
     e "dal <b>1999</b>," verrebbe reso "dal1999,". */
  display:inline-block;
  min-height:38px;
  padding:0 16px;
  line-height:36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.075);
  color:#f2f6fb;
  -webkit-text-fill-color:#f2f6fb;
  font-family:var(--display);
  font-size:13px;
  font-weight:760;
}

.about-timeline-tags b{
  margin:0;
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.about-intro,
.about-strength-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.78fr);
  gap:22px;
  align-items:stretch;
}

.about-certifications{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(7,29,51,.92) 0%,rgba(7,29,51,.78) 42%,rgba(7,29,51,.5) 100%),
    url("wall-of-fame-certificazioni.jpg") center/cover no-repeat,
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--premium-card-shadow);
  color:var(--ink);
  text-shadow:none;
}

.about-certifications::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,126,0,.14),rgba(7,29,51,.12));
  pointer-events:none;
}

.about-panel{
  padding:32px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--premium-card-shadow);
  color:var(--ink);
  text-shadow:none;
}

.about-panel-main{
  min-height:310px;
}

.about-panel :is(h2,h3,p,div){
  color:var(--ink);
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
}

.about-certifications :is(h2,h3,li,div){
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
  text-shadow:none;
}

.about-panel .k,
.about-value .k{
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}

.about-certifications .k{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.about-panel h2,
.about-panel h3,
.about-value h2,
.about-value h3{
  margin:14px 0 16px;
  color:#081b31;
  -webkit-text-fill-color:#081b31;
  font-size:clamp(25px,2.2vw,34px);
  line-height:1.08;
  font-weight:850;
}

.about-certifications h2,
.about-certifications h3{
  margin:14px 0 16px;
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:clamp(25px,2.2vw,34px);
  line-height:1.08;
  font-weight:850;
}

.about-panel p,
.about-value p{
  color:#385879;
  -webkit-text-fill-color:#385879;
  font-size:16px;
  line-height:1.62;
}

.about-cert-list li{
  color:#e4eefb;
  -webkit-text-fill-color:#e4eefb;
  font-size:16px;
  line-height:1.62;
}

.about-value{
  margin-top:22px;
  padding:36px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
  gap:34px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--premium-card-shadow);
  color:var(--ink);
  text-shadow:none;
}

.about-value-copy{
  display:grid;
  gap:16px;
}

.about-service-list{
  display:grid;
  gap:10px;
  align-content:start;
}

.about-service-list span{
  display:block;
  border:1px solid rgba(255,126,0,.24);
  border-radius:8px;
  background:#fff6ed;
  padding:13px 15px;
  color:#385879;
  -webkit-text-fill-color:#385879;
  font-family:var(--display);
  font-size:14px;
  font-weight:780;
}

.about-strengths{
  margin-top:58px;
}

.about-certifications{
  margin-top:22px;
  padding:34px 36px 36px;
  display:grid;
  grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);
  gap:34px;
}

.about-cert-head{
  align-self:start;
}

.about-cert-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}

.about-cert-list li{
  position:relative;
  padding-left:20px;
}

.about-cert-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,126,0,.12);
}
.home-premium .home-company{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:920px;
  margin:0 auto;
}

.home-premium .home-company span{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#dbe9fb;
  -webkit-text-fill-color:#dbe9fb;
  font-family:var(--display);
  font-size:13px;
  font-weight:760;
}

@media(max-width:1100px){
  html.enkeli-slide-snap .product-hero-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  html.enkeli-slide-snap .product-hero-actions{
    margin-top:6px;
    justify-content:flex-start;
  }

  html.enkeli-slide-snap .product-hero-card{
    margin-left:0;
  }

  html.enkeli-slide-snap .mob > .wrap,
  html.enkeli-slide-snap .ai-sec > .wrap{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }

  html.enkeli-slide-snap .ai-sec h2,
  html.enkeli-slide-snap .ai-sec .sub,
  html.enkeli-slide-snap .ai-points,
  html.enkeli-slide-snap .mcp,
  html.enkeli-slide-snap .ai-band{
    grid-area:auto;
  }

  html.enkeli-slide-snap .ai-sec .ai-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }

  html.enkeli-slide-snap .scene,
  html.enkeli-slide-snap .mcp{
    justify-self:stretch;
    max-width:none;
  }

  html.enkeli-slide-snap .ai-band{
    grid-template-columns:1fr;
  }

  .home-premium .home-cards{
    grid-template-columns:1fr;
  }

  .home-premium .home-partners{
    grid-template-columns:1fr;
  }

  .home-business-section .bmap{
    grid-template-columns:1fr;
  }

  .home-business-section .bmap-stage::before{
    display:none;
  }

  .home-business-section .bmap-right{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto;
  }

  .about-intro,
  .about-strength-grid,
  .about-value,
  .about-certifications{
    grid-template-columns:1fr;
  }

  .about-timeline{
    margin-top:46px;
  }

  .about-timeline-line{
    left:10px;
    right:auto;
    top:0;
    bottom:0;
    width:2px;
    height:auto;
    /* qui la linea e' verticale: il gradiente va ruotato, altrimenti a 90deg
       si comprime su 2px e resta visibile solo il capo tenue del 1999. */
    background:linear-gradient(180deg,rgba(154,190,234,.26),rgba(255,154,61,.38),rgba(255,154,61,.8));
  }

  .about-timeline-items{
    grid-template-columns:1fr 1fr;
  }

  .about-timeline-items li{
    padding:0 0 0 34px;
  }

  .about-timeline-dot{
    top:0;
    left:1px;
  }

  .about-timeline-current{
    margin-top:0;
    padding:22px 18px 18px 42px;
  }

  .about-timeline-current .about-timeline-dot{
    top:22px;
    left:12px;
  }

  .about-timeline-current strong{
    padding-left:0;
  }

  .about-panel-main{
    min-height:0;
  }
}

@media(max-width:680px){
  .home-premium .home-cards .home-card,
  .home-premium .home-partners .home-card{
    min-height:0;
    padding:26px 22px;
  }

  .home-business-section .bmap-sap{
    min-height:0;
    padding:28px 20px;
  }

  .home-business-section .bmap-h{
    font-size:34px;
  }

  .home-business-section .bmap-cell{
    padding-left:52px;
  }

  .home-business-section .bmap-cells,
  .home-business-section .bmap-right{
    grid-template-columns:1fr;
  }

  .home-business-section .bmap-cell,
  .home-business-section .bmap-tile{
    min-height:0;
    padding:22px 20px;
  }

  .about-panel,
  .about-value,
  .about-certifications{
    padding:24px 20px;
  }

  .about-head h1{
    font-size:33px;
  }

  .about-timeline-items{
    grid-template-columns:1fr;
    gap:18px;
  }

  .about-timeline-tags{
    margin-top:30px;
  }

  .about-timeline-tags span{
    width:100%;
    min-height:36px;
    justify-content:center;
    text-align:center;
  }

  .about-cert-list{
    grid-template-columns:1fr;
  }
}

/* Success stories premium layout */
.success-premium{
  padding-top:150px;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 10%,rgba(255,154,61,.16),transparent 34%),
    linear-gradient(145deg,#06111f 0%,#071d33 44%,#102946 100%);
}

.success-premium::before{
  content:"";
  position:absolute;
  inset:86px 0 auto;
  height:520px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000,transparent);
  opacity:.34;
}

.success-hero{
  position:relative;
  z-index:1;
  display:block;
  margin-bottom:42px;
}

.success-portfolio-slide{
  padding-top:118px;
}

.success-copy h1{
  max-width:1040px;
  margin:18px 0 24px;
  font-size:clamp(50px,6vw,88px);
  line-height:.96;
}

.success-copy p{
  max-width:820px;
}

.success-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.success-featured{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.42fr);
  gap:34px;
  align-items:stretch;
  margin:0 0 64px;
  padding:42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,248,252,.92) 62%,rgba(255,246,237,.96));
  box-shadow:0 36px 100px rgba(2,14,29,.28);
}

.success-featured::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border-top:1px solid rgba(255,255,255,.82);
  pointer-events:none;
}

.success-featured h2{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

.success-featured h2{
  max-width:900px;
  margin:18px 0;
  font-size:clamp(34px,4vw,56px);
  line-height:1.02;
}

.success-featured p{
  max-width:780px;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:18px;
}

.success-featured-panel{
  display:grid;
  gap:12px;
  align-content:center;
  padding:24px;
  border-radius:16px;
  background:linear-gradient(160deg,#06111f,#0a2748);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

.success-system-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:54px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#f7f9fc !important;
  -webkit-text-fill-color:#f7f9fc !important;
  font-family:var(--display);
  font-size:13px;
  font-weight:760;
  background:rgba(255,255,255,.045);
}

.success-system-row span{
  color:#f7f9fc !important;
  -webkit-text-fill-color:#f7f9fc !important;
  font-size:15px;
  font-weight:900;
}

.success-system-row i{
  display:none;
}

.success-system-row b{
  min-width:64px;
  color:#ffb15f !important;
  -webkit-text-fill-color:#ffb15f !important;
  font-size:15px;
  font-weight:900;
  text-align:right;
}

.success-system-row.active{
  border-color:rgba(255,154,61,.48);
  background:rgba(255,126,0,.18);
}

.success-section-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(320px,.42fr);
  gap:34px;
  align-items:end;
  margin-bottom:28px;
}

.success-section-head h2{
  max-width:780px;
  margin:14px 0 0;
  font-size:clamp(34px,4vw,52px);
  line-height:1.04;
  color:#f7f9fc;
  -webkit-text-fill-color:#f7f9fc;
}

.success-section-head p{
  color:#b9d4f5;
  -webkit-text-fill-color:#b9d4f5;
  font-size:18px;
}

.success-grid{
  position:relative;
  z-index:1;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}

.success-grid .case-card{
  grid-column:span 2;
  min-height:330px;
  padding:28px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%);
  box-shadow:0 22px 70px rgba(2,14,29,.18);
}

/* Il mosaico asimmetrico era tarato su cinque schede: le posizioni 1 e 4
   occupavano tre colonne e le altre due, e ogni riga restava spaiata.
   Con sei casi in poi la griglia e' regolare, tre per riga: la gerarchia
   la fa gia' il caso in evidenza sopra, che e' a tutta larghezza. */
.success-grid .case-card:nth-child(1),
.success-grid .case-card:nth-child(4){
  grid-column:span 2;
}

.success-grid .case-card:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 90px rgba(2,14,29,.24);
}

.case-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:2px;
  color:var(--muted);
  font-family:var(--display);
  font-size:12px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.case-topline span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#071d33;
  color:#fff;
  -webkit-text-fill-color:#fff;
  letter-spacing:0;
}

.success-grid .case-card h2{
  margin-top:8px;
  font-size:clamp(24px,2.3vw,32px);
}

.case-avatar{
  display:inline-flex;
  width:42px;
  height:42px;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#071d33;
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-family:var(--display);
  font-size:13px;
  font-weight:900;
}

.case-author span:last-child{
  display:grid;
  gap:2px;
}

.case-author small{
  color:var(--muted);
  -webkit-text-fill-color:var(--muted);
}

@media(max-width:1100px){
  .success-hero,
  .success-featured,
  .success-section-head{
    grid-template-columns:1fr;
  }

  .success-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .success-grid .case-card,
  .success-grid .case-card:nth-child(1),
  .success-grid .case-card:nth-child(4){
    grid-column:auto;
  }
}

@media(max-width:680px){
  .success-premium{
    padding-top:128px;
  }

  .success-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .success-actions .btn{
    width:100%;
  }

  .success-featured{
    padding:24px 20px;
  }

  .success-grid{
    grid-template-columns:1fr;
  }

  .success-featured h2{
    font-size:32px;
  }

  .success-featured-panel{
    padding:18px;
  }

  .success-system-row i{
    display:none;
  }
}

/* Contact premium overrides kept after global card rules. */
main .contact-section .contact-premium-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.43fr);
  gap:24px;
  align-items:start;
}

main .contact-section .contact-form-primary{
  padding:38px;
}

main .contact-section .contact-direct-premium{
  background:linear-gradient(145deg,#071d33 0%,#102946 100%);
  border-color:rgba(255,154,61,.28);
}

main .contact-section .contact-direct-premium :is(h3,.k){
  color:#fff;
  -webkit-text-fill-color:#fff;
}

main .contact-section .contact-direct-premium p{
  color:#b9d4f5;
  -webkit-text-fill-color:#b9d4f5;
}

main .contact-section .contact-direct-premium .k,
main .contact-section .contact-direct-premium .contact-link.alt{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

main .contact-section .location-card iframe{
  display:block;
  width:100%;
  height:168px;
  margin-top:18px;
  border:0;
  border-radius:12px;
}

@media(max-width:1100px){
  main .contact-section .contact-premium-layout{
    grid-template-columns:1fr;
  }

  main .contact-section .contact-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  main .contact-section .contact-direct-premium{
    grid-column:1/-1;
  }
}

@media(max-width:680px){
  main .contact-section .contact-form-primary{
    padding:28px 20px;
  }

  main .contact-section .contact-side,
  main .contact-section .form-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Slide certificazioni SAP (servizi.html #certificazioni)
   Riprende la card "Wall of Fame" di chi-siamo promuovendola a
   slide intera, con l'80% di certificati come ancora visiva.
   ============================================================ */
.cert-board{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(260px,.46fr) minmax(0,1fr);
  gap:clamp(22px,2.6vw,38px);
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  background:
    linear-gradient(100deg,rgba(7,29,51,.94) 0%,rgba(7,29,51,.82) 46%,rgba(7,29,51,.58) 100%),
    url("wall-of-fame-certificazioni.jpg") center/cover no-repeat,
    var(--navy);
}

.cert-board::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,126,0,.12),rgba(7,29,51,.18));
  pointer-events:none;
}

.cert-board > *{position:relative}

.cert-figures{display:grid;align-content:start;gap:11px}

.cert-figure{
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(7,29,51,.42);
}

.cert-figure-lead{
  border-color:rgba(255,126,0,.42);
  background:linear-gradient(180deg,rgba(255,126,0,.16),rgba(7,29,51,.46));
}

.cert-n{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-family:var(--display);
  font-size:32px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.cert-figure-lead .cert-n{font-size:clamp(42px,3.9vw,58px)}

.cert-n span{
  font-size:13px;
  line-height:1;
  font-weight:850;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.cert-n i{
  font-style:normal;
  font-size:.52em;
  font-weight:900;
  color:var(--orange);
  -webkit-text-fill-color:var(--orange);
}

.cert-board .cert-figure p{
  max-width:none;
  margin:7px 0 0;
  font-size:14px;
  line-height:1.4;
  font-weight:600;
  color:#cfe0f5;
  -webkit-text-fill-color:#cfe0f5;
}

.cert-panel{align-self:start}

.cert-board .cert-panel .k{
  margin:0 0 10px;
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

.cert-board .cert-panel h3{
  margin:0 0 14px;
  font-size:clamp(19px,1.6vw,23px);
  line-height:1.16;
  font-weight:850;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.cert-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 18px;
}

.cert-board .cert-list li{
  position:relative;
  max-width:none;
  margin:0;
  padding-left:18px;
  font-size:13.5px;
  line-height:1.38;
  font-weight:500;
  color:#e4eefb;
  -webkit-text-fill-color:#e4eefb;
}

.cert-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,126,0,.14);
}

@media(max-width:1100px){
  .cert-board{grid-template-columns:1fr;gap:26px}
  .cert-figures{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:680px){
  .cert-figures{grid-template-columns:1fr}
  .cert-list{grid-template-columns:1fr}
}

/* ============================================================
   Form contatti server-side (contatti.html + contatti.php)
   Messaggi di esito, errori per campo, stato "invio in corso"
   e honeypot antispam. Solo aggiunte: nessuna regola esistente
   viene modificata. La specificita' (main .contact-section ...)
   serve a battere le regole globali di colore su form p/span.
   ============================================================ */

/* Honeypot: fuori schermo ma raggiungibile dai bot che compilano
   ogni input. Volutamente NON display:none, che i bot piu' evoluti
   riconoscono e saltano. */
.form-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Area di esito: live region sempre presente nel DOM, invisibile
   finche' e' vuota, cosi' gli screen reader annunciano il messaggio. */
main .contact-section .contact-form .form-esito{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-left:4px solid var(--orange);
  border-radius:10px;
  background:var(--paper-2);
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  color:var(--navy);
  -webkit-text-fill-color:var(--navy);
}

main .contact-section .contact-form .form-esito:empty{
  display:none;
}

main .contact-section .contact-form .form-esito.is-ok{
  border-color:rgba(16,110,78,.24);
  border-left-color:#106e4e;
  background:rgba(16,110,78,.07);
  color:#0c5a40;
  -webkit-text-fill-color:#0c5a40;
}

main .contact-section .contact-form .form-esito.is-ko{
  border-color:rgba(169,42,32,.24);
  border-left-color:#a92a20;
  background:rgba(169,42,32,.06);
  color:#8e231a;
  -webkit-text-fill-color:#8e231a;
}

/* Errore sotto al singolo campo, collegato via aria-describedby. */
main .contact-section .contact-form .field-error{
  display:block;
  margin-top:-2px;
  font-family:var(--display);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  color:#8e231a;
  -webkit-text-fill-color:#8e231a;
}

main .contact-section .contact-form :is(input,select,textarea)[aria-invalid="true"]{
  border-color:rgba(169,42,32,.55);
  box-shadow:0 0 0 3px rgba(169,42,32,.12);
}

/* Stato "invio in corso": pulsante disabilitato e non cliccabile. */
.contact-form .form-submit[disabled],
.contact-form .form-submit[aria-busy="true"]{
  opacity:.62;
  cursor:progress;
  pointer-events:none;
}

/* Elenco degli errori nella pagina di conferma servita da contatti.php
   ai browser senza JavaScript. */
main .contact-section .contact-form .form-esito-lista{
  margin:14px 0 0;
  padding-left:20px;
  font-size:14px;
  line-height:1.55;
  color:#8e231a;
  -webkit-text-fill-color:#8e231a;
}

/* ============================================================
   Titoli promossi ad h1
   Le pagine interne partivano da <h2>: per il SEO serve un h1 per
   pagina, ma l'aspetto non deve cambiare. Senza queste regole gli
   h1 cadrebbero sulla regola globale (50-82px) invece che su quella
   dei titoli di sezione (44-58px).
   .clients-head h1 e .contact-hero h1 erano gia' previsti piu' sopra.
   ============================================================ */
.sec-head h1,
.mob h1,
.ai-sec h1,
.pio h1,
.tl-sec > .wrap > h1{
  max-width:940px;
  margin:18px 0;
  font-size:clamp(44px,4.7vw,58px);
  line-height:1.05;
  font-weight:850;
  color:var(--text);
}

@media(min-width:981px) and (prefers-reduced-motion:no-preference){
  html.enkeli-slide-snap .sec-head h1,
  html.enkeli-slide-snap .mob h1,
  html.enkeli-slide-snap .ai-sec h1,
  html.enkeli-slide-snap .pio h1{
    max-width:820px;
    margin:14px 0;
    font-size:clamp(36px,3.5vw,48px);
    line-height:1.06;
  }
}

@media(max-width:680px){
  .sec-head h1,
  .mob h1,
  .ai-sec h1,
  .pio h1,
  .tl-sec > .wrap > h1{
    font-size:34px;
  }
}

/* I chip del modello di rilascio dentro le card prodotto.
   .chips aveva il layout flex solo sotto .prod; qui serve anche in .fmt.
   .fmt diventa una colonna flex cosi' i chip si allineano in fondo a tutte
   e tre le card anche quando i testi hanno lunghezze diverse. */
.fmt{
  display:flex;
  flex-direction:column;
}

.fmt .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
}

/* ============================================================
   Barra scorrevole dei clienti (clienti.html)
   Riusa il marquee della home; qui serve a piena larghezza,
   con testo piu' grande perche' sono nomi, non tag.
   ============================================================ */
.clients-strip{padding-top:0}

.clients-strip .eyebrow{margin-bottom:20px}

.home-marquee.clients-marquee{
  max-width:none;
  margin-top:0;
  padding:22px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}

.clients-marquee .home-marquee-track{
  gap:56px;
  animation-duration:46s;
}

.clients-marquee .home-marquee-track span{
  font-size:22px;
  font-weight:850;
  letter-spacing:.01em;
  color:#cfe0f5;
  -webkit-text-fill-color:#cfe0f5;
}

/* Chi ha chiesto meno animazioni vede l'elenco fermo e scorribile a mano. */
@media(prefers-reduced-motion:reduce){
  .clients-marquee .home-marquee-track{animation:none}
  .home-marquee.clients-marquee{overflow-x:auto;mask-image:none}
}

@media(max-width:680px){
  .clients-marquee .home-marquee-track{gap:34px}
  .clients-marquee .home-marquee-track span{font-size:17px}
}

/* Timeline con un numero di nodi diverso da sei (es. le pagine case study):
   le colonne si adattano a quanti sono, invece di restare fisse a sei e
   lasciare i nodi fermi a due terzi della larghezza. */
.pio-nodes.pio-nodes-auto{
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  grid-template-columns:none;
}

/* Schermata di prodotto dentro una case study.
   L'immagine e' chiara su fondo navy: le serve una cornice, non deve
   galleggiare. Larghezza limitata alla dimensione reale, per non scalarla. */
.case-shot{
  margin:0 0 34px;
  padding:clamp(14px,1.6vw,22px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(20,49,90,.5),rgba(8,20,36,.6));
  box-shadow:0 26px 80px rgba(2,14,29,.32);
}

.case-shot img{
  display:block;
  width:100%;
  max-width:920px;
  height:auto;
  margin:0 auto;
  border-radius:10px;
}

.case-shot figcaption{
  max-width:820px;
  margin:16px auto 0;
  color:var(--soft);
  -webkit-text-fill-color:var(--soft);
  font-size:15px;
  line-height:1.5;
  text-align:center;
}

/* Variante del pannello in evidenza che ospita una schermata invece
   delle righe di sistema: stessa cornice scura, immagine a filo. */
.success-featured-panel.success-featured-shot{
  align-content:center;
  padding:14px;
}

.success-featured-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

/* ============================================================
   Riflesso luminoso al passaggio del mouse
   Ripresa dell'effetto sheen di HRev_v3: una banda diagonale che
   attraversa la scheda una volta sola all'ingresso del puntatore.
   Le schede del sito sono chiare, quindi la banda non e' bianca
   (invisibile su bianco) ma calda: legge come un bagliore arancio.
   ============================================================ */
main :is(.case-card,.pillar,.fmt,.prod,.home-card,.aip,.pio-n,
           .client-metric,.client-proof-card,.home-hero-panel,.contact-card){
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

main :is(.case-card,.pillar,.fmt,.prod,.home-card,.aip,.pio-n,
           .client-metric,.client-proof-card,.home-hero-panel,.contact-card)::after{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:-70%;
  width:42%;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.62) 30%,
    rgba(255,164,72,.30) 52%,
    rgba(255,255,255,.36) 68%,
    transparent 100%);
  opacity:0;
}

main :is(.case-card,.pillar,.fmt,.prod,.home-card,.aip,.pio-n,
           .client-metric,.client-proof-card,.home-hero-panel,.contact-card):hover::after{
  animation:enkSheen .9s cubic-bezier(.22,.61,.36,1);
}

@keyframes enkSheen{
  0%{opacity:0;transform:translateX(0) rotate(6deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translateX(430%) rotate(6deg)}
}

@media(prefers-reduced-motion:reduce){
  main :is(.case-card,.pillar,.fmt,.prod,.home-card,.aip,.pio-n,
               .client-metric,.client-proof-card,.home-hero-panel,.contact-card):hover::after{
    animation:none;
  }
}

/* ============================================================
   1. TRANSIZIONI FRA PAGINE (View Transitions API)

   Il sito e' statico e multipagina: e' esattamente il caso per cui
   questa API e' nata. Toglie il lampo bianco al cambio pagina.
   Header e footer sono dichiarati come elementi persistenti, quindi
   restano fermi mentre il contenuto scivola: la navigazione sembra
   una sola applicazione invece di dieci documenti separati.

   Dove non e' supportata non succede nulla: si naviga come prima.
   ============================================================ */
@view-transition{
  navigation:auto;
}

/* La dissolvenza predefinita fa svanire la vecchia pagina MENTRE compare la
   nuova: a meta' corsa sono entrambe semitrasparenti e si vede lo sfondo
   attraverso tutte e due. Su un sito con pagine di luminosita' molto diversa
   (contatti misura 124 su 255, chi-siamo 35) quel momento si legge come un
   lampo. Qui la vecchia resta opaca e la nuova le sale sopra: non ci sono mai
   due livelli semitrasparenti insieme, quindi niente sfarfallio. */
::view-transition-old(root){
  animation:none;
  opacity:1;
}

::view-transition-new(root){
  animation:enkPageIn .26s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes enkPageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Gli elementi che sopravvivono al cambio pagina non devono dissolvere. */
.topbar{view-transition-name:enk-topbar}
.site-footer{view-transition-name:enk-footer}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none !important;
  }
}

/* ============================================================
   2. TOKEN DI MOVIMENTO

   Il sito aveva 5 keyframes ma solo 6 regole di transizione: gli
   stati scattavano. Due token, usati ovunque, valgono piu' di
   qualunque effetto nuovo.
   ============================================================ */
:root{
  --enk-dur:.22s;
  --enk-dur-slow:.42s;
  --enk-ease:cubic-bezier(.22,.61,.36,1);
}

a,
button,
.btn,
.btn-primary,
.btn-ghost,
.case-link,
.pcta,
.go,
.rd,
.band-cta,
.contact-link,
.chips span,
.case-tags span,
.client-scope span,
.client-logo,
.about-timeline-tags span,
.form-field input,
.form-field textarea,
.form-field select{
  transition:color var(--enk-dur) var(--enk-ease),
             background-color var(--enk-dur) var(--enk-ease),
             border-color var(--enk-dur) var(--enk-ease),
             transform var(--enk-dur) var(--enk-ease),
             box-shadow var(--enk-dur) var(--enk-ease),
             opacity var(--enk-dur) var(--enk-ease);
}

/* La freccia si sposta: il link diventa una direzione, non un'etichetta.
   Si punta direttamente a .ar invece di elencare le classi dei contenitori:
   .ar significa "freccia" e basta, quindi la regola vale anche per i link
   che verranno scritti domani, senza doverla aggiornare. */
a .ar{
  display:inline-block;
  transition:transform var(--enk-dur) var(--enk-ease);
}

a:hover .ar,
a:focus-visible .ar{
  transform:translateX(4px);
}

@media(prefers-reduced-motion:reduce){
  a:hover .ar,
  a:focus-visible .ar{
    transform:none;
  }
}

/* ============================================================
   3. ANIMAZIONI GUIDATE DALLO SCROLL

   Niente JavaScript, niente IntersectionObserver: e' il browser a
   legare l'avanzamento allo scroll, sul thread di composizione.
   Non puo' impuntarsi e non puo' lasciare contenuto invisibile se
   uno script non parte — la lezione di stamattina sulle slide.

   Tutto dentro @supports: dove non c'e' il supporto il contenuto
   e' semplicemente gia' al suo posto, che e' il fallback corretto.
   ============================================================ */
@keyframes enkRise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

@keyframes enkDraw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference) and (min-width:981px){

    /* Le schede entrano in scena, sfalsate dalla loro stessa posizione. */
    main :is(.pillar,.fmt,.prod,.case-card,.client-metric,.client-proof-card,.aip){
      animation:enkRise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }

    /* La timeline dell'integrazione si disegna mentre scorri:
       2000 -> RFC -> IDoc -> SOAP -> XI 3.0 -> PI -> PO -> CPI.
       E' la narrazione "pionieri dell'integrazione" resa in movimento. */
    .pio-line,
    .about-timeline-line{
      transform-origin:left center;
      animation:enkDraw linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 45%;
    }

    /* I nodi compaiono dietro la linea che li raggiunge. */
    .pio-n{
      animation:enkRise linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 30%;
    }
  }
}

/* ============================================================
   Immagine hero della home (foto della sede)
   Era in base64 dentro un <style> inline in index.html: 153 KB
   che bloccavano il rendering e non venivano mai messi in cache.
   Ora e' un file vero, riusabile e memorizzabile dal browser.
   ============================================================ */
.home-hero{position:relative;overflow:hidden}

.home-hero > .wrap{position:relative;z-index:3}

.hero-media{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("hero-sede.webp");
  background-size:cover;
  background-position:72% center;
  filter:saturate(.82) contrast(1.03) brightness(.9);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,#0B1D33 4%,rgba(11,29,51,.85) 42%,rgba(11,29,51,.5) 100%);
}

@media(max-width:820px){
  .hero-overlay{
    background:linear-gradient(90deg,#0B1D33 8%,rgba(11,29,51,.9) 55%,rgba(11,29,51,.75) 100%);
  }
}

/* Diagrammi nelle case study: il foglio impone a tutti i testi SVG il colore
   d'inchiostro scuro, giusto per i diagrammi su fondo chiaro. Qui pero' alcuni
   riquadri sono scuri e il testo era gia' dichiarato chiaro nell'SVG: senza
   questa riasserzione risultava scuro su scuro, illeggibile. */
:is(.scene,.mcp) svg text[fill="#fff"]{fill:#fff}
:is(.scene,.mcp) svg text[fill="#B9C4D4"]{fill:#B9C4D4}
:is(.scene,.mcp) svg text[fill="#EAF0F7"]{fill:#EAF0F7}

/* Il foglio impone anche font-weight:760 a tutto il testo SVG. Sui diagrammi
   disegnati per il sito va bene; su uno importato, dove le larghezze sono
   calcolate sui pesi originali, le etichette diventano piu' larghe dei
   riquadri che le contengono e sbordano. Qui si rispettano i pesi dichiarati
   nell'SVG, che sono quelli su cui il disegno e' stato costruito. */
.arch-scene svg text{font-weight:500}
.arch-scene svg text[font-weight="600"]{font-weight:600}
.arch-scene svg text[font-weight="700"]{font-weight:700}

/* Le etichette secondarie erano dimensionate su un font leggermente piu'
   stretto e sbordavano dai riquadri: un punto in meno le riporta dentro
   senza toccare la geometria del disegno. */
.arch-scene svg text[font-size="10.5"]{font-size:9.4px}

/* Rimando alla pagina capability in coda a una case study. */
.case-correlato{
  margin-top:22px;
  text-align:center;
}

.ai-approfondisci{
  margin-top:14px;
}

/* Sezione AI fuori dalla modalita' slide.
   Il .wrap non deve essere una griglia: contiene quattro blocchi in colonna
   (titolo, sottotitolo, .ai-grid, .ai-band) e la griglia a due colonne li
   disponeva 2x2, schiacciando .ai-grid in meta' larghezza e mandando il testo
   delle card fuori dai riquadri. Le due colonne le fa .ai-grid, che e' li'
   apposta. In modalita' slide vale invece la griglia ad aree nominate, che
   usa display:contents su .ai-grid ed e' dichiarata piu' sopra. */
html:not(.enkeli-slide-snap) .ai-sec > .wrap{
  display:block;
}

html:not(.enkeli-slide-snap) .ai-sec > .wrap > .sub{
  max-width:820px;
  margin-bottom:34px;
}

html:not(.enkeli-slide-snap) .ai-sec .ai-grid{
  margin-top:34px;
}

/* Colori del testo dentro i diagrammi SVG.
   .n-white esisteva gia' ma era scoped a html.enkeli-slide-snap: funzionava
   su prodotti.html e non su mobile.html, dove "API Server" restava scuro su
   riquadro navy. Il colore di un testo non dipende dalla modalita' di
   scorrimento della pagina, quindi la regola vale sempre. */
:is(.scene,.mcp) svg .n-white{
  fill:#f7f9fc;
}

:is(.scene,.mcp) svg .n-sub{
  fill:var(--steel);
}

/* Corpo della scheda prodotto.
   .prod e' una colonna flex con gap:18px, ma .head e .body sono i suoi unici
   due figli: dentro .body gli elementi ricadevano nel flusso normale, senza
   alcuna spaziatura. Le pillole e il pulsante finivano attaccati.
   .body e .head sono usate solo qui, nella scheda HRev, ma restano scoped a
   .prod: sono nomi troppo generici per lasciarli globali. */
.prod .body{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* I pulsanti restano in fondo anche se il testo sopra e' piu' corto.
   .prod-actions e' la riga di call-to-action della scheda: regge una o piu'
   azioni (Scopri / Guarda il video) e va a capo sulle colonne strette. */
.prod .body .prod-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-top:auto;
}

.prod .body .pcta{
  align-self:flex-start;
}

/* Variante secondaria: stessa geometria del .pcta, peso visivo minore, cosi'
   l'azione principale resta "Scopri HRev". La scheda .prod e' chiara in ogni
   contesto (slide e mobile), quindi il ghost e' scuro su fondo trasparente. */
main .pcta-ghost{
  background:transparent;
  border-color:rgba(14,36,64,.28);
  color:#0e2440;
  -webkit-text-fill-color:#0e2440;
}

main .pcta-ghost:hover{
  background:rgba(255,126,0,.10);
  border-color:rgba(255,126,0,.6);
}

main .pcta-ghost::after{ display:none; }


/* ============================================================
   Certificazioni nel footer
   Due badge di proporzioni opposte: l'ISO e' orizzontale (1,27:1),
   lo IAS verticale (0,67:1). Allinearli per larghezza li lasciava
   con altezze molto diverse (131 px contro 236) e allungava tutta
   la colonna: qui comanda l'altezza, uguale per entrambi, e la
   larghezza segue la proporzione del marchio.
   ============================================================ */
.footer-certifications{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.footer-certification-badge{
  display:block;
  height:68px;
  width:auto;
  max-width:none;   /* il tetto in larghezza schiacciava il badge */
  padding:8px 10px;
  border-radius:6px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  object-fit:contain;
}

@media(max-width:760px){
  .footer-certification-badge{ height:58px; }
}


/* ============================================================
   Pagina legale (privacy.html)
   Testo lungo da leggere, non da scorrere: colonna stretta,
   interlinea alta e gerarchia marcata fra i paragrafi.
   ============================================================ */
/* Nessun padding-top qui: quello di .block tiene gia' conto dell'header
   fisso (86px). Sovrascriverlo faceva finire l'occhiello sotto la barra. */
.legal-page{
  padding-bottom:clamp(46px,5vw,74px);
}

.legal-head{
  max-width:760px;
  margin-bottom:clamp(28px,3.4vw,44px);
}

/* I link dentro il testo devono distinguersi: qui la pagina e' su fondo
   navy e senza sottolineatura sparirebbero nel corpo del paragrafo. */
.legal-body a,
.legal-head a{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal-body a:hover,
.legal-head a:hover{
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.legal-head h1{
  margin:14px 0 18px;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.1;
}

.legal-date{
  margin-top:14px;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:14px;
  font-weight:650;
}

.legal-body{
  max-width:760px;   /* ~90 caratteri per riga: oltre, la lettura cala */
}

.legal-body h2{
  margin:clamp(30px,3vw,42px) 0 12px;
  font-size:clamp(19px,1.7vw,23px);
  line-height:1.2;
}

.legal-body h3{
  margin:24px 0 8px;
  font-size:16px;
  line-height:1.3;
}

.legal-body p{
  margin:0 0 14px;
  line-height:1.7;
}

.legal-list{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.legal-list li{
  position:relative;
  padding-left:20px;
  line-height:1.65;
}

.legal-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

/* I segnaposto da compilare prima della pubblicazione: devono essere
   impossibili da non vedere, sia a schermo sia in stampa. */
.legal-todo{
  padding:12px 16px;
  border-left:3px solid var(--orange);
  border-radius:0 8px 8px 0;
  background:rgba(255,126,0,.10);
  font-size:14.5px;
}

/* Il consenso del modulo contatti rimanda all'informativa: senza il
   collegamento il consenso non e' informato. */
.form-consent a{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
  text-decoration:underline;
  text-underline-offset:2px;
}

.footer-legal{
  margin-top:6px;
}

.footer-legal a,
.footer-legal .footer-prefs{
  color:#7f91aa;
  -webkit-text-fill-color:#7f91aa;
  font-size:14px;
}

/* "Preferenze cookie" e' un bottone perche' apre un pannello, non porta a
   una pagina: qui gli si toglie l'aspetto da bottone per allinearlo agli
   altri due collegamenti. */
.footer-legal .footer-prefs{
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
}

.footer-legal .footer-prefs:hover{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

/* Il testo dell'embed Iubenda ha una sua tipografia: qui la si avvicina a
   quella del sito senza combattere con le sue regole interne. */
.legal-body .iub_content,
.legal-body #iubenda_policy{
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  font-size:15.5px;
  line-height:1.7;
}

.legal-altro{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line-dark);
}

/* Il testo della policy ha 18 titoli: alle dimensioni del sito, pensate per
   pagine con due o tre titoli, il documento diventerebbe illeggibile. */
.legal-embed-title{
  margin:0 0 18px;
  font-size:clamp(21px,2vw,26px);
  line-height:1.15;
}

.legal-body #iubenda_policy h2,
.legal-body .iub_content h2{
  margin:30px 0 10px;
  font-size:19px;
  line-height:1.25;
}

.legal-body #iubenda_policy h3,
.legal-body .iub_content h3{
  margin:20px 0 8px;
  font-size:16px;
}

.legal-body #iubenda_policy li,
.legal-body .iub_content li{
  line-height:1.65;
}

.footer-legal a:hover{
  color:var(--orange-2);
  -webkit-text-fill-color:var(--orange-2);
}

/* ============================================================
   Responsive hardening globale
   Ultimo layer del foglio: compatta navigazione, testi e moduli su mobile
   senza modificare la gerarchia desktop gia' approvata.
   ============================================================ */
@media(max-width:980px){
  .topbar,
  .topbar nav{
    height:76px;
  }

  .topbar nav{
    gap:14px;
  }

  .logo-mark img{
    height:44px;
  }

  .menu{
    display:none;
  }

  .hrev-mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
  }

  .hrev-mobile-toggle span,
  .hrev-mobile-toggle span::before,
  .hrev-mobile-toggle span::after{
    display:block;
    width:20px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform var(--enk-dur) var(--enk-ease),opacity var(--enk-dur) var(--enk-ease);
  }

  .hrev-mobile-toggle span{
    position:relative;
  }

  .hrev-mobile-toggle span::before,
  .hrev-mobile-toggle span::after{
    content:"";
    position:absolute;
    left:0;
  }

  .hrev-mobile-toggle span::before{ top:-7px; }
  .hrev-mobile-toggle span::after{ top:7px; }

  body.hrev-menu-open{
    overflow:hidden;
  }

  body.hrev-menu-open .hrev-mobile-toggle span{
    background:transparent;
  }

  body.hrev-menu-open .hrev-mobile-toggle span::before{
    transform:translateY(7px) rotate(45deg);
  }

  body.hrev-menu-open .hrev-mobile-toggle span::after{
    transform:translateY(-7px) rotate(-45deg);
  }

  .hrev-mobile-panel{
    left:18px;
    right:18px;
    top:84px;
    max-height:calc(100svh - 102px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .hrev-mobile-panel a{
    min-height:44px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .hrev-mobile-panel a:last-child{
    border-bottom:0;
  }

  .home-linkedin-float{
    display:none;
  }
}

@media(max-width:760px){
  html{
    scroll-padding-top:76px;
  }

  .wrap,
  .home-premium .wrap,
  .home-premium .home-grid,
  .home-premium .home-copy,
  .home-premium .home-head,
  .home-premium .home-grid-head{
    width:min(100% - 32px,1386px);
    max-width:calc(100vw - 32px);
  }

  section,
  .block,
  .home-section,
  .phero,
  .hero,
  .pio,
  .mob,
  .ai-sec,
  .appro,
  .clients,
  .contact-section,
  .journal-page{
    padding:58px 0;
  }

  .phero,
  .hero,
  .home-hero,
  .success-premium,
  .partners-page,
  .legal-page{
    padding-top:108px;
  }

  h1,
  .phero h1,
  .hero h1,
  .home-copy h1,
  .clients-head h1,
  .contact-hero h1,
  .journal-hero h1,
  .about-head h1{
    max-width:100%;
    font-size:clamp(30px,9.2vw,42px);
    line-height:1.06;
    overflow-wrap:break-word;
  }

  .sec-head h2,
  .home-head h2,
  .home-grid-head h2,
  .clients-head h2,
  .contact-hero h2,
  .journal-hero h2,
  .mob h2,
  .ai-sec h2,
  .appro h2,
  .pio h2,
  .cta-band h2,
  .success-section-head h2{
    max-width:100%;
    font-size:clamp(28px,8vw,36px);
    line-height:1.08;
    overflow-wrap:break-word;
  }

  p,
  li,
  .lead,
  .sub,
  .sec-head p,
  .home-head p,
  .home-grid-head p,
  .clients-lead,
  .contact-intro,
  .journal-lead,
  .phero p,
  .hero p,
  .home-copy p{
    max-width:100%;
    font-size:17px;
    line-height:1.52;
  }

  .eyebrow,
  .k,
  .sector,
  .journal-kicker,
  .clients-kicker,
  .contact-kicker,
  .stats-eyebrow{
    font-size:11px;
    line-height:1.35;
    letter-spacing:.22em;
  }

  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-amber,
  .contact-link,
  .form-submit,
  .band-cta,
  .pcta,
  .go,
  .rd,
  .nav-cta{
    width:100%;
    min-height:46px;
    padding:0 14px;
    text-align:center;
  }

  .pillars,
  .cap-grid,
  .fmts,
  .prods,
  .stories,
  .logo-row,
  .client-metrics,
  .wc-grid,
  .journal-grid,
  .case-grid,
  .client-logo-grid,
  .success-grid,
  .form-grid,
  .contact-grid,
  .contact-side,
  .cert-list,
  .about-cert-list{
    grid-template-columns:1fr;
  }

  .hero-grid,
  .home-grid,
  .ai-grid,
  .client-showcase,
  .story-feat,
  .mob .wrap,
  .partners-hero,
  .success-hero,
  .success-section-head,
  .contact-premium-layout,
  .cert-board,
  .about-intro,
  .about-strength-grid,
  .about-value,
  .about-certifications{
    grid-template-columns:1fr;
    gap:28px;
  }

  .home-business-section .bmap,
  .bmap,
  .bmap-cells,
  .bmap-right,
  .home-business-section .bmap-cells,
  .home-business-section .bmap-right{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .counter-grid,
  .home-inline-stats .counter-grid,
  .hero-stats .counter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 0;
  }

  .ct,
  .home-inline-stats .ct,
  .hero-stats .ct{
    padding:0 8px;
    border-right:0;
  }

  .ct-n,
  .hero-stats .ct-n{
    min-height:42px;
    font-size:30px;
  }

  .ct-l,
  .hero-stats .ct-l{
    font-size:12px;
  }

  main :is(article,form,[class$="-card"],[class*="-card "],[class*=" card"],.card,
           .home-card,.pillar,.cap,.fmt,.prod,.story,.wc,.aip,.pio-n,.door,.cslide,
           .case,.client-metric,.client-logo,.client-proof-card,.contact-card,
           .contact-form,.sf-res,.mob-card,.mcp,.phone,.ai-band,.intl,.cl-note,
           .cta-band,.bmap-sap,.bmap-cell,.bmap-tile,.about-panel,.about-value,
           .about-certifications,.product-hero-card,.success-featured-panel,
           .contact-form-primary,.cert-board){
    min-width:0;
    max-width:100%;
    padding:24px 20px;
    border-radius:12px;
  }

  .ai-band,
  .form-actions,
  .prod .body .prod-actions,
  .product-hero-actions{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .scene,
  .mcp,
  .phone,
  .arch-scene,
  .case-shot{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .scene svg,
  .mcp svg,
  .arch-scene svg{
    width:100%;
    height:auto;
    display:block;
  }

  .pio-tl{
    padding:18px;
    overflow-x:auto;
  }

  .pio-nodes,
  .pio-nodes.pio-nodes-auto{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:1fr;
  }

  .pio-line,
  .tl-line{
    display:none;
  }

  .home-marquee,
  .clients-marquee{
    max-width:100%;
  }

  .footer-wrap,
  .footer-bottom{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    gap:12px;
  }
}

@media(max-width:420px){
  .wrap,
  .home-premium .wrap,
  .home-premium .home-grid,
  .home-premium .home-copy,
  .home-premium .home-head,
  .home-premium .home-grid-head{
    width:min(100% - 24px,1386px);
    max-width:calc(100vw - 24px);
  }

  .hrev-mobile-panel{
    left:12px;
    right:12px;
  }

  h1,
  .phero h1,
  .hero h1,
  .home-copy h1,
  .clients-head h1,
  .contact-hero h1,
  .journal-hero h1,
  .about-head h1{
    font-size:29px;
  }

  .sec-head h2,
  .home-head h2,
  .home-grid-head h2,
  .clients-head h2,
  .contact-hero h2,
  .journal-hero h2,
  .mob h2,
  .ai-sec h2,
  .appro h2,
  .pio h2,
  .cta-band h2,
  .success-section-head h2{
    font-size:27px;
  }

  .counter-grid,
  .home-inline-stats .counter-grid,
  .hero-stats .counter-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-certification-badge{
    height:52px;
  }
}


/* Didascalia sotto le schermate di prodotto: spiega cosa guardare
   nell'immagine, che a questa scala non si legge da sola. */
.case-shot .shot-note{
  max-width:820px;
  margin:12px auto 0;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
  font-size:14.5px;
  line-height:1.55;
  text-align:center;
}


/* ============================================================
   Moduli annunciati ma non ancora disponibili (card prodotto)
   Il bordo tratteggiato e' la convenzione per "non c'e' ancora":
   distingue a colpo d'occhio queste voci dalle funzionalita'
   dell'elenco sopra, senza bisogno di leggere l'etichetta.
   ============================================================ */
.prod-soon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:12px 14px;
  border:1px dashed rgba(14,36,64,.26);
  border-radius:10px;
  background:rgba(14,36,64,.03);
}

.prod-soon-label{
  font-family:var(--display);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  -webkit-text-fill-color:var(--steel);
}

.prod-soon-item{
  padding:4px 11px;
  border:1px dashed rgba(14,36,64,.3);
  border-radius:999px;
  font-family:var(--display);
  font-size:12.5px;
  font-weight:800;
  color:#41597a;
  -webkit-text-fill-color:#41597a;
}


/* ============================================================
   Prima slide di storie.html sotto l'header fisso
   In modalita' slide le sezioni passano a 64px di padding, ma
   l'header ne occupa 86: sulla prima slide l'occhiello finiva
   coperto. Esisteva gia' un padding-top:150px su .success-premium
   che pero' non vinceva, perche' la regola delle slide
   (html.enkeli-slide-snap main > section) ha specificita' maggiore.
   Qui il selettore e' abbastanza specifico da batterla, e vale solo
   per la prima sezione: alle altre ci si arriva scrollando, e li' e'
   scroll-padding-top a tenere conto dell'header.
   ============================================================ */
@media(min-width:981px) and (prefers-reduced-motion:no-preference){
  html.enkeli-slide-snap main > section.success-premium:first-child{
    padding-top:112px;
  }
}


/* ============================================================
   Striscia clienti sotto i numeri (home)
   Il rientro a sinistra allinea il primo logo al testo dentro la
   card dei numeri, che ha 28px di padding: prima le due griglie
   non coincidevano. Tutta la striscia e' un link alla pagina clienti.
   ============================================================ */
.home-clients-strip{
  display:flex;
  align-items:center;
  gap:22px;
  max-width:980px;
  margin-top:18px;
  padding-left:28px;
  text-decoration:none;
}


/* min-width:0 e' necessario: senza, il flex item non si restringe
   sotto la larghezza del contenuto e la striscia sfora il contenitore. */
.home-clients-strip .home-marquee{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  margin-top:0;
  /* Dissolvenza in pixel, non in percentuale, cosi' non cambia con la
     larghezza. A sinistra e' la piu' ampia: e' il lato da cui i loghi
     escono, e senza spazio sufficiente un marchio mezzo dissolto finisce
     a ridosso dell'etichetta e sembra un errore di rendering invece che
     un'uscita di scena. */
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent);
}


@media(max-width:680px){
  .home-clients-strip{
    padding-left:20px;
  }
}


/* ============================================================
   Titolo della pagina Prodotti
   E' il piu' lungo del sito (86 caratteri contro i 20-40 delle
   altre pagine) e alla scala comune occupava sei righe. Ridotto
   solo qui: #prodotti esiste unicamente in quella pagina, quindi
   le altre hero restano alla dimensione di sempre.
   ============================================================ */
#prodotti h1{
  font-size:clamp(42px,4.9vw,70px);
}


/* ============================================================
   Logo wall dei clienti: nessuna reazione al passaggio del mouse
   Le tessere ereditavano il sollevamento comune a tutte le card,
   ma non sono cliccabili: un elemento che si alza promette un
   click che non arriva. Qui l'hover non cambia nulla, quindi non
   promette nulla. La striscia scorrevole in home resta cliccabile
   e mantiene il suo feedback: la' il click c'e' davvero.
   ============================================================ */
main .client-logo{
  transition:none;
}

main .client-logo:hover{
  transform:none;
  box-shadow:var(--premium-card-shadow);
}