/* ============================================================
   AICOS — hero dedicata di /aicos (aicos.php).
   Pannello scuro "istituzionale", nello stesso spirito del
   .tech-panel già usato più sotto nella pagina (vedi il commento
   in services-public.css: "footer e pannello tecnico restano
   scuri di proposito, come ancoraggio istituzionale"). Qui lo
   stesso trattamento è scalato a tutta la hero, per un effetto
   da prodotto enterprise invece che da landing page consumer.
   Si appoggia ai token di services-public.css (var(--teal/
   --accent/--accent-2/--font-mono/...)) ma NON estende .pub-hero:
   definisce tutto da sé per poterne controllare i colori.
   ============================================================ */

/* La nav in alto è trasparente finché non si scorre (.pub-nav senza
   .scrolled, vedi services-public.css): sulle altre pagine sta sopra una
   hero chiara e il testo scuro si legge bene, ma qui sotto c'è il pannello
   scuro della hero AICOS, quindi va reso chiaro — solo finché non si scorre:
   appena .pub-nav.scrolled compare (sfondo chiaro), questo blocco smette
   di applicarsi e il testo torna scuro di default, leggibile su quello sfondo. */
body.aicos-page .pub-nav:not(.scrolled) .pub-logo,
body.aicos-page .pub-nav:not(.scrolled) .pub-nav-links a{
  color:#fff;
}
body.aicos-page .pub-nav:not(.scrolled) .pub-nav-links a:hover{
  color:#8be8d8;
}
body.aicos-page .pub-nav:not(.scrolled) .pub-nav-actions .pub-cta.outline{
  color:#fff; border-color:rgba(255,255,255,.35);
}
body.aicos-page .pub-nav:not(.scrolled) .pub-nav-actions .pub-cta.outline:hover{
  background:rgba(255,255,255,.1); border-color:#fff;
}

.aicos-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg, #12141b, #1b1f29 55%, #14171f);
  padding:168px 24px 0;
  color:#fff;
}

/* Sfondo: griglia tecnica sfumata + rete di nodi + marchio IOCOS in filigrana */
.aicos-hero-bg{ position:absolute; inset:0; pointer-events:none; will-change:transform; }
.aicos-grid{
  position:absolute; inset:0;
  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:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 40%, transparent 90%);
}
.aicos-net{ position:absolute; inset:0; opacity:.85; }
.aicos-watermark{
  position:absolute; top:-14%; right:-10%; width:640px; height:640px; max-width:75vw;
  opacity:.05; animation:aicos-spin 160s linear infinite;
}
@keyframes aicos-spin{ to{ transform:rotate(360deg); } }

/* Contenuto */
.aicos-hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; padding-bottom:56px; }

.aicos-hero .hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#8be8d8;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  padding:7px 16px; border-radius:999px; margin-bottom:22px;
}
.aicos-hero .hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal);
  animation:pulse 1.8s ease-in-out infinite;
}

.aicos-kicker{
  font-size:13px; letter-spacing:.05em; color:rgba(255,255,255,.5); text-transform:uppercase;
  font-weight:600; margin:0 0 14px;
}

.aicos-hero h1{
  font-size:clamp(56px,9vw,108px); line-height:.95; font-weight:800; letter-spacing:-.02em;
  margin:0 0 22px;
  background:linear-gradient(120deg, #fff 20%, #8be8d8 62%, #ffb27a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aicos-hero .lead{
  font-size:17px; line-height:1.6; color:rgba(255,255,255,.68); max-width:600px; margin:0 auto 34px;
}

.aicos-hero .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:38px; }
.aicos-hero .pub-cta.outline{ color:#fff; border-color:rgba(255,255,255,.28); }
.aicos-hero .pub-cta.outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* Riga di stato: cosa sta facendo AICOS ora, stile monitoraggio/log */
.aicos-status{
  display:inline-flex; align-items:center; gap:9px; margin:0 auto 50px; max-width:100%;
  font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  border-radius:999px; padding:9px 20px; white-space:nowrap; overflow:hidden;
}
.aicos-status-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent);
  flex:none; animation:pulse 1.8s ease-in-out infinite;
}
.aicos-status-label{ color:rgba(255,255,255,.4); flex:none; }
.aicos-status-text{ color:#fff; overflow:hidden; text-overflow:ellipsis; }
.aicos-caret{ display:inline-block; width:1px; height:13px; background:#fff; flex:none; animation:aicos-blink 1s step-end infinite; }
@keyframes aicos-blink{ 50%{ opacity:0; } }

/* Riga statistiche in stile "scheda tecnica" enterprise */
.aicos-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);
  max-width:860px; margin:0 auto;
}
.aicos-stat{
  padding:22px 12px 30px; border-left:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:4px;
}
.aicos-stat:first-child{ border-left:none; }
.aicos-stat b{ font-size:22px; font-weight:800; color:#fff; font-family:var(--font-mono); letter-spacing:-.01em; }
.aicos-stat span{ font-size:11.5px; color:rgba(255,255,255,.5); line-height:1.35; }

@media (max-width:720px){
  .aicos-hero{ padding-top:128px; }
  .aicos-stats{ grid-template-columns:repeat(2,1fr); row-gap:26px; max-width:340px; }
  .aicos-stat:nth-child(3){ border-left:none; }
}

@media (prefers-reduced-motion: reduce){
  .aicos-watermark, .aicos-status-dot, .aicos-hero .hero-eyebrow .dot, .aicos-caret{ animation:none !important; }
}