@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

        body {
            background-color: #0a0a0a;
            color: white;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
            /* Allow vertical scrolling */
            height: 100%;
        }

        html {
            height: 100%;
        }

        .glass-card {
            background: rgba(15, 15, 15, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(188, 36, 196, 0.2);
        }

        .gradient-bg {
            background: linear-gradient(135deg, rgba(188, 36, 196, 0.1) 0%, rgba(15, 15, 15, 0.8) 50%, rgba(188, 36, 196, 0.1) 100%);
        }

        .gradient-text {
            background: linear-gradient(90deg, #ec4899 0%, #bc24c4 50%, #9d1d9d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(188, 36, 196, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(188, 36, 196, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(188, 36, 196, 0);
            }
        }

        .floating {
            animation: floating 6s ease-in-out infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

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

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

        .grid-pattern {
            background-image:
                linear-gradient(rgba(188, 36, 196, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(188, 36, 196, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            position: relative;
            overflow-x: hidden;
            /* Only hide horizontal overflow */
            overflow-y: auto;
            /* Allow vertical scrolling */
            min-height: 100%;
        }

        .grid-pattern::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><circle cx="15" cy="15" r="3"/><circle cx="35" cy="25" r="2"/><circle cx="75" cy="15" r="4"/><circle cx="85" cy="65" r="3"/><circle cx="25" cy="85" r="2"/><circle cx="65" cy="75" r="3"/><circle cx="45" cy="45" r="2"/><circle cx="85" cy="25" r="3"/><circle cx="15" cy="65" r="4"/><circle cx="55" cy="35" r="2"/></svg>'),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><path d="M10,10 L90,10 L90,90 L10,90 Z" stroke-width="2"/><path d="M30,30 L70,30 L70,70 L30,70 Z" stroke-width="1"/></svg>'),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23bc24c4" opacity="0.03"><polygon points="50,5 90,90 10,90"/><polygon points="50,30 70,70 30,70"/></svg>');
            background-size: 100px 100px, 150px 150px, 120px 120px;
            background-repeat: repeat;
            z-index: -1;
        }

        .search-box {
            transition: all 0.3s ease;
        }

        .search-box:focus-within {
            transform: scale(1.02);
            box-shadow: 0 0 20px rgba(188, 36, 196, 0.3);
        }

        .insight-card {
            transition: all 0.3s ease;
            opacity: 0;
        }

        .insight-card.visible {
            opacity: 1;
        }

        .insight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(188, 36, 196, 0.2);
        }

        .typewriter {
            border-right: 2px solid #bc24c4;
            white-space: nowrap;
            overflow: hidden;
        }

        .coin-card {
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }

        .coin-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .price-up {
            color: #10b981;
        }

        .price-down {
            color: #ef4444;
        }

        .section-title {
            opacity: 0;
            transform: translateY(20px);
        }

        .section-title.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .floating-crypto {
            position: absolute;
            opacity: 0.1;
            z-index: -1;
            animation: float 15s linear infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            100% {
                transform: translateY(-100vh) rotate(360deg);
            }
        }

        .market-movement {
            position: relative;
            height: 300px;
            overflow: hidden;
        }

        .market-line {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(188, 36, 196, 0.5), transparent);
            animation: marketPulse 8s infinite;
        }

        @keyframes marketPulse {

            0%,
            100% {
                transform: scaleX(0.8);
                opacity: 0.5;
            }

            50% {
                transform: scaleX(1.2);
                opacity: 1;
            }
        }

        .market-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #bc24c4;
            animation: dotPulse 2s infinite;
        }

        @keyframes dotPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.5);
                opacity: 1;
            }
        }

        .glow-effect {
            position: relative;
        }

        .glow-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(188, 36, 196, 0.2) 0%, transparent 70%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .glow-effect:hover::after {
            opacity: 1;
        }

        .token-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(188, 36, 196, 0.1);
            border: 1px solid rgba(188, 36, 196, 0.3);
        }

        .token-icon i {
            font-size: 18px;
            color: #bc24c4;
        }

        .trending-card {
            transition: all 0.3s ease;
            background: rgba(15, 15, 15, 0.4);
            border: 1px solid rgba(188, 36, 196, 0.1);
        }

        .trending-card:hover {
            transform: translateY(-5px);
            background: rgba(15, 15, 15, 0.6);
            border-color: rgba(188, 36, 196, 0.3);
            box-shadow: 0 10px 20px rgba(188, 36, 196, 0.1);
        }

        .news-card {
            transition: all 0.3s ease;
            background: rgba(15, 15, 15, 0.4);
            border: 1px solid rgba(188, 36, 196, 0.1);
        }

        .news-card:hover {
            transform: translateY(-5px);
            background: rgba(15, 15, 15, 0.6);
            border-color: rgba(188, 36, 196, 0.3);
            box-shadow: 0 10px 20px rgba(188, 36, 196, 0.1);
        }

        /* Enhanced crypto grid elements */
        .crypto-grid-element {
            position: absolute;
            z-index: -1;
            opacity: 0.08;
            animation: float 25s linear infinite;
        }

        .crypto-grid-element:nth-child(1) {
            top: 10%;
            left: 15%;
            font-size: 3rem;
            animation-delay: 0s;
        }

        .crypto-grid-element:nth-child(2) {
            top: 25%;
            right: 20%;
            font-size: 2.5rem;
            animation-delay: 5s;
        }

        .crypto-grid-element:nth-child(3) {
            top: 50%;
            left: 5%;
            font-size: 4rem;
            animation-delay: 10s;
        }

        .crypto-grid-element:nth-child(4) {
            bottom: 15%;
            right: 10%;
            font-size: 3.5rem;
            animation-delay: 15s;
        }

        .crypto-grid-element:nth-child(5) {
            top: 70%;
            right: 25%;
            font-size: 2rem;
            animation-delay: 20s;
        }

        .crypto-grid-element:nth-child(6) {
            top: 30%;
            left: 30%;
            font-size: 3rem;
            animation-delay: 25s;
        }

        /* New crypto chart section */
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
            background: rgba(15, 15, 15, 0.4);
            border-radius: 12px;
            overflow: hidden;
        }

        .chart-line {
            position: absolute;
            bottom: 50%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(188, 36, 196, 0.7), transparent);
        }

        .chart-point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #bc24c4;
            transform: translate(-50%, -50%);
        }

        /* New crypto comparison section */
        .comparison-bar {
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(90deg, #bc24c4, #9d1d9d);
            position: relative;
            overflow: hidden;
        }

        .comparison-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.1) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0.1) 100%);
            animation: shine 2s infinite;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }