@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Homemade+Apple&display=swap');
  
  :root{
    --bianco:      #F9F6F1;
    --grigio06:      #E4E1DD;
    --nero:        #9F6742;
    --colore01:       #00AABD;
    --colore01scuro:  #0d7574;
    --colore02:      #9F6742;
    --colore02chiaro: #bb8d71;
    --carattere01: "Figtree",system-ui,sans-serif;
    --carattere02: "Homemade Apple",cursive;
  }

  *{ box-sizing:border-box; }

  html{ -webkit-text-size-adjust:100%; }

  body{
    margin:0;
    min-height:100dvh;
    background:var(--bianco);
    color:var(--nero);
    font-family:var(--carattere01);
    line-height:1.5;
    display:flex;
    justify-content:center;
    position:relative;
    overflow-x:hidden;
  }

  /* --- ambient background shapes --- */
  .bg{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:visible;
    width:100%;
    min-width:350px;
    max-width:1260px;
    margin: 0 auto;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);

    @media only screen and (max-width: 850px) {
      transform: translate(-50%, 0%);
    }
  }
  .bg img{
    position:absolute;
    width:300px;
    height:100%;
    object-fit:contain;

    &.bg1{
        top:0;
        left:-110px;
        transform: rotate(180deg);
    }

    &.bg2{
        bottom:0;
        right:-110px;
    }

    @media only screen and (max-width: 1260px) {
       opacity: .1;
    }
  }




  .lang{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-block: 1rem;

    >*{
      display:block;
      width: 28px;
      height: 28px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      border-radius: 50%;
        border: 1px solid var(--grigio06);

      &.it{
        background-image: url('../images/icoita.png');
      }
      &.en{
        background-image: url('../images/icoeng.png');
      }
    }
  }


  /* --- page shell --- */
  .page{
    position:relative;
    z-index:1;
    width:100%;
    max-width:460px;
    padding:10px clamp(16px, 5vw, 36px) 48px;
    text-align:center;
  }

  /* --- brand --- */
  .logo-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-inline:auto;

    img{
        width: 100%;
    }
  }

  .tagline{
    margin:18px 0 0;
    font-size:13px;
    font-weight:600;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--colore02);
  }

  .tagline .dot{ color:var(--colore01); }

  /* --- intro --- */
  .intro{ margin-top:34px; }
  .intro .title{
    margin:0;
    font-family:var(--carattere02);
    font-weight:700;
    font-size:clamp(18px,4vw,22px);
    color:var(--colore01);
  }
  .intro .lead{
    margin:8px auto 0;
    width:80%;
    font-family:var(--carattere02);
    font-weight:500;
    font-size:clamp(14px,3vw,16px);
    line-height:1.75;
    color:var(--colore02chiaro);
  }
  .rule{
    width:32px;
    height:1px;
    margin:26px auto 0;
    border:0;
    border-radius:3px;
    background:var(--colore01);
  }

  /* --- link pills --- */
  .links{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
  }
  .pill{
    position:relative;
    display:flex;
    align-items:center;
    min-height:72px;
    padding:0;
    border-radius:44px;
    border:1px solid var(--grigio06);
    box-shadow:
      0 2px 0 rgba(255,255,255,.9) inset,
      0 14px 26px -14px rgba(107,75,56,.1);
    text-decoration:none;
    color:var(--colore02);
    transition:transform .18s ease, box-shadow .18s ease;

    background: rgba(249, 246, 241, .4);
    backdrop-filter: blur(3px);

    .badge-img{

        width: 80px;
        height: calc(100% - 10px);
        margin: 5px;
        box-sizing: border-box;
        position: absolute;
        overflow: hidden;
        display: block;
        left: 0;
        top: 0;
        border-radius: 30px 0 0 30px;
        opacity: 0;

        /* animazione in entrata dissolvenza + transform da sinistra a destra*/
        animation: slideIn 0.5s ease forwards;

        @media only screen and (prefers-reduced-motion: reduce) {
            animation: none;
            opacity: 1;
        }

        @media only screen and (max-width: 360px) {
            width: 60px;
        }

        /* &::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(to right,var(--colore01),var(--colore01scuro));
            clip-path:polygon(0 0,0 100%,100% 50%);
            } */

            img{
                position: absolute;
                width: 100%;
                height: auto;
                top:50%;
                left:-8px;
                transform: translateY(-50%);
            }

            
        }


        /*il badge-img della seconda .pill ha un leggero delay rispetto alla prima, la terza rispetto alla seconda e così via*/
        &:nth-child(2) .badge-img{
            animation-delay: 0.2s;
        }
        &:nth-child(3) .badge-img{
            animation-delay: 0.4s;
        }
        &:nth-child(4) .badge-img{
            animation-delay: 0.6s;
        }
        &:nth-child(5) .badge-img{
            animation-delay: 0.8s;
        }




        .chevron{
                position: absolute;
                right: 30px;
                top: 50%;
                border-bottom: 2px solid var(--colore01);
                border-right: 2px solid var(--colore01);
                width: 14px;
                height: 14px;
                transform: translateY(-50%) rotate(-45deg);                
            }
    }
  .pill:hover{
    transform:translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 20px 30px -14px rgba(107,75,56,.45);
    background: rgba(249, 246, 241, .7);
    backdrop-filter: blur(7px);
  }
  .pill:focus-visible{
    outline:3px solid var(--colore01);
    outline-offset:3px;
  }

  /* teal pizza-slice badge on the left */
  .pill .badge{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:68px;
    height:68px;
    color:var(--colore01);
  }

  .pill .label{
    flex:1;
    font-size:clamp(16px,4vw,18px);
    font-weight:300;
    letter-spacing:.22em;
    line-height:1.3;
    text-transform:uppercase;
    text-align:center;

    max-width: calc(100% - 180px);
    margin: 0 auto;

    @media only screen and (max-width: 360px) {
            max-width: calc(100% - 140px);
        }

    &.min{
      font-size:clamp(14px,4vw,16px);
    }
  }
  .pill .chev{
    flex:none;
    width:22px;
    height:22px;
    color:var(--colore01);
    transition:transform .18s ease;
  }
  .pill:hover .chev{ transform:translateX(4px); }

  /* --- footer --- */
  .foot{ margin-top:40px; }
  .foot .sep{
    height:1px;
    margin:0 6px 26px;
    background: var(--colore02);
    border:0;
  }

  .contact{
    display:inline-flex;
    flex-direction:column;
    gap:14px;
    text-align:left;
  }
  .contact a,
  .contact .row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--colore02);
    text-decoration:none;
    font-size:15px;
  }
  .contact a:hover .txt{ color:var(--colore01scuro); }
  .contact .ic{
    flex:none;
    width:22px;
    height:22px;
    margin-top:1px;
    color:var(--colore01);
  }
  .contact .txt strong{ font-weight:700; }
  .contact .txt span{ color:var(--colore02chiaro); }

  .social-title{
    margin:0 0 14px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--colore02chiaro);
  }
  .social{
    display:flex;
    justify-content:center;
    gap:12px;
  }
  .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:2px solid var(--colore01);
    border-radius:8px;
    color:var(--colore01);
    transition:transform .18s ease, background .18s ease, color .18s ease;
  }
  .social a:hover{
    transform:translateY(-3px);
    background:var(--colore01);
    color:#fff;
  }
  .social a:focus-visible{ outline:3px solid var(--colore01); outline-offset:3px; }
  .social svg{ width:20px; height:20px; }
  .social svg.ig{ width:38px; height:38px; }

  @media (prefers-reduced-motion:reduce){
    *{ transition:none !important; }
  }

  @keyframes slideIn{
    0%{
      opacity:0;
      transform: translateX(20px);
    }
    100%{
      opacity:1;
      transform: translateX(0);
    }
  }