:root {
  --concreate-red: #e41e12;
  --glass-bg-dark: rgba(121, 76, 50, 0.2);
  --glass-bg-light: rgba(117, 122, 118, 0.2);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base transparency for all media containers to avoid black gaps */
.team-video-container, .h-slide, .product-image-box {
  background: transparent !important;
}

/* Global Image Fade-In UX (Applied only to bitmaps like WebP/JPG/PNG) */
img:not([src$=".svg"]) {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  will-change: opacity;
}

img.loaded, img[src$=".svg"] {
  opacity: 1;
}

:root {
  --concreate-red: #e41e12;
  --glass-bg-dark: rgba(121, 76, 50, 0.2);
  --glass-bg-light: rgba(117, 122, 118, 0.2);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'polymath-display', sans-serif;
  font-weight: 400; /* Definitivo come da licenza */
  font-style: normal;
  color: #000;
  background-color: #ffffff;
  overflow-x: hidden;
  /* Nascondiamo la barra di sistema per usare quella floating */
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

/* Prevent scrolling while loading critically */
body.loading {
    overflow: hidden !important;
    height: 100vh;
}

/* Chrome, Safari, Edge, Android, iOS */
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

body::-webkit-scrollbar {
  display: none;
}

/* --- BULLETPROOF LOADER UI (Adaptive & Premium) --- */
#initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Bianco richiesto */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.loader-content {
    width: 300px;
    text-align: center;
}

.loader-progress-container {
    width: 100%;
    height: 2px;
    background: rgba(228, 30, 18, 0.1); /* Rosso leggerissimo */
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 4px;
}

#loader-bar {
    width: 0%;
    height: 100%;
    background: var(--concreate-red); /* Rosso Concreate */
    transition: width 0.3s ease-out;
}

#loader-percentage {
    font-family: 'polymath-display', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--concreate-red); /* Rosso Concreate */
    letter-spacing: 2px;
}

#initial-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Custom Floating Scroll Indicator (senza linea bianca laterale) */
.custom-scroll-indicator {
  position: fixed;
  right: 4px;
  top: 0;
  width: 3px;
  height: 100px;
  /* Verrà gestita da GSAP o CSS */
  background: var(--concreate-red);
  border-radius: 10px;
  z-index: 9999;
  pointer-events: none;
}

/* Custom Floating Scroll Indicator (Brand Sync) */
.custom-scrollbar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(228, 30, 18, 0.08);
  /* Fondo rosso leggerissimo invece del grigio */
  border-radius: 0;
  z-index: 10000;
  pointer-events: none;
}

.custom-scroll-thumb {
  width: 100%;
  height: 0%;
  background: #e41e12;
  opacity: 0.5;
  /* Stessa opacità delle linee di lettura */
  border-radius: 0;
  position: absolute;
  top: 0;
}

/* Premium Text Selection UX */
::selection {
  background-color: var(--concreate-red);
  color: #fff;
}

h1,
h2,
h3,
.krona,
.concreate-font {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600; /* Titoli definitivi */
  font-style: normal;
}

