@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.ttf') format('opentype');
  font-style: normal;
}
    
      *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      width:100%;
      min-height:100vh;
      font-family: 'Gilroy';
      overflow:hidden;
      position:relative;
      background:#f4f4f4;
    }

    /* Background */
    .bg-wrapper{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      overflow:hidden;
    }

    .bg-wrapper img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:blur(0.45rem);
      transform:scale(1.04);
    }

    /* Dark Overlay */
    .overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.34);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:3vh 4vw;
    }

    /* Modal */
    .age-modal{
      width:min(38rem, 92vw);
      background:#ffffff;
      border-radius:1.4rem;
      padding:3rem 2.5rem 3.2rem;
      text-align:center;
      box-shadow:
        0 1rem 3rem rgba(0,0,0,0.28),
        0 0.2rem 0.5rem rgba(0,0,0,0.1);
      animation:popup .35s ease;
    }

    @keyframes popup{
      from{
        opacity:0;
        transform:translateY(1.5rem) scale(.96);
      }
      to{
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }

    /* Logo */
    .logo{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:2.1rem;
    }

    .logo img{
      width:min(20rem, 65vw);
      max-width:100%;
      height:auto;
      object-fit:contain;
    }

    /* Heading */
    .title{
      font-size:clamp(2.3rem, 3vw, 4rem);
      line-height:1.05;
      color:#0e1730;
      font-weight:700;
      margin-bottom:1.5rem;
      letter-spacing:-0.03em;
    }

    /* Buttons */
    .btn-group{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:1.2rem;
      flex-wrap:wrap;
    }

    .btn{
      border:none;
      outline:none;
      cursor:pointer;
      min-width:10rem;
      height:4rem;
      padding:0 1rem;
      border-radius:999rem;
      font-size:1.3rem;
      font-weight:500;
      transition:all .25s ease;

    }

    .btn-enter{
      background:#07b84d;
      color:#fff;
      box-shadow:0 0.35rem 0.9rem rgba(7,184,77,0.3);
    }

    .btn-enter:hover{
      transform:translateY(-0.12rem);
      background:#05a344;
    }

    .btn-exit{
      background:#fff;
      color:#202533;
      border:0.08rem solid #d9d9d9;
    }

    .btn-exit:hover{
      background:#f3f3f3;
    }

    /* Responsive */
    @media (max-width:768px){

      .age-modal{
        width:92vw;
        padding:2.5rem 0.6rem 2.7rem;
        border-radius:1.2rem;
      }

      .logo{
        margin-bottom:1.8rem;
      }

      .logo img{
        width:72vw;
      }

      .title{
        font-size: 2.4rem;
        margin-bottom:1.4rem;
      }

      .btn-group{
        gap:1rem;
      }

      .btn{
        width: 42%;
        height: 3.9rem;
        font-size: 1.3rem;
        padding: 0 0.6rem;
      }
    }

    @media (max-width:480px){

      .overlay{
        padding:2vh 4vw;
      }

      .age-modal{
        padding:2.2rem 0.4rem 2.5rem;
      }

      .logo img{
        width:76vw;
      }

      .title{
        font-size: 2.25rem;
        line-height:0.95;
      }

      .btn-group{
        flex-wrap:nowrap;
      }

      .btn{
       min-width: 0;
        width: 42%;
        height: 3.9rem;
        font-size: 1.2rem;
        padding: 0 0.6rem;
      }
    }