/* ═══════════════════════════════════════════════════════════
   DOLIGHT — COMPONENTS
   Componenti compositi: body offset, nav, banner, hero,
   section wrappers, product card, plugin, deadline, proc,
   workflow, timeline, team, CTA, ci-card, footer.
   Mobile-first reale: regole base = mobile, scaling up @media (min-width).
   Riferimento: piano sez. 7.
═══════════════════════════════════════════════════════════ */


/* ═══════════════ BODY OFFSET (per nav fissa, valido SEMPRE) ═══════════════ */
/* Offset incondizionato: vale anche quando il banner viene chiuso o non c'è.
   Sostituisce il vecchio meccanismo basato su :has() che si rompeva al dismiss
   e su Safari/Firefox vecchi. Mobile 60px, tablet 64px, desktop 68px. */
body { padding-block-start: 60px; }
@media (min-width: 768px)  { body { padding-block-start: 64px; } }
@media (min-width: 1024px) { body { padding-block-start: 68px; } }


/* ═══════════════ NAV ═══════════════ */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  block-size: 60px;
  background: rgba(11, 19, 64, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--border);
}
@media (min-width: 768px)  { .nav { block-size: 64px; } }
@media (min-width: 1024px) { .nav { block-size: 68px; } }

.nav__inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav__logo {
  font-size: 20px;
  font-weight: var(--fw-black);
  letter-spacing: -.04em;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__dot { color: var(--red); }

/* Logo immagine SVG: dimensionato per stare nella nav 60-68px */
.nav__logo-img {
  block-size: 36px;
  inline-size: auto;
  display: block;
}
@media (min-width: 1024px) {
  .nav__logo-img { block-size: 40px; }
}
.footer__logo-img {
  block-size: 44px;
  inline-size: auto;
  display: block;
}

.nav__hamburger {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  color: var(--text-on-dark);
  font-size: 22px;
  margin-inline-start: auto;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--motion) var(--ease);
}
.nav__hamburger:hover { background: rgba(255, 255, 255, .08); }
.nav__hamburger-icon { line-height: 1; }

/* Drawer mobile fullscreen (default 0-767) */
.nav__drawer {
  position: fixed;
  inset-block-start: 60px;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-overlay);
  background: rgba(11, 19, 64, .98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-block-start: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease);
  visibility: hidden;
}
.nav__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.nav__drawer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-page-x);
  /* Safe area iOS: l'ultima riga del drawer non finisce sotto la home bar */
  padding-block-end: max(var(--space-6), env(safe-area-inset-bottom));
}

.nav__link,
.nav__group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  width: 100%;
  font-family: inherit;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
}
.nav__link:hover,
.nav__link.is-active,
.nav__group-trigger:hover,
.nav__group-trigger[aria-expanded="true"] {
  background: rgba(59, 110, 248, .12);
  color: var(--text-on-dark);
}
.nav__link--violet { color: var(--violet-l); }

.nav__arrow {
  display: inline-block;
  font-size: 10px;
  opacity: .6;
  transition: transform var(--motion) var(--ease);
}
.nav__group-trigger[aria-expanded="true"] .nav__arrow { transform: rotate(180deg); }

/* Accordion prodotti (mobile + tablet drawer) */
.nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--border);
  margin-inline-start: var(--space-3);
}
.nav__group[hidden] { display: none; }
.nav__group a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-mid);
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
}
.nav__group a:hover { background: rgba(59, 110, 248, .08); color: var(--text-on-dark); }
.nav__group-icon { font-size: 18px; flex-shrink: 0; }
.nav__group-name { font-weight: var(--fw-bold); color: var(--text-on-dark); }
.nav__group-sub { display: block; font-size: 11px; color: var(--text-dim); margin-block-start: 1px; }

.nav__drawer-cta { margin-block-start: var(--space-4); }

/* Tablet (768-1023): drawer slide da destra, larghezza 360px (piano §7.1) */
@media (min-width: 768px) {
  .nav__drawer { inset-block-start: 64px; inset-inline-start: auto; inline-size: 360px; max-inline-size: 80vw; }
}

/* Desktop (≥1024): nav inline, dropdown */
@media (min-width: 1024px) {
  .nav__drawer {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    transform: none;
    visibility: visible;
    overflow: visible;
    inset: auto;
    inline-size: auto;
    max-inline-size: none;
    flex: 1;
  }
  .nav__drawer-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
  }
  .nav__hamburger { display: none; }
  .nav__link,
  .nav__group-trigger {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: var(--fw-medium);
    justify-content: flex-start;
  }
  .nav__link.nav__drawer-cta {
    margin-inline-start: auto;
    margin-block-start: 0;
  }
  .nav__group-trigger { gap: 6px; }
  .nav__dropdown { position: relative; }
  .nav__group {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inline-size: 280px;
    max-inline-size: calc(100vw - var(--space-page-x) * 2);
    margin-block-start: 12px;
    background: rgba(8, 14, 52, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    display: none !important;
  }
  /* Bridge invisibile: copre il gap tra trigger e panel, mantiene :hover */
  .nav__group::before {
    content: '';
    position: absolute;
    inset-block-start: -14px;
    inset-inline: 0;
    block-size: 14px;
  }
  .nav__group[hidden] { display: none !important; }
  /* Apertura: hover (mouse), focus-within (tastiera), aria-expanded=true (click/tap) */
  .nav__dropdown:hover .nav__group,
  .nav__dropdown:focus-within .nav__group,
  .nav__group-trigger[aria-expanded="true"] + .nav__group { display: flex !important; }
}

/* Fallback per browser senza backdrop-filter (Android WebView vecchi, Samsung Internet) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(11, 19, 64, .98); }
  .nav__drawer { background: rgba(11, 19, 64, 1); }
  @media (min-width: 1024px) {
    .nav__group { background: rgba(8, 14, 52, 1); }
  }
}


/* ═══════════════ AI WEEK BANNER ═══════════════ */
/* NB: niente margin-block-start, l'offset della nav è gestito dal body. */

.aw-banner {
  position: relative;
  z-index: var(--z-sticky);
  background: linear-gradient(90deg, rgba(139, 31, 186, .2) 0%, rgba(59, 110, 248, .2) 100%);
  border-block-end: 1px solid rgba(139, 31, 186, .25);
  color: var(--text);
}
.aw-banner__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: 10px;
}
.aw-banner__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--violet-l);
  animation: aw-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes aw-pulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.2); }
}
.aw-banner__text {
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}
.aw-banner__text strong { color: var(--violet-l); font-weight: var(--fw-bold); }
.aw-banner__cta {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--violet-l);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--motion) var(--ease);
}
.aw-banner__cta:hover { background: rgba(255, 255, 255, .08); }
.aw-banner__close {
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .6);
  font-size: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
  flex-shrink: 0;
}
.aw-banner__close:hover { background: rgba(255, 255, 255, .08); color: var(--text-on-dark); }
.aw-banner.is-hidden { display: none; }


/* ═══════════════ HERO — pattern HOME (Stripe-style, centered) ═══════════════ */

