/* ============================================================
   IOCOS — strato grafico "enterprise" del sito pubblico (04/11/2026)
   Porta su tutto il layout il linguaggio del footer: scuro profondo,
   bagliori teal/arancio, griglia sottile, bordi luminosi che ruotano,
   etichette mono con punto pulsante, titoli con parola sfumata.
   Caricato DOPO services-public.css e PRIMA degli stili di pagina
   ($extraStyles e <style> in pagina), così le regole specifiche vincono.
   Per tornare indietro basta togliere il <link> in views/layouts/public.php.
   Il mega menu "Servizi" resta chiaro (piace così): solo rifiniture.
   L'hero della home (.hp-hero) resta chiaro: è marcato "piace così".
   ============================================================ */

html{scroll-padding-top:96px;}
body.pub ::selection{background:color-mix(in srgb, var(--teal) 32%, transparent); color:inherit;}
body.pub a:focus-visible, body.pub button:focus-visible, body.pub summary:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;}

/* ---------- NAV: barra flottante scura in vetro ---------- */
.pub-nav{
  top:10px; left:10px; right:10px; margin:0 auto; max-width:1240px;
  padding:8px 8px 8px 18px; border-radius:999px;
  background:rgba(12,14,21,.62); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.pub-nav.scrolled{
  padding:6px 6px 6px 16px; background:rgba(12,14,21,.86); border-color:rgba(255,255,255,.12);
  box-shadow:0 22px 60px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
/* filo luminoso sotto la barra */
.pub-nav::after{
  content:""; position:absolute; left:28px; right:28px; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 80%, transparent), color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  opacity:.7;
}
.pub-nav .pub-logo, .pub-nav .pub-logo-name{color:#fff;}
.pub-login-btn, .pub-lang-switch{color:#f7f4f0; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04);}
.pub-login-btn:hover, .pub-lang-switch:hover{color:#fff; border-color:var(--teal); background:rgba(31,173,151,.14);}
.pub-nav-toggle{border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04);}
.pub-nav-toggle span{background:#fff;}
.pub-nav-actions .pub-cta{box-shadow:0 8px 24px -8px rgba(255,117,26,.7);}

@media (min-width:821px){
  .pub-nav-links{gap:2px;}
  .pub-nav-links > a, .pub-nav-servizi-trigger{
    color:rgba(247,244,240,.74); padding:9px 14px; border-radius:999px; font-size:14px; font-weight:500;
    transition:color .2s, background .2s;
  }
  .pub-nav-links > a:hover, .pub-nav-servizi-trigger:hover,
  .pub-nav-item.is-open .pub-nav-servizi-trigger{color:#fff; background:rgba(255,255,255,.08);}
  .pub-mega-menu{top:calc(100% + 12px);}
}
@media (max-width:820px){
  .pub-nav, .pub-nav.scrolled{top:8px; left:8px; right:8px; padding:6px 6px 6px 14px;}
  .pub-nav::after{left:20px; right:20px;}
  .pub-nav-links{top:calc(100% + 10px); left:0; right:0; border-radius:20px; box-shadow:0 30px 70px -30px rgba(10,12,20,.5);}
  .pub-hero{padding-top:110px;}
}

/* ---------- MEGA MENU "Servizi": rifiniture (struttura invariata) ---------- */
@keyframes ent-shimmer{from{background-position:0% 50%;} to{background-position:200% 50%;}}
.pub-mega-menu{
  border-radius:24px; border-color:rgba(20,20,35,.1);
  box-shadow:0 50px 100px -40px rgba(10,12,20,.55), 0 0 0 1px rgba(255,255,255,.7) inset;
  transform:translateX(-50%) translateY(-10px) scale(.985); transform-origin:50% 0;
}
.pub-nav-item.is-open .pub-mega-menu{transform:translateX(-50%) translateY(0) scale(1);}
.pub-mega-menu::before{
  height:3px; background:linear-gradient(90deg, var(--accent), #f2a900, var(--teal), #147d70, var(--accent)) 0 50% / 200% 100%;
  animation:ent-shimmer 6s linear infinite;
}
@keyframes ent-rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (min-width:821px){
  .pub-nav-item.is-open .mega-feature,
  .pub-nav-item.is-open .mega-section,
  .pub-nav-item.is-open .mega-highlights,
  .pub-nav-item.is-open .mega-side,
  .pub-nav-item.is-open .mega-trust{animation:ent-rise .45s cubic-bezier(.16,.8,.24,1) both;}
  .pub-nav-item.is-open .mega-section:nth-child(2){animation-delay:.04s;}
  .pub-nav-item.is-open .mega-section:nth-child(3){animation-delay:.08s;}
  .pub-nav-item.is-open .mega-section:nth-child(4){animation-delay:.12s;}
  .pub-nav-item.is-open .mega-section:nth-child(n+5){animation-delay:.16s;}
  .pub-nav-item.is-open .mega-highlights{animation-delay:.18s;}
  .pub-nav-item.is-open .mega-side{animation-delay:.1s;}
  .pub-nav-item.is-open .mega-trust{animation-delay:.22s;}
}
.mega-feature{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.mega-feature::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%); mask-image:linear-gradient(180deg, #000, transparent 70%);
}
.mega-cat-card{position:relative;}
.mega-cat-card::after{
  content:"arrow_forward"; font-family:'Material Symbols Outlined'; font-size:16px; line-height:1; margin-left:auto; padding-left:6px;
  color:var(--cat); opacity:0; transform:translateX(-6px); transition:opacity .18s, transform .18s;
  font-feature-settings:'liga'; -webkit-font-feature-settings:'liga';
}
.mega-cat-card:hover::after{opacity:1; transform:none;}
.mega-side{border-color:rgba(20,20,35,.07);}

/* fascia garanzie in fondo al pannello: scura, come il footer */
.mega-trust{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:12px;
  padding:12px 18px; border-radius:16px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 300px 120px at 0% 0%, rgba(31,173,151,.35), transparent 70%), radial-gradient(ellipse 300px 120px at 100% 100%, rgba(255,117,26,.25), transparent 70%), #0f121b;
  color:rgba(247,244,240,.78); font-size:12.5px; font-weight:600;
}
.mega-trust-item{display:inline-flex; align-items:center; gap:7px;}
.mega-trust-item .material-symbols-outlined{font-size:17px; color:#5eead4;}
.mega-trust-link{margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:#fff; text-decoration:none; font-weight:700;}
.mega-trust-link .material-symbols-outlined{font-size:16px; transition:transform .2s;}
.mega-trust-link:hover .material-symbols-outlined{transform:translateX(4px);}
@media (max-width:1100px){ .mega-trust{gap:8px 16px;} }
@media (max-width:820px){
  .mega-trust{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:14px 0 0; padding:14px; font-size:12px;}
  .mega-trust-link{grid-column:1 / -1; margin-left:0;}
}
@media (max-width:380px){ .mega-trust{grid-template-columns:1fr;} }
@media (min-width:821px) and (max-height:900px){ .mega-trust{margin-top:8px; padding:9px 16px;} }

/* ---------- HERO delle pagine interne: "palco" scuro come il footer ---------- */
.pub-hero{
  --text: #f7f4f0;
  --text-dim: rgba(247,244,240,.72);
  --text-mute: rgba(247,244,240,.48);
  --border: rgba(255,255,255,.1);
  --border-2: rgba(255,255,255,.18);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.1);
  --link: #5eead4;
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);
  isolation:isolate; color:var(--text);
  background:
    radial-gradient(ellipse 700px 420px at 12% 0%, rgba(31,173,151,.28), transparent 65%),
    radial-gradient(ellipse 700px 480px at 92% 30%, rgba(255,117,26,.22), transparent 65%),
    linear-gradient(180deg, #0b0d14 0%, #121522 100%);
  border-radius:0 0 28px 28px;
  margin-bottom:clamp(28px, 5vw, 56px);
}
.pub-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 30%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse 80% 75% at 50% 30%, #000 30%, transparent 85%);
}
.pub-hero::after{
  content:""; position:absolute; left:8%; right:8%; bottom:0; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--teal), var(--accent), transparent); opacity:.8;
}
.pub-hero .hero-blob{opacity:.42; mix-blend-mode:screen;}
.pub-hero .hero-spiral{opacity:.5;}
.pub-hero .hero-eyebrow{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:color-mix(in srgb, var(--cat) 55%, #fff);
}
.pub-hero h1{
  letter-spacing:-.025em;
  background:linear-gradient(120deg, #fff 35%, #ffd2b0 70%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pub-hero .lead{color:var(--text-dim);}
.pub-hero .pub-cta.outline{color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04);}
.pub-hero .pub-cta.outline:hover{border-color:var(--teal); background:rgba(31,173,151,.14);}
.pub-hero .pub-breadcrumb a{color:var(--text-mute);}
.pub-hero .pub-breadcrumb a:hover{color:#fff;}
.pub-hero .price-tag{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);}
.pub-hero .detail-icon{background:color-mix(in srgb, var(--cat) 22%, rgba(255,255,255,.04));}
@media (min-width:900px){ .pub-hero{border-radius:0 0 44px 44px;} }

/* ---------- etichette di sezione: mono + punto pulsante ---------- */
@keyframes ent-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;}}
.section-kicker{color:var(--link); font-weight:600;}
.section-kicker::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--teal); animation:ent-pulse 2.4s infinite;}
.pub-section h2{letter-spacing:-.02em; font-weight:800;}
.pub-section h2 em, .pub-section h2 .grad{
  font-style:normal; background:linear-gradient(90deg, var(--accent-2), var(--accent) 45%, var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- pulsanti: riflesso al passaggio ---------- */
.pub-cta{position:relative; overflow:hidden; isolation:isolate;}
.pub-cta::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg);
  transition:left .6s ease;
}
.pub-cta:hover::after{left:120%;}
.pub-cta.outline::after{background:linear-gradient(100deg, transparent, rgba(31,173,151,.18), transparent);}

/* ---------- card servizi ---------- */
.svc-card{background:linear-gradient(165deg, #fff, var(--surface-2)); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, var(--shadow-sm);}
.svc-card:hover{box-shadow:0 26px 50px -22px color-mix(in srgb, var(--cat) 50%, transparent), 0 1px 0 rgba(255,255,255,.8) inset;}
.svc-card .icon{box-shadow:0 10px 20px -12px color-mix(in srgb, var(--cat) 80%, transparent);}
.include-item{transition:border-color .2s, transform .2s, box-shadow .2s;}
.include-item:hover{border-color:color-mix(in srgb, var(--cat) 40%, var(--border)); transform:translateY(-2px); box-shadow:0 16px 30px -20px color-mix(in srgb, var(--cat) 60%, transparent);}

/* ---------- pannello finale / prezzo: scuro con bordo che ruota (come la CTA del footer) ---------- */
.price-panel{
  --text: #f7f4f0;
  --text-dim: rgba(247,244,240,.72);
  --text-mute: rgba(247,244,240,.48);
  --border: rgba(255,255,255,.1);
  --border-2: rgba(255,255,255,.18);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.1);
  --link: #5eead4;
  position:relative; isolation:isolate; overflow:hidden; color:var(--text);
  border:1px solid transparent; border-radius:24px;
  background:
    radial-gradient(ellipse 420px 220px at 0% 0%, color-mix(in srgb, var(--cat, var(--teal)) 32%, transparent), transparent 70%) padding-box,
    radial-gradient(ellipse 420px 240px at 100% 100%, rgba(255,117,26,.22), transparent 70%) padding-box,
    linear-gradient(160deg, #141826, #0b0d14) padding-box,
    conic-gradient(from var(--fx-angle, 0deg), transparent 0 60%, var(--teal) 75%, #e9d8a6 85%, transparent 95%) border-box;
  animation:fx-spin 8s linear infinite;
  box-shadow:0 34px 80px -40px color-mix(in srgb, var(--teal) 60%, rgba(10,12,20,.8));
}
.price-panel .big{color:#fff;}
.price-panel .pub-cta.outline{color:#fff; border-color:rgba(255,255,255,.22);}

/* ---------- domande frequenti ---------- */
.gs-faq details{transition:border-color .2s, box-shadow .2s, background .2s;}
.gs-faq details:hover{border-color:color-mix(in srgb, var(--teal) 35%, var(--border));}
.gs-faq details[open]{
  border-color:color-mix(in srgb, var(--teal) 45%, var(--border));
  background:linear-gradient(165deg, #fff, color-mix(in srgb, var(--teal) 5%, #fff));
  box-shadow:0 18px 40px -26px color-mix(in srgb, var(--teal) 60%, transparent);
}

/* ---------- barra categorie (catalogo) sotto la nav flottante ---------- */
.cat-nav-wrap{top:76px;}
.cat-nav{background:rgba(255,250,245,.82); box-shadow:0 12px 30px -18px rgba(10,12,20,.35);}

/* ---------- torna su ---------- */
.back-to-top{
  background:rgba(12,14,21,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 34px -14px rgba(0,0,0,.6), 0 0 0 0 transparent;
}
.back-to-top:hover{box-shadow:0 16px 36px -14px rgba(0,0,0,.6), 0 0 0 4px color-mix(in srgb, var(--teal) 30%, transparent);}
.back-to-top .material-symbols-outlined{color:#5eead4;}

@media (prefers-reduced-motion: reduce){
  .pub-mega-menu::before, .price-panel, .section-kicker::before{animation:none !important;}
  .pub-nav-item.is-open .mega-feature, .pub-nav-item.is-open .mega-section, .pub-nav-item.is-open .mega-highlights,
  .pub-nav-item.is-open .mega-side, .pub-nav-item.is-open .mega-trust{animation:none !important;}
  .pub-cta::after{display:none;}
}