/* =================================================
   IRAN GOSTARESH
   SUBSCRIPTIONS PAGE
================================================= */

:root {

    --sub-blue: #4aa8ff;
    --sub-blue-light: #8bd1ff;

    --sub-green: #3bd6a5;
    --sub-green-light: #86ebc8;

    --sub-gold: #d9b45a;
    --sub-gold-light: #f1dc91;

    --sub-white: #ffffff;

    --sub-bg: #f5fbfa;
    --sub-bg-2: #eef8f7;

    --sub-dark: #08191b;
    --sub-dark-2: #0d282b;

    --sub-text: #183538;
    --sub-muted: #718487;

    --sub-border: rgba(20, 65, 68, .09);

    --sub-shadow:
        0 20px 60px rgba(16, 70, 73, .09);

    --sub-radius: 26px;

}


@font-face {
    font-family: "IRANSansX";
    src: url("PeydaWeb-Bold.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =================================================
   RESET
================================================= */

.subscription-hero *,
.subscription-plans *,
.subscription-compare *,
.subscription-benefits *,
.subscription-faq *,
.subscription-cta * {

    box-sizing: border-box;

}


.subscription-hero a,
.subscription-plans a,
.subscription-compare a,
.subscription-benefits a,
.subscription-faq a,
.subscription-cta a {

    text-decoration: none;

}


/* =================================================
   CONTAINER
================================================= */

.subscription-container {

    width:
        min(1200px, calc(100% - 40px));

    margin-inline: auto;

}


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

.subscription-hero {

    min-height: 670px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #071719 0%,
            #0b292b 50%,
            #0c2225 100%
        );

}


.subscription-hero-bg {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(74,168,255,.22),
            transparent 31%
        ),

        radial-gradient(
            circle at 80% 65%,
            rgba(59,214,165,.18),
            transparent 32%
        );

}


.subscription-hero-bg::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    right: -220px;

    top: -220px;

    background:
        rgba(74,168,255,.10);

    filter:
        blur(40px);

}


.subscription-hero-bg::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    left: -250px;

    bottom: -280px;

    background:
        rgba(59,214,165,.08);

    filter:
        blur(45px);

}


.subscription-hero-content {

    width:
        min(850px, calc(100% - 40px));

    text-align: center;

    position: relative;

    z-index: 2;

}


.subscription-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 17px;

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

    border-radius: 999px;

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

    backdrop-filter:
        blur(18px);

    color:
        var(--sub-green-light);
     
    font-family: 'IRANSansX' , serif;
        
    font-size: 13px;

    font-weight: 700;

}


.subscription-label::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--sub-green);

    box-shadow:
        0 0 16px
        var(--sub-green);

}


.subscription-hero h1 {

    margin:
        25px 0 18px;

    color:
        white;

    font-size:
        clamp(42px, 6vw, 76px);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -2px;

}


.subscription-hero h1 span {

    color:
        var(--sub-green-light);

}


.subscription-hero-content > p {

    max-width: 700px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,.68);

    line-height: 2.1;

    font-size: 16px;

}


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

.subscription-hero-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

    flex-wrap: wrap;

}


.subscription-btn {

    min-height: 53px;

    padding:
        0 24px;

    border-radius: 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 13px;

    font-weight: 800;

    transition:
        .3s ease;

}


.subscription-btn.primary {

    color:
        #06221c;

    background:
        linear-gradient(
            135deg,
            var(--sub-green-light),
            var(--sub-green)
        );

    box-shadow:
        0 14px 35px
        rgba(59,214,165,.18);

}


.subscription-btn.secondary {

    color: white;

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

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

    backdrop-filter:
        blur(15px);

}


.subscription-btn:hover {

    transform:
        translateY(-4px);

}


.subscription-btn.primary:hover {

    box-shadow:
        0 20px 45px
        rgba(59,214,165,.30);

}


.subscription-btn.secondary:hover {

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

}


/* =================================================
   FLOATING CARDS
================================================= */

.subscription-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        14px 18px;

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

    border-radius: 18px;

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

    backdrop-filter:
        blur(20px);

    color: white;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.15);

    animation:
        subscriptionFloat 5s ease-in-out infinite;

}


.floating-right {

    right:
        max(4%, calc((100vw - 1200px) / 2));

    top: 28%;

}


.floating-left {

    left:
        max(4%, calc((100vw - 1200px) / 2));

    bottom: 23%;

    animation-delay:
        -2s;

}


