<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IDNGold — Indonesian Gold-Backed NFTs</title>
    <meta name="description" content="IDNGold - Own physical Indonesian gold through blockchain NFTs. Each NFT backed 1:1 by 1 gram of certified gold. Mint gold-backed NFTs using IDNGOLD tokens." />
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Prevent caching for development -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <!-- Redemption Page Specific Styles -->
    <style>
      /* Redemption Flow Styles */
      .redemption-flow {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .flow-step {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 2rem;
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        position: relative;
        transition: all 0.3s ease;
      }
      
      .flow-step:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(212,175,55,0.15);
        border-color: rgba(212,175,55,0.4);
      }
      
      .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #D4AF37, #B8941F);
        color: #000;
        font-weight: 700;
        font-size: 1.25rem;
        border-radius: 50%;
        flex-shrink: 0;
      }
      
      .step-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
        color: #D4AF37;
        font-size: 1.25rem;
        border-radius: 50%;
        flex-shrink: 0;
      }
      
      .flow-step h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 0.75rem 0;
        color: #D4AF37;
      }
      
      .flow-step p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 1rem 0;
        color: rgba(255,255,255,0.8);
      }
      
      .step-details {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
      }
      
      .detail-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        font-size: 0.875rem;
        border-radius: 20px;
        border: 1px solid rgba(212,175,55,0.2);
      }
      
      .flow-arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: #D4AF37;
        margin: 0.5rem 0;
      }
      
      /* Collection Option Styles */
      .collection-option {
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        transition: all 0.3s ease;
        max-width: 600px;
        margin: 2rem auto;
      }
      
      .collection-option:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(212,175,55,0.2);
        border-color: rgba(212,175,55,0.4);
      }
      
      .option-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
        color: #D4AF37;
        font-size: 2rem;
        border-radius: 50%;
        margin: 0 auto 1.5rem;
      }
      
      .collection-option h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        color: #D4AF37;
        text-align: center;
      }
      
      .collection-option p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 1.5rem 0;
        color: rgba(255,255,255,0.8);
        text-align: center;
      }
      
      .option-details h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 1.5rem 0 0.75rem 0;
        color: #fff;
      }
      
      .option-benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1.5rem;
        justify-content: center;
      }
      
      .option-benefits span {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        font-size: 0.875rem;
        border-radius: 20px;
        border: 1px solid rgba(212,175,55,0.2);
      }
      
      /* Timeline Styles */
      .timeline {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 2rem 0;
      }
      
      .timeline-item {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
      }
      
      .timeline-time {
        flex-shrink: 0;
        width: 180px;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
        color: #D4AF37;
        font-weight: 600;
        font-size: 0.875rem;
        border-radius: 8px;
        text-align: center;
        border: 1px solid rgba(212,175,55,0.2);
      }
      
      .timeline-content {
        flex: 1;
        background: rgba(26,26,26,0.6);
        padding: 1.5rem;
        border-radius: 12px;
        border-left: 3px solid #D4AF37;
      }
      
      .timeline-content h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
        color: #D4AF37;
      }
      
      .timeline-content p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
        color: rgba(255,255,255,0.8);
      }
      
      /* Responsive Design */
      @media (max-width: 768px) {
        .redemption-flow {
          gap: 1rem;
        }
        
        .flow-step {
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 1.5rem;
          gap: 1rem;
        }
        
        .flow-arrow {
          transform: rotate(90deg);
          margin: 1rem 0;
        }
        
        .collection-options {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }
        
        .timeline-item {
          flex-direction: column;
          gap: 1rem;
        }
        
        .timeline-time {
          width: 100%;
        }
      }
    </style>
    
    <!-- Mobile Hero Badge Adjustment -->
    <style>
      /* Mobile Hero Badge */
      @media (max-width: 768px) {
        .hero-badge {
          margin-top: 4rem; /* Add space when header is open */
          transition: margin-top 0.3s ease;
        }
        
        /* When navigation is active */
        .nav-active ~ main .hero-badge {
          margin-top: 1rem; /* Less space when nav is collapsed */
        }
        
        /* Header adjustments for mobile */
        .site-header {
          transition: transform 0.3s ease;
        }
        
        .nav-active .site-header {
          transform: translateY(-100%);
        }
        
        /* Mobile Navigation Toggle Button */
        .btn.btn-ghost {
          padding: 0.5rem !important;
          min-width: auto !important;
          width: 40px !important;
          height: 40px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        .btn.btn-ghost svg {
          width: 20px !important;
          height: 20px !important;
        }
      }
    </style>
    
    <!-- Footer Styles -->
    <style>
      /* Footer Styles */
      .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      .footer-brand-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      
      .footer-brand-info p {
        margin: 0;
        color: rgba(255,255,255,0.7);
        font-size: 0.875rem;
      }
      
      .contact-email {
        color: #D4AF37 !important;
        font-weight: 500;
      }
      
      .footer-legal {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
      }
      
      .footer-legal a {
        color: rgba(255,255,255,0.7);
        font-size: 0.875rem;
        transition: color 0.3s ease;
      }
      
      .footer-legal a:hover {
        color: #D4AF37;
      }
      
      /* Social Links in Footer Brand */
      .footer-brand .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
        justify-content: flex-start;
      }
      
      .footer-brand .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        border-radius: 50%;
        border: 1px solid rgba(212,175,55,0.2);
        transition: all 0.3s ease;
      }
      
      .footer-brand .social-links a:hover {
        background: rgba(212,175,55,0.2);
        transform: translateY(-2px);
      }
      
      /* Responsive Footer */
      @media (max-width: 768px) {
        .footer-bottom-content {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 1rem;
        }
        
        .footer-brand-info {
          align-items: center;
        }
        
        .footer-legal {
          justify-content: center;
        }
      }
    </style>
    
    <!-- Presale Link Styles -->
    <style>
      .presale-link {
        position: relative;
        color: #D4AF37;
        font-weight: 600;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
      }
      
      .presale-link::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
        z-index: -1;
        transition: all 0.3s ease;
      }
      
      .presale-link:hover {
        color: #FFFFFF;
        background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
        transform: translateY(-2px);
      }
      
      .presale-link:hover::before {
        background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(212,175,55,0.15));
      }
      
      /* Mobile Presale Link */
      @media (max-width: 768px) {
        .presale-link {
          background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
          border: 1px solid rgba(212,175,55,0.2);
          margin: 0.25rem 0;
          text-align: center;
        }
        
        .presale-link:hover {
          background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
        }
      }
    </style>
    
    <!-- Presale Page Styles -->
    <style>
      /* Presale Hero Section */
      .presale-hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      
      .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
        z-index: -2;
      }
      
      .gold-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23D4AF37" opacity="0.5"/></svg>');
        background-size: 50px 50px;
        animation: float 20s infinite linear;
        z-index: -1;
      }
      
      @keyframes float {
        0% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(180deg); }
        100% { transform: translateY(0) rotate(360deg); }
      }
      
      .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(212,175,55,0.1) 0%, rgba(10,10,10,0.8) 100%);
        z-index: -1;
      }
      
      .hero-content {
        text-align: center;
        max-width: 800px;
        padding: 2rem;
        z-index: 1;
      }
      
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(212,175,55,0.1);
        border: 1px solid rgba(212,175,55,0.3);
        color: #D4AF37;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        animation: pulse 2s infinite;
      }
      
      @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); }
        70% { box-shadow: 0 0 0 10px rgba(212,175,55,0); }
        100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
      }
      
      .hero-title {
        font-family: 'Inter', sans-serif;
        font-size: 3.5rem;
        font-weight: 800;
        color: #FFFFFF;
        margin: 0 0 1.5rem 0;
        line-height: 1.2;
      }
      
      .hero-subtitle {
        font-size: 1.25rem;
        color: rgba(255,255,255,0.8);
        margin: 0 0 2rem 0;
        line-height: 1.6;
      }
      
      /* Live Stats */
      .live-stats {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin: 2rem 0;
      }
      
      .stat-item {
        text-align: center;
      }
      
      .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: #D4AF37;
        margin-bottom: 0.5rem;
      }
      
      .stat-label {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }
      
      /* Countdown Timer */
      .countdown-container {
        margin: 3rem 0;
      }
      
      .countdown-title {
        font-size: 1.25rem;
        color: #D4AF37;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }
      
      .countdown-timer {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
      }
      
      .countdown-item {
        text-align: center;
        background: rgba(26,26,26,0.8);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 12px;
        padding: 1.5rem;
        min-width: 100px;
      }
      
      .countdown-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: #D4AF37;
        margin-bottom: 0.5rem;
        font-family: 'Inter', sans-serif;
      }
      
      .countdown-label {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      
      /* Progress Bar */
      .progress-container {
        max-width: 600px;
        margin: 3rem auto 0;
      }
      
      .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        color: rgba(255,255,255,0.7);
      }
      
      .progress-bar {
        height: 12px;
        background: rgba(26,26,26,0.5);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 6px;
        overflow: hidden;
      }
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #D4AF37, #B8941F);
        border-radius: 6px;
        transition: width 1s ease;
      }
      
      /* Presale Phases */
      .presale-phases {
        padding: 5rem 0;
        background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
      }
      
      .phases-timeline {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }
      
      .phase-item {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(26,26,26,0.6));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        transition: all 0.3s ease;
      }
      
      .phase-item:hover {
        transform: translateY(-2px);
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 8px 32px rgba(212,175,55,0.1);
      }
      
      .phase-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #D4AF37, #B8941F);
        color: #000;
        font-weight: 700;
        font-size: 1.25rem;
        border-radius: 50%;
        flex-shrink: 0;
      }
      
      .phase-content {
        flex: 1;
      }
      
      .phase-content h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 0.75rem 0;
        color: #D4AF37;
      }
      
      .phase-allocation {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.7);
        margin-bottom: 0.5rem;
      }
      
      .phase-price {
        font-size: 1.125rem;
        font-weight: 600;
        color: #FFFFFF;
        margin-bottom: 0.75rem;
      }
      
      .phase-status {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
      }
      
      .phase-status.active {
        background: rgba(212,175,55,0.2);
        color: #D4AF37;
        border: 1px solid rgba(212,175,55,0.3);
      }
      
      .phase-description {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.7);
        line-height: 1.5;
      }
      
      /* Purchase Section */
      .purchase-section {
        padding: 5rem 0;
      }
      
      .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }
      
      .payment-option {
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
      }
      
      .payment-option.active {
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 8px 32px rgba(212,175,55,0.1);
      }
      
      .payment-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(212,175,55,0.1);
      }
      
      .payment-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        font-size: 1.5rem;
        border-radius: 50%;
      }
      
      .payment-header h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #FFFFFF;
        flex: 1;
      }
      
      .payment-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        background: rgba(212,175,55,0.2);
        color: #D4AF37;
        border: 1px solid rgba(212,175,55,0.3);
      }
      
      .payment-content {
        padding: 1.5rem;
      }
      
      .payment-content p {
        color: rgba(255,255,255,0.8);
        margin-bottom: 1.5rem;
      }
      
      /* Wallet Address Section */
      .wallet-address-section {
        background: rgba(26,26,26,0.5);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1.5rem 0;
      }
      
      .wallet-address-section h4 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0 0 1rem 0;
      }
      
      .wallet-address {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: rgba(0,0,0,0.3);
        padding: 1rem;
        border-radius: 8px;
        margin: 1rem 0;
      }
      
      .wallet-address code {
        flex: 1;
        color: #D4AF37;
        font-family: monospace;
        font-size: 0.875rem;
        word-break: break-all;
      }
      
      .copy-btn {
        background: rgba(212,175,55,0.2);
        border: 1px solid rgba(212,175,55,0.3);
        color: #D4AF37;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .copy-btn:hover {
        background: rgba(212,175,55,0.3);
        transform: translateY(-1px);
      }
      
      .address-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: rgba(255,255,255,0.6);
        font-size: 0.875rem;
        margin-top: 0.5rem;
      }
      
      /* Conversion Calculator */
      .conversion-calculator {
        background: rgba(26,26,26,0.5);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1.5rem 0;
      }
      
      .conversion-calculator h4 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0 0 1rem 0;
      }
      
      .calculator-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .input-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      
      .input-group label {
        min-width: 120px;
        font-size: 0.875rem;
        color: rgba(255,255,255,0.8);
      }
      
      .input-group input {
        flex: 1;
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 6px;
        padding: 0.75rem;
        color: #FFFFFF;
        font-size: 1rem;
      }
      
      .input-suffix {
        font-size: 0.875rem;
        color: #D4AF37;
        min-width: 50px;
        text-align: right;
      }
      
      .conversion-arrow {
        text-align: center;
        color: #D4AF37;
        margin: 0.5rem 0;
      }
      
      .conversion-info {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(212,175,55,0.1);
      }
      
      .rate-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
      }
      
      /* Payment Methods Fiat */
      .payment-methods-fiat {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 1.5rem 0;
      }
      
      .method-option {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(26,26,26,0.5);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .method-option.active {
        border-color: rgba(212,175,55,0.4);
        background: rgba(212,175,55,0.1);
      }
      
      .method-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        border-radius: 50%;
      }
      
      .method-info h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0;
      }
      
      .method-info p {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.6);
        margin: 0;
      }
      
      /* Trial Phase Banner */
      .trial-phase-banner {
        background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(255,193,7,0.05));
        border: 1px solid rgba(255,193,7,0.2);
        border-radius: 8px;
        padding: 1rem;
        margin: 2rem 0;
        text-align: center;
      }
      
      .trial-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255,193,7,0.2);
        color: #FFC107;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
      }
      
      .trial-phase-banner p {
        color: rgba(255,255,255,0.8);
        margin: 0;
      }
      
      /* Trial Phase Disclaimer */
      .trial-disclaimer {
        background: rgba(255,193,7,0.05);
        border: 1px solid rgba(255,193,7,0.1);
        border-radius: 8px;
        padding: 1.5rem;
        margin: 2rem 0;
      }
      
      .trial-disclaimer h3 {
        color: #FFC107;
        margin: 0 0 1rem 0;
      }
      
      .trial-disclaimer ul {
        margin: 1rem 0;
        padding-left: 1.5rem;
      }
      
      .trial-disclaimer li {
        margin-bottom: 0.5rem;
        color: rgba(255,255,255,0.8);
      }
      
      /* Benefits Section */
      .benefits-section {
        padding: 5rem 0;
        background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
      }
      
      .benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
      }
      
      .benefit-card {
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
      }
      
      .benefit-card:hover {
        transform: translateY(-4px);
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 12px 40px rgba(212,175,55,0.2);
      }
      
      .benefit-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        font-size: 2rem;
        border-radius: 50%;
        margin: 0 auto 1.5rem;
      }
      
      .benefit-card h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0 0 1rem 0;
      }
      
      .benefit-card p {
        color: rgba(255,255,255,0.8);
        line-height: 1.6;
      }
      
      /* Security Section */
      .security-section {
        padding: 5rem 0;
      }
      
      .trust-badges {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
      }
      
      .trust-badge {
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
      }
      
      .trust-badge:hover {
        transform: translateY(-4px);
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 12px 40px rgba(212,175,55,0.2);
      }
      
      .badge-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        font-size: 2rem;
        border-radius: 50%;
        margin: 0 auto 1.5rem;
      }
      
      .trust-badge h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0 0 1rem 0;
      }
      
      .trust-badge p {
        color: rgba(255,255,255,0.8);
        line-height: 1.6;
      }
      
      /* FAQ Section */
      .faq-section {
        padding: 5rem 0;
        background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
      }
      
      .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .faq-item {
        background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(40,40,40,0.9));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        overflow: hidden;
      }
      
      .faq-item.active {
        border-color: rgba(212,175,55,0.4);
      }
      
      .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .faq-question:hover {
        background: rgba(212,175,55,0.05);
      }
      
      .faq-question h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0;
      }
      
      .faq-question i {
        color: #D4AF37;
        transition: transform 0.3s ease;
      }
      
      .faq-item.active .faq-question i {
        transform: rotate(180deg);
      }
      
      .faq-answer {
        padding: 0 1.5rem 1.5rem;
        color: rgba(255,255,255,0.8);
        line-height: 1.6;
        display: none;
      }
      
      .faq-item.active .faq-answer {
        display: block;
      }
      
      /* Responsive Design */
      @media (max-width: 768px) {
        .hero-title {
          font-size: 2.5rem;
        }
        
        .hero-subtitle {
          font-size: 1rem;
        }
        
        .live-stats {
          flex-direction: column;
          gap: 1rem;
        }
        
        .countdown-timer {
          flex-wrap: wrap;
          gap: 1rem;
        }
        
        .countdown-item {
          min-width: 80px;
          padding: 1rem;
        }
        
        .countdown-value {
          font-size: 2rem;
        }
        
        .phase-item {
          flex-direction: column;
          text-align: center;
        }
        
        .benefits-grid {
          grid-template-columns: 1fr;
        }
        
        .trust-badges {
          grid-template-columns: 1fr;
        }
        
        .payment-methods {
          gap: 1rem;
        }
        
        .calculator-inputs {
          gap: 0.5rem;
        }
        
        .input-group {
          flex-direction: column;
          align-items: stretch;
        }
        
        .input-group label {
          margin-bottom: 0.5rem;
          min-width: auto;
        }
        
        .conversion-arrow {
          transform: rotate(90deg);
          margin: 0.5rem 0;
        }
      }
    </style>
    
    <!-- Wallet Modal Styles -->
    <style>
      .wallet-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
      
      .wallet-modal.hidden {
        display: none;
      }
      
      .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(4px);
      }
      
      .modal-content {
        position: relative;
        background: linear-gradient(135deg, rgba(26,26,26,0.95), rgba(40,40,40,0.95));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        max-width: 500px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      }
      
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
      }
      
      .modal-header h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0;
      }
      
      .close-btn {
        background: none;
        border: none;
        color: rgba(255,255,255,0.6);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
      }
      
      .close-btn:hover {
        background: rgba(255,255,255,0.1);
        color: #FFFFFF;
      }
      
      .wallet-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .wallet-card {
        background: rgba(26,26,26,0.6);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      
      .wallet-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .wallet-card:hover {
        transform: translateY(-2px);
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 8px 24px rgba(212,175,55,0.1);
      }
      
      .wallet-card:hover::before {
        opacity: 1;
      }
      
      .wallet-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        border-radius: 50%;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
      }
      
      .wallet-name {
        font-size: 1rem;
        font-weight: 600;
        color: #FFFFFF;
        margin-bottom: 0.5rem;
      }
      
      .wallet-status {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        background: rgba(212,175,55,0.1);
        padding: 0.25rem 0.5rem;
        border-radius: 20px;
        display: inline-block;
      }
      
      .wallet-footer {
        text-align: center;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      .wallet-footer p {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        margin: 0;
        line-height: 1.4;
      }
      
      .wallet-connecting {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(8px);
      }
      
      .wallet-connecting.hidden {
        display: none;
      }
      
      .connecting-content {
        text-align: center;
        padding: 2rem;
      }
      
      .connecting-spinner {
        font-size: 3rem;
        color: #D4AF37;
        margin-bottom: 1.5rem;
      }
      
      .connecting-content h3 {
        font-size: 1.5rem;
        color: #FFFFFF;
        margin-bottom: 1rem;
      }
      
      .connecting-content p {
        color: rgba(255,255,255,0.6);
        font-size: 1rem;
      }
      
      @media (max-width: 768px) {
        .wallet-modal {
          padding: 1rem;
        }
        
        .wallet-grid {
          grid-template-columns: 1fr;
        }
        
        .modal-content {
          padding: 1.5rem;
        }
      }
    </style>
    
    <!-- Xendit Checkout Styles -->
    <style>
      .xendit-checkout {
        padding: 4rem 0;
        background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
        min-height: 100vh;
      }
      
      .xendit-checkout.hidden {
        display: none;
      }
      
      .checkout-container {
        max-width: 800px;
        margin: 0 auto;
        background: linear-gradient(135deg, rgba(26,26,26,0.95), rgba(40,40,40,0.95));
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      }
      
      .checkout-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
      
      .checkout-header h2 {
        font-size: 1.75rem;
        font-weight: 600;
        color: #D4AF37;
        margin: 0;
      }
      
      .checkout-summary {
        text-align: right;
      }
      
      .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }
      
      .summary-item span:first-child {
        color: rgba(255,255,255,0.6);
      }
      
      .summary-item span:last-child {
        color: #FFFFFF;
        font-weight: 600;
      }
      
      .payment-methods-section {
        margin-bottom: 2rem;
      }
      
      .payment-methods-section h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #FFFFFF;
        margin-bottom: 1.5rem;
      }
      
      .payment-methods-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }
      
      .payment-method-card {
        background: rgba(26,26,26,0.6);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      
      .payment-method-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .payment-method-card:hover {
        transform: translateY(-2px);
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 8px 24px rgba(212,175,55,0.1);
      }
      
      .payment-method-card:hover::before {
        opacity: 1;
      }
      
      .payment-method-card.active {
        border-color: rgba(212,175,55,0.6);
        background: rgba(212,175,55,0.1);
      }
      
      .payment-method-card.active::before {
        opacity: 1;
      }
      
      .method-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        border-radius: 50%;
        margin-bottom: 1rem;
        font-size: 1.25rem;
      }
      
      .method-info h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0 0 0.5rem 0;
      }
      
      .method-info p {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.6);
        margin: 0;
      }
      
      .method-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(212,175,55,0.2);
        color: #D4AF37;
        padding: 0.25rem 0.5rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
      }
      
      .payment-form-section {
        margin-bottom: 2rem;
      }
      
      .payment-form {
        display: none;
      }
      
      .payment-form.active {
        display: block;
      }
      
      .payment-form h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #D4AF37;
        margin-bottom: 1.5rem;
      }
      
      .bank-details {
        background: rgba(26,26,26,0.6);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 12px;
        padding: 1.5rem;
      }
      
      .bank-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
      
      .bank-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(212,175,55,0.1);
        color: #D4AF37;
        border-radius: 50%;
        font-size: 1.25rem;
      }
      
      .bank-info-text h4 {
        font-size: 1.125rem;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0 0 0.5rem 0;
      }
      
      .bank-info-text p {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.6);
        margin: 0.25rem 0;
      }
      
      .transfer-amount {
        margin-bottom: 1.5rem;
      }
      
      .transfer-amount label {
        display: block;
        font-size: 0.875rem;
        color: rgba(255,255,255,0.6);
        margin-bottom: 0.5rem;
      }
      
      .amount-display {
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        padding: 1rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: #D4AF37;
        text-align: center;
      }
      
      .transfer-instructions h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0 0 1rem 0;
      }
      
      .transfer-instructions ol {
        margin: 0;
        padding-left: 1.5rem;
      }
      
      .transfer-instructions li {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.8);
        margin-bottom: 0.5rem;
        line-height: 1.4;
      }
      
      .ewallet-form {
        background: rgba(26,26,26,0.6);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 12px;
        padding: 1.5rem;
      }
      
      .form-group {
        margin-bottom: 1.5rem;
      }
      
      .form-group label {
        display: block;
        font-size: 0.875rem;
        color: rgba(255,255,255,0.6);
        margin-bottom: 0.5rem;
      }
      
      .form-group input {
        width: 100%;
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: 8px;
        padding: 0.75rem;
        color: #FFFFFF;
        font-size: 1rem;
        transition: all 0.3s ease;
      }
      
      .form-group input:focus {
        outline: none;
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
      }
      
      .form-group input::placeholder {
        color: rgba(255,255,255,0.4);
      }
      
      .checkout-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      @media (max-width: 768px) {
        .checkout-container {
          padding: 1.5rem;
        }
        
        .checkout-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
        }
        
        .checkout-summary {
          text-align: left;
          width: 100%;
        }
        
        .payment-methods-grid {
          grid-template-columns: 1fr;
        }
        
        .checkout-actions {
          flex-direction: column;
        }
        
        .checkout-actions .btn {
          width: 100%;
        }
      }
    </style>
    
    <meta name="theme-color" content="#1a1a1a" />
    <meta property="og:title" content="IDNGold — Indonesian Gold-Backed NFTs" />
    <meta property="og:description" content="Own physical Indonesian gold through blockchain NFTs. Each IDNGOLD NFT backed 1:1 by real gold stored in certified vaults. Built on Sui Network." />
    <meta property="og:type" content="website" />
    <script type="module" crossorigin src="/assets/main-CQhFUc_t.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/style-p7cy0FAV.css">
  </head>
  <body>
    <header class="site-header">
      <div class="container nav">
        <a href="/" class="brand" aria-label="IDNGold Home">
          <img src="/idngold_icon.png" alt="IDNGold Icon" class="brand-icon">
          <img src="/idngold_text.png" alt="IDNGold" class="brand-text">
        </a>
        <nav class="nav-links" data-nav-menu>
          <a href="/">Home</a>
          <a href="/token_presale.html" class="presale-link">Presale</a>
          <a href="/buy">Buy IDNG</a>
          <a href="/utilities">RWA NFT & IDN MOVE</a>
          <a href="/redemption">Redemption</a>
          <a href="/faq">FAQ</a>
        </nav>
        <button class="btn btn-ghost" data-nav-toggle aria-label="Toggle navigation">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </header>
    
    <main id="main-content">
      <!-- Content will be loaded by router -->
    </main>
    
    <footer class="site-footer">
      <div class="container footer-content">
        <div class="footer-main">
          <div class="footer-grid">
            <div class="footer-brand">
              <div class="brand">
                <img src="/idngold_icon.png" alt="IDNGold Icon" class="brand-icon">
                <img src="/idngold_text.png" alt="IDNGold" class="brand-text">
              </div>
              <p class="footer-description">IDNGold brings the stability of gold to the digital economy through blockchain tokenization.</p>
              <div class="social-links">
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="Telegram"><i class="fab fa-telegram"></i></a>
                <a href="#" aria-label="Discord"><i class="fab fa-discord"></i></a>
                <a href="#" aria-label="Medium"><i class="fab fa-medium"></i></a>
              </div>
            </div>
            <div class="footer-links">
              <h3>Essential</h3>
              <ul>
                <li><a href="/buy">Buy IDNG</a></li>
                <li><a href="/redemption">Redemption</a></li>
                <li><a href="/tokenomics">Tokenomics</a></li>
                <li><a href="/faq">FAQ</a></li>
              </ul>
            </div>
            <div class="footer-links">
              <h3>Resources</h3>
              <ul>
                <li><a href="/resources">Whitepaper</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/ecosystem">Ecosystem</a></li>
                <li><a href="/security">Security</a></li>
              </ul>
            </div>
            <div class="footer-links">
              <h3>Advanced</h3>
              <ul>
                <li><a href="/utilities">Token Utilities</a></li>
                <li><a href="/governance">Governance</a></li>
                <li><a href="/roadmap">Roadmap</a></li>
                <li><a href="/team">Team</a></li>
              </ul>
            </div>
            <div class="footer-links">
              <h3>Community</h3>
              <ul>
                <li><a href="/community">Community</a></li>
                <li><a href="/compliance">Compliance</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="footer-bottom-content">
            <div class="footer-brand-info">
              <p>&copy; 2025 IDNGold. All rights reserved.</p>
              <p class="contact-email">support@idngold.com</p>
            </div>
            <div class="footer-legal">
              <a href="/compliance">Privacy Policy</a>
              <a href="/compliance">Terms of Service</a>
              <a href="/compliance">Risk Disclaimer</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
    
    
    <!-- Presale Page JavaScript -->
    <script>
      // Countdown Timer
      function updateCountdown() {
        // Check if countdown elements exist on this page
        const daysEl = document.getElementById('days');
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        const secondsEl = document.getElementById('seconds');

        if (!daysEl || !hoursEl || !minutesEl || !secondsEl) {
          console.log('DEBUG: Countdown elements not found on this page, skipping update');
          return;
        }

        const endDate = new Date('2025-10-31T23:59:59Z').getTime();
        const now = new Date().getTime();
        const timeLeft = endDate - now;

        if (timeLeft <= 0) {
          daysEl.textContent = '00';
          hoursEl.textContent = '00';
          minutesEl.textContent = '00';
          secondsEl.textContent = '00';
          return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        daysEl.textContent = days.toString().padStart(2, '0');
        hoursEl.textContent = hours.toString().padStart(2, '0');
        minutesEl.textContent = minutes.toString().padStart(2, '0');
        secondsEl.textContent = seconds.toString().padStart(2, '0');
      }
      
      // Update countdown every second
      setInterval(updateCountdown, 1000);
      updateCountdown(); // Initial call
      
      // Copy Address Function
      function copyAddress() {
        const address = '0x1234567890abcdef1234567890abcdef12345678';
        navigator.clipboard.writeText(address).then(() => {
          alert('Address copied to clipboard!');
        }).catch(err => {
          console.error('Failed to copy address: ', err);
        });
      }
      
      // Wallet Connection Functions
      function openWalletModal() {
        document.getElementById('walletModal').classList.remove('hidden');
      }
      
      function closeWalletModal() {
        document.getElementById('walletModal').classList.add('hidden');
      }
      
      function showWalletConnecting() {
        document.getElementById('walletModal').classList.add('hidden');
        document.getElementById('walletConnecting').classList.remove('hidden');
      }
      
      function hideWalletConnecting() {
        document.getElementById('walletConnecting').classList.add('hidden');
      }
      
      function connectWallet(walletType) {
        const walletInfo = document.getElementById('walletInfo');
        const walletAddress = document.getElementById('walletAddress');
        const walletBalance = document.getElementById('walletBalance');
        const connectBtn = document.getElementById('connectWallet');
        
        // Show connecting screen
        showWalletConnecting();
        
        // Simulate wallet connection based on type
        setTimeout(() => {
          let address, balance;
          
          switch(walletType) {
            case 'sui':
              address = '0x5a3b...9f2e';
              balance = '2,500.00 IDNGOLD';
              break;
            case 'suiet':
              address = '0x7d8c...3a1b';
              balance = '1,750.50 IDNGOLD';
              break;
            case 'martian':
              address = '0x9e2f...6c4d';
              balance = '3,200.00 IDNGOLD';
              break;
            case 'ethos':
              address = '0x2b7a...8f9e';
              balance = '950.75 IDNGOLD';
              break;
            default:
              address = '0x1234...5678';
              balance = '1,000.50 IDNGOLD';
          }
          
          walletAddress.textContent = address;
          walletBalance.textContent = balance;
          walletInfo.classList.remove('hidden');
          connectBtn.innerHTML = '<i class="fas fa-wallet"></i> ' + walletType.charAt(0).toUpperCase() + walletType.slice(1) + ' Connected';
          
          hideWalletConnecting();
          
          // Show success message
          connectBtn.style.background = 'linear-gradient(135deg, #10b981, #059669)';
          setTimeout(() => {
            connectBtn.style.background = '';
          }, 2000);
        }, 2000);
      }
      
      // Wallet Connection Mock
      const connectWalletBtn = document.getElementById('connectWallet');
      if (connectWalletBtn) {
        connectWalletBtn.addEventListener('click', function() {
          openWalletModal();
        });
      }
      
      // Xendit Checkout Functions
      function openXenditCheckout(amount, tokens) {
        const checkoutSection = document.getElementById('xenditCheckout');
        const checkoutAmount = document.getElementById('checkoutAmount');
        const checkoutTokens = document.getElementById('checkoutTokens');
        const transferAmount = document.getElementById('transferAmount');
        
        // Set amounts
        checkoutAmount.textContent = formatCurrency(amount) + ' IDR';
        checkoutTokens.textContent = tokens.toFixed(2) + ' IDNGOLD';
        transferAmount.textContent = formatCurrency(amount);
        
        // Show checkout section
        checkoutSection.classList.remove('hidden');
        
        // Scroll to top of checkout
        checkoutSection.scrollIntoView({ behavior: 'smooth' });
      }
      
      function closeXenditCheckout() {
        document.getElementById('xenditCheckout').classList.add('hidden');
      }
      
      function formatCurrency(amount) {
        return new Intl.NumberFormat('id-ID').format(amount);
      }
      
      function selectPaymentMethod(method) {
        // Update active payment method
        document.querySelectorAll('.payment-method-card').forEach(card => {
          card.classList.remove('active');
        });
        document.querySelector(`[data-method="${method}"]`).classList.add('active');
        
        // Show corresponding form
        document.querySelectorAll('.payment-form').forEach(form => {
          form.classList.remove('active');
        });
        document.getElementById(method + 'Form').classList.add('active');
      }
      
      function processPayment(method) {
        const confirmBtn = document.getElementById('confirmPayment');
        const originalContent = confirmBtn.innerHTML;
        
        // Show loading state
        confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        confirmBtn.disabled = true;
        
        // Simulate payment processing
        setTimeout(() => {
          let successMessage = '';
          
          switch(method) {
            case 'bank':
              successMessage = 'Bank transfer initiated! Please complete the transfer within 24 hours.';
              break;
            case 'ovo':
              successMessage = 'OVO payment successful! Tokens will be credited to your wallet.';
              break;
            case 'gopay':
              successMessage = 'GoPay payment successful! Tokens will be credited to your wallet.';
              break;
            case 'dana':
              successMessage = 'DANA payment successful! Tokens will be credited to your wallet.';
              break;
          }
          
          // Show success message
          alert(successMessage);
          
          // Reset button
          confirmBtn.innerHTML = '<i class="fas fa-check"></i> Payment Confirmed';
          confirmBtn.style.background = 'linear-gradient(135deg, #10b981, #059669)';
          
          // Close checkout after delay
          setTimeout(() => {
            closeXenditCheckout();
            confirmBtn.innerHTML = originalContent;
            confirmBtn.disabled = false;
            confirmBtn.style.background = '';
          }, 2000);
        }, 2000);
      }
      
      // Payment method selection
      document.addEventListener('DOMContentLoaded', function() {
        // Payment method cards
        document.querySelectorAll('.payment-method-card').forEach(card => {
          card.addEventListener('click', function() {
            const method = this.getAttribute('data-method');
            selectPaymentMethod(method);
          });
        });
        
        // Confirm payment button
        const confirmPaymentBtn = document.getElementById('confirmPayment');
        if (confirmPaymentBtn) {
          confirmPaymentBtn.addEventListener('click', function() {
            const activeMethodCard = document.querySelector('.payment-method-card.active');
            if (!activeMethodCard) return;
            const activeMethod = activeMethodCard.getAttribute('data-method');
            
            // Validate form based on method
            if (activeMethod === 'bank') {
              processPayment('bank');
            } else {
              // Validate e-wallet form
              const phoneInput = document.getElementById(activeMethod + 'Phone');
              const pinInput = document.getElementById(activeMethod + 'Pin');
              const codeInput = document.getElementById(activeMethod + 'Code');
              
              if (activeMethod === 'ovo') {
                if (!phoneInput.value) {
                  alert('Please enter your phone number');
                  return;
                }
              } else {
                if (!phoneInput.value || !pinInput.value) {
                  alert('Please enter your phone number and PIN');
                  return;
                }
              }
              
              processPayment(activeMethod);
            }
          });
        }
      });
      
      // Conversion Calculator
      const idrAmountInput = document.getElementById('idrAmount');
      const usdtAmountInput = document.getElementById('usdtAmount');
      const tokenAmountInput = document.getElementById('tokenAmount');
      
      if (idrAmountInput) {
        idrAmountInput.addEventListener('input', function() {
          const idrAmount = parseFloat(this.value) || 0;
          const usdtRate = 16500; // Updated IDR to USDT rate
          const tokenRate = 26000; // Mock rate
          
          const usdtAmount = idrAmount / usdtRate;
          const tokenAmount = idrAmount / tokenRate;
          
          usdtAmountInput.value = usdtAmount.toFixed(2);
          tokenAmountInput.value = tokenAmount.toFixed(2);
        });
      }
      
      // Fiat Purchase Mock
      const purchaseFiatBtn = document.getElementById('purchaseFiat');
      if (purchaseFiatBtn) {
        purchaseFiatBtn.addEventListener('click', function() {
          const idrAmount = parseFloat(idrAmountInput.value) || 0;
          
          if (idrAmount < 100000) {
            alert('Minimum purchase is 100,000 IDR');
            return;
          }
          
          // Calculate tokens
          const tokens = idrAmount / 26000;
          
          // Open Xendit checkout
          openXenditCheckout(idrAmount, tokens);
        });
      }
      
      // FAQ Accordion
      const faqItems = document.querySelectorAll('.faq-item');
      faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        
        if (question) {
          question.style.cursor = 'pointer';
          question.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Close all other items
            faqItems.forEach(otherItem => {
              if (otherItem !== item) {
                otherItem.classList.remove('active');
              }
            });
            
            // Toggle current item
            item.classList.toggle('active');
          });
        }
      });
      
      // Payment Method Selection
      const methodOptions = document.querySelectorAll('.method-option');
      methodOptions.forEach(option => {
        option.addEventListener('click', function() {
          // Remove active class from all options
          methodOptions.forEach(opt => opt.classList.remove('active'));
          // Add active class to clicked option
          this.classList.add('active');
        });
      });
      
      // Progress Bar Animation
      window.addEventListener('load', function() {
        const progressFill = document.querySelector('.progress-fill');
        if (progressFill) {
          progressFill.style.width = '0%';
          setTimeout(() => {
            progressFill.style.width = '41.7%';
          }, 500);
        }
      });
      
      // Scroll Animations
      window.addEventListener('scroll', function() {
        const elements = document.querySelectorAll('.benefit-card, .trust-badge, .phase-item');
        
        elements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top;
          const elementVisible = elementTop < window.innerHeight - 100;
          
          if (elementVisible) {
            element.style.opacity = '1';
            element.style.transform = 'translateY(0)';
          }
        });
      });
      
      // Initialize scroll animations
      window.addEventListener('load', function() {
        const elements = document.querySelectorAll('.benefit-card, .trust-badge, .phase-item');
        
        elements.forEach(element => {
          element.style.opacity = '0';
          element.style.transform = 'translateY(20px)';
          element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        });
      });
    </script>
    
    <!-- Wallet Connection Modal -->
    <div id="walletModal" class="wallet-modal hidden">
      <div class="modal-overlay" onclick="closeWalletModal()"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>Connect Your Wallet</h3>
          <button class="close-btn" onclick="closeWalletModal()">×</button>
        </div>
        <div class="wallet-grid">
          <div class="wallet-card" onclick="connectWallet('sui')">
            <div class="wallet-icon">
              <i class="fas fa-wallet"></i>
            </div>
            <div class="wallet-name">Sui Wallet</div>
            <div class="wallet-status">Popular</div>
          </div>
          <div class="wallet-card" onclick="connectWallet('suiet')">
            <div class="wallet-icon">
              <i class="fas fa-cube"></i>
            </div>
            <div class="wallet-name">Suiet</div>
            <div class="wallet-status">Easy to use</div>
          </div>
          <div class="wallet-card" onclick="connectWallet('martian')">
            <div class="wallet-icon">
              <i class="fas fa-rocket"></i>
            </div>
            <div class="wallet-name">Martian</div>
            <div class="wallet-status">Advanced</div>
          </div>
          <div class="wallet-card" onclick="connectWallet('ethos')">
            <div class="wallet-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="wallet-name">Ethos</div>
            <div class="wallet-status">Secure</div>
          </div>
        </div>
        <div class="wallet-footer">
          <p>By connecting a wallet, you agree to our Terms of Service and Privacy Policy</p>
        </div>
      </div>
    </div>
    
    <!-- Wallet Connection Status -->
    <div id="walletConnecting" class="wallet-connecting hidden">
      <div class="connecting-content">
        <div class="connecting-spinner">
          <i class="fas fa-spinner fa-spin"></i>
        </div>
        <h3>Connecting to Wallet...</h3>
        <p>Please approve the connection request in your wallet</p>
      </div>
    </div>
  </body>
</html>