/* Adattamento layout progetti all'originale usando style.css */
    .hero { 
      text-align: center; 
      padding: 4rem 0 3rem; 
    }
    .hero h1 { 
      font-size: clamp(2.8rem, 4vw, 4.5rem); 
      line-height: 1.1; 
      margin-bottom: 1.5rem; 
      font-weight: 700;
    }
    .hero h1 span { 
      background: linear-gradient(90deg, var(--accent), #ff6b3d); 
      -webkit-background-clip: text; 
      background-clip: text; 
      color: transparent; 
    }
    .hero p { 
      font-size: 1.2rem; 
      max-width: 700px; 
      margin: 0 auto; 
      color: var(--text); 
      line-height: 1.7;
    }

    .project-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); 
      gap: 1.75rem; 
      margin: 4rem 0; 
    }
    .card { 
      background: rgba(15,23,42,0.95); 
      border: 1px solid var(--border); 
      border-radius: var(--radius-lg); 
      overflow: hidden; 
      box-shadow: var(--shadow-card); 
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .card:hover { 
      transform: translateY(-8px); 
      box-shadow: var(--shadow-soft); 
      border-color: rgba(255,179,0,0.3);
    }
    .thumb { 
      position: relative; 
      height: 220px; 
      overflow: hidden;
    }
    .thumb img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      transition: transform 0.4s ease;
    }
    .card:hover .thumb img { 
      transform: scale(1.05); 
    }
    .badge { 
      position: absolute; 
      top: 1rem; 
      right: 1rem; 
      background: var(--accent); 
      color: #050816; 
      padding: 0.3rem 0.75rem; 
      border-radius: var(--radius-pill); 
      font-size: 0.7rem; 
      font-weight: 600; 
      text-transform: uppercase;
    }
    .body { 
      padding: 1.5rem; 
    }
    .name { 
      font-size: 1.15rem; 
      font-weight: 600; 
      margin-bottom: 0.5rem; 
      color: var(--text);
    }
    .desc { 
      font-size: 0.92rem; 
      color: var(--muted); 
      line-height: 1.5; 
      margin-bottom: 1rem;
    }
    .meta { 
      display: flex; 
      flex-wrap: wrap; 
      gap: 0.5rem; 
      margin-bottom: 1.25rem;
    }
    .tag { 
      font-size: 0.75rem; 
      padding: 0.2rem 0.6rem; 
      background: rgba(255,179,0,0.15); 
      color: var(--accent); 
      border-radius: var(--radius-pill); 
      border: 1px solid rgba(255,179,0,0.3);
    }
    .btn { 
      display: inline-flex; 
      align-items: center; 
      gap: 0.4rem; 
      padding: 0.6rem 1.2rem; 
      background: transparent; 
      color: var(--accent); 
      border: 1px solid rgba(255,179,0,0.3); 
      border-radius: var(--radius-pill); 
      font-size: 0.85rem; 
      font-weight: 500; 
      transition: all 0.2s ease;
    }
    .btn:hover { 
      background: var(--accent); 
      color: #050816; 
      transform: translateX(4px);
    }

    .detail-container { 
      margin-top: 6rem; 
    }
    .section-head { 
      font-size: 1.4rem; 
      font-weight: 600; 
      text-align: center; 
      margin-bottom: 3rem; 
      color: var(--text); 
      letter-spacing: 0.05em; 
      text-transform: uppercase;
    }
    .detail-item { 
      display: grid; 
      grid-template-columns: 1fr 380px; 
      gap: 3rem; 
      margin-bottom: 5rem; 
      padding: 2.5rem; 
      background: rgba(15,23,42,0.6); 
      border: 1px solid var(--border); 
      border-radius: var(--radius-lg); 
      box-shadow: var(--shadow-card);
    }
    .detail-item h2 { 
      font-size: 1.8rem; 
      font-weight: 600; 
      margin-bottom: 1.5rem; 
      color: var(--text);
    }
    .detail-item p { 
      font-size: 1.05rem; 
      line-height: 1.7; 
      color: var(--muted); 
      margin-bottom: 1.25rem;
    }
    .detail-img { 
      border-radius: var(--radius-lg); 
      overflow: hidden; 
      box-shadow: var(--shadow-card);
    }
    .detail-img img { 
      width: 100%; 
      height: 280px; 
      object-fit: cover;
    }

    footer { 
      text-align: center; 
      padding: 3rem 0; 
      border-top: 1px solid var(--border); 
      color: var(--muted); 
      font-size: 0.9rem;
      margin-top: 4rem;
    }

    @media (max-width: 900px) {
      .project-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
      .detail-item { grid-template-columns: 1fr; gap: 2rem; }
      .detail-img { order: -1; }
    }
    @media (max-width: 600px) {
      .project-grid { grid-template-columns: 1fr; }
      .detail-item { padding: 1.5rem; }
    }