:root{
    /* Palette richiesta dal cliente */
    --blue:#A3E2F4;
    --gold:#F5C132;
    --green:#B7DD69;
    --muted:#9797B5;
    --bg:#F3F3F3;

    /* Varianti "deep" derivate per garantire leggibilità del testo su sfondo chiaro
       (nessuno dei 5 colori richiesti ha abbastanza contrasto da solo per testo) */
    --blue-deep:#2E7C99;
    --gold-deep:#96660E;
    --green-deep:#5C7C2A;

    /* Neutri di supporto */
    --surface:#FFFFFF;
    --panel:#FFFFFF;
    --panel-2:#EAEAEE;
    --ink:#2E2E3A;
    --ink-soft:#5B5B70;
    --line: rgba(46,46,58,0.10);

    /* Il riquadro "segnale" resta scuro per far risaltare l'animazione */
    --box-dark:#1B1B24;
    --box-line: rgba(255,255,255,0.12);

    --maxw: 1180px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }

  ::selection{ background:var(--gold); color:var(--ink); }

  a{ color:inherit; text-decoration:none; }

  img{max-width:100%; display:block;}

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue-deep);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--gold);
    border-radius:50%;
    display:inline-block;
    box-shadow:0 0 0 3px rgba(245,193,50,0.22);
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    line-height:1.08;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  h2{ font-size:clamp(28px, 4vw, 42px); font-weight:400; }

  p{ color:var(--ink-soft); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Space Mono', monospace;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:var(--gold);
    color:var(--ink);
    padding:15px 26px;
    border-radius:2px;
    border:none;
    cursor:pointer;
    transition:transform .25s ease, background .25s ease;
  }
  .btn:hover{ background:#F8CE5F; transform:translateY(-2px); }
  .btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }
  .btn-ghost:hover{ background:var(--panel-2); border-color:var(--blue-deep); }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:74px;
  }
  .logo{
    font-family:'Fraunces', serif;
    font-size:20px;
    letter-spacing:-0.01em;
    display:flex; align-items:center; gap:9px;
  }
  .logo .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px rgba(245,193,50,.20);
  }
  .navlinks{ display:flex; gap:34px; align-items:center; }
  .navlinks a{
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    transition:color .2s ease;
  }
  .navlinks a:hover{ color:var(--blue-deep); }
  .nav-cta{ display:none; }
  @media(min-width:860px){ .nav-cta{ display:inline-flex; } }
  .menu-toggle{ display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; }

  @media(max-width:859px){
    .navlinks{
      position:fixed; top:74px; left:0; right:0;
      flex-direction:column; align-items:flex-start;
      background:var(--panel);
      padding:24px 32px 32px;
      border-bottom:1px solid var(--line);
      box-shadow:0 8px 24px rgba(46,46,58,0.08);
      transform:translateY(-140%);
      transition:transform .3s ease;
      gap:20px;
    }
    .navlinks.open{ transform:translateY(0); }
    .menu-toggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:170px 0 100px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
  }
  .hero--first{ border-top:none; }
  @media(max-width:940px){
    .hero{ grid-template-columns:1fr; padding:150px 0 60px; }
  }
  .hero h1{
    font-size:clamp(38px, 6vw, 74px);
    margin:22px 0 26px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold-deep);
  }
  .hero p.lead{
    font-size:18px;
    max-width:46ch;
    margin-bottom:36px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

  .signal-box{
    position:relative;
    aspect-ratio:1/1;
    border:1px solid var(--box-line);
    background:var(--box-dark);
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(46,46,58,0.14);
  }
  .signal-box canvas{ width:100%; height:100%; display:block; }
  .signal-box .tag{
    position:absolute; top:16px; left:16px;
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--muted);
    letter-spacing:.08em;
  }
  .signal-box .tag.right{ left:auto; right:16px; color:var(--gold); }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:110px 0; border-top:1px solid var(--line); }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ margin-top:16px; }
  .approach-intro{ margin-top:18px; font-size:17px; max-width:60ch; }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:64px;
  }
  @media(max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
  .about-grid .big-stat{
    font-family:'Fraunces', serif;
    font-size:120px;
    line-height:0.9;
    color:var(--gold-deep);
    font-weight:400;
  }
  .about-grid .big-stat span{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--ink-soft);
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-top:14px;
  }
  .about-grid .copy p{ margin-bottom:20px; font-size:17px; }
  .about-grid .copy p:last-child{ margin-bottom:0; }
  .about-title{ margin:16px 0 26px; }

  /* ---------- FOUNDER ---------- */
  .founder{
    margin-top:64px;
    padding-top:48px;
    border-top:1px solid var(--line);
    display:flex;
    gap:28px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .founder-avatar{
    width:68px; height:68px;
    border-radius:50%;
    background:var(--ink);
    color:var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-size:21px;
    letter-spacing:0.02em;
    flex-shrink:0;
    box-shadow:0 0 0 4px rgba(245,193,50,0.20);
  }
  .founder-info h3{
    font-size:23px;
    font-weight:500;
    margin:2px 0 6px;
  }
  .founder-role{
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--blue-deep);
    margin-bottom:16px;
  }
  .founder-stats{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .founder-stats li{
    font-size:14.5px;
    color:var(--ink-soft);
    position:relative;
    padding-left:20px;
  }
  .founder-stats li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--gold-deep);
  }

  /* ---------- PRINCIPLES ---------- */
  .principles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:760px){ .principles{ grid-template-columns:1fr; } }
  .principle{
    background:var(--surface);
    padding:40px 34px;
    box-shadow:0 1px 0 rgba(46,46,58,0.03) inset;
  }
  .principle .num{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--blue-deep);
    letter-spacing:.08em;
  }
  .principle:nth-child(2) .num{ color:var(--green-deep); }
  .principle:nth-child(3) .num{ color:var(--gold-deep); }
  .principle h3{
    font-size:23px;
    margin:18px 0 12px;
    font-weight:400;
  }
  .principle p{ font-size:15px; }

  /* ---------- SECTION BLOCKS (merged sections) ---------- */
  .section-block{
    margin-top:80px;
    padding-top:80px;
    border-top:1px solid var(--line);
  }

  /* ---------- SERVIZI ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:760px){ .services-grid{ grid-template-columns:1fr; } }
  .service-card{
    background:var(--surface);
    padding:40px 34px;
    box-shadow:0 1px 0 rgba(46,46,58,0.03) inset;
  }
  .service-num{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.08em;
    color:var(--blue-deep);
  }
  .service-card:nth-child(2) .service-num{ color:var(--green-deep); }
  .service-card:nth-child(3) .service-num{ color:var(--gold-deep); }
  .service-card:nth-child(4) .service-num{ color:var(--muted); }
  .service-card h3{
    font-size:23px;
    font-weight:400;
    margin:18px 0 12px;
  }
  .service-card p{ font-size:15px; }

  /* ---------- STACK ---------- */
  .stack-intro{ margin-top:18px; font-size:17px; max-width:60ch; }
  .stack-groups{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
  }
  @media(max-width:1000px){ .stack-groups{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .stack-groups{ grid-template-columns:1fr; } }
  .stack-group h3{
    font-family:'Space Mono', monospace;
    font-size:12px;
    font-weight:400;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue-deep);
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .stack-group:nth-child(2) h3{ color:var(--green-deep); }
  .stack-group:nth-child(3) h3{ color:var(--gold-deep); }
  .stack-group:nth-child(4) h3{ color:var(--muted); }
  .stack-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .stack-list li{
    font-size:15px;
    color:var(--ink-soft);
    padding-left:16px;
    position:relative;
  }
  .stack-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.55em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--gold);
  }

  /* ---------- CLIENTI — composizione ispirata a Mondrian ---------- */
  /* Non una copia: gap reali (non linee nere a contatto), angoli leggeri, solo 2 blocchi
     colore invece di 4, e un piccolo tab per riquadro nella palette del sito.
     Riquadri bianchi = spazio per i loghi (da inserire in seguito). */
  .signal-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:112px;
    gap:16px;
  }
  .signal-grid > div{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:16px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .signal-grid > div:not(.block):hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(46,46,58,0.08);
    border-color:var(--muted);
  }
  .signal-grid > div:not(.block)::before{
    content:"";
    position:absolute;
    top:0; left:16px;
    width:22px; height:3px;
    background:var(--gold-deep);
    border-radius:0 0 2px 2px;
  }
  .signal-grid > div:nth-child(3n+2):not(.block)::before{ background:var(--blue-deep); }
  .signal-grid > div:nth-child(3n+3):not(.block)::before{ background:var(--green-deep); }

  .brand-name{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .brand-cat{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:6px;
  }
  .signal-grid .block{ border:none; border-radius:3px; }
  .signal-grid .block.gold{ background:var(--gold); }
  .signal-grid .block.blue{ background:var(--blue); }

  /* Composizione asimmetrica dei 13 riquadri (11 loghi + 2 blocchi colore) */
  .signal-grid > div:nth-child(1){ grid-column:1/4; grid-row:1/3; }
  .signal-grid > div:nth-child(2){ grid-column:6/7; grid-row:1/3; }
  .signal-grid > div:nth-child(3){ grid-column:4/6; grid-row:1/2; }
  .signal-grid > div:nth-child(4){ grid-column:4/5; grid-row:2/3; }
  .signal-grid > div:nth-child(5){ grid-column:5/6; grid-row:2/3; }
  .signal-grid > div:nth-child(6){ grid-column:1/3; grid-row:3/4; }
  .signal-grid > div:nth-child(7){ grid-column:3/4; grid-row:3/5; }
  .signal-grid > div:nth-child(8){ grid-column:4/6; grid-row:3/4; }
  .signal-grid > div:nth-child(9){ grid-column:6/7; grid-row:3/4; }
  .signal-grid > div:nth-child(10){ grid-column:1/2; grid-row:4/5; }
  .signal-grid > div:nth-child(11){ grid-column:2/3; grid-row:4/5; }
  .signal-grid > div:nth-child(12){ grid-column:4/6; grid-row:4/5; }
  .signal-grid > div:nth-child(13){ grid-column:6/7; grid-row:4/5; }

  @media(max-width:860px){
    .signal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; gap:10px; }
    .signal-grid > div{ grid-column:auto !important; grid-row:auto !important; }
  }


  /* ---------- CASI STUDIO ---------- */
  .case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(max-width:900px){ .case-grid{ grid-template-columns:1fr; } }
  .case-card{
    background:var(--surface);
    padding:40px 34px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .case-card:nth-child(1) .case-client{ color:var(--blue-deep); }
  .case-card:nth-child(2) .case-client{ color:var(--green-deep); }
  .case-card:nth-child(3) .case-client{ color:var(--gold-deep); }
  .case-client{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .case-card h3{
    font-size:23px;
    font-weight:400;
  }
  .case-card p{ font-size:15px; }

  /* ---------- METHOD ---------- */
  .method-list{ display:flex; flex-direction:column; }
  .method-item{
    display:grid;
    grid-template-columns:120px 1fr 1fr;
    gap:32px;
    padding:38px 0;
    border-top:1px solid var(--line);
    align-items:start;
  }
  .method-item:last-child{ border-bottom:1px solid var(--line); }
  @media(max-width:760px){
    .method-item{ grid-template-columns:1fr; gap:12px; }
  }
  .method-item .step{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--blue-deep);
    letter-spacing:.1em;
  }
  .method-item:nth-child(2) .step{ color:var(--green-deep); }
  .method-item:nth-child(3) .step{ color:var(--gold-deep); }
  .method-item h3{ font-size:26px; font-weight:400; }
  .method-item p{ font-size:15px; max-width:48ch; }

  /* ---------- MANIFESTO ---------- */
  .manifesto{
    text-align:center;
    background:var(--panel);
  }
  .manifesto blockquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(24px, 3.4vw, 38px);
    max-width:820px;
    margin:0 auto 28px;
    color:var(--ink);
    line-height:1.35;
  }
  .manifesto .sign{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--gold-deep);
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  /* ---------- FAQ ---------- */
  .faq-item{
    border-top:1px solid var(--line);
    padding:26px 0;
  }
  .faq-item:last-child{ border-bottom:1px solid var(--line); }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer;
    font-family:'Fraunces', serif;
    font-size:19px;
    font-weight:400;
  }
  .faq-q .plus{
    font-family:'Space Mono', monospace;
    color:var(--blue-deep);
    font-size:20px;
    transition:transform .25s ease;
  }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .faq-a p{ padding-top:16px; font-size:15px; max-width:60ch; }

  /* ---------- CONTACT ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:64px;
  }
  @media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

  .contact-info p{ margin-bottom:22px; font-size:17px; max-width:42ch; }
  .contact-title{ margin:16px 0 22px; }
  .contact-social{ display:flex; gap:20px; margin-top:30px; }
  .contact-social a{
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border-bottom:1px solid var(--muted);
    padding-bottom:2px;
  }
  .contact-social a:hover{ color:var(--blue-deep); border-color:var(--blue-deep); }

  form.project-form{ display:flex; flex-direction:column; gap:22px; }
  .field{ position:relative; }
  .field label{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .field input, .field textarea{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:15px;
    padding:14px 16px;
    border-radius:2px;
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:var(--blue-deep);
  }
  .field textarea{ min-height:120px; }
  .form-note{ font-size:13px; color:var(--ink-soft); }
  .form-submit{ align-self:flex-start; }
  .form-success{
    display:none;
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--green-deep);
    padding:14px 16px;
    border:1px solid var(--green-deep);
    background:rgba(183,221,105,0.14);
  }
  .form-success.show{ display:block; }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:40px 0;
  }
  .footer-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  .footer-row p{ font-size:13px; color:var(--ink-soft); }
  .footer-logo{ font-size:17px; }
  .footer-links{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
  }
  .footer-links a{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border-bottom:1px solid var(--muted);
    padding-bottom:2px;
  }
  .footer-links a:hover{ color:var(--blue-deep); border-color:var(--blue-deep); }
  .form-note a{ border-bottom:1px solid var(--muted); }
  .form-note a:hover{ color:var(--blue-deep); border-color:var(--blue-deep); }

  /* ---------- LEGAL PAGES ---------- */
  .legal-page{
    padding:140px 0 110px;
  }
  .legal-page h1{
    font-family:'Fraunces', serif;
    font-size:clamp(32px, 4vw, 48px);
    font-weight:400;
    margin-bottom:12px;
  }
  .legal-updated{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:48px;
  }
  .legal-content h2{
    font-size:22px;
    font-weight:400;
    margin:36px 0 14px;
  }
  .legal-content h3{
    font-size:18px;
    font-weight:400;
    margin:24px 0 10px;
  }
  .legal-content p,
  .legal-content li{
    font-size:15px;
    color:var(--ink-soft);
    max-width:68ch;
  }
  .legal-content p{ margin-bottom:14px; }
  .legal-content ul{
    margin:0 0 14px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .legal-content a{
    border-bottom:1px solid var(--muted);
  }
  .legal-content a:hover{
    color:var(--blue-deep);
    border-color:var(--blue-deep);
  }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }