*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --navy: #2B3BAB;
    --navy-d: #1e2c82;
    --navy-l: #5b72e8;
    --green: #5fa81e;
    --green-l: #7DC832;
    --amber: #f59e0b;
    --red: #ef4444;
    --dark: #0e1422;
    --text: #1c2333;
    --sub: #4b5568;
    --muted: #94a3b8;
    --bg: #f7f9fc;
    --white: #fff;
    --border: #e2e8f0;
    --border-blue: rgba(43,59,171,.12);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow: 0 4px 12px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --container: 1160px;
}

/* ─── HERO ─── */
.hero1 {
    background: linear-gradient(-225deg, rgb(35, 21, 87) 0%, rgb(68, 16, 122) 29%, rgb(255, 19, 97) 67%, rgb(68, 16, 122) 100%);
    padding: 1rem 0 1rem;
    position: relative;
    overflow: hidden;
}

    .hero1::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle,rgba(91,114,232,.1) 1px,transparent 1px);
        background-size: 32px 32px
    }

.glow-l {
    position: absolute;
    top: -20%;
    left: -5%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle,rgba(43,59,171,.22) 0%,transparent 65%);
    border-radius: 50%;
    pointer-events: none
}

.glow-r {
    position: absolute;
    bottom: -20%;
    right: -5%;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle,rgba(95,168,30,.14) 0%,transparent 65%);
    border-radius: 50%;
    pointer-events: none
}

.hero1-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 2rem 2rem;
    text-align: center
}

.hero1-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 100px;
    padding: .3rem .95rem;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp .5s .05s both
}

.pill-dot {
    width: 6px;
    height: 6px;
    background: var(--green-l);
    border-radius: 50%;
    animation: pulse 2.2s infinite
}

.hero1-h1 {
    font-family: 'Syne',sans-serif;
    font-size: clamp(2rem,4vw,3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -.03em;
    margin-bottom: .85rem;
    animation: fadeUp .55s .05s ease both;
}

    .hero1-h1 span {
        background: linear-gradient(90deg,#7DC832,#a3e635);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero1-sub {
    font-size: 1.02rem;
    color: rgba(255,255,255,.52);
    line-height: 1.8;
    margin: 0 auto 1rem;
    animation: fadeUp .5s .15s both
}

.hero1-chips {
    display: flex;
    justify-content: center;
    gap: .55rem;
    flex-wrap: wrap;
    animation: fadeUp .5s .2s both
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .35rem .85rem;
    border-radius: 100px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255,255,255,.62)
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0
}

.hero1-btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp .5s .25s both
}



    .btn-primary svg {
        width: 15px;
        height: 15px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius);
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.72);
    font-size: .9rem;
    font-weight: 600;
    transition: all .18s
}

    .btn-ghost:hover {
        border-color: rgba(255,255,255,.4);
        color: #fff
    }

/* ─── STAT STRIP ─── */
.stat-strip {
    background: var(--white);
    border-bottom: 1px solid var(--border)
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

.stat-item {
    padding: 2rem 1.75rem;
    border-right: 1px solid var(--border);
    transition: background .18s
}

    .stat-item:last-child {
        border-right: none
    }

    .stat-item:hover {
        background: #fafbff
    }

.stat-num {
    font-family: 'Syne',sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: .28rem
}

.stat-lbl {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: .22rem
}

.stat-desc {
    font-size: .74rem;
    color: var(--muted);
    line-height: 1.6
}

/* ─── SHARED SECTION STYLES ─── */
.section {
    padding: 1rem 0
}

.eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--navy);
    margin-bottom: .5rem
}

