* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}


/* ================= HERO SECTION ================= */
.hero {
    padding: 100px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.hero-left {
    max-width: 650px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(90deg, #c084fc, #a855f7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    margin-top: 20px;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.7;
}

.btn-primary {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 28px;
    border-radius: 10px;
    background: linear-gradient(90deg, #9333ea, #7e22ce);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(147, 51, 234, 0.6);
    }

/* Feature badges */
.features {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.feature-box {
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    font-size: 14px;
    color: #e2e8f0;
}

/* ================= RIGHT INFO CARD ================= */
.hero-card {
    flex: 1;
    min-width: 320px;
    max-width: 420px;
    padding: 35px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    text-align: center;
}

    .hero-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
        color: #93c5fd;
    }

    .hero-card p {
        font-size: 14px;
        color: #cbd5e1;
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-left {
        max-width: 100%;
    }
}

/* ================= SERIES SECTION ================= */
.series-section {
    text-align: center;
    padding: 80px 8%;
    background: linear-gradient(to bottom, #050914, #070b1a);
}

    .series-section h2 {
        font-size: 34px;
        font-weight: 800;
        background: linear-gradient(90deg, #c084fc, #60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.subtitle {
    margin-top: 12px;
    color: #cbd5e1;
    font-size: 15px;
}

/* Cards */
.series-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.series-card {
    width: 260px;
    padding: 25px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: 0.3s ease;
}

    .series-card h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .series-card span {
        font-size: 13px;
        color: #cbd5e1;
    }

    /* Hover glow effects */
    .series-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
    }

    /* Intel & AMD Accent Colors */
    .series-card.intel:hover {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
        border-color: rgba(59, 130, 246, 0.4);
    }

    .series-card.amd:hover {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
        border-color: rgba(239, 68, 68, 0.4);
    }

/* Calculator Button */
.finder-btn {
    display: inline-block;
    margin-top: 35px;
    padding: 14px 26px;
    border-radius: 10px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    color: white;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    transition: 0.3s;
}

    .finder-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.6);
    }
.series-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.series-card {
    width: 260px;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    color: #e2e8f0;
}

    /* Hover lift */
    .series-card:hover {
        transform: translateY(-4px);
    }

    /* ===== ACTIVE BASE ===== */
    .series-card.active {
        color: white;
        border: 1px solid rgba(255,255,255,0.25);
    }

    /* ===== INTEL ACTIVE (BLUE GLOW) ===== */
    .series-card.intel.active {
        background: linear-gradient(135deg, #1e3a8a, #2563eb);
        box-shadow: 0 0 35px rgba(59,130,246,0.6);
    }

    /* ===== AMD ACTIVE (RED GLOW) ===== */
    .series-card.amd.active {
        background: linear-gradient(135deg, #7f1d1d, #dc2626);
        box-shadow: 0 0 35px rgba(239,68,68,0.6);
    }

    /* Subtext when active */
    .series-card.active span {
        color: rgba(255,255,255,0.9);
    }

.series-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.series-card {
    position: relative;
    width: 260px;
    padding: 24px;
    border-radius: 16px;
    background: #0b1220;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

    /* Hover lift */
    .series-card:hover {
        transform: translateY(-4px);
    }

    /* GLOW LAYER (hidden by default) */
    .series-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        padding: 2px;
        background: transparent;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* ===== ACTIVE STATE BASE ===== */
    .series-card.active {
        color: white;
    }

    /* ===== INTEL BLUE GRADIENT GLOW ===== */
    .series-card.intel.active::before {
        background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb);
        opacity: 1;
        box-shadow: 0 0 25px rgba(59,130,246,0.5);
    }

    /* ===== AMD RED GRADIENT GLOW ===== */
    .series-card.amd.active::before {
        background: linear-gradient(135deg, #ef4444, #f97316, #dc2626);
        opacity: 1;
        box-shadow: 0 0 25px rgba(239,68,68,0.5);
    }

    .series-card span {
        font-size: 13px;
        color: #94a3b8;
    }

    .series-card.active span {
        color: #e2e8f0;
    }

.series-card {
    position: relative;
    width: 260px;
    padding: 24px;
    border-radius: 16px;
    background: #0b1220;
    color: #e2e8f0;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

    /* Lift on hover */
    .series-card:hover {
        transform: translateY(-4px);
    }

    /* ===== GLOW BORDER LAYER ===== */
    .series-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(120deg, transparent, transparent);
        background-size: 300% 300%;
        opacity: 0;
        transition: opacity 0.3s ease;
        /* Creates border-only effect */
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    /* ===== ACTIVE BASE ===== */
    .series-card.active {
        color: white;
    }

    /* ===== INTEL (BLUE ANIMATED GLOW) ===== */
    .series-card.intel.active::before {
        background: linear-gradient(120deg, #3b82f6, #06b6d4, #2563eb, #3b82f6);
        background-size: 300% 300%;
        animation: intelGlow 6s linear infinite;
        opacity: 1;
        box-shadow: 0 0 30px rgba(59,130,246,0.45);
    }

    /* ===== AMD (RED ANIMATED GLOW) ===== */
    .series-card.amd.active::before {
        background: linear-gradient(120deg, #ef4444, #f97316, #dc2626, #ef4444);
        background-size: 300% 300%;
        animation: amdGlow 6s linear infinite;
        opacity: 1;
        box-shadow: 0 0 30px rgba(239,68,68,0.45);
    }

/* Glow Animations */
@keyframes intelGlow {
    0% {
        background-position: 0% 50%;
    }

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

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

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

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

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

.series-card span {
    font-size: 13px;
    color: #94a3b8;
}

.series-card.active span {
    color: #e2e8f0;
}

.plans-wrapper {
    margin: 90px auto 0;
    max-width: 1400px;
    display: grid;
    /* MAGIC LINE — auto responsive centered grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    gap: 28px;
    justify-content: center; /* centers the whole grid */
}


:root {
    --bg: #020617;
    --card: #0b0f19;
    --purple: #7c3aed;
    --green: #22c55e;
    --text: #e5e7eb;
}

* {
    box-sizing: border-box
}



    /* Subtle grid overlay */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,0.03) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.03) 1px, transparent 1px );
        background-size: 4px 4px;
        opacity: 0.15;
        pointer-events: none;
        z-index: 0;
    }

/* ================= TRUSTPILOT BUTTON ================= */
.trustpilot-section {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    padding: 28px 0 36px; /* compact height */
    display: flex;
    justify-content: center;
    background: linear-gradient( to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.25) );
}

.trustpilot-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #ffffff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .trustpilot-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(0,0,0,.45);
    }

.tp-star {
    color: #00b67a; /* Trustpilot green */
    font-size: 16px;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .support-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .support-left p {
        margin: auto;
    }

    .support-chat {
        align-items: center;
    }

    .chat-bubble {
        align-self: center !important;
    }
}



/* Keep content above background */
.container,
header,
section,
main {
    position: relative;
    z-index: 1;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #020617;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text strong {
    font-size: 14px;
    color: #e5e7eb;
}

.logo-text span {
    font-size: 12px;
    opacity: 0.7;
}

/* CENTER */
.footer-center {
    text-align: center;
    opacity: 0.6;
    font-size: 12px;
}

/* RIGHT */
.footer-right {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
}

    .footer-right a {
        color: #cbd5f5;
        text-decoration: none;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0.85;
    }

        .footer-right a:hover {
            opacity: 1;
            color: #a78bfa;
        }

/* RESPONSIVE */
@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px;
    }

    .footer-right {
        justify-content: center;
    }

    .footer-left {
        justify-content: center;
        display: flex;
    }
}



.container {
    max-width: 1400px;
    margin: auto;
    padding: 120px 24px;
    text-align: center;
}

h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

    h1 span {
        color: var(--purple)
    }

.subtitle {
    font-size: 14px;
    opacity: .75;
    margin-bottom: 70px;
}

.main-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 60px;
    text-transform: uppercase;
}