.hero {
  padding-block: clamp(28px, 5vw, 48px) clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -200px;
  inset-inline-end: -100px;
  inline-size: min(700px, 90vw);
  block-size: min(700px, 90vw);
  background: radial-gradient(ellipse, rgba(59, 110, 248, .13) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset-block-end: -200px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(500px, 90vw);
  block-size: min(400px, 70vw);
  background: radial-gradient(ellipse, rgba(139, 31, 186, .09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero__title {
  max-width: 20ch;
  margin-inline: auto;
}
.hero__lead {
  margin-inline: auto;
  margin-block-start: var(--space-5);
  max-width: 56ch;
}


/* ═══════════════ HERO — pattern PRODUCT (Linear/Vercel-style) ═══════════════ */

.page-hero {
  padding-block: clamp(40px, 8vw, 80px) var(--space-section);
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--border);
  background: var(--bg);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -100px;
  inset-inline-end: 0;
  inline-size: min(500px, 80vw);
  block-size: min(400px, 70vw);
  background: radial-gradient(ellipse, rgba(59, 110, 248, .1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { max-width: 22ch; }
.page-hero__lead {
  margin-block-start: var(--space-5);
  max-width: 60ch;
}

/* Layout 2 col per page-hero (es. Blugea con preview a destra) */
.page-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero__layout {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-8);
  }
}


/* ─── HERO PREVIEW (iframe miniatura sito esterno in cornice browser-style) ─── */
.hero-preview {
  inline-size: 100%;
  max-inline-size: 480px;
  margin-inline: auto;
}
.hero-preview__link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(203, 162, 103, .25);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(203, 162, 103, .12);
  transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.hero-preview__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(203, 162, 103, .25);
}

.hero-preview__bar {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-block-end: 1px solid rgba(203, 162, 103, .15);
  background: rgba(0, 0, 0, .55);
}
.hero-preview__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.hero-preview__dot { inline-size: 11px; block-size: 11px; border-radius: 50%; }
.hero-preview__dot:nth-child(1) { background: #ff5f57; }
.hero-preview__dot:nth-child(2) { background: #febc2e; }
.hero-preview__dot:nth-child(3) { background: #28c840; }
.hero-preview__url {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--blugea-grey);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}

.hero-preview__frame-wrap {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
}
.hero-preview__frame {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1400px;
  block-size: 875px;
  transform: scale(.343);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
}
/* Screenshot statico (sostituisce iframe quando bloccato da X-Frame-Options) */
.hero-preview__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Mockup CSS della home blugea.it (ricostruzione visiva senza screenshot) */
.blugea-mock {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #14171a 0%, #2b2e33 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.blugea-mock__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 9px;
  border-block-end: 1px solid rgba(255,255,255,.05);
}
.blugea-mock__brand {
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  color: #f4e34a;
  letter-spacing: -.04em;
  line-height: 1;
}
.blugea-mock__menu {
  flex: 1;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  text-align: center;
}
.blugea-mock__cta-nav {
  background: linear-gradient(135deg, #4361ee, #7c3aed);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}
.blugea-mock__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 8px;
  text-align: center;
}
.blugea-mock__title {
  font-size: 14px;
  font-weight: 900;
  font-style: italic;
  margin: 0;
  line-height: 1.15;
}
.blugea-mock__title strong { color: #fff; }
.blugea-mock__sub {
  font-size: 12px;
  font-style: italic;
  margin: 0;
  opacity: .9;
}
.blugea-mock__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-block: 2px;
}
.blugea-mock__tags span {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  white-space: nowrap;
}
.blugea-mock__cta {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(22,163,74,.4);
  margin-block-start: 4px;
}
.blugea-mock__rating {
  font-size: 9px;
  color: rgba(255,255,255,.7);
}
.blugea-mock__rating strong { color: #fff; }
.hero-preview__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.25));
  pointer-events: none;
}

.hero-preview__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--blugea-gold), #a8883e);
  color: var(--blugea-dark);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: .02em;
}

/* Page hero — palette per pagina prodotto (override del background) */
.page-hero--blugea {
  background: linear-gradient(160deg, #14171A 0%, #2B2E33 100%);
  border-block-start: 3px solid;
  border-image: linear-gradient(90deg, transparent, var(--blugea-gold) 40%, var(--blugea-grey) 70%, transparent) 1;
}
.page-hero--blugea::before {
  background: radial-gradient(ellipse at 70% 40%, rgba(203, 162, 103, .08) 0%, transparent 60%);
}
.page-hero--suen      { background: linear-gradient(135deg, #1a0c00 0%, #2e1500 50%, #1a0c00 100%); }
.page-hero--studiopro { background: linear-gradient(135deg, #0d0520 0%, #1e0a3a 50%, #2d1260 100%); }
.page-hero--entego    { background: linear-gradient(135deg, #030e20 0%, #071d3a 50%, #0b2c5a 100%); }
.page-hero--normago   { background: linear-gradient(135deg, #021008 0%, #041a0c 50%, #062816 100%); }
.page-hero--doccia    { background: linear-gradient(135deg, #031a18 0%, #063f3a 50%, #031a18 100%); }
.page-hero--ai {
  background: linear-gradient(135deg, #050a1a 0%, #0d0825 50%, #120535 100%);
  border-block-end-color: rgba(139, 31, 186, .2);
}


/* ═══════════════ SECTION SPECIAL — AI (dark violet con radial) ═══════════════ */

.section--ai {
  background: var(--gradient-ai-dark);
  position: relative;
  overflow: hidden;
}
.section--ai::before {
  content: '';
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -80px;
  inline-size: min(600px, 80vw);
  block-size: min(500px, 70vw);
  background: radial-gradient(ellipse, rgba(139, 31, 186, .22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.section--ai > .container { position: relative; z-index: 1; }


/* ═══════════════ SECTION HEADER ═══════════════ */

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
}
.section__title { max-width: 22ch; }
.section__lead  { max-width: 56ch; }


/* ═══════════════ AI TAG (con pulse) ═══════════════ */

.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: rgba(139, 31, 186, .15);
  border: 1px solid rgba(139, 31, 186, .3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--violet-l);
}
.ai-tag__pulse {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--violet-l);
  animation: aw-pulse 1.5s ease-in-out infinite;
}


/* ═══════════════ HERO AGENT STAGE (terminal → arrow → app mock) ═══════════════ */

/* Layout vertical-overlap: terminal sopra, cubo che spunta da SOTTO sovrapposto.
   Il cubo (app-mock) è dietro al terminal e si vede solo nella parte bassa-destra. */
.agent-stage {
  display: block;
  margin-block-start: var(--space-4);
  margin-inline: auto;
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-inline-size: 720px;
}
.agent-stage .agent-panel {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-inline-size: 600px;
  inline-size: 100%;
}
.agent-stage .app-mock {
  position: relative;
  z-index: 1;
  margin-block-start: -52px;        /* sovrappone il bordo basso del terminal */
  margin-inline-start: auto;
  margin-inline-end: 0;
  max-inline-size: 78%;
  inline-size: 78%;
  min-block-size: auto;
}
@media (min-width: 600px) {
  .agent-stage .app-mock {
    margin-block-start: -64px;
    max-inline-size: 70%;
    inline-size: 70%;
  }
}

/* Riduzione paddings e font per modalità "miniatura" su tutti i viewport */
.agent-stage .agent-panel__head { padding: 8px 10px; gap: 8px; }
.agent-stage .agent-panel__dot  { inline-size: 9px; block-size: 9px; }
.agent-stage .agent-panel__title { font-size: 10px; }
.agent-stage .agent-panel__status { font-size: 9px; }
.agent-stage .agent-panel__status::before { inline-size: 6px; block-size: 6px; }
.agent-stage .agent-panel__body {
  padding: var(--space-3) var(--space-4);
  font-size: clamp(9px, 1.3vw, 12px);
  line-height: 1.6;
}

.agent-stage .app-mock__head { padding: 8px 10px; }
.agent-stage .app-mock__brand { font-size: 11px; }
.agent-stage .app-mock__url { font-size: 9px; }
.agent-stage .app-mock__body { grid-template-columns: 48px 1fr; }
.agent-stage .app-mock__sidebar { padding: 10px 6px; gap: 6px; }
.agent-stage .app-mock__nav-item { block-size: 10px; }
.agent-stage .app-mock__content { padding: 10px; gap: 10px; }
.agent-stage .app-mock__title { block-size: 10px; }
.agent-stage .app-mock__card { padding: 8px 6px; gap: 4px; }
.agent-stage .app-mock__card-n { font-size: 11px; }
.agent-stage .app-mock__card-l { block-size: 4px; }
.agent-stage .app-mock__row { padding: 4px 6px; }
.agent-stage .app-mock__chart { block-size: 36px; }

/* Su desktop più ampio: riduzione sidebar standard + paddings un po' più generosi */
@media (min-width: 600px) {
  .agent-stage .app-mock__body { grid-template-columns: 60px 1fr; }
}


/* ─── CUBO 3D VERO — 6 facce, rotazione continua 380°, restart sync col terminal ─── */
.agent-stage { perspective: 1200px; perspective-origin: 50% 35%; }

/* Cubo PERFETTO 380×380×380 fixed (posizioni prismi hardcoded). Scalato visivamente con scale(). */
.cube {
  position: relative;
  inline-size: 380px;
  block-size: 380px;
  --cube-half: 190px;
  --cube-depth: 378px;
  transform-style: preserve-3d;
  animation: cube-rotate 18s linear infinite;
  margin-block-start: -260px;          /* OVERLAP forte: cubo nel mezzo hero */
  margin-inline-start: auto;
  margin-inline-end: -40px;
  margin-block-end: -80px;             /* tira su anche le stats sotto */
  z-index: 5;
  transform-origin: 70% 30%;
}
@media (max-width: 599px) {
  .cube {
    margin-block-start: -200px;
    margin-inline-end: -30px;
    margin-block-end: -60px;
  }
}

.cube__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  /* Default: VETRI semi-trasparenti — un velo viola che lascia vedere DENTRO le figure estruse */
  background: linear-gradient(135deg, rgba(45, 17, 98, .15), rgba(13, 24, 80, .1));
  border: 1px solid rgba(192, 132, 252, .35);
  box-shadow: inset 0 0 30px rgba(139, 31, 186, .12);
}
/* SOLO la front è solida: contiene la dashboard piena */
.cube__face--front {
  background: rgba(8, 14, 40, .94);
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, .5),
    0 8px 24px rgba(0, 0, 0, .4);
  overflow: visible; /* permette agli elementi 3D di estrudersi in profondità */
}
.cube__face--front .app-mock { overflow: visible; }
.cube__face--front .app-mock__body { overflow: visible; }
.cube__face--front .app-mock__content { overflow: visible; }


/* ─── ATMOSFERA INTERNA: grid di riferimento dentro il cubo (sostanza spaziale) ─── */

.cube__floor,
.cube__back-grid {
  position: absolute;
  pointer-events: none;
}

/* Pavimento del cubo: griglia vista dall'alto */
.cube__floor {
  inset-inline: 0;
  inset-block-start: 50%;
  inline-size: 100%;
  block-size: 100%;
  margin-block-start: calc(var(--cube-half) * -1);
  background:
    linear-gradient(90deg, rgba(139, 31, 186, .25) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(180deg, rgba(59, 110, 248, .2) 1px, transparent 1px) 0 0 / 100% 24px,
    radial-gradient(ellipse at center, rgba(139, 31, 186, .15) 0%, transparent 70%);
  transform: rotateX(90deg) translateZ(calc(var(--cube-half) * -1));
}

/* Parete back: griglia di riferimento sul fondo */
.cube__back-grid {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(59, 110, 248, .18) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(180deg, rgba(59, 110, 248, .18) 1px, transparent 1px) 0 0 / 100% 24px;
  transform: translateZ(calc(var(--cube-half) * -1));
  border: 1px solid rgba(59, 110, 248, .2);
  border-radius: var(--radius);
}


/* ─── PARTICELLE 3D — riempiono lo spazio interno del cubo ─── */
.cube__particles {
  position: absolute;
  inset: 20px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.cube__particle {
  position: absolute;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--violet-l);
  box-shadow: 0 0 14px var(--violet-l), 0 0 4px rgba(255, 255, 255, .6);
  transform: translate(-50%, -50%) translateZ(var(--pz, 0));
}
.cube__particle--b { background: var(--blue-l); box-shadow: 0 0 14px var(--blue-l), 0 0 4px rgba(255, 255, 255, .6); }
.cube__particle--g { background: var(--green-l); box-shadow: 0 0 14px var(--green-l), 0 0 4px rgba(255, 255, 255, .6); }
.cube__particle--a { background: var(--amber-l); box-shadow: 0 0 12px var(--amber-l); inline-size: 4px; block-size: 4px; }
.cube__particle--sm { inline-size: 3px; block-size: 3px; box-shadow: 0 0 8px currentColor; }

/* Pulse delle particelle */
@keyframes particle-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
.cube__particle { animation: particle-pulse 2.4s ease-in-out infinite; }
.cube__particle:nth-child(2n) { animation-delay: -0.6s; }
.cube__particle:nth-child(3n) { animation-delay: -1.2s; }
.cube__particle:nth-child(4n) { animation-delay: -1.8s; }

/* Wireframe interno — linee 3D che attraversano il cubo */
.cube__wire {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .35), transparent);
  block-size: 1px;
  inline-size: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
}


/* ─── GHOST LAYERS — echi della dashboard in profondità (riempiono il cubo) ─── */
.cube__ghost {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--ghost-depth, -80px));
  opacity: var(--ghost-opacity, .4);
  pointer-events: none;
  transform-style: preserve-3d;
}
.cube__ghost .app-mock {
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.cube__ghost .app-mock__head { display: none; } /* niente titlebar nei ghost */
.cube__ghost .app-mock__body {
  flex: 1;
  grid-template-columns: 30px 1fr;
  min-block-size: 0;
}
.cube__ghost .app-mock__sidebar { padding: 6px 4px; gap: 4px; }
.cube__ghost .app-mock__nav-item { block-size: 8px; opacity: .6; }
.cube__ghost .app-mock__content { padding: 6px; gap: 6px; }
.cube__ghost .app-mock__title { display: none; }
.cube__ghost .app-mock__card { padding: 4px; }
.cube__ghost .app-mock__card-n { font-size: 9px; }
.cube__ghost .app-mock__card-l { block-size: 3px; }
.cube__ghost .app-mock__chart { block-size: 24px; }
/* I ghost NON estrudono (no animation ::before sui loro elements) */
.cube__ghost .app-mock__card::before,
.cube__ghost .app-mock__bar::after,
.cube__ghost .app-mock__bar::before,
.cube__ghost .app-mock__nav-item::after,
.cube__ghost .app-mock__title::after { display: none; }


/* ─── PRISMI 5-FACCE — pattern blugea_cubo (estrusione vera dentro il cubo) ─── */
/* Ogni .prism è un parallelepipedo SIBLING delle .cube__face, NON child della dashboard.
   La faccia "front" del prisma è omessa (la figura sulla front face del cubo fa da front).
   scaleZ animato da 0.001 a 1 → si allunga dalla front fino a toccare la back. */

.prism {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
  transform-origin: center center 0;
  animation: growExtr 18s linear infinite;
}
.prism > div {
  position: absolute;
  top: 0; left: 0;
  background: var(--col, rgba(139, 31, 186, .25));
  border: 1px solid var(--bdr, rgba(192, 132, 252, .55));
  box-sizing: border-box;
  backface-visibility: visible;
}
.prism > .pb  { width: var(--w); height: var(--h); transform: translateZ(calc(-1 * var(--d))); }
.prism > .pr  { width: var(--d); height: var(--h); left: var(--w); transform-origin: 0 50%; transform: rotateY(90deg); }
.prism > .pl  { width: var(--d); height: var(--h);                 transform-origin: 0 50%; transform: rotateY(90deg); }
.prism > .pt  { width: var(--w); height: var(--d);                 transform-origin: 50% 0; transform: rotateX(-90deg); }
.prism > .pbm { width: var(--w); height: var(--d); top: var(--h);  transform-origin: 50% 0; transform: rotateX(-90deg); }

/* growExtr: cresce in profondità nel primo 25% del ciclo (fallback) */
@keyframes growExtr {
  0%    { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  25%   { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5% { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  100%  { transform: translateZ(190px) scaleZ(0.001); }
}

/* Variants sync col terminal: ogni gruppo di prismi inizia l'estrusione DOPO
   che la rispettiva figura è apparsa sulla front face (terminal scrive,
   front renderizza, poi prisma estrude in profondità) */
.prism--sidebar { animation-name: growExtr-sidebar; }
.prism--title   { animation-name: growExtr-title; }
.prism--card    { animation-name: growExtr-card; }
.prism--bar     { animation-name: growExtr-bar; }
.prism--row     { animation-name: growExtr-row; }
.prism--foot    { animation-name: growExtr-foot; }

/* Sidebar: appare a ~1.9s (linea terminal "agent-2d::ux") → estrude da 2.5s */
@keyframes growExtr-sidebar {
  0%, 14%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  22%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}
/* Title: appare a ~2.6s → estrude da 3s */
@keyframes growExtr-title {
  0%, 17%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  25%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}
/* Cards: appaiono a ~2.7-3.1s → estrudono da 3.5s */
@keyframes growExtr-card {
  0%, 19%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  28%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}
/* Bars: appaiono a ~3.3-3.9s (linea terminal "agent-3d::orchestra") → estrudono da 4.5s */
@keyframes growExtr-bar {
  0%, 25%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  35%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}
/* Row tabella: appare a ~4.2-4.8s (linea "[Build]") → estrudono da 5.5s */
@keyframes growExtr-row {
  0%, 30%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  40%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}
/* Footer panels: appaiono a ~4.9-5.2s → estrudono da 6.0s */
@keyframes growExtr-foot {
  0%, 33%   { transform: translateZ(190px) scaleZ(0.001); animation-timing-function: cubic-bezier(.2,.85,.35,1); }
  43%       { transform: translateZ(190px) scaleZ(1); animation-timing-function: linear; }
  99.5%     { transform: translateZ(190px) scaleZ(1); }
  100%      { transform: translateZ(190px) scaleZ(0.001); }
}

/* Front face cornice scenica: mantieni preserve-3d a tutti i livelli */
.cube__face--front .app-mock,
.cube__face--front .app-mock__body,
.cube__face--front .app-mock__content,
.cube__face--front .app-mock__sidebar,
.cube__face--front .app-mock__cards,
.cube__face--front .app-mock__chart {
  transform-style: preserve-3d;
}
.cube__face--front  { transform: rotateY(0deg)   translateZ(var(--cube-half)); }
.cube__face--right  { animation: extrude-right  18s ease-out infinite; }
.cube__face--back   { animation: extrude-back   18s ease-out infinite; }
.cube__face--left   { animation: extrude-left   18s ease-out infinite; }
.cube__face--top    { animation: extrude-top    18s ease-out infinite; }
.cube__face--bottom { animation: extrude-bottom 18s ease-out infinite; }

/* ESTRUSIONE: le 5 facce side partono attaccate alla front (translateZ 0) e si "estendono"
   crescendo fino a depth massima → si compone il volume estruso della dashboard */
@keyframes extrude-right {
  0%   { transform: rotateY(90deg)  translateZ(0); }
  12%  { transform: rotateY(90deg)  translateZ(var(--cube-half)); }
  92%  { transform: rotateY(90deg)  translateZ(var(--cube-half)); }
  100% { transform: rotateY(90deg)  translateZ(0); }
}
@keyframes extrude-left {
  0%   { transform: rotateY(-90deg) translateZ(0); }
  12%  { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
  92%  { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
  100% { transform: rotateY(-90deg) translateZ(0); }
}
@keyframes extrude-top {
  0%   { transform: rotateX(90deg)  translateZ(0); }
  12%  { transform: rotateX(90deg)  translateZ(var(--cube-half)); }
  92%  { transform: rotateX(90deg)  translateZ(var(--cube-half)); }
  100% { transform: rotateX(90deg)  translateZ(0); }
}
@keyframes extrude-bottom {
  0%   { transform: rotateX(-90deg) translateZ(0); }
  12%  { transform: rotateX(-90deg) translateZ(var(--cube-half)); }
  92%  { transform: rotateX(-90deg) translateZ(var(--cube-half)); }
  100% { transform: rotateX(-90deg) translateZ(0); }
}
@keyframes extrude-back {
  0%   { transform: rotateY(180deg) translateZ(0); }
  12%  { transform: rotateY(180deg) translateZ(var(--cube-half)); }
  92%  { transform: rotateY(180deg) translateZ(var(--cube-half)); }
  100% { transform: rotateY(180deg) translateZ(0); }
}

/* App-mock dentro la faccia front: fillzig il quadrato, no decorazioni proprie */
.cube__face .app-mock {
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  max-inline-size: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
}
.cube__face .app-mock__body { flex: 1; min-block-size: 0; grid-template-columns: 38px 1fr; }
.cube__face .app-mock__content { gap: 8px; padding: 8px; }
.cube__face .app-mock__chart { block-size: 32px; }

@keyframes cube-rotate {
  /* scale(.7) per renderlo più piccolo, rotateX -12° tilt + rotateY -380° */
  from { transform: scale(.7) rotateX(-12deg) rotateY(0deg); }
  to   { transform: scale(.7) rotateX(-12deg) rotateY(-380deg); }
}
@media (max-width: 599px) {
  @keyframes cube-rotate {
    from { transform: scale(.55) rotateX(-12deg) rotateY(0deg); }
    to   { transform: scale(.55) rotateX(-12deg) rotateY(-380deg); }
  }
}


/* ─── Contenuti delle altre 3 facce del cubo (3 livelli del gestionale) ─── */

/* RIGHT — Calendario (griglia eventi) */
.cube-side {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.cube-side__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .25);
}
.cube-side__head::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
}
.cube-side--cal .cube-side__head { color: var(--blue-l); }
.cube-side--cal .cube-side__head::before { background: var(--blue-l); }
.cube-side--code .cube-side__head { color: var(--green-l); }
.cube-side--code .cube-side__head::before { background: var(--green-l); }
.cube-side--tasks .cube-side__head { color: var(--amber-l); }
.cube-side--tasks .cube-side__head::before { background: var(--amber-l); }

.cube-side__body { padding: 10px; flex: 1; min-block-size: 0; overflow: hidden; }

/* Calendario griglia 7×4 */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  block-size: 100%;
}
.cal-grid span {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 3px;
  min-block-size: 18px;
}
.cal-grid span.is-event-b { background: rgba(59, 110, 248, .35); border-color: rgba(59, 110, 248, .55); }
.cal-grid span.is-event-v { background: rgba(139, 31, 186, .35); border-color: rgba(139, 31, 186, .55); }
.cal-grid span.is-event-g { background: rgba(22, 163, 74, .35);  border-color: rgba(22, 163, 74, .55); }
.cal-grid span.is-today   { background: rgba(232, 0, 28, .5);    border-color: rgba(232, 0, 28, .8); box-shadow: 0 0 6px rgba(232, 0, 28, .6); }

/* Scheda Socio (back face — sostituisce code) */
.socio-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
}
.socio-card__avatar {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  align-self: flex-start;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(139, 31, 186, .4);
}
.socio-card__name { block-size: 10px; inline-size: 70%; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.socio-card__meta { block-size: 6px; inline-size: 50%; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.socio-card__row {
  display: flex;
  gap: 6px;
  margin-block-start: 4px;
}
.socio-card__chip {
  flex: 1;
  padding: 5px 6px;
  text-align: center;
  font-size: 9px;
  font-weight: var(--fw-bold);
  border-radius: 4px;
  background: rgba(59, 110, 248, .15);
  border: 1px solid rgba(59, 110, 248, .3);
  color: var(--blue-l);
}
.socio-card__chip--g { background: rgba(22, 163, 74, .15);  border-color: rgba(22, 163, 74, .3);  color: var(--green-l); }
.socio-card__chip--a { background: rgba(245, 160, 0, .15);  border-color: rgba(245, 160, 0, .3);  color: var(--amber-l); }
.socio-card__chip--v { background: rgba(139, 31, 186, .15); border-color: rgba(139, 31, 186, .3); color: var(--violet-l); }

/* KPI grandi (top face) */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  block-size: 100%;
}
.kpi-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.kpi-cell__n {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: var(--fw-black);
  background: linear-gradient(135deg, var(--violet-l), var(--blue-l));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.kpi-cell__l {
  inline-size: 70%;
  block-size: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .15);
}

/* Log accessi (bottom face) */
.log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
}
.log-list__row {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .03);
  border-radius: 3px;
}
.log-list__time {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: var(--text-dim);
}
.log-list__bar { block-size: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); }
.log-list__tag {
  font-size: 8px;
  font-weight: var(--fw-bold);
  text-align: center;
  padding: 2px 4px;
  border-radius: 2px;
}
.log-list__tag--in  { background: rgba(22, 163, 74, .2);  color: var(--green-l); }
.log-list__tag--out { background: rgba(245, 160, 0, .2);  color: var(--amber-l); }

/* Tasks list */
.tasks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
}
.tasks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .03);
}
.tasks-list li::before {
  content: '';
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tasks-list li.is-done  { color: rgba(255, 255, 255, .8); }
.tasks-list li.is-done::before { background: var(--green-l); box-shadow: 0 0 6px var(--green-l); }
.tasks-list li.is-doing::before { background: var(--amber-l); animation: aw-pulse 1.5s ease-in-out infinite; }
.tasks-list li.is-todo::before  { background: rgba(255, 255, 255, .15); }
.tasks-list li span {
  flex: 1;
  block-size: 6px;
  border-radius: 2px;
  background: currentColor;
  opacity: .25;
}

/* "In costruzione" — loop sync con cube period 18s (le facce si ricostruiscono ad ogni giro) */
.cube-side--cal .cal-grid span,
.cube-side--socio > *,
.cube-side--tasks .tasks-list li,
.cube-side--kpi .kpi-cell,
.cube-side--log .log-list__row {
  opacity: 0;
  animation: cube-build-loop 18s linear infinite;
}

/* RIGHT (calendario) frontale a ~4.3s (rotateY -90°) */
.cube-side--cal .cal-grid span:nth-child(1)  { animation-delay: 4.3s; }
.cube-side--cal .cal-grid span:nth-child(2)  { animation-delay: 4.4s; }
.cube-side--cal .cal-grid span:nth-child(3)  { animation-delay: 4.5s; }
.cube-side--cal .cal-grid span:nth-child(4)  { animation-delay: 4.6s; }
.cube-side--cal .cal-grid span:nth-child(5)  { animation-delay: 4.7s; }
.cube-side--cal .cal-grid span:nth-child(6)  { animation-delay: 4.8s; }
.cube-side--cal .cal-grid span:nth-child(7)  { animation-delay: 4.9s; }
.cube-side--cal .cal-grid span:nth-child(n+8){ animation-delay: 5.0s; }

/* BACK (socio) frontale a ~8.5s (rotateY -180°) */
.cube-side--socio > *:nth-child(1) { animation-delay: 8.5s; }
.cube-side--socio > *:nth-child(2) { animation-delay: 8.7s; }
.cube-side--socio > *:nth-child(3) { animation-delay: 8.9s; }
.cube-side--socio > *:nth-child(4) { animation-delay: 9.1s; }

/* LEFT (tasks) frontale a ~12.8s (rotateY -270°) */
.cube-side--tasks .tasks-list li:nth-child(1) { animation-delay: 12.8s; }
.cube-side--tasks .tasks-list li:nth-child(2) { animation-delay: 13.0s; }
.cube-side--tasks .tasks-list li:nth-child(3) { animation-delay: 13.2s; }
.cube-side--tasks .tasks-list li:nth-child(4) { animation-delay: 13.4s; }
.cube-side--tasks .tasks-list li:nth-child(5) { animation-delay: 13.6s; }

/* TOP (KPI) sempre visibile dall'alto, costruzione a inizio ciclo */
.cube-side--kpi .kpi-cell:nth-child(1) { animation-delay: 0.5s; }
.cube-side--kpi .kpi-cell:nth-child(2) { animation-delay: 0.8s; }
.cube-side--kpi .kpi-cell:nth-child(3) { animation-delay: 1.1s; }
.cube-side--kpi .kpi-cell:nth-child(4) { animation-delay: 1.4s; }

/* BOTTOM (log) costruzione a metà ciclo */
.cube-side--log .log-list__row:nth-child(1) { animation-delay: 9.0s; }
.cube-side--log .log-list__row:nth-child(2) { animation-delay: 9.2s; }
.cube-side--log .log-list__row:nth-child(3) { animation-delay: 9.4s; }
.cube-side--log .log-list__row:nth-child(4) { animation-delay: 9.6s; }
.cube-side--log .log-list__row:nth-child(5) { animation-delay: 9.8s; }

@keyframes cube-build-loop {
  0%   { opacity: 0; transform: translateY(4px) scale(.94); }
  3%   { opacity: 1; transform: translateY(0) scale(1); }
  92%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(4px) scale(.94); }
}

/* Agent-panel: lieve tilt verso il cubo */
.agent-stage .agent-panel {
  transform-style: preserve-3d;
  transform: rotateY(4deg) rotateX(-1deg);
}

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; transform: rotateX(6deg) rotateY(-22deg); }
  .cube-side--cal .cal-grid span,
  .cube-side--code .code-line,
  .cube-side--tasks .tasks-list li { animation: none; opacity: 1; transform: none; }
  .agent-stage .agent-panel { transform: none; }
}


/* ─── Freccia animata (mobile: giù · desktop: destra) ─── */
.agent-arrow {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 48px;
}
@media (min-width: 900px) {
  .agent-arrow { inline-size: 80px; block-size: auto; }
}
.agent-arrow__svg {
  inline-size: 56px;
  block-size: 48px;
  overflow: visible;
  transform: rotate(90deg);
}
@media (min-width: 900px) {
  .agent-arrow__svg { transform: rotate(0deg); inline-size: 80px; }
}
.agent-arrow__line {
  stroke: var(--violet-l);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, .5));
  animation: arrow-draw 2.4s ease-in-out infinite;
}
.agent-arrow__head {
  fill: var(--violet-l);
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, .6));
  opacity: 0;
  animation: arrow-head 2.4s ease-in-out infinite;
}
@keyframes arrow-draw {
  0%   { stroke-dashoffset: 60; }
  45%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes arrow-head {
  0%, 35%  { opacity: 0; transform: translateX(-4px); }
  50%, 85% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(0); }
}


