:root {
    --bg: #f7f9fb;
    --bg-soft: #f1f4f7;

    --surface: #ffffff;
    --surface-2: #f7f9fb;

    --border: #dfe5eb;
    --border-soft: rgba(15, 23, 42, 0.08);

    --text: #17202a;
    --muted: #667085;
    --muted-dark: #98a2b3;

    --green: #159663;
    --green-hover: #117d53;

    --blue: #315fba;

    --max-width: 1180px;

    --shadow:
        0 24px 60px
        rgba(16, 24, 40, 0.10);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

main {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin: 0 auto;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

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

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

    backdrop-filter: blur(14px);
}

.site-header-inner {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    min-height: 72px;

    margin: 0 auto;

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

    gap: 24px;
}

.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    text-decoration: none;
}

.site-brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    background: var(--green);

    color: #ffffff;

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

.site-brand-text strong,
.site-brand-text small {
    display: block;
}

.site-brand-text strong {
    font-size: 17px;
}

.site-brand-text small {
    margin-top: 2px;

    color: var(--green);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;

    gap: 22px;
}

.site-nav a {
    color: var(--muted);

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

    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.site-nav a:hover {
    color: var(--text);
}

.site-nav .nav-cta {
    min-height: 44px;

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

    padding: 10px 18px;

    border-radius: 10px;

    background: var(--green);

    color: #ffffff;
}

.site-nav .nav-cta:hover {
    color: #ffffff;
    background: var(--green-hover);
}


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

.primary-button,
.secondary-button,
.pricing-button {
    min-height: 48px;

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

    padding: 12px 22px;

    border-radius: 11px;

    font-weight: 850;

    text-decoration: none;

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

.primary-button,
.pricing-button {
    background: var(--green);
    color: #ffffff;
}

.primary-button:hover,
.pricing-button:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
}

.secondary-button,
.pricing-button.secondary {
    border:
        1px solid
        var(--border);

    background:
        #ffffff;

    color: var(--text);
}

.secondary-button:hover,
.pricing-button.secondary:hover {
    border-color:
        rgba(56, 217, 157, 0.42);
}


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

.hero-section {
    min-height: 590px;

    display: flex;
    align-items: center;

    padding:
        100px 0
        80px;
}

.hero-content {
    max-width: 880px;
}

.hero-kicker,
.section-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--green);

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-section h1 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            2.7rem,
            6.5vw,
            5.2rem
        );

    line-height: 1.02;

    letter-spacing: -0.045em;
}

.hero-description {
    max-width: 760px;

    margin:
        28px 0
        0;

    color: var(--muted);

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

    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 24px;

    margin-top: 30px;

    color: var(--muted-dark);

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

.hero-points span::before {
    content: "✓";

    margin-right: 7px;

    color: var(--green);
}


/* =========================================================
   SHARED SECTIONS
========================================================= */

.content-section,
.target-section {
    padding:
        90px 0;
}

.section-heading {
    max-width: 820px;
}

.section-heading.centered {
    margin:
        0 auto
        46px;

    text-align: center;
}

.section-heading h2,
.value-card h2,
.final-cta h2 {
    margin: 0;

    font-size:
        clamp(
            2rem,
            5vw,
            3.7rem
        );

    line-height: 1.06;

    letter-spacing: -0.035em;
}

.section-heading p,
.value-card p,
.final-cta p {
    margin-top: 20px;

    color: var(--muted);

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.16rem
        );

    line-height: 1.75;
}


/* =========================================================
   TARGET COMPANIES
========================================================= */

.comparison-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 42px;
}

.comparison-card {
    min-height: 280px;

    padding: 30px;

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

    border-radius: 18px;

    background:
        #ffffff;
}

.comparison-card.featured {
    border-color:
        rgba(56, 217, 157, 0.35);

    background:
        linear-gradient(
            180deg,
            rgba(56, 217, 157, 0.08),
            #ffffff
        );
}

.comparison-label {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--muted);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.comparison-card.featured
.comparison-label {
    color: var(--green);
}

.comparison-card h3 {
    margin: 0;

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

    line-height: 1.2;
}