.gradient-text {
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.plans-wrapper {
    margin: 90px auto 0;
    max-width: 1400px;
    display: grid;
    /* MAGIC LINE — auto responsive centered grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    gap: 28px;
    justify-content: center; /* centers the whole grid */
}


@media (max-width: 1200px) {
    .plans-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .plans-wrapper {
        grid-template-columns: 1fr;
    }
}



/* CARD */
.plan-box {
    width: 300px;
    background: linear-gradient(180deg,#0b0f19,#020617);
    border-radius: 20px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 20px 45px rgba(0,0,0,.7);
    transition: .35s;
}

    .plan-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 65px rgba(0,0,0,.85);
    }

/* HEADER */
.plan-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

    .plan-header img {
        width: 42px;
        image-rendering: pixelated;
    }

    .plan-header h3 {
        color: #f97316;
        letter-spacing: 1px;
    }

/* PRICE */
.plan-price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
}

    .plan-price span {
        font-size: 14px;
        opacity: .7;
    }

/* SPECS */
.plan-specs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.spec {
    background: #020617;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .spec i {
        color: var(--green)
    }

    .spec.wide {
        grid-column: span 2
    }

/* EXTRAS */
.plan-extras div {
    margin-top: 10px;
    background: rgba(124,58,237,.12);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
}

/* FEATURES */
.plan-features {
    margin: 16px 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

    .plan-features li {
        color: var(--green);
        margin-bottom: 6px;
    }

.plan-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .plan-heading h2 {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #e5e7eb;
    }

    .plan-heading .dot {
        width: 8px;
        height: 8px;
        background: #3b82f6; /* blue dot */
        border-radius: 50%;
    }

.plan-subtitle {
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
    margin-bottom: 60px;
}

/* REQUIRED for glow overlay */
.plan-box {
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

    .plan-box::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
    }

.dirt-plan:hover {
    box-shadow: 0 0 25px rgba(34,197,94,.35), 0 0 50px rgba(34,197,94,.25), 0 30px 70px rgba(0,0,0,.85);
    transform: translateY(-8px);
}

.dirt-plan::after {
    background: radial-gradient(circle at top, rgba(34,197,94,.25), transparent 60% );
}

.dirt-plan:hover::after {
    opacity: 1;
}

.stone-plan:hover {
    box-shadow: 0 0 25px rgba(156,163,175,.35), 0 0 50px rgba(156,163,175,.25), 0 30px 70px rgba(0,0,0,.85);
}

.stone-plan::after {
    background: radial-gradient(circle at top, rgba(156,163,175,.25), transparent 60% );
}

.stone-plan:hover::after {
    opacity: 1;
}

.coal-plan:hover {
    box-shadow: 0 0 25px rgba(0,0,0,.75), 0 0 60px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.95);
}

.coal-plan::after {
    background: radial-gradient(circle at top, rgba(0,0,0,.6), transparent 65% );
}

.coal-plan:hover::after {
    opacity: 1;
}

.iron-plan:hover {
    box-shadow: 0 0 30px rgba(255,255,255,.45), 0 0 70px rgba(255,255,255,.25), 0 30px 70px rgba(0,0,0,.85);
}

.iron-plan::after {
    background: radial-gradient(circle at top, rgba(255,255,255,.35), transparent 60% );
}

.iron-plan:hover::after {
    opacity: 1;
}

.redstone-plan:hover {
    box-shadow: 0 0 30px rgba(239,68,68,.5), 0 0 80px rgba(239,68,68,.35), 0 30px 80px rgba(0,0,0,.9);
}

.redstone-plan::after {
    background: radial-gradient(circle at top, rgba(239,68,68,.4), transparent 60% );
}

.redstone-plan:hover::after {
    opacity: 1;
    animation: redPulse 1.6s infinite alternate;
}

@keyframes redPulse {
    from {
        opacity: .6;
    }

    to {
        opacity: 1;
    }
}

.lapis-plan:hover {
    box-shadow: 0 0 30px rgba(59,130,246,.45), 0 0 80px rgba(59,130,246,.35), 0 30px 70px rgba(0,0,0,.85);
}

.lapis-plan::after {
    background: radial-gradient(circle at top, rgba(59,130,246,.35), transparent 60% );
}

.lapis-plan:hover::after {
    opacity: 1;
}

.gold-plan:hover {
    box-shadow: 0 0 35px rgba(234,179,8,.55), 0 0 90px rgba(234,179,8,.35), 0 30px 70px rgba(0,0,0,.85);
}

.gold-plan::after {
    background: radial-gradient(circle at top, rgba(234,179,8,.45), transparent 60% );
}

.gold-plan:hover::after {
    opacity: 1;
}

.emerald-plan:hover {
    box-shadow: 0 0 35px rgba(34,197,94,.5), 0 0 90px rgba(34,197,94,.35), 0 30px 70px rgba(0,0,0,.85);
}

.emerald-plan::after {
    background: radial-gradient(circle at top, rgba(34,197,94,.4), transparent 60% );
}

.emerald-plan:hover::after {
    opacity: 1;
}

.diamond-plan:hover {
    box-shadow: 0 0 40px rgba(34,211,238,.55), 0 0 100px rgba(34,211,238,.45), 0 30px 80px rgba(0,0,0,.9);
}

.diamond-plan::after {
    background: radial-gradient(circle at top, rgba(34,211,238,.45), transparent 60% );
}

.diamond-plan:hover::after {
    opacity: 1;
}

.netherite-plan:hover {
    box-shadow: 0 0 40px rgba(88,28,135,.55), 0 0 110px rgba(0,0,0,.85), 0 30px 90px rgba(0,0,0,.95);
}

.netherite-plan::after {
    background: radial-gradient(circle at top, rgba(88,28,135,.45), transparent 65% );
}

.netherite-plan:hover::after {
    opacity: 1;
}

.infinity-plan:hover {
    box-shadow: 0 0 30px red, 0 0 45px orange, 0 0 60px yellow, 0 0 75px green, 0 0 90px cyan, 0 0 110px blue, 0 0 130px violet;
}

.infinity-plan::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient( 120deg, red, orange, yellow, green, cyan, blue, violet );
    opacity: 0;
    filter: blur(18px);
    transform: scale(1.15);
    z-index: 1; /* 🔥 BELOW CONTENT */
    pointer-events: none;
    transition: opacity .35s ease;
}


.infinity-plan:hover::after {
    opacity: 0.45;
}

/* ===============================
   MOST SOLD BADGE — HARD FIX
   =============================== */

.plan-box {
    position: relative; /* required for absolute badge */
}

/* Badge */
.most-sold-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    /* 🔒 SIZE LOCK */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: fit-content !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #020617;
    background: linear-gradient(90deg, #facc15, #f97316);
    box-shadow: 0 6px 18px rgba(250,204,21,.55), 0 0 25px rgba(249,115,22,.45);
    z-index: 10; /* above glow & content */
    pointer-events: none;
}

    /* OPTIONAL ICON */
    .most-sold-badge::before {
        content: "🔥";
        margin-right: 4px;
    }

.most-sold-badge {
    top: -10px;
    right: -126px;
}


.plan-box {
    position: relative;
    overflow: hidden;
}

    .plan-box > * {
        position: relative;
        z-index: 2; /* keeps content above glow */
    }

