body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #0f2027;
    overflow-x: hidden;
}

/* Animated Gradient Background */
.bg-animation {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #1e3c72, #2a5298, #000428, #004e92);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    z-index: -1;
}

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

.hero-section {
    padding-top: 150px;
    padding-bottom: 100px;
}

.feature-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

footer {
    background: rgba(0,0,0,0.4);
}
.sub-text {
    font-size: 1.2rem;
    opacity: 0.9;
}

.highlight-box {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.feature-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    transition: 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
}
.info-box {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}
.pricing-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    transition: 0.4s;
}

.pricing-card:hover {
    transform: translateY(-10px);
}

/* Basic subtle glow */
.basic {
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

/* 3 Month light yellow glow */
.three {
    box-shadow: 0 0 25px rgba(255, 230, 0, 0.4);
}

/* 1 Year strong yellow glow */
.yearly {
    box-shadow: 0 0 40px rgba(255, 200, 0, 0.8);
}

/* Lifetime diamond glow */
.lifetime {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.9),
                0 0 80px rgba(0, 200, 255, 0.7);
}
.pricing-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    transition: 0.4s;
    color: white;
}

.pricing-card:hover {
    transform: translateY(-8px);
}

/* Monthly – subtle white */
.basic {
    box-shadow: 0 0 15px rgba(255,255,255,0.25);
}

/* 3 Month – light yellow */
.three {
    box-shadow: 0 0 20px rgba(255, 230, 120, 0.5);
}

/* 6 Month – golden */
.six {
    box-shadow: 0 0 30px rgba(255, 210, 0, 0.6);
}

/* 1 Year – strong premium glow */
.yearly {
    box-shadow: 0 0 45px rgba(255, 190, 0, 0.9);
    transform: scale(1.05);
}

/* Lifetime – diamond glow */
.lifetime {
    box-shadow:
        0 0 30px rgba(0,255,255,0.8),
        0 0 60px rgba(0,200,255,0.6);
}