/* ============================================================
   CONNECTION — Design System stylesheet (CODE01 OPERATIVO)
   Shared across all marketing-site pages.
   Vocabulary mirrors the homepage 1:1 so the WordPress/Elementor
   build can map sections directly.
   ============================================================ */

/* ---- Self-hosted fonts (test font DS — Hurme Geometric Sans 4 + JetBrains Mono) ---- */
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_Light.otf") format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4.otf") format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_Oblique.otf") format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_SemiBold.otf") format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_Bold.otf") format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_BoldOblique.otf") format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 4';src:url("../fonts/HurmeGeometricSans4_Black.otf") format('opentype');font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format('truetype');font-weight:100 800;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  --bg:#0E1014; --bg-2:#12151A; --panel:#171B21; --panel-2:#1D222A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13);
  --tx:#E8EBF0; --tx-mut:#98A2B0; --tx-dim:#6B7585;
  --acc:#EB6726; --acc-2:#FF8A4C; --acc-soft:rgba(235,103,38,.15);
  --success:#3ED598; --warning:#F7B545;
  --rad:14px; --rad-2xl:24px; --max:1200px;
  --sans:'Hurme Geometric Sans 4',system-ui,sans-serif; --disp:'Hurme Geometric Sans 4',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.05;letter-spacing:-.02em;font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.acc{color:var(--acc-2)}

/* ---- placeholder marker (for user-supplied copy) ---- */
.ph{color:var(--tx-dim);border-bottom:1px dashed var(--line-2)}
[data-placeholder]{position:relative}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(14,16,20,.72);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;gap:40px;height:72px}
.logo{display:flex;align-items:center;gap:11px}
.logoimg{height:25px;width:auto;display:block}
.navlinks{display:flex;gap:30px;font-size:14.5px;color:var(--tx-mut);font-weight:500}
.navlinks a{transition:color .16s}
.navlinks a:hover,.navlinks a.on{color:var(--tx)}
.navcta{margin-left:auto;display:flex;align-items:center;gap:18px}
.ghost{font-size:14.5px;font-weight:600;color:var(--tx-mut)}
.ghost:hover{color:var(--tx)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:10px;background:var(--acc);color:#fff;border:1px solid transparent;transition:.16s;cursor:pointer}
.btn:hover{background:var(--acc-2);transform:translateY(-1px)}
.btn.sec{background:transparent;border-color:var(--line-2);color:var(--tx)}
.btn.sec:hover{background:var(--panel);border-color:var(--tx-dim)}
.btn.lg{padding:14px 26px;font-size:15.5px}

/* ---- generic page header (interior pages) ---- */
.phead{position:relative;padding:84px 0 56px;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 50% -20%,rgba(235,103,38,.16),transparent 70%);pointer-events:none}
.phead.tight{padding:72px 0 40px}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:54px 54px;mask:radial-gradient(700px 460px at 50% 0,#000,transparent 75%);opacity:.5}
.eyebrow{color:var(--acc-2);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.phead h1{font-size:54px;font-weight:800;margin-top:16px;max-width:780px;position:relative}
.phead p.sub{font-size:19px;color:var(--tx-mut);max-width:1080px;line-height:1.6;margin-top:20px;position:relative;text-wrap:pretty}
.phead p.sub.ph + p.sub,
.phead p.sub.ph p{margin-top:14px}
.phead.center{text-align:center}
.phead.center h1,.phead.center p.sub{margin-left:auto;margin-right:auto}
.crumbs{position:relative;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-dim);margin-bottom:6px}
.crumbs a:hover{color:var(--acc-2)}
.crumbs .sep{opacity:.5}

/* ---- pill ---- */
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--line-2);border-radius:100px;background:var(--panel);font-size:13px;color:var(--tx-mut);position:relative}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(62,213,152,.2)}