.badge-limited {
    background: linear-gradient( 90deg, #ef4444, #dc2626 );
    box-shadow: 0 0 18px rgba(239,68,68,.65), 0 0 30px rgba(220,38,38,.45);
}

    .badge-limited::before {
        content: "⏳";
    }

.badge-recommended {
    background: linear-gradient( 90deg, #7c3aed, #a855f7 );
    box-shadow: 0 0 18px rgba(168,85,247,.6), 0 0 30px rgba(124,58,237,.45);
}

    .badge-recommended::before {
        content: "⭐";
    }

.badge-recommended {
    animation: badgePulse 1.8s infinite ease-in-out;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}
/* ===============================
   PLAN BADGES — BASE
   =============================== */

.plan-box {
    position: relative;
}

    /* Push content down if badge exists */
    .plan-box:has(.plan-badge) {
        padding-top: 42px;
    }

.plan-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #020617;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* ================= FOOTER ================= */
.site-footer {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    background: radial-gradient( ellipse at center, #1a0033 0%, #0d021f 60%, #05010d 100% );
    padding: 26px 0;
}

    /* TOP DIVIDER LINE */
    .site-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(168,85,247,.45), transparent );
    }

/* INNER */
.footer-inner {
    max-width: 1200px;
    margin: auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    color: #cbd5f5;
    font-size: 13px;
}

/* LEFT */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}


.badge-limited {
    animation: badgePulse 1.8s infinite ease-in-out;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.most-sold-badge {
    animation: badgePulse 1.8s infinite ease-in-out;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}


/* BUTTON */
.plan-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg,#7c3aed,#22c55e);
    font-weight: 700;
    cursor: pointer;
    color: #020617;
    transition: .25s;
}

    .plan-btn:hover {
        transform: scale(1.05)
    }

/* ================= WHY SECTION ================= */
.why-section {
    padding: 120px 8% 100px;
    text-align: center;
}

    .why-section h2 {
        font-size: 38px;
        font-weight: 800;
        margin-bottom: 10px;
    }

.why-subtitle {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 60px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.why-card {
    background: linear-gradient(180deg, #0b0f19, #020617);
    border-radius: 18px;
    padding: 28px;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    transition: all .35s ease;
}

    .why-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 70px rgba(0,0,0,.8);
    }

    .why-card h3 {
        margin: 14px 0 10px;
        font-size: 17px;
    }

    .why-card p {
        font-size: 14px;
        opacity: 0.75;
        line-height: 1.6;
    }

/* ICON STYLES */
.why-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
}

/* Color variants */
.pink {
    background: rgba(236,72,153,.15);
    color: #ec4899;
}

.purple {
    background: rgba(168,85,247,.15);
    color: #a855f7;
}

.cyan {
    background: rgba(34,211,238,.15);
    color: #22d3ee;
}

.green {
    background: rgba(34,197,94,.15);
    color: #22c55e;
}

.yellow {
    background: rgba(250,204,21,.15);
    color: #facc15;
}

.blue {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
}

/* ================= CTA SECTION ================= */


    .cta-section h2 {
        font-size: 42px;
        font-weight: 800;
        background: linear-gradient(90deg, #c084fc, #60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 18px;
    }

.cta-subtitle {
    font-size: 16px;
    opacity: 0.8;
    max-width: 700px;
    margin: auto;
    margin-bottom: 40px;
}
    .cta-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 45px rgba(236,72,153,.6);
    }

#stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.25;
    pointer-events: none;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

    .reveal.show {
        opacity: 1;
        transform: translateY(0);
    }

body::after {
    content: "";
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.15), transparent 60%);
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: transform 0.08s linear;
}

.plan-box {
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}

    .plan-box:hover {
        transform: translateY(-10px) scale(1.03);
    }

.gradient-text-animated {
    background: linear-gradient(270deg, #60a5fa, #a78bfa, #ec4899, #60a5fa);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}

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

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

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

.plan-btn, .cta-primary {
    position: relative;
    overflow: hidden;
}

    .plan-btn::before, .cta-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
        transform: skewX(-25deg);
    }

    .plan-btn:hover::before, .cta-primary:hover::before {
        animation: shine 1s forwards;
    }

@keyframes shine {
    100% {
        left: 130%;
    }
}

.stats {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-top: 40px;
    opacity: .8;
}

    .stats div {
        text-align: center;
    }

    .stats strong {
        font-size: 22px;
        color: #a78bfa;
    }

/* ===== NEON SCROLLBAR ===== */

/* Width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track (background) */
::-webkit-scrollbar-track {
    background: #050816;
}

/* Scroll thumb */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #3b82f6);
    border-radius: 10px;
    box-shadow: 0 0 8px #7c3aed, 0 0 14px #3b82f6;
}

    /* Hover effect */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #a855f7, #60a5fa);
        box-shadow: 0 0 12px #a855f7, 0 0 18px #60a5fa;
    }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #7c3aed #050816;
}

/* ================= GLOBAL ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: #e6e9ff;
    background: radial-gradient(circle at 20% 10%, rgba(124,58,237,.15), transparent 40%), radial-gradient(circle at 80% 30%, rgba(34,211,238,.12), transparent 45%), #05030f;
    background-attachment: fixed;
    overflow-x: hidden;
    cursor: url('sword.png') 4 4, auto;
}

section {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, p, span {
    color: inherit;
}

/* ================= FLOATING BLOBS ================= */
.ui-blobs {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

    .ui-blobs span {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .35;
        animation: floatBlob 18s infinite ease-in-out alternate;
    }

        .ui-blobs span:nth-child(1) {
            width: 420px;
            height: 420px;
            background: #7c3aed;
            top: 10%;
            left: 5%;
        }

        .ui-blobs span:nth-child(2) {
            width: 520px;
            height: 520px;
            background: #22d3ee;
            bottom: 5%;
            right: 10%;
            animation-delay: 4s;
        }

        .ui-blobs span:nth-child(3) {
            width: 380px;
            height: 380px;
            background: #4ade80;
            top: 55%;
            left: 45%;
            animation-delay: 8s;
        }

@keyframes floatBlob {
    0% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(30px,-40px) scale(1.1);
    }

    100% {
        transform: translate(-20px,20px) scale(.95);
    }
}

/* ================= HEADER ================= */
.navbar {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(18px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    z-index: 10000;
    padding: 14px 28px;
    background: rgba(10, 15, 30, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 1000;
}

.main-header {
    position: fixed;
    top: 18px; /* gap when pill */
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
    transition: top .35s ease;
}


.nav-pill {
    width: 96%;
    max-width: 1400px;
    padding: 16px 26px;
    border-radius: 999px; /* 🔵 PILL at top */
    background: linear-gradient(90deg, #2b0d63, #1a0b35);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    transition: all .35s cubic-bezier(.4,0,.2,1);
}

.main-header.scrolled {
    top: 0; /* 🔥 removes gap */
}

    .main-header.scrolled .nav-pill {
        width: 100%;
        max-width: 100%;
        border-radius: 0; /* rectangle */
        padding: 14px 40px;
        background: rgba(10, 10, 30, 0.85);
        backdrop-filter: blur(14px);
        box-shadow: 0 8px 30px rgba(0,0,0,.35);
    }



/* Base hidden state */
.nav-item .dropdown-menu,
.panels-dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .25s ease;
    pointer-events: none;
}

/* Show on hover */
.nav-item.dropdown:hover > .dropdown-menu,
.panels-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-item .dropdown-menu,
.panels-dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s; /* ⬅ longer delay before hiding */
}

.nav-item.dropdown:hover > .dropdown-menu,
.panels-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s;
}

.nav-item.dropdown::after,
.panels-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 22px; /* bigger bridge */
}


.nav-item.dropdown::after,
.panels-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px; /* invisible hover bridge */
}

