/*******************************
REBRANDED SECTION
*******************************/


.premium-hero {
    min-height: 100vh;
    padding: 105px 0 80px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,193,7,.18), transparent 35%),
        linear-gradient(145deg, #03152f 0%, #062d5c 48%, #03152f 100%);
}

/* BACKGROUND PATTERN */

.premium-hero .hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;

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

    background-size: 45px 45px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
}


/* GLOW */

.hero-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .18;
    pointer-events: none;
}

.hero-glow-1 {
    top: -180px;
    left: -100px;
    background: #0dcaf0;
}

.hero-glow-2 {
    right: -150px;
    bottom: 10%;
    background: #ffc107;
}


/* OFFER BADGE */

.hero-offer-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 25px;

    padding: 10px 18px;

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

    border-radius: 50px;

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

    backdrop-filter: blur(14px);

    color: #fff;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.18);
}

.hero-offer-badge strong {
    color: #ffc107;
}

.offer-dot {
    width: 8px;
    height: 8px;
    background: #20e37b;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(32,227,123,.9);
}

.offer-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.25);
}


/* HEADLINE */

.hero-title {

    max-width: 980px;

    margin: 0 auto 22px;

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

    line-height: 1.03;

    letter-spacing: -1.8px;

    text-shadow:
        0 8px 30px rgba(0,0,0,.25);
}

.hero-highlight {

    display: block;

    margin-top: 8px;

    background: linear-gradient(
        90deg,
        #ffc107,
        #ffe082,
        #ffc107
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* SUBTITLE */

.hero-subtitle {

    max-width: 780px;

    margin: 0 auto 22px;

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

    font-size: clamp(1.05rem, 2vw, 1.3rem);

    line-height: 1.65;
}

.hero-subtitle strong {
    color: #fff;
}


/* OWNERSHIP LINE */

.ownership-line {

    display: flex;

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

    flex-wrap: wrap;

    gap: 8px 15px;

    margin: 0 auto 30px;

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

    font-size: 14px;
}

.ownership-line span {
    color: #20e37b;
    font-weight: 900;
}


/* CTA */

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-btn {

    min-width: 260px;

    border: 0;

    border-radius: 14px;

    padding: 17px 30px;

    font-size: 18px;

    font-weight: 800;

    color: #14233a;

    box-shadow:
        0 15px 40px rgba(255,193,7,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.hero-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 50px rgba(255,193,7,.35);
}

.cta-note {

    margin-top: 12px;

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

    font-size: 12px;
}

.cta-note i {
    color: #20e37b;
    margin-right: 5px;
}


/* BENEFITS */

.hero-benefits {

    display: grid;

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

    gap: 12px;

    max-width: 930px;

    margin: 38px auto 48px;
}

.hero-benefit {

    display: flex;

    align-items: center;

    text-align: left;

    gap: 11px;

    padding: 14px;

    border-radius: 14px;

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

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

    backdrop-filter: blur(10px);

    color: #fff;
}

.benefit-icon {

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    background: rgba(255,193,7,.14);

    color: #ffc107;

    font-size: 15px;
}

.hero-benefit strong {

    display: block;

    font-size: 13px;

    line-height: 1.3;
}

.hero-benefit small {

    display: block;

    margin-top: 2px;

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

    font-size: 10px;
}


/* DASHBOARD */

.dashboard-showcase {

    position: relative;

    max-width: 1000px;

    margin: 0 auto;
}

.dashboard-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    margin-bottom: 12px;

    border-radius: 50px;

    background: rgba(0,0,0,.25);

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

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

    font-size: 12px;

    font-weight: 600;
}

.live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #20e37b;

    box-shadow: 0 0 10px rgba(32,227,123,.8);
}


.dashboard-frame {

    position: relative;

    padding: 10px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.25),
            rgba(255,255,255,.05)
        );

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);

    overflow: hidden;
}

.dashboard-frame img {

    display: block;

    width: 100%;

    border-radius: 11px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.3);
}

.dashboard-caption {

    margin-top: 13px;

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

    font-size: 12px;
}

.dashboard-caption i {
    color: #20e37b;
    margin-right: 5px;
}


/* MOBILE */

@media (max-width: 767px) {

    .premium-hero {

        min-height: auto;

        padding:
            90px 16px
            55px;
    }

    .hero-offer-badge {

        max-width: 94%;

        padding: 9px 13px;

        font-size: 10px;

        line-height: 1.5;
    }

    .offer-divider {
        display: none;
    }

    .hero-title {

        font-size: clamp(2.15rem, 10vw, 3.1rem);

        letter-spacing: -1px;

        line-height: 1.06;

        margin-bottom: 20px;
    }

    .hero-subtitle {

        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 18px;
    }

    .ownership-line {

        gap: 7px 11px;

        font-size: 11px;

        margin-bottom: 25px;
    }

    .hero-btn {

        width: 100%;

        max-width: 330px;

        padding: 16px 20px;

        font-size: 16px;
    }

    .hero-benefits {

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

        gap: 9px;

        margin:
            30px auto
            35px;
    }

    .hero-benefit {

        padding: 11px;

        gap: 8px;
    }

    .benefit-icon {

        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 13px;
    }

    .hero-benefit strong {
        font-size: 11px;
    }

    .hero-benefit small {
        font-size: 9px;
    }

    .dashboard-frame {
        padding: 5px;
        border-radius: 13px;
    }

    .dashboard-frame img {
        border-radius: 9px;
    }

    .dashboard-caption {
        font-size: 10px;
    }
}


/* EXTRA SMALL DEVICES */

@media (max-width: 380px) {

    .premium-hero {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-benefits {
        grid-template-columns: 1fr;
    }

    .hero-benefit {
        justify-content: flex-start;
    }
}



/* =========================================================
   PREMIUM PRICING SECTION
========================================================= */

.saas-pricing {
    position: relative;
    padding: 110px 0 120px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(41, 91, 190, .18),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #f7f9fd 0%,
            #eef2f8 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.pricing-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(20, 65, 150, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(20, 65, 150, .07),
            transparent 30%
        );
}


.pricing-pattern {
    position: absolute;
    inset: 0;
    opacity: .25;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(20, 55, 120, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 55, 120, .035) 1px,
            transparent 1px
        );

    background-size: 40px 40px;
}


/* =========================================================
   HEADER
========================================================= */

.pricing-header {
    max-width: 760px;
    margin: 0 auto 58px;
}


.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 15px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: rgba(8, 36, 109, .07);
    border: 1px solid rgba(8, 36, 109, .10);

    color: #08246d;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.pricing-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f5a400;

    box-shadow:
        0 0 0 4px rgba(245, 164, 0, .12);
}


.pricing-title {
    margin: 0;

    color: #071a4d;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;

    letter-spacing: -1.5px;
}


.pricing-subtitle {
    max-width: 650px;

    margin-top: 18px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   PRICING CARD
========================================================= */

.pricing-card {

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid rgba(8, 36, 109, .10);

    box-shadow:
        0 35px 90px rgba(7, 26, 77, .14),
        0 10px 30px rgba(7, 26, 77, .07);

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


.pricing-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 45px 110px rgba(7, 26, 77, .18),
        0 15px 35px rgba(7, 26, 77, .08);
}


/* =========================================================
   TOP ACCENT
========================================================= */

.pricing-card-accent {

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #08246d,
            #174db7,
            #f5a400,
            #08246d
        );
}


/* =========================================================
   POPULAR BADGE
========================================================= */

.pricing-popular {

    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 5;
}


.pricing-popular span {

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 13px;

    border-radius: 999px;

    background: #fff7dc;

    border: 1px solid rgba(245, 164, 0, .28);

    color: #8a5a00;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .8px;
}


.pricing-popular i {
    color: #e09a00;
}


/* =========================================================
   CARD BODY
========================================================= */

.pricing-card .card-body {
    padding: 45px 42px 38px;
}


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

.pricing-plan {

    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 32px;

    padding-right: 120px;
}


.pricing-plan-icon {

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

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

    border-radius: 17px;

    color: #ffffff;

    font-size: 22px;

    background:
        linear-gradient(
            145deg,
            #123b9c,
            #08246d
        );

    box-shadow:
        0 12px 25px rgba(8, 36, 109, .22);
}


.pricing-plan-label {

    margin-bottom: 4px;

    color: #8a94a6;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.pricing-plan-name {

    margin: 0;

    color: #071a4d;

    font-size: 22px;
    font-weight: 850;

    line-height: 1.25;
}


.pricing-plan-description {

    margin: 5px 0 0;

    color: #64748b;

    font-size: 13px;
    font-weight: 600;
}


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

.pricing-price-area {

    padding: 27px 20px 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f7f9fd,
            #edf2fa
        );

    border: 1px solid rgba(8, 36, 109, .08);

    text-align: center;
}


.pricing-price-label {

    margin-bottom: 7px;

    color: #7b8799;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.pricing-price {

    color: #08246d;

    font-size: clamp(44px, 7vw, 64px);

    line-height: 1;

    font-weight: 950;

    letter-spacing: -2.5px;
}


.pricing-currency {

    font-size: .55em;

    vertical-align: top;

    margin-right: 2px;
}


.pricing-payment-type {

    margin-top: 9px;

    color: #243b68;

    font-size: 14px;
    font-weight: 800;
}


.pricing-price-note {

    margin-top: 4px;

    color: #7b8799;

    font-size: 12px;
}


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

.pricing-action {

    margin-top: 25px;
}


.pricing-cta {

    min-height: 62px;

    display: flex;

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

    gap: 12px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #123b9c,
            #08246d
        );

    color: #ffffff;

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

    box-shadow:
        0 15px 30px rgba(8, 36, 109, .22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.pricing-cta:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 20px 38px rgba(8, 36, 109, .28);
}


.pricing-cta-icon {

    width: 31px;
    height: 31px;

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

    border-radius: 50%;

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

    font-size: 12px;
}


.pricing-secure {

    display: flex;

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

    gap: 7px;

    margin-top: 13px;

    color: #7b8799;

    font-size: 11px;
    font-weight: 600;
}


.pricing-secure i {
    color: #16834b;
}


.pricing-secure-dot {
    opacity: .45;
}


/* =========================================================
   DIVIDER
========================================================= */

.pricing-divider {

    display: flex;

    align-items: center;

    gap: 13px;

    margin: 32px 0 20px;
}


.pricing-divider span {

    height: 1px;

    flex: 1;

    background: #e5eaf2;
}


.pricing-divider strong {

    color: #8a94a6;

    font-size: 10px;

    letter-spacing: 1.5px;

    white-space: nowrap;
}


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

.pricing-features {

    margin: 0;
    padding: 0;
}


.pricing-features li {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 0;

    border-bottom: 1px solid #edf0f5;
}


.pricing-features li:last-child {
    border-bottom: 0;
}


.pricing-feature-icon {

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

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

    border-radius: 11px;

    background: #f0f4fb;

    color: #123b9c;

    font-size: 14px;
}


.pricing-feature-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.pricing-feature-content strong {

    color: #172554;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.3;
}


.pricing-feature-content small {

    color: #7b8799;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM TRUST
========================================================= */

.pricing-bottom-note {

    display: grid;

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

    gap: 10px;

    margin-top: 25px;

    padding: 16px;

    border-radius: 15px;

    background: #f8fafc;

    border: 1px solid #e8edf4;
}


.pricing-bottom-item {

    display: flex;

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

    gap: 6px;

    color: #526176;

    font-size: 10px;

    font-weight: 700;

    text-align: center;
}


.pricing-bottom-item i {

    color: #16834b;

    font-size: 12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

    .saas-pricing {
        padding: 75px 0 80px;
    }


    .pricing-header {
        margin-bottom: 38px;
        padding: 0 10px;
    }


    .pricing-title {
        font-size: 31px;
        letter-spacing: -1px;
    }


    .pricing-subtitle {
        font-size: 14px;
        line-height: 1.65;
    }


    .pricing-card {
        border-radius: 22px;
    }


    .pricing-card .card-body {
        padding: 35px 20px 25px;
    }


    .pricing-popular {
        top: 17px;
        right: 17px;
    }


    .pricing-popular span {
        padding: 7px 10px;
        font-size: 9px;
    }


    .pricing-plan {
        padding-right: 95px;
        gap: 12px;
    }


    .pricing-plan-icon {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
        border-radius: 14px;
        font-size: 18px;
    }


    .pricing-plan-name {
        font-size: 18px;
    }


    .pricing-plan-description {
        font-size: 11px;
    }


    .pricing-price-area {
        padding: 23px 12px;
    }


    .pricing-price {
        font-size: 48px;
        letter-spacing: -2px;
    }


    .pricing-cta {
        min-height: 58px;
        font-size: 14px;
    }


    .pricing-features li {
        padding: 11px 0;
    }


    .pricing-feature-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }


    .pricing-feature-content strong {
        font-size: 12px;
    }


    .pricing-feature-content small {
        font-size: 10px;
    }


    .pricing-bottom-note {
        grid-template-columns: 1fr;
        gap: 9px;
    }


    .pricing-bottom-item {
        justify-content: flex-start;
    }

}


@media (max-width: 380px) {

    .pricing-card .card-body {
        padding-left: 16px;
        padding-right: 16px;
    }


    .pricing-plan {
        padding-right: 85px;
    }


    .pricing-plan-name {
        font-size: 16px;
    }


    .pricing-price {
        font-size: 43px;
    }

}


/* =========================================================
   WHY DIFFERENT
========================================================= */

.why-different-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(13, 110, 253, 0.055),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 193, 7, 0.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fd 100%
        );
}


/* HEADER */

.why-header {
    max-width: 850px;
}

.why-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(13, 59, 126, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    color: #0d3b7e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.why-eyebrow i {
    color: #d6a928;
}

.why-title {
    margin: 18px 0 0;
    color: #071b3a;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.why-title span {
    display: block;
    margin-top: 7px;
    background: linear-gradient(
        90deg,
        #0b3c88,
        #1465c0
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.why-subtitle {
    max-width: 680px;
    margin: 18px auto 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   DIFFERENCE CARDS
========================================================= */

.difference-card {
    position: relative;
    padding: 32px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(15, 35, 65, 0.08);
    background: #ffffff;
    box-shadow:
        0 15px 45px rgba(12, 35, 70, 0.07),
        0 2px 8px rgba(12, 35, 70, 0.035);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.difference-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 55px rgba(12, 35, 70, 0.11),
        0 4px 12px rgba(12, 35, 70, 0.05);
}


/* TOP */

.card-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
}

.challenge-icon {
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #ffd8d5;
}

.solution-icon {
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}

.card-label {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .65;
}

.challenge-card .card-label {
    color: #8a1c15;
}

.card-top h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.challenge-card h3 {
    color: #172b4d;
}

.solution-card h3 {
    color: #ffffff;
}


/* DIVIDER */

.card-divider {
    height: 1px;
    margin: 25px 0 20px;
    background: rgba(15, 35, 65, 0.08);
}

.solution-card .card-divider {
    background: rgba(255,255,255,.15);
}


/* =========================================================
   CHALLENGE
========================================================= */

.challenge-card {
    border-top: 3px solid #e2554f;
}

.challenge-card .difference-list {
    color: #334155;
}


/* =========================================================
   SOLUTION
========================================================= */

.solution-card {
    color: #ffffff;
    border: 0;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255,255,255,.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #09285f 0%,
            #0b3c88 55%,
            #1261b7 100%
        );

    box-shadow:
        0 20px 55px rgba(7, 45, 100, .20);
}

.solution-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    filter: blur(5px);
}


/* =========================================================
   LIST
========================================================= */

.difference-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.difference-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 19px;
}

.difference-list li:last-child {
    margin-bottom: 0;
}

.list-icon {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 11px;
}

.challenge-card .list-icon {
    color: #b42318;
    background: #fff0ef;
}

.solution-card .list-icon {
    color: #0b4c91;
    background: #ffffff;
}

.difference-list strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 800;
}

.challenge-card .difference-list strong {
    color: #172b4d;
}

.solution-card .difference-list strong {
    color: #ffffff;
}

.difference-list p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.challenge-card .difference-list p {
    color: #64748b;
}

.solution-card .difference-list p {
    color: rgba(255,255,255,.72);
}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.capabilities-title {
    margin: 15px 0 8px;
    color: #071b3a;
    font-size: clamp(25px, 3vw, 35px);
    font-weight: 900;
    letter-spacing: -.8px;
}

.capabilities-subtitle {
    max-width: 650px;
    margin: 0 auto;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.capability-card {
    height: 100%;
    min-height: 135px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    text-align: center;
    border: 1px solid rgba(12, 40, 80, .08);
    border-radius: 18px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 8px 25px rgba(12, 40, 80, .045);
    transition: all .25s ease;
}

.capability-card:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 110, 253, .2);
    box-shadow: 0 15px 35px rgba(12, 40, 80, .09);
}

.capability-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 13px;
    color: #0b4c91;
    background: #eef5ff;
    font-size: 17px;
}

.capability-card strong {
    color: #172b4d;
    font-size: 14px;
    font-weight: 800;
}

.capability-card span {
    color: #7b8798;
    font-size: 11px;
    margin-top: 2px;
}


/* =========================================================
   BOTTOM TRUST
========================================================= */

.why-bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.why-bottom-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
    padding: 15px 20px;
    border: 1px solid rgba(12, 40, 80, .08);
    border-radius: 15px;
    background: rgba(255,255,255,.75);
}

.why-bottom-item > i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #b78300;
    background: #fff8df;
}

.why-bottom-item strong {
    display: block;
    color: #172b4d;
    font-size: 12px;
    font-weight: 800;
}

.why-bottom-item span {
    display: block;
    margin-top: 2px;
    color: #7b8798;
    font-size: 11px;
}


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

@media (max-width: 767.98px) {

    .why-different-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .why-title {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .why-subtitle {
        font-size: 15px;
        line-height: 1.65;
    }

    .difference-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .card-top {
        gap: 12px;
    }

    .card-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        border-radius: 13px;
        font-size: 17px;
    }

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

    .difference-list li {
        gap: 10px;
        margin-bottom: 17px;
    }

    .difference-list strong {
        font-size: 13px;
    }

    .difference-list p {
        font-size: 12px;
        line-height: 1.55;
    }

    .capabilities-title {
        font-size: 26px;
    }

    .capabilities-subtitle {
        font-size: 14px;
    }

    .capability-card {
        min-height: 125px;
    }

    .why-bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .why-bottom-item {
        min-width: 0;
    }

}




/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.saas-testimonials {
    padding: 95px 0;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(31, 101, 190, .25),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(214, 169, 40, .10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #06152f 0%,
            #08285d 48%,
            #061a3d 100%
        );
}


/* BACKGROUND GLOW */

.testi-bg {
    position: absolute;
    width: 520px;
    height: 520px;
    top: -260px;
    right: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    filter: blur(4px);
    pointer-events: none;
}

.testi-pattern {
    position: absolute;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
}


/* =========================================================
   HEADER
========================================================= */

.testi-header {
    max-width: 760px;
    margin: 0 auto 55px;
}

.testi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;
    background: rgba(255,255,255,.06);
    color: #f1c94a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.testi-title {
    margin: 19px 0 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.4px;
}

.testi-title span {
    display: block;
    margin-top: 6px;
    color: #f1c94a;
}

.testi-subtitle {
    max-width: 650px;
    margin: 18px auto 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.testimonial-card {
    position: relative;
    height: 100%;
    padding: 27px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );
    box-shadow:
        0 20px 55px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(241,201,74,.25);
    box-shadow:
        0 25px 65px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.featured-testimonial {
    border-color: rgba(241,201,74,.22);
    background:
        linear-gradient(
            145deg,
            rgba(241,201,74,.095),
            rgba(255,255,255,.055)
        );
}


/* =========================================================
   USER
========================================================= */

.testimonial-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.testimonial-avatar {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #f1c94a,
            #c49316
        );
    color: #071a3b;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.testimonial-user {
    min-width: 0;
    text-align: left;
}

.testimonial-user strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.testimonial-user span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.testimonial-quote {
    margin-left: auto;
    color: rgba(241,201,74,.45);
    font-size: 22px;
}


/* =========================================================
   RATING
========================================================= */

.testimonial-stars {
    display: flex;
    gap: 3px;
    margin: 22px 0 14px;
    color: #f1c94a;
    font-size: 10px;
}


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

.testimonial-text {
    min-height: 118px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
}


/* =========================================================
   SERVICE TAG
========================================================= */

.testimonial-service {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.60);
    font-size: 10px;
    font-weight: 700;
}

.testimonial-service i {
    color: #f1c94a;
    font-size: 9px;
}


/* =========================================================
   TRUST FOOTER
========================================================= */

.testi-trust {
    max-width: 920px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 55px auto 0;
    padding: 22px 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.testi-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}

.testi-trust-item > i {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(241,201,74,.10);
    color: #f1c94a;
    font-size: 14px;
}

.testi-trust-item strong {
    display: block;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.testi-trust-item span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

.testi-trust-divider {
    width: 1px;
    height: 35px;
    margin: 0 30px;
    background: rgba(255,255,255,.10);
}


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

@media (max-width: 767.98px) {

    .saas-testimonials {
        padding: 65px 0;
    }

    .testi-header {
        margin-bottom: 35px;
    }

    .testi-title {
        font-size: 31px;
        letter-spacing: -.8px;
    }

    .testi-subtitle {
        font-size: 14px;
        line-height: 1.65;
    }

    .testimonial-card {
        padding: 23px 20px;
        border-radius: 19px;
    }

    .testimonial-text {
        min-height: auto;
        font-size: 13px;
        line-height: 1.7;
    }

    .testi-trust {
        align-items: stretch;
        flex-direction: column;
        gap: 17px;
        padding: 19px;
    }

    .testi-trust-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }

}



/* =========================================================
   CONCERNS SECTION
========================================================= */

.concerns-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(21, 88, 170, .07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(218, 169, 36, .07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8faff 0%,
            #ffffff 100%
        );
}


/* BACKGROUND ORBS */

.concerns-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.concerns-orb-one {
    width: 330px;
    height: 330px;
    top: -180px;
    left: -150px;
    background: rgba(20, 88, 170, .045);
}

.concerns-orb-two {
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -150px;
    background: rgba(218, 169, 36, .045);
}


/* =========================================================
   HEADER
========================================================= */

.concerns-header {
    max-width: 800px;
    margin: 0 auto 58px;
}

.concerns-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(13, 59, 126, .12);
    border-radius: 50px;
    background: rgba(255,255,255,.8);
    color: #0b4388;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 18px rgba(12, 40, 80, .04);
}

.concerns-eyebrow i {
    color: #c5961b;
}

.concerns-title {
    margin: 19px 0 0;
    color: #071a38;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.4px;
}

.concerns-title span {
    display: block;
    margin-top: 7px;
    color: #0b4b96;
}

.concerns-subtitle {
    max-width: 690px;
    margin: 19px auto 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   CONCERN CARD
========================================================= */

.concern-card {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 29px;
    overflow: hidden;

    border: 1px solid rgba(11, 43, 83, .08);
    border-radius: 22px;

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

    box-shadow:
        0 14px 45px rgba(12, 39, 75, .055),
        0 2px 8px rgba(12, 39, 75, .025);

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

.concern-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(
        180deg,
        #0c4c98,
        #d3a328
    );
    opacity: .75;
}

.concern-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 76, 150, .15);
    box-shadow:
        0 22px 55px rgba(12, 39, 75, .09),
        0 4px 12px rgba(12, 39, 75, .035);
}


/* NUMBER */

.concern-number {
    position: absolute;
    top: 17px;
    right: 22px;
    color: rgba(7, 26, 56, .045);
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
}


/* ICON */

.concern-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 50px;
    width: 50px;
    height: 50px;

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

    border-radius: 15px;

    color: #0b4c96;
    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #e3efff
        );

    border: 1px solid rgba(11, 76, 150, .08);

    font-size: 18px;
}


/* CONTENT */

.concern-content {
    position: relative;
    z-index: 1;
    padding-right: 18px;
}

.concern-label {
    display: block;
    margin-bottom: 6px;
    color: #a77c0b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.concern-content h3 {
    margin: 0 0 10px;
    color: #12294c;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 850;
}

.concern-content p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}


/* ANSWER */

.concern-answer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid rgba(12, 39, 75, .07);
    color: #40536e;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
}

.concern-answer i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #0c8a61;
    font-size: 11px;
}


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

.concerns-cta {
    max-width: 680px;
    margin: 70px auto 0;
}

.cta-line {
    width: 55px;
    height: 3px;
    margin: 0 auto 25px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #0b4c96,
        #d3a328
    );
}

.cta-eyebrow {
    color: #a77c0b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.concerns-cta h3 {
    margin: 10px 0 8px;
    color: #071a38;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: -.7px;
}

.concerns-cta > p {
    max-width: 570px;
    margin: 0 auto 25px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* DEMO BUTTON */

.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 56px;
    padding: 0 24px;

    border: 0;
    border-radius: 14px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0a3473,
            #0b55a4
        );

    box-shadow:
        0 12px 28px rgba(9, 61, 125, .20);

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.btn-demo:hover {
    transform: translateY(-3px);
    color: #ffffff !important;
    box-shadow:
        0 17px 35px rgba(9, 61, 125, .28);
}

.btn-demo-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    font-size: 11px;
}

