/* =====================================================
   PROSPERA - PLANS PAGE
   Premium Investment Products & Flexible Investment UI
===================================================== */


/* =====================================================
   ROOT / PAGE VARIABLES
===================================================== */

:root {
    --plans-primary: #0d5c4f;
    --plans-primary-dark: #063d35;
    --plans-primary-deep: #022b25;
    --plans-primary-light: #eaf6f2;

    --plans-gold: #d6a94b;
    --plans-gold-light: #f8efd9;

    --plans-dark: #10241f;
    --plans-text: #52615d;
    --plans-heading: #15241f;

    --plans-white: #ffffff;
    --plans-off-white: #f8faf9;
    --plans-border: #e5ebe8;

    --plans-shadow-sm: 0 10px 30px rgba(15, 47, 40, 0.06);
    --plans-shadow-md: 0 20px 60px rgba(15, 47, 40, 0.10);
    --plans-shadow-lg: 0 30px 80px rgba(4, 45, 37, 0.18);

    --plans-radius-sm: 14px;
    --plans-radius: 22px;
    --plans-radius-lg: 32px;

    --plans-transition: 0.3s ease;
}


/* =====================================================
   GENERAL PAGE STYLING
===================================================== */

.plans-hero,
.plans-intro,
.investment-products,
.free-invest-section,
.profit-structure,
.investment-duration-section,
.how-to-invest,
.investment-notice-section,
.plans-final-cta {
    overflow: hidden;
}


.plans-hero *,
.plans-intro *,
.investment-products *,
.free-invest-section *,
.profit-structure *,
.investment-duration-section *,
.how-to-invest *,
.investment-notice-section *,
.plans-final-cta * {
    box-sizing: border-box;
}


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

.plans-hero {
    position: relative;
    padding: 160px 0 100px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #042f28 0%,
            #075446 50%,
            #0b6c5b 100%
        );
    color: #ffffff;
}


.plans-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


.plans-hero-content {
    position: relative;
    z-index: 2;
}


.plans-hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
}


.plans-hero-shape.shape-one {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -100px;

    background:
        rgba(214, 169, 75, 0.14);
}


.plans-hero-shape.shape-two {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: 8%;

    border: 1px solid rgba(255, 255, 255, 0.08);
}


.plans-hero-shape.shape-three {
    width: 170px;
    height: 170px;
    top: 25%;
    right: 18%;

    background:
        rgba(255, 255, 255, 0.035);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.plans-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 45px;

    font-size: 0.9rem;

    color:
        rgba(255, 255, 255, 0.65);
}


.plans-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;

    transition: var(--plans-transition);
}


.plans-hero .breadcrumb a:hover {
    color: #ffffff;
}


.plans-hero .breadcrumb i {
    font-size: 0.65rem;
    opacity: 0.6;
}


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

.plans-hero-text {
    max-width: 780px;
}


.plans-hero .section-tag {
    margin-bottom: 24px;
}


.plans-hero h1 {
    max-width: 760px;

    margin: 0 0 25px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(3rem, 6vw, 5.8rem);

    line-height: 1.04;

    letter-spacing: -0.04em;

    color: #ffffff;
}


.plans-hero h1 span {
    display: block;

    color:
        rgba(255, 255, 255, 0.7);
}


.plans-hero-text > p {
    max-width: 670px;

    margin: 0;

    font-size: 1.08rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.72);
}


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

.plans-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 28px;

    margin-top: 38px;
}


.plans-hero .btn-light {
    background: #ffffff;
    color: var(--plans-primary-dark);

    border-color: #ffffff;
}


.plans-hero .btn-light:hover {
    transform: translateY(-3px);

    background:
        #f4f8f6;

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, 0.16);
}


.hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color:
        rgba(255, 255, 255, 0.65);

    text-decoration: none;

    font-size: 0.92rem;
}


.hero-text-link span {
    color: #ffffff;
    font-weight: 700;
}


.hero-text-link i {
    margin-left: 2px;

    font-size: 0.75rem;

    transition:
        transform var(--plans-transition);
}


.hero-text-link:hover i {
    transform: translateX(5px);
}


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

.plans-hero-stats {
    display: grid;

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

    gap: 18px;

    max-width: 900px;

    margin-top: 70px;
}


.plans-hero-stat {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px 20px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 18px;

    backdrop-filter:
        blur(12px);
}