.dropdown-menu {
    position: absolute;
    top: 44px;
    left: 0;
    min-width: 240px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(20, 10, 45, 0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(120, 80, 255, 0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 25px rgba(124,58,237,.25), inset 0 0 12px rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3000;
}

    .dropdown-menu a {
        position: relative;
        padding: 10px 12px;
        border-radius: 10px;
        color: #dcdcff;
        text-decoration: none;
        font-size: 14px;
        transition: all .25s ease;
    }

        .dropdown-menu a:hover {
            background: rgba(124,58,237,.15);
            color: #fff;
            box-shadow: 0 0 12px rgba(124,58,237,.35);
            transform: translateX(4px);
        }

    .dropdown-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(120deg, #7c3aed, #22d3ee, #7c3aed);
        background-size: 200% 200%;
        animation: borderGlow 6s linear infinite;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

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

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

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

.nav-item .dropdown-menu,
.panels-dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s linear .7s; /* ⬅ stays "alive" longer */
}

.nav-item.dropdown::after,
.panels-dropdown::after {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: 100%;
    height: 36px; /* bigger invisible zone */
}

.dropdown-menu {
    top: 38px; /* bring closer to menu item */
}


/* Right side dropdown (Panels) */
.panels-dropdown .dropdown-menu {
    right: 0;
    left: auto;
}


.panels-dropdown {
    position: relative;
}

    .panels-dropdown .dropdown-menu {
        right: 0;
        left: auto;
        top: 42px;
        display: none;
    }

    .panels-dropdown:hover .dropdown-menu {
        display: flex;
    }

.dropdown-menu a {
    padding: 10px 12px;
    border-radius: 10px;
    color: #dcdcff;
    text-decoration: none;
    font-size: 14px;
    transition: background .2s ease;
}

    .dropdown-menu a:hover {
        background: rgba(255,255,255,.07);
        color: #fff;
    }



.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .logo img {
        height: 36px;
    }

.logo-text strong {
    font-size: 18px;
}

.logo-text span {
    font-size: 13px;
    opacity: .7;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-menu {
    display: flex;
    gap: 22px;
}

.nav-item {
    position: relative;
    color: #dcdcff;
    font-size: 14px;
    cursor: pointer;
}

    .nav-item:hover {
        color: #fff;
    }

.dropdown-menu {
    position: absolute;
    top: 38px;
    left: 0;
    background: linear-gradient(180deg,#0f0622,#1a0836);
    padding: 12px;
    border-radius: 16px;
    min-width: 230px;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

    .dropdown-menu a {
        color: #cfcfff;
        text-decoration: none;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 14px;
    }

        .dropdown-menu a:hover {
            background: rgba(255,255,255,0.07);
            color: #fff;
        }

.dropdown:hover .dropdown-menu {
    display: flex;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pill-btn {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.08);
}

    .pill-btn:hover {
        background: rgba(255,255,255,0.16);
    }

    .pill-btn.solid {
        background: linear-gradient(90deg,#7c3aed,#9333ea);
    }

        .pill-btn.solid:hover {
            filter: brightness(1.1);
        }

    .pill-btn.ghost {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
    }

.panels-dropdown {
    position: relative;
}

.right-menu {
    right: 0;
    left: auto;
}

.dropdown.open .dropdown-menu {
    display: flex;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.logo-img {
    height: 32px;
}

.logo-text {
    color: #ffffff;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

    .logo-link:hover {
        opacity: 0.95;
    }


.nav-links a {
    position: relative;
    text-decoration: none;
    color: #cbd5f5;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 2px;
    transition: color 0.25s ease;
}

    .nav-links a:hover {
        color: #ffffff;
    }

    .nav-links a::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -8px;
        width: 0;
        height: 6px;
        background: #22c55e;
        filter: blur(12px);
        opacity: 0;
        transform: translateX(-50%);
        transition: width 0.35s ease, opacity 0.35s ease;
    }

    .nav-links a:hover::before {
        width: 100%;
        opacity: 0.9;
    }

    .nav-links a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #22c55e, #06b6d4);
        border-radius: 999px;
        transform: translateX(-50%);
        opacity: 0;
        transition: width 0.35s ease, opacity 0.35s ease;
        box-shadow: 0 0 8px rgba(34,197,94,1), 0 0 18px rgba(34,197,94,0.9), 0 0 32px rgba(34,197,94,0.7), 0 0 52px rgba(34,197,94,0.5);
    }

    .nav-links a:hover::after {
        width: 100%;
        opacity: 1;
    }

.services-btn-wrapper,
.support-btn-wrapper {
    position: relative;
}

.services-arrow,
.support-arrow {
    font-size: 10px;
    margin-left: 4px;
}

.services-dropdown {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: 320px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #0b0f19, #020617);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(124,58,237,0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 999;
}

.services-btn-wrapper:hover .services-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.service-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #ffffff;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .service-card:hover {
        background: rgba(124,58,237,0.15);
        transform: translateX(6px);
    }

.service-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(124,58,237,0.25);
}

.service-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.service-text span {
    font-size: 12px;
    opacity: 0.7;
}

.support-dropdown {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: 280px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0b0f19, #020617);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(124,58,237,0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 999;
}

.support-btn-wrapper:hover .support-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.support-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .support-card:hover {
        background: rgba(124,58,237,0.15);
        transform: translateX(6px);
    }

.support-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124,58,237,0.25);
    font-size: 16px;
}

.support-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.support-text span {
    font-size: 12px;
    opacity: 0.7;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Panels */
.panel-btn-wrapper {
    position: relative;
}

.panel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .panel-btn:hover {
        background: rgba(255,255,255,0.14);
        box-shadow: 0 0 12px rgba(34,197,94,0.35), 0 0 28px rgba(34,197,94,0.2);
    }

.panel-arrow {
    font-size: 10px;
}

.dropdown-menu {
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 200px;
    padding: 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0f172a, #020617);
    box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(34,197,94,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.25s ease;
    z-index: 999;
}

.panel-btn-wrapper:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    color: #e5e7eb;
    text-decoration: none;
    border-radius: 8px;
}

    .dropdown-menu a:hover {
        background: rgba(34,197,94,0.12);
    }

.discord-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    background: #5865F2;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(88,101,242,0.45);
}

    .discord-btn:hover {
        background: #4752C4;
    }

    .discord-btn i {
        font-size: 15px;
    }

.services-dropdown,
.support-dropdown,
.dropdown-menu {
    z-index: 2000;
}


.services-btn-wrapper:hover > a::before,
.services-btn-wrapper:hover > a::after,
.support-btn-wrapper:hover > a::before,
.support-btn-wrapper:hover > a::after {
    opacity: 0;
}

.support-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .support-nav-card:hover {
        background: rgba(124,58,237,0.15);
        transform: translateX(6px);
    }

    .support-nav-card .support-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(124,58,237,0.25);
        font-size: 16px;
    }

    .support-nav-card strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .support-nav-card span {
        font-size: 12px;
        opacity: 0.7;
    }

/* ================= GAMES SECTION LAYOUT ================= */
.games-section {
    padding: 120px 20px;
}

.games-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 420px; /* TEXT | CARD */
    align-items: center;
    gap: 60px;
}

/* LEFT TEXT */
.games-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 14px;
}

    .games-title span {
        background: linear-gradient(90deg, #a78bfa, #38bdf8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.games-subtitle {
    font-size: 16px;
    opacity: 0.75;
    max-width: 420px;
}

/* RIGHT CARD AREA */
.games-card-area {
    display: flex;
    justify-content: center;
}

/* ================= MINECRAFT CARD ================= */
.game-card {
    width: 100%;
    max-width: 380px; /* 🔥 REDUCED WIDTH */
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(25,25,60,.7), rgba(10,10,25,.8));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 70px rgba(0,0,0,.65);
    transition: all .3s ease;
    position: relative;
}

    .game-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 90px rgba(0,0,0,.8), 0 0 30px rgba(124,58,237,.25);
    }

/* Badge */
.game-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg,#7c3aed,#22d3ee);
    font-weight: 600;
}

/* Image */
.game-card img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 16px;
}

/* Title */
.game-card h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

/* Price */
.game-price {
    font-size: 15px;
    font-weight: 700;
    color: #22d3ee;
    margin-bottom: 18px;
}

