/* ==========================================================
   sns-dashboard.css (CLEAN)
   - Video background puro (nessun overlay / filtro)
   - Reset trasparenze tema in modalità dashboard
   - datacenter.png SOLO in "Funzionalità principali"
   - "Perché Ulisse" senza immagine ma testo più leggibile
   - Card features centrate verticalmente
   ========================================================== */

:root{
  --neon-blue: #5fd7ff;
  --sns-bg: #02040c;
  --sns-bg-alt: #050816;
  --sns-border: #15192b;
  --sns-primary: #00ff9c;
  --sns-primary-soft: rgba(0, 255, 156, 0.12);
  --sns-accent: #13b0ff;
  --sns-danger: #ff4b5c;
  --sns-warning: #ffc857;
  --sns-text: #e5f0ff;
  --sns-text-muted: #7f8ca8;
  --sns-radius-lg: 18px;
  --sns-radius-md: 12px;
  --sns-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.6);
  --sns-font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", sans-serif;
  --sns-font-mono: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

/* Base */
html, body{ background-color: var(--sns-bg); }

/* ==========================================================
   FULL EXPERIENCE (solo quando è presente la dashboard)
   ========================================================== */

body.sns-dashboard-active,
body.sns-dashboard-active #page,
body.sns-dashboard-active .site,
body.sns-dashboard-active .site-content,
body.sns-dashboard-active .content-area,
body.sns-dashboard-active .site-main,
body.sns-dashboard-active .hfeed,
body.sns-dashboard-active .page-wrap,
body.sns-dashboard-active #content{
  background: transparent !important;
  background-image: none !important;
  color: var(--sns-text);
}

/* Header / Footer trasparenti */
body.sns-dashboard-active header,
body.sns-dashboard-active .site-header,
body.sns-dashboard-active #masthead,
body.sns-dashboard-active footer,
body.sns-dashboard-active .site-footer,
body.sns-dashboard-active #colophon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contenitori tema: niente padding/margini top */
body.sns-dashboard-active .site-main,
body.sns-dashboard-active .content-area,
body.sns-dashboard-active .site-content,
body.sns-dashboard-active #primary,
body.sns-dashboard-active main{
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Nascondi titoli/breadcrumb */
body.sns-dashboard-active .site-title,
body.sns-dashboard-active .entry-title,
body.sns-dashboard-active .page-title,
body.sns-dashboard-active .page-header,
body.sns-dashboard-active .entry-header,
body.sns-dashboard-active .breadcrumbs,
body.sns-dashboard-active .breadcrumb,
body.sns-dashboard-active .site-breadcrumb{
  display: none !important;
}

/* ==========================================================
   VIDEO BACKGROUND — PURO
   ========================================================== */

body.sns-dashboard-active .sns-video-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sns-bg);
}

body.sns-dashboard-active .sns-video-bg__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;                 /* se vuoi scurire: 0.85 / 0.7 */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ==========================================================
   WRAPPER DASHBOARD
   ========================================================== */

.sns-dashboard-wrapper{
  position: relative;
  padding: 40px 16px 40px;
  color: var(--sns-text);
  overflow: hidden;
}

.sns-dashboard-wrapper::before,
.sns-dashboard-wrapper::after{
  content: none !important;
  display: none !important;
}

