:root {
    --osan-navy: #071b33;
    --osan-navy-deep: #041426;
    --osan-blue: #0b5ed7;
    --osan-cyan: #12b8d6;
    --osan-white: #ffffff;
    --osan-bg: #f7f9fc;
    --osan-text: #10233f;
    --osan-muted: #64748b;
    --osan-border: #e6ebf2;
    --osan-radius-sm: 10px;
    --osan-radius-md: 16px;
    --osan-radius-lg: 24px;
    --osan-shadow-sm: 0 8px 30px rgba(7, 27, 51, .06);
    --osan-shadow-md: 0 18px 50px rgba(7, 27, 51, .10);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--osan-white);
    color: var(--osan-text);
    font-family: Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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


/* NAVBAR */

.osan-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(7, 27, 51, .06);
}

.osan-navbar {
    min-height: 82px;
    display: flex;
    align-items: center;
}

.osan-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.osan-brand__logo {
    width: 165px;
    height: auto;
    display: block;
}

.osan-navbar__menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.osan-navbar__link {
    color: var(--osan-text);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 600;
    transition: color .2s ease;
}

    .osan-navbar__link:hover {
        color: var(--osan-cyan);
    }

.osan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
}

.osan-btn--nav {
    min-height: 44px;
    padding: 0 22px;
    color: var(--osan-white);
    background: var(--osan-navy);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

    .osan-btn--nav:hover {
        color: var(--osan-white);
        background: #0a2747;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(7, 27, 51, .14);
    }


/* MOBILE MENU BUTTON */

.osan-navbar__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 9px;
}

    .osan-navbar__toggle span {
        display: block;
        height: 2px;
        margin: 6px 0;
        background: var(--osan-navy);
        border-radius: 999px;
    }

.osan-navbar {
    position: relative;
}

/* MOBILE MENU BUTTON */

.osan-navbar__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 9px;
    cursor: pointer;
}

    .osan-navbar__toggle span {
        display: block;
        height: 2px;
        margin: 6px 0;
        background: var(--osan-navy);
        border-radius: 999px;
        transition: transform .22s ease, opacity .22s ease;
    }


    /* HAMBURGER -> X */

    .osan-navbar__toggle.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .osan-navbar__toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .osan-navbar__toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


/* FOOTER */

.osan-footer {
    border-top: 1px solid var(--osan-border);
    padding: 28px 0;
    background: var(--osan-white);
}

.osan-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: .9rem;
    color: var(--osan-muted);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .osan-navbar__toggle {
        display: block;
    }

    .osan-navbar__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 24px 24px;
        background: #ffffff;
        border-top: 1px solid rgba(7, 27, 51, .06);
        box-shadow: 0 18px 35px rgba(7, 27, 51, .08);
        z-index: 1000;
    }

        .osan-navbar__menu.is-open {
            display: flex;
        }

    .osan-navbar__link {
        width: 100%;
        padding: 14px 4px;
        border-bottom: 1px solid rgba(7, 27, 51, .06);
    }

    .osan-btn--nav {
        width: 100%;
        justify-content: center;
        margin-top: 16px;
    }
}



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

.osan-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 104px;
    background: radial-gradient( circle at 82% 35%, rgba(18, 184, 214, .08), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #fbfcfe 100% );
}

    .osan-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient( rgba(7, 27, 51, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(7, 27, 51, .025) 1px, transparent 1px );
        background-size: 64px 64px;
        mask-image: linear-gradient( to right, transparent, rgba(0, 0, 0, .5), transparent );
        opacity: .35;
    }

.osan-hero__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    gap: 78px;
    align-items: center;
}


/* CONTENT */

.osan-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--osan-cyan);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.osan-hero__eyebrow-line {
    width: 34px;
    height: 1px;
    background: var(--osan-cyan);
}

.osan-hero__title {
    max-width: 680px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 3.6rem, 6vw, 5.8rem );
    line-height: .96;
    letter-spacing: -.055em;
    font-weight: 760;
}

    .osan-hero__title span {
        display: block;
        background: linear-gradient( 100deg, #0b5ed7 0%, #12b8d6 85% );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.osan-hero__description {
    max-width: 635px;
    margin: 30px 0 0;
    color: var(--osan-muted);
    font-size: 1.13rem;
    line-height: 1.75;
}

.osan-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}


/* BUTTONS */

.osan-btn--primary,
.osan-btn--secondary {
    min-height: 54px;
    padding: 0 26px;
    font-size: .94rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.osan-btn--primary {
    gap: 14px;
    color: var(--osan-white);
    background: linear-gradient( 100deg, #0b5ed7, #12aecd );
    box-shadow: 0 14px 34px rgba(11, 94, 215, .18);
}

    .osan-btn--primary svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .osan-btn--primary:hover {
        color: var(--osan-white);
        transform: translateY(-2px);
        box-shadow: 0 18px 42px rgba(11, 94, 215, .24);
    }

        .osan-btn--primary:hover svg {
            transform: translateX(3px);
        }

.osan-btn--secondary {
    color: var(--osan-text);
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(7, 27, 51, .14);
}

    .osan-btn--secondary:hover {
        color: var(--osan-navy);
        background: var(--osan-white);
        border-color: rgba(7, 27, 51, .28);
        transform: translateY(-2px);
    }


/* TRUST */

.osan-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    margin-top: 34px;
    padding-top: 27px;
    border-top: 1px solid rgba(7, 27, 51, .08);
}

.osan-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #43536a;
    font-size: .88rem;
    font-weight: 650;
}

.osan-hero__trust-icon {
    display: inline-flex;
    width: 21px;
    height: 21px;
    color: var(--osan-cyan);
}

    .osan-hero__trust-icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


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

.osan-hero__visual {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osan-hero__visual-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(18, 184, 214, .17), rgba(11, 94, 215, .06) 42%, transparent 70% );
    filter: blur(12px);
}


/* WORKSPACE */

.osan-workspace {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    padding: 26px;
    border: 1px solid rgba(7, 27, 51, .09);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(7, 27, 51, .12);
}

.osan-workspace__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.osan-workspace__label {
    display: block;
    margin-bottom: 4px;
    color: var(--osan-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.osan-workspace__top strong {
    color: var(--osan-navy);
    font-size: 1.25rem;
}

.osan-workspace__status {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(18, 184, 214, .09);
    color: #0791aa;
    font-size: .72rem;
    font-weight: 800;
}

.osan-workspace__main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.osan-workspace__metric {
    padding: 16px;
    border: 1px solid rgba(7, 27, 51, .06);
    border-radius: 14px;
    background: #fbfcfe;
}

    .osan-workspace__metric span {
        display: block;
        color: var(--osan-muted);
        font-size: .71rem;
    }

    .osan-workspace__metric strong {
        display: block;
        margin-top: 5px;
        color: var(--osan-navy);
        font-size: .89rem;
    }

.osan-workspace__chart {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(7, 27, 51, .06);
    border-radius: 16px;
    background: linear-gradient( 180deg, #ffffff, #fafcff );
}

.osan-workspace__chart-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: var(--osan-muted);
    font-size: .72rem;
}

.osan-workspace__chart svg {
    display: block;
    width: 100%;
    height: 130px;
}

.osan-chart-area {
    fill: url(#osanChartGradient);
}

.osan-chart-line {
    fill: none;
    stroke: #13aecd;
    stroke-width: 3;
    stroke-linecap: round;
}

.osan-workspace__bottom {
    display: flex;
    gap: 22px;
    margin-top: 18px;
    color: var(--osan-muted);
    font-size: .72rem;
}

    .osan-workspace__bottom div {
        display: flex;
        align-items: center;
        gap: 7px;
    }

.osan-workspace__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--osan-cyan);
}


/* FLOATING CARDS */

.osan-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(7, 27, 51, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 16px 38px rgba(7, 27, 51, .10);
    backdrop-filter: blur(12px);
}

    .osan-floating-card span {
        display: block;
        color: var(--osan-muted);
        font-size: .65rem;
    }

    .osan-floating-card strong {
        display: block;
        margin-top: 1px;
        color: var(--osan-navy);
        font-size: .76rem;
    }

.osan-floating-card--mail {
    top: 45px;
    right: -7px;
}

.osan-floating-card--automation {
    bottom: 38px;
    left: -16px;
}

.osan-floating-card__icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--osan-blue);
    background: rgba(11, 94, 215, .08);
    font-weight: 800;
}

.osan-floating-card__pulse {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 6px rgba(18, 184, 214, .10);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .osan-hero {
        padding: 76px 0 88px;
    }

    .osan-hero__container {
        grid-template-columns: 1fr;
        gap: 68px;
    }

    .osan-hero__content {
        max-width: 760px;
    }

    .osan-hero__visual {
        width: min( 100%, 680px );
        margin-inline: auto;
    }
}


@media (max-width: 700px) {

    .osan-hero {
        padding: 58px 0 70px;
    }

    .osan-hero__title {
        font-size: clamp( 3rem, 14vw, 4.4rem );
    }

    .osan-hero__description {
        font-size: 1rem;
    }

    .osan-hero__actions {
        flex-direction: column;
    }

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

    .osan-hero__trust {
        flex-direction: column;
        gap: 15px;
    }

    .osan-hero__visual {
        min-height: auto;
        margin-top: 10px;
    }

    .osan-workspace {
        padding: 20px;
    }

    .osan-workspace__main {
        grid-template-columns: 1fr;
    }

    .osan-workspace__bottom {
        flex-wrap: wrap;
        gap: 12px;
    }

    .osan-floating-card {
        display: none;
    }
}

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

.osan-section-heading {
    max-width: 760px;
}

.osan-section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.osan-section-heading__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--osan-cyan);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.osan-section-heading h2 {
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 2.2rem, 4vw, 3.5rem );
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 760;
}

    .osan-section-heading h2 span {
        display: block;
        color: #31506f;
    }

.osan-section-heading p {
    max-width: 660px;
    margin: 22px auto 0;
    color: var(--osan-muted);
    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   DIGITALIZATION LEVELS
========================================================= */

.osan-digitalization {
    position: relative;
    padding: 112px 0 104px;
    background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
    border-top: 1px solid rgba(7, 27, 51, .05);
}

.osan-digitalization__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 62px;
}


/* CARD */

.osan-level-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 620px;
    padding: 32px 30px 28px;
    border: 1px solid rgba(7, 27, 51, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 50px rgba(7, 27, 51, .055);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .osan-level-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 32px;
        right: 32px;
        height: 2px;
        background: linear-gradient( 90deg, transparent, rgba(18, 184, 214, .95), transparent );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .osan-level-card:hover {
        transform: translateY(-7px);
        border-color: rgba(18, 184, 214, .22);
        box-shadow: 0 30px 70px rgba(7, 27, 51, .09);
    }

        .osan-level-card:hover::before {
            opacity: 1;
        }


/* FEATURED */

.osan-level-card--featured {
    background: linear-gradient( 180deg, rgba(246, 251, 255, .98), #ffffff );
    border-color: rgba(11, 94, 215, .13);
}


/* TOP */

.osan-level-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.osan-level-card__number {
    color: rgba(7, 27, 51, .22);
    font-size: .86rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.osan-level-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--osan-blue);
    background: rgba(11, 94, 215, .055);
    border: 1px solid rgba(11, 94, 215, .08);
}

    .osan-level-card__icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* LABEL */

.osan-level-card__label {
    display: block;
    margin-bottom: 15px;
    color: var(--osan-cyan);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* TITLE */

.osan-level-card h3 {
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.52rem;
    line-height: 1.2;
    letter-spacing: -.025em;
}

    .osan-level-card h3 span {
        display: block;
        color: #31506f;
    }


/* DESCRIPTION */

.osan-level-card__intro {
    min-height: 72px;
    margin: 18px 0 0;
    color: var(--osan-muted);
    font-size: .91rem;
    line-height: 1.65;
}


/* FEATURES */

.osan-level-card__features {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

    .osan-level-card__features li {
        position: relative;
        padding-left: 26px;
        color: #40536a;
        font-size: .86rem;
        line-height: 1.5;
    }

        .osan-level-card__features li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(18, 184, 214, .11);
            border: 1px solid rgba(18, 184, 214, .22);
        }

        .osan-level-card__features li::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 9px;
            width: 7px;
            height: 4px;
            border-left: 1.5px solid var(--osan-cyan);
            border-bottom: 1.5px solid var(--osan-cyan);
            transform: rotate(-45deg);
        }


/* RESULT */

.osan-level-card__result {
    margin-top: auto;
    padding-top: 28px;
}

    .osan-level-card__result span {
        display: block;
        margin-bottom: 8px;
        color: var(--osan-muted);
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .osan-level-card__result strong {
        display: block;
        color: var(--osan-navy);
        font-size: .87rem;
        font-weight: 650;
        line-height: 1.55;
    }


/* LINK */

.osan-level-card__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--osan-blue);
    font-size: .85rem;
    font-weight: 750;
    text-decoration: none;
}

    .osan-level-card__link svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .osan-level-card__link:hover {
        color: var(--osan-cyan);
    }

        .osan-level-card__link:hover svg {
            transform: translateX(3px);
        }