.subscription-floating-icon {

    width: 43px;

    height: 43px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color:
        var(--sub-blue-light);

    background:
        rgba(74,168,255,.12);

    font-size: 18px;

}


.subscription-floating-icon.gold {

    color:
        var(--sub-gold-light);

    background:
        rgba(217,180,90,.13);

}


.subscription-floating-card strong {

    display: block;

    font-size: 12px;

}


.subscription-floating-card small {

    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.52);

    font-size: 10px;

}


@keyframes subscriptionFloat {

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

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

}


/* =================================================
   PLANS SECTION
================================================= */

.subscription-plans {

    padding:
        110px 0;

    background:
        var(--sub-bg);

}


.subscription-heading {

    text-align: center;

    max-width: 720px;

    margin:
        0 auto 45px;

}


.subscription-heading > span {

    color:
        var(--sub-green);

    font-size: 13px;

    font-weight: 800;

}


.subscription-heading h2 {

    margin:
        13px 0 15px;

    color:
        var(--sub-dark);

    font-size:
        clamp(32px, 4vw, 48px);

    line-height: 1.4;

}


.subscription-heading h2 strong {

    color:
        var(--sub-blue);

}


.subscription-heading p {

    color:
        var(--sub-muted);

    font-size: 14px;

    line-height: 2;

}


/* =================================================
   BILLING SWITCH
================================================= */

.billing-switch {

    width: fit-content;

    margin:
        0 auto 45px;

    padding: 5px;

    display: flex;

    gap: 5px;

    border:
        1px solid
        var(--sub-border);

    border-radius: 15px;

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

    box-shadow:
        0 10px 35px
        rgba(16,70,73,.06);

}


.billing-option {

    border: 0;

    min-height: 43px;

    padding:
        0 20px;

    border-radius: 11px;

    background:
        transparent;

    color:
        var(--sub-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        .3s ease;

}


.billing-option span {

    margin-right: 7px;

    padding:
        4px 7px;

    border-radius: 7px;

    background:
        rgba(59,214,165,.12);

    color:
        var(--sub-green);

    font-size: 9px;

}


.billing-option.active {

    color:
        white;

    background:
        var(--sub-dark);

    box-shadow:
        0 7px 18px
        rgba(8,25,27,.15);

}


.billing-option.active span {

    color:
        var(--sub-green-light);

    background:
        rgba(59,214,165,.12);

}


/* =================================================
   PLANS GRID
================================================= */

.plans-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;

}


/* =================================================
   PLAN CARD
================================================= */

.plan-card {

    position: relative;

    min-height: 590px;

    padding:
        27px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--sub-border);

    border-radius:
        var(--sub-radius);

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

    backdrop-filter:
        blur(20px);

    box-shadow:
        var(--sub-shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.plan-card::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border-radius: 50%;

    top: -90px;

    left: -80px;

    background:
        rgba(74,168,255,.08);

    filter:
        blur(15px);

    pointer-events: none;

}


.plan-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 30px 70px
        rgba(16,70,73,.14);

    border-color:
        rgba(74,168,255,.20);

}


/* FEATURED */

.plan-card.featured {

    border:
        1px solid
        rgba(59,214,165,.40);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.88),
            rgba(240,252,249,.78)
        );

    box-shadow:
        0 25px 70px
        rgba(59,214,165,.13);

}


.plan-card.featured::before {

    background:
        rgba(59,214,165,.11);

}


.popular-badge {

    position: absolute;

    top: 17px;

    left: 17px;

    padding:
        7px 11px;

    border-radius: 9px;

    color:
        #06352a;

    background:
        var(--sub-green);

    font-size: 9px;

    font-weight: 900;

}


/* =================================================
   PLAN TOP
================================================= */

.plan-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.plan-number {

    color:
        var(--sub-muted);

    font-size: 11px;

    font-weight: 900;

}


.plan-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    color:
        var(--sub-blue);

    background:
        rgba(74,168,255,.10);

    font-size: 20px;

}


.plan-icon.green {

    color:
        var(--sub-green);

    background:
        rgba(59,214,165,.12);

}


.plan-icon.gold {

    color:
        var(--sub-gold);

    background:
        rgba(217,180,90,.13);

}


.plan-icon.blue {

    color:
        var(--sub-blue);

}


/* =================================================
   PLAN CONTENT
================================================= */

.plan-label {

    display: inline-block;

    margin-top: 30px;

    color:
        var(--sub-green);

    font-size: 11px;

    font-weight: 800;

}


