/* ---- HERO AMBIENT (blue) ---- */
.hero {
    position: relative;
    isolation: isolate;
}

.hero::before {
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 900px;
    background: radial-gradient(ellipse 55% 45% at 40% 30%, rgba(59, 130, 246, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 65% 70%, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    filter: blur(36px);
    opacity: 1;
    z-index: -1;
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(99, 102, 241, 0.18) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 85% 65% at 50% 15%, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 15%, black 30%, transparent 85%);
}

.hero-badge {
    border-color: rgba(99, 102, 241, 0.22);
    background: rgba(59, 130, 246, 0.06);
    animation: fadeUp 0.55s ease both;
}

.hero h1 {
    animation: fadeUp 0.55s 0.08s ease both;
}

.hero .subtitle {
    animation: fadeUp 0.55s 0.15s ease both;
}

.hero-buttons {
    animation: fadeUp 0.55s 0.22s ease both;
}

.install-bar {
    animation: fadeUp 0.55s 0.29s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero h1 .flow {
    background: linear-gradient(128deg, #93c5fd, #60a5fa, #3b82f6, #60a5fa, #93c5fd);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 6s ease-in-out infinite;
}