.sec-title {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.6rem,2.8vw,2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--dark);
    line-height: 1.18
}

    .sec-title span {
        background: linear-gradient(90deg,var(--navy),var(--navy-l));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.sec-sub {
    font-size: .9rem;
    color: var(--sub);
    line-height: 1.8;
    max-width: 540px;
    margin-top: .65rem
}

.center-head {
    text-align: center;
    margin-bottom: 1rem
}

    .center-head .sec-sub {
        margin-left: auto;
        margin-right: auto
    }

/* ─── HOW IT WORKS ─── */
.how-section {
    background: var(--bg)
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    position: relative;
    margin-top: 3.5rem
}

    .steps::before {
        content: '';
        position: absolute;
        top: 35px;
        left: calc(12.5% + 16px);
        right: calc(12.5% + 16px);
        height: 2px;
        background: linear-gradient(90deg,var(--navy-l),var(--green-l));
        border-radius: 2px;
        z-index: 0;
    }

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.1rem;
    position: relative;
    z-index: 1
}

.step-bubble {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background: var(--white);
    border: 2.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.2rem;
    flex-shrink: 0;
    transition: all .22s;
    position: relative;
}

.step:hover .step-bubble {
    border-color: var(--navy);
    box-shadow: 0 0 0 6px rgba(43,59,171,.07),var(--shadow)
}

.step-n {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white)
}

.step-title {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .38rem
}

.step-desc {
    font-size: .76rem;
    color: var(--sub);
    line-height: 1.7
}

.step-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .6rem;
    font-size: .63rem;
    font-weight: 700;
    padding: .17rem .52rem;
    border-radius: 100px
}

    .step-tag.g {
        background: rgba(95,168,30,.1);
        color: var(--green)
    }

    .step-tag.n {
        background: rgba(43,59,171,.08);
        color: var(--navy)
    }

    .step-tag.a {
        background: rgba(245,158,11,.1);
        color: #92400e
    }

/* ─── PLANS ─── */
.plans-section {
    background: var(--white)
}

.plans-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 600px;
    margin: 1rem auto 0
}

.plan-card {
    border-radius: var(--radius-2xl);
    padding: 2.25rem;
    border: 1.5px solid var(--border);
    transition: all .2s;
    position: relative
}

    .plan-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px)
    }

    .plan-card.feat {
        background: linear-gradient(155deg,#0d1538,#1a2a70);
        border-color: rgba(91,114,232,.3)
    }

.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem .6rem;
    border-radius: 100px;
    margin-bottom: 1.2rem
}

    .plan-badge.free-b {
        background: rgba(95,168,30,.1);
        color: var(--green)
    }

    .plan-badge.feat-b {
        background: rgba(255,255,255,.12);
        color: rgba(255,255,255,.72)
    }

.plan-name {
    font-family: 'Syne',sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .28rem
}

.plan-card:not(.feat) .plan-name {
    color: var(--dark)
}

.plan-card.feat .plan-name {
    color: #fff
}

.plan-price {
    font-family: 'Syne',sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .28rem;
    display: flex;
    align-items: baseline;
    gap: .3rem
}

.plan-card:not(.feat) .plan-price {
    color: var(--dark)
}

.plan-card.feat .plan-price {
    color: #fff
}

.pp-period {
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted)
}

.plan-card.feat .pp-period {
    color: rgba(255,255,255,.38)
}

.plan-tagline {
    font-size: .83rem;
    line-height: 1.6;
    margin-bottom: 1.5rem
}

.plan-card:not(.feat) .plan-tagline {
    color: var(--sub)
}

.plan-card.feat .plan-tagline {
    color: rgba(255,255,255,.48)
}

.plan-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin-bottom: 1.3rem
}

.plan-card.feat .plan-hr {
    border-color: rgba(255,255,255,.1)
}

.plan-feats {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.pf {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .8rem;
    line-height: 1.55
}

.plan-card:not(.feat) .pf {
    color: var(--sub)
}

.plan-card.feat .pf {
    color: rgba(255,255,255,.65)
}

.pf-ico {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: .06rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem
}

    .pf-ico.y {
        background: rgba(95,168,30,.12);
        color: var(--green)
    }

    .pf-ico.n {
        background: var(--bg);
        color: var(--muted)
    }

.plan-card.feat .pf-ico.y {
    background: rgba(255,255,255,.12);
    color: #a3e635
}

.pop-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg,var(--green),var(--green-l));
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .22rem .75rem;
    border-radius: 100px;
    white-space: nowrap
}

