/* ===== PREMIUM PLAN ===== */

.plan{
    width:90%;
    max-width:900px;
    margin:40px auto 80px;
}

.plans-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    align-items:stretch;
}

.plan-card{
    position:relative;
    background:#161f35;
    border:1px solid rgba(0,255,180,.25);
    border-radius:28px;
    padding:22px 18px;
    margin:30px auto;
    max-width:360px;
    text-align:center;
    box-shadow:
        0 0 30px rgba(0,180,255,.15),
        0 25px 60px rgba(0,0,0,.45);
}

.plan-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,#00ff99,#2b82ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
}

.best-value{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(90deg,#ff9800,#ff3d00);
    color:#fff;
    padding:8px 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}


.plan-flag{
    width:42px;
    height:42px;
    display:block;
    margin:40px auto 20px;
    border-radius:50%;
}
   
.plan-card h2{
    color:#fff;
    margin:0;
    margin-top:10px;
    font-size:34px;
}

.plan-desc{
    color:#9fa9c5;
    margin:12px 0 22px;
}

.plan-price{
    color:#00ff88;
    font-size:48px;
    font-weight:800;
    line-height:1;
    margin:28px 0;
    text-shadow:0 0 20px rgba(0,255,136,.25);
}

.plan-price span{
    font-size:20px;
    font-weight:700;
    margin-left:6px;
}

.plan-item{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#dfe6ff;
}

.buy-btn{
    width:100%;
    margin-top:28px;
    padding:18px 20px;

    display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-sizing: border-box;

    border:none;
    border-radius:18px;

    background:linear-gradient(135deg,#00E676,#00C853);

    color:#fff;

    font-size:18px;
    font-weight:700;
    letter-spacing:.5px;

    cursor:pointer;

    transition:all .3s ease;

    box-shadow:
        0 10px 30px rgba(0,230,118,.35);

    position:relative;
    overflow:hidden;
}

   .buy-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 40px rgba(0,230,118,.5);
}

.buy-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;
}

.buy-btn:hover::before{
    left:160%;
}

/* Desktop */
@media (min-width:768px){

    .plan{
        display:flex;
        justify-content:center;
        padding:40px 20px;
    }

    .plan-card{
        width:430px;
        max-width:430px;
        margin:0 auto;
    }

    .best-value{
        top:12px;
    }

}

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

.features{
    width:90%;
    max-width:1100px;
    margin:80px auto;
    text-align:center;
}

