/* =========================================================
   ACCOUNTING SERVICES - BASE
   ========================================================= */

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --dark: #0f172a;
    --dark-soft: #1e293b;

    --text: #334155;
    --muted: #64748b;

    --light: #f8fafc;
    --white: #ffffff;

    --border: #e2e8f0;

    --blue-light: #eff6ff;
    --blue-border: #bfdbfe;

    --container: 1180px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow:
        0 20px 60px rgba(15, 23, 42, 0.08);

    --transition:
        0.25s ease;

}


* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    color:
        var(--text);

    background:
        var(--white);

    line-height:
        1.6;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin:
        0 auto;

}


h1,
h2,
h3 {

    color:
        var(--dark);

    line-height:
        1.15;

}


h1 {

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

    letter-spacing:
        -0.05em;

}


h2 {

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

    letter-spacing:
        -0.04em;

}


p {

    color:
        var(--muted);

}


/* =========================================================
   ACCOUNTING SERVICES - HEADER
   ========================================================= */

.accounting-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

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

    border-bottom:
        1px solid rgba(226, 232, 240, 0.8);

    backdrop-filter:
        blur(14px);

}


.header-content {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.brand {

    font-size:
        1.25rem;

    font-weight:
        850;

    letter-spacing:
        0.08em;

    color:
        var(--dark);

}


.navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.navigation a {

    color:
        var(--muted);

    font-size:
        0.9rem;

    font-weight:
        550;

    transition:
        color var(--transition);

}


.navigation a:hover {

    color:
        var(--primary);

}


.header-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 18px;

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

    color:
        var(--white);

    background:
        var(--dark);

    font-size:
        0.82rem;

    font-weight:
        700;

    transition:
        transform var(--transition),
        background var(--transition);

}


.header-button:hover {

    transform:
        translateY(-2px);

    background:
        var(--primary);

}


/* =========================================================
   ACCOUNTING SERVICES - COMMON
   ========================================================= */

.eyebrow {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--primary);

    font-size:
        0.72rem;

    font-weight:
        850;

    letter-spacing:
        0.15em;

}


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 24px;

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

    font-size:
        0.88rem;

    font-weight:
        750;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);

}


.button:hover {

    transform:
        translateY(-2px);

}


.button-primary {

    color:
        var(--white);

    background:
        var(--primary);

}


.button-primary:hover {

    background:
        var(--primary-dark);

}


.button-secondary {

    color:
        var(--dark);

    background:
        var(--white);

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

}


.button-secondary:hover {

    border-color:
        var(--blue-border);

    background:
        var(--blue-light);

}


/* =========================================================
   ACCOUNTING SERVICES - HERO
   ========================================================= */

.hero {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );

}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        560px;

    height:
        560px;

    right:
        -250px;

    top:
        -220px;

    border-radius:
        50%;

    background:
        rgba(37, 99, 235, 0.07);

    filter:
        blur(8px);

}


.hero-content {

    position:
        relative;

    min-height:
        700px;

    display:
        grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items:
        center;

    gap:
        90px;

}


.hero-text h1 {

    max-width:
        720px;

}


.hero-text h1 span {

    color:
        var(--primary);

}


.hero-text > p {

    max-width:
        600px;

    margin-top:
        28px;

    font-size:
        1.08rem;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        36px;

}


/* =========================================================
   ACCOUNTING SERVICES - HERO PANEL
   ========================================================= */

.hero-panel {

    position:
        relative;

    padding:
        32px;

    border:
        1px solid rgba(226, 232, 240, 0.9);

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

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

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.12);

    backdrop-filter:
        blur(14px);

}


.hero-panel::after {

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -25px;

    bottom:
        -25px;

    border-radius:
        22px;

    background:
        var(--primary);

    z-index:
        -1;

}


.hero-panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        22px;

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

}


.hero-panel-header span:first-child {

    color:
        var(--muted);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.12);

}


.hero-panel-main {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        34px 0;

}


.panel-icon {

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    color:
        var(--white);

    background:
        var(--primary);

    font-size:
        0.9rem;

    font-weight:
        850;

}


.hero-panel-main strong {

    display:
        block;

    color:
        var(--dark);

    font-size:
        1.05rem;

}


.hero-panel-main p {

    margin-top:
        5px;

    font-size:
        0.82rem;

}


