/* ============================================================
   LUA CHEIA - STARS PAGE
============================================================ */


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

.stars-page {
    background:
        linear-gradient(
            180deg,
            #fbf8f1 0%,
            #f7f1e8 48%,
            #fbf8f1 100%
        );
    color: #2c183f;
}


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

.stars-hero {
    padding:
        170px
        24px
        100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}


.stars-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(
            circle,
            rgba(199, 159, 72, 0.16) 0%,
            rgba(199, 159, 72, 0.06) 38%,
            rgba(199, 159, 72, 0) 72%
        );
    pointer-events: none;
}


.stars-hero-inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.stars-eyebrow,
.stars-section-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #a07b32;
}


.stars-hero h1 {
    margin:
        18px
        0
        20px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(
        48px,
        6vw,
        78px
    );
    font-weight: 500;
    line-height: 1.02;
    color: #35164f;
}


.stars-hero-lead {
    max-width: 690px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #665c6f;
}


.stars-hero-note {
    margin:
        34px
        auto
        0;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding:
        13px
        20px;
    border:
        1px
        solid
        rgba(160, 123, 50, 0.28);
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.48);
    color: #55475e;
    font-size: 14px;
    line-height: 1.5;
}


.stars-hero-icon {
    color: #bd9138;
    font-size: 18px;
}


/* ============================================================
   PACKAGES SECTION
============================================================ */

.stars-packages-section {
    padding:
        40px
        24px
        120px;
}


.stars-section-heading {
    max-width: 720px;
    margin:
        0
        auto
        58px;
    text-align: center;
}


.stars-section-heading h2,
.stars-info-heading h2,
.stars-account-cta h2 {
    margin:
        14px
        0
        16px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(
        34px,
        4vw,
        52px
    );
    font-weight: 500;
    line-height: 1.1;
    color: #35164f;
}


.stars-section-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #6c6273;
}


/* ============================================================
   PACKAGES GRID
============================================================ */

.stars-packages-grid {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}


/* ============================================================
   PACKAGE CARD
============================================================ */

.stars-package-card {
    position: relative;
    min-width: 0;
    padding:
        38px
        22px
        28px;
    border:
        1px
        solid
        rgba(72, 38, 91, 0.14);
    border-radius: 24px;
    background:
        rgba(255, 255, 255, 0.68);
    box-shadow:
        0
        14px
        42px
        rgba(58, 32, 76, 0.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.stars-package-card:hover {
    transform: translateY(-5px);
    border-color:
        rgba(160, 123, 50, 0.34);
    box-shadow:
        0
        22px
        52px
        rgba(58, 32, 76, 0.11);
}


.stars-package-featured {
    border:
        1.5px
        solid
        rgba(159, 119, 40, 0.48);
    background:
        linear-gradient(
            180deg,
            rgba(255, 251, 240, 0.96) 0%,
            rgba(255, 255, 255, 0.78) 100%
        );
    box-shadow:
        0
        18px
        52px
        rgba(125, 86, 22, 0.12);
}


.stars-package-vip {
    border:
        1.5px
        solid
        rgba(69, 28, 100, 0.3);
    background:
        linear-gradient(
            180deg,
            rgba(249, 244, 252, 0.98) 0%,
            rgba(255, 255, 255, 0.78) 100%
        );
}


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

.stars-package-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding:
        7px
        13px;
    border-radius: 999px;
    background: #b78a35;
    color: #fffaf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}


.stars-package-badge-vip {
    background: #4a2165;
}


/* ============================================================
   PACKAGE CONTENT
============================================================ */

.stars-package-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #755486;
}


.stars-package-amount {
    margin-top: 24px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}


.stars-package-number {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 52px;
    line-height: 1;
    color: #35164f;
}


.stars-package-label {
    font-size: 15px;
    font-weight: 700;
    color: #755f80;
}


.stars-package-symbol {
    margin-top: 9px;
    font-size: 22px;
    color: #bd9138;
}


.stars-package-price {
    margin-top: 24px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 30px;
    color: #2f193f;
}


.stars-package-unit {
    margin-top: 5px;
    font-size: 12px;
    color: #928699;
}


.stars-buy-button {
    width: 100%;
    margin-top: auto;
    padding:
        14px
        18px;
    border:
        1px
        solid
        #45205f;
    border-radius: 999px;
    background: #45205f;
    color: #fffaf2;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.stars-package-unit + .stars-buy-button {
    margin-top: 28px;
}


.stars-buy-button:hover {
    transform: translateY(-2px);
    background: #5a2879;
    border-color: #5a2879;
}


.stars-package-featured .stars-buy-button {
    background: #b78a35;
    border-color: #b78a35;
}


.stars-package-featured .stars-buy-button:hover {
    background: #9e752b;
    border-color: #9e752b;
}


/* ============================================================
   INFO SECTION
============================================================ */

.stars-info-section {
    padding:
        110px
        24px;
    background:
        linear-gradient(
            135deg,
            #38184e 0%,
            #4e2468 52%,
            #321744 100%
        );
}


.stars-info-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}