.sns-dashboard{
  max-width: 1180px;
  margin: 0 auto;
  font-family: var(--sns-font-main);
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ==========================================================
   HERO
   ========================================================== */

.sns-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.sns-logo-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid var(--sns-primary-soft);
  background: radial-gradient(circle at top left, rgba(0, 255, 156, 0.12) 0, transparent 60%);
  color: var(--sns-primary);
  font-family: var(--sns-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sns-hero-left h1{
  font-size: clamp(2.6rem, 4vw, 3.2rem);
  margin: 0 0 10px;
  letter-spacing: 0.08em;
}

.sns-hero-subtitle{
  margin: 0 0 22px;
  color: var(--sns-text-muted);
  max-width: 520px;
  line-height: 1.5;
}

.sns-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sns-badge{
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--sns-border);
  background: rgba(11, 18, 31, 0.9);
  color: var(--sns-text-muted);
  font-family: var(--sns-font-mono);
}

.sns-badge-live{
  background: var(--sns-primary-soft);
  color: var(--sns-primary);
  border-color: rgba(0, 255, 156, 0.4);
}

.sns-badge-outline{ border-style: dashed; }

.sns-hero-right{ display: flex; align-items: stretch; }

.sns-terminal{
  width: 100%;
  border-radius: var(--sns-radius-lg);
  box-shadow: var(--sns-shadow-soft);
  overflow: hidden;
  background: radial-gradient(circle at top, #10192e 0, #050816 55%, #02040c 100%);
  border: 1px solid var(--sns-border);
  position: relative;
}

.sns-terminal::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(19, 176, 255, 0.24), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

.sns-terminal-header{
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(to right, #050816, #071629);
  border-bottom: 1px solid #1b2340;
}

.sns-term-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 6px;
}
.sns-term-dot.red{ background: #ff5f57; }
.sns-term-dot.yellow{ background: #ffbd2e; }
.sns-term-dot.green{ background: #28c840; }

.sns-term-title{
  margin-left: auto;
  font-family: var(--sns-font-mono);
  font-size: 0.75rem;
  color: var(--sns-text-muted);
}

.sns-terminal-body{
  padding: 16px 18px 20px;
  font-family: var(--sns-font-mono);
  font-size: 0.83rem;
  color: var(--sns-text);
  position: relative;
  z-index: 1;
}

.sns-terminal-body .prompt{ color: var(--sns-primary); }
.sns-terminal-body .hl-critical{ color: var(--sns-danger); font-weight: 600; }
.sns-terminal-body .hl-high{ color: var(--sns-warning); font-weight: 600; }

.blink{ animation: sns-blink 1.1s steps(2, start) infinite; }
@keyframes sns-blink{ to{ visibility: hidden; } }

/* ==========================================================
   GRID / CARD
   ========================================================== */

.sns-stats-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sns-card{
  background: linear-gradient(145deg, rgba(9, 15, 30, 0.70), rgba(5, 12, 28, 0.74));
  border-radius: var(--sns-radius-md);
  border: 1px solid rgba(35, 45, 75, 0.68);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sns-card::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top left, rgba(0, 255, 156, 0.08), transparent 60%);
  opacity: 0.8;
  pointer-events: none;
}

.sns-card > *{ position: relative; z-index: 1; }

.sns-stat-label{
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sns-text-muted);
}

.sns-stat-value{
  display: block;
  font-size: 1.8rem;
  margin-top: 6px;
  margin-bottom: 6px;
}

.sns-stat-sub{
  font-size: 0.75rem;
  color: var(--sns-text-muted);
}

/* ==========================================================
   SEZIONI (base)
   ========================================================== */

.sns-section{
  margin-top: 10px;
  background: linear-gradient(160deg, rgba(5, 12, 28, 0.96), rgba(2, 4, 12, 0.98));
  border-radius: var(--sns-radius-lg);
  border: 1px solid rgba(33, 43, 73, 0.55);
  box-shadow: var(--sns-shadow-soft);
  padding: 18px 20px 16px;
}

.sns-section-header{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sns-section-header h2{
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================
   PERCHÉ ULISSE (NO immagine, SI leggibilità testo)
   ========================================================== */

.sns-section.sns-why-ulisse{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 34px 28px 38px;
}

.sns-section.sns-why-ulisse::after{
  content: none !important;
  display: none !important;
}

.sns-section.sns-why-ulisse::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(19, 176, 255, 0.18), transparent 60%),
    linear-gradient(to bottom, rgba(2, 4, 12, 0.72), rgba(2, 4, 12, 0.88));
  z-index: 0;
}

.sns-section.sns-why-ulisse > *{
  position: relative;
  z-index: 1;
}

/* Testo più leggibile */
.sns-section.sns-why-ulisse .sns-section-header h2,
.sns-section.sns-why-ulisse h2{
  color: rgba(234, 244, 255, 0.96) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.10em;
}

.sns-section.sns-why-ulisse p{
  max-width: 780px;
  margin: 0 auto 18px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(234, 244, 255, 0.88) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  letter-spacing: 0.06em;
}

.sns-section.sns-why-ulisse .sns-slogan{
  display: inline-block;
  margin-top: 18px;
  padding: 8px 18px;
  font-family: var(--sns-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sns-primary) !important;
  background: var(--sns-primary-soft);
  border: 1px solid rgba(0, 255, 156, 0.45);
  border-radius: 999px;
  text-shadow: none !important;
}

/* ==========================================================
   FUNZIONALITÀ PRINCIPALI (datacenter.png + molto spazio + card centrate)
   ========================================================== */

body.sns-dashboard-active .sns-section.sns-features{
  position: relative;
  overflow: hidden;

  /* spazio reale per “vedere” l’immagine */
  min-height: clamp(460px, 58vh, 780px) !important;
  /* per centrare verticalmente il blocco card */
  display: flex !important;
  flex-direction: column !important;

  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* immagine datacenter 
body.sns-dashboard-active .sns-section.sns-features::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("../img/datacenter.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  opacity: 0.62;
  mix-blend-mode: screen;
  filter: saturate(1.10) contrast(1.12);

  z-index: 0;
} */


/* ==========================================================
   FUNZIONALITÀ PRINCIPALI — VIDEO al posto dell’immagine
   ========================================================== */

body.sns-dashboard-active .sns-section.sns-features{
  position: relative;
  overflow: hidden;

  /* la tua altezza “in proporzione” (aggiusta qui) */
  min-height: clamp(360px, 52vh, 720px) !important;

  display: flex !important;
  flex-direction: column !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* Layer contenitore video */
body.sns-dashboard-active .sns-section.sns-features .sns-features-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #02040c; /* fallback se video non carica */
}

/* Video: copre tutta la section */
body.sns-dashboard-active .sns-section.sns-features .sns-features-bg__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* regola “quanto si vede” il video */
  opacity: 1;

  /* niente filtri strani */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Overlay per leggibilità (come prima) */
body.sns-dashboard-active .sns-section.sns-features .sns-features-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(19, 176, 255, 0.18), transparent 60%),
    linear-gradient(to bottom, rgba(2, 4, 12, 0.72), rgba(2, 4, 12, 0.88));
}

/* Contenuti sopra il video */
body.sns-dashboard-active .sns-section.sns-features > *{
  position: relative;
  z-index: 1;
}

/* La grid occupa lo spazio e centra (il tuo fix funzionante) */
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  place-content: center !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Nascondi il titolo “Funzionalità principali” (se vuoi più spazio) */
body.sns-dashboard-active .sns-section.sns-features .sns-section-header h2{
  display: none !important;
}
body.sns-dashboard-active .sns-section.sns-features .sns-section-header{
  margin-bottom: 6px !important;
}





/* overlay per contrasto */
body.sns-dashboard-active .sns-section.sns-features::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(19,176,255,0.10), transparent 60%),
    linear-gradient(to bottom, rgba(2,4,12,0.35), rgba(2,4,12,0.55)) !important;
  z-index: 1;
}