.comparison-card p {
    margin-top: 16px;

    color: var(--muted);

    line-height: 1.7;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.steps-grid {
    display: grid;

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

    gap: 18px;
}

.step-card {
    padding: 28px;

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

    border-radius: 18px;

    background:
        #ffffff;
}

.step-number {
    display: inline-block;

    margin-bottom: 22px;

    color: var(--green);

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

    letter-spacing: 0.12em;
}

.step-card h3 {
    margin: 0;

    font-size: 1.5rem;
}

.step-card p {
    margin:
        14px 0
        0;

    color: var(--muted);

    line-height: 1.7;
}


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

.feature-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 44px;
}

.feature-card {
    min-height: 210px;

    padding: 26px;

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

    border-radius: 16px;

    background:
        #ffffff;
}

.feature-card h3 {
    margin: 0;

    font-size: 1.25rem;
}

.feature-card p {
    margin:
        14px 0
        0;

    color: var(--muted);

    line-height: 1.7;
}


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

.audience-grid {
    display: grid;

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

    gap: 14px;
}

.audience-pill {
    min-height: 74px;

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

    padding: 16px;

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

    border-radius: 14px;

    background:
        #ffffff;

    text-align: center;

    font-weight: 800;
}


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

.value-section {
    padding:
        40px 0
        90px;
}

.value-card {
    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 50px;

    align-items: center;

    padding:
        50px;

    border:
        1px solid
        rgba(56, 217, 157, 0.32);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(56, 217, 157, 0.08),
            rgba(92, 146, 255, 0.06),
            #ffffff
        );

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


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

.pricing-grid {
    max-width: 920px;

    margin:
        0 auto;

    display: grid;

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

    gap: 20px;
}

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 32px;

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

    border-radius: 20px;

    background:
        #ffffff;
}

.pricing-card.highlighted {
    border-color:
        rgba(56, 217, 157, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(56, 217, 157, 0.08),
            #ffffff
        );
}

.plan-name {
    color: var(--green);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.popular-badge {
    position: absolute;

    top: 18px;
    right: 18px;

    padding:
        6px 9px;

    border-radius: 999px;

    background:
        rgba(56, 217, 157, 0.12);

    color: var(--green);

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

    text-transform: uppercase;
}

.price {
    display: flex;
    align-items: baseline;

    gap: 8px;

    margin-top: 18px;
}

.price strong {
    font-size:
        clamp(
            2.8rem,
            5vw,
            4rem
        );

    line-height: 1;
}

.price span {
    color: var(--muted);
}

.pricing-card > p {
    min-height: 84px;

    margin:
        20px 0
        0;

    color: var(--muted);

    line-height: 1.65;
}

.pricing-card ul {
    margin:
        26px 0;

    padding: 0;

    list-style: none;
}

.pricing-card li {
    position: relative;

    padding:
        9px 0
        9px 26px;

    color: var(--muted);
}

.pricing-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--green);

    font-weight: 900;
}

.pricing-button {
    width: 100%;

    margin-top: auto;
}


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

.faq-list {
    max-width: 900px;

    margin:
        0 auto;
}

.faq-list details {
    border-bottom:
        1px solid
        var(--border);
}

.faq-list summary {
    position: relative;

    padding:
        22px 44px
        22px 0;

    cursor: pointer;

    font-size:
        clamp(
            1rem,
            2vw,
            1.15rem
        );

    font-weight: 800;

    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";

    position: absolute;

    right: 5px;
    top: 17px;

    color: var(--green);

    font-size: 25px;
}

.faq-list details[open]
summary::after {
    content: "−";
}

.faq-list details p {
    margin:
        0 0
        24px;

    max-width: 780px;

    color: var(--muted);

    line-height: 1.75;
}


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

.final-cta {
    margin:
        40px 0
        100px;

    padding:
        70px 40px;

    border:
        1px solid
        rgba(56, 217, 157, 0.33);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(92, 146, 255, 0.10),
            transparent 40%
        ),
        #ffffff;

    text-align: center;
}