/* =========================================================
   MAINTENANCE
========================================================= */

.osan-maintenance {
    display: grid;
    grid-template-columns: auto 1.15fr 1.65fr auto;
    gap: 30px;
    align-items: center;
    margin-top: 24px;
    padding: 30px 32px;
    border-radius: 22px;
    background: linear-gradient( 110deg, var(--osan-navy-deep), #0a294a );
    box-shadow: 0 20px 50px rgba(7, 27, 51, .11);
}

.osan-maintenance__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: var(--osan-cyan);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
}

    .osan-maintenance__icon svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* CONTENT */

.osan-maintenance__content span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .52);
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.osan-maintenance__content h3 {
    margin: 0;
    color: var(--osan-white);
    font-size: 1.22rem;
}

.osan-maintenance__content p {
    margin: 8px 0 0;
    max-width: 400px;
    color: rgba(255, 255, 255, .68);
    font-size: .83rem;
    line-height: 1.55;
}


/* SERVICES */

.osan-maintenance__services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

    .osan-maintenance__services > div {
        padding: 4px 19px;
        border-right: 1px solid rgba(255, 255, 255, .065);
    }

        .osan-maintenance__services > div:last-child {
            border-right: 0;
        }

    .osan-maintenance__services strong {
        display: block;
        color: rgba(255, 255, 255, .92);
        font-size: .76rem;
    }

    .osan-maintenance__services span {
        display: block;
        margin-top: 4px;
        color: rgba(255, 255, 255, .47);
        font-size: .64rem;
        line-height: 1.4;
    }


/* MAINTENANCE LINK */

.osan-maintenance__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--osan-cyan);
    text-decoration: none;
    font-size: .79rem;
    font-weight: 750;
    white-space: nowrap;
}

    .osan-maintenance__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .osan-maintenance__link:hover {
        color: #6fe3f2;
    }

        .osan-maintenance__link:hover svg {
            transform: translateX(3px);
        }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .osan-digitalization__grid {
        grid-template-columns: 1fr;
    }

    .osan-level-card {
        min-height: auto;
    }

    .osan-level-card__intro {
        min-height: 0;
    }

    .osan-maintenance {
        grid-template-columns: auto 1fr;
    }

    .osan-maintenance__services {
        grid-column: 1 / -1;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 20px;
    }

    .osan-maintenance__link {
        grid-column: 2;
    }
}


@media (max-width: 700px) {

    .osan-digitalization {
        padding: 78px 0 74px;
    }

    .osan-digitalization__grid {
        margin-top: 44px;
    }

    .osan-level-card {
        padding: 27px 23px 24px;
    }

    .osan-maintenance {
        grid-template-columns: 1fr;
        padding: 27px 23px;
    }

    .osan-maintenance__services {
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 24px;
    }

        .osan-maintenance__services > div {
            padding: 0;
            border: 0;
        }

    .osan-maintenance__link {
        grid-column: auto;
    }
}



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

.osan-why {
    position: relative;
    padding: 112px 0 118px;
    background: #ffffff;
}

.osan-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 84px;
    align-items: center;
}


/* FEATURES */

.osan-why__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 30px;
    margin-top: 48px;
}

.osan-why__feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: flex-start;
}

.osan-why__feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--osan-blue);
    background: rgba(11, 94, 215, .055);
    border: 1px solid rgba(11, 94, 215, .08);
}

    .osan-why__feature-icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-why__feature h3 {
    margin: 1px 0 7px;
    color: var(--osan-navy);
    font-size: 1rem;
    font-weight: 760;
    letter-spacing: -.01em;
}

.osan-why__feature p {
    margin: 0;
    color: var(--osan-muted);
    font-size: .88rem;
    line-height: 1.65;
}


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

.osan-why__visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osan-why__visual-glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(18, 184, 214, .10), rgba(11, 94, 215, .04) 48%, transparent 70% );
    filter: blur(16px);
}


/* EVOLUTION CARD */

.osan-evolution {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    padding: 30px 30px 26px;
    border-radius: 24px;
    background: linear-gradient( 155deg, #071b33 0%, #0a294a 100% );
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 30px 75px rgba(7, 27, 51, .18);
}

.osan-evolution__header {
    padding-bottom: 23px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .osan-evolution__header span {
        display: block;
        color: rgba(255, 255, 255, .45);
        font-size: .69rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .osan-evolution__header strong {
        display: block;
        margin-top: 6px;
        color: var(--osan-white);
        font-size: 1.35rem;
        letter-spacing: -.02em;
    }


/* PATH */

.osan-evolution__path {
    position: relative;
    margin-top: 24px;
}

.osan-evolution__node {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 14px;
    padding: 10px 0;
    color: var(--osan-white);
}

    .osan-evolution__node > span {
        grid-row: 1 / span 2;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: var(--osan-cyan);
        background: rgba(18, 184, 214, .08);
        border: 1px solid rgba(18, 184, 214, .15);
        font-size: .7rem;
        font-weight: 850;
    }

    .osan-evolution__node strong {
        align-self: end;
        font-size: .92rem;
        font-weight: 720;
    }

    .osan-evolution__node small {
        margin-top: 3px;
        color: rgba(255, 255, 255, .52);
        font-size: .72rem;
        line-height: 1.4;
    }

.osan-evolution__node--final > span {
    color: #06182d;
    background: var(--osan-cyan);
    border-color: var(--osan-cyan);
}


/* CONNECTOR */

.osan-evolution__connector {
    width: 1px;
    height: 19px;
    margin-left: 17px;
    background: linear-gradient( 180deg, rgba(18, 184, 214, .35), rgba(18, 184, 214, .08) );
}


/* FOOTER */

.osan-evolution__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .58);
    font-size: .72rem;
}

.osan-evolution__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 6px rgba(18, 184, 214, .08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .osan-why__grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .osan-why__content {
        max-width: 780px;
    }

    .osan-why__visual {
        width: min( 100%, 680px );
        margin-inline: auto;
    }
}

@media (max-width: 700px) {

    .osan-why {
        padding: 78px 0 82px;
    }

    .osan-why__features {
        grid-template-columns: 1fr;
        gap: 27px;
        margin-top: 38px;
    }

    .osan-why__visual {
        min-height: auto;
    }

    .osan-evolution {
        padding: 25px 22px 22px;
    }
}

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

.osan-process {
    position: relative;
    padding: 112px 0 118px;
    overflow: hidden;
    background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
    border-top: 1px solid rgba(7, 27, 51, .05);
}


/* =========================================================
   ROADMAP
========================================================= */

.osan-process__roadmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    margin-top: 78px;
    padding: 68px 0;
}


/* MAIN LINE */

.osan-process__line {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 50%;
    height: 1px;
    background: linear-gradient( 90deg, rgba(7, 27, 51, .10), rgba(11, 94, 215, .42), rgba(18, 184, 214, .78), rgba(11, 94, 215, .42), rgba(7, 27, 51, .10) );
    transform: translateY(-50%);
}


/* STEP */

.osan-process__step {
    position: relative;
    min-height: 300px;
}


/* TOP */

.osan-process__step--top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    .osan-process__step--top .osan-process__node {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .osan-process__step--top .osan-process__content {
        padding-bottom: 166px;
    }


/* BOTTOM */

.osan-process__step--bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .osan-process__step--bottom .osan-process__node {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .osan-process__step--bottom .osan-process__content {
        padding-top: 166px;
    }


/* NODE */

.osan-process__node {
    z-index: 4;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--osan-blue);
    background: #ffffff;
    border: 1px solid rgba(11, 94, 215, .22);
    box-shadow: 0 10px 28px rgba(7, 27, 51, .07);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .04em;
}

    .osan-process__node::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 5px rgba(18, 184, 214, .08);
        opacity: 0;
        transition: opacity .2s ease;
    }

.osan-process__step:hover
.osan-process__node::after {
    opacity: 1;
}

.osan-process__node--final {
    color: var(--osan-white);
    background: linear-gradient( 135deg, var(--osan-blue), var(--osan-cyan) );
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(11, 94, 215, .18);
}


/* CONTENT */

.osan-process__content {
    max-width: 205px;
}

.osan-process__label {
    display: block;
    margin-bottom: 7px;
    color: var(--osan-cyan);
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.osan-process__content h3 {
    margin: 0;
    color: var(--osan-navy);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.osan-process__content p {
    margin: 10px 0 0;
    color: var(--osan-muted);
    font-size: .81rem;
    line-height: 1.6;
}


/* CONNECTOR FROM CONTENT TO NODE */

.osan-process__step--top
.osan-process__content::after,
.osan-process__step--bottom
.osan-process__content::before {
    content: "";
    position: absolute;
    left: 23px;
    width: 1px;
    background: linear-gradient( 180deg, rgba(18, 184, 214, .05), rgba(18, 184, 214, .38) );
}

.osan-process__step--top
.osan-process__content::after {
    bottom: 50%;
    height: 72px;
}

.osan-process__step--bottom
.osan-process__content::before {
    top: 50%;
    height: 72px;
    background: linear-gradient( 180deg, rgba(18, 184, 214, .38), rgba(18, 184, 214, .05) );
}


/* =========================================================
   CLOSING
========================================================= */

.osan-process__closing {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px auto 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(7, 27, 51, .07);
    box-shadow: 0 12px 35px rgba(7, 27, 51, .045);
}

.osan-process__closing-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .07);
}

    .osan-process__closing-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-process__closing span {
    display: block;
    color: var(--osan-muted);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.osan-process__closing strong {
    display: block;
    margin-top: 2px;
    color: var(--osan-navy);
    font-size: .85rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .osan-process__roadmap {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 720px;
        margin: 58px auto 0;
        padding: 0;
    }

    .osan-process__line {
        left: 23px;
        right: auto;
        top: 24px;
        bottom: 24px;
        width: 1px;
        height: auto;
        transform: none;
        background: linear-gradient( 180deg, rgba(11, 94, 215, .18), rgba(18, 184, 214, .75), rgba(11, 94, 215, .18) );
    }

    .osan-process__step,
    .osan-process__step--top,
    .osan-process__step--bottom {
        display: block;
        min-height: 0;
        padding: 0 0 48px 78px;
    }

        .osan-process__step:last-child {
            padding-bottom: 0;
        }

        .osan-process__step--top
        .osan-process__node,
        .osan-process__step--bottom
        .osan-process__node {
            left: 0;
            top: 0;
            transform: none;
        }

        .osan-process__step--top
        .osan-process__content,
        .osan-process__step--bottom
        .osan-process__content {
            max-width: 560px;
            padding: 0;
        }

            .osan-process__step--top
            .osan-process__content::after,
            .osan-process__step--bottom
            .osan-process__content::before {
                display: none;
            }
}


@media (max-width: 700px) {

    .osan-process {
        padding: 78px 0 84px;
    }

    .osan-process__roadmap {
        margin-top: 46px;
    }

    .osan-process__step,
    .osan-process__step--top,
    .osan-process__step--bottom {
        padding-left: 68px;
    }

    .osan-process__node {
        width: 44px;
        height: 44px;
    }

    .osan-process__line {
        left: 21px;
    }

    .osan-process__closing {
        width: 100%;
        margin-top: 50px;
    }
}



/* =========================================================
   EXPERIENCE
========================================================= */

.osan-experience {
    position: relative;
    padding: 106px 0 112px;
    background: #ffffff;
}

.osan-experience__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
    gap: 78px;
    align-items: center;
}


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