/* ─── WHAT TO INCLUDE ─── */
.include-section {
    background: var(--bg)
}

.inc-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.2rem;
    margin-top: 3.5rem
}

.inc-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.6rem;
    transition: all .2s
}

    .inc-card:hover {
        border-color: rgba(43,59,171,.2);
        box-shadow: var(--shadow);
        transform: translateY(-2px)
    }

.inc-ico {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: .95rem
}

.inc-title {
    font-family: 'Syne',sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: .4rem
}

.inc-desc {
    font-size: .77rem;
    color: var(--sub);
    line-height: 1.72;
    margin-bottom: .85rem
}

.inc-eg {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    font-size: .7rem;
    color: var(--muted);
    line-height: 1.58;
    border-left: 2.5px solid var(--border)
}

    .inc-eg strong {
        color: var(--sub);
        font-weight: 600;
        display: block;
        margin-bottom: .1rem;
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em
    }

/* ─── REQUIREMENTS ─── */
.req-section {
    background: var(--white)
}

.req-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.75rem;
    margin-top: 3.5rem
}

.req-col-title {
    font-family: 'Syne',sans-serif;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .45rem
}

.req-list {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.req-item {
    display: flex;
    align-items: flex-start;
    gap: .72rem;
    padding: .82rem .95rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: var(--bg);
    transition: border-color .15s
}

    .req-item:hover {
        border-color: rgba(43,59,171,.18)
    }

.ri-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    margin-top: .04rem
}

    .ri-ico.ok {
        background: rgba(95,168,30,.1)
    }

    .ri-ico.no {
        background: rgba(239,68,68,.08)
    }

.ri-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .12rem
}

.ri-desc {
    font-size: .74rem;
    color: var(--sub);
    line-height: 1.65
}

.req-col.rej .req-item {
    background: #fff9f9;
    border-color: rgba(239,68,68,.1)
}

    .req-col.rej .req-item:hover {
        border-color: rgba(239,68,68,.25)
    }

/* ─── REVIEW TIMELINE ─── */
.timeline-section {
    background: var(--bg)
}

.tl-wrap {
    max-width: 680px;
    margin: 3.5rem auto 0;
    position: relative
}

    .tl-wrap::before {
        content: '';
        position: absolute;
        left: 27px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: linear-gradient(180deg,var(--navy-l),var(--green-l));
        border-radius: 2px
    }

.tl-row {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.2rem;
    position: relative
}

    .tl-row:last-child {
        padding-bottom: 0
    }

.tl-dot {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--white);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    z-index: 1;
    box-shadow: var(--shadow-sm);
    transition: all .2s
}

.tl-row:hover .tl-dot {
    border-color: var(--navy);
    box-shadow: 0 0 0 5px rgba(43,59,171,.07)
}

.tl-body {
    flex: 1;
    padding-top: .45rem
}

.tl-time {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--navy);
    margin-bottom: .25rem
}

.tl-title {
    font-family: 'Syne',sans-serif;
    font-size: .97rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: .35rem
}

.tl-desc {
    font-size: .8rem;
    color: var(--sub);
    line-height: 1.75
}

.tl-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    font-size: .63rem;
    font-weight: 700;
    padding: .16rem .52rem;
    border-radius: 100px
}

    .tl-tag.g {
        background: rgba(95,168,30,.1);
        color: var(--green)
    }

    .tl-tag.n {
        background: rgba(43,59,171,.08);
        color: var(--navy)
    }

    .tl-tag.a {
        background: rgba(245,158,11,.1);
        color: #92400e
    }

/* ─── TESTIMONIALS ─── */
.testi-section {
    background: var(--white)
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.25rem;
    margin-top: 3rem
}

.testi-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all .2s
}

    .testi-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        background: var(--white)
    }

.testi-stars {
    font-size: .68rem;
    color: var(--amber);
    margin-bottom: .65rem;
    letter-spacing: .06em
}