/* ─── App Mock (gestionale Blugea che si costruisce) ─── */
.app-mock {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 60px rgba(59, 110, 248, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-block-size: 280px;
}
.app-mock__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-block-end: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .25);
  font-size: 11px;
}
.app-mock__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-extra);
  color: var(--blugea-gold);
  letter-spacing: -.02em;
  font-size: 13px;
}
.app-mock__brand::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--blugea-gold);
}
.app-mock__url {
  margin-inline-start: auto;
  color: rgba(255, 255, 255, .35);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.app-mock__body {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0;
  flex: 1;
}
.app-mock__sidebar {
  background: rgba(0, 0, 0, .2);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-inline-end: 1px solid rgba(255, 255, 255, .05);
}
.app-mock__nav-item {
  block-size: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  opacity: 0;
  animation: app-pop 0.4s ease-out forwards;
}
.app-mock__nav-item--active {
  background: linear-gradient(90deg, rgba(203, 162, 103, .35), rgba(203, 162, 103, .15));
}
.app-mock__content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.app-mock__title {
  block-size: 14px;
  inline-size: 60%;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
  opacity: 0;
  animation: app-pop 0.4s ease-out forwards;
}
.app-mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.app-mock__card {
  background: rgba(59, 110, 248, .08);
  border: 1px solid rgba(59, 110, 248, .18);
  border-radius: 6px;
  padding: 10px 8px;
  opacity: 0;
  transform: scale(.92);
  animation: app-card-in 0.5s ease-out forwards;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-mock__card-n {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: var(--fw-black);
  color: var(--blue-l);
  line-height: 1;
}
.app-mock__card-l {
  block-size: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.app-mock__card:nth-child(1) { border-color: rgba(203, 162, 103, .25); background: rgba(203, 162, 103, .08); }
.app-mock__card:nth-child(1) .app-mock__card-n { color: var(--blugea-gold); }
.app-mock__card:nth-child(2) { border-color: rgba(74, 222, 128, .22); background: rgba(22, 163, 74, .08); }
.app-mock__card:nth-child(2) .app-mock__card-n { color: var(--green-l); }
.app-mock__card:nth-child(3) { border-color: rgba(192, 132, 252, .25); background: rgba(139, 31, 186, .08); }
.app-mock__card:nth-child(3) .app-mock__card-n { color: var(--violet-l); }

.app-mock__table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-mock__row {
  display: grid;
  grid-template-columns: 14px 1fr 40px 16px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .03);
  opacity: 0;
  animation: cube-build-loop 18s linear infinite;
}

/* Footer panel (2 mini-stat) */
.app-mock__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.app-mock__foot-panel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  animation: cube-build-loop 18s linear infinite;
}
.app-mock__foot-n {
  font-size: 14px;
  font-weight: var(--fw-black);
  background: linear-gradient(135deg, var(--green-l), var(--teal-l));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.app-mock__foot-l {
  block-size: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.app-mock__avatar {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}
.app-mock__row-name {
  block-size: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .25);
}
.app-mock__row-meta {
  block-size: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.app-mock__row-badge {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--green-l);
  box-shadow: 0 0 6px var(--green-l);
}

.app-mock__chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  block-size: 48px;
  align-items: end;
  padding-block-start: 6px;
}
.app-mock__bar {
  background: linear-gradient(180deg, var(--violet-l), var(--blue-l));
  border-radius: 3px 3px 0 0;
  opacity: 0;
  animation: app-bar 0.5s ease-out forwards;
  transform-origin: bottom;
}
.app-mock__bar:nth-child(1) { block-size: 30%; }
.app-mock__bar:nth-child(2) { block-size: 55%; }
.app-mock__bar:nth-child(3) { block-size: 42%; }
.app-mock__bar:nth-child(4) { block-size: 70%; }
.app-mock__bar:nth-child(5) { block-size: 58%; }
.app-mock__bar:nth-child(6) { block-size: 85%; }
.app-mock__bar:nth-child(7) { block-size: 95%; }

/* Sync col terminal: ogni linea che appare nel terminal "renderizza" la figura corrispondente sulla front face */
/* Linea terminal "agent-2d::ux" (~1.9s) → sidebar items 1.9-2.3s */
.app-mock__sidebar .app-mock__nav-item:nth-child(1) { animation-delay: 1.9s; }
.app-mock__sidebar .app-mock__nav-item:nth-child(2) { animation-delay: 2.0s; }
.app-mock__sidebar .app-mock__nav-item:nth-child(3) { animation-delay: 2.1s; }
.app-mock__sidebar .app-mock__nav-item:nth-child(4) { animation-delay: 2.2s; }
.app-mock__sidebar .app-mock__nav-item:nth-child(5) { animation-delay: 2.3s; }
/* Linea "agent-2d::data" (~2.6s) → title + cards 2.6-3.1s */
.app-mock__title { animation-delay: 2.6s; }
.app-mock__cards .app-mock__card:nth-child(1) { animation-delay: 2.7s; }
.app-mock__cards .app-mock__card:nth-child(2) { animation-delay: 2.9s; }
.app-mock__cards .app-mock__card:nth-child(3) { animation-delay: 3.1s; }
/* Linea "[Build] Generazione gestionale" (~4.2s) → tabella rows 4.2-4.8s */
.app-mock__table .app-mock__row:nth-child(1) { animation-delay: 4.2s; }
.app-mock__table .app-mock__row:nth-child(2) { animation-delay: 4.4s; }
.app-mock__table .app-mock__row:nth-child(3) { animation-delay: 4.6s; }
.app-mock__table .app-mock__row:nth-child(4) { animation-delay: 4.8s; }
/* Linea "dashboard.html +127" (~4.9s) → footer panels 4.9-5.2s */
.app-mock__footer .app-mock__foot-panel:nth-child(1) { animation-delay: 4.9s; }
.app-mock__footer .app-mock__foot-panel:nth-child(2) { animation-delay: 5.2s; }
/* Linea "agent-3d::orchestra" (~3.3s) → bars chart 3.3-3.9s */
.app-mock__chart .app-mock__bar:nth-child(1) { animation-delay: 3.3s; }
.app-mock__chart .app-mock__bar:nth-child(2) { animation-delay: 3.4s; }
.app-mock__chart .app-mock__bar:nth-child(3) { animation-delay: 3.5s; }
.app-mock__chart .app-mock__bar:nth-child(4) { animation-delay: 3.6s; }
.app-mock__chart .app-mock__bar:nth-child(5) { animation-delay: 3.7s; }
.app-mock__chart .app-mock__bar:nth-child(6) { animation-delay: 3.8s; }
.app-mock__chart .app-mock__bar:nth-child(7) { animation-delay: 3.9s; }

@keyframes app-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes app-card-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes app-bar {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-mock__nav-item,
  .app-mock__title,
  .app-mock__card,
  .app-mock__row,
  .app-mock__bar,
  .agent-arrow__line,
  .agent-arrow__head { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════ HERO AGENT PANEL (Cursor-style live demo) ═══════════════ */

.agent-panel {
  max-inline-size: 640px;
  inline-size: 100%;
  margin-inline: auto;
  margin-block-start: var(--space-7);
  background: rgba(8, 14, 40, .82);
  border: 1px solid rgba(139, 31, 186, .28);
  border-radius: var(--radius);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 60px rgba(139, 31, 186, .18);
  overflow: hidden;
  text-align: start;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}
.agent-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-block-end: 1px solid rgba(139, 31, 186, .18);
  background: rgba(0, 0, 0, .25);
}
.agent-panel__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.agent-panel__dot {
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
}
.agent-panel__dot:nth-child(1) { background: #ff5f57; }
.agent-panel__dot:nth-child(2) { background: #febc2e; }
.agent-panel__dot:nth-child(3) { background: #28c840; }
.agent-panel__title {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.agent-panel__status {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-l);
  flex-shrink: 0;
}
.agent-panel__status::before {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--green-l);
  box-shadow: 0 0 8px var(--green-l);
  animation: aw-pulse 1.5s ease-in-out infinite;
}

.agent-panel__body {
  padding: var(--space-5);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
  font-size: clamp(11px, 1.4vw, 13px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
  margin: 0;
  overflow-x: auto;
  text-align: start;
}
.agent-line {
  display: block;
  opacity: 0;
  transform: translateY(4px);
  animation: agent-loop 18s linear infinite;
  white-space: pre-wrap;
  word-break: break-word;
}
.agent-line--cmd  { color: var(--violet-l); font-weight: var(--fw-bold); }
.agent-line--head { color: var(--blue-l);   font-weight: var(--fw-bold); margin-block-start: 8px; }
.agent-line--ok::before { content: '  ✓ '; color: var(--green-l); font-weight: 700; }
.agent-line--done { color: var(--amber-l);  font-weight: var(--fw-bold); margin-block-start: 8px; }
.agent-time     { color: rgba(255, 255, 255, .35); margin-inline-start: var(--space-3); font-size: .92em; }
.agent-diff-add { color: var(--green-l); font-weight: var(--fw-bold); }
.agent-diff-rem { color: var(--red-l);   font-weight: var(--fw-bold); }

/* Sequenza di apparizione delle righe (effetto live agent) */
.agent-line:nth-child(1)  { animation-delay: 0.4s; }
.agent-line:nth-child(2)  { animation-delay: 1.2s; }
.agent-line:nth-child(3)  { animation-delay: 1.9s; }
.agent-line:nth-child(4)  { animation-delay: 2.6s; }
.agent-line:nth-child(5)  { animation-delay: 3.3s; }
.agent-line:nth-child(6)  { animation-delay: 4.2s; }
.agent-line:nth-child(7)  { animation-delay: 4.9s; }
.agent-line:nth-child(8)  { animation-delay: 5.6s; }
.agent-line:nth-child(9)  { animation-delay: 6.3s; }
.agent-line:nth-child(10) { animation-delay: 7.2s; }

@keyframes agent-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Loop sync col cubo (18s): linea invisibile a inizio ciclo, appare al suo delay, resta visibile, sparisce a fine */
@keyframes agent-loop {
  0%   { opacity: 0; transform: translateY(4px); }
  3%   { opacity: 1; transform: translateY(0); }
  92%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}

.agent-cursor {
  display: inline-block;
  inline-size: 7px;
  block-size: 1em;
  background: var(--violet-l);
  margin-inline-start: 4px;
  vertical-align: text-bottom;
  opacity: 0;
  animation: agent-cursor-show 0.1s linear 7.5s forwards,
             agent-cursor-blink 1s steps(2) 7.5s infinite;
}
@keyframes agent-cursor-show { to { opacity: 1; } }
@keyframes agent-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-line,
  .agent-panel__status::before,
  .agent-cursor { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════ AI SHOWCASE (home — sezione "wow" AI-native) ═══════════════ */

.ai-showcase__head {
  text-align: center;
  align-items: center;
  margin-block-end: var(--space-7);
}
.ai-showcase__head .section__title,
.ai-showcase__head .lead { margin-inline: auto; }
.ai-showcase__head .section__title { max-width: none; }
.ai-showcase__head .lead { max-width: 64ch; color: rgba(255, 255, 255, .65); }

.ai-constellation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block-end: var(--space-8);
  list-style: none;
  padding: 0;
}
.ai-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(139, 31, 186, .1);
  border: 1px solid rgba(139, 31, 186, .25);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  position: relative;
  animation: ai-float 6s ease-in-out infinite;
  will-change: transform;
}
.ai-agent:nth-child(2n) { animation-delay: -1.2s; }
.ai-agent:nth-child(3n) { animation-delay: -2.4s; }
.ai-agent:nth-child(4n) { animation-delay: -3.6s; }
.ai-agent:nth-child(5n) { animation-delay: -4.8s; }

.ai-agent--violet { background: rgba(139, 31, 186, .12); border-color: rgba(139, 31, 186, .35); }
.ai-agent--blue   { background: rgba(59, 110, 248, .12); border-color: rgba(59, 110, 248, .35); }
.ai-agent--amber  { background: rgba(245, 160, 0, .12);  border-color: rgba(245, 160, 0, .35); }
.ai-agent--teal   { background: rgba(14, 165, 160, .12); border-color: rgba(14, 165, 160, .35); }
.ai-agent--green  { background: rgba(22, 163, 74, .12);  border-color: rgba(22, 163, 74, .35); }
.ai-agent--red    { background: rgba(232, 0, 28, .1);    border-color: rgba(232, 0, 28, .3); }

.ai-agent__pulse {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--violet-l);
  flex-shrink: 0;
  animation: aw-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px currentColor;
}
.ai-agent--violet .ai-agent__pulse { background: var(--violet-l); color: var(--violet-l); }
.ai-agent--blue   .ai-agent__pulse { background: var(--blue-l);   color: var(--blue-l); }
.ai-agent--amber  .ai-agent__pulse { background: var(--amber-l);  color: var(--amber-l); }
.ai-agent--teal   .ai-agent__pulse { background: var(--teal-l);   color: var(--teal-l); }
.ai-agent--green  .ai-agent__pulse { background: var(--green-l);  color: var(--green-l); }
.ai-agent--red    .ai-agent__pulse { background: var(--red-l);    color: var(--red-l); }

@keyframes ai-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.ai-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-block-start: var(--space-7);
  border-block-start: 1px solid rgba(139, 31, 186, .18);
}
@media (min-width: 640px) {
  .ai-numbers { grid-template-columns: repeat(4, 1fr); }
}
.ai-number { text-align: center; padding-block: var(--space-2); }
.ai-number__n {
  display: block;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: var(--fw-black);
  background: linear-gradient(135deg, var(--violet-l) 0%, var(--blue-l) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  letter-spacing: -.02em;
}
.ai-number__l {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin-block-start: var(--space-2);
  font-weight: var(--fw-medium);
}

.ai-showcase__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-8);
}

/* Linee gradient animate sopra/sotto la constellation (orbita di fondo) */
.ai-showcase__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ai-showcase__rings::before,
.ai-showcase__rings::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: min(800px, 120vw);
  block-size: min(800px, 120vw);
  margin-inline-start: calc(min(800px, 120vw) / -2);
  margin-block-start: calc(min(800px, 120vw) / -2);
  border-radius: 50%;
  border: 1px solid rgba(139, 31, 186, .12);
  animation: ai-orbit 22s linear infinite;
}
.ai-showcase__rings::after {
  inline-size: min(560px, 90vw);
  block-size: min(560px, 90vw);
  margin-inline-start: calc(min(560px, 90vw) / -2);
  margin-block-start: calc(min(560px, 90vw) / -2);
  border-color: rgba(59, 110, 248, .14);
  animation-duration: 18s;
  animation-direction: reverse;
}
@keyframes ai-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-agent,
  .ai-agent__pulse,
  .ai-showcase__rings::before,
  .ai-showcase__rings::after { animation: none; }
}