.osan-experience__eyebrow {
    display: block;
    margin-bottom: 17px;
    color: var(--osan-cyan);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.osan-experience__content h2 {
    max-width: 650px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 2.5rem, 4.5vw, 4.15rem );
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 760;
}

    .osan-experience__content h2 span {
        display: block;
        color: #31506f;
    }

.osan-experience__lead {
    max-width: 620px;
    margin: 27px 0 0;
    color: var(--osan-muted);
    font-size: 1rem;
    line-height: 1.75;
}


/* PRINCIPLES */

.osan-experience__principles {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 43px;
    border-top: 1px solid rgba(7, 27, 51, .08);
}

.osan-experience__principle {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(7, 27, 51, .08);
}

    .osan-experience__principle > span {
        padding-top: 2px;
        color: var(--osan-cyan);
        font-size: .69rem;
        font-weight: 850;
        letter-spacing: .08em;
    }

    .osan-experience__principle strong {
        display: block;
        color: var(--osan-navy);
        font-size: .93rem;
        font-weight: 760;
    }

    .osan-experience__principle p {
        max-width: 500px;
        margin: 6px 0 0;
        color: var(--osan-muted);
        font-size: .82rem;
        line-height: 1.6;
    }


/* =========================================================
   TECHNOLOGY CARD
========================================================= */

.osan-experience__technology {
    position: relative;
}

.osan-tech-card {
    position: relative;
    overflow: hidden;
    padding: 29px;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient( 145deg, #06172c 0%, #0a294a 100% );
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 35px 85px rgba(7, 27, 51, .17);
}

    .osan-tech-card::before {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        right: -150px;
        top: -120px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .12), transparent 68% );
    }


/* HEADER */

.osan-tech-card__header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.osan-tech-card__signal {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

    .osan-tech-card__signal span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 5px rgba(18, 184, 214, .08);
    }

.osan-tech-card__status {
    padding: 6px 10px;
    border-radius: 999px;
    color: #5ee5f5;
    background: rgba(18, 184, 214, .07);
    border: 1px solid rgba(18, 184, 214, .12);
    font-size: .65rem;
    font-weight: 750;
}


/* TITLE */

.osan-tech-card__title {
    position: relative;
    z-index: 2;
    padding-top: 24px;
}

    .osan-tech-card__title span {
        display: block;
        color: rgba(255, 255, 255, .42);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .osan-tech-card__title strong {
        display: block;
        max-width: 380px;
        margin-top: 7px;
        color: #ffffff;
        font-size: 1.45rem;
        line-height: 1.25;
        letter-spacing: -.025em;
    }


/* =========================================================
   NETWORK
========================================================= */

.osan-tech-card__network {
    position: relative;
    width: 100%;
    height: 255px;
    margin-top: 18px;
}

    .osan-tech-card__network::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 205px;
        height: 205px;
        border-radius: 50%;
        border: 1px solid rgba(18, 184, 214, .10);
        transform: translate(-50%, -50%);
    }

    .osan-tech-card__network::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 145px;
        height: 145px;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, .08);
        transform: translate(-50%, -50%);
    }


/* CENTER */

.osan-tech-card__center {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.osan-tech-card__center-ring {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-radius: 50%;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .07);
    border: 1px solid rgba(18, 184, 214, .18);
    box-shadow: 0 0 45px rgba(18, 184, 214, .06);
}

    .osan-tech-card__center-ring svg {
        width: 30px;
        height: 30px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-tech-card__center > span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .65);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .12em;
}


/* ORBITS */

.osan-tech-card__orbit {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
}

    .osan-tech-card__orbit strong {
        display: block;
        font-size: .74rem;
    }

    .osan-tech-card__orbit small {
        display: block;
        margin-top: 1px;
        color: rgba(255, 255, 255, .38);
        font-size: .61rem;
    }

.osan-tech-card__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18, 184, 214, .06);
}

.osan-tech-card__orbit--one {
    left: 2%;
    top: 26%;
}

.osan-tech-card__orbit--two {
    right: 1%;
    top: 23%;
}

.osan-tech-card__orbit--three {
    left: 4%;
    bottom: 22%;
}

.osan-tech-card__orbit--four {
    right: 0;
    bottom: 20%;
}


/* =========================================================
   FOUNDATION
========================================================= */

.osan-tech-card__foundation {
    position: relative;
    z-index: 3;
    margin-top: 3px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

    .osan-tech-card__foundation > span {
        display: block;
        margin-bottom: 11px;
        color: var(--osan-cyan);
        font-size: .65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

.osan-tech-card__foundation-content strong {
    display: block;
    color: rgba(255, 255, 255, .92);
    font-size: .88rem;
}

.osan-tech-card__foundation-content p {
    max-width: 440px;
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .48);
    font-size: .72rem;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .osan-experience__panel {
        grid-template-columns: 1fr;
        gap: 68px;
    }

    .osan-experience__content {
        max-width: 760px;
    }

    .osan-experience__technology {
        width: min( 100%, 620px );
        margin-inline: auto;
    }
}


@media (max-width: 700px) {

    .osan-experience {
        padding: 78px 0 82px;
    }

    .osan-tech-card {
        padding: 24px 21px;
    }

    .osan-tech-card__network {
        height: 300px;
    }

    .osan-tech-card__orbit--one {
        left: 0;
        top: 15%;
    }

    .osan-tech-card__orbit--two {
        right: 0;
        top: 15%;
    }

    .osan-tech-card__orbit--three {
        left: 0;
        bottom: 16%;
    }

    .osan-tech-card__orbit--four {
        right: 0;
        bottom: 16%;
    }
}



/* =========================================================
   TRANSFORMATION
========================================================= */

.osan-transform {
    position: relative;
    padding: 112px 0 116px;
    background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
    border-top: 1px solid rgba(7, 27, 51, .05);
}


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

.osan-transform__list {
    margin-top: 62px;
    border-top: 1px solid rgba(7, 27, 51, .08);
}

.osan-transform__item {
    display: grid;
    grid-template-columns: 54px minmax(0, .95fr) 70px minmax(0, 1.05fr);
    gap: 28px;
    align-items: center;
    padding: 33px 6px;
    border-bottom: 1px solid rgba(7, 27, 51, .08);
    transition: background .25s ease, padding .25s ease;
}

    .osan-transform__item:hover {
        padding-left: 18px;
        padding-right: 18px;
        background: rgba(255, 255, 255, .72);
    }


/* NUMBER */

.osan-transform__number {
    color: rgba(7, 27, 51, .24);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .09em;
}


/* PROBLEM */

.osan-transform__problem > span,
.osan-transform__solution > span {
    display: block;
    margin-bottom: 8px;
    color: var(--osan-muted);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.osan-transform__problem h3 {
    max-width: 400px;
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
}


/* ARROW */

.osan-transform__arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-radius: 50%;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .065);
    border: 1px solid rgba(18, 184, 214, .12);
}

    .osan-transform__arrow svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

.osan-transform__item:hover
.osan-transform__arrow svg {
    transform: translateX(3px);
}


/* SOLUTION */

.osan-transform__solution > span {
    color: var(--osan-cyan);
}

.osan-transform__solution strong {
    display: block;
    color: var(--osan-navy);
    font-size: 1.02rem;
    font-weight: 760;
}

.osan-transform__solution p {
    max-width: 500px;
    margin: 7px 0 0;
    color: var(--osan-muted);
    font-size: .84rem;
    line-height: 1.6;
}


/* =========================================================
   CLOSING
========================================================= */

.osan-transform__closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 45px;
    padding: 27px 30px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(7, 27, 51, .07);
    box-shadow: 0 16px 45px rgba(7, 27, 51, .05);
}

    .osan-transform__closing span {
        display: block;
        color: var(--osan-muted);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .osan-transform__closing strong {
        display: block;
        margin-top: 4px;
        color: var(--osan-navy);
        font-size: 1rem;
    }


/* CTA */

.osan-transform__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    color: var(--osan-white);
    background: var(--osan-navy);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

    .osan-transform__cta svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .osan-transform__cta:hover {
        color: #ffffff;
        background: #0a294a;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(7, 27, 51, .14);
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .osan-transform__item {
        grid-template-columns: 44px 1fr;
        gap: 18px 20px;
        align-items: start;
    }

    .osan-transform__number {
        grid-row: 1 / span 3;
    }

    .osan-transform__arrow {
        display: none;
    }

    .osan-transform__solution {
        grid-column: 2;
    }

    .osan-transform__solution {
        margin-top: 8px;
        padding: 18px 20px;
        border-radius: 14px;
        background: rgba(11, 94, 215, .035);
        border: 1px solid rgba(11, 94, 215, .06);
    }
}


@media (max-width: 700px) {

    .osan-transform {
        padding: 78px 0 84px;
    }

    .osan-transform__list {
        margin-top: 45px;
    }

    .osan-transform__item {
        padding: 27px 0;
    }

        .osan-transform__item:hover {
            padding-left: 0;
            padding-right: 0;
        }

    .osan-transform__closing {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
    }

    .osan-transform__cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

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

.osan-final-cta {
    position: relative;
    padding: 80px 0 92px;
    background: #ffffff;
}

.osan-final-cta__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 70px;
    align-items: center;
    overflow: hidden;
    padding: 58px 62px;
    border-radius: 28px;
    background: linear-gradient( 135deg, #06172c 0%, #092541 55%, #0a2d4c 100% );
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 34px 90px rgba(7, 27, 51, .18);
}


    /* DECORATIVE LIGHT */

    .osan-final-cta__panel::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -160px;
        top: -180px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .16), rgba(11, 94, 215, .05) 48%, transparent 70% );
        pointer-events: none;
    }

    .osan-final-cta__panel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(18, 184, 214, .45), transparent );
    }


/* CONTENT */

.osan-final-cta__content {
    position: relative;
    z-index: 2;
}

.osan-final-cta__eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--osan-cyan);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.osan-final-cta h2 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp( 2.55rem, 4.6vw, 4.35rem );
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 760;
}

    .osan-final-cta h2 span {
        display: block;
        color: #79ddec;
    }

.osan-final-cta__content > p {
    max-width: 670px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .63);
    font-size: 1rem;
    line-height: 1.72;
}


/* NOTE */

.osan-final-cta__note {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
}

.osan-final-cta__note-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .07);
    border: 1px solid rgba(18, 184, 214, .12);
}

    .osan-final-cta__note-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   ACTIONS
========================================================= */

.osan-final-cta__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 13px;
}


/* PRIMARY */

.osan-final-cta__primary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 23px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient( 105deg, #0b5ed7, #12b8d6 );
    text-decoration: none;
    font-size: .87rem;
    font-weight: 760;
    box-shadow: 0 16px 36px rgba(11, 94, 215, .20);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .osan-final-cta__primary svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .osan-final-cta__primary:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 20px 44px rgba(11, 94, 215, .27);
    }

        .osan-final-cta__primary:hover svg {
            transform: translateX(3px);
        }


/* WHATSAPP */

.osan-final-cta__whatsapp {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 20px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .16);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    .osan-final-cta__whatsapp svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .osan-final-cta__whatsapp:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .26);
        transform: translateY(-2px);
    }


/* MICROCOPY */

.osan-final-cta__microcopy {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .38);
    font-size: .66rem;
    line-height: 1.5;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .osan-final-cta__panel {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 50px 46px;
    }

    .osan-final-cta__actions {
        max-width: 520px;
    }
}


@media (max-width: 700px) {

    .osan-final-cta {
        padding: 58px 0 68px;
    }

    .osan-final-cta__panel {
        padding: 38px 25px;
        border-radius: 22px;
    }

    .osan-final-cta h2 {
        font-size: clamp( 2.25rem, 12vw, 3.4rem );
    }

    .osan-final-cta__content > p {
        font-size: .94rem;
    }

    .osan-final-cta__note {
        align-items: flex-start;
    }
}


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