/* ---- hero (home) ---- */
.hero{position:relative;padding:96px 0 70px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 360px at 50% -8%,rgba(235,103,38,.20),transparent 70%);pointer-events:none}
h1.head{font-size:62px;font-weight:800;margin:26px auto 0;max-width:880px;position:relative}
.hero p.sub{font-size:19px;color:var(--tx-mut);max-width:620px;margin:22px auto 0;position:relative}
.hero .cta{display:flex;gap:14px;justify-content:center;margin-top:34px;position:relative}
.trustline{margin-top:30px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;color:var(--tx-dim);position:relative}
.trustline span{display:flex;align-items:center;gap:8px;font-size:13.5px}
.trustline svg{width:15px;height:15px;stroke:var(--acc-2)}

/* ---- dashboard / browser mock ---- */
.mock{position:relative;margin:58px auto 0;max-width:1080px;border:1px solid var(--line-2);border-radius:16px;background:var(--panel);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
.mock .bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.mock .bar .dots{display:flex;gap:7px}
.mock .bar .dots i{width:11px;height:11px;border-radius:50%;background:#2C323B}
.mock .bar .dots i:nth-child(1){background:#d9534f}  /* rosso */
.mock .bar .dots i:nth-child(2){background:#f0ad4e}  /* giallo */
.mock .bar .dots i:nth-child(3){background:#5cb85c}  /* verde */
.mock .bar .url{margin-left:14px;font-family:var(--mono);font-size:11.5px;color:var(--tx-dim);background:var(--bg);padding:5px 12px;border-radius:7px;border:1px solid var(--line)}
.app{display:grid;grid-template-columns:198px 1fr;min-height:430px}
.side{border-right:1px solid var(--line);padding:16px 12px;background:var(--bg-2)}
.side .who{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;margin-bottom:14px}
.av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc-2));flex:none}
.side .who small{display:block;color:var(--tx-dim);font-size:11px}
.side .who b{font-size:13px;font-weight:600}
.nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--tx-mut);font-size:13px;font-weight:500;margin-bottom:2px;cursor:pointer}
button.nav-i{width:100%;text-align:left;background:transparent;border:0;font-family:inherit;line-height:1.2}
.nav-i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.nav-i.on{background:var(--acc-soft);color:var(--acc-2)}
.nav-i:hover:not(.on){background:var(--panel-2);color:var(--tx)}
.main{padding:20px 22px;background:var(--panel)}
/* ---- hero screenshot frame (sidebar buttons swap the shot) ---- */
.main.shotmain{padding:0;background:var(--bg-2);position:relative}
.shotframe{position:relative;width:100%;height:100%;min-height:430px;display:grid;place-items:center;overflow:hidden}
.shotimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.shotph{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:30px;color:var(--tx-dim)}
.shotph .mono{color:var(--acc-2)}
.shotph .glyph{width:46px;height:46px;border-radius:11px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc-2);margin-bottom:4px}
.shotph .glyph svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8}
.shotph b{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--tx)}
.shotph small{font-size:12.5px;max-width:260px;line-height:1.5}
.main .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.main .top h4{font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.stat{border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:var(--bg-2)}
.stat .k{font-family:var(--mono);font-size:10.5px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.07em}
.stat .v{font-family:var(--disp);font-size:24px;font-weight:700;margin-top:5px}
.stat .v em{font-style:normal;font-size:13px;color:var(--success);margin-left:6px;font-family:var(--sans);font-weight:600}
.tbl{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg-2)}
.trow{display:grid;grid-template-columns:1.4fr 1fr .8fr .9fr;gap:10px;padding:11px 14px;font-size:12.5px;border-bottom:1px solid var(--line);align-items:center}
.trow.h{color:var(--tx-dim);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.trow:last-child{border-bottom:0}
.tag{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:600;display:inline-block}
.tag.ok{background:rgba(62,213,152,.14);color:var(--success)}
.tag.wait{background:rgba(247,181,69,.14);color:var(--warning)}
.tag.no{background:rgba(255,255,255,.07);color:var(--tx-mut)}

/* ---- KPI strip ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);padding:30px 0}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.kpi{text-align:center;flex:1;min-width:150px}
.kpi b{font-family:var(--disp);font-size:38px;font-weight:800;color:var(--acc-2)}
.kpi span{display:block;color:var(--tx-mut);font-size:13.5px;margin-top:4px}

/* ---- sections ---- */
section.blk{padding:96px 0}
.h2{font-size:42px;font-weight:800;margin-top:14px;max-width:640px}
.lead{color:var(--tx-mut);font-size:18px;max-width:560px;margin-top:16px}
.sec-head{margin-bottom:46px}
.sec-head.center{text-align:center}
.sec-head.center .h2,.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* ---- module grid ---- */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* ---- Moduli collegati: scroller orizzontale (solo .mods.mods-scroll; la .mods normale resta a 3 colonne) ---- */
.mods.mods-scroll{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding-bottom:14px;margin-inline:-2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.mods.mods-scroll .mod{flex:0 0 320px;max-width:320px;scroll-snap-align:start}
.mods.mods-scroll::-webkit-scrollbar{height:10px}
.mods.mods-scroll::-webkit-scrollbar-track{background:var(--bg);border-radius:99px}
.mods.mods-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--bg)}
.mods.mods-scroll::-webkit-scrollbar-thumb:hover{background:var(--acc-2)}
@media(max-width:560px){.mods.mods-scroll{grid-template-columns:none}.mods.mods-scroll .mod{flex-basis:80%;max-width:80%}}
/* ---- "Lo stack che lavora insieme" (settore): pannello contenuto, non fascia full-bleed ---- */
.related-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--rad-2xl);padding:64px 32px}
.related-panel .mods.mods-scroll{margin-inline:0}/* card dentro al riquadro: niente margine negativo */
.mod{border:1px solid var(--line);border-radius:var(--rad);background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:24px;transition:.18s;position:relative;overflow:hidden;display:block}
.mod:hover{border-color:var(--line-2);transform:translateY(-3px)}
.mod:hover .ic{background:var(--acc);color:#fff}
.ic{width:42px;height:42px;border-radius:11px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc-2);margin-bottom:16px;transition:.18s}
.ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8}
.mod h3{font-size:18px;margin-bottom:8px;font-weight:600;font-family:var(--disp)}
.mod p{color:var(--tx-mut);font-size:14.5px}
.mod .arr{position:absolute;top:24px;right:24px;color:var(--tx-dim);opacity:0;transition:.18s}
.mod:hover .arr{opacity:1;color:var(--acc-2)}

