body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
      flex-direction:column;  /* 🔥 KEY FIX */
    align-items:center;
    background:#000;
    font-family:'Poppins',sans-serif;
      
animation: pageLoad .6s ease;
}

@keyframes pageLoad{

    from{
        opacity:0;
        transform:translateX(50px);
    }

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

/* MOBILE FRAME */

.mobile-frame{
    width:430px;
    height:900px;

 
    overflow:hidden;

    border:2px solid rgba(212,175,55,0.5);

    border-radius:30px;

    .mobile-frame{

    box-shadow:
    0 0 60px rgba(212, 175, 55, 0.589),
    0 0 100px rgba(0,0,0,.8);
}

    position:relative;
    background:#000;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
}

.splash{
    width:100%;
    height:100%;
position:relative;

    background:
    linear-gradient(
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.8)
    ),
    url('images/splash-bg.jpeg');

    background-size:cover;
    background-position:center top;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:70px;

    position:relative;
    overflow:hidden;
}

/* Bottom Luxury Waves */

.splash::after{
    content:'';
    position:absolute;
    bottom:-60px;
    left:0;
    width:100%;
    height:45%;

    background:
    radial-gradient(circle at center,
    rgba(72, 2, 50, 0.45),
    transparent 70%);

    z-index:1;
}


/* Logo */

.logo-box{
   .logo-box{
    width:100px;
    height:100px;
    
}

    border-radius:50%;
    
    overflow:hidden;
    position:absolute;
    top:36%;
    left:49%;
    transform:translate(-50%,-50%);
    z-index:10;
  border:1px solid #e9bb24;
    outline:1px solid #d3cebb;
    box-shadow:
    0 0 25px rgba(212,175,55,.5);

   
}
.logo-box::before{
    content:'';
    position:absolute;

    top:15px;
    right:25px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        #f1ca0a 0%,
        #e8bc42 40%,
        rgba(215, 187, 27, 0) 75%
    );

    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #ffd700;

    z-index:100;
}

.logo-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* Text */

.text-content{
    text-align:center;
    z-index:10;

    margin-top:auto;
    margin-bottom:10px;
}

.text-content h2{
    color:#dcb46a;
    font-size:19px;
    font-family:'Playfair Display',serif;
}

.text-content h1{
    color:#fff;
    font-size:38px;
    font-family:'Ms Madi',cursive;
    font-weight:400;
    margin-top:auto;
    margin-bottom:8px;

    position:relative;
    display:inline-block;
    padding-bottom:25px;
    
}
.text-content h1::after{
    content:"";

    position:absolute;
    left:60%;
    bottom:20px;

    width:140px;
    height:18px;

    border-bottom:3px solid #D4AF37;
    border-radius:50%;

    transform:translateX(-50%) rotate(-6deg);

    box-shadow:0 0 10px rgba(212,175,55,.8);
}


/* Button */

.start-btn{


    margin-top:0;
    margin-bottom: 60px;


    width:200px;
    height:55px;

    border:none;
    border-radius:60px;

    background:
    linear-gradient(
        90deg,
        #1b001e,
        #a1027c
    );

    color:#fff;
    font-size:16px;
    letter-spacing:2px;

    cursor:pointer;

    z-index:10;

    border:2px solid #897227;

    box-shadow:
    0 0 20px rgba(212,175,55,.4);

    transition:.4s;
}

.start-btn:hover{

    transform:translateY(-5px);

    box-shadow:
       
        0 0 50px rgba(255,215,0,.5);
}
/* Animation */

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}


/* Mobile */

@media(max-width:480px){

    .logo-box{
        width:180px;
        height:180px;
    }

    .text-content h2{
        font-size:36px;
    }

    .text-content h1{
        font-size:58px;
    }

    .start-btn{
        width:280px;
        height:65px;
        font-size:22px;
    }

}