body {
      font-family: Inter, system-ui, sans-serif;
      background: #000;
      color: #fff;
      overflow-x: hidden;
    }
    
    .glass {
      background: rgba(15, 20, 35, .55);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, .08);
    }
    
    .grad {
      background: linear-gradient(135deg, #38bdf8, #a855f7, #ec4899);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: .35
    }
    
    .orb1 {
      width: 420px;
      height: 420px;
      background: #38bdf8;
      top: -160px;
      left: -160px
    }
    
    .orb2 {
      width: 360px;
      height: 360px;
      background: #a855f7;
      bottom: -160px;
      right: -120px
    }
    
    .orb3 {
      width: 300px;
      height: 300px;
      background: #ec4899;
      top: 40%;
      right: 10%
    }
    
    .stat {
      transition: .35s
    }
    
    .stat:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(56, 189, 248, .25)
    }
    
    .fade {
      opacity: 0;
      transform: translateY(20px);
      transition: .7s ease
    }
    
    .fade.show {
      opacity: 1;
      transform: none
    }
    
    .timeline {
      position: relative;
      padding-left: 40px;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #38bdf8, #a855f7, #ec4899);
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 32px;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -32px;
      top: 6px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #38bdf8, #a855f7);
      border: 3px solid #000;
      box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    }
    
    .timeline-item.completed::before {
      background: linear-gradient(135deg, #22c55e, #10b981);
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    }
    
    .timeline-item.active::before {
      background: linear-gradient(135deg, #38bdf8, #0ea5e9);
      animation: pulse-dot 2s infinite;
    }
    
    .timeline-item.active::before {
      background: linear-gradient(135deg, #38bdf8, #0ea5e9);
      animation: pulse-dot 2s infinite;
    }
    
    @keyframes pulse-dot {
      
      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
      }
      
      50% {
        box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
      }
    }
    
    .badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
    }
    
    .badge-warning {
      background: rgba(251, 191, 36, 0.2);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, 0.3);
    }
    
    .badge-info {
      background: rgba(56, 189, 248, 0.2);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }
    
    .badge-success {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }
    
    .timeframe-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #9ca3af;
    }
    
    .timeframe-btn:hover {
      background: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.3);
      color: #38bdf8;
    }
    
    .timeframe-btn.active {
      background: rgba(56, 189, 248, 0.2);
      border-color: rgba(56, 189, 248, 0.5);
      color: #38bdf8;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
    }
    
    @media (max-width: 768px) {
      .timeline {
        padding-left: 30px;
      }
      
      .timeline::before {
        left: 8px;
      }
      
      .timeline-item::before {
        left: -26px;
        width: 12px;
        height: 12px;
      }
    }

 /* =====================================================
   FORCE NAV ACTIONS ALIGNMENT (NO HTML CHANGE)
   ===================================================== */

/* Paksa semua tombol nav ke kanan */
nav .max-w-7xl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* Bungkus semua <a> (Trade + List Stake) jadi satu baris kanan */
nav .max-w-7xl > a,
nav .max-w-7xl > a + a {
  justify-self: end;
}

/* Jarak antar tombol */
nav .max-w-7xl > a + a {
  margin-left: 14px;
}