/* ---- feature rows ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:90px}
.frow:last-child{margin-bottom:0}
.frow.rev .ftext{order:2}
.ftext h3{font-size:30px;font-weight:700;margin:14px 0 16px}
.ftext p{color:var(--tx-mut);font-size:16px}
.flist{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.flist div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--tx)}
.flist svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--acc-2);fill:none;stroke-width:2}
.fvis{border:1px solid var(--line-2);border-radius:14px;background:var(--panel);padding:18px}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);color:var(--acc-2);font-size:13px;position:absolute;top:-11px;background:var(--bg);padding-right:10px}
.step h4{font-size:19px;margin:8px 0 8px;font-family:var(--disp)}
.step p{color:var(--tx-mut);font-size:14.5px}

/* ---- sectors ---- */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sect{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--bg-2);transition:.18s}
.sect:hover{border-color:var(--acc);background:var(--panel)}
.sect .mono{color:var(--tx-dim);margin-bottom:14px}
.sect b{font-family:var(--disp);font-size:18px;font-weight:600;display:block}
.sect p{color:var(--tx-mut);font-size:13.5px;margin-top:7px}

/* ---- quote ---- */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote p{font-family:var(--disp);font-size:30px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.quote p::before{content:"\201C";color:var(--acc-2)}
.quote p::after{content:"\201D";color:var(--acc-2)}
.quote .by{margin-top:24px;color:var(--tx-mut);font-size:14.5px}
.quote .by b{color:var(--tx)}

/* ---- cta band ---- */
.ctaband{position:relative;border:1px solid var(--line-2);border-radius:22px;background:linear-gradient(135deg,#141923,#0E1014);overflow:hidden;padding:64px 48px;text-align:center}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 50% 120%,rgba(235,103,38,.32),transparent 70%)}
.ctaband h2{font-size:42px;font-weight:800;position:relative}
.ctaband p{color:var(--tx-mut);font-size:18px;margin:16px auto 30px;max-width:520px;position:relative}
.ctaband .cta{display:flex;gap:14px;justify-content:center;position:relative}

/* ---- map ---- */
.mapblk{padding:0}
.mapblk .map{display:block;width:100%;height:480px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 30px;margin-top:96px}
.fgrid{display:grid;grid-template-columns:1fr 1.1fr auto auto;gap:60px;margin-bottom:40px}
.fcol h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx-dim);margin-bottom:16px}
.fcol a{display:block;color:var(--tx-mut);font-size:14px;margin-bottom:10px;transition:color .16s}
.fcol a:hover{color:var(--tx)}
.fcol.brand p{color:var(--tx-mut);font-size:14px;margin-top:14px;max-width:260px}
.fcol.legal p.finfo{color:var(--tx-dim);font-size:12.5px;line-height:1.7;margin:0;max-width:280px}
.fcol.legal h5{margin-bottom:16px}
.fbot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;color:var(--tx-dim);font-size:13px;flex-wrap:wrap;gap:10px}

