/* Inter Home Elegent Template Style  */

 .offcanvas.offcanvas-start{
background: linear-gradient(to bottom,  rgba(9,29,27,1) 0%,rgba(9,21,20,1) 100%) !important;
    }
 /*    .offcanvas.offcanvas-end:after{
         content: '';
    opacity: 0.2;
   width: 100%;
  height: 50%;
    border-radius: 100%;
    position: absolute;
background: radial-gradient(circle, rgb(0, 217, 192) 0%, transparent 70%);
    right: 21.3px;
    top: 8.3px;
    transform: translate(-50%, -50%);
}*/
body {
  margin: 0;
  background: #0a0a0a !important;
   
  color: white;
}
header{
    z-index: 9;
    position: absolute;    position: absolute;
    width: 100%;
}
    header .links a {
         color: rgb(156 163 175);
        font-weight: normal;
    }

        header .links a:hover { 
        color:#fff; 
    }
header .batn{
    display: flex;
    gap: 0.5rem;
}
header .batn a.btn { 
    border:rgba(255, 255, 255, 0.2) solid 1px;
    border-radius: 36px;
    background: none !important;
    color: #fff;
    outline: none !important;

}
header .batn a.btn:hover { 
    border-color:#cdfe00 ; 
    color: #cdfe00 ;
}
header .batn a.btn.work-with-us{
 background: #cdfe00 !important;  
color: #000;
}
/* 🔥 Animated Gradient Background */
.inter-hero {
  position: relative;
  min-height: 90vh;
  padding: 120px 18%;
 
  /*
  background: radial-gradient(circle at 10% 10%, #082b2c, transparent),
              radial-gradient(circle at 90% 90%, #002020, transparent),
              linear-gradient(120deg, #021818, #000000);*/
  overflow: hidden;
}
.inter-hero:before {
    content: '';
    opacity: 0.2;
    width: 800px;
    height: 800px;
    border-radius: 100%;
    position: absolute;
background: radial-gradient(circle, #cdfe00 0%, transparent 70%);
    left: 21.3px;
    top: 8.3px;
    transform: translate(-50%, -50%);
}
.inter-hero-bg{ 
    background: linear-gradient(90deg, transparent, rgba(205, 254, 0, 0.1), transparent);
    animation: scan 3s linear infinite;
 position: absolute;
 top: 0px;
 height: 0px;
 width: 100%;
 height: 100%;
}
/*.inter-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle, rgba(17,255,199,0.15), transparent 50%);
  animation: pulse 10s infinite linear;
}*/

@keyframes pulse{
  0%{transform:translate(-10%, -10%) scale(1);}
  50%{transform:translate(10%, 10%) scale(1.3);}
  100%{transform:translate(-10%, -10%) scale(1);}
}

/* 🌫 gradient overlay */
.inter-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.8));
}

