/* ============================================================
   IOCOS — Pagine pubbliche Servizi
   Tema chiaro, luminoso e "vivo", con parallasse e reveal-on-scroll.
   Palette dal logo IOCOS: arancio #ff751a, arancio bruciato #d35500,
   teal #1fad97. Footer e pannello tecnico restano scuri di proposito,
   come ancoraggio "istituzionale" in un sito altrimenti chiaro e caldo.
   ============================================================ */

:root{
  --bg:        #fffaf5;
  --bg-2:      #fff1e2;
  --surface:   #ffffff;
  --surface-2: #fff6ec;
  --border:    rgba(20,20,35,.08);
  --border-2:  rgba(20,20,35,.14);
  --text:      #1a1d29;
  --text-dim:  #565f72;
  --text-mute: #8891a3;
  --accent:    #ff751a; /* arancio logo IOCOS */
  --accent-2:  #d35500; /* arancio bruciato logo IOCOS */
  --teal:      #1fad97; /* verde acqua logo IOCOS (badge, icone, sfondi) */
  --link:      #0e7a6c; /* variante scura del teal, per link leggibili su sfondo chiaro */
  --shadow-sm: 0 2px 10px rgba(20,20,40,.06);
  --shadow:    0 20px 45px -18px rgba(20,20,40,.16);
  --radius:    18px;
  --radius-sm: 12px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif, 'Noto Color Emoji';
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace, 'Noto Color Emoji';
  --cat: var(--teal);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.pub{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- background layers ---------- */
.pub-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(255,117,26,.12), transparent 60%),
    radial-gradient(ellipse 900px 700px at 90% 10%, rgba(31,173,151,.12), transparent 55%),
    radial-gradient(ellipse 800px 800px at 50% 110%, rgba(211,85,0,.09), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}
.pub-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(20,20,35,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,35,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

/* ---------- nav ---------- */
.pub-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 32px;
  transition:background .3s ease, padding .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.pub-nav.scrolled{
  background:rgba(255,250,245,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:12px 32px;
  border-bottom-color:var(--border);
  box-shadow:0 10px 30px rgba(20,20,40,.06);
}
.pub-logo{display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.02em;}
.pub-logo-img{height:36px; max-width:180px; width:auto; object-fit:contain; display:block;}
.pub-logo .mark{
  width:34px; height:34px; border-radius:10px;
  background:conic-gradient(from -45deg, var(--accent), var(--accent-2), var(--teal), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff;
  box-shadow:0 4px 18px rgba(255,117,26,.35);
}
.pub-nav-links{display:flex; align-items:center; gap:22px;}
.pub-nav-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pub-nav-links a{color:var(--text-dim); text-decoration:none; font-size:14px; transition:color .2s;}
.pub-nav-links a:hover{color:var(--text);}
.pub-cta{
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; text-decoration:none; box-shadow:0 6px 20px rgba(255,117,26,.3);
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
  border:0; font-family:inherit; line-height:1.2; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.pub-cta .cta-short{display:none;}
.pub-cta:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,117,26,.4);}
.pub-cta.outline{background:transparent; border:1px solid var(--border-2); box-shadow:none; color:var(--text);}
.pub-cta.outline:hover{border-color:var(--accent); background:rgba(255,117,26,.08);}
.pub-nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px; padding:0; border:1px solid var(--border-2); border-radius:50%;
  background:transparent; cursor:pointer; flex:none;
}
.pub-nav-toggle span{width:16px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.pub-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.pub-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.pub-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.pub-login-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:50%;
  border:1px solid var(--border-2); background:transparent; color:var(--text);
  cursor:pointer; flex:none; transition:border-color .2s, background .2s, color .2s, transform .2s;
}
.pub-login-btn:hover{border-color:var(--accent); background:rgba(255,117,26,.08); color:var(--accent); transform:translateY(-1px);}
.pub-login-btn svg{display:block;}

/* ---------- Material Symbols (Google) ---------- */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; line-height:1; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;
  font-feature-settings:'liga'; -webkit-font-feature-settings:'liga';
}

/* ---------- nav: mega menu "Servizi" ---------- */
.pub-nav-item.has-mega{position:relative;}
.pub-nav-servizi-trigger{
  display:flex; align-items:center; gap:5px; padding:0; border:none; background:none; cursor:pointer;
  color:var(--text-dim); font-size:14px; font-family:inherit; transition:color .2s;
}
.pub-nav-servizi-trigger:hover{color:var(--text);}
.mega-caret{transition:transform .25s ease;}
.pub-nav-item.is-open .mega-caret{transform:rotate(180deg);}
.pub-nav-item.is-open .pub-nav-servizi-trigger{color:var(--text);}

.pub-mega-menu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(540px, 88vw); background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(20,20,40,.28); padding:18px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:120;
}
.pub-nav-item.is-open .pub-mega-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.mega-inner{display:grid; grid-template-columns:1.5fr 1fr; gap:16px;}
.mega-col-title{font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px;}
.mega-cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.mega-cat-card{
  --cat: var(--teal);
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.mega-cat-card:hover{
  border-color:color-mix(in srgb, var(--cat) 55%, var(--border-2));
  background:linear-gradient(160deg, color-mix(in srgb, var(--cat) 8%, var(--surface)), var(--surface));
}
.mega-cat-icon{font-size:17px; flex:none; color:var(--cat);}
.mega-cat-name{font-size:12px; font-weight:600; color:var(--text); line-height:1.25;}
.mega-cat-name small{display:block; font-size:10px; font-weight:600; color:var(--cat); margin-top:1px;}
.mega-viewall{display:inline-flex; align-items:center; gap:5px; margin-top:10px; color:var(--link); text-decoration:none; font-size:12px; font-weight:600;}
.mega-viewall .material-symbols-outlined{font-size:15px; transition:transform .2s ease;}
.mega-viewall:hover .material-symbols-outlined{transform:translateX(4px);}

.mega-side{border-left:1px solid var(--border); padding-left:16px; display:flex; flex-direction:column;}
.mega-tool{display:flex; align-items:center; gap:9px; padding:7px 8px; margin:0 -8px; text-decoration:none; color:var(--text); border-radius:9px; font-size:12.5px; font-weight:600; transition:background .15s ease;}
.mega-tool:hover{background:var(--surface-2);}
.mega-tool-icon{font-size:16px; flex:none; color:var(--teal);}
.mega-cta{width:100%; text-align:center; margin-top:10px; padding:9px 14px; font-size:12.5px; border:none;}

@media (max-width:820px){
  .pub-nav-item.has-mega{width:100%;}
  .pub-nav-servizi-trigger{width:100%; justify-content:space-between; padding:12px 14px; border-radius:10px;}
  .pub-nav-servizi-trigger:hover{background:var(--surface-2);}
  .pub-mega-menu{
    position:static; transform:none; width:auto; box-shadow:none; border:none; border-radius:0;
    padding:6px 8px 14px 8px; margin-top:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto;
    transition:max-height .3s ease;
  }
  .pub-nav-item.is-open .pub-mega-menu{max-height:900px;}
  .mega-inner{grid-template-columns:1fr; gap:14px;}
  .mega-cat-grid{grid-template-columns:1fr 1fr;}
  .mega-side{border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:12px;}
}
@media (max-width:480px){
  .mega-cat-grid{grid-template-columns:1fr;}
}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  box-shadow:0 10px 26px rgba(255,117,26,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s ease;
}
.back-to-top.is-visible{opacity:1; visibility:visible; transform:none;}
.back-to-top:hover{box-shadow:0 14px 32px rgba(255,117,26,.45); transform:translateY(-3px);}
.back-to-top .material-symbols-outlined{font-size:22px;}
@media (max-width:480px){
  .back-to-top{right:16px; bottom:16px; width:42px; height:42px;}
}

/* ---------- widget assistente virtuale ---------- */
.chat-widget-toggle{
  position:fixed; left:24px; bottom:24px; z-index:110;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), #147d70); color:#fff;
  box-shadow:0 10px 28px rgba(31,173,151,.4);
  transition:box-shadow .2s ease, transform .2s ease;
}
.chat-widget-toggle:hover{box-shadow:0 14px 34px rgba(31,173,151,.5); transform:translateY(-3px);}
.chat-widget-toggle .material-symbols-outlined{font-size:26px; position:absolute; transition:opacity .18s ease, transform .18s ease;}
.chat-widget-toggle-icon-close{opacity:0; transform:scale(.6) rotate(-45deg);}
.chat-widget-toggle[aria-expanded="true"] .chat-widget-toggle-icon-open{opacity:0; transform:scale(.6) rotate(45deg);}
.chat-widget-toggle[aria-expanded="true"] .chat-widget-toggle-icon-close{opacity:1; transform:none;}