body.sns-dashboard-active .sns-section.sns-features > *{
  position: relative;
  z-index: 2;
}

/* elimina titolo "Funzionalità principali" per fare più spazio */
body.sns-dashboard-active .sns-section.sns-features .sns-section-header{
  margin: 0 !important;
  padding: 0 !important;
}
body.sns-dashboard-active .sns-section.sns-features .sns-section-header h2{
  display: none !important;
}

/* ✅ CENTRATURA VERTICALE: la grid occupa lo spazio e centra */
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  /* Questo centra “il gruppo di card” nello spazio disponibile */
  place-content: center !important;

  /* 3 colonne */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Responsive */
@media (max-width: 960px){
  .sns-dashboard-wrapper{ padding: 30px 10px 30px; }
  .sns-hero{ grid-template-columns: minmax(0, 1fr); }
  .sns-hero-right{ order: -1; }
  .sns-stats-grid{ grid-template-columns: 1fr; }
  .sns-dashboard{ min-height: auto; }

  body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .sns-section{ padding: 16px 12px; }
  .sns-section-header{ flex-direction: column; align-items: flex-start; }
}

/* Regola principale (desktop/tablet) */
body.sns-dashboard-active .sns-section.sns-features{
  min-height: clamp(420px, 52vh, 720px) !important; /* <- la tua scelta */
  display: flex !important;
  flex-direction: column !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* OVERRIDE SOLO MOBILE (mettilo subito dopo o in fondo al file) */
@media (max-width: 640px){
  body.sns-dashboard-active .sns-section.sns-features{
    min-height: clamp(320px, 44vh, 520px) !important;
  }
}


/* ==========================================================
   CICLO 1→2→3 (20s)
   - comparsa progressiva: 1 → 1+2 → 1+2+3
   - subito dopo (senza “sparire tutto”) riparte dalla 1
   - pallino + glow SINCRONI con la card attiva (no delay negativi)
   ========================================================== */

:root{
  --feat-cycle: 20s;                 /* durata totale ciclo */
  --feat-step: calc(var(--feat-cycle) / 4); /* 5s: 1,2,3,reset->1 */
}

/* =========================
   DOT sempre presente (spento di default)
   ========================= */
body.sns-dashboard-active .sns-section.sns-features .sns-card .sns-stat-label{
  position: relative;
  padding-left: 14px;
}

body.sns-dashboard-active .sns-section.sns-features .sns-card .sns-stat-label::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:999px;
  transform: translateY(-50%);
  background: rgba(0,255,156,0.95);
  opacity: .12; /* off */
  box-shadow: 0 0 0 0 rgba(0,255,156,0.0);
}

