:root{
  --bg1:#b9d7ff;
  --bg2:#6fb0ff;
  --border: rgba(255,255,255,.22);
  --white:#fff;

  --panelW: min(1400px, calc(100vw - 32px));
  --panelH: min(860px,  calc(100vh - 32px));

  --ease: cubic-bezier(.2,.9,.2,1);

  --logoSize: min(95vmin, 1100px);

  /* 🔥 PIÙ GRANDI = PIÙ A SINISTRA */
  --rx1: 340px;
  --rx2: 420px;
  --rx3: 390px;
  --rx4: 340px;
  --rx5: 420px;

  --ry1: -120px;
  --ry2: -210px;
  --ry3: 0px;
  --ry4: 120px;
  --ry5: 210px;

  --logoBlue: #1e1b4b;

  --pill-font: clamp(18px, 2.1vmin, 24px);
  --pill-pad-x: 32px;

  --pill-minw: 280px;
  --pill-h: 72px;

  --pill-border: rgba(255,255,255,.35);
  --pill-border-hover: rgba(255,255,255,.65);

  --pill-fill-from: rgba(255,255,255,.30);
  --pill-fill-to: rgba(255,255,255,.16);
}

.mdl-page *{
  box-sizing:border-box;
}

.mdl-page{
  width:100%;
  position:relative;
}

/* stage */
.mdl-page .stage{
  min-height:80vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(900px 900px at 50% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(1200px 900px at 50% 70%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}

/* glass */
.mdl-page .glass{
  width:var(--panelW);
  height:var(--panelH);
  border-radius:30px;

  background:
    radial-gradient(900px 900px at 50% 45%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));

  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.30);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* center */
.mdl-page .center{
  position:relative;
  width:var(--logoSize);
  height:var(--logoSize);
}

/* logo */
.mdl-page .logo-area{
  position:absolute;
  inset:0;
}

.mdl-page .logo-link{
  display:block;
  width:100%;
  height:100%;
}

.mdl-page .logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* menu */
.mdl-page .menu{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* 🔥 PILLOLE */
.mdl-page .pill,
.mdl-page .pill:link,
.mdl-page .pill:visited{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;

  min-width:var(--pill-minw);
  height:var(--pill-h);
  padding:0 var(--pill-pad-x);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:var(--pill-font);
  font-weight:800;
  border-radius:999px;

  background:linear-gradient(
    180deg,
    var(--pill-fill-from),
    var(--pill-fill-to)
  );

  border:1px solid var(--pill-border);

  backdrop-filter:blur(14px);

  color:var(--logoBlue) !important;
  text-decoration:none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 24px rgba(30,27,75,.12);

  opacity:0;

  transition:
    transform .45s var(--ease),
    opacity .2s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.mdl-page .pill span{
  color:var(--logoBlue) !important;
}

/* hover */
.mdl-page .pill:hover{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.50),
    rgba(255,255,255,.26)
  );

  border-color:var(--pill-border-hover);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 20px 40px rgba(30,27,75,.20);
}

/* chiuse */
body:not(.open) .mdl-page .pill{
  opacity:0;
  transform:translate(-50%,-50%) scale(.95);
}

/* aperte */
body.open .mdl-page .p1{
  opacity:1;
  transform:translate(calc(-50% - var(--rx1)), calc(-50% + var(--ry1)));
}

body.open .mdl-page .p2{
  opacity:1;
  transform:translate(calc(-50% - var(--rx2)), calc(-50% + var(--ry2)));
}

body.open .mdl-page .p3{
  opacity:1;
  transform:translate(calc(-50% - var(--rx3)), calc(-50% + var(--ry3)));
}

body.open .mdl-page .p4{
  opacity:1;
  transform:translate(calc(-50% - var(--rx4)), calc(-50% + var(--ry4)));
}

body.open .mdl-page .p5{
  opacity:1;
  transform:translate(calc(-50% - var(--rx5)), calc(-50% + var(--ry5)));
}

/* hover scale */
body.open .mdl-page .p1:hover{
  transform:translate(calc(-50% - var(--rx1)), calc(-50% + var(--ry1))) scale(1.08);
}
body.open .mdl-page .p2:hover{
  transform:translate(calc(-50% - var(--rx2)), calc(-50% + var(--ry2))) scale(1.08);
}
body.open .mdl-page .p3:hover{
  transform:translate(calc(-50% - var(--rx3)), calc(-50% + var(--ry3))) scale(1.08);
}
body.open .mdl-page .p4:hover{
  transform:translate(calc(-50% - var(--rx4)), calc(-50% + var(--ry4))) scale(1.08);
}
body.open .mdl-page .p5:hover{
  transform:translate(calc(-50% - var(--rx5)), calc(-50% + var(--ry5))) scale(1.08);
}

/* responsive */
@media (max-width:1100px){
  :root{
    --pill-font:20px;
    --pill-minw:240px;
    --pill-h:64px;
  }
}

@media (max-width:768px){
  :root{
    --pill-font:18px;
    --pill-minw:210px;
    --pill-h:56px;
  }

  .mdl-page .center{
    width:min(92vw,700px);
    height:min(92vw,700px);
  }
}