.chat-widget-panel{
  position:fixed; left:24px; bottom:92px; z-index:109;
  width:min(360px, calc(100vw - 32px)); height:min(500px, calc(100vh - 140px));
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 30px 70px -20px rgba(20,20,40,.32);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chat-widget-panel.is-open{opacity:1; transform:none; pointer-events:auto;}
.chat-widget-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface-2);}
.chat-widget-title{display:flex; align-items:center; gap:10px;}
.chat-widget-title .material-symbols-outlined{font-size:22px; color:var(--teal); flex:none;}
.chat-widget-title strong{display:block; font-size:13.5px; color:var(--text);}
.chat-widget-title small{display:block; font-size:11px; color:var(--text-mute);}
.chat-widget-reset{border:none; background:none; cursor:pointer; color:var(--text-mute); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;}
.chat-widget-reset:hover{background:var(--surface); color:var(--text);}
.chat-widget-reset .material-symbols-outlined{font-size:18px;}

.chat-widget-messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.chat-msg{max-width:86%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.55; word-wrap:break-word;}
.chat-msg a{color:inherit; text-decoration:underline;}
.chat-msg ul{margin:6px 0; padding-left:18px;}
.chat-msg-bot{align-self:flex-start; background:var(--surface-2); color:var(--text); border-bottom-left-radius:4px;}
.chat-msg-user{align-self:flex-end; background:linear-gradient(135deg, var(--teal), #147d70); color:#fff; border-bottom-right-radius:4px;}
.chat-msg-error{align-self:flex-start; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.25); color:#b91c1c;}
.chat-msg-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--surface-2); border-radius:14px; border-bottom-left-radius:4px;}
.chat-msg-typing span{width:6px; height:6px; border-radius:50%; background:var(--text-mute); animation:chat-typing 1.2s infinite ease-in-out;}
.chat-msg-typing span:nth-child(2){animation-delay:.15s;}
.chat-msg-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chat-typing{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

.chat-widget-disclaimer{margin:0; padding:0 16px 8px; font-size:10.5px; color:var(--text-mute); text-align:center;}
.chat-widget-form{display:flex; align-items:flex-end; gap:8px; padding:12px; border-top:1px solid var(--border);}
.chat-widget-form textarea{
  flex:1; resize:none; max-height:90px; padding:9px 12px; border:1px solid var(--border-2); border-radius:12px;
  background:var(--bg); color:var(--text); font-size:13px; font-family:inherit; line-height:1.4;
}
.chat-widget-send{
  flex:none; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), #147d70); color:#fff; transition:opacity .15s ease;
}
.chat-widget-send:disabled{opacity:.5; cursor:default;}
.chat-widget-send .material-symbols-outlined{font-size:18px;}

@media (max-width:480px){
  .chat-widget-toggle{left:16px; bottom:16px; width:50px; height:50px;}
  .chat-widget-panel{left:10px; bottom:78px; width:calc(100vw - 20px); height:min(70vh, 520px);}
}

/* ---------- hero ---------- */
.pub-hero{
  position:relative; min-height:82vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:140px 24px 80px; overflow:hidden;
}
.hero-layer{position:absolute; inset:-10%; pointer-events:none; will-change:transform;}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(75px); opacity:.4; will-change:transform;
}
.hero-blob.b1{width:420px; height:420px; top:-80px; left:-60px; background:radial-gradient(circle, var(--teal), transparent 70%);}
.hero-blob.b2{width:380px; height:380px; top:20%; right:-100px; background:radial-gradient(circle, var(--accent-2), transparent 70%);}
.hero-blob.b3{width:340px; height:340px; bottom:-120px; left:35%; background:radial-gradient(circle, var(--accent), transparent 70%);}

/* ---------- spirale decorativa (chiocciola → lumaca) ---------- */
.hero-spiral{position:absolute; opacity:.4; pointer-events:none; z-index:1; animation:spiral-spin 90s linear infinite;}
.hero-spiral.s1{top:-40px; right:6%; width:220px; height:220px;}
.hero-spiral.s2{bottom:-30px; left:4%; width:150px; height:150px; opacity:.28; animation-duration:70s; animation-direction:reverse;}
@keyframes spiral-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.hero-spiral{animation:none;}}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cat); border:1px solid var(--border-2); background:var(--surface); box-shadow:var(--shadow-sm);
  padding:7px 16px; border-radius:999px; margin-bottom:26px; position:relative; z-index:2;
}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--cat); box-shadow:0 0 10px var(--cat); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(.7);}}