.final-cta h2 {
    max-width: 780px;

    margin:
        0 auto;
}

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

    margin:
        20px auto
        28px;
}


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

.site-footer {
    border-top:
        1px solid
        var(--border);

    background:
        var(--bg-soft);
}

.site-footer-inner {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin:
        0 auto;

    display: flex;
    justify-content: space-between;

    gap: 40px;

    padding:
        42px 0;
}

.footer-brand {
    max-width: 500px;

    display: flex;

    gap: 14px;

    align-items: flex-start;
}

.footer-brand strong {
    font-size: 16px;
}

.footer-brand p {
    margin:
        7px 0
        0;

    color: var(--muted);

    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    align-items: flex-start;

    gap:
        16px
        24px;
}

.footer-links a {
    color: var(--muted);

    font-weight: 700;

    text-decoration: none;
}

.footer-links a:hover {
    color: var(--text);
}

.footer-bottom {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin:
        0 auto;

    padding:
        18px 0
        28px;

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

    color: var(--muted-dark);

    font-size: 12px;
}


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

@media (max-width: 900px) {

    .site-nav > a:not(.nav-cta) {
        display: none;
    }

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

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

    .value-card {
        grid-template-columns: 1fr;

        gap: 20px;
    }
}


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

@media (max-width: 700px) {

    main {
        width:
            calc(
                100% - 24px
            );
    }

    .site-header-inner {
        width:
            calc(
                100% - 20px
            );

        min-height: 64px;
    }

    .site-brand-text small {
        display: none;
    }

    .site-nav {
        gap: 10px;
    }

    .site-nav .nav-cta {
        min-height: 42px;

        padding:
            9px
            14px;

        font-size: 13px;
    }

    .hero-section {
        min-height: 0;

        padding:
            70px 0
            55px;
    }

    .hero-section h1 {
        font-size:
            clamp(
                2.35rem,
                12vw,
                4rem
            );
    }

    .hero-actions {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .content-section,
    .target-section {
        padding:
            64px 0;
    }

    .comparison-grid,
    .steps-grid,
    .feature-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .comparison-card {
        min-height: 0;
    }

    .value-card {
        padding: 28px;
    }

    .final-cta {
        padding:
            48px
            24px;
    }

    .site-footer-inner {
        flex-direction: column;

        padding:
            34px 0;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    main {
        width:
            calc(
                100% - 20px
            );
    }

    .site-brand-mark {
        width: 38px;
        height: 38px;
    }

    .site-brand-text strong {
        font-size: 15px;
    }

    .site-nav .nav-cta {
        padding:
            8px
            11px;

        font-size: 12px;
    }

    .hero-section {
        padding-top: 54px;
    }

    .comparison-card,
    .step-card,
    .feature-card,
    .pricing-card {
        padding: 22px;
    }

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

    .final-cta {
        margin-bottom: 70px;
    }
}

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

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 2px;

    background: var(--text);
}


@media (max-width: 900px) {

    .site-header-inner {
        position: relative;
    }


    .mobile-menu-button {
        display: block;

        margin-left: auto;
    }


    .site-nav {
        position: absolute;

        top: calc(100% + 8px);
        right: 0;

        width: min(
            280px,
            calc(100vw - 24px)
        );

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: #ffffff;

        box-shadow:
            0 18px 40px
            rgba(16, 24, 40, 0.16);

        z-index: 1000;
    }


    .site-nav.open {
        display: flex;
    }


    .site-nav > a,
    .site-nav > a:not(.nav-cta) {
        display: flex;

        width: 100%;

        min-height: 44px;

        align-items: center;

        padding:
            10px
            12px;

        border-radius: 8px;
    }


    .site-nav > a:not(.nav-cta) {
        color: var(--text);
    }


    .site-nav .nav-cta {
        justify-content: center;

        margin-top: 4px;
    }

}


@media (max-width: 420px) {

    .site-nav {
        right: -2px;

        width:
            calc(
                100vw - 20px
            );
    }

}

/* =========================================================
   PROFESSIONAL LIGHT THEME POLISH
========================================================= */

body {
    background: #f7f9fb;
}

.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e3e8ee;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

.site-brand-mark {
    background: #159663;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(21, 150, 99, 0.16);
}

.site-brand-text strong {
    color: #17202a;
}

.site-nav a {
    color: #667085;
}

.site-nav a:hover {
    color: #17202a;
}

.site-nav .nav-cta,
.primary-button,
.pricing-button {
    background: #159663;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.site-nav .nav-cta:hover,
.primary-button:hover,
.pricing-button:hover {
    background: #117d53;
    color: #ffffff;
}

.secondary-button,
.pricing-button.secondary {
    background: #ffffff;
    border-color: #d7dde4;
    color: #344054;
}

.hero-section h1,
.section-heading h2,
.value-card h2,
.final-cta h2,
.comparison-card h3,
.step-card h3,
.feature-card h3,
.price strong {
    color: #101828;
}

.hero-description,
.section-heading p,
.value-card p,
.final-cta p,
.comparison-card p,
.step-card p,
.feature-card p,
.pricing-card > p,
.pricing-card li,
.faq-list details p,
.footer-brand p,
.footer-links a {
    color: #667085;
}

.comparison-card,
.step-card,
.feature-card,
.audience-pill,
.pricing-card,
.value-card,
.final-cta {
    background: #ffffff;
    border-color: #e1e6eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035);
}

.comparison-card.featured,
.pricing-card.highlighted {
    background: #f7fcf9;
    border-color: #bfe0d2;
}

.value-card,
.final-cta {
    border-color: #d8e9e1;
}

.site-footer {
    background: #ffffff;
    border-top-color: #e1e6eb;
}

.footer-bottom {
    border-top-color: #edf0f3;
    color: #98a2b3;
}

.mobile-menu-button {
    background: #ffffff;
    border-color: #d7dde4;
}

.mobile-menu-button span {
    background: #344054;
}

@media (max-width: 900px) {
    .site-nav {
        background: #ffffff;
        border-color: #d7dde4;
        box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
    }

    .site-nav > a:not(.nav-cta) {
        color: #344054;
    }
}
:root {
    --bg: #f7f9fb;
    --bg-soft: #f1f4f7;

    --surface: #ffffff;
    --surface-2: #f7f9fb;

    --border: #dfe5eb;
    --border-soft: rgba(15, 23, 42, 0.08);

    --text: #17202a;
    --muted: #667085;
    --muted-dark: #98a2b3;

    --green: #159663;
    --green-hover: #117d53;

    --blue: #315fba;

    --max-width: 1180px;

    --shadow:
        0 24px 60px
        rgba(16, 24, 40, 0.10);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

main {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin: 0 auto;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

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

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

    backdrop-filter: blur(14px);
}

.site-header-inner {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    min-height: 72px;

    margin: 0 auto;

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

    gap: 24px;
}

.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    text-decoration: none;
}

.site-brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    background: var(--green);

    color: #ffffff;

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

.site-brand-text strong,
.site-brand-text small {
    display: block;
}

.site-brand-text strong {
    font-size: 17px;
}

.site-brand-text small {
    margin-top: 2px;

    color: var(--green);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;

    gap: 22px;
}

.site-nav a {
    color: var(--muted);

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

    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.site-nav a:hover {
    color: var(--text);
}

.site-nav .nav-cta {
    min-height: 44px;

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

    padding: 10px 18px;

    border-radius: 10px;

    background: var(--green);

    color: #ffffff;
}

.site-nav .nav-cta:hover {
    color: #ffffff;
    background: var(--green-hover);
}


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

.primary-button,
.secondary-button,
.pricing-button {
    min-height: 48px;

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

    padding: 12px 22px;

    border-radius: 11px;

    font-weight: 850;

    text-decoration: none;

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

.primary-button,
.pricing-button {
    background: var(--green);
    color: #ffffff;
}

.primary-button:hover,
.pricing-button:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
}

.secondary-button,
.pricing-button.secondary {
    border:
        1px solid
        var(--border);

    background:
        #ffffff;

    color: var(--text);
}

.secondary-button:hover,
.pricing-button.secondary:hover {
    border-color:
        rgba(56, 217, 157, 0.42);
}


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

.hero-section {
    min-height: 590px;

    display: flex;
    align-items: center;

    padding:
        100px 0
        80px;
}

.hero-content {
    max-width: 880px;
}

.hero-kicker,
.section-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--green);

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-section h1 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            2.7rem,
            6.5vw,
            5.2rem
        );

    line-height: 1.02;

    letter-spacing: -0.045em;
}