/* ============================================================
   EXTENSIONS for interior pages (same vocabulary, new patterns)
   ============================================================ */

/* ---- prose / docs body ---- */
.prose{color:var(--tx-mut);font-size:16px;line-height:1.7;max-width:720px}
.prose h2{font-size:28px;color:var(--tx);margin:40px 0 14px}
.prose h3{font-size:20px;color:var(--tx);font-weight:600;margin:28px 0 10px}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--acc-2)}
.prose a{color:var(--acc-2);border-bottom:1px solid var(--line-2)}
.prose code{font-family:var(--mono);font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--tx)}
.prose strong{color:var(--tx)}

/* ---- docs two-column layout ---- */
.docs{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.docnav{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--rad);background:var(--bg-2);padding:18px}
.docnav .grp{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-dim);margin:18px 0 10px}
.docnav .grp:first-child{margin-top:0}
.docnav a{display:block;color:var(--tx-mut);font-size:14px;padding:6px 10px;border-radius:8px;margin-bottom:2px;transition:.16s}
.docnav a:hover{background:var(--panel-2);color:var(--tx)}
.docnav a.on{background:var(--acc-soft);color:var(--acc-2);font-weight:600}

/* ---- search box ---- */
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);padding:12px 16px;max-width:560px}
.search svg{width:18px;height:18px;stroke:var(--tx-dim);fill:none;stroke-width:2;flex:none}
.search input{background:transparent;border:0;outline:0;color:var(--tx);font-family:var(--sans);font-size:15px;width:100%}
.search input::placeholder{color:var(--tx-dim)}
.search kbd{font-family:var(--mono);font-size:11px;color:var(--tx-dim);border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--bg)}