.plan-card h3 {

    margin:
        7px 0 12px;

    color:
        var(--sub-dark);

    font-size: 28px;

}


.plan-description {

    min-height: 70px;

    margin: 0;

    color:
        var(--sub-muted);

    font-size: 12px;

    line-height: 2;

}


/* =================================================
   PRICE
================================================= */

.plan-price {

    margin:
        25px 0;

    padding-bottom:
        23px;

    border-bottom:
        1px solid
        var(--sub-border);

}


.plan-price strong {

    display: inline-block;

    color:
        var(--sub-dark);

    font-size: 30px;

    font-weight: 900;

}


.plan-price span {

    display: block;

    margin-top: 5px;

    color:
        var(--sub-muted);

    font-size: 10px;

}


.custom-price strong {

    color:
        var(--sub-blue);

    font-size: 24px;

}


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

.plan-features {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    gap: 13px;

}


.plan-features li {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--sub-text);

    font-size: 11px;

}


.plan-features li::first-letter {

    color:
        var(--sub-green);

}


/* =================================================
   PLAN BUTTON
================================================= */

.plan-button {

    margin-top: auto;

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border:
        1px solid
        rgba(74,168,255,.18);

    border-radius: 14px;

    color:
        var(--sub-blue);

    background:
        rgba(74,168,255,.06);

    font-size: 11px;

    font-weight: 900;

    transition:
        .3s ease;

}


.plan-button:hover {

    color: white;

    background:
        var(--sub-blue);

    transform:
        translateY(-3px);

}


.featured-button {

    color:
        #063127;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--sub-green-light),
            var(--sub-green)
        );

}


.featured-button:hover {

    color:
        #063127;

    background:
        var(--sub-green-light);

}


/* =================================================
   COMPARE
================================================= */

.subscription-compare {

    padding:
        110px 0;

    background:
        white;

}


.compare-wrapper {

    overflow-x: auto;

    border:
        1px solid
        var(--sub-border);

    border-radius:
        22px;

    box-shadow:
        var(--sub-shadow);

}


.compare-table {

    width: 100%;

    min-width: 750px;

    border-collapse: collapse;

    text-align: center;

}


.compare-table th {

    padding:
        20px 15px;

    background:
        #f4faf9;

    color:
        var(--sub-dark);

    font-size: 12px;

}


.compare-table td {

    padding:
        18px 15px;

    border-top:
        1px solid
        var(--sub-border);

    color:
        var(--sub-muted);

    font-size: 12px;

}


.compare-table td:first-child,
.compare-table th:first-child {

    text-align: right;

    color:
        var(--sub-text);

    font-weight: 800;

}


.compare-table td:not(:first-child) {

    color:
        var(--sub-green);

    font-weight: 900;

}


.compare-featured {

    background:
        rgba(59,214,165,.06) !important;

}


/* =================================================
   BENEFITS
================================================= */

.subscription-benefits {

    padding:
        90px 0;

    background:
        var(--sub-bg);

}


.benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.benefit-card {

    padding:
        30px 23px;

    border:
        1px solid
        var(--sub-border);

    border-radius:
        22px;

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

    text-align: center;

    transition:
        .3s ease;

}


.benefit-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--sub-shadow);

}


.benefit-icon {

    width: 55px;

    height: 55px;

    margin:
        0 auto 18px;

    border-radius: 17px;

    display: grid;

    place-items: center;

    color:
        var(--sub-blue);

    background:
        rgba(74,168,255,.10);

    font-size: 20px;

}


.benefit-icon.green {

    color:
        var(--sub-green);

    background:
        rgba(59,214,165,.12);

}


.benefit-icon.gold {

    color:
        var(--sub-gold);

    background:
        rgba(217,180,90,.13);

}


.benefit-icon.blue {

    color:
        var(--sub-blue);

}


.benefit-card h3 {

    margin:
        0 0 10px;

    color:
        var(--sub-dark);

    font-size: 17px;

}


.benefit-card p {

    margin: 0;

    color:
        var(--sub-muted);

    font-size: 11px;

    line-height: 2;

}


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

.subscription-faq {

    padding:
        110px 0;

    background:
        white;

}


.faq-list {

    max-width: 850px;

    margin-inline: auto;

    display: grid;

    gap: 12px;

}


.faq-item {

    overflow: hidden;

    border:
        1px solid
        var(--sub-border);

    border-radius: 18px;

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

    transition:
        .3s ease;

}


