@font-face{
  font-family:'GeneralSans';

  src:url('../assets/fonts/GeneralSans-Regular.woff2')
  format('woff2');

  font-weight:400;
}

@font-face{
  font-family:'GeneralSans';

  src:url('../assets/fonts/GeneralSans-Semibold.woff2')
  format('woff2');

  font-weight:600;
}

@font-face{
  font-family:'GeneralSans';

  src:url('../assets/fonts/GeneralSans-Bold.woff2')
  format('woff2');

  font-weight:700;
}

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

body{
  font-family:'GeneralSans',sans-serif;
  background:#020814;
  color:white;
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:0;

  background:
  radial-gradient(circle at 72% 35%,
  rgba(61,108,255,.10),
  transparent 22%),

  radial-gradient(circle at 58% 52%,
  rgba(57,255,170,.04),
  transparent 28%),

  linear-gradient(
  180deg,
  #020814 0%,
  #020816 100%);

  box-shadow:
  inset 0 0 180px rgba(0,0,0,.42);

  z-index:0;
}

.noise{
  position:fixed;
  inset:0;

  opacity:.018;

  pointer-events:none;

  z-index:2;

  background-image:
  url("../assets/noise.png");

  mix-blend-mode:soft-light;
}

.container{
  position:relative;
  z-index:5;

  max-width:1280px;

  margin:auto;

  padding:28px;
}

.topbar{
  margin-bottom:60px;
}

.brand-row{
  display:flex;
  align-items:center;
  gap:14px;
}

/* FIXED LOGO */
.logo-main{
  height:36px;
  width:auto;

  display:block;
  object-fit:contain;
}

.logo-poly{
  height:30px;
  width:auto;
  opacity:.9;
}

.divider{
  opacity:.22;
  font-size:16px;
}

.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:20px;
}

.left{
  position:relative;
  z-index:5;
}

.left h1{
  font-size:74px;
  line-height:.92;
  font-weight:700;
  letter-spacing:-3px;

  overflow:visible;
  white-space:nowrap;
}

.left h1 span{
  background:
  linear-gradient(
    90deg,
    #3d6fff,
    #5b8cff,
    #3d6fff
  );

  background-size:200%;

  background-clip:text;
  -webkit-background-clip:text;

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

  padding-right:8px;

  display:inline-block;

  animation:gradientMove 6s linear infinite;
}

.green-line{
  width:260px;
  height:4px;

  margin:24px 0;

  border-radius:999px;

  background:
  linear-gradient(to right,
  #b5ff5f,
  transparent);
}

.left p{
  font-size:22px;
  line-height:1.45;

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

  max-width:500px;
}

.left strong{
  color:#b5ff5f;
}

.instant{
  margin-top:24px;

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

  font-size:16px;
}

.button{
  margin-top:38px;

  width:205px;
  height:62px;

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

  border-radius:20px;

  text-decoration:none;

  color:white;

  font-size:20px;
  font-weight:600;

  background:
  linear-gradient(
    180deg,
    #4d7cff,
    #2f57ff
  );

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

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.16),
  0 0 35px rgba(61,108,255,.20);

  transition:.35s ease;
}

.button:hover{
  transform:
  translateY(-3px)
  scale(1.02);

  box-shadow:
  0 0 55px rgba(61,108,255,.35);
}

.right{
  position:relative;
  height:560px;

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

.worldmap{
  position:absolute;

  width:560px;

  left:50%;
  top:45%;

  transform:translate(-50%,-50%);

  opacity:.04;
}

.glow{
  position:absolute;

  width:500px;
  height:500px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(181,255,95,.06),
  rgba(61,108,255,.04),
  transparent 68%);

  filter:blur(55px);
}

.light-rays{
  position:absolute;

  width:620px;
  height:620px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  background:
  conic-gradient(
    from 0deg,
    transparent,
    rgba(57,255,170,.025),
    transparent,
    rgba(61,108,255,.03),
    transparent
  );

  filter:blur(65px);

  animation:spin 30s linear infinite;
}

.ring{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

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

.ring1{
  width:280px;
  height:280px;

  animation:spin 20s linear infinite;
}

.ring2{
  width:360px;
  height:360px;

  animation:spinReverse 26s linear infinite;
}

.ring3{
  width:460px;
  height:460px;

  opacity:.28;

  animation:spin 36s linear infinite;
}

.trophy{
  position:absolute;

  width:235px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  filter:
  brightness(.92)
  contrast(1.02)
  saturate(.92)

  drop-shadow(0 0 35px rgba(255,215,0,.18))
  drop-shadow(0 0 80px rgba(57,255,170,.05));

  animation:trophyFloat 6s ease-in-out infinite;

  z-index:5;
}

.card{
  position:absolute;

  width:155px;
  height:96px;

  padding:14px;

  border-radius:22px;

  overflow:hidden;

  backdrop-filter:blur(22px);

  background:
  linear-gradient(
    180deg,
    rgba(18,32,64,.78),
    rgba(7,12,22,.96)
  );

  border:
  1px solid rgba(120,170,255,.14);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.06),
  inset 0 0 30px rgba(255,255,255,.015),
  0 0 35px rgba(61,108,255,.06);

  z-index:10;

  animation:float 6s ease-in-out infinite;
}