.hero-stat-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.10);

    color: var(--plans-gold);
}


.plans-hero-stat strong {
    display: block;

    margin-bottom: 3px;

    font-size: 1rem;

    color: #ffffff;
}


.plans-hero-stat span {
    display: block;

    font-size: 0.78rem;

    color:
        rgba(255, 255, 255, 0.58);
}


/* =====================================================
   INTRO SECTION
===================================================== */

.plans-intro {
    position: relative;

    padding: 100px 0;

    background:
        #ffffff;
}


.plans-intro-grid {
    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items: center;

    gap: 80px;
}


.plans-intro-content h2 {
    max-width: 680px;

    margin:
        18px 0 24px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.3rem, 4vw, 3.8rem);

    line-height: 1.15;

    color:
        var(--plans-heading);
}


.plans-intro-content h2 span {
    color:
        var(--plans-primary);
}


.plans-intro-content > p {
    max-width: 650px;

    margin: 0;

    line-height: 1.85;

    color:
        var(--plans-text);
}


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

.plans-intro-features {
    display: grid;

    gap: 15px;
}


.intro-feature {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 22px;

    background:
        var(--plans-off-white);

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

    border-radius:
        var(--plans-radius-sm);

    transition:
        var(--plans-transition);
}


.intro-feature:hover {
    transform:
        translateX(8px);

    background:
        #ffffff;

    box-shadow:
        var(--plans-shadow-sm);
}


.intro-feature-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);
}


.intro-feature h4 {
    margin:
        0 0 6px;

    color:
        var(--plans-heading);

    font-size:
        0.98rem;
}


.intro-feature p {
    margin: 0;

    font-size:
        0.88rem;

    line-height: 1.6;

    color:
        var(--plans-text);
}


/* =====================================================
   PLAN FILTER
===================================================== */

.plan-filter-section {
    position: relative;
    z-index: 5;

    padding: 0 0 20px;

    background:
        var(--plans-off-white);
}


.plan-filter-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    padding:
        12px;

    background:
        #ffffff;

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

    border-radius:
        20px;

    box-shadow:
        var(--plans-shadow-sm);
}


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

    gap: 8px;

    padding:
        12px 18px;

    border: none;

    border-radius:
        12px;

    background:
        transparent;

    color:
        var(--plans-text);

    font-family:
        inherit;

    font-size:
        0.86rem;

    font-weight:
        600;

    cursor: pointer;

    transition:
        var(--plans-transition);
}


.plan-filter:hover {
    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);
}


.plan-filter.active {
    background:
        var(--plans-primary);

    color:
        #ffffff;

    box-shadow:
        0 10px 20px
        rgba(13, 92, 79, 0.18);
}


/* =====================================================
   INVESTMENT PRODUCTS
===================================================== */

.investment-products {
    background:
        var(--plans-off-white);
}


.investment-products .section-heading {
    margin-bottom: 65px;
}


.investment-products .section-heading p {
    max-width: 680px;
}


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

.plans-grid {
    display: grid;

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

    align-items: stretch;

    gap: 25px;
}


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

.plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding: 30px;

    background:
        #ffffff;

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

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

    overflow: hidden;

    transition:
        transform var(--plans-transition),
        box-shadow var(--plans-transition),
        border-color var(--plans-transition);
}


.plan-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        transparent;

    transition:
        var(--plans-transition);
}


.plan-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(13, 92, 79, 0.22);

    box-shadow:
        var(--plans-shadow-md);
}


.plan-card:hover::before {
    background:
        linear-gradient(
            90deg,
            var(--plans-primary),
            #20a585
        );
}


.plan-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 25px;
}


.plan-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius:
        18px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);

    font-size:
        1.25rem;
}