.btn-demo-arrow {
    margin-left: 5px;
    color: #f1c84a;
    font-size: 12px;
}


/* DEMO NOTE */

.demo-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
    color: #8995a7;
    font-size: 10px;
}

.demo-note i {
    color: #0b4c96;
}


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

@media (max-width: 767.98px) {

    .concerns-section {
        padding: 65px 0;
    }

    .concerns-header {
        margin-bottom: 38px;
    }

    .concerns-title {
        font-size: 31px;
        letter-spacing: -.8px;
    }

    .concerns-subtitle {
        font-size: 14px;
        line-height: 1.65;
    }

    .concern-card {
        gap: 13px;
        padding: 23px 19px;
        border-radius: 19px;
    }

    .concern-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 16px;
    }

    .concern-number {
        top: 14px;
        right: 17px;
        font-size: 34px;
    }

    .concern-content {
        padding-right: 5px;
    }

    .concern-content h3 {
        font-size: 16px;
    }

    .concern-content p {
        font-size: 12px;
        line-height: 1.65;
    }

    .concern-answer {
        font-size: 10px;
    }

    .concerns-cta {
        margin-top: 50px;
    }

    .concerns-cta > p {
        font-size: 13px;
    }

    .btn-demo {
        width: 100%;
        justify-content: center;
    }

}




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

.saas-benefits {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(31, 87, 180, .22),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(218, 165, 32, .12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #030b25 0%,
      #06163f 48%,
      #071d50 100%
    );
}


/* BACKGROUND */

.benefits-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );
  background-size: 55px 55px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  pointer-events: none;
}


.benefits-pattern {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -250px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(255,255,255,.015),
    0 0 0 140px rgba(255,255,255,.01);
  pointer-events: none;
}


/* HEADER */

.benefits-header {
  max-width: 820px;
  margin: 0 auto 65px;
}


.saas-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid rgba(246, 194, 62, .35);
  border-radius: 100px;
  background: rgba(246, 194, 62, .08);
  color: #f6c23e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}


.benefits-title {
  margin: 18px 0 18px;
  color: #fff;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.8px;
}


.benefits-title span {
  display: block;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #f6c23e 52%,
    #ffe89a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.benefits-subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255,255,255,.68);
  font-size: 16px;
  line-height: 1.8;
}


/* CARDS */

.benefit-card {
  position: relative;
  height: 100%;
  min-height: 255px;
  padding: 32px 30px;
  text-align: left;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 20px 55px rgba(0,0,0,.18);

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


.benefit-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(246,194,62,.8),
    transparent
  );

  opacity: .55;
}


.benefit-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  bottom: -65px;

  border-radius: 50%;
  background: rgba(246,194,62,.055);

  pointer-events: none;
}


.benefit-card:hover {
  transform: translateY(-7px);
  border-color: rgba(246,194,62,.32);

  box-shadow:
    0 25px 65px rgba(0,0,0,.28),
    0 0 35px rgba(246,194,62,.05);
}


/* NUMBER */

.benefit-number {
  position: absolute;
  top: 22px;
  right: 25px;

  color: rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}


/* ICON */

.benefit-icon {
  width: 53px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  border: 1px solid rgba(246,194,62,.28);
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(246,194,62,.14),
      rgba(246,194,62,.04)
    );

  color: #f6c23e;

  font-size: 20px;
  font-weight: 900;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}


.benefit-icon span {
  line-height: 1;
}


/* CONTENT */

.benefit-card h5 {
  margin: 0 0 11px;

  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
}


.benefit-card p {
  margin: 0;

  color: rgba(255,255,255,.61);
  font-size: 14px;
  line-height: 1.75;
}


/* BOTTOM PANEL */

.benefits-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 55px;
  padding: 27px 30px;

  border: 1px solid rgba(246,194,62,.2);
  border-radius: 18px;

  background:
    linear-gradient(
      100deg,
      rgba(246,194,62,.09),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 20px 55px rgba(0,0,0,.16);
}


.benefits-bottom-content {
  display: flex;
  align-items: center;
  gap: 17px;
}


.benefits-bottom-icon {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

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

  border-radius: 50%;

  background: #f6c23e;
  color: #071838;

  font-weight: 900;
}


.benefits-bottom strong {
  display: block;
  margin-bottom: 4px;

  color: #fff;
  font-size: 15px;
}


.benefits-bottom p {
  margin: 0;

  color: rgba(255,255,255,.58);
  font-size: 13px;
  line-height: 1.6;
}


.benefits-cta {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 13px 20px;

  border-radius: 10px;

  background: #f6c23e;
  color: #071838;

  font-size: 13px;
  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 10px 30px rgba(246,194,62,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.benefits-cta span {
  font-size: 18px;
  line-height: 1;
}


.benefits-cta:hover {
  color: #071838;
  transform: translateY(-2px);

  box-shadow:
    0 15px 35px rgba(246,194,62,.28);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .saas-benefits {
    padding: 85px 0;
  }

  .benefits-header {
    margin-bottom: 50px;
  }

}


@media (max-width: 767.98px) {

  .saas-benefits {
    padding: 70px 0;
  }

  .benefits-title {
    font-size: clamp(30px, 9vw, 42px);
  }

  .benefits-subtitle {
    font-size: 14px;
    line-height: 1.7;
  }

  .benefit-card {
    min-height: auto;
    padding: 27px 24px;
  }

  .benefit-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
  }

  .benefit-card h5 {
    font-size: 17px;
  }

  .benefit-card p {
    font-size: 13.5px;
  }

  .benefits-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
  }

  .benefits-bottom-content {
    align-items: flex-start;
  }

  .benefits-cta {
    width: 100%;
    justify-content: center;
  }

}


@media (max-width: 380px) {

  .saas-benefits {
    padding-left: 0;
    padding-right: 0;
  }

  .benefit-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .benefits-bottom {
    padding: 20px;
  }

}






/* =========================================================
   OFFER / URGENCY
========================================================= */

.saas-urgency {
  padding: 100px 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(33, 91, 190, .30),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #020817 0%,
      #06163d 52%,
      #071f55 100%
    );
}


.urgency-bg {
  position: absolute;
  inset: 0;

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

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 20%,
      black 80%,
      transparent
    );

  pointer-events: none;
}


.urgency-pattern {
  position: absolute;

  width: 650px;
  height: 650px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;

  box-shadow:
    0 0 0 80px rgba(255,255,255,.012),
    0 0 0 160px rgba(255,255,255,.008);

  pointer-events: none;
}


.urgency-content {
  max-width: 900px;
  margin: auto;
}


.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 8px 15px;

  border: 1px solid rgba(246,194,62,.28);
  border-radius: 100px;

  background: rgba(246,194,62,.07);

  color: #f6c23e;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}


.urgency-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #f6c23e;

  box-shadow:
    0 0 0 5px rgba(246,194,62,.08);
}


.urgency-title {
  margin: 22px auto 16px;

  max-width: 780px;

  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;

  font-weight: 900;
  letter-spacing: -1.5px;
}


.urgency-title span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #fff,
      #f6c23e,
      #ffe9a0
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.urgency-description {
  max-width: 700px;

  margin: 0 auto 35px;

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

  font-size: 16px;
  line-height: 1.8;
}


.urgency-description strong {
  color: #f6c23e;
  font-weight: 900;
}


/* OFFER CARD */

.offer-card {
  max-width: 700px;

  margin: 0 auto 32px;

  padding: 27px;

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

  gap: 30px;

  text-align: left;

  border: 1px solid rgba(246,194,62,.22);
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 25px 70px rgba(0,0,0,.25);
}


.offer-main {
  min-width: 200px;
}


.offer-label {
  margin-bottom: 5px;

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

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}


.offer-price {
  color: #f6c23e;

  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;

  font-weight: 900;
  letter-spacing: -1px;
}


.offer-price .currency {
  font-size: .6em;
  vertical-align: top;
}


.offer-payment {
  margin-top: 8px;

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

  font-size: 12px;
}


.offer-divider {
  width: 1px;
  height: 70px;

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


.offer-details {
  display: flex;
  flex-direction: column;
  gap: 11px;
}


.offer-detail {
  display: flex;
  align-items: center;
  gap: 9px;

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

  font-size: 13px;
}


.offer-check {
  display: inline-flex;

  width: 20px;
  height: 20px;

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

  border-radius: 50%;

  background: rgba(246,194,62,.12);
  color: #f6c23e;

  font-size: 11px;
  font-weight: 900;
}


/* DEADLINE */

.offer-deadline {
  margin: 30px 0;
}


.deadline-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 13px;

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

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
}


.deadline-label span {
  width: 28px;
  height: 1px;

  background: rgba(255,255,255,.18);
}


.countdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}


.countdown-box {
  min-width: 74px;

  padding: 13px 10px;

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}


.countdown-box span {
  display: block;

  color: #fff;

  font-size: 27px;
  line-height: 1;

  font-weight: 900;

  font-variant-numeric: tabular-nums;
}


.countdown-box small {
  display: block;

  margin-top: 6px;

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

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

  text-transform: uppercase;
  letter-spacing: 1px;
}


.countdown-separator {
  color: rgba(246,194,62,.7);

  font-size: 22px;
  font-weight: 900;
}


/* CTA */

.urgency-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  min-width: 270px;

  padding: 16px 25px;

  border: 0;
  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #ffd65a,
      #f2b928
    );

  color: #071838;

  font-size: 14px;
  font-weight: 900;

  box-shadow:
    0 15px 35px rgba(246,194,62,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.urgency-cta:hover {
  color: #071838;

  transform: translateY(-3px);

  box-shadow:
    0 20px 45px rgba(246,194,62,.28);
}


.urgency-cta strong {
  font-size: 21px;
  line-height: 1;
}


/* TRUST */

.urgency-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 22px;

  margin-top: 20px;
}


.urgency-trust span {
  color: rgba(255,255,255,.48);

  font-size: 11px;
}


.urgency-trust i {
  margin-right: 5px;

  color: #f6c23e;

  font-style: normal;
  font-weight: 900;
}


.urgency-note {
  max-width: 650px;

  margin: 25px auto 0;

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

  font-size: 10px;
  line-height: 1.6;
}


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

.saas-features {
  padding: 110px 0;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fd 100%
    );
}


.features-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.features-orb-one {
  width: 400px;
  height: 400px;

  left: -250px;
  top: 15%;

  background:
    radial-gradient(
      circle,
      rgba(13,110,253,.08),
      transparent 70%
    );
}


.features-orb-two {
  width: 350px;
  height: 350px;

  right: -220px;
  bottom: 5%;

  background:
    radial-gradient(
      circle,
      rgba(246,194,62,.09),
      transparent 70%
    );
}


.features-heading {
  max-width: 760px;

  margin: 0 auto 65px;
}


.features-title {
  margin: 18px 0 15px;

  color: #071838;

  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;

  font-weight: 900;
  letter-spacing: -1px;
}


.features-subtitle {
  max-width: 680px;

  margin: auto;

  color: #667085;

  font-size: 15px;
  line-height: 1.8;
}


/* FEATURE ITEMS */

.features-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.feature-item {
  position: relative;

  display: flex;
  gap: 17px;

  padding: 21px;

  border: 1px solid #e8ecf3;
  border-radius: 16px;

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

  box-shadow:
    0 10px 30px rgba(10,31,68,.035);

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


.feature-item:hover {
  transform: translateX(5px);

  border-color: rgba(13,110,253,.18);

  box-shadow:
    0 15px 35px rgba(10,31,68,.08);
}


.feature-icon {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #092b78,
      #0d4aa5
    );

  color: #f6c23e;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;

  box-shadow:
    0 8px 20px rgba(9,43,120,.15);
}


.feature-content h5 {
  margin: 2px 0 7px;

  color: #071838;

  font-size: 16px;
  font-weight: 850;
}


.feature-content p {
  margin: 0;

  color: #697586;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   PRODUCT PREVIEW
========================================================= */

.saas-preview-card {
  position: relative;

  padding: 15px;

  border: 1px solid #e1e7f0;
  border-radius: 24px;

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

  box-shadow:
    0 35px 80px rgba(12,39,83,.12);
}


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

  padding: 5px 8px 14px;
}


.preview-status {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #7a8699;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}


.preview-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #2da44e;
}


.preview-dots {
  display: flex;
  gap: 4px;
}


.preview-dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #ccd3df;
}


.preview-wrapper {
  position: relative;

  padding: 12px;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #071a43,
      #0b3a88
    );

  overflow: visible;
}


.glow-bg {
  position: absolute;

  width: 260px;
  height: 260px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(45,116,255,.35),
      transparent 70%
    );

  filter: blur(10px);
}


.dashboard-frame {
  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius: 11px;

  background: #fff;

  box-shadow:
    0 20px 45px rgba(0,0,0,.25);
}


.dashboard-frame img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}


/* PHONE */

.phone-mockup {
  position: absolute;

  right: -25px;
  bottom: -35px;

  width: 145px;

  padding: 7px;

  border: 3px solid #111d35;
  border-radius: 24px;

  background: #111827;

  box-shadow:
    0 25px 45px rgba(0,0,0,.35);

  z-index: 4;
}


.phone-top {
  position: absolute;

  left: 50%;
  top: 7px;

  transform: translateX(-50%);

  width: 48px;
  height: 12px;

  border-radius: 20px;

  background: #111827;

  z-index: 5;
}


.phone-speaker {
  width: 22px;
  height: 3px;

  margin: 4px auto;

  border-radius: 10px;

  background: rgba(255,255,255,.18);
}


.phone-screen {
  overflow: hidden;

  border-radius: 18px;

  background: #fff;
}


.phone-screen img {
  display: block;

  width: 100%;
  height: auto;
}


/* PREVIEW FOOTER */

.preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 9px 4px;
}


.preview-footer strong,
.preview-footer span {
  display: block;
}


.preview-footer strong {
  color: #071838;

  font-size: 13px;
  font-weight: 850;
}


.preview-footer span {
  margin-top: 2px;

  color: #8a95a6;

  font-size: 10px;
}


.preview-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;

  border-radius: 10px;

  background: #f5c542;

  color: #071838;

  font-size: 17px;
  font-weight: 900;
}


/* BOTTOM CTA */

.features-bottom {
  margin-top: 65px;
}


.features-bottom p {
  margin-bottom: 14px;

  color: #7a8699;

  font-size: 13px;
}


.features-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 20px;

  border: 1px solid #dbe2ec;
  border-radius: 10px;

  background: #fff;

  color: #092b78;

  font-size: 13px;
  font-weight: 800;

  text-decoration: none;

  box-shadow:
    0 8px 25px rgba(10,31,68,.06);

  transition: all .25s ease;
}


.features-demo-btn:hover {
  transform: translateY(-2px);

  border-color: #092b78;

  color: #092b78;

  box-shadow:
    0 12px 30px rgba(10,31,68,.1);
}


.features-demo-btn span {
  font-size: 16px;
}


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

@media (max-width: 767.98px) {

  .saas-urgency {
    padding: 75px 0;
  }


  .urgency-title {
    font-size: clamp(31px, 9vw, 42px);
    letter-spacing: -1px;
  }


  .urgency-description {
    font-size: 14px;
  }


  .offer-card {
    flex-direction: column;

    gap: 20px;

    padding: 23px;

    text-align: center;
  }


  .offer-main {
    min-width: 0;
  }


  .offer-divider {
    width: 70px;
    height: 1px;
  }


  .offer-details {
    width: 100%;
    align-items: flex-start;
  }


  .countdown-wrapper {
    gap: 5px;
  }


  .countdown-box {
    min-width: 60px;

    padding: 11px 6px;
  }


  .countdown-box span {
    font-size: 22px;
  }


  .countdown-separator {
    font-size: 17px;
  }


  .urgency-cta {
    width: 100%;
    min-width: 0;

    max-width: 330px;
  }


  .urgency-trust {
    gap: 10px 15px;
  }


  .urgency-trust span {
    font-size: 10px;
  }


  .saas-features {
    padding: 75px 0;
  }


  .features-heading {
    margin-bottom: 45px;
  }


  .features-title {
    font-size: clamp(30px, 8vw, 40px);
  }


  .features-subtitle {
    font-size: 14px;
  }


  .feature-item {
    padding: 18px;

    gap: 13px;
  }


  .feature-icon {
    flex-basis: 42px;

    width: 42px;
    height: 42px;
  }


  .feature-content h5 {
    font-size: 15px;
  }


  .feature-content p {
    font-size: 12.5px;
  }


  .saas-preview-card {
    margin-top: 15px;

    padding: 10px;

    border-radius: 18px;
  }


  .preview-wrapper {
    padding: 8px;
  }


  .phone-mockup {
    right: -12px;
    bottom: -25px;

    width: 105px;

    border-radius: 18px;
  }


  .phone-screen {
    border-radius: 13px;
  }


  .phone-top {
    top: 5px;

    width: 35px;
    height: 9px;
  }


  .features-bottom {
    margin-top: 50px;
  }

}