/* ---- doc card grid (wiki articles) ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dcard{border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);padding:22px;transition:.18s;display:block}
.dcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.dcard .mono{color:var(--acc-2);margin-bottom:12px}
.dcard h3{font-size:17px;font-weight:600;font-family:var(--disp);margin-bottom:8px}
.dcard p{color:var(--tx-mut);font-size:14px}
.dcard .meta{margin-top:16px;display:flex;gap:8px;align-items:center;color:var(--tx-dim);font-size:12.5px}

/* ---- pricing ---- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.price{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:32px 28px;display:flex;flex-direction:column;position:relative}
.price.feat{border-color:var(--acc);box-shadow:0 30px 70px -40px rgba(235,103,38,.5)}
.price .badge{position:absolute;top:-11px;left:28px;background:var(--acc);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.price .tier{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim)}
.price .amt{font-family:var(--disp);font-size:46px;font-weight:800;margin:14px 0 2px;display:flex;align-items:baseline;gap:6px}
.price .amt .per{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--tx-dim)}
.price .desc{color:var(--tx-mut);font-size:14px;min-height:42px}
.price .plist{margin:22px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.price .plist div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tx)}
.price .plist svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--acc-2);fill:none;stroke-width:2}
.price .plist div.off{color:var(--tx-dim)}
.price .plist div.off svg{stroke:var(--tx-dim)}
.price .btn{justify-content:center;width:100%}

/* ---- comparison table ---- */
.ctable{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.ctable th,.ctable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.ctable thead th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-dim);background:var(--bg-2)}
.ctable td.c,.ctable th.c{text-align:center}
.ctable tbody tr:hover{background:var(--panel)}
.ctable td.feat-name{color:var(--tx);font-weight:500}
.ctable svg.yes{width:18px;height:18px;stroke:var(--success);fill:none;stroke-width:2.2}
.ctable .dash{color:var(--tx-dim)}

/* ---- forms ---- */
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label,.fl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-dim)}
.field label .req{color:var(--acc-2)}
.field input,.field select,.field textarea{background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:13px 15px;color:var(--tx);font-family:var(--sans);font-size:15px;transition:.16s;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-dim)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7585' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 15px center}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--tx-mut);line-height:1.5}
.check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--acc)}
.check a{color:var(--acc-2)}
.formcard{border:1px solid var(--line-2);border-radius:18px;background:var(--panel);padding:36px}

/* ---- info aside (contact / demo) ---- */
.infolist{display:flex;flex-direction:column;gap:24px}
.infoitem{display:flex;gap:14px;align-items:flex-start}
.infoitem .ic{width:42px;height:42px;margin-bottom:0;flex:none}
.infoitem h4{font-size:15px;font-family:var(--disp);font-weight:600;margin-bottom:4px}
.infoitem p{color:var(--tx-mut);font-size:14px}
.infoitem a{color:var(--acc-2)}

/* ---- accordion (FAQ) ---- */
.acc-list{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;background:transparent;border:0;color:var(--tx);font-family:var(--disp);font-size:18px;font-weight:600;text-align:left;cursor:pointer}
.acc-q .pm{flex:none;width:22px;height:22px;position:relative;transition:.2s}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:var(--acc-2);border-radius:2px}
.acc-q .pm::before{top:10px;left:2px;right:2px;height:2px}
.acc-q .pm::after{left:10px;top:2px;bottom:2px;width:2px;transition:.2s}
.acc-item.open .pm::after{transform:scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.acc-a .inner{padding:0 4px 22px;color:var(--tx-mut);font-size:15px;max-width:760px}

/* ---- team grid (chi siamo) ---- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.member{border:1px solid var(--line);border-radius:var(--rad);background:var(--bg-2);padding:22px;text-align:center}
.member .ava{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--acc),var(--acc-2));margin:0 auto 14px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;color:#fff;font-size:22px}
.member b{font-family:var(--disp);font-size:16px;font-weight:600;display:block}
.member span{color:var(--tx-dim);font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;display:block}

/* ---- value / timeline (chi siamo) ---- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value{border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);padding:24px}
.value .ic{margin-bottom:14px}
.value h4{font-size:17px;font-family:var(--disp);font-weight:600;margin-bottom:8px}
.value p{color:var(--tx-mut);font-size:14px}

/* ---- generic 2-col split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.aside{grid-template-columns:1.5fr 1fr;align-items:start}

/* ---- compact module index (Moduli overview) ---- */
.modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mcard{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:14px 16px;transition:transform .16s,border-color .16s;position:relative}
.mcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.mcard:hover .ic{background:var(--acc);color:#fff}
.mcard .ic{width:36px;height:36px;border-radius:10px;margin:0;flex:none}
.mcard .ic svg{width:18px;height:18px}
.mcard b{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--tx)}
.mcard .arr{position:static;margin-left:auto;opacity:0;color:var(--acc-2);transition:opacity .16s}
.mcard:hover .arr{opacity:1}

/* ---- sector index (Settori overview, grouped) ---- */
.secgroup{margin-bottom:48px}
.secgroup:last-child{margin-bottom:0}
.secgroup-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.secgroup-h .num{font-family:var(--mono);font-size:12px;color:var(--acc-2)}
.secgroup-h h3{font-family:var(--disp);font-size:22px;font-weight:700}
.secgroup-h .rule{flex:1;height:1px;background:var(--line)}
.secgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.scard{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:14px 16px;transition:transform .16s,border-color .16s,background .16s;position:relative}
.scard:hover{border-color:var(--acc);background:var(--panel);transform:translateY(-2px)}
.scard .dot{width:7px;height:7px;border-radius:50%;background:var(--acc-2);flex:none}
.scard b{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--tx)}
@media(max-width:960px){.modgrid,.secgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.modgrid,.secgrid{grid-template-columns:1fr}}

/* ---- responsive ---- */
@media(max-width:920px){
  .mods,.steps,.sectors,.cards,.prices,.values,.team{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px 60px}
  .frow,.frow.rev,.split,.docs{grid-template-columns:1fr}
  .frow.rev .ftext{order:0}
  .docnav{position:static}
  .app{grid-template-columns:1fr}
  .side{
    border-right:0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 12px;
    scrollbar-width:none;          /* Firefox */
    -webkit-overflow-scrolling:touch;
  }
  .side::-webkit-scrollbar{display:none}   /* WebKit */
  .side .who{display:none}          /* nasconde l'header "chi sono" della sidebar */
  .side .nav-i{margin-bottom:0;flex:none;white-space:nowrap}
  button.nav-i{width:auto}
  .shotframe{min-height:0;height:auto;aspect-ratio:16/10}
  h1.head{font-size:44px}
  .phead h1{font-size:38px}
  .h2,.ctaband h2{font-size:32px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .mods,.steps,.sectors,.cards,.prices,.values,.team,.field.row2,.fgrid{grid-template-columns:1fr}
  .trustline{gap:14px}
}

/* ============================================================
   SITE NAV v2 — mega menu (Moduli / Settori), responsive,
   logo lockup → C mark. Injected by assets/site.js.
   ============================================================ */
:root{ --shadow-ambient:0 40px 120px -40px rgba(0,0,0,.7); --ease:cubic-bezier(.4,0,.2,1); --dur:170ms; }

.site-nav{position:sticky;top:0;z-index:60}
.site-nav .navin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center}
.logo-lockup{height:46px;width:auto;display:block}
.logo-mark{height:52px;width:auto;display:none}

.navmenu{display:contents}
.navlinks{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;justify-self:center}
.navlinks>li{list-style:none;position:static}
.navlinks>li>a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--tx-mut);padding:10px 14px;border-radius:9px;transition:color .16s,background .16s;cursor:pointer}
.navlinks>li>a:hover,.navlinks>li>a.on{color:var(--tx)}
.has-mega>a .caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .18s,opacity .18s}
.has-mega:hover>a .caret{transform:rotate(225deg) translateY(1px);opacity:1}
.nav-demo{justify-self:end}
.nav-toggle{display:none;justify-self:end;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);color:var(--tx);align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

