@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
        * {
            font-family: 'Vazirmatn', sans-serif;
            border-color: rgb(1 3 20 / 35%) !important;
        }
        
        /* Ensure the base document always has a dark background (prevents white flash under overlays on mobile) */
        html, body { background-color: #010314; min-height: 100%; }
        
        .gradient-bg {
            background: linear-gradient(135deg, #010314 0%, #0a0a1a 25%, #1a1a2e 50%, #16213e 75%, #010314 100%);
            position: relative; /* create a stacking context for the pseudo background */
            z-index: 0;
            min-height: 100vh; /* keep full-viewport height when body scroll is disabled */
        }
        
        .gradient-bg::before {
            content: '';
            position: fixed; /* pin background to viewport so it stays visible when body changes position */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(68, 160, 141, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(92, 179, 160, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 40% 80%, rgba(68, 160, 141, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1; /* sit behind page content */
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.03);
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .glass-hover:hover {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(68, 160, 141, 0.3);
            box-shadow: 0 8px 32px rgba(68, 160, 141, 0.15);
            transform: translateY(-5px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .neon-glow {
            box-shadow: 0 0 20px rgba(68, 160, 141, 0.4);
        }
        
        .neon-glow:hover {
            box-shadow: 0 0 30px rgba(68, 160, 141, 0.6), 0 0 60px rgba(68, 160, 141, 0.3);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #44a08d 0%, #5cb3a0 50%, #6bc5b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .floating {
            animation: floating 6s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-20px) rotate(2deg); }
            66% { transform: translateY(-10px) rotate(-1deg); }
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(60px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .counter {
            font-variant-numeric: tabular-nums;
        }
        
        .sticky-header {
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
            background: rgb(1 3 20 / 35%);
            border-bottom: 1px solid rgba(68, 160, 141, 0.1);
        }
        
        .hero-bg {
            background: radial-gradient(ellipse at center, rgba(68, 160, 141, 0.1) 0%, transparent 70%);
        }
        
        .token-animation {
            animation: tokenFloat 4s ease-in-out infinite;
        }
        
        @keyframes tokenFloat {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-15px) scale(1.05); }
        }
        
        .swap-arrow {
            transition: transform 0.3s ease;
        }
        
        .swap-arrow:hover {
            transform: rotate(180deg);
        }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .accordion-content.open {
            max-height: 200px;
        }
        
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        
        .mobile-menu.open {
            transform: translateX(0);
        }
        /* کل عرض اسکرول‌بار */
::-webkit-scrollbar {
  width: 10px;
}

/* پس‌زمینه‌ی شیشه‌ای */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* پس‌زمینه‌ی شیشه‌ای */
  -webkit-backdrop-filter: blur(6px);   /* افکت شیشه‌ای برای Safari */
  backdrop-filter: blur(6px);           /* افکت شیشه‌ای */
  border-radius: 10px;
}

/* خود دستگیره‌ی اسکرول */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3); /* رنگ نیمه‌شفاف */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2); /* لبه روشن برای افکت شیشه */
}

/* حالت هاور روی دستگیره */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* --- Mobile viewport + header hide/show helpers --- */
:root {
    /* fallback; JS updates --vh based on visualViewport when available */
    --vh: 1vh;
    --safe-top: 0px;
    --safe-bottom: 0px;
}
@supports (top: env(safe-area-inset-top)) {
    :root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
}

/* Smooth transform when hiding header on scroll */
#header { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.header-hidden { transform: translateY(calc(-100% - var(--safe-top))); }

/* When mobile keyboard is open, ensure header stays out of the way */
body.kb-open #header { transform: translateY(calc(-100% - var(--safe-top))); }