*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#000;
  color:white;
  font-family:'Poppins',sans-serif;
}


/* NAVBAR */

.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:72px;

  padding:0 18px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  background:
  rgba(0,0,0,.82);

  backdrop-filter:blur(16px);

  border-bottom:
  1px solid rgba(255,255,255,.06);

  z-index:9999;
}

.nav-left{

  display:flex;

  align-items:center;

  gap:12px;
}

.logo{

  width:42px;
  height:42px;

  object-fit:contain;
}

.nav-text h1{

  font-size:22px;
}

.nav-text span{

  font-size:11px;

  color:#888;
}

.nav-btn{

  width:42px;
  height:42px;

  border:none;

  border-radius:14px;

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

  color:white;

  font-size:16px;
}


/* MAIN */

.main-container{

  padding:90px 16px 110px;

  background:
  radial-gradient(
    circle at top,
    rgba(13,13,16,.84),
    rgba(0,0,0,.95) 70%
  );
}


/* HERO */

.support-hero{

  position:relative;

  min-height:320px;

  overflow:hidden;

  border-radius:28px;

  background:
  url("https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=1600&auto=format&fit=crop")
  center/cover;

  margin-bottom:24px;
}

.hero-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.9),
    rgba(0,0,0,.25)
  );
}

.hero-content{

  position:relative;

  z-index:2;

  padding:28px;

  max-width:600px;
}

.hero-tag{

  display:inline-block;

  background:#41ff7c;

  color:black;

  padding:10px 18px;

  border-radius:100px;

  font-size:12px;

  font-weight:700;

  margin-bottom:18px;
}

.hero-content h1{

  font-size:42px;

  line-height:1.1;

  margin-bottom:14px;
}

.hero-content p{

  color:#ddd;

  line-height:1.7;

  margin-bottom:24px;
}

.hero-btn{

  border:none;

  padding:14px 24px;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #00ff99,
    #00cc77
  );

  color:black;

  font-weight:700;

  cursor:pointer;
}


/* SUPPORT GRID */

.support-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:16px;

  margin-bottom:24px;
}

.support-card{

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

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

  border-radius:24px;

  padding:24px 18px;
}

.support-icon{

  width:60px;
  height:60px;

  border-radius:18px;

  display:flex;

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

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

  margin-bottom:16px;
}

.support-icon i{

  font-size:22px;

  color:#00ff99;
}

.support-card h3{

  margin-bottom:10px;
}

.support-card p{

  color:#aaa;

  font-size:14px;

  line-height:1.7;
}


/* COMMUNITY */

.community-box{

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

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

  border-radius:28px;

  padding:24px;

  margin-bottom:24px;
}

.community-box h2{

  margin-bottom:10px;
}

.community-box p{

  color:#aaa;

  margin-bottom:20px;
}

.community-buttons{

  display:flex;

  gap:14px;

  flex-wrap:wrap;
}

.community-btn{

  padding:14px 20px;

  border-radius:16px;

  text-decoration:none;

  font-weight:600;

  color:white;
}

.discord-btn{

  background:#5865F2;
}

.telegram-btn{

  background:#229ED9;
}


/* FAQ */

.faq-box{

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

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

  border-radius:28px;

  padding:24px;
}

.faq-box h2{

  margin-bottom:20px;
}

.faq-item{

  margin-bottom:20px;
}

.faq-item h3{

  margin-bottom:8px;

  font-size:16px;
}

.faq-item p{

  color:#aaa;

  line-height:1.7;

  font-size:14px;
}


/* FOOTER */

/* FOOTER */

.site-footer {

  margin-top: 20px;

  padding: 60px 20px 120px;

  background:
    linear-gradient(
      to bottom,
      #050505,
      #000
    );

  border-top:
    1px solid rgba(255,255,255,.06);

  color: white;
}

.site-footer {
  
  padding: 30px 20px 100px;
  
  text-align: center;
}
/* TOP */

.footer-top {

  display: grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap: 40px;

  margin-bottom: 40px;
}


/* BRAND */

.footer-brand h2 {

  font-size: 28px;

  margin-bottom: 14px;

  font-weight: 700;
}

.footer-brand p {

  color: #999;

  line-height: 1.8;

  font-size: 14px;

  max-width: 320px;
}

.footer-logo {

  width: 58px;

  margin-bottom: 14px;
}


/* LINKS */

.footer-links {

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.footer-links h3 {

  margin-bottom: 8px;

  font-size: 18px;
}

.footer-links a {

  color: #888;

  text-decoration: none;

  font-size: 14px;

  transition: .25s;
}

.footer-links a:hover {

  color: #00ff99;
}


/* SOCIALS */

.footer-socials {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-bottom: 35px;
}

.footer-socials a {

  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: flex;

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

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

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

  color: white;

  text-decoration: none;

  transition: .25s;
}

.footer-socials a:hover {

  background: #00ff99;

  color: black;

  transform: translateY(-3px);
}


/* PAYMENTS */

.footer-payments {

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

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

  border-radius: 22px;

  padding: 24px;

  text-align: center;

  margin-bottom: 35px;
}

.footer-payments p {

  color: #bbb;

  margin-bottom: 18px;

  font-size: 15px;
}

.payment-logos {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;
}

.payment-logos img {

  height: 28px;

  object-fit: contain;

  opacity: .9;
}


/* BOTTOM */

.footer-bottom {

  text-align: center;

  border-top:
    1px solid rgba(255,255,255,.05);

  padding-top: 24px;
}

.footer-bottom p {

  color: #aaa;

  margin-bottom: 8px;

  font-size: 14px;
}

.footer-bottom small {

  color: #666;

  font-size: 12px;
}


/* MOBILE */

@media(max-width:700px) {

  .footer-top {

    grid-template-columns: 1fr;

    gap: 30px;
  }

  .footer-brand p {

    max-width: 100%;
  }

  .footer-links {

    gap: 10px;
  }

  .payment-logos {

    gap: 12px;
  }

  .payment-logos img {

    height: 24px;
  }

}


/* TABBAR */

.tabbar{

  position:fixed;

  left:0;
  right:0;
  bottom:0;

  width:100%;
  height:74px;

  background:
  rgba(5,5,5,.96);

  backdrop-filter:blur(16px);

  border-top:
  1px solid rgba(255,255,255,.06);

  display:flex;

  justify-content:space-around;

  align-items:center;

  z-index:9999;
}

.tab-item{

  flex:1;

  height:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:5px;

  text-decoration:none;

  color:#777;
}

.tab-item i{

  font-size:20px;
}

.tab-item span{

  font-size:11px;
}

.tab-item.active{

  color:#00ff99;
}


/* MOBILE */

@media(max-width:700px){

  .support-grid{

    grid-template-columns:1fr;
  }

  .hero-content h1{

    font-size:30px;
  }
}

.support-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.hero-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}