.plan-category {
    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #f3f6f5;

    color:
        var(--plans-primary);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.plan-content {
    flex-grow: 1;
}


.plan-card h3 {
    margin:
        0 0 12px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.8rem;

    color:
        var(--plans-heading);
}


.plan-description {
    min-height: 80px;

    margin:
        0 0 25px;

    font-size:
        0.93rem;

    line-height:
        1.75;

    color:
        var(--plans-text);
}


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

.plan-price {
    padding:
        18px 0 8px;
}


.price-label {
    display: block;

    margin-bottom:
        7px;

    font-size:
        0.75rem;

    font-weight:
        600;

    color:
        #8a9692;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


.plan-price strong {
    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2rem, 3vw, 2.7rem);

    line-height: 1;

    color:
        var(--plans-primary-dark);
}


.plan-divider {
    width: 100%;
    height: 1px;

    margin:
        22px 0;

    background:
        var(--plans-border);
}


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

.plan-features {
    display: grid;

    gap: 13px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.plan-features li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    font-size:
        0.88rem;

    line-height:
        1.55;

    color:
        var(--plans-text);
}


.plan-features i {
    margin-top: 3px;

    color:
        var(--plans-primary);

    font-size:
        0.9rem;
}


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

.plan-footer {
    margin-top: 30px;
}


.plan-btn {
    width: 100%;

    justify-content: center;
}


.plan-details-btn {
    width: 100%;

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

    gap: 8px;

    margin-top: 14px;

    padding:
        8px;

    border: none;

    background:
        transparent;

    color:
        var(--plans-primary);

    font-family:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        700;

    cursor: pointer;
}


.plan-details-btn i {
    font-size:
        0.7rem;

    transition:
        transform var(--plans-transition);
}


.plan-details-btn:hover i {
    transform:
        rotate(45deg);
}


/* =====================================================
   FEATURED PLAN
===================================================== */

.featured-plan {
    border:
        2px solid
        var(--plans-primary);

    box-shadow:
        0 20px 50px
        rgba(13, 92, 79, 0.12);
}


.featured-plan::before {
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--plans-primary),
            #20a585
        );
}


.popular-badge {
    position: absolute;

    top: 20px;
    right: 20px;

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

    gap: 6px;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        var(--plans-primary);

    color:
        #ffffff;

    font-size:
        0.68rem;

    font-weight:
        700;

    box-shadow:
        0 8px 20px
        rgba(13, 92, 79, 0.20);
}


.popular-badge i {
    color:
        var(--plans-gold);
}


.featured-plan .plan-category {
    opacity: 0;
}


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

.premium-plan {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfaf5
        );
}


.premium-icon {
    background:
        var(--plans-gold-light);

    color:
        var(--plans-gold);
}


.premium-category {
    background:
        var(--plans-gold-light);

    color:
        #9c762c;
}


/* =====================================================
   HIDDEN FILTER STATE
===================================================== */

.plan-card.plan-hidden {
    display: none;
}


/* =====================================================
   MORE PLANS NOTE
===================================================== */

.more-plans-note {
    display: flex;
    align-items: center;

    gap: 20px;

    max-width: 1000px;

    margin:
        50px auto 0;

    padding:
        22px 25px;

    background:
        #ffffff;

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

    border-radius:
        18px;

    box-shadow:
        var(--plans-shadow-sm);
}


.more-plans-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius:
        15px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);
}


.more-plans-note > div:nth-child(2) {
    flex-grow: 1;
}


.more-plans-note strong {
    display: block;

    margin-bottom:
        4px;

    color:
        var(--plans-heading);
}


.more-plans-note p {
    margin: 0;

    font-size:
        0.86rem;

    line-height:
        1.6;

    color:
        var(--plans-text);
}


.more-plans-note .text-btn {
    white-space:
        nowrap;
}


/* =====================================================
   FREE INVEST SECTION
===================================================== */

.free-invest-section {
    position: relative;

    background:
        #ffffff;
}


.free-invest-wrapper {
    position: relative;

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 60px;

    padding:
        65px;

    background:
        linear-gradient(
            135deg,
            #032e27,
            #075545
        );

    border-radius:
        35px;

    overflow: hidden;

    box-shadow:
        var(--plans-shadow-lg);
}


.free-invest-wrapper::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -180px;

    border-radius:
        50%;

    background:
        rgba(214, 169, 75, 0.10);

    pointer-events: none;
}


.free-invest-wrapper::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -250px;
    left: 10%;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    pointer-events: none;
}


.free-invest-content,
.free-invest-info {
    position: relative;
    z-index: 2;
}


/* =====================================================
   FREE INVEST CONTENT
===================================================== */

.free-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        15px 0;
}


.free-invest-content h2 {
    margin:
        20px 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.5rem, 4vw, 4.2rem);

    line-height:
        1.08;

    color:
        #ffffff;
}


