/* ---------- Base ---------- */
  :root{
    --bg1:#061017;
    --bg2:#063b2b;
    --glass: rgba(255,255,255,0.06);
    --accent:#00f2b3;
    --accent-2:#00c2ff;
    --card: rgba(255,255,255,0.04);
    --muted: rgba(255,255,255,0.7);
    --radius:16px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
  body{
    color: white;
    min-height:100vh;
    margin:0;
    background:
      radial-gradient(circle at center, rgba(0,255,177,0.12) 0%, rgba(0,255,177,0.02) 40%, transparent 70%),
      linear-gradient(180deg, var(--bg1), var(--bg2));
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* wrapper centered + padding (responsive) */
  .wrap{
    max-width:90%;
    margin: 0 auto;
    padding:20px;
    
  }

  /* ---------- Header ---------- */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 18px;
    border-radius:14px;
    background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 30px rgba(2,8,10,0.6);
    gap:12px;
    flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:12px}
  /*.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#002}*/
  .site-title img{width: 19em;}
  nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
  .nav-link:hover{color:#fff;background:rgba(255,255,255,0.02)}

  /* ---------- Hero ---------- */
  /* keep single-column hero, centered */
  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-top:20px;
  }

  .hero-card1{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: auto;
    border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
    padding: 8px 12px;
  }

  /* responsive headline: clamp keeps it reasonable on small screens */
  .hero-card1 h1{
    color: white;
    margin: 6px 0;
    font-size: clamp(1.8rem, 6vw, 6.5rem); /* responsive */
    line-height: 1.04;
  }
  #cry{ color:var(--accent) }
/* ---------- Floating Coins Animation ---------- */
.animate{
  position: relative;
  width: 100%;
  height: 0;
}

/* Common coin style */
.animate img{
  position: absolute;
  opacity: 0.9;
}

/* Left coin (TRX) */
#trxc{
  width: 120px;              /* coin size */
  height: 120px;
  left: 202px;
  top: -52px;
  animation: floatLeft 4s ease-in-out infinite;
}

/* Right coin (BTC) */
#btcc{
  width: 200px;              /* coin size */
  height: 200px;
  right: 106px;
  top: -150px;
  animation: floatRight 4.5s ease-in-out infinite;
}