.osan-about-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 112px;
    background: radial-gradient( circle at 82% 35%, rgba(18, 184, 214, .075), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #fbfcfe 100% );
}

    .osan-about-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient( rgba(7, 27, 51, .022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(7, 27, 51, .022) 1px, transparent 1px );
        background-size: 64px 64px;
        mask-image: linear-gradient( 90deg, transparent, rgba(0, 0, 0, .55), transparent );
        opacity: .35;
    }


.osan-about-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
    gap: 82px;
    align-items: center;
}


/* CONTENT */

.osan-about-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--osan-cyan);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}

    .osan-about-hero__eyebrow > span {
        width: 34px;
        height: 1px;
        background: var(--osan-cyan);
    }

.osan-about-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 3.15rem, 5.5vw, 5.3rem );
    line-height: .99;
    letter-spacing: -.052em;
    font-weight: 760;
}

    .osan-about-hero h1 span {
        display: block;
        margin-top: 5px;
        color: #31506f;
    }

.osan-about-hero__lead {
    max-width: 640px;
    margin: 31px 0 0;
    color: var(--osan-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.osan-about-hero__statement {
    max-width: 620px;
    margin: 24px 0 0;
    padding-left: 20px;
    border-left: 2px solid rgba(18, 184, 214, .48);
    color: #536579;
    font-size: .94rem;
    line-height: 1.7;
}

    .osan-about-hero__statement strong {
        color: var(--osan-navy);
        font-weight: 750;
    }


/* LINK */

.osan-about-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 30px;
    color: var(--osan-blue);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 760;
}

    .osan-about-hero__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .osan-about-hero__link:hover {
        color: var(--osan-cyan);
    }

        .osan-about-hero__link:hover svg {
            transform: translateX(3px);
        }


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

.osan-about-hero__visual {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osan-about-hero__glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(18, 184, 214, .14), rgba(11, 94, 215, .045) 48%, transparent 70% );
    filter: blur(15px);
}


/* SYSTEM CARD */

.osan-about-system {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    padding: 27px;
    overflow: hidden;
    border-radius: 25px;
    color: #ffffff;
    background: linear-gradient( 145deg, #06172c 0%, #092845 100% );
    border: 1px solid rgba(255, 255, 255, .065);
    box-shadow: 0 32px 80px rgba(7, 27, 51, .18);
}

    .osan-about-system::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        right: -160px;
        top: -150px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .14), transparent 70% );
    }


/* HEADER */

.osan-about-system__header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .osan-about-system__header div:first-child > span {
        display: block;
        margin-bottom: 4px;
        color: rgba(255, 255, 255, .43);
        font-size: .65rem;
        font-weight: 800;
        letter-spacing: .11em;
    }

    .osan-about-system__header strong {
        display: block;
        color: #ffffff;
        font-size: 1.18rem;
    }

.osan-about-system__status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #62dfef;
    background: rgba(18, 184, 214, .065);
    border: 1px solid rgba(18, 184, 214, .12);
    font-size: .64rem;
    font-weight: 750;
}

    .osan-about-system__status > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 4px rgba(18, 184, 214, .07);
    }


/* BODY */

.osan-about-system__body {
    position: relative;
    min-height: 320px;
    padding: 35px 0 22px;
}


/* COMPANY */

.osan-about-system__company {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.osan-about-system__company-ring {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .07);
    border: 1px solid rgba(18, 184, 214, .16);
    box-shadow: 0 0 50px rgba(18, 184, 214, .055);
}

    .osan-about-system__company-ring svg {
        width: 34px;
        height: 34px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-about-system__company > span {
    margin-top: 9px;
    color: rgba(255, 255, 255, .7);
    font-size: .72rem;
    font-weight: 750;
}


/* CONNECTOR LINES */

.osan-about-system__lines {
    position: absolute;
    left: 50%;
    top: 145px;
    width: 74%;
    height: 60px;
    transform: translateX(-50%);
}

.osan-about-system__line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 52px;
    background: linear-gradient( 180deg, rgba(18, 184, 214, .35), rgba(18, 184, 214, .06) );
}

.osan-about-system__line--one {
    left: 17%;
    transform: rotate(26deg);
    transform-origin: top;
}

.osan-about-system__line--two {
    left: 50%;
}

.osan-about-system__line--three {
    right: 17%;
    transform: rotate(-26deg);
    transform-origin: top;
}


/* NODES */

.osan-about-system__nodes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.osan-about-system__node {
    padding: 15px 12px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .065);
}

.osan-about-system__node-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 9px;
    border-radius: 9px;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .055);
}

    .osan-about-system__node-icon svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-about-system__node strong {
    display: block;
    color: rgba(255, 255, 255, .9);
    font-size: .72rem;
}

.osan-about-system__node > span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .38);
    font-size: .62rem;
}


/* FOOTER */

.osan-about-system__footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

    .osan-about-system__footer > div {
        display: flex;
        align-items: center;
        gap: 9px;
        color: rgba(255, 255, 255, .46);
        font-size: .65rem;
    }

.osan-about-system__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18, 184, 214, .06);
}

.osan-about-system__footer > strong {
    color: rgba(255, 255, 255, .65);
    font-size: .66rem;
    letter-spacing: .1em;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .osan-about-hero__grid {
        grid-template-columns: 1fr;
        gap: 68px;
    }

    .osan-about-hero__content {
        max-width: 780px;
    }

    .osan-about-hero__visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }
}


@media (max-width: 700px) {

    .osan-about-hero {
        padding: 64px 0 76px;
    }

        .osan-about-hero h1 {
            font-size: clamp( 2.9rem, 13vw, 4.1rem );
        }

    .osan-about-hero__lead {
        font-size: 1rem;
    }

    .osan-about-hero__visual {
        min-height: auto;
    }

    .osan-about-system {
        padding: 22px 19px;
    }

    .osan-about-system__body {
        min-height: 410px;
    }

    .osan-about-system__lines {
        display: none;
    }

    .osan-about-system__nodes {
        position: static;
        grid-template-columns: 1fr;
        margin-top: 26px;
    }
}


/* =========================================================
   ABOUT — ORIGIN
========================================================= */

.osan-origin {
    position: relative;
    padding: 125px 0 105px;
    background: #ffffff;
    border-top: 1px solid rgba(7, 27, 51, .065);
}

.osan-origin__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
    gap: 100px;
    align-items: center;
}


/* EYEBROW */

.osan-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--osan-cyan);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

    .osan-section-eyebrow > span {
        width: 32px;
        height: 1px;
        background: var(--osan-cyan);
    }


/* CONTENT */

.osan-origin__content h2 {
    max-width: 680px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 2.8rem, 4.5vw, 4.5rem );
    line-height: 1.03;
    letter-spacing: -.045em;
    font-weight: 760;
}

    .osan-origin__content h2 span {
        display: block;
        color: #31506f;
    }

.osan-origin__lead {
    max-width: 650px;
    margin: 31px 0 0;
    color: var(--osan-muted);
    font-size: 1.04rem;
    line-height: 1.78;
}

.osan-origin__highlight {
    margin: 26px 0 0;
    color: var(--osan-navy);
    font-size: 1.1rem;
    line-height: 1.6;
}

    .osan-origin__highlight strong {
        font-weight: 760;
    }

.osan-origin__text {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--osan-muted);
    font-size: .96rem;
    line-height: 1.75;
}


/* =========================================================
   ORIGIN VISUAL CARD
========================================================= */

.osan-origin__visual {
    position: relative;
}

    .osan-origin__visual::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .09), transparent 70% );
        filter: blur(15px);
    }

.osan-origin-card {
    position: relative;
    padding: 34px;
    overflow: hidden;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient( 145deg, #06172c 0%, #092947 100% );
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 30px 75px rgba(7, 27, 51, .15);
}

    .osan-origin-card::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -130px;
        bottom: -150px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .11), transparent 70% );
    }


/* CARD HEADER */

.osan-origin-card__header {
    position: relative;
    z-index: 2;
    padding-bottom: 27px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .osan-origin-card__header > span {
        display: block;
        margin-bottom: 10px;
        color: var(--osan-cyan);
        font-size: .66rem;
        font-weight: 850;
        letter-spacing: .13em;
    }

    .osan-origin-card__header h3 {
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 1.55rem;
        line-height: 1.35;
        font-weight: 500;
    }

        .osan-origin-card__header h3 strong {
            color: #ffffff;
            font-weight: 750;
        }


/* FLOW */

.osan-origin-card__flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 75px 1fr;
    align-items: center;
    gap: 10px;
    padding: 42px 0;
}

.osan-origin-card__label {
    display: inline-block;
    margin-bottom: 17px;
    color: rgba(255, 255, 255, .38);
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.osan-origin-card__label--cyan {
    color: var(--osan-cyan);
}


/* ITEMS */

.osan-origin-card__items {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

    .osan-origin-card__items > div {
        display: flex;
        align-items: center;
        gap: 9px;
        color: rgba(255, 255, 255, .57);
        font-size: .78rem;
    }

        .osan-origin-card__items > div > span {
            flex: 0 0 auto;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .22);
        }

.osan-origin-card__items--result > div {
    color: rgba(255, 255, 255, .9);
    font-weight: 650;
}

    .osan-origin-card__items--result > div > span {
        background: var(--osan-cyan);
        box-shadow: 0 0 0 4px rgba(18, 184, 214, .07);
    }


/* CONNECTOR */

.osan-origin-card__connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osan-origin-card__line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient( 90deg, rgba(255,255,255,.08), rgba(18,184,214,.45), rgba(255,255,255,.08) );
}

.osan-origin-card__arrow {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--osan-cyan);
    background: #0a2945;
    border: 1px solid rgba(18, 184, 214, .18);
    font-size: 1rem;
}


/* CARD FOOTER */

.osan-origin-card__footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

    .osan-origin-card__footer p {
        margin: 0;
        color: rgba(255, 255, 255, .48);
        font-size: .67rem;
    }

.osan-origin-card__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18, 184, 214, .06);
}


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

.osan-origin__statement {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 95px;
    padding-top: 36px;
    border-top: 1px solid rgba(7, 27, 51, .09);
}

    .osan-origin__statement > span {
        color: var(--osan-cyan);
        font-size: .67rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .13em;
    }

    .osan-origin__statement p {
        max-width: 800px;
        margin: 0;
        color: #52687e;
        font-size: clamp( 1.4rem, 2.1vw, 2rem );
        line-height: 1.45;
        letter-spacing: -.02em;
    }

    .osan-origin__statement strong {
        color: var(--osan-navy);
        font-weight: 760;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .osan-origin__grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .osan-origin__content {
        max-width: 760px;
    }

    .osan-origin__visual {
        width: min(100%, 620px);
        margin-inline: auto;
    }
}


@media (max-width: 700px) {

    .osan-origin {
        padding: 80px 0 75px;
    }

    .osan-origin-card {
        padding: 27px 22px;
    }

    .osan-origin-card__flow {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 32px 0;
    }

    .osan-origin-card__connector {
        height: 45px;
    }

    .osan-origin-card__line {
        left: 50%;
        top: 0;
        width: 1px;
        height: 45px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(18,184,214,.4) );
    }

    .osan-origin-card__arrow {
        transform: rotate(90deg);
    }

    .osan-origin__statement {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 65px;
    }
}

/* =========================================================
   ABOUT — PHILOSOPHY
========================================================= */

.osan-philosophy {
    position: relative;
    padding: 74px 0 106px;
    background: #ffffff;
}

.osan-philosophy__panel {
    position: relative;
    overflow: hidden;
    padding: 74px 70px 58px;
    border-radius: 30px;
    background: linear-gradient( 135deg, #06172c 0%, #092744 58%, #0b2d4d 100% );
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 34px 85px rgba(7, 27, 51, .16);
}

    .osan-philosophy__panel::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: -220px;
        top: -250px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .15), rgba(11, 94, 215, .035) 48%, transparent 70% );
        pointer-events: none;
    }


/* INTRO */

.osan-philosophy__intro {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.osan-philosophy__eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--osan-cyan);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.osan-philosophy__intro h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp( 2.65rem, 4.8vw, 4.5rem );
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 760;
}

    .osan-philosophy__intro h2 span {
        display: block;
        color: #78ddeb;
    }