.free-invest-content h2 span {
    display: block;

    color:
        rgba(255, 255, 255, 0.62);
}


.free-invest-content > p {
    max-width: 560px;

    margin:
        0 0 30px;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.68);
}


/* =====================================================
   MINIMUM INVESTMENT CARD
===================================================== */

.free-invest-minimum {
    display: flex;
    align-items: center;

    gap: 15px;

    width: fit-content;

    margin-bottom:
        32px;

    padding:
        15px 20px;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        16px;
}


.minimum-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius:
        14px;

    background:
        rgba(214, 169, 75, 0.18);

    color:
        var(--plans-gold);
}


.free-invest-minimum span {
    display: block;

    margin-bottom:
        3px;

    font-size:
        0.72rem;

    color:
        rgba(255, 255, 255, 0.55);

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}


.free-invest-minimum strong {
    font-size:
        1.35rem;

    color:
        #ffffff;
}


/* =====================================================
   FREE INVEST INFORMATION PANEL
===================================================== */

.free-invest-info {
    padding:
        30px;

    background:
        rgba(255, 255, 255, 0.96);

    border-radius:
        25px;

    box-shadow:
        0 25px 50px
        rgba(0, 0, 0, 0.12);
}


.free-invest-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom:
        25px;

    padding-bottom:
        20px;

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

    color:
        var(--plans-heading);

    font-weight:
        700;
}


.info-header-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius:
        12px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);
}


/* =====================================================
   FREE INVEST STEPS
===================================================== */

.free-invest-step {
    display: grid;

    grid-template-columns:
        38px 1fr;

    gap: 15px;

    padding:
        16px 0;

    border-bottom:
        1px solid
        #edf1ef;
}


.free-invest-step:last-child {
    border-bottom:
        none;
}


.free-step-number {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius:
        50%;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);

    font-size:
        0.72rem;

    font-weight:
        700;
}


.free-invest-step h4 {
    margin:
        0 0 5px;

    color:
        var(--plans-heading);

    font-size:
        0.9rem;
}


.free-invest-step p {
    margin: 0;

    font-size:
        0.82rem;

    line-height:
        1.6;

    color:
        var(--plans-text);
}


/* =====================================================
   PROFIT STRUCTURE
===================================================== */

.profit-structure {
    background:
        var(--plans-off-white);
}


.profit-structure .section-heading {
    max-width:
        800px;

    margin:
        0 auto 55px;
}


.profit-structure-grid {
    display: grid;

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

    gap: 25px;

    max-width:
        950px;

    margin:
        0 auto;
}


/* =====================================================
   PROFIT CARDS
===================================================== */

.profit-card {
    position: relative;

    padding:
        45px;

    border-radius:
        28px;

    overflow: hidden;
}


.investor-profit-card {
    background:
        #ffffff;

    border:
        1px solid
        var(--plans-border);
}


.prospera-profit-card {
    background:
        linear-gradient(
            135deg,
            var(--plans-primary-dark),
            var(--plans-primary)
        );

    color:
        #ffffff;
}


.profit-card-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom:
        25px;

    border-radius:
        18px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);

    font-size:
        1.2rem;
}


.prospera-profit-card .profit-card-icon {
    background:
        rgba(255, 255, 255, 0.10);

    color:
        var(--plans-gold);
}


.profit-label {
    display: block;

    margin-bottom:
        10px;

    font-size:
        0.75rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;

    color:
        #83908c;
}


.prospera-profit-card .profit-label {
    color:
        rgba(255, 255, 255, 0.55);
}


.profit-percentage {
    margin-bottom:
        20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(4rem, 7vw, 6rem);

    line-height:
        1;

    color:
        var(--plans-primary);
}


.profit-percentage span {
    font-size:
        0.55em;
}


.prospera-profit-card .profit-percentage {
    color:
        var(--plans-gold);
}


.profit-card h3 {
    margin:
        0 0 14px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.5rem;

    line-height:
        1.35;
}


.profit-card p {
    margin: 0;

    font-size:
        0.9rem;

    line-height:
        1.8;

    color:
        var(--plans-text);
}


.prospera-profit-card p {
    color:
        rgba(255, 255, 255, 0.68);
}


/* =====================================================
   PROFIT EXPLANATION
===================================================== */

