.hero-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 3px solid #dee2e6;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(13, 110, 253, 0.05) 0%, transparent 70%);
            animation: float 20s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(1deg); }
        }
        
        .beta-badge {
            transform: rotate(8deg);
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .beta-badge:hover {
            transform: rotate(0deg) scale(1.05);
        }
        
        .title-content {
            position: relative;
            z-index: 2;
        }
        
        .subtitle {
            color: #6c757d;
            font-weight: 400;
        }
        
        .feature-highlight {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }
        
        .feature-highlight:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .icon-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        @media (max-width: 768px) {
            .title-main {
                font-size: 1.75rem !important;
            }
            .beta-badge {
                transform: rotate(0deg);
                margin-top: 0.5rem;
            }
            .feature-highlight {
                margin-bottom: 1rem;
            }
        }
<!-- CSS for Custom Tooltips (add to your stylesheet) -->

/* Custom tooltip container */
.custom-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted #0d6efd;
    color: #0d6efd;
    font-weight: 500;
    cursor: help;
    transition: all 0.2s ease;
}

.custom-tooltip:hover {
    border-bottom-color: #0a58ca;
    color: #0a58ca;
    background: rgba(13, 110, 253, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Tooltip text */
.custom-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 320px;
    background-color: #2c3e50;
    color: white;
    text-align: left;
    border-radius: 8px;
    padding: 12px 15px;
    position: absolute;
    z-index: 9999;
    bottom: 150%;
    left: 50%;
    margin-left: -160px;
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.5;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

/* Tooltip arrow */
.custom-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}

/* Show tooltip on hover */
.custom-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .custom-tooltip .tooltip-text {
        width: 280px;
        margin-left: -140px;
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .custom-tooltip .tooltip-text {
        width: 250px;
        margin-left: -125px;
        left: 50%;
        bottom: 120%;
    }
}

/* Tooltip variants for different positions */
.custom-tooltip.tooltip-top .tooltip-text {
    bottom: 150%;
}

.custom-tooltip.tooltip-bottom .tooltip-text {
    top: 150%;
    bottom: auto;
}

.custom-tooltip.tooltip-bottom .tooltip-text::after {
    top: -16px;
    bottom: auto;
    border-color: transparent transparent #2c3e50 transparent;
}

/* Different color themes */
.custom-tooltip.tooltip-success .tooltip-text {
    background-color: #27ae60;
}

.custom-tooltip.tooltip-warning .tooltip-text {
    background-color: #f39c12;
}

.custom-tooltip.tooltip-info .tooltip-text {
    background-color: #3498db;
}