@media (max-width: 380px) {

  .countdown-box {
    min-width: 53px;
  }


  .countdown-box span {
    font-size: 19px;
  }


  .countdown-separator {
    font-size: 14px;
  }


  .phone-mockup {
    width: 90px;
    right: -8px;
  }

}





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

.saas-fit-section {
  position: relative;

  padding: 110px 0;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #f8faff 0%,
      #ffffff 48%,
      #f6f8fc 100%
    );
}


.fit-bg {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(13,110,253,.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(246,194,62,.08),
      transparent 25%
    );

  pointer-events: none;
}


.fit-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(7,24,56,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7,24,56,.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.fit-header {
  max-width: 820px;

  margin: 0 auto 65px;
}


.fit-badge,
.fit-business-badge {
  display: inline-flex;

  padding: 8px 14px;

  border: 1px solid rgba(9,43,120,.12);
  border-radius: 100px;

  background: rgba(9,43,120,.045);

  color: #0a3b91;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.6px;
}


.fit-title {
  margin: 18px 0 18px;

  color: #071838;

  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.08;

  font-weight: 900;

  letter-spacing: -1.2px;
}


.fit-title span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #092b78,
      #0d6efd
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.fit-subtitle {
  max-width: 690px;

  margin: auto;

  color: #697586;

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   FIT CARDS
========================================================= */

.fit-card {
  position: relative;

  height: 100%;

  padding: 28px;

  border: 1px solid #e5eaf2;
  border-radius: 20px;

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

  box-shadow:
    0 12px 35px rgba(10,31,68,.045);

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


.fit-card:hover {
  transform: translateY(-6px);

  border-color: rgba(13,110,253,.2);

  box-shadow:
    0 22px 50px rgba(10,31,68,.09);
}


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

  margin-bottom: 24px;
}


.fit-icon {
  width: 47px;
  height: 47px;

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

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #092b78,
      #0d55b7
    );

  color: #f6c23e;

  font-size: 11px;
  font-weight: 900;

  box-shadow:
    0 10px 22px rgba(9,43,120,.16);
}


.fit-label {
  color: #9aa5b5;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 1.3px;
}


.fit-card h4 {
  margin: 0 0 10px;

  color: #071838;

  font-size: 19px;
  font-weight: 850;
}


.fit-card p {
  min-height: 76px;

  margin: 0 0 20px;

  color: #697586;

  font-size: 13px;
  line-height: 1.75;
}


.fit-check {
  display: flex;
  align-items: center;
  gap: 8px;

  padding-top: 16px;

  border-top: 1px solid #edf0f5;

  color: #344054;

  font-size: 11px;
  font-weight: 700;
}


.fit-check span {
  display: inline-flex;

  width: 19px;
  height: 19px;

  flex: 0 0 19px;

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

  border-radius: 50%;

  background: rgba(9,43,120,.08);

  color: #0a4ca4;

  font-size: 10px;
}


/* =========================================================
   FIT STATEMENT
========================================================= */

.fit-statement {
  max-width: 900px;

  display: flex;
  align-items: flex-start;
  gap: 18px;

  margin: 55px auto 90px;

  padding: 28px 30px;

  border: 1px solid rgba(246,194,62,.25);
  border-radius: 18px;

  background:
    linear-gradient(
      100deg,
      rgba(246,194,62,.08),
      rgba(255,255,255,.9)
    );

  box-shadow:
    0 15px 40px rgba(10,31,68,.04);
}


.fit-statement-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

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

  border-radius: 50%;

  background: #f6c23e;

  color: #071838;

  font-weight: 900;
}


.fit-statement-label {
  display: block;

  margin-bottom: 6px;

  color: #9b7b19;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1.4px;
}


.fit-statement h3 {
  margin: 0 0 8px;

  color: #071838;

  font-size: 19px;
  font-weight: 850;
}


.fit-statement p {
  max-width: 720px;

  margin: 0;

  color: #697586;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   BUSINESS SECTION
========================================================= */

.fit-business {
  padding: 65px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      #06183f 0%,
      #092b70 55%,
      #071d50 100%
    );

  box-shadow:
    0 30px 75px rgba(5,25,65,.15);

  overflow: hidden;
}


.fit-business h3 {
  margin: 20px 0 17px;

  color: #fff;

  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;

  font-weight: 900;
  letter-spacing: -.8px;
}


.fit-business h3 span {
  display: block;

  color: #f6c23e;
}


.fit-business-intro {
  max-width: 580px;

  margin-bottom: 28px;

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

  font-size: 14px;
  line-height: 1.8;
}


.service-list {
  display: grid;

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

  gap: 10px;
}


.service-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;

  background: rgba(255,255,255,.045);
}


.service-item > span {
  display: flex;

  width: 25px;
  height: 25px;

  flex: 0 0 25px;

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

  border-radius: 50%;

  background: rgba(246,194,62,.13);

  color: #f6c23e;

  font-size: 10px;
  font-weight: 900;
}


.service-item strong,
.service-item small {
  display: block;
}


.service-item strong {
  color: #fff;

  font-size: 11px;
  font-weight: 800;
}


.service-item small {
  margin-top: 2px;

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

  font-size: 9px;
}


/* =========================================================
   OWNERSHIP CARD
========================================================= */

.ownership-card {
  padding: 32px;

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}


.ownership-top {
  display: flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 25px;
}


.ownership-icon {
  width: 39px;
  height: 39px;

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

  border-radius: 11px;

  background: rgba(246,194,62,.12);

  color: #f6c23e;

  font-weight: 900;
}


.ownership-top span {
  color: rgba(255,255,255,.42);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1.5px;
}


.ownership-card h4 {
  margin: 0 0 13px;

  color: #fff;

  font-size: 23px;
  line-height: 1.25;

  font-weight: 850;
}


.ownership-card > p {
  margin-bottom: 30px;

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

  font-size: 13px;
  line-height: 1.75;
}


.ownership-flow {
  display: flex;
  align-items: center;
}


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


.flow-item span {
  display: flex;

  width: 31px;
  height: 31px;

  margin: 0 auto 7px;

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

  border-radius: 50%;

  background: rgba(246,194,62,.12);

  color: #f6c23e;

  font-size: 9px;
  font-weight: 900;
}


.flow-item strong,
.flow-item small {
  display: block;
}


.flow-item strong {
  color: #fff;

  font-size: 10px;
}


.flow-item small {
  margin-top: 2px;

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

  font-size: 8px;
}


.flow-line {
  flex: 1;

  height: 1px;

  margin: 0 10px 27px;

  background:
    linear-gradient(
      90deg,
      rgba(246,194,62,.15),
      rgba(246,194,62,.5),
      rgba(246,194,62,.15)
    );
}


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

.fit-cta {
  padding-top: 75px;
}


.fit-cta > span {
  color: #9aa5b5;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1.7px;
}


.fit-cta h3 {
  margin: 12px 0 9px;

  color: #071838;

  font-size: clamp(25px, 4vw, 36px);
  font-weight: 900;
}


.fit-cta p {
  margin-bottom: 22px;

  color: #697586;

  font-size: 13px;
}


.fit-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 23px;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #092b78,
      #0d55b7
    );

  color: #fff;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  box-shadow:
    0 12px 30px rgba(9,43,120,.2);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.fit-demo-btn:hover {
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    0 17px 38px rgba(9,43,120,.27);
}


.fit-demo-btn strong {
  color: #f6c23e;

  font-size: 16px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .saas-fit-section {
    padding: 85px 0;
  }

  .fit-business {
    padding: 45px;
  }

}


@media (max-width: 767.98px) {

  .saas-fit-section {
    padding: 70px 0;
  }


  .fit-header {
    margin-bottom: 45px;
  }


  .fit-title {
    font-size: clamp(31px, 9vw, 42px);
  }


  .fit-subtitle {
    font-size: 14px;
  }


  .fit-card {
    padding: 24px;
  }


  .fit-card p {
    min-height: auto;
  }


  .fit-statement {
    margin: 45px auto 65px;

    padding: 23px;

    gap: 13px;
  }


  .fit-statement h3 {
    font-size: 17px;
  }


  .fit-statement p {
    font-size: 12px;
  }


  .fit-business {
    padding: 30px 22px;

    border-radius: 21px;
  }


  .fit-business h3 {
    font-size: 31px;
  }


  .fit-business-intro {
    font-size: 13px;
  }


  .service-list {
    grid-template-columns: 1fr;
  }


  .ownership-card {
    padding: 24px;
  }


  .ownership-card h4 {
    font-size: 20px;
  }


  .fit-cta {
    padding-top: 60px;
  }

}


@media (max-width: 380px) {

  .fit-card {
    padding: 21px;
  }


  .fit-business {
    padding: 25px 18px;
  }


  .ownership-card {
    padding: 20px;
  }


  .ownership-flow {
    gap: 2px;
  }


  .flow-line {
    margin-left: 5px;
    margin-right: 5px;
  }

}


.premium-hero {
    position: relative;
    min-height: 100vh;
    padding: 120px 0 90px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(41, 91, 220, .30),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #020817 0%,
            #061743 45%,
            #082b72 100%
        );
    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .16;
    pointer-events: none;

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

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


.hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: -1;
}

.hero-glow-1 {
    top: -250px;
    left: 10%;
    background: rgba(30, 91, 255, .20);
}

.hero-glow-2 {
    right: -250px;
    bottom: 5%;
    background: rgba(255, 193, 7, .10);
}


/* =========================================================
   OFFER BADGE
========================================================= */

.hero-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 10px 18px;

    border: 1px solid rgba(255, 193, 7, .35);

    border-radius: 999px;

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

    backdrop-filter: blur(16px);

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .08em;

    box-shadow:
        0 12px 40px rgba(0,0,0,.18);
}


.offer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffc107;

    box-shadow:
        0 0 0 5px rgba(255,193,7,.10),
        0 0 18px rgba(255,193,7,.65);
}


.offer-divider {
    width: 1px;
    height: 17px;
    background: rgba(255,255,255,.22);
}


.hero-offer-badge strong {
    color: #ffd54f;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow {
    margin-top: 28px;
    margin-bottom: 18px;
}

.hero-eyebrow span {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
}


.hero-eyebrow i {
    color: #ffc107;
}


/* =========================================================
   HEADLINE
========================================================= */

.hero-title {
    max-width: 1050px;
    margin: 0 auto;

    font-size: clamp(
        42px,
        5.8vw,
        78px
    );

    line-height: 1.02;

    letter-spacing: -.045em;
}


.hero-highlight {
    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #ffe082 45%,
            #ffc107 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero-subtitle {
    max-width: 850px;

    margin: 28px auto 0;

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

    font-size: clamp(
        16px,
        1.5vw,
        20px
    );

    line-height: 1.75;
}


.hero-subtitle strong {
    color: #fff;
}


/* =========================================================
   VALUE STRIP
========================================================= */

.hero-value-strip {
    max-width: 1000px;

    margin: 38px auto 0;

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

    gap: 1px;

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

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

    border-radius: 18px;

    overflow: hidden;

    backdrop-filter: blur(15px);
}


.hero-value-item {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 20px 18px;

    text-align: left;

    background: rgba(255,255,255,.045);
}


.hero-value-item > i {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 12px;

    color: #ffc107;

    background: rgba(255,193,7,.10);

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


.hero-value-item strong {
    display: block;

    color: #fff;

    font-size: 13px;
}


.hero-value-item small {
    display: block;

    margin-top: 3px;

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

    font-size: 11px;
}


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

.hero-actions {
    margin-top: 36px;
}


.hero-btn {
    min-width: 245px;

    padding: 16px 28px;

    border: 0;

    border-radius: 12px;

    font-weight: 900;

    color: #111;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


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

    box-shadow:
        0 18px 40px rgba(0,0,0,.30) !important;
}


.hero-demo-btn {
    margin-left: 10px;

    padding: 15px 25px;

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

    border-radius: 12px;

    color: #fff;

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

    backdrop-filter: blur(10px);

    font-weight: 800;
}


.hero-demo-btn:hover {
    color: #fff;

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

    border-color: rgba(255,255,255,.4);
}


.cta-note {
    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 15px;

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

    font-size: 12px;
}


.cta-note i {
    color: #ffc107;
}


.cta-separator {
    opacity: .35;
}


/* =========================================================
   AUDIENCE
========================================================= */

.hero-audience {
    max-width: 1000px;

    margin: 55px auto 0;
}


.audience-label {
    margin-bottom: 15px;

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

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .15em;
}


.audience-label i {
    margin-right: 5px;

    color: #ffc107;
}


.audience-grid {
    display: grid;

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

    gap: 12px;
}


.audience-card {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 16px;

    text-align: left;

    border-radius: 14px;

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

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.audience-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255,193,7,.30);

    background:
        rgba(255,255,255,.065);
}


.audience-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    border-radius: 10px;

    color: #ffc107;

    background:
        rgba(255,193,7,.09);

    font-size: 13px;
}


.audience-content strong {
    display: block;

    color: #fff;

    font-size: 12px;
}


.audience-content span {
    display: block;

    margin-top: 4px;

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

    font-size: 10px;

    line-height: 1.45;
}


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

.hero-benefits {
    max-width: 1000px;

    margin: 24px auto 0;

    display: grid;

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

    gap: 12px;
}


.hero-benefit {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    text-align: left;

    border-radius: 13px;

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

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


.benefit-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

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

    border-radius: 10px;

    color: #ffc107;

    background: rgba(255,193,7,.09);
}


.hero-benefit strong {
    display: block;

    color: #fff;

    font-size: 11px;

    line-height: 1.25;
}


.hero-benefit small {
    display: block;

    margin-top: 4px;

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

    font-size: 9px;

    line-height: 1.35;
}


/* =========================================================
   TRUST LINE
========================================================= */

.hero-trust {
    margin-top: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

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

    font-size: 11px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 6px;
}


.trust-item i {
    color: #ffc107;
}


.trust-item strong {
    color: rgba(255,255,255,.78);
}


.trust-divider {
    opacity: .25;
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-showcase {
    max-width: 1120px;

    margin: 65px auto 0;
}


.dashboard-label {
    display: flex;

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

    gap: 8px;

    margin-bottom: 15px;

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

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .14em;
}


.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #42e695;

    box-shadow:
        0 0 0 5px rgba(66,230,149,.08),
        0 0 15px rgba(66,230,149,.6);
}


.dashboard-frame {
    position: relative;

    padding: 10px;

    border-radius: 18px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.45),
        0 0 80px rgba(22,91,255,.12);

    overflow: hidden;
}


.dashboard-browser-bar {
    height: 30px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 0 10px;

    border-radius: 10px 10px 0 0;

    background: rgba(0,0,0,.25);
}


.dashboard-browser-bar > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,.25);
}


.browser-title {
    flex: 1;

    text-align: center;

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

    font-size: 9px;
}


.dashboard-frame img {
    display: block;

    width: 100%;

    border-radius: 0 0 10px 10px;
}


.dashboard-glow {
    position: absolute;

    width: 50%;
    height: 100%;

    left: 25%;
    top: 0;

    background:
        rgba(45,100,255,.08);

    filter: blur(70px);

    pointer-events: none;
}


.dashboard-caption {
    margin-top: 14px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

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

    font-size: 11px;
}


.dashboard-caption > i {
    color: #ffc107;
}


.dashboard-caption a {
    color: #ffc107;

    font-weight: 800;

    text-decoration: none;
}


.dashboard-caption a:hover {
    text-decoration: underline;
}


/* =========================================================
   BOTTOM TRUST
========================================================= */

.hero-bottom-trust {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 30px;

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

    font-size: 10px;

    font-weight: 700;
}


.hero-bottom-trust i {
    margin-right: 4px;

    color: #ffc107;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .premium-hero {
        padding-top: 100px;
    }

    .hero-value-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .audience-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .hero-benefits {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 767px) {

    .premium-hero {
        min-height: auto;

        padding:
            90px 16px
            65px;
    }


    .hero-offer-badge {
        gap: 8px;

        padding:
            8px 12px;

        font-size: 9px;
    }


    .hero-title {
        font-size:
            clamp(
                36px,
                10vw,
                52px
            );

        line-height: 1.04;

        letter-spacing: -.035em;
    }


    .hero-eyebrow {
        margin-top: 22px;
    }


    .hero-eyebrow span {
        font-size: 9px;
    }


    .hero-subtitle {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.65;
    }


    .hero-value-strip {
        grid-template-columns:
            1fr;

        margin-top: 28px;

        border-radius: 14px;
    }


    .hero-value-item {
        padding: 15px;
    }


    .hero-actions {
        margin-top: 28px;
    }


    .hero-btn,
    .hero-demo-btn {
        width: 100%;

        margin-left: 0;

        min-width: 0;
    }


    .hero-demo-btn {
        margin-top: 10px;
    }


    .cta-note {
        font-size: 10px;

        line-height: 1.6;
    }


    .hero-audience {
        margin-top: 40px;
    }


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


    .audience-card {
        padding: 14px;
    }


    .hero-benefits {
        grid-template-columns:
            1fr;

        margin-top: 18px;
    }


    .hero-benefit {
        padding: 13px;
    }


    .hero-trust {
        flex-direction: column;

        gap: 9px;

        font-size: 10px;
    }


    .trust-divider {
        display: none;
    }


    .dashboard-showcase {
        margin-top: 45px;
    }


    .dashboard-frame {
        padding: 6px;

        border-radius: 12px;
    }


    .dashboard-browser-bar {
        height: 24px;
    }


    .dashboard-caption {
        font-size: 10px;

        line-height: 1.6;
    }


    .hero-bottom-trust {
        gap: 10px 16px;

        margin-top: 25px;

        font-size: 9px;
    }

}