.hero-description {
    max-width: 760px;

    margin:
        28px 0
        0;

    color: var(--muted);

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

    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 24px;

    margin-top: 30px;

    color: var(--muted-dark);

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

.hero-points span::before {
    content: "✓";

    margin-right: 7px;

    color: var(--green);
}


/* =========================================================
   SHARED SECTIONS
========================================================= */

.content-section,
.target-section {
    padding:
        90px 0;
}

.section-heading {
    max-width: 820px;
}

.section-heading.centered {
    margin:
        0 auto
        46px;

    text-align: center;
}

.section-heading h2,
.value-card h2,
.final-cta h2 {
    margin: 0;

    font-size:
        clamp(
            2rem,
            5vw,
            3.7rem
        );

    line-height: 1.06;

    letter-spacing: -0.035em;
}

.section-heading p,
.value-card p,
.final-cta p {
    margin-top: 20px;

    color: var(--muted);

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.16rem
        );

    line-height: 1.75;
}


/* =========================================================
   TARGET COMPANIES
========================================================= */

.comparison-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 42px;
}

.comparison-card {
    min-height: 280px;

    padding: 30px;

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

    border-radius: 18px;

    background:
        #ffffff;
}

.comparison-card.featured {
    border-color:
        rgba(56, 217, 157, 0.35);

    background:
        linear-gradient(
            180deg,
            rgba(56, 217, 157, 0.08),
            #ffffff
        );
}