.profit-explanation {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    max-width:
        950px;

    margin:
        30px auto 0;

    padding:
        25px 30px;

    background:
        #ffffff;

    border-left:
        4px solid
        var(--plans-gold);

    border-radius:
        0 18px 18px 0;

    box-shadow:
        var(--plans-shadow-sm);
}


.profit-explanation-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius:
        50%;

    background:
        var(--plans-gold-light);

    color:
        #a17a2e;
}


.profit-explanation h4 {
    margin:
        0 0 8px;

    color:
        var(--plans-heading);
}


.profit-explanation p {
    margin: 0;

    font-size:
        0.88rem;

    line-height:
        1.75;

    color:
        var(--plans-text);
}


/* =====================================================
   INVESTMENT DURATION
===================================================== */

.investment-duration-section {
    background:
        #ffffff;
}


.duration-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 90px;
}


.duration-content h2 {
    margin:
        18px 0 22px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.3rem, 4vw, 3.7rem);

    line-height:
        1.15;

    color:
        var(--plans-heading);
}


.duration-content h2 span {
    color:
        var(--plans-primary);
}


.duration-content > p {
    max-width:
        580px;

    margin:
        0 0 30px;

    line-height:
        1.8;

    color:
        var(--plans-text);
}


.duration-points {
    display: grid;
    gap: 15px;
}


.duration-point {
    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        15px 18px;

    background:
        var(--plans-off-white);

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

    border-radius:
        13px;

    color:
        var(--plans-text);

    font-size:
        0.88rem;
}


.duration-point i {
    color:
        var(--plans-primary);
}


/* =====================================================
   DURATION VISUAL
===================================================== */

.duration-visual {
    position: relative;
}


.duration-card {
    padding:
        35px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f8f6
        );

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

    border-radius:
        28px;

    box-shadow:
        var(--plans-shadow-md);
}


.duration-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom:
        25px;

    color:
        var(--plans-heading);

    font-weight:
        700;

    border-bottom:
        1px solid
        var(--plans-border);
}


.duration-card-header i {
    color:
        var(--plans-primary);
}


/* =====================================================
   TIMELINE
===================================================== */

.duration-timeline {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 12px;

    padding:
        40px 0;
}


.timeline-item {
    text-align:
        center;
}


.timeline-item span {
    display: block;

    margin-bottom:
        7px;

    font-size:
        0.7rem;

    color:
        #899590;
}


.timeline-item strong {
    display: block;

    font-size:
        0.78rem;

    line-height:
        1.4;

    color:
        var(--plans-heading);
}


.timeline-item.active strong {
    color:
        var(--plans-primary);
}


.timeline-item.highlight strong {
    color:
        #a77d2f;
}


.timeline-line {
    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--plans-primary),
            var(--plans-gold)
        );
}


/* =====================================================
   DURATION NOTE
===================================================== */

.duration-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding:
        15px;

    border-radius:
        12px;

    background:
        #ffffff;

    font-size:
        0.8rem;

    line-height:
        1.6;

    color:
        var(--plans-text);
}


.duration-note i {
    margin-top: 2px;

    color:
        var(--plans-gold);
}


/* =====================================================
   HOW TO INVEST
===================================================== */

.how-to-invest {
    background:
        var(--plans-off-white);
}


.how-to-invest .section-heading {
    margin-bottom:
        55px;
}


.investment-steps-grid {
    display: grid;

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

    gap: 20px;
}


.investment-step-card {
    position: relative;

    padding:
        30px;

    background:
        #ffffff;

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

    border-radius:
        20px;

    transition:
        var(--plans-transition);
}


.investment-step-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        var(--plans-shadow-sm);
}


.step-card-number {
    position: absolute;

    top: 20px;
    right: 20px;

    font-size:
        0.75rem;

    font-weight:
        700;

    color:
        #c8d1ce;
}


.step-card-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin-bottom:
        24px;

    border-radius:
        16px;

    background:
        var(--plans-primary-light);

    color:
        var(--plans-primary);

    font-size:
        1.15rem;
}


.investment-step-card h3 {
    margin:
        0 0 10px;

    font-size:
        1rem;

    color:
        var(--plans-heading);
}


.investment-step-card p {
    margin: 0;

    font-size:
        0.85rem;

    line-height:
        1.7;

    color:
        var(--plans-text);
}


