/* LIGHT THEME (default) */
    :root {
      --bg: #ffffff;
      --surface: #f8f9fa;
      --text: #0a0a0a;
      --muted: #aaaaaa;
      --border: #e5e7eb;
      --border-hi: #d1d5db;
      --border-lo: #f3f4f6;
      --card-bg: #ffffff;
      --human: #044bae;
      --human-dk: #033d8f;
      --tech: #c76ce5;
      --tech-raw: #c76ce5;
      --tech-dk: #b45dd1;
      --accent: #B2E92E;
      --display-bg: #f9fafb;
      --display-text: #555555;
      --green: #F849C1;
      --green-glow: rgba(248, 73, 193, 0.3);
      --green-bright: #FF6AD5;
      --yellow: #F8EC4A;
      --yellow-glow: rgba(248, 236, 74, 0.3);
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 16px;
      --space-4: 24px;
      --space-5: 32px;
      --space-6: 48px;
      --space-7: 64px;
      --space-8: 96px;
      --radius-1: 2px;
      --radius-2: 4px;
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
      --font-mono: 'IBM Plex Mono', monospace;
      --font-pixel: 'Silkscreen', monospace;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --dur: 180ms;
    }

    /* DARK THEME - CRT MONITOR */
    [data-theme="dark"] {
      --bg: #000000;
      --surface: #0a0a0a;
      --text: #00ff41;
      --muted: #00aa2e;
      --border: #00ff41;
      --border-hi: #00ff41;
      --border-lo: #004411;
      --card-bg: #000000;
      --human: #00ff41;
      --human-dk: #00dd35;
      --tech: #00ff41;
      --tech-raw: #00ff41;
      --tech-dk: #00dd35;
      --display-bg: #000;
      --display-text: #00ff41;
      --green: #00ff41;
      --green-glow: rgba(0, 255, 65, 0.6);
      --green-bright: #33ff66;
      --yellow: #00ff41;
      --yellow-glow: rgba(0, 255, 65, 0.5);
    }
    /* Dark mode: override hardcoded colors to CRT green palette */
    /* DARK MODE — override inline palette colors via attribute selectors */
    [data-theme="dark"] [style*="color: #555555"] { color: #00aa2e !important; }
    [data-theme="dark"] [style*="color:#555555"]  { color: #00aa2e !important; }
    /* Fix: black text (#000000) is invisible on dark background */
    [data-theme="dark"] [style*="color:#000000"]  { color: var(--text) !important; }
    [data-theme="dark"] [style*="color: #000000"] { color: var(--text) !important; }


    .clr-pink  { color: #FF4DA6 !important; }
    .clr-viola { color: #7B2CBF !important; }
    .clr-blue  { color: #1F6FEB !important; }
    .clr-gray  { color: #aaaaaa !important; }
    .clr-mid   { color: #555555 !important; }
    .clr-mono-sub { color: #aaaaaa !important; }
    /* PALETTE TEXT CLASSES — dark mode override + text-shadow: none per colori non verdi */
    [data-theme="dark"] .clr-pink  { color: #FF4DA6 !important; text-shadow: none !important; }
    [data-theme="dark"] .clr-viola { color: #7B2CBF !important; text-shadow: none !important; }
    [data-theme="dark"] .clr-blue  { color: #1F6FEB !important; text-shadow: none !important; }
    [data-theme="dark"] .clr-gray  { color: #aaaaaa !important; text-shadow: none !important; }
    [data-theme="dark"] .clr-mid   { color: #00aa2e !important; }
    [data-theme="dark"] .clr-mono-sub { color: #aaaaaa !important; text-shadow: none !important; }
    /* Inline style colors: niente glow verde su testi colorati non-green */
    [data-theme="dark"] [style*="color: #FF4DA6"],
    [data-theme="dark"] [style*="color:#FF4DA6"],
    [data-theme="dark"] [style*="color: #7B2CBF"],
    [data-theme="dark"] [style*="color:#7B2CBF"],
    [data-theme="dark"] [style*="color: #1F6FEB"],
    [data-theme="dark"] [style*="color:#1F6FEB"],
    [data-theme="dark"] [style*="color: #ffffff"],
    [data-theme="dark"] [style*="color:#ffffff"],
    [data-theme="dark"] [style*="color: rgba(255"],
    [data-theme="dark"] [style*="color:rgba(255"] { text-shadow: none !important; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* Skip Link for Accessibility */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--human);
      color: #fff;
      padding: 8px 16px;
      z-index: 1000;
      font-family: var(--font-mono);
      font-size: 14px;
      text-decoration: none;
      border-radius: 0 0 4px 0;
      transition: top 0.3s ease;
    }
    .skip-link:focus {
      top: 0;
      outline: 2px solid var(--human);
      outline-offset: 2px;
    }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.3s ease, color 0.3s ease;
      overflow-x: hidden;
    }
    html { overflow-x: hidden; }
    [data-theme="dark"] body {
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.05em;
      position: relative;
      /* Ridotto: era 0.3, causava glow verde su tutti i testi colorati (pink, blue, viola) */
      text-shadow: 0 0 3px rgba(0, 255, 65, 0.12);
    }
    [data-theme="dark"] body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 255, 65, 0.02) 50%
      );
      background-size: 100% 4px;
      pointer-events: none;
      z-index: 9999;
      animation: scanline 8s linear infinite;
    }
    @keyframes scanline {
      0% { transform: translateY(0); }
      100% { transform: translateY(4px); }
    }
    ::selection { background: var(--human); color: #fff; }
    h1, h2, h3, h4 {
      font-family: 'Audiowide', sans-serif;
      line-height: 1.2;
      letter-spacing: 0.02em;
      font-weight: 700;
    }
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4 {
      font-family: 'VT323', monospace;
      letter-spacing: 0.1em;
      line-height: 1.3;
      font-weight: normal;
      text-transform: uppercase;
      color: #00b830;
      /* Glow ridotto: evita interferenze su testi con colori diversi */
      text-shadow: 0 0 6px rgba(0, 184, 48, 0.2);
    }
    /* Hero case study: headings su sfondi colorati → niente glow verde */
    [data-theme="dark"] .cs-hero-split h1,
    [data-theme="dark"] .cs-hero-split h2,
    [data-theme="dark"] .cs-hero-split h3 {
      color: inherit;
      text-shadow: none;
    }
    /* Span colorati dentro heading: niente glow ereditato */
    [data-theme="dark"] h1 span,
    [data-theme="dark"] h2 span,
    [data-theme="dark"] h3 span,
    [data-theme="dark"] h4 span {
      text-shadow: none;
    }

    .section { padding: var(--space-8) 0; }
    .section--sm { padding: var(--space-6) 0; }
    .container { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5); }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
    .divider { height: 1px; background: var(--border); margin: var(--space-7) 0; }

    /* HEADER */
    .header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255, 255, 255, 0.98);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(12px);
      transition: background-color 0.3s ease;
    }
    [data-theme="dark"] .header {
      background: rgba(0, 0, 0, 0.98);
      border-bottom: 2px solid var(--green);
      box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
    }
    .header__inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 56px; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5);
    }
    .header__logo {
      display: flex; align-items: center; gap: 6px;
      cursor: pointer; transition: all 0.3s ease;
      height: 36px;
    }
    .header__logo img {
      height: 32px;
      width: auto;
      transition: all 0.3s ease;
    }
    [data-theme="light"] .header__logo .logo-dark {
      display: block;
    }
    [data-theme="light"] .header__logo .logo-light {
      display: none;
    }
    [data-theme="dark"] .header__logo .logo-dark {
      display: none;
    }
    [data-theme="dark"] .header__logo .logo-light {
      display: block;
      filter: 
        brightness(0) saturate(100%) 
        invert(88%) sepia(94%) saturate(2578%) hue-rotate(54deg) brightness(104%) contrast(119%);
      /* Questo filter trasforma il bianco in #00ff41 (verde neon) */
    }
    [data-theme="dark"] .header__logo img {
      filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8)) 
              drop-shadow(0 0 20px rgba(0, 255, 65, 0.5));
    }
    .header__logo:hover { opacity: 0.8; }
    @keyframes pulse {
      0%, 100% { 
        opacity: 1; 
        box-shadow: 
          0 0 10px rgba(0, 255, 65, 1),
          0 0 20px rgba(0, 255, 65, 0.6);
      }
      50% { 
        opacity: 0.6; 
        box-shadow: 
          0 0 15px rgba(0, 255, 65, 1),
          0 0 30px rgba(0, 255, 65, 0.8);
      }
    }
    .header__nav { display: flex; align-items: center; gap: var(--space-5); }
    .nav-link {
      font-family: 'Audiowide', sans-serif;
      font-size: 14px; font-weight: 400; color: #555555;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: var(--space-1) 0; border-bottom: 1px solid transparent;
      transition: all var(--dur);
      cursor: pointer;
    }
    [data-theme="dark"] .nav-link {
      font-family: 'Space Mono', monospace;
      font-size: 14px;
      letter-spacing: 0.08em;
      color: var(--yellow);
      text-shadow: 0 0 4px var(--yellow-glow);
      opacity: 1;
    }
    .nav-link:hover { color: var(--text); }
    .nav-link--active { color: var(--text); border-bottom-color: var(--human); }
    [data-theme="dark"] .nav-link:hover {
      text-shadow: 0 0 12px rgba(0, 255, 65, 0.8);
      border-bottom-color: var(--yellow);
      opacity: 1;
      color: var(--green);
    }
    [data-theme="dark"] .nav-link--active {
      color: var(--green);
      border-bottom-color: var(--green);
      text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
      opacity: 1;
    }
    /* CAPSULE — voce secondaria, meno enfasi */
    .nav-link--capsule {
      color: var(--muted) !important;
      font-size: 11px;
      opacity: 0.8;
      margin-left: var(--space-2);
    }
    .nav-link--capsule:hover {
      color: var(--text) !important;
      opacity: 1;
    }
    .nav-link--capsule.nav-link--active {
      color: var(--text) !important;
      opacity: 1;
      border-bottom-color: var(--muted);
    }
    [data-theme="dark"] .nav-link--capsule {
      color: var(--muted) !important;
      text-shadow: none;
      opacity: 0.7;
    }
    [data-theme="dark"] .nav-link--capsule:hover {
      color: var(--green) !important;
      text-shadow: none;
      opacity: 1;
    }
    [data-theme="dark"] .nav-link--capsule.nav-link--active {
      color: var(--green) !important;
      border-bottom-color: var(--muted);
      text-shadow: none;
      opacity: 1;
    }

    /* NAV ICONS */
    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .nav-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      filter: brightness(0) opacity(0.45);
      transition: filter var(--dur);
    }
    .nav-link:hover .nav-icon,
    .nav-link--active .nav-icon {
      filter: brightness(0) opacity(0.85);
    }
    [data-theme="dark"] .nav-icon {
      filter: brightness(0) saturate(100%) invert(72%) sepia(87%) saturate(1046%) hue-rotate(82deg) brightness(104%);
    }
    [data-theme="dark"] .nav-link:hover .nav-icon,
    [data-theme="dark"] .nav-link--active .nav-icon {
      filter: brightness(0) saturate(100%) invert(72%) sepia(87%) saturate(1046%) hue-rotate(82deg) brightness(120%);
    }
    .mobile-nav .nav-icon {
      width: 20px;
      height: 20px;
    }

    /* THEME TOGGLE */
    .theme-toggle {
      position: relative;
      width: 64px;
      height: 30px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
      overflow: hidden;
    }
    /* Sliding pill */
    .theme-toggle::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 28px;
      height: 26px;
      background: var(--human);
      border-radius: 13px;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      z-index: 1;
    }
    /* Toggle icons */
    .toggle-icon-today,
    .toggle-icon-dark {
      position: absolute;
      width: 18px;
      height: 18px;
      top: 6px;
      z-index: 2;
      pointer-events: none;
      transition: filter 0.3s ease, opacity 0.3s ease;
    }
    .toggle-icon-today { left: 7px; }
    .toggle-icon-dark { left: 39px; }
    /* LIGHT MODE: pill left (TODAY active), TODAY=white on pink, 1980=dim */
    [data-theme="light"] .toggle-icon-today { filter: brightness(0) invert(1); opacity: 1; }
    [data-theme="light"] .toggle-icon-dark { opacity: 0.45; }
    /* DARK MODE: pill right (1980 active), 1980=black on green, TODAY=dim white */
    [data-theme="dark"] .theme-toggle {
      background: #000;
      border-color: var(--green);
      box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
    }
    [data-theme="dark"] .theme-toggle::before {
      transform: translateX(32px);
      background: var(--green);
    }
    [data-theme="dark"] .toggle-icon-today { filter: brightness(0) invert(1); opacity: 0.35; }
    [data-theme="dark"] .toggle-icon-dark { filter: brightness(0) invert(1); opacity: 1; }
    .theme-toggle:hover { opacity: 0.9; }

    /* HERO */
    .hero {
      min-height: 90vh; display: flex; align-items: center;
      position: relative; overflow: hidden; background: var(--bg);
    }
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 61.8px 61.8px;
      opacity: 0;
      animation: gridReveal 900ms var(--ease) 200ms forwards;
    }
    @keyframes gridReveal {
      0% { opacity: 0; clip-path: inset(100% 0 0 0); }
      60% { opacity: .14; }
      100% { opacity: .12; clip-path: inset(0% 0 0 0); }
    }
    [data-theme="dark"] .hero-grid {
      animation-name: gridRevealDark;
    }
    @keyframes gridRevealDark {
      0% { opacity: 0; clip-path: inset(100% 0 0 0); }
      60% { opacity: .08; }
      100% { opacity: .06; clip-path: inset(0% 0 0 0); }
    }
    .hero-line {
      position: absolute; top: 50%; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--human), transparent);
      opacity: 0;
      animation: lineFlash 600ms var(--ease) 900ms forwards;
    }
    [data-theme="dark"] .hero-line {
      background: linear-gradient(90deg, transparent, var(--green), transparent);
      box-shadow: 
        0 0 20px rgba(0, 255, 65, 0.8),
        0 0 40px rgba(0, 255, 65, 0.5);
    }
    @keyframes lineFlash {
      0% { opacity: 0; transform: scaleX(0); }
      50% { opacity: .5; }
      100% { opacity: 0; }
    }
    .hero__content { position: relative; z-index: 2; max-width: 820px; }
    .hero__meta { margin-bottom: var(--space-4); animation: fadeUp 500ms var(--ease) 700ms both; }
    .hero h1 {
      font-size: clamp(36px, 5.5vw, 76px); font-weight: 800;
      margin-bottom: var(--space-5); line-height: 1.0;
      animation: fadeUp 600ms var(--ease) 850ms both;
    }
    .hero__sub {
      font-size: clamp(15px, 1.8vw, 19px); color: var(--muted);
      max-width: 680px; line-height: 1.7;
      animation: fadeUp 600ms var(--ease) 1000ms both;
    }
    .hero__ctas {
      display: flex; gap: var(--space-3); flex-wrap: wrap;
      margin-top: var(--space-5);
      animation: fadeUp 600ms var(--ease) 1150ms both;
    }
    .hero__status {
      margin-top: var(--space-5);
      animation: fadeUp 400ms var(--ease) 1300ms both;
    }
    [data-theme="dark"] .hero__status {
      font-family: 'VT323', monospace !important;
      font-size: 16px !important;
      letter-spacing: 0.1em;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: none; }
    }

    .hl-tech { color: var(--tech); font-style: normal; }
    .hl-human { color: var(--human); font-style: normal; }
    .hl-neutral { border-bottom: 1px solid var(--border); padding-bottom: 1px; }
    [data-theme="dark"] .hl-tech {
      text-shadow: 0 0 4px var(--yellow-glow);
    }
    [data-theme="dark"] .hl-human {
      text-shadow: 0 0 4px var(--green-glow);
    }

    .crt-display {
      font-family: var(--font-pixel); background: var(--display-bg);
      color: var(--display-text); padding: 6px 12px;
      border-radius: var(--radius-1); letter-spacing: .06em; font-size: 10px;
      text-shadow: 0 0 8px var(--display-text); display: inline-block;
      transition: all 0.3s ease;
    }
    [data-theme="dark"] .crt-display {
      font-family: 'VT323', monospace;
      font-size: 16px;
      letter-spacing: 0.12em;
      border: 2px solid var(--green);
      box-shadow: 
        0 0 20px rgba(0, 255, 65, 0.6),
        inset 0 0 20px rgba(0, 255, 65, 0.2);
      background: rgba(0, 255, 65, 0.05);
      text-shadow: 
        0 0 10px rgba(0, 255, 65, 1),
        0 0 20px rgba(0, 255, 65, 0.7);
    }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
      font-family: 'Audiowide', sans-serif; font-size: 12px; line-height: 1.4;
      letter-spacing: 0.04em; padding: 11px 20px; font-weight: 400;
      border-radius: 8px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text); cursor: pointer;
      box-shadow: none;
      transition: all 0.2s ease;
      white-space: nowrap; user-select: none;
      text-transform: uppercase;
    }
    [data-theme="dark"] .btn {
      font-family: 'VT323', monospace;
      font-size: 12px;
      letter-spacing: 0.1em;
      padding: 12px 22px;
      font-weight: normal;
      text-transform: uppercase;
    }
    .btn:hover { filter: brightness(1.04); }
    .btn:active { transform: translateY(1px); filter: brightness(.96); }
    .btn--human {
      background: linear-gradient(45deg, #044bae, #c76ce5);
      color: #fff;
      border: none;
      box-shadow: 0 2px 8px rgba(4, 75, 174, 0.3);
    }
    .btn--human:hover { 
      box-shadow: 0 4px 16px rgba(4, 75, 174, 0.4);
      transform: translateY(-1px);
      filter: brightness(1.05);
    }
    .btn--tech {
      background: linear-gradient(45deg, #044bae, #c76ce5);
      color: #fff;
      border: none;
      box-shadow: 0 2px 8px rgba(199, 108, 229, 0.3);
    }
    .btn--tech:hover {
      box-shadow: 0 4px 16px rgba(199, 108, 229, 0.4);
      transform: translateY(-1px);
      filter: brightness(1.05);
    }
    .btn--ghost {
      background: transparent; color: var(--text); border-color: var(--border-hi);
    }
    /* secondary button for dual-action contexts */
    .btn--secondary {
      background: transparent;
      color: var(--muted);
      border-color: var(--border);
    }
    .btn--secondary:hover {
      background: var(--surface);
      border-color: var(--text);
      color: var(--text);
    }
    .btn--ghost:hover {
      background: var(--surface);
      border-color: var(--human);
      color: var(--human);
    }
    [data-theme="dark"] .btn {
      box-shadow: none;
      border-radius: 0;
    }
    [data-theme="dark"] .btn:hover {
      filter: brightness(1.2);
      transform: translateY(-1px);
    }
    [data-theme="dark"] .btn--human {
      background: #000; 
      color: var(--green);
      border: 2px solid var(--green);
      text-shadow: 
        0 0 10px rgba(0, 255, 65, 0.8),
        0 0 20px rgba(0, 255, 65, 0.5);
      box-shadow: 
        0 0 15px rgba(0, 255, 65, 0.4),
        inset 0 0 15px rgba(0, 255, 65, 0.1);
      position: relative;
    }
    [data-theme="dark"] .btn--human::before {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px solid var(--green);
      opacity: 0.3;
      pointer-events: none;
    }
    [data-theme="dark"] .btn--human:hover {
      box-shadow: 
        0 0 25px rgba(0, 255, 65, 0.8),
        inset 0 0 25px rgba(0, 255, 65, 0.2);
      background: rgba(0, 255, 65, 0.05);
    }
    [data-theme="dark"] .btn--tech {
      background: #000; 
      color: var(--green);
      border: 2px solid var(--green);
      text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
      box-shadow: 0 0 12px rgba(0, 255, 65, 0.3);
    }
    [data-theme="dark"] .btn--tech:hover {
      box-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
      background: rgba(0, 255, 65, 0.03);
    }
    [data-theme="dark"] .btn--ghost {
      background: transparent;
      color: var(--green);
      border: 1px solid var(--green);
      opacity: 0.7;
    }
    [data-theme="dark"] .btn--ghost:hover {
      opacity: 1;
      box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }

    .chip {
      display: inline-block; font-family: var(--font-sans); font-size: 12px;
      letter-spacing: 0; text-transform: none; padding: 4px 10px; font-weight: 500;
      border: 1px solid var(--border); border-radius: 6px;
      color: var(--muted); background: var(--surface);
      transition: all 0.2s ease;
    }
    .chip--tech { 
      border-color: #f3e5f9; 
      color: var(--tech); 
      background: linear-gradient(135deg, #faf5ff, #f3e5f9);
    }
    .chip--human { 
      border-color: #e3f2fd; 
      color: var(--human); 
      background: linear-gradient(135deg, #f0f9ff, #e3f2fd);
    }
    [data-theme="dark"] .chip {
      font-family: 'VT323', monospace;
      font-size: 18px;
      letter-spacing: 0.15em;
      border: 1px solid var(--green);
      padding: 4px 10px;
      background: rgba(0, 255, 65, 0.05);
      box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
      text-shadow: 0 0 6px rgba(0, 255, 65, 0.6);
    }
    [data-theme="dark"] .chip--tech {
      text-shadow: 0 0 8px rgba(0, 255, 65, 0.7);
      border-color: var(--green);
      box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }
    [data-theme="dark"] .chip--human {
      text-shadow: 0 0 8px rgba(0, 255, 65, 0.7);
      border-color: var(--green);
      box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }

    .golden-bg { position: relative; }
    .golden-bg::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 61.8px 61.8px;
      opacity: .1;
    }
    [data-theme="dark"] .golden-bg {
      background: var(--surface);
    }
    [data-theme="dark"] .golden-bg::before {
      opacity: .15;
      background-image:
        linear-gradient(var(--green) 1px, transparent 1px),
        linear-gradient(90deg, var(--green) 1px, transparent 1px);
      box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
    }

    .section-label { margin-bottom: var(--space-3); }
    .section-title { 
      font-size: clamp(28px, 4vw, 52px); 
      font-weight: 800; 
      margin-bottom: var(--space-4); 
    }
    [data-theme="dark"] .section-title {
      font-family: 'VT323', monospace;
      font-size: clamp(36px, 5vw, 68px);
      letter-spacing: 0.08em;
      font-weight: normal;
      text-transform: uppercase;
      color: #00b830;
      text-shadow: 
        0 0 8px rgba(0, 184, 48, 0.5),
        0 0 20px rgba(0, 184, 48, 0.25);
    }
    .section-sub { 
      font-size: 16px; 
      color: var(--muted); 
      max-width: 540px; 
      margin-bottom: var(--space-6); 
      line-height: 1.6; 
    }

    .card {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 12px; padding: var(--space-5);
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }
    .card:hover { 
      /* No hover effect - cards are not clickable */
    }
    [data-theme="dark"] .card {
      background: #000;
      border: 2px solid var(--green);
      border-radius: 0;
      box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.3),
        inset 0 0 20px rgba(0, 255, 65, 0.05);
      position: relative;
    }
    [data-theme="dark"] .card::before {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px solid var(--green);
      opacity: 0.4;
      pointer-events: none;
    }
    [data-theme="dark"] .card:hover {
      box-shadow: 
        0 0 20px rgba(0, 255, 65, 0.6),
        inset 0 0 30px rgba(0, 255, 65, 0.1);
      transform: translateY(-2px);
    }
    .card__label { margin-bottom: var(--space-3); }
    .card__title {
      font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700;
      margin-bottom: var(--space-2); line-height: 1.2;
    }
    [data-theme="dark"] .card__title {
      font-family: 'VT323', monospace;
      font-size: 20px;
      letter-spacing: 0.06em;
      font-weight: normal;
      text-transform: uppercase;
    }
    .card__text { font-size: 14px; color: var(--muted); line-height: 1.6; }

    /* CAROUSEL WRAPPER — gradient fade + arrow button */
    .carousel-wrapper {
      position: relative;
    }
    .carousel-wrapper::after {
      content: '→';
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 50%;
      font-size: 20px;
      color: var(--text);
      pointer-events: none;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      animation: scrollHint 2.5s ease-in-out infinite;
      z-index: 2;
    }
    [data-theme="dark"] .carousel-wrapper::after {
      background: #000;
      border-color: var(--green);
      color: var(--green);
      box-shadow: 0 0 12px rgba(0,255,65,0.35);
    }
    @keyframes scrollHint {
      0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); }
      50%       { opacity: 1;    transform: translateY(-50%) translateX(5px); }
    }
    /* SCROLL INDICATOR BAR */
    .carousel-scroll-hint {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-2);
    }
    .carousel-scroll-track {
      flex: 1;
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    .carousel-scroll-thumb {
      height: 100%;
      width: 25%;
      background: var(--muted);
      border-radius: 2px;
      animation: scrollThumbHint 2.5s ease-in-out infinite;
    }
    @keyframes scrollThumbHint {
      0%, 100% { transform: translateX(0); }
      50%       { transform: translateX(30px); opacity: 0.7; }
    }
    .carousel-scroll-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
      white-space: nowrap;
    }
    [data-theme="dark"] .carousel-scroll-track {
      background: rgba(0,255,65,0.12);
    }
    [data-theme="dark"] .carousel-scroll-thumb {
      background: var(--green);
    }
    [data-theme="dark"] .carousel-scroll-label {
      color: var(--green);
      text-shadow: 0 0 6px rgba(0,255,65,0.5);
    }
    /* CAROUSEL */
    .carousel {
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.2) rgba(0,0,0,0.05);
      -webkit-overflow-scrolling: touch;
      position: relative;
      scroll-snap-type: x proximity;
    }
    /* Rimuovo il vecchio ::after dentro overflow che non funzionava */
    .carousel::after { content: none; }
    /* ACCORDION / CAPSULE */
    .accordion details {
      border: 1px solid var(--border);
      border-radius: var(--radius-2);
      padding: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .accordion summary {
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      padding-right: var(--space-6);
    }
    .accordion summary::-webkit-details-marker { display: none; }
    .accordion summary::after {
      content: '+';
      position: absolute;
      right: 0;
      top: 2px;
      font-size: 18px;
      line-height: 1;
      transition: transform 0.3s ease;
    }
    .accordion details[open] summary::after {
      content: '×';
      transform: rotate(180deg);
    }
    .accordion .subtitle {
      display: block;
      font-size: 12px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: 0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    [data-theme="dark"] .accordion .subtitle {
      font-family: 'VT323', monospace;
      font-size: 15px;
      letter-spacing: 0.08em;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .accordion details > p {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.8;
      color: #666666;
      margin-top: var(--space-3);
    }
    [data-theme="dark"] .accordion summary {
      font-family: 'VT323', monospace;
      font-size: 20px;
      font-weight: normal;
      letter-spacing: 0.06em;
    }
    [data-theme="dark"] .accordion details > p {
      color: var(--muted);
    }

    /* DOVE INTERVENIAMO — transform-cards grid */
    .interveniamo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5) var(--space-6);
      margin-top: var(--space-5);
    }
    .interveniamo-block {
      display: flex;
      flex-direction: column;
    }
    .interveniamo-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: var(--space-2);
    }
    .interveniamo-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .interveniamo-name {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    [data-theme="dark"] .interveniamo-name {
      font-family: 'VT323', monospace;
      font-size: 16px;
      letter-spacing: 0.15em;
    }
    .interveniamo-line {
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .interveniamo-stack {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    .transform-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-2);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    [data-theme="dark"] .transform-card {
      background: #040404;
    }
    .from-cell {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .from-cell::before { content: '['; color: var(--text); }
    .from-cell::after  { content: ']'; color: var(--text); }
    .card-arrow {
      font-size: 13px;
      color: #555555;
      line-height: 1;
      font-weight: 600;
    }
    [data-theme="dark"] .card-arrow {
      color: var(--muted);
    }
    .to-cell {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
    }
    .to-cell::before { content: '{'; color: var(--text); margin-right: 2px; }
    .to-cell::after  { content: '}'; color: var(--text); margin-left: 2px; }
    @media (max-width: 768px) {
      .interveniamo-grid { grid-template-columns: 1fr; }
    }

    /* theme toggle transition */
    html.theme-changing body {
      transition: transform 0.6s ease, opacity 0.6s ease;
      transform: translateX(20px);
      opacity: 0.8;
    }
    html.theme-changing::before {
      content: '';
      position: fixed;
      inset: 0;
      background: var(--surface);
      pointer-events: none;
      opacity: 0.2;
      transition: opacity 0.6s ease;
    }
    /* Scrollbar light mode: visibile come la dark, stile sottile */
    .carousel::-webkit-scrollbar {
      display: block;
      height: 4px;
    }
    .carousel::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.06);
      border-radius: 2px;
    }
    .carousel::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.22);
      border-radius: 2px;
    }
    .carousel::-webkit-scrollbar-thumb:hover {
      background: rgba(0,0,0,0.38);
    }
    /* Dark mode scrollbar override */
    [data-theme="dark"] .carousel {
      scrollbar-color: var(--green) rgba(0,255,65,0.1);
    }
    [data-theme="dark"] .carousel::-webkit-scrollbar {
      display: block;
      height: 6px;
    }
    [data-theme="dark"] .carousel::-webkit-scrollbar-track {
      background: rgba(0,255,65,0.08);
    }
    [data-theme="dark"] .carousel::-webkit-scrollbar-thumb {
      background: var(--green);
      border-radius: 3px;
      box-shadow: 0 0 6px rgba(0,255,65,0.5);
    }
    [data-theme="dark"] .carousel::-webkit-scrollbar-thumb:hover {
      background: #00ff41;
    }
    .carousel__track { display: flex; gap: var(--space-4); width: max-content; padding-bottom: var(--space-3); }
    .carousel__item { width: 320px; flex-shrink: 0; scroll-snap-align: start; }

    .case-card {
      border: 1px solid var(--border); border-radius: var(--radius-2);
      overflow: hidden; background: var(--card-bg); cursor: pointer;
      transition: all var(--dur);
    }
    .case-card:hover { border-color: var(--human); }
    [data-theme="dark"] .case-card {
      background: #000;
      border: 2px solid var(--green);
      border-radius: 0;
    }
    [data-theme="dark"] .case-card:hover {
      box-shadow: 
        0 0 20px rgba(0, 255, 65, 0.5),
        inset 0 0 20px rgba(0, 255, 65, 0.05);
      transform: translateY(-2px);
    }
    .case-card__media {
      aspect-ratio: 16/9; background: var(--display-bg);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--display-text); text-shadow: 0 0 6px var(--display-text);
      border-bottom: 1px solid var(--border);
    }
    .case-card__body { padding: var(--space-4); }

    /* Case rows in Case Studies page */
    .case-row {
      display: grid;
      grid-template-columns: 1fr 2fr;
      border: 1px solid var(--border);
      border-radius: var(--radius-2);
      overflow: hidden;
      cursor: pointer;
      transition: all var(--dur);
    }
    .case-row__image {
      padding: 0;
      overflow: hidden;
    }
    .case-row__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .case-row__body {
      padding: var(--space-5);
      background: var(--card-bg);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* LOGO GRID */
    .logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
    .logo-placeholder {
      aspect-ratio: 3/1; border: 1px solid var(--border);
      border-radius: var(--radius-1);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 10px; color: var(--muted);
      background: var(--surface); letter-spacing: .06em;
      transition: all var(--dur);
    }
    .logo-placeholder:hover { border-color: var(--tech); color: var(--tech); }
    [data-theme="dark"] .logo-placeholder:hover {
      box-shadow: 0 0 8px var(--yellow-glow);
    }

    .form-group { margin-bottom: var(--space-4); }
    .form-label {
      display: block; font-family: var(--font-mono); font-size: 10px;
      letter-spacing: .1em; color: var(--muted); margin-bottom: var(--space-2);
      text-transform: uppercase;
    }
    [data-theme="dark"] .form-label {
      font-family: 'VT323', monospace;
      font-size: 16px;
      letter-spacing: 0.12em;
    }
    .form-input, .form-textarea {
      width: 100%; padding: 12px 16px;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text);
      font-family: var(--font-sans); font-size: 15px;
      box-shadow: none;
      transition: all 0.2s ease;
    }
    [data-theme="dark"] .form-input,
    [data-theme="dark"] .form-textarea {
      font-family: 'Space Mono', monospace;
      font-size: 14px;
      box-shadow: none;
      background: #000;
      border: 2px solid var(--green);
      color: var(--green);
      border-radius: 0;
    }
    .form-input:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--human);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    [data-theme="dark"] .form-input:focus,
    [data-theme="dark"] .form-textarea:focus {
      box-shadow:
        0 0 15px rgba(0, 255, 65, 0.4),
        inset 0 0 15px rgba(0, 255, 65, 0.05);
      outline: none;
      border-color: var(--green);
    }
    .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

    /* ── Contact form: validation states ─────────────────────────────────── */
    .form-input--error,
    .form-textarea.form-input--error {
      border-color: #dc2626 !important;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
    }
    .form-input--valid,
    .form-textarea.form-input--valid {
      border-color: #16a34a !important;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08) !important;
    }

    /* Inline error text below each field */
    .form-error {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: #dc2626;
      margin-top: var(--space-1);
      min-height: 1em;
    }
    .form-error[aria-hidden="true"] { visibility: hidden; }
    .form-error[aria-hidden="false"] { visibility: visible; }

    /* Send-error banner */
    .cf-send-error {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      margin-bottom: var(--space-4);
      background: rgba(220, 38, 38, 0.06);
      border: 1px solid rgba(220, 38, 38, 0.35);
      border-radius: var(--radius-2);
      font-family: var(--font-mono);
      font-size: 12px;
      color: #dc2626;
    }
    .cf-send-error[aria-hidden="true"]  { display: none; }
    .cf-send-error[aria-hidden="false"] { display: flex; }

    /* Submit button: loading/disabled state */
    .btn--human:disabled {
      opacity: 0.65;
      cursor: not-allowed;
      pointer-events: none;
    }
    .btn-loading {
      display: none;
      align-items: center;
      gap: var(--space-2);
    }
    @keyframes cf-spin {
      to { transform: rotate(360deg); }
    }
    .btn-loading::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: cf-spin 0.7s linear infinite;
    }

    /* Dark mode overrides for validation */
    [data-theme="dark"] .form-input--error,
    [data-theme="dark"] .form-textarea.form-input--error {
      border-color: #ff4d4d !important;
      box-shadow: 0 0 8px rgba(255, 77, 77, 0.4) !important;
    }
    [data-theme="dark"] .form-input--valid,
    [data-theme="dark"] .form-textarea.form-input--valid {
      border-color: var(--green) !important;
      box-shadow: 0 0 8px rgba(0, 255, 65, 0.25) !important;
    }
    [data-theme="dark"] .form-error { color: #ff6b6b; }
    [data-theme="dark"] .cf-send-error {
      background: rgba(255, 77, 77, 0.08);
      border-color: rgba(255, 77, 77, 0.4);
      color: #ff6b6b;
    }

    .principle {
      padding: var(--space-4) 0; border-bottom: 1px solid var(--border);
      display: flex; gap: var(--space-4); align-items: flex-start;
    }
    .principle__num {
      font-family: var(--font-mono); font-size: 11px; color: var(--human);
      flex-shrink: 0; padding-top: 4px; letter-spacing: .08em;
    }
    [data-theme="dark"] .principle__num {
      text-shadow: 0 0 4px var(--green-glow);
    }
    .principle__text { font-size: 15px; line-height: 1.6; }

    /* CASE STUDY HERO */
    .cs-hero {
      min-height: 60vh; display: flex; align-items: flex-end;
      position: relative; overflow: hidden; background: var(--display-bg);
    }
    .cs-hero__media {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 12px;
      color: var(--display-text); text-shadow: 0 0 8px var(--display-text);
    }
    .cs-hero__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 50%);
    }
    [data-theme="dark"] .cs-hero__overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, transparent 50%);
    }
    .cs-hero__content {
      position: relative; z-index: 2;
      padding: var(--space-7) var(--space-5);
      max-width: 1160px; margin: 0 auto; width: 100%;
    }
    .cs-meta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
    .cs-block {
      padding: var(--space-5); border: 1px solid var(--border);
      border-radius: var(--radius-2); background: var(--card-bg);
    }
    .cs-block__label { margin-bottom: var(--space-3); }
    .cs-block__title {
      font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700;
      margin-bottom: var(--space-3);
    }
    [data-theme="dark"] .cs-block__title {
      font-family: 'VT323', monospace;
      font-size: 26px;
      letter-spacing: 0.06em;
      font-weight: normal;
      text-transform: uppercase;
    }
    .cs-block__text { font-size: 15px; color: #aaaaaa; line-height: 1.7; }
    .cs-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-4);
    }

    /* VIDEO RESPONSIVE */
    .video-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
      border-radius: 12px;
      background: #000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    [data-theme="dark"] .video-wrapper {
      border: 2px solid var(--green);
      box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
    }

    .footer {
      padding: var(--space-6) 0; border-top: 1px solid var(--border);
      background: var(--surface);
    }
    [data-theme="dark"] .footer {
      border-top: 2px solid var(--green);
      box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
      background: #000;
    }
    .footer__inner {
      max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: var(--space-3);
    }
    .footer__copy {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--muted); letter-spacing: .06em;
    }
    .footer__copy .logo-dark,
    .footer__copy .logo-light {
      filter: none;
    }
    [data-theme="light"] .footer__copy .logo-dark {
      display: block;
    }
    [data-theme="light"] .footer__copy .logo-light {
      display: none;
    }
    [data-theme="dark"] .footer__copy {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
    }
    [data-theme="dark"] .footer__copy .logo-dark {
      display: none;
    }
    [data-theme="dark"] .footer__copy .logo-light {
      display: block;
      filter: brightness(0) saturate(100%) invert(88%) sepia(94%) saturate(2578%) hue-rotate(54deg) brightness(104%) contrast(119%);
    }

    .page { display: none; }
    .page--active { display: block; }

    /* =====================================================
       RESPONSIVE DESIGN SYSTEM - Mobile First
       ===================================================== */

    /* Base: Mobile (0px - 479px) */
    :root {
      --space-mobile-1: 2px;
      --space-mobile-2: 4px;
      --space-mobile-3: 8px;
      --space-mobile-4: 12px;
      --space-mobile-5: 16px;
      --space-mobile-6: 24px;
      --space-mobile-7: 32px;
      --space-mobile-8: 48px;
    }

    /* Container fluido su mobile */
    .container { padding: 0 var(--space-3); }

    /* Griglie: 1 colonna default (mobile) */
    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--space-4); }
    .logo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .cs-grid { grid-template-columns: 1fr; }

    /* Header mobile */
    .header__inner { height: 56px; padding: 0 var(--space-3); }
    .header__nav { display: none; }
    .header__logo img { height: 28px; }

    /* Hamburger menu visibile su mobile */
    .mobile-menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 10px;
      gap: 5px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      transition: all 0.3s ease;
      border-radius: 1px;
    }
    [data-theme="dark"] .mobile-menu-toggle span {
      background: var(--green);
      box-shadow: 0 0 4px var(--green-glow);
    }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile nav overlay */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.99);
      z-index: 99;
      padding: var(--space-5);
      flex-direction: column;
      gap: var(--space-2);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    [data-theme="dark"] .mobile-nav {
      background: rgba(0, 0, 0, 0.98);
      border-top: 2px solid var(--green);
    }
    .mobile-nav--open { display: flex; }
    .mobile-nav .nav-link {
      font-size: 18px;
      padding: var(--space-4) 0;
      border-bottom: 1px solid var(--border);
      width: 100%;
      text-align: center;
      color: var(--text);
    }
    [data-theme="dark"] .mobile-nav .nav-link {
      border-bottom-color: rgba(0, 255, 65, 0.2);
      color: var(--text);
    }

    /* Hero mobile */
    .hero { min-height: 70vh; padding: var(--space-5) 0; }
    .hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.1; margin-bottom: var(--space-4); }
    .hero__sub { font-size: 15px; max-width: 100%; }
    .hero__ctas { flex-direction: column; gap: var(--space-3); }
    .hero__content { padding: 0 var(--space-2); overflow-wrap: break-word; word-break: break-word; }

    /* Bottoni mobile */
    .btn { padding: 12px 24px; font-size: 13px; min-height: 44px; }

    /* Section mobile */
    .section { padding: var(--space-6) 0; }
    .section--sm { padding: var(--space-5) 0; }

    /* Cards mobile */
    .card { padding: var(--space-4); }
    .card__title { font-size: 15px; }
    .card__text { font-size: 13px; }

    /* Carousel mobile */
    .carousel__item { width: 280px; }
    .carousel__track { gap: var(--space-3); padding: var(--space-2); }

    /* Case card mobile */
    .case-card__body { padding: var(--space-3); }

    /* Case rows mobile */
    .case-row {
      grid-template-columns: 1fr;
    }
    .case-row__image {
      max-height: 220px;
    }

    /* Case rows desktop: immagine a sinistra, testo a destra */
    @media (min-width: 769px) {
      .case-row {
        grid-template-columns: 1fr 2fr !important;
      }
      .case-row__image {
        max-height: none;
        min-height: 180px;
      }
    }

    /* Form mobile */
    .form-input, .form-textarea { padding: 14px; font-size: 16px; }
    .form-label { font-size: 12px; }

    /* Footer mobile */
    .footer__inner { flex-direction: column; gap: var(--space-4); text-align: center; padding: var(--space-5) var(--space-3); }

    /* Case study pages mobile – !important per sovrascrivere stili inline hero */
    .cs-hero-split { grid-template-columns: 1fr !important; min-height: auto !important; }
    .cs-hero-split > div:first-child { height: 200px; min-height: 200px; }
    .cs-hero-split > div:last-child { padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; align-items: flex-start; min-height: auto; overflow-wrap: break-word; }
    .cs-image-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
    @media (min-width: 768px) {
      .cs-image-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    }
    .cs-meta-row { flex-direction: column; gap: var(--space-2); }

    /* Content grid for case studies */
    .cs-content-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
    @media (min-width: 768px) {
      .cs-content-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    }

    /* Competenze grid mobile */
    .competenze-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
    .competenze-grid .card { margin-top: 0; }
    @media (min-width: 1024px) {
      .competenze-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Soft skills grid */
    .soft-skills-grid {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px var(--space-6);
    }
    @media (max-width: 768px) {
      .soft-skills-grid {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }

    /* Small phones (375px e sotto) */
    @media (max-width: 375px) {
      .hero h1 { font-size: 26px; }
      .carousel__item { width: 260px; }
      .logo-grid { grid-template-columns: 1fr; }
      .theme-toggle { width: 54px; height: 26px; }
      .theme-toggle::before { width: 24px; height: 22px; }
      [data-theme="dark"] .theme-toggle::before { transform: translateX(26px); }
      .toggle-icon-today, .toggle-icon-dark { width: 14px; height: 14px; top: 6px; }
      .toggle-icon-dark { left: 33px; }
    }

    /* About section mobile: titolo sopra il testo */
    @media (max-width: 768px) {
      .about-network-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
      }
      .about-network-grid > div:first-child {
        margin-bottom: var(--space-2);
      }
    }

    /* Philosophy boxes mobile: disposizione verticale */
    @media (max-width: 768px) {
      .philosophy-boxes {
        grid-template-columns: 1fr !important;
      }
    }

    /* Case study – fix mobile (hero, blocchi, griglie) */
    @media (max-width: 768px) {
      /* UI Design System: 9 punti (Ci occupiamo di GUI) – 2 card per riga, override stili inline */
      .cs-gui-nine-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3); }
      /* Doc/IO: 3 video in verticale */
      .cs-doc-videos-grid { grid-template-columns: 1fr !important; gap: var(--space-4); }
      /* Redstorm: Problema (statement + 4 card) */
      #rs-problema .container > div[style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; }
      #rs-problema .container > div > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
      /* Redstorm: Concept (testo + immagine + 3 card) */
      #rs-concept .container > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      #rs-concept .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
      /* Redstorm: Soluzione (5 card) */
      #rs-soluzione .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
      #rs-soluzione .container > div[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
      /* Redstorm: Prototipo (3 immagini) */
      #rs-prototipo .container > div[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
      /* Redstorm: Dettaglio (testo + 4 card) */
      #rs-prototipo-dettaglio .container > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      /* Bridge City: Problema */
      #bc-problema .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      #bc-problema .container > div > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
      /* Bridge City: Concept Welcome (testo + immagine) */
      #bc-concept .container > div[style*="1fr 1fr"][style*="align-items: center"] { grid-template-columns: 1fr !important; }
      /* Bridge City: Concept Edifici (6 card) */
      #bc-concept .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
      /* Bridge City: Interazione */
      #bc-interazione .container > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      /* ABC: Ricerca (3 blocchi) */
      #abc-ricerca .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
      /* ABC: Concept (statement + 4 card, poi 6 card) */
      #abc-concept .container > div[style*="1fr 2fr"] { grid-template-columns: 1fr !important; }
      #abc-concept .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* Schermi molto piccoli: 1 card per riga (9 punti e griglie simili) */
    @media (max-width: 480px) {
      .cs-gui-nine-grid { grid-template-columns: 1fr !important; }
      #rs-problema .container > div > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      #bc-problema .container > div > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      #bc-concept .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
      #abc-concept .container > div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
    }

    /* Tablet Small (480px - 767px) */
    @media (min-width: 480px) {
      .container { padding: 0 var(--space-4); }
      .hero h1 { font-size: clamp(32px, 7vw, 40px); }
      .carousel__item { width: 300px; }
      .logo-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* Tablet (768px - 1023px) */
    @media (min-width: 768px) {
      .container { padding: 0 var(--space-5); }

      /* Mostra nav desktop, nascondi hamburger */
      .header__nav { display: flex; }
      .mobile-menu-toggle { display: none; }
      .mobile-nav { display: none !important; }

      /* Griglie tablet */
      .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
      .logo-grid { grid-template-columns: repeat(4, 1fr); }
      .cs-grid { grid-template-columns: repeat(2, 1fr); }

      /* Hero tablet */
      .hero { min-height: 80vh; padding: var(--space-6) 0; }
      .hero h1 { font-size: clamp(36px, 5vw, 52px); }
      .hero__ctas { flex-direction: row; }

      /* Case study tablet/desktop – 2 colonne, sovrascrive regole mobile */
      .cs-hero-split { grid-template-columns: 1fr 1fr !important; min-height: 480px; }
      .cs-hero-split > div:first-child { height: auto; min-height: auto; }
      .cs-image-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Desktop Small (1024px - 1279px) */
    @media (min-width: 1024px) {
      .grid-3 { grid-template-columns: repeat(3, 1fr); }
      .logo-grid { grid-template-columns: repeat(5, 1fr); }
      .cs-grid { grid-template-columns: repeat(2, 1fr); }
      .carousel__item { width: 320px; }

      /* Competenze grid 2x2 */
      .competenze-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Desktop (1280px+) */
    @media (min-width: 1280px) {
      .hero { min-height: 90vh; }
      .hero h1 { font-size: clamp(44px, 5.5vw, 76px); }
      .cs-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Large Desktop (1440px+) */
    @media (min-width: 1440px) {
      .container { max-width: 1280px; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }
    /* About: Mission heading dark mode */
    [data-theme="dark"] .mission-main { color: #00b830 !important; text-shadow: 0 0 8px rgba(0,184,48,0.4); }