.pub-hero h1{
  position:relative; z-index:2; font-size:clamp(32px,5.2vw,58px); line-height:1.08; font-weight:800;
  margin:0 0 20px; max-width:900px;
  background:linear-gradient(120deg, var(--text) 30%, var(--accent-2) 80%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pub-hero .lead{position:relative; z-index:2; font-size:17px; color:var(--text-dim); max-width:640px; margin:0 auto 34px;}
.hero-actions{position:relative; z-index:2; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- sections / containers ---------- */
.pub-section{max-width:1120px; margin:0 auto; padding:70px 24px; position:relative;}
.pub-section.tight{padding-top:0;}
.section-kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:10px; display:flex; align-items:center; gap:10px;
}
.section-kicker::after{content:''; height:1px; flex:1; background:linear-gradient(90deg, var(--border-2), transparent);}
.pub-section h2{font-size:clamp(24px,3.2vw,34px); margin:0 0 14px; font-weight:700; color:var(--text);}
.pub-section p.section-desc{color:var(--text-dim); max-width:640px; margin:0 0 40px; font-size:15.5px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1; transform:none;}

/* ---------- category quick nav (catalogo) ---------- */
.cat-nav-wrap{position:sticky; top:66px; z-index:40; padding:14px 24px; margin-bottom:10px;}
.cat-nav{
  display:flex; gap:8px; overflow-x:auto; padding:8px; max-width:1120px; margin:0 auto;
  background:rgba(255,250,245,.75); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:999px;
  box-shadow:var(--shadow-sm); scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-pill{
  flex:none; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--text-dim); background:transparent; border:1px solid transparent; white-space:nowrap;
  transition:all .2s ease; user-select:none;
}
.cat-pill:hover{color:var(--text); border-color:var(--border-2);}
.cat-pill.active{color:#fff; background:var(--cat); border-color:var(--cat); box-shadow:0 4px 16px color-mix(in srgb, var(--cat) 55%, transparent);}

/* ---------- cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px;}
.svc-card{
  --cat: var(--teal);
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:26px 24px; border-radius:var(--radius); text-decoration:none; color:var(--text);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-style:preserve-3d; will-change:transform;
}
.svc-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0;
  background:linear-gradient(135deg, var(--cat), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .25s ease; pointer-events:none;
}
.svc-card:hover{border-color:color-mix(in srgb, var(--cat) 50%, var(--border-2)); box-shadow:0 20px 40px -16px color-mix(in srgb, var(--cat) 40%, transparent);}
.svc-card:hover::before{opacity:1;}
.svc-card .icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:color-mix(in srgb, var(--cat) 16%, transparent); border:1px solid color-mix(in srgb, var(--cat) 35%, transparent);
}
.svc-card .cat-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cat);}
.svc-card h3{margin:0; font-size:18px; font-weight:700; line-height:1.3; color:var(--text);}
.svc-card .desc{color:var(--text-dim); font-size:13.5px; flex:1; margin:0;}
.svc-card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:14px; border-top:1px solid var(--border);}
.svc-card .price{font-weight:700; font-size:15px; color:var(--text);}
.svc-card .price small{font-weight:400; color:var(--text-mute); font-size:11.5px;}
.svc-card .arrow{color:var(--cat); font-size:18px; transition:transform .25s ease;}
.svc-card:hover .arrow{transform:translateX(5px);}

.cat-block{margin-bottom:64px;}
.cat-block-head{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.cat-block-head .dot{width:10px; height:10px; border-radius:50%; background:var(--cat); box-shadow:0 0 12px var(--cat);}
.cat-block-head h2{margin:0; font-size:21px; color:var(--text);}
.cat-block-head span{color:var(--text-mute); font-size:13px;}

/* ---------- detail hero extras ---------- */
.detail-icon{
  width:74px; height:74px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 22px; position:relative; z-index:2;
  background:color-mix(in srgb, var(--cat) 16%, transparent); border:1px solid color-mix(in srgb, var(--cat) 40%, transparent);
  box-shadow:var(--shadow-sm);
}
.price-tag{
  position:relative; z-index:2; display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--shadow-sm);
  padding:8px 18px; border-radius:999px; margin-top:6px;
}
.price-tag b{font-size:19px; color:var(--text);}
.price-tag span{color:var(--text-mute); font-size:12.5px;}

/* ---------- include grid ---------- */
.include-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px;}
.include-item{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.include-item .check{
  flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cat) 20%, transparent); color:var(--cat); font-size:13px; font-weight:800; margin-top:1px;
}
.include-item p{margin:0; font-size:14px; color:var(--text-dim);}