/* =====================================================
   INVESTMENT NOTICE
===================================================== */

.investment-notice-section {
    padding:
        0 0 100px;

    background:
        var(--plans-off-white);
}


.investment-notice {
    display: flex;
    align-items: center;

    gap: 20px;

    padding:
        30px;

    background:
        #ffffff;

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

    border-radius:
        22px;

    box-shadow:
        var(--plans-shadow-sm);
}


.notice-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius:
        18px;

    background:
        #fff6e4;

    color:
        #b5832c;

    font-size:
        1.25rem;
}


.notice-content {
    flex-grow: 1;
}


.notice-content h3 {
    margin:
        0 0 8px;

    color:
        var(--plans-heading);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.45rem;
}


.notice-content p {
    max-width:
        850px;

    margin: 0;

    font-size:
        0.85rem;

    line-height:
        1.7;

    color:
        var(--plans-text);
}


.notice-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    white-space:
        nowrap;

    color:
        var(--plans-primary);

    text-decoration:
        none;

    font-size:
        0.85rem;

    font-weight:
        700;
}


.notice-link i {
    font-size:
        0.75rem;

    transition:
        transform var(--plans-transition);
}


.notice-link:hover i {
    transform:
        translateX(5px);
}


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

.plans-final-cta {
    position: relative;

    padding:
        110px 0;

    background:
        linear-gradient(
            135deg,
            #032f28,
            #075a49
        );

    color:
        #ffffff;

    text-align:
        center;
}


.plans-final-cta .cta-content {
    position: relative;
    z-index: 2;

    max-width:
        820px;
}


.plans-final-cta h2 {
    margin:
        20px auto;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.7rem, 5vw, 4.7rem);

    line-height:
        1.08;

    color:
        #ffffff;
}


.plans-final-cta h2 span {
    display: block;

    color:
        rgba(255, 255, 255, 0.62);
}


.plans-final-cta p {
    max-width:
        650px;

    margin:
        0 auto;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.68);
}


.plans-final-cta .cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top:
        35px;
}


.plans-final-cta .btn-light {
    background:
        #ffffff;

    color:
        var(--plans-primary-dark);

    border-color:
        #ffffff;
}


.plans-final-cta .btn-transparent {
    background:
        transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    color:
        #ffffff;
}


.plans-final-cta .btn-transparent:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.plans-final-cta .cta-note {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top:
        25px;

    font-size:
        0.8rem;

    color:
        rgba(255, 255, 255, 0.55);
}


.plans-final-cta .cta-note i {
    color:
        var(--plans-gold);
}


/* =====================================================
   CTA BACKGROUND SHAPES
===================================================== */

.plans-final-cta .cta-shape {
    position: absolute;

    border-radius:
        50%;

    pointer-events: none;
}


.plans-final-cta .cta-shape-one {
    width: 400px;
    height: 400px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.plans-final-cta .cta-shape-two {
    width: 350px;
    height: 350px;

    bottom: -200px;
    right: -100px;

    background:
        rgba(214, 169, 75, 0.08);
}


/* =====================================================
   SECTION TAG ADJUSTMENTS
===================================================== */

.plans-hero .light-tag,
.free-invest-section .light-tag,
.plans-final-cta .light-tag {
    color:
        rgba(255, 255, 255, 0.82);

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);
}


/* =====================================================
   PLAN DETAILS EXPANDED STATE
===================================================== */

.plan-extra-details {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        margin 0.3s ease;
}


.plan-card.details-open .plan-extra-details {
    max-height:
        300px;

    opacity: 1;

    margin-top:
        18px;
}


.plan-extra-details-inner {
    padding:
        16px;

    border-radius:
        12px;

    background:
        var(--plans-off-white);

    border:
        1px solid
        var(--plans-border);
}


.plan-extra-details p {
    margin: 0;

    font-size:
        0.82rem;

    line-height:
        1.7;

    color:
        var(--plans-text);
}


/* =====================================================
   ANIMATION STATES
===================================================== */

.plan-card,
.profit-card,
.investment-step-card,
.intro-feature {
    will-change:
        transform;
}


/* =====================================================
   RESPONSIVE - LARGE TABLET
===================================================== */