.panel-lines {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


.panel-line {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.panel-line span {

    width:
        90px;

    color:
        var(--muted);

    font-size:
        0.8rem;

}


.panel-line i {

    display:
        block;

    height:
        7px;

    flex:
        1;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #dbeafe 0%,
            #eff6ff 100%
        );

}


/* =========================================================
   ACCOUNTING SERVICES - POSITIONING
   ========================================================= */

.positioning {

    padding:
        110px 0;

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

}


.positioning-content {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        100px;

    align-items:
        start;

}


.positioning h2 {

    max-width:
        620px;

}


.positioning-text {

    max-width:
        560px;

}


.positioning-text p {

    margin-bottom:
        20px;

    font-size:
        1rem;

}


/* =========================================================
   ACCOUNTING SERVICES - SERVICES
   ========================================================= */

.services {

    padding:
        120px 0;

    background:
        var(--light);

}


.section-heading {

    max-width:
        680px;

    margin-bottom:
        55px;

}


.section-heading h2 {

    max-width:
        650px;

}


.section-heading p {

    margin-top:
        20px;

}


.services-grid {

    display:
        grid;

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

    gap:
        18px;

}


.service-card {

    min-height:
        310px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

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

    background:
        var(--white);

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

}


.service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--blue-border);

    box-shadow:
        var(--shadow);

}


.service-number {

    color:
        var(--primary);

    font-size:
        0.7rem;

    font-weight:
        850;

    letter-spacing:
        0.1em;

}


.service-card h3 {

    margin-bottom:
        14px;

    font-size:
        1.25rem;

}


.service-card p {

    font-size:
        0.88rem;

}


/* =========================================================
   ACCOUNTING SERVICES - PLANS
   ========================================================= */

.plans {

    padding:
        120px 0;

    background:
        var(--white);

}


.plans-heading {

    text-align:
        center;

    margin-left:
        auto;

    margin-right:
        auto;

}


.plans-heading h2 {

    margin-left:
        auto;

    margin-right:
        auto;

}


.plans-heading p {

    max-width:
        600px;

    margin-left:
        auto;

    margin-right:
        auto;

}


.plans-grid {

    display:
        grid;

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

    gap:
        20px;

    align-items:
        stretch;

}


.plan-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    padding:
        36px;

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

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

    background:
        var(--white);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.04);

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

}


.plan-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.plan-featured {

    border:
        2px solid var(--primary);

    box-shadow:
        0 25px 70px rgba(37, 99, 235, 0.12);

}


.plan-badge {

    position:
        absolute;

    top:
        -13px;

    left:
        30px;

    padding:
        5px 12px;

    border-radius:
        20px;

    color:
        var(--white);

    background:
        var(--primary);

    font-size:
        0.65rem;

    font-weight:
        850;

    letter-spacing:
        0.08em;

}


.plan-label {

    display:
        inline-block;

    margin-bottom:
        16px;

    color:
        var(--primary);

    font-size:
        0.7rem;

    font-weight:
        850;

    letter-spacing:
        0.14em;

}


.plan-header h3 {

    font-size:
        1.35rem;

}


.plan-header p {

    min-height:
        72px;

    margin-top:
        12px;

    font-size:
        0.86rem;

}


.plan-price {

    margin-top:
        28px;

}


.plan-price span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        0.72rem;

}


.plan-price strong {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--dark);

    font-size:
        1.35rem;

}


.plan-divider {

    height:
        1px;

    margin:
        28px 0;

    background:
        var(--border);

}


.plan-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    list-style:
        none;

    flex:
        1;

}


.plan-features li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--text);

    font-size:
        0.84rem;

}


.plan-features li span {

    color:
        var(--primary);

    font-weight:
        850;

}


.plan-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    margin-top:
        34px;

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

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

    color:
        var(--dark);

    font-size:
        0.82rem;

    font-weight:
        750;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.plan-button:hover {

    border-color:
        var(--primary);

    color:
        var(--white);

    background:
        var(--primary);

}


.plan-button-primary {

    border-color:
        var(--primary);

    color:
        var(--white);

    background:
        var(--primary);

}


.plan-button-primary:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
   ACCOUNTING SERVICES - AUDIENCE
   ========================================================= */

.audience {

    padding:
        120px 0;

}


.audience-grid {

    display:
        grid;

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

    gap:
        18px;

}


.audience-card {

    padding:
        30px;

    border-top:
        2px solid var(--dark);

}


