:root {
    --mp-ink: #09243a;
    --mp-muted: #647b87;
    --mp-green: #079a5b;
    --mp-green-dark: #087447;
    --mp-blue: #1677e8;
    --mp-mint: #dff8eb;
    --mp-surface: #ffffff;
    --mp-soft: #f7fbfa;
    --mp-line: rgba(9,36,58,.08);
    --mp-shadow:
        0 24px 70px rgba(20,55,73,.10);
    --mp-radius-xl: 34px;
    --mp-radius-lg: 26px;
    --mp-radius-md: 19px;
}

body.mp-landing-lock {
    overflow: hidden !important;
}

#mpMarketingLanding {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--mp-ink);
    background:
        radial-gradient(
            circle at 8% 2%,
            rgba(36,201,132,.10),
            transparent 30rem
        ),
        radial-gradient(
            circle at 91% 10%,
            rgba(42,133,255,.11),
            transparent 35rem
        ),
        #fbfdfd;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    scroll-behavior: smooth;
}

#mpMarketingLanding.mp-open {
    display: block;
}

.mp-page {
    width: 100%;
}

.mp-container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.mp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(9,36,58,.055);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter:
        blur(22px) saturate(150%);
}

.mp-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.mp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: var(--mp-ink);
    text-decoration: none;
    font-weight: 950;
    letter-spacing: -.035em;
}

.mp-brand-mark {
    width: 38px;
    height: 38px;
    position: relative;
    flex: 0 0 auto;
}

.mp-brand-mark::before,
.mp-brand-mark::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 31px;
    top: 3px;
    border-radius: 15px 15px 10px 10px;
}

.mp-brand-mark::before {
    left: 3px;
    transform: rotate(-35deg);
    background:
        linear-gradient(
            160deg,
            #44d179,
            #079a5b
        );
}

.mp-brand-mark::after {
    right: 3px;
    transform: rotate(35deg);
    background:
        linear-gradient(
            160deg,
            #35bfa7,
            #147ddc
        );
}

.mp-brand-copy {
    display: grid;
}

.mp-brand-name {
    font-size: 17px;
}

.mp-brand-tag {
    margin-top: -2px;
    color: #78909b;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: .02em;
}

.mp-menu {
    display: flex;
    align-items: center;
    gap: 22px;
}

.mp-menu a {
    color: #435d69;
    text-decoration: none;
    font-size: 12px;
    font-weight: 780;
    transition: color .2s ease;
}

.mp-menu a:hover {
    color: var(--mp-green);
}

.mp-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 880;
    text-decoration: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.mp-btn:hover {
    transform: translateY(-1px);
}

.mp-btn-primary {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #079a5b,
            #087447
        );
    box-shadow:
        0 13px 28px rgba(7,154,91,.18);
}

.mp-btn-secondary {
    color: var(--mp-ink);
    border-color: rgba(9,36,58,.10);
    background: rgba(255,255,255,.82);
}

.mp-hero {
    position: relative;
    padding: clamp(52px,8vw,104px) 0 62px;
    overflow: hidden;
}

.mp-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);
    gap: clamp(34px,5vw,70px);
    align-items: center;
}

.mp-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(7,154,91,.13);
    border-radius: 999px;
    color: #087447;
    background: rgba(223,248,235,.68);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mp-hero h1 {
    max-width: 720px;
    margin: 18px 0 0;
    font-size:
        clamp(42px,5.6vw,76px);
    line-height: .98;
    letter-spacing: -.062em;
    font-weight: 970;
}

.mp-hero h1 span {
    display: block;
    margin-top: 5px;
    color: var(--mp-green);
}

.mp-hero-copy {
    max-width: 660px;
    margin-top: 22px;
    color: var(--mp-muted);
    font-size:
        clamp(14px,1.45vw,18px);
    line-height: 1.72;
}

.mp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.mp-hero-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 25px;
}

.mp-signal {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #58717c;
    font-size: 9px;
    font-weight: 760;
}

.mp-signal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mp-green);
    box-shadow:
        0 0 0 5px rgba(7,154,91,.09);
}

.mp-hero-media {
    position: relative;
    min-height: 520px;
}

.mp-image-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: var(--mp-radius-xl);
    background: #edf6f4;
    box-shadow: var(--mp-shadow);
}

.mp-hero-frame {
    min-height: 520px;
}

.mp-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mp-hero-frame img {
    position: absolute;
    inset: 0;
}

.mp-glass-chip {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 12px 34px rgba(18,47,64,.12);
    backdrop-filter: blur(18px);
}

.mp-glass-chip small {
    color: #77909a;
    font-size: 7px;
    font-weight: 800;
}

.mp-glass-chip strong {
    font-size: 11px;
}