/* Button */
.game-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: white;
    background: linear-gradient(90deg,#7c3aed,#22d3ee);
    transition: all .25s ease;
}

    .game-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 30px rgba(124,58,237,.6);
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .games-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .games-subtitle {
        margin: auto;
    }

    .games-card-area {
        margin-top: 40px;
    }
}

/* ================= GAMES SECTION (STACKED CENTER) ================= */
.games-section {
    padding: 120px 20px;
    text-align: center;
}

.games-container {
    max-width: 900px;
    margin: auto;
    display: flex;
    flex-direction: column; /* STACKED */
    align-items: center;
}

/* TITLE */
.games-title {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 14px;
}

    .games-title span {
        background: linear-gradient(90deg, #a78bfa, #38bdf8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* SUBTITLE */
.games-subtitle {
    font-size: 16px;
    opacity: 0.75;
    margin-bottom: 50px;
    max-width: 520px;
}

/* CARD AREA */
.games-card-area {
    display: flex;
    justify-content: center;
    width: 100%;
}

.game-card {
    width: 100%;
    max-width: 360px; /* nice premium card width */
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(25,25,60,.7), rgba(10,10,25,.85));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 70px rgba(0,0,0,.65);
    transition: all .3s ease;
    position: relative;
}

    .game-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 90px rgba(0,0,0,.8), 0 0 30px rgba(124,58,237,.25);
    }

/* ================= SOLUTIONS SECTION ================= */
.solutions-section {
    padding: 110px 20px 90px;
    text-align: center;
}

.section-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 12px;
}

    .section-title span {
        background: linear-gradient(90deg,#22d3ee,#4ade80);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.section-subtitle {
    font-size: 15px;
    opacity: .65;
    margin-bottom: 60px;
}

/* GRID */
.solutions-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* CARD */
.solution-card {
    padding: 28px 22px;
    border-radius: 16px;
    text-align: left;
    background: linear-gradient(145deg, rgba(20,25,45,.75), rgba(10,12,25,.9));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    transition: all .25s ease;
}

    .solution-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(0,0,0,.7);
    }

/* ICON */
.solution-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

    /* ICON COLORS */
    .solution-icon.purple {
        background: linear-gradient(135deg,#9333ea,#7c3aed);
    }

    .solution-icon.blue {
        background: linear-gradient(135deg,#2563eb,#22d3ee);
    }

    .solution-icon.green {
        background: linear-gradient(135deg,#16a34a,#4ade80);
    }

    .solution-icon.orange {
        background: linear-gradient(135deg,#f97316,#fb923c);
    }

/* TEXT */
.solution-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.solution-card p {
    font-size: 13px;
    opacity: .7;
}

/* ================= WHY SECTION ================= */
.why-section {
    padding: 110px 20px 120px;
    text-align: center;
}

.why-grid {
    max-width: 1200px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 🔥 FORCE 3 PER ROW */
    gap: 26px;
}

@media (max-width: 1000px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.play-section {
    padding: 120px 20px;
}

.play-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* Image slightly bigger */
    gap: 60px;
    align-items: center;
}

/* IMAGE */
.play-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
}

/* RIGHT SIDE CONTENT */
.play-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #38bdf8;
    margin-bottom: 14px;
}

.play-content h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.1;
}

    .play-content h2 span {
        background: linear-gradient(90deg,#7c3aed,#22d3ee);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.play-content p {
    font-size: 15px;
    opacity: .75;
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 520px;
}

.platform-buttons {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    gap: 14px 18px;
}

    .platform-buttons div {
        padding: 14px 0;
        text-align: center;
        font-weight: 600;
        border-radius: 10px;
        cursor: default;
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.08);
        transition: all .25s ease;
    }

        .platform-buttons div:hover {
            border-color: rgba(124,58,237,.6);
            box-shadow: 0 0 18px rgba(124,58,237,.35);
            transform: translateY(-2px);
        }

@media (max-width: 900px) {
    .play-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .play-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .platform-buttons {
        justify-content: center;
        grid-template-columns: repeat(2, 150px);
    }
}

.support-highlight {
    padding: 120px 20px;
    text-align: center;
}

.support-header {
    max-width: 760px;
    margin: 0 auto 60px;
}

    .support-header h2 {
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 14px;
    }

        .support-header h2 span {
            background: linear-gradient(90deg,#22d3ee,#4ade80);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .support-header p {
        font-size: 14px;
        opacity: .7;
        line-height: 1.7;
    }

/* GRID */
.support-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: auto;
}

/* CARD */
.support-highlight-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px;
    border-radius: 16px;
    text-decoration: none;
    color: #e6e9ff;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    transition: all .25s ease;
    text-align: left;
}

    .support-highlight-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 60px rgba(0,0,0,.65), 0 0 25px rgba(124,58,237,.25);
        border-color: rgba(124,58,237,.35);
    }

/* ICON */
.support-highlight-icon {
    font-size: 26px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#7c3aed,#22d3ee);
    box-shadow: 0 0 16px rgba(124,58,237,.4);
}

/* TEXT */
.support-highlight-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.support-highlight-card p {
    font-size: 13px;
    opacity: .75;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .support-highlight-grid {
        grid-template-columns: 1fr;
    }

    .support-highlight-card {
        text-align: left;
    }
}

.performance-section {
    padding: 120px 20px 80px;
    text-align: center;
}

.performance-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.perf-card {
    padding: 26px 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    transition: all .25s ease;
}

    .perf-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 60px rgba(0,0,0,.65), 0 0 25px rgba(124,58,237,.25);
        border-color: rgba(124,58,237,.35);
    }

.perf-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.perf-value {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(90deg,#22d3ee,#4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.perf-label {
    font-size: 13px;
    opacity: .7;
}



.cta-box {
    max-width: 900px;
    width: 100%;
    padding: 60px 40px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(145deg, rgba(124,58,237,.18), rgba(15,8,40,.95));
    border: 1px solid rgba(124,58,237,.35);
    box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(124,58,237,.25);
    backdrop-filter: blur(14px);
}

.cta-icon {
    font-size: 34px;
    margin-bottom: 14px;
}

.cta-box h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cta-box p {
    font-size: 14px;
    opacity: .75;
    margin-bottom: 26px;
}

.cta-button {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #020617;
    background: linear-gradient(90deg,#7c3aed,#22d3ee);
    box-shadow: 0 0 25px rgba(124,58,237,.6);
    transition: all .25s ease;
}

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 35px rgba(124,58,237,.9);
    }

.trustpilot-section {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
}

.trustpilot-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #ffffff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .trustpilot-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(0,0,0,.45);
    }

.tp-star {
    color: #00b67a;
    font-size: 16px;
}

@media (max-width: 900px) {
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }
}

.site-footer {
    background: radial-gradient(ellipse,#1a0033,#05010d);
    padding: 26px 0;
}

.footer-inner {
    max-width: 1200px;
    margin: auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #cbd5f5;
}

.footer-logo {
    display: flex;
    gap: 12px;
    align-items: center;
}

.footer-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.footer-center {
    text-align: center;
    opacity: .6;
    font-size: 12px;
}

.footer-right {
    display: flex;
    gap: 22px;
    justify-content: flex-end;
}

    .footer-right a {
        color: #cbd5f5;
        text-decoration: none;
        gap: 6px;
        display: flex;
    }

@media(max-width:900px) {
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-right {
        justify-content: center;
    }
}

body {
    padding-top: 110px; /* prevents header overlap */
}


@media (max-width: 900px) {
    .cta-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .cta-action {
        justify-content: center;
    }

    .cta-text h2 {
        font-size: 34px;
    }
}

    .cta-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 55px rgba(236,72,153,.6);
    }

@media (max-width: 900px) {
    .cta-text h2 {
        font-size: 34px;
    }

    .cta-text p {
        font-size: 15px;
    }

    .cta-primary {
        width: 100%;
        text-align: center;
    }
}


    .cta-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 60px rgba(236,72,153,.7);
    }



    .cta-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 60px rgba(236,72,153,.7);
    }

