/* ==========================================================================
   IMPORTS & RESET
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
   @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
   
   :root {
     /* Colors */
     --neon-pink: #ff2a6d;
     --neon-purple: #d300c5;
     --neon-blue: #00f7ff;
     --cyber-yellow: #ffd452;
     --mint-green: #05ffa1;
     
     /* Background gradients */
     --bg-gradient: linear-gradient(135deg, #1a0321 0%, #050b30 100%);
     --glass-gradient: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
     
     /* Glassmorphism */
     --glass-bg: rgba(20, 20, 40, 0.7);
     --glass-border: rgba(255, 255, 255, 0.08);
     --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     --glass-blur: blur(20px);
     
     /* Borders & shadows */
     --border-light: 1px solid rgba(255, 255, 255, 0.1);
     --glow-blue: 0 0 15px rgba(0, 247, 255, 0.5);
     
     /* Typography */
     --font-main: 'Space Grotesk', sans-serif;
     --font-accent: 'Clash Display', sans-serif;
     --font-mono: 'JetBrains Mono', monospace;
     
     /* Layout */
     --max-width: 1180px;
     --radius-sm: 8px;
     --radius-md: 16px;
     --radius-lg: 24px;
     
     /* Article-specific variables */
     --article-max-width: 800px;
     --article-spacing: 2rem;
   }
   
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     font-size: 16px;
     scroll-behavior: smooth;
     height: 100%;
     overflow-x: hidden; /* Impedisce scroll orizzontale */
     width: 100%;
   }
   
   body {
     font-family: var(--font-main);
     background: var(--bg-gradient);
     color: white;
     line-height: 1.6;
     min-height: 100vh;
     overflow-x: hidden; /* Impedisce scroll orizzontale */
     background-attachment: fixed;
     position: relative;
     width: 100%;
   }
   
   body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('/assets/images/noise.svg');
     opacity: 0.03;
     pointer-events: none;
     z-index: -1;
   }
   
   .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   a:hover {
     color: var(--neon-blue);
   }
   
   ul {
     list-style: none;
   }
   
   ul:not(.breadcrumb):not(.categories ul) {
     list-style-type: disc;
     margin-left: 1.5rem;
   }
   
   ol {
     list-style-type: decimal;
     margin-left: 1.5rem;
   }
   
   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   /* ==========================================================================
      HEADER
      ========================================================================== */
   
   header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     padding: 1rem 0;
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     background: rgba(10, 10, 25, 0.8);
     border-bottom: var(--border-light);
     transition: all 0.3s ease;
   }
   
   header .container {
     display: flex;
     justify-content: flex-start; /* Cambiato da space-between */
     align-items: center;
     width: 88%;
     max-width: var(--max-width);
     margin: 0 auto;
     overflow: hidden; /* Impedisce overflow */
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 0.75rem;
   }
   
   .logo i {
     color: var(--neon-blue);
     font-size: 1.75rem;
   }
   
   #site-title {
     font-size: 1.5rem;
     margin-bottom: 0;
     font-family: var(--font-accent);
     font-weight: 700;
     background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .site-logo, #site-logo {
     font-size: 1.5rem;
     margin-bottom: 0;
     font-family: var(--font-accent);
     font-weight: 700;
     background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     text-decoration: none;
     cursor: pointer;
   }
   
   .header-controls {
     display: flex;
     align-items: center;
     gap: 1.25rem;
     margin-left: auto; /* Questo posiziona i controlli a destra */
   }
   
   .language-dropdown {
     position: relative;
   }
   
   #current-language {
     background: rgba(255, 255, 255, 0.05);
     color: white;
     border: var(--border-light);
     border-radius: var(--radius-sm);
     padding: 0.6rem 1.25rem;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
     transition: all 0.3s ease;
   }
   
   #current-language::after {
     content: '\f078';
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
     font-size: 0.7rem;
     margin-left: auto;
   }
   
   .language-options {
     position: absolute;
     top: 100%;
     right: 0;
     background: var(--glass-bg);
     border: var(--border-light);
     border-radius: var(--radius-sm);
     min-width: 180px;
     overflow: hidden;
     z-index: 100;
     opacity: 0;
     visibility: hidden;
     transform: translateY(5px);
     transition: all 0.3s ease;
     box-shadow: var(--glass-shadow);
     margin-top: 5px;
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .language-options.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }
   
   .language-option {
     padding: 0.75rem 1.25rem;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     background: none;
     border: none;
     width: 100%;
     text-align: left;
     color: inherit;
     font-family: inherit;
   }
   
   .language-option:hover {
     background: rgba(255, 255, 255, 0.1);
   }
   
   /* ==========================================================================
      ARTICLE STRUCTURE
      ========================================================================== */
   
   .blog-post-container {
     padding: 6rem 0 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     overflow-x: hidden; /* Impedisce scroll orizzontale */
   }
   
   .blog-post-container .container {
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 1rem;
     display: flex;
     flex-direction: row;
     gap: 3rem;
     overflow: hidden; /* Impedisce overflow */
   }
   
   .blog-post {
     flex: 1;
     max-width: var(--article-max-width);
     margin: 0 auto;
     background: rgba(20, 20, 40, 0.5);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border-radius: var(--radius-lg);
     border: var(--border-light);
     overflow: hidden;
     /* Fix generale per il contenitore dell'articolo */
     display: flex;
     flex-direction: column;
   }
   
   .blog-sidebar {
     flex: 0 0 300px;
     position: sticky;
     top: 100px;
     align-self: start;
   }
   
   .blog-sidebar > div {
     background: var(--glass-bg);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     box-shadow: var(--glass-shadow);
     border: var(--border-light);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
   }
   
   .blog-sidebar h3 {
     font-size: 1.25rem;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     border-bottom: var(--border-light);
     color: white;
   }
   
   .blog-sidebar ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .blog-sidebar ul li {
     margin-bottom: 0.75rem;
   }
   
   .blog-sidebar ul li a {
     color: rgba(255, 255, 255, 0.7);
     transition: color 0.2s ease;
     display: flex;
     align-items: center;
   }
   
   .blog-sidebar ul li a:hover {
     color: var(--neon-blue);
   }
   
   .blog-sidebar ul li a::before {
     content: "\f105";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     margin-right: 0.5rem;
     color: var(--neon-blue);
   }
   
   /* ==========================================================================
      ARTICLE HEADER
      ========================================================================== */
   
   .blog-post-header {
     padding: var(--article-spacing);
     background: rgba(10, 10, 25, 0.8);
     /* Assicura che l'header stia sopra il contenuto */
     position: relative;
     z-index: 5; /* Valore maggiore del content */
     margin-bottom: 1rem; /* Spazio tra header e content */
     overflow: visible;
   }
   
   .blog-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
   }
   
   .breadcrumb {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   .breadcrumb-item a {
     color: rgba(255, 255, 255, 0.7);
     transition: color 0.2s ease;
   }
   
   .breadcrumb-item a:hover {
     color: var(--neon-blue);
   }
   
   .breadcrumb-current {
     color: white;
   }
   
   .breadcrumb-separator {
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.8rem;
   }
   
   .date {
     color: rgba(255, 255, 255, 0.7);
   }
   
   .blog-post h1 {
     font-size: clamp(2rem, 5vw, 3rem);
     margin-bottom: 1.5rem;
     font-family: var(--font-accent);
     font-weight: 800;
     line-height: 1.2;
     background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     word-wrap: break-word; /* Permette la divisione delle parole lunghe */
     overflow-wrap: break-word;
   }
   
   .featured-image {
     width: 100%;
     height: auto;
     border-radius: var(--radius-md);
     margin-top: 1.5rem;
     border: var(--border-light);
   }
   
   /* ==========================================================================
      ARTICLE CONTENT
      ========================================================================== */
   
   .blog-post-content {
     padding: var(--article-spacing);
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     /* Assicura che il contenuto inizi dopo l'header */
     position: relative;
     z-index: 1;
     margin-top: 0;
     clear: both; /* Impedisce galleggiamenti */
     overflow: hidden; /* Impedisce overflow */
   }
   
   .blog-post-content h2 {
     font-size: clamp(1.75rem, 4vw, 2.5rem);
     margin-top: 2rem;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     font-family: var(--font-accent);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .blog-post-content h3 {
     font-size: clamp(1.5rem, 3vw, 1.75rem);
     margin-top: 1.5rem;
     margin-bottom: 0.75rem;
     color: var(--neon-blue);
     font-family: var(--font-accent);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .blog-post-content h4 {
     font-size: clamp(1.25rem, 2.5vw, 1.5rem);
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: white;
     font-family: var(--font-accent);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .blog-post-content p {
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 1rem;
     line-height: 1.7;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .blog-post-content ul,
   .blog-post-content ol {
     margin-bottom: 1rem;
     color: rgba(255, 255, 255, 0.8);
   }
   
   .blog-post-content li {
     margin-bottom: 0.5rem;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .blog-post-content code {
     font-family: var(--font-mono);
     background: rgba(255, 255, 255, 0.1);
     padding: 0.125rem 0.25rem;
     border-radius: 4px;
     color: var(--cyber-yellow);
     word-wrap: break-word;
     overflow-wrap: break-word;
     white-space: pre-wrap;
   }
   
   .blog-post-content pre {
     background: rgba(0, 0, 0, 0.5);
     padding: 1rem;
     border-radius: var(--radius-sm);
     overflow-x: auto;
     margin: 1rem 0;
     border: var(--border-light);
     white-space: pre-wrap;
     word-wrap: break-word;
   }
   
   .blog-post-content pre code {
     background: none;
     padding: 0;
     color: inherit;
     white-space: pre-wrap;
   }
   
   /* ==========================================================================
      CONTENT ELEMENTS
      ========================================================================== */
   
   /* Term Definitions & Technical Specs */
   .term-definitions {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
   }
   
   .term {
     background: rgba(10, 10, 25, 0.8);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.75rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
   }
   
   .term::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 3px;
     height: 100%;
     background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple));
   }
   
   .term:hover {
     transform: translateY(-5px);
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
   }
   
   .term h4 {
     color: white;
     margin-bottom: 0.75rem;
     font-family: var(--font-accent);
     font-size: 1.4rem;
     letter-spacing: 0.5px;
   }
   
   .term p {
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.7;
   }
   
   /* Video format definitions (as seen in screenshot 1 & 3) */
   .format-definition {
     padding: 1.5rem;
     background: rgba(20, 20, 40, 0.3);
     border-radius: var(--radius-md);
     margin-bottom: 1.5rem;
     border-left: 4px solid var(--neon-blue);
   }
   
   .format-definition h2 {
     font-size: 2.2rem;
     margin-top: 0;
     margin-bottom: 0.75rem;
     color: white;
     font-family: var(--font-accent);
     border-bottom: none;
     padding-bottom: 0;
   }
   
   .format-definition p {
     font-size: 1.1rem;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.85);
   }
   
   /* For SD and HD definitions specifically */
   .format-definition.sd {
     border-left-color: var(--mint-green);
   }
   
   .format-definition.hd {
     border-left-color: var(--neon-pink);
   }
   
   .format-definition.bitrate {
     border-left-color: var(--cyber-yellow);
   }
   
   /* Factors Influencing Quality (as seen in screenshot 2) */
   .factors-list {
     margin: 2rem 0;
   }
   
   .factor {
     display: flex;
     align-items: flex-start;
     gap: 1.5rem;
     padding: 1.75rem;
     background: rgba(10, 10, 25, 0.7);
     border: var(--border-light);
     border-radius: var(--radius-md);
     margin-bottom: 1.5rem;
     transition: all 0.3s ease;
   }
   
   .factor:hover {
     background: rgba(20, 20, 40, 0.7);
     border-color: var(--neon-blue);
     transform: translateX(5px);
     box-shadow: var(--glass-shadow);
   }
   
   .factor i {
     font-size: 1.8rem;
     color: var(--neon-blue);
     flex-shrink: 0;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 247, 255, 0.1);
     border-radius: 10px;
   }
   
   .factor h4 {
     margin-top: 0;
     margin-bottom: 0.75rem;
     color: white;
     font-family: var(--font-accent);
     font-size: 1.5rem;
     letter-spacing: 0.5px;
   }
   
   .factor p {
     margin-bottom: 0;
     line-height: 1.8;
   }
   
   /* Icon color variations for different factors */
   .factor:nth-child(2) i {
     color: var(--neon-pink);
     background: rgba(255, 42, 109, 0.1);
   }
   
   .factor:nth-child(3) i {
     color: var(--cyber-yellow);
     background: rgba(255, 212, 82, 0.1);
   }
   
   .factor:nth-child(4) i {
     color: var(--mint-green);
     background: rgba(5, 255, 161, 0.1);
   }
   
   /* Technical Specifications Tables */
   .twitter-specs {
     margin: 2.5rem 0;
   }
   
   .twitter-specs h3 {
     margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
     border-bottom: var(--border-light);
     color: var(--neon-blue);
     font-size: 1.6rem;
   }
   
   .twitter-specs table {
     margin-bottom: 2rem;
   }
   
   .twitter-specs table th {
     background: rgba(0, 247, 255, 0.15);
     color: white;
     font-weight: 600;
     font-family: var(--font-accent);
     padding: 1rem 1.5rem;
   }
   
   .twitter-specs table td {
     padding: 1rem 1.5rem;
   }
   
   .twitter-specs table tr:hover {
     background: rgba(255, 255, 255, 0.05);
   }
   
   .twitter-specs table td:first-child {
     font-weight: 500;
     color: var(--neon-blue);
   }
   
   /* Enhanced Info Callouts with Gradients */
   .key-takeaway {
     background: linear-gradient(135deg, rgba(0, 247, 255, 0.15), rgba(0, 247, 255, 0.05));
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.75rem;
     margin: 2.5rem 0;
     position: relative;
     overflow: hidden;
   }
   
   .key-takeaway::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M95,50.5 L85,50.5 M50.5,95 L50.5,85 M5,50.5 L15,50.5 M50.5,5 L50.5,15" stroke="rgba(0,247,255,0.1)" stroke-width="0.5" fill="none"/></svg>');
     background-size: 40px 40px;
     opacity: 0.2;
     z-index: -1;
   }
   
   .key-takeaway h4 {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
     font-size: 1.4rem;
   }
   
   .key-takeaway h4 i {
     font-size: 1.5rem;
   }
   
   .key-takeaway p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 1.1rem;
     line-height: 1.8;
   }
   
   /* Process Steps with Enhanced Styling */
   .process-steps {
     margin: 2.5rem 0;
   }
   
   .process-steps .step-by-step {
     position: relative;
   }
   
   .process-steps .step-by-step::before {
     content: "";
     position: absolute;
     left: 20px;
     top: 0;
     height: 100%;
     width: 2px;
     background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple));
     z-index: 0;
     opacity: 0.5;
   }
   
   .process-steps .step {
     position: relative;
     z-index: 1;
     padding-left: 4rem;
     background: rgba(20, 20, 40, 0.4);
   }
   
   .process-steps .step::before {
     content: attr(data-step);
     position: absolute;
     left: -15px;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
     color: white;
     font-weight: 700;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-mono);
     box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
   }
   
   .process-steps .step:hover {
     transform: translateX(10px);
   }
   
   /* MP4 Features Section */
   .mp4-features h3 {
     margin-bottom: 1.5rem;
     color: var(--neon-blue);
     font-size: 1.6rem;
     text-align: center;
   }
   
   .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
   }
   
   .feature {
     background: rgba(10, 10, 25, 0.6);
     border-radius: var(--radius-md);
     padding: 1.75rem;
     border: 1px solid rgba(0, 247, 255, 0.2);
     transition: all 0.3s ease;
   }
   
   .feature:hover {
     transform: translateY(-5px);
     background: rgba(20, 20, 40, 0.6);
     border-color: var(--neon-blue);
     box-shadow: 0 0 20px rgba(0, 247, 255, 0.2);
   }
   
   .feature h4 {
     color: white;
     margin-bottom: 1rem;
     font-family: var(--font-accent);
     font-size: 1.3rem;
   }
   
   .feature p {
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.7;
   }
   
   /* Conversion Options Styling */
   .conversion-options {
     margin: 2.5rem 0;
   }
   
   .conversion-options h3 {
     margin-bottom: 1.5rem;
     color: var(--neon-blue);
     font-size: 1.6rem;
     text-align: center;
   }
   
   .tools-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
   }
   
   .tool {
     background: rgba(10, 10, 25, 0.6);
     border-radius: var(--radius-md);
     padding: 1.75rem;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
   }
   
   .tool::after {
     content: "";
     position: absolute;
     right: -10px;
     bottom: -10px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, rgba(0, 247, 255, 0.2), rgba(0, 247, 255, 0));
     border-radius: 30px 0 0 0;
     z-index: 0;
   }
   
   .tool:hover {
     transform: translateY(-5px);
     background: rgba(20, 20, 40, 0.6);
     border-color: var(--neon-blue);
     box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
   }
   
   .tool h4 {
     color: white;
     margin-bottom: 1rem;
     font-family: var(--font-accent);
     font-size: 1.3rem;
   }
   
   .tool p {
     position: relative;
     z-index: 1;
   }
   
   .tool p strong {
     color: var(--neon-blue);
   }
   
   /* Pros and Cons Styling */
   .pros-cons {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin: 1rem 0;
   }
   
   .pros-section,
   .cons-section {
     padding: 1rem;
     border-radius: var(--radius-sm);
     background: rgba(255, 255, 255, 0.02);
     border: var(--border-light);
   }
   
   .pros-section {
     border-left: 4px solid var(--mint-green);
   }
   
   .cons-section {
     border-left: 4px solid var(--neon-pink);
   }
   
   .pros-title,
   .cons-title {
     font-size: 1rem;
     margin-bottom: 0.5rem;
     font-family: var(--font-accent);
     font-weight: 600;
   }
   
   .pros-title {
     color: var(--mint-green);
   }
   
   .cons-title {
     color: var(--neon-pink);
   }
   
   .pros-list,
   .cons-list {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .pros-list li,
   .cons-list li {
     position: relative;
     padding-left: 1.5rem;
     margin-bottom: 0.5rem;
     font-size: 0.9rem;
   }
   
   .pros-list li::before {
     content: "✓";
     color: var(--mint-green);
     position: absolute;
     left: 0;
     font-weight: bold;
   }
   
   .cons-list li::before {
     content: "✗";
     color: var(--neon-pink);
     position: absolute;
     left: 0;
     font-weight: bold;
   }
   
   /* Content Creator Guide Specific Styling */
   .download-guide {
     counter-reset: step-counter;
     margin: 2.5rem 0;
   }
   
   .download-step {
     display: flex;
     gap: 1.5rem;
     margin-bottom: 2rem;
     position: relative;
     background: rgba(20, 20, 40, 0.4);
     border-radius: var(--radius-md);
     padding: 1.75rem;
     border: var(--border-light);
     transition: all 0.3s ease;
   }
   
   .download-step:hover {
     background: rgba(30, 30, 50, 0.4);
     border-color: var(--neon-blue);
     transform: translateX(10px);
     box-shadow: var(--glass-shadow);
   }
   
   .icon-wrapper {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.25rem;
     flex-shrink: 0;
     position: relative;
   }
   
   .icon-wrapper::before {
     counter-increment: step-counter;
     content: counter(step-counter);
     position: absolute;
     top: -10px;
     right: -10px;
     width: 26px;
     height: 26px;
     background: rgba(0, 0, 0, 0.8);
     border-radius: 50%;
     border: 1px solid var(--neon-blue);
     font-family: var(--font-mono);
     font-size: 0.8rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .step-details {
     flex: 1;
   }
   
   .step-details h3 {
     margin-top: 0;
     margin-bottom: 1rem;
     color: white;
     font-family: var(--font-accent);
   }
   
   /* Legal Considerations Styling */
   .legal-section {
     margin: 2.5rem 0;
     padding: 1.75rem;
     background: rgba(255, 42, 109, 0.07);
     border-radius: var(--radius-md);
     border: 1px solid rgba(255, 42, 109, 0.2);
   }
   
   .legal-section h3 {
     color: var(--neon-pink);
     margin-bottom: 1.25rem;
     font-family: var(--font-accent);
     font-size: 1.6rem;
   }
   
   .legal-considerations {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 1.5rem;
   }
   
   .legal-considerations .legal-section {
     margin: 0;
   }
   
   /* Attribution Techniques */
   .attribution-methods {
     margin: 2rem 0;
   }
   
   .attribution-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
   }
   
   .attribution-card {
     display: flex;
     gap: 1.25rem;
     padding: 1.75rem;
     background: rgba(20, 20, 40, 0.4);
     border-radius: var(--radius-md);
     border: var(--border-light);
     transition: all 0.3s ease;
   }
   
   .attribution-card:hover {
     background: rgba(30, 30, 50, 0.4);
     border-color: var(--neon-blue);
     transform: translateY(-5px);
     box-shadow: var(--glass-shadow);
   }
   
   .card-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.25rem;
     flex-shrink: 0;
   }
   
   .card-content {
     flex: 1;
   }
   
   .card-content h4 {
     margin-top: 0;
     margin-bottom: 0.75rem;
     color: white;
     font-family: var(--font-accent);
   }
   
   .example-box {
     margin-top: 0.75rem;
     padding: 0.75rem;
     background: rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-sm);
     font-family: var(--font-mono);
     font-size: 0.9rem;
     color: var(--cyber-yellow);
   }
   
   /* Best Practices */
   .best-practices-container {
     margin: 2.5rem 0;
   }
   
   .best-practices-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.25rem;
   }
   
   .practice-item {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     padding: 1.25rem;
     background: rgba(20, 20, 40, 0.4);
     border-radius: var(--radius-md);
     border: var(--border-light);
     transition: all 0.3s ease;
   }
   
   .practice-item:hover {
     background: rgba(30, 30, 50, 0.4);
     border-color: var(--neon-blue);
     transform: translateY(-5px);
     box-shadow: var(--glass-shadow);
   }
   
   .practice-icon {
     width: 40px;
     height: 40px;
     background: rgba(0, 247, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--neon-blue);
     font-size: 1rem;
     flex-shrink: 0;
   }
   
   .practice-content {
     flex: 1;
   }
   
   .practice-content h4 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     color: white;
     font-family: var(--font-accent);
     font-size: 1.1rem;
   }
   
   .practice-content p {
     margin-bottom: 0;
     line-height: 1.6;
   }
   
   /* Case Studies */
   .case-studies {
     margin: 2.5rem 0;
   }
   
   .case-study {
     padding: 1.75rem;
     background: rgba(20, 20, 40, 0.4);
     border-radius: var(--radius-md);
     border: var(--border-light);
     margin-bottom: 1.5rem;
     transition: all 0.3s ease;
   }
   
   .case-study:hover {
     background: rgba(30, 30, 50, 0.4);
     border-color: var(--neon-blue);
     transform: translateX(5px);
     box-shadow: var(--glass-shadow);
   }
   
   .case-study:last-child {
     margin-bottom: 0;
   }
   
   .case-study h3 {
     margin-top: 0;
     margin-bottom: 1rem;
     color: var(--neon-blue);
     font-family: var(--font-accent);
   }
   
   .case-study p strong {
     color: var(--neon-pink);
   }
   
   .case-study ul {
     margin-bottom: 1rem;
   }
   
   .case-study p:last-child {
     margin-top: 1rem;
     margin-bottom: 0;
     font-style: italic;
     color: var(--cyber-yellow);
     background: rgba(0, 0, 0, 0.2);
     padding: 0.75rem;
     border-radius: var(--radius-sm);
   }
   
   .content-box {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     margin: 1.5rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .content-box h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .content-box ul {
     padding-left: 1.5rem;
   }
   
   /* Updated step-by-step with better styling */
   .step-by-step {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .step {
     display: flex;
     gap: 1rem;
     background: rgba(255, 255, 255, 0.03);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     transition: all 0.3s ease;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .step:hover {
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
     background: rgba(255, 255, 255, 0.05);
   }
   
   .step-icon {
     flex: 0 0 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--neon-blue);
     font-size: 1.5rem;
   }
   
   .step-content {
     width: 100%;
     overflow: hidden;
   }
   
   .step-content h4 {
     margin-bottom: 0.5rem;
     color: white;
     font-family: var(--font-accent);
   }
   
   .step-content p {
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 0;
   }
   
   /* Tips Grid Section (for organizing videos) */
   .tips-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .tip {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     text-align: center;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     overflow: hidden;
   }
   
   .tip:hover {
     transform: translateY(-5px);
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
   }
   
   .tip i {
     font-size: 2rem;
     margin-bottom: 1rem;
     color: var(--neon-blue);
   }
   
   .tip h4 {
     color: white;
     margin-bottom: 0.5rem;
     font-family: var(--font-accent);
   }
   
   .tip p {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0;
   }
   
   /* Reason Grid */
   .reason-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .reason {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     text-align: center;
     transition: all 0.3s ease;
     width: 100%;
     overflow: hidden;
   }
   
   .reason:hover {
     transform: translateY(-5px);
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
   }
   
   .reason i {
     font-size: 2.5rem;
     margin-bottom: 1rem;
     color: var(--neon-pink);
   }
   
   .reason h4 {
     color: white;
     margin-bottom: 0.5rem;
     font-family: var(--font-accent);
   }
   
   .reason p {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0;
   }
   
   /* Browser Extensions Grid */
   .browser-extensions-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .browser-extension-item {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     transition: all 0.3s ease;
     width: 100%;
     overflow: hidden;
   }
   
   .browser-extension-item:hover {
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
   }
   
   .browser-extension-item h4 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   /* Quality Comparison Cards */
   .quality-comparison {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .quality-card {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     transition: all 0.3s ease;
     width: 100%;
     overflow: hidden;
   }
   
   .quality-card:hover {
     border-color: var(--neon-blue);
     box-shadow: var(--glass-shadow);
   }
   
   .quality-card h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .quality-card ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .quality-card li {
     margin-bottom: 0.5rem;
     padding-left: 1.5rem;
     position: relative;
   }
   
   .quality-card li::before {
     content: '•';
     color: var(--neon-blue);
     position: absolute;
     left: 0;
   }
   
   /* Visual Comparison */
   .visual-comparison {
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .comparison-image {
     text-align: center;
   }
   
   .comparison-image img {
     border-radius: var(--radius-md);
     border: var(--border-light);
     max-width: 100%;
     height: auto;
   }
   
   .comparison-image figcaption {
     margin-top: 1rem;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* Decision Guide */
   .decision-guide {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .when-to-choose {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     width: 100%;
     overflow: hidden;
   }
   
   .when-to-choose h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .when-to-choose ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .when-to-choose li {
     margin-bottom: 0.75rem;
     padding-left: 1.5rem;
     position: relative;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .when-to-choose li::before {
     content: '✓';
     color: var(--mint-green);
     position: absolute;
     left: 0;
   }
   
   /* Security Tips */
   .security-tips {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .security-tips .tip {
     background: rgba(255, 0, 0, 0.05);
     border: 1px solid rgba(255, 42, 109, 0.3);
   }
   
   .security-tips .tip i {
     color: var(--neon-pink);
   }
   
   /* Advantage Box */
   .advantage-box {
     background: linear-gradient(135deg, rgba(0, 247, 255, 0.1), rgba(5, 255, 161, 0.1));
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .advantage-box h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .advantage-box ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .advantage-box li {
     margin-bottom: 0.75rem;
     padding-left: 1.5rem;
     position: relative;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .advantage-box li::before {
     content: '✓';
     color: var(--mint-green);
     position: absolute;
     left: 0;
   }
   
   /* Platform Tabs */
   .platform-tabs {
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .platform-tab-header {
     display: flex;
     gap: 1rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
   }
   
   .tab-btn {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-sm);
     padding: 0.75rem 1.5rem;
     color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-family: var(--font-accent);
   }
   
   .tab-btn:hover,
   .tab-btn.active {
     background: var(--neon-blue);
     color: #050b30;
     border-color: var(--neon-blue);
   }
   
   .tab-btn i {
     font-size: 1.2rem;
   }
   
   .tab-panel {
     display: none;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .tab-panel.active {
     display: block;
   }
   
   .platform-card {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .platform-icon {
     text-align: center;
     font-size: 3rem;
     margin-bottom: 1rem;
     color: var(--neon-blue);
   }
   
   .guidelines-sections {
     display: grid;
     gap: 1.5rem;
     margin-top: 1rem;
   }
   
   .guidelines-section {
     background: rgba(255, 255, 255, 0.03);
     border-radius: var(--radius-sm);
     padding: 1rem;
   }
   
   .guidelines-section h4 {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 0.75rem;
     color: var(--neon-blue);
     font-family: var(--font-accent);
   }
   
   .guidelines-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .guidelines-section li {
     margin-bottom: 0.5rem;
     padding-left: 1.5rem;
     position: relative;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .guidelines-section li::before {
     content: '→';
     color: var(--neon-blue);
     position: absolute;
     left: 0;
   }
   
   /* Tip Callouts and Alerts */
   .tip-callout,
   .pro-tip,
   .caution-note,
   .info-callout {
     border-left: 4px solid;
     padding: 1rem;
     margin: 1.5rem 0;
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .tip-callout {
     border-color: var(--mint-green);
     background: rgba(5, 255, 161, 0.05);
   }
   
   .pro-tip {
     border-color: var(--cyber-yellow);
     background: rgba(255, 212, 82, 0.05);
   }
   
   .pro-tip h4 {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--cyber-yellow);
     margin-bottom: 0.5rem;
     font-family: var(--font-accent);
   }
   
   .caution-note {
     border-color: var(--neon-pink);
     background: rgba(255, 42, 109, 0.05);
   }
   
   .info-callout {
     border-color: var(--neon-blue);
     background: rgba(0, 247, 255, 0.05);
   }

     /* Skip to content link */
   .skip-to-content {
      position: absolute;
      top: -40px;
      left: 6px;
      background: var(--neon-blue);
      color: #050b30;
      padding: 8px;
      text-decoration: none;
      border-radius: 0 0 4px 4px;
      font-weight: 600;
      z-index: 1001;
      transition: top 0.3s;
   }

   .skip-to-content:focus {
      top: 0;
   }
   
   .info-callout h3 {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   /* Code Blocks */
   .code-box {
     background: rgba(0, 0, 0, 0.5);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .code-box h4 {
     color: var(--cyber-yellow);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .code-box pre {
     margin: 0;
     background: none;
     border: none;
     padding: 0;
     white-space: pre-wrap;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* Accordion */
   .accordion {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .accordion-item {
     background: rgba(255, 255, 255, 0.03);
     border: var(--border-light);
     border-radius: var(--radius-sm);
     overflow: hidden;
   }
   
   .accordion-header {
     width: 100%;
     text-align: left;
     background: none;
     border: none;
     padding: 1rem 1.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: white;
     font-family: var(--font-accent);
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .accordion-header:hover {
     background: rgba(255, 255, 255, 0.05);
   }
   
   .accordion-header i {
     color: var(--neon-blue);
     transition: transform 0.3s ease;
     flex-shrink: 0; /* Impedisce all'icona di restringersi */
     margin-left: 8px; /* Spazio tra il testo e l'icona */
   }
   
   .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.4s ease;
   }
   
   .accordion-item.active .accordion-content {
     max-height: 500px;
     padding: 0 1.5rem 1.5rem;
   }
   
   .accordion-item.active .accordion-header i {
     transform: rotate(180deg);
   }
   
   /* File Size Comparison Table */
   .file-size-comparison table {
     margin: 1rem 0;
     width: 100%;
   }
   
   .table-caption {
     text-align: center;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
     margin-top: 0.5rem;
   }
   
   /* Table Styles */
   .table-responsive {
     overflow-x: auto;
     margin: 1.5rem 0;
     width: 100%;
     max-width: 100%;
     -webkit-overflow-scrolling: touch; /* Scrolling fluido su iOS */
     border-radius: var(--radius-sm);
     border: var(--border-light);
     background: rgba(0, 0, 0, 0.2);
   }
   
   table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 0; /* Cambiato da 1rem a 0 */
     background: rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-sm);
     overflow: hidden;
   }
   
   th, td {
     padding: 0.75rem 1rem;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   th {
     background: rgba(0, 247, 255, 0.1);
     color: var(--neon-blue);
     font-weight: 600;
     font-family: var(--font-accent);
   }
   
   tr:hover {
     background: rgba(255, 255, 255, 0.03);
   }
   
   /* Comparison Table */
   .comparison-table table {
     background: rgba(255, 255, 255, 0.05);
   }
   
   .comparison-table th {
     background: rgba(0, 247, 255, 0.2);
   }
   
   /* Legal Box */
   .legal-box {
     background: rgba(255, 42, 109, 0.1);
     border: 1px solid rgba(255, 42, 109, 0.3);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .legal-box h4 {
     color: var(--neon-pink);
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   /* Figures and Images */
   figure {
     margin: 1.5rem 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   figure img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-md);
     border: var(--border-light);
   }
   
   figcaption {
     margin-top: 0.5rem;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
     text-align: center;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* Future Trends */
   .future-trends {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
     margin: 2rem 0;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .trend {
     background: rgba(255, 255, 255, 0.05);
     border: var(--border-light);
     border-radius: var(--radius-md);
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .trend i {
     font-size: 2rem;
     margin-bottom: 1rem;
     color: var(--neon-blue);
   }
   
   .trend h4 {
     color: white;
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .trend p {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0;
   }
   
   /* FAQs Section */
   .faqs {
     margin-top: 3rem;
     background: rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-lg);
     padding: 2rem;
     border: var(--border-light);
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .faqs h3 {
     color: var(--neon-blue);
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
     font-family: var(--font-accent);
   }
   
   .faq-item {
     margin-bottom: 1.5rem;
     padding-bottom: 1.5rem;
     border-bottom: var(--border-light);
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .faq-item:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
   }
   
   .faq-item h4 {
     color: white;
     margin-bottom: 0.5rem;
     font-family: var(--font-accent);
   }
   
   .faq-item p {
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 0;
   }
   
   /* Article Footer */
   .blog-post-footer {
     padding: var(--article-spacing);
     background: rgba(255, 255, 255, 0.03);
     border-top: var(--border-light);
     width: 100%;
     overflow: hidden;
   }
   
   .share-buttons {
     text-align: center;
     margin-bottom: 2rem;
   }
   
   .share-buttons h4 {
     color: white;
     margin-bottom: 1rem;
     font-family: var(--font-accent);
   }
   
   .social-buttons-container {
     display: flex;
     justify-content: center;
     gap: 1rem;
     flex-wrap: wrap; /* Permette il wrap su mobile */
   }
   
   .share-button {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     transition: all 0.3s ease;
   }
   
   .share-button:hover {
     background: var(--neon-blue);
     transform: translateY(-3px);
   }
   
   .share-button.facebook:hover {
     background: #4267B2;
   }
   
   .share-button.twitter:hover {
     background: #1DA1F2;
   }
   
   .share-button.linkedin:hover {
     background: #0077B5;
   }
   
   .share-button.pinterest:hover {
     background: #E60023;
   }
   
   .related-posts {
     margin-top: 2rem;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .related-posts h3 {
     text-align: center;
     color: white;
     margin-bottom: 1.5rem;
     font-family: var(--font-accent);
   }
   
   .related-posts-grid {
     display: flex;
     gap: 1.5rem;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .related-post {
     flex: 0 0 300px;
     max-width: 300px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: var(--radius-md);
     border: var(--border-light);
     overflow: hidden;
     transition: all 0.3s ease;
   }
   
   .related-post:hover {
     transform: translateY(-5px);
     box-shadow: var(--glass-shadow);
     border-color: var(--neon-blue);
   }
   
   .related-post img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     aspect-ratio: 3/2;
   }
   
   .related-post h4 {
     padding: 1rem;
     color: white;
     font-size: 1.125rem;
     line-height: 1.4;
     font-family: var(--font-accent);
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* CTA Box */
   .cta-box {
     background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple));
     padding: 2rem;
     border-radius: var(--radius-lg);
     text-align: center;
     margin: 3rem 0;
     box-shadow: var(--glass-shadow);
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .cta-box h3 {
     color: white;
     margin-bottom: 1rem;
     font-size: 1.75rem;
     font-family: var(--font-accent);
   }
   
   .cta-box p {
     color: white;
     margin-bottom: 1.5rem;
     font-size: 1.125rem;
   }
   
   .cta-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 44px;
     background: white;
     color: var(--neon-purple);
     padding: 0.75rem 2rem;
     border-radius: 25px;
     font-weight: 600;
     font-family: var(--font-accent);
     transition: all 0.3s ease;
   }
   
   .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   }
   
   /* Tool Promo */
   .tool-promo {
     background: rgba(0, 247, 255, 0.1) !important;
     text-align: center;
   }
   
   .tool-promo p {
     margin-bottom: 1rem;
     color: rgba(255, 255, 255, 0.8);
   }
   
   .promo-button {
     display: inline-block;
     background: linear-gradient(45deg, var(--neon-blue), var(--mint-green));
     color: #050b30;
     padding: 0.75rem 1.5rem;
     border-radius: 25px;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
     font-family: var(--font-accent);
   }
   
   .promo-button:hover {
     box-shadow: var(--glow-blue);
     transform: translateY(-3px);
   }
   
   /* Categories and Popular Posts */
   .categories h3,
   .popular-posts h3 {
     color: var(--neon-blue);
     font-family: var(--font-accent);
   }
   
   /* Footer */
   footer {
     background: linear-gradient(to bottom, rgba(10, 10, 25, 0.5), rgba(5, 5, 15, 0.9));
     padding: 3rem 0 1.5rem;
     position: relative;
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border-top: var(--border-light);
     margin-top: 3rem;
     width: 100%;
     overflow-x: hidden;
   }
   
   footer .container {
     width: 100%;
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 1rem;
     overflow: hidden;
   }
   
   .footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     margin-bottom: 2rem;
     max-width: var(--max-width);
     margin-left: auto;
     margin-right: auto;
     padding: 0 1rem;
     width: 100%;
     overflow: hidden;
   }
   
   .footer-logo {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
     font-family: var(--font-accent);
     font-weight: 700;
   }
   
   .footer-logo i {
     color: var(--neon-blue);
   }
   
   .footer-logo span {
     background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   #disclaimer {
     max-width: 600px;
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.95rem;
     margin-bottom: 1.5rem;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   .footer-links {
     width: 100%;
     max-width: 100%;
     overflow: hidden;
   }
   
   .footer-links ul {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     justify-content: center;
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .footer-links li {
     margin: 0;
   }
   
   .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     transition: all 0.3s ease;
     font-weight: 500;
     position: relative;
   }
   
   .footer-links a::after {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--neon-blue);
     transition: all 0.3s ease;
   }
   
   .footer-links a:hover {
     color: var(--neon-blue);
   }
   
   .footer-links a:hover::after {
     width: 100%;
   }
   
   .copyright {
     text-align: center;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     color: rgba(255, 255, 255, 0.4);
     font-size: 0.875rem;
     max-width: var(--max-width);
     margin: 0 auto;
     padding-left: 1rem;
     padding-right: 1rem;
     width: 100%;
     overflow: hidden;
   }
   
   /* ==========================================================================
      PROS AND CONS STYLING
      ========================================================================== */
   
   /* Stile per Pros */
   .pros-section h3,
   .pros-title {
     color: var(--neon-blue);
   }
   
   .pros-list li::before {
     content: "✓";
     color: var(--mint-green);
   }
   
   /* Stile per Cons */
   .cons-section h3,
   .cons-title {
     color: var(--neon-pink);
   }
   
   .cons-list li::before {
     content: "✗";
     color: var(--neon-pink);
   }
   
   /* Fix per tabelle con overflow orizzontale */
   .table-responsive {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     max-width: 100%;
     margin-bottom: 1rem;
   }
   
   /* Fix specifico per la tabella di naming patterns */
   .table-naming-patterns table {
     table-layout: fixed;
     width: 100%;
   }
   
   .table-naming-patterns th:nth-child(1) {
     width: 25%;
   }
   
   .table-naming-patterns th:nth-child(2) {
     width: 40%;
   }
   
   .table-naming-patterns th:nth-child(3) {
     width: 35%;
   }
   
   /* Fix specifico per la tabella di software options */
   .table-software-options th,
   .table-software-options td {
     min-width: 120px;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* ==========================================================================
      PRIVACY AND SECURITY GUIDE STYLING
      ========================================================================== */
   
   /* Red Flags Section */
   .red-flag-list {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     margin: 2rem 0;
   }
   
   .red-flag-item {
     position: relative;
     padding-left: 2rem;
   }
   
   .red-flag-item h4 {
     color: var(--neon-blue);
     margin-bottom: 0.75rem;
     font-size: 1.4rem;
   }
   
   .red-flag-item::before {
     content: "▲";
     position: absolute;
     left: 0;
     top: 0.3rem;
     color: var(--neon-pink);
     font-size: 1rem;
   }
   
   /* Risk Sections */
   .risk-categories {
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
     margin: 2rem 0;
   }
   
   .risk-category {
     position: relative;
   }
   
   .risk-category h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-size: 1.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .risk-category h3 i {
     color: var(--neon-blue);
     font-size: 1.2em;
   }
   
   /* Privacy Practices */
   .privacy-practices {
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
     margin: 2rem 0;
   }
   
   .practice-section {
     position: relative;
   }
   
   .practice-section h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-size: 1.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .practice-section h3 i {
     color: var(--neon-blue);
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 247, 255, 0.1);
     border-radius: 50%;
   }
   
   /* Security Levels */
   .security-levels {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     margin: 2rem 0;
   }
   
   .security-level h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-size: 1.4rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   /* Mobile Device Security */
   .mobile-security {
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
     margin: 2rem 0;
   }
   
   .device-type h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-size: 1.4rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .android-warning {
     border-left: 4px solid var(--neon-pink);
     padding: 1rem;
     background: rgba(255, 42, 109, 0.1);
     margin: 1rem 0;
   }
   
   .ios-tip {
     border-left: 4px solid var(--mint-green);
     padding: 1rem;
     background: rgba(5, 255, 161, 0.1);
     margin: 1rem 0;
   }
   
   /* Storage Options */
   .secure-storage {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     margin: 2rem 0;
   }
   
   .storage-option h3 {
     color: var(--neon-blue);
     margin-bottom: 1rem;
     font-size: 1.4rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   /* ==========================================================================
      RESPONSIVE QUERIES - DESKTOP TO MOBILE
      ========================================================================== */
   
   /* Large Desktop */
   @media (max-width: 1400px) {
     .blog-post-container .container {
       width: 95%;
     }
   }
   
   /* Desktop to Tablet */
   @media (max-width: 1200px) {
     .blog-post-container .container {
       flex-direction: column;
       gap: 2rem;
     }
     
     .blog-sidebar {
       position: static;
       flex: none;
       max-width: var(--article-max-width);
       margin: 0 auto;
     }
     
     .tips-grid,
     .reason-grid,
     .quality-comparison,
     .future-trends {
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     }
     
     .decision-guide {
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     }
   }
   
   /* Tablet */
   @media (max-width: 992px) {
     :root {
       --article-spacing: 1.5rem;
     }
     
     .blog-post h1 {
       font-size: 2.2rem;
     }
     
     .blog-post-content h2 {
       font-size: 1.8rem;
     }
     
     .blog-post-content h3 {
       font-size: 1.6rem;
     }
     
     .blog-post-content h4 {
       font-size: 1.4rem;
     }
     
     .platform-icon {
       font-size: 2.5rem;
     }
     
     .cta-box {
       padding: 1.5rem;
     }
     
     .cta-box h3 {
       font-size: 1.6rem;
     }
     
     .related-post {
       flex: 0 0 45%;
       max-width: 45%;
     }
     
     .term-definitions,
     .attribution-cards,
     .feature-grid,
     .tools-grid {
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
   }
   
   /* Mobile Large */
   @media (max-width: 768px) {
     /* ===== CORREZIONI COLORI ===== */
     /* Correggi il background generale */
     body {
       background: var(--bg-gradient);
       background-attachment: fixed;
       height: auto !important;
       overflow-x: hidden !important; /* Da visible a hidden */
     }
     
     /* Font size globali ridotti per mobile */
     html {
       font-size: 15px;
     }
     
     /* Correggi il blog post e i suoi componenti */
     .blog-post {
       background: rgba(20, 20, 40, 0.3);
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       border-radius: var(--radius-md);
       display: flex;
       flex-direction: column;
       overflow: hidden; /* Risolve la sovrapposizione */
       width: 100%;
       max-width: 100%;
     }
     
     .blog-post-content, 
     .blog-post-header, 
     .blog-post-footer {
       background: transparent;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     /* Correggi il footer */
     footer {
       background: linear-gradient(to bottom, rgba(10, 10, 25, 0.5), rgba(5, 5, 15, 0.9));
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       width: 100%;
       overflow-x: hidden;
       padding: 2rem 0 1rem;
     }
     
     /* Correggi box informativi */
     .content-box, 
     .advantage-box, 
     .legal-box, 
     .tip-callout, 
     .info-callout, 
     .pro-tip, 
     .caution-note {
       background-color: rgba(0, 0, 0, 0.2);
       width: 100%;
       max-width: 100%;
       overflow: hidden;
       padding: 1.25rem;
       margin: 1.25rem 0;
     }
     
     /* ===== CORREZIONI HEADER ===== */
     /* Mantieni l'header orizzontale */
     header .container {
       justify-content: flex-start; /* Al posto di space-between !important */
       width: 92%; /* Leggermente più ampio su mobile */
       gap: 0.5rem;
     }
     
     /* Logo leggermente più piccolo su mobile ma mantenendo leggibilità */
     .logo i {
       font-size: 1.5rem;
     }
     
     #site-title {
       font-size: 1.3rem;
     }
     
     /* Assicura che la tendina stia a destra */
     .header-controls {
       flex: 0 0 auto;
       margin-left: auto;
     }
     
     /* Controllo per la tendina nel menu mobile */
     #current-language {
       padding: 0.5rem 1rem;
       font-size: 0.85rem;
     }
     
     /* Regola l'altezza dell'header */
     header {
       padding: 0.75rem 0;
       z-index: 1000;
       width: 100%;
       overflow: hidden;
     }
     
     /* ===== FIX PER ELEMENTI FISSI ===== */
     /* Impedisci agli elementi dell'header dell'articolo di seguire lo scroll */
     .blog-post-header {
       position: relative !important;
       z-index: 5; /* Aumentato da 1 a 5 */
       margin-bottom: 1rem;
       padding-bottom: 1rem;
       border-bottom: var(--border-light);
       overflow: visible;
       width: 100%;
       max-width: 100%;
       padding: 1.25rem;
     }
     
     /* Fix titolo principale */
     .blog-post h1 {
       font-size: 1.8rem; /* Dimensione fissa invece di clamp */
       line-height: 1.4; /* Aumentato line-height */
       position: static !important;
       display: block;
       margin-bottom: 1.2rem;
       z-index: 10 !important; /* z-index elevato */
       word-break: break-word; /* Permette interruzioni di parole */
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .blog-post-header h1,
     .blog-post-header figure,
     .blog-post-header .featured-image,
     .blog-post-header .blog-meta,
     .blog-post-header time,
     .blog-post-header nav,
     .blog-post-header .breadcrumb {
       position: static !important;
       top: auto !important;
       left: auto !important;
       transform: none !important;
       z-index: auto !important;
       width: auto !important;
       max-width: 100%;
       overflow: hidden;
     }
   
     .featured-image {
       margin-bottom: 0 !important; /* Rimuove margine extra */
       max-width: 100%;
       height: auto;
     }
     
     /* Aggiusta lo spazio sopra per l'header fisso */
     .blog-post-container {
       padding-top: 70px;
       width: 100%;
       max-width: 100%;
       overflow-x: hidden;
     }
     
     /* ===== CORREZIONI LAYOUT CONTENUTO ===== */
     /* Fix strutturale per l'header e il contenuto dell'articolo */
     .blog-post-content {
       margin-top: 0;
       padding-top: 1rem;
       position: relative;
       z-index: 1;
       clear: both; /* Impedisce galleggiamenti */
       width: 100%;
       max-width: 100%;
       overflow: hidden;
       padding: 1.25rem;
     }
     
     /* Aggiunge spazio prima del primo titolo h2 (Introduction) */
     .blog-post-content h2:first-of-type {
       margin-top: 1.5rem; /* Ridotto per mobile */
       padding-top: 1.25rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       clear: both; /* Impedisce sovrapposizioni */
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     /* Assicura che tutti gli elementi nel contenuto siano visibili */
     .blog-post-content > * {
       position: relative;
       z-index: 1; /* Ridotto da 2 a 1 */
       max-width: 100%;
       overflow: hidden;
     }
     
     /* Contenitori principali con spaziatura esplicita */
     .blog-post-container .container {
       display: flex;
       flex-direction: column;
       gap: 0;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     /* ===== MIGLIORAMENTI LAYOUT MOBILE ===== */
     /* Aggiusta blog-meta e breadcrumb */
     .blog-meta {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .breadcrumb {
       flex-wrap: nowrap;
       overflow-x: auto;
       white-space: nowrap;
       -webkit-overflow-scrolling: touch;
       padding-bottom: 4px;
       scrollbar-width: none; /* Per Firefox */
       font-size: 0.7rem; /* Ridotto da dimensione originale */
       width: 100%;
       max-width: 100%;
       padding-right: 8px; /* Spazio extra per sicurezza */
       mask-image: linear-gradient(to right, black 90%, transparent 100%);
       -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
     }
     
     .breadcrumb::-webkit-scrollbar {
       display: none; /* Nasconde scrollbar in Chrome/Safari */
     }
     
     .breadcrumb-separator {
       margin: 0 2px;
       font-size: 0.6rem;
     }
     
     .breadcrumb-item {
       flex-shrink: 0;
     }
     
     /* Aggiusta padding e spaziature */
     .blog-post-footer {
       padding: 1.25rem;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     /* Miglioramenti per componenti vari su mobile */
     .step {
       flex-direction: column;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
       padding: 1.25rem;
     }
     
     .step-icon {
       margin-bottom: 0.5rem;
     }
     
     .related-posts-grid {
       flex-direction: column;
       align-items: center;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .related-post {
       max-width: 100%;
       width: 100%;
       margin-bottom: 1rem;
     }
     
     .related-post img {
       aspect-ratio: 3/2;
       object-fit: cover;
     }
     
     .footer-links ul {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
       justify-content: center;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .footer-links a {
       padding: 0.5rem;
       min-height: 44px; /* Minimo per un buon tap target */
       display: flex;
       align-items: center;
       justify-content: center;
     }
     
     .social-buttons-container {
       flex-wrap: wrap;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .share-button {
       width: 44px;
       height: 44px;
     }
     
     .tips-grid,
     .reason-grid,
     .quality-comparison,
     .decision-guide,
     .security-tips,
     .future-trends {
       grid-template-columns: 1fr;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
       gap: 1rem;
     }
     
     .platform-tab-header {
       flex-direction: column;
       width: 100%;
       max-width: 100%;
       overflow: hidden;
     }
     
     .tab-btn {
       width: 100%;
       justify-content: center;
       margin-bottom: 0.5rem;
       min-height: 44px; /* Minimo per un buon tap target */
     }
     
     /* Nascondi il tempo di lettura */
     .blog-meta .date,
     time[datetime="2025-05-01"] {
       display: none !important;
     }
     
     /* Fix per tabelle responsive */
     .table-responsive {
       max-width: 100%;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       border-radius: var(--radius-sm);
       border: var(--border-light);
       background: rgba(0, 0, 0, 0.2);
     }
     
     /* Fix per code blocks */
     pre, code {
       white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 100%;
     }
     
     /* Fix per testo lungo non interrompibile */
     p, h1, h2, h3, h4, li, td, th, figcaption {
       word-wrap: break-word;
       overflow-wrap: break-word;
       hyphens: auto;
       max-width: 100%;
     }
     
     /* Riduzione dimensione font e padding */
     .blog-post-content h2 {
       font-size: 1.6rem;
       margin-top: 1.5rem;
       margin-bottom: 0.75rem;
     }
     
     .blog-post-content h3 {
       font-size: 1.4rem;
       margin-top: 1.25rem;
     }
     
     .blog-post-content h4 {
       font-size: 1.2rem;
     }
     
     .cta-box {
       padding: 1.5rem;
       margin: 2rem 0;
     }
     
     .cta-box h3 {
       font-size: 1.4rem;
     }
     
     /* Fix per CTA button che può risultare troppo piccolo su mobile */
     .cta-button {
       padding: 0.6rem 1.5rem;
       min-height: 44px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
     
     /* FAQs più compatti */
     .faqs {
       padding: 1.5rem;
       margin-top: 2rem;
     }
     
     .faqs h3 {
       font-size: 1.4rem;
     }
     
     /* Fix per sovrapposizioni in accordion */
     .accordion-header {
       padding: 1rem;
     }
     
     .accordion-header i {
       flex-shrink: 0;
       margin-left: 8px;
     }
     
     /* Mobile additions for new components */
     .term-definitions,
     .attribution-cards,
     .best-practices-grid,
     .legal-considerations {
       grid-template-columns: 1fr;
     }
     
     .download-step,
     .attribution-card,
     .practice-item,
     .factor {
       flex-direction: column;
     }
     
     .icon-wrapper,
     .card-icon,
     .practice-icon,
     .factor i {
       margin-bottom: 1rem;
     }
     
     .format-definition h2 {
       font-size: 1.5rem;
     }
     
     .process-steps .step::before {
       left: 50%;
       transform: translateX(-50%);
       top: -20px;
     }
     
     .process-steps .step {
       padding-left: 1.5rem;
       padding-top: 2rem;
     }
     
     .table-responsive {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-sm);
     }
     
     .table-naming-patterns th,
     .table-naming-patterns td,
     .table-software-options th,
     .table-software-options td {
      font-size: 0.9rem;
      padding: 0.5rem;
     }
     
     /* Mobile responsive pros/cons */
     .pros-cons {
       grid-template-columns: 1fr;
       gap: 1rem;
     }
   }
   
   /* Mobile Medium */
   @media (max-width: 480px) {
     /* Riduzione ulteriore fontsizes */
     html {
       font-size: 14px;
     }
     
     .blog-post h1 {
       font-size: 1.6rem;
     }
     
     .blog-post-content h2 {
       font-size: 1.4rem;
     }
     
     .blog-post-content h3 {
       font-size: 1.25rem;
     }
     
     .blog-post-content h4 {
       font-size: 1.1rem;
     }
     
     /* Riduzione padding e margini */
     .blog-post-header,
     .blog-post-content,
     .blog-post-footer {
       padding: 1rem;
     }
     
     .content-box, 
     .advantage-box, 
     .legal-box, 
     .tip-callout, 
     .info-callout, 
     .pro-tip, 
     .caution-note {
       padding: 1rem;
       margin: 1rem 0;
     }
     
     .step {
       padding: 1rem;
     }
     
     .cta-box {
       padding: 1.25rem;
       margin: 1.5rem 0;
     }
     
     .faqs {
       padding: 1.25rem;
       margin-top: 1.5rem;
     }
     
     /* Nascondi alcuni elementi decorativi */
     .platform-icon {
       font-size: 2rem;
       margin-bottom: 0.75rem;
     }
     
     /* Adatta lo spazio tra elementi */
     .step-by-step {
       gap: 1rem;
       margin: 1.5rem 0;
     }
     
     .tips-grid,
     .reason-grid,
     .quality-comparison,
     .decision-guide,
     .security-tips,
     .future-trends {
       gap: 1rem;
       margin: 1.5rem 0;
     }
     
     /* Adatta dimensioni immagini relative */
     .related-post img {
       height: 180px;
     }
     
     /* Fix per tabelle troppo dense su dispositivi piccoli */
     th, td {
       padding: 0.5rem;
     }
     
     .format-definition,
     .factor,
     .term,
     .attribution-card,
     .case-study {
       padding: 1rem;
     }
   }
   
   /* Mobile Small */
   @media (max-width: 360px) {
     /* Ulteriore riduzione dimensioni font */
     html {
       font-size: 13px;
     }
     
     header .container {
       width: 94%; /* Ancora più ampio per evitare problemi su dispositivi molto piccoli */
     }
     
     /* Logo ancora più compatto ma riconoscibile */
     .logo {
       gap: 0.3rem;
     }
     
     .logo i {
       font-size: 1.3rem;
     }
     
     #site-title {
       font-size: 1.1rem;
     }
     
     .blog-post h1 {
       font-size: 1.5rem;
     }
     
     .blog-post-content h2 {
       font-size: 1.3rem;
     }
     
     .blog-post-content h3 {
       font-size: 1.15rem;
     }
     
     .blog-post-content h4 {
       font-size: 1.05rem;
     }
     
     /* Spaziatura minima ma efficace */
     .blog-post-header,
     .blog-post-content,
     .blog-post-footer {
       padding: 0.75rem;
     }
     
     /* Fix per elementi che possono causare scrollbar orizzontale */
     pre code {
       font-size: 0.85rem;
     }
     
     /* Fix per tabelle troppo dense su dispositivi molto piccoli */
     th, td {
       padding: 0.5rem;
       font-size: 0.85rem;
     }
     
     /* Meno spazio tra elementi correlati */
     .related-post {
       margin-bottom: 0.75rem;
     }
     
     /* Adatta dimensioni immagini */
     .related-post img {
       height: 160px;
     }
     
     /* Margine più stretto per footer links */
     .footer-links ul {
       gap: 0.75rem;
     }
     
     /* Pulsanti più piccoli ma pur sempre tappabili */
     .tab-btn {
       padding: 0.5rem;
     }
     
     /* Riduci dimensione icone */
     .step-icon {
       font-size: 1.25rem;
     }
     
     .tip i {
       font-size: 1.5rem;
     }
   }