.osan-philosophy__intro p {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: .98rem;
    line-height: 1.75;
}


/* GRID */

.osan-philosophy__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 58px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.osan-philosophy__item {
    position: relative;
    min-height: 285px;
    padding: 30px 28px 32px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

    .osan-philosophy__item:last-child {
        border-right: 0;
    }

.osan-philosophy__number {
    display: block;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .28);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .09em;
}

.osan-philosophy__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 12px;
    color: var(--osan-cyan);
    background: rgba(18, 184, 214, .055);
    border: 1px solid rgba(18, 184, 214, .10);
}

    .osan-philosophy__icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.osan-philosophy__item h3 {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
    font-weight: 760;
}

.osan-philosophy__item p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .47);
    font-size: .79rem;
    line-height: 1.65;
}


/* STATEMENT */

.osan-philosophy__statement {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 38px;
    align-items: center;
    padding-top: 36px;
}

    .osan-philosophy__statement > span {
        color: var(--osan-cyan);
        font-size: .65rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .osan-philosophy__statement strong {
        max-width: 750px;
        color: rgba(255, 255, 255, .9);
        font-size: clamp( 1.4rem, 2.2vw, 2rem );
        line-height: 1.45;
        font-weight: 650;
        letter-spacing: -.02em;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

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

    .osan-philosophy__item:nth-child(2) {
        border-right: 0;
    }

    .osan-philosophy__item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
}


@media (max-width: 700px) {

    .osan-philosophy {
        padding: 45px 0 76px;
    }

    .osan-philosophy__panel {
        padding: 45px 24px 35px;
        border-radius: 23px;
    }

    .osan-philosophy__grid {
        grid-template-columns: 1fr;
        margin-top: 42px;
    }

    .osan-philosophy__item {
        min-height: auto;
        padding: 28px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

        .osan-philosophy__item:last-child {
            border-bottom: 0;
        }

    .osan-philosophy__statement {
        grid-template-columns: 1fr;
        gap: 13px;
        padding-top: 30px;
    }
}


/* =========================================================
   ABOUT — DIGITAL FUTURE
========================================================= */

.about-digital-future {
    position: relative;
    overflow: hidden;
    padding: 115px 0 105px;
    background: radial-gradient( circle at 85% 20%, rgba(18, 184, 214, .07), transparent 28% ), #ffffff;
}


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

.about-digital-future__header {
    max-width: 900px;
    margin-bottom: 80px;
}

.about-digital-future__eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--osan-cyan);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.about-digital-future__header h2 {
    max-width: 850px;
    margin: 0;
    color: #06172c;
    font-size: clamp( 3rem, 5.4vw, 5.25rem );
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 770;
}

    .about-digital-future__header h2 span {
        display: block;
        color: #355574;
    }

.about-digital-future__lead {
    max-width: 650px;
    margin: 28px 0 0;
    color: #526b84;
    font-size: clamp( 1.05rem, 1.5vw, 1.25rem );
    line-height: 1.65;
}


/* CONTENT
--------------------------------------------------------- */

.about-digital-future__content {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 100px;
    padding: 65px 0 70px;
    border-top: 1px solid #e2e9ef;
}

.about-digital-future__statement {
    max-width: 470px;
}

    .about-digital-future__statement p {
        margin: 0 0 28px;
        color: #0b1c30;
        font-size: clamp( 1.3rem, 2vw, 1.75rem );
        line-height: 1.5;
        letter-spacing: -.02em;
    }

    .about-digital-future__statement strong {
        font-weight: 750;
        color: #079fc7;
    }


.about-digital-future__explanation {
    max-width: 620px;
}

    .about-digital-future__explanation p {
        margin: 0 0 23px;
        color: #526b84;
        font-size: .97rem;
        line-height: 1.8;
    }


/* PRINCIPLE
--------------------------------------------------------- */

.about-digital-principle {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 50px;
    align-items: start;
    padding: 50px 0 75px;
    border-top: 1px solid #e2e9ef;
}

.about-digital-principle__label {
    padding-top: 7px;
    color: var(--osan-cyan);
    font-size: .67rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.about-digital-principle p {
    max-width: 850px;
    margin: 0;
    color: #73869a;
    font-size: clamp( 1.5rem, 2.6vw, 2.3rem );
    line-height: 1.4;
    letter-spacing: -.025em;
}

.about-digital-principle strong {
    color: #071a31;
    font-weight: 720;
}


/* =========================================================
   ENTERPRISE / ERP-UNIV BRIDGE
========================================================= */

.about-enterprise {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient( 135deg, #06172c 0%, #082744 100% );
    box-shadow: 0 28px 70px rgba(7, 27, 51, .13);
}

    .about-enterprise::after {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        right: -150px;
        top: -190px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(17, 185, 215, .17), transparent 68% );
        pointer-events: none;
    }


.about-enterprise__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    min-height: 360px;
}


/* LEFT */

.about-enterprise__copy {
    padding: 60px 65px;
}

.about-enterprise__eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--osan-cyan);
    font-size: .67rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.about-enterprise__copy h3 {
    max-width: 630px;
    margin: 0;
    color: #ffffff;
    font-size: clamp( 2rem, 3.4vw, 3.2rem );
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 720;
}

    .about-enterprise__copy h3 span {
        display: block;
        color: #78ddeb;
    }

.about-enterprise__copy p {
    max-width: 610px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .56);
    font-size: .9rem;
    line-height: 1.75;
}


/* RIGHT */

.about-enterprise__technology {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px 50px;
    border-left: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

.about-enterprise__status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 23px;
    color: rgba(255, 255, 255, .48);
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .about-enterprise__status span {
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 5px rgba(18, 184, 214, .08);
    }

.about-enterprise__brand {
    color: #ffffff;
    font-size: clamp( 1.9rem, 3vw, 2.8rem );
    font-weight: 800;
    letter-spacing: -.04em;
}

.about-enterprise__technology p {
    max-width: 340px;
    margin: 13px 0 26px;
    color: rgba(255, 255, 255, .52);
    font-size: .8rem;
    line-height: 1.65;
}

.about-enterprise__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: #76deed;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 750;
}

    .about-enterprise__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .about-enterprise__link:hover {
        color: #ffffff;
    }

        .about-enterprise__link:hover svg {
            transform: translateX(4px);
        }


/* =========================================================
   FINAL MESSAGE
========================================================= */

.about-final-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-top: 85px;
    padding: 0 10px;
}

    .about-final-message > div {
        max-width: 700px;
    }

    .about-final-message span {
        display: block;
        margin-bottom: 12px;
        color: var(--osan-cyan);
        font-size: .67rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .about-final-message h3 {
        margin: 0;
        color: #71859a;
        font-size: clamp( 1.8rem, 3vw, 2.7rem );
        line-height: 1.25;
        letter-spacing: -.035em;
        font-weight: 500;
    }

        .about-final-message h3 strong {
            display: block;
            color: #071a31;
            font-weight: 740;
        }


/* BUTTON */

.about-final-message__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 17px 25px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient( 90deg, #075ad7, #0eb7ce );
    text-decoration: none;
    font-size: .82rem;
    font-weight: 750;
    box-shadow: 0 12px 30px rgba(9, 125, 204, .16);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .about-final-message__button svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .about-final-message__button:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(9, 125, 204, .22);
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .about-digital-future__content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-digital-principle {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-enterprise__content {
        grid-template-columns: 1fr;
    }

    .about-enterprise__technology {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .about-final-message {
        align-items: flex-start;
        flex-direction: column;
        gap: 35px;
    }
}


@media (max-width: 700px) {

    .about-digital-future {
        padding: 75px 0;
    }

    .about-digital-future__header {
        margin-bottom: 55px;
    }

    .about-digital-future__content {
        padding: 45px 0;
    }

    .about-digital-principle {
        padding: 40px 0 55px;
    }

    .about-enterprise {
        border-radius: 22px;
    }

    .about-enterprise__copy,
    .about-enterprise__technology {
        padding: 40px 26px;
    }

    .about-final-message {
        margin-top: 60px;
        padding: 0;
    }

    .about-final-message__button {
        width: 100%;
    }
}

/* =========================================================
   SOLUTIONS — HERO
========================================================= */

.solutions-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 112px;
    background: radial-gradient( circle at 82% 38%, rgba(18, 184, 214, .08), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #fbfcfe 100% );
}

    .solutions-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient( rgba(7, 27, 51, .022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(7, 27, 51, .022) 1px, transparent 1px );
        background-size: 64px 64px;
        mask-image: linear-gradient( 90deg, transparent, rgba(0,0,0,.5), transparent );
        opacity: .35;
    }


.solutions-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
    gap: 82px;
    align-items: center;
}


/* COPY */

.solutions-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--osan-cyan);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

    .solutions-hero__eyebrow > span {
        width: 33px;
        height: 1px;
        background: var(--osan-cyan);
    }


.solutions-hero h1 {
    max-width: 700px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 3.4rem, 5.7vw, 5.55rem );
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 770;
}

    .solutions-hero h1 span {
        display: block;
        color: #31506f;
    }


.solutions-hero__lead {
    max-width: 630px;
    margin: 31px 0 0;
    color: var(--osan-muted);
    font-size: 1.07rem;
    line-height: 1.75;
}


/* STATEMENT */

.solutions-hero__statement {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    max-width: 610px;
    margin-top: 30px;
    padding: 22px 0;
    border-top: 1px solid rgba(7, 27, 51, .08);
    border-bottom: 1px solid rgba(7, 27, 51, .08);
}

    .solutions-hero__statement span {
        color: var(--osan-cyan);
        font-size: .65rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .solutions-hero__statement strong {
        color: var(--osan-navy);
        font-size: .87rem;
        line-height: 1.55;
        font-weight: 700;
    }


/* HERO LINK */

.solutions-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 28px;
    color: var(--osan-blue);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 760;
}

    .solutions-hero__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .solutions-hero__link:hover {
        color: var(--osan-cyan);
    }

        .solutions-hero__link:hover svg {
            transform: translateX(3px);
        }


/* =========================================================
   SOLUTIONS SYSTEM
========================================================= */

.solutions-hero__visual {
    position: relative;
    min-height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-hero__glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(18,184,214,.13), rgba(11,94,215,.045) 48%, transparent 70% );
    filter: blur(15px);
}


.solutions-system {
    position: relative;
    z-index: 2;
    width: min(100%, 540px);
    min-height: 480px;
    padding: 28px;
    overflow: hidden;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient( 145deg, #06172c 0%, #092947 100% );
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 34px 85px rgba(7,27,51,.18);
}


/* HEADER */

.solutions-system__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .solutions-system__header span {
        color: rgba(255,255,255,.4);
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .1em;
    }

    .solutions-system__header strong {
        display: block;
        margin-top: 5px;
        color: #ffffff;
        font-size: 1rem;
    }


.solutions-system__status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #67dfed;
    font-size: .63rem;
}

    .solutions-system__status span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 4px rgba(18,184,214,.07);
    }


/* CENTER */

.solutions-system__center {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 4;
    transform: translate(-50%, -50%);
    text-align: center;
}

.solutions-system__company {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-radius: 50%;
    color: var(--osan-cyan);
    background: rgba(18,184,214,.07);
    border: 1px solid rgba(18,184,214,.18);
}

    .solutions-system__company svg {
        width: 30px;
        height: 30px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.solutions-system__center strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: .77rem;
}

.solutions-system__center > span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.39);
    font-size: .61rem;
}


/* NETWORK */

.solutions-system__network::before,
.solutions-system__network::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.solutions-system__network::before {
    width: 265px;
    height: 265px;
    border: 1px solid rgba(18,184,214,.10);
}

.solutions-system__network::after {
    width: 175px;
    height: 175px;
    border: 1px dashed rgba(255,255,255,.07);
}


/* NODES */

.solutions-system__node {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
}

.solutions-system__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18,184,214,.06);
}

.solutions-system__node strong {
    display: block;
    color: rgba(255,255,255,.9);
    font-size: .72rem;
}

.solutions-system__node small {
    display: block;
    color: rgba(255,255,255,.35);
    font-size: .59rem;
}