.comparison-label {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--muted);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.comparison-card.featured
.comparison-label {
    color: var(--green);
}

.comparison-card h3 {
    margin: 0;

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

    line-height: 1.2;
}

.comparison-card p {
    margin-top: 16px;

    color: var(--muted);

    line-height: 1.7;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.steps-grid {
    display: grid;

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

    gap: 18px;
}

.step-card {
    padding: 28px;

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

    border-radius: 18px;

    background:
        #ffffff;
}

.step-number {
    display: inline-block;

    margin-bottom: 22px;

    color: var(--green);

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

    letter-spacing: 0.12em;
}

.step-card h3 {
    margin: 0;

    font-size: 1.5rem;
}

.step-card p {
    margin:
        14px 0
        0;

    color: var(--muted);

    line-height: 1.7;
}


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

.feature-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 44px;
}

.feature-card {
    min-height: 210px;

    padding: 26px;

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

    border-radius: 16px;

    background:
        #ffffff;
}

.feature-card h3 {
    margin: 0;

    font-size: 1.25rem;
}

.feature-card p {
    margin:
        14px 0
        0;

    color: var(--muted);

    line-height: 1.7;
}


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

.audience-grid {
    display: grid;

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

    gap: 14px;
}

.audience-pill {
    min-height: 74px;

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

    padding: 16px;

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

    border-radius: 14px;

    background:
        #ffffff;

    text-align: center;

    font-weight: 800;
}


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

.value-section {
    padding:
        40px 0
        90px;
}

.value-card {
    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 50px;

    align-items: center;

    padding:
        50px;

    border:
        1px solid
        rgba(56, 217, 157, 0.32);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(56, 217, 157, 0.08),
            rgba(92, 146, 255, 0.06),
            #ffffff
        );

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


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

.pricing-grid {
    max-width: 920px;

    margin:
        0 auto;

    display: grid;

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

    gap: 20px;
}

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 32px;

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

    border-radius: 20px;

    background:
        #ffffff;
}

.pricing-card.highlighted {
    border-color:
        rgba(56, 217, 157, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(56, 217, 157, 0.08),
            #ffffff
        );
}