@media (max-width: 380px) {

    .premium-hero {
        padding-left: 12px;
        padding-right: 12px;
    }


    .hero-title {
        font-size: 34px;
    }


    .hero-offer-badge strong {
        font-size: 8px;
    }


    .hero-subtitle {
        font-size: 13px;
    }

}


.premium-footer {

    position: relative;

    padding:
        42px 20px
        24px;

    overflow: hidden;

    border-top:
        1px solid rgba(255,255,255,.07);

    background:
        radial-gradient(
            circle at 50% -100px,
            rgba(25,75,180,.18),
            transparent 55%
        ),
        #090b0f;
}


/* =========================================================
   TOP ACCENT
========================================================= */

.footer-accent {

    width: 55px;
    height: 3px;

    margin:
        0 auto
        24px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #b8860b,
            #ffc107,
            #b8860b
        );

    box-shadow:
        0 0 18px rgba(255,193,7,.25);
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-bottom: 10px;

    line-height: 1;
}


.footer-brand-main {

    color: #ffc107;

    font-size: 18px;

    font-weight: 900;

    letter-spacing: .08em;
}


.footer-brand-name {

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

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .14em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-description {

    max-width: 560px;

    margin-left: auto;
    margin-right: auto;

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

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   TRUST
========================================================= */

.footer-trust {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

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

    font-size: 10px;

    font-weight: 600;
}


.footer-trust span:not(.footer-dot) {

    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.footer-trust i {

    color: #ffc107;

    font-size: 10px;
}


.footer-dot {

    color:
        rgba(255,193,7,.40);
}


/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {

    width: 100%;

    max-width: 650px;

    height: 1px;

    margin:
        24px auto
        18px;

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


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright {

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

    font-size: 10px;

    letter-spacing: .02em;
}


.footer-separator {

    margin:
        0 5px;

    color:
        rgba(255,193,7,.45);
}


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

@media (max-width: 576px) {

    .premium-footer {

        padding:
            35px 16px
            20px;
    }


    .footer-accent {

        margin-bottom: 20px;
    }


    .footer-brand-main {

        font-size: 16px;
    }


    .footer-brand-name {

        font-size: 12px;

        letter-spacing: .11em;
    }


    .footer-description {

        font-size: 11px;

        max-width: 330px;
    }


    .footer-trust {

        gap: 7px;

        font-size: 9px;
    }


    .footer-trust .footer-dot {

        display: none;
    }


    .footer-trust span:not(.footer-dot) {

        padding:
            5px 8px;

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

        border-radius: 999px;

        background:
            rgba(255,255,255,.025);
    }


    .footer-copyright {

        font-size: 9px;

        line-height: 1.7;
    }

}


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

.premium-final-cta {
    position: relative;
    padding: 100px 20px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(24, 78, 180, .22),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #071127 0%,
            #050b18 55%,
            #030711 100%
        );
}

/* Grid */
.final-cta-grid {
    position: absolute;
    inset: 0;
    opacity: .25;
    pointer-events: none;

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

    background-size: 45px 45px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}

/* Glow */
.final-cta-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.final-cta-glow-1 {
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 110, 253, .20);
}

.final-cta-glow-2 {
    bottom: -260px;
    right: -150px;
    background: rgba(102, 16, 242, .14);
}

/* Main Card */
.final-cta-card {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    padding: 65px 55px 52px;
    text-align: center;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 44, 94, .72),
            rgba(6, 14, 31, .94)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter: blur(18px);
}

/* Top Highlight */
.final-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffc107,
        #ffe08a,
        #ffc107,
        transparent
    );

    opacity: .9;
}

/* Badge */
.final-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 24px;
    padding: 9px 16px;

    border: 1px solid rgba(255,193,7,.22);
    border-radius: 999px;

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

    color: #ffc107;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.final-cta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffc107;

    box-shadow:
        0 0 0 4px rgba(255,193,7,.10),
        0 0 15px rgba(255,193,7,.55);
}

/* Heading */
.final-cta-title {
    max-width: 760px;
    margin: 0 auto 20px;

    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.035em;
}

.final-cta-title span {
    display: block;

    background: linear-gradient(
        90deg,
        #ffc107 0%,
        #ffe79a 45%,
        #ffc107 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Description */
.final-cta-description {
    max-width: 680px;
    margin: 0 auto 36px;

    color: rgba(255,255,255,.68);
    font-size: 17px;
    line-height: 1.75;
}

/* Points */
.final-cta-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    max-width: 780px;
    margin: 0 auto 36px;
}

.final-cta-point {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px;
    text-align: left;

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

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.final-cta-point:hover {
    transform: translateY(-3px);
    border-color: rgba(255,193,7,.25);
    background: rgba(255,193,7,.045);
}

.final-cta-point-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 12px;

    color: #ffc107;
    background: rgba(255,193,7,.09);
    border: 1px solid rgba(255,193,7,.14);
}

.final-cta-point strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.final-cta-point small {
    display: block;

    color: rgba(255,255,255,.40);
    font-size: 10px;
    line-height: 1.45;
}

/* Price */
.final-cta-price {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 26px;
}

.final-cta-price span {
    margin-bottom: 5px;

    color: rgba(255,255,255,.40);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.final-cta-price strong {
    color: #ffc107;

    font-size: clamp(38px, 5vw, 52px);
    line-height: 1;
    font-weight: 900;

    text-shadow:
        0 5px 30px rgba(255,193,7,.16);
}

.final-cta-price small {
    margin-top: 7px;

    color: rgba(255,255,255,.42);
    font-size: 11px;
}

/* CTA Button */
.final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-width: 290px;
    min-height: 62px;

    padding: 16px 30px;

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

    background:
        linear-gradient(
            135deg,
            #ffc107,
            #f0a900
        );

    color: #101010;
    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(255,193,7,.20),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.final-cta-button:hover {
    transform: translateY(-3px);

    color: #101010;

    filter: brightness(1.05);

    box-shadow:
        0 20px 45px rgba(255,193,7,.28),
        inset 0 1px 0 rgba(255,255,255,.5);
}

.final-cta-button i {
    transition: transform .25s ease;
}

.final-cta-button:hover i {
    transform: translateX(4px);
}

/* Trust */
.final-cta-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;

    color: rgba(255,255,255,.40);
    font-size: 10px;
    font-weight: 600;
}

.final-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.final-cta-trust i {
    color: #ffc107;
}

.trust-separator {
    color: rgba(255,193,7,.35);
}

/* Disclaimer / clarity */
.final-cta-note {
    max-width: 620px;

    margin: 20px auto 0;

    color: rgba(255,255,255,.28);
    font-size: 10px;
    line-height: 1.6;
}

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

@media (max-width: 767px) {

    .premium-final-cta {
        padding: 65px 15px;
    }

    .final-cta-card {
        padding: 42px 20px 34px;
        border-radius: 23px;
    }

    .final-cta-badge {
        font-size: 9px;
        letter-spacing: .12em;
        padding: 8px 12px;
    }

    .final-cta-title {
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1.08;
    }

    .final-cta-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .final-cta-points {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 30px;
    }

    .final-cta-point {
        padding: 13px;
    }

    .final-cta-point-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

    .final-cta-point strong {
        font-size: 11px;
    }

    .final-cta-point small {
        font-size: 9px;
    }

    .final-cta-price strong {
        font-size: 42px;
    }

    .final-cta-button {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        font-size: 14px;
        padding: 15px 20px;
    }

    .final-cta-trust {
        gap: 7px;
        font-size: 9px;
    }

    .trust-separator {
        display: none;
    }

    .final-cta-trust span {
        padding: 5px 8px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 999px;
        background: rgba(255,255,255,.025);
    }

    .final-cta-note {
        font-size: 9px;
        max-width: 320px;
    }
}