/* =========================================================
   UNATTI PAY - OPTIMIZED STYLESHEET
   Base styles first | All responsive rules grouped at bottom
========================================================= */

/* =========================================================
   DESIGN SYSTEM
========================================================= */

:root {
    --primary: #ed1f4d;
    --primary-dark: #c5123b;
    --primary-soft: #fff1f4;
    --secondary: #0d2064;
    --secondary-dark: #07174f;
    --secondary-soft: #edf1ff;
    --white: #ffffff;
    --text: #19233c;
    --text-muted: #6c758a;
    --border: #e8ebf2;
    --bg: #ffffff;
    --bg-soft: #f7f9fd;
    --container: 1280px;
    --section-space: 30px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-sm: 0 8px 25px rgba(13, 32, 100, .07);
    --shadow-md: 0 16px 45px rgba(13, 32, 100, .10);
    --shadow-lg: 0 28px 80px rgba(13, 32, 100, .15);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --transition: .3s var(--ease);
}

/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
}

body.menu-open {
    overflow-x: clip;
}
img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    border: 0;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(237, 31, 77, .22);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

/* =========================================================
   LAYOUT
========================================================= */

.container {
    width: min( calc(100% - 40px), var(--container) );
    margin-inline: auto;
}

.section {
    position: relative;
    padding: var(--section-space) 0;
}

.section--soft {
    background: var(--bg-soft);
}

.section--dark {
    color: var(--white);
    background: var(--secondary-dark);
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1, h2, h3, h4, p {
    margin-top: 0;
}

h1, h2, h3, h4 {
    color: var(--secondary-dark);
    font-weight: 800;
    line-height: 1.15;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 12px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid rgba(237, 31, 77, .11);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.eyebrow--light {
    color: var(--white);
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .14);
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading h2, .why-content h2, .faq-intro h2 {
    margin-bottom: 18px;
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: -1.8px;
}

.section-heading h2 span, .why-content h2 span, .faq-intro h2 span {
    color: var(--primary);
}

.section-heading p, .why-content > p, .faq-intro > p {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}

.section-heading--light h2, .section-heading--light p {
    color: var(--white);
}

.section-heading--light p {
    color: rgba(255, 255, 255, .7);
}

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

.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

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

.btn--primary {
    color: var(--white);
    background: linear-gradient( 135deg, var(--primary), #f84b6f );
    box-shadow: 0 10px 25px rgba(237, 31, 77, .22);
}

.btn--primary:hover {
    box-shadow: 0 16px 32px rgba(237, 31, 77, .30);
}

.btn--ghost {
    color: var(--secondary);
    background: transparent;
}

.btn--ghost:hover {
    background: var(--secondary-soft);
}

.btn--light {
    color: var(--primary-dark);
    background: var(--white);
}

.btn--outline-light {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .35);
}
/* =========================================================
   VIDEO SERVICE SHOWCASE
========================================================= */

.service-video-section {
    position: relative;
    overflow: hidden;

    padding: 15px 0 20px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(237, 31, 77, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(13, 32, 100, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f7f9fd
        );
}


/* background decoration */

.service-video-section::before {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -260px;
    top: 80px;

    content: "";

    border:
        70px solid rgba(13, 32, 100, .025);

    border-radius: 50%;
}


.service-video-section::after {
    position: absolute;

    width: 380px;
    height: 380px;

    left: -220px;
    bottom: -120px;

    content: "";

    border:
        60px solid rgba(237, 31, 77, .025);

    border-radius: 50%;
}


/* =========================================================
   HEADING
========================================================= */

.service-video-heading {
    position: relative;

    z-index: 3;

    margin-bottom: 45px;
}


.service-video-heading h2 {
    margin-bottom: 15px;
}


/* =========================================================
   STAGE
========================================================= */

.service-video-stage {
    position: relative;

    width: min(100%, 1100px);

    min-height: 560px;

    margin: 0 auto;

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


/* =========================================================
   MAIN VIDEO
========================================================= */

.service-video-wrap {
    position: relative;

    z-index: 5;

    width: min(78%, 820px);
}


.service-video-glow {
    position: absolute;

    inset: 10% 8% -8%;

    z-index: -1;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(237, 31, 77, .22),
            rgba(13, 32, 100, .20)
        );

    filter: blur(55px);
}


/* VIDEO CARD */

.service-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border:
        8px solid #ffffff;

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #edf1ff,
            #ffffff
        );

    box-shadow:
        0 30px 90px
        rgba(13, 32, 100, .16);
}


.service-video-frame video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* only placeholder */

.service-video-empty {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

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

    gap: 5px;

    color:
        var(--secondary);

    background:
        linear-gradient(
            135deg,
            #f9fbff,
            #edf3ff
        );
}


.service-video-empty span {
    font-size: 17px;

    font-weight: 800;
}


.service-video-empty small {
    color:
        var(--text-muted);

    font-size: 11px;
}


/* VIDEO BOTTOM LABEL */

.service-video-label {
    position: absolute;

    left: 50%;
    bottom: -21px;

    z-index: 7;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        11px 18px;

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

    border-radius:
        999px;

    color:
        var(--secondary);

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

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

    font-size:
        11px;

    font-weight:
        750;

    transform:
        translateX(-50%);

    white-space:
        nowrap;
}


.service-video-label span {
    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        var(--primary);

    box-shadow:
        0 0 0 5px
        rgba(237, 31, 77, .10);
}


/* =========================================================
   FLOATING SERVICE ITEMS
========================================================= */

.service-float {
    position: absolute;

    z-index: 8;

    width: 88px;
    height: 88px;

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

    padding: 13px;

    border:
        1px solid rgba(13, 32, 100, .08);

    border-radius:
        22px;

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

    box-shadow:
        0 14px 36px
        rgba(13, 32, 100, .14);

    backdrop-filter:
        blur(14px);

    animation:
        serviceFloating
        5s
        ease-in-out
        infinite;
}


.service-float img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* LEFT */

.service-float--one {
    left: 1%;
    top: 2%;

    animation-delay: 0s;
}


.service-float--two {
    left: 1%;
    top: 48%;

    width: 75px;
    height: 75px;

    animation-delay: .7s;
}


.service-float--three {
    left: 5%;
    bottom: 2%;

    width: 82px;
    height: 82px;

    animation-delay: 1.4s;
}


/* RIGHT */

.service-float--four {
    right: 1%;
    top: 18%;

    animation-delay: .4s;
}


.service-float--five {
    right: 5%;
    top: 57%;

    width: 76px;
    height: 76px;

    animation-delay: 1.1s;
}


.service-float--six {
    right: 5%;
    bottom: 1%;

    width: 84px;
    height: 84px;

    animation-delay: 1.8s;
}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes serviceFloating {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(2deg);
    }

}


/* =========================================================
   VIDEO ENTRY ANIMATION
========================================================= */

.service-video-frame {
    opacity: 0;

    transform:
        translateY(30px)
        scale(.96);

    animation:
        serviceVideoReveal
        .9s
        var(--ease)
        .15s
        forwards;
}


@keyframes serviceVideoReveal {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


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

@media (max-width: 991px) {

    .service-video-stage {
        min-height:
            480px;
    }


    .service-video-wrap {
        width:
            82%;
    }


    .service-float {
        width:
            70px;

        height:
            70px;

        border-radius:
            18px;
    }


    .service-float--two,
    .service-float--five {
        width:
            62px;

        height:
            62px;
    }

}


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

@media (max-width: 767px) {

    .service-video-section {
        padding:
            55px 0 70px;
    }


    .service-video-stage {
        min-height:
            auto;

        padding:
            75px 0 80px;
    }


    .service-video-wrap {
        width:
            100%;
    }


    .service-video-frame {
        border-width:
            5px;

        border-radius:
            20px;
    }


    .service-float {
        width:
            54px;

        height:
            54px;

        padding:
            8px;

        border-radius:
            14px;
    }


    .service-float--one {
        left:
            0;

        top:
            6px;
    }


    .service-float--two {
        left:
            22%;

        top:
            18px;
    }


    .service-float--three {
        left:
            44%;

        bottom:
            8px;
    }


    .service-float--four {
        right:
            0;

        top:
            5px;
    }


    .service-float--five {
        right:
            22%;

        top:
            18px;
    }


    .service-float--six {
        right:
            12%;

        bottom:
            5px;
    }


    .service-video-label {
        bottom:
            -18px;
    }

}
/* =========================================================
   FOUNDER SECTION
========================================================= */

.founder-section {
    position: relative;
    overflow: hidden;

    padding: 15px 0;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(237, 31, 77, .07),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(13, 32, 100, .07),
            transparent 28%
        ),
        #ffffff;
}


/* subtle background pattern */

.founder-section::before {
    position: absolute;

    top: 60px;
    right: -100px;

    width: 360px;
    height: 360px;

    content: "";

    border:
        55px solid rgba(13, 32, 100, .025);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   GRID
========================================================= */

.founder-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(50px, 7vw, 95px);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.founder-visual {
    position: relative;

    width: 100%;
}


.founder-image-wrap {
    position: relative;

    width: min(100%, 500px);

    margin: 0 auto;

    padding:
        28px
        28px
        38px;
}


/* decorative block */

.founder-image-bg {
    position: absolute;

    inset:
        65px
        0
        0
        55px;

    border-radius:
        48px 120px 48px 48px;

    background:
        linear-gradient(
            145deg,
            var(--secondary),
            #173aab
        );

    transform:
        rotate(-4deg);
}


/* image card */

.founder-image-card {
    position: relative;

    z-index: 2;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    border:
        7px solid var(--white);

    border-radius:
        42px 110px 42px 42px;

    background:
        #edf1f7;

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


.founder-image-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition:
        transform .8s var(--ease);
}


.founder-image-card:hover img {
    transform:
        scale(1.035);
}


/* =========================================================
   FLOAT BADGE
========================================================= */

.founder-badge {
    position: absolute;

    right: -18px;
    bottom: 72px;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        14px 18px;

    border:
        1px solid rgba(13, 32, 100, .08);

    border-radius:
        17px;

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

    box-shadow:
        0 16px 40px
        rgba(13, 32, 100, .15);

    backdrop-filter:
        blur(12px);

    animation:
        founderFloat
        4s
        ease-in-out
        infinite;
}


.founder-badge__icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #ff6686
        );

    font-size: 20px;
}


.founder-badge strong,
.founder-badge small {
    display: block;
}


.founder-badge strong {
    color:
        var(--secondary);

    font-size:
        13px;
}


.founder-badge small {
    margin-top: 2px;

    color:
        var(--text-muted);

    font-size:
        10px;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.founder-dot {
    position: absolute;

    z-index: 3;

    border-radius: 50%;
}


.founder-dot--one {
    top: 27px;
    right: 48px;

    width: 18px;
    height: 18px;

    background:
        var(--primary);

    box-shadow:
        0 0 0 10px
        rgba(237, 31, 77, .10);
}


.founder-dot--two {
    left: 4px;
    bottom: 115px;

    width: 12px;
    height: 12px;

    background:
        var(--secondary);

    box-shadow:
        0 0 0 9px
        rgba(13, 32, 100, .08);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.founder-content {
    max-width:
        650px;
}


.founder-content h2 {
    margin:
        0 0 20px;

    color:
        var(--secondary-dark);

    font-size:
        clamp(38px, 4.6vw, 58px);

    line-height:
        1.07;

    letter-spacing:
        -2px;
}


.founder-content h2 span {
    color:
        var(--primary);
}


.founder-lead {
    max-width:
        610px;

    margin-bottom:
        26px;

    color:
        var(--text-muted);

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   QUOTE
========================================================= */

.founder-quote {
    position: relative;

    margin-bottom:
        25px;

    padding:
        22px 24px
        22px 54px;

    overflow: hidden;

    border:
        1px solid
        rgba(237, 31, 77, .10);

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

    background:
        linear-gradient(
            135deg,
            #fff5f7,
            #ffffff
        );
}


.founder-quote::before {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    content: "";

    background:
        var(--primary);
}


.founder-quote__mark {
    position: absolute;

    top: 6px;
    left: 17px;

    color:
        rgba(237, 31, 77, .22);

    font-family:
        Georgia, serif;

    font-size:
        58px;

    line-height:
        1;
}


.founder-quote p {
    margin: 0;

    color:
        var(--secondary);

    font-size:
        15px;

    font-weight:
        650;

    line-height:
        1.7;
}


/* =========================================================
   FOUNDER NAME
========================================================= */

.founder-person {
    display: flex;

    align-items: center;

    margin-bottom:
        32px;
}


.founder-person strong,
.founder-person span {
    display: block;
}


.founder-person strong {
    margin-bottom: 3px;

    color:
        var(--secondary-dark);

    font-size:
        20px;

    font-weight:
        800;
}


.founder-person span {
    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        750;

    letter-spacing:
        .3px;
}


/* =========================================================
   VALUES
========================================================= */

.founder-values {
    display:
        grid;

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

    gap:
        12px;
}


.founder-value {
    min-width: 0;

    padding:
        18px;

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

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

    background:
        var(--white);

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

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


.founder-value:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(237, 31, 77, .20);

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


.founder-value > span {
    display:
        inline-flex;

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;
}


.founder-value strong,
.founder-value small {
    display:
        block;
}


.founder-value strong {
    margin-bottom:
        4px;

    color:
        var(--secondary);

    font-size:
        14px;
}


.founder-value small {
    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes founderFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.founder-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .85s var(--ease),
        transform .85s var(--ease);
}


.founder-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* left image comes slightly from left */

.founder-visual.founder-reveal {
    transform:
        translateX(-45px);
}


.founder-visual.founder-reveal.is-visible {
    transform:
        translateX(0);
}


/* content from right */

.founder-content.founder-reveal {
    transform:
        translateX(45px);
}


.founder-content.founder-reveal.is-visible {
    transform:
        translateX(0);
}


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

@media (max-width: 991px) {

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


    .founder-grid {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .founder-content {
        max-width:
            760px;

        margin:
            0 auto;
    }


    .founder-image-wrap {
        max-width:
            470px;
    }

}


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

@media (max-width: 767px) {

    .founder-section {
        padding:
            50px 0;
    }


    .founder-image-wrap {
        padding:
            18px 18px 30px;
    }


    .founder-image-bg {
        inset:
            50px
            0
            0
            38px;

        border-radius:
            35px 75px 35px 35px;
    }


    .founder-image-card {
        border-radius:
            30px 70px 30px 30px;
    }


    .founder-badge {
        right:
            -4px;

        bottom:
            45px;
    }


    .founder-content h2 {
        font-size:
            clamp(34px, 10vw, 46px);

        letter-spacing:
            -1.3px;
    }


    .founder-values {
        grid-template-columns:
            1fr;
    }


    .founder-value {
        display:
            flex;

        align-items:
            flex-start;

        gap:
            15px;
    }


    .founder-value > span {
        margin:
            2px 0 0;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .founder-badge {
        animation:
            none;
    }


    .founder-reveal {
        opacity:
            1;

        transform:
            none !important;

        transition:
            none;
    }

}
/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    color: var(--white);
    background: linear-gradient( 90deg, var(--secondary-dark), var(--secondary), var(--primary) );
}

.topbar__inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.topbar__news {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.topbar__ticker {
    max-width: 620px;
    overflow: hidden;
}

.topbar__ticker-track {
    display: flex;
    gap: 50px;
    width: max-content;
    white-space: nowrap;
    animation: ticker 18s linear infinite;
}

@keyframes ticker {
    to {
        transform: translateX(-45%);
    }
}

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

    font-size: 12px;
}


/* TOPBAR LINK */

.topbar__links a {
    min-height: 30px;

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

    gap: 6px;

    padding: 0 13px;

    color: var(--secondary);

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

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

    border-radius: 999px;

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

    letter-spacing: .2px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .08);

    animation:
        topbarLinkPulse
        2.2s
        ease-in-out
        infinite;

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


/* HOVER */

.topbar__links a:hover {
    color: var(--secondary-dark);

    background: #ffffff;

    border-color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .14);

    animation-play-state: paused;
}


/* ZOOM IN / ZOOM OUT */

@keyframes topbarLinkPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(13, 32, 100, .06);
    backdrop-filter: blur(16px);
    transition: box-shadow var(--transition);
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(13, 32, 100, .07);
}

.header__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.brand__logo {
    width: auto;
    height: 70px;
    display: block;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-link {
    position: relative;

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

    gap: 7px;

    padding: 10px 14px;

    color: #ffffff;

    background: linear-gradient(
        90deg,
        var(--secondary-dark),
       
        var(--primary)
    );

    border-radius: 999px;

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

    box-shadow:
        0 6px 16px rgba(13, 32, 100, .10);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}


/* ICON */

.nav-link > i {
    font-size: 12px;

    color: #ffffff;

    transition:
        transform var(--transition);
}


/* HOVER */

.nav-link:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(13, 32, 100, .17);

    filter: brightness(1.06);
}


.nav-link:hover > i {
    transform: scale(1.15);
}


/* ACTIVE */

.nav-link.active {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
}
.nav-dropdown__menu a {
    display: flex;
    align-items: center;
   
    gap: 9px;
}


.nav-dropdown__menu a i {
    width: 18px;

    color: var(--primary);

    font-size: 12px;

    text-align: center;
}
.nav-dropdown__menu a::before {
    content: none !important;
    display: none !important;
}
/* =========================================================
   NAV DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}

/* =========================================================
   TRIGGER
========================================================= */

.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* =========================================================
   ARROW
========================================================= */

.nav-dropdown__arrow {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-top: -2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}
.nav-dropdown.open .nav-dropdown__arrow {
    transform: rotate(225deg);
}
/* =========================================================
   DROPDOWN MENU
========================================================= */

.nav-dropdown__menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 12px);
    left: 50%;
    width: 220px;
    padding: 8px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);

    transform: translateX(-50%) translateY(10px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}
.nav-dropdown.open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* =========================================================
   DROPDOWN TOP POINTER
========================================================= */

.nav-dropdown__menu::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--white);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: translateX(-50%) rotate(45deg);
}

/* =========================================================
   DROPDOWN LINKS
========================================================= */

.nav-dropdown__menu a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 12px;
    color: var(--text);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    transition: color var(--transition), background var(--transition), padding-left var(--transition);
}

.nav-dropdown__menu a::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 8px;
    flex: 0 0 5px;
    background: var(--border);
    border-radius: 50%;
    transition: background var(--transition), transform var(--transition);
}

/* =========================================================
   LINK HOVER
========================================================= */

.nav-dropdown__menu a:hover {
    color: var(--primary);
    background: var(--primary-soft);
    padding-left: 16px;
}

.nav-dropdown__menu a:hover::before {
    background: var(--primary);
    transform: scale(1.2);
}

/* =========================================================
   SHOW DROPDOWN
========================================================= */

.nav-dropdown__arrow {
    transition: transform 0.25s ease;
}

/* .nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__arrow {
    transform: rotate(180deg);
}

.nav-dropdown__trigger[aria-expanded="false"] .nav-dropdown__arrow {
    transform: rotate(0deg);
} */
/* =========================================================
   ROTATE ARROW
========================================================= */

/* .nav-dropdown:hover .nav-dropdown__arrow, .nav-dropdown:focus-within .nav-dropdown__arrow {
    transform: rotate(225deg);
} */

/* =========================================================
   OPTIONAL ACTIVE LINK
========================================================= */

.nav-dropdown__menu a.active {
    color: var(--primary);
    background: var(--primary-soft);
}

.nav-dropdown__menu a.active::before {
    background: var(--primary);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    display: none;
    place-items: center;
    flex: 0 0 44px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--secondary);
    border-radius: 99px;
    transition: var(--transition);
}

.menu-toggle span:nth-child(1) {
    transform: translateY(-6px);
}

.menu-toggle span:nth-child(3) {
    transform: translateY(6px);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
}
/* =========================================================
   HERO - BANNER SLIDER
========================================================= */

.hero--slider {
    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 22px 0 30px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(237, 31, 77, .05),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(13, 32, 100, .06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9fc 100%
        );
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.hero-slider {
    position: relative;

    width: calc(100% - 40px);
    max-width: 1400px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 18px 50px rgba(13, 32, 100, .10);
}


/* =========================================================
   TRACK
   Banner ratio: 2022 × 778
========================================================= */

.hero-slider__track {
    position: relative;

    width: 100%;

    aspect-ratio: 2022 / 778;

    overflow: hidden;
}


/* =========================================================
   SLIDES
========================================================= */
/* =========================================================
   SLIDE ANIMATION
========================================================= */

.hero-slider__slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    visibility: hidden;

    transform: translateX(100%);

    z-index: 1;
}


/* Current visible slide */

.hero-slider__slide.active {
    visibility: visible;

    transform: translateX(0);

    z-index: 3;
}


/* NEXT / AUTOPLAY
   New banner right se enter karega */

.hero-slider__slide.slide-in-right {
    visibility: visible;

    animation:
        bannerSlideInRight
        .8s
        cubic-bezier(.65, 0, .35, 1)
        forwards;

    z-index: 4;
}


/* Current banner left side exit */

.hero-slider__slide.slide-out-left {
    visibility: visible;

    animation:
        bannerSlideOutLeft
        .8s
        cubic-bezier(.65, 0, .35, 1)
        forwards;

    z-index: 3;
}


/* PREVIOUS BUTTON
   Banner left se enter karega */

.hero-slider__slide.slide-in-left {
    visibility: visible;

    animation:
        bannerSlideInLeft
        .8s
        cubic-bezier(.65, 0, .35, 1)
        forwards;

    z-index: 4;
}


/* Old banner right side exit */

.hero-slider__slide.slide-out-right {
    visibility: visible;

    animation:
        bannerSlideOutRight
        .8s
        cubic-bezier(.65, 0, .35, 1)
        forwards;

    z-index: 3;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes bannerSlideInRight {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }

}


@keyframes bannerSlideOutLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }

}


@keyframes bannerSlideInLeft {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }

}


@keyframes bannerSlideOutRight {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }

}

/* =========================================================
   BANNER IMAGE
========================================================= */

.hero-slider__slide img {
    display: block;

    width: 100%;
    height: 100%;

    /*
       Full banner visible.
       No cropping.
    */
    object-fit: contain;

    object-position: center;

    user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;
}


/* =========================================================
   BORDER
========================================================= */

.hero-slider::after {
    position: absolute;

    inset: 0;

    z-index: 5;

    content: "";

    pointer-events: none;

    border:
        1px solid rgba(13, 32, 100, .08);

    border-radius: inherit;
}