/* mega panel (desktop: hover dropdown) */
.mega{position:absolute;left:0;right:0;top:100%;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(--ease) 120ms,transform .16s var(--ease) 120ms,visibility .16s 120ms;pointer-events:none;z-index:70}
/* invisible hover bridge: spans the ~17px nav dead-zone between the label and the
   floating panel, so moving the cursor from "Moduli/Settori" down to a submenu item
   keeps .has-mega:hover alive and the panel doesn't close mid-move. */
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.mega-inner{max-width:var(--max);margin:8px auto 0;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:26px 30px;box-shadow:var(--shadow-ambient);position:relative;overflow:hidden}
.mega-inner::before{content:"";position:absolute;top:-70px;left:50%;width:380px;height:180px;transform:translateX(-50%);background:radial-gradient(circle,rgba(235,103,38,.18),transparent 65%);pointer-events:none}
.mega-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.mega-head .mono{color:var(--tx-dim)}
.mega-head a.all{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--acc-2)}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 16px;position:relative}
.mega-cols a{display:block;font-size:13.5px;color:var(--tx-mut);padding:8px 10px;border-radius:8px;transition:.14s}
.mega-cols a:hover{background:var(--panel-2);color:var(--acc-2)}
.mega-groups{columns:4;column-gap:28px;position:relative}
.mega-grp{break-inside:avoid;margin-bottom:20px}
.mega-grp h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--acc-2);margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.mega-grp a{display:block;font-size:13px;color:var(--tx-mut);padding:5px 0;transition:.14s;line-height:1.35}
.mega-grp a:hover{color:var(--acc-2)}

/* accent glow utility (decorative, one per viewport area) */
.accent-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(235,103,38,.20),transparent 62%);pointer-events:none;z-index:0}

/* ---- mobile nav drawer (logo collapses to C mark) ---- */
@media(max-width:960px){
  .site-nav .navin{grid-template-columns:auto auto;justify-content:space-between;gap:14px}
  .logo-lockup{display:none}
  .logo-mark{display:block}
  .nav-toggle{display:inline-flex}
  .navmenu{display:none;position:fixed;left:0;right:0;top:72px;max-height:calc(100vh - 72px);overflow-y:auto;background:var(--bg-2);border-bottom:1px solid var(--line);padding:14px 0 26px}
  body.nav-open{overflow:hidden}
  body.nav-open .navmenu{display:block}
  .navlinks{flex-direction:column;align-items:stretch;gap:2px;padding:0 16px}
  .navlinks>li>a{justify-content:space-between;font-size:16px;padding:14px 14px;border-radius:10px}
  .navlinks>li>a:hover{background:var(--panel)}
  .has-mega>a .caret{transition:transform .2s}
  .has-mega.open>a .caret{transform:rotate(225deg) translateY(1px);opacity:1}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none;z-index:auto;transition-delay:0s}
  .mega::before{display:none}/* desktop-only hover bridge */
  .has-mega.open .mega{display:block}
  .mega-inner{box-shadow:none;border:0;background:transparent;padding:4px 8px 10px;margin:0}
  .mega-inner::before{display:none}
  .mega-head{display:none}
  .mega-cols{grid-template-columns:1fr 1fr;gap:0 10px}
  .mega-cols a{font-size:14px;padding:9px 10px}
  .mega-groups{columns:1}
  .mega-grp{margin-bottom:14px}
  .nav-demo{justify-self:stretch;margin:14px 16px 0;justify-content:center}
}

/* ============================================================
   PAGE-COMPONENT STYLES — lifted from the prototypes' per-page
   <style> blocks so they work site-wide and inside Elementor.
   The screenshot-placeholder rules are scoped to .shotwin so they
   do NOT override the home hero's own .shotph styling above.
   ============================================================ */

/* ---- Odoo-style screenshot frames (modulo / settore) ---- */
.shot{border:1px solid var(--line-2);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow-ambient)}
.shot .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.shot .bar .dots{display:flex;gap:7px}
.shot .bar .dots i{width:11px;height:11px;border-radius:50%;background:#2C323B}
.shot .bar .url{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--tx-dim);background:var(--bg);padding:5px 11px;border-radius:7px;border:1px solid var(--line)}
.shotwin{position:relative;aspect-ratio:16/10;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.shotwin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.shotwin .shotph{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:30px;color:var(--tx-dim)}
.shotwin .shotph .glyph{width:54px;height:54px;border-radius:13px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc-2)}
.shotwin .shotph .glyph svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.shotwin .shotph b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-2)}
.shotwin .shotph small{font-size:13px;max-width:240px;line-height:1.5;color:var(--tx-dim)}
.mock .shotwin{aspect-ratio:16/9}

