/* ==========================================
   GOOGLE FONT & RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Space Grotesk',sans-serif;
    background:#0B0813;
    color:#f0ecf9;
    overflow-x:hidden;
    position:relative;

}

/* ==========================================
            PAGE
========================================== */

.page{
    position:relative;
    z-index:2;
}

/* ==========================================
        NEBULA BACKGROUND
========================================== */

.nebula{

    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    opacity:.22;
    z-index:-2;

}

.nebula-1{

    width:500px;
    height:500px;

    background:#8b5cf6;

    top:-120px;
    left:-120px;

}

.nebula-2{

    width:450px;
    height:450px;

    background:#7c3aed;

    bottom:-120px;
    right:-120px;

}

.nebula-3{

    width:320px;
    height:320px;

    background:#d946ef;

    top:45%;
    left:45%;

}

/* ==========================================
        NAVBAR
========================================== */

.navbar{

    position:sticky;
    top:0;

    width:100%;

    z-index:100;

    backdrop-filter:blur(20px);

    background:rgba(12,10,20,.72);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.nav-inner{

    width:min(1200px,92%);
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 0;

}

/* ==========================================
        BRAND
========================================== */

.brand{

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:white;

    font-size:1.3rem;
    font-weight:700;

}

.logo-img{

    width:52px;
    height:52px;

    border-radius:50%;
    object-fit:cover;

    border:3px solid #b46cff;

}

/* ==========================================
        NAV LINKS
========================================== */

.nav-links{

    display:flex;
    align-items:center;
    gap:35px;

}

.nav-links a{

    text-decoration:none;
    color:#d7d4df;

    transition:.35s;

    font-weight:500;

}

.nav-links a:hover{

    color:#c084fc;

}

/* ==========================================
        BUTTONS
========================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;

    border-radius:14px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:linear-gradient(135deg,#8b5cf6,#c026d3);

    transition:.35s;

    box-shadow:
    0 0 18px rgba(139,92,246,.35);

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 18px rgba(139,92,246,.7),
    0 0 45px rgba(192,38,211,.35);

}

/* ==========================================
            HERO
========================================== */

.hero{

    width:min(1200px,92%);
    margin:auto;

    padding:110px 0 70px;

    text-align:center;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(139,92,246,.12);

    border:1px solid rgba(192,38,211,.45);

    color:#d8b4fe;

    font-size:.95rem;

    margin-bottom:28px;

}

.hero h1{

    font-size:3.8rem;
    line-height:1.15;

    font-weight:700;

}

.hero h1 span{

    color:#c084fc;

}

.hero p{

    width:min(700px,100%);
    margin:30px auto 0;

    color:#b7b2c5;

    line-height:1.8;

    font-size:1.08rem;

}

/* ==========================================
        PRICING SECTION WRAPPER
========================================== */

.pricing-section{

    width:min(1250px,92%);
    margin:auto;

    padding:70px 0;

}

/* ==========================================
        COMMON SECTION TITLE
========================================== */

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title h2{

    font-size:2.8rem;
    margin-bottom:15px;

}

.section-title p{

    color:#9ca3af;

    max-width:700px;
    margin:auto;

    line-height:1.8;

}

/* ==========================================
        PRICING GRID
========================================== */

.pricing-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:45px;

    align-items:start;

}

/* ==========================================
        PRICING CARD
========================================== */

.pricing-card{

    position:relative;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:40px 35px;

    transition:.45s ease;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

}

/* ==========================================
        PREMIUM CARD
========================================== */

.pricing-card.premium{

    border:1px solid rgba(192,38,211,.45);

    box-shadow:
    0 0 30px rgba(139,92,246,.18),
    0 25px 60px rgba(0,0,0,.3);

}

/* ==========================================
        CARD HOVER
========================================== */

.pricing-card:hover{

    transform:translateY(-12px);

    border-color:#c084fc;

    box-shadow:

    0 0 20px rgba(192,38,211,.35),

    0 0 60px rgba(139,92,246,.22),

    0 25px 60px rgba(0,0,0,.35);

}

/* ==========================================
        POPULAR BADGE
========================================== */

.popular-badge{

    position:absolute;

    top:20px;
    right:20px;

    padding:8px 18px;

    background:linear-gradient(
    135deg,
    #8b5cf6,
    #d946ef
    );

    border-radius:40px;

    color:white;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:
    0 0 18px rgba(217,70,239,.45);

}

/* ==========================================
        PLAN TITLE
========================================== */

.plan-title{

    margin-bottom:35px;

}

.plan-title h2{

    font-size:2rem;

    color:#ffffff;

    margin-bottom:10px;

}

.plan-title p{

    color:#b8b3c6;

    line-height:1.7;

}

/* ==========================================
        FEATURE LIST
========================================== */

.feature-list{

    list-style:none;

    display:flex;
    flex-direction:column;

    gap:16px;

    margin-bottom:35px;

}

.feature-list li{

    color:#ece8f8;

    font-size:1rem;

    line-height:1.6;

    padding-left:5px;

    transition:.3s;

}

