/* ==========================================================
   Hero Section – Main Title & Gradient Text
   ========================================================== */

/* Main title – scales with clamp() from mobile to 4K */
#main-title {
    font-size: clamp(2.4rem, 9vw, 9rem);
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 30%, #00a3ff 75%, #0066cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 163, 255, 0.3));
}

/* Desktop: spans inherit the parent gradient */
@media (min-width: 769px) {
    #main-title .desktop-gradient {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: inherit;
        filter: none;
    }

    #main-title {
        background: linear-gradient(135deg, #ffffff 0%, #ffffff 30%, #00a3ff 75%, #0066cc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 0 8px rgba(0, 163, 255, 0.3));
    }

    .desktop-gradient.gradient-text,
    .desktop-gradient.text-white {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: inherit;
        filter: none;
    }
}

/* Mobile: solid colours render faster */
@media (max-width: 768px) {
    #main-title {
        background: none;
        color: #ffffff;
        filter: none;
    }
    #main-title .desktop-gradient.text-white   { color: #ffffff; }
    #main-title .desktop-gradient.gradient-text { color: var(--accent-blue); }
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #00a3ff 50%, #0066cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 163, 255, 0.3));
    text-shadow: none;
}

/* Gradient background blob */
.gradient-bg {
    background: radial-gradient(circle at 20% 40%, var(--primary-blue) 0%, rgba(0,0,0,0) 70%),
                radial-gradient(circle at 80% 80%, var(--accent-blue) 0%, rgba(0,0,0,0) 50%),
                radial-gradient(circle at 60% 20%, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 40%);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
    animation: gradientShift 25s ease-in-out infinite;
}

/* Simpler gradient used in some sections */
.gradient-bg-simple {
    background: radial-gradient(circle at 0% 40%, var(--primary-blue) 0%, rgba(0,0,0,0) 70%);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 0;
}

@keyframes gradientShift {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    33%       { opacity: 0.6; transform: scale(1.05); }
    66%       { opacity: 0.3; transform: scale(0.95); }
}

/* Performance hint – these elements animate */
.gradient-bg { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; }