@media (max-width: 1100px) {

    .plans-intro-grid {
        gap: 50px;
    }


    .free-invest-wrapper {
        gap: 40px;

        padding:
            50px;
    }


    .duration-grid {
        gap: 50px;
    }


    .investment-steps-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 900px) {

    .plans-hero {
        padding:
            140px 0 80px;
    }


    .plans-hero-stats {
        grid-template-columns:
            1fr;

        max-width:
            500px;
    }


    .plans-intro-grid {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .plans-grid {
        grid-template-columns:
            1fr;
    }


    .plan-description {
        min-height:
            auto;
    }


    .free-invest-wrapper {
        grid-template-columns:
            1fr;

        padding:
            45px;
    }


    .profit-structure-grid {
        grid-template-columns:
            1fr;
    }


    .duration-grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .investment-notice {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .notice-link {
        width:
            100%;
    }

}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 650px) {

    .plans-hero {
        padding:
            120px 0 70px;
    }


    .plans-hero .breadcrumb {
        margin-bottom:
            30px;

        font-size:
            0.78rem;
    }


    .plans-hero h1 {
        font-size:
            2.8rem;
    }


    .plans-hero-text > p {
        font-size:
            0.95rem;
    }


    .plans-hero-actions {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .plans-hero-stats {
        margin-top:
            50px;
    }


    .plans-hero-stat {
        padding:
            15px;
    }


    .plans-intro {
        padding:
            70px 0;
    }


    .plans-intro-content h2,
    .duration-content h2 {
        font-size:
            2.25rem;
    }


    .plan-filter-wrapper {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding:
            8px;

        border-radius:
            14px;

        scrollbar-width:
            none;
    }


    .plan-filter-wrapper::-webkit-scrollbar {
        display:
            none;
    }


    .plan-filter {
        flex-shrink:
            0;

        padding:
            10px 14px;
    }


    .investment-products .section-heading {
        margin-bottom:
            40px;
    }


    .plan-card {
        padding:
            24px;
    }


    .plan-card h3 {
        font-size:
            1.55rem;
    }


    .popular-badge {
        top: 16px;
        right: 16px;

        font-size:
            0.6rem;
    }


    .more-plans-note {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            22px;
    }


    .free-invest-wrapper {
        padding:
            28px;

        border-radius:
            24px;
    }


    .free-invest-content h2 {
        font-size:
            2.45rem;
    }


    .free-invest-info {
        padding:
            20px;
    }


    .free-invest-step {
        grid-template-columns:
            34px 1fr;

        gap:
            12px;
    }


    .free-step-number {
        width: 32px;
        height: 32px;
    }


    .profit-card {
        padding:
            30px;
    }


    .profit-explanation {
        padding:
            22px;

        flex-direction:
            column;
    }


    .duration-card {
        padding:
            24px;
    }


    .duration-timeline {
        grid-template-columns:
            1fr;

        justify-items:
            start;

        padding:
            25px 0;

        gap:
            15px;
    }


    .timeline-item {
        width: 100%;

        text-align:
            left;

        padding:
            10px 0;
    }


    .timeline-line {
        width:
            2px;

        height:
            25px;

        margin-left:
            5px;
    }


    .investment-steps-grid {
        grid-template-columns:
            1fr;
    }


    .investment-notice-section {
        padding-bottom:
            70px;
    }


    .investment-notice {
        padding:
            22px;

        flex-direction:
            column;
    }


    .plans-final-cta {
        padding:
            80px 0;
    }


    .plans-final-cta h2 {
        font-size:
            2.5rem;
    }


    .plans-final-cta .cta-buttons {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .plans-final-cta .cta-buttons .btn {
        width:
            100%;

        justify-content:
            center;
    }

}


/* =====================================================
   RESPONSIVE - SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .plans-hero h1 {
        font-size:
            2.4rem;
    }


    .plans-hero-stat {
        gap:
            12px;
    }


    .hero-stat-icon {
        width: 42px;
        height: 42px;
    }


    .plan-card {
        padding:
            20px;
    }


    .plan-card-top {
        margin-bottom:
            20px;
    }


    .plan-price strong {
        font-size:
            2rem;
    }


    .free-invest-wrapper {
        padding:
            22px;
    }


    .free-invest-content h2 {
        font-size:
            2.15rem;
    }


    .free-invest-minimum {
        width:
            100%;

        padding:
            14px;
    }


    .profit-percentage {
        font-size:
            4.5rem;
    }

}