:root {
      --accent: #007aff;
      --bg-main: #050505;
      --bg-footer: #0a0a0a;
      --card-radius: 32px;
  }

  /* Lenis Smooth Scroll */
  html.lenis {
      height: auto;
  }

  .lenis-smooth {
      scroll-behavior: auto !important;
  }

  body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--bg-main);
      color: #fff;
      margin: 0;
      overflow-x: hidden;
  }

  .syne {
      font-family: 'Syne', sans-serif;
  }

  /* Page Transition Overlay */
  .page-transition-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: var(--accent);
      z-index: 9999;
      transform: translateY(100%);
      pointer-events: none;
  }

  .content-wrapper {
      position: relative;
      z-index: 2;
      background-color: var(--bg-main);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }

  .navbar {
      backdrop-filter: blur(15px);
      background: rgba(5, 5, 5, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1rem 0;
      z-index: 1000;
  }

  .hero-section {
      min-height: 85vh;
      display: flex;
      align-items: center;
      padding-top: 100px;
  }

  .hero-title {
      font-size: clamp(3rem, 10vw, 6.5rem);
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -4px;
  }

  .hero-sub {
      font-size: 1.25rem;
      color: #888;
      max-width: 600px;
      margin-top: 2rem;
      opacity: 0;
  }

  /* Bento Grid */
  .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 280px;
      gap: 1.5rem;
  }

  .bento-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--card-radius);
      padding: 2.5rem;
      text-decoration: none;
      color: inherit;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
  }

  .bento-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--accent);
      transform: translateY(-8px);
      color: #fff;
  }

  .span-8 {
      grid-column: span 8;
  }

  .span-4 {
      grid-column: span 4;
  }

  .span-6 {
      grid-column: span 6;
  }

  .row-2 {
      grid-row: span 2;
  }

  /* Footer Parallax Reveal */
  .parallax-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background-color: var(--bg-footer);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6rem 0;
      min-height: 60vh;
  }

  .footer-cta {
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 800;
      line-height: 1.1;
  }

  .email-link {
      font-size: clamp(1.2rem, 3vw, 2.5rem);
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
  }

  @media (max-width: 991px) {
      .content-wrapper {
          margin-bottom: 0 !important;
      }

      .parallax-footer {
          position: relative;
          z-index: 5;
          min-height: auto;
          padding: 4rem 0;
      }

      .span-8,
      .span-4,
      .span-6 {
          grid-column: span 12;
      }

      .row-2 {
          grid-row: span 1;
      }

      .bento-grid {
          grid-auto-rows: auto;
      }

      .footer-cta {
          font-size: 2.5rem !important;
      }
  }

  :root {
      --accent: #007aff;
      --bg-main: #050505;
      --bg-footer: #0a0a0a;
      --card-radius: 32px;
  }

  html.lenis {
      height: auto;
  }

  body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--bg-main);
      color: #fff;
      margin: 0;
      overflow-x: hidden;
  }

  .syne {
      font-family: 'Syne', sans-serif;
  }

  .page-transition-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: var(--accent);
      z-index: 9999;
      transform: translateY(100%);
      pointer-events: none;
  }

  .content-wrapper {
      position: relative;
      z-index: 2;
      background-color: var(--bg-main);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }

  .navbar {
      backdrop-filter: blur(15px);
      background: rgba(5, 5, 5, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1rem 0;
      z-index: 1000;
  }

  .project-hero {
      /* padding: 140px 0 60px 0; */
      margin-top: 140px;
  }

  .project-title {
      /* font-size: clamp(3rem, 10vw, 7rem); */
      font-weight: 800;
      letter-spacing: -4px;
      line-height: 0.85;
      margin: 1.5rem 0 3rem 0;
  }

  .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 4rem;
  }

  .info-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 1.5rem;
      opacity: 0;
  }

  .project-img-box {
      border-radius: var(--card-radius);
      overflow: hidden;
      background: #111;
      margin-bottom: 4rem;
      opacity: 0;
      transform: translateY(40px);
  }

  .project-img-box img {
      width: 100%;
      transition: transform 1s;
  }

  .parallax-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background-color: var(--bg-footer);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6rem 0;
      min-height: 60vh;
  }

  .footer-cta {
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 800;
  }

  .email-link {
      font-size: clamp(1.2rem, 3vw, 2.5rem);
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
  }

  @media (max-width: 991px) {
      .content-wrapper {
          margin-bottom: 0 !important;
      }

      .parallax-footer {
          position: relative;
          z-index: 5;
          min-height: auto;
          padding: 4rem 0;
      }

      .footer-cta {
          font-size: 2.5rem !important;
      }
  }

  .project-img-box {
      position: relative;
      background-color: #111;
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .project-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Fondamentale per far sì che le immagini riempiano le card della bento */
  }

  /* Altezza fissa per i mockup mobile affiancati su desktop */
  @media (min-width: 992px) {
      .col-md-4 .project-img-box {
          height: 500px;
      }
  }

  .bento-item[style*="border-left"] {
      transition: all 0.5s ease;
  }

  .bento-item[style*="border-left"]:hover {
      background: rgba(221, 0, 49, 0.05) !important;
      /* Un soffio di rosso Angular */
      transform: scale(1.02);
  }

  .next-project-preview {
      overflow: hidden;
      border-radius: 24px;
      cursor: pointer;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .next-project-preview:hover {
      transform: scale(1.02) rotate(1deg);
  }

  .next-project-preview img {
      transition: filter 0.5s ease;
  }

  .next-project-preview:hover img {
      filter: brightness(1.1);
  }

  .project-navigation a:hover .bi-arrow-right {
      transform: translateX(5px);
      transition: transform 0.3s ease;
  }

  .project-navigation a:hover .bi-arrow-left {
      transform: translateX(-5px);
      transition: transform 0.3s ease;
  }

  /* Animazione Rotazione Cerchio */
  .floating-circle {
      transform-origin: center;
      animation: rotateLoop 10s linear infinite;
  }

  /* Animazione Pulsazione Quadrato */
  .floating-rect {
      transform-origin: center;
      animation: pulseLoop 4s ease-in-out infinite;
  }

  @keyframes rotateLoop {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @keyframes pulseLoop {

      0%,
      100% {
          transform: scale(1) rotate(0deg);
          opacity: 0.8;
      }

      50% {
          transform: scale(1.2) rotate(45deg);
          opacity: 0.3;
      }
  }

  /* Effetto Glow sull'accento */
  .hero-svg-accent {
      filter: drop-shadow(0 0 8px rgba(0, 122, 255, 0.5));
  }

  /* Effetto Glow per attirare l'occhio senza essere fastidioso */
  .shadow-glow {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }

  /* Se vuoi posizionarlo in alto a destra fisso */
  .btn-fixed-top {
      position: fixed;
      top: 30px;
      right: 30px;
      z-index: 1000;
  }