.solutions-system__node--web {
    left: 8%;
    top: 33%;
}

.solutions-system__node--clients {
    right: 4%;
    top: 30%;
}

.solutions-system__node--process {
    left: 3%;
    bottom: 30%;
}

.solutions-system__node--data {
    right: 8%;
    bottom: 31%;
}

.solutions-system__node--automation {
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
}


/* FOOTER */

.solutions-system__footer {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.43);
    font-size: .63rem;
}

.solutions-system__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18,184,214,.06);
}


/* =========================================================
   NEEDS
========================================================= */

.solutions-needs {
    position: relative;
    padding: 115px 0 110px;
    background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
    border-top: 1px solid rgba(7,27,51,.05);
}


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


/* CARD */

.solutions-need {
    position: relative;
    min-height: 405px;
    padding: 31px 31px 28px;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(7,27,51,.075);
    box-shadow: 0 18px 48px rgba(7,27,51,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .solutions-need:hover {
        transform: translateY(-5px);
        border-color: rgba(18,184,214,.2);
        box-shadow: 0 27px 65px rgba(7,27,51,.075);
    }


.solutions-need__number {
    position: absolute;
    right: 27px;
    top: 29px;
    color: rgba(7,27,51,.18);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .09em;
}


.solutions-need__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 13px;
    color: var(--osan-blue);
    background: rgba(11,94,215,.05);
    border: 1px solid rgba(11,94,215,.075);
}

    .solutions-need__icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.solutions-need__context {
    display: block;
    margin-bottom: 10px;
    color: var(--osan-cyan);
    font-size: .65rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .1em;
}


.solutions-need h3 {
    max-width: 460px;
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.35rem;
    line-height: 1.33;
    letter-spacing: -.025em;
}


.solutions-need > p {
    max-width: 500px;
    margin: 17px 0 0;
    color: var(--osan-muted);
    font-size: .86rem;
    line-height: 1.68;
}


/* RESULT */

.solutions-need__result {
    position: absolute;
    left: 31px;
    right: 31px;
    bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(7,27,51,.07);
}

    .solutions-need__result span,
    .solutions-need__wide-result > span {
        display: block;
        margin-bottom: 7px;
        color: var(--osan-muted);
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .solutions-need__result strong,
    .solutions-need__wide-result strong {
        color: var(--osan-navy);
        font-size: .78rem;
        line-height: 1.55;
        font-weight: 700;
    }


/* WIDE */

.solutions-need--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 28px;
    align-items: center;
    min-height: auto;
    padding: 32px;
}

    .solutions-need--wide
    .solutions-need__icon {
        margin-bottom: 0;
    }

.solutions-need__wide-copy h3 {
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.25rem;
    line-height: 1.35;
}

.solutions-need__wide-copy p {
    margin: 10px 0 0;
    color: var(--osan-muted);
    font-size: .84rem;
    line-height: 1.65;
}


.solutions-need__wide-result {
    padding-left: 30px;
    border-left: 1px solid rgba(7,27,51,.08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .solutions-hero__grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .solutions-hero__content {
        max-width: 780px;
    }

    .solutions-hero__visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }
}


@media (max-width: 850px) {

    .solutions-needs__grid {
        grid-template-columns: 1fr;
    }

    .solutions-need--wide {
        grid-column: auto;
        grid-template-columns: auto 1fr;
    }

    .solutions-need__wide-result {
        grid-column: 1 / -1;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(7,27,51,.08);
    }
}


@media (max-width: 700px) {

    .solutions-hero {
        padding: 65px 0 78px;
    }

        .solutions-hero h1 {
            font-size: clamp( 3rem, 13vw, 4.2rem );
        }

    .solutions-hero__statement {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .solutions-hero__visual {
        min-height: auto;
    }

    .solutions-system {
        min-height: 560px;
        padding: 22px 19px;
    }

    .solutions-system__center {
        top: 40%;
    }

    .solutions-system__network::before {
        width: 225px;
        height: 225px;
        top: 40%;
    }

    .solutions-system__network::after {
        width: 150px;
        height: 150px;
        top: 40%;
    }

    .solutions-system__node--web {
        left: 2%;
        top: 26%;
    }

    .solutions-system__node--clients {
        right: 0;
        top: 26%;
    }

    .solutions-system__node--process {
        left: 2%;
        bottom: 32%;
    }

    .solutions-system__node--data {
        right: 0;
        bottom: 32%;
    }

    .solutions-system__node--automation {
        bottom: 20%;
    }

    .solutions-needs {
        padding: 78px 0 82px;
    }

    .solutions-needs__grid {
        margin-top: 45px;
    }

    .solutions-need {
        min-height: auto;
        padding: 27px 23px;
    }

    .solutions-need__result {
        position: static;
        margin-top: 28px;
    }

    .solutions-need--wide {
        grid-template-columns: 1fr;
    }
}




/* =========================================================
   SOLUTIONS — AREAS
========================================================= */

.solutions-areas {
    position: relative;
    padding: 118px 0 110px;
    background: #ffffff;
}


/* HEADER */

.solutions-areas__header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 80px;
    align-items: end;
}

.solutions-areas__eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--osan-cyan);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.solutions-areas__header h2 {
    max-width: 750px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 2.8rem, 4.8vw, 4.6rem );
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 760;
}

    .solutions-areas__header h2 span {
        display: block;
        color: #31506f;
    }

.solutions-areas__header > p {
    max-width: 500px;
    margin: 0 0 4px;
    color: var(--osan-muted);
    font-size: .95rem;
    line-height: 1.75;
}


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

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


/* CARD */

.solutions-area {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 610px;
    padding: 32px 32px 29px;
    overflow: hidden;
    border-radius: 23px;
    background: linear-gradient( 180deg, #ffffff 0%, #fbfcfd 100% );
    border: 1px solid rgba(7,27,51,.075);
    box-shadow: 0 18px 50px rgba(7,27,51,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .solutions-area:hover {
        transform: translateY(-5px);
        border-color: rgba(18,184,214,.20);
        box-shadow: 0 28px 67px rgba(7,27,51,.075);
    }


/* FEATURED */

.solutions-area--featured {
    grid-column: 1 / -1;
    min-height: auto;
    background: linear-gradient( 115deg, #071b33, #0a2949 );
    border-color: rgba(255,255,255,.05);
    color: #ffffff;
}

    .solutions-area--featured
    .solutions-area__number {
        color: rgba(255,255,255,.25);
    }

    .solutions-area--featured
    .solutions-area__label {
        color: var(--osan-cyan);
    }

    .solutions-area--featured h3 {
        color: #ffffff;
        max-width: 650px;
    }

    .solutions-area--featured p,
    .solutions-area--featured li {
        color: rgba(255,255,255,.53);
    }

    .solutions-area--featured
    .solutions-area__result {
        border-top-color: rgba(255,255,255,.08);
    }

        .solutions-area--featured
        .solutions-area__result span {
            color: rgba(255,255,255,.38);
        }

        .solutions-area--featured
        .solutions-area__result strong {
            color: rgba(255,255,255,.9);
        }


/* TOP */

.solutions-area__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

.solutions-area__number {
    color: rgba(7,27,51,.19);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.solutions-area__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--osan-blue);
    background: rgba(11,94,215,.05);
    border: 1px solid rgba(11,94,215,.08);
}

.solutions-area--featured
.solutions-area__icon {
    color: var(--osan-cyan);
    background: rgba(18,184,214,.06);
    border-color: rgba(18,184,214,.1);
}

.solutions-area__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* COPY */

.solutions-area__label {
    display: block;
    margin-bottom: 11px;
    color: var(--osan-cyan);
    font-size: .65rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.solutions-area h3 {
    max-width: 500px;
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.5rem;
    line-height: 1.28;
    letter-spacing: -.025em;
}

.solutions-area > p {
    max-width: 530px;
    margin: 18px 0 0;
    color: var(--osan-muted);
    font-size: .87rem;
    line-height: 1.7;
}


/* LIST */

.solutions-area ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 20px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.solutions-area li {
    position: relative;
    padding-left: 21px;
    color: #4d6278;
    font-size: .79rem;
    line-height: 1.5;
}

    .solutions-area li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 4px rgba(18,184,214,.06);
    }


/* RESULT */

.solutions-area__result {
    margin-top: auto;
    padding-top: 29px;
    border-top: 1px solid rgba(7,27,51,.07);
}

    .solutions-area__result span {
        display: block;
        margin-bottom: 7px;
        color: var(--osan-muted);
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .solutions-area__result strong {
        color: var(--osan-navy);
        font-size: .82rem;
        line-height: 1.55;
    }


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

.solutions-areas__footer {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    align-items: center;
    margin-top: 58px;
    padding-top: 35px;
    border-top: 1px solid rgba(7,27,51,.08);
}

    .solutions-areas__footer span {
        color: var(--osan-cyan);
        font-size: .67rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .solutions-areas__footer strong {
        max-width: 760px;
        color: var(--osan-navy);
        font-size: clamp( 1.25rem, 2vw, 1.8rem );
        line-height: 1.5;
        letter-spacing: -.02em;
        font-weight: 650;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .solutions-areas__header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .solutions-areas__grid {
        grid-template-columns: 1fr;
    }

    .solutions-area--featured {
        grid-column: auto;
    }
}


@media (max-width: 700px) {

    .solutions-areas {
        padding: 78px 0 82px;
    }

    .solutions-areas__grid {
        margin-top: 45px;
    }

    .solutions-area {
        min-height: auto;
        padding: 27px 23px;
    }

        .solutions-area ul {
            grid-template-columns: 1fr;
        }

    .solutions-area__result {
        margin-top: 30px;
    }

    .solutions-areas__footer {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 45px;
    }
}


/* =========================================================
   SOLUTIONS — FOR WHOM
========================================================= */

.solutions-for {
    position: relative;
    padding: 112px 0 108px;
    background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
    border-top: 1px solid rgba(7, 27, 51, .05);
}


/* HEADER */

.solutions-for__header {
    max-width: 850px;
}

.solutions-for__eyebrow {
    display: block;
    margin-bottom: 17px;
    color: var(--osan-cyan);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.solutions-for__header h2 {
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 2.9rem, 4.8vw, 4.65rem );
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 760;
}

    .solutions-for__header h2 span {
        display: block;
        color: #31506f;
    }

.solutions-for__header p {
    max-width: 670px;
    margin: 26px 0 0;
    color: var(--osan-muted);
    font-size: .97rem;
    line-height: 1.75;
}


/* GRID */

.solutions-for__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 65px;
    border-top: 1px solid rgba(7, 27, 51, .09);
    border-left: 1px solid rgba(7, 27, 51, .09);
}

.solutions-for__item {
    position: relative;
    min-height: 360px;
    padding: 35px 34px 31px;
    border-right: 1px solid rgba(7, 27, 51, .09);
    border-bottom: 1px solid rgba(7, 27, 51, .09);
    transition: background .25s ease;
}

    .solutions-for__item:hover {
        background: rgba(247, 250, 252, .8);
    }


/* NUMBER */

.solutions-for__number {
    position: absolute;
    top: 35px;
    right: 34px;
    color: rgba(7, 27, 51, .20);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .1em;
}


/* ICON */

.solutions-for__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 13px;
    color: var(--osan-blue);
    background: rgba(11, 94, 215, .05);
    border: 1px solid rgba(11, 94, 215, .075);
}

    .solutions-for__icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* COPY */

.solutions-for__item h3 {
    max-width: 450px;
    margin: 0;
    color: var(--osan-navy);
    font-size: 1.3rem;
    line-height: 1.35;
    letter-spacing: -.025em;
}

.solutions-for__item p {
    max-width: 500px;
    margin: 17px 0 0;
    color: var(--osan-muted);
    font-size: .84rem;
    line-height: 1.7;
}


/* STAGE */

.solutions-for__stage {
    position: absolute;
    left: 34px;
    bottom: 30px;
    color: var(--osan-cyan);
    font-size: .64rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .09em;
}


/* STATEMENT */

.solutions-for__statement {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: center;
    padding: 45px 0 0;
}

    .solutions-for__statement span {
        color: var(--osan-cyan);
        font-size: .66rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .solutions-for__statement strong {
        max-width: 800px;
        color: var(--osan-navy);
        font-size: clamp( 1.3rem, 2.1vw, 1.9rem );
        line-height: 1.5;
        letter-spacing: -.02em;
        font-weight: 650;
    }


/* =========================================================
   SOLUTIONS — FINAL CTA
========================================================= */

.solutions-final {
    padding: 20px 0 100px;
    background: #ffffff;
}

.solutions-final__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    gap: 70px;
    align-items: center;
    overflow: hidden;
    padding: 58px 62px;
    border-radius: 28px;
    background: linear-gradient( 135deg, #06172c 0%, #092744 58%, #0a2d4c 100% );
    box-shadow: 0 32px 82px rgba(7, 27, 51, .16);
}

    .solutions-final__panel::after {
        content: "";
        position: absolute;
        width: 440px;
        height: 440px;
        right: -160px;
        top: -200px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18, 184, 214, .16), transparent 70% );
        pointer-events: none;
    }


/* CONTENT */

.solutions-final__content {
    position: relative;
    z-index: 2;
}

.solutions-final__eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--osan-cyan);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.solutions-final h2 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp( 2.4rem, 4vw, 3.9rem );
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 750;
}

    .solutions-final h2 span {
        display: block;
        color: #7bddeb;
    }