.faq-item.active {

    border-color:
        rgba(59,214,165,.30);

    box-shadow:
        0 15px 40px
        rgba(16,70,73,.07);

}


.faq-question {

    width: 100%;

    min-height: 65px;

    padding:
        0 20px;

    border: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    background: transparent;

    color:
        var(--sub-text);

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    text-align: right;

    cursor: pointer;

}


.faq-question b {

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    border-radius: 9px;

    display: grid;

    place-items: center;

    color:
        var(--sub-blue);

    background:
        rgba(74,168,255,.08);

    font-size: 18px;

    transition:
        .3s ease;

}


.faq-item.active .faq-question b {

    transform:
        rotate(45deg);

    color:
        var(--sub-green);

}


.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        .35s ease;

}


.faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding:
        0 20px;

    color:
        var(--sub-muted);

    font-size: 12px;

    line-height: 2;

}


.faq-item.active .faq-answer {

    grid-template-rows: 1fr;

}


.faq-item.active .faq-answer p {

    padding-bottom:
        20px;

}


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

.subscription-cta {

    position: relative;

    overflow: hidden;

    padding:
        110px 20px;

    background:
        var(--sub-dark);

    text-align: center;

    isolation: isolate;

}


.subscription-cta::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    right: -250px;

    top: -350px;

    background:
        rgba(59,214,165,.08);

    filter:
        blur(50px);

    z-index: -1;

}


.subscription-cta::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    left: -250px;

    bottom: -330px;

    background:
        rgba(74,168,255,.08);

    filter:
        blur(50px);

    z-index: -1;

}


.subscription-cta-content {

    max-width: 750px;

    margin-inline: auto;

}


.subscription-cta-content > span {

    color:
        var(--sub-green-light);

    font-size: 13px;

    font-weight: 800;

}


.subscription-cta h2 {

    margin:
        15px 0;

    color: white;

    font-size:
        clamp(36px, 5vw, 60px);

}


.subscription-cta h2 strong {

    color:
        var(--sub-green-light);

}


.subscription-cta p {

    color:
        rgba(255,255,255,.60);

    line-height: 2;

    font-size: 13px;

}


.subscription-cta-button {

    margin-top: 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding:
        0 25px;

    border-radius: 15px;

    color:
        #06221c;

    background:
        linear-gradient(
            135deg,
            var(--sub-green-light),
            var(--sub-green)
        );

    font-size: 12px;

    font-weight: 900;

    transition:
        .3s ease;

}


.subscription-cta-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(59,214,165,.25);

}


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

@media (max-width: 1100px) {

    .plans-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .subscription-floating-card {

        display: none;

    }

}


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

@media (max-width: 650px) {

    .subscription-container {

        width:
            calc(100% - 28px);

    }


    .subscription-hero {

        min-height: 590px;

    }


    .subscription-hero h1 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .subscription-hero-content > p {

        font-size:
            13px;

    }


    .subscription-hero-buttons {

        flex-direction:
            column;

    }


    .subscription-btn {

        width: 100%;

    }


    .subscription-plans,
    .subscription-compare,
    .subscription-faq {

        padding:
            75px 0;

    }


    .subscription-heading {

        margin-bottom:
            35px;

    }


    .subscription-heading h2 {

        font-size:
            31px;

    }


    .billing-switch {

        width: 100%;

        justify-content: center;

    }


    .billing-option {

        flex: 1;

        padding:
            0 10px;

    }


    .plans-grid {

        grid-template-columns:
            1fr;

    }


    .plan-card {

        min-height:
            560px;

        padding:
            23px;

    }


    .plan-card h3 {

        font-size:
            25px;

    }


    .plan-price strong {

        font-size:
            28px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 10px;

    }


    .benefit-card {

        padding:
            23px 12px;

    }


    .benefit-card h3 {

        font-size:
            14px;

    }


    .benefit-card p {

        font-size:
            10px;

    }


    .faq-question {

        min-height:
            60px;

        font-size:
            12px;

        padding:
            0 14px;

    }


    .faq-answer p {

        padding-inline:
            14px;

    }


    .subscription-cta {

        padding:
            80px 18px;

    }


    .subscription-cta h2 {

        font-size:
            38px;

    }


    .subscription-cta-button {

        width: 100%;

    }

}


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

@media (max-width: 380px) {

    .subscription-hero h1 {

        font-size:
            34px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .billing-option {

        font-size:
            10px;

    }

}


/* =================================================
   ACCESSIBILITY
================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}