@media (max-width: 768px) {
    .cta-text h2 {
        font-size: 34px;
    }

    .cta-primary {
        width: 100%;
    }
}

/* ================= FINAL CENTERED CTA ================= */

.cta-section {
    padding: 140px 20px;
    background: radial-gradient(circle at top left, #2a0a4a, #0b0f19 70%);
    border-top: 1px solid rgba(168,85,247,.2);
    display: flex;
    justify-content: center; /* centers whole block */
}

.cta-container {
    max-width: 850px;
    width: 100%;
    text-align: center;
}

/* Title */
.cta-text h2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    background: linear-gradient(90deg,#a78bfa,#60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 18px;
}

/* Paragraph */
.cta-text p {
    font-size: 16px;
    opacity: 0.85;
    line-height: 1.8;
    margin-bottom: 42px;
}

/* Button */
.cta-primary {
    display: inline-block;
    padding: 18px 48px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    color: white;
    background: linear-gradient(90deg, #9333ea, #ec4899);
    box-shadow: 0 0 40px rgba(168,85,247,.45);
    transition: all .3s ease;
}

    .cta-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 60px rgba(236,72,153,.7);
    }

/* Mobile */
@media (max-width: 768px) {
    .cta-text h2 {
        font-size: 32px;
    }

    .cta-primary {
        width: 100%;
    }
}

.cta-section {
    position: relative;
    overflow: hidden;
}

    /* Glow blob */
    .cta-section::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(168,85,247,0.25), transparent 60%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: ctaGlowMove 12s ease-in-out infinite alternate;
        z-index: 0;
    }

@keyframes ctaGlowMove {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-45%, -55%) scale(1.2);
    }
}

/* Keep content above glow */
.cta-container {
    position: relative;
    z-index: 1;
}

.cta-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

    .cta-particles span {
        position: absolute;
        bottom: -20px;
        width: 6px;
        height: 6px;
        background: rgba(255,255,255,0.6);
        border-radius: 50%;
        animation: floatUp linear infinite;
        opacity: 0.7;
    }

        /* Random positions & speeds */
        .cta-particles span:nth-child(1) {
            left: 10%;
            animation-duration: 7s;
        }

        .cta-particles span:nth-child(2) {
            left: 25%;
            animation-duration: 9s;
        }

        .cta-particles span:nth-child(3) {
            left: 40%;
            animation-duration: 8s;
        }

        .cta-particles span:nth-child(4) {
            left: 55%;
            animation-duration: 10s;
        }

        .cta-particles span:nth-child(5) {
            left: 70%;
            animation-duration: 6s;
        }

        .cta-particles span:nth-child(6) {
            left: 80%;
            animation-duration: 11s;
        }

        .cta-particles span:nth-child(7) {
            left: 35%;
            animation-duration: 12s;
        }

        .cta-particles span:nth-child(8) {
            left: 60%;
            animation-duration: 9s;
        }

@keyframes floatUp {
    from {
        transform: translateY(0);
        opacity: 0.7;
    }

    to {
        transform: translateY(-600px);
        opacity: 0;
    }
}

.cta-primary {
    position: relative;
    animation: ctaPulse 2.4s infinite;
}

@keyframes ctaPulse {
    0% {
        box-shadow: 0 0 25px rgba(168,85,247,.45);
    }

    50% {
        box-shadow: 0 0 55px rgba(236,72,153,.75);
    }

    100% {
        box-shadow: 0 0 25px rgba(168,85,247,.45);
    }
}

/* Mouse glow layer */
.cta-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    z-index: 0;
    transition: left 0.08s linear, top 0.08s linear;
}

.shooting-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

    .shooting-stars span {
        position: absolute;
        top: -50px;
        width: 2px;
        height: 80px;
        background: linear-gradient(180deg, white, transparent);
        opacity: 0.8;
        transform: rotate(45deg);
        animation: shootStar linear infinite;
    }

        .shooting-stars span:nth-child(1) {
            left: 20%;
            animation-duration: 6s;
        }

        .shooting-stars span:nth-child(2) {
            left: 50%;
            animation-duration: 8s;
        }

        .shooting-stars span:nth-child(3) {
            left: 75%;
            animation-duration: 7s;
        }

@keyframes shootStar {
    from {
        transform: translateY(0) translateX(0) rotate(45deg);
        opacity: 1;
    }

    to {
        transform: translateY(600px) translateX(200px) rotate(45deg);
        opacity: 0;
    }
}

.cta-primary {
    position: relative;
    overflow: hidden;
}

    /* Sparkles */
    .cta-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2px), radial-gradient(circle, rgba(255,255,255,0.7) 2px, transparent 2px), radial-gradient(circle, rgba(255,255,255,0.6) 2px, transparent 2px);
        background-size: 20px 20px, 30px 30px, 40px 40px;
        opacity: 0;
        transition: opacity 0.3s ease;
        animation: sparkleMove 1s linear infinite;
    }

    .cta-primary:hover::after {
        opacity: 1;
    }

@keyframes sparkleMove {
    from {
        background-position: 0 0, 10px 10px, 20px 20px;
    }

    to {
        background-position: 40px -40px, -30px 30px, 60px -60px;
    }
}

body {
    background: linear-gradient(-45deg, #0b0f19, #140a2a, #0b0f19, #1a0f35);
    background-size: 400% 400%;
    animation: bgShift 18s ease infinite;
}

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

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

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

/* ================= HERO SECTION ================= */
.hero {
    position: relative;
    padding: 140px 8% 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
    overflow: hidden;
}

/* Animated Glow Background */
.hero-bg-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 65%);
    top: 10%;
    left: 5%;
    filter: blur(60px);
    animation: heroGlowMove 12s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes heroGlowMove {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(40px);
    }
}

/* Floating Orbs */
.hero-orbs span {
    position: absolute;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(59,130,246,.25), transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    animation: floatOrb 18s infinite alternate ease-in-out;
    z-index: 0;
}

    .hero-orbs span:nth-child(2) {
        left: 60%;
        top: 20%;
        background: radial-gradient(circle, rgba(236,72,153,.25), transparent 70%);
        animation-duration: 22s;
    }

    .hero-orbs span:nth-child(3) {
        left: 30%;
        top: 60%;
        background: radial-gradient(circle, rgba(34,197,94,.25), transparent 70%);
        animation-duration: 26s;
    }

@keyframes floatOrb {
    from {
        transform: translateY(-30px);
    }

    to {
        transform: translateY(30px);
    }
}

/* Content above glow */
.hero-left, .hero-card {
    position: relative;
    z-index: 1;
}

/* Headline */
.hero h1 {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(90deg, #a78bfa, #60a5fa, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .hero h1 span {
        display: block;
        font-size: 46px;
    }

/* Paragraph */
.hero p {
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.8;
    max-width: 640px;
}

/* CTA Button */
.btn-primary {
    display: inline-block;
    margin-top: 34px;
    padding: 16px 36px;
    border-radius: 14px;
    background: linear-gradient(90deg, #9333ea, #ec4899);
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 0 30px rgba(168,85,247,.5);
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 55px rgba(236,72,153,.8);
    }

/* Feature Badges */
.features {
    margin-top: 45px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.feature-box {
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    font-size: 14px;
    color: #e2e8f0;
}

/* Right Info Card */
.hero-card {
    flex: 1;
    min-width: 320px;
    max-width: 440px;
    padding: 40px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(30,20,60,.7), rgba(15,10,35,.9));
    border: 1px solid rgba(124,58,237,.3);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 70px rgba(0,0,0,.6);
    text-align: center;
}

    .hero-card h3 {
        font-size: 22px;
        margin-bottom: 12px;
        color: #93c5fd;
    }

    .hero-card p {
        font-size: 14px;
        color: #cbd5e1;
    }

/* Responsive */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 120px;
    }

        .hero h1 {
            font-size: 40px;
        }

            .hero h1 span {
                font-size: 32px;
            }

    .features {
        justify-content: center;
    }
}