.feature-list li:hover{

    color:#c084fc;

    transform:translateX(6px);

}

/* ==========================================
        DISABLED FEATURES
========================================== */

.feature-list .disabled{

    color:#7d7a89;

    opacity:.85;

}

.feature-list .disabled:hover{

    color:#8b8796;

    transform:none;

}

/* ==========================================
        CERTIFICATE PREVIEW
========================================== */

.certificate-preview{

    margin-top:25px;

}

.certificate-placeholder{

    width:100%;

    height:240px;

    border-radius:20px;

    border:2px dashed rgba(192,38,211,.45);

    background:rgba(255,255,255,.03);

    display:flex;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    text-align:center;

    color:#b8b3c6;

    transition:.4s;

    font-size:1rem;

    line-height:1.8;

}

.certificate-placeholder:hover{

    border-color:#c084fc;

    background:rgba(192,38,211,.08);

    transform:scale(1.02);

}

/* ==========================================
        ACTUAL CERTIFICATE IMAGE
========================================== */

.certificate-image{

    width:100%;

    border-radius:20px;

    display:block;

    transition:.45s;

}

.certificate-image:hover{

    transform:scale(1.03);

}

/* ==========================================
        CARD BUTTONS
========================================== */

.enroll-btn,
.premium-btn{

    width:100%;

    margin-top:30px;

    padding:16px;

    font-size:1rem;

    border-radius:16px;

    text-align:center;

}

.enroll-btn{

    background:linear-gradient(
    135deg,
    #7c3aed,
    #8b5cf6
    );

}

.premium-btn{

    background:linear-gradient(
    135deg,
    #9333ea,
    #d946ef
    );

}

.enroll-btn:hover,
.premium-btn:hover{

    transform:translateY(-5px);

    box-shadow:

    0 0 20px rgba(139,92,246,.5),

    0 0 50px rgba(217,70,239,.25);

}

/* ==========================================
        COMPARISON NOTE
========================================== */

.comparison-note{

    width:min(1200px,92%);
    margin:auto;

    padding:40px 0 90px;

}

.note-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:50px;

    text-align:center;

    transition:.4s;

}

.note-card:hover{

    transform:translateY(-6px);

    border-color:#c084fc;

    box-shadow:
    0 0 25px rgba(139,92,246,.22);

}

.note-card h2{

    font-size:2.2rem;

    margin-bottom:20px;

    color:#ffffff;

}

.note-card p{

    max-width:850px;

    margin:auto;

    line-height:1.9;

    color:#b7b2c5;

}

/* ==========================================
        FOOTER
========================================== */

.footer{

    margin-top:80px;

    background:rgba(255,255,255,.04);

    border-top:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    padding:70px 0 25px;

}

.footer-grid{

    width:min(1200px,92%);
    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:45px;

}

.footer h3,
.footer h4{

    margin-bottom:18px;

    color:#ffffff;

}

.footer p{

    color:#b8b3c6;

    line-height:1.8;

}

.footer-bottom{

    text-align:center;

    margin-top:45px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#8f8b99;

    font-size:.95rem;

}

/* ==========================================
        FLOATING NEBULA ANIMATION
========================================== */

@keyframes floatNebula{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(25px,-35px);

    }

    100%{

        transform:translate(0,0);

    }

}

.nebula-1{

    animation:floatNebula 12s ease-in-out infinite;

}

.nebula-2{

    animation:floatNebula 15s ease-in-out infinite reverse;

}

.nebula-3{

    animation:floatNebula 18s ease-in-out infinite;

}

/* ==========================================
        FADE IN
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero,
.pricing-card,
.note-card{

    animation:fadeUp .8s ease;

}

/* ==========================================
        TABLET
========================================== */

@media (max-width:991px){

    .hero h1{

        font-size:3rem;

    }

    .pricing-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .nav-links{

        gap:20px;

    }

}

/* ==========================================
        MOBILE
========================================== */

@media (max-width:768px){

    .nav-inner{

        flex-direction:column;

        gap:20px;

        padding:20px 0;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }

    .hero{

        padding:80px 0 50px;

    }

    .hero h1{

        font-size:2.3rem;

        line-height:1.3;

    }

    .hero p{

        font-size:1rem;

    }

    .pricing-card{

        padding:30px 25px;

    }

    .plan-title h2{

        font-size:1.7rem;

    }

    .popular-badge{

        position:static;

        display:inline-block;

        margin-bottom:20px;

    }

    .certificate-placeholder{

        height:180px;

    }

    .note-card{

        padding:35px 25px;

    }

    .note-card h2{

        font-size:1.8rem;

    }

}

/* ==========================================
        SMALL DEVICES
========================================== */

@media (max-width:480px){

    .hero h1{

        font-size:2rem;

    }

    .hero-badge{

        font-size:.85rem;

    }

    .btn{

        width:100%;

    }

    .pricing-card{

        border-radius:22px;

    }

    .certificate-placeholder{

        height:150px;

        font-size:.9rem;

    }

    .footer-grid{

        text-align:center;

    }

}