.inter {
  font-family: 'polymath-display', sans-serif;
  font-weight: 400;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  overflow: visible; /* IMPORTANTE: Permette alla card del logo di non venire tagliata */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Navigation Pill */
.nav-pill {
  position: fixed;
  bottom: 1.5vh;
  /* Portata al limite inferiore per la massima pulizia visiva */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.15);
  /* Più trasparente per liquid glass */
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 94px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 12px 50px 12px 16px;
  /* Aumentato il padding interno per far respirare il logo */
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.nav-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-brand-mark {
  position: relative;
  height: 32px;
  width: 32px;
  overflow: visible;
}

.nav-links {
  display: flex;
  gap: 35px;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #000;
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 11px;
  /* Più piccolo come da reference */
  letter-spacing: 0.5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-links a:hover {
  opacity: 0.7;
}

/* Hero Section */
.hero-section {
  position: relative;
  /* Override min-height if necessary and ensure it's a stable anchor for GSAP */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  /* Spacing between box and text in final state */
  position: relative;
  z-index: 10;
}

.hero-brand-mark {
  width: 100px;
  /* SIze of final box */
  height: 100px;
  position: relative;
  overflow: visible;
}

.logo-half {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-logo-text {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -2px;
  /* Typographic standard per bold logos */
  color: #000;
  margin: 0;
  line-height: +1;
}

/* About Typography */
.text-red {
  color: var(--concreate-red);
}

.text-26 {
  font-size: 26px;
  line-height: 1.34;
  letter-spacing: -0.13px;
}

.font-bold {
  font-weight: bold;
}

.about-container {
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  text-transform: none;
}

.about-row {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  align-items: center;
}

/* Team Video Section */
.team-video-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* UNIFIED SLIDE BACKGROUNDS */
.h-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 70%;
  /* Invertito spostamento: ora l'immagine va nella direzione opposta */
  transform: scale(1.01);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Uccide qualsiasi micro-bordo bianco chirurgicamente */
}

/* Custom Framing Overrides */
.e4-custom-bg {
  object-position: 0% center !important;
  /* Puro spostamento di inquadratura, senza zoom */
}

.team-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-names {
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  z-index: 20;
  font-family: 'polymath-display', sans-serif;
  font-weight: 400;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- RECOVERY BLOCK: Sections & Global Layers --- */
section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* UNIFIED GLASS CARD ARCHITECTURE */
.glass-card {
  position: absolute;
  top: 50%;
  left: 8vw;
  transform: translateY(-50%);
  width: 90%;
  max-width: 540px;
  padding: 64px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  color: #fff;
  z-index: 100;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* FIX: Ora i titoli stanno tutti bloccati alla stessa altezza invece di centrarsi in base alla lunghezza del testo */
  min-height: 650px;
  gap: 32px;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.phantom-q1-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  will-change: transform, opacity;
}

.glass-code {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 82px;
  line-height: 1;
  letter-spacing: -4px;
  opacity: 0.9;
  user-select: none;
}

.glass-text {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.8;
  font-weight: 300;
}

.glass-text p {
  margin: 0;
}

.glass-text {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
}

.concreate-btn-more {
  display: inline-flex;
  align-items: center;
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--concreate-red);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* Stronger visible border */
  padding: 12px 24px;
  /* Grander sizing */
  border-radius: 30px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  margin-top: auto;
  /* Pushes the button relentlessly to the geometric bottom of the card */
  align-self: flex-start;
  /* Stops it from stretching full width */
}

.concreate-btn-more:hover {
  background: var(--concreate-red);
  color: #fff;
  border-color: var(--concreate-red);
  transform: translateX(5px);
}

/* Specific background positioning for E4 */
.bg-shift-right {
  object-position: right center !important;
  /* Use physical translation to force movement: scale(zoom), translate(X-axis, Y-axis). Y-axis positive moves it down. */
  transform: scale(1.15) translate(5%, 5%);
}

/* Horizontal flip utility for U2 image */
.bg-flip-horizontal {
  transform: rotateY(180deg) !important;
  /* rotateY bypasses Safari/Chrome scaleX breaking bounds errors */
}

/* Diagrams specific positioning */
.diagram-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-item {
  position: absolute;
}

/* About Us Section */
.about-us-section {
  background-color: #ffffff;
  color: var(--concreate-red);
  padding: 10vh 5vw 4vh 5vw;
  height: auto;
  overflow: visible;
  display: block;
  position: relative;
  isolation: isolate; /* Forza lo stacking context per gestire lo z-index negativo della linea */
}

/* Texture "Concreate" Background Noise */
.noise-bg {
  position: relative;
}

.noise-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.about-container {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30vh;
  position: relative;
  z-index: 10; /* Alzato per stare sopra la linea di progresso */
}

/* Team Video Banner */
.team-video-container {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40vh;
  /* Margine nettamente aumentato per lasciare uno strepitoso spazio bianco finale vuoto */
  height: 45vh;
  /* Formato Striscia Cinematografica orizzontale */
  overflow: hidden;
  z-index: 2;
  /* Sta sopra alla texture di rumore */
}

.team-video {
  width: 100%;
  height: 120%;
  /* Extra height for parallax */
  object-fit: cover;
  filter: grayscale(30%) contrast(1.1);
  transition: filter 1s ease;
  will-change: transform, filter;
}

.team-video:hover {
  filter: grayscale(0%) contrast(1.1);
}

/* Team Names Ribbon */
.team-names {
  max-width: 1200px;
  margin: 10vh auto 0 auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: #000;
  text-transform: uppercase;
  z-index: 2;
  position: relative;
}

.team-names span {
  cursor: crosshair;
  /* Indica che è interattivo */
  transition: color 0.3s;
}

.team-names span:hover {
  color: var(--concreate-red);
  /* Si accende al passaggio svelando l'easter egg */
}

/* Hover Face Tracker UX */
.cursor-face-tracker {
  position: fixed;
  top: -75px;
  left: -75px;
  /* Offset per centrarlo al mouse, 150/2 = 75 */
  width: 150px;
  height: 150px;
  background: none !important;
  /* Rimosso completamente ogni possibile colore di sfondo */
  box-shadow: none !important;
  /* Rimosso l'ombra che poteva sembrare un alone bianco */
  border: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
  /* Fondamentale per far cliccare attraverso */
  z-index: 9999;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  will-change: transform; /* Suggerimento GPU per fluidità massima */
}

/* Mouse Trail Canvas UX */
#cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  /* Messo appena sotto al face tracker ma sopra al resto */
}

/* ------------------------------------------------ */
/* PROJECT TRANSITION (Minimal) */
/* ------------------------------------------------ */
.minimal-transition {
  width: 100%;
  position: relative;
  z-index: 100;
  /* Ensure it stays above everything else for the reveal */
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20vh 0 40vh 0;
  text-align: center;
  isolation: isolate; /* Forza lo stacking context */
}

.scroll-progress-line-2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  /* Forza dimensione intera e pari anti-blur */
  background-color: var(--concreate-red);
  opacity: 0.2;
  transform-origin: top center;
  transform: scaleY(0);
  /* gestito in unico blocco da GSAP */
  z-index: -1 !important; /* Dietro al testo */
}