.mp-chip-a {
    left: -22px;
    top: 18%;
}

.mp-chip-b {
    right: -16px;
    top: 22%;
}

.mp-chip-c {
    left: 8%;
    bottom: -15px;
}

.mp-section {
    padding: clamp(68px,8vw,108px) 0;
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

.mp-section-soft {
    background:
        linear-gradient(
            180deg,
            rgba(239,248,246,.65),
            rgba(255,255,255,.95)
        );
}

.mp-section-head {
    max-width: 760px;
    margin-bottom: 34px;
}

.mp-section-kicker {
    color: var(--mp-green);
    font-size: 8px;
    font-weight: 930;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mp-section-title {
    margin: 9px 0 0;
    font-size:
        clamp(31px,4.4vw,54px);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 960;
}

.mp-section-copy {
    margin-top: 13px;
    color: var(--mp-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mp-dual-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 20px;
}

.mp-pillar {
    min-height: 590px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mp-line);
    border-radius: 30px;
    background: rgba(255,255,255,.9);
    box-shadow:
        0 20px 60px rgba(28,66,82,.065);
}

.mp-pillar-content {
    padding: 28px 28px 24px;
}

.mp-pillar-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--mp-green-dark);
    background: rgba(7,154,91,.075);
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.mp-pillar h3 {
    margin: 11px 0 0;
    font-size: 27px;
    letter-spacing: -.04em;
}

.mp-pillar p {
    margin: 8px 0 0;
    color: var(--mp-muted);
    font-size: 11px;
    line-height: 1.65;
}

.mp-pillar-media {
    flex: 1 1 auto;
    min-height: 350px;
    margin: 0 14px 14px;
    overflow: hidden;
    border-radius: 22px;
}

.mp-pillar-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-story {
    display: grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);
    gap: clamp(26px,5vw,68px);
    align-items: center;
}

.mp-story.reverse {
    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);
}

.mp-story.reverse .mp-story-media {
    order: 2;
}

.mp-story-media {
    min-height: 470px;
}

.mp-story-media img {
    position: absolute;
    inset: 0;
}

.mp-story-content h3 {
    margin: 9px 0 0;
    font-size:
        clamp(29px,4vw,48px);
    line-height: 1.04;
    letter-spacing: -.048em;
}

.mp-story-content p {
    margin-top: 14px;
    color: var(--mp-muted);
    font-size: 13px;
    line-height: 1.75;
}

.mp-list {
    display: grid;
    gap: 10px;
    margin-top: 19px;
}

.mp-list-item {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 10px;
    align-items: start;
    color: #425f6c;
    font-size: 10px;
    line-height: 1.55;
}

.mp-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--mp-green);
    background: rgba(7,154,91,.08);
    font-size: 11px;
    font-weight: 950;
}

.mp-flow {
    display: grid;
    grid-template-columns:
        repeat(7,minmax(0,1fr));
    gap: 8px;
    margin-top: 34px;
}

.mp-flow-step {
    min-height: 135px;
    padding: 16px 12px;
    border: 1px solid var(--mp-line);
    border-radius: 19px;
    background: rgba(255,255,255,.82);
}

.mp-flow-number {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--mp-green);
    background: rgba(7,154,91,.08);
    font-size: 9px;
    font-weight: 950;
}

.mp-flow-step strong {
    display: block;
    margin-top: 12px;
    font-size: 10px;
}

.mp-flow-step span {
    display: block;
    margin-top: 5px;
    color: #768d96;
    font-size: 7px;
    line-height: 1.5;
}

.mp-beta {
    overflow: hidden;
    border-radius: 34px;
    background:
        linear-gradient(
            135deg,
            #082c2c,
            #0a4251
        );
    color: #fff;
}

.mp-beta-grid {
    display: grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);
    min-height: 540px;
}

