@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  font-size: 16px;
  --main: #ea0029;
  --main-light: #fde8e8;
  --font-courier: "Courier Prime", monospace;
}
body {
  font-family: "Exo", sans-serif;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #fff;
  overflow-x: hidden;
}
body.menu-is-open {
  overflow: hidden;
  touch-action: none;
}
.eyebrow-text {
  letter-spacing: 3px;
  font-family: var(--font-courier);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
h3.eyebrow-text {
  font-size: 1.25rem;
}
/* Sostituisci 'header' con l'ID o la classe della tua navbar (es. #site-header) */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 55;
  /* Sposta l'header fuori dallo schermo di base */
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Aggiungi qui un background se necessario, es: background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); */
}
header .navbar {
  padding: .5rem 0.5rem 2.5rem !important;
  border-bottom: 3px solid var(--main) !important;
}
/* La classe che il JavaScript aggiungerà per farlo scendere dall'alto */
header.header-visible {
  transform: translateY(0);
}
/* --- PRELOADER --- */
#sdev-preloader {
  position: fixed;
  inset: 0; /* Copre tutto lo schermo top:0, left:0, right:0, bottom:0 */
  background: #050505;
  z-index: 10000; /* Deve stare sopra a TUTTO */
  display: flex;
  justify-content: center;
  align-items: center;
}
.preloader-content {
  text-align: center;
}
.preloader-logo {
  width: 280px; /* Adatta la dimensione al tuo logo */
  opacity: 0; /* Partirà invisibile per essere animato da GSAP */
}
.loading-bar {
  width: 100%;
  height: 1px;
  background: #222;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
.loading-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--main); /* Il rosso SiliconDev */
}
/* --- TECH CURSOR --- */
#tech-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* Cruciale: evita che blocchi i click sui link veri */
  z-index: 9999;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  color: #888; /* Grigio tech */
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  border: 1px solid #222;
  border-radius: 4px;
  opacity: 0; /* Inizia nascosto */
  transition: opacity 0.3s ease;
}
/* Evidenziamo un po' i numeri e il separatore */
#tech-cursor span {
  color: #fff;
  font-weight: bold;
}
.coord-separator {
  color: var(--main) !important;
  margin: 0 4px;
}
.video-ajax video {
  filter: url(#bulge-distortion); /* ID corretto! */
  will-change: filter;
  transform: scale(1.05); /* Necessario per evitare bordi neri durante il rigonfiamento */
  transition: filter 0.05s ease-out;
}
.video-ajax video, .hero-bg-wrap figure {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-top: 60px;
  min-height: 100vh;
  z-index: -2;
}
.video-overlay, .bg-overlay {
  position: absolute;
  z-index: 2;
  color: #fff;
  padding: 4rem 0;
  inset: 55% 0 auto 0;
  text-align: center;
  transform: translateY(-50%);
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* Layout della griglia Bento */
.bento-grid-comprehensive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
}
/* Se vuoi che la prima card (SiliconDev S.p.A.) sia più grande su desktop */
@media (min-width: 992px) {
  .bento-item.main-sp {
    grid-column: span 2;
  }
}
/* Stile del singolo pannello di vetro */
.bento-item {
  background: rgba(15, 15, 15, 0.4); /* Sfondo scuro ma trasparente al 40% */
  backdrop-filter: blur(12px); /* La magia di Apple: sfoca il WebGL che passa dietro */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordino di vetro impercettibile */
  border-radius: 20px; /* Angoli morbidi e moderni */
  padding: 2rem;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animazione fluida e "rimbalzante" */
  position: relative;
  overflow: hidden;
}
/* Interazione al passaggio del mouse (Hover) */
.bento-item:hover {
  transform: translateY(-8px); /* La card si solleva verso l'utente */
  border-color: rgba(227, 6, 19, 0.6); /* Il bordo diventa rosso SiliconDev */
  background: rgba(20, 20, 20, 0.6); /* Si scurisce leggermente per far leggere meglio il testo */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(227, 6, 19, 0.1); /* Alone luminoso rosso */
}
/* Tipografia interna basilare */
.bento-item h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.bento-item p {
  color: #a0a0a0; /* Testo secondario grigio per contrasto */
  font-size: 0.95rem;
  margin-bottom: 0;
}
/* Il contenitore principale del terminale */
.tech-stack-terminal {
  background: #050505 !important; /* Nero profondissimo stile terminale */
  border: 1px solid #222;
  border-radius: 8px;
  padding: 0; /* Gestiamo il padding internamente */
  margin-top: 1.5rem;
  box-shadow: inset 0 0 10px rgba(0, 256, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace; /* Forza il font da programmatore */
}
/* La barra superiore con i comandi della finestra */
.terminal-header-bar {
  background: #121212; /* Grigio scuro da interfaccia */
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1a1a1a;
}
/* I tre pallini colorati */
.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.dot-red {
  background: #ff5f56;
}
.dot-yellow {
  background: #ffbd2e;
}
.dot-green {
  background: #27c93f;
}
/* Titolo al centro della barra */
.terminal-title {
  color: #666;
  font-size: 0.75rem;
  margin-left: 10px;
  font-weight: normal;
}
/* Lo stile del testo all'interno di code */
.tech-stack-terminal code {
  display: block;
  padding: 1.2rem;
  color: #a6e22e; /* Verde brillante stile Matrix/Monokai per lo stack */
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap; /* Evita che il testo esca dai bordi, mandandolo a capo */
  word-break: break-word;
}
/* Il prompt dei comandi (es. root@sdev...) rosso brand o ciano tech */
.term-prompt {
  color: var(--main); /* Usa il rosso #ea0029 del tuo brand! */
  font-weight: bold;
  margin-right: 8px;
}
.text-primary-red {
  color: var(--main);
}
.tech-btn {
  transition: .3s
}
.tech-btn:hover {
  color: var(--main)
}
.storia-box {
  padding: 2rem
}
/* =========================================
   ANIMAZIONI DI ENTRATA (SCROLL REVEAL)
========================================= */
/* Classi utility per lo sfondo "Vetro iper-tech" (Bento e Settori) */
.bg-dark-glass {
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Stato iniziale degli elementi da animare (Invisibili e spostati) */
.animate-on-scroll, .stagger-children .animate-item, .stagger-children .col-md-4, .stagger-children .col-md-5 {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
/* Direzioni di spostamento iniziale */
.slide-up {
  transform: translateY(40px);
}
.slide-right {
  transform: translateX(-40px);
}
.fade-in {
  transform: scale(0.98);
}
/* Per gli elementi dentro una griglia stagger (es. le bento card o i valori) */
.stagger-children > * {
  transform: translateY(30px);
  opacity: 0;
}
/* LA CLASSE '.is-visible' CHE VERRÀ AGGIUNTA DAL JAVASCRIPT
   Quando l'elemento entra nello schermo, torna alla posizione originale e diventa opaco al 100% 
*/
.animate-on-scroll.is-visible, .stagger-children.is-visible .animate-item, .stagger-children.is-visible > * {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
/* Delay sfalsati per gli elementi dentro uno stagger-children (effetto "cascata") */
.stagger-children.is-visible > *:nth-child(1) {
  transition-delay: 0.1s;
}
.stagger-children.is-visible > *:nth-child(2) {
  transition-delay: 0.2s;
}
.stagger-children.is-visible > *:nth-child(3) {
  transition-delay: 0.3s;
}
.stagger-children.is-visible > *:nth-child(4) {
  transition-delay: 0.4s;
}
.stagger-children.is-visible > *:nth-child(5) {
  transition-delay: 0.5s;
}
/* ... (per la bento grid che ne ha 11, il JS gestirà un piccolo stagger automatico) */
/* =========================================
   IN-PAGE STICKY NAVIGATION (PILL MENU)
========================================= */
.sdev-sticky-nav-wrapper {
  position: sticky;
  top: 108px;
  z-index: 666; /* Abbassato un pelo, in modo che se c'è un menu a tendina dell'header, passi sopra */
  display: flex;
  justify-content: center;
  margin-top: -30px;
  margin-bottom: 40px;
  padding: 0 15px;
}
.sdev-inpage-nav {
  background: rgba(15, 15, 15, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid var(--main);
  border-radius: 50px; /* Effetto pillola */
  padding: 10px 25px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  justify-content: center;
}
.sdev-inpage-nav a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}
/* Hover e Stato Attivo */
.sdev-inpage-nav a:hover, .sdev-inpage-nav a.active {
  color: #fff;
}
/* Il puntino rosso sotto la voce attiva */
.sdev-inpage-nav a:not(.btn-contact).active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #E30613;
  border-radius: 50%;
  box-shadow: 0 0 8px #E30613;
}
/* Il tasto contatti rosso */
.sdev-inpage-nav a.btn-contact {
  background-color: #E30613;
  color: #fff;
  padding: 8px 20px;
  border-radius: 30px;
  margin-left: 10px;
}
.sdev-inpage-nav a.btn-contact:hover {
  background-color: #ff1e2b;
  box-shadow: 0 0 15px rgba(227, 6, 19, 0.4);
  transform: translateY(-2px);
}
.tech-input {
  background-color: rgba(10, 10, 10, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  transition: all 0.3s ease;
}
.tech-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}
.tech-input:focus {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border-color: var(--main) !important;
  box-shadow: 0 0 15px rgba(234, 0, 41, 0.2) !important;
  outline: none;
}
.tech-check {
  background-color: rgba(10, 10, 10, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer;
}
.tech-check:checked {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}
.wpcf7 form .wpcf7-response-output {
  border-radius: 8px;
  padding: 15px;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  border: 1px solid #ffb900;
  color: #ffb900;
  background: rgba(255, 185, 0, 0.1);
}
.wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #46b450;
  color: #46b450;
  background: rgba(70, 180, 80, 0.1);
}
.wpcf7-not-valid-tip {
  color: #ea0029 !important;
  font-size: 0.8rem;
  margin-top: 5px;
}
.modal-backdrop {
    background-color: var(--main-light);
    --bs-backdrop-opacity: .85;
}
/* =========================================
   OTTIMIZZAZIONI RESPONSIVE & MOBILE
========================================= */
@media (hover: none) and (pointer: coarse) {
  #tech-cursor {
    display: none !important;
  }
  /* Previene che lo stato hover rimanga "incastrato" dopo un tap su mobile */
  .bento-item:hover {
    transform: none;
    box-shadow: none;
    background: rgba(15, 15, 15, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
  }
}
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
  .break {
    display: none;
  }
  /* Ridimensiona i titoli Hero */
  .glitch-title.display-4 {
    font-size: 2.2rem;
  }
  .hero-description.fs-4 {
    font-size: 1.1rem !important;
  }
  /* Trasforma il menu sticky in uno scroller orizzontale compatto */
  .sdev-sticky-nav-wrapper {
    padding: 0 10px;
    top: 125px; /* Aggiusta questo valore in base all'altezza del tuo header vero */
    margin-top: -15px;
    margin-bottom: 30px;
  }
  .sdev-inpage-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 10px 15px;
    border-radius: 15px;
    /* Nasconde la scrollbar estetica ma mantiene lo scroll funzionale */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sdev-inpage-nav::-webkit-scrollbar {
    display: none;
  }
  .sdev-inpage-nav a {
    white-space: nowrap; /* Impedisce al testo del menu di andare a capo */
    font-size: 0.8rem;
  }
  /* Padding ridotto per le box di testo principali */
  .storia-box {
    padding: 1.5rem !important;
  }
  /* Ottimizzazione del blocco terminale CF7 */
  .tech-stack-terminal code {
    font-size: 0.75rem;
    padding: 1rem;
  }
  #mission .col-md-5:first-of-type .custom-check-list {
    margin-bottom: 0;
    padding-bottom: 0!important;
  }
  #mission .col-md-5:last-of-type .custom-check-list {
    padding-top: 0!important;
  }
  .marquee-content {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}