.transition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 11; /* Sempre sopra la linea rossa */
}

.minimal-transition h3.concreate-font {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  background-color: #fff;
  /* Ripristinata la maschera per spezzare la linea */
  padding: 2vh 4vw;
  /* Crea l'aria attorno al testo per l'interruzione */
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .team-names {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 7px !important;
    padding: 0 5vw !important;
  }
}

/* Progress Line (UX) */
.scroll-progress-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  /* Forza dimensione intera e pari anti-blur */
  background-color: var(--concreate-red);
  opacity: 0.2;
  transform-origin: top center;
  transform: scaleY(0);
  /* starts shrunken */
  z-index: -1 !important; /* Spinta dietro al contenuto */
  transform: scaleY(0) translateZ(-1px); /* Forza il layer sotto lo zero in 3D */
}

.about-block {
  width: 100%;
  max-width: 520px;
  font-family: 'polymath-display', sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  /* clean readable size */
  line-height: 1.6;
  font-weight: 400;
  /* Regular geometric look */
  text-align: left;
  position: relative; 
  z-index: 2; 
  background-color: #ffffff; /* MASCHERA: Importante per coprire la linea rossa */
  padding: 10px 0; /* Un po' di aria per non far toccare la linea al testo subito */
  transform: translateZ(1px); /* Forza il layer sopra a livello hardware */
}

.about-block p {
  margin: 0;
}

.about-block strong {
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(120deg, var(--concreate-red) 0%, var(--concreate-red) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom;
  transition: background-size 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 2px;
}

.about-block strong:hover {
  background-size: 100% 100%;
  color: #fff;
  cursor: crosshair;
}

.block-left {
  align-self: flex-start;
}

.block-right {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .about-block {
    max-width: 100%;
  }
}

/* Horizontal View Fix */

/* Horizontal Scroller Architecture */
#horizontal-scroller-prodotti {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  /* CAMBIATO DA NERO A BIANCO PER ELIMINARE IL FLASH NERO DURANTE IL FADE-IN DELLE FOTO */
  overflow: hidden;
  position: relative;
}

