:root {
    --bg: #050a12;
    --bg2: #0c1220;
    --bg3: #111827;
    --a: #3B82F6;
    --ah: #60a5fa;
    --as: rgba(59, 130, 246, .07);
    --ab: rgba(59, 130, 246, .2);
    --t: #ffffff;
    --t2: #94a3b8;
    --t3: #64748b;
    --bd: rgba(255, 255, 255, .05);
    --ind: #818cf8;
    --grn: #34d399;
    --gs: rgba(52, 211, 153, .08);
    --gb: rgba(52, 211, 153, .2)
}

.bg-dark {
    background: #050a12;
    color: #fff;
}

    .text-gradient-highlight {
        background: linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    #price_sticky {
        border-top: 1px solid rgba(59,130,246,.2) !important;
    }

    .for-engg-feature-card {
        border-radius: 15px;
        padding: 2rem;
    }
    .for-engg-feature-card:hover {
        border-color: #3B82F6;
    }
    .for-engg-feature-card .icon {
        width: 40px;
        height: 40px;
        border: 1.5px solid #e2e8f0;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: border-color 0.3s;
        margin-bottom: 1.25rem;
    }
    .for-engg-feature-card .icon svg {
        width: 20px;
        height: 20px;
        stroke: #000;
        stroke-width: 1.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .for-engg-feature-card:hover .icon {
        border-color: #3B82F6;
    }
    .for-engg-feature-card:hover .icon svg {
        stroke: #3B82F6;
    }

    .for-engg-feature-card h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .for-engg-feature-card p {
        margin-bottom: 0;
        font-size: 1rem;
        color: #475569;
    }

    .engg-prereq h4 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        gap: .75rem;
        align-items: center;
        display: flex;
    }
    .engg-prereq h4 svg {
        width: 18px;
        height: 18px;
        stroke: #475569;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .prereq-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1.25rem;
    }

    .prereq-list .prereq-item {
        display: flex;
        align-items: start;
        gap: 1rem;
    }

    .prereq-list .prereq-item svg {
        width: 14px;
        height: 14px;
        stroke: #3B82F6;
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
        margin-top: 3px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .framework-card:before {
        content: '';
        width: 100%;
        height: 2px;
        background-color: #3B82F6;
    }
    .framework-card {
        border-radius: 16px;
    }

    .tutor-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
        max-width: 1000px;
        margin: 3rem auto 0;
    }

    .tutor {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 20px;
        padding: 2rem 1.5rem;
        transition: all .3s;
    }

    .tutor:hover {
        border-color: rgba(59,130,246,.5);
        transform: translateY(-3px);
    }

    .tutor-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid rgba(59,130,246,.2);
    }

    .tutor-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .tutor h3 {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 0;
    }

    .tutor .role {
        color: #3B82F6;
        font-size: .72rem;
        font-weight: 600;
        margin-bottom: .2rem;
    }

    .tutor p {
        color: #94a3b8;
        font-size: .8rem;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .engg-block,
    .engg-prereq {
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 20px;
        padding: 2rem;
        text-align: center;
    }

    .framework-grid .framework-item {
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 16px;
        padding: 2rem 1.5rem;
        text-align: center;
        transition: all .3s;
        max-width: 30%;
    }

    .roadmap-steps {
        max-width: 900px;
        margin: 0 auto;
    }

    .roadmap-steps .step-item {
        flex: 1;
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 16px;
        padding: 1.5rem 1rem;
        text-align: center;
        transition: all .3s;
    }

    .roadmap-steps .arrow {
        width: 24px;
        flex-shrink: 0;
        text-align: center;
        color: #64748b;
        font-size: .9rem;
    }

    .roadmap-steps .step-item .step {
        font-size: .55rem;
        font-weight: 700;
        color: #3B82F6;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: .5rem;
    }
    .roadmap-steps .step-item h3 {
        font-size: 1.1rem;
        font-weight: 800;
    }
    .roadmap-steps .step-item p {
        margin-bottom: 0;
        color: #94a3b8;
        font-size: .72rem;
        margin-top: .2rem;
    }

    .endresult-grid .endresult-item {
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 16px;
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .endresult-grid .endresult-item h3 {
        font-size: 1.05rem;
        font-weight: 800;
        margin-bottom: .3rem;
        letter-spacing: -.3px;
    }

    .endresult-grid .endresult-item p {
        margin-bottom: 0;
        color: #94a3b8;
        font-size: .8rem;
        line-height: 1.5;
    }

    .rm-card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .6rem;
    }

    .rm-card {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 1.2rem .8rem;
        text-align: center;
        transition: all .3s;
    }

    .rm-card:hover {
        border-color: var(--ab);
        transform: translateY(-3px);
    }

    /* Required CSS variables for the curriculum section from V8 HTML */
    .pricing-block,
    .mx-w-px950 {
        --bg2: #0c1220;
        --a: #3B82F6;
        --ab: rgba(59, 130, 246, .2);
        --ind: #818cf8;
        --t3: #64748b;
        --grn: #34d399;
        --bd: rgba(255, 255, 255, .05);
    }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s ease
    }

    .reveal.visible {
      opacity: 1 !important;
      transform: translateY(0) !important
    }

    .price-card {
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 24px;
        padding: 3rem;
        max-width: 480px;
        margin: 0 auto 1.75rem;
        text-align: center;
        position: relative;
    }

    .price-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 3rem;
        right: 3rem;
        height: 2px;
        background: linear-gradient(90deg, #3B82F6, #818cf8);
        border-radius: 0 0 2px 2px;
    }

    .price-card .tag {
        font-size: .65rem;
        font-weight: 700;
        color: #3B82F6;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .price-card .amt {
        font-size: 3.5rem;
        font-weight: 900;
        letter-spacing: -3px;
        margin: .3rem 0;
    }

    .price-card .per {
        color: #64748b;
        font-size: .8rem;
        margin-bottom: 1rem;
    }

    .price-card .price-points {
        list-style: none;
        text-align: left;
        margin-bottom: 1.5rem;
        padding-left: 0;
    }

    .price-card .price-points li {
        padding: .4rem 0;
        color: #94a3b8;
        font-size: .82rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .price-card .price-points li::before {
        content: '✓';
        color: #34d399;
        font-weight: 700;
        font-size: .75rem;
    }

    .price-card .pnote {
        color: #64748b;
        font-size: .65rem;
        margin-top: .6rem;
    }

    .included-bootcamp-card {
        background: rgba(59,130,246,.07);
        border: 1px solid rgba(59,130,246,.2);
    }
    .own-bootcamp-card {
        background: rgba(52,211,153,.08);
        border: 1px solid rgba(52,211,153,.2);
    }

    .included-bootcamp-card h4 {
        color: #3B82F6;
    }

    .own-bootcamp-card h4 {
        color: #34d399;
    }
    .own-bootcamp-card a {
        color: #34d399;
        text-decoration: underline;
    }

    .included-bootcamp-card,
    .own-bootcamp-card {
        max-width: 480px;
        margin: 0 auto 1.75rem;
        
        border-radius: 16px;
        padding: 1.2rem 1.4rem;
        text-align: left;
    }

    .included-bootcamp-card h4,
    .own-bootcamp-card h4 {
        font-size: .85rem;
        font-weight: 800;
        margin-bottom: .2rem;
    }

    .included-bootcamp-card p,
    .own-bootcamp-card p {
        margin-bottom: 0;
        font-size: .76rem;
        color: #94a3b8;
        line-height: 1.5;
    }

    .info.refund {
        background: rgba(251, 191, 36, .07);
        border: 1px solid rgba(251, 191, 36, .2);
        border-radius: 16px;
        padding: 1.2rem 1.4rem;
        text-align: center;
        max-width: 480px;
        margin: 0 auto 1.75rem;
    }

    .info.refund h4 {
        color: #fbbf24;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        font-size: .85rem;
        font-weight: 800;
        margin-bottom: .2rem;
    }

    .info.refund p {
        margin-bottom: 0;
        font-size: .76rem;
        color: #94a3b8;
        line-height: 1.5;
    }

    .pricing-block .more-details {
        max-width: 480px;
        margin: 2rem auto 0;
        text-align: center;
        padding: 2rem;
        background: #0c1220;
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 20px;
    }

    .faqs {
        max-width: 600px;
        margin: 3rem auto 0;
    }

    .faqs .faq-item {
        border-bottom: 1px solid rgba(255,255,255,.05) !important;
        border-radius: 0 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: transparent !important;
    }
    .faqs .faq-item .accordion-header a {
        border-radius: 0 !important;
        padding: 1rem 0;
        background-color: transparent !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 1rem;
        box-shadow: none !important;
    }
    
    .faqs .faq-item .accordion-header a::after {
        content: '+' !important;
        background-image: none !important;
        font-size: 1.5rem;
        color: #94a3b8;
        font-weight: 400;
        transition: transform .3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .faqs .faq-item .accordion-header a:not(.collapsed)::after {
        transform: rotate(45deg) !important;
    }

    .faqs .faq-item .accordion-body {
        padding: 0 0 1rem 0;
        background-color: transparent !important;
    }

    @media (max-width: 768px) {
        .tutor-grid {
            grid-template-columns: 1fr;
            max-width: 400px;
        }
        .tutor {
            padding: 1.5rem;
        }

        .framework-grid .framework-item {
            max-width: 100%;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        .roadmap-steps .arrow {
            transform: rotate(90deg);
            margin: 0 auto;
        }

        .endresult-grid .endresult-item {
            margin-bottom: 1.5rem;
        }

        .rm-card-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }