:root{

   --primary:#8B5CF6;
  --secondary:#C084FC;
  --accent:#FFD700;

  --btn-gradient:
    linear-gradient(135deg,#7C3AED,#A855F7,#D8B4FE);

  --card-gradient:
    linear-gradient(180deg,#160726,#260B44);

  --text:#ffffff;
}


*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  font-family:'Poppins',sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
   color:var(--text);
    background:
      radial-gradient(circle at 15% 20%,
      rgba(195,76,255,.25) 0%,
      transparent 30%),

      radial-gradient(circle at 85% 25%,
      rgba(0,207,255,.25) 0%,
      transparent 30%),

      linear-gradient(
      180deg,
      #071b56 0%,
      #03061f 40%,
      #140027 100%
      );

  color:#fff;

  overflow-x:hidden;
}

.page-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.profile-card{

  width:min(100%,450px);

  background:radial-gradient(
        circle at top,
        rgba(168,85,247,.12),
        transparent 45%
    ),
    linear-gradient(
        180deg,
        #171717,
        #090909
    );
  

  border-radius:32px;

  border:1px solid rgba(210,80,255,.15);

  padding:28px;



  position:relative;
  overflow:hidden;
  backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 40px rgba(168,85,247,.25);

}

.profile-card::before{

  content:'';

    position:absolute;

    width:220px;
    height:220px;

    top:-110px;
    right:-80px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,204,51,.12),
        transparent 70%
    );

    pointer-events:none;

}

.profile{
  text-align:center;
  position:relative;
  z-index:1;
}

.profile-img{

  width:120px;
  height:120px;

  border-radius:50%;

  object-fit:cover;

  border:4px solid #fff;

  box-shadow:
  0 0 25px rgba(255,255,255,.15),
  0 0 40px rgba(210,60,255,.25);

}

.name{

  margin-top:18px;

  font-family:'Cinzel',serif;

  font-size:1.7rem;

  background:
  linear-gradient(
  180deg,
  #ffffff,
  #ffe58b
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  letter-spacing:1px;

}

.bio{

  margin:12px auto;

  max-width:320px;

  color:var(--muted);

  line-height:1.6;

}

.role{
    text-transform: uppercase;
    display: inline-block;
    margin-top: 20px;
    font-size: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, #512467, rgb(26 4 63 / 95%));
    border: 2px solid #c34cff70;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(180, 80, 255, .25);

}

.logo{
    
    margin-top:12px;

    font-family:'Cinzel',serif;

    font-size:48px;
    font-weight:700;
    line-height:.9;

   background:linear-gradient( to bottom, #fff6b3 0%, #ffd54a 20%, #ffbf00 45%, #ffb300 60%, #f58c00 100% );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:
        drop-shadow(0 0 10px rgba(168,85,247,.5))
        drop-shadow(0 0 25px rgba(168,85,247,.25));
}

.links{

  margin-top:25px;

  display:flex;
  flex-direction:column;
  gap:14px;

  position:relative;
  z-index:1;

}

.link-btn{
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: #fff;
    padding: 11px 25px;
    border-radius: 24px;
    background: linear-gradient(180deg, #c954ff 0%, #a425ff 55%, #7f0dff 100%);
    border: 2px solid rgba(255, 190, 255, .45);
    
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}

.link-btn::before{
    content:'';

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:45%;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.22),
        transparent
    );

    poPoppins-events:none;
}

.link-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(255,120,255,.9),
        0 0 50px rgba(190,60,255,.7),
        inset 0 2px 0 rgba(255,255,255,.3);
}

.link-btn:hover{

  transform:translateY(-3px);

  box-shadow:
  0 0 35px rgba(220,90,255,.45);

}

.icon{
  width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #fff;
    color: #7d1cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
}

.text{
  flex:1;
  text-align: left;
  font-family:'Poppins',sans-serif;
}

.title{

  font-weight:700;
  font-size:1rem;

}

.sub{

  font-size:.8rem;

  color:rgba(255,255,255,.85);

}

.arrow{

  font-size:1.2rem;

  color:#fff;

}

.chat-button{

  width:100%;

  margin-top:8px;

  padding:18px;

  border:none;

  border-radius:22px;

  background:
  linear-gradient(
  180deg,
  #cb5cff,
  #8d16ff
  );

  color:#fff;

  font-size:17px;

  font-weight:800;

  cursor:poPoppins;

  border:2px solid rgba(255,120,255,.35);

  box-shadow:
  0 0 30px rgba(220,80,255,.35);

}

.chat-button:hover{

  box-shadow:
  0 0 45px rgba(220,80,255,.55);

}

.social{

  margin-top:25px;

  display:flex;
  justify-content:center;
  gap:12px;

}

.social a{

  width:42px;
  height:42px;

  border-radius:50%;

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

  text-decoration:none;

  color:#fff;

  background:
  rgba(130,30,255,.25);

  border:1px solid rgba(255,255,255,.12);

}

.social a:hover{

  background:
  rgba(190,70,255,.45);

}

