:root{
    /* ====== THEME (modifica qui) ====== */
    --c-bg:#0b0c0f;
    --c-surface:#111318;
    --c-surface-2:#161922;
    --c-text:#f5f7ff;
    --c-muted:rgba(245,247,255,.72);
    --c-border:rgba(245,247,255,.12);
  
    --c-accent:#c8c8c8;     /* grigio “premium” */
    --c-cta:#ffffff;        /* CTA */
    --c-cta-text:#0b0c0f;
  
    --radius-lg:18px;
    --radius-md:14px;
    --c-title:#efece4;   /* off-white per titoli */
    --c-accent:#aeb3b8;  /* grigio premium */
    --c-warm:#8b5a2b;    /* leather */
  
    /* immagini (placeholder finché non hai foto) */
    --hero-image:none;      /* puoi metterci url(...) oppure lasciarlo none */
  }
  
  /* base */
  html, body { height: 100%; }
  body{
    background: var(--c-bg);
    color: var(--c-text);
  }
  
  /* HERO: molto simile al reference (overlay scuro + immagine sotto navbar) */
  .hero{
    background-image:
      linear-gradient(to bottom, rgba(11,12,15,.55), rgba(11,12,15,.95)),
      var(--hero-image),
      radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,.06), transparent 55%);
    background-size: cover;
    background-position: center;
  }

  .hero-pagine{
    background:
      radial-gradient(900px 500px at 18% 20%, rgba(139,90,43,.18), transparent 55%),
      radial-gradient(800px 450px at 82% 28%, rgba(200,200,200,.10), transparent 55%),
      linear-gradient(to bottom, rgba(11,12,15,.35), rgba(11,12,15,1));
  }

  /* Hero con immagine solo per homepage */
  .hero-home{
    background-image: url('../img/hero.jpg'),
      linear-gradient(to bottom, rgba(11,12,15,.55), rgba(11,12,15,.95)),
      var(--hero-image),
      radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,.06), transparent 55%);
  }

  /* Hero text readability */
  .hero h1,
  .hero .font-display{
    text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  }
  .hero p{
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  
  /* navbar */
  .nav-solid{
    background: rgba(11,12,15,.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
  }
  
  /* link underline elegante */
  .nav-link{
    position: relative;
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:0; bottom:-8px;
    width:0; height:1px;
    background: var(--c-accent);
    transition: width .25s ease;
    opacity:.9;
  }
  .nav-link:hover::after{ width:100%; }
  
  /* CTA button "white pill" */
  .btn-primary{
    background: var(--c-warm);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform .18s ease, opacity .18s ease;
  }
  .btn-primary:hover{ transform: translateY(-1px); opacity:.95; }
  
  /* card / panel */
  .panel{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
  }
  
  /* placeholder “immagine” (finché non hai foto) */
  .media{
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    background:
      radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    position: relative;
    overflow: hidden;
  }
  .media::before{
    content:"";
    position:absolute;
    inset:-60% -40%;
    transform: rotate(15deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: shine 5.5s linear infinite;
  }
  @keyframes shine{
    0%{ transform: translateX(-30%) rotate(15deg); }
    100%{ transform: translateX(30%) rotate(15deg); }
  }
  
  /* reveal animation on scroll */
  .reveal{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform: translateY(0);
  }

  .text-title{ color: var(--c-title); }
  .text-warm{ color: var(--c-warm); }

  /* mobile menu background */
  [data-mobile-menu] .panel{
    background: rgba(11,12,15,.95);
    backdrop-filter: blur(10px);
  }

  .hero-mobile-media,
  .hero-mobile-video,
  .hero-mobile-overlay{
    display: none;
  }

  @media (max-width: 767px){
    .hero-mobile-media{
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      clip-path: inset(0);
      isolation: isolate;
      pointer-events: none;
    }

    .hero-mobile-video{
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      min-width: 100%;
      min-height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
    }

    .hero-mobile-overlay{
      display: block;
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(11,12,15,.45), rgba(11,12,15,.92)),
        radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,.08), transparent 60%);
    }

    .hero-video-fallback .hero-mobile-media{
      display: none;
    }
  }