/* CSS for index_glossary_newww.html */

* {
        font-family: 'Inter', system-ui, sans-serif;
    }
    
    /* Smooth scroll */
    html {
        scroll-behavior: smooth;
    }
    
    /* Hero gradient background with blobs */
    .gradient-hero {
        background: #ffffff;
        position: relative;
        overflow: hidden;
    }
    
    .hero-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.8;
        pointer-events: none;
        z-index: 0;
    }
    
    .hero-blob-1 {
        width: 600px;
        height: 600px;
        background: rgba(4, 107, 252, 0.35);
        top: -200px;
        left: -150px;
    }
    
    .hero-blob-2 {
        width: 500px;
        height: 500px;
        background: rgba(255, 153, 0, 0.25);
        top: 50px;
        right: -100px;
    }
    
    .hero-blob-3 {
        width: 400px;
        height: 400px;
        background: rgba(4, 107, 252, 0.25);
        bottom: -100px;
        left: 30%;
    }

    /* Mobile blob adjustments */
    @media (max-width: 768px) {
        .hero-blob {
            opacity: 0.4;
            filter: blur(120px);
        }
        .hero-blob-1 {
            width: 350px;
            height: 350px;
            top: -150px;
            left: -100px;
        }
        .hero-blob-2 {
            width: 300px;
            height: 300px;
            top: 0;
            right: -80px;
        }
        .hero-blob-3 {
            width: 250px;
            height: 250px;
            bottom: -80px;
        }
    }
    
    .hero-content {
        position: relative;
        z-index: 10;
    }
    
    /* Subtle grid pattern */
    .hero-grid {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            linear-gradient(rgba(4, 107, 252, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(4, 107, 252, 0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        z-index: 1;
    }
    
    /* Letter navigation sticky */
    .letter-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .letter-nav::-webkit-scrollbar {
        display: none;
    }
    
    /* Term card hover effect */
    .term-card {
        transition: all 0.2s ease;
    }
    .term-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 40px -10px rgba(4, 107, 252, 0.15);
    }
    
    /* Active letter highlight */
    .letter-link.active {
        background-color: #046bfc;
        color: white;
    }
    
    /* Highlight animation for searched term */
    @keyframes highlightPulse {
        0%, 100% { background-color: rgba(4, 107, 252, 0.1); }
        50% { background-color: rgba(4, 107, 252, 0.2); }
    }
    .highlight-term {
        animation: highlightPulse 1s ease 2;
    }
    
    /* Scroll reveal animation */
    .term-card {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease-out;
    }
    .term-card.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Highlight animation for internal links */
    .term-card.highlight-term {
        animation: highlightPulse 2s ease-out;
    }

    @keyframes highlightPulse {
        0%, 100% { box-shadow: 0 4px 15px rgba(4, 107, 252, 0.1); }
        25% { box-shadow: 0 0 0 4px rgba(4, 107, 252, 0.3), 0 4px 15px rgba(4, 107, 252, 0.2); }
        50% { box-shadow: 0 0 0 6px rgba(4, 107, 252, 0.2), 0 4px 15px rgba(4, 107, 252, 0.15); }
        75% { box-shadow: 0 0 0 4px rgba(4, 107, 252, 0.15), 0 4px 15px rgba(4, 107, 252, 0.1); }
    }
    
    /* Internal term link style */
    .term-link {
        color: #046bfc;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .term-link:hover {
        text-decoration-style: solid;
        color: #0356c9;
    }
    
    /* Category filter buttons */
    .category-btn {
        transition: all 0.2s;
    }
    .category-btn.active {
        background-color: #046bfc;
        color: white;
        border-color: #046bfc;
    }
    
    /* Related tool badge */
    .tool-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: linear-gradient(135deg, #ff9900, #e68a00);
        color: white;
        font-size: 12px;
        font-weight: 600;
        border-radius: 9999px;
        text-decoration: none;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
    }
    .tool-badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    }