/* Up–Down smooth animation */
@keyframes floatLeft{
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-20px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes floatRight{
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(25px) rotate(-8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ---------- Mobile adjustment ---------- */
@media (max-width: 768px){
  .animate img{
    width: 40px;
    height: 40px;
  }

  #trxc{ width: 12%; height: auto; left: -30px; top: -90px; }
  #btcc{ width: 25%; height: auto; right: -30px; top: -60px; }
}







  .hero p{color:rgba(255,255,255,0.85);margin:6px 0 18px;font-size:clamp(1rem,2.2vw,1.5rem)}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .btn{padding:12px 18px;border-radius:12px;border:0;font-weight:700;cursor:pointer}
  .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#002;box-shadow:0 10px 30px rgba(0,242,179,0.08)}
  .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

  /* ---------- Wallet card (hidden on small to keep hero focus) ---------- */
  .wallet{padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px)}
  .bal{font-size:44px;font-weight:700;text-align:center;color:#fff;margin:8px 0}
  .small{color:rgba(255,255,255,0.7);font-size:13px}

  /* ---------- Stats ---------- */
  .stats{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
  .stat{flex:1 1 140px;background:rgba(255,255,255,0.03);padding:14px;border-radius:12px;text-align:center}
  .stat h3{margin:0;color:var(--accent)}
  .stat p{margin:6px 0 0;color:var(--muted)}

  /* ---------- Top traders marquee ---------- */
  .marquee{margin-top:20px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:12px;border-radius:12px;overflow:hidden}
  .marquee .track{display:flex;gap:22px;white-space:nowrap;animation:scroll 16s linear infinite}
  @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  .trade-chip{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;background:rgba(0,0,0,0.15);border-radius:999px;font-weight:600;color:#e8fff7}

  /* ---------- Token sale ---------- */
  .sale{display:flex;gap:12px;align-items:center;margin-top:18px}
  .progress{flex:1;height:14px;background:rgba(255,255,255,0.03);border-radius:10px;overflow:hidden}
  .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%}
  .sale .meta{min-width:120px;text-align:right;color:var(--muted);font-weight:700}

  /* ---------- TOP HITS (responsive adjustments) ---------------- */
  .tophits{
      width: 100%;
  overflow-x: auto;
    background-color: rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-items: center;
    border-radius:12px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.05);
    margin-top:2rem;
    max-width: 100%;
    width: 100%;
    padding: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  }

  .tophits table{
      width:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
      border-collapse: collapse;
  }
  .tophits table tr{ height: 3.2em; }

  #theading{
      background-color: rgb(0 204 176);
      color: white;
      font-size: 1.1em;
  }
  .toplist{ text-align:center; font-size:1.2rem; margin-bottom:.6rem; }

  #stillon{
      background: #00fd5266;
      padding: 0.15em 0.9em;
      border-radius: 12px;
      border: 1px solid #00ff12;
      font-weight:700;
  }

  /* ---------- Features grid ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:18px;
  }
  .card{
    display: flex;
    flex-direction: row;
    background:rgba(255,255,255,0.02);
    padding:14px;border-radius:12px;align-items:center;gap:12px;
  }

  .card img{
    width: 6em;
    height: 6em;
    object-fit:contain;
  }

  .card .points{ display:flex;flex-direction:column; }

  /* ---------- Footer ---------- */
  footer{margin-top:34px;padding:16px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));text-align:center;color:var(--muted)}

  /* ---------- Modal (login/signup) ---------- */
  .modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:40}
  .modal{width:360px;background:linear-gradient(180deg, rgb(29 182 106), #063b2b);border-radius:14px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,0.7)}
  .form-group{margin-top:12px}
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"]{
    width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.3);color:#fff;outline:none;
  }
  .otp-row{display:flex;gap:8px;align-items:center;margin-top:10px}
  .otp-btn{padding:10px 12px;border-radius:10px;background:var(--accent);border:0;color:#002;font-weight:700;cursor:pointer}

  /* ---------- Responsive rules ---------- */
  @media (max-width:1100px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .card img{width:5.2em;height:5.2em}
    .hero-card1 h1{font-size: clamp(1.8rem, 7vw, 3.8rem) }
  }
  @media (max-width:760px){
    header{padding:12px;gap:8px}
    .brand {font-size:16px}
    .site-title img {width: 10em;}
    nav{gap:8px; z-index: 999;}
    .hero-card1 h1{font-size: clamp(1.6rem, 8vw, 2.6rem)}
    .grid{grid-template-columns:1fr;gap:12px}
    .tophits{margin-top:1rem}
    .tophits table tr{ height: 3.2rem;}
    .tophits table td, .tophits table th{ font-size:0.95rem; padding:6px 6px;}
    .card img{width:4.4em;height:4.4em}
  }

  /* ---------- Hamburger ---------- */
.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index: 999;
}

.hamburger span{
  width:26px;
  height:3px;
  background:#fff;
  border-radius:3px;
  z-index: 999;
}

/* ---------- Mobile Nav ---------- */
@media (max-width:768px){
  nav{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:linear-gradient(180deg, rgba(6,16,23,0.98), rgba(6,59,43,0.98));
    border-radius:0 0 18px 18px;
    flex-direction:column;
    gap:14px;
    padding:18px;
    display:none;
    box-shadow:0 20px 40px rgba(0,0,0,0.6);
    z-index:100;
    z-index: 999;
  }

  nav.active{
    display:flex;
    z-index: 999;
  }

  .hamburger{
    display:flex;
    
  }
}

