/* ====== RESET & BASE ====== */
    *, *::before, *::after { box-sizing: border-box; }
    html { color-scheme: light dark; }
    :root{
      --bg: #0b0b0c;          /* background base (dark) */
      --fg: #eaeaea;          /* foreground text */
      --muted: #a7a7a7;       /* secondary text */
      --card: #141416;        /* card bg */
      --line: #2a2a2e;        /* separators */
      --brand: #5bd0ff;       /* accent */
      --brand-2: #9dff83;     /* secondary accent */
      --radius: 16px;         /* global radius */
      --maxw: 1120px;         /* container width */
      --shadow: 0 6px 24px rgba(0,0,0,.25);
      --shadow-soft: 0 2px 12px rgba(0,0,0,.18);
      --transition: 220ms cubic-bezier(.2,.8,.2,1);
      --space: clamp(14px, 2.2vw, 22px);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg: #fcfcfd;
        --fg: #0d0e10;
        --muted: #5a5f6a;
        --card: #ffffff;
        --line: #e8e9ee;
        --shadow: 0 8px 30px rgba(16,24,40,.12);
        --shadow-soft: 0 2px 12px rgba(16,24,40,.08);
      }
    }

    body{
      margin:0; font: 400 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg); color: var(--fg);
      scroll-behavior:smooth;
    }
    img{ max-width:100%; display:block; }
    a{ color: inherit; text-decoration: none; }
    .container{ width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
    .section{ padding: clamp(56px, 8vw, 60px) 0; }
    .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; }

    /* ====== HEADER ====== */
    header{
      position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2) blur(10px);
      background: color-mix(in oklab, var(--bg) 86%, transparent);
      border-bottom:1px solid var(--line);
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:74px; }
    .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px; }
    .brand__logo{  height:70px; width:auto; display:block; object-fit:contain; border-radius:0; box-shadow:none; }
    nav ul{ display:flex; gap:20px; list-style:none; padding:0; margin:0; }
    nav a{ color: var(--muted); transition: color var(--transition); font-weight: 500; }
    nav a:hover, nav a[aria-current="page"]{ color: var(--fg); }
