/* VPSCompare.site — Custom styles (Tailwind handles the rest) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Hero gradient text */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero background */
.hero-bg {
    background: linear-gradient(145deg, #f0f7ff 0%, #ffffff 50%, #f5f3ff 100%);
}

/* Floating card animation */
@keyframes float {

    0%,
    100% {
        transform: rotateX(4deg) rotateY(-12deg) translateY(0);
    }

    50% {
        transform: rotateX(4deg) rotateY(-12deg) translateY(-14px);
    }
}

.float-card {
    animation: float 5s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Status pulse */
@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.pulse-dot {
    animation: pulse-green 2s ease-in-out infinite;
}

/* RockHoster Banner */
.rh-banner {
    background: linear-gradient(90deg, #1a24c4, #2e46f5, #1a24c4);
    background-size: 300% 100%;
    animation: bgSlide 8s linear infinite;
}

@keyframes bgSlide {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.rh-sweep {
    position: absolute;
    top: -20%;
    left: -15%;
    width: 100px;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: sweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sweep {
    0% {
        left: -20%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes logoIn {
    from {
        transform: translateX(-10px) scale(.95);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.rh-logo {
    animation: logoIn .9s cubic-bezier(.22, 1, .36, 1) both;
}

/* Provider card featured ring */
.featured-ring {
    box-shadow: 0 0 0 2px #2563eb, 0 20px 40px rgba(37, 99, 235, .15);
}

/* Fade-up scroll animation */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: none;
}

[data-stagger]>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}

[data-stagger].visible>*:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

[data-stagger].visible>*:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: .08s;
}

[data-stagger].visible>*:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: .16s;
}

[data-stagger].visible>*:nth-child(4) {
    opacity: 1;
    transform: none;
    transition-delay: .24s;
}

/* FAQ smooth transition */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
}

.faq-item.open .faq-answer {
    max-height: 320px;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-icon {
    transition: transform .3s ease;
    display: inline-block;
}

/* Stat counter animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.stat-num {
    animation: countUp .6s ease both;
}

/* Compare table hover */
.compare-row:hover {
    background: #eff6ff;
}

/* Sticky header enhanced shadow */
.header-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}