/* ═══════════════ PRODUCT CARD (home) ═══════════════ */

.prod {
  display: flex;
  flex-direction: column;
  background: var(--lt-surf);
  border: 1px solid var(--lt-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--lt-mid);
  text-decoration: none;
  transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.prod__top {
  block-size: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-block-end: 3px solid var(--prod-accent, var(--blue));
  background: var(--prod-bg, var(--lt-bg));
}
.prod__name {
  font-size: clamp(26px, 4vw, 32px);
  font-weight: var(--fw-extra);
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--prod-text, var(--lt-text));
}
.prod__name-accent { color: var(--prod-accent, var(--blue)); }
.prod__sub {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--prod-accent, var(--blue));
  opacity: .65;
}

.prod__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.prod__body h3 {
  font-size: 17px;
  font-weight: var(--fw-extra);
  color: var(--lt-text);
}
.prod__body p {
  font-size: var(--fs-small);
  color: var(--lt-mid);
  line-height: var(--lh-body);
  flex: 1;
}
.prod__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--prod-link, var(--blue));
  margin-block-start: var(--space-2);
}


/* ═══════════════ PRODUCT GROUP (Sport Suite ecc.) ═══════════════ */

.prod-group {
  background: rgba(59, 110, 248, .05);
  border: 1px solid rgba(59, 110, 248, .12);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  margin-block-start: var(--space-7);
}
.prod-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}
.prod-group__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--blue);
  opacity: .85;
}
.prod-group__desc {
  font-size: var(--fs-small);
  color: var(--lt-mid);
}