.solutions-final__content p {
    max-width: 650px;
    margin: 23px 0 0;
    color: rgba(255, 255, 255, .57);
    font-size: .92rem;
    line-height: 1.75;
}


/* ACTIONS */

.solutions-final__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solutions-final__primary,
.solutions-final__secondary {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.solutions-final__primary {
    justify-content: space-between;
    color: #ffffff;
    background: linear-gradient( 100deg, #0b5ed7, #12b8d6 );
    box-shadow: 0 15px 35px rgba(11, 94, 215, .2);
}

.solutions-final__secondary {
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .15);
}

    .solutions-final__primary svg,
    .solutions-final__secondary svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .solutions-final__primary:hover,
    .solutions-final__secondary:hover {
        color: #ffffff;
        transform: translateY(-2px);
    }

.solutions-final__primary:hover {
    box-shadow: 0 19px 42px rgba(11, 94, 215, .27);
}

.solutions-final__secondary:hover {
    background: rgba(255, 255, 255, .07);
}

.solutions-final__note {
    color: rgba(255, 255, 255, .35);
    font-size: .64rem;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .solutions-for__grid {
        grid-template-columns: 1fr;
    }

    .solutions-for__statement {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .solutions-final__panel {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .solutions-final__actions {
        max-width: 520px;
    }
}


@media (max-width: 700px) {

    .solutions-for {
        padding: 78px 0 82px;
    }

    .solutions-for__grid {
        margin-top: 45px;
    }

    .solutions-for__item {
        min-height: auto;
        padding: 29px 23px 75px;
    }

    .solutions-for__number {
        right: 23px;
    }

    .solutions-for__stage {
        left: 23px;
    }

    .solutions-final {
        padding: 0 0 70px;
    }

    .solutions-final__panel {
        padding: 40px 25px;
        border-radius: 22px;
    }
}



/* =========================================================
   PACKAGES — HERO
========================================================= */

.packages-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 112px;
    background: radial-gradient( circle at 82% 37%, rgba(18,184,214,.08), transparent 30% ), linear-gradient( 180deg, #ffffff, #fbfcfe );
}

.packages-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
    gap: 90px;
    align-items: center;
}


/* COPY */

.packages-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--osan-cyan);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}

    .packages-hero__eyebrow span {
        width: 33px;
        height: 1px;
        background: var(--osan-cyan);
    }


.packages-hero h1 {
    max-width: 700px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 3.4rem, 5.5vw, 5.4rem );
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 770;
}

    .packages-hero h1 span {
        display: block;
        color: #31506f;
    }


.packages-hero__lead {
    max-width: 620px;
    margin: 30px 0 0;
    color: var(--osan-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}


/* PRINCIPLE */

.packages-hero__principle {
    max-width: 600px;
    margin-top: 30px;
    padding: 21px 0;
    border-top: 1px solid rgba(7,27,51,.08);
    border-bottom: 1px solid rgba(7,27,51,.08);
}

    .packages-hero__principle span {
        display: block;
        margin-bottom: 7px;
        color: var(--osan-cyan);
        font-size: .64rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .packages-hero__principle strong {
        color: var(--osan-navy);
        font-size: .87rem;
        line-height: 1.55;
    }


.packages-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: var(--osan-blue);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 760;
}

    .packages-hero__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


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

.packages-hero__visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packages-hero__glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(18,184,214,.13), transparent 68% );
    filter: blur(15px);
}


.packages-evolution {
    position: relative;
    z-index: 2;
    width: min(100%, 500px);
    padding: 31px;
    border-radius: 26px;
    background: linear-gradient( 145deg, #06172c, #092947 );
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 34px 85px rgba(7,27,51,.18);
}


.packages-evolution__header {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .packages-evolution__header span {
        color: rgba(255,255,255,.4);
        font-size: .63rem;
        font-weight: 800;
        letter-spacing: .11em;
    }

    .packages-evolution__header strong {
        display: block;
        margin-top: 6px;
        color: #ffffff;
        font-size: 1.25rem;
    }


/* STEPS */

.packages-evolution__steps {
    padding: 36px 0 33px;
}

.packages-evolution__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 15px;
    align-items: center;
}

    .packages-evolution__step > span {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: var(--osan-cyan);
        background: rgba(18,184,214,.06);
        border: 1px solid rgba(18,184,214,.12);
        font-size: .69rem;
        font-weight: 850;
    }

.packages-evolution__step--active > span {
    color: #06172c;
    background: var(--osan-cyan);
}


.packages-evolution__step strong {
    display: block;
    color: rgba(255,255,255,.9);
    font-size: .84rem;
}

.packages-evolution__step small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.38);
    font-size: .65rem;
}


.packages-evolution__line {
    width: 1px;
    height: 25px;
    margin-left: 21px;
    background: rgba(18,184,214,.22);
}


.packages-evolution__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.42);
    font-size: .65rem;
}

.packages-evolution__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 5px rgba(18,184,214,.06);
}


/* =========================================================
   LEVELS
========================================================= */

.packages-levels {
    padding: 115px 0 110px;
    background: linear-gradient( 180deg, #f8fafc, #ffffff );
    border-top: 1px solid rgba(7,27,51,.05);
}


.packages-levels__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
    margin-top: 65px;
}


/* PACKAGE CARD */

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 790px;
    padding: 32px 29px 28px;
    border-radius: 23px;
    background: #ffffff;
    border: 1px solid rgba(7,27,51,.08);
    box-shadow: 0 18px 50px rgba(7,27,51,.045);
}


.package-card--featured {
    border-color: rgba(18,184,214,.25);
    box-shadow: 0 25px 65px rgba(7,27,51,.075);
}


.package-card__featured-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient( 90deg, var(--osan-blue), var(--osan-cyan) );
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}


/* CARD HEADER */

.package-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.package-card__number {
    color: rgba(7,27,51,.2);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .1em;
}


.package-card__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--osan-blue);
    background: rgba(11,94,215,.05);
    border: 1px solid rgba(11,94,215,.08);
}

    .package-card__icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* COPY */

.package-card__stage {
    color: var(--osan-cyan);
    font-size: .63rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .09em;
}


.package-card h3 {
    margin: 10px 0 0;
    color: var(--osan-navy);
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -.03em;
}

    .package-card h3 span {
        display: block;
        color: #31506f;
    }


.package-card__description {
    min-height: 78px;
    margin: 18px 0 0;
    color: var(--osan-muted);
    font-size: .84rem;
    line-height: 1.65;
}


/* IDEAL */

.package-card__ideal {
    margin-top: 25px;
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid rgba(7,27,51,.05);
}

    .package-card__ideal span,
    .package-card__includes > span,
    .package-card__result > span {
        display: block;
        margin-bottom: 7px;
        color: var(--osan-cyan);
        font-size: .61rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .package-card__ideal p {
        margin: 0;
        color: #52687e;
        font-size: .76rem;
        line-height: 1.55;
    }


/* INCLUDES */

.package-card__includes {
    margin-top: 27px;
}

    .package-card__includes ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .package-card__includes li {
        position: relative;
        padding-left: 22px;
        color: #485e74;
        font-size: .75rem;
        line-height: 1.45;
    }

        .package-card__includes li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--osan-cyan);
            box-shadow: 0 0 0 4px rgba(18,184,214,.06);
        }


/* RESULT */

.package-card__result {
    margin-top: auto;
    padding-top: 27px;
    border-top: 1px solid rgba(7,27,51,.07);
}

    .package-card__result strong {
        color: var(--osan-navy);
        font-size: .79rem;
        line-height: 1.55;
    }


/* CTA */

.package-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 49px;
    margin-top: 23px;
    padding: 0 19px;
    border-radius: 999px;
    color: var(--osan-navy);
    background: #ffffff;
    border: 1px solid rgba(7,27,51,.13);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 750;
}

.package-card--featured
.package-card__cta {
    color: #ffffff;
    border: 0;
    background: linear-gradient( 100deg, var(--osan-blue), var(--osan-cyan) );
}

.package-card__cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   MAINTENANCE
========================================================= */

.packages-maintenance {
    padding: 10px 0 100px;
    background: #ffffff;
}

.packages-maintenance__panel {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 45px;
    align-items: center;
    padding: 38px 42px;
    border-radius: 24px;
    background: linear-gradient( 120deg, #06172c, #092947 );
}


.packages-maintenance__intro > span {
    color: var(--osan-cyan);
    font-size: .63rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.packages-maintenance__intro h2 {
    margin: 8px 0 0;
    color: rgba(255,255,255,.7);
    font-size: 1.4rem;
    font-weight: 500;
}

    .packages-maintenance__intro h2 strong {
        color: #ffffff;
    }

.packages-maintenance__intro p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.46);
    font-size: .72rem;
    line-height: 1.55;
}


.packages-maintenance__items {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 18px;
}

    .packages-maintenance__items strong {
        display: block;
        color: rgba(255,255,255,.88);
        font-size: .7rem;
    }

    .packages-maintenance__items span {
        display: block;
        margin-top: 4px;
        color: rgba(255,255,255,.34);
        font-size: .59rem;
        line-height: 1.4;
    }


.packages-maintenance__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--osan-cyan);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

    .packages-maintenance__cta svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }


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

.packages-final {
    padding: 20px 0 105px;
    background: #ffffff;
}

    .packages-final .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        padding-top: 45px;
        border-top: 1px solid rgba(7,27,51,.08);
    }

.packages-final__content span {
    color: var(--osan-cyan);
    font-size: .65rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.packages-final__content h2 {
    max-width: 750px;
    margin: 10px 0 0;
    color: #6f8499;
    font-size: clamp( 1.9rem, 3.2vw, 2.8rem );
    line-height: 1.25;
    letter-spacing: -.035em;
    font-weight: 500;
}

    .packages-final__content h2 strong {
        display: block;
        color: var(--osan-navy);
        font-weight: 740;
    }

.packages-final__content p {
    margin: 15px 0 0;
    color: var(--osan-muted);
    font-size: .84rem;
}


.packages-final__button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 24px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient( 100deg, var(--osan-blue), var(--osan-cyan) );
    text-decoration: none;
    font-size: .8rem;
    font-weight: 750;
}

    .packages-final__button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .packages-hero__grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .packages-levels__grid {
        grid-template-columns: 1fr;
    }

    .package-card {
        min-height: auto;
    }

    .package-card__description {
        min-height: 0;
    }

    .packages-maintenance__panel {
        grid-template-columns: 1fr;
    }

    .packages-maintenance__items {
        grid-template-columns: repeat(3,1fr);
    }
}