/* ---------- content panel (descrizione + pannello tecnico) ---------- */
.content-panel{display:grid; grid-template-columns:1.4fr .9fr; gap:44px; align-items:center;}
.content-panel .copy p{color:var(--text-dim); font-size:15.5px; margin:0 0 18px;}

/* Pannello "terminale": unico accento scuro deliberato, per il tocco tecnico */
.tech-panel{
  position:relative; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg, #1c202c, #12141b);
  padding:26px; min-height:260px; overflow:hidden; font-family:var(--font-mono); font-size:12.5px;
  color:rgba(255,255,255,.55); box-shadow:0 24px 50px -20px rgba(20,20,40,.35);
}
.tech-panel .scanline{
  position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--cat), transparent);
  opacity:.8; animation:scan 3.4s linear infinite;
}
@keyframes scan{0%{top:0;}100%{top:100%;}}
.tech-panel .dotgrid{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:16px 16px;}
.tech-panel .row{position:relative; display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.1);}
.tech-panel .row:last-child{border-bottom:none;}
.tech-panel .row b{color:#fff;}
.tech-panel .tag{color:var(--cat);}

/* ---------- price panel ---------- */
.price-panel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding:34px 36px; border-radius:20px; border:1px solid var(--border-2); box-shadow:var(--shadow);
  background:radial-gradient(ellipse 500px 200px at 0% 0%, color-mix(in srgb, var(--cat) 14%, transparent), transparent), linear-gradient(160deg, var(--surface-2), var(--surface));
}
.price-panel .big{font-size:44px; font-weight:800; color:var(--text);}
.price-panel .big small{font-size:15px; font-weight:500; color:var(--text-mute);}
.price-panel .note{color:var(--text-dim); font-size:13.5px; max-width:340px;}