/* ---- Settore: use-case helpers ---- */
.tband{border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(135deg,#141923,#0E1014);padding:46px 44px;display:flex;gap:34px;align-items:center}
.tband .mark{flex:none;width:46px;height:46px;border-radius:11px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc-2);font-family:var(--disp);font-size:30px;line-height:1}
.tband blockquote{margin:0;font-family:var(--disp);font-size:25px;font-weight:600;line-height:1.32;letter-spacing:-.02em;color:var(--tx)}
.tband .who{margin-top:18px;display:flex;align-items:center;gap:13px}
.tband .who .av{width:42px;height:42px;border-radius:100px;background:var(--panel-2);border:1px solid var(--line-2);flex:none}
.tband .who .nm{font-size:14px;color:var(--tx-mut)}
.tband .who .nm b{color:var(--tx);display:block;font-family:var(--sans)}
.scn{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.stack-note{margin-top:26px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim)}
.stack-note svg{width:16px;height:16px;stroke:var(--acc-2);fill:none;stroke-width:2}
@media(max-width:760px){.tband{flex-direction:column;align-items:flex-start;gap:20px}.scn{grid-template-columns:1fr 1fr}}

/* ---- Richiedi demo: moduli multi-select ---- */
.msel{position:relative}
.msel-control{display:flex;align-items:center;gap:10px;min-height:50px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:8px 13px;cursor:pointer;transition:border-color .16s,box-shadow .16s}
.msel-control:hover{border-color:var(--tx-dim)}
.msel.open .msel-control{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.msel-chips{display:flex;flex-wrap:wrap;gap:7px;flex:1;align-items:center}
.msel-ph{color:var(--tx-dim);font-size:15px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--acc-soft);color:var(--acc-2);border:1px solid rgba(235,103,38,.28);border-radius:100px;padding:5px 6px 5px 12px;font-size:13px;font-weight:500;line-height:1}
.chip button{display:grid;place-items:center;width:17px;height:17px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--acc-2);cursor:pointer;font-size:13px;line-height:1;padding:0;transition:background .16s,color .16s}
.chip button:hover{background:var(--acc);color:#fff}
.msel-caret{width:18px;height:18px;flex:none;stroke:var(--tx-dim);fill:none;stroke-width:2;transition:transform .16s}
.msel.open .msel-caret{transform:rotate(180deg)}
.msel-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--tx-dim);flex:none}
.msel-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);overflow:hidden;display:none}
.msel.open .msel-panel{display:block}
.msel-search{padding:11px;border-bottom:1px solid var(--line)}
.msel-search input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 13px;color:var(--tx);font-family:var(--sans);font-size:14px}
.msel-search input::placeholder{color:var(--tx-dim)}
.msel-search input:focus{outline:0;border-color:var(--acc)}
.msel-tools{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}
.msel-tools span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-dim)}
.msel-tools button{background:none;border:0;color:var(--acc-2);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;padding:0}
.msel-tools button:disabled{color:var(--tx-dim);cursor:default}
.msel-list{max-height:264px;overflow-y:auto;padding:6px}
.msel-opt{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--tx-mut);transition:background .12s,color .12s}
.msel-opt:hover{background:var(--panel);color:var(--tx)}
.msel-opt input{width:17px;height:17px;flex:none;accent-color:var(--acc);pointer-events:none}
.msel-opt.sel{color:var(--tx)}
.msel-empty{padding:18px 14px;text-align:center;color:var(--tx-dim);font-size:13.5px}
.msel-list::-webkit-scrollbar{width:9px}
.msel-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:100px;border:2px solid var(--panel-2)}