/* -------------steps */

  /* ================ NAMESPACE: stem-3parts ================ */
    #stem-3parts-root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;padding:80px 24px;background:#000;color:#fff}

    .stem-wrap{max-width:1260px;margin:0 auto}

    /* ---------- Happy Members + Rating ---------- */
    .stem-members-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:64px}
    .stem-members-left{display:flex;align-items:center;gap:18px}
    .stem-member-avatars{display:flex;align-items:center;gap: -12px;padding-left:2px}
    .stem-avatar{
      width:48px;height:48px;border-radius:50%;border:3px solid #000;box-shadow:0 0 0 2px rgba(0,0,0,0.6);
      display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;
      background:linear-gradient(90deg,#20e6d9,#b8ff2a);
      transform:translateX(0);
    }
    .stem-avatar:nth-child(2){transform:translateX(-12px);z-index:3}
    .stem-avatar:nth-child(1){transform:translateX(-6px);z-index:4}
    .stem-avatar:nth-child(3){transform:translateX(-18px);z-index:2}
    .stem-avatar-plus{width:54px;height:54px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);background:#0c0c0c;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
    .stem-members-text{margin-left:-10px;font-size: small;}
    .stem-members-title{font-size:20px;font-weight:700;line-height:1}
    .stem-members-sub{opacity:.7;font-size:14px;margin-top:4px}

    .stem-rating-box{
      background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.02));
      border-radius:20px;padding:18px 22px;display:flex;align-items:center;gap:18px;min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,0.6)
    }
    .stem-rating-score{font-weight:800;font-size:34px;min-width:48px;text-align:center}
    .stem-rating-stars{display:flex;flex-direction:column;gap:4px}
    .stem-stars-row{display:flex;align-items:center;gap:6px}
    .stem-star{width:22px;height:22px}
    .stem-rating-sub{font-size:13px;opacity:.75;margin-top:4px}

    /* ---------- Stats cards ---------- */
    .stem-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:56px 0 80px}
    .stem-stat-card{
      background:linear-gradient(180deg,rgba(10,30,26,0.6),rgba(0,0,0,0.75));
      border-radius:14px;padding:34px 26px;min-height:120px;box-shadow: inset 0 -30px 80px rgba(0,0,0,0.4);
    }
    .stem-stat-num{font-size:40px;font-weight:800;margin-bottom:8px}
    .stem-stat-sub{opacity:.77;font-size:15px}

    /* ---------- Testimonials slider ---------- */





    

    /* entrance animation */
    .stem-anim{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.28,1)}
    .stem-anim.in-view{opacity:1;transform:translateY(0)}

    /* responsive */
    @media (max-width:1000px){
      .stem-test-heading{font-size:36px}
      .stem-stats-grid{grid-template-columns:repeat(2,1fr)}
      .stem-slide{min-width:100%} /* show one slide at a time on small screens */
    }
    @media (max-width:560px){
      .stem-stats-grid{grid-template-columns:1fr}
      .stem-members-row{flex-direction:column;align-items:flex-start;gap:12px;        margin-top: 30%;}
      .stem-rating-box{align-self:flex-start}
      .stem-test-heading{font-size:28px}
    }


/* -------------------------------------------------- */
#stem-footer-root{
 /* background:radial-gradient(circle at top,#111,#000); */
 color:#fff;
 padding:120px 80px 40px;
 font-family:Inter;
}

/* GRID */
.stem-footer-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:50px;
 align-items:start;
}

/* LOGO */
.stem-footer-logo{
 font-size:78px;
 font-weight:800;
 background:linear-gradient(90deg,#00ffe1,#b7ff00);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.stem-footer-tagline{margin-top:10px;font-size:20px;opacity:.8}

/* COMMUNITY */
.stem-footer-right{text-align:right}
.stem-footer-title{font-size:20px;margin-bottom:20px}

.stem-footer-icons a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:42px;height:42px;
 border-radius:50%;
 border:1px solid #333;
 margin-left:14px;
 color:#fff;
 font-size:18px;
 text-decoration:none;
 transition:.3s;
}
.stem-footer-icons a:hover{
 background:#b7ff00;
 color:#000;
}

/* BOTTOM BAR */
.stem-footer-bottom{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-top:100px;
 font-size:15px;
 opacity:.7;
}
.stem-footer-links a{
 margin-left:30px;
 color:#fff;
 text-decoration:none;
}
.stem-footer-links a:hover{color:#b7ff00}

@media(max-width:900px){
 .stem-footer-grid{grid-template-columns:1fr}
 .stem-footer-right{text-align:left;margin-top:40px}
 .stem-footer-bottom{flex-direction:column;gap:20px}
}


/* ------------------------ */
#stem-root{font-family:Inter;color:#fff}

/* HEADINGS */
.stem-small{margin-top: 4em;color:#aaa;position:relative;padding-left:18px}
.stem-small:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(#00fff0,#b6ff00)}
.stem-title{font-size:48px;margin:15px 0 60px}

/* HOW IT WORKS */
.stem-steps{display:flex;gap:30px;flex-wrap:wrap}
.stem-step-card{flex:1;min-width:260px;border-radius:24px;padding:40px;background:linear-gradient(135deg,#0af0b76b, #ffffff00)}
.stem-main-card{background:rgb(0 204 176);color:#000}
.stem-step{font-size:26px;font-weight:700;margin-bottom:20px}
.stem-btn{margin-top:40px;padding:15px 30px;border-radius:30px;border:none;background:#ffffff;font-weight:600}


/* FAQ */
.stem-faq-grid{display:grid;}
.stem-faq-item{background:linear-gradient(135deg,#ffffff45, #ffffff45);border-radius:18px;padding:20px;margin-bottom:15px;cursor:pointer}
.stem-faq-item p{max-height:0;overflow:hidden;transition:.4s}
.stem-faq-item.active p{max-height:150px;margin-top:12px}

@media(max-width:900px){
.stem-review{min-width:100%}
.stem-faq-grid{grid-template-columns:1fr}
.stem-title{font-size:34px}
}