:root{

  --bg-dark:#020012;
  --bg-card:#070018;

  --purple:#8f1fff;
  --purple-light:#d24cff;
  --purple-dark:#5600e8;

  --gold:#ffc52b;
  --gold-light:#ffe78a;

  --text:#ffffff;
  --muted:#cfc8df;

  --shadow:0 25px 60px rgba(0,0,0,.55);

}

*{
  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:#fff;

  background:
    radial-gradient(circle at top,
      #17003f 0%,
      #090021 35%,
      #020012 100%);

  overflow-x:hidden;
}

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

.profile-card{

  width:min(100%,450px);

  background:
  linear-gradient(
  180deg,
  rgba(8,0,35,.96),
  rgba(2,0,18,.98)
  );

  border-radius:32px;

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

  padding:28px;

  box-shadow:
  var(--shadow),
  0 0 50px rgba(165,30,255,.18);

  position:relative;
  overflow:hidden;

}

.profile-card::before{

  content:"";

  position:absolute;
  inset:0;

  background:

  radial-gradient(
  circle at top center,
  rgba(255,196,43,.12),
  transparent 20%
  ),

  radial-gradient(
  circle at center,
  rgba(170,30,255,.08),
  transparent 55%
  );

  poPoppins-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:2.5rem;

  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,
    rgba(30,0,80,.95),
    rgba(15,0,40,.95)
    );

    border:2px solid rgba(190,100,255,.4);

    color:#ffffff;

    font-weight:800;

    box-shadow:
    0 0 20px rgba(180,80,255,.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){

  body{
    padding:12px;
  }

  .profile-card{
    padding:22px;
  }

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

  .name{
    font-size:1.6rem;
  }
  

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

}

.small-title{

    font-family:'Poppins',sans-serif;
    font-size:38px;
    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:59px;

    font-weight:800;

    line-height:.9;

    text-transform:uppercase;

    letter-spacing:-3px;

    
		background: linear-gradient(to bottom, #fff, #d7f0ff, #79d4ff, #00a6ff, #06f );

			-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;

    width:100%;
    padding:20px;

    border-radius:22px;
    text-decoration:none;

    background:linear-gradient(
        180deg,
        #fff4c7 0%,
        #ffd86b 15%,
        #ffb82e 45%,
        #ff8400 75%,
        #ff5c00 100%
    );

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

    box-shadow:
        0 0 20px rgba(255,170,0,.6),
        0 0 40px rgba(255,120,0,.4),
        inset 0 2px 10px rgba(255,255,255,.35);

    transition:all .3s ease;
	
	color: #fff0f0;
}

.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 30px rgba(255,180,0,.8),
        0 0 60px rgba(255,120,0,.5);
}

.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:2rem;
    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:#ff8400;
}

.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:
    linear-gradient(
        180deg,
        rgba(20,0,55,.92),
        rgba(8,0,30,.92)
    );

    border:1px solid rgba(210,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( 180deg, #fff4c7 0%, #ffd86b 15%, #ffb82e 45%, #ff8400 75%, #ff5c00 100% );

    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:
    rgba(14,0,45,.75);

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

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

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

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

/* 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: .4;


    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:rgba(15,0,45,.85);
    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 #a81cff;

    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( 180deg, #fff4c7 0%, #ffd86b 15%, #ffb82e 45%, #ff8400 75%, #ff5c00 100% )
}

.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,
        #d96bff,
        #b734ff 50%,
        #9020ff
    );
}

.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;
	  }