/* =========================================================
   PREVIOUS / NEXT BUTTONS
========================================================= */

.hero-slider__nav {
    position: absolute;

    top: 50%;

    z-index: 20;

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

    width: 48px;
    height: 48px;

    padding: 0;

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

    border-radius: 50%;

    color: #fff;

    background:
        rgba(7, 26, 104, .78);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .18);

    backdrop-filter: blur(8px);

    cursor: pointer;

    font-size: 23px;

    transform:
        translateY(-50%);

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-slider__nav:hover {
    background: var(--primary);

    transform:
        translateY(-50%)
        scale(1.08);
}


.hero-slider__nav--prev {
    left: 18px;
}


.hero-slider__nav--next {
    right: 18px;
}


/* =========================================================
   DOTS
========================================================= */

.hero-slider__dots {
    position: absolute;

    left: 50%;
    bottom: 16px;

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

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

    box-shadow:
        0 8px 24px rgba(13, 32, 100, .12);

    backdrop-filter: blur(10px);

    transform:
        translateX(-50%);
}


.hero-slider__dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
        rgba(7, 26, 104, .30);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-slider__dot.active {
    width: 28px;

    background:
        var(--primary);
}


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

@media (max-width: 991px) {

    .hero--slider {
        padding:
            18px 0 25px;
    }

    .hero-slider {
        width:
            calc(100% - 24px);

        border-radius:
            18px;
    }

}


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

@media (max-width: 767px) {

    .hero--slider {
        padding:
            14px 0 20px;
    }


    .hero-slider {
        width:
            calc(100% - 16px);

        border-radius:
            14px;
    }


    .hero-slider__nav {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }


    .hero-slider__nav--prev {
        left: 8px;
    }


    .hero-slider__nav--next {
        right: 8px;
    }


    .hero-slider__dots {
        bottom: 9px;
    }

}
/* =========================================================
   STATS
========================================================= */

.stats-strip {
    padding: 35px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

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

.stat {
    padding: 10px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

.stat1 {
    --delay: 80ms;
}

.stat2 {
    --delay: 160ms;
}

.stat3 {
    --delay: 240ms;
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    display: block;
    margin-bottom: 3px;
    color: var(--secondary);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
}

.stat span {
    color: var(--text-muted);
    font-size: 12px;
}

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

.service-toolbar, .services-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 35px;
}

/* =========================================================
   SEARCH
========================================================= */

.service-search, .services-page-search {
    width: min(100%, 310px);
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.service-search:focus-within, .services-page-search:focus-within {
    border-color: rgba(237, 31, 77, 0.45);
    box-shadow: 0 0 0 4px rgba(237, 31, 77, 0.07);
}

.service-search input, .services-page-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}

.service-search > span, .services-page-search > span {
    flex-shrink: 0;
    color: var(--primary);
}

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

.service-filters, .services-page-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.service-filter, .services-page-filters button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--text-muted);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.service-filter:hover, .services-page-filters button:hover {
    color: var(--primary);
    border-color: rgba(237, 31, 77, 0.30);
    transform: translateY(-2px);
}

.service-filter.active, .services-page-filters button.active {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(237, 31, 77, 0.18);
}

/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid, .services-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* =========================================================
   SERVICE CARD
========================================================= */

.service-card, .services-page-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 25px rgba(13, 32, 100, 0.04);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* =========================================================
   HOVER GRADIENT
========================================================= */

.services-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient( 135deg, var(--secondary) 0%, var(--primary) 100% );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
}

.services-page-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover, .services-page-card:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(13, 32, 100, 0.14);
}

/* =========================================================
   SERVICE ICON
========================================================= */

.service-card__icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 18px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(13, 32, 100, 0.07);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(13, 32, 100, 0.08);
    overflow: hidden;
    transition: transform 0.35s var(--ease), background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@keyframes serviceIconRotate {

    0%,
    70% {
        transform: rotate(0deg);
    }

    85% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }

}
.service-card__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transition: transform 0.35s var(--ease);  animation: serviceIconRotate 3s ease-in-out infinite;
}

.service-card:hover .service-card__icon, .services-page-card:hover .service-card__icon {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.service-card:hover .service-card__icon img, .services-page-card:hover .service-card__icon img {
    transform: scale(1.08);
}

/* =========================================================
   CARD CATEGORY
========================================================= */

.services-page-card__category {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: color var(--transition);
}

/* =========================================================
   CARD TITLE
========================================================= */

.service-card h3, .services-page-card h3 {
    margin: 0 0 9px;
    color: var(--secondary);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
    transition: color var(--transition);
}

/* =========================================================
   CARD DESCRIPTION
========================================================= */

.service-card p, .services-page-card p {
    min-height: 63px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.7;
    transition: color var(--transition);
}

/* =========================================================
   CARD LINK
========================================================= */

.service-card > a, .services-page-card > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    transition: color var(--transition), gap var(--transition), transform var(--transition);
}

.service-card > a:hover, .services-page-card > a:hover {
    gap: 8px;
}

/* =========================================================
   HOVER TEXT COLORS
========================================================= */

.services-page-card:hover h3, .services-page-card:hover p, .services-page-card:hover .services-page-card__category, .services-page-card:hover > a {
    color: var(--white);
}

/* =========================================================
   SEQUENTIAL CARD ANIMATION
========================================================= */

.services-page-card {
    opacity: 0;
    transform: translateY(28px);
}

.services-page-card.is-service-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), border-color var(--transition), box-shadow var(--transition);
}

.services-page-card:not(.is-service-visible) .service-card__icon {
    opacity: 0;
    transform: translateY(15px) scale(0.85);
}

.services-page-card.is-service-visible .service-card__icon {
    animation: serviceIconIn 0.55s var(--ease) 0.08s both;
}

.services-page-card:not(.is-service-visible) .services-page-card__category {
    opacity: 0;
    transform: translateY(8px);
}

.services-page-card.is-service-visible .services-page-card__category {
    animation: serviceTextUp 0.45s var(--ease) 0.17s both;
}

.services-page-card:not(.is-service-visible) h3 {
    opacity: 0;
    transform: translateY(8px);
}

.services-page-card.is-service-visible h3 {
    animation: serviceTextUp 0.48s var(--ease) 0.24s both;
}

.services-page-card:not(.is-service-visible) p {
    opacity: 0;
    transform: translateY(14px);
}

.services-page-card.is-service-visible p {
    animation: serviceTextUp 0.5s var(--ease) 0.32s both;
}

.services-page-card:not(.is-service-visible) > a {
    opacity: 0;
    transform: translateX(-14px);
}

.services-page-card.is-service-visible > a {
    animation: serviceLinkIn 0.5s var(--ease) 0.42s both;
}

/* =========================================================
   SERVICE ANIMATION KEYFRAMES
========================================================= */

@keyframes serviceIconIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes serviceTextUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes serviceLinkIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   EMPTY RESULT
========================================================= */

.service-empty, .services-page-empty {
    margin-top: 25px;
    padding: 40px 25px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.services-page-empty strong, .services-page-empty span {
    display: block;
}

.services-page-empty strong {
    color: var(--secondary);
    font-size: 18px;
}

.services-page-empty span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

/* =========================================================
   SERVICES VIEW MORE / VIEW LESS
========================================================= */

.services-page-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    text-align: center;
}

.services-page-toggle-wrap[hidden] {
    display: none;
}

.services-page-toggle {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    color: var(--primary);
    background: var(--white);
    border: 1px solid rgba(237, 31, 77, .22);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(13, 32, 100, .06);
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.services-page-toggle:hover {
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(237, 31, 77, .16);
}

.services-page-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: transform var(--transition);
}

.services-page-toggle:hover .services-page-toggle__icon {
    transform: translateY(2px);
}

.services-page-toggle.is-expanded .services-page-toggle__icon {
    transform: translateY(-1px);
}

.services-page-toggle.is-expanded:hover .services-page-toggle__icon {
    transform: translateY(-3px);
}

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

.why-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 70px;
}

.why-content > p {
    max-width: 600px;
}

.why-list {
    display: grid;
    gap: 15px;
    margin: 28px 0;
}

.why-list > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.why-list > div > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    font-size: 11px;
}
.why-list > div > span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex: 0 0 31px;

    color: var(--white);
    background: var(--primary);

    border-radius: 50%;

    font-size: 11px;

    transform-origin: center;

    animation:
        whyIconPulse 1.8s ease-in-out infinite;

    box-shadow:
        0 6px 16px rgba(237, 31, 77, .22);
}


/* STAGGER SO SAB EK SAATH NA CHALE */

.why-list > div:nth-child(2) > span {
    animation-delay: .3s;
}

.why-list > div:nth-child(3) > span {
    animation-delay: .6s;
}

.why-list > div:nth-child(4) > span {
    animation-delay: .9s;
}

.why-list > div:nth-child(5) > span {
    animation-delay: 1.2s;
}


/* ZOOM + GLOW */

@keyframes whyIconPulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 6px 16px rgba(237, 31, 77, .20);
    }

    50% {
        transform: scale(1.28);

        box-shadow:
            0 10px 26px rgba(237, 31, 77, .42),
            0 0 0 7px rgba(237, 31, 77, .08);
    }

}
.why-list p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.why-list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 14px;
}

.why-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}
/* =========================================================
   FEATURE CARD ANIMATIONS
========================================================= */

.feature-card {
    position: relative;
    overflow: hidden;

    padding: 28px;

    background: var(--white);

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

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

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

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

    animation:
        featureCardFloat
        4.5s
        ease-in-out
        infinite;
}


/* STAGGER */

.feature-card:nth-child(2) {
    animation-delay: .5s;
}

.feature-card:nth-child(3) {
    animation-delay: 1s;
}

.feature-card:nth-child(4) {
    animation-delay: 1.5s;
}


/* HOVER */

.feature-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 40px
        rgba(13, 32, 100, .14);

    border-color:
        rgba(237, 31, 77, .18);

    animation-play-state: paused;
}


/* NUMBER / ICON */

.feature-card > span {
    display: inline-block;

    margin-bottom: 25px;

    color:
        rgba(237, 31, 77, .28);

    font-size: 33px;

    font-weight: 900;

    animation:
        featureNumberPulse
        2.8s
        ease-in-out
        infinite;
}


/* TITLE */

.feature-card h3 {
    margin-bottom: 8px;

    font-size: 18px;
}


/* TEXT */

.feature-card p {
    margin: 0;

    color: var(--text-muted);

    font-size: 12px;
}


/* =========================================================
   SHINE SWEEP
========================================================= */

.feature-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(237, 31, 77, .08),
            rgba(255, 255, 255, .55),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events: none;

    animation:
        featureCardShine
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   FLOAT
========================================================= */

@keyframes featureCardFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

}


/* =========================================================
   NUMBER PULSE
========================================================= */

@keyframes featureNumberPulse {

    0%,
    100% {
        transform:
            scale(1);

        color:
            rgba(237, 31, 77, .28);
    }

    50% {
        transform:
            scale(1.12);

        color:
            rgba(237, 31, 77, .48);
    }

}


/* =========================================================
   SHINE
========================================================= */

@keyframes featureCardShine {

    0%,
    72% {
        left:
            -130%;
    }

    100% {
        left:
            145%;
    }

}
/* =========================================================
   PROCESS TIMELINE
========================================================= */

.process {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   TIMELINE WRAPPER
========================================================= */

.process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 52px;
    padding-top: 12px;
}

/* =========================================================
   MAIN PROGRESS LINE
========================================================= */

.process-timeline__line {
    position: absolute;
    z-index: 0;
    top: 43px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 4px;
    overflow: hidden;
    background: var(--border);
    border-radius: 999px;
}

.process-timeline__line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient( 90deg, var(--secondary), var(--primary) );
    border-radius: inherit;
    transition: width .75s var(--ease);
}

/* =========================================================
   EACH STEP
========================================================= */

.process-timeline__step {
    position: relative;
    z-index: 2;
    min-width: 0;
    opacity: .45;
    transform: translateY(24px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.process-timeline__step.is-active, .process-timeline__step.is-completed {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   TIMELINE NODE
========================================================= */

.process-timeline__node {
    position: relative;
    z-index: 4;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 7px 22px rgba(13, 32, 100, .07);
    transition: border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}

.process-timeline__node span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: var(--secondary-soft);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    transition: color .45s var(--ease), background .45s var(--ease);
}

.process-timeline__step.is-completed .process-timeline__node, .process-timeline__step.is-active .process-timeline__node {
    border-color: rgba(237, 31, 77, .22);
    background: var(--white);
    box-shadow: 0 9px 28px rgba(237, 31, 77, .12);
}

.process-timeline__step.is-active .process-timeline__node {
    transform: scale(1.09);
}

.process-timeline__step.is-active .process-timeline__node span, .process-timeline__step.is-completed .process-timeline__node span {
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
}

.process-timeline__step.is-active .process-timeline__node::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(237, 31, 77, .18);
    border-radius: 50%;
    animation: processNodePulse 1.8s ease-out infinite;
}

/* =========================================================
   PROCESS CARD
========================================================= */

.process-timeline__card {
    position: relative;
    min-height: 325px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(13, 32, 100, .045);
    transition: transform .45s var(--ease), border-color var(--transition), box-shadow var(--transition);
}

.process-timeline__step.is-active .process-timeline__card {
    transform: translateY(-5px);
    border-color: rgba(237, 31, 77, .20);
    box-shadow: var(--shadow-md);
}

/* =========================================================
   VISUAL
========================================================= */

.process-timeline__visual {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--secondary-soft);
}

.process-timeline__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 55%, rgba(13, 32, 100, .10) );
    pointer-events: none;
}

.process-timeline__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform .6s var(--ease);
}

.process-timeline__step.is-active .process-timeline__visual img {
    transform: scale(1.07);
}

/* =========================================================
   CONTENT
========================================================= */

.process-timeline__content {
    padding: 22px 21px 24px;
}

.process-timeline__label {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.process-timeline__content h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.process-timeline__content p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.75;
}

/* =========================================================
   PULSE ANIMATION
========================================================= */

@keyframes processNodePulse {
    0% {
        opacity: .8;
        transform: scale(.9);
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

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

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 70px;
}

.faq-list {
    display: grid;
    gap: 11px;
}

.faq-item {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}

.faq-item.active {
    border-color: rgba(237, 31, 77, .28);
}

.faq-question {
    width: 100%;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 19px;
    color: var(--secondary);
    background: transparent;
    text-align: left;
    font-weight: 750;
    cursor: pointer;
}

.faq-question i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 50%;
    font-style: normal;
    transition: transform var(--transition);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
}

.faq-answer p {
    margin: 0;
    padding: 0 19px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* =========================================================
   FOOTER - LIGHT PREMIUM VERSION
========================================================= */

.footer {
    position: relative;
    padding: 0;
    overflow: hidden;
    color: var(--text-muted);
    background: linear-gradient( 180deg, #ffffff, #f7f9fd );
    border-top: 1px solid var(--border);
}

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

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 42px;
    padding: 28px 32px;
    background: linear-gradient( 120deg, var(--secondary-soft), var(--primary-soft) );
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.footer-cta__content {
    max-width: 690px;
}

.footer-cta__content .eyebrow {
    margin-bottom: 8px;
}

.footer-cta h2 {
    margin-bottom: 8px;
    color: var(--secondary);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: -1px;
}

.footer-cta p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.footer-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

/* =========================================================
   MAIN GRID
========================================================= */

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .85fr .95fr 1.2fr;
    gap: clamp(28px, 4vw, 48px);
    padding-bottom: 35px;
}

/* =========================================================
   BRAND
========================================================= */

.brand--footer .brand__logo {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.footer-about p {
    max-width: 330px;
    margin: 16px 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   HEADINGS
========================================================= */

.footer h4 {
    position: relative;
    margin-bottom: 16px;
    padding-bottom: 8px;
    color: var(--secondary);
    font-size: 16px;
    font-weight: 800;
}

.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--primary);
    border-radius: 10px;
}

/* =========================================================
   LINKS
========================================================= */

.footer-links, .footer-contact {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    transition: color var(--transition), transform var(--transition);
}

.footer-links a::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    background: #c6ccd8;
    border-radius: 50%;
    transition: background var(--transition);
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(3px);
}

.footer-links a:hover::before {
    background: var(--primary);
}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact li {
    margin-bottom: 7px;
}

.footer-contact span {
    display: block;
    margin-bottom: 3px;
    color: #8b94a5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.footer-contact strong, .footer-contact a {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.footer-contact a {
    transition: color var(--transition);
}

.footer-contact a:hover {
    color: var(--primary);
}

/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--secondary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition);
}

.footer-social a:hover {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* =========================================================
   TRUST STRIP
========================================================= */

.footer-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.footer-trust > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 18px;
    border-right: 1px solid var(--border);
}

.footer-trust > div:last-child {
    border-right: 0;
}

.footer-trust > div > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
}

.footer-trust p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.footer-trust strong {
    display: block;
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 13px;
}

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

.footer-bottom {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.footer-bottom p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.rights-reserved {
    color: var(--primary);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
}

.footer-legal a {
    color: var(--text-muted);
    font-size: 12px;
    transition: color var(--transition);
}

.footer-legal a:hover {
    color: var(--primary);
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

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

/* =========================================================
   FLOATING CONTACT ACTIONS
========================================================= */

.floating-contact {
    position: fixed;

    top: 30%;
    right: 18px;

    z-index: 990;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 10px;

    transform: translateY(-50%);
}


/* =========================================================
   ITEM
========================================================= */

.floating-contact__item {
    position: relative;

    width: 50px;
    height: 50px;

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

    overflow: hidden;

    color: var(--white);

    border-radius: 999px;

    box-shadow:
        0 12px 32px
        rgba(13, 32, 100, .16);

    cursor: pointer;

    transition:
        width .45s var(--ease),
        transform var(--transition),
        box-shadow var(--transition);
}


/* =========================================================
   WHATSAPP
========================================================= */

.floating-contact__item--whatsapp {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
}


/* =========================================================
   CALL
========================================================= */

.floating-contact__item--call {
    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--secondary-dark)
        );
}


/* =========================================================
   ICON
========================================================= */

.floating-contact__icon {
    width: 50px;
    height: 50px;

    flex:
        0
        0
        50px;

    display: grid;
    place-items: center;

    position: relative;

    z-index: 2;

    color: var(--white);

    font-size: 19px;
}


.floating-contact__item--whatsapp
.floating-contact__icon {
    font-size: 22px;
}


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

.floating-contact__label {
    min-width: 0;

    padding-left: 18px;

    opacity: 0;

    color: var(--white);

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

    line-height: 1;

    white-space: nowrap;

    transform:
        translateX(16px);

    transition:
        opacity .25s ease,
        transform .4s var(--ease);
}


/* =========================================================
   OPEN STATE
========================================================= */

.floating-contact__item.is-open {
    width: 175px;

    box-shadow:
        0 16px 38px
        rgba(13, 32, 100, .22);
}


.floating-contact__item.is-open
.floating-contact__label {
    opacity: 1;

    transform:
        translateX(0);
}


/* WhatsApp can be a little wider */

.floating-contact__item--whatsapp.is-open {
    width: 190px;
}


/* =========================================================
   HOVER
========================================================= */

.floating-contact__item:hover {
    color: var(--white);

    transform:
        translateX(-3px);
}


.floating-contact__item:hover
.floating-contact__icon i {
    transform:
        scale(1.08);
}


.floating-contact__icon i {
    transition:
        transform var(--transition);
}


/* =========================================================
   SMALL DECORATIVE RING
========================================================= */

.floating-contact__icon::before {
    content: "";

    position: absolute;

    inset: 7px;

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

    border-radius: 50%;
}


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

@media (max-width: 767px) {

    .floating-contact {
        right: 12px;

        gap: 8px;
    }


    .floating-contact__item {
        width: 46px;
        height: 46px;
    }


    .floating-contact__icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 17px;
    }


    .floating-contact__item--whatsapp
    .floating-contact__icon {
        font-size: 20px;
    }


    .floating-contact__item.is-open {
        width: 145px;
    }


    .floating-contact__item--whatsapp.is-open {
        width: 165px;
    }


    .floating-contact__label {
        padding-left: 14px;

        font-size: 10px;
    }

}
/* =========================================================
   FLOATING CONTACT — PULSE ANIMATION
========================================================= */

.floating-contact__item {
    animation:
        floatingContactPulse
        2.2s
        ease-in-out
        infinite;
}


/* thoda staggered effect */

.floating-contact__item--call {
    animation-delay:
        .7s;
}


/* open hone par pulse stop */

.floating-contact__item.is-open {
    animation:
        none;
}


/* hover par bhi stable */

.floating-contact__item:hover {
    animation-play-state:
        paused;
}


/* pulse */

@keyframes floatingContactPulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 12px 32px
            rgba(13, 32, 100, .16);
    }

    50% {
        transform:
            scale(1.15);

        box-shadow:
            0 16px 38px
            rgba(13, 32, 100, .22);
    }

}
/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--transition);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0ms);
    will-change: transform, opacity;
}

.reveal[data-reveal="up"] {
    transform: translateY(42px);
}

.reveal[data-reveal="left"] {
    transform: translateX(-50px);
}

