body {margin:0;background:#020617;color:#fff;font-family:'Inter';}

/* LOADER */
#loader {position:fixed;width:100%;height:100%;background:#020617;display:flex;justify-content:center;align-items:center;z-index:9999;}
.spinner {width:50px;height:50px;border:4px solid #1e293b;border-top:4px solid #7c3aed;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin {100%{transform:rotate(360deg);}}

/* HEADER */
.header {position:sticky;top:0;background:rgba(2,6,23,0.6);backdrop-filter:blur(12px);}
.nav-container {display:flex;justify-content:space-between;padding:15px 20px;align-items:center;}
.logo {font-weight:700;background:linear-gradient(135deg,#22d3ee,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav-links a {margin:0 15px;color:#cbd5f5;text-decoration:none;}


/* PRIMARY BUTTON */
.btn,
.btn-nav {
  background: linear-gradient(135deg,#22d3ee,#7c3aed);
  color: #FFFFFF; /* 🔥 FIX: dark text for contrast */
  font-weight: 600;

  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  cursor: pointer;

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

  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.btn:hover,
.btn-nav:hover {
  box-shadow: 0 0 25px rgba(124,58,237,0.6);
  transform: translateY(-2px);
}

/* SECONDARY BUTTON */
.btn.secondary {
  background: transparent;
  border: 1px solid #1e293b;
  color: #cbd5f5;
}



.menu-toggle {display:none;}
.social-icons a {margin-right:10px;color:#94a3b8;}

/* HERO */
.hero {height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.gradient {position:absolute;width:200%;height:200%;background:radial-gradient(circle,#7c3aed,transparent),radial-gradient(circle,#22d3ee,transparent);filter:blur(80px);animation:move 12s infinite alternate;}
@keyframes move {0%{transform:translate(-20%,-20%);}100%{transform:translate(20%,20%);}}
.hero-content {text-align:center;}
.hero h1 {font-size:60px;background:linear-gradient(135deg,#22d3ee,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
#gridCanvas {position:absolute;width:100%;height:100%;opacity:.15;}

/* SECTIONS */
.section {padding:80px;text-align:center;}
.grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.card {padding:20px;background:#0f172a;border-radius:15px;transition:.3s;}
.card:hover {transform:translateY(-10px);}

/* TOKEN */
.chart-container {width:300px;margin:40px auto;}
.legend div {margin:8px;}
.legend span {display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;}

/* SOCIAL */
.social-large a {margin:10px;font-size:24px;color:#94a3b8;}

/* REVEAL */
.reveal {opacity:0;transform:translateY(40px);transition:1s;}
.reveal.active {opacity:1;transform:none;}

@media(max-width:768px){
  .menu-toggle{display:block;}
  .nav-links{display:none;position:absolute;width:100%;top:60px;background:#020617;text-align:center;}
}


/* TIMELINE CONTAINER */
.timeline {
  position: relative;
  margin-top: 80px;
  padding: 40px 0;
}

/* CENTER LINE */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(#22d3ee,#7c3aed);
  transform: translateX(-50%);
  transition: height 1s ease;
}

/* ITEMS */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
}

/* CONTENT CARD */
.timeline-content {
  background: rgba(15,23,42,0.6);
  border: 1px solid #1e293b;
  padding: 20px;
  border-radius: 15px;
  transition: 0.3s;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(124,58,237,0.2);
}

/* DOT */
.timeline-dot {
  position: absolute;
  top: 25px;
  left: 100%;
  width: 14px;
  height: 14px;
  background: #7c3aed;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 15px rgba(124,58,237,0.8);
}

.timeline-item.right .timeline-dot {
  left: 0%;
}

/* TEXT */
.timeline-content h3 {
  color: #22d3ee;
  margin-bottom: 8px;
}

.timeline-content p {
  color: #cbd5f5;
  font-size: 14px;
}

/* MOBILE */
@media(max-width:768px){
  .timeline-item {
    width: 100%;
    left: 0 !important;
    text-align: left;
    padding-left: 60px;
  }

  .timeline-dot {
    left: 20px !important;
  }

  .timeline-line {
    left: 20px;
  }
}