/* =========================
   Pulse stile “Cron-based”
   ========================= */
@keyframes feat-cron-pulse{
  0%, 100% { box-shadow: 0 18px 40px rgba(0,0,0,0.65); border-color: rgba(35,45,75,0.68); }
  50%      { box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 0 22px rgba(0,255,156,0.18);
             border-color: rgba(0,255,156,0.35); }
}

@keyframes feat-dot{
  0%   { box-shadow: 0 0 0 0 rgba(0,255,156,0.00); opacity: .85; }
  50%  { box-shadow: 0 0 0 10px rgba(0,255,156,0.12); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(0,255,156,0.00); opacity: .85; }
}

/* =========================
   Comparsa progressiva (NO scomparsa totale)
   - 0–25%   : appare 1
   - 25–50%  : appare 2 (1 resta)
   - 50–75%  : appare 3 (1+2 restano)
   - 75–100% : reset immediato (flash) e riparte
   ========================= */
@keyframes reveal-1{
  0%      { opacity: 0; transform: translateY(10px); }
  8%      { opacity: 1; transform: translateY(0); }
  75%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-2{
  0%, 24.999% { opacity: 0; transform: translateY(10px); }
  33%         { opacity: 1; transform: translateY(0); }
  75%         { opacity: 1; transform: translateY(0); }
  100%        { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-3{
  0%, 49.999% { opacity: 0; transform: translateY(10px); }
  58%         { opacity: 1; transform: translateY(0); }
  75%         { opacity: 1; transform: translateY(0); }
  100%        { opacity: 1; transform: translateY(0); }
}

/* =========================
   Finestre attive SINCRONE (dot + glow)
   - card1 attiva 0–25%
   - card2 attiva 25–50%
   - card3 attiva 50–75%
   - 75–100% reset (nessuna attiva) → subito riparte
   ========================= */
@keyframes active-1{
  0%, 24.999%   { opacity: 1; }
  25%, 100%     { opacity: 0; }
}
@keyframes active-2{
  0%, 24.999%   { opacity: 0; }
  25%, 49.999%  { opacity: 1; }
  50%, 100%     { opacity: 0; }
}
@keyframes active-3{
  0%, 49.999%   { opacity: 0; }
  50%, 74.999%  { opacity: 1; }
  75%, 100%     { opacity: 0; }
}

/* =========================
   Base card (necessario per glow)
   ========================= */
body.sns-dashboard-active .sns-section.sns-features .sns-card{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: opacity, transform, box-shadow, border-color;
}

/* Glow layer (invisibile finché non attiva) */
body.sns-dashboard-active .sns-section.sns-features .sns-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0,255,156,0.18), transparent 55%);
  mix-blend-mode: screen;
}