@media (max-width: 700px) {

    .packages-hero {
        padding: 65px 0 78px;
    }

    .packages-levels {
        padding: 78px 0 80px;
    }

    .package-card {
        padding: 28px 23px;
    }

    .packages-maintenance__panel {
        padding: 32px 25px;
    }

    .packages-maintenance__items {
        grid-template-columns: 1fr 1fr;
    }

    .packages-final .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .packages-final__button {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   PACKAGES — ERP-UNIV BRIDGE
========================================================= */

.packages-enterprise {
    position: relative;
    padding: 10px 0 90px;
    background: #ffffff;
}


.packages-enterprise__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient( 135deg, #06172c 0%, #082744 100% );
    box-shadow: 0 30px 78px rgba(7, 27, 51, .14);
}


    .packages-enterprise__panel::before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        right: -160px;
        top: -190px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(18,184,214,.15), transparent 68% );
        pointer-events: none;
    }


/* LEFT
--------------------------------------------------------- */

.packages-enterprise__content {
    position: relative;
    z-index: 2;
    padding: 58px 62px;
}


.packages-enterprise__eyebrow {
    display: block;
    margin-bottom: 17px;
    color: var(--osan-cyan);
    font-size: .66rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .12em;
}


.packages-enterprise__content h2 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp( 2.15rem, 3.5vw, 3.35rem );
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 730;
}


    .packages-enterprise__content h2 span {
        display: block;
        color: #79ddeb;
    }


.packages-enterprise__content p {
    max-width: 650px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.54);
    font-size: .88rem;
    line-height: 1.75;
}


/* SIGNALS */

.packages-enterprise__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
}


    .packages-enterprise__signals span {
        padding: 7px 11px;
        border-radius: 999px;
        color: rgba(255,255,255,.62);
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.08);
        font-size: .62rem;
    }


/* RIGHT
--------------------------------------------------------- */

.packages-enterprise__next {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 46px;
    border-left: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}


.packages-enterprise__status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 29px;
    color: rgba(255,255,255,.39);
    font-size: .61rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}


    .packages-enterprise__status > span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--osan-cyan);
        box-shadow: 0 0 0 5px rgba(18,184,214,.07);
    }


.packages-enterprise__label {
    color: var(--osan-cyan);
    font-size: .63rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .09em;
}


.packages-enterprise__brand {
    margin-top: 9px;
    color: #ffffff;
    font-size: clamp( 2rem, 3vw, 2.8rem );
    font-weight: 850;
    letter-spacing: -.04em;
}


.packages-enterprise__next h3 {
    margin: 21px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 500;
}


    .packages-enterprise__next h3 span {
        color: #ffffff;
        font-weight: 750;
    }


.packages-enterprise__next p {
    max-width: 350px;
    margin: 13px 0 25px;
    color: rgba(255,255,255,.47);
    font-size: .76rem;
    line-height: 1.65;
}


/* LINK */

.packages-enterprise__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--osan-cyan);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 760;
}


    .packages-enterprise__link svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }


    .packages-enterprise__link:hover {
        color: #ffffff;
    }


        .packages-enterprise__link:hover svg {
            transform: translateX(4px);
        }


/* RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .packages-enterprise__panel {
        grid-template-columns: 1fr;
    }

    .packages-enterprise__next {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }
}


@media (max-width: 700px) {

    .packages-enterprise {
        padding-bottom: 70px;
    }

    .packages-enterprise__panel {
        border-radius: 22px;
    }

    .packages-enterprise__content,
    .packages-enterprise__next {
        padding: 39px 25px;
    }
}



/* =========================================================
   CONTACT — HERO
========================================================= */

.contact-hero {
    position: relative;
    padding: 105px 0 115px;
    overflow: hidden;
    background: radial-gradient( circle at 84% 28%, rgba(18,184,214,.08), transparent 30% ), linear-gradient( 180deg, #ffffff, #fafcfe );
}


.contact-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(480px, 1.07fr);
    gap: 95px;
    align-items: start;
}


/* =========================================================
   COPY
========================================================= */

.contact-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--osan-cyan);
    font-size: .71rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .13em;
}


    .contact-hero__eyebrow > span {
        width: 33px;
        height: 1px;
        background: var(--osan-cyan);
    }


.contact-hero h1 {
    max-width: 680px;
    margin: 0;
    color: var(--osan-navy);
    font-size: clamp( 3.25rem, 5vw, 5rem );
    line-height: .99;
    letter-spacing: -.052em;
    font-weight: 770;
}


    .contact-hero h1 span {
        display: block;
        color: #31506f;
    }


.contact-hero__lead {
    max-width: 610px;
    margin: 30px 0 0;
    color: var(--osan-muted);
    font-size: 1.03rem;
    line-height: 1.75;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.contact-hero__principles {
    display: flex;
    flex-direction: column;
    margin-top: 45px;
    border-top: 1px solid rgba(7,27,51,.08);
}


.contact-hero__principle {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 17px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(7,27,51,.08);
}


    .contact-hero__principle > span {
        padding-top: 2px;
        color: var(--osan-cyan);
        font-size: .66rem;
        font-weight: 850;
        letter-spacing: .08em;
    }


    .contact-hero__principle strong {
        display: block;
        color: var(--osan-navy);
        font-size: .88rem;
    }


    .contact-hero__principle p {
        max-width: 500px;
        margin: 5px 0 0;
        color: var(--osan-muted);
        font-size: .78rem;
        line-height: 1.55;
    }


/* MESSAGE */

.contact-hero__message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 27px;
}


.contact-hero__pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--osan-cyan);
    box-shadow: 0 0 0 6px rgba(18,184,214,.07);
}


.contact-hero__message p {
    margin: 0;
    color: #53687d;
    font-size: .75rem;
}


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

.contact-form-card {
    position: relative;
    padding: 38px 38px 34px;
    border-radius: 27px;
    background: #ffffff;
    border: 1px solid rgba(7,27,51,.075);
    box-shadow: 0 30px 80px rgba(7,27,51,.10);
}


.contact-form-card__header {
    padding-bottom: 26px;
    margin-bottom: 27px;
    border-bottom: 1px solid rgba(7,27,51,.07);
}


    .contact-form-card__header > span {
        display: block;
        margin-bottom: 8px;
        color: var(--osan-cyan);
        font-size: .65rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .11em;
    }


    .contact-form-card__header h2 {
        margin: 0;
        color: var(--osan-navy);
        font-size: 1.65rem;
        letter-spacing: -.025em;
    }


    .contact-form-card__header p {
        margin: 8px 0 0;
        color: var(--osan-muted);
        font-size: .8rem;
        line-height: 1.55;
    }


/* =========================================================
   FIELDS
========================================================= */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


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


.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


    .contact-field label,
    .contact-needs legend {
        color: var(--osan-navy);
        font-size: .72rem;
        font-weight: 750;
    }


    .contact-field input,
    .contact-field textarea {
        width: 100%;
        padding: 13px 15px;
        border: 1px solid rgba(7,27,51,.12);
        border-radius: 11px;
        outline: none;
        color: var(--osan-navy);
        background: #fbfcfd;
        font-family: inherit;
        font-size: .78rem;
        transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }


    .contact-field textarea {
        resize: vertical;
        min-height: 125px;
    }


        .contact-field input:focus,
        .contact-field textarea:focus {
            background: #ffffff;
            border-color: rgba(18,184,214,.55);
            box-shadow: 0 0 0 3px rgba(18,184,214,.06);
        }


.contact-field__help {
    color: var(--osan-muted);
    font-size: .63rem;
}


/* =========================================================
   NEED OPTIONS
========================================================= */

.contact-needs {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}


    .contact-needs > p {
        margin: 6px 0 15px;
        color: var(--osan-muted);
        font-size: .69rem;
    }


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


.contact-need {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 13px;
    cursor: pointer;
    border-radius: 11px;
    color: #4f6479;
    background: #fbfcfd;
    border: 1px solid rgba(7,27,51,.08);
    font-size: .69rem;
    transition: border-color .2s ease, background .2s ease;
}


    .contact-need input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }


.contact-need__check {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(7,27,51,.22);
    background: #ffffff;
}


.contact-need:has(input:checked) {
    color: var(--osan-navy);
    background: rgba(18,184,214,.045);
    border-color: rgba(18,184,214,.35);
}


.contact-need input:checked + .contact-need__check {
    border: 4px solid var(--osan-cyan);
}


/* =========================================================
   CONSENT
========================================================= */

.contact-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    cursor: pointer;
}


    .contact-consent input {
        position: absolute;
        opacity: 0;
    }


    .contact-consent > span {
        width: 17px;
        height: 17px;
        margin-top: 1px;
        border-radius: 5px;
        background: #ffffff;
        border: 1px solid rgba(7,27,51,.18);
    }


    .contact-consent input:checked + span {
        background: var(--osan-cyan);
        border-color: var(--osan-cyan);
    }


    .contact-consent p {
        margin: 0;
        color: var(--osan-muted);
        font-size: .65rem;
        line-height: 1.5;
    }


    .contact-consent a {
        color: var(--osan-blue);
    }


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient( 100deg, var(--osan-blue), var(--osan-cyan) );
    font-family: inherit;
    font-size: .79rem;
    font-weight: 750;
    box-shadow: 0 14px 32px rgba(11,94,215,.17);
}


    .contact-submit svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.contact-form__footer {
    text-align: center;
}


.contact-form__secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--osan-muted);
    font-size: .6rem;
}


    .contact-form__secure svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: var(--osan-cyan);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   ALTERNATIVE
========================================================= */

.contact-alternatives {
    padding: 0 0 95px;
    background: #fafcfe;
}


.contact-alternatives__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-top: 42px;
    border-top: 1px solid rgba(7,27,51,.08);
}


    .contact-alternatives__line span {
        color: var(--osan-cyan);
        font-size: .65rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .1em;
    }


    .contact-alternatives__line h2 {
        margin: 8px 0 0;
        color: #73879a;
        font-size: clamp( 1.6rem, 2.6vw, 2.3rem );
        font-weight: 500;
        letter-spacing: -.03em;
    }


        .contact-alternatives__line h2 strong {
            color: var(--osan-navy);
            font-weight: 740;
        }


.contact-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 15px 23px;
    border-radius: 12px;
    color: var(--osan-navy);
    background: #ffffff;
    border: 1px solid rgba(7,27,51,.12);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 750;
}


    .contact-whatsapp svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .contact-hero__grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .contact-hero__content {
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .contact-hero {
        padding: 65px 0 80px;
    }

    .contact-form-card {
        padding: 29px 22px;
    }

    .contact-form__row,
    .contact-needs__grid {
        grid-template-columns: 1fr;
    }

    .contact-alternatives__line {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .contact-whatsapp {
        width: 100%;
        justify-content: center;
    }
}






/* =========================================================
   HOME — TRUST
========================================================= */

.osan-trust {
    padding: 24px 0 82px;
    background: #ffffff;
}


.osan-trust__panel {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: center;
    padding: 34px 38px;
    border-radius: 22px;
    background: linear-gradient( 120deg, #06172c, #092947 );
    box-shadow: 0 22px 55px rgba(7,27,51,.11);
}


/* COPY */

.osan-trust__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--osan-cyan);
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .11em;
}


.osan-trust__content h2 {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: clamp( 1.35rem, 2.2vw, 2rem );
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 500;
}


    .osan-trust__content h2 span {
        display: block;
        color: #ffffff;
        font-weight: 740;
    }


.osan-trust__content p {
    max-width: 390px;
    margin: 11px 0 0;
    color: rgba(255,255,255,.43);
    font-size: .72rem;
    line-height: 1.55;
}


/* LOGOS */

.osan-trust__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
}


.osan-trust__logo {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.12);
}


    .osan-trust__logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 85%;
        max-height: 80px;
        object-fit: contain;
        transform: scale(1.35);
        filter: grayscale(100%);
        
        transition: filter .2s ease, opacity .2s ease, transform .2s ease;
    }

    .osan-trust__logo:hover img {
        filter: grayscale(0);
        opacity: 1;
        transform: scale(1.42);
    }

    /* placeholder */

    .osan-trust__logo span {
        color: #677b8f;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .05em;
    }


/* RESPONSIVE */

@media (max-width: 850px) {

    .osan-trust__panel {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .osan-trust {
        padding-bottom: 65px;
    }

    .osan-trust__panel {
        padding: 29px 22px;
    }

    .osan-trust__logos {
        grid-template-columns: 1fr;
    }

    .osan-trust__logo {
        min-height: 80px;
    }
}