.features h2{
    color:#fff;
    font-size:36px;
    margin-bottom:40px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.feature-card{
    background:#1b2238;
    border:1px solid rgba(0,255,180,.18);
    border-radius:18px;
    padding:20px 12px;
    min-height:180px;
}

.feature-card:hover{
    transform:translateY(-8px);
    border-color:#00ff99;
    box-shadow:0 20px 40px rgba(0,255,180,.25);
}

.feature-card{
    font-size:36px;
}

.feature-card h3{
    color:#fff;
    margin:16px 0 10px;
    font-size:18px;
}

.feature-card p{
    color:#9fa9c5;
    line-height:1.7;
    font-size:13px;
}

/* ===== PAYMENT ===== */

.payment{
    width:90%;
    max-width:1000px;
    margin:80px auto;
    text-align:center;
}

.payment h2{
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
    line-height:1.3;
}

.payment-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.payment-card{
    background:#1b2238;
    border:1px solid rgba(0,255,180,.18);
    border-radius:16px;
    padding:14px 8px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;

    transition:.3s;
}

.payment-card:hover{
    transform:translateY(-8px);
    border-color:#00ff99;
    box-shadow:0 20px 40px rgba(0,255,180,.25);
}

.payment-card img{
    width:42px;
    height:42px;
    object-fit:contain;
    margin-bottom:0;
}

.payment-card span{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-align:center;
}

.payment-note{
    margin-top:30px;
    color:#9fa9c5;
    font-size:16px;
    line-height:1.8;
}

/* ===== HOW TO BUY ===== */

.how-buy{
    width:90%;
    max-width:1100px;
    margin:80px auto;
    text-align:center;
}

.how-buy h2{
    color:#fff;
    font-size:28px;
    margin-bottom:30px;
}

.steps{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.step-card{
    background:#1b2238;
    border:1px solid rgba(0,255,180,.18);
    border-radius:18px;
    padding:18px 12px;
}

.step-card:hover{
    transform:translateY(-8px);
    border-color:#00ff99;
    box-shadow:0 20px 40px rgba(0,255,180,.25);
}

.step-number{
    width:48px;
    height:48px;
    margin:0 auto 12px;
    border-radius:50%;
    background:linear-gradient(135deg,#00ff99,#00cc66);
    color:#fff;
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.step-card h3{
    color:#fff;
    margin-bottom:8px;
    font-size:20px;
}

.step-card p{
    color:#9fa9c5;
    line-height:1.5;
    font-size:13px;
}

@media (min-width:768px){
    .steps{
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }
}

/* ===== FAQ ===== */

.faq{
    width:90%;
    max-width:900px;
    margin:80px auto;
}

.faq h2{
    text-align:center;
    color:#fff;
    font-size:30px;
    margin-bottom:24px;
}

.faq-item{
    background:#1b2238;
    border:1px solid rgba(0,255,180,.18);
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
}

.faq-item:hover{
    border-color:#00ff99;
    box-shadow:0 10px 30px rgba(0,255,180,.15);
}

.faq-item h3{
    font-size:22px;
    margin-bottom:10px;
}

.faq-item p{
    font-size:15px;
    line-height:1.6;
    color:#9fa9c5;
}

/* ===== CONTACT CTA ===== */

.contact-cta{
    width:90%;
    max-width:900px;
    margin:60px auto 80px;
    padding:50px 30px;
    text-align:center;
    display:block;
    clear:both;
    box-sizing:border-box;
}

.contact-cta h2{
    margin:0 0 18px;
    font-size:42px;
}

.contact-cta p{
    margin:0 0 30px;
    font-size:18px;
}

.telegram-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:linear-gradient(135deg,#00ff99,#00cc66) !important;
    color:#fff !important;

    padding:18px 36px;
    border-radius:999px;
    text-decoration:none;

    box-shadow:0 12px 35px rgba(0,255,150,.35);
}

.telegram-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(0,255,150,.4);
}

/* ===== AVAILABLE PLANS ===== */

.plans-section{
    width:90%;
    max-width:1200px;
    margin:70px auto;
}

.plans-title{
    text-align:center;
    color:#fff;
    font-size:38px;
    font-weight:800;
    margin-bottom:40px;
}

.plans-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
gap:12px;
}

.pricing-card{
    background:#1b2238;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:18px 12px;
    box-shadow:0 12px 35px rgba(0,0,0,.25);
    transition:.3s;
    position:relative;
    overflow:visible;
    text-align:center;
}

.pricing-card:hover{
    transform:translateY(-8px);
    border-color:#00E676;
    box-shadow:0 18px 45px rgba(0,230,118,.18);
}

.pricing-card h3{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:#fff;
    font-size:22px;
    margin-bottom:18px;
}

.pricing-card .plan-price{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    color:#00ff88;
    font-size:34px;
    font-weight:800;
    text-align:center;
    margin-bottom:22px;
}

.pricing-card .plan-price span{
    font-size:14px;
}

.pricing-card ul{
    list-style:none;
    padding:0;
    font-size:14px;
    margin:0 0 24px;
}

.pricing-card ul li{
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#ddd;
}

.pricing-card ul li:last-child{
    border-bottom:none;
}

.pricing-card .plan-btn{
    display:block;
    width:100%;
    padding:12px;
    text-align:center;
    text-decoration:none;
    border-radius:12px;

    background:linear-gradient(135deg,#00E676,#00C853);
    color:#fff;

    font-size:16px;
    font-weight:700;

    transition:.3s;
}

.pricing-card .plan-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,230,118,.35);
}

/* ===== PLAN BADGES ===== */

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

.plan-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    letter-spacing:.5px;

    margin:0 auto 18px;
}

.pricing-card.bronze .plan-badge{
    background:linear-gradient(135deg,#cd7f32,#b87333);
}

.pricing-card.silver .plan-badge{
    background:linear-gradient(135deg,#bfc5cc,#8f98a3);
}

.pricing-card.gold .plan-badge{
    background:linear-gradient(135deg,#ff9800,#ff5722);
}

.pricing-card.gold{
    border:2px solid #00E676;
    box-shadow:0 20px 50px rgba(0,230,118,.25);
}

.plan-badge{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;

    min-width:220px;
    height:44px;

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

    border-radius:999px;
    padding:0 24px;

    color:#fff;
    font-size:15px;
    font-weight:800;

    box-shadow:0 8px 25px rgba(255,120,0,.35);
}

.plan-badge.starter{
    background:linear-gradient(135deg,#C67A2B,#E09B45);
}

.plan-badge.popular{
    background:linear-gradient(135deg,#BFC5CD,#8D949E);
}

.plan-badge.pro{
    background:linear-gradient(135deg,#FF9800,#FF5722);
}

.starter-badge{
    background:linear-gradient(90deg,#C97B2E,#E29A42);
}

.popular-badge{
    background:linear-gradient(90deg,#C9CDD3,#9AA3AE);
}

.pricing-card.bronze .plan-badge{
    background:linear-gradient(90deg,#ff9800,#ff5722);
}

.pricing-card.silver .plan-badge{
    background:linear-gradient(90deg,#dfe4ea,#b0b8c4);
    color:#fff;
}

.pricing-card.gold .plan-badge{
    background:linear-gradient(90deg,#ffd54f,#ff9800);
    color:#fff;
}

@media (max-width:768px){

    .plans-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .pricing-card{
        padding:14px 10px;
        border-radius:18px;
    }

    .pricing-card h3{
        font-size:18px;
        margin-top:10px;
    }

    .pricing-card .plan-price{
        font-size:32px;
    }

    .pricing-card .plan-price span{
        font-size:12px;
    }

    .pricing-card ul{
        margin:12px 0;
        font-size:12px;
    }

    .pricing-card .plan-btn{
        padding:10px;
        font-size:14px;
    }

}