.testi-quote {
    font-size: .8rem;
    color: var(--sub);
    line-height: 1.75;
    margin-bottom: 1rem;
    font-style: italic
}

    .testi-quote::before {
        content: '\201C';
        font-size: 1.3rem;
        color: var(--border);
        font-style: normal;
        line-height: 0;
        vertical-align: -.38rem;
        margin-right: .12rem
    }

.testi-author {
    display: flex;
    align-items: center;
    gap: .6rem
}

.testi-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0
}

.testi-name {
    font-size: .76rem;
    font-weight: 700;
    color: var(--dark)
}

.testi-role {
    font-size: .66rem;
    color: var(--muted)
}

/* ─── FAQ ─── */
.faq-section {
    background: var(--bg)
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 920px;
    margin: 3.5rem auto 0
}

.faq-item {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s
}

    .faq-item:hover {
        border-color: rgba(43,59,171,.2)
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.2rem;
    font-size: .83rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    gap: .65rem;
    user-select: none
}

    .faq-q svg {
        width: 13px;
        height: 13px;
        stroke: var(--muted);
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        flex-shrink: 0;
        transition: transform .22s,stroke .22s
    }

.faq-item.open .faq-q {
    color: var(--navy)
}

    .faq-item.open .faq-q svg {
        transform: rotate(180deg);
        stroke: var(--navy)
    }

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease,padding .3s ease;
    font-size: .78rem;
    color: var(--sub);
    line-height: 1.78;
    padding: 0 1.2rem
}

.faq-item.open .faq-body {
    max-height: 200px;
    padding-bottom: 1.05rem
}

/* ─── CTA ─── */
.cta-section {
    padding: 5rem 0;
    background: var(--white)
}

.cta-box {
    background: linear-gradient(145deg,#080e1c 0%,#111a4a 55%,#071510 100%);
    border-radius: var(--radius-2xl);
    padding: 4.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 840px;
    margin: 0 auto;
}

    .cta-box::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle,rgba(91,114,232,.08) 1px,transparent 1px);
        background-size: 28px 28px
    }

.cta-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse,rgba(91,114,232,.2) 0%,transparent 65%);
    pointer-events: none
}

.cta-inner {
    position: relative;
    z-index: 1
}

.cta-ico {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite
}

.cta-h2 {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.5rem,3vw,2.1rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
    margin-bottom: .8rem
}

.cta-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.48);
    max-width: 450px;
    margin: 0 auto 2.5rem;
    line-height: 1.78
}

.cta-btns {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap
}

.btn-cta-w {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .72rem 1.7rem;
    border-radius: var(--radius);
    background: #fff;
    color: var(--navy);
    font-size: .88rem;
    font-weight: 800;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    transition: all .18s
}

    .btn-cta-w:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,.25);
        transform: translateY(-2px)
    }

    .btn-cta-w svg {
        width: 14px;
        height: 14px;
        stroke: var(--navy);
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }

.btn-cta-ol {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .72rem 1.4rem;
    border-radius: var(--radius);
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.68);
    font-size: .88rem;
    font-weight: 600;
    transition: all .18s
}

    .btn-cta-ol:hover {
        border-color: rgba(255,255,255,.42);
        color: #fff
    }

.cta-note {
    font-size: .7rem;
    color: rgba(255,255,255,.28);
    margin-top: 1.2rem
}

/* ─── RESPONSIVE ─── */
@media(max-width:960px) {
    .nav-links, .nav-cta {
        display: none
    }

    .nav-burger {
        display: flex
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr
    }

    .stat-item:nth-child(2) {
        border-right: none
    }

    .stat-item:nth-child(3) {
        border-top: 1px solid var(--border);
        border-right: 1px solid var(--border)
    }

    .stat-item:nth-child(4) {
        border-top: 1px solid var(--border);
        border-right: none
    }

    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

        .steps::before {
            display: none
        }

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

    .inc-grid {
        grid-template-columns: 1fr 1fr
    }

    .req-layout {
        grid-template-columns: 1fr
    }

    .testi-grid {
        grid-template-columns: 1fr 1fr
    }

    .faq-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .container {
        padding: 0 1.1rem
    }

    .stat-grid {
        grid-template-columns: 1fr
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--border)
    }

        .stat-item:last-child {
            border-bottom: none
        }

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

    .inc-grid {
        grid-template-columns: 1fr
    }

    .testi-grid {
        grid-template-columns: 1fr
    }

    .cta-box {
        padding: 2.75rem 1.5rem
    }
}
/* ─────────────────────────────────────────
   FORM CARDS
───────────────────────────────────────── */
.form-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem 2rem;
    overflow: visible;
}

    .form-card + .form-card {
        margin-top: 0
    }

    .form-card:nth-child(3) {
        margin-top: 0
    }

    .form-card:nth-child(4) {
        margin-top: 0
    }