/* 📌 Text area */
.inter-hero-content{
  position:relative;
  max-width:800px;
  z-index:2;
}
.inter-overlay{
     background-image: linear-gradient(rgba(0, 217, 192, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 192, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}
.eyebrow{
  color:#cdfe00;
  letter-spacing:2px;
  font-size:12px;
}

h1{
      font-size: 7vw;
    line-height: 6.5vw;
  margin:10px 0 20px;
  font-weight:800;
}

.accent{
  color:#cdfe00;
}

.subtext{
  max-width:700px;
     color: rgb(156 163 175);
  line-height: 1.4;
    font-size: 1.3rem;
  margin-bottom:30px;
}

/* 🚀 Buttons */
.btn-primary{
  background:#cdfe00;
  color:#001310;
   padding:1rem 2rem;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
}

.btn-ghost{
  border:1px solid #cdfe0069;
  padding:1rem 2rem;
  border-radius:40px;
  text-decoration:none;
  color:white;
  margin-left:10px;
}
.btn-clubpartner{
    background: none;
    border:0px;
    margin-left: 10px;
    color: rgb(156 163 175);

}
.btn-clubpartner svg{
    width:20px;
    margin-left:10px;
}
/* 🧊 Floating Cards */
.floating-card{
  position:absolute;
  background:#111313;
  border:1px solid #292b2b;
  border-radius:18px;
  padding:14px 18px;
  width:210px;
  animation: float 6s infinite ease-in-out;
  z-index: -1;
}
.floating-card .g-radient{
     background: linear-gradient(135deg, #cdfe00 0%, #556901 100%);
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: inline-block;

}
.floating-card .label{
    display: flex;
    gap: 0.5rem;
    align-items: center;
 color: #8e949f;
 font-size: 14px;
}
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
  100%{transform:translateY(0)}
}

.floating-card.left{
 left: 10%;
  top: 20%;
}

.floating-card.right{
  right:6%;
  top:22%;
}
.floating-card.leftbottom{
  left:10%;
  bottom:28%;
}

/* mini bar chart */
.mini-bars{
  display:flex;
  gap:6px;
  margin-top:8px;
align-items: baseline;
}
/* STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: 80px;
 
  padding-top: 32px;
}

.stat h3 {
  font-size: 3vw;
  color: #cdfe00;
  margin-bottom: 10px;
}

.stat p {
  font-size: 1.2rem;
  color: #9aa4a6;
}

.mini-bars span{
  width: 20%;
background: linear-gradient(to bottom,  rgba(11,34,45,1) 0%, #cdfe00 100%); 
  height:10px;
      border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  /*animation: bars 1.4s infinite ease-in-out;*/
}

.mini-bars span:nth-child(2){height:18px;animation-delay:.1s}
.mini-bars span:nth-child(3){height:26px;animation-delay:.2s}
.mini-bars span:nth-child(4){height:18px;animation-delay:.3s}
.mini-bars span:nth-child(5){height:12px;animation-delay:.4s}

@keyframes bars{
  0%,100%{opacity:.4;transform:scaleY(.6)}
  50%{opacity:1;transform:scaleY(1)}
}

/* pills */
.pill{
  background:#cdfe00;
  padding:6px 12px;
  display:inline-block;
  border-radius:20px;
  font-size:12px;
  color:#000;
  margin-top:6px;
}

.pill.outline{
  background:transparent;
  border:1px solid #cdfe00;
  color:#cdfe00;
}

.grid-cols-5 {
    display: grid;
    margin-top: 10px;
    gap: 0.25rem;
    grid-template-columns: repeat(5, minmax(0px, 1fr));
}
.h-2.rounded-full{
    width:0.5rem ;
    height: 0.5rem;
    border-radius: 100%;
    background-color:#cdfe00;
}
.h-2.rounded-full.bg-one{
    background-color: #677f05;
}
.h-2.rounded-full.bg-two{
  background-color: rgb(156 173 87);
}
.h-2.rounded-full.bg-three{
    background-color: rgb(99 119 15);
}


@media (max-width: 650px) {
    header .bar{
        min-width: 20px !important;
    }
      header .logo img {
    
    height: 30px !important;
  }
     header .batn{
        display: flex;
        align-items: center;
        gap: 0.5rem;
     }
    header .batn a.btn{
        display: none;
    }
    header .batn a.btn.work-with-us{
        display: block;
    }

    h1 {
  font-size: 14vw;
  line-height: 14.5vw;
}
.inter-hero {
  position: relative;
  min-height: 90vh;
  padding: 90px 30px;
/*padding-top: 140px;*/
}
.floating-card{
    display: none !important;
}
.subtext {
   font-size: 1.1rem;
  }
.btn-primary  { 
  padding: 0.6rem 0.5rem;
  border-radius: 40px;  
  display: inline-block;
  font-size: 0.7rem;
 
}
 .btn-ghost{ 
  padding: 0.9rem 0.5rem;
  border-radius: 40px;  
  display: inline-block;
  font-size: 0.7rem;
  margin:0px !important;
  
}
.btn-primary  svg{
width: 12px;
}  
.stat h3 {
  font-size: 8vw;
}
.stat p {
  font-size: 1.0rem;
}
.stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  margin-top: 20px;
  padding-top: 20px;
  text-align: center;
  gap: 1rem;
}
.cta-row{
    align-items: center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* default desktop behavior – optional */
.cta-row a{
  white-space:nowrap;
}
 .cta-row a:nth-child(1),
  .cta-row a:nth-child(2){
    flex:0 0 calc(50% - 6px);
    text-align:center;
  }

  /* third button on new line – full width */
  .cta-row a:nth-child(3){
    flex:0 0 100%;
    text-align:left;
    margin:0px;

  }
/*
.floating-card.left {
  left: 8%;
  top: 9%;
  display: block !important;
}*/

}