.footer-text{

  margin-top:22px;

  text-align:center;

  color:rgba(255,255,255,.55);

  font-size:.8rem;

}
.mb-0{
	margin-bottom:0px!important
}
.mt-0{
	margin-top:0px!important
}

#heyo-widget-button,
.heyo-widget-button,
.heyo-bubble,
.heyo-launcher,
[id*="heyo"],
[class*="heyo"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  poPoppins-events:none!important;
}

@media(max-width:480px){
    .logo{
    
    margin-top:12px;

    font-family:'Cinzel',serif;

    font-size:48px;
    font-weight:700;
    line-height:.9;

    background:linear-gradient( to bottom, #fff6b3 0%, #ffd54a 20%, #ffbf00 45%, #ffb300 60%, #f58c00 100% );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:
        drop-shadow(0 0 10px rgba(255,204,51,.35))
        drop-shadow(0 0 25px rgba(255,204,51,.15));
}

  body{
    padding:12px;
  }

  .profile-card{
    padding:22px;
  }

  .profile-img{
    width:100px;
    height:100px;
  }

  .name{
    font-size:1.7rem;
  }
  

		
		.main-title{
		font-weight: 800!important;
		}
		
		.message-btn{
		    padding: 8px 33px !important;
		}

}

.small-title{

    font-family:'Poppins',sans-serif;
    font-size:45px;
    font-weight:800;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:0px;

    text-shadow:
        0 4px 0 rgba(0,0,0,.4),
        0 10px 20px rgba(0,0,0,.6);

    margin:0;

}
.main-title{

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

    font-size:60px;

    font-weight:800;

    line-height:.9;

    text-transform:uppercase;

    letter-spacing:-3px;
		 background: linear-gradient(180deg, #ffffff 0%, #fec726 20%, #ce9c0b 45%, #ffc10a 70%, #deb72a 100%);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
	background-clip:text;

	margin:0;

		}

.message-btn{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin: 10px auto;
    padding:20px;

    border-radius:22px;
    text-decoration:none;
	background: linear-gradient(135deg, #2c1751, #6e03d4, #D8B4FE);
    border: 2px solid rgba(195, 76, 255, .8);
    box-shadow: 0 0 25px #7f2fff, inset 0 2px 10px #7f2fff;
    transition: all .3s ease;
    color: #fff;
}

.message-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);
    animation:shine 3s infinite;
}

.message-btn:hover{
    transform:translateY(-3px) scale(1.02);
	box-shadow: 0 0 35px rgba(0, 240, 255, 0.7), 0 0 70px rgba(210, 76, 255, 0.4);
   
}

.message-btn .title{
    font-size:2rem;
    font-weight:900;
    line-height:1;
    color:#ffffff;
    text-transform:uppercase;

    text-shadow:
        0 2px 6px rgba(0,0,0,.35);
}

.message-btn .subtitle{
    font-size:.95rem;
    font-weight:600;
    color:rgba(255,255,255,.95);
    text-transform:uppercase;
}

@keyframes shine{
    0%{left:-120%;}
    100%{left:150%;}
}

.message-btn i{
    font-size:42px;
}

.msg-title{
    font-size:1.8rem;
    font-weight:900;
    line-height:1;
}

.msg-sub{
    font-size:1rem;
    opacity:.9;
}

.contact-links{

    margin-top:15px;

    display:flex;
    flex-direction:column;
    gap:14px;

    max-height:0;
    overflow:hidden;

    opacity:0;

    transition:
        max-height .6s ease,
        opacity .4s ease;

}

.contact-links.show{

    max-height:800px;

    opacity:1;

}

/* =========================
   TRUST SECTION
========================= */

.trust-section{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:10px 0;
    padding:10px 0;
}

.trust-item{
    flex:1;
    text-align:center;
}

.trust-divider{
    width:1px;
    height:80px;
    background:rgba(255, 255, 255, 0.17);
}

.trust-icon{
    font-size:28px;
    margin-bottom:10px;
}

.gold{
    color:#ffc52b;
}

.purple{
    color:#7f2fff;
}

.trust-value{
    font-size:20px;
    font-weight:800;
    line-height:1;
}

.trust-label{
    margin-top:8px;
    font-size:.7rem;
    color:#d4cde3;
    line-height:1.4;
    text-transform:uppercase;
}

/* =========================
   COMMUNITY CARD
========================= */

.community-card{
    margin-top:25px;
    padding:22px;
    border-radius:24px;

    background: rgb(168 85 247 / 10%);
    border: 1px solid rgba(180, 80, 255, .18);

  

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);
}

.community-left{
    display:flex;
    gap:15px;
    align-items:center;
}

.fb-circle{
    width:58px;
    height:58px;
    min-width:58px;

    border-radius:50%;
    background:#1877f2;

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

    color:#fff;
    font-size:30px;
}

.community-title{
    font-size:1.2rem;
    font-weight:800;
    color:#fff;
}

.community-text{
    margin-top:5px;
    color:#cfc8df;
    line-height:1.5;
    font-size:.9rem;
}

.community-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    gap:15px;
}

.avatars{
    display:flex;
    align-items:center;
}

.avatars img{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid #8f16ff;
    margin-left:-8px;
}