.reveal[data-reveal="right"] {
    transform: translateX(50px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   LEGAL PAGES
========================================================= */

.legal-hero {
    padding-top: 75px;
    padding-bottom: 75px;
    overflow: hidden;
    background: radial-gradient( circle at 90% 10%, rgba(237, 31, 77, .1), transparent 27% ), linear-gradient( 135deg, var(--secondary-dark), var(--secondary) );
}

.legal-hero__content {
    max-width: 820px;
}

.legal-hero__content .eyebrow {
    color: var(--white);
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
}

.legal-hero h1 {
    margin-bottom: 18px;
    color: var(--white);
    font-size: clamp(42px, 5vw, 66px);
    letter-spacing: -2px;
}

.legal-hero p {
    max-width: 720px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.8;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legal-meta span {
    padding: 7px 10px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-size: 10px;
}

/* =========================================================
   LAYOUT
========================================================= */

.legal-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 50px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.legal-sidebar {
    position: sticky;
    top: 110px;
    padding: 22px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.legal-sidebar > strong {
    display: block;
    margin-bottom: 15px;
    color: var(--secondary);
    font-size: 13px;
}

.legal-nav {
    display: grid;
    gap: 3px;
}

.legal-nav a {
    padding: 8px 10px;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.legal-nav a:hover {
    color: var(--primary);
    background: var(--white);
    transform: translateX(3px);
}

/* =========================================================
   CONTENT
========================================================= */

.legal-content {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.legal-section {
    position: relative;
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 25px rgba(13, 32, 100, .035);
    scroll-margin-top: 105px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.legal-section:hover {
    border-color: rgba(237, 31, 77, .18);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.legal-number {
    display: inline-block;
    margin-bottom: 13px;
    color: rgba(237, 31, 77, .28);
    font-size: 28px;
    font-weight: 900;
}

.legal-section h2 {
    margin-bottom: 14px;
    font-size: clamp(22px, 2.5vw, 29px);
}

.legal-section p {
    margin-bottom: 13px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.85;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

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

.legal-list {
    display: grid;
    gap: 9px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.legal-list li {
    position: relative;
    padding-left: 24px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
}

.legal-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    font-size: 8px;
    font-weight: 900;
}

/* =========================================================
   NOTE
========================================================= */

.legal-note {
    margin: 20px 0;
    padding: 16px 18px;
    color: var(--secondary);
    background: var(--secondary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   CONTACT
========================================================= */

.legal-section--contact {
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary-dark), var(--secondary) );
    border: 0;
}

.legal-section--contact h2 {
    color: var(--white);
}

.legal-section--contact p {
    color: rgba(255, 255, 255, .7);
}

.legal-section--contact .legal-number {
    color: rgba(255, 255, 255, .25);
}

.legal-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.legal-contact > div {
    padding: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
}

.legal-contact span, .legal-contact strong {
    display: block;
}

.legal-contact span {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    text-transform: uppercase;
}

.legal-contact strong {
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* =========================================================
   LEGAL RESPONSIVE WIDTH FIX
========================================================= */

.legal-hero, .legal-layout, .legal-sidebar, .legal-content, .legal-section, .legal-contact {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.legal-content {
    overflow: hidden;
}

.legal-section {
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
}

.legal-section p, .legal-section li, .legal-section strong, .legal-section a {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
    background: radial-gradient( circle at 8% 10%, rgba(237, 31, 77, .06), transparent 24% ), var(--bg-soft);
}

.contact-shell {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

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

.contact-hero {
    padding: 42px 45px 34px;
    border-bottom: 1px solid var(--border);
}

.contact-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.contact-hero__note {
    color: var(--text-muted);
    font-size: 11px;
}

.contact-hero h1 {
    margin: 12px 0 25px;
    font-size: clamp(64px, 10vw, 145px);
    line-height: .87;
    letter-spacing: clamp(-6px, -.5vw, -2px);
}

.contact-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 19px;
    border-top: 1px solid var(--border);
}

.contact-social > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-social > div {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-social a {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    transition: color var(--transition);
}

.contact-social a:hover {
    color: var(--primary);
}

/* =========================================================
   MAIN GRID
========================================================= */

.contact-main {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 70px;
    padding: 55px 45px;
    border-bottom: 1px solid var(--border);
}

/* =========================================================
   LEFT
========================================================= */

.contact-heading > span, .contact-form-head > span, .contact-section-label {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.contact-heading h2, .contact-form-head h2 {
    margin-bottom: 14px;
    font-size: clamp(27px, 3vw, 37px);
}

.contact-heading p {
    max-width: 440px;
    margin-bottom: 30px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.8;
}

.contact-info-list {
    display: grid;
    gap: 10px;
}

.contact-info-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

a.contact-info-item:hover {
    background: var(--bg-soft);
    border-color: var(--border);
    transform: translateX(3px);
}

.contact-info-item__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
}

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

.contact-info-item small {
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.contact-info-item strong {
    color: var(--secondary);
    font-size: 12px;
    line-height: 1.55;
}

/* =========================================================
   FORM
========================================================= */

.contact-form-head {
    margin-bottom: 25px;
}

.contact-form {
    display: grid;
    gap: 17px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.contact-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.contact-field > span {
    color: var(--secondary);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.contact-field input, .contact-field select, .contact-field textarea {
    width: 100%;
    min-width: 0;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    outline: 0;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.contact-field input, .contact-field select {
    height: 48px;
    padding: 0 14px;
}

.contact-field textarea {
    min-height: 145px;
    padding: 14px;
    resize: vertical;
}

.contact-field input::placeholder, .contact-field textarea::placeholder {
    color: #a0a7b4;
}

.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
    background: var(--white);
    border-color: rgba(237, 31, 77, .35);
    box-shadow: 0 0 0 4px rgba(237, 31, 77, .06);
}

.contact-submit {
    width: max-content;
}

.contact-form__message {
    padding: 11px 13px;
    color: #167747;
    background: #edfff5;
    border: 1px solid #c8f3da;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

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

.contact-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}

.contact-office, .contact-help {
    padding: 40px 45px;
}

.contact-office {
    border-right: 1px solid var(--border);
}

.contact-office__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.contact-office small {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.contact-office h3 {
    margin-bottom: 8px;
    font-size: 16px;
}

.contact-office p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================================
   HELP
========================================================= */

.contact-help {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    color: var(--white);
    background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, .18), transparent 35% ), linear-gradient( 135deg, var(--secondary-dark), var(--secondary), var(--primary) );
}

.contact-help__content {
    position: relative;
    z-index: 2;
    max-width: 390px;
}

.contact-help__content > span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.contact-help h3 {
    margin-bottom: 10px;
    color: var(--white);
    font-size: clamp(22px, 2.5vw, 30px);
}

.contact-help p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    line-height: 1.7;
}

.contact-help__visual {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0 0 120px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: inset 0 0 0 12px rgba(255, 255, 255, .05);
}

.contact-help__visual span {
    font-size: 38px;
    font-weight: 900;
    line-height: .8;
}

.contact-help__visual strong {
    color: #ffafc0;
    font-size: 17px;
}

.contact-help__visual small {
    margin-top: 3px;
    font-size: 8px;
    text-transform: uppercase;
}

/* =========================================================
   MOBILE NAV ACTIONS
========================================================= */

.mobile-nav-actions {
    display: none;
}
/* =========================================================
   AUTH PAGES — LIGHT THEME
   Uses existing root variables only
   ========================================================= */

/* =========================================================
   01. PAGE SHELL
   ========================================================= */

.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 34px 0;
    color: var(--text);
    background:
        radial-gradient(circle at 90% 5%, rgba(13, 32, 100, .06), transparent 28%),
        radial-gradient(circle at 5% 92%, rgba(237, 31, 77, .06), transparent 25%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-bg-shape {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(85px);
    opacity: .75;
}

.auth-bg-shape--one {
    width: 420px;
    height: 420px;
    top: -190px;
    right: -140px;
    background: var(--secondary-soft);
}

.auth-bg-shape--two {
    width: 380px;
    height: 380px;
    left: -170px;
    bottom: -190px;
    background: var(--primary-soft);
}


/* =========================================================
   02. MAIN LAYOUT
   ========================================================= */

.auth-container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 32px), var(--container));
    margin-inline: auto;
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(390px, .95fr)
        minmax(0, .72fr);
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
}


/* =========================================================
   03. LEFT SHOWCASE
   ========================================================= */

.auth-showcase {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
    padding: 18px 0;
}

.auth-brand {
    width: fit-content;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 9px 13px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.auth-brand .brand__logo {
    width: auto;
    height: 52px;
    display: block;
    object-fit: contain;
}

.auth-showcase__content {
    margin: 18px 0;
}

.auth-showcase__content h1 {
    max-width: 620px;
    margin: 0 0 20px;
    color: var(--secondary-dark);
    font-size: clamp(44px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -2.7px;
}

.auth-showcase__content h1 span {
    display: block;
    color: var(--primary);
}

.auth-showcase__content p {
    max-width: 480px;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.auth-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.auth-mini-stats div {
    padding-right: 12px;
    border-right: 1px solid var(--border);
}

.auth-mini-stats div:last-child {
    border-right: 0;
}

.auth-mini-stats strong,
.auth-mini-stats span {
    display: block;
}

.auth-mini-stats strong {
    color: var(--secondary-dark);
    font-size: 22px;
}

.auth-mini-stats span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* =========================================================
   04. AUTH CARD
   ========================================================= */

.auth-card {
    min-width: 0;
    padding: 33px;
    color: var(--text);
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-card--register {
    padding: 28px;
}

.auth-card__top {
    margin-bottom: 24px;
    text-align: center;
}


/* =========================================================
   05. MOBILE AUTH LOGO
   ========================================================= */

.auth-card__mobile-brand {
    display: none;
    width: 100%;
    margin: 0 auto 16px;
    text-decoration: none;
}

.auth-card__mobile-brand-box {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: auto;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.auth-card__mobile-brand img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.auth-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 6px 10px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid rgba(237, 31, 77, .14);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.auth-card h2 {
    margin: 0 0 6px;
    color: var(--secondary-dark);
    font-size: clamp(30px, 3vw, 39px);
    line-height: 1.05;
}

.auth-card__top p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   06. FORM
   ========================================================= */

.auth-form {
    display: grid;
    gap: 15px;
}

.auth-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 12px;
}

.auth-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.auth-field > span {
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
}

.auth-input {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
}

.auth-input input,
.auth-input select {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 13px;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: 0;
    box-shadow: 0 1px 0 rgba(13, 32, 100, .02);
    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.auth-input:has(.auth-input__icon) input {
    padding-left: 39px;
}

.auth-input:has(.password-toggle) input {
    padding-right: 58px;
}

.auth-input select {
    color: var(--text);
    cursor: pointer;
}

.auth-input select option {
    color: var(--text);
    background: var(--white);
}

.auth-input input::placeholder {
    color: #a3a9b6;
}

.auth-input input:hover,
.auth-input select:hover {
    border-color: #d7dce6;
}

.auth-input input:focus,
.auth-input select:focus {
    background: var(--white);
    border-color: rgba(13, 32, 100, .42);
    box-shadow: 0 0 0 4px rgba(13, 32, 100, .06);
}

.auth-input__icon {
    position: absolute;
    left: 13px;
    z-index: 2;
    color: var(--secondary);
    font-size: 12px;
    pointer-events: none;
}

.password-toggle {
    position: absolute;
    right: 10px;
    z-index: 3;
    padding: 4px;
    color: var(--secondary);
    background: transparent;
    border: 0;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: color var(--transition);
}

.password-toggle:hover {
    color: var(--primary);
}


/* =========================================================
   07. OPTIONS
   ========================================================= */

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--text-muted);
    font-size: 9px;
    cursor: pointer;
}

.auth-check input {
    margin-top: 2px;
    accent-color: var(--primary);
}

.auth-check a,
.auth-link {
    color: var(--secondary);
    font-weight: 700;
    transition: color var(--transition);
}

.auth-check a:hover,
.auth-link:hover {
    color: var(--primary);
}

.auth-check--terms {
    line-height: 1.6;
}


/* =========================================================
   08. SUBMIT
   ========================================================= */

.auth-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    color: var(--white);
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 24px rgba(237, 31, 77, .16);
    font-weight: 800;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.auth-submit:hover {
    color: var(--white);
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(237, 31, 77, .20);
}

.auth-submit i {
    margin-left: auto;
    font-style: normal;
}


/* =========================================================
   09. SOCIAL
   ========================================================= */

.auth-divider {
    position: relative;
    margin: 23px 0 15px;
    text-align: center;
}

.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    position: relative;
    z-index: 2;
    padding: 0 10px;
    color: var(--text-muted);
    background: var(--white);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.auth-social {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 8px;
    cursor: pointer;
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.auth-social:hover {
    color: var(--secondary);
    background: var(--white);
    border-color: rgba(13, 32, 100, .18);
    transform: translateY(-2px);
}

.auth-social span {
    font-size: 12px;
    font-weight: 800;
}

.auth-switch {
    margin: 20px 0 0;
    color: var(--text-muted);
    font-size: 9px;
    text-align: center;
}

.auth-switch a {
    color: var(--primary);
    font-weight: 800;
}

.auth-switch a:hover {
    color: var(--primary-dark);
}


/* =========================================================
   10. MESSAGES
   ========================================================= */

.auth-message {
    margin-bottom: 14px;
    padding: 10px 12px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid rgba(237, 31, 77, .18);
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.5;
}

.auth-message.success {
    color: #23784b;
    background: #edf9f2;
    border-color: #cfe9da;
}


/* =========================================================
   11. RIGHT BENEFITS
   ========================================================= */

.auth-benefits {
    min-width: 0;
    display: grid;
    gap: 35px;
}

.auth-benefit-list {
    display: grid;
    gap: 20px;
}

.auth-benefit-list article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.auth-benefit-list article > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    color: var(--secondary);
    background: var(--secondary-soft);
    border: 1px solid rgba(13, 32, 100, .08);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.auth-benefit-list strong {
    display: block;
    margin-bottom: 3px;
    color: var(--secondary-dark);
    font-size: 11px;
}

.auth-benefit-list p {
    margin: 0;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.55;
}

/* =========================================================
   AUTH IMAGE SLIDER
   ========================================================= */

.auth-visual {
    position: relative;

    width: min(100%, 280px);
    height: 360px;

    margin-inline: auto;

    overflow: hidden;

    background: var(--bg-soft);

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

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

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


/* track */

.auth-image-slider__track {
    position: absolute;
    inset: 0;
}


/* slide */

.auth-image-slider__slide {
    position: absolute;
    inset: 0;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity .7s var(--ease),
        transform 1.2s var(--ease);
}


.auth-image-slider__slide.active {
    opacity: 1;

    transform: scale(1);
}


/* image */

.auth-image-slider__slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 5s ease;
}


.auth-image-slider__slide.active img {
    transform: scale(1.045);
}


/* overlay */

.auth-image-slider__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(13, 32, 100, .02) 20%,
            rgba(13, 32, 100, .12) 58%,
            rgba(7, 23, 79, .72) 100%
        );
}


/* content */

.auth-image-slider__content {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 48px;

    z-index: 3;
}


.auth-image-slider__eyebrow {
    display: inline-block;

    margin-bottom: 8px;

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

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

    letter-spacing: .08em;

    text-transform: uppercase;
}


.auth-image-slider__content strong {
    display: block;

    color: var(--white);

    font-size: 24px;

    line-height: 1.05;

    letter-spacing: -.04em;
}


.auth-image-slider__content strong em {
    display: block;

    font-family: "Instrument Serif", serif;

    font-size: 28px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: -.02em;
}


/* dots */

.auth-image-slider__dots {
    position: absolute;

    left: 22px;
    bottom: 20px;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 6px;
}


.auth-image-slider__dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 999px;

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

    cursor: pointer;

    transition:
        width var(--transition),
        background var(--transition);
}


.auth-image-slider__dots button.active {
    width: 22px;

    background: var(--white);
}

/* =========================================================
   13. LOAD ANIMATIONS
   ========================================================= */

.auth-enter {
    opacity: 0;
    animation: authEnter .85s var(--ease) forwards;
}

.auth-enter--left {
    transform: translateX(-45px);
    animation-delay: .05s;
}

.auth-enter--up {
    transform: translateY(35px);
    animation-delay: .15s;
}

.auth-enter--right {
    transform: translateX(45px);
    animation-delay: .25s;
}

@keyframes authEnter {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes authFloat {
    0%,
    100% {
        transform: translateY(0) rotate(35deg);
    }

    50% {
        transform: translateY(-10px) rotate(35deg);
    }
}

@keyframes authBars {
    from {
        opacity: .72;
    }

    to {
        opacity: 1;
        filter: brightness(1.08);
    }
}

@keyframes authOrbit {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   14. RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {
    .auth-container {
        grid-template-columns:
            minmax(0, .8fr)
            minmax(370px, 1fr);
        gap: 34px;
    }

    .auth-benefits {
        display: none;
    }

    .auth-showcase__content {
        margin: 42px 0;
    }
}

@media (max-width: 991px) {
    .auth-page {
        align-items: flex-start;
        padding: 28px 0 40px;
        overflow: auto;
    }

    .auth-container {
        width: min(calc(100% - 28px), 680px);
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-showcase {
        display: none;
    }

    .auth-card {
        width: 100%;
        padding: 30px;
    }

    .auth-card__mobile-brand {
        display: block;
    }
}

@media (max-width: 575px) {
    .auth-page {
        padding: 18px 0 28px;
    }

    .auth-container {
        width: min(calc(100% - 20px), 100%);
    }

    .auth-card,
    .auth-card--register {
        padding: 22px 18px;
        border-radius: var(--radius-md);
    }

    .auth-card__mobile-brand-box {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    .auth-card h2 {
        font-size: 29px;
    }

    .auth-form__grid {
        grid-template-columns: 1fr;
    }

    .auth-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .auth-social-grid {
        grid-template-columns: 1fr;
    }

    .auth-social {
        min-height: 42px;
        font-size: 9px;
    }
}

/* =========================================================
   PARTNER PAGE
========================================================= */

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

.partner-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 84% 18%, rgba(237, 31, 77, .08), transparent 25% ), radial-gradient( circle at 18% 88%, rgba(13, 32, 100, .07), transparent 25% ), var(--white);
}

.partner-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(45px, 7vw, 95px);
}

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

.partner-hero__content {
    position: relative;
    z-index: 4;
}

.partner-hero__content h1 {
    max-width: 680px;
    margin-bottom: 20px;
    font-size: clamp(46px, 5.6vw, 74px);
    line-height: 1.02;
    letter-spacing: -2.8px;
}

.partner-hero__content h1 span, .partner-roles__intro h2 span, .partner-benefits__sticky h2 span, .partner-stories__head h2 span, .partner-register__content h2 span {
    color: var(--primary);
}

.partner-hero__content > p {
    max-width: 600px;
    margin-bottom: 26px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.partner-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 29px;
}

/* =========================================================
   HERO SERVICE SWITCH
========================================================= */

.partner-service-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
}

.partner-service-switch button {
    min-height: 37px;
    padding: 0 14px;
    color: var(--text-muted);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.partner-service-switch button:hover {
    color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.partner-service-switch button.active {
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(13, 32, 100, .15);
}

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

.partner-hero__people {
    display: flex;
    align-items: center;
    gap: 13px;
}

.partner-hero__avatars {
    display: flex;
}

.partner-hero__avatars img {
    width: 42px;
    height: 42px;
    margin-left: -10px;
    object-fit: cover;
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(13, 32, 100, .08);
}

.partner-hero__avatars img:first-child {
    margin-left: 0;
}

.partner-hero__people strong, .partner-hero__people span {
    display: block;
}

.partner-hero__people strong {
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 12px;
}

.partner-hero__people span {
    color: var(--text-muted);
    font-size: 10px;
}

/* =========================================================
   HERO VISUAL STAGE
========================================================= */

.partner-hero__stage {
    position: relative;
    min-height: 600px;
    perspective: 1000px;
    isolation: isolate;
}

.partner-hero__shape {
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 500px;
    top: 47px;
    right: 24px;
    background: linear-gradient( 145deg, var(--secondary-soft), var(--primary-soft) );
    border-radius: 46% 54% 44% 56% / 53% 42% 58% 47%;
    animation: partnerHeroMorph 9s ease-in-out infinite;
}

.partner-hero__dots {
    position: absolute;
    z-index: 1;
    width: 80px;
    height: 80px;
    top: 22px;
    right: 8px;
    opacity: .27;
    background-image: radial-gradient( var(--primary) 1.5px, transparent 1.5px );
    background-size: 10px 10px;
}

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

.partner-hero__photo {
    position: absolute;
    z-index: 2;
    top: 42px;
    right: 13px;
    width: 64%;
    height: 475px;
    overflow: hidden;
    border-radius: 34px 34px 120px 34px;
    box-shadow: var(--shadow-lg);
    transition: transform .22s ease-out;
}

.partner-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner-photo-label {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: var(--white);
    background: rgba(7, 23, 79, .8);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(12px);
}

.partner-photo-label > span {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: #22c879;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(34, 200, 121, .16);
}

.partner-photo-label small, .partner-photo-label strong {
    display: block;
}

.partner-photo-label small {
    margin-bottom: 1px;
    color: rgba(255, 255, 255, .58);
    font-size: 8px;
}

.partner-photo-label strong {
    color: var(--white);
    font-size: 11px;
}

/* =========================================================
   HERO LIVE CARD
========================================================= */

.partner-live-card {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 23px;
    width: min(335px, 56%);
    padding: 23px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    transition: transform .22s ease-out;
}

.partner-live-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.partner-live-card__head small, .partner-live-card__head strong {
    display: block;
}

.partner-live-card__head small {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.partner-live-card__head strong {
    margin-top: 2px;
    color: var(--secondary);
    font-size: 18px;
}

.partner-live-card__head > span {
    padding: 5px 9px;
    color: #138953;
    background: #e9fff4;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.partner-live-card__amount {
    margin-top: 18px;
}

.partner-live-card__amount small, .partner-live-card__amount strong {
    display: block;
}

.partner-live-card__amount small {
    color: var(--text-muted);
    font-size: 9px;
}

.partner-live-card__amount strong {
    margin-top: 2px;
    color: var(--secondary);
    font-size: 28px;
}

/* =========================================================
   LIVE CHART
========================================================= */

.partner-live-chart {
    height: 95px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin: 18px 0;
}

.partner-live-chart i {
    width: 100%;
    height: var(--h);
    background: linear-gradient( 180deg, var(--primary), var(--secondary) );
    border-radius: 5px 5px 1px 1px;
    transform-origin: bottom;
    animation: partnerChartIn .85s var(--ease) both;
}

.chart1 {
    --h: 34%;
}

.chart2 {
    --h: 52%;
}

.chart3 {
    --h: 45%;
}

.chart4 {
    --h: 70%;
}

.chart5 {
    --h: 60%;
}

.chart6 {
    --h: 87%;
}

.chart7 {
    --h: 96%;
}

.partner-live-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.partner-live-card__bottom span {
    color: var(--text-muted);
    font-size: 10px;
}

.partner-live-card__bottom strong {
    color: var(--secondary);
    font-size: 12px;
}

/* =========================================================
   HERO FLOATING BADGES
========================================================= */

.partner-hero-badge {
    position: absolute;
    z-index: 5;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: transform .22s ease-out;
}

.partner-hero-badge--one {
    top: 19px;
    left: 22%;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
}

.partner-hero-badge--one strong, .partner-hero-badge--one span {
    display: block;
    text-align: center;
}

.partner-hero-badge--one strong {
    color: var(--primary);
    font-size: 23px;
    line-height: 1.05;
}

.partner-hero-badge--one span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 9px;
}

.partner-hero-badge--two {
    right: 0;
    bottom: 72px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
}

.partner-hero-badge__check {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: 0 0 33px;
    color: var(--white);
    background: #20bf76;
    border-radius: 50%;
}

.partner-hero-badge--two small, .partner-hero-badge--two strong {
    display: block;
}

.partner-hero-badge--two small {
    color: var(--text-muted);
    font-size: 8px;
}

.partner-hero-badge--two strong {
    color: var(--secondary);
    font-size: 10px;
}

/* =========================================================
   SERVICE BAR
========================================================= */

.partner-service-bar {
    padding: 16px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.partner-service-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.partner-service-bar__inner > div:first-child {
    flex-shrink: 0;
}

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

.partner-service-bar small {
    margin-bottom: 1px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.partner-service-bar strong {
    color: var(--secondary);
    font-size: 13px;
}

.partner-service-bar__items {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.partner-service-bar__items span {
    padding: 7px 11px;
    color: var(--secondary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.partner-service-bar__items span:hover {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* =========================================================
   ROLE SLIDER
========================================================= */

.partner-roles {
    overflow: hidden;
}

.partner-roles__layout {
    display: grid;
    grid-template-columns: minmax(270px, .7fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(38px, 5vw, 72px);
}

/* =========================================================
   ROLE INTRO
========================================================= */

.partner-roles__intro h2 {
    margin-bottom: 17px;
    font-size: clamp(39px, 4.6vw, 58px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.partner-roles__intro > p {
    max-width: 430px;
    margin-bottom: 27px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.partner-role-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.partner-role-counter strong {
    color: var(--secondary);
    font-size: 23px;
}

.partner-role-counter > span {
    width: 48px;
    height: 1px;
    background: var(--border);
}

.partner-role-counter small {
    color: var(--text-muted);
    font-size: 11px;
}

.partner-role-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.partner-role-controls button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--secondary);
    background: var(--white);
    border: 1px solid var(--secondary);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.partner-role-controls button:hover {
    color: var(--white);
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* =========================================================
   ROLE STAGE
========================================================= */

.partner-role-stage {
    position: relative;
    min-height: 625px;
    outline: 0;
}

.partner-role-stage:focus-visible {
    outline: 3px solid rgba(237, 31, 77, .18);
    outline-offset: 6px;
    border-radius: var(--radius-lg);
}

/* =========================================================
   MAIN ROLE IMAGE
========================================================= */

.partner-role-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 62%;
    height: 575px;
    overflow: hidden;
    background: var(--bg-soft);
    border-radius: 32px;
    box-shadow: 0 15px 45px rgba(13, 32, 100, .08);
}

.partner-role-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease, transform .65s var(--ease);
}

.partner-role-image.is-changing img {
    opacity: 0;
    transform: scale(1.055);
}

.partner-role-image__index {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--secondary);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

/* =========================================================
   OVERLAPPING ROLE INFO
========================================================= */

.partner-role-info {
    position: absolute;
    z-index: 4;
    left: 34%;
    bottom: 0;
    width: 46%;
    min-height: 335px;
    padding: 34px;
    background: #fffaf0;
    border: 1px solid rgba(13, 32, 100, .06);
    border-radius: 30px;
    box-shadow: var(--shadow-md);
    transition: opacity .28s ease, transform .42s var(--ease);
}

.partner-role-info.is-changing {
    opacity: 0;
    transform: translateY(16px);
}

.partner-role-info__icon {
    width: 59px;
    height: 59px;
    display: grid;
    place-items: center;
    margin-bottom: 19px;
    color: var(--secondary);
    background: #91e400;
    border-radius: 17px;
    font-size: 20px;
    font-weight: 900;
    transition: transform var(--transition);
}

.partner-role-info:hover .partner-role-info__icon {
    transform: rotate(-5deg) scale(1.04);
}

.partner-role-info__category {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.partner-role-info h3 {
    margin-bottom: 10px;
    font-size: clamp(27px, 3vw, 35px);
}

.partner-role-info > p {
    margin-bottom: 17px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.72;
}

.partner-role-info__features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 19px;
}

.partner-role-info__features span {
    padding: 6px 9px;
    color: var(--secondary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.partner-role-info__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    color: var(--secondary);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: color var(--transition), gap var(--transition);
}

.partner-role-info__link:hover {
    color: var(--primary);
    gap: 11px;
}

/* =========================================================
   NEXT ROLE PREVIEW
========================================================= */

.partner-role-next {
    position: absolute;
    right: -11%;
    top: 54px;
    width: 31%;
    height: 415px;
    overflow: hidden;
    background: var(--bg-soft);
    border-radius: 28px;
    box-shadow: var(--shadow-sm);
}

.partner-role-next img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease, transform .6s var(--ease);
}

.partner-role-next:hover img {
    transform: scale(1.035);
}

.partner-role-next::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 42%, rgba(5, 18, 57, .68) );
}

.partner-role-next > div {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 18px;
    color: var(--white);
}

.partner-role-next small, .partner-role-next strong {
    display: block;
}

.partner-role-next small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .65);
    font-size: 9px;
}

.partner-role-next strong {
    color: var(--white);
    font-size: 14px;
}

/* =========================================================
   ROLE PROGRESS
========================================================= */

.partner-role-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    height: 2px;
    overflow: hidden;
    background: var(--border);
}

.partner-role-progress span {
    display: block;
    width: var(--progress);
    --progress: 33.333% height: 100%;
    background: linear-gradient( 90deg, var(--secondary), var(--primary) );
    transition: width .5s var(--ease);
}

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

.partner-benefits__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(45px, 7vw, 90px);
}

.partner-benefits__sticky {
    position: sticky;
    top: 120px;
}

.partner-benefits__sticky h2 {
    margin-bottom: 17px;
    font-size: clamp(35px, 4vw, 53px);
    letter-spacing: -1.7px;
}

.partner-benefits__sticky > p {
    max-width: 520px;
    margin-bottom: 25px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.partner-benefit-list {
    display: grid;
    gap: 15px;
}

.partner-benefit-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 19px;
    padding: 27px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partner-benefit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
    z-index: 0;
}

.partner-benefit-card:hover::before {
    transform: scaleX(1);
}

.partner-benefit-card > * {
    position: relative;
    z-index: 1;
}

.partner-benefit-card:hover {
    transform: translateX(6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.partner-benefit-card h3, .partner-benefit-card p, .partner-benefit-card > span {
    transition: color var(--transition);
}

.partner-benefit-card:hover h3, .partner-benefit-card:hover p {
    color: var(--white);
}

.partner-benefit-card:hover > span {
    color: rgba(255, 255, 255, .35);
}

.partner-benefit-card > span {
    color: rgba(237, 31, 77, .25);
    font-size: 30px;
    font-weight: 900;
}

.partner-benefit-card h3 {
    margin-bottom: 6px;
    font-size: 19px;
}

.partner-benefit-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================================
   PARTNER STORIES
========================================================= */

.partner-stories {
    overflow: hidden;
}

.partner-stories__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.partner-stories__head > div:first-child {
    max-width: 680px;
}

.partner-stories__head h2 {
    margin-bottom: 0;
    font-size: clamp(35px, 4vw, 52px);
    letter-spacing: -1.7px;
}

.partner-slider-controls {
    display: flex;
    gap: 8px;
}

.partner-slider-controls button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--secondary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.partner-slider-controls button:hover {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.partner-story-slider {
    overflow: hidden;
    touch-action: pan-y;
}

.partner-story-track {
    display: flex;
    gap: 18px;
    transition: transform .6s var(--ease);
    will-change: transform;
}

.partner-story {
    min-width: calc( (100% - 36px) / 3 );
    padding: 27px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.partner-story:hover {
    transform: translateY(-5px);
    border-color: rgba(237, 31, 77, .18);
    box-shadow: var(--shadow-sm);
}

.partner-story__quote {
    height: 40px;
    color: var(--primary);
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
}

.partner-story > p {
    min-height: 102px;
    margin-bottom: 21px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.75;
}

.partner-story__user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.partner-story__user img {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--primary-soft);
}

.partner-story__user strong, .partner-story__user span {
    display: block;
}

.partner-story__user strong {
    color: var(--secondary);
    font-size: 13px;
}

.partner-story__user span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

/* =========================================================
   STORY DOTS
========================================================= */

.partner-story-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}

.partner-story-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    background: #ccd2de;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width var(--transition), background var(--transition);
}

.partner-story-dots button.active {
    width: 24px;
    background: var(--primary);
}

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

.partner-register {
    background: linear-gradient( 145deg, var(--secondary-soft), var(--primary-soft) );
}

.partner-register__grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(45px, 7vw, 90px);
}

.partner-register__content h2 {
    margin-bottom: 17px;
    font-size: clamp(35px, 4vw, 53px);
    letter-spacing: -1.7px;
}

.partner-register__content > p {
    max-width: 530px;
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.partner-register__points {
    display: grid;
    gap: 10px;
}

.partner-register__points > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 650;
}

.partner-register__points span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    font-size: 9px;
}

/* =========================================================
   FORM CARD
========================================================= */

.partner-form-card {
    padding: clamp(26px, 4vw, 39px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.partner-form-card__head {
    margin-bottom: 24px;
}

.partner-form-card__head > span {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.partner-form-card__head h3 {
    margin-bottom: 6px;
    font-size: clamp(25px, 3vw, 30px);
}

.partner-form-card__head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.partner-form-consent {
    color: var(--text-muted);
}

.partner-form-consent a {
    color: var(--primary);
}

.partner-form-submit {
    width: max-content;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes partnerHeroMorph {
    0%, 100% {
        border-radius: 46% 54% 44% 56% / 53% 42% 58% 47%;
    }
    50% {
        border-radius: 57% 43% 53% 47% / 42% 57% 43% 58%;
    }
}

@keyframes partnerChartIn {
    from {
        transform: scaleY(0);
        opacity: .2;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

.contact-form__message.success {
    color: #147a49;
    background: #edfff5;
    border-color: #c9f1da;
}

/* =========================================================
   SERVICES PAGE
========================================================= */

/* =========================================================
   PREMIUM SERVICES HERO
========================================================= */

.services-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: 55px;
    background: radial-gradient( circle at 50% 28%, rgba(237, 31, 77, .065), transparent 31% ), radial-gradient( circle at 10% 70%, rgba(13, 32, 100, .045), transparent 24% ), var(--white);
}

/* =========================================================
   CENTER HERO CONTENT
========================================================= */

.services-hero__content {
    position: relative;
    z-index: 3;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.services-hero__eyebrow {
    margin-bottom: 15px;
}

.services-hero__content h1 {
    max-width: 900px;
    margin: 0 auto 22px;
    color: var(--text);
    font-size: clamp(46px, 6vw, 78px);
    line-height: 1.01;
    letter-spacing: -3px;
    font-weight: 800;
}

.services-hero__content h1 span {
    display: block;
    color: var(--primary);
}

.services-hero__content > p {
    max-width: 720px;
    margin: 0 auto 27px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   ACTIONS
========================================================= */

.services-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 27px;
}

/* =========================================================
   STATS
========================================================= */

.services-hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.services-hero__stats > div {
    min-width: 135px;
    padding: 1px 25px;
    border-right: 1px solid var(--border);
}

.services-hero__stats > div:last-child {
    border-right: 0;
}

.services-hero__stats strong, .services-hero__stats span {
    display: block;
}

.services-hero__stats strong {
    color: var(--secondary);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 850;
}

.services-hero__stats span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

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

.services-hero__visual {
    position: relative;
    z-index: 2;
    width: min(1120px, 100%);
    margin: auto;
    padding: 0 25px 40px;
    perspective: 1200px;
}

.services-hero__visual-glow {
    position: absolute;
    z-index: -1;
    width: 72%;
    height: 70%;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient( 135deg, var(--secondary-soft), var(--primary-soft) );
    border-radius: 50%;
    filter: blur(70px);
    opacity: .75;
}

/* =========================================================
   BIG SHOWCASE
========================================================= */

.services-hero__showcase {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6.4;
    min-height: 460px;
    overflow: hidden;
    background: var(--secondary-soft);
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: 0 30px 90px rgba(13, 32, 100, .14);
    transform: perspective(1200px) rotateX(1deg);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.services-hero__showcase-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform .8s var(--ease);
}

.services-hero__showcase-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(13, 32, 100, .015), rgba(13, 32, 100, .04) 55%, rgba(13, 32, 100, .24) 100% );
}

/* =========================================================
   FLOATING GLASS CARDS
========================================================= */

.services-hero-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .93);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(13, 32, 100, .13);
    backdrop-filter: blur(14px);
    transition: transform .22s ease-out;
}

.services-hero-card small, .services-hero-card strong {
    display: block;
}

.services-hero-card small {
    color: var(--text-muted);
    font-size: 7px;
    line-height: 1.4;
}

.services-hero-card strong {
    margin-top: 1px;
    color: var(--secondary);
    font-size: 10px;
}

.services-hero-card--services {
    top: 26px;
    left: 27px;
}

.services-hero-card__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-radius: 10px;
    font-weight: 900;
}

.services-hero-card--status {
    top: 26px;
    right: 27px;
}

.services-hero-card__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(237, 31, 77, .10);
}

/* =========================================================
   BOTTOM METRICS
========================================================= */

.services-hero-metrics {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(640px, calc(100% - 45px));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(13, 32, 100, .13);
    backdrop-filter: blur(14px);
}

.services-hero-metrics > div {
    padding: 6px 14px;
    text-align: center;
    border-right: 1px solid var(--border);
}

.services-hero-metrics > div:last-child {
    border-right: 0;
}

.services-hero-metrics span, .services-hero-metrics strong {
    display: block;
}

.services-hero-metrics span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 850;
}

.services-hero-metrics strong {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 650;
}

/* =========================================================
   PARTNERS STRIP
========================================================= */

.services-partners {
    width: min(1120px, calc(100% - 50px));
    margin: 10px auto 0;
    padding-top: 27px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    border-top: 1px solid var(--border);
}

.services-partners__heading span, .services-partners__heading strong {
    display: block;
}

.services-partners__heading span {
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.services-partners__heading strong {
    color: var(--secondary);
    font-size: 11px;
}

.services-partners__logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: clamp(18px, 3vw, 42px);
}

.services-partners__item {
    min-width: 0;
    height: 118px;
    display: grid;
    place-items: center;
    padding: 5px 8px;
    transition: opacity var(--transition), filter var(--transition), transform var(--transition);
}

.services-partners__item:hover {
    transform: translateY(-2px);
}

.services-partners__item img {
    max-width: 100%;
    max-height: 81px;
    display: block;
    object-fit: contain;
}

/* =========================================================
   EXISTING HERO ENTRY ANIMATION
========================================================= */

.services-hero__visual, .services-hero__eyebrow, .services-hero__title, .services-hero__text, .services-hero__actions, .services-hero__stats {
    opacity: 0;
}

.services-hero__visual {
    transform: translateY(30px) scale(.965);
    transition: opacity .75s var(--ease), transform .9s var(--ease);
}

.services-hero__eyebrow {
    transform: translateY(8px);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
}

.services-hero__title {
    transform: translateY(22px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.services-hero__text {
    transform: translateY(18px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.services-hero__actions, .services-hero__stats {
    transform: translateY(16px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.services-ready .services-hero__eyebrow, .services-ready .services-hero__title, .services-ready .services-hero__text, .services-ready .services-hero__actions, .services-ready .services-hero__stats, .services-ready .services-hero__visual {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.services-ready .services-hero__eyebrow {
    transition-delay: .15s;
}

.services-ready .services-hero__title {
    transition-delay: .27s;
}

.services-ready .services-hero__text {
    transition-delay: .39s;
}

.services-ready .services-hero__actions {
    transition-delay: .51s;
}

.services-ready .services-hero__stats {
    transition-delay: .62s;
}

.services-ready .services-hero__visual {
    transition-delay: .72s;
}

/* =========================================================
   REAL RESPONSIVE SERVICE STACK
========================================================= */

.ups-stack-section {
    --ups-sticky-top: 86px;
    --ups-current-y: 30px;
    --ups-prev-1-y: 15px;
    --ups-prev-2-y: 0px;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 65px 0 40px;
    background: var(--white);
    overflow: visible;
}

/* =========================================================
   HEADING
========================================================= */

.ups-stack-heading {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.ups-stack-heading__content {
    max-width: 720px;
}

.ups-stack-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ups-stack-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(31px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
}

.ups-stack-heading h2 span {
    display: block;
    color: var(--primary);
}

.ups-stack-heading p {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================================
   COUNTER
========================================================= */

.ups-stack-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
    padding: 11px 15px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.ups-stack-counter strong {
    color: var(--primary);
    font-size: 25px;
    line-height: 1;
}

.ups-stack-counter span, .ups-stack-counter small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   LONG SCROLL AREA
========================================================= */

.ups-stack-scroll-area {
    position: relative;
    width: min(1240px, calc(100% - 32px));
    max-width: 100%;
    margin: auto;
}

/* =========================================================
   STICKY VIEWPORT
========================================================= */

.ups-stack-sticky {
    position: sticky;
    top: var(--ups-sticky-top);
    width: 100%;
    height: calc(100vh - var(--ups-sticky-top) - 16px);
    height: calc(100dvh - var(--ups-sticky-top) - 16px);
    max-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* =========================================================
   STAGE
========================================================= */

.ups-stack-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: visible;
}

/* =========================================================
   ACTUAL CARDS
========================================================= */

.ups-stack-card {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: min(540px, calc(100% - 70px));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(13, 32, 100, .11);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d( 0, calc(-50% + 100vh), 0 );
    transform-origin: center top;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* =========================================================
   CURRENT CARD
========================================================= */

.ups-stack-card.is-current {
    z-index: 30;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d( 0, calc(-50% + var(--ups-current-y)), 0 ) scale(1);
}

/* =========================================================
   PREVIOUS CARD 1
========================================================= */

.ups-stack-card.is-prev-1 {
    z-index: 20;
    opacity: 1;
    visibility: visible;
    transform: translate3d( 0, calc(-50% + var(--ups-prev-1-y)), 0 ) scale(.988);
}

/* =========================================================
   PREVIOUS CARD 2
========================================================= */

.ups-stack-card.is-prev-2 {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transform: translate3d( 0, calc(-50% + var(--ups-prev-2-y)), 0 ) scale(.976);
}

/* =========================================================
   OLD CARDS
========================================================= */

.ups-stack-card.is-old {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translate3d( 0, -50%, 0 ) scale(.97);
}

/* =========================================================
   INCOMING CARD
========================================================= */

.ups-stack-card.is-incoming {
    z-index: 40;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* =========================================================
   CONTENT
========================================================= */

.ups-stack-card__content {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: clamp(25px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}

.ups-stack-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 17px;
}

.ups-stack-card__number {
    min-width: 40px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.ups-stack-card__category {
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* =========================================================
   TITLE
========================================================= */

.ups-stack-card__title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin-bottom: 15px;
}

.ups-stack-card__icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: grid;
    place-items: center;
    padding: 4px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
}

.ups-stack-card__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.ups-stack-card__title h3 {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.08;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.ups-stack-card__description {
    max-width: 510px;
    margin: 0 0 19px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.75;
}

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

.ups-stack-card__features {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ups-stack-card__features li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text);
    font-size: 11px;
    font-weight: 650;
}

.ups-stack-card__check {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-radius: 50%;
    font-size: 8px;
    font-weight: 900;
}

/* =========================================================
   VISUAL
========================================================= */

.ups-stack-card__visual {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--secondary-soft);
    isolation: isolate;
}

.ups-stack-card__visual-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform .7s var(--ease);
}

.ups-stack-card.is-current .ups-stack-card__visual-image {
    transform: scale(1.035);
}

.ups-stack-card__visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(13, 32, 100, 0), rgba(13, 32, 100, .05) 50%, rgba(13, 32, 100, .6) 100% );
}

.ups-stack-card__visual-badge {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    color: var(--primary);
    background: rgba(255, 255, 255, .94);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.ups-stack-card__visual-info {
    position: absolute;
    z-index: 3;
    left: 18px;
    bottom: 18px;
    max-width: calc(100% - 36px);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .94);
    border-radius: 11px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.ups-stack-card__status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--primary);
    border-radius: 50%;
}

.ups-stack-card__visual-info-content {
    min-width: 0;
}

.ups-stack-card__visual-info small, .ups-stack-card__visual-info strong {
    display: block;
}

.ups-stack-card__visual-info small {
    color: var(--text-muted);
    font-size: 7px;
}

.ups-stack-card__visual-info strong {
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================================
   PROGRESS
========================================================= */

.ups-stack-progress {
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.ups-stack-progress__track {
    position: relative;
    width: 4px;
    height: 200px;
    overflow: hidden;
    background: var(--border);
    border-radius: 999px;
}

.ups-stack-progress__track span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient( 180deg, var(--secondary), var(--primary) );
    border-radius: inherit;
    transition: height .08s linear;
}

.ups-stack-progress small {
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-transform: uppercase;
}

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

.services-experience__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(45px, 7vw, 90px);
}

/* =========================================================
   EXPERIENCE VISUAL
========================================================= */

.services-experience__visual {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* =========================================================
   CENTER LARGE CIRCLE
========================================================= */

.services-experience__circle {
    position: relative;
    z-index: 5;
    width: 310px;
    height: 310px;
    padding: 9px;
    overflow: hidden;
    background: linear-gradient( 145deg, var(--secondary), var(--primary) );
    border-radius: 50%;
    box-shadow: 0 30px 80px rgba(13, 32, 100, .18);
}

.services-experience__main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

/* =========================================================
   CENTER BADGE
========================================================= */

.services-experience__center-badge {
    position: absolute;
    left: 50%;
    bottom: 23px;
    transform: translateX(-50%);
    min-width: max-content;
    padding: 9px 15px;
    color: var(--secondary);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    box-shadow: 0 8px 25px rgba(13, 32, 100, .12);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 800;
}

/* =========================================================
   ORBIT CIRCLES
========================================================= */

.services-experience__orbit {
    position: absolute;
    z-index: 0;
    width: 410px;
    height: 410px;
    border: 1px dashed rgba(13, 32, 100, .14);
    border-radius: 50%;
    animation: servicesOrbit 24s linear infinite;
}

.services-experience__orbit--two {
    width: 500px;
    height: 500px;
    border-color: rgba(237, 31, 77, .10);
    animation-duration: 32s;
    animation-direction: reverse;
}

/* =========================================================
   SMALL SERVICE BUBBLES
========================================================= */

.services-experience__bubble {
    position: absolute;
    z-index: 8;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding: 5px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(13, 32, 100, .13);
    opacity: 0;
    transform: scale(.25);
    animation: servicesBubblePopup 9.6s var(--ease) infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

.services-experience__bubble img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

/* =========================================================
   DIFFERENT POSITIONS
========================================================= */

.services-experience__bubble--1 {
    --delay: 0s;
    top: 28px;
    left: 22%;
}

.services-experience__bubble--2 {
    --delay: .8s;
    top: 55px;
    right: 18%;
}

.services-experience__bubble--3 {
    --delay: 1.6s;
    top: 145px;
    left: 4%;
}

.services-experience__bubble--4 {
    --delay: 2.4s;
    top: 165px;
    right: 2%;
}

.services-experience__bubble--5 {
    --delay: 3.2s;
    top: 265px;
    left: 9%;
}

.services-experience__bubble--6 {
    --delay: 4s;
    top: 270px;
    right: 8%;
}

.services-experience__bubble--7 {
    --delay: 4.8s;
    bottom: 110px;
    left: 15%;
}

.services-experience__bubble--8 {
    --delay: 5.6s;
    bottom: 105px;
    right: 15%;
}

.services-experience__bubble--9 {
    --delay: 6.4s;
    bottom: 25px;
    left: 29%;
}

.services-experience__bubble--10 {
    --delay: 7.2s;
    bottom: 28px;
    right: 28%;
}

.services-experience__bubble--11 {
    --delay: 8s;
    top: 85px;
    left: 44%;
}

.services-experience__bubble--12 {
    --delay: 8.8s;
    bottom: 45px;
    left: 48%;
}

/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes servicesBubblePopup {
    0%, 8% {
        opacity: 0;
        transform: translateY(15px) scale(.25);
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(1.08);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    45% {
        opacity: 1;
        transform: translateY(-8px) scale(1);
    }
    68% {
        opacity: 1;
        transform: translateY(4px) scale(.96);
    }
    78% {
        opacity: 0;
        transform: translateY(-12px) scale(.55);
    }
    100% {
        opacity: 0;
        transform: translateY(10px) scale(.25);
    }
}

/* =========================================================
   ORBIT ANIMATION
========================================================= */

@keyframes servicesOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.services-experience__bubble--1, .services-experience__bubble--5, .services-experience__bubble--9 {
    width: 66px;
    height: 66px;
}

.services-experience__bubble--2, .services-experience__bubble--6, .services-experience__bubble--10 {
    width: 52px;
    height: 52px;
}

.services-experience__bubble--3, .services-experience__bubble--7, .services-experience__bubble--11 {
    width: 60px;
    height: 60px;
}

.services-experience__bubble--4, .services-experience__bubble--8, .services-experience__bubble--12 {
    width: 48px;
    height: 48px;
}

/* =========================================================
   EXPERIENCE CONTENT
========================================================= */

.services-experience__content h2 {
    margin-bottom: 17px;
    font-size: clamp(38px, 4.4vw, 56px);
    letter-spacing: -1.8px;
}

.services-experience__content > p {
    max-width: 610px;
    margin-bottom: 27px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.services-experience__list {
    display: grid;
    gap: 12px;
    margin-bottom: 27px;
}

.services-experience__list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}

.services-experience__list > div > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 900;
}

.services-experience__list p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.65;
}

.services-experience__list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 14px;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes servicesBlob {
    0%, 100% {
        border-radius: 55% 45% 41% 59% / 51% 38% 62% 49%;
    }
    50% {
        border-radius: 43% 57% 58% 42% / 59% 50% 50% 41%;
    }
}

@keyframes servicesOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes servicesFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

@keyframes serviceVisualIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.58) rotate(-8deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes servicePop {
    0% {
        opacity: 0;
        transform: scale(.82) translateY(10px);
    }
    70% {
        opacity: 1;
        transform: scale(1.04) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes serviceTextUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes serviceLinkIn {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

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

.about-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 86% 16%, rgba(237, 31, 77, .08), transparent 26% ), radial-gradient( circle at 12% 90%, rgba(13, 32, 100, .06), transparent 24% ), var(--white);
}

.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(30px, 4vw, 55px);
}

.about-hero__content, .about-hero__visual {
    min-width: 0;
}

/* =========================================================
   HERO ENTRY SEQUENCE
========================================================= */

.about-hero__visual, .about-hero__eyebrow, .about-hero__title, .about-hero__text, .about-hero__actions, .about-hero__trust {
    opacity: 0;
}

.about-hero__visual {
    transform: translateY(26px) scale(.94);
    transition: opacity .75s var(--ease), transform .9s var(--ease);
}

.about-hero__eyebrow {
    transform: scale(.82);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
}

.about-hero__title {
    transform: translateY(25px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.about-hero__text {
    transform: translateX(-25px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.about-hero__actions, .about-hero__trust {
    transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.about-ready .about-hero__visual {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.about-ready .about-hero__eyebrow {
    opacity: 1;
    transform: scale(1);
    transition-delay: .2s;
}

.about-ready .about-hero__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .32s;
}

.about-ready .about-hero__text {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .47s;
}

.about-ready .about-hero__actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .61s;
}

.about-ready .about-hero__trust {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .73s;
}

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

.about-hero__content h1 {
    max-width: 680px;
    margin-bottom: 20px;
    font-size: clamp(47px, 5.7vw, 75px);
    line-height: 1.02;
    letter-spacing: -2.8px;
}

.about-hero__content h1 span, .about-story__content h2 span, .about-difference__content h2 span {
    color: var(--primary);
}

.about-hero__content > p {
    max-width: 610px;
    margin-bottom: 27px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.about-hero__trust {
    display: flex;
    flex-wrap: wrap;
}

.about-hero__trust > div {
    padding: 2px 23px;
    border-right: 1px solid var(--border);
}

.about-hero__trust > div:first-child {
    padding-left: 0;
}

.about-hero__trust > div:last-child {
    border-right: 0;
}

.about-hero__trust strong, .about-hero__trust span {
    display: block;
}

.about-hero__trust strong {
    color: var(--secondary);
    font-size: 25px;
}

.about-hero__trust span {
    color: var(--text-muted);
    font-size: 10px;
}

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

.about-hero__visual {
    position: relative;
    min-height: 630px;
    width: 100%;
    perspective: 1000px;
}

.about-hero__shape {
    position: absolute;
    width: 540px;
    height: 540px;
    top: 45px;
    right: -10px;
    background: linear-gradient( 145deg, var(--secondary-soft), var(--primary-soft) );
    border-radius: 56% 44% 52% 48% / 42% 58% 42% 58%;
    animation: aboutMorph 9s ease-in-out infinite;
}

.about-hero__shape {
    position: absolute;
    width: 540px;
    height: 540px;
    top: 45px;
    right: -10px;
    background: linear-gradient( 145deg, var(--secondary-soft), var(--primary-soft) );
    border-radius: 56% 44% 52% 48% / 42% 58% 42% 58%;
    animation: aboutMorph 9s ease-in-out infinite;
}

.about-hero__dots {
    position: absolute;
    top: 30px;
    right: 0;
    width: 80px;
    height: 80px;
    opacity: .25;
    background-image: radial-gradient( var(--primary) 1.5px, transparent 1.5px );
    background-size: 10px 10px;
}

.about-hero__image {
    position: absolute;
    z-index: 2;
    top: 42px;
    right: 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 38px 38px 110px 38px;
    box-shadow: var(--shadow-lg);
    transition: transform .22s ease-out;
}

.about-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   FLOAT CARDS
========================================================= */

.about-float {
    position: absolute;
    z-index: 4;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: transform .22s ease-out;
}

.about-float--one {
    left: -15px;
    top: 100px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
}

.about-float--one > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: #20bf76;
    border-radius: 50%;
}

.about-float small, .about-float strong, .about-float span {
    display: block;
}

.about-float small {
    color: var(--text-muted);
    font-size: 8px;
}

.about-float strong {
    color: var(--secondary);
    font-size: 11px;
}

.about-float--two {
    right: 0;
    bottom: 80px;
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
}

.about-float--two strong {
    color: var(--primary);
    font-size: 23px;
}

.about-float--two span {
    color: var(--text-muted);
    font-size: 9px;
}

.about-float--three {
    left: 3%;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
}

.about-float--three > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-radius: 10px;
    font-weight: 900;
}

/* =========================================================
   STATS
========================================================= */

.about-stats {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-stat {
    padding: 25px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

.about-stat:last-child {
    border-right: 0;
}

.about-stat strong, .about-stat span {
    display: block;
}

.about-stat strong {
    margin-bottom: 3px;
    color: var(--secondary);
    font-size: clamp(28px, 3vw, 40px);
}

.about-stat span {
    color: var(--text-muted);
    font-size: 12px;
}

/* =========================================================
   STORY
========================================================= */

.about-story__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(45px, 7vw, 90px);
}

.about-story__visual {
    position: relative;
    min-height: 530px;
}

.about-story__image {
    width: 88%;
    height: 500px;
    overflow: hidden;
    border-radius: 34px;
    box-shadow: var(--shadow-md);
}

.about-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-story__badge {
    position: absolute;
    right: 0;
    bottom: 35px;
    width: min(280px, 62%);
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.about-story__badge span, .about-story__badge strong {
    display: block;
}

.about-story__badge span {
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-story__badge strong {
    color: var(--secondary);
    font-size: 18px;
    line-height: 1.4;
}

.about-story__content h2 {
    margin-bottom: 18px;
    font-size: clamp(36px, 4vw, 53px);
    letter-spacing: -1.7px;
}

.about-story__content > p {
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.about-story__points {
    display: grid;
    gap: 13px;
    margin-top: 26px;
}

.about-story__points > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
}

.about-story__points > div > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 900;
}

.about-story__points p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.65;
}

.about-story__points strong {
    display: block;
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 14px;
}

/* =========================================================
   PURPOSE
========================================================= */

.about-purpose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-purpose__card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.about-purpose__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.about-purpose__card--accent {
    background: linear-gradient( 145deg, var(--secondary-soft), var(--primary-soft) );
}

.about-purpose__number {
    position: absolute;
    top: 18px;
    right: 24px;
    color: rgba(237, 31, 77, .13);
    font-size: 70px;
    font-weight: 900;
}

.about-purpose__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 27px;
    color: var(--white);
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    border-radius: 16px;
    font-size: 18px;
    font-weight: 900;
}

.about-purpose__card > span {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-purpose__card h3 {
    max-width: 500px;
    margin-bottom: 12px;
    font-size: clamp(25px, 3vw, 34px);
}

.about-purpose__card p {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.75;
}

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

.about-difference {
    overflow: hidden;
}

.about-difference__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(45px, 7vw, 90px);
}

.about-difference__content h2 {
    margin-bottom: 15px;
    font-size: clamp(36px, 4vw, 53px);
    letter-spacing: -1.7px;
}

.about-difference__content > p {
    margin-bottom: 25px;
    color: var(--text-muted);
    font-size: 14px;
}

.about-difference__tabs {
    display: grid;
    gap: 7px;
}

.about-difference__tabs button {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.about-difference__tabs button:hover {
    transform: translateX(4px);
}

.about-difference__tabs button.active {
    background: var(--primary-soft);
    border-color: rgba(237, 31, 77, .2);
    box-shadow: var(--shadow-sm);
}

.about-difference__tabs button > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--white);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 900;
}

.about-difference__tabs strong, .about-difference__tabs small {
    display: block;
}

.about-difference__tabs strong {
    margin-bottom: 2px;
    color: var(--secondary);
    font-size: 13px;
}

.about-difference__tabs small {
    color: var(--text-muted);
    font-size: 10px;
}

.about-difference__visual {
    position: relative;
    min-height: 570px;
}

.about-difference__image {
    position: absolute;
    right: 0;
    top: 0;
    width: 78%;
    height: 500px;
    overflow: hidden;
    border-radius: 34px;
    background: var(--bg-soft);
    box-shadow: var(--shadow-md);
}

.about-difference__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease, transform .55s var(--ease);
}

.about-difference__image.is-changing img {
    opacity: 0;
    transform: scale(1.05);
}

.about-difference__card {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: min(350px, 60%);
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: opacity .28s ease, transform .4s var(--ease);
}

.about-difference__card.is-changing {
    opacity: 0;
    transform: translateY(15px);
}

.about-difference__card > span {
    display: block;
    margin-bottom: 18px;
    color: rgba(237, 31, 77, .25);
    font-size: 35px;
    font-weight: 900;
}

.about-difference__card h3 {
    margin-bottom: 8px;
    font-size: 23px;
}

.about-difference__card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   VALUES
========================================================= */

.about-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.about-value {
    position: relative;
    overflow: hidden;
    padding: 27px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
}

.about-value::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, var(--secondary), var(--primary) );
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s var(--ease);
}

.about-value:hover::before {
    transform: scaleY(1);
}

.about-value > * {
    position: relative;
    z-index: 1;
}

.about-value:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.about-value > span {
    display: block;
    margin-bottom: 30px;
    color: rgba(237, 31, 77, .28);
    font-size: 29px;
    font-weight: 900;
    transition: color var(--transition);
}

.about-value h3 {
    margin-bottom: 7px;
    font-size: 18px;
    transition: color var(--transition);
}

.about-value p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.7;
    transition: color var(--transition);
}

.about-value:hover > span {
    color: rgba(255, 255, 255, .35);
}

.about-value:hover h3, .about-value:hover p {
    color: var(--white);
}

/* =========================================================
   JOURNEY TUBE TIMELINE
========================================================= */

.about-journey {
    position: relative;
    overflow: hidden;
}

.about-journey .section-heading {
    max-width: 1060px;
}

.about-journey .section-heading p {
    max-width: 620px;
    margin: 14px auto 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   WRAPPER
========================================================= */

.journey-tube {
    position: relative;
    min-height: 840px;
    margin-top: 55px;
}

/* =========================================================
   SVG FLOW
========================================================= */

.journey-tube__svg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.journey-tube__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.journey-tube__path-base, .journey-tube__path-fill {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 42;
}

/* =========================================================
   THEME GRADIENT
========================================================= */

.journey-gradient-start {
    stop-color: var(--secondary);
}

.journey-gradient-end {
    stop-color: var(--primary);
}

/* =========================================================
   SOFT BACKGROUND TUBE
========================================================= */

.journey-tube__path-base {
    stroke: url(#journeyThemeGradient);
    stroke-opacity: .15;
}

/* =========================================================
   ANIMATED FILLED TUBE
========================================================= */

.journey-tube__path-fill {
    stroke: url(#journeyThemeGradient);
    stroke-opacity: 1;
}

/* =========================================================
   STEP
========================================================= */

.journey-tube__step {
    position: absolute;
    z-index: 2;
    width: min(38%, 430px);
    display: flex;
    align-items: center;
    gap: 18px;
    opacity: 0;
    transform: translateY(24px) scale(.96);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
}

.journey-tube__step.is-active, .journey-tube__step.is-complete {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.journey-tube__step--1 {
    top: 52px;
    right: 4%;
    justify-content: flex-start;
}

.journey-tube__step--2 {
    top: 211px;
    left: 4%;
    justify-content: flex-start;
}

.journey-tube__step--3 {
    top: 407px;
    right: 4%;
    justify-content: flex-start;
}

.journey-tube__step--4 {
    top: 585px;
    left: 4%;
    justify-content: flex-start;
}

/* =========================================================
   CONTENT BOX
========================================================= */

.journey-tube__content {
    min-width: 0;
    padding: 18px 18px 19px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(13, 32, 100, .07);
    backdrop-filter: blur(6px);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.journey-tube__step.is-active .journey-tube__content {
    transform: translateY(-4px);
    border-color: rgba(237, 31, 77, .18);
    box-shadow: 0 16px 40px rgba(237, 31, 77, .10);
}

.journey-tube__content small {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.journey-tube__content h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.journey-tube__content p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.75;
}

/* =========================================================
   NODE
========================================================= */

.journey-tube__node {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
}

.journey-tube__node-ring {
    position: relative;
    width: 96px;
    height: 96px;
    padding: 8px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 14px 35px rgba(13, 32, 100, .11);
    border: 1px solid rgba(13, 32, 100, .06);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.journey-tube__node-ring img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.journey-tube__step.is-active .journey-tube__node-ring {
    transform: scale(1.08);
    box-shadow: 0 18px 38px rgba(237, 31, 77, .16);
}

.journey-tube__step.is-active .journey-tube__node-ring::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(237, 31, 77, .18);
    animation: journeyTubePulse 1.8s ease-out infinite;
}

/* =========================================================
   MOBILE VERTICAL LINE
========================================================= */

.journey-tube__mobile-line {
    display: none;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes journeyTubePulse {
    0% {
        opacity: .8;
        transform: scale(.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutMorph {
    0%, 100% {
        border-radius: 56% 44% 52% 48% / 42% 58% 42% 58%;
    }
    50% {
        border-radius: 43% 57% 45% 55% / 58% 43% 57% 42%;
    }
}



/* =========================================================
   LAPTOP / SMALL DESKTOP - <= 1199px
========================================================= */
@media (max-width: 1199px) {

    /* Merged from: (max-width: 1399px) */
        /* MARQUEE ANIMATION */
        .hero__grid {
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: clamp(28px, 4vw, 55px);
        }
    
        .hero__title {
            font-size: clamp(45px, 5vw, 66px);
        }

    /* Merged from: (max-width: 1199px) */
        /* MARQUEE ANIMATION */
        .hero--collage {
            padding: 15px 0 15px;
        }
    
        .hero__grid {
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            gap: 35px;
        }
    
        .hero__content {
            max-width: 550px;
        }
    
        .hero__title {
            font-size: clamp(42px, 4.8vw, 58px);
            letter-spacing: -1.8px;
        }
    
        .hero__text {
            font-size: 14px;
            line-height: 1.75;
        }
    
    
        /* SCROLL REVEAL */
        :root {
            --section-space: 35px;
        }
    
        .services-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
        .hero-service-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    
    
        /* ANIMATIONS */
        .partner-role-next {
            right: -7%;
        }
    
        .partner-role-info {
            width: 48%;
        }
    
    
        /* KEYFRAMES */
        .services-page-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

    /* Merged from: (max-width: 1100px) */
        /* EMPTY RESULT */
        .services-grid, .services-page-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
    
        /* LOAD ANIMATIONS */
        .auth-container {
            grid-template-columns: minmax(0, .8fr) minmax(390px, 1fr);
        }
    
        .auth-benefits {
            display: none;
        }
    
    
        /* ANIMATION */
        .journey-tube {
            min-height: 690px;
        }
    
        .journey-tube__step {
            width: min(42%, 380px);
        }
    
        .journey-tube__node {
            width: 84px;
            height: 84px;
        }
    
        .journey-tube__node-ring {
            width: 84px;
            height: 84px;
        }
    
        .journey-tube__content h3 {
            font-size: 16px;
        }
    
        .journey-tube__content p {
            font-size: 11px;
        }
}

/* =========================================================
   TABLET - <= 991px
========================================================= */
@media (max-width: 991px) {
.nav-dropdown {
    width: 100%;
}

.nav-dropdown__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-dropdown__menu {
    position: static;
    width: 100%;

    max-height: 0;
    margin-top: 0;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow: hidden;

    transform: none;

    background: var(--bg-soft);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding .25s ease,
        margin .25s ease;
}

.nav-dropdown.open .nav-dropdown__menu {
    max-height: 220px;
    margin-top: 5px;
    padding: 7px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none;
}

.nav-dropdown__menu::before {
    display: none;
}

.nav-dropdown__menu a {
    display: block;
    width: 100%;
    min-height: 38px;

    padding: 10px 12px;

    color: var(--text-muted);
    background: transparent;

    border-radius: 7px;
    font-size: 12px;
}

.nav-dropdown__menu a:hover {
    color: var(--primary);
    background: var(--white);
}
    /* Merged from: (max-width: 991px) */
        /* OPTIONAL ACTIVE LINK */
        .nav-dropdown {
            width: 100%;
        }
    
        .nav-dropdown__trigger {
            width: 100%;
            justify-content: space-between;
        }
    
        .nav-dropdown__arrow {
            margin-top: -3px;
        }
    
        .nav-dropdown__menu {
            position: static;
            width: 100%;
            max-height: 0;
            padding: 0;
            opacity: 1;
            visibility: visible;
            overflow: hidden;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            transform: none;
            transition: max-height .35s var(--ease), padding var(--transition);
        }
    
        .nav-dropdown__menu::before {
            display: none;
        }
/*     
        .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu {
            max-height: 220px;
            padding: 6px 0 6px 12px;
            transform: none;
        }
     */
        .nav-dropdown__menu a {
            min-height: 38px;
            padding: 8px 12px;
            background: transparent;
        }
    
        .nav-dropdown__menu a:hover {
            padding-left: 16px;
            background: var(--primary-soft);
        }
    
    
        /* MARQUEE ANIMATION */
        .hero--collage {
            padding: 16px 0 15px;
        }
    
        .hero__grid {
            grid-template-columns: 1fr;
            gap: 38px;
        }
    
        .hero__content {
            max-width: 720px;
            margin-inline: auto;
            text-align: center;
        }
    
        .hero__eyebrow {
            justify-content: center;
            min-height: 36px;
        }
    
        .hero__title {
            max-width: 720px;
            margin: 18px auto 15px;
            font-size: clamp(42px, 7vw, 60px);
            line-height: 1.03;
            letter-spacing: -1.8px;
        }
    
        .hero__text {
            max-width: 640px;
            margin: 0 auto 22px;
            font-size: 14px;
            line-height: 1.75;
        }
    
        .hero__mini-marquee {
            max-width: 680px;
            margin: 0 auto 24px;
        }
    
        .hero__mini-marquee-track {
            gap: 22px;
        }
    
        .hero__mini-marquee-track span {
            font-size: 11px;
        }
    
        .hero__visual {
            width: 100%;
            max-width: 700px;
            margin-inline: auto;
        }
    
    
        /* HERO ENTRY EFFECTS */
        .hero--collage {
            padding: 10px 0 10px;
        }
    
        .hero__grid {
            grid-template-columns: 1fr;
        }
    
        .hero__content {
            max-width: 100%;
            text-align: center;
            margin-inline: auto;
        }
    
        .hero__text {
            margin-inline: auto;
        }
    
        .hero__actions, .hero__stats {
            justify-content: center;
        }
    
        .hero-collage {
            max-width: 760px;
            margin-inline: auto;
        }
    
    
        /* PULSE ANIMATION */
        .process-timeline {
            gap: 16px;
        }
    
        .process-timeline__card {
            min-height: 310px;
        }
    
        .process-timeline__visual {
            height: 130px;
        }
    
        .process-timeline__content {
            padding: 19px 17px 21px;
        }
    
        .process-timeline__content h3 {
            font-size: 15px;
        }
    
        .process-timeline__content p {
            font-size: 10.5px;
        }
    
    
        /* BOTTOM */
        .footer-cta {
            align-items: flex-start;
            flex-direction: column;
            gap: 18px;
        }
    
        .footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 28px 40px;
        }
    
    
        /* SCROLL REVEAL */
        :root {
            --section-space: 35px;
        }
    
        .container {
            width: min( calc(100% - 32px), var(--container) );
        }
    
        .topbar__links {
            display: none;
        }
    
        .header__inner {
            min-height: 68px;
        }
    
  .main-nav {
    position: absolute;

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

    z-index: 1001;

    width: 100%;

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

    gap: 4px;

    margin: 0;
    padding: 12px;

    background: var(--white);

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

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}
    
       .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
    
        .nav-link {
            width: 100%;
            padding: 12px;
        }
    
        .header__actions {
            margin-left: auto;
        }
    
        .menu-toggle {
            display: grid;
        }
    
        .dashboard-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .dashboard-top {
            flex-direction: column;
            align-items: stretch;
        }
    
        .dashboard-wallets {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
        .hero-promo, .hero-service-panel {
            grid-column: 1 / -1;
        }
    
        .account-card, .exclusive-card {
            grid-column: span 1;
        }
    
        .why-grid, .faq-layout {
            grid-template-columns: 1fr;
            gap: 45px;
        }
    
        .business-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .business-card:last-child {
            grid-column: 1 / -1;
        }
    
        .process-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 35px 18px;
        }
    
        .process-grid::before {
            display: none;
        }
    
        .footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
    
        /* MOBILE LEGAL DROPDOWN */
        .nav-dropdown {
            width: 100%;
        }
    
        .nav-dropdown__trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    
        .nav-dropdown__menu {
            position: static;
            width: 100%;
            max-height: 0;
            padding: 0;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: none;
            background: var(--bg-soft);
            border: 0;
            border-radius: var(--radius-sm);
            box-shadow: none;
            transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
        }
    
        .nav-dropdown.open .nav-dropdown__menu {
            max-height: 220px;
            margin-top: 5px;
            padding: 7px;
            opacity: 1;
            visibility: visible;
        }
    
        .nav-dropdown__menu a {
            display: block;
            width: 100%;
            padding: 10px 12px;
            color: var(--text-muted);
            border-radius: 7px;
            font-size: 12px;
        }
    
        .nav-dropdown__menu a:hover {
            color: var(--primary);
            background: var(--white);
        }
    
        .nav-dropdown__arrow {
            transition: transform .3s ease;
        }
    
        .nav-dropdown.open .nav-dropdown__arrow {
            transform: rotate(180deg);
        }
    
        .legal-layout {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    
        .legal-sidebar {
            position: static;
        }
    
        .legal-nav {
            display: flex;
            overflow-x: auto;
            gap: 6px;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
    
        .legal-nav::-webkit-scrollbar {
            display: none;
        }
    
        .legal-nav a {
            flex-shrink: 0;
            background: var(--white);
            border: 1px solid var(--border);
        }
    
    
        /* HELP */
        .contact-main {
            grid-template-columns: 1fr;
            gap: 45px;
        }
    
        .contact-bottom {
            grid-template-columns: 1fr;
        }
    
        .contact-office {
            border-right: 0;
            border-bottom: 1px solid var(--border);
        }
    
    
        /* MOBILE NAV ACTIONS */
        .mobile-nav-actions {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
    
        .mobile-nav-actions .btn {
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    
        .header__actions {
            display: none;
        }
    
    
        /* MOBILE AUTH LOGO */
     .header__inner {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 68px;
}
    .site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    overflow: visible;
}
        .brand {
            flex-shrink: 0;
        }
    
     .menu-toggle {
    position: relative;
    z-index: 1002;

    display: flex;

    margin-left: auto;

    flex-shrink: 0;
}
    
    
        /* ANIMATIONS */
        .partner-hero__grid, .partner-roles__layout, .partner-benefits__grid, .partner-register__grid {
            grid-template-columns: 1fr;
        }
    
        .partner-hero__content {
            max-width: 760px;
            margin-inline: auto;
            text-align: center;
        }
    
        .partner-hero__content > p {
            margin-inline: auto;
        }
    
        .partner-hero__actions, .partner-service-switch, .partner-hero__people {
            justify-content: center;
        }
    
        .partner-hero__stage {
            width: min(100%, 720px);
            margin-inline: auto;
        }
    
        .partner-service-bar__inner {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
        }
    
        .partner-service-bar__items {
            width: 100%;
            justify-content: flex-start;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: none;
        }
    
        .partner-service-bar__items::-webkit-scrollbar {
            display: none;
        }
    
        .partner-service-bar__items span {
            flex-shrink: 0;
        }
    
        .partner-roles__intro {
            max-width: 680px;
        }
    
        .partner-role-stage {
            width: 100%;
        }
    
        .partner-benefits__sticky {
            position: static;
            max-width: 680px;
        }
    
        .partner-story {
            min-width: calc( (100% - 18px) / 2 );
        }
    
    
        /* EXISTING HERO ENTRY ANIMATION */
        .services-hero__content h1 {
            font-size: clamp(43px, 8vw, 64px);
            letter-spacing: -2px;
        }
    
        .services-hero__showcase {
            min-height: 390px;
            aspect-ratio: auto;
        }
    
        .services-partners {
            grid-template-columns: 1fr;
            gap: 18px;
            text-align: center;
        }
    
        .services-partners__logos {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px 30px;
        }
    
    
        /* PROGRESS */
        .ups-stack-section {
            --ups-sticky-top: 72px;
            --ups-current-y: 25px;
            --ups-prev-1-y: 12px;
            padding: 50px 0 32px;
        }
    
        .ups-stack-heading {
            align-items: flex-start;
            margin-bottom: 25px;
        }
    
        .ups-stack-sticky {
            grid-template-columns: minmax(0, 1fr);
            height: calc(100vh - var(--ups-sticky-top) - 12px);
            height: calc(100dvh - var(--ups-sticky-top) - 12px);
            max-height: 680px;
        }
    
        .ups-stack-progress {
            display: none;
        }
    
        .ups-stack-card {
            height: calc(100% - 55px);
            grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
            border-radius: 22px;
        }
    
        .ups-stack-card__content {
            padding: clamp(22px, 3vw, 30px);
        }
    
        .ups-stack-card__icon {
            width: 54px;
            height: 54px;
            flex-basis: 54px;
        }
    
        .ups-stack-card__title h3 {
            font-size: clamp(23px, 4vw, 32px);
        }
    
    
        /* ORBIT ANIMATION */
        .services-experience__visual {
            min-height: 520px;
            max-width: 650px;
            margin: auto;
        }
    
        .services-experience__circle {
            width: 280px;
            height: 280px;
        }
    
        .services-experience__orbit {
            width: 370px;
            height: 370px;
        }
    
        .services-experience__orbit--two {
            width: 455px;
            height: 455px;
        }
    
    
        /* KEYFRAMES */
        .services-hero__grid, .services-experience__grid {
            grid-template-columns: 1fr;
        }
    
        .services-hero__content {
            max-width: 760px;
            margin-inline: auto;
            text-align: center;
        }
    
        .services-hero__content > p {
            margin-inline: auto;
        }
    
        .services-hero__actions, .services-hero__stats {
            justify-content: center;
        }
    
        .services-hero__visual {
            width: min(100%, 700px);
            margin-inline: auto;
        }
    
        .services-page-toolbar {
            align-items: stretch;
            flex-direction: column;
        }
    
        .services-page-search {
            width: 100%;
        }
    
        .services-page-filters {
            justify-content: flex-start;
        }
    
        .services-page-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .services-experience__content {
            max-width: 700px;
        }
    
        .services-cta {
            align-items: flex-start;
            flex-direction: column;
        }
    
    
        /* ANIMATIONS */
        .about-hero__grid, .about-story__grid, .about-difference__grid {
            grid-template-columns: 1fr;
        }
    
        .about-hero__content {
            max-width: 760px;
            margin-inline: auto;
            text-align: center;
        }
    
        .about-hero__content > p {
            margin-inline: auto;
        }
    
        .about-hero__actions, .about-hero__trust {
            justify-content: center;
        }
    
        .about-hero__visual {
            width: min(100%, 700px);
            margin-inline: auto;
        }
    
        .about-story__visual {
            width: min(100%, 650px);
        }
    
        .about-purpose {
            grid-template-columns: 1fr;
        }
    
        .about-values, .about-timeline {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .about-timeline::before {
            display: none;
        }
    
        .about-difference__content {
            max-width: 680px;
        }

    /* Merged from: (max-width: 850px) */
        /* EMPTY RESULT */
        .service-toolbar, .services-page-toolbar {
            align-items: stretch;
            flex-direction: column;
        }
    
        .service-search, .services-page-search {
            width: 100%;
        }
    
        .service-filters, .services-page-filters {
            justify-content: flex-start;
        }
    
        .services-grid, .services-page-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    /* Merged from: (max-height: 620px) and (min-width: 768px) */
        /* PROGRESS */
        .ups-stack-section {
            --ups-sticky-top: 62px;
        }
    
        .ups-stack-card {
            height: calc(100% - 35px);
        }
    
        .ups-stack-card__content {
            padding: 20px;
        }
    
        .ups-stack-card__meta {
            margin-bottom: 10px;
        }
    
        .ups-stack-card__title {
            margin-bottom: 10px;
        }
    
        .ups-stack-card__description {
            margin-bottom: 10px;
            line-height: 1.5;
        }
    
        .ups-stack-card__features {
            gap: 5px;
        }
        
}

/* =========================================================
   MOBILE - <= 767px
========================================================= */
@media (max-width: 767px) {

    /* Merged from: (max-width: 767px) */
        /* MARQUEE ANIMATION */
        .hero--collage {
            padding: 18px 0 16px;
        }
    
        .hero__grid {
            gap: 30px;
        }
    
        .hero__content {
            max-width: 100%;
        }
    
        .hero__eyebrow {
            min-height: 34px;
            padding: 0 12px;
            font-size: 9px;
            letter-spacing: .3px;
        }
    
        .hero__title {
            max-width: 580px;
            margin: 16px auto 13px;
            font-size: clamp(36px, 8.8vw, 48px);
            line-height: 1.06;
            letter-spacing: -1.4px;
        }
    
        .hero__text {
            max-width: 520px;
            margin-bottom: 20px;
            font-size: 13px;
            line-height: 1.7;
        }
    
        .hero__mini-marquee {
            margin-bottom: 20px;
            padding: 10px 0;
        }
    
        .hero__mini-marquee-track {
            gap: 18px;
            animation-duration: 20s;
        }
    
        .hero__mini-marquee-track span {
            font-size: 10px;
        }
    
        .hero__mini-marquee-track span::before {
            margin-right: 6px;
        }
    
    
        /* PULSE ANIMATION */
        .process-timeline {
            display: flex;
            flex-direction: column;
            gap: 28px;
            margin-top: 38px;
            padding: 0 0 0 56px;
        }
    
        .process-timeline__line {
            top: 31px;
            bottom: 31px;
            left: 23px;
            right: auto;
            width: 4px;
            height: auto;
        }
    
        .process-timeline__line-fill {
            width: 100%;
            height: 0;
            background: linear-gradient( 180deg, var(--secondary), var(--primary) );
            transition: height .65s var(--ease);
        }
    
        .process-timeline__step {
            position: relative;
            width: 100%;
            transform: translateX(20px);
            opacity: .35;
        }
    
        .process-timeline__step.is-active, .process-timeline__step.is-completed {
            opacity: 1;
            transform: translateX(0);
        }
    
        .process-timeline__node {
            position: absolute;
            top: 18px;
            left: -55px;
            width: 48px;
            height: 48px;
            margin: 0;
        }
    
        .process-timeline__node span {
            width: 34px;
            height: 34px;
            font-size: 9px;
        }
    
        .process-timeline__card {
            min-height: 0;
            display: grid;
            grid-template-columns: 115px minmax(0, 1fr);
            align-items: stretch;
            border-radius: var(--radius-md);
        }
    
        .process-timeline__visual {
            height: 100%;
            min-height: 150px;
        }
    
        .process-timeline__content {
            padding: 18px 16px;
        }
    
        .process-timeline__content h3 {
            font-size: 15px;
        }
    
        .process-timeline__content p {
            font-size: 10.5px;
        }
    
    
        /* SCROLL REVEAL */
        .topbar__ticker {
            max-width: calc(100vw - 95px);
        }
    
        .header__actions {
            display: none;
        }
    
        .menu-toggle {
            margin-left: auto;
        }
    
        .dashboard-hero {
            padding-top: 45px;
        }
    
        .hero-heading {
            margin-bottom: 32px;
        }
    
        .hero-heading h1 {
            font-size: clamp(37px, 10vw, 50px);
            letter-spacing: -1.8px;
        }
    
        .hero-heading p {
            font-size: 14px;
        }
    
        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    
        .dashboard-top, .hero-promo, .account-card, .hero-service-panel, .exclusive-card {
            grid-column: 1 / -1;
            min-width: 0;
        }
    
        .dashboard-wallets {
            grid-template-columns: 1fr;
        }
    
        .hero-promo {
            min-height: 500px;
            align-items: flex-start;
            padding: 28px 22px;
        }
    
        .hero-promo__content {
            width: 100%;
        }
    
        .hero-promo__visual {
            width: 250px;
            height: 245px;
            left: 50%;
            right: auto;
            bottom: 0;
            transform: translateX(-50%);
        }
    
        .hero-promo h2 {
            font-size: 34px;
        }
    
        .hero-service-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 17px 5px;
        }
    
        .hero-service > span {
            width: 52px;
            height: 52px;
        }
    
        .hero-service strong {
            font-size: 9px;
        }
    
        .exclusive-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
        .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .stat {
            border: 1px solid var(--border);
        }
    
        .service-toolbar {
            flex-direction: column;
            align-items: stretch;
        }
    
        .service-search {
            width: 100%;
        }
    
        .service-filters {
            justify-content: flex-start;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 5px;
            scrollbar-width: none;
        }
    
        .service-filters::-webkit-scrollbar {
            display: none;
        }
    
        .service-filter {
            flex-shrink: 0;
        }
    
        .services-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
    
        .service-card {
            padding: 19px;
        }
    
        .service-card p {
            min-height: 0;
        }
    
        .why-cards {
            grid-template-columns: 1fr;
        }
    
        .business-grid {
            grid-template-columns: 1fr;
        }
    
        .business-card:last-child {
            grid-column: auto;
        }
    
        .cta-card {
            flex-direction: column;
            align-items: flex-start;
            padding: 32px 25px;
        }
    
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
    
        .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 18px 0;
        }
    
    
        /* MOBILE AUTH LOGO */
        .auth-card__mobile-brand {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
    
        /* LOAD ANIMATIONS */
        .auth-page {
            align-items: flex-start;
            padding: 28px 0;
        }
    
        .auth-container {
            grid-template-columns: 1fr;
            width: min( calc(100% - 28px), 540px );
        }
    
        .auth-showcase {
            display: none;
        }
    
        .auth-card {
            width: 100%;
            padding: 28px 24px;
        }
    
    
        /* PROGRESS */
        .ups-stack-section {
            --ups-sticky-top: 62px;
            --ups-current-y: 20px;
            --ups-prev-1-y: 10px;
            padding: 42px 0 25px;
        }
    
        .ups-stack-heading {
            width: calc(100% - 24px);
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 18px;
        }
    
        .ups-stack-heading h2 {
            font-size: clamp(27px, 8vw, 34px);
            letter-spacing: -.8px;
        }
    
        .ups-stack-heading p {
            margin-top: 10px;
            font-size: 11px;
            line-height: 1.65;
        }
    
        .ups-stack-counter {
            padding: 8px 11px;
        }
    
        .ups-stack-counter strong {
            font-size: 21px;
        }
    
        .ups-stack-scroll-area {
            width: calc(100% - 18px);
        }
    
        .ups-stack-sticky {
            height: calc(100vh - var(--ups-sticky-top) - 8px);
            height: calc(100dvh - var(--ups-sticky-top) - 8px);
            max-height: none;
        }
    
        .ups-stack-card {
            height: calc(100% - 42px);
            grid-template-columns: 1fr;
            grid-template-rows: minmax(0, 1fr) minmax(150px, .72fr);
            border-radius: 18px;
        }
    
        .ups-stack-card__content {
            min-height: 0;
            padding: 18px 16px 14px;
            justify-content: center;
        }
    
        .ups-stack-card__meta {
            gap: 7px;
            margin-bottom: 10px;
        }
    
        .ups-stack-card__number {
            height: 23px;
            min-width: 35px;
            font-size: 8px;
        }
    
        .ups-stack-card__category {
            font-size: 7.5px;
        }
    
        .ups-stack-card__title {
            gap: 10px;
            margin-bottom: 10px;
        }
    
        .ups-stack-card__icon {
            width: 45px;
            height: 45px;
            flex-basis: 45px;
            border-radius: 11px;
        }
    
        .ups-stack-card__title h3 {
            font-size: clamp(20px, 6vw, 25px);
        }
    
        .ups-stack-card__description {
            margin-bottom: 10px;
            font-size: 10px;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: inherit;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    
        .ups-stack-card__features {
            gap: 5px;
        }
    
        .ups-stack-card__features li {
            font-size: 9px;
            line-height: 1.35;
        }
    
        .ups-stack-card__check {
            width: 17px;
            height: 17px;
            flex-basis: 17px;
            font-size: 7px;
        }
    
        .ups-stack-card__visual {
            min-height: 0;
        }
    
        .ups-stack-card__visual-badge {
            top: 10px;
            left: 10px;
            min-height: 24px;
            padding: 0 8px;
            font-size: 6px;
        }
    
        .ups-stack-card__visual-info {
            left: 10px;
            bottom: 10px;
            max-width: calc(100% - 20px);
            padding: 6px 8px;
        }
    
    
        /* ANIMATION */
        .journey-tube {
            min-height: 0;
            margin-top: 35px;
            padding-left: 58px;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }
    
        .journey-tube__svg-wrap {
            display: none;
        }
    
        .journey-tube__mobile-line {
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 20px;
            display: block;
            width: 6px;
            border-radius: 999px;
            background: rgba(13, 32, 100, .08);
            overflow: hidden;
        }
    
        .journey-tube__mobile-line span {
            display: block;
            width: 100%;
            height: 0;
            border-radius: inherit;
            background: linear-gradient( 180deg, var(--secondary) 0%, var(--primary) 100% );
            transition: height .7s var(--ease);
        }
    
        .journey-tube__step {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
        }
    
        .journey-tube__step--1, .journey-tube__step--2, .journey-tube__step--3, .journey-tube__step--4 {
            justify-content: flex-start;
        }
    
        .journey-tube__node {
            order: 1;
            width: 58px;
            height: 58px;
            margin-left: -58px;
        }
    
        .journey-tube__node-ring {
            width: 58px;
            height: 58px;
            padding: 5px;
        }
    
        .journey-tube__content {
            order: 2;
            width: 100%;
            padding: 16px 15px 17px;
        }
    
        .journey-tube__content h3 {
            font-size: 15px;
        }
    
        .journey-tube__content p {
            font-size: 10.5px;
            line-height: 1.7;
        }

    /* Merged from: (max-width: 600px) */
        /* SERVICES VIEW MORE / VIEW LESS */
        .services-page-toggle-wrap {
            margin-top: 24px;
        }
    
        .services-page-toggle {
            min-height: 43px;
            padding: 0 17px;
            font-size: 10px;
        }
    
    
        /* EXISTING HERO ENTRY ANIMATION */
        .services-hero {
            padding-bottom: 40px;
        }
    
        .services-hero__content h1 {
            font-size: clamp(36px, 11vw, 48px);
            letter-spacing: -1.5px;
        }
    
        .services-hero__content > p {
            font-size: 12px;
            line-height: 1.7;
        }
    
        .services-hero__stats {
            margin-bottom: 34px;
        }
    
        .services-hero__stats > div {
            min-width: 33.333%;
            padding: 0 8px;
        }
    
        .services-hero__stats strong {
            font-size: 17px;
        }
    
        .services-hero__stats span {
            font-size: 7px;
        }
    
        .services-hero__visual {
            padding: 0 0 25px;
        }
    
        .services-hero__showcase {
            min-height: 330px;
            border-radius: 21px;
        }
    
        .services-hero-card {
            padding: 8px 10px;
            border-radius: 10px;
        }
    
        .services-hero-card--services {
            top: 12px;
            left: 12px;
        }
    
        .services-hero-card--status {
            top: 12px;
            right: 12px;
        }
    
        .services-hero-card__icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
        }
    
        .services-hero-card strong {
            font-size: 8px;
        }
    
        .services-hero-card small {
            font-size: 6px;
        }
    
        .services-hero-metrics {
            width: calc(100% - 24px);
            bottom: 12px;
            padding: 7px;
        }
    
        .services-hero-metrics > div {
            padding: 5px 3px;
        }
    
        .services-hero-metrics span {
            font-size: 8px;
        }
    
        .services-hero-metrics strong {
            font-size: 6.5px;
        }
    
        .services-partners {
            width: calc(100% - 20px);
            margin-top: 10px;
        }
    
        .services-partners__logos {
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 25px;
        }
    
    
        /* ORBIT ANIMATION */
        .services-experience__visual {
            min-height: 430px;
            overflow: hidden;
        }
    
        .services-experience__circle {
            width: 220px;
            height: 220px;
            padding: 7px;
        }
    
        .services-experience__center-badge {
            bottom: 16px;
            padding: 7px 11px;
            font-size: 8px;
        }
    
        .services-experience__orbit {
            width: 290px;
            height: 290px;
        }
    
        .services-experience__orbit--two {
            width: 365px;
            height: 365px;
        }
    
        .services-experience__bubble {
            width: 45px;
            height: 45px;
            padding: 4px;
        }
    
        .services-experience__bubble--1 {
            top: 20px;
            left: 20%;
        }
    
        .services-experience__bubble--2 {
            top: 40px;
            right: 15%;
        }
    
        .services-experience__bubble--3 {
            top: 125px;
            left: 2%;
        }
    
        .services-experience__bubble--4 {
            top: 135px;
            right: 2%;
        }
    
        .services-experience__bubble--5 {
            top: 230px;
            left: 5%;
        }
    
        .services-experience__bubble--6 {
            top: 235px;
            right: 5%;
        }
    
        .services-experience__bubble--7 {
            bottom: 55px;
            left: 13%;
        }
    
        .services-experience__bubble--8 {
            bottom: 60px;
            right: 13%;
        }
    
        .services-experience__bubble--9 {
            bottom: 15px;
            left: 30%;
        }
    
        .services-experience__bubble--10 {
            bottom: 15px;
            right: 30%;
        }
    
        .services-experience__bubble--11, .services-experience__bubble--12 {
            display: none;
        }

    /* Merged from: (max-width: 575px) */
        /* HEADER */
        .brand__logo {
            height: 40px;
        }
    
    
        /* HERO ENTRY EFFECTS */
        .hero--collage {
            padding: 18px 0 10px;
        }
    
        .hero__title {
            font-size: clamp(36px, 11vw, 52px);
            letter-spacing: -1.5px;
        }
    
        .hero__text {
            font-size: 14px;
        }
    
        .hero__actions {
            width: 100%;
        }
    
        .hero__actions .btn {
            width: 100%;
        }
    
        .hero__stats {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
        .hero__stats > div {
            padding: 4px 8px;
        }
    
        .hero__stats strong {
            font-size: 19px;
        }
    
        .hero-collage {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 140px;
            gap: 10px;
            min-height: auto;
        }
    
        .hero-collage__item--lg {
            grid-column: span 2;
            grid-row: span 2;
        }
    
        .hero-collage__item--wide {
            grid-column: span 2;
        }
    
        .hero-collage__badge {
            padding: 10px 12px;
            border-radius: 14px;
        }
    
        .hero-collage__badge--one {
            left: 8px;
            bottom: 12px;
        }
    
        .hero-collage__badge--two {
            right: 8px;
            top: 8px;
        }
    
    
        /* BRAND */
        .brand--footer .brand__logo {
            height: 42px;
        }
    
    
        /* BOTTOM */
        /* =========================================================
           FOOTER CTA
        ========================================================= */
    
        .footer-cta {
            margin-bottom: 30px;
            padding: 22px 18px;
            align-items: center;
            text-align: center;
        }
    
        .footer-cta h2 {
            font-size: 25px;
        }
    
        .footer-cta p {
            font-size: 13px;
        }
    
        .footer-cta__actions {
            width: 100%;
            justify-content: center;
        }
    
        .footer-cta__actions .btn {
            width: 100%;
        }
    
        /* =========================================================
           FOOTER GRID
        ========================================================= */
    
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 30px 20px;
            padding-bottom: 28px;
        }
    
        /* =========================================================
           1ST COLUMN - ABOUT / LOGO
        ========================================================= */
    
        .footer-grid > div:first-child {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    
        .brand--footer {
            display: inline-flex;
            justify-content: center;
        }
    
        .brand--footer .brand__logo {
            height: 48px;
            width: auto;
            object-fit: contain;
        }
    
        .footer-about p {
            max-width: 360px;
            margin: 14px auto 18px;
            font-size: 13px;
            line-height: 1.7;
            text-align: center;
        }
    
        .footer-social {
            justify-content: center;
        }
    
        /* =========================================================
           2ND + 3RD COLUMN
        ========================================================= */
    
        .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) {
            min-width: 0;
        }
    
        /* =========================================================
           LAST COLUMN - CONTACT
        ========================================================= */
    
        .footer-grid > div:last-child {
            grid-column: 1 / -1;
            width: 100%;
        }
    
        /* =========================================================
           HEADINGS
        ========================================================= */
    
        .footer h4 {
            margin-bottom: 13px;
            font-size: 15px;
        }
    
        .footer-links a {
            font-size: 13px;
        }
    
        /* =========================================================
           TRUST STRIP
        ========================================================= */
    
        .footer-trust {
            grid-template-columns: 1fr;
            padding: 5px 0;
        }
    
        .footer-trust > div {
            justify-content: flex-start;
            padding: 11px 0;
            border-right: 0;
            border-bottom: 1px solid var(--border);
        }
    
        .footer-trust > div:last-child {
            border-bottom: 0;
        }
    
        /* =========================================================
           FOOTER BOTTOM
        ========================================================= */
    
        .footer-bottom {
            min-height: auto;
            align-items: center;
            flex-direction: column;
            gap: 12px;
            padding: 16px 0;
            text-align: center;
        }
    
        .footer-legal {
            justify-content: center;
        }
    
        .footer-grid > div:last-child {
            text-align: center;
        }
    
        .footer-grid > div:last-child h4::after {
            left: 50%;
            transform: translateX(-50%);
        }
    
    
        /* FOOTER BOTTOM */
        .footer-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            column-gap: 24px;
            row-gap: 30px;
            width: 100%;
        }
    
        .footer-grid > .footer-about {
            grid-column: 1 / -1;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    
        .footer-about p {
            max-width: 340px;
            margin: 14px auto 18px;
            text-align: center;
        }
    
        .brand--footer {
            display: flex;
            justify-content: center;
            width: 100%;
        }
    
        .footer-social {
            justify-content: center;
        }
    
        .footer-grid > div:nth-child(2) {
            grid-column: 1;
            min-width: 0;
        }
    
        .footer-grid > div:nth-child(3) {
            grid-column: 2;
            min-width: 0;
        }
    
        .footer-grid > div:nth-child(4) {
            grid-column: 1 / -1;
            width: 100%;
        }
    
        .footer-links {
            gap: 9px;
        }
    
        .footer-links a {
            font-size: 12px;
        }
    
    
        /* MOBILE LEGAL DROPDOWN */
        .legal-hero {
            padding-top: 55px;
            padding-bottom: 55px;
        }
    
        .legal-hero h1 {
            font-size: clamp(37px, 11vw, 48px);
            letter-spacing: -1.5px;
        }
    
        .legal-hero p {
            font-size: 14px;
        }
    
        .legal-section {
            padding: 22px 18px;
        }
    
        .legal-contact {
            grid-template-columns: 1fr;
        }
    
    
        /* MOBILE NAV ACTIONS */
        .contact-shell {
            border-radius: var(--radius-md);
        }
    
        .contact-hero, .contact-main, .contact-office, .contact-help {
            padding: 28px 20px;
        }
    
        .contact-hero__top {
            align-items: flex-start;
            flex-direction: column;
            gap: 5px;
        }
    
        .contact-hero h1 {
            margin: 10px 0 20px;
            font-size: clamp(56px, 18vw, 78px);
            letter-spacing: -5px;
        }
    
        .contact-social {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }
    
        .contact-social > div {
            gap: 8px 15px;
        }
    
        .contact-form__grid, .contact-office__grid {
            grid-template-columns: 1fr;
        }
    
        .contact-submit {
            width: 100%;
        }
    
        .contact-help {
            align-items: flex-start;
            flex-direction: column;
        }
    
        .contact-help__visual {
            width: 95px;
            height: 95px;
            flex-basis: 95px;
            align-self: flex-end;
        }
    
    
        /* LEFT SHOWCASE */
        .auth-brand {
            padding: 7px 10px;
        }
    
        .auth-brand .brand__logo {
            height: 38px;
        }
    
    
        /* LOAD ANIMATIONS */
        .auth-page {
            min-height: 100svh;
            padding: 18px 0;
        }
    
        .auth-container {
            width: min( calc(100% - 20px), 500px );
        }
    
        .auth-card {
            padding: 24px 17px;
            border-radius: var(--radius-md);
        }
    
        .auth-card--register {
            padding: 22px 16px;
        }
    
        .auth-form__grid {
            grid-template-columns: 1fr;
        }
    
        .auth-options {
            align-items: flex-start;
        }
    
        .auth-social-grid {
            grid-template-columns: 1fr;
        }
    
        .auth-social {
            min-height: 42px;
        }
    
    
        /* ANIMATIONS */
        .partner-hero__content h1 {
            font-size: clamp(40px, 11vw, 53px);
            letter-spacing: -1.8px;
        }
    
        .partner-hero__content > p {
            font-size: 14px;
        }
    
        .partner-hero__actions {
            width: 100%;
        }
    
        .partner-hero__actions .btn {
            width: 100%;
        }
    
        .partner-service-switch {
            justify-content: center;
        }
    
        .partner-hero__people {
            flex-direction: column;
        }
    
        .partner-role-counter {
            display: none;
        }
    
        .partner-hero__stage {
            min-height: 480px;
        }
    
        .partner-hero__shape {
            width: 315px;
            height: 315px;
            top: 50px;
            right: -5px;
        }
    
        .partner-hero__photo {
            top: 50px;
            right: 0;
            width: 79%;
            height: 350px;
            border-radius: 24px 24px 76px 24px;
        }
    
        .partner-photo-label {
            left: 12px;
            bottom: 12px;
            padding: 9px 11px;
        }
    
        .partner-live-card {
            left: 0;
            bottom: 5px;
            width: 68%;
            padding: 17px;
            border-radius: var(--radius-md);
        }
    
        .partner-live-card__amount {
            margin-top: 12px;
        }
    
        .partner-live-card__amount strong {
            font-size: 21px;
        }
    
        .partner-live-chart {
            height: 63px;
            margin: 12px 0;
        }
    
        .partner-hero-badge--one {
            left: 0;
            width: 68px;
            height: 68px;
        }
    
        .partner-hero-badge--one strong {
            font-size: 18px;
        }
    
        .partner-hero-badge--two {
            display: none;
        }
    
        .partner-service-bar {
            padding: 13px 0;
        }
    
        .partner-roles__intro h2 {
            font-size: clamp(35px, 10vw, 47px);
            letter-spacing: -1.5px;
        }
    
        .partner-role-stage {
            min-height: 675px;
        }
    
        .partner-role-image {
            position: relative;
            width: 100%;
            height: 400px;
            border-radius: 22px;
        }
    
        .partner-role-info {
            left: 5%;
            bottom: 0;
            width: 90%;
            min-height: auto;
            padding: 24px 20px;
            border-radius: 22px;
        }
    
        .partner-role-info__icon {
            width: 52px;
            height: 52px;
            margin-bottom: 15px;
        }
    
        .partner-role-next {
            display: none;
        }
    
        .partner-role-progress {
            bottom: -18px;
        }
    
        .partner-benefit-card {
            grid-template-columns: 46px minmax(0, 1fr);
            gap: 12px;
            padding: 21px 18px;
        }
    
        .partner-benefit-card > span {
            font-size: 23px;
        }
    
        .partner-stories__head {
            align-items: flex-start;
            flex-direction: column;
            gap: 18px;
        }
    
        .partner-story {
            min-width: 100%;
        }
    
        .partner-story > p {
            min-height: 0;
        }
    
        .partner-form-submit {
            width: 100%;
        }
    
    
        /* KEYFRAMES */
        .services-hero__content h1 {
            font-size: clamp(40px, 11vw, 54px);
            letter-spacing: -1.7px;
        }
    
        .services-hero__content > p {
            font-size: 14px;
        }
    
        .services-hero__actions {
            width: 100%;
        }
    
        .services-hero__actions .btn {
            width: 100%;
        }
    
        .services-hero__stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
        }
    
        .services-hero__stats > div {
            padding: 2px 8px;
        }
    
        .services-hero__stats strong {
            font-size: 20px;
        }
    
        .services-hero__visual {
            min-height: 450px;
        }
    
        .services-hero__blob {
            width: 315px;
            height: 315px;
            right: 0;
        }
    
        .services-hero__orbit {
            width: 280px;
            height: 280px;
            top: 72px;
            right: 18px;
        }
    
        .services-dashboard {
            top: 72px;
            width: 88%;
            padding: 19px;
        }
    
        .services-dashboard__grid {
            gap: 7px;
        }
    
        .services-dashboard__grid > div {
            padding: 11px 5px;
        }
    
        .services-dashboard__grid span {
            width: 36px;
            height: 36px;
        }
    
        .services-float--one {
            top: 30px;
            left: 0;
        }
    
        .services-float--two {
            display: none;
        }
    
        .services-float--three {
            width: 70px;
            height: 70px;
            left: auto;
            right: 0;
            bottom: 28px;
        }
    
        .services-category-strip__inner {
            justify-content: flex-start;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
        }
    
        .services-category-strip__inner::-webkit-scrollbar {
            display: none;
        }
    
        .services-category-strip span, .services-category-strip i {
            flex-shrink: 0;
        }
    
        .services-page-filters {
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: none;
        }
    
        .services-page-filters::-webkit-scrollbar {
            display: none;
        }
    
        .services-page-filters button {
            flex-shrink: 0;
        }
    
        .services-page-grid {
            grid-template-columns: 1fr;
        }
    
        .services-experience__visual {
            min-height: 390px;
        }
    
        .services-experience__circle {
            width: 230px;
            height: 230px;
        }
    
        .services-experience__circle::before {
            width: 290px;
            height: 290px;
        }
    
        .services-experience__circle strong {
            font-size: 48px;
        }
    
        .services-experience__tag {
            padding: 8px 11px;
            font-size: 9px;
        }
    
        .services-cta {
            padding: 28px 20px;
        }
    
        .services-cta__actions {
            width: 100%;
        }
    
        .services-cta__actions .btn {
            width: 100%;
        }
    
    
        /* ANIMATIONS */
        .back-to-top {
            right: 42px;
        }
    
        .about-hero__content h1 {
            font-size: clamp(40px, 11vw, 54px);
            letter-spacing: -1.7px;
        }
    
        .about-hero__actions {
            width: 100%;
        }
    
        .about-hero__actions .btn {
            width: 100%;
        }
    
        .about-hero__trust {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
        }
    
        .about-hero__trust > div {
            padding: 2px 7px;
        }
    
        .about-hero__trust strong {
            font-size: 20px;
        }
    
        .about-hero__visual {
            min-height: 445px;
        }
    
        .about-hero__shape {
            width: 310px;
            height: 310px;
            top: 55px;
            right: 0;
        }
    
        .about-hero__image {
            top: 50px;
            right: 0;
            width: 100%;
            height: 345px;
            border-radius: 24px 24px 75px 24px;
        }
    
        .about-float--one {
            left: 0;
            top: 28px;
        }
    
        .about-float--two {
            width: 70px;
            height: 70px;
            bottom: 20px;
        }
    
        .about-float--three {
            left: 0;
            bottom: 10px;
        }
    
        .about-stats__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .about-stat {
            border-bottom: 1px solid var(--border);
        }
    
        .about-story__visual {
            min-height: 430px;
        }
    
        .about-story__image {
            width: 100%;
            height: 390px;
            border-radius: 22px;
        }
    
        .about-story__badge {
            right: 10px;
            bottom: 0;
            width: 75%;
            padding: 18px;
        }
    
        .about-purpose__card {
            padding: 26px 21px;
        }
    
        .about-difference__visual {
            min-height: 600px;
        }
    
        .about-difference__image {
            position: relative;
            width: 100%;
            height: 390px;
            border-radius: 22px;
        }
    
        .about-difference__card {
            left: 5%;
            bottom: 0;
            width: 90%;
            padding: 22px 19px;
            border-radius: 20px;
        }
    
        .about-values, .about-timeline {
            grid-template-columns: 1fr;
        }
    
        .about-value {
            padding: 23px 20px;
        }
    
        .about-value > span {
            margin-bottom: 20px;
        }
    
        .about-cta {
            align-items: flex-start;
            flex-direction: column;
            padding: 27px 20px;
        }
    
        .about-cta__actions {
            width: 100%;
        }
    
        .about-cta__actions .btn {
            width: 100%;
        }

    /* Merged from: (max-width: 560px) */
        /* EMPTY RESULT */
        .services-grid, .services-page-grid {
            grid-template-columns: 1fr;
        }
    
        .service-card, .services-page-card {
            padding: 22px;
        }
    
        .service-card__icon {
            width: 62px;
            height: 62px;
        }

    /* Merged from: (max-width: 520px) */
        /* MARQUEE ANIMATION */
        .hero--collage {
            padding: 14px 0 10px;
        }
    
        .hero__grid {
            gap: 25px;
        }
    
        .hero__eyebrow {
            min-height: 32px;
            padding: 0 11px;
            font-size: 8.5px;
        }
    
        .hero__title {
            margin: 14px auto 12px;
            font-size: clamp(33px, 10vw, 42px);
            line-height: 1.07;
            letter-spacing: -1.1px;
        }
    
        .hero__text {
            font-size: 12px;
            line-height: 1.68;
        }
    
        .hero__mini-marquee {
            margin-bottom: 18px;
            padding: 9px 0;
        }
    
        .hero__mini-marquee-track {
            gap: 16px;
            animation-duration: 18s;
        }
    
        .hero__mini-marquee-track span {
            font-size: 9px;
        }
    
    
        /* PULSE ANIMATION */
        .process-timeline {
            gap: 23px;
            padding-left: 48px;
        }
    
        .process-timeline__line {
            left: 19px;
        }
    
        .process-timeline__node {
            left: -46px;
            width: 42px;
            height: 42px;
        }
    
        .process-timeline__node span {
            width: 30px;
            height: 30px;
            font-size: 8px;
        }
    
        .process-timeline__card {
            display: block;
        }
    
        .process-timeline__visual {
            height: 145px;
            min-height: 0;
        }
    
        .process-timeline__content {
            padding: 17px 16px 19px;
        }
    
    
        /* ANIMATION */
        .journey-tube {
            padding-left: 48px;
            gap: 18px;
        }
    
        .journey-tube__mobile-line {
            left: 17px;
            width: 5px;
        }
    
        .journey-tube__node {
            width: 48px;
            height: 48px;
            margin-left: -48px;
        }
    
        .journey-tube__node-ring {
            width: 48px;
            height: 48px;
        }
    
        .journey-tube__content {
            padding: 14px 14px 15px;
        }

    /* Merged from: (max-width: 480px) */
        /* SCROLL REVEAL */
        :root {
            --section-space: 15px;
        }
    
        .container {
            width: min( calc(100% - 24px), var(--container) );
        }
    
        .brand__mark {
            width: 38px;
            height: 38px;
        }
    
        .brand__text {
            font-size: 18px;
        }
    
        .hero-service-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    
        .exclusive-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .services-grid {
            grid-template-columns: 1fr;
        }
    
        .service-card {
            padding: 22px;
        }
    
        .process-grid {
            grid-template-columns: 1fr;
        }
    
        .stats-grid {
            gap: 8px;
        }
    
        .stat {
            padding: 16px 8px;
            border-radius: var(--radius-sm);
        }
    
        .cta-card__actions {
            width: 100%;
        }
    
        .cta-card__actions .btn {
            width: 100%;
        }

    /* Merged from: (max-width: 420px) */
        /* PROGRESS */
        .ups-stack-section {
            --ups-sticky-top: 58px;
        }
    
        .ups-stack-heading h2 {
            font-size: 27px;
        }
    
        .ups-stack-card {
            height: calc(100% - 36px);
            grid-template-rows: minmax(0, 1.12fr) minmax(135px, .62fr);
        }
    
        .ups-stack-card__content {
            padding: 15px 13px 11px;
        }
    
        .ups-stack-card__icon {
            width: 40px;
            height: 40px;
            flex-basis: 40px;
        }
    
        .ups-stack-card__title h3 {
            font-size: 19px;
        }

    /* Merged from: (max-width: 380px) */
        /* MARQUEE ANIMATION */
        .hero--collage {
            padding: 10px 0 17px;
        }
    
        .hero__title {
            font-size: clamp(30px, 10.5vw, 36px);
            letter-spacing: -.8px;
        }
    
        .hero__text {
            font-size: 11.5px;
        }
    
        .hero__eyebrow {
            font-size: 8px;
        }
    
        .hero__mini-marquee-track span {
            font-size: 8.5px;
        }
    
    
        /* ANIMATIONS */
        .partner-service-switch button {
            min-height: 34px;
            padding: 0 11px;
        }
    
        .partner-hero__photo {
            width: 82%;
        }
    
        .partner-live-card {
            width: 72%;
        }
    
        .partner-role-stage {
            min-height: 700px;
        }

    /* Merged from: (max-width: 360px) */
        /* SCROLL REVEAL */
        .hero-service-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
        .stats-grid {
            grid-template-columns: 1fr;
        }
}

/* =========================================================
   ACCESSIBILITY - REDUCED MOTION
   Not a screen-size breakpoint
========================================================= */
@media (prefers-reduced-motion: reduce) {
        /* MARQUEE ANIMATION */
        .hero__mini-marquee-track {
            animation: none;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
        }
    
    
        /* PULSE ANIMATION */
        .process-timeline__step, .process-timeline__line-fill, .process-timeline__node, .process-timeline__visual img {
            transition: none;
        }
    
        .process-timeline__step.is-active .process-timeline__node::before {
            animation: none;
        }
    
    
        /* SCROLL REVEAL */
        *, *::before, *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    
        .reveal {
            opacity: 1;
            transform: none;
        }
    
    
        /* LOAD ANIMATIONS */
        .auth-enter {
            opacity: 1;
            transform: none;
            animation: none;
        }
    
        .auth-visual__orbit, .auth-visual__rocket, .auth-visual__coin, .auth-visual__chart i {
            animation: none;
        }
    
    
        /* ANIMATIONS */
        .partner-hero__shape, .partner-live-chart i {
            animation: none;
        }
    
        .partner-hero__photo, .partner-live-card, .partner-hero-badge {
            transform: none !important;
        }
    
    
        /* KEYFRAMES */
        .services-hero__blob, .services-hero__orbit, .services-experience__circle::before, .services-experience__tag {
            animation: none;
        }
    
        .services-page-card, .services-page-card *, .services-hero__visual, .services-hero__eyebrow, .services-hero__title, .services-hero__text, .services-hero__actions, .services-hero__stats {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
            transition: none !important;
        }
    
    
        /* ANIMATION */
        .journey-tube__step, .journey-tube__content, .journey-tube__node-ring, .journey-tube__mobile-line span {
            transition: none;
        }
    
        .journey-tube__step.is-active .journey-tube__node-ring::before {
            animation: none;
        }
    
    
        /* ANIMATIONS */
        .about-hero__shape {
            animation: none;
        }
    
        .about-hero__visual, .about-hero__eyebrow, .about-hero__title, .about-hero__text, .about-hero__actions, .about-hero__trust {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    
        .about-hero__image, .about-float {
            transform: none !important;
        }
}
/* =========================================================
   REGISTER BUTTON - STRONG PULSE
========================================================= */

.register-pulse-btn {
    position: relative;

    transform-origin: center;

    animation:
        registerStrongPulse
        1.8s
        ease-in-out
        infinite !important;

    will-change:
        transform,
        box-shadow;
}


/* MAIN MOVEMENT */

@keyframes registerStrongPulse {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1) !important;

        box-shadow:
            0 8px 20px
            rgba(237, 31, 77, .22);
    }

    50% {
        transform:
            translateY(-5px)
            scale(1.20) !important;

        box-shadow:
            0 18px 38px
            rgba(237, 31, 77, .45);
    }
}


/* ICON */

.register-pulse-btn i {
    display: inline-block;

    animation:
        registerUserIcon
        1.8s
        ease-in-out
        infinite;
}


@keyframes registerUserIcon {

    0%,
    100% {
        transform:
            scale(1)
            rotate(0deg);
    }

    50% {
        transform:
            scale(1.25)
            rotate(-8deg);
    }
}


/* ARROW MOVEMENT */

.register-pulse-btn > span {
    display: inline-block;

    animation:
        registerArrowMove
        1.2s
        ease-in-out
        infinite;
}


@keyframes registerArrowMove {

    0%,
    100% {
        transform:
            translateX(0);
    }

    50% {
        transform:
            translateX(5px);
    }
}


/* HOVER */

.register-pulse-btn:hover {
    color: #fff;

    animation-play-state:
        paused !important;

    transform:
        translateY(-4px)
        scale(1.08) !important;
}
/* =========================================================
   SERVICES DROPDOWN
========================================================= */

.services-dropdown__menu {
    width: 340px;
    padding: 10px;
}


/* REMOVE OLD DOTS */

.services-dropdown__menu a::before {
    content: none !important;
    display: none !important;
}


/* ITEM */

.services-dropdown__item {
    display: flex !important;
    align-items: center;

    gap: 12px;

    padding: 11px 12px !important;

    border-radius: 12px;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


/* HOVER */

.services-dropdown__item:hover {
    background:
        linear-gradient(
            90deg,
            var(--secondary-soft),
            var(--primary-soft)
        );

    transform: translateX(4px);

    box-shadow:
        0 7px 20px
        rgba(13, 32, 100, .07);
}


/* ICON BOX */

.services-dropdown__icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 38px;

    /* color: var(--white); */

    background:
      white;
border: 2px solid var(--primary);
    border-radius: 11px;

    font-size: 20px;

    box-shadow:
        0 6px 15px
        rgba(237, 31, 77, .16);

    transition:
        transform .35s var(--ease);
}


/* ICON ANIMATION ON HOVER */

.services-dropdown__item:hover
.services-dropdown__icon {
    transform:
        rotate(-5deg)
        scale(1.10);
}


/* TEXT */

.services-dropdown__content {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


/* TITLE */

.services-dropdown__content strong {
    color: var(--text);

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

    line-height: 1.2;
}


/* DESCRIPTION */

.services-dropdown__content small {
    color: var(--text-muted);

    font-size: 9.5px;
    font-weight: 500;

    line-height: 1.35;
}
/* =========================================================
   SERVICES DROPDOWN - RESPONSIVE FIX
========================================================= */

/* DESKTOP */
.nav-dropdown--services .services-dropdown__menu {
    width: 350px;
    max-width: calc(100vw - 30px);
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 991px) {

    .nav-dropdown--services {
        width: 100%;
    }


    /* SERVICES BUTTON */
    .nav-dropdown--services .nav-dropdown__trigger {
        width: 100%;

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

        gap: 8px;
    }


    /* ARROW RIGHT SIDE */
    .nav-dropdown--services .nav-dropdown__arrow {
        margin-left: auto;
    }


    /* DROPDOWN */
    .nav-dropdown--services .services-dropdown__menu {
        position: static !important;

        width: 100% !important;
        max-width: 100%;

        max-height: 0;

        margin: 0;

        padding: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        background: transparent;

        border: none;
        border-radius: 0;

        box-shadow: none;

        transform: none !important;

        transition:
            max-height .45s var(--ease),
            opacity .3s ease,
            padding .35s var(--ease),
            margin .35s var(--ease);
    }


    /* WHEN OPEN */
    .nav-dropdown--services.open .services-dropdown__menu {
        max-height: 520px;

        margin-top: 8px;

        padding: 8px;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        background:
            linear-gradient(
                135deg,
                rgba(13, 32, 100, .035),
                rgba(237, 31, 77, .045)
            );

        border:
            1px solid
            rgba(13, 32, 100, .07);

        border-radius: 14px;
    }


    /* REMOVE DROPDOWN POINTER */
    .nav-dropdown--services
    .services-dropdown__menu::before {
        display: none !important;
    }


    /* CATEGORY ITEM */
    .nav-dropdown--services
    .services-dropdown__menu
    .services-dropdown__item {

        width: 100%;

        display: flex !important;
        align-items: center !important;

        gap: 11px;

        min-height: 58px;

        padding: 9px 10px !important;

        margin: 0 0 5px;

        background: var(--white);

        border:
            1px solid
            rgba(13, 32, 100, .06);

        border-radius: 11px;

        box-shadow:
            0 4px 12px
            rgba(13, 32, 100, .04);

        box-sizing: border-box;

        transform: none;
    }


    .nav-dropdown--services
    .services-dropdown__item:last-child {
        margin-bottom: 0;
    }


    /* REMOVE OLD DOT */
    .nav-dropdown--services
    .services-dropdown__item::before {

        content: none !important;

        display: none !important;
    }


    /* ICON */
    .nav-dropdown--services
    .services-dropdown__icon {

        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        display: grid;
        place-items: center;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                var(--secondary),
                var(--primary)
            );

        border-radius: 10px;

        font-size: 13px;

        box-shadow:
            0 5px 14px
            rgba(237, 31, 77, .14);
    }


    /* CONTENT */
    .nav-dropdown--services
    .services-dropdown__content {

        min-width: 0;

        display: flex;
        flex-direction: column;

        gap: 3px;

        text-align: left;
    }


    .nav-dropdown--services
    .services-dropdown__content strong {

        color: var(--text);

        font-size: 11.5px;
        font-weight: 750;

        line-height: 1.3;
    }


    .nav-dropdown--services
    .services-dropdown__content small {

        color: var(--text-muted);

        font-size: 9.5px;

        line-height: 1.35;

        white-space: normal;
    }


    /* MOBILE TAP/HOVER */
    .nav-dropdown--services
    .services-dropdown__item:hover {

        padding: 9px 10px !important;

        transform: none;

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

}
@media (max-width: 575px) {

    .nav-dropdown--services
    .nav-dropdown__trigger {

        padding: 10px 12px;
    }


    .nav-dropdown--services.open
    .services-dropdown__menu {

        max-height: 480px;

        padding: 6px;
    }


    .nav-dropdown--services
    .services-dropdown__menu
    .services-dropdown__item {

        min-height: 54px;

        gap: 9px;

        padding: 8px !important;
    }


    .nav-dropdown--services
    .services-dropdown__icon {

        width: 35px;
        height: 35px;

        flex-basis: 35px;

        border-radius: 9px;

        font-size: 12px;
    }


    .nav-dropdown--services
    .services-dropdown__content strong {

        font-size: 10.5px;
    }


    .nav-dropdown--services
    .services-dropdown__content small {

        font-size: 8.5px;
    }

}
/* =========================================================
   FINAL MOBILE NAVIGATION FIX
   Services + Legal
========================================================= */

@media (max-width: 991px) {

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

    body.menu-open {
        overflow: hidden !important;
    }


    /* =========================================
       MOBILE MENU ITSELF WILL SCROLL
    ========================================= */

    .main-nav {
        position: absolute;

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

        width: 100%;

        max-height:
            calc(100dvh - 82px);

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;

        padding: 12px;

        scrollbar-width: thin;
        scrollbar-color:
            rgba(13, 32, 100, .20)
            transparent;
    }


    .main-nav::-webkit-scrollbar {
        width: 4px;
    }

    .main-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .main-nav::-webkit-scrollbar-thumb {
        background:
            rgba(13, 32, 100, .20);

        border-radius: 999px;
    }


    /* =========================================
       ALL DROPDOWN WRAPPERS
    ========================================= */

    .main-nav .nav-dropdown {
        width: 100%;
        flex-shrink: 0;
    }


    /* =========================================
       TRIGGER
    ========================================= */

    .main-nav
    .nav-dropdown__trigger {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 8px;
    }


    .main-nav
    .nav-dropdown__trigger
    .nav-dropdown__arrow {

        margin-left: auto;

        flex-shrink: 0;
    }


    /* =========================================
       CLOSED DROPDOWN
    ========================================= */

    .main-nav
    .nav-dropdown__menu {

        position: static !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        max-height: 0 !important;

        margin: 0;

        padding: 0 !important;

        overflow: hidden;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform: none !important;

        background: transparent;

        border: 0;

        box-shadow: none;

        transition:
            max-height .42s var(--ease),
            opacity .25s ease,
            margin .3s var(--ease),
            padding .3s var(--ease);
    }


    /* =========================================
       OPEN DROPDOWN
    ========================================= */

    .main-nav
    .nav-dropdown.open
    > .nav-dropdown__menu {

        /*
         220px REMOVE.
         Long Services menu allowed.
        */

        max-height: 700px !important;

        margin-top: 7px;

        padding: 7px !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        background:
            linear-gradient(
                135deg,
                rgba(13, 32, 100, .035),
                rgba(237, 31, 77, .045)
            );

        border:
            1px solid
            rgba(13, 32, 100, .07);

        border-radius: 14px;
    }


    /* remove desktop triangle */
    .main-nav
    .nav-dropdown__menu::before {

        display: none !important;
    }


    /* =========================================
       ALL DROPDOWN ITEMS
    ========================================= */

    .main-nav
    .nav-dropdown__menu
    > a {

        width: 100%;

        display: flex !important;

        align-items: center !important;

        gap: 10px;

        min-height: 50px;

        margin-bottom: 5px;

        padding: 8px 10px !important;

        color: var(--text);

        background: var(--white);

        border:
            1px solid
            rgba(13, 32, 100, .06);

        border-radius: 11px;

        box-shadow:
            0 4px 12px
            rgba(13, 32, 100, .04);

        box-sizing: border-box;

        transform: none !important;
    }


    .main-nav
    .nav-dropdown__menu
    > a:last-child {

        margin-bottom: 0;
    }


    /* OLD DOT REMOVE */
    .main-nav
    .nav-dropdown__menu
    > a::before {

        content: none !important;

        display: none !important;
    }


    /* =========================================
       LEGAL ICONS
    ========================================= */

    .main-nav
    .nav-dropdown__menu
    > a
    > i {

        width: 36px;
        height: 36px;

        display: grid;
        place-items: center;

        flex: 0 0 36px;

        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                var(--secondary),
                var(--primary)
            );

        border-radius: 10px;

        font-size: 13px;

        box-shadow:
            0 5px 14px
            rgba(237, 31, 77, .15);
    }


    /* LEGAL TEXT */
    .main-nav
    .nav-dropdown__menu
    > a
    > span:not(.services-dropdown__icon) {

        min-width: 0;

        color: var(--text);

        font-size: 11px;

        font-weight: 750;

        text-align: left;
    }


    /* =========================================
       SERVICES ITEMS
    ========================================= */

    .main-nav
    .services-dropdown__item {

        min-height: 58px !important;
    }


    .main-nav
    .services-dropdown__icon {

        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        flex: 0 0 38px;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                var(--secondary),
                var(--primary)
            );

        border-radius: 10px;

        box-shadow:
            0 5px 14px
            rgba(237, 31, 77, .15);
    }


    .main-nav
    .services-dropdown__icon
    i {

        width: auto !important;
        height: auto !important;

        display: block;

        color: #fff !important;

        background: none !important;

        box-shadow: none !important;

        font-size: 12px;
    }


    .main-nav
    .services-dropdown__content {

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 2px;

        text-align: left;
    }


    .main-nav
    .services-dropdown__content
    strong {

        color: var(--text);

        font-size: 11px;

        line-height: 1.3;
    }


    .main-nav
    .services-dropdown__content
    small {

        color: var(--text-muted);

        font-size: 8.5px;

        line-height: 1.4;

        white-space: normal;
    }


    /* =========================================
       ARROW
    ========================================= */

    .main-nav
    .nav-dropdown.open
    > .nav-dropdown__trigger
    .nav-dropdown__arrow {

        transform:
            rotate(225deg);
    }


    /* =========================================
       MOBILE ACTION BUTTONS ALWAYS ACCESSIBLE
    ========================================= */

    .mobile-nav-actions {
        flex-shrink: 0;

        padding-bottom: 8px;
    }

}
/* =========================================================
   CATEGORY DETAIL PAGES
   COMMON CSS
========================================================= */

.category-detail-page {
    position: relative;

    overflow: hidden;

    background:
        var(--white);
}


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

.category-detail-hero {
    position: relative;

    padding:
        clamp(70px, 9vw, 120px)
        0;

    text-align: center;



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

    overflow: hidden;
}
.banking-hero{  background:
        linear-gradient(
            rgba(7, 23, 79, .62),
            rgba(13, 32, 100, .55)
        ),
        url("images/banking.jfif");  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}

    .utility-hero{  background:
        linear-gradient(
            rgba(7, 23, 79, .62),
            rgba(13, 32, 100, .55)
        ),
        url("images/utilities.jfif");  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}

        .financial-hero{  background:
        linear-gradient(
            rgba(7, 23, 79, .62),
            rgba(13, 32, 100, .55)
        ),
        url("images/financial.jfif");  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}

      .government-hero{  background:
        linear-gradient(
            rgba(7, 23, 79, .62),
            rgba(13, 32, 100, .55)
        ),
        url("images/govern.jfif");  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}

      .lifestyle-hero{  background:
        linear-gradient(
            rgba(7, 23, 79, .62),
            rgba(13, 32, 100, .55)
        ),
        url("images/lifestyle.jfif");  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}

/* GRID BACKGROUND */



/* EYEBROW */

.category-detail-hero__eyebrow {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding:
        0 15px;

    margin-bottom:
        22px;


    color: #ffffff;

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

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

    animation:
        categoryEyebrowEntry
        .7s
        var(--ease)
        both;
}


.category-detail-hero__eyebrow i {
    animation:
        categoryHeroIconPulse
        2s
        ease-in-out
        infinite;
}


/* TITLE */

.category-detail-hero h1 {
    position: relative;

    z-index: 2;

    max-width:
        1050px;

    margin:
        auto;

    color:
        #ffffff;

    font-size:
        clamp(50px, 7vw, 92px);

    font-weight:
        850;

    line-height:
        .98;

    letter-spacing:
        clamp(-4px, -.25vw, -2px);

    animation:
        categoryTitleEntry
        .9s
        var(--ease)
        .1s
        both;
}


/* HIGHLIGHT */

.category-detail-hero h1 span {
    position: relative;

    display: inline-block;

    color:
        var(--primary);

    animation:
        categoryTitlePulse
        3s
        ease-in-out
        infinite;
}


/* UNDERLINE */

.category-detail-hero h1 span::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom:
        -12px;

    width:
        75%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--secondary),
            var(--primary),
            transparent
        );

    border-radius:
        999px;

    transform:
        translateX(-50%);

    animation:
        categoryUnderlineGlow
        2.4s
        ease-in-out
        infinite;
}


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

.category-detail-services {
    padding:
        clamp(65px, 8vw, 110px)
        0;
}


/* =========================================================
   SERVICE ROW
========================================================= */

.category-detail-service {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items:
        center;

    gap:
        clamp(50px, 8vw, 110px);

    min-height:
        440px;

    margin-bottom:
        clamp(80px, 10vw, 140px);
}


.category-detail-service:last-child {
    margin-bottom:
        0;
}


/* REVERSE */

.category-detail-service--reverse
.category-detail-service__image {
    order:
        2;
}


.category-detail-service--reverse
.category-detail-service__content {
    order:
        1;
}


/* =========================================================
   IMAGE
========================================================= */

.category-detail-service__image {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height:
        320px;

    padding:
        45px;

    background:
        linear-gradient(
            145deg,
            #f9faff,
            #edf1fa
        );

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

    border-radius:
        32px;

    box-shadow:
        0 20px 55px
        rgba(13, 32, 100, .08);

    overflow:
        hidden;

    transition:
        transform .55s var(--ease),
        box-shadow .55s var(--ease);
}


/* BACKGROUND CIRCLE */

.category-detail-service__image::before {
    content: "";

    position: absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            rgba(13, 32, 100, .08),
            rgba(237, 31, 77, .10)
        );

    animation:
        serviceImageCircle
        4s
        ease-in-out
        infinite;
}


/* SECOND CIRCLE */

.category-detail-service__image::after {
    content: "";

    position: absolute;

    width:
        340px;

    height:
        340px;

    border:
        1px solid
        rgba(237, 31, 77, .12);

    border-radius:
        50%;

    animation:
        serviceImageRing
        12s
        linear
        infinite;
}


/* IMAGE */

.category-detail-service__image img {
    position: relative;

    z-index: 2;

    width:
        min(100%, 270px);

    max-height:
        380px;

    object-fit:
        cover;

    filter:
        drop-shadow(
            0 18px 25px
            rgba(13, 32, 100, .12)
        );

    animation:
        serviceImageFloat
        3.5s
        ease-in-out
        infinite;
}


/* HOVER */

.category-detail-service__image:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 28px 70px
        rgba(13, 32, 100, .14);
}


/* NUMBER */

.category-detail-service__number {
    position: absolute;

    z-index:
        3;

    top:
        20px;

    right:
        24px;

    color:
        rgba(237, 31, 77, .18);

    font-size:
        50px;

    font-weight:
        900;

    line-height:
        1;
}


/* =========================================================
   CONTENT
========================================================= */

.category-detail-service__content {
    max-width:
        620px;
}


/* LABEL */

.category-detail-service__label {
    display:
        inline-block;

    margin-bottom:
        13px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* TITLE */

.category-detail-service__content h2 {
    margin:
        0 0 18px;

    color:
        var(--secondary);

    font-size:
        clamp(38px, 4.5vw, 60px);

    line-height:
        1.05;

    letter-spacing:
        -2px;
}


/* DESCRIPTION */

.category-detail-service__content > p {
    max-width:
        580px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.9;
}


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

.category-detail-service__features {
    display:
        grid;

    gap:
        10px;

    margin-top:
        25px;
}


.category-detail-service__features span {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        700;
}


/* CHECK ICON */

.category-detail-service__features i {
    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 28px;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--primary)
        );

    border-radius:
        50%;

    font-size:
        9px;

    animation:
        serviceCheckPulse
        2s
        ease-in-out
        infinite;
}


/* STAGGER */

.category-detail-service__features
span:nth-child(2) i {
    animation-delay:
        .3s;
}


.category-detail-service__features
span:nth-child(3) i {
    animation-delay:
        .6s;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes categoryEyebrowEntry {

    from {
        opacity:
            0;

        transform:
            translateY(-15px)
            scale(.90);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes categoryTitleEntry {

    from {
        opacity:
            0;

        transform:
            translateY(40px)
            scale(.92);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes categoryHeroIconPulse {

    0%,
    100% {
        transform:
            scale(1)
            rotate(0deg);
    }

    50% {
        transform:
            scale(1.20)
            rotate(-7deg);
    }

}


@keyframes categoryTitlePulse {

    0%,
    100% {
        text-shadow:
            0 0 0
            rgba(237, 31, 77, 0);
    }

    50% {
        text-shadow:
            0 12px 30px
            rgba(237, 31, 77, .20);
    }

}


@keyframes categoryUnderlineGlow {

    0%,
    100% {
        opacity:
            .45;

        transform:
            translateX(-50%)
            scaleX(.75);
    }

    50% {
        opacity:
            1;

        transform:
            translateX(-50%)
            scaleX(1);
    }

}


@keyframes serviceImageFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(2deg);
    }

}


@keyframes serviceImageCircle {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.12);
    }

}


@keyframes serviceImageRing {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes serviceCheckPulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(237, 31, 77, .16);
    }

    50% {
        transform:
            scale(1.14);

        box-shadow:
            0 0 0 7px
            rgba(237, 31, 77, 0);
    }

}


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

@media (max-width: 991px) {

    .category-detail-service {
        grid-template-columns:
            1fr;

        gap:
            38px;

        margin-bottom:
            90px;
    }


    .category-detail-service--reverse
    .category-detail-service__image,

    .category-detail-service--reverse
    .category-detail-service__content {
        order:
            initial;
    }


    .category-detail-service__image {
        width:
            min(100%, 680px);

        min-height:
            390px;

        margin-inline:
            auto;
    }


    .category-detail-service__content {
        width:
            min(100%, 680px);

        margin-inline:
            auto;

        text-align:
            center;
    }


    .category-detail-service__content > p {
        margin-inline:
            auto;
    }


    .category-detail-service__features {
        width:
            fit-content;

        max-width:
            100%;

        margin:
            25px auto 0;

        text-align:
            left;
    }

}


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

@media (max-width: 575px) {

    .category-detail-hero {
        padding:
            60px 0;
    }


    .category-detail-hero h1 {
        font-size:
            clamp(42px, 13vw, 58px);

        letter-spacing:
            -2px;
    }


    .category-detail-services {
        padding:
            55px 0;
    }


    .category-detail-service {
        margin-bottom:
            70px;
    }


    .category-detail-service__image {
        min-height:
            300px;

        padding:
            35px 25px;

        border-radius:
            24px;
    }


    .category-detail-service__image img {
        width:
            min(100%, 210px);

        max-height:
            215px;
    }


    .category-detail-service__image::before {
        width:
            210px;

        height:
            210px;
    }


    .category-detail-service__image::after {
        width:
            255px;

        height:
            255px;
    }


    .category-detail-service__number {
        top:
            16px;

        right:
            18px;

        font-size:
            38px;
    }


    .category-detail-service__content h2 {
        font-size:
            38px;

        letter-spacing:
            -1.5px;
    }


    .category-detail-service__content > p {
        font-size:
            12px;

        line-height:
            1.8;
    }

}