/* ═══════════════ PLUGIN CARD ═══════════════ */

.plugin {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.plugin::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--plugin-bar, linear-gradient(90deg, var(--blue), var(--violet)));
}
.plugin__icon { font-size: 26px; }
.plugin__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}
.plugin__desc {
  font-size: var(--fs-small);
  color: var(--text-mid);
  line-height: var(--lh-body);
  flex: 1;
}
.plugin__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-2);
  border-block-start: 1px solid var(--border);
}
.plugin__badge strong { color: var(--text-mid); font-weight: var(--fw-bold); }

.plugin--whatsapp { --plugin-bar: linear-gradient(90deg, #25d366, #128c7e); }
.plugin--pay      { --plugin-bar: linear-gradient(90deg, var(--amber), var(--red)); }
.plugin--sms      { --plugin-bar: linear-gradient(90deg, var(--blue), var(--violet)); }

/* OVERRIDE FORZATO leggibilità plugin in section--light (selectors altissima specificità) */
section.section--light article.plugin,
section.section section.section--light article.plugin {
  background: rgba(8, 14, 40, .95) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .85) !important;
}
section.section--light article.plugin .plugin__title,
section.section--light article.plugin h3,
.section--light .plugin .plugin__title,
.section--light .plugin h3 {
  color: #ffffff !important;
}
section.section--light article.plugin .plugin__desc,
section.section--light article.plugin p,
.section--light .plugin .plugin__desc,
.section--light .plugin p {
  color: rgba(255, 255, 255, .85) !important;
}
section.section--light article.plugin .plugin__badge,
.section--light .plugin .plugin__badge {
  color: rgba(255, 255, 255, .65) !important;
  border-block-start: 1px solid rgba(255, 255, 255, .12) !important;
}
section.section--light article.plugin .plugin__badge strong,
.section--light .plugin .plugin__badge strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}