/* HERO STARFIELD CANVAS */
#hero-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
}

/* CURSOR GLOW TRAIL */
.cursor-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(124,58,237,.35), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    mix-blend-mode: screen;
    transition: transform 0.05s linear;
}

.hero-left, .hero-card {
    position: relative;
    z-index: 2;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

    .hero-stars span {
        position: absolute;
        top: -100px;
        width: 2px;
        height: 120px;
        background: linear-gradient(180deg, white, transparent);
        opacity: 0.8;
        transform: rotate(45deg);
        animation: heroShoot linear infinite;
    }

        .hero-stars span:nth-child(1) {
            left: 20%;
            animation-duration: 6s;
        }

        .hero-stars span:nth-child(2) {
            left: 55%;
            animation-duration: 8s;
        }

        .hero-stars span:nth-child(3) {
            left: 80%;
            animation-duration: 7s;
        }

@keyframes heroShoot {
    from {
        transform: translateY(0) translateX(0) rotate(45deg);
        opacity: 1;
    }

    to {
        transform: translateY(700px) translateX(250px) rotate(45deg);
        opacity: 0;
    }
}

.hero {
    transition: transform 0.2s ease-out;
}

.btn-primary {
    position: relative;
    overflow: hidden;
}

    .btn-primary::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 60%);
        border-radius: 50%;
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
    }

    .btn-primary:hover::after {
        animation: ripple 0.6s ease-out;
    }

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }

    100% {
        transform: scale(12);
        opacity: 0;
    }
}

.hero h1 {
    position: relative;
    z-index: 2;
}

    .hero h1::before {
        content: "";
        position: absolute;
        inset: -60px;
        background: conic-gradient( from 0deg, rgba(168,85,247,0.25), transparent 20%, rgba(59,130,246,0.25), transparent 40% );
        filter: blur(60px);
        z-index: -1;
        animation: raysSpin 18s linear infinite;
    }

@keyframes raysSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-left, .hero-card {
    position: relative;
    z-index: 2;
}

.why-section {
    padding: 120px 8% 120px;
    text-align: center;
    position: relative;
    background: radial-gradient(circle at 20% 20%, rgba(124,58,237,.15), transparent 40%), radial-gradient(circle at 80% 30%, rgba(34,211,238,.12), transparent 45%), #070b1a;
    overflow: hidden;
}

.gradient-text-animated {
    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(270deg, #60a5fa, #a78bfa, #ec4899, #60a5fa);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: neonShift 8s ease infinite;
}

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

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

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

.why-subtitle {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 4px;
    color: #22d3ee;
    opacity: .8;
}

.why-card {
    background: linear-gradient(145deg, rgba(20,25,45,.75), rgba(10,12,25,.9));
    border-radius: 18px;
    padding: 28px;
    text-align: left;
    border: 1px solid rgba(124,58,237,.25);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

    .why-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(120deg, #7c3aed, #22d3ee, #a78bfa);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .35s ease;
    }

    .why-card:hover::before {
        opacity: 1;
    }

    .why-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(124,58,237,.35);
    }

.why-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 8px;
    box-shadow: 0 0 15px currentColor;
}

/* Color Variants Glow */
.pink {
    color: #ec4899;
    background: rgba(236,72,153,.12);
}

.purple {
    color: #a855f7;
    background: rgba(168,85,247,.12);
}

.cyan {
    color: #22d3ee;
    background: rgba(34,211,238,.12);
}

.green {
    color: #22c55e;
    background: rgba(34,197,94,.12);
}

.yellow {
    color: #facc15;
    background: rgba(250,204,21,.12);
}

.blue {
    color: #3b82f6;
    background: rgba(59,130,246,.12);
}

.why-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

    .why-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        background: rgba(124,58,237,.6);
        border-radius: 50%;
        animation: floatWhy 12s infinite ease-in-out alternate;
    }

        .why-particles span:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .why-particles span:nth-child(2) {
            top: 60%;
            left: 80%;
            animation-delay: 2s;
        }

        .why-particles span:nth-child(3) {
            top: 40%;
            left: 50%;
            animation-delay: 4s;
        }

        .why-particles span:nth-child(4) {
            top: 75%;
            left: 25%;
            animation-delay: 6s;
        }

@keyframes floatWhy {
    from {
        transform: translateY(-10px);
        opacity: .5;
    }

    to {
        transform: translateY(20px);
        opacity: 1;
    }
}

.why-grid {
    position: relative;
    z-index: 2;
}

.why-section::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(124,58,237,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(800px) rotateX(65deg);
    opacity: 0.4;
    z-index: 0;
}

.why-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 2px, transparent 4px );
    animation: scanMove 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100px;
    }
}

.why-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
    transform: skewX(-20deg);
}

.why-card:hover::after {
    animation: cardSweep 1.2s ease;
}

@keyframes cardSweep {
    to {
        left: 140%;
    }
}

.why-icon {
    animation: iconPulse 3s ease-in-out infinite alternate;
}

@keyframes iconPulse {
    from {
        box-shadow: 0 0 12px currentColor;
    }

    to {
        box-shadow: 0 0 28px currentColor;
    }
}

.gradient-text-animated {
    position: relative;
}

    .gradient-text-animated::after {
        content: "";
        position: absolute;
        inset: -20px -40px;
        background: radial-gradient(circle, rgba(168,85,247,.35), transparent 60%);
        filter: blur(40px);
        z-index: -1;
        animation: electricGlow 4s ease-in-out infinite alternate;
    }

@keyframes electricGlow {
    from {
        opacity: .5;
        transform: scale(1);
    }

    to {
        opacity: .9;
        transform: scale(1.2);
    }
}

.cyber-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

    .cyber-lines span {
        position: absolute;
        width: 2px;
        height: 120px;
        background: linear-gradient(to bottom, transparent, #7c3aed, transparent);
        opacity: .4;
        animation: driftLine 10s linear infinite;
    }

        .cyber-lines span:nth-child(1) {
            left: 15%;
            animation-duration: 9s;
        }

        .cyber-lines span:nth-child(2) {
            left: 50%;
            animation-duration: 12s;
        }

        .cyber-lines span:nth-child(3) {
            left: 75%;
            animation-duration: 11s;
        }

@keyframes driftLine {
    from {
        transform: translateY(-150px);
    }

    to {
        transform: translateY(800px);
    }
}

.why-grid {
    position: relative;
    z-index: 2;
}

.gradient-text-animated {
    z-index: 2;
}

.series-section {
    position: relative;
    padding: 100px 8%;
    text-align: center;
    background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.12), transparent 40%), radial-gradient(circle at 80% 30%, rgba(239,68,68,.12), transparent 45%), #060912;
    overflow: hidden;
}

    .series-section h2 {
        font-size: 38px;
        font-weight: 800;
        background: linear-gradient(90deg, #60a5fa, #a78bfa, #f43f5e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titlePulse 6s ease-in-out infinite alternate;
    }

@keyframes titlePulse {
    from {
        filter: drop-shadow(0 0 10px rgba(124,58,237,.4));
    }

    to {
        filter: drop-shadow(0 0 25px rgba(236,72,153,.7));
    }
}

.series-card {
    animation: floatIdle 4s ease-in-out infinite;
}

    .series-card:nth-child(2) {
        animation-delay: 2s;
    }

@keyframes floatIdle {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.series-card {
    position: relative;
    overflow: hidden;
}

    .series-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(120deg, #3b82f6, #a855f7, #ef4444);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .3s ease;
    }

    .series-card:hover::before {
        opacity: 1;
    }

    .series-card:hover {
        transform: translateY(-12px) scale(1.04);
        box-shadow: 0 20px 60px rgba(124,58,237,.4);
    }

    .series-card.intel:hover {
        box-shadow: 0 0 40px rgba(59,130,246,.6);
    }

    .series-card.amd:hover {
        box-shadow: 0 0 40px rgba(239,68,68,.6);
    }

    .series-card.burst::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: radial-gradient(circle, rgba(255,255,255,.8), transparent 60%);
        animation: burstFlash .6s ease-out;
    }

@keyframes burstFlash {
    from {
        opacity: .8;
        transform: scale(.8);
    }

    to {
        opacity: 0;
        transform: scale(1.6);
    }
}

.series-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

    .series-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #a855f7;
        border-radius: 50%;
        opacity: .6;
        animation: floatSeries 12s infinite ease-in-out alternate;
    }

        .series-particles span:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .series-particles span:nth-child(2) {
            top: 60%;
            left: 80%;
            animation-delay: 2s;
        }

        .series-particles span:nth-child(3) {
            top: 40%;
            left: 50%;
            animation-delay: 4s;
        }

        .series-particles span:nth-child(4) {
            top: 75%;
            left: 25%;
            animation-delay: 6s;
        }