.fc-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1.5px solid var(--border)
}

.fc-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

    .fc-icon.blue {
        background: #eef2ff
    }

    .fc-icon.green {
        background: #f0fdf4
    }

    .fc-icon.orange {
        background: #fff7ed
    }

    .fc-icon.purple {
        background: #faf5ff
    }

.fc-title {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 800;
    color: var(--dark)
}

.fc-sub {
    font-size: .73rem;
    color: var(--muted);
    margin-top: .1rem
}

/* ─── FORM FIELDS ─── */
.field {
    margin-bottom: 1.25rem;
    overflow: visible;
    position: relative
}

    .field:last-child {
        margin-bottom: 0
    }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem
}

    .field-row .field {
        margin-bottom: 0
    }

label.fl {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: .4rem
}

.fl-req {
    color: #ef4444;
    margin-left: .1rem
}

.fl-hint {
    font-size: .68rem;
    font-weight: 400;
    color: var(--muted);
    margin-left: .4rem
}

input.fi, textarea.fi, select.fi {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter',sans-serif;
    font-size: .875rem;
    color: var(--text);
    background: #f8fafc;
    outline: none;
    transition: border-color .15s,background .15s,box-shadow .15s;
}

    input.fi:focus, textarea.fi:focus, select.fi:focus {
        border-color: var(--navy);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(43,59,171,.09);
    }

    input.fi::placeholder, textarea.fi::placeholder {
        color: #c4c9d4
    }

textarea.fi {
    resize: vertical;
    min-height: 100px;
    line-height: 1.65
}

select.fi {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.5rem
}

/* char count */
.char-count-wrap {
    position: relative
}

.char-count {
    position: absolute;
    bottom: .55rem;
    right: .75rem;
    font-size: .65rem;
    color: var(--muted);
    pointer-events: none
}

/* pricing radio group */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .65rem
}

.price-opt {
    position: relative
}

    .price-opt input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0
    }

    .price-opt label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
        padding: .85rem .5rem;
        border-radius: var(--radius);
        border: 1.5px solid var(--border);
        background: #f8fafc;
        cursor: pointer;
        transition: all .15s;
        text-align: center;
    }

        .price-opt label .po-icon {
            font-size: 1.2rem
        }

        .price-opt label .po-name {
            font-size: .75rem;
            font-weight: 600;
            color: var(--sub)
        }

        .price-opt label .po-desc {
            font-size: .63rem;
            color: var(--muted)
        }

    .price-opt input:checked + label {
        border-color: var(--navy);
        background: #eef2ff;
        box-shadow: 0 0 0 3px rgba(43,59,171,.09)
    }

        .price-opt input:checked + label .po-name {
            color: var(--navy)
        }

    .price-opt label:hover {
        border-color: #c7d2fe
    }

/* ─── SUBMIT BUTTON ─── */
.submit-wrap {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.btn-submit-main {
    width: 100%;
    padding: .9rem;
    border-radius: var(--radius-lg);
    border: none;
    background: linear-gradient(135deg,var(--navy),var(--navy-l));
    color: #fff;
    font-family: 'Syne',sans-serif;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(43,59,171,.35);
    transition: transform .15s,box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

    .btn-submit-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(43,59,171,.45)
    }

    .btn-submit-main:active {
        transform: translateY(0)
    }

    .btn-submit-main svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.submit-note {
    text-align: center;
    font-size: .72rem;
    color: var(--muted)
}