/* ═══════════════ DEADLINE CARD (NormaGo) ═══════════════ */

.deadline {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.deadline:hover { background: rgba(14, 165, 160, .08); border-color: rgba(14, 165, 160, .25); }
.deadline__icon { font-size: 22px; }
.deadline__title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}
.deadline__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: var(--lh-body);
  flex: 1;
}
.deadline__status {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.deadline__status--live { background: rgba(74, 222, 128, .15); color: var(--green-l); }
.deadline__status--q4   { background: rgba(245, 160, 0, .15); color: var(--amber-l); }
.deadline__status--2027 { background: rgba(192, 132, 252, .15); color: var(--violet-l); }


/* ═══════════════ PROCESS CARD (AI page) ═══════════════ */

.proc {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.proc:hover { background: rgba(139, 31, 186, .1); border-color: rgba(139, 31, 186, .25); }
.proc__icon { font-size: 24px; }
.proc__title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}
.proc__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  line-height: var(--lh-body);
}


/* ═══════════════ WORKFLOW VISUALIZER (verticale, §7.7) ═══════════════ */

.workflow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(139, 31, 186, .18);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.workflow__title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--violet-l);
  opacity: .7;
  margin-block-end: var(--space-3);
}
.workflow__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--wf-border, rgba(255, 255, 255, .08));
  background: var(--wf-bg, rgba(255, 255, 255, .02));
}
.workflow__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-mid);
  align-self: flex-start;
}
.workflow__step strong {
  font-size: 14px;
  color: var(--text-on-dark);
}
.workflow__step p {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  line-height: var(--lh-body);
}
.workflow__step--input {
  --wf-bg: rgba(59, 110, 248, .1);
  --wf-border: rgba(59, 110, 248, .25);
}
.workflow__step--input .workflow__badge { color: var(--blue-l); }