.card::before{
  content:"";

  position:absolute;

  width:180px;
  height:120px;

  right:-100px;
  top:-60px;

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

  opacity:.25;
}

.green{
  border:
  1px solid rgba(181,255,95,.18);
}

.card-topline{
  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:1px;

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

.card-dot{
  position:absolute;

  right:12px;
  top:12px;

  width:5px;
  height:5px;

  border-radius:50%;

  background:
  rgba(57,255,170,.38);
}

.card small{
  position:relative;

  z-index:2;

  font-size:9px;

  letter-spacing:2px;

  opacity:.32;

  font-weight:600;
}

.card h3{
  position:relative;

  z-index:2;

  margin-top:14px;

  font-size:30px;

  font-weight:700;

  letter-spacing:-2px;
}

.card1{
  top:160px;
  left:40px;
}

.card2{
  bottom:120px;
  left:60px;
}

.card3{
  top:180px;
  right:40px;
}

.card4{
  bottom:120px;
  right:40px;
}

.bottom-section{
  margin-top:20px;

  display:grid;

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

  gap:18px;
}

.live-feed,
.stats-card,
.steps-card{
  position:relative;

  padding:24px;

  border-radius:24px;

  background:
  linear-gradient(
    180deg,
    rgba(8,18,34,.84),
    rgba(5,10,18,.96)
  );

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

  overflow:hidden;

  transition:.35s ease;
}

.live-feed:hover,
.stats-card:hover,
.steps-card:hover{
  transform:translateY(-3px);

  border-color:
  rgba(61,108,255,.18);
}

.section-label{
  font-size:10px;

  letter-spacing:2px;

  opacity:.32;

  margin-bottom:10px;
}

.bottom-section h3{
  font-size:22px;

  margin-bottom:22px;

  font-weight:600;
}

.feed-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.feed-item{
  display:grid;

  grid-template-columns:
  1fr auto auto;

  align-items:center;

  gap:12px;

  padding:14px 16px;

  border-radius:16px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.022),
    rgba(255,255,255,.012)
  );

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

  transition:.3s ease;
}

.feed-item:hover{
  border-color:
  rgba(61,108,255,.12);
}

.feed-user{
  font-weight:600;

  opacity:.88;

  overflow:hidden;
  text-overflow:ellipsis;

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

  text-decoration:none;

  transition:.25s ease;
}

.feed-user:hover{
  color:#9db7ff;
}

.feed-amount{
  font-weight:700;
}

.amount-100{
  color:#7f9fff;
}

.amount-500{
  color:#8fd0ff;
}

.amount-1000{
  color:#b7ef7b;
}

.amount-5000{
  color:#ffd86b;
}

.feed-time{
  opacity:.32;

  font-size:12px;

  min-width:50px;

  text-align:right;
}

.green-text{
  color:#b7ef7b;
}

.blue-text{
  color:#7f9fff;
}

.stats-grid{
  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:14px;
}

.stat{
  padding:16px;

  border-radius:16px;

  background:
  rgba(255,255,255,.018);
}

.stat-number{
  font-size:24px;

  font-weight:700;

  margin-bottom:5px;
}

.stat-text{
  opacity:.45;

  font-size:13px;
}

.steps{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.step{
  display:flex;
  gap:14px;
}

.step-number{
  min-width:30px;
  height:30px;

  border-radius:50%;

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

  background:
  rgba(61,108,255,.10);

  font-size:14px;
}

.step-title{
  font-weight:600;

  margin-bottom:4px;
}

.step-text{
  opacity:.5;

  font-size:13px;

  line-height:1.5;
}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }

  100%{
    transform:translateY(0px);
  }

}

@keyframes trophyFloat{

  0%{
    transform:
    translate(-50%,-50%)
    translateY(0px);
  }

  50%{
    transform:
    translate(-50%,-50%)
    translateY(-6px);
  }

  100%{
    transform:
    translate(-50%,-50%)
    translateY(0px);
  }

}

@keyframes spin{

  from{
    transform:
    translate(-50%,-50%)
    rotate(0deg);
  }

  to{
    transform:
    translate(-50%,-50%)
    rotate(360deg);
  }

}

@keyframes spinReverse{

  from{
    transform:
    translate(-50%,-50%)
    rotate(360deg);
  }

  to{
    transform:
    translate(-50%,-50%)
    rotate(0deg);
  }

}

@keyframes gradientMove{

  from{
    background-position:0%;
  }

  to{
    background-position:200%;
  }

}

/* OPTIONAL INFO STYLES */
.info-box{
  margin-top:26px;

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

  max-width:560px;
}

.info-item{
  display:flex;
  align-items:flex-start;
  gap:10px;

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

  font-size:15px;
  line-height:1.5;
}

.info-icon{
  color:#b5ff5f;

  font-size:14px;

  margin-top:2px;

  min-width:14px;
}