.mp-beta-copy {
    padding:
        clamp(32px,5vw,64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mp-beta-copy .mp-section-kicker {
    color: #7ef2bf;
}

.mp-beta-copy h3 {
    margin: 10px 0 0;
    font-size:
        clamp(32px,4vw,51px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.mp-beta-copy p {
    margin-top: 14px;
    color: rgba(255,255,255,.67);
    font-size: 12px;
    line-height: 1.75;
}

.mp-beta-media {
    min-height: 540px;
    position: relative;
}

.mp-beta-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-cta {
    display: grid;
    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);
    overflow: hidden;
    min-height: 500px;
    border: 1px solid var(--mp-line);
    border-radius: 34px;
    background: #fff;
    box-shadow:
        0 24px 70px rgba(20,55,73,.08);
}

.mp-cta-copy {
    padding:
        clamp(34px,5vw,66px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mp-cta-copy h3 {
    margin: 0;
    font-size:
        clamp(34px,4.5vw,57px);
    line-height: 1.01;
    letter-spacing: -.055em;
}

.mp-cta-copy p {
    margin: 16px 0 0;
    color: var(--mp-muted);
    line-height: 1.7;
    font-size: 12px;
}

.mp-cta-media {
    min-height: 500px;
    position: relative;
}

.mp-cta-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-footer {
    padding: 32px 0 38px;
}

.mp-footer-grid {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #748993;
    font-size: 8px;
}

.mp-footer-grid .mp-brand {
    margin-right: auto;
}

.mp-footer-links {
    display: flex;
    gap: 14px;
}

.mp-footer-links a {
    color: inherit;
    text-decoration: none;
}

.mp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .75s cubic-bezier(.2,.8,.2,1),
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.mp-reveal.mp-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 960px) {
    .mp-menu {
        display: none;
    }

    .mp-hero-grid,
    .mp-story,
    .mp-story.reverse,
    .mp-beta-grid,
    .mp-cta {
        grid-template-columns: 1fr;
    }

    .mp-story.reverse .mp-story-media {
        order: initial;
    }

    .mp-hero-media,
    .mp-hero-frame {
        min-height: 450px;
    }

    .mp-dual-grid {
        grid-template-columns: 1fr;
    }

    .mp-flow {
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .mp-beta-media,
    .mp-cta-media {
        min-height: 420px;
    }
}

@media (max-width: 650px) {
    .mp-container {
        width: min(100% - 22px,1180px);
    }

    .mp-nav {
        min-height: 63px;
        gap: 8px;
    }

    .mp-brand-tag {
        display: none;
    }

    .mp-nav-actions .mp-btn-secondary {
        display: none;
    }

    .mp-nav-actions .mp-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 9px;
    }

    .mp-hero {
        padding-top: 42px;
    }

    .mp-hero h1 {
        font-size:
            clamp(39px,12vw,58px);
    }

    .mp-hero-copy {
        font-size: 13px;
    }

    .mp-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mp-btn {
        width: 100%;
    }

    .mp-hero-media,
    .mp-hero-frame {
        min-height: 420px;
    }

    .mp-chip-a {
        left: 10px;
    }

    .mp-chip-b {
        right: 10px;
    }

    .mp-chip-c {
        left: 20px;
        bottom: 10px;
    }

    .mp-section {
        padding: 64px 0;
    }

    .mp-pillar {
        min-height: 0;
    }

    .mp-pillar-media {
        min-height: 310px;
    }

    .mp-story-media {
        min-height: 360px;
    }

    .mp-flow {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }

    .mp-flow-step {
        flex: 0 0 145px;
        scroll-snap-align: start;
    }

    .mp-beta {
        border-radius: 26px;
    }

    .mp-beta-media,
    .mp-cta-media {
        min-height: 330px;
    }

    .mp-footer-grid {
        align-items: flex-start;
        flex-direction: column;
    }

    .mp-footer-grid .mp-brand {
        margin-right: 0;
    }

    .mp-footer-links {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mpMarketingLanding {
        scroll-behavior: auto;
    }

    .mp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mp-btn {
        transition: none;
    }
}


/* ==========================================================
   MBOKA POCKET — PREMIUM LANDING POLISH V2
   Visual QA: desktop 1366x768
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.mp-header {
    box-shadow:
        0 1px 0 rgba(9,36,58,.025),
        0 8px 30px rgba(31,67,80,.025);
}

.mp-nav {
    min-height: 70px;
}

.mp-menu {
    gap: 24px;
}

.mp-menu a {
    font-size: 12.5px;
    font-weight: 760;
}


/* ----------------------------------------------------------
   HERO — better first-screen composition
   ---------------------------------------------------------- */

.mp-hero {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    padding:
        clamp(42px,5vw,72px)
        0
        clamp(44px,5vw,68px);
}

.mp-hero-grid {
    width: 100%;
}

.mp-hero h1 {
    max-width: 620px;

    font-size:
        clamp(
            42px,
            4.75vw,
            66px
        );

    line-height: .985;
    letter-spacing: -.058em;
}

.mp-hero-copy {
    max-width: 590px;
    margin-top: 19px;

    font-size:
        clamp(
            13px,
            1.2vw,
            16px
        );

    line-height: 1.65;
}

.mp-hero-media,
.mp-hero-frame {
    min-height: 480px;
}

.mp-hero-actions {
    margin-top: 24px;
}

.mp-hero-signals {
    margin-top: 21px;
}


/* ----------------------------------------------------------
   SECTION RHYTHM
   ---------------------------------------------------------- */

.mp-section {
    padding:
        clamp(
            62px,
            7vw,
            92px
        )
        0;
}

.mp-section-head {
    margin-bottom: 31px;
}

.mp-section-title {
    max-width: 850px;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );
}


/* ----------------------------------------------------------
   FREEDOM / MARKET
   ---------------------------------------------------------- */

.mp-pillar {
    min-height: 555px;

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

.mp-pillar:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(7,154,91,.13);

    box-shadow:
        0 26px 75px
        rgba(28,66,82,.095);
}

.mp-pillar h3 {
    font-size: 26px;
}

.mp-pillar p {
    font-size: 11.5px;
}

.mp-pillar-media {
    min-height: 340px;
}


/* ----------------------------------------------------------
   STORY SECTIONS
   ---------------------------------------------------------- */

.mp-story {
    gap:
        clamp(
            34px,
            5vw,
            66px
        );
}

.mp-story-media {
    min-height: 440px;
}

.mp-story-content h3 {
    max-width: 570px;

    font-size:
        clamp(
            31px,
            3.65vw,
            47px
        );
}

.mp-story-content p {
    max-width: 610px;

    font-size: 13px;
}

.mp-list {
    margin-top: 22px;
    gap: 12px;
}

.mp-list-item {
    font-size: 10.5px;
}


/* ----------------------------------------------------------
   FREEDOM JOURNEY
   ---------------------------------------------------------- */

#mp-journey {
    padding-bottom:
        clamp(
            72px,
            8vw,
            110px
        );
}

.mp-flow {
    gap: 12px;
    margin-top: 36px;
}

.mp-flow-step {
    min-height: 154px;

    padding:
        18px
        14px;

    border-radius: 20px;

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

.mp-flow-step:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(7,154,91,.16);

    box-shadow:
        0 16px 34px
        rgba(23,59,74,.07);
}

.mp-flow-number {
    width: 31px;
    height: 31px;
}

.mp-flow-step strong {
    margin-top: 14px;

    font-size: 11px;
}

.mp-flow-step span {
    margin-top: 7px;

    color: #6f858f;

    font-size: 8.5px;

    line-height: 1.55;
}


/* ----------------------------------------------------------
   BETA
   ---------------------------------------------------------- */

.mp-beta {
    box-shadow:
        0 30px 80px
        rgba(7,49,51,.13);
}

.mp-beta-grid {
    min-height: 520px;
}

.mp-beta-media {
    min-height: 520px;
}

.mp-beta-copy h3 {
    max-width: 460px;
}


/* ----------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------- */

.mp-cta {
    min-height: 455px;
}

.mp-cta-copy {
    padding:
        clamp(
            36px,
            4.6vw,
            60px
        );
}

.mp-cta-copy h3 {
    font-size:
        clamp(
            36px,
            4vw,
            52px
        );
}

.mp-cta-media {
    min-height: 455px;
}


/* ----------------------------------------------------------
   IMAGE DEPTH
   ---------------------------------------------------------- */

.mp-image-frame img,
.mp-pillar-media img,
.mp-beta-media img,
.mp-cta-media img {
    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);
}

.mp-image-frame:hover img,
.mp-pillar:hover img,
.mp-beta:hover img,
.mp-cta:hover img {
    transform:
        scale(1.018);
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.mp-btn {
    min-height: 45px;
}

.mp-btn-primary {
    box-shadow:
        0 13px 30px
        rgba(7,154,91,.19);
}

.mp-btn-primary:hover {
    box-shadow:
        0 17px 38px
        rgba(7,154,91,.25);
}


/* ----------------------------------------------------------
   1366 × 768 OPTIMISATION
   ---------------------------------------------------------- */

@media
    (min-width: 1000px)
    and
    (max-height: 820px)
{

    .mp-hero {
        min-height:
            calc(100vh - 70px);

        padding:
            38px
            0
            42px;
    }

    .mp-hero h1 {
        font-size:
            clamp(
                44px,
                4.4vw,
                60px
            );
    }

    .mp-hero-media,
    .mp-hero-frame {
        min-height: 445px;
    }

    .mp-hero-copy {
        margin-top: 16px;
    }

    .mp-hero-actions {
        margin-top: 20px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .mp-hero {
        min-height: auto;

        padding:
            38px
            0
            52px;
    }

    .mp-hero h1 {
        font-size:
            clamp(
                38px,
                11vw,
                54px
            );
    }

    .mp-hero-media,
    .mp-hero-frame {
        min-height: 390px;
    }

    .mp-section {
        padding:
            58px
            0;
    }

    .mp-story-media {
        min-height: 330px;
    }

    .mp-flow-step {
        flex:
            0
            0
            158px;

        min-height: 148px;
    }

    .mp-flow-step span {
        font-size: 8.5px;
    }

    .mp-beta-media,
    .mp-cta-media {
        min-height: 315px;
    }

}