.stars-info-heading {
    max-width: 640px;
    margin-bottom: 50px;
}


.stars-info-heading .stars-section-kicker {
    color: #d7b667;
}


.stars-info-heading h2 {
    color: #fff9ef;
}


.stars-info-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 22px;
}


.stars-info-card {
    padding:
        34px
        30px;
    border:
        1px
        solid
        rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background:
        rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
}


.stars-info-number {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 17px;
    color: #d7b667;
}


.stars-info-card h3 {
    margin:
        20px
        0
        12px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 24px;
    font-weight: 500;
    color: #fffaf1;
}


.stars-info-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color:
        rgba(255, 255, 255, 0.72);
}


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

.stars-account-cta {
    padding:
        110px
        24px;
}


.stars-account-cta-inner {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding:
        46px
        52px;
    border:
        1px
        solid
        rgba(160, 123, 50, 0.22);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(248, 240, 226, 0.88) 100%
        );
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


.stars-account-cta h2 {
    margin-bottom: 12px;
}


.stars-account-cta p {
    max-width: 620px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6c6273;
}


.stars-account-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding:
        15px
        24px;
    border:
        1px
        solid
        #45205f;
    border-radius: 999px;
    background: transparent;
    color: #45205f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.stars-account-button:hover {
    background: #45205f;
    color: #fffaf2;
    transform: translateY(-2px);
}


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

@media (max-width: 1100px) {

    .stars-packages-grid {
        max-width: 900px;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 980px) {

    .stars-hero {
        padding:
            145px
            24px
            85px;
    }


    .stars-packages-section {
        padding-bottom: 90px;
    }


    .stars-info-section {
        padding:
            90px
            24px;
    }


    .stars-account-cta {
        padding:
            90px
            24px;
    }


    .stars-account-cta-inner {
        padding:
            40px
            36px;
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }

}


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

@media (max-width: 700px) {

    .stars-hero {
        padding:
            118px
            18px
            64px;
    }


    .stars-hero h1 {
        margin-top: 14px;
        font-size: 46px;
    }


    .stars-hero-lead {
        font-size: 16px;
        line-height: 1.7;
    }


    .stars-hero-note {
        margin-top: 28px;
        padding:
            12px
            15px;
        border-radius: 18px;
        align-items: flex-start;
        text-align: left;
        font-size: 13px;
    }


    .stars-packages-section {
        padding:
            34px
            16px
            76px;
    }


    .stars-section-heading {
        margin-bottom: 38px;
    }


    .stars-section-heading h2,
    .stars-info-heading h2,
    .stars-account-cta h2 {
        font-size: 36px;
    }


    .stars-packages-grid {
        max-width: 430px;
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .stars-package-card {
        padding:
            36px
            26px
            28px;
    }


    .stars-package-number {
        font-size: 56px;
    }


    .stars-package-price {
        font-size: 31px;
    }


    .stars-info-section {
        padding:
            74px
            16px;
    }


    .stars-info-heading {
        margin-bottom: 34px;
    }


    .stars-info-grid {
        grid-template-columns: 1fr;
    }


    .stars-info-card {
        padding:
            28px
            24px;
    }


    .stars-account-cta {
        padding:
            74px
            16px;
    }


    .stars-account-cta-inner {
        padding:
            32px
            24px;
        border-radius: 22px;
    }


    .stars-account-button {
        width: 100%;
    }

}