.plan-name {
    color: var(--green);

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

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.popular-badge {
    position: absolute;

    top: 18px;
    right: 18px;

    padding:
        6px 9px;

    border-radius: 999px;

    background:
        rgba(56, 217, 157, 0.12);

    color: var(--green);

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

    text-transform: uppercase;
}

.price {
    display: flex;
    align-items: baseline;

    gap: 8px;

    margin-top: 18px;
}

.price strong {
    font-size:
        clamp(
            2.8rem,
            5vw,
            4rem
        );

    line-height: 1;
}

.price span {
    color: var(--muted);
}

.pricing-card > p {
    min-height: 84px;

    margin:
        20px 0
        0;

    color: var(--muted);

    line-height: 1.65;
}

.pricing-card ul {
    margin:
        26px 0;

    padding: 0;

    list-style: none;
}

.pricing-card li {
    position: relative;

    padding:
        9px 0
        9px 26px;

    color: var(--muted);
}

.pricing-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--green);

    font-weight: 900;
}

.pricing-button {
    width: 100%;

    margin-top: auto;
}


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

.faq-list {
    max-width: 900px;

    margin:
        0 auto;
}

.faq-list details {
    border-bottom:
        1px solid
        var(--border);
}

.faq-list summary {
    position: relative;

    padding:
        22px 44px
        22px 0;

    cursor: pointer;

    font-size:
        clamp(
            1rem,
            2vw,
            1.15rem
        );

    font-weight: 800;

    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";

    position: absolute;

    right: 5px;
    top: 17px;

    color: var(--green);

    font-size: 25px;
}

.faq-list details[open]
summary::after {
    content: "−";
}

.faq-list details p {
    margin:
        0 0
        24px;

    max-width: 780px;

    color: var(--muted);

    line-height: 1.75;
}


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

.final-cta {
    margin:
        40px 0
        100px;

    padding:
        70px 40px;

    border:
        1px solid
        rgba(56, 217, 157, 0.33);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(92, 146, 255, 0.10),
            transparent 40%
        ),
        #ffffff;

    text-align: center;
}

.final-cta h2 {
    max-width: 780px;

    margin:
        0 auto;
}

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

    margin:
        20px auto
        28px;
}


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

.site-footer {
    border-top:
        1px solid
        var(--border);

    background:
        var(--bg-soft);
}

.site-footer-inner {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin:
        0 auto;

    display: flex;
    justify-content: space-between;

    gap: 40px;

    padding:
        42px 0;
}

.footer-brand {
    max-width: 500px;

    display: flex;

    gap: 14px;

    align-items: flex-start;
}

.footer-brand strong {
    font-size: 16px;
}

.footer-brand p {
    margin:
        7px 0
        0;

    color: var(--muted);

    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    align-items: flex-start;

    gap:
        16px
        24px;
}

.footer-links a {
    color: var(--muted);

    font-weight: 700;

    text-decoration: none;
}

.footer-links a:hover {
    color: var(--text);
}

.footer-bottom {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin:
        0 auto;

    padding:
        18px 0
        28px;

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

    color: var(--muted-dark);

    font-size: 12px;
}


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

@media (max-width: 900px) {

    .site-nav > a:not(.nav-cta) {
        display: none;
    }

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

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

    .value-card {
        grid-template-columns: 1fr;

        gap: 20px;
    }
}


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