.workflow__step--parallel {
  --wf-bg: rgba(139, 31, 186, .06);
  --wf-border: rgba(139, 31, 186, .2);
}
.workflow__step--parallel .workflow__badge { color: var(--violet-l); text-align: center; align-self: stretch; }
.workflow__agents {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-block-start: var(--space-2);
}
.workflow__agent {
  background: rgba(139, 31, 186, .1);
  border: 1px solid rgba(139, 31, 186, .25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}
.workflow__agent small {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, .5);
  margin-block-start: 2px;
}

.workflow__step--synthesis {
  --wf-bg: rgba(245, 160, 0, .06);
  --wf-border: rgba(245, 160, 0, .2);
}
.workflow__step--synthesis .workflow__badge { color: var(--amber-l); }

.workflow__step--output {
  --wf-bg: rgba(22, 163, 74, .06);
  --wf-border: rgba(22, 163, 74, .22);
}
.workflow__step--output .workflow__badge { color: var(--green-l); }

.workflow__arrow {
  text-align: center;
  color: rgba(255, 255, 255, .2);
  font-size: 16px;
  line-height: 1;
  user-select: none;
}


/* ═══════════════ TIMELINE (Chi Siamo) ═══════════════ */

.timeline {
  list-style: none;
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--lt-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--space-6) * -1 - 1px - 6px);
  inset-block-start: 6px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--lt-surf);
  box-shadow: 0 0 0 2px var(--lt-bg);
}
.timeline__year {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--blue);
  margin-block-end: 4px;
}
.timeline__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--lt-text);
  margin-block-end: 4px;
}
.timeline__desc {
  font-size: 13px;
  color: var(--lt-mid);
  line-height: var(--lh-body);
}


/* ═══════════════ TEAM CARD (AI page) ═══════════════ */

.team {
  background: rgba(139, 31, 186, .07);
  border: 1px solid rgba(139, 31, 186, .18);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.team::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--team-bar, linear-gradient(90deg, var(--violet), var(--blue)));
}
.team--engineer::before { background: linear-gradient(90deg, var(--blue), var(--teal)); }

.team__avatar {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(139, 31, 186, .3), rgba(59, 110, 248, .3));
  border: 1px solid rgba(139, 31, 186, .3);
}
.team--engineer .team__avatar {
  background: linear-gradient(135deg, rgba(59, 110, 248, .3), rgba(14, 165, 160, .3));
  border-color: rgba(59, 110, 248, .3);
}

.team__role-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(139, 31, 186, .15);
  border: 1px solid rgba(139, 31, 186, .28);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--violet-l);
}
.team--engineer .team__role-badge {
  background: rgba(59, 110, 248, .12);
  border-color: rgba(59, 110, 248, .25);
  color: var(--blue-l);
}

.team__name {
  font-size: 20px;
  font-weight: var(--fw-black);
  color: var(--text-on-dark);
  letter-spacing: -.02em;
}
.team__title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--violet-l);
}
.team--engineer .team__title { color: var(--blue-l); }

.team__bio {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  line-height: var(--lh-loose);
}
.team__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team__tag {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .55);
}


/* ═══════════════ CTA SECTION ═══════════════ */

.cta {
  background: var(--gradient-cta);
  padding-block: clamp(64px, 10vw, 100px);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border);
}
.cta::before {
  content: '';
  position: absolute;
  inset-block-start: -80px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(600px, 90vw);
  block-size: min(400px, 70vw);
  background: radial-gradient(ellipse, rgba(232, 0, 28, .12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.cta__title { max-width: 22ch; }
.cta__lead  { max-width: 56ch; }


/* ═══════════════ CI-CARD (contatti) ═══════════════ */

.ci-card {
  background: var(--lt-surf);
  border: 1px solid var(--lt-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  min-height: 76px;
}
.ci-card__icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-block-start: 2px;
}
.ci-card__title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--lt-text);
  margin-block-end: 3px;
}
.ci-card__text {
  font-size: 13px;
  color: var(--lt-mid);
  line-height: var(--lh-body);
}
.ci-card__text a { color: var(--blue); text-decoration: none; }
.ci-card__text a:hover { text-decoration: underline; }
.ci-card__text small {
  display: block;
  font-size: 11px;
  opacity: .75;
  margin-block-start: 2px;
}

.ci-callout {
  border-radius: var(--radius);
  padding: var(--space-5);
}
.ci-callout--demo {
  background: linear-gradient(135deg, #071a0e, #0c2a17);
  border: 1px solid rgba(22, 163, 74, .18);
}
.ci-callout--demo .ci-callout__title { color: var(--green-l); }
.ci-callout--aw {
  background: linear-gradient(135deg, rgba(139, 31, 186, .15), rgba(59, 110, 248, .12));
  border: 1px solid rgba(139, 31, 186, .25);
}
.ci-callout--aw .ci-callout__title { color: var(--violet-l); }
.ci-callout__title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  margin-block-end: 6px;
}
.ci-callout__text {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  line-height: var(--lh-body);
}
.ci-callout--demo + .ci-callout--aw,
.ci-callout--aw + .ci-callout--demo { margin-block-start: var(--space-4); }


/* ═══════════════ FOOTER ═══════════════ */

.footer {
  background: var(--bg-3);
  padding-block: var(--space-section) var(--space-7);
  border-block-start: 1px solid var(--border);
}
.footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-block-end: var(--space-7);
  margin-block-end: var(--space-6);
  border-block-end: 1px solid var(--border);
}
@media (min-width: 768px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer__brand p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: var(--lh-loose);
  margin-block-start: var(--space-3);
  max-width: 36ch;
}
.footer__logo {
  font-size: 20px;
  font-weight: var(--fw-black);
  letter-spacing: -.04em;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
}
.footer__dot { color: var(--red); }
.footer__bar { margin-block-start: var(--space-4); inline-size: 80px; }

.footer__col h4 {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-block-end: var(--space-4);
}
.footer__col a {
  display: block;
  font-size: 13px;
  color: var(--text-mid);
  padding-block: 6px;
  min-height: 32px;
  transition: color var(--motion) var(--ease);
}
.footer__col a:hover { color: var(--text-on-dark); }
.footer__col a.is-violet { color: var(--violet-l); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-dim);
  line-height: var(--lh-body);
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
}
.footer__bottom-vat { opacity: .8; }

/* Casella dell'informativa sulla privacy nei moduli (Gate P, 23.10.2026): da «.ai-form .check» di ai.html,
   colori per i moduli su fondo chiaro (ai.html tiene i suoi, piu' specifici). */
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 13px; color: var(--lt-mid); }
.check input { flex-shrink: 0; margin-block-start: 3px; }
.check a { color: var(--blue); }