@keyframes floatSeries {
    from {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(20px);
    }
}

.series-grid, .finder-btn, .series-section h2, .subtitle {
    position: relative;
    z-index: 2;
}

/* ===== PLANS WRAPPER ===== */
.plans-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
    padding: 40px 20px 80px;
    max-width: 1400px;
    margin: auto;
}

/* ===== PLAN CARD BASE ===== */
.plan-box {
    position: relative;
    background: linear-gradient(145deg, #0f172a, #0b1120);
    border-radius: 18px;
    padding: 28px 22px;
    color: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.35s ease;
    overflow: hidden;
}

    /* Glow hover */
    .plan-box:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 50px rgba(0, 255, 255, 0.15);
        border-color: rgba(0, 255, 255, 0.4);
    }

    /* Subtle animated glow border */
.plan-box {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

    .plan-box::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: 18px;
        background: linear-gradient( 270deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #0066ff, #cc00ff, #ff0000 );
        background-size: 400% 400%;
        animation: rgbBorderMove 8s linear infinite;
        /* Mask to show only border */
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

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

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

.plan-box:hover::before {
    animation-duration: 3s;
    filter: blur(1px);
}


/* ===== HEADER ===== */
.plan-header {
    text-align: center;
    margin-bottom: 15px;
}

    .plan-header img {
        width: 55px;
        margin-bottom: 10px;
        filter: drop-shadow(0 0 8px rgba(0,255,255,0.6));
    }

    .plan-header h3 {
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: 700;
    }

/* ===== PRICE ===== */
.plan-price {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    margin: 12px 0 18px;
    color: #00f0ff;
}

    .plan-price span {
        font-size: 14px;
        color: #aaa;
        font-weight: 500;
    }

/* ===== SPECS ===== */
.plan-specs {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.spec {
    background: rgba(255,255,255,0.04);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .spec i {
        color: #00f0ff;
    }

    .spec.wide {
        grid-column: span 2;
    }

/* ===== EXTRAS ===== */
.plan-extras {
    font-size: 13px;
    color: #bbb;
    margin-bottom: 18px;
    display: grid;
    gap: 6px;
}

/* ===== FEATURES LIST ===== */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 14px;
}

    .plan-features li {
        margin-bottom: 6px;
        color: #ddd;
    }

/* ===== BUTTON ===== */
.plan-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, #00f0ff, #7b2cff);
    color: white;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    transition: 0.3s;
}

    .plan-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 18px rgba(0,255,255,0.6);
    }

@media (max-width: 600px) {
    .plan-price {
        font-size: 24px;
    }

    .plan-header h3 {
        font-size: 18px;
    }
}

/* ===== TOP BADGE (FIXED) ===== */
.most-sold-badge {
    position: absolute;
    top: 14px;
    left: 45%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    z-index: 5;
    backdrop-filter: blur(6px);
}

/* Most Popular */
.most-sold-badge {
    background: linear-gradient(90deg, #ff4ecd, #7b2cff);
    box-shadow: 0 0 14px rgba(255, 0, 200, 0.6);
}

/* Recommended */
.badge-recommended {
    background: linear-gradient(90deg, #00ffcc, #00b3ff);
    box-shadow: 0 0 14px rgba(0, 255, 200, 0.6);
}

.most-sold-badge i,
.plan-badge i {
    margin-right: 15px;
}

.plan-badge {
    position: absolute;
    top: 14px;
    left: 45%;
    transform: translateX(-50%);
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    z-index: 5;
    backdrop-filter: blur(6px);
}

/* ===== PLANS SECTION BACKGROUND FX ===== */
.plans-wrapper {
    position: relative;
    z-index: 2;
}

.plans-bg-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

    .plans-bg-effects span {
        position: absolute;
        width: 6px;
        height: 6px;
        background: rgba(0, 255, 255, 0.6);
        border-radius: 50%;
        box-shadow: 0 0 12px rgba(0,255,255,0.8);
        animation: floatParticles 12s linear infinite;
    }

        /* Random positions */
        .plans-bg-effects span:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .plans-bg-effects span:nth-child(2) {
            left: 20%;
            animation-delay: 2s;
        }

        .plans-bg-effects span:nth-child(3) {
            left: 30%;
            animation-delay: 4s;
        }

        .plans-bg-effects span:nth-child(4) {
            left: 40%;
            animation-delay: 1s;
        }

        .plans-bg-effects span:nth-child(5) {
            left: 50%;
            animation-delay: 3s;
        }

        .plans-bg-effects span:nth-child(6) {
            left: 60%;
            animation-delay: 5s;
        }

        .plans-bg-effects span:nth-child(7) {
            left: 70%;
            animation-delay: 2s;
        }

        .plans-bg-effects span:nth-child(8) {
            left: 80%;
            animation-delay: 6s;
        }

        .plans-bg-effects span:nth-child(9) {
            left: 90%;
            animation-delay: 4s;
        }

        .plans-bg-effects span:nth-child(10) {
            left: 15%;
            animation-delay: 7s;
        }

@keyframes floatParticles {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-120%);
        opacity: 0;
    }
}

/* Base icon styling */
.plan-header img {
    width: 55px;
    margin-bottom: 10px;
    transition: 0.4s ease;
    animation: iconPulse 3s ease-in-out infinite alternate;
}

@keyframes iconPulse {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-4px);
    }
}

/* ===== ICON GLOWS PER PLAN ===== */

/* Dirt */
.dirt-plan .plan-header img {
    filter: drop-shadow(0 0 8px #8b5a2b);
}

/* Stone */
.stone-plan .plan-header img {
    filter: drop-shadow(0 0 8px #9e9e9e);
}

/* Coal */
.coal-plan .plan-header img {
    filter: drop-shadow(0 0 10px #2b2b2b);
}

/* Iron */
.iron-plan .plan-header img {
    filter: drop-shadow(0 0 10px #d8d8d8);
}

/* Redstone */
.redstone-plan .plan-header img {
    filter: drop-shadow(0 0 12px #ff2a2a);
}

/* Lapis */
.lapis-plan .plan-header img {
    filter: drop-shadow(0 0 12px #2a6bff);
}

/* Gold */
.gold-plan .plan-header img {
    filter: drop-shadow(0 0 12px #ffd700);
}

/* Emerald */
.emerald-plan .plan-header img {
    filter: drop-shadow(0 0 14px #00ff88);
}

/* Diamond */
.diamond-plan .plan-header img {
    filter: drop-shadow(0 0 14px #00eaff);
}

/* Infinity */
.infinity-plan .plan-header img {
    filter: drop-shadow(0 0 16px #ff00ff);
}

.plan-box:hover .plan-header img {
    transform: translateY(-6px) scale(1.08);
}