@media (max-width: 700px) {

    main {
        width:
            calc(
                100% - 24px
            );
    }

    .site-header-inner {
        width:
            calc(
                100% - 20px
            );

        min-height: 64px;
    }

    .site-brand-text small {
        display: none;
    }

    .site-nav {
        gap: 10px;
    }

    .site-nav .nav-cta {
        min-height: 42px;

        padding:
            9px
            14px;

        font-size: 13px;
    }

    .hero-section {
        min-height: 0;

        padding:
            70px 0
            55px;
    }

    .hero-section h1 {
        font-size:
            clamp(
                2.35rem,
                12vw,
                4rem
            );
    }

    .hero-actions {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .content-section,
    .target-section {
        padding:
            64px 0;
    }

    .comparison-grid,
    .steps-grid,
    .feature-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .comparison-card {
        min-height: 0;
    }

    .value-card {
        padding: 28px;
    }

    .final-cta {
        padding:
            48px
            24px;
    }

    .site-footer-inner {
        flex-direction: column;

        padding:
            34px 0;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    main {
        width:
            calc(
                100% - 20px
            );
    }

    .site-brand-mark {
        width: 38px;
        height: 38px;
    }

    .site-brand-text strong {
        font-size: 15px;
    }

    .site-nav .nav-cta {
        padding:
            8px
            11px;

        font-size: 12px;
    }

    .hero-section {
        padding-top: 54px;
    }

    .comparison-card,
    .step-card,
    .feature-card,
    .pricing-card {
        padding: 22px;
    }

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

    .final-cta {
        margin-bottom: 70px;
    }
}

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

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 2px;

    background: var(--text);
}


@media (max-width: 900px) {

    .site-header-inner {
        position: relative;
    }


    .mobile-menu-button {
        display: block;

        margin-left: auto;
    }


    .site-nav {
        position: absolute;

        top: calc(100% + 8px);
        right: 0;

        width: min(
            280px,
            calc(100vw - 24px)
        );

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: #ffffff;

        box-shadow:
            0 18px 40px
            rgba(16, 24, 40, 0.16);

        z-index: 1000;
    }


    .site-nav.open {
        display: flex;
    }


    .site-nav > a,
    .site-nav > a:not(.nav-cta) {
        display: flex;

        width: 100%;

        min-height: 44px;

        align-items: center;

        padding:
            10px
            12px;

        border-radius: 8px;
    }


    .site-nav > a:not(.nav-cta) {
        color: var(--text);
    }


    .site-nav .nav-cta {
        justify-content: center;

        margin-top: 4px;
    }

}


@media (max-width: 420px) {

    .site-nav {
        right: -2px;

        width:
            calc(
                100vw - 20px
            );
    }

}

/* =========================================================
   PROFESSIONAL LIGHT THEME POLISH
========================================================= */

body {
    background: #f7f9fb;
}

.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e3e8ee;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

.site-brand-mark {
    background: #159663;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(21, 150, 99, 0.16);
}

.site-brand-text strong {
    color: #17202a;
}

.site-nav a {
    color: #667085;
}

.site-nav a:hover {
    color: #17202a;
}

.site-nav .nav-cta,
.primary-button,
.pricing-button {
    background: #159663;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.site-nav .nav-cta:hover,
.primary-button:hover,
.pricing-button:hover {
    background: #117d53;
    color: #ffffff;
}

.secondary-button,
.pricing-button.secondary {
    background: #ffffff;
    border-color: #d7dde4;
    color: #344054;
}

.hero-section h1,
.section-heading h2,
.value-card h2,
.final-cta h2,
.comparison-card h3,
.step-card h3,
.feature-card h3,
.price strong {
    color: #101828;
}

.hero-description,
.section-heading p,
.value-card p,
.final-cta p,
.comparison-card p,
.step-card p,
.feature-card p,
.pricing-card > p,
.pricing-card li,
.faq-list details p,
.footer-brand p,
.footer-links a {
    color: #667085;
}

.comparison-card,
.step-card,
.feature-card,
.audience-pill,
.pricing-card,
.value-card,
.final-cta {
    background: #ffffff;
    border-color: #e1e6eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035);
}

.comparison-card.featured,
.pricing-card.highlighted {
    background: #f7fcf9;
    border-color: #bfe0d2;
}

.value-card,
.final-cta {
    border-color: #d8e9e1;
}

.site-footer {
    background: #ffffff;
    border-top-color: #e1e6eb;
}

.footer-bottom {
    border-top-color: #edf0f3;
    color: #98a2b3;
}

.mobile-menu-button {
    background: #ffffff;
    border-color: #d7dde4;
}

.mobile-menu-button span {
    background: #344054;
}

@media (max-width: 900px) {
    .site-nav {
        background: #ffffff;
        border-color: #d7dde4;
        box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
    }

    .site-nav > a:not(.nav-cta) {
        color: #344054;
    }
}