.avatars img:first-child{
    margin-left:0;
}

.avatar-badge{
    margin-left:10px;
    font-size:.8rem;
    font-weight:700;
    color:#fff;
}

.join-btn{
    text-decoration:none;

    display:flex;
    align-items:center;
    gap:8px;

    padding:12px 20px;

    border-radius:14px;

    color:#fff;
    font-weight:700;

    background: linear-gradient(185deg, #2c1751, #6e03d4, #D8B4FE)

    transition:.3s;
}

.join-btn:hover{
    transform:translateY(-2px);

    box-shadow:
    0 0 25px rgba(200,80,255,.45);
}

/* =========================
   FREE PLAY CARD
========================= */

.freeplay-card{
    margin-top:22px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:16px 18px;

    border-radius:18px;

    background:rgb(168 85 247 / 10%);

    border:1px solid rgba(180,80,255,.15);
}

.freeplay-icon{
    color:#c084fc;
    font-size:28px;
}

.freeplay-title{
    font-size:1.05rem;
    font-weight:800;
    color:#fff;
}

.freeplay-sub{
    margin-top:4px;
    font-size:.7rem;
    color:#c084fc;
}

/* MOBILE */

@media(max-width:480px){

    .community-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .join-btn{
        width:100%;
        justify-content:center;
    }

    .trust-value{
        font-size:22px;
    }

    .trust-label{
        font-size:.62rem;
    }
}

.profile-card{
    position:relative;
    overflow:hidden;
}

.profile-card::before{
    content:'';
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(20,0,60,.45),
            rgba(5,0,25,.65)
        );

    z-index:0;
}

.card-bg{
    position:absolute;
    inset:0;
	opacity: .3;


    width:100%;
    height:100%;

    object-fit:contain;   /* show full image */
    object-position:center top;

    z-index:0;
}

.profile,
.cta-wrapper,
.footer-text{
    position:relative;
    z-index:1;
}

.community-card{
    margin-top:18px;
    padding:16px;
    border-radius:20px;

    background:rgb(168 85 247 / 10%);
    border:1px solid rgba(180,80,255,.18);
}

.community-top{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.fb-circle{
    width:48px;
    height:48px;
    min-width:48px;

    border-radius:50%;
    background:#1877f2;

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

    color:#fff;
    font-size:24px;
}

.community-title{
    font-size:1rem;
    font-weight:800;
    line-height:1.2;
}

.community-text{
    margin-top:4px;
    font-size:.82rem;
    color:#d6d0e5;
    line-height:1.4;
}

.community-bottom{
    margin-top:12px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.avatars{
    display:flex;
    align-items:center;
}

.avatars img{
    width:32px;
    height:32px;

    border-radius:50%;
    border:2px solid #6e03d4;

    margin-left:-6px;
}

.avatars img:first-child{
    margin-left:0;
}

.avatars span{
    margin-left:10px;
    font-size:.85rem;
    font-weight:700;
}

.join-btn{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:8px;

    font-size:.9rem;
    font-weight:700;

    text-decoration:none;
    color:#fff;

    background:linear-gradient(185deg, #2c1751, #6e03d4, #D8B4FE);
}

.contact-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px);

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

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:99999;
}

.contact-modal.show{
    opacity:1;
    visibility:visible;
}

.contact-modal-content{
    width:min(92%,480px);

    background:
    linear-gradient(
        180deg,
        #130033,
        #070015
    );

    border-radius:30px;

    padding:22px;

    border:1px solid rgba(220,120,255,.15);

    box-shadow:
    0 0 50px rgba(180,40,255,.45);

    position:relative;

    animation:popupIn .3s ease;
}

@keyframes popupIn{
    from{
        transform:scale(.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.popup-title{
    text-align:center;
    color:#fff;
    font-size:1.5rem;
    font-weight:800;
    margin-bottom:18px;
}

.close-modal{
    position:absolute;
    top:12px;
    right:12px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:#fff;

    cursor:poPoppins;
}
.contact-modal .contact-links{
    display:flex !important;
    flex-direction:column;

    max-height:none !important;
    overflow:visible !important;
    opacity:1 !important;

    gap:14px;
    margin-top:15px;
}
.contact-btn{
    display:flex;
    align-items:center;
    gap:16px;

    padding: 7px 11px;
    border-radius:11px;

    text-decoration:none;
    color:#fff;

    background:linear-gradient(180deg, #f3e8ff 0%, #31d01e 30%, #7f2fff 65%, #7f2fff 100%);
}

.contact-icon{
        width: 41px;
    height: 41px;
    border-radius: 50%;
    background: #fff;
    color: #8c1cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.contact-content{
    flex:1;
}

.contact-title{
    font-size: 1rem;
    font-weight: 600;
}

.contact-subtitle{
    font-size:.85rem;
    opacity:.9;
}

.contact-arrow{
    font-size:1.4rem;
}

.rating-star {
    color: #FFD700;
    font-size: 1rem;
}
 #heyo-widget-button,
	  .heyo-widget-button,
	  .heyo-bubble,
	  .heyo-launcher,
	  [id*="heyo"],
	  [class*="heyo"] {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	  }