/* MENU HAMBURGER */
.menu .icon {
  width: 22px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.menu .icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu .icon span:nth-child(1) { top: 0; }
.menu .icon span:nth-child(2) { top: 8px; }
.menu .icon span:nth-child(3) { top: 16px; }

    /* Stato aperto → crea la X */
    .menu[aria-expanded="true"] .icon span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .menu[aria-expanded="true"] .icon span:nth-child(2) {
      opacity: 0;
    }

    .menu[aria-expanded="true"] .icon span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
    .actions{ display:flex; align-items:center; gap:10px; }
    .btn, button.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background: var(--card); color:var(--fg); box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition); }
    .btn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--brand) 60%, var(--line)); }
    .btn--brand{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#081013; border-color: transparent; font-weight:600; }

    .menu{ display:none; }
    @media (max-width: 840px){
      nav ul{ display:none; }
      .menu{ display:inline-flex; }
    }

    /* ====== HERO ====== */
    .hero{ display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 56px); align-items:center; }
    .eyebrow{ font-size:.9rem; color: var(--muted); letter-spacing:.14em; text-transform: uppercase; margin-bottom: 10px; }
    h1{ font-size: clamp(28px, 6.2vw, 54px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; }
    .lead{ font-size: clamp(16px, 2.4vw, 20px); color: var(--muted); margin:0 0 24px; }
    .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
    .hero__media{  border-radius: var(--radius); background: radial-gradient(120% 120% at 10% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 45%), linear-gradient(180deg, color-mix(in oklab, var(--card) 60%, transparent), var(--card)); border:1px solid var(--line); box-shadow: var(--shadow); position:relative; overflow:hidden; }
    .avatar{ position:absolute; right:6%; bottom:-6%; width:min(42%, 220px); aspect-ratio:1; border-radius: 24px; border:1px solid var(--line); background: linear-gradient(135deg, #999, #666); box-shadow: var(--shadow); transform: rotate(4deg); }
    @media (max-width: 840px){ .hero{ grid-template-columns: 1fr; } .avatar{ position:static; width:120px; margin: 16px auto 0; transform:none; } }

    /* ====== BADGES ====== */
    .badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
    .badge{ font-size:.85rem; color: var(--muted); border:1px dashed var(--line); padding:6px 10px; border-radius: 999px; }

    /* ====== PROJECTS ====== */
    .toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
    .chip{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); color: var(--muted); background: var(--card); cursor:pointer; transition: all var(--transition); }
    .chip[aria-pressed="true"]{ color: var(--fg); border-color: color-mix(in oklab, var(--brand) 60%, var(--line)); }

    .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.2vw, 22px); }
    .card{ grid-column: span 4; background: var(--card); border:1px solid var(--line); border-radius: var(--radius); overflow: clip; box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition); }
    .card:hover{ transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 50%, var(--line)); }
    .thumb{ aspect-ratio: 16/10; background: linear-gradient(120deg, #2b2b30, #1b1b1e); display:grid; place-items:center; color:#8f9098; font-size: 14px; }
    .card__body{ padding: 14px; }
    .card__title{ font-weight: 600; margin: 2px 0 6px; letter-spacing:-.01em; }
    .tags{ display:flex; gap:6px; flex-wrap:wrap; color: var(--muted); font-size:.9rem; }
    .card__actions{ padding: 12px 14px 16px; display:flex; justify-content: space-between; gap:10px; }
    .card_partner{ grid-column: span 4; background: #ccccccf1; border:1px solid var(--line); border-radius: var(--radius); overflow: clip; box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition); }

    @media (max-width: 1100px){ .card{ grid-column: span 6; } }
    @media (max-width: 640px){ .card{ grid-column: span 12; } }

    /* ====== ABOUT ====== */
    .about{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
    .profile{ border:1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: clamp(14px, 3vw, 22px); background: var(--card); box-shadow: var(--shadow-soft); }
    .profile__img{  border-radius: 18px; background: linear-gradient(135deg, #bbb, #888); }
    .skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
    .skill{ border:1px solid var(--line); padding:8px 10px; border-radius: 10px; font-size:.92rem; background: color-mix(in oklab, var(--card) 88%, transparent); }
    @media (max-width: 920px){ .about{ grid-template-columns: 1fr; } }

    /* ====== SERVICES ====== */
    .services{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.2vw, 22px); }
    .service{ grid-column: span 4; background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); }
    .service h3{ margin:0 0 8px; }
    .service p{ margin:0; color:var(--muted); }
    @media (max-width: 1100px){ .service{ grid-column: span 6; } }
    @media (max-width: 640px){ .service{ grid-column: span 12; } }

    /* ====== CONTACT ====== */
    form{ display:grid; gap:12px; }
    .field{ display:grid; gap:6px; }
    .field label{ font-size:.95rem; color: var(--muted); }
    .input{ padding:12px 14px; border-radius: 12px; border:1px solid var(--line); background: var(--card); color: var(--fg); }
    textarea.input{ min-height: 140px; resize: vertical; }

    /* ====== FOOTER ====== */
    footer{ border-top:1px solid var(--line); padding: 20px 0 40px; color: var(--muted); }
    .footer-grid{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; }
    .social{ display:flex; gap:10px; }
    .social a{ border:1px solid var(--line); border-radius:12px; padding:8px; display:inline-flex; }

    /* motion reduce */
    @media (prefers-reduced-motion: reduce){ .btn:hover, .card:hover { transform:none; } }
  
  
    /* mappe*/
     .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.2vw, 22px); }
    .card{ grid-column: span 4; background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); }
    .card h3{ margin: 0 0 8px; }
    .card p{ margin: 0; color: var(--muted); }
    @media (max-width:1100px){ .card{ grid-column: span 6; } }
    @media (max-width:640px){ .card{ grid-column: span 12; } }

     .kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; margin-top: 18px; }
    .kpi{ background: color-mix(in oklab, var(--card) 96%, transparent); border:1px dashed var(--line); border-radius: 12px; padding: 14px; color: var(--muted); }

    .gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 18px; margin-top: 18px; }
    .shot{ border:1px solid var(--line); border-radius: 14px; overflow:hidden; box-shadow: var(--shadow-soft); background:#000; aspect-ratio: 16/10; display:grid; place-items:center; color:#8f9098; }


    :root{
      --h: 70px;
      --gap: 56px;
      --speed: 18s;
      --fade: 80px;
      --bg: transparent;
    }

    .logo-marquee{
      position: relative;
      height: var(--h);
      background: var(--bg);
      overflow: hidden;
      display: flex;
      align-items: center;

      -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--fade),
        #000 calc(100% - var(--fade)),
        transparent 100%);
      mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--fade),
        #000 calc(100% - var(--fade)),
        transparent 100%);
    }

    /* Track contiene DUE copie della lista */
    .logo-track{
      display: flex;
      align-items: center;
      width: max-content;
      will-change: transform;
      animation: marquee-left var(--speed) linear infinite;
    }

    /* Ogni copia è una lista */
    .logo-list{
      display: flex;
      align-items: center;
      gap: var(--gap);
      padding-right: var(--gap); /* stacco visivo tra fine e inizio copia */
    }

    /* ✅ Da destra a sinistra, seamless */
    @keyframes marquee-left{
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .logo-item{
      height: calc(var(--h) * 0.55);
      width: auto;
      opacity: 0.85;
      filter: grayscale(100%);
      transition: opacity .2s ease, filter .2s ease;
      user-select: none;
      pointer-events: none;
    }

    .logo-marquee:hover .logo-item{
      opacity: 1;
      filter: none;
    }

    @media (prefers-reduced-motion: reduce){
      .logo-track{ animation: none; transform: translateX(0); }
    }