:root{

    --ink:#181a1c;

    --accent:#e0451f;

    --line: rgba(24,26,28,0.14);

    --panel-bg: rgba(255,255,255,0.6); /* trasparenza del pannello */

  }



  *{ box-sizing:border-box; }

  html,body{ height:100%; }

  body{

    margin:0;

    font-family:'Inter', sans-serif;

    color:var(--ink);

    -webkit-font-smoothing:antialiased;

  }



  @media (prefers-reduced-motion: reduce){

    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }

  }



  /* ================= SFONDO ================= */

  .backdrop{

    position:fixed; inset:0; z-index:-1;

    overflow:hidden;

    background:#f4f3ef;

  }

  .backdrop .img{

    position:absolute; inset:-4%;



    background-image:

      linear-gradient(125deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0.75) 100%),

      repeating-linear-gradient(115deg, #ececE6 0 3px, #f7f6f2 3px 46px),

      linear-gradient(160deg, #ffffff, #e7e5dd 70%);

    background-image: url("../img/background.jpg");	  

    background-blend-mode:normal, overlay, normal;

    background-size:cover;

    background-position:center;

    animation:slowZoom 22s ease-in-out infinite alternate;

  }

  @keyframes slowZoom{

    0%{ transform:scale(1); }

    100%{ transform:scale(1.06); }

  }



  /* ================= LAYOUT ================= */

  .stage{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px 20px;

  }



  /* ================= PANNELLO ================= */

  .panel{

    width:100%;

    max-width:420px;

    background:var(--panel-bg);

    backdrop-filter:blur(14px) saturate(130%);

    -webkit-backdrop-filter:blur(14px) saturate(130%);

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

    border-radius:6px;

    padding:44px 36px 40px;

    text-align:center;

    box-shadow:0 30px 70px -25px rgba(24,26,28,0.18);

    opacity:0;

    transform:translateY(20px);

    animation:fadeUp .9s cubic-bezier(.2,.8,.25,1) .15s forwards;

  }

  @keyframes fadeUp{

    to{ opacity:1; transform:translateY(0); }

  }



  /* LOGO */

  .logo-slot{

    width:96px; height:96px;

    margin:0 auto 26px;

    border:1.5px solid rgba(24,26,28,0.25);

    border-radius:50%;

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

    font-family:'Anton', sans-serif;

    font-size:13px; letter-spacing:0.04em;

    color:var(--ink);

  }

  .logo-slot img{

    width:100%; height:100%; object-fit:contain; border-radius:50%; background-color: #fff;

  }



  .panel h1{

    font-family:'Anton', sans-serif;

    font-weight:400;

    font-size:clamp(28px, 6vw, 38px);

    letter-spacing:0.01em;

    margin:0 0 8px;

    text-transform:uppercase;

    color:var(--ink);

  }

  .panel .payoff{

    font-family:'IBM Plex Mono', monospace;

    font-size:11px; letter-spacing:0.12em; text-transform:uppercase;

    color:var(--accent);

    margin-bottom:24px;

  }



  .panel .lead{

    font-size:14.5px; line-height:1.6; color:rgba(24,26,28,0.72);

    max-width:30ch; margin:0 auto 28px;

  }



  .divider{

    border:none; border-top:1px dashed rgba(24,26,28,0.22);

    margin:0 0 24px;

  }



  .info-list{

    font-family:'IBM Plex Mono', monospace;

    font-size:12px; line-height:1.9;

    color:rgba(24,26,28,0.78);

    text-align:left;

    display:inline-block;

  }

  .info-list .row{ display:flex; gap:10px; }

  .info-list .k{ color:var(--accent); min-width:64px; text-align:left; text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0; }



  @media (max-width:480px){

    .panel{ padding:36px 24px 32px; }

    .info-list{ font-size:11px; }

  }