/* ---------- footer (ancoraggio scuro deliberato) ---------- */
.pub-footer{
  /* Variabili ridefinite in questo scope: dal chiaro al testo chiaro-su-scuro,
     senza duplicare le regole già scritte per il resto del sito. */
  --text: #f7f4f0;
  --text-dim: rgba(247,244,240,.68);
  --text-mute: rgba(247,244,240,.42);
  --border: rgba(255,255,255,.09);
  --border-2: rgba(255,255,255,.16);
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.09);
  background:linear-gradient(180deg, #171a24 0%, #0e1017 100%);
  color:var(--text);
  border-top:none; border-radius:36px 36px 0 0;
  padding:56px 24px 44px; margin-top:70px;
}
.pub-footer-inner{max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--text-mute); font-size:13px;}
.pub-footer a{color:var(--text-dim); text-decoration:none;}
.pub-footer a:hover{color:#fff;}
.pub-footer-links{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.pub-link-btn{
  background:none; border:none; padding:0; margin:0; color:var(--text-dim); text-decoration:underline;
  text-underline-offset:2px; font-size:13px; cursor:pointer; font-family:inherit;
}
.pub-link-btn:hover{color:#fff;}
.req{color:var(--accent);}

/* ---------- footer esteso (mega footer) ---------- */
.footer-mega-inner{max-width:1120px; margin:0 auto 40px;}

.footer-top{display:grid; grid-template-columns:1.3fr .9fr; gap:44px; align-items:start; margin-bottom:52px;}
.footer-brand .pub-logo{margin-bottom:22px; color:#fff;}
.footer-brand h2{font-size:clamp(22px,2.6vw,28px); line-height:1.28; margin:0 0 18px; color:#fff; font-weight:700; max-width:640px;}
.footer-brand p{color:var(--text-dim); font-size:14px; line-height:1.7; margin:0 0 14px; max-width:640px;}
.footer-callout{
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--border-2);
  border-radius:18px; padding:28px; align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.footer-callout h3{margin:10px 0 14px; font-size:19px; line-height:1.35; color:#fff;}
.footer-callout p{color:var(--text-dim); font-size:13.5px; line-height:1.7; margin:0;}

.footer-tech{margin-bottom:52px;}
.tech-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.tech-badge{
  padding:9px 18px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface);
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); transition:border-color .2s, color .2s;
}
.tech-badge:hover{border-color:var(--teal); color:#fff;}

.footer-partner{display:flex; justify-content:center; margin-bottom:40px;}
.partner-badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:999px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 22%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  border:1px solid color-mix(in srgb, var(--teal) 45%, var(--border-2));
  color:var(--text-dim); font-size:13px; text-decoration:none;
  box-shadow:0 8px 24px -12px color-mix(in srgb, var(--teal) 60%, transparent);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-badge:hover{transform:translateY(-2px); border-color:var(--teal); color:var(--text-dim); box-shadow:0 12px 30px -10px color-mix(in srgb, var(--teal) 70%, transparent);}
.partner-badge strong{color:var(--teal);}
.partner-badge-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); flex:none;}
.partner-badge-arrow{opacity:.6; transition:transform .2s ease, opacity .2s ease;}
.partner-badge:hover .partner-badge-arrow{transform:translateX(3px); opacity:1;}

.footer-cols{display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; padding-bottom:40px; border-bottom:1px solid var(--border);}
.footer-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:#fff; margin:0 0 18px;}
.footer-col a, .footer-link-btn{
  display:block; color:var(--text-dim); text-decoration:none; font-size:13.5px; line-height:1.6; margin-bottom:11px;
  transition:color .2s; background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:inherit;
}
.footer-col a:hover, .footer-link-btn:hover{color:var(--teal);}
.footer-col-desc{color:var(--text-mute); font-size:12.5px; margin:0 0 12px;}
.payment-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.pay-badge{padding:7px 12px; border-radius:8px; border:1px solid var(--border-2); background:var(--surface); font-size:12px; color:var(--text-dim); white-space:nowrap;}
.pay-crypto{font-size:12.5px; color:var(--text-mute); margin:0; font-family:var(--font-mono);}

.pub-footer-inner{margin-top:26px; border-top:1px solid var(--border); padding-top:24px;}

@media (max-width:980px){
  .footer-cols{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr; gap:30px;}
}

/* ---------- modali (richiesta preventivo / preferenze cookie) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center;
  background:rgba(15,15,25,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:6vh 20px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.pub-modal{
  position:relative; width:100%; max-width:560px; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; padding:36px 32px; box-shadow:0 30px 80px rgba(20,20,40,.28);
  animation:modalIn .25s ease;
}
.login-modal{
  max-width:420px;
}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}
.modal-x{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-2);
  background:rgba(20,20,35,.05); color:var(--text-dim); font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.modal-x:hover{color:var(--text); border-color:var(--accent); background:rgba(255,117,26,.08);}
.pub-modal h3{margin:0 0 8px; font-size:22px; color:var(--text);}
.modal-sub{color:var(--text-dim); font-size:14px; margin:0 0 24px;}

/* ---------- form richiesta preventivo ---------- */
.qf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.qf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.qf-group{margin-bottom:16px;}
.qf-group label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px;}
.qf-group input, .qf-group textarea, .qf-group select{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border-2);
  background:var(--bg); color:var(--text); font-family:inherit; font-size:14px; resize:vertical;
}
.qf-group input:focus, .qf-group textarea:focus, .qf-group select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,173,151,.14);}
.qf-consent{display:flex; flex-direction:column; gap:12px; margin:6px 0 18px;}
.qf-check{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-dim); cursor:pointer; line-height:1.5;}
.qf-check input{margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--accent);}
.qf-check a{color:var(--link);}
.qf-error{background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3); color:#b91c1c; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px;}
.qf-note{font-size:11.5px; color:var(--text-mute); margin:12px 0 0; text-align:center;}
.qf-success-icon{
  width:56px; height:56px; border-radius:50%; background:rgba(31,173,151,.14); border:1px solid rgba(31,173,151,.4);
  color:var(--link); font-size:26px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
#quote-success{text-align:center;}
#quote-success p{color:var(--text-dim); font-size:14.5px; margin:0 0 22px;}
@media (max-width:560px){.qf-row{grid-template-columns:1fr;} .pub-modal{padding:28px 20px;}}

/* ---------- banner cookie ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:190; max-width:920px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border-2); border-radius:16px;
  padding:20px 24px; box-shadow:0 20px 50px rgba(20,20,40,.2); animation:modalIn .3s ease;
}
.cookie-banner-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.cookie-banner p{margin:0; font-size:13px; color:var(--text-dim); flex:1; min-width:240px;}
.cookie-banner a{color:var(--link);}
.cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- preferenze cookie: toggle per categoria ---------- */
.cookie-cat{padding:16px 0; border-bottom:1px solid var(--border);}
.cookie-cat:last-of-type{border-bottom:none;}
.cookie-cat-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.cookie-cat p{margin:0; font-size:13px; color:var(--text-dim);}
.cookie-toggle{position:relative; display:inline-block; width:40px; height:22px;}
.cookie-toggle input{opacity:0; width:0; height:0;}
.cookie-toggle .slider{position:absolute; inset:0; background:var(--border-2); border-radius:22px; cursor:pointer; transition:.25s;}
.cookie-toggle .slider::before{content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 1px 3px rgba(20,20,40,.3);}
.cookie-toggle input:checked + .slider{background:var(--teal);}
.cookie-toggle input:checked + .slider::before{transform:translateX(18px);}
.cookie-toggle.disabled .slider{cursor:not-allowed; opacity:.6;}

/* ---------- pagine legali (privacy / cookie policy) ---------- */
.legal-content{max-width:760px; margin:0 auto;}
.legal-updated{color:var(--text-mute); font-size:13px; margin-bottom:34px; font-family:var(--font-mono);}
.legal-content h2{font-size:20px; margin:38px 0 14px; color:var(--text);}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content h3{font-size:15.5px; margin:22px 0 10px; color:var(--text);}
.legal-content p{color:var(--text-dim); font-size:14.5px; margin:0 0 14px;}
.legal-content ul{margin:0 0 16px; padding-left:20px; color:var(--text-dim); font-size:14.5px;}
.legal-content li{margin-bottom:8px;}
.legal-content a{color:var(--link);}
.legal-content code{background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:5px; font-size:12.5px;}
.legal-table{width:100%; border-collapse:collapse; font-size:13px;}
.legal-table th, .legal-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text-dim); vertical-align:top;}
.legal-table th{color:var(--text); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
.legal-content .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; margin-bottom:24px; background:var(--surface); box-shadow:var(--shadow-sm);}
.legal-content .table-wrap .legal-table{margin:0;}
.legal-note{color:var(--text-mute); font-size:13px; font-style:italic; margin:-6px 0 16px;}

