:root{
  --page:#e8e8e6; --frame:#0c0d10; --ink:#f4efe6;
  --c1:#ee6a3c; --c2:#ffd322; --c3:#8fd3ff;
  --font:'Inter',system-ui,sans-serif;
  --radius:clamp(20px,3.4vw,48px);
  --pad:clamp(12px,1.3vw,18px);
}
/* componenti condivisi (stessi di ginbu.html): bottoni, nome, menu aperto */
 /* un solo tipo di bottone per tutto: pillola bianca 46px + cerchio nero */
 .btn{display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 4px 0 22px;border-radius:999px;background:#fff;color:#111;font-size:13px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:background .3s,color .3s}
 .btn b{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;transition:background .3s,color .3s}
 .btn b svg{display:block}

 /* vai al sito: fisso in basso a destra sull'immagine */
 .topl{position:absolute;left:calc(var(--pad) + 14px);top:calc(var(--pad) + 14px);z-index:6;display:flex;align-items:center;gap:8px}
 .name{height:46px;padding:0 24px;border-radius:999px;background:#fff;color:#111;display:inline-flex;align-items:center;font-size:13px;font-weight:500;letter-spacing:-.005em}
 .topr{position:absolute;right:calc(var(--pad) + 14px);top:calc(var(--pad) + 14px);z-index:6;display:flex;align-items:center;gap:12px}
 .cta{position:absolute;right:calc(var(--pad) + 14px);bottom:calc(var(--pad) + 14px);z-index:6}

 /* menu aperto */
 .btn.menu{border:0;font-family:inherit;cursor:pointer}
 .menu .lbl{display:grid;overflow:hidden;height:1.2em;line-height:1.2em}
 .menu .lbl i{font-style:normal;grid-area:1/1;transition:transform .55s cubic-bezier(.76,0,.24,1)}
 .menu .lbl i:last-child{transform:translateY(110%)}
 .menu b{position:relative}
 .menu b svg{grid-area:1/1;transition:transform .55s cubic-bezier(.76,0,.24,1),opacity .3s}
 .menu .i-close{position:absolute;opacity:0;transform:rotate(-90deg)}
 .open .menu .lbl i:first-child{transform:translateY(-110%)}
 .open .menu .lbl i:last-child{transform:none}
 .open .menu .i-open{opacity:0;transform:rotate(90deg)}
 .open .menu .i-close{opacity:1;transform:none}
 .topr{z-index:12} .topl{z-index:12}
 .mpanel{position:absolute;inset:0;z-index:10;background:var(--frame);color:var(--ink);border-radius:inherit;
   display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(18px,3vh,34px);padding:calc(var(--pad) + 76px) calc(var(--pad) + 14px) calc(var(--pad) + 14px);
   clip-path:circle(0px at calc(100% - 96px) 56px);visibility:hidden;transition:clip-path .85s cubic-bezier(.76,0,.24,1),visibility 0s .85s}
 .open .mpanel{clip-path:circle(150% at calc(100% - 96px) 56px);visibility:visible;transition:clip-path .95s cubic-bezier(.76,0,.24,1),visibility 0s}
 .mlist{list-style:none;display:flex;flex-direction:column}
 .mlist li{border-top:1px solid rgba(244,239,230,.16);overflow:hidden}
 .mlist li:last-child{border-bottom:1px solid rgba(244,239,230,.16)}
 .mlist a{display:grid;grid-template-columns:clamp(34px,4vw,64px) 1fr auto;align-items:center;gap:12px;padding:clamp(6px,1.4vh,14px) 0;transform:translateY(105%);transition:transform .6s cubic-bezier(.76,0,.24,1),color .3s,padding .4s cubic-bezier(.76,0,.24,1)}
 .open .mlist a{transform:none;transition:transform .9s cubic-bezier(.76,0,.24,1) var(--d,0s),color .3s,padding .4s cubic-bezier(.76,0,.24,1)}
 .mlist li:nth-child(1) a{--d:.28s}.mlist li:nth-child(2) a{--d:.34s}.mlist li:nth-child(3) a{--d:.40s}.mlist li:nth-child(4) a{--d:.46s}.mlist li:nth-child(5) a{--d:.52s}
 .mlist .n{font-size:13px;opacity:.5}
 .mlist .t em{font-style:normal;font-size:clamp(34px,8.2vh,92px);line-height:1;letter-spacing:-.04em;font-weight:500}
 .mlist .k{font-size:13px;opacity:.5;text-align:right}
 .mlist a:hover{color:var(--c2);padding-left:clamp(8px,1.2vw,18px)}
 .mlist a.cur .t em::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--c1);margin-left:.18em;vertical-align:.5em}
 .mfoot{display:flex;flex-wrap:wrap;gap:8px 28px;overflow:hidden}
 .mfoot a{font-size:13px;font-weight:500;opacity:.8;display:block;transform:translateY(120%);transition:transform .6s cubic-bezier(.76,0,.24,1),opacity .3s}
 .open .mfoot a{transform:none;transition:transform .9s cubic-bezier(.76,0,.24,1) .62s,opacity .3s}
 .mfoot a:hover{opacity:1}
 .mfoot em{font-style:normal}
 .open .next,.open .cta{opacity:0;pointer-events:none}
 .next,.cta{transition:opacity .35s}
 @media (prefers-reduced-motion:reduce){.mpanel,.mlist a,.mfoot a{transition:none!important}}
@media (max-aspect-ratio:1/1){
  :root{--pad:14px}
  .btn{height:40px;padding:0 3px 0 16px;gap:10px;font-size:12px} .btn b{width:34px;height:34px}
  .name{height:40px;padding:0 18px;font-size:12px}
  .topl{top:calc(var(--pad) + 12px);left:calc(var(--pad) + 12px);gap:6px}
  .topr{top:calc(var(--pad) + 12px);right:calc(var(--pad) + 12px);gap:6px}
  .cta{bottom:calc(var(--pad) + 12px);right:calc(var(--pad) + 12px)}
}
 a.name{transition:background .3s} a.name:hover{background:var(--c2)}