/* =========================
   Pulse + Dot: solo quando attiva (sincrono)
   (Nessun delay negativo)
   ========================= */

/* CARD 1 */
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(1){
  animation:
    reveal-1 var(--feat-cycle) linear infinite,
    feat-cron-pulse var(--feat-step) ease-in-out infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(1)::after{
  animation:
    feat-cron-pulse var(--feat-step) ease-in-out infinite,
    active-1 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(1) .sns-stat-label::before{
  animation:
    feat-dot 2.2s ease-out infinite,
    active-1 var(--feat-cycle) linear infinite;
}

/* CARD 2 */
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(2)::after{
  animation:
    feat-cron-pulse var(--feat-step) ease-in-out infinite,
    active-2 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(2) .sns-stat-label::before{
  animation:
    feat-dot 2.2s ease-out infinite,
    active-2 var(--feat-cycle) linear infinite;
}

/* CARD 3 */
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(3)::after{
  animation:
    feat-cron-pulse var(--feat-step) ease-in-out infinite,
    active-3 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-card:nth-child(3) .sns-stat-label::before{
  animation:
    feat-dot 2.2s ease-out infinite,
    active-3 var(--feat-cycle) linear infinite;
}

/* Dot quando non attivo: quasi invisibile ma presente */
body.sns-dashboard-active .sns-section.sns-features .sns-card .sns-stat-label::before{
  transition: opacity .25s ease;
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce){
  body.sns-dashboard-active .sns-section.sns-features .sns-card,
  body.sns-dashboard-active .sns-section.sns-features .sns-card::after,
  body.sns-dashboard-active .sns-section.sns-features .sns-card .sns-stat-label::before{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}




/* ==========================================================
   SNS-FEATURES: SOLO VIDEO (zero overlay / zero filtri)
   Incolla IN FONDO al CSS
   ========================================================== */

/* 1) la sezione non deve aggiungere patine/gradienti sopra */
body.sns-dashboard-active .sns-section.sns-features{
  background: transparent !important;   /* elimina gradienti della section */
}

/* 2) spegni COMPLETAMENTE i pseudo-layer (overlay/immagine) */
body.sns-dashboard-active .sns-section.sns-features::before,
body.sns-dashboard-active .sns-section.sns-features::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* 3) video: puro, niente filtri/blend */
body.sns-dashboard-active .sns-features-bg__video{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 4) (opzionale ma consigliato) assicurati che contenuto stia sopra */
body.sns-dashboard-active .sns-section.sns-features > *{
  position: relative;
  z-index: 2;
}



/* ================================
   WHY ULISSE – CYBER FLOW
   ================================ */

.sns-why-flow{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* base */
.why-step{
  position: relative;
  transition: all 0.6s ease;
  opacity: 0.55;
  transform: translateY(0);
}

/* slogan */
.why-insight{
  margin-top: 18px;
  font-family: var(--sns-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sns-primary);
  opacity: 0.35;
  text-align: center;
  transition: all 0.6s ease;
}

/* === Ciclo di evidenziazione === */

@keyframes why-cycle {
  0%   { opacity: .55; filter: blur(0.4px); }
  10%  { opacity: 1; filter: blur(0); }
  30%  { opacity: 1; }
  40%  { opacity: .55; }
  100% { opacity: .55; }
}

/* Step 1 */
.why-scan{
  animation: why-cycle 12s infinite;
}

/* Step 2 */
.why-analyze{
  animation: why-cycle 12s infinite;
  animation-delay: 4s;
}

/* Slogan */
.why-insight{
  animation: why-cycle 12s infinite;
  animation-delay: 8s;
}

/* Glow quando attivo */
.why-step,
.why-insight{
  text-shadow: 0 0 0 rgba(0,0,0,0);
}

.why-scan,
.why-analyze,
.why-insight{
  will-change: opacity, filter;
}

/* evidenziazione visiva */
.why-scan,
.why-analyze{
  color: rgba(234,244,255,0.85);
}

.why-scan:hover,
.why-analyze:hover,
.why-insight:hover{
  opacity: 1 !important;
}



/* =========================================
   WHY ULISSE – MICRO LINEA (solo attivo)
   ========================================= */

.why-step{
  padding-bottom: 10px; /* spazio per la linea */
}

/* linea base (invisibile) */
.why-step::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;

  /* linea “tech” */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,255,156,0.9),
    rgba(19,176,255,0.8),
    transparent
  );

  filter: blur(0.2px);
  transform: translateZ(0);
}

/* animazione scorrimento linea */
@keyframes why-underline-scan{
  0%   { width: 0%;   opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.95; }
  60%  { width: 100%; opacity: 0.95; }
  90%  { opacity: 0; }
  100% { width: 100%; opacity: 0; transform: translateX(0); }
}

/* Attiva la linea SOLO quando quello step è nel suo “momento” */
.why-scan::after{
  animation: why-underline-scan 12s infinite;
}
.why-analyze::after{
  animation: why-underline-scan 12s infinite;
  animation-delay: 4s;
}

/* =========================================
   WHY ULISSE – HUD SCAN LINE (molto soft)
   ========================================= */

/* wrapper relativo per scanline */
.sns-why-flow{
  position: relative;
  overflow: hidden;
}

/* scanline che passa ogni ciclo */
.sns-why-flow::before{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -25%;
  height: 22%;
  pointer-events: none;

  /* “HUD beam” sottile: non scurisce, illumina */
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(19,176,255,0.10),
    rgba(0,255,156,0.06),
    transparent
  );

  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
}

/* movimento scanline */
@keyframes hud-scan-pass{
  0%   { transform: translateY(-120%); opacity: 0; }
  10%  { opacity: 0.75; }
  40%  { opacity: 0.35; }
  60%  { opacity: 0.0; }
  100% { transform: translateY(620%); opacity: 0; }
}

/* passa lentamente 1 volta ogni 12s */
.sns-why-flow::before{
  animation: hud-scan-pass 12s infinite;
}

/* =========================================
   RIDUZIONE ANIMAZIONI (accessibilità)
   ========================================= */
@media (prefers-reduced-motion: reduce){
  .why-scan, .why-analyze, .why-insight,
  .why-step::after,
  .sns-why-flow::before{
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}  /* <<< CHIUSURA GIUSTA DELLA MEDIA QUERY */

/* =========================================
   CTA HERO – DASHBOARD / REPORT
   ========================================= */
body.sns-dashboard-active .sns-hero-badges a.sns-pill.sns-login-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:700;
  font-family: var(--sns-font-mono, monospace);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#02040c !important;
  background:#00ff9c !important;
  border:1px solid rgba(0,255,156,.85) !important;
  box-shadow:0 0 18px rgba(0,255,156,.45) !important;
}

body.sns-dashboard-active .sns-hero-badges a.sns-pill.sns-login-btn:hover{
  background:#3bffb5 !important;
  box-shadow:0 0 24px rgba(0,255,156,.7) !important;
}

/* ==========================================================
   CTA HERO – BROCHURE (NEON PULSE, COERENTE CON DASHBOARD)
   ========================================================== */

.sns-brochure-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family: var(--sns-font-mono, monospace);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;

  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;

  text-decoration: none !important;

  color: #00110b;
  background: #5fd7ff;                 /* 🔥 neon pieno */
  border: 1px solid #5fd7ff;

  box-shadow:
    0 0 10px rgba(95,215,255,.45),
    inset 0 0 12px rgba(255,255,255,.25);

  animation: brochure-pulse 2.8s ease-in-out infinite;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

.sns-brochure-btn:hover,
.sns-brochure-btn:focus-visible{
  background: #5fd7ff;

  box-shadow:
    0 0 18px #5fd7ff,
    0 0 42px rgba(95,215,255,.85),
    0 0 72px rgba(95,215,255,.55),
    inset 0 0 18px rgba(255,255,255,.35);

  transform: translateY(-1px);
}

.sns-brochure-btn:focus{
  outline: none;
}

@keyframes brochure-pulse{
  0%{
    box-shadow:
      0 0 8px rgba(95,215,255,.35),
      inset 0 0 10px rgba(255,255,255,.18);
  }
  50%{
    box-shadow:
      0 0 18px rgba(95,215,255,.85),
      0 0 36px rgba(95,215,255,.55),
      inset 0 0 14px rgba(255,255,255,.35);
  }
  100%{
    box-shadow:
      0 0 8px rgba(95,215,255,.35),
      inset 0 0 10px rgba(255,255,255,.18);
  }
}

/* ==========================================================
   CTA HERO – DANGER (NEON ROSSO)
   ========================================================== */

.sns-danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family: var(--sns-font-mono, monospace);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;

  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;

  text-decoration: none !important;

  color: #140003 !important;
  background: var(--sns-danger) !important;          /* #ff4b5c */
  border: 1px solid rgba(255,75,92,.95) !important;

  box-shadow:
    0 0 10px rgba(255,75,92,.45),
    0 0 22px rgba(255,75,92,.28),
    inset 0 0 12px rgba(255,255,255,.18);

  animation: sns-danger-pulse 2.6s ease-in-out infinite;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .15s ease,
    border-color .25s ease;
}