.audience-card > span {

    color:
        var(--primary);

    font-size:
        0.72rem;

    font-weight:
        850;

}


.audience-card h3 {

    margin:
        28px 0 12px;

    font-size:
        1.12rem;

}


.audience-card p {

    font-size:
        0.86rem;

}


/* =========================================================
   ACCOUNTING SERVICES - DIFFERENTIAL
   ========================================================= */

.differential {

    padding:
        120px 0;

    background:
        var(--dark);

}


.differential-content {

    display:
        grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    gap:
        100px;

    align-items:
        center;

}


.differential-text h2 {

    color:
        var(--white);

}


.differential-text p {

    max-width:
        560px;

    margin-top:
        22px;

    color:
        #94a3b8;

}


.differential .eyebrow {

    color:
        #60a5fa;

}


/* =========================================================
   ACCOUNTING SERVICES - FLOW
   ========================================================= */

.flow {

    padding:
        34px;

    border:
        1px solid rgba(148, 163, 184, 0.18);

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

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

}


.flow-item {

    padding:
        20px 24px;

    border:
        1px solid rgba(148, 163, 184, 0.16);

    border-radius:
        12px;

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

}


.flow-item strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        0.82rem;

    letter-spacing:
        0.08em;

}


.flow-item span {

    display:
        block;

    margin-top:
        4px;

    color:
        #94a3b8;

    font-size:
        0.78rem;

}


.flow-arrow {

    padding:
        8px 0;

    text-align:
        center;

    color:
        #60a5fa;

    font-size:
        1.2rem;

}


.flow-highlight {

    border-color:
        rgba(96, 165, 250, 0.5);

    background:
        rgba(37, 99, 235, 0.18);

}


/* =========================================================
   ACCOUNTING SERVICES - PROCESS
   ========================================================= */

.process {

    padding:
        120px 0;

}


.process-grid {

    display:
        grid;

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

    gap:
        40px;

}


.process-item > span {

    color:
        var(--primary);

    font-size:
        0.72rem;

    font-weight:
        850;

}


.process-item h3 {

    margin:
        22px 0 12px;

    font-size:
        1.15rem;

}


.process-item p {

    font-size:
        0.86rem;

}


/* =========================================================
   ACCOUNTING SERVICES - CTA
   ========================================================= */

.cta {

    padding:
        120px 0;

    text-align:
        center;

    background:
        var(--light);

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

}


.cta h2 {

    max-width:
        780px;

    margin:
        0 auto;

}


.cta p {

    max-width:
        600px;

    margin:
        22px auto 34px;

}


.cta .button {

    min-width:
        220px;

}


/* =========================================================
   ACCOUNTING SERVICES - FOOTER
   ========================================================= */

.accounting-footer {

    padding:
        30px 0;

    background:
        #020617;

}


.footer-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.accounting-footer .brand {

    color:
        var(--white);

}


.accounting-footer span {

    color:
        #64748b;

    font-size:
        0.78rem;

}


/* =========================================================
   ACCOUNTING SERVICES - RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .navigation {

        gap:
            18px;

    }


    .hero-content {

        grid-template-columns:
            1fr;

        gap:
            55px;

        padding:
            90px 0;

    }


    .hero-text {

        text-align:
            center;

    }


    .hero-text > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-panel {

        width:
            min(100%, 500px);

        margin:
            0 auto;

    }


    .services-grid,
    .audience-grid,
    .process-grid {

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

    }


    .plans-grid {

        grid-template-columns:
            1fr;

        max-width:
            560px;

        margin:
            0 auto;

    }


    .positioning-content,
    .differential-content {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

}


@media (max-width: 720px) {

    .container {

        width:
            min(
                calc(100% - 32px),
                var(--container)
            );

    }


    .navigation,
    .header-button {

        display:
            none;

    }


    .header-content {

        min-height:
            68px;

    }


    h1 {

        font-size:
            2.65rem;

    }


    h2 {

        font-size:
            2.1rem;

    }


    .hero-content {

        min-height:
            auto;

        padding:
            80px 0;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .button {

        width:
            100%;

    }


    .positioning,
    .services,
    .plans,
    .audience,
    .differential,
    .process,
    .cta {

        padding:
            80px 0;

    }


    .services-grid,
    .audience-grid,
    .process-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            260px;

    }


    .plan-card {

        padding:
            30px;

    }


    .footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}