/* ---------- breadcrumb ---------- */
.pub-breadcrumb{position:relative; z-index:2; display:flex; gap:8px; align-items:center; justify-content:center; font-size:12.5px; color:var(--text-mute); margin-bottom:18px; font-family:var(--font-mono);}
.pub-breadcrumb a{color:var(--text-mute); text-decoration:none;}
.pub-breadcrumb a:hover{color:var(--link);}

/* ---------- empty ---------- */
.pub-empty{text-align:center; padding:80px 24px; color:var(--text-mute);}

@media (max-width:820px){
  .content-panel{grid-template-columns:1fr;}
  .pub-nav-toggle{display:flex;}
  .pub-nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:calc(100% + 8px); left:12px; right:12px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow); padding:10px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .pub-nav-links.is-open{opacity:1; visibility:visible; transform:none;}
  .pub-nav-links a{padding:12px 14px; border-radius:10px; font-size:15px;}
  .pub-nav-links a:hover{background:var(--surface-2);}
  .pub-hero{padding-top:120px;}
}
@media (max-width:480px){
  .pub-logo-name{display:none;}
}
@media (max-width:460px){
  .pub-nav, .pub-nav.scrolled{padding-left:14px; padding-right:14px;}
  .pub-nav-actions{gap:6px;}
  .pub-logo-img{height:30px; max-width:110px;}
  .pub-nav-actions .pub-cta{padding:9px 14px; font-size:13px;}
  .pub-nav-actions .pub-cta .cta-long{display:none;}
  .pub-nav-actions .pub-cta .cta-short{display:inline;}
  .pub-login-btn, .pub-nav-toggle{width:36px; height:36px;}
}
@media (max-width:340px){
  .pub-logo-img{max-width:84px;}
  .pub-nav-actions .pub-cta{padding:8px 11px; font-size:12.5px;}
}