.sns-danger-btn:hover,
.sns-danger-btn:focus-visible{
  background: #ff6170 !important;
  border-color: rgba(255,97,112,1) !important;

  box-shadow:
    0 0 18px rgba(255,97,112,.75),
    0 0 44px rgba(255,75,92,.55),
    0 0 78px rgba(255,75,92,.35),
    inset 0 0 18px rgba(255,255,255,.22);

  transform: translateY(-1px);
}

.sns-danger-btn:focus{ outline: none; }

@keyframes sns-danger-pulse{
  0%{
    box-shadow:
      0 0 8px rgba(255,75,92,.35),
      0 0 18px rgba(255,75,92,.20),
      inset 0 0 10px rgba(255,255,255,.12);
  }
  50%{
    box-shadow:
      0 0 18px rgba(255,75,92,.85),
      0 0 40px rgba(255,75,92,.42),
      inset 0 0 14px rgba(255,255,255,.18);
  }
  100%{
    box-shadow:
      0 0 8px rgba(255,75,92,.35),
      0 0 18px rgba(255,75,92,.20),
      inset 0 0 10px rgba(255,255,255,.12);
  }
}

/* ==========================================================
   HERO – QUICK LINKS (Brochure / Plans / Partner)
   - sostituisce i 3 pill con mini-card “enterprise”
   ========================================================== */

.sns-quicklinks{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sns-ql{
  position: relative;
  display: block;
  text-decoration: none !important;
  border-radius: 14px;
  padding: 12px 12px 13px;
  border: 1px solid rgba(35, 45, 75, 0.68);
  background: linear-gradient(160deg, rgba(9, 15, 30, 0.62), rgba(5, 12, 28, 0.70));
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

.sns-ql::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:.85;
  background: radial-gradient(circle at 20% 10%, rgba(19,176,255,.14), transparent 55%);
  mix-blend-mode: screen;
}

.sns-ql > *{ position: relative; z-index: 1; }

.sns-ql-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sns-ql-kicker{
  font-family: var(--sns-font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(229,240,255,0.62);
}

.sns-ql-badge{
  font-family: var(--sns-font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(95,215,255,.35);
  color: rgba(95,215,255,.95);
  background: rgba(95,215,255,.10);
  white-space: nowrap;
}

.sns-ql-badge.danger{
  border-color: rgba(255,75,92,.40);
  color: rgba(255,75,92,.95);
  background: rgba(255,75,92,.10);
}

.sns-ql-title{
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(234,244,255,0.95);
  margin-bottom: 4px;
}

.sns-ql-sub{
  font-size: .86rem;
  line-height: 1.35;
  color: rgba(229,240,255,0.68);
}

/* hover “premium” */
.sns-ql:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.65);
  border-color: rgba(0,255,156,0.22);
}

.sns-ql:hover::before{
  background: radial-gradient(circle at 20% 10%, rgba(0,255,156,.14), transparent 60%);
}

/* varianti leggere */
.sns-ql-brochure:hover{ border-color: rgba(95,215,255,.40); }
.sns-ql-plans:hover{ border-color: rgba(0,255,156,.35); }
.sns-ql-partner:hover{ border-color: rgba(255,75,92,.40); }

/* responsive */
@media (max-width: 960px){
  .sns-quicklinks{ grid-template-columns: 1fr; }
  .sns-ql{ padding: 13px 14px 14px; }
}

/* ==========================================================
   QUICKLINKS – FONT UNIFICATO CON FEATURE CARD
   ========================================================== */

/* Titolo (Brochure / Odyssey Plans / Odyssey Partner) */
body.sns-dashboard-active .sns-quicklinks .sns-ql-title{
  font-family: var(--sns-font-main) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
}

/* Descrizione */
body.sns-dashboard-active .sns-quicklinks .sns-ql-sub{
  font-family: var(--sns-font-main) !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
}

/* Kicker (Documentazione / Commerciale / Canale) */
body.sns-dashboard-active .sns-quicklinks .sns-ql-kicker{
  font-family: var(--sns-font-mono) !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  opacity: 0.75;
}

/* ==========================================================
   QUICKLINKS – PILL PLANS VERDE
   ========================================================== */

body.sns-dashboard-active .sns-ql-badge.success{
  border-color: rgba(0,255,156,.45) !important;
  color: rgba(0,255,156,.95) !important;
  background: rgba(0,255,156,.12) !important;
}

/* ==========================================================
   FIX: bordo verde a turno su 1→2→3
   Incolla in FONDO al file
   ========================================================== */

/* stato base “non attivo” */
body.sns-dashboard-active .sns-section.sns-features .sns-card{
  border-color: rgba(35,45,75,0.68);
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
}

/* un keyframe “pulse” dentro una finestra temporale */
@keyframes card-border-1{
  0%        { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  6%        { border-color: rgba(0,255,156,0.22); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  12.5%     { border-color: rgba(0,255,156,0.40); box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 0 22px rgba(0,255,156,0.20); }
  20%       { border-color: rgba(0,255,156,0.26); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  25%       { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  100%      { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
}

@keyframes card-border-2{
  0%, 24.999% { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  31%         { border-color: rgba(0,255,156,0.22); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  37.5%       { border-color: rgba(0,255,156,0.40); box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 0 22px rgba(0,255,156,0.20); }
  45%         { border-color: rgba(0,255,156,0.26); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  50%         { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  100%        { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
}

@keyframes card-border-3{
  0%, 49.999% { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  56%         { border-color: rgba(0,255,156,0.22); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  62.5%       { border-color: rgba(0,255,156,0.40); box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 0 22px rgba(0,255,156,0.20); }
  70%         { border-color: rgba(0,255,156,0.26); box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 14px rgba(0,255,156,0.14); }
  75%         { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
  100%        { border-color: rgba(35,45,75,0.68); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
}

/* Applica: reveal + bordo a turno */
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(1){
  animation: reveal-1 var(--feat-cycle) linear infinite,
             card-border-1 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(2){
  animation: reveal-2 var(--feat-cycle) linear infinite,
             card-border-2 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(3){
  animation: reveal-3 var(--feat-cycle) linear infinite,
             card-border-3 var(--feat-cycle) linear infinite;
}

/* (facoltativo) rendi anche il glow layer coerente: segue la stessa finestra */
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(1)::after{
  animation: active-1 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(2)::after{
  animation: active-2 var(--feat-cycle) linear infinite;
}
body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card:nth-child(3)::after{
  animation: active-3 var(--feat-cycle) linear infinite;
}

/* accessibilità invariata */
@media (prefers-reduced-motion: reduce){
  body.sns-dashboard-active .sns-section.sns-features .sns-stats-grid .sns-card{
    animation: none !important;
  }
}