#horizontal-scroller-slider {
  display: flex;
  flex-wrap: nowrap;
  width: 500vw;
  /* Perfect 5 slots of 100vw each */
  height: 100%;
  will-change: transform;
}

.h-slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
  background: #000;
  /* Previene flash bianchi se le immagini tardano */
}

.h-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  /* RESTORED VISIBILITY */
}

/* Ensure first image is visible if needed, but we'll handle in JS */

#sequence-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  will-change: transform;
}


.card-sezioni-apposite {
  position: relative;
  width: 380px;
  min-height: 480px;
  padding: 40px;

  /* Smoked Glass Base */
  background: rgba(17, 17, 17, 0.35);

  /* Liquid Glass V2 (Static/Slow Refraction) */
  backdrop-filter: blur(20px) url(#liquid-glass);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  color: #fff;
  z-index: 100;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-sezioni-apposite .glass-code {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 30px !important;
  line-height: 1.2;
  letter-spacing: -1px;
  opacity: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.card-sezioni-apposite .glass-text {
  font-family: 'polymath-display', sans-serif;
  font-weight: 600;
  font-size: 18px !important;
  line-height: 1.35;
  font-weight: 300;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-sezioni-apposite .glass-text p {
  margin: 0;
}

* {
  font-family: 'polymath-display', sans-serif !important;
}

/* --- MOBILE RESPONSIVE OVERRIDES (Isolated) --- */
@media (max-width: 900px) {
    /* 1. Hero Section: Prevenzione overflow */
    .hero-section {
        overflow: hidden;
    }

    /* 1b. Team Video: Visione Integrale 16:9 */
    .team-video-container {
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-top: 15vh !important;
        margin-bottom: 5vh !important;
    }
    .team-video {
        height: 100% !important;
        object-position: center !important;
    }

    .team-names {
        margin-top: 5vh !important;
    }

    /* 2. Index Cards: Shrink Radicale (Test con target specifico galleria) */
    .card-sezioni-apposite,
    .h-slide .glass-card {
        width: 65vw !important; 
        padding: 15px 20px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        min-height: auto !important;
    }

    /* 3. Horizontal Scroller -> Vertical Magnetism */
    #horizontal-scroller-prodotti {
        height: 100vh !important;
        overflow: hidden !important;
    }

    #horizontal-scroller-slider {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important; /* Sarà gestito da GSAP */
    }

    .h-slide {
        width: 100% !important;
        height: 100vh !important;
        flex-shrink: 0 !important;
    }

    /* E4: Inquadratura spostata a DESTRA su mobile */
    .e4-custom-bg {
        object-position: 100% center !important;
    }

    /* Tuning Scrollbar Mobile */
    .custom-scrollbar {
        width: 1px !important; /* Estremamente sottile */
        background: rgba(228, 30, 18, 0.02) !important;
    }
    .custom-scroll-thumb {
        opacity: 0.3 !important; /* Più trasparente */
    }

    .card-sezioni-apposite .glass-code {
        font-size: 16px !important;
    }

    .glass-text {
        font-size: 12px !important;
    }

    /* 3. Global Navigation Pill: Ottimizzazione Thumb-Zone */
    .nav-pill {
        padding: 8px 15px !important;
        gap: 15px !important;
        width: auto !important;
        max-width: 95vw;
        bottom: 1.5vh !important;
    }

    .nav-links {
        gap: 12px !important;
    }

    .nav-links a {
        font-size: 9px !important;
    }

    .nav-brand-mark {
        height: 24px !important;
        width: 24px !important;
    }

    /* 4. Mini Footer: Pulizia layout verticale */
    .mini-footer .footer-content {
        flex-direction: column !important;
        gap: 8px !important;
        font-size: 10px !important;
        text-align: center;
    }

    .footer-dot {
        display: none !important;
    }

    /* PERFORMANCE OPT: Adaptive Glassmorphism */
    .glass-card, .cct-pill-liquid {
        backdrop-filter: blur(8px) !important; 
        -webkit-backdrop-filter: blur(8px) !important;
    }
}