/* ============================================================
   ORBI PLATFORMS
   GLOBAL DESIGN SYSTEM
   ============================================================ */

:root {

    --orbi: #06392f;
    --orbi-deep: #042b24;
    --orbi-dark: #03231d;
    --orbi-soft: #31584d;

    --paper: #f3f0e8;
    --paper-soft: #ebe6da;
    --paper-deep: #e2dccf;

    --cream: #ddd5c5;
    --sand: #c9bea9;

    --ink: #252824;
    --ink-soft: #555b54;
    --muted: #747a73;

    --white: #ffffff;

    --border: rgba(37, 40, 36, .12);
    --border-green: rgba(6, 57, 47, .15);

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

    --container: 1280px;

    --ease:
        cubic-bezier(.16, 1, .3, 1);
}

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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    font-family: var(--font);

    color: var(--ink);
    background: var(--paper);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

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

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

button {
    margin: 0;
    padding: 0;

    border: 0;

    color: inherit;
    background: none;

    cursor: pointer;
}

img,
svg {
    display: block;
    max-width: 100%;
}


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

main {
    width: 100%;
    overflow: hidden;
}

section {
    position: relative;
    width: 100%;
}

.fullscreen-section {
    min-height: 100svh;

    display: flex;
    align-items: center;
}

.section-container {
    width:
        min(
            calc(100% - 96px),
            var(--container)
        );

    margin-inline: auto;
}


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

.display-heading {
    margin: 0;

    max-width: 1000px;

    font-size:
        clamp(
            3.8rem,
            6.3vw,
            7rem
        );

    line-height: .99;

    font-weight: 500;

    letter-spacing: -.067em;

    text-wrap: balance;

    text-shadow:
        0 14px 45px
        rgba(36, 45, 39, .04);
}

.display-heading em {
    display: block;

    font-style: italic;
    font-weight: 400;

    letter-spacing: -.06em;

    color: var(--orbi);

    text-shadow:
        0 16px 42px
        rgba(6, 57, 47, .1);
}


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

.site-header {
    position: fixed;

    z-index: 1000;

    top: 22px;
    left: 50%;

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

    height: 70px;

    padding: 0 22px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    background:
        rgba(247, 245, 238, .69);

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

    border-radius: 18px;

    box-shadow:
        0 8px 32px
        rgba(36, 43, 37, .055);

    backdrop-filter:
        blur(20px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(120%);

    transition:
        top .8s var(--ease),
        width .8s var(--ease),
        height .8s var(--ease),
        background-color .8s var(--ease),
        box-shadow .8s var(--ease),
        border-color .8s var(--ease);
}

.site-header.is-scrolled {
    top: 14px;

    width:
        min(
            calc(100% - 40px),
            1180px
        );

    height: 66px;

    background:
        rgba(247, 245, 238, .86);

    border-color:
        rgba(255,255,255,.65);

    box-shadow:
        0 12px 40px
        rgba(32, 43, 36, .075);
}


/* ============================================================
   NAV
   ============================================================ */

.nav-container {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;
}

.brand {
    justify-self: start;

    display: flex;
    align-items: center;

    width: 118px;
    height: 48px;

    overflow: hidden;
}

.brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
}

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 27px;
}

.nav-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    font-size: .73rem;
    font-weight: 450;

    letter-spacing: -.02em;

    color: var(--ink-soft);

    transition:
        color .55s var(--ease);
}

.nav-link:hover {
    color: var(--orbi);
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 1px;

    background: var(--orbi);

    transform: translateX(-50%);

    transition:
        width .55s var(--ease);
}

.nav-link:hover::after {
    width: 100%;
}


/* ============================================================
   LOGIN
   ============================================================ */

.nav-actions {
    justify-self: end;

    display: flex;
    align-items: center;
}

.login-button {
    display: inline-flex;

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

    min-height: 40px;

    padding: 0 18px;

    border:
        1px solid
        rgba(6, 57, 47, .16);

    border-radius: 10px;

    background: transparent;

    color: var(--orbi);

    font-size: .71rem;
    font-weight: 500;

    transition:
        transform .6s var(--ease),
        background-color .6s var(--ease),
        border-color .6s var(--ease);
}

.login-button:hover {
    transform: translateY(-1px);

    background:
        rgba(6, 57, 47, .055);

    border-color:
        rgba(6, 57, 47, .24);
}


/* ============================================================
   PRODUCT DROPDOWN
   ============================================================ */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    gap: 8px;
}

.dropdown-indicator {
    width: 5px;
    height: 5px;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);

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

.nav-dropdown.is-open
.dropdown-indicator {
    transform:
        translateY(2px)
        rotate(225deg);
}


/* ============================================================
   NEW PRODUCTS PANEL
   ============================================================ */

.products-menu {
    position: absolute;

    top: calc(100% + 14px);
    left: 50%;

    width: 570px;

    padding: 16px;

    background:
        rgba(247, 245, 238, .96);

    border:
        1px solid
        rgba(6, 57, 47, .08);

    border-radius: 18px;

    box-shadow:
        0 24px 70px
        rgba(29, 38, 32, .11);

    backdrop-filter:
        blur(26px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(120%);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -8px)
        scale(.985);

    transform-origin:
        top center;

    transition:
        opacity .5s var(--ease),
        visibility .5s var(--ease),
        transform .65s var(--ease);
}

.nav-dropdown.is-open
.products-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0)
        scale(1);
}

.products-menu-header {
    display: flex;

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

    padding:
        8px 10px 15px;

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

.products-menu-header span {
    font-size: .68rem;
    font-weight: 500;

    color: var(--orbi);
}

.products-menu-header p {
    margin: 0;

    font-size: .62rem;

    color: var(--muted);
}

.products-grid {
    display: grid;

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

    gap: 4px;

    padding-top: 8px;
}

.product-menu-item {
    min-height: 68px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        10px 12px;

    border-radius: 11px;

    transition:
        background-color .55s var(--ease),
        transform .55s var(--ease);
}

.product-menu-item:hover {
    background:
        rgba(6, 57, 47, .055);

    transform:
        translateY(-1px);
}

.product-menu-item strong {
    margin-bottom: 4px;

    font-size: .79rem;
    font-weight: 500;

    letter-spacing: -.025em;

    color: var(--ink);
}

.product-menu-item span {
    font-size: .62rem;

    color: var(--muted);
}


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

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 6px;

    border-radius: 10px;

    background: var(--orbi);
}

.menu-toggle span {
    width: 17px;
    height: 1px;

    background: var(--white);

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

.menu-toggle.is-active
span:first-child {
    transform:
        translateY(3.5px)
        rotate(45deg);
}

.menu-toggle.is-active
span:last-child {
    transform:
        translateY(-3.5px)
        rotate(-45deg);
}

.mobile-menu {
    position: fixed;

    z-index: 950;

    inset: 0;

    padding:
        110px 24px 28px;

    background:
        rgba(243, 240, 232, .98);

    backdrop-filter:
        blur(24px);

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

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-14px);

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

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.mobile-menu-inner {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow-y: auto;
}

.mobile-navigation {
    display: flex;
    flex-direction: column;
}

.mobile-navigation > a,
.mobile-products-trigger {
    width: 100%;

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

    padding: 18px 0;

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

    font-size:
        clamp(
            1.65rem,
            7vw,
            2.5rem
        );

    font-weight: 450;

    letter-spacing: -.05em;

    text-align: left;
}

.mobile-products-indicator {
    width: 10px;
    height: 10px;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    transform:
        translateY(-3px)
        rotate(45deg);

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

.mobile-products.is-open
.mobile-products-indicator {
    transform:
        translateY(3px)
        rotate(225deg);
}

.mobile-products-list {
    display: grid;

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

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .9s var(--ease),
        opacity .7s var(--ease),
        padding .8s var(--ease);
}

.mobile-products.is-open
.mobile-products-list {
    max-height: 500px;

    padding:
        14px 0 22px;

    opacity: 1;
}

.mobile-products-list a {
    padding: 10px 0;

    font-size: .86rem;

    color: var(--ink-soft);
}

.mobile-menu-bottom {
    padding-top: 30px;
}


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

.button {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 24px;

    border-radius: 10px;

    font-size: .75rem;
    font-weight: 500;

    transition:
        transform .65s var(--ease),
        background-color .65s var(--ease),
        color .65s var(--ease),
        box-shadow .65s var(--ease),
        border-color .65s var(--ease);
}

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

.button-green {
    color: var(--white);
    background: var(--orbi);

    box-shadow:
        0 9px 28px
        rgba(6, 57, 47, .13);
}

.button-green:hover {
    background: var(--orbi-deep);

    box-shadow:
        0 14px 38px
        rgba(6, 57, 47, .18);
}

.button-cream {
    color: var(--orbi);
    background: var(--paper);
}

.button-outline {
    color: var(--orbi);

    border:
        1px solid
        rgba(6,57,47,.18);
}


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

.hero {
    position: relative;

    min-height: 100svh;

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

    overflow: hidden;

    background: var(--paper);
}

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

    pointer-events: none;
}

.hero-glow {
    position: absolute;

    z-index: 1;

    top: 2%;
    left: 50%;

    width: 70vw;
    height: 60vw;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.82) 0%,
            rgba(255,255,255,.36) 34%,
            transparent 70%
        );

    filter: blur(40px);

    opacity: .82;
}

.hero-lines {
    position: absolute;

    z-index: 2;

    left: -5%;
    right: -5%;
    bottom: -12%;

    height: 71%;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.17) 0,
            rgba(255,255,255,.17) 1px,
            transparent 1px,
            transparent 4px
        ),

        linear-gradient(
            to bottom,
            rgba(243,240,232,0) 0%,
            rgba(217,215,194,.16) 14%,
            rgba(163,176,156,.42) 34%,
            rgba(71,104,88,.74) 63%,
            rgba(6,57,47,.98) 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.15) 8%,
            black 27%,
            black 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.15) 8%,
            black 27%,
            black 100%
        );

    will-change: transform;
}

.hero-content {
    position: relative;

    z-index: 10;

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

    margin-top: -3vh;

    text-align: center;
}

.hero-title {
    margin: 0;

    font-size:
        clamp(
            4rem,
            7.2vw,
            7.7rem
        );

    line-height: .93;

    font-weight: 500;

    letter-spacing: -.072em;

    text-wrap: balance;

    text-shadow:
        0 16px 45px
        rgba(35, 49, 40, .055);
}

.hero-description {
    max-width: 590px;

    margin:
        30px auto 0;

    font-size:
        clamp(
            .9rem,
            1.15vw,
            1.04rem
        );

    line-height: 1.7;

    color: var(--ink-soft);
}

.hero-actions {
    margin-top: 28px;
}


/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.scroll-indicator {
    position: absolute;

    z-index: 10;

    bottom: 24px;
    left: 50%;

    transform: translateX(-50%);

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

    gap: 9px;

    font-size: .55rem;
    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,.7);
}

.scroll-line {
    position: relative;

    width: 1px;
    height: 28px;

    overflow: hidden;

    background:
        rgba(255,255,255,.22);
}

.scroll-line i {
    position: absolute;
    inset: 0;

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

    transform:
        translateY(-110%);

    animation:
        scrollIndicator
        2.7s
        var(--ease)
        infinite;
}

@keyframes scrollIndicator {

    0% {
        transform: translateY(-110%);
    }

    55% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(110%);
    }

}


/* ============================================================
   INTRO
   ============================================================ */

.intro {
    padding: 120px 0;

    background: var(--paper);
}

.intro-layout {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: end;
}

.intro-copy p,
.connection-content p,
.integrations-copy p,
.implementation-content p {
    margin: 0;

    font-size:
        clamp(
            .95rem,
            1.2vw,
            1.1rem
        );

    line-height: 1.8;

    letter-spacing: -.02em;

    color: var(--ink-soft);

    text-align: left;
    text-justify: inter-word;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.ecosystem {
    min-height: 100svh;

    padding: 120px 0;

    background: var(--paper-soft);
}

.ecosystem-heading {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 70px;
}

.ecosystem-heading p {
    max-width: 410px;

    margin:
        0 0 6px auto;

    font-size: .95rem;
    line-height: 1.75;

    color: var(--ink-soft);

    text-align: left;
}

.ecosystem-list {
    border-top:
        1px solid
        var(--border-green);
}

.product-row {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 80px;

    align-items: center;

    min-height: 96px;

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

    transition:
        padding-left .75s var(--ease),
        padding-right .75s var(--ease),
        background-color .75s var(--ease);
}

.product-row:hover {
    padding: 0 18px;

    background:
        rgba(6,57,47,.045);
}

.product-name {
    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.7rem
        );

    font-weight: 450;

    letter-spacing: -.055em;

    color: var(--orbi);

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

.product-row:hover
.product-name {
    transform: translateX(5px);
}

.product-row p {
    max-width: 500px;

    margin: 0;

    font-size: .83rem;
    line-height: 1.65;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   CONNECTION
   ============================================================ */

.connection {
    position: relative;

    min-height: 100svh;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background: var(--orbi);
}

.connection-lines {
    position: absolute;
    inset: 0;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 5px
        ),

        radial-gradient(
            circle at 75% 35%,
            rgba(201,213,197,.22),
            transparent 42%
        );
}

.connection-content {
    position: relative;

    z-index: 2;

    max-width: 960px;
}

.connection
.display-heading {
    color: var(--white);
}

.connection
.display-heading em {
    color: #cbd5c8;
}

.connection-content p {
    max-width: 610px;

    margin-top: 45px;

    color:
        rgba(255,255,255,.73);
}


/* ============================================================
   NEW INTEGRATIONS
   ============================================================ */

.integrations {
    min-height: 100svh;

    padding: 120px 0;

    background: var(--paper-soft);
}

.integrations-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(420px, 1.05fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: center;
}

.integrations-copy
.display-heading {
    font-size:
        clamp(
            3.4rem,
            5.3vw,
            6.3rem
        );
}

.integrations-copy p {
    max-width: 570px;

    margin-top: 40px;
}


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

.integration-panel {
    position: relative;

    min-height: 520px;

    border:
        1px solid
        rgba(6,57,47,.1);

    border-radius: 28px;

    background:
        rgba(243,240,232,.55);

    overflow: hidden;
}

.integration-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(6,57,47,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6,57,47,.045) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}

.integration-orbi {
    position: absolute;

    z-index: 3;

    top: 50%;
    left: 50%;

    width: 110px;
    height: 110px;

    transform:
        translate(-50%, -50%);

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

    padding: 26px;

    border-radius: 25px;

    background: var(--ink);

    box-shadow:
        0 25px 60px
        rgba(6,57,47,.18);
}

.integration-orbi img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.integration-node {
    position: absolute;

    z-index: 3;

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

    min-width: 120px;
    min-height: 48px;

    padding: 0 20px;

    border:
        1px solid
        rgba(6,57,47,.12);

    border-radius: 12px;

    background:
        rgba(243,240,232,.92);

    font-size: .68rem;
    font-weight: 500;

    color: var(--orbi);

    box-shadow:
        0 10px 30px
        rgba(44,49,43,.045);
}

.node-one {
    top: 17%;
    left: 13%;
}

.node-two {
    top: 22%;
    right: 10%;
}

.node-three {
    right: 15%;
    bottom: 15%;
}

.integration-path {
    position: absolute;

    z-index: 2;

    height: 1px;

    background:
        rgba(6,57,47,.18);

    transform-origin: left center;
}

.path-one {
    width: 210px;

    top: 33%;
    left: 28%;

    transform: rotate(28deg);
}

.path-two {
    width: 190px;

    top: 44%;
    left: 54%;

    transform: rotate(-39deg);
}

.path-three {
    width: 190px;

    top: 55%;
    left: 56%;

    transform: rotate(39deg);
}


/* ============================================================
   IMPLEMENTATION / MIGRATION
   ============================================================ */

.implementation {
    min-height: 100svh;

    padding: 120px 0;

    background: var(--paper);
}

.implementation-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        minmax(260px, .42fr);

    gap:
        clamp(
            40px,
            7vw,
            100px
        );

    align-items: start;
}

.implementation-number {
    padding-top: 15px;

    font-size: .7rem;
    font-weight: 500;

    letter-spacing: .08em;

    color: var(--orbi);
}

.implementation-content
.display-heading {
    max-width: 830px;

    font-size:
        clamp(
            3.6rem,
            5.8vw,
            6.6rem
        );
}

.implementation-content p {
    max-width: 610px;

    margin-top: 44px;
}

.implementation-meta {
    padding-top: 18px;

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

.implementation-meta > div {
    padding: 20px 0;

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

.implementation-meta span {
    display: block;

    margin-bottom: 7px;

    font-size: .59rem;

    letter-spacing: .06em;
    text-transform: uppercase;

    color: var(--muted);
}

.implementation-meta strong {
    display: block;

    font-size: .78rem;
    font-weight: 500;

    color: var(--orbi);
}


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

.text-link {
    position: relative;

    display: inline-block;

    margin-top: 34px;

    padding-bottom: 6px;

    font-size: .75rem;
    font-weight: 500;

    color: var(--orbi);
}

.text-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform-origin: left;

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

.text-link:hover::after {
    transform: scaleX(.55);
}


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

.final-cta {
    position: relative;

    min-height: 100svh;

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

    overflow: hidden;

    color: var(--white);

    text-align: center;

    background: var(--orbi-deep);
}

.final-cta-background {
    position: absolute;
    inset: 0;

    background:

        radial-gradient(
            circle at 50% 25%,
            rgba(122,150,134,.36),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            transparent
        );
}

.final-cta-content {
    position: relative;

    z-index: 2;

    width:
        min(
            860px,
            calc(100% - 48px)
        );
}

.final-cta h2 {
    margin: 0;

    font-size:
        clamp(
            4.5rem,
            8vw,
            8rem
        );

    line-height: .9;

    font-weight: 500;

    letter-spacing: -.072em;
}

.final-cta h2 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #cbd5c8;
}

.final-cta p {
    max-width: 500px;

    margin:
        32px auto;

    font-size: .95rem;
    line-height: 1.75;

    color:
        rgba(255,255,255,.7);
}


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

.footer {
    position: relative;

    background: #e8e3d7;

    color: var(--ink);

    padding:
        100px 0 32px;
}

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(260px, .85fr)
        minmax(0, 1.6fr);

    gap:
        clamp(
            80px,
            11vw,
            170px
        );

    padding-bottom: 90px;
}

.footer-identity {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.footer-brand {
    width: 190px;
    height: 70px;

    display: flex;
    align-items: center;

    margin-bottom: 30px;
}

.footer-brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
}

.footer-identity p {
    max-width: 270px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.65;

    color: var(--ink-soft);
}

.footer-navigation {
    display: grid;

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

    gap: 32px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}

.footer-column > span {
    display: block;

    margin-bottom: 9px;

    font-size: .62rem;
    font-weight: 500;

    letter-spacing: .075em;

    text-transform: uppercase;

    color: var(--orbi);
}

.footer-column a {
    font-size: .77rem;
    line-height: 1.5;

    color: var(--ink-soft);

    transition:
        color .5s var(--ease),
        transform .5s var(--ease);
}

.footer-column a:hover {
    color: var(--orbi);

    transform: translateX(3px);
}

.footer-bottom {
    min-height: 70px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(6, 57, 47, .15);

    font-size: .62rem;

    color: var(--muted);
}


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

.reveal {
    opacity: 0;

    transform:
        translate3d(
            0,
            20px,
            0
        );

    filter: blur(5px);

    transition:
        opacity 1.35s var(--ease),
        transform 1.45s var(--ease),
        filter 1.4s var(--ease);

    will-change:
        opacity,
        transform,
        filter;
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    filter: blur(0);
}


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

@media (max-width: 1050px) {

    .section-container {
        width:
            min(
                calc(100% - 56px),
                var(--container)
            );
    }

    .site-header {
        width:
            calc(100% - 32px);

        top: 16px;

        padding: 0 16px;
    }

    .site-header.is-scrolled {
        width:
            calc(100% - 28px);

        top: 12px;
    }

    .nav-container {
        grid-template-columns:
            1fr auto;
    }

    .desktop-nav,
    .login-button {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .intro-layout,
    .ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .ecosystem-heading p {
        margin: 0;

        max-width: 600px;
    }

    .product-row {
        grid-template-columns:
            .75fr 1.25fr;

        gap: 40px;
    }

    .integrations-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .integration-panel {
        min-height: 470px;
    }

    .implementation-layout {
        grid-template-columns:
            60px 1fr;
    }

    .implementation-meta {
        grid-column:
            2 / 3;

        display: grid;

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

        gap: 20px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 70px;
    }

}


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

@media (max-width: 650px) {

    .section-container {
        width:
            calc(100% - 40px);
    }

    .site-header {
        top: 12px;

        width:
            calc(100% - 24px);

        height: 64px;

        padding: 0 12px;

        border-radius: 15px;
    }

    .site-header.is-scrolled {
        top: 9px;

        width:
            calc(100% - 18px);

        height: 62px;
    }

    .brand {
        width: 105px;
        height: 44px;
    }

    .hero {
        min-height: 100svh;
    }

    .hero-content {
        width:
            calc(100% - 38px);

        margin-top: -2vh;
    }

    .hero-title {
        font-size:
            clamp(
                3.25rem,
                15.5vw,
                5.1rem
            );

        line-height: .96;
    }

    .hero-description {
        max-width: 335px;

        margin-top: 25px;

        font-size: .88rem;
    }

    .hero-lines {
        left: -25%;
        right: -25%;

        height: 60%;
    }

    .display-heading {
        font-size:
            clamp(
                3.1rem,
                13.5vw,
                4.7rem
            );

        line-height: 1;
    }

    .intro {
        padding: 100px 0;
    }

    .ecosystem {
        padding: 105px 0;
    }

    .ecosystem-heading {
        margin-bottom: 60px;
    }

    .product-row {
        grid-template-columns: 1fr;

        gap: 12px;

        min-height: auto;

        padding: 26px 0;
    }

    .product-row:hover {
        padding: 26px 7px;
    }

    .product-name {
        font-size: 1.95rem;
    }

    .connection {
        padding: 100px 0;
    }

    .connection-content p {
        margin-top: 34px;
    }


    /* INTEGRATIONS */

    .integrations {
        padding: 100px 0;
    }

    .integrations-copy
    .display-heading {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }

    .integration-panel {
        min-height: 390px;

        border-radius: 20px;
    }

    .integration-orbi {
        width: 82px;
        height: 82px;

        padding: 19px;

        border-radius: 19px;
    }

    .integration-node {
        min-width: 90px;
        min-height: 42px;

        padding: 0 13px;

        font-size: .58rem;
    }

    .node-one {
        top: 13%;
        left: 7%;
    }

    .node-two {
        top: 17%;
        right: 6%;
    }

    .node-three {
        right: 8%;
        bottom: 12%;
    }


    /* IMPLEMENTATION */

    .implementation {
        padding: 100px 0;
    }

    .implementation-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .implementation-number {
        padding: 0;
    }

    .implementation-content
    .display-heading {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }

    .implementation-content p {
        margin-top: 32px;
    }

    .implementation-meta {
        grid-column: auto;

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 20px;
    }


    /* CTA */

    .final-cta h2 {
        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );
    }


    /* FOOTER */

    .footer {
        padding:
            72px 0 26px;
    }

    .footer-main {
        gap: 58px;

        padding-bottom: 65px;
    }

    .footer-brand {
        width: 160px;
        height: 60px;

        margin-bottom: 20px;
    }

    .footer-navigation {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            48px 30px;
    }

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        min-height: auto;

        padding-top: 24px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .reveal {
        opacity: 1;

        transform: none;

        filter: none;
    }

}

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


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

.solutions-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.solutions-hero-atmosphere {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 72% 32%,
            rgba(255, 255, 255, .9),
            transparent 38%
        ),
        radial-gradient(
            circle at 12% 75%,
            rgba(174, 187, 166, .16),
            transparent 36%
        );

    pointer-events: none;
}

.solutions-hero-inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .55fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: end;

    padding:
        150px 0 130px;
}

.solutions-hero-title h1 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            4.3rem,
            7.2vw,
            8rem
        );

    line-height: .94;

    font-weight: 500;

    letter-spacing: -.073em;

    text-wrap: balance;

    text-shadow:
        0 18px 55px
        rgba(32, 45, 37, .05);
}

.solutions-hero-side {
    padding-bottom: 8px;
}

.solutions-hero-side p {
    margin: 0;

    font-size:
        clamp(
            .9rem,
            1.1vw,
            1.02rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}

.solutions-hero-side .button {
    margin-top: 32px;
}

.solutions-hero-lines {
    position: absolute;

    z-index: 1;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(6,57,47,.055) 0,
            rgba(6,57,47,.055) 1px,
            transparent 1px,
            transparent 5px
        ),

        linear-gradient(
            to bottom,
            transparent,
            rgba(6,57,47,.05)
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );
}


/* ============================================================
   INTRO
   ============================================================ */

.solutions-intro {
    padding:
        120px 0;

    background:
        var(--paper-soft);
}

.solutions-intro-heading {
    max-width: 1040px;
}

.solutions-intro-bottom {
    display: grid;

    grid-template-columns:
        1fr .58fr;

    gap: 100px;

    margin-top:
        clamp(
            70px,
            11vh,
            130px
        );
}

.solutions-intro-bottom p {
    margin: 0;

    font-size:
        clamp(
            .95rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   AUDIENCES
   ============================================================ */

.solutions-audiences {
    padding:
        80px 0 130px;

    background:
        var(--paper);
}

.solution-audience {
    display: grid;

    grid-template-columns:
        90px
        minmax(280px, .75fr)
        minmax(350px, 1fr);

    gap:
        clamp(
            35px,
            6vw,
            90px
        );

    padding:
        65px 0;

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

.solution-audience:last-child {
    border-bottom:
        1px solid
        var(--border-green);
}

.solution-audience-number {
    padding-top: 8px;

    font-size: .65rem;
    font-weight: 500;

    letter-spacing: .08em;

    color: var(--orbi);
}

.solution-audience-title h2 {
    max-width: 430px;

    margin: 0;

    font-size:
        clamp(
            2.4rem,
            3.8vw,
            4.4rem
        );

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.06em;

    color: var(--orbi);
}

.solution-audience-content {
    max-width: 560px;
}

.solution-audience-content p {
    margin:
        0 0 32px;

    font-size: .92rem;

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}

.solution-audience-content ul {
    margin: 0;
    padding: 0;

    list-style: none;

    display: grid;

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

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

.solution-audience-content li {
    padding:
        13px 0;

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

    font-size: .7rem;

    color: var(--ink-soft);
}

.solution-audience-content li:nth-child(odd) {
    padding-right: 18px;
}

.solution-audience-content li:nth-child(even) {
    padding-left: 18px;
}


/* ============================================================
   DAILY WORK
   ============================================================ */

.solutions-work {
    position: relative;

    padding:
        120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        var(--orbi);
}

.solutions-work-lines {
    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 5px
        ),

        radial-gradient(
            circle at 75% 35%,
            rgba(201,213,197,.18),
            transparent 42%
        );
}

.solutions-work-layout {
    position: relative;

    z-index: 2;

    width: 100%;

    display: grid;

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

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: center;
}

.solutions-work .display-heading {
    color: var(--white);
}

.solutions-work-grid {
    display: grid;

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

    border-top:
        1px solid
        rgba(255,255,255,.2);

    border-left:
        1px solid
        rgba(255,255,255,.2);
}

.work-item {
    min-height: 220px;

    padding: 28px;

    border-right:
        1px solid
        rgba(255,255,255,.2);

    border-bottom:
        1px solid
        rgba(255,255,255,.2);

    transition:
        background-color .7s var(--ease);
}

.work-item:hover {
    background:
        rgba(255,255,255,.055);
}

.work-item > span {
    display: block;

    margin-bottom: 55px;

    font-size: .58rem;

    letter-spacing: .08em;

    color:
        rgba(255,255,255,.48);
}

.work-item h3 {
    margin:
        0 0 12px;

    font-size: 1.45rem;

    font-weight: 450;

    letter-spacing: -.045em;
}

.work-item p {
    margin: 0;

    font-size: .72rem;

    line-height: 1.65;

    color:
        rgba(255,255,255,.65);
}


/* ============================================================
   SAME ENVIRONMENT
   ============================================================ */

.solutions-environment {
    padding:
        120px 0;

    background:
        var(--paper-soft);
}

.solutions-environment-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(430px, 1.05fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: center;
}

.solutions-environment-copy p {
    max-width: 590px;

    margin:
        42px 0 0;

    font-size:
        clamp(
            .95rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.solutions-environment-visual {
    position: relative;

    min-height: 540px;
}

.environment-core {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width: 112px;
    height: 112px;

    transform:
        translate(-50%, -50%);

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

    padding: 27px;

    border-radius: 50%;

    background:
        var(--orbi);

    box-shadow:
        0 25px 70px
        rgba(6,57,47,.18);
}

.environment-core img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.environment-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(6,57,47,.13);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.environment-ring-one {
    width: 230px;
    height: 230px;
}

.environment-ring-two {
    width: 370px;
    height: 370px;
}

.environment-ring-three {
    width: 510px;
    height: 510px;

    border-color:
        rgba(6,57,47,.075);
}

.environment-label {
    position: absolute;

    z-index: 4;

    min-width: 115px;

    padding:
        13px 18px;

    border:
        1px solid
        rgba(6,57,47,.11);

    border-radius: 11px;

    background:
        rgba(243,240,232,.92);

    box-shadow:
        0 10px 35px
        rgba(41,48,42,.045);

    font-size: .65rem;
    font-weight: 500;

    color: var(--orbi);

    text-align: center;
}

.label-one {
    top: 7%;
    left: 50%;

    transform:
        translateX(-50%);
}

.label-two {
    top: 46%;
    right: 0;
}

.label-three {
    bottom: 5%;
    left: 49%;

    transform:
        translateX(-50%);
}

.label-four {
    top: 46%;
    left: 0;
}


/* ============================================================
   ADOPTION
   ============================================================ */

.solutions-adoption {
    padding:
        120px 0;

    background:
        var(--paper);
}

.solutions-adoption-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        1.15fr .65fr;

    gap:
        clamp(
            70px,
            11vw,
            170px
        );

    align-items: end;
}

.solutions-adoption-content {
    padding-bottom: 8px;
}

.solutions-adoption-content p {
    margin: 0;

    font-size:
        clamp(
            .95rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

@media (max-width: 1050px) {

    .solutions-hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;

        align-items: start;
    }

    .solutions-hero-side {
        max-width: 580px;
    }

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

    .solutions-intro-empty {
        display: none;
    }

    .solutions-intro-bottom p {
        max-width: 600px;
    }

    .solution-audience {
        grid-template-columns:
            60px
            .8fr
            1.2fr;
    }

    .solutions-work-layout,
    .solutions-environment-layout,
    .solutions-adoption-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .solutions-work-heading {
        max-width: 850px;
    }

    .solutions-work-grid {
        max-width: 700px;
    }

    .solutions-environment-visual {
        max-width: 600px;

        width: 100%;

        margin-inline: auto;
    }

    .solutions-adoption-content {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .solutions-hero-inner {
        min-height: 100svh;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            120px 0 80px;
    }

    .solutions-hero-title h1 {
        font-size:
            clamp(
                3.25rem,
                15vw,
                5rem
            );

        line-height: .96;
    }

    .solutions-hero-side {
        max-width: none;
    }

    .solutions-hero-lines {
        height: 14%;
    }


    /* INTRO */

    .solutions-intro {
        padding:
            100px 0;
    }

    .solutions-intro-bottom {
        margin-top: 55px;
    }


    /* AUDIENCES */

    .solutions-audiences {
        padding:
            40px 0 100px;
    }

    .solution-audience {
        grid-template-columns: 1fr;

        gap: 22px;

        padding:
            48px 0;
    }

    .solution-audience-number {
        padding: 0;
    }

    .solution-audience-title h2 {
        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            );
    }

    .solution-audience-content ul {
        grid-template-columns: 1fr;
    }

    .solution-audience-content li:nth-child(odd),
    .solution-audience-content li:nth-child(even) {
        padding:
            13px 0;
    }


    /* DAILY WORK */

    .solutions-work {
        padding:
            100px 0;
    }

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

    .work-item {
        min-height: 180px;
    }

    .work-item > span {
        margin-bottom: 38px;
    }


    /* ENVIRONMENT */

    .solutions-environment {
        padding:
            100px 0;
    }

    .solutions-environment-visual {
        min-height: 390px;
    }

    .environment-core {
        width: 82px;
        height: 82px;

        padding: 19px;
    }

    .environment-ring-one {
        width: 165px;
        height: 165px;
    }

    .environment-ring-two {
        width: 260px;
        height: 260px;
    }

    .environment-ring-three {
        width: 350px;
        height: 350px;
    }

    .environment-label {
        min-width: 90px;

        padding:
            10px 12px;

        font-size: .56rem;
    }

    .label-one {
        top: 3%;
    }

    .label-two {
        right: -2%;
    }

    .label-three {
        bottom: 2%;
    }

    .label-four {
        left: -2%;
    }


    /* ADOPTION */

    .solutions-adoption {
        padding:
            100px 0;
    }

}

/* ============================================================
   INTEGRATIONS PAGE
   ============================================================ */


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

.integrations-page-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.integrations-page-glow {
    position: absolute;

    top: -20%;
    right: -10%;

    width: 75vw;
    height: 75vw;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95),
            rgba(255,255,255,.22) 42%,
            transparent 70%
        );

    filter: blur(30px);
}

.integrations-page-hero-inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .55fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: end;

    padding:
        150px 0 130px;
}

.integrations-page-heading h1 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            4.5rem,
            7.7vw,
            8.4rem
        );

    line-height: .93;

    font-weight: 500;

    letter-spacing: -.075em;

    text-wrap: balance;

    text-shadow:
        0 18px 55px
        rgba(32,45,37,.05);
}

.integrations-page-intro {
    padding-bottom: 8px;
}

.integrations-page-intro p {
    margin: 0;

    font-size:
        clamp(
            .9rem,
            1.1vw,
            1.02rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}

.integrations-page-intro .button {
    margin-top: 32px;
}

.integrations-page-hero-lines {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6,57,47,.055) 0,
            rgba(6,57,47,.055) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(6,57,47,.05)
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );
}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.integrations-page-introduction {
    padding: 120px 0;

    background: var(--paper-soft);
}

.integrations-page-introduction-heading {
    max-width: 1080px;
}

.integrations-page-introduction-bottom {
    display: grid;

    grid-template-columns:
        1fr .58fr;

    gap: 100px;

    margin-top:
        clamp(
            70px,
            11vh,
            130px
        );
}

.integrations-page-introduction-bottom p {
    margin: 0;

    font-size:
        clamp(
            .95rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   IDENTITY & ACCESS
   ============================================================ */

.integration-access {
    padding: 120px 0;

    background: var(--paper);
}

.integration-access-heading {
    display: grid;

    grid-template-columns:
        1.2fr .55fr;

    gap:
        clamp(
            70px,
            11vw,
            170px
        );

    align-items: end;

    margin-bottom:
        clamp(
            70px,
            10vh,
            110px
        );
}

.integration-access-heading p {
    margin: 0;

    font-size: .94rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}

.integration-access-list {
    border-top:
        1px solid
        var(--border-green);
}

.integration-access-row {
    display: grid;

    grid-template-columns:
        90px
        minmax(260px, .8fr)
        minmax(350px, 1fr);

    gap:
        clamp(
            35px,
            6vw,
            90px
        );

    align-items: center;

    min-height: 150px;

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

    transition:
        padding-left .7s var(--ease),
        padding-right .7s var(--ease),
        background-color .7s var(--ease);
}

.integration-access-row:hover {
    padding:
        0 16px;

    background:
        rgba(6,57,47,.04);
}

.integration-access-number {
    font-size: .62rem;

    letter-spacing: .08em;

    color: var(--orbi);
}

.integration-access-company {
    font-size:
        clamp(
            2.3rem,
            3.8vw,
            4.2rem
        );

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.055em;

    color: var(--orbi);
}

.integration-access-description p {
    max-width: 510px;

    margin: 0;

    font-size: .84rem;
    line-height: 1.7;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   BUSINESS SERVICES
   ============================================================ */

.integration-services {
    padding: 120px 0;

    background: var(--paper-soft);
}

.integration-services-heading {
    display: grid;

    grid-template-columns:
        1.15fr .55fr;

    gap:
        clamp(
            70px,
            11vw,
            170px
        );

    align-items: end;

    margin-bottom:
        clamp(
            70px,
            10vh,
            110px
        );
}

.integration-services-heading p {
    margin: 0;

    font-size: .94rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   SERVICE CARDS
   ============================================================ */

.integration-services-grid {
    display: grid;

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

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

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

.integration-service-card {
    position: relative;

    min-height: 460px;

    padding:
        32px 42px 36px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        background-color .7s var(--ease);
}

.integration-service-card:first-child {
    border-right:
        1px solid
        var(--border-green);
}

.integration-service-card:hover {
    background:
        rgba(6,57,47,.035);
}

.integration-service-top {
    display: flex;

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

    font-size: .59rem;
    font-weight: 500;

    letter-spacing: .07em;

    text-transform: uppercase;

    color: var(--muted);
}

.integration-service-top span:first-child {
    color: var(--orbi);
}

.integration-service-content {
    max-width: 500px;
}

.integration-service-content h3 {
    margin:
        0 0 25px;

    font-size:
        clamp(
            2.8rem,
            4.6vw,
            5.2rem
        );

    line-height: .97;

    font-weight: 450;

    letter-spacing: -.065em;

    color: var(--orbi);
}

.integration-service-content p {
    max-width: 470px;

    margin: 0;

    font-size: .87rem;
    line-height: 1.75;

    color: var(--ink-soft);

    text-align: left;
}

.integration-service-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    padding-top: 26px;

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

.integration-service-meta span {
    padding:
        8px 11px;

    border:
        1px solid
        rgba(6,57,47,.12);

    border-radius: 7px;

    font-size: .59rem;

    color: var(--orbi);
}


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

.integration-network {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background: var(--orbi);
}

.integration-network-lines {
    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 75% 45%,
            rgba(201,213,197,.19),
            transparent 40%
        );
}

.integration-network-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(430px, 1.05fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: center;
}

.integration-network-copy
.display-heading {
    color: var(--white);
}

.integration-network-copy
.display-heading em {
    color: #cbd5c8;
}

.integration-network-copy p {
    max-width: 590px;

    margin:
        42px 0 0;

    font-size:
        clamp(
            .93rem,
            1.1vw,
            1.04rem
        );

    line-height: 1.8;

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

    text-align: left;
}


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

.integration-network-visual {
    position: relative;

    min-height: 580px;
}

.network-center {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width: 112px;
    height: 112px;

    transform:
        translate(-50%, -50%);

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

    padding: 27px;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.12);
}

.network-center img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.network-ring {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.network-ring-one {
    width: 285px;
    height: 285px;
}

.network-ring-two {
    width: 500px;
    height: 500px;

    border-color:
        rgba(255,255,255,.08);
}

.network-service {
    position: absolute;

    z-index: 4;

    min-width: 120px;

    padding:
        13px 20px;

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

    border-radius: 11px;

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

    backdrop-filter:
        blur(14px);

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

    font-size: .65rem;
    font-weight: 500;

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

    text-align: center;

    transition:
        background-color .6s var(--ease),
        transform .6s var(--ease),
        border-color .6s var(--ease);
}

.network-service:hover {
    background:
        rgba(255,255,255,.13);

    border-color:
        rgba(255,255,255,.26);
}


/* GOOGLE */

.network-google {
    top: 4%;
    left: 50%;

    transform:
        translateX(-50%);
}


/* MICROSOFT */

.network-microsoft {
    top: 31%;
    right: 0;
}


/* DYNAMICS */

.network-dynamics {
    right: 4%;
    bottom: 10%;
}


/* MERCADO PAGO */

.network-mercadopago {
    bottom: 5%;
    left: 18%;
}


/* APPLE */

.network-apple {
    top: 37%;
    left: 0;
}


/* ============================================================
   INSTITUTIONS
   ============================================================ */

.integration-institutions {
    padding: 120px 0;

    background: var(--paper);
}

.integration-institutions-layout {
    display: grid;

    grid-template-columns:
        1.15fr .65fr;

    gap:
        clamp(
            70px,
            11vw,
            170px
        );

    align-items: end;
}

.integration-institutions-copy {
    padding-bottom: 8px;
}

.integration-institutions-copy p {
    margin: 0;

    font-size:
        clamp(
            .95rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

@media (max-width: 1050px) {

    .integrations-page-hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .integrations-page-intro {
        max-width: 590px;
    }

    .integrations-page-introduction-bottom {
        grid-template-columns: 1fr;
    }

    .integrations-page-introduction-bottom > div {
        display: none;
    }

    .integrations-page-introduction-bottom p {
        max-width: 620px;
    }


    /* ACCESS */

    .integration-access-heading {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .integration-access-heading p {
        max-width: 600px;
    }

    .integration-access-row {
        grid-template-columns:
            60px
            .8fr
            1.2fr;
    }


    /* BUSINESS */

    .integration-services-heading {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .integration-services-heading p {
        max-width: 600px;
    }


    /* NETWORK */

    .integration-network-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .integration-network-visual {
        width: 100%;
        max-width: 600px;

        margin-inline: auto;
    }


    /* INSTITUTIONS */

    .integration-institutions-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .integration-institutions-copy {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    /* HERO */

    .integrations-page-hero-inner {
        min-height: 100svh;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            120px 0 80px;
    }

    .integrations-page-heading h1 {
        font-size:
            clamp(
                3.4rem,
                15.5vw,
                5.1rem
            );

        line-height: .95;
    }

    .integrations-page-hero-lines {
        height: 14%;
    }


    /* INTRO */

    .integrations-page-introduction {
        padding:
            100px 0;
    }

    .integrations-page-introduction-bottom {
        margin-top: 55px;
    }


    /* ACCESS */

    .integration-access {
        padding:
            100px 0;
    }

    .integration-access-row {
        grid-template-columns: 1fr;

        gap: 16px;

        min-height: auto;

        padding:
            35px 0;
    }

    .integration-access-row:hover {
        padding:
            35px 7px;
    }

    .integration-access-company {
        font-size:
            clamp(
                2.5rem,
                12vw,
                4rem
            );
    }


    /* BUSINESS SERVICES */

    .integration-services {
        padding:
            100px 0;
    }

    .integration-services-grid {
        grid-template-columns: 1fr;
    }

    .integration-service-card {
        min-height: 400px;

        padding:
            28px 0 32px;
    }

    .integration-service-card:first-child {
        border-right: 0;

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

    .integration-service-content h3 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.4rem
            );
    }


    /* NETWORK */

    .integration-network {
        padding:
            100px 0;
    }

    .integration-network-visual {
        min-height: 430px;
    }

    .network-center {
        width: 82px;
        height: 82px;

        padding: 19px;
    }

    .network-ring-one {
        width: 190px;
        height: 190px;
    }

    .network-ring-two {
        width: 350px;
        height: 350px;
    }

    .network-service {
        min-width: 84px;

        padding:
            9px 10px;

        font-size: .53rem;
    }

    .network-google {
        top: 3%;
    }

    .network-microsoft {
        top: 29%;
        right: -2%;
    }

    .network-dynamics {
        right: 0;
        bottom: 8%;
    }

    .network-mercadopago {
        bottom: 4%;
        left: 4%;
    }

    .network-apple {
        top: 34%;
        left: -2%;
    }


    /* INSTITUTIONS */

    .integration-institutions {
        padding:
            100px 0;
    }

}

/* ============================================================
   ABOUT / NOSOTROS
   ============================================================ */


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

.about-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.about-hero-glow {
    position: absolute;

    top: -20%;
    right: -12%;

    width: 78vw;
    height: 78vw;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95),
            rgba(255,255,255,.22) 42%,
            transparent 70%
        );

    filter: blur(35px);

    pointer-events: none;
}

.about-hero-inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .55fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: end;

    padding:
        150px 0 130px;
}

.about-hero-heading h1 {
    max-width: 980px;

    margin: 0;

    font-size:
        clamp(
            4.3rem,
            7.2vw,
            7.9rem
        );

    line-height: .94;

    font-weight: 500;

    letter-spacing: -.073em;

    text-wrap: balance;

    text-shadow:
        0 18px 55px
        rgba(32,45,37,.05);
}

.about-hero-copy {
    padding-bottom: 8px;
}

.about-hero-copy p {
    margin: 0;

    font-size:
        clamp(
            .9rem,
            1.1vw,
            1.02rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}

.about-hero-copy .button {
    margin-top: 32px;
}

.about-hero-lines {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6,57,47,.055) 0,
            rgba(6,57,47,.055) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(6,57,47,.05)
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black
        );
}


/* ============================================================
   DEFINITION
   ============================================================ */

.about-definition {
    padding: 120px 0;

    background: var(--paper-soft);
}

.about-definition-heading {
    max-width: 1080px;
}

.about-definition-bottom {
    display: grid;

    grid-template-columns:
        1fr .62fr;

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    margin-top:
        clamp(
            70px,
            11vh,
            130px
        );
}

.about-definition-copy {
    display: flex;
    flex-direction: column;

    gap: 25px;
}

.about-definition-copy p {
    margin: 0;

    font-size:
        clamp(
            .94rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRINCIPLES
   ============================================================ */

.about-principles {
    padding: 130px 0;

    background: var(--paper);
}

.about-principles-heading {
    max-width: 850px;

    margin-bottom:
        clamp(
            80px,
            12vh,
            140px
        );
}

.about-principles-list {
    border-top:
        1px solid
        var(--border-green);
}

.about-principle {
    display: grid;

    grid-template-columns:
        90px
        minmax(280px, .8fr)
        minmax(350px, 1fr);

    gap:
        clamp(
            35px,
            6vw,
            90px
        );

    align-items: center;

    min-height: 180px;

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

    transition:
        padding-left .7s var(--ease),
        padding-right .7s var(--ease),
        background-color .7s var(--ease);
}

.about-principle:hover {
    padding:
        0 16px;

    background:
        rgba(6,57,47,.035);
}

.about-principle-number {
    font-size: .62rem;

    letter-spacing: .08em;

    color: var(--orbi);
}

.about-principle-title h3 {
    margin: 0;

    font-size:
        clamp(
            2.3rem,
            3.7vw,
            4.2rem
        );

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.055em;

    color: var(--orbi);
}

.about-principle-copy p {
    max-width: 520px;

    margin: 0;

    font-size: .86rem;

    line-height: 1.75;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCT PHILOSOPHY
   ============================================================ */

.about-product {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background: var(--orbi);
}

.about-product-lines {
    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 75% 38%,
            rgba(201,213,197,.19),
            transparent 42%
        );
}

.about-product-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .55fr);

    gap:
        clamp(
            70px,
            11vw,
            170px
        );

    align-items: end;
}

.about-product
.display-heading {
    color: var(--white);
}

.about-product
.display-heading em {
    color: #cbd5c8;
}

.about-product-copy {
    display: flex;
    flex-direction: column;

    gap: 24px;

    padding-bottom: 8px;
}

.about-product-copy p {
    margin: 0;

    font-size:
        clamp(
            .91rem,
            1.08vw,
            1rem
        );

    line-height: 1.8;

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

    text-align: left;
}


/* ============================================================
   COMMUNITY
   ============================================================ */

.about-community {
    padding: 120px 0;

    background: var(--paper-soft);
}

.about-community-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, .9fr);

    gap:
        clamp(
            70px,
            10vw,
            150px
        );

    align-items: center;
}

.about-community-grid {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.about-community-item {
    min-height: 230px;

    padding: 28px;

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

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

    transition:
        background-color .7s var(--ease);
}

.about-community-item:hover {
    background:
        rgba(6,57,47,.04);
}

.about-community-item > span {
    display: block;

    margin-bottom: 55px;

    font-size: .58rem;

    letter-spacing: .08em;

    color: var(--muted);
}

.about-community-item h3 {
    margin:
        0 0 13px;

    font-size: 1.45rem;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);
}

.about-community-item p {
    margin: 0;

    font-size: .71rem;

    line-height: 1.65;

    color: var(--ink-soft);
}


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

.about-statement {
    padding: 120px 0;

    background: var(--paper);
}

.about-statement-content {
    max-width: 1120px;
}

.about-statement-content > p {
    max-width: 500px;

    margin:
        0 0 45px;

    font-size: .84rem;

    line-height: 1.75;

    color: var(--ink-soft);
}

.about-statement-content h2 {
    max-width: 1100px;

    margin: 0;

    font-size:
        clamp(
            4rem,
            6.8vw,
            7.4rem
        );

    line-height: .96;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--orbi);

    text-wrap: balance;

    text-shadow:
        0 18px 55px
        rgba(6,57,47,.06);
}


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

@media (max-width: 1050px) {

    .about-hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-hero-copy {
        max-width: 590px;
    }


    /* DEFINITION */

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

    .about-definition-bottom > div:first-child {
        display: none;
    }

    .about-definition-copy {
        max-width: 620px;
    }


    /* PRINCIPLES */

    .about-principle {
        grid-template-columns:
            60px
            .8fr
            1.2fr;
    }


    /* PRODUCT */

    .about-product-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .about-product-copy {
        max-width: 600px;
    }


    /* COMMUNITY */

    .about-community-layout {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .about-community-grid {
        max-width: 700px;
    }

}


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

@media (max-width: 650px) {

    /* HERO */

    .about-hero-inner {
        min-height: 100svh;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            120px 0 80px;
    }

    .about-hero-heading h1 {
        font-size:
            clamp(
                3.25rem,
                15vw,
                5rem
            );

        line-height: .96;
    }

    .about-hero-lines {
        height: 14%;
    }


    /* DEFINITION */

    .about-definition {
        padding:
            100px 0;
    }

    .about-definition-bottom {
        margin-top: 55px;
    }


    /* PRINCIPLES */

    .about-principles {
        padding:
            100px 0;
    }

    .about-principles-heading {
        margin-bottom: 65px;
    }

    .about-principle {
        grid-template-columns: 1fr;

        gap: 18px;

        min-height: auto;

        padding:
            38px 0;
    }

    .about-principle:hover {
        padding:
            38px 7px;
    }

    .about-principle-title h3 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                4rem
            );
    }


    /* PRODUCT */

    .about-product {
        padding:
            100px 0;
    }


    /* COMMUNITY */

    .about-community {
        padding:
            100px 0;
    }

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

    .about-community-item {
        min-height: 190px;
    }

    .about-community-item > span {
        margin-bottom: 40px;
    }


    /* STATEMENT */

    .about-statement {
        padding:
            100px 0;
    }

    .about-statement-content h2 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                5rem
            );
    }

}

/* ============================================================
   ORBI PLATFORMS — CONTACTO
   NUEVA VERSIÓN AISLADA
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.orbi-contact {
    width: 100%;
    overflow: hidden;

    font-family: "Poppins", sans-serif;

    background: #f3f0e8;
    color: #252824;
}


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


.orbi-contact-container {
    width: min(1280px, calc(100% - 80px));

    margin-inline: auto;
}


.orbi-contact-label {
    display: block;

    font-size: 11px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: #06392f;
}


.orbi-contact-index {
    display: block;

    font-size: 10px;
    line-height: 1;

    letter-spacing: .1em;

    color: #747a73;
}


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

.orbi-contact-hero {
    position: relative;

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 150px 0 80px;

    background: #f3f0e8;
}


.orbi-contact-hero-light {
    position: absolute;

    top: -350px;
    right: -230px;

    width: 900px;
    height: 900px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .5) 30%,
            rgba(255, 255, 255, .12) 53%,
            transparent 72%
        );

    filter: blur(25px);

    pointer-events: none;
}


.orbi-contact-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 130px;

    opacity: .55;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .045) 0,
            rgba(6, 57, 47, .045) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    pointer-events: none;
}


.orbi-contact-hero .orbi-contact-container {
    position: relative;
    z-index: 2;
}


.orbi-contact-hero-layout {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;

    gap: 100px;

    align-items: center;
}


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

.orbi-contact-hero-copy {
    width: 100%;
    max-width: 850px;
}


.orbi-contact-hero-copy .orbi-contact-label {
    margin-bottom: 30px;
}


.orbi-contact-hero-copy h1 {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: clamp(72px, 7vw, 112px) !important;
    line-height: .92 !important;

    font-weight: 500 !important;

    letter-spacing: -.075em !important;

    color: #252824 !important;

    text-align: left !important;
}


.orbi-contact-hero-copy p {
    width: 100%;
    max-width: 520px;

    margin: 45px 0 0 !important;

    font-size: 14px !important;
    line-height: 1.85 !important;

    font-weight: 400 !important;

    color: #555b54 !important;

    text-align: left !important;
}


.orbi-contact-primary {
    display: inline-flex;

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

    min-height: 45px;

    margin-top: 30px;

    padding: 0 21px;

    border: 1px solid #06392f;
    border-radius: 10px;

    background: #06392f;

    color: #ffffff !important;

    font-size: 11px;
    font-weight: 500;

    text-decoration: none !important;

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        background-color .4s ease,
        box-shadow .4s ease;
}


.orbi-contact-primary:hover {
    transform: translateY(-2px);

    background: #042b24;

    box-shadow:
        0 10px 28px rgba(6, 57, 47, .13);
}


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

.orbi-contact-hero-mark {
    position: relative;

    width: 320px;
    height: 320px;

    display: flex;

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


.orbi-contact-mark-circle {
    position: relative;
    z-index: 3;

    width: 110px;
    height: 110px;

    display: flex;

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

    border-radius: 50%;

    background: #06392f;

    box-shadow:
        0 25px 60px rgba(6, 57, 47, .14);
}


.orbi-contact-mark-circle img {
    display: block;

    width: 45px;
    height: 45px;

    object-fit: contain;
}


.orbi-contact-mark-ring {
    position: absolute;

    width: 210px;
    height: 210px;

    border: 1px solid rgba(6, 57, 47, .12);
    border-radius: 50%;
}


.orbi-contact-mark-ring.is-second {
    width: 310px;
    height: 310px;

    border-color: rgba(6, 57, 47, .07);
}


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

.orbi-contact-form-section {
    width: 100%;

    padding: 135px 0;

    background: #ebe6da;
}


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

.orbi-contact-form-heading {
    width: 100%;

    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) 360px;

    gap: 60px;

    align-items: end;

    margin-bottom: 85px;
}


.orbi-contact-form-heading > .orbi-contact-index {
    align-self: start;

    padding-top: 12px;
}


.orbi-contact-form-heading .orbi-contact-label {
    margin-bottom: 20px;
}


.orbi-contact-form-heading h2 {
    width: 100%;
    max-width: 690px;

    margin: 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: clamp(48px, 4.5vw, 72px) !important;
    line-height: .97 !important;

    font-weight: 500 !important;

    letter-spacing: -.06em !important;

    color: #06392f !important;
}


.orbi-contact-form-heading > p {
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.8 !important;

    color: #555b54 !important;

    text-align: left !important;
}


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

.orbi-contact-form {
    width: 100%;

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

    column-gap: 60px;
    row-gap: 42px;

    padding: 60px;

    border: 1px solid rgba(6, 57, 47, .11);
    border-radius: 18px;

    background: rgba(248, 246, 240, .76);

    box-shadow:
        0 25px 70px rgba(32, 40, 35, .035);
}


.orbi-contact-field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.orbi-contact-field-wide {
    grid-column: 1 / -1;
}


.orbi-contact-field label {
    margin: 0;

    font-size: 10px;
    line-height: 1.4;

    font-weight: 500;

    color: #555b54;
}


.orbi-contact-field input,
.orbi-contact-field select,
.orbi-contact-field textarea {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 10px 0 13px;

    border: 0;
    border-bottom: 1px solid rgba(6, 57, 47, .18);
    border-radius: 0;

    outline: none;

    background: transparent;

    box-shadow: none;

    font-family: "Poppins", sans-serif;

    font-size: 13px;
    line-height: 1.55;

    font-weight: 400;

    color: #252824;

    transition:
        border-color .3s ease;
}


.orbi-contact-field input {
    height: 44px;
}


.orbi-contact-field select {
    height: 44px;

    cursor: pointer;
}


.orbi-contact-field textarea {
    min-height: 150px;

    resize: vertical;

    line-height: 1.75;
}


.orbi-contact-field input::placeholder,
.orbi-contact-field textarea::placeholder {
    color: rgba(85, 91, 84, .46);

    opacity: 1;
}


.orbi-contact-field input:hover,
.orbi-contact-field select:hover,
.orbi-contact-field textarea:hover {
    border-bottom-color: rgba(6, 57, 47, .35);
}


.orbi-contact-field input:focus,
.orbi-contact-field select:focus,
.orbi-contact-field textarea:focus {
    border-bottom-color: #06392f;
}


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

.orbi-contact-form-actions {
    grid-column: 1 / -1;

    display: flex;

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

    gap: 35px;
}


.orbi-contact-form-actions p {
    max-width: 330px;

    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.65 !important;

    color: #747a73 !important;
}


.orbi-contact-submit {
    min-height: 45px;

    display: inline-flex;

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

    padding: 0 22px;

    border: 1px solid #06392f;
    border-radius: 10px;

    background: #06392f;

    font-family: "Poppins", sans-serif;

    font-size: 11px;
    font-weight: 500;

    color: #ffffff;

    cursor: pointer;

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        background-color .4s ease,
        box-shadow .4s ease;
}


.orbi-contact-submit:hover {
    transform: translateY(-2px);

    background: #042b24;

    box-shadow:
        0 10px 25px rgba(6, 57, 47, .12);
}


.orbi-contact-status {
    display: none;

    grid-column: 1 / -1;

    font-size: 10px;

    color: #06392f;
}


.orbi-contact-status:not(:empty) {
    display: block;
}


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

.orbi-contact-process {
    width: 100%;

    padding: 135px 0;

    background: #f3f0e8;
}


.orbi-contact-process-heading {
    display: grid;
    grid-template-columns: 55px 1fr;

    gap: 60px;

    align-items: start;

    margin-bottom: 80px;
}


.orbi-contact-process-heading > .orbi-contact-index {
    padding-top: 12px;
}


.orbi-contact-process-heading .orbi-contact-label {
    margin-bottom: 20px;
}


.orbi-contact-process-heading h2 {
    max-width: 750px;

    margin: 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: clamp(48px, 4.5vw, 72px) !important;
    line-height: .97 !important;

    font-weight: 500 !important;

    letter-spacing: -.06em !important;

    color: #06392f !important;
}


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

.orbi-contact-process-list {
    width: 100%;

    border-top: 1px solid rgba(6, 57, 47, .15);
}


.orbi-contact-process-row {
    width: 100%;
    min-height: 145px;

    display: grid;
    grid-template-columns: 55px minmax(280px, .85fr) minmax(280px, 1fr);

    gap: 60px;

    align-items: center;

    border-bottom: 1px solid rgba(6, 57, 47, .15);
}


.orbi-contact-process-row > span {
    font-size: 9px;

    letter-spacing: .08em;

    color: #747a73;
}


.orbi-contact-process-row h3 {
    margin: 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: clamp(24px, 2vw, 34px) !important;
    line-height: 1.08 !important;

    font-weight: 450 !important;

    letter-spacing: -.045em !important;

    color: #06392f !important;
}


.orbi-contact-process-row p {
    width: 100%;
    max-width: 430px;

    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.75 !important;

    color: #555b54 !important;
}


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

.orbi-contact-closing {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 125px 0;

    background: #06392f;

    color: #ffffff;
}


.orbi-contact-closing-light {
    position: absolute;

    top: -300px;
    right: -200px;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .09),
            transparent 68%
        );

    pointer-events: none;
}


.orbi-contact-closing .orbi-contact-container {
    position: relative;
    z-index: 2;
}


.orbi-contact-closing-layout {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 340px;

    gap: 100px;

    align-items: end;
}


.orbi-contact-closing-label {
    display: block;

    margin-bottom: 28px;

    font-size: 10px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .11em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .5);
}


.orbi-contact-closing h2 {
    width: 100%;
    max-width: 780px;

    margin: 0 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: clamp(52px, 5vw, 80px) !important;
    line-height: .96 !important;

    font-weight: 500 !important;

    letter-spacing: -.065em !important;

    color: #ffffff !important;
}


.orbi-contact-closing-side p {
    max-width: 340px;

    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.8 !important;

    color: rgba(255, 255, 255, .7) !important;
}


.orbi-contact-secondary {
    min-height: 44px;

    display: inline-flex;

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

    margin-top: 28px;

    padding: 0 20px;

    border: 1px solid #f3f0e8;
    border-radius: 10px;

    background: #f3f0e8;

    color: #06392f !important;

    font-size: 11px;
    font-weight: 500;

    text-decoration: none !important;

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        background-color .4s ease;
}


.orbi-contact-secondary:hover {
    transform: translateY(-2px);

    background: #ffffff;
}


/* ============================================================
   PRODUCTOS — FLECHA
   ============================================================ */

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


.dropdown-indicator {
    width: 6px;
    height: 6px;

    margin-top: -3px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    opacity: .5;

    transform: rotate(45deg);

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        opacity .35s ease;
}


.nav-dropdown.is-open .dropdown-indicator {
    opacity: .9;

    transform:
        translateY(3px)
        rotate(225deg);
}


.mobile-products-trigger {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.mobile-products-indicator {
    width: 7px;
    height: 7px;

    margin-top: -4px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    opacity: .55;

    transform: rotate(45deg);

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1);
}


.mobile-products.is-open .mobile-products-indicator {
    transform:
        translateY(4px)
        rotate(225deg);
}


/* ============================================================
   1050 PX
   ============================================================ */

@media (max-width: 1050px) {

    .orbi-contact-container {
        width: min(100% - 60px, 1280px);
    }


    .orbi-contact-hero-layout {
        grid-template-columns: 1fr 260px;

        gap: 60px;
    }


    .orbi-contact-hero-mark {
        width: 250px;
        height: 250px;
    }


    .orbi-contact-mark-ring {
        width: 175px;
        height: 175px;
    }


    .orbi-contact-mark-ring.is-second {
        width: 245px;
        height: 245px;
    }


    .orbi-contact-form-heading {
        grid-template-columns: 45px 1fr;

        gap: 40px;
    }


    .orbi-contact-form-heading > p {
        grid-column: 2;

        max-width: 500px;
    }


    .orbi-contact-process-heading {
        grid-template-columns: 45px 1fr;

        gap: 40px;
    }


    .orbi-contact-process-row {
        grid-template-columns:
            45px
            minmax(230px, .8fr)
            1fr;

        gap: 40px;
    }


    .orbi-contact-closing-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 60px;
    }

}


/* ============================================================
   800 PX
   ============================================================ */

@media (max-width: 800px) {

    .orbi-contact-container {
        width: calc(100% - 48px);
    }


    .orbi-contact-hero-layout {
        grid-template-columns: 1fr;
    }


    .orbi-contact-hero-mark {
        display: none;
    }


    .orbi-contact-hero-copy {
        max-width: 720px;
    }


    .orbi-contact-form {
        grid-template-columns: 1fr;

        padding: 40px 32px;
    }


    .orbi-contact-field-wide,
    .orbi-contact-form-actions,
    .orbi-contact-status {
        grid-column: auto;
    }


    .orbi-contact-process-row {
        grid-template-columns: 45px 1fr;

        gap: 25px 35px;

        padding: 30px 0;
    }


    .orbi-contact-process-row p {
        grid-column: 2;
    }


    .orbi-contact-closing-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .orbi-contact-closing-side {
        max-width: 480px;
    }

}


/* ============================================================
   650 PX
   ============================================================ */

@media (max-width: 650px) {

    .orbi-contact-container {
        width: calc(100% - 38px);
    }


    /* HERO */

    .orbi-contact-hero {
        min-height: 100svh;

        padding:
            120px 0
            65px;
    }


    .orbi-contact-hero-light {
        top: -160px;
        right: -440px;

        width: 760px;
        height: 760px;
    }


    .orbi-contact-hero-copy .orbi-contact-label {
        margin-bottom: 23px;
    }


    .orbi-contact-hero-copy h1 {
        font-size: clamp(56px, 18vw, 76px) !important;
        line-height: .94 !important;
    }


    .orbi-contact-hero-copy p {
        max-width: 470px;

        margin-top: 32px !important;

        font-size: 13px !important;
    }


    /* FORM */

    .orbi-contact-form-section {
        padding: 90px 0;
    }


    .orbi-contact-form-heading {
        display: block;

        margin-bottom: 52px;
    }


    .orbi-contact-form-heading > .orbi-contact-index {
        margin-bottom: 24px;

        padding: 0;
    }


    .orbi-contact-form-heading h2 {
        font-size: clamp(42px, 13vw, 58px) !important;
    }


    .orbi-contact-form-heading > p {
        margin-top: 28px !important;

        font-size: 12px !important;
    }


    .orbi-contact-form {
        row-gap: 29px;

        padding: 30px 21px;

        border-radius: 15px;
    }


    .orbi-contact-form-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 21px;
    }


    .orbi-contact-form-actions p {
        max-width: none;
    }


    .orbi-contact-submit {
        width: 100%;

        min-height: 47px;
    }


    /* PROCESS */

    .orbi-contact-process {
        padding: 90px 0;
    }


    .orbi-contact-process-heading {
        display: block;

        margin-bottom: 52px;
    }


    .orbi-contact-process-heading > .orbi-contact-index {
        margin-bottom: 24px;

        padding: 0;
    }


    .orbi-contact-process-heading h2 {
        font-size: clamp(42px, 13vw, 58px) !important;
    }


    .orbi-contact-process-row {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 30px 0;
    }


    .orbi-contact-process-row h3 {
        margin-top: 12px !important;

        font-size: 27px !important;
    }


    .orbi-contact-process-row p {
        grid-column: auto;

        max-width: 470px;
    }


    /* CLOSING */

    .orbi-contact-closing {
        padding: 90px 0;
    }


    .orbi-contact-closing-layout {
        gap: 35px;
    }


    .orbi-contact-closing-label {
        margin-bottom: 24px;
    }


    .orbi-contact-closing h2 {
        font-size: clamp(46px, 14vw, 64px) !important;
    }


    .orbi-contact-closing-side p {
        font-size: 12px !important;
    }

}


/* ============================================================
   390 PX
   ============================================================ */

@media (max-width: 390px) {

    .orbi-contact-container {
        width: calc(100% - 32px);
    }


    .orbi-contact-hero-copy h1 {
        font-size: 54px !important;
    }


    .orbi-contact-form {
        padding: 27px 18px;
    }


    .orbi-contact-form-heading h2,
    .orbi-contact-process-heading h2 {
        font-size: 40px !important;
    }


    .orbi-contact-closing h2 {
        font-size: 44px !important;
    }

}

/* ============================================================
   ORBI PLATFORMS
   EXTENDED LINE SYSTEM
   ------------------------------------------------------------
   Extiende el lenguaje de líneas de Orbi a todo el sitio.
   No requiere cambios en HTML.
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

/*
   Las secciones seleccionadas se convierten en su propio
   contexto visual para que las líneas nunca interfieran
   con otras secciones.
*/

.intro,
.integrations,
.implementation,

.solutions-intro,
.solutions-adoption,

.integrations-page-introduction,
.integration-access,
.integration-services,
.integration-institutions,

.about-intro,
.about-principles,
.about-community,
.about-statement,

.orbi-contact-form-section,
.orbi-contact-process,
.orbi-contact-closing {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/*
   Todo el contenido real queda SIEMPRE por encima
   de las líneas decorativas.
*/

.intro > *,
.integrations > *,
.implementation > *,

.solutions-intro > *,
.solutions-adoption > *,

.integrations-page-introduction > *,
.integration-access > *,
.integration-services > *,
.integration-institutions > *,

.about-intro > *,
.about-principles > *,
.about-community > *,
.about-statement > *,

.orbi-contact-form-section > *,
.orbi-contact-process > *,
.orbi-contact-closing > * {
    position: relative;
    z-index: 2;
}



/* ============================================================
   01 — INICIO
   INTRO
   Líneas entrando desde abajo.
   ============================================================ */

.intro::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 40%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .032) 0,
            rgba(6, 57, 47, .032) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, .18) 30%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, .18) 30%,
            #000 100%
        );
}



/* ============================================================
   02 — INICIO
   INTEGRACIONES
   Zona de líneas localizada a la derecha.
   ============================================================ */

.integrations::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000 0%,
            rgba(0, 0, 0, .65) 35%,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000 0%,
            rgba(0, 0, 0, .65) 35%,
            transparent 76%
        );
}



/* ============================================================
   03 — INICIO
   IMPLEMENTACIÓN
   Líneas inferiores.
   ============================================================ */

.implementation::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .03) 0,
            rgba(6, 57, 47, .03) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   04 — SOLUCIONES
   INTRO
   ============================================================ */

.solutions-intro::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .03) 0,
            rgba(6, 57, 47, .03) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, .25) 35%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, .25) 35%,
            #000 100%
        );
}



/* ============================================================
   05 — SOLUCIONES
   ADOPCIÓN
   Líneas laterales.
   ============================================================ */

.solutions-adoption::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 48%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .026) 0,
            rgba(6, 57, 47, .026) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .3) 38%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .3) 38%,
            #000 100%
        );
}



/* ============================================================
   06 — INTEGRACIONES
   INTRODUCCIÓN
   ============================================================ */

.integrations-page-introduction::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 40%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .032) 0,
            rgba(6, 57, 47, .032) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   07 — INTEGRACIONES
   ACCESO
   ============================================================ */

.integration-access::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .022) 0,
            rgba(6, 57, 47, .022) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 74%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 74%
        );
}



/* ============================================================
   08 — INTEGRACIONES
   SERVICIOS EMPRESARIALES
   ============================================================ */

.integration-services::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 34%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .027) 0,
            rgba(6, 57, 47, .027) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   09 — INTEGRACIONES
   INSTITUCIONES
   ============================================================ */

.integration-institutions::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;

    width: 45%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent
        );

    mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent
        );
}



/* ============================================================
   10 — NOSOTROS
   INTRO
   ============================================================ */

.about-intro::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .03) 0,
            rgba(6, 57, 47, .03) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   11 — NOSOTROS
   PRINCIPIOS
   ============================================================ */

.about-principles::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 45%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 75%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 75%
        );
}



/* ============================================================
   12 — NOSOTROS
   COMUNIDAD
   ============================================================ */

.about-community::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 36%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .028) 0,
            rgba(6, 57, 47, .028) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   13 — NOSOTROS
   STATEMENT
   ============================================================ */

.about-statement::after {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .022) 0,
            rgba(6, 57, 47, .022) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000,
            transparent 75%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000,
            transparent 75%
        );
}



/* ============================================================
   14 — CONTACTO
   FORMULARIO
   ============================================================ */

.orbi-contact-form-section::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 40%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .032) 0,
            rgba(6, 57, 47, .032) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}



/* ============================================================
   15 — CONTACTO
   PROCESO
   ============================================================ */

.orbi-contact-process::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .022) 0,
            rgba(6, 57, 47, .022) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}



/* ============================================================
   16 — CONTACTO
   CIERRE VERDE
   ============================================================ */

.orbi-contact-closing::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 0,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .35),
            #000 55%,
            rgba(0, 0, 0, .45)
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .35),
            #000 55%,
            rgba(0, 0, 0, .45)
        );
}



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

@media (max-width: 650px) {

    /*
       En móvil las reducimos para que no compitan
       con los textos grandes.
    */

    .intro::before,
    .implementation::before,
    .solutions-intro::before,
    .integrations-page-introduction::before,
    .integration-services::before,
    .about-intro::before,
    .about-community::before,
    .orbi-contact-form-section::before {
        height: 28%;
    }


    .integrations::after,
    .solutions-adoption::after,
    .integration-access::after,
    .integration-institutions::after,
    .about-principles::after,
    .orbi-contact-process::after {
        width: 68%;

        opacity: .72;
    }


    .about-statement::after {
        opacity: .7;
    }


    .orbi-contact-closing::before {
        opacity: .85;
    }

}

/* ============================================================
   ORBI PLATFORMS — FAMILIAS
   /familias/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.familias-page {
    background: var(--paper);
}

.familias-label,
.familias-index {
    display: block;

    font-size: .62rem;
    font-weight: 500;

    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.familias-index-light {
    color: rgba(255, 255, 255, .45);
}

.familias-label-light {
    color: rgba(255, 255, 255, .55);
}


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

.familias-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.familias-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 34%,
            rgba(255, 255, 255, .94),
            rgba(255, 255, 255, .3) 30%,
            transparent 52%
        );
}

.familias-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .045) 0,
            rgba(6, 57, 47, .045) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}

.familias-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, .8fr);

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    align-items: center;

    padding:
        150px 0
        110px;
}


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

.familias-hero-copy {
    min-width: 0;

    max-width: 780px;
}

.familias-hero-copy .familias-label {
    margin-bottom: 28px;
}

.familias-hero-copy h1 {
    max-width: 780px;

    margin: 0;

    font-size:
        clamp(
            4rem,
            6.6vw,
            7.3rem
        );

    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    text-wrap: balance;

    color: var(--ink);

    text-shadow:
        0 16px 48px
        rgba(35, 49, 40, .05);
}

.familias-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.familias-hero-copy p {
    max-width: 560px;

    margin:
        34px 0 0;

    font-size:
        clamp(
            .9rem,
            1.1vw,
            1rem
        );

    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.familias-hero-copy .button {
    margin-top: 30px;
}


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

.familias-hero-visual {
    position: relative;

    width: min(100%, 430px);

    aspect-ratio: 1 / 1;

    justify-self: end;
}

.familias-hero-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(6, 57, 47, .12);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.familias-hero-orbit-one {
    width: 100%;
    height: 100%;
}

.familias-hero-orbit-two {
    width: 66%;
    height: 66%;
}

.familias-hero-center {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;

    width: 96px;
    height: 96px;

    transform:
        translate(-50%, -50%);

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

    padding: 25px;

    border-radius: 24px;

    background: var(--orbi);

    box-shadow:
        0 24px 60px
        rgba(6, 57, 47, .16);
}

.familias-hero-center img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.familias-hero-node {
    position: absolute;
    z-index: 4;

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

    min-height: 44px;

    padding: 0 16px;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 10px;

    background:
        rgba(243, 240, 232, .9);

    box-shadow:
        0 10px 30px
        rgba(44, 49, 43, .04);

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

    font-size: .62rem;
    font-weight: 500;

    white-space: nowrap;

    color: var(--orbi);
}

.familias-node-one {
    top: 11%;
    left: 5%;
}

.familias-node-two {
    top: 31%;
    right: 0;
}

.familias-node-three {
    bottom: 10%;
    left: 11%;
}


/* ============================================================
   INTRO
   ============================================================ */

.familias-intro {
    position: relative;

    padding:
        130px 0;

    overflow: hidden;

    background:
        var(--paper-soft);
}

.familias-intro::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .026) 0,
            rgba(6, 57, 47, .026) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}

.familias-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap:
        clamp(
            60px,
            9vw,
            135px
        );

    align-items: end;
}

.familias-intro-heading {
    min-width: 0;
}

.familias-intro-heading .familias-index {
    margin-bottom: 27px;
}

.familias-intro-heading .display-heading {
    max-width: 850px;
}

.familias-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.familias-intro-copy p {
    margin: 0;

    font-size:
        clamp(
            .9rem,
            1.1vw,
            1.02rem
        );

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   COMMUNITY
   ============================================================ */

.familias-community {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        var(--orbi);
}

.familias-community-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .032) 0,
            rgba(255, 255, 255, .032) 1px,
            transparent 1px,
            transparent 5px
        ),
        radial-gradient(
            circle at 78% 40%,
            rgba(201, 213, 197, .17),
            transparent 42%
        );
}

.familias-community-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(
            60px,
            9vw,
            130px
        );

    align-items: center;
}

.familias-community-heading {
    min-width: 0;
}

.familias-community-heading .familias-index {
    margin-bottom: 28px;
}

.familias-community-heading h2 {
    max-width: 600px;

    margin: 0;

    font-size:
        clamp(
            3.5rem,
            5.7vw,
            6.5rem
        );

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.familias-community-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.familias-community-list {
    min-width: 0;

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

.familias-community-item {
    display: grid;

    grid-template-columns:
        60px
        minmax(0, 1fr);

    gap: 30px;

    padding:
        42px 0;

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

.familias-community-number {
    padding-top: 8px;

    font-size: .6rem;

    color:
        rgba(255, 255, 255, .45);
}

.familias-community-item h3 {
    margin:
        0 0 17px;

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

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.055em;

    color: var(--white);
}

.familias-community-item p {
    max-width: 430px;

    margin: 0;

    font-size: .84rem;

    line-height: 1.75;

    color:
        rgba(255, 255, 255, .67);
}


/* ============================================================
   INFORMATION
   ============================================================ */

.familias-information {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        120px 0;

    overflow: hidden;

    background:
        var(--paper);
}

.familias-information-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(380px, 1fr);

    gap:
        clamp(
            60px,
            9vw,
            130px
        );

    align-items: center;
}

.familias-information-copy {
    min-width: 0;

    max-width: 580px;
}

.familias-information-copy .familias-index {
    margin-bottom: 28px;
}

.familias-information-copy h2 {
    margin: 0;

    font-size:
        clamp(
            3.4rem,
            5.3vw,
            6.2rem
        );

    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.familias-information-copy h2 span {
    display: block;

    color: var(--orbi);
}

.familias-information-copy p {
    max-width: 500px;

    margin:
        35px 0 0;

    font-size: .92rem;

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.familias-information-visual {
    position: relative;

    width: 100%;

    min-height: 500px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 25px;

    background:
        var(--paper-soft);
}

.familias-panel-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(6, 57, 47, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6, 57, 47, .035) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 78%
        );

    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 78%
        );
}

.familias-panel-top {
    position: relative;
    z-index: 2;

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

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .12);

    font-size: .6rem;

    color: var(--muted);
}

.familias-panel-top span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.familias-panel-content {
    position: absolute;
    z-index: 2;

    left: 30px;
    right: 30px;
    bottom: 32px;
}

.familias-panel-label {
    display: block;

    margin-bottom: 12px;

    font-size: .6rem;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--muted);
}

.familias-panel-content strong {
    display: block;

    font-size:
        clamp(
            3.6rem,
            5.7vw,
            6.4rem
        );

    line-height: .9;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--orbi);
}

.familias-panel-rule {
    width: 100%;
    height: 1px;

    margin:
        28px 0 17px;

    background:
        rgba(6, 57, 47, .14);
}

.familias-panel-caption {
    font-size: .61rem;

    color: var(--muted);
}


/* ============================================================
   COMMUNICATIONS
   ============================================================ */

.familias-communications {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        120px 0;

    overflow: hidden;

    background:
        var(--orbi-dark);
}

.familias-communications-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .027) 0,
            rgba(255, 255, 255, .027) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 22% 50%,
            rgba(49, 88, 77, .42),
            transparent 40%
        );
}

.familias-communications-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items: center;
}

.familias-communications-index {
    font-size:
        clamp(
            7rem,
            13vw,
            13rem
        );

    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.familias-communications-copy {
    min-width: 0;

    max-width: 800px;
}

.familias-communications-copy .familias-label {
    margin-bottom: 28px;
}

.familias-communications-copy h2 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(
            3.5rem,
            5.7vw,
            6.5rem
        );

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.familias-communications-copy p {
    max-width: 530px;

    margin:
        36px 0 0;

    font-size: .92rem;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, .65);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.familias-ecosystem {
    position: relative;

    padding:
        130px 0;

    overflow: hidden;

    background:
        var(--paper-soft);
}

.familias-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.familias-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.familias-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap:
        clamp(
            60px,
            9vw,
            130px
        );

    align-items: end;

    margin-bottom: 75px;
}

.familias-ecosystem-heading .familias-index {
    margin-bottom: 28px;
}

.familias-ecosystem-heading h2 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(
            3.5rem,
            5.7vw,
            6.5rem
        );

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.familias-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.familias-ecosystem-heading > p {
    max-width: 420px;

    margin: 0;

    font-size: .9rem;

    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.familias-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.familias-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.familias-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.familias-product strong {
    font-size:
        clamp(
            1.3rem,
            1.8vw,
            1.8rem
        );

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.familias-product:hover,
.familias-product.is-active {
    background:
        var(--orbi);
}

.familias-product:hover span,
.familias-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.familias-product:hover strong,
.familias-product.is-active strong {
    color:
        var(--white);
}


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

@media (max-width: 1050px) {

    .familias-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .familias-hero-visual {
        max-width: 350px;
    }


    .familias-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .familias-intro-copy {
        max-width: 620px;
    }


    .familias-community-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .familias-community-heading {
        max-width: 760px;
    }

    .familias-community-list {
        max-width: 760px;
    }


    .familias-information-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .familias-information-copy {
        max-width: 700px;
    }

    .familias-information-visual {
        max-width: 760px;

        min-height: 460px;
    }


    .familias-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .familias-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .familias-label,
    .familias-index {
        font-size: .58rem;
    }


    /* HERO */

    .familias-hero {
        min-height: auto;
    }

    .familias-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding:
            125px 0
            85px;
    }

    .familias-hero-copy {
        max-width: none;
    }

    .familias-hero-copy .familias-label {
        margin-bottom: 21px;
    }

    .familias-hero-copy h1 {
        max-width: 100%;

        font-size:
            clamp(
                3.2rem,
                14vw,
                4.5rem
            );

        line-height: .95;
    }

    .familias-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;

        line-height: 1.72;
    }

    .familias-hero-copy .button {
        margin-top: 26px;
    }

    .familias-hero-visual {
        width: min(100%, 320px);

        justify-self: center;
    }

    .familias-hero-center {
        width: 76px;
        height: 76px;

        padding: 19px;

        border-radius: 19px;
    }

    .familias-hero-node {
        min-height: 38px;

        padding: 0 12px;

        font-size: .55rem;
    }

    .familias-node-one {
        left: 0;
    }

    .familias-node-two {
        right: 0;
    }

    .familias-node-three {
        left: 7%;
    }


    /* INTRO */

    .familias-intro {
        padding:
            95px 0;
    }

    .familias-intro-layout {
        gap: 38px;
    }

    .familias-intro-heading .familias-index {
        margin-bottom: 20px;
    }

    .familias-intro-copy {
        gap: 18px;
    }

    .familias-intro-copy p {
        font-size: .85rem;

        line-height: 1.75;

        text-align: left;
    }


    /* COMMUNITY */

    .familias-community {
        min-height: auto;

        padding:
            95px 0;
    }

    .familias-community-layout {
        gap: 48px;
    }

    .familias-community-heading .familias-index {
        margin-bottom: 20px;
    }

    .familias-community-heading h2 {
        font-size:
            clamp(
                3.1rem,
                13.5vw,
                4.7rem
            );
    }

    .familias-community-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding:
            32px 0;
    }

    .familias-community-item h3 {
        font-size: 2rem;
    }

    .familias-community-item p {
        font-size: .8rem;
    }


    /* INFORMATION */

    .familias-information {
        min-height: auto;

        padding:
            95px 0;
    }

    .familias-information-layout {
        gap: 48px;
    }

    .familias-information-copy .familias-index {
        margin-bottom: 20px;
    }

    .familias-information-copy h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }

    .familias-information-copy p {
        margin-top: 28px;

        font-size: .84rem;

        line-height: 1.75;

        text-align: left;
    }

    .familias-information-visual {
        min-height: 340px;

        padding: 20px;

        border-radius: 19px;
    }

    .familias-panel-top {
        align-items: flex-start;

        flex-direction: column;

        gap: 6px;

        padding-bottom: 15px;
    }

    .familias-panel-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .familias-panel-content strong {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4rem
            );
    }


    /* COMMUNICATION */

    .familias-communications {
        min-height: auto;

        padding:
            95px 0;
    }

    .familias-communications-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .familias-communications-index {
        font-size: 5rem;
    }

    .familias-communications-copy .familias-label {
        margin-bottom: 20px;
    }

    .familias-communications-copy h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }

    .familias-communications-copy p {
        margin-top: 27px;

        font-size: .84rem;

        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .familias-ecosystem {
        padding:
            95px 0;
    }

    .familias-ecosystem::after {
        width: 70%;
    }

    .familias-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .familias-ecosystem-heading .familias-index {
        margin-bottom: 20px;
    }

    .familias-ecosystem-heading h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }

    .familias-ecosystem-heading > p {
        font-size: .84rem;

        line-height: 1.75;

        text-align: left;
    }

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

    .familias-product {
        min-height: 125px;

        padding: 17px;
    }

    .familias-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .familias-hero-copy h1 {
        font-size: 3rem;
    }

    .familias-hero-visual {
        width: 285px;
    }

    .familias-hero-node {
        padding:
            0 9px;

        font-size: .51rem;
    }

    .familias-community-heading h2,
    .familias-information-copy h2,
    .familias-communications-copy h2,
    .familias-ecosystem-heading h2 {
        font-size: 2.85rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — DOCENTES
   /docentes/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.docentes-page {
    background: var(--paper);
}

.docentes-label,
.docentes-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.docentes-index-light {
    color: rgba(255, 255, 255, .45);
}

.docentes-label-light {
    color: rgba(255, 255, 255, .55);
}


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

.docentes-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.docentes-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 36%,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .46) 25%,
            rgba(255, 255, 255, .12) 45%,
            transparent 66%
        );
}

.docentes-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .04) 0,
            rgba(6, 57, 47, .04) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}

.docentes-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}


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

.docentes-hero-copy {
    min-width: 0;

    max-width: 800px;
}

.docentes-hero-copy .docentes-label {
    margin-bottom: 28px;
}

.docentes-hero-copy h1 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    text-wrap: balance;

    color: var(--ink);

    text-shadow:
        0 16px 48px
        rgba(35, 49, 40, .05);
}

.docentes-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.docentes-hero-copy p {
    max-width: 550px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.docentes-hero-copy .button {
    margin-top: 30px;
}


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

.docentes-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1 / 1;

    justify-self: end;

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

.docentes-hero-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(6, 57, 47, .09);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.docentes-ring-one {
    width: 100%;
    height: 100%;
}

.docentes-ring-two {
    width: 78%;
    height: 78%;

    border-color: rgba(6, 57, 47, .055);
}

.docentes-hero-card {
    position: relative;
    z-index: 3;

    width: min(100%, 335px);
    min-height: 385px;

    display: flex;
    flex-direction: column;

    padding: 26px;

    overflow: hidden;

    border: 1px solid rgba(6, 57, 47, .11);
    border-radius: 22px;

    background: rgba(243, 240, 232, .88);

    box-shadow:
        0 30px 80px
        rgba(34, 45, 39, .08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.docentes-hero-card::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -100px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(6, 57, 47, .055);

    filter: blur(4px);

    pointer-events: none;
}

.docentes-card-top {
    position: relative;
    z-index: 2;

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

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .11);

    font-size: .58rem;
    line-height: 1;

    color: var(--muted);
}

.docentes-card-top > span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.docentes-card-status {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 10px;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 999px;
}

.docentes-card-main {
    position: relative;
    z-index: 2;

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding-top: 55px;
}

.docentes-card-eyebrow {
    margin-bottom: 12px;

    font-size: .58rem;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--muted);
}

.docentes-card-main strong {
    display: block;

    font-size: clamp(2.8rem, 4vw, 4.3rem);
    line-height: .92;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--orbi);
}

.docentes-card-line {
    width: 100%;
    height: 1px;

    margin: 26px 0 16px;

    background:
        rgba(6, 57, 47, .13);
}

.docentes-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-size: .58rem;

    color: var(--muted);
}


/* ============================================================
   INTRO
   ============================================================ */

.docentes-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.docentes-intro::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 36%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .028) 0,
            rgba(6, 57, 47, .028) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000
        );
}

.docentes-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.docentes-intro-heading {
    min-width: 0;
}

.docentes-intro-heading .docentes-index {
    margin-bottom: 27px;
}

.docentes-intro-heading .display-heading {
    max-width: 860px;
}

.docentes-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.docentes-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   COURSES
   ============================================================ */

.docentes-courses {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.docentes-courses-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .03) 0,
            rgba(255, 255, 255, .03) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 78% 42%,
            rgba(255, 255, 255, .08),
            transparent 42%
        );
}

.docentes-courses-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.docentes-courses-heading {
    min-width: 0;

    max-width: 590px;
}

.docentes-courses-heading .docentes-index {
    margin-bottom: 28px;
}

.docentes-courses-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.docentes-courses-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.docentes-courses-heading p {
    max-width: 470px;

    margin: 34px 0 0;

    font-size: .86rem;
    line-height: 1.78;

    color: rgba(255, 255, 255, .62);
}

.docentes-course-list {
    min-width: 0;

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

.docentes-course-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.docentes-course-number {
    padding-top: 7px;

    font-size: .58rem;

    color:
        rgba(255, 255, 255, .4);
}

.docentes-course-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.docentes-course-item p {
    max-width: 440px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color:
        rgba(255, 255, 255, .62);
}


/* ============================================================
   WORKSPACE
   ============================================================ */

.docentes-workspace {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper);
}

.docentes-workspace-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(380px, 1.08fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.docentes-workspace-copy {
    min-width: 0;

    max-width: 590px;
}

.docentes-workspace-copy .docentes-index {
    margin-bottom: 28px;
}

.docentes-workspace-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.docentes-workspace-copy h2 span {
    display: block;

    color: var(--orbi);
}

.docentes-workspace-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.docentes-workspace-visual {
    width: 100%;
    min-height: 500px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper-soft);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.docentes-workspace-header {
    min-height: 66px;

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

    gap: 20px;

    padding: 0 26px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .59rem;

    color: var(--muted);
}

.docentes-workspace-header span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.docentes-workspace-body {
    min-height: 434px;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);
}

.docentes-workspace-sidebar {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 25px 18px;

    border-right:
        1px solid
        rgba(6, 57, 47, .1);
}

.docentes-workspace-sidebar span {
    display: flex;
    align-items: center;

    min-height: 39px;

    padding: 0 11px;

    border-radius: 8px;

    font-size: .6rem;

    color: var(--muted);
}

.docentes-workspace-sidebar span.is-active {
    background:
        rgba(6, 57, 47, .07);

    color: var(--orbi);

    font-weight: 500;
}

.docentes-workspace-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 34px;
}

.docentes-workspace-label {
    display: block;

    margin-bottom: 12px;

    font-size: .58rem;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--muted);
}

.docentes-workspace-content strong {
    display: block;

    max-width: 420px;

    font-size: clamp(3rem, 4.8vw, 5.4rem);
    line-height: .92;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--orbi);
}

.docentes-workspace-lines {
    display: grid;

    gap: 12px;

    margin-top: 30px;
}

.docentes-workspace-lines span {
    display: block;

    height: 1px;

    background:
        rgba(6, 57, 47, .12);
}

.docentes-workspace-lines span:nth-child(2) {
    width: 82%;
}

.docentes-workspace-lines span:nth-child(3) {
    width: 58%;
}


/* ============================================================
   PLATFORM
   ============================================================ */

.docentes-platform {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.docentes-platform-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .028) 0,
            rgba(255, 255, 255, .028) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 24% 50%,
            rgba(49, 88, 77, .4),
            transparent 40%
        );
}

.docentes-platform-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.docentes-platform-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.docentes-platform-copy {
    min-width: 0;

    max-width: 820px;
}

.docentes-platform-copy .docentes-label {
    margin-bottom: 28px;
}

.docentes-platform-copy h2 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.docentes-platform-copy p {
    max-width: 530px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.docentes-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.docentes-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.docentes-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.docentes-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.docentes-ecosystem-heading .docentes-index {
    margin-bottom: 28px;
}

.docentes-ecosystem-heading h2 {
    max-width: 780px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.docentes-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.docentes-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.docentes-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.docentes-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.docentes-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.docentes-product strong {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.docentes-product:hover,
.docentes-product.is-active {
    background: var(--orbi);
}

.docentes-product:hover span,
.docentes-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.docentes-product:hover strong,
.docentes-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .docentes-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .docentes-hero-visual {
        max-width: 350px;
    }

    .docentes-hero-card {
        min-height: 340px;
    }


    .docentes-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .docentes-intro-copy {
        max-width: 620px;
    }


    .docentes-courses-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .docentes-courses-heading {
        max-width: 750px;
    }

    .docentes-course-list {
        max-width: 760px;
    }


    .docentes-workspace-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .docentes-workspace-copy {
        max-width: 700px;
    }

    .docentes-workspace-visual {
        max-width: 780px;
    }


    .docentes-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .docentes-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .docentes-label,
    .docentes-index {
        font-size: .58rem;
    }


    /* HERO */

    .docentes-hero {
        min-height: auto;
    }

    .docentes-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .docentes-hero-copy {
        max-width: none;
    }

    .docentes-hero-copy .docentes-label {
        margin-bottom: 21px;
    }

    .docentes-hero-copy h1 {
        max-width: 100%;

        font-size: clamp(3.1rem, 13.5vw, 4.5rem);
        line-height: .95;
    }

    .docentes-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .docentes-hero-copy .button {
        margin-top: 26px;
    }

    .docentes-hero-visual {
        width: min(100%, 320px);

        justify-self: center;
    }

    .docentes-hero-card {
        width: min(88%, 285px);
        min-height: 310px;

        padding: 20px;

        border-radius: 18px;
    }

    .docentes-card-main strong {
        font-size: 2.9rem;
    }


    /* INTRO */

    .docentes-intro {
        padding: 95px 0;
    }

    .docentes-intro-layout {
        gap: 38px;
    }

    .docentes-intro-heading .docentes-index {
        margin-bottom: 20px;
    }

    .docentes-intro-copy {
        gap: 18px;
    }

    .docentes-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* COURSES */

    .docentes-courses {
        min-height: auto;

        padding: 95px 0;
    }

    .docentes-courses-layout {
        gap: 50px;
    }

    .docentes-courses-heading .docentes-index {
        margin-bottom: 20px;
    }

    .docentes-courses-heading h2 {
        font-size: clamp(3rem, 13vw, 4.6rem);
    }

    .docentes-courses-heading p {
        margin-top: 27px;

        font-size: .82rem;
    }

    .docentes-course-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .docentes-course-item h3 {
        font-size: 2rem;
    }

    .docentes-course-item p {
        font-size: .79rem;
    }


    /* WORKSPACE */

    .docentes-workspace {
        min-height: auto;

        padding: 95px 0;
    }

    .docentes-workspace-layout {
        gap: 48px;
    }

    .docentes-workspace-copy .docentes-index {
        margin-bottom: 20px;
    }

    .docentes-workspace-copy h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .docentes-workspace-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .docentes-workspace-visual {
        min-height: 365px;

        border-radius: 19px;
    }

    .docentes-workspace-header {
        min-height: 56px;

        padding: 0 18px;
    }

    .docentes-workspace-body {
        min-height: 309px;

        grid-template-columns: 1fr;
    }

    .docentes-workspace-sidebar {
        flex-direction: row;

        gap: 4px;

        padding: 13px;

        overflow: hidden;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(6, 57, 47, .1);
    }

    .docentes-workspace-sidebar span {
        min-width: 0;
        min-height: 34px;

        flex: 1;

        justify-content: center;

        padding: 0 6px;

        font-size: .52rem;

        white-space: nowrap;
    }

    .docentes-workspace-content {
        padding: 23px 20px;
    }

    .docentes-workspace-content strong {
        font-size: clamp(2.7rem, 13vw, 3.8rem);
    }


    /* PLATFORM */

    .docentes-platform {
        min-height: auto;

        padding: 95px 0;
    }

    .docentes-platform-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .docentes-platform-index {
        font-size: 5rem;
    }

    .docentes-platform-copy .docentes-label {
        margin-bottom: 20px;
    }

    .docentes-platform-copy h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .docentes-platform-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .docentes-ecosystem {
        padding: 95px 0;
    }

    .docentes-ecosystem::after {
        width: 70%;
    }

    .docentes-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .docentes-ecosystem-heading .docentes-index {
        margin-bottom: 20px;
    }

    .docentes-ecosystem-heading h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .docentes-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .docentes-product {
        min-height: 125px;

        padding: 17px;
    }

    .docentes-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .docentes-hero-copy h1 {
        font-size: 2.95rem;
    }

    .docentes-hero-visual {
        width: 280px;
    }

    .docentes-hero-card {
        min-height: 285px;
    }

    .docentes-courses-heading h2,
    .docentes-workspace-copy h2,
    .docentes-platform-copy h2,
    .docentes-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

    .docentes-workspace-sidebar span {
        font-size: .48rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — AI
   /ai/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.ai-page {
    background: var(--paper);
}

.ai-label,
.ai-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.ai-index-light {
    color: rgba(255, 255, 255, .42);
}

.ai-label-light {
    color: rgba(255, 255, 255, .52);
}


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

.ai-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--orbi-dark);
}

.ai-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 42%,
            rgba(49, 88, 77, .38),
            transparent 37%
        ),
        radial-gradient(
            circle at 83% 28%,
            rgba(255, 255, 255, .045),
            transparent 20%
        );
}

.ai-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .022) 0,
            rgba(255, 255, 255, .022) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 48%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 48%,
            #000 100%
        );
}

.ai-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}


/* HERO COPY */

.ai-hero-copy {
    min-width: 0;

    max-width: 820px;
}

.ai-hero-copy .ai-label {
    margin-bottom: 28px;

    color: rgba(255, 255, 255, .52);
}

.ai-hero-copy h1 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--white);

    text-wrap: balance;
}

.ai-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #cbd5c8;
}

.ai-hero-copy p {
    max-width: 520px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: rgba(255, 255, 255, .62);
}

.ai-hero-copy .button {
    margin-top: 30px;
}


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

.ai-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1;

    justify-self: end;
}

.ai-visual-grid {
    position: absolute;
    inset: 4%;

    border-radius: 50%;

    background:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    -webkit-mask-image:
        radial-gradient(
            circle,
            #000,
            transparent 68%
        );

    mask-image:
        radial-gradient(
            circle,
            #000,
            transparent 68%
        );
}

.ai-visual-ring {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.ai-ring-one {
    width: 100%;
    height: 100%;
}

.ai-ring-two {
    width: 72%;
    height: 72%;

    border-color:
        rgba(255, 255, 255, .075);
}

.ai-ring-three {
    width: 43%;
    height: 43%;

    border-color:
        rgba(255, 255, 255, .06);
}

.ai-visual-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 120px;
    height: 120px;

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

    gap: 10px;

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

    border-radius: 28px;

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

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .14);

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

    transform:
        translate(-50%, -50%);
}

.ai-visual-core img {
    width: 38px;
    height: 38px;

    object-fit: contain;
}

.ai-visual-core span {
    font-size: .58rem;

    letter-spacing: .12em;

    color: rgba(255, 255, 255, .58);
}

.ai-visual-point {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #d6dfd2;

    box-shadow:
        0 0 0 7px
        rgba(214, 223, 210, .07);
}

.ai-point-one {
    top: 12%;
    left: 48%;
}

.ai-point-two {
    right: 8%;
    bottom: 31%;
}

.ai-point-three {
    left: 13%;
    bottom: 23%;
}


/* ============================================================
   INTRO
   ============================================================ */

.ai-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper);
}

.ai-intro::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 46%;
    height: 70%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .027) 0,
            rgba(6, 57, 47, .027) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 72%
        );
}

.ai-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.ai-intro-heading {
    min-width: 0;
}

.ai-intro-heading .ai-index {
    margin-bottom: 27px;
}

.ai-intro-heading .display-heading {
    max-width: 850px;
}

.ai-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.ai-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   INTEGRATED
   ============================================================ */

.ai-integrated {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.ai-integrated-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .028) 0,
            rgba(255, 255, 255, .028) 1px,
            transparent 1px,
            transparent 6px
        );
}

.ai-integrated-layout {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.ai-integrated-heading {
    min-width: 0;

    max-width: 610px;
}

.ai-integrated-heading .ai-index {
    margin-bottom: 28px;
}

.ai-integrated-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.ai-integrated-heading h2 span {
    display: block;

    color: #cbd5c8;
}


/* LIST */

.ai-integrated-list {
    min-width: 0;

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

.ai-integrated-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.ai-integrated-number {
    padding-top: 7px;

    font-size: .58rem;

    color: rgba(255, 255, 255, .4);
}

.ai-integrated-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.ai-integrated-item p {
    max-width: 450px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color: rgba(255, 255, 255, .62);
}


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

.ai-system {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.ai-system-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(380px, 1.08fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.ai-system-copy {
    min-width: 0;

    max-width: 590px;
}

.ai-system-copy .ai-index {
    margin-bottom: 28px;
}

.ai-system-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.ai-system-copy h2 span {
    display: block;

    color: var(--orbi);
}

.ai-system-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* SYSTEM VISUAL */

.ai-system-visual {
    width: 100%;
    min-height: 520px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.ai-system-top {
    min-height: 66px;

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

    gap: 20px;

    padding: 0 26px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .59rem;

    color: var(--muted);
}

.ai-system-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.ai-system-body {
    position: relative;

    min-height: 454px;

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

    overflow: hidden;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );
}

.ai-system-center {
    position: relative;
    z-index: 3;

    width: 160px;
    height: 160px;

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

    border:
        1px solid
        rgba(6, 57, 47, .13);

    border-radius: 50%;

    background: var(--paper);

    box-shadow:
        0 20px 55px
        rgba(6, 57, 47, .07);
}

.ai-system-small {
    margin-bottom: 4px;

    font-size: .52rem;

    color: var(--muted);
}

.ai-system-center strong {
    font-size: 3.4rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--orbi);
}

.ai-system-description {
    margin-top: 5px;

    font-size: .48rem;

    color: var(--muted);
}

.ai-system-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(6, 57, 47, .09);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.ai-system-orbit-one {
    width: 310px;
    height: 310px;
}

.ai-system-orbit-two {
    width: 440px;
    height: 440px;

    border-color:
        rgba(6, 57, 47, .055);
}

.ai-system-product {
    position: absolute;
    z-index: 3;

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

    min-width: 68px;
    min-height: 30px;

    padding: 0 12px;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 999px;

    background: var(--paper);

    font-size: .55rem;

    color: var(--orbi);
}

.ai-system-product-one {
    top: 18%;
    left: 22%;
}

.ai-system-product-two {
    top: 26%;
    right: 16%;
}

.ai-system-product-three {
    right: 20%;
    bottom: 18%;
}

.ai-system-product-four {
    left: 17%;
    bottom: 25%;
}


/* ============================================================
   PRINCIPLE
   ============================================================ */

.ai-principle {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.ai-principle-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 48%,
            rgba(49, 88, 77, .38),
            transparent 38%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .022) 0,
            rgba(255, 255, 255, .022) 1px,
            transparent 1px,
            transparent 6px
        );
}

.ai-principle-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.ai-principle-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.ai-principle-copy {
    min-width: 0;

    max-width: 850px;
}

.ai-principle-copy .ai-label {
    margin-bottom: 28px;
}

.ai-principle-copy h2 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.ai-principle-copy p {
    max-width: 540px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.ai-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper);
}

.ai-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.ai-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.ai-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.ai-ecosystem-heading .ai-index {
    margin-bottom: 28px;
}

.ai-ecosystem-heading h2 {
    max-width: 790px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.ai-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.ai-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* PRODUCTS */

.ai-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.ai-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.ai-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.ai-product strong {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.ai-product:hover,
.ai-product.is-active {
    background: var(--orbi);
}

.ai-product:hover span,
.ai-product.is-active span {
    color: rgba(255, 255, 255, .48);
}

.ai-product:hover strong,
.ai-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .ai-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .ai-hero-visual {
        max-width: 350px;
    }


    .ai-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .ai-intro-copy {
        max-width: 620px;
    }


    .ai-integrated-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .ai-integrated-heading {
        max-width: 760px;
    }

    .ai-integrated-list {
        max-width: 760px;
    }


    .ai-system-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .ai-system-copy {
        max-width: 700px;
    }

    .ai-system-visual {
        max-width: 780px;
    }


    .ai-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .ai-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .ai-label,
    .ai-index {
        font-size: .58rem;
    }


    /* HERO */

    .ai-hero {
        min-height: auto;
    }

    .ai-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .ai-hero-copy .ai-label {
        margin-bottom: 21px;
    }

    .ai-hero-copy h1 {
        font-size: clamp(3.1rem, 13.5vw, 4.5rem);
        line-height: .95;
    }

    .ai-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .ai-hero-copy .button {
        margin-top: 26px;
    }

    .ai-hero-visual {
        width: min(100%, 310px);

        justify-self: center;
    }

    .ai-visual-core {
        width: 98px;
        height: 98px;

        border-radius: 23px;
    }


    /* INTRO */

    .ai-intro {
        padding: 95px 0;
    }

    .ai-intro-layout {
        gap: 38px;
    }

    .ai-intro-heading .ai-index {
        margin-bottom: 20px;
    }

    .ai-intro-copy {
        gap: 18px;
    }

    .ai-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* INTEGRATED */

    .ai-integrated {
        min-height: auto;

        padding: 95px 0;
    }

    .ai-integrated-layout {
        gap: 50px;
    }

    .ai-integrated-heading .ai-index {
        margin-bottom: 20px;
    }

    .ai-integrated-heading h2 {
        font-size: clamp(3rem, 13vw, 4.6rem);
    }

    .ai-integrated-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .ai-integrated-item h3 {
        font-size: 2rem;
    }

    .ai-integrated-item p {
        font-size: .79rem;
    }


    /* SYSTEM */

    .ai-system {
        min-height: auto;

        padding: 95px 0;
    }

    .ai-system-layout {
        gap: 48px;
    }

    .ai-system-copy .ai-index {
        margin-bottom: 20px;
    }

    .ai-system-copy h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .ai-system-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .ai-system-visual {
        min-height: 390px;

        border-radius: 19px;
    }

    .ai-system-top {
        min-height: 56px;

        padding: 0 18px;
    }

    .ai-system-body {
        min-height: 334px;
    }

    .ai-system-center {
        width: 120px;
        height: 120px;
    }

    .ai-system-center strong {
        font-size: 2.8rem;
    }

    .ai-system-orbit-one {
        width: 230px;
        height: 230px;
    }

    .ai-system-orbit-two {
        width: 315px;
        height: 315px;
    }

    .ai-system-product {
        min-width: 55px;
        min-height: 27px;

        padding: 0 9px;

        font-size: .49rem;
    }

    .ai-system-product-one {
        top: 16%;
        left: 9%;
    }

    .ai-system-product-two {
        top: 22%;
        right: 6%;
    }

    .ai-system-product-three {
        right: 9%;
        bottom: 15%;
    }

    .ai-system-product-four {
        left: 6%;
        bottom: 21%;
    }


    /* PRINCIPLE */

    .ai-principle {
        min-height: auto;

        padding: 95px 0;
    }

    .ai-principle-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .ai-principle-index {
        font-size: 5rem;
    }

    .ai-principle-copy .ai-label {
        margin-bottom: 20px;
    }

    .ai-principle-copy h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .ai-principle-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .ai-ecosystem {
        padding: 95px 0;
    }

    .ai-ecosystem::after {
        width: 70%;
    }

    .ai-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .ai-ecosystem-heading .ai-index {
        margin-bottom: 20px;
    }

    .ai-ecosystem-heading h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .ai-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .ai-product {
        min-height: 125px;

        padding: 17px;
    }

    .ai-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .ai-hero-copy h1 {
        font-size: 2.95rem;
    }

    .ai-hero-visual {
        width: 280px;
    }

    .ai-integrated-heading h2,
    .ai-system-copy h2,
    .ai-principle-copy h2,
    .ai-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

    .ai-system-product {
        font-size: .46rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — FORMS
   /forms/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.forms-page {
    background: var(--paper);
}

.forms-label,
.forms-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.forms-index-light {
    color: rgba(255, 255, 255, .43);
}

.forms-label-light {
    color: rgba(255, 255, 255, .53);
}


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

.forms-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.forms-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 255, 255, .95),
            rgba(255, 255, 255, .32) 28%,
            transparent 58%
        );
}

.forms-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 48%;
    height: 65%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .027) 0,
            rgba(6, 57, 47, .027) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 72%
        );
}

.forms-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}

.forms-hero-copy {
    min-width: 0;

    max-width: 800px;
}

.forms-hero-copy .forms-label {
    margin-bottom: 28px;
}

.forms-hero-copy h1 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--ink);

    text-wrap: balance;
}

.forms-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.forms-hero-copy p {
    max-width: 535px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.forms-hero-copy .button {
    margin-top: 30px;
}


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

.forms-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1;

    justify-self: end;

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

.forms-hero-outline {
    position: absolute;

    border:
        1px solid
        rgba(6, 57, 47, .07);

    border-radius: 28px;

    transform: rotate(-4deg);
}

.forms-outline-one {
    width: 75%;
    height: 86%;
}

.forms-outline-two {
    width: 62%;
    height: 74%;

    transform: rotate(5deg);
}

.forms-sheet {
    position: relative;
    z-index: 3;

    width: min(100%, 330px);

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 22px;

    background:
        rgba(243, 240, 232, .94);

    box-shadow:
        0 30px 80px
        rgba(34, 45, 39, .08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.forms-sheet-top {
    min-height: 62px;

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

    gap: 20px;

    padding: 0 23px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .56rem;

    color: var(--muted);
}

.forms-sheet-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.forms-sheet-content {
    padding: 27px 23px 25px;
}

.forms-sheet-heading {
    width: 64%;
    height: 10px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .8);
}

.forms-sheet-short {
    width: 38%;
    height: 5px;

    margin-top: 10px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .14);
}

.forms-field {
    display: grid;

    grid-template-columns:
        23px
        minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    margin-top: 30px;
}

.forms-field span {
    font-size: .48rem;

    color: var(--muted);
}

.forms-field div {
    height: 39px;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .27);
}

.forms-options {
    display: grid;

    gap: 11px;

    margin: 26px 0 0 35px;
}

.forms-options span {
    position: relative;

    display: block;

    width: 72%;
    height: 5px;

    margin-left: 21px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .12);
}

.forms-options span::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -21px;

    width: 9px;
    height: 9px;

    border:
        1px solid
        rgba(6, 57, 47, .22);

    border-radius: 50%;

    transform:
        translateY(-50%);
}

.forms-submit {
    display: flex;
    justify-content: flex-end;

    margin-top: 29px;
}

.forms-submit span {
    display: block;

    width: 74px;
    height: 29px;

    border-radius: 7px;

    background: var(--orbi);
}


/* ============================================================
   INTRO
   ============================================================ */

.forms-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.forms-intro::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 45%;
    height: 60%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );
}

.forms-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.forms-intro-heading {
    min-width: 0;
}

.forms-intro-heading .forms-index {
    margin-bottom: 27px;
}

.forms-intro-heading .display-heading {
    max-width: 860px;
}

.forms-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.forms-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.forms-process {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.forms-process-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .029) 0,
            rgba(255, 255, 255, .029) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 82% 48%,
            rgba(255, 255, 255, .07),
            transparent 40%
        );
}

.forms-process-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.forms-process-heading {
    min-width: 0;

    max-width: 620px;
}

.forms-process-heading .forms-index {
    margin-bottom: 28px;
}

.forms-process-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.forms-process-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.forms-process-list {
    min-width: 0;

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

.forms-process-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.forms-process-number {
    padding-top: 7px;

    font-size: .58rem;

    color:
        rgba(255, 255, 255, .4);
}

.forms-process-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.forms-process-item p {
    max-width: 440px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color:
        rgba(255, 255, 255, .62);
}


/* ============================================================
   STRUCTURE
   ============================================================ */

.forms-structure {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper);
}

.forms-structure-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(380px, 1.08fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.forms-structure-copy {
    min-width: 0;

    max-width: 590px;
}

.forms-structure-copy .forms-index {
    margin-bottom: 28px;
}

.forms-structure-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.forms-structure-copy h2 span {
    display: block;

    color: var(--orbi);
}

.forms-structure-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.forms-structure-visual {
    width: 100%;
    min-height: 510px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper-soft);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.forms-structure-top {
    min-height: 66px;

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

    gap: 20px;

    padding: 0 26px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .59rem;

    color: var(--muted);
}

.forms-structure-top span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.forms-structure-body {
    padding: 35px;
}

.forms-structure-question {
    padding: 0 0 30px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);
}

.forms-structure-question > span {
    display: block;

    margin-bottom: 11px;

    font-size: .54rem;

    letter-spacing: .06em;
    text-transform: uppercase;

    color: var(--muted);
}

.forms-structure-question strong {
    font-size: clamp(2.4rem, 3.8vw, 4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.06em;

    color: var(--orbi);
}

.forms-structure-input {
    height: 47px;

    margin: 28px 0;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .25);
}

.forms-structure-options {
    display: grid;

    gap: 14px;

    padding-top: 7px;
}

.forms-structure-options i {
    position: relative;

    display: block;

    width: 67%;
    height: 6px;

    margin-left: 25px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .12);
}

.forms-structure-options i::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -25px;

    width: 10px;
    height: 10px;

    border:
        1px solid
        rgba(6, 57, 47, .2);

    border-radius: 50%;

    transform:
        translateY(-50%);
}

.forms-structure-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding-top: 30px;
}

.forms-structure-bottom span {
    font-size: .55rem;

    color: var(--muted);
}

.forms-structure-bottom strong {
    font-size: .66rem;

    font-weight: 500;

    color: var(--orbi);
}


/* ============================================================
   PLATFORM
   ============================================================ */

.forms-platform {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.forms-platform-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(49, 88, 77, .4),
            transparent 39%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 0,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px,
            transparent 6px
        );
}

.forms-platform-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.forms-platform-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.forms-platform-copy {
    min-width: 0;

    max-width: 850px;
}

.forms-platform-copy .forms-label {
    margin-bottom: 28px;
}

.forms-platform-copy h2 {
    max-width: 830px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.forms-platform-copy p {
    max-width: 540px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.forms-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.forms-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.forms-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.forms-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.forms-ecosystem-heading .forms-index {
    margin-bottom: 28px;
}

.forms-ecosystem-heading h2 {
    max-width: 790px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.forms-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.forms-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.forms-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.forms-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.forms-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.forms-product strong {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.forms-product:hover,
.forms-product.is-active {
    background: var(--orbi);
}

.forms-product:hover span,
.forms-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.forms-product:hover strong,
.forms-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .forms-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .forms-hero-visual {
        max-width: 350px;
    }


    .forms-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .forms-intro-copy {
        max-width: 620px;
    }


    .forms-process-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .forms-process-heading {
        max-width: 760px;
    }

    .forms-process-list {
        max-width: 760px;
    }


    .forms-structure-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .forms-structure-copy {
        max-width: 700px;
    }

    .forms-structure-visual {
        max-width: 780px;
    }


    .forms-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .forms-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .forms-label,
    .forms-index {
        font-size: .58rem;
    }


    /* HERO */

    .forms-hero {
        min-height: auto;
    }

    .forms-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .forms-hero-copy .forms-label {
        margin-bottom: 21px;
    }

    .forms-hero-copy h1 {
        font-size:
            clamp(3.1rem, 13.5vw, 4.5rem);

        line-height: .95;
    }

    .forms-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .forms-hero-copy .button {
        margin-top: 26px;
    }

    .forms-hero-visual {
        width: min(100%, 315px);

        justify-self: center;
    }

    .forms-sheet {
        width: min(88%, 280px);

        border-radius: 18px;
    }

    .forms-sheet-content {
        padding: 22px 18px;
    }


    /* INTRO */

    .forms-intro {
        padding: 95px 0;
    }

    .forms-intro-layout {
        gap: 38px;
    }

    .forms-intro-heading .forms-index {
        margin-bottom: 20px;
    }

    .forms-intro-copy {
        gap: 18px;
    }

    .forms-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* PROCESS */

    .forms-process {
        min-height: auto;

        padding: 95px 0;
    }

    .forms-process-layout {
        gap: 50px;
    }

    .forms-process-heading .forms-index {
        margin-bottom: 20px;
    }

    .forms-process-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.6rem);
    }

    .forms-process-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .forms-process-item h3 {
        font-size: 2rem;
    }

    .forms-process-item p {
        font-size: .79rem;
    }


    /* STRUCTURE */

    .forms-structure {
        min-height: auto;

        padding: 95px 0;
    }

    .forms-structure-layout {
        gap: 48px;
    }

    .forms-structure-copy .forms-index {
        margin-bottom: 20px;
    }

    .forms-structure-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .forms-structure-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .forms-structure-visual {
        min-height: 420px;

        border-radius: 19px;
    }

    .forms-structure-top {
        min-height: 56px;

        padding: 0 18px;
    }

    .forms-structure-body {
        padding: 25px 20px;
    }

    .forms-structure-question strong {
        font-size: 2.7rem;
    }


    /* PLATFORM */

    .forms-platform {
        min-height: auto;

        padding: 95px 0;
    }

    .forms-platform-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .forms-platform-index {
        font-size: 5rem;
    }

    .forms-platform-copy .forms-label {
        margin-bottom: 20px;
    }

    .forms-platform-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .forms-platform-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .forms-ecosystem {
        padding: 95px 0;
    }

    .forms-ecosystem::after {
        width: 70%;
    }

    .forms-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .forms-ecosystem-heading .forms-index {
        margin-bottom: 20px;
    }

    .forms-ecosystem-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .forms-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .forms-product {
        min-height: 125px;

        padding: 17px;
    }

    .forms-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .forms-hero-copy h1 {
        font-size: 2.95rem;
    }

    .forms-hero-visual {
        width: 280px;
    }

    .forms-process-heading h2,
    .forms-structure-copy h2,
    .forms-platform-copy h2,
    .forms-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — DOCS
   /docs/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.docs-page {
    background: var(--paper);
}

.docs-label,
.docs-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.docs-index-light {
    color: rgba(255, 255, 255, .43);
}

.docs-label-light {
    color: rgba(255, 255, 255, .53);
}


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

.docs-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.docs-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 79% 40%,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .35) 28%,
            transparent 59%
        );
}

.docs-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 48%;
    height: 66%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .026) 0,
            rgba(6, 57, 47, .026) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );
}

.docs-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}


/* HERO COPY */

.docs-hero-copy {
    min-width: 0;

    max-width: 800px;
}

.docs-hero-copy .docs-label {
    margin-bottom: 28px;
}

.docs-hero-copy h1 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--ink);

    text-wrap: balance;
}

.docs-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.docs-hero-copy p {
    max-width: 535px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.docs-hero-copy .button {
    margin-top: 30px;
}


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

.docs-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1;

    justify-self: end;

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

.docs-page-shadow {
    position: absolute;

    width: 66%;
    height: 82%;

    border:
        1px solid
        rgba(6, 57, 47, .075);

    border-radius: 18px;

    background:
        rgba(235, 230, 218, .4);
}

.docs-page-shadow-one {
    transform:
        translate(-25px, 5px)
        rotate(-5deg);
}

.docs-page-shadow-two {
    transform:
        translate(24px, 8px)
        rotate(5deg);
}

.docs-paper {
    position: relative;
    z-index: 3;

    width: min(100%, 300px);
    min-height: 400px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 18px;

    background:
        rgba(250, 248, 242, .96);

    box-shadow:
        0 30px 80px
        rgba(34, 45, 39, .09);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.docs-paper-top {
    min-height: 58px;

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

    gap: 20px;

    padding: 0 21px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .09);

    font-size: .54rem;

    color: var(--muted);
}

.docs-paper-top span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.docs-paper-content {
    padding: 37px 30px;
}

.docs-paper-title {
    width: 72%;
    height: 12px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .82);
}

.docs-paper-subtitle {
    width: 38%;
    height: 5px;

    margin-top: 11px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .14);
}

.docs-paper-lines {
    display: grid;

    gap: 11px;

    margin-top: 38px;
}

.docs-paper-lines span {
    display: block;

    width: 100%;
    height: 4px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .105);
}

.docs-paper-lines span:nth-child(2) {
    width: 93%;
}

.docs-paper-lines span:nth-child(3) {
    width: 97%;
}

.docs-paper-lines span:nth-child(4) {
    width: 81%;
}

.docs-paper-lines span:nth-child(5) {
    width: 89%;
}

.docs-paper-heading {
    width: 44%;
    height: 8px;

    margin-top: 36px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .48);
}

.docs-paper-lines-short {
    margin-top: 21px;
}

.docs-paper-lines-short span:nth-child(2) {
    width: 87%;
}

.docs-paper-lines-short span:nth-child(3) {
    width: 66%;
}


/* ============================================================
   INTRO
   ============================================================ */

.docs-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.docs-intro::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 44%;
    height: 60%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );
}

.docs-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.docs-intro-heading {
    min-width: 0;
}

.docs-intro-heading .docs-index {
    margin-bottom: 27px;
}

.docs-intro-heading .display-heading {
    max-width: 860px;
}

.docs-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.docs-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   DOCUMENT
   ============================================================ */

.docs-document {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.docs-document-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .029) 0,
            rgba(255, 255, 255, .029) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 82% 47%,
            rgba(255, 255, 255, .07),
            transparent 40%
        );
}

.docs-document-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.docs-document-heading {
    min-width: 0;

    max-width: 620px;
}

.docs-document-heading .docs-index {
    margin-bottom: 28px;
}

.docs-document-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.docs-document-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.docs-document-list {
    min-width: 0;

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

.docs-document-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.docs-document-number {
    padding-top: 7px;

    font-size: .58rem;

    color:
        rgba(255, 255, 255, .4);
}

.docs-document-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.docs-document-item p {
    max-width: 440px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color:
        rgba(255, 255, 255, .62);
}


/* ============================================================
   EDITOR
   ============================================================ */

.docs-editor {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper);
}

.docs-editor-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(380px, 1.08fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.docs-editor-copy {
    min-width: 0;

    max-width: 590px;
}

.docs-editor-copy .docs-index {
    margin-bottom: 28px;
}

.docs-editor-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.docs-editor-copy h2 span {
    display: block;

    color: var(--orbi);
}

.docs-editor-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* EDITOR VISUAL */

.docs-editor-visual {
    width: 100%;
    min-height: 520px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper-soft);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.docs-editor-top {
    min-height: 62px;

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

    gap: 20px;

    padding: 0 25px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .58rem;

    color: var(--muted);
}

.docs-editor-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.docs-editor-toolbar {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 0 24px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .08);
}

.docs-editor-toolbar span {
    font-size: .58rem;

    font-weight: 500;

    color: var(--orbi);
}

.docs-editor-toolbar i {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 2px;

    background:
        rgba(6, 57, 47, .17);
}

.docs-editor-toolbar div {
    width: 1px;
    height: 16px;

    margin: 0 3px;

    background:
        rgba(6, 57, 47, .12);
}

.docs-editor-workspace {
    min-height: 410px;

    display: flex;
    justify-content: center;

    padding: 32px 28px;

    background:
        rgba(226, 220, 207, .32);
}

.docs-editor-sheet {
    width: min(100%, 355px);
    min-height: 360px;

    padding: 44px 40px;

    border:
        1px solid
        rgba(6, 57, 47, .08);

    border-radius: 3px;

    background:
        #faf8f2;

    box-shadow:
        0 16px 45px
        rgba(35, 40, 36, .06);
}

.docs-editor-title {
    width: 66%;
    height: 12px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .75);
}

.docs-editor-line {
    height: 4px;

    margin-top: 12px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .1);
}

.docs-editor-line-1 {
    width: 100%;

    margin-top: 32px;
}

.docs-editor-line-2 {
    width: 93%;
}

.docs-editor-line-3 {
    width: 78%;
}

.docs-editor-heading {
    width: 41%;
    height: 8px;

    margin-top: 37px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .42);
}

.docs-editor-line-4 {
    width: 97%;

    margin-top: 24px;
}

.docs-editor-line-5 {
    width: 88%;
}

.docs-editor-line-6 {
    width: 65%;
}


/* ============================================================
   PLATFORM
   ============================================================ */

.docs-platform {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.docs-platform-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(49, 88, 77, .4),
            transparent 39%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 0,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px,
            transparent 6px
        );
}

.docs-platform-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.docs-platform-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.docs-platform-copy {
    min-width: 0;

    max-width: 850px;
}

.docs-platform-copy .docs-label {
    margin-bottom: 28px;
}

.docs-platform-copy h2 {
    max-width: 830px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.docs-platform-copy p {
    max-width: 540px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.docs-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.docs-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.docs-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.docs-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.docs-ecosystem-heading .docs-index {
    margin-bottom: 28px;
}

.docs-ecosystem-heading h2 {
    max-width: 810px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.docs-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.docs-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.docs-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.docs-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.docs-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.docs-product strong {
    font-size:
        clamp(1.3rem, 1.8vw, 1.8rem);

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.docs-product:hover,
.docs-product.is-active {
    background: var(--orbi);
}

.docs-product:hover span,
.docs-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.docs-product:hover strong,
.docs-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .docs-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .docs-hero-visual {
        max-width: 350px;
    }


    .docs-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .docs-intro-copy {
        max-width: 620px;
    }


    .docs-document-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .docs-document-heading {
        max-width: 760px;
    }

    .docs-document-list {
        max-width: 760px;
    }


    .docs-editor-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .docs-editor-copy {
        max-width: 700px;
    }

    .docs-editor-visual {
        max-width: 780px;
    }


    .docs-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .docs-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .docs-label,
    .docs-index {
        font-size: .58rem;
    }


    /* HERO */

    .docs-hero {
        min-height: auto;
    }

    .docs-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .docs-hero-copy .docs-label {
        margin-bottom: 21px;
    }

    .docs-hero-copy h1 {
        font-size:
            clamp(3.1rem, 13.5vw, 4.5rem);

        line-height: .95;
    }

    .docs-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .docs-hero-copy .button {
        margin-top: 26px;
    }

    .docs-hero-visual {
        width: min(100%, 310px);

        justify-self: center;
    }

    .docs-paper {
        width: min(82%, 255px);
        min-height: 340px;
    }

    .docs-paper-content {
        padding: 30px 24px;
    }


    /* INTRO */

    .docs-intro {
        padding: 95px 0;
    }

    .docs-intro-layout {
        gap: 38px;
    }

    .docs-intro-heading .docs-index {
        margin-bottom: 20px;
    }

    .docs-intro-copy {
        gap: 18px;
    }

    .docs-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* DOCUMENT */

    .docs-document {
        min-height: auto;

        padding: 95px 0;
    }

    .docs-document-layout {
        gap: 50px;
    }

    .docs-document-heading .docs-index {
        margin-bottom: 20px;
    }

    .docs-document-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.6rem);
    }

    .docs-document-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .docs-document-item h3 {
        font-size: 2rem;
    }

    .docs-document-item p {
        font-size: .79rem;
    }


    /* EDITOR */

    .docs-editor {
        min-height: auto;

        padding: 95px 0;
    }

    .docs-editor-layout {
        gap: 48px;
    }

    .docs-editor-copy .docs-index {
        margin-bottom: 20px;
    }

    .docs-editor-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .docs-editor-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .docs-editor-visual {
        min-height: 430px;

        border-radius: 19px;
    }

    .docs-editor-top {
        min-height: 55px;

        padding: 0 18px;
    }

    .docs-editor-toolbar {
        padding: 0 18px;

        gap: 11px;
    }

    .docs-editor-workspace {
        min-height: 327px;

        padding: 24px 18px;
    }

    .docs-editor-sheet {
        min-height: 305px;

        padding: 34px 27px;
    }


    /* PLATFORM */

    .docs-platform {
        min-height: auto;

        padding: 95px 0;
    }

    .docs-platform-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .docs-platform-index {
        font-size: 5rem;
    }

    .docs-platform-copy .docs-label {
        margin-bottom: 20px;
    }

    .docs-platform-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .docs-platform-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .docs-ecosystem {
        padding: 95px 0;
    }

    .docs-ecosystem::after {
        width: 70%;
    }

    .docs-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .docs-ecosystem-heading .docs-index {
        margin-bottom: 20px;
    }

    .docs-ecosystem-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .docs-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .docs-product {
        min-height: 125px;

        padding: 17px;
    }

    .docs-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .docs-hero-copy h1 {
        font-size: 2.95rem;
    }

    .docs-hero-visual {
        width: 280px;
    }

    .docs-paper {
        width: 235px;
    }

    .docs-document-heading h2,
    .docs-editor-copy h2,
    .docs-platform-copy h2,
    .docs-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — FILES
   /files/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.files-page {
    background: var(--paper);
}

.files-label,
.files-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.files-index-light {
    color: rgba(255, 255, 255, .43);
}

.files-label-light {
    color: rgba(255, 255, 255, .53);
}


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

.files-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.files-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 79% 42%,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .36) 28%,
            transparent 59%
        );
}

.files-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 49%;
    height: 66%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .026) 0,
            rgba(6, 57, 47, .026) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );
}

.files-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}


/* HERO COPY */

.files-hero-copy {
    min-width: 0;

    max-width: 800px;
}

.files-hero-copy .files-label {
    margin-bottom: 28px;
}

.files-hero-copy h1 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--ink);

    text-wrap: balance;
}

.files-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.files-hero-copy p {
    max-width: 535px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.files-hero-copy .button {
    margin-top: 30px;
}


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

.files-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1;

    justify-self: end;

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

.files-folder {
    position: absolute;

    width: 76%;
    height: 54%;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 20px;

    transform-origin: center bottom;
}

.files-folder-tab {
    position: absolute;

    top: -25px;
    left: 0;

    width: 39%;
    height: 32px;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-bottom: 0;

    border-radius: 12px 12px 0 0;

    background: inherit;
}

.files-folder-back {
    z-index: 1;

    background: var(--paper-deep);

    transform:
        translateY(-48px)
        rotate(-5deg);

    opacity: .75;
}

.files-folder-middle {
    z-index: 2;

    background: var(--paper-soft);

    transform:
        translateY(-20px)
        rotate(3deg);

    box-shadow:
        0 18px 50px
        rgba(34, 45, 39, .04);
}

.files-folder-front {
    z-index: 3;

    background:
        rgba(243, 240, 232, .96);

    box-shadow:
        0 30px 80px
        rgba(34, 45, 39, .09);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.files-folder-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 26px;
}

.files-folder-top {
    position: absolute;

    top: 23px;
    left: 26px;
    right: 26px;

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

    gap: 20px;

    font-size: .54rem;

    color: var(--muted);
}

.files-folder-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.files-folder-content strong {
    font-size: clamp(3rem, 4.5vw, 4.8rem);
    line-height: .9;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--orbi);
}

.files-folder-lines {
    display: grid;

    gap: 9px;

    margin-top: 20px;
}

.files-folder-lines span {
    display: block;

    height: 4px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .1);
}

.files-folder-lines span:first-child {
    width: 78%;
}

.files-folder-lines span:last-child {
    width: 51%;
}


/* ============================================================
   INTRO
   ============================================================ */

.files-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.files-intro::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 44%;
    height: 60%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );
}

.files-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.files-intro-heading {
    min-width: 0;
}

.files-intro-heading .files-index {
    margin-bottom: 27px;
}

.files-intro-heading .display-heading {
    max-width: 900px;
}

.files-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.files-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   ORGANIZATION
   ============================================================ */

.files-organization {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.files-organization-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .029) 0,
            rgba(255, 255, 255, .029) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 82% 47%,
            rgba(255, 255, 255, .07),
            transparent 40%
        );
}

.files-organization-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.files-organization-heading {
    min-width: 0;

    max-width: 620px;
}

.files-organization-heading .files-index {
    margin-bottom: 28px;
}

.files-organization-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.files-organization-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.files-organization-list {
    min-width: 0;

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

.files-organization-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.files-organization-number {
    padding-top: 7px;

    font-size: .58rem;

    color:
        rgba(255, 255, 255, .4);
}

.files-organization-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.files-organization-item p {
    max-width: 440px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color:
        rgba(255, 255, 255, .62);
}


/* ============================================================
   LIBRARY
   ============================================================ */

.files-library {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper);
}

.files-library-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(380px, 1.08fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.files-library-copy {
    min-width: 0;

    max-width: 590px;
}

.files-library-copy .files-index {
    margin-bottom: 28px;
}

.files-library-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.files-library-copy h2 span {
    display: block;

    color: var(--orbi);
}

.files-library-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


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

.files-library-visual {
    width: 100%;
    min-height: 510px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper-soft);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.files-library-top {
    min-height: 66px;

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

    gap: 20px;

    padding: 0 26px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .59rem;

    color: var(--muted);
}

.files-library-top span:first-child {
    font-weight: 500;

    color: var(--orbi);
}

.files-library-body {
    min-height: 444px;

    display: grid;

    grid-template-columns:
        145px
        minmax(0, 1fr);
}

.files-library-sidebar {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 24px 17px;

    border-right:
        1px solid
        rgba(6, 57, 47, .1);
}

.files-library-sidebar span {
    min-height: 38px;

    display: flex;
    align-items: center;

    padding: 0 10px;

    border-radius: 8px;

    font-size: .56rem;

    color: var(--muted);
}

.files-library-sidebar span.is-active {
    background:
        rgba(6, 57, 47, .07);

    color: var(--orbi);

    font-weight: 500;
}

.files-library-content {
    min-width: 0;

    padding: 29px;
}

.files-library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.files-library-heading strong {
    font-size: 1.3rem;

    font-weight: 500;

    letter-spacing: -.04em;

    color: var(--orbi);
}

.files-library-heading span {
    font-size: .53rem;

    color: var(--muted);
}

.files-library-grid {
    display: grid;

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

    gap: 12px;
}

.files-library-item {
    min-width: 0;
    min-height: 128px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 16px;

    border:
        1px solid
        rgba(6, 57, 47, .09);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .22);
}

.files-library-item strong {
    font-size: .62rem;

    font-weight: 500;

    color: var(--orbi);
}

.files-mini-folder {
    position: relative;

    display: block;

    width: 37px;
    height: 28px;

    margin-top: 8px;

    border:
        1px solid
        rgba(6, 57, 47, .18);

    border-radius: 5px;

    background:
        rgba(6, 57, 47, .05);
}

.files-mini-folder::before {
    content: "";

    position: absolute;

    top: -7px;
    left: -1px;

    width: 17px;
    height: 8px;

    border:
        1px solid
        rgba(6, 57, 47, .18);

    border-bottom: 0;

    border-radius: 4px 4px 0 0;

    background: var(--paper-soft);
}

.files-mini-file {
    position: relative;

    display: block;

    width: 28px;
    height: 35px;

    margin-top: 4px;

    border:
        1px solid
        rgba(6, 57, 47, .18);

    border-radius: 4px;

    background:
        rgba(6, 57, 47, .035);
}

.files-mini-file::after {
    content: "";

    position: absolute;

    left: 6px;
    right: 6px;
    top: 11px;

    height: 1px;

    background:
        rgba(6, 57, 47, .16);

    box-shadow:
        0 6px 0
        rgba(6, 57, 47, .12);
}


/* ============================================================
   PLATFORM
   ============================================================ */

.files-platform {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.files-platform-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(49, 88, 77, .4),
            transparent 39%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 0,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px,
            transparent 6px
        );
}

.files-platform-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.files-platform-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.files-platform-copy {
    min-width: 0;

    max-width: 850px;
}

.files-platform-copy .files-label {
    margin-bottom: 28px;
}

.files-platform-copy h2 {
    max-width: 840px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.files-platform-copy p {
    max-width: 540px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.files-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.files-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.files-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.files-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.files-ecosystem-heading .files-index {
    margin-bottom: 28px;
}

.files-ecosystem-heading h2 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.files-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.files-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.files-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.files-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.files-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.files-product strong {
    font-size:
        clamp(1.3rem, 1.8vw, 1.8rem);

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.files-product:hover,
.files-product.is-active {
    background: var(--orbi);
}

.files-product:hover span,
.files-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.files-product:hover strong,
.files-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .files-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .files-hero-visual {
        max-width: 350px;
    }


    .files-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .files-intro-copy {
        max-width: 620px;
    }


    .files-organization-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .files-organization-heading {
        max-width: 760px;
    }

    .files-organization-list {
        max-width: 760px;
    }


    .files-library-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .files-library-copy {
        max-width: 700px;
    }

    .files-library-visual {
        max-width: 780px;
    }


    .files-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .files-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .files-label,
    .files-index {
        font-size: .58rem;
    }


    /* HERO */

    .files-hero {
        min-height: auto;
    }

    .files-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .files-hero-copy .files-label {
        margin-bottom: 21px;
    }

    .files-hero-copy h1 {
        font-size:
            clamp(3.1rem, 13.5vw, 4.5rem);

        line-height: .95;
    }

    .files-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .files-hero-copy .button {
        margin-top: 26px;
    }

    .files-hero-visual {
        width: min(100%, 310px);

        justify-self: center;
    }

    .files-folder {
        width: 78%;
        height: 52%;
    }

    .files-folder-content {
        padding: 20px;
    }

    .files-folder-top {
        top: 18px;
        left: 20px;
        right: 20px;
    }

    .files-folder-content strong {
        font-size: 3rem;
    }


    /* INTRO */

    .files-intro {
        padding: 95px 0;
    }

    .files-intro-layout {
        gap: 38px;
    }

    .files-intro-heading .files-index {
        margin-bottom: 20px;
    }

    .files-intro-copy {
        gap: 18px;
    }

    .files-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* ORGANIZATION */

    .files-organization {
        min-height: auto;

        padding: 95px 0;
    }

    .files-organization-layout {
        gap: 50px;
    }

    .files-organization-heading .files-index {
        margin-bottom: 20px;
    }

    .files-organization-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.6rem);
    }

    .files-organization-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .files-organization-item h3 {
        font-size: 2rem;
    }

    .files-organization-item p {
        font-size: .79rem;
    }


    /* LIBRARY */

    .files-library {
        min-height: auto;

        padding: 95px 0;
    }

    .files-library-layout {
        gap: 48px;
    }

    .files-library-copy .files-index {
        margin-bottom: 20px;
    }

    .files-library-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .files-library-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .files-library-visual {
        min-height: 430px;

        border-radius: 19px;
    }

    .files-library-top {
        min-height: 56px;

        padding: 0 18px;
    }

    .files-library-body {
        min-height: 374px;

        grid-template-columns: 1fr;
    }

    .files-library-sidebar {
        flex-direction: row;

        gap: 4px;

        padding: 13px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(6, 57, 47, .1);
    }

    .files-library-sidebar span {
        min-width: 0;
        min-height: 34px;

        flex: 1;

        justify-content: center;

        padding: 0 5px;

        font-size: .5rem;

        white-space: nowrap;
    }

    .files-library-content {
        padding: 22px 18px;
    }

    .files-library-heading {
        margin-bottom: 20px;
    }

    .files-library-grid {
        gap: 9px;
    }

    .files-library-item {
        min-height: 105px;

        padding: 13px;
    }


    /* PLATFORM */

    .files-platform {
        min-height: auto;

        padding: 95px 0;
    }

    .files-platform-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .files-platform-index {
        font-size: 5rem;
    }

    .files-platform-copy .files-label {
        margin-bottom: 20px;
    }

    .files-platform-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .files-platform-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .files-ecosystem {
        padding: 95px 0;
    }

    .files-ecosystem::after {
        width: 70%;
    }

    .files-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .files-ecosystem-heading .files-index {
        margin-bottom: 20px;
    }

    .files-ecosystem-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .files-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .files-product {
        min-height: 125px;

        padding: 17px;
    }

    .files-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .files-hero-copy h1 {
        font-size: 2.95rem;
    }

    .files-hero-visual {
        width: 280px;
    }

    .files-folder-content strong {
        font-size: 2.7rem;
    }

    .files-organization-heading h2,
    .files-library-copy h2,
    .files-platform-copy h2,
    .files-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — MEET
   /meet/
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.meet-page {
    background: var(--paper);
}

.meet-label,
.meet-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.meet-index-light {
    color: rgba(255, 255, 255, .43);
}

.meet-label-light {
    color: rgba(255, 255, 255, .53);
}


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

.meet-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--paper);
}

.meet-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 79% 42%,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .35) 28%,
            transparent 59%
        );
}

.meet-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 49%;
    height: 67%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .026) 0,
            rgba(6, 57, 47, .026) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at right bottom,
            #000,
            transparent 73%
        );
}

.meet-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;

    padding: 150px 0 110px;
}

.meet-hero-copy {
    min-width: 0;

    max-width: 820px;
}

.meet-hero-copy .meet-label {
    margin-bottom: 28px;
}

.meet-hero-copy h1 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(4rem, 6.35vw, 7rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--ink);

    text-wrap: balance;
}

.meet-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: var(--orbi);
}

.meet-hero-copy p {
    max-width: 535px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: var(--ink-soft);
}

.meet-hero-copy .button {
    margin-top: 30px;
}


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

.meet-hero-visual {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1;

    justify-self: end;

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

.meet-hero-card {
    position: relative;
    z-index: 4;

    width: min(100%, 330px);

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .11);

    border-radius: 22px;

    background:
        rgba(250, 248, 242, .94);

    box-shadow:
        0 30px 80px
        rgba(34, 45, 39, .09);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.meet-hero-card-top {
    min-height: 61px;

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

    gap: 20px;

    padding: 0 22px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .09);

    font-size: .54rem;

    color: var(--muted);
}

.meet-hero-card-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.meet-hero-thread {
    padding: 29px 24px 31px;
}

.meet-thread-meta {
    display: flex;
    align-items: center;

    gap: 12px;
}

.meet-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--orbi);

    font-size: .56rem;
    font-style: normal;
    font-weight: 500;

    color: var(--white);
}

.meet-avatar-outline {
    border:
        1px solid
        rgba(6, 57, 47, .17);

    background: transparent;

    color: var(--orbi);
}

.meet-thread-meta > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.meet-thread-meta strong {
    font-size: .67rem;

    font-weight: 500;

    color: var(--orbi);
}

.meet-thread-meta span:not(.meet-avatar) {
    font-size: .5rem;

    color: var(--muted);
}

.meet-thread-meta-small {
    margin-top: 23px;
}

.meet-thread-line {
    height: 4px;

    margin-left: 46px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .1);
}

.meet-thread-line-long {
    width: 70%;

    margin-top: 20px;
}

.meet-thread-line-medium {
    width: 53%;

    margin-top: 9px;
}

.meet-thread-line-short {
    width: 44%;

    margin-top: 18px;
}

.meet-thread-divider {
    height: 1px;

    margin: 27px 0;

    background:
        rgba(6, 57, 47, .08);
}

.meet-hero-compose {
    min-height: 55px;

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

    gap: 20px;

    margin: 0 18px 18px;

    padding: 0 17px;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 11px;

    font-size: .52rem;

    color: var(--muted);
}

.meet-hero-compose i {
    display: block;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: var(--orbi);
}

.meet-orbit {
    position: absolute;

    border:
        1px solid
        rgba(6, 57, 47, .09);

    border-radius: 50%;

    pointer-events: none;
}

.meet-orbit-one {
    width: 94%;
    height: 94%;
}

.meet-orbit-two {
    width: 72%;
    height: 72%;

    border-color:
        rgba(6, 57, 47, .06);
}


/* ============================================================
   INTRO
   ============================================================ */

.meet-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.meet-intro::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 44%;
    height: 60%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );
}

.meet-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.meet-intro-heading {
    min-width: 0;
}

.meet-intro-heading .meet-index {
    margin-bottom: 27px;
}

.meet-intro-heading .display-heading {
    max-width: 900px;
}

.meet-intro-copy {
    min-width: 0;

    display: grid;

    gap: 22px;
}

.meet-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   COMMUNICATION
   ============================================================ */

.meet-communication {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.meet-communication-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .029) 0,
            rgba(255, 255, 255, .029) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 82% 47%,
            rgba(255, 255, 255, .07),
            transparent 40%
        );
}

.meet-communication-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: clamp(65px, 9vw, 135px);

    align-items: center;
}

.meet-communication-heading {
    min-width: 0;

    max-width: 640px;
}

.meet-communication-heading .meet-index {
    margin-bottom: 28px;
}

.meet-communication-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.6vw, 6.4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.meet-communication-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.meet-communication-list {
    min-width: 0;

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

.meet-communication-item {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 30px;

    padding: 36px 0;

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

.meet-communication-number {
    padding-top: 7px;

    font-size: .58rem;

    color:
        rgba(255, 255, 255, .4);
}

.meet-communication-item h3 {
    margin: 0 0 14px;

    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.meet-communication-item p {
    max-width: 455px;

    margin: 0;

    font-size: .82rem;
    line-height: 1.75;

    color:
        rgba(255, 255, 255, .62);
}


/* ============================================================
   CONVERSATIONS
   ============================================================ */

.meet-conversations {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper);
}

.meet-conversations-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(420px, 1.12fr);

    gap: clamp(65px, 8vw, 125px);

    align-items: center;
}

.meet-conversations-copy {
    min-width: 0;

    max-width: 590px;
}

.meet-conversations-copy .meet-index {
    margin-bottom: 28px;
}

.meet-conversations-copy h2 {
    margin: 0;

    font-size: clamp(3.4rem, 5.3vw, 6.1rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.meet-conversations-copy h2 span {
    display: block;

    color: var(--orbi);
}

.meet-conversations-copy p {
    max-width: 500px;

    margin: 35px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* CONVERSATION UI */

.meet-conversations-visual {
    width: 100%;
    min-height: 520px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 24px;

    background: var(--paper-soft);

    box-shadow:
        0 24px 70px
        rgba(32, 40, 35, .04);
}

.meet-conversations-top {
    min-height: 64px;

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

    gap: 20px;

    padding: 0 25px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .1);

    font-size: .58rem;

    color: var(--muted);
}

.meet-conversations-top span:first-child {
    color: var(--orbi);

    font-weight: 500;
}

.meet-conversations-body {
    min-height: 456px;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);
}

.meet-conversations-sidebar {
    padding: 15px 11px;

    border-right:
        1px solid
        rgba(6, 57, 47, .1);
}

.meet-conversation-preview {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 12px 10px;

    border-radius: 10px;
}

.meet-conversation-preview.is-active {
    background:
        rgba(6, 57, 47, .065);
}

.meet-preview-avatar {
    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(6, 57, 47, .13);

    border-radius: 50%;

    font-size: .51rem;

    color: var(--orbi);
}

.meet-conversation-preview > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.meet-conversation-preview strong {
    overflow: hidden;

    font-size: .55rem;

    font-weight: 500;

    color: var(--orbi);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.meet-conversation-preview div span {
    overflow: hidden;

    font-size: .44rem;

    color: var(--muted);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.meet-conversations-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.meet-conversations-header {
    min-height: 69px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    border-bottom:
        1px solid
        rgba(6, 57, 47, .08);
}

.meet-conversations-header > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.meet-conversations-header strong {
    font-size: .66rem;

    font-weight: 500;

    color: var(--orbi);
}

.meet-conversations-header span {
    font-size: .46rem;

    color: var(--muted);
}

.meet-message-area {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 31px;

    padding: 31px 22px;
}

.meet-message-block {
    display: grid;

    grid-template-columns:
        31px
        minmax(0, 1fr);

    gap: 11px;
}

.meet-message-avatar {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--orbi);

    font-size: .5rem;

    color: var(--white);
}

.meet-message-avatar-soft {
    border:
        1px solid
        rgba(6, 57, 47, .14);

    background:
        transparent;

    color: var(--orbi);
}

.meet-message-block > div {
    min-width: 0;
}

.meet-message-block strong {
    display: block;

    margin: 2px 0 13px;

    font-size: .55rem;

    font-weight: 500;

    color: var(--orbi);
}

.meet-message-line {
    display: block;

    height: 4px;

    margin-top: 8px;

    border-radius: 999px;

    background:
        rgba(6, 57, 47, .1);
}

.meet-message-line-a {
    width: 84%;
}

.meet-message-line-b {
    width: 62%;
}

.meet-message-line-c {
    width: 72%;
}

.meet-message-line-d {
    width: 48%;
}

.meet-compose {
    min-height: 51px;

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

    gap: 15px;

    margin: 0 17px 17px;

    padding: 0 15px;

    border:
        1px solid
        rgba(6, 57, 47, .1);

    border-radius: 10px;

    font-size: .49rem;

    color: var(--muted);
}

.meet-compose i {
    display: block;

    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--orbi);
}


/* ============================================================
   PLATFORM
   ============================================================ */

.meet-platform {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.meet-platform-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(49, 88, 77, .4),
            transparent 39%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 0,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px,
            transparent 6px
        );
}

.meet-platform-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.meet-platform-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.meet-platform-copy {
    min-width: 0;

    max-width: 870px;
}

.meet-platform-copy .meet-label {
    margin-bottom: 28px;
}

.meet-platform-copy h2 {
    max-width: 860px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.meet-platform-copy p {
    max-width: 540px;

    margin: 36px 0 0;

    font-size: .9rem;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .64);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.meet-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.meet-ecosystem::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.meet-ecosystem .section-container {
    position: relative;
    z-index: 2;
}

.meet-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.meet-ecosystem-heading .meet-index {
    margin-bottom: 28px;
}

.meet-ecosystem-heading h2 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.meet-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.meet-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   PRODUCTS
   ============================================================ */

.meet-products {
    display: grid;

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

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

    border-left:
        1px solid
        var(--border-green);
}

.meet-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.meet-product span {
    font-size: .56rem;

    color: var(--muted);

    transition:
        color .6s var(--ease);
}

.meet-product strong {
    font-size:
        clamp(1.3rem, 1.8vw, 1.8rem);

    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition:
        color .6s var(--ease);
}

.meet-product:hover,
.meet-product.is-active {
    background: var(--orbi);
}

.meet-product:hover span,
.meet-product.is-active span {
    color:
        rgba(255, 255, 255, .48);
}

.meet-product:hover strong,
.meet-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .meet-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, .55fr);

        gap: 50px;
    }

    .meet-hero-visual {
        max-width: 350px;
    }


    .meet-intro-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .meet-intro-copy {
        max-width: 620px;
    }


    .meet-communication-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .meet-communication-heading {
        max-width: 760px;
    }

    .meet-communication-list {
        max-width: 760px;
    }


    .meet-conversations-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .meet-conversations-copy {
        max-width: 700px;
    }

    .meet-conversations-visual {
        max-width: 800px;
    }


    .meet-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .meet-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .meet-label,
    .meet-index {
        font-size: .58rem;
    }


    /* HERO */

    .meet-hero {
        min-height: auto;
    }

    .meet-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 125px 0 85px;
    }

    .meet-hero-copy .meet-label {
        margin-bottom: 21px;
    }

    .meet-hero-copy h1 {
        font-size:
            clamp(3.1rem, 13.2vw, 4.45rem);

        line-height: .95;
    }

    .meet-hero-copy p {
        max-width: 340px;

        margin-top: 25px;

        font-size: .86rem;
        line-height: 1.72;
    }

    .meet-hero-copy .button {
        margin-top: 26px;
    }

    .meet-hero-visual {
        width: min(100%, 310px);

        justify-self: center;
    }

    .meet-hero-card {
        width: min(88%, 280px);
    }

    .meet-hero-thread {
        padding: 24px 19px;
    }


    /* INTRO */

    .meet-intro {
        padding: 95px 0;
    }

    .meet-intro-layout {
        gap: 38px;
    }

    .meet-intro-heading .meet-index {
        margin-bottom: 20px;
    }

    .meet-intro-copy {
        gap: 18px;
    }

    .meet-intro-copy p {
        font-size: .85rem;
        line-height: 1.75;

        text-align: left;
    }


    /* COMMUNICATION */

    .meet-communication {
        min-height: auto;

        padding: 95px 0;
    }

    .meet-communication-layout {
        gap: 50px;
    }

    .meet-communication-heading .meet-index {
        margin-bottom: 20px;
    }

    .meet-communication-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.6rem);
    }

    .meet-communication-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 18px;

        padding: 29px 0;
    }

    .meet-communication-item h3 {
        font-size: 2rem;
    }

    .meet-communication-item p {
        font-size: .79rem;
    }


    /* CONVERSATIONS */

    .meet-conversations {
        min-height: auto;

        padding: 95px 0;
    }

    .meet-conversations-layout {
        gap: 48px;
    }

    .meet-conversations-copy .meet-index {
        margin-bottom: 20px;
    }

    .meet-conversations-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .meet-conversations-copy p {
        margin-top: 28px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .meet-conversations-visual {
        min-height: 480px;

        border-radius: 19px;
    }

    .meet-conversations-top {
        min-height: 56px;

        padding: 0 18px;
    }

    .meet-conversations-body {
        min-height: 424px;

        grid-template-columns: 1fr;
    }

    .meet-conversations-sidebar {
        display: flex;

        gap: 5px;

        overflow: hidden;

        padding: 11px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(6, 57, 47, .1);
    }

    .meet-conversation-preview {
        flex: 1;

        justify-content: center;

        padding: 8px 5px;
    }

    .meet-conversation-preview > div {
        display: none;
    }

    .meet-preview-avatar {
        width: 29px;
        height: 29px;
    }

    .meet-conversations-header {
        min-height: 61px;

        padding: 0 18px;
    }

    .meet-message-area {
        min-height: 225px;

        padding: 26px 18px;
    }

    .meet-compose {
        margin:
            0 13px 13px;
    }


    /* PLATFORM */

    .meet-platform {
        min-height: auto;

        padding: 95px 0;
    }

    .meet-platform-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .meet-platform-index {
        font-size: 5rem;
    }

    .meet-platform-copy .meet-label {
        margin-bottom: 20px;
    }

    .meet-platform-copy h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .meet-platform-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }


    /* ECOSYSTEM */

    .meet-ecosystem {
        padding: 95px 0;
    }

    .meet-ecosystem::after {
        width: 70%;
    }

    .meet-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .meet-ecosystem-heading .meet-index {
        margin-bottom: 20px;
    }

    .meet-ecosystem-heading h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }

    .meet-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .meet-product {
        min-height: 125px;

        padding: 17px;
    }

    .meet-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .meet-hero-copy h1 {
        font-size: 2.9rem;
    }

    .meet-hero-visual {
        width: 280px;
    }

    .meet-communication-heading h2,
    .meet-conversations-copy h2,
    .meet-platform-copy h2,
    .meet-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

}

/* ============================================================
   ORBI PLATFORMS — HUB
   Administration · Activity · Traceability
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.hub-page {
    background: var(--paper);
}

.hub-label,
.hub-index {
    display: block;

    font-size: .62rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orbi);
}

.hub-index-light,
.hub-label-light {
    color: rgba(255, 255, 255, .5);
}


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

.hub-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--orbi-dark);
}

.hub-hero-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 47%,
            rgba(49, 88, 77, .32),
            transparent 34%
        ),
        radial-gradient(
            circle at 22% 20%,
            rgba(255, 255, 255, .035),
            transparent 28%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .022) 0,
            rgba(255, 255, 255, .022) 1px,
            transparent 1px,
            transparent 6px
        );
}

.hub-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, .72fr);

    gap: clamp(65px, 9vw, 130px);

    align-items: center;

    padding: 150px 0 110px;
}


/* HERO COPY */

.hub-hero-copy {
    min-width: 0;

    max-width: 820px;
}

.hub-hero-copy .hub-label {
    margin-bottom: 28px;
}

.hub-hero-copy h1 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(4rem, 6.5vw, 7.2rem);
    line-height: .93;

    font-weight: 500;

    letter-spacing: -.07em;

    color: var(--white);

    text-wrap: balance;
}

.hub-hero-copy h1 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #cbd5c8;
}

.hub-hero-copy p {
    max-width: 560px;

    margin: 34px 0 0;

    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.78;

    letter-spacing: -.015em;

    color: rgba(255, 255, 255, .64);
}

.hub-hero-copy .button {
    margin-top: 31px;
}


/* ============================================================
   SECURITY SEAL
   ============================================================ */

.hub-hero-visual {
    position: relative;

    width: min(100%, 450px);
    aspect-ratio: 1;

    justify-self: end;

    display: grid;
    place-items: center;
}

.hub-seal-ring {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.hub-seal-ring-one {
    width: 100%;
    height: 100%;
}

.hub-seal-ring-two {
    width: 78%;
    height: 78%;

    border-color: rgba(255, 255, 255, .055);
}

.hub-seal {
    position: relative;
    z-index: 3;

    width: 250px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding: 39px 20px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 88, 77, .23),
            rgba(3, 35, 29, .75) 70%
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .17),
        inset 0 0 0 10px rgba(255, 255, 255, .015);
}

.hub-seal::before {
    content: "";

    position: absolute;

    inset: 13px;

    border: 1px dashed rgba(255, 255, 255, .15);

    border-radius: 50%;
}

.hub-seal-top,
.hub-seal-bottom {
    position: relative;
    z-index: 2;

    font-size: .43rem;

    font-weight: 500;

    letter-spacing: .18em;

    color: rgba(255, 255, 255, .46);
}

.hub-seal-center {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hub-seal-center span {
    margin-bottom: 7px;

    font-size: .53rem;

    letter-spacing: .14em;

    color: rgba(255, 255, 255, .45);
}

.hub-seal-center strong {
    font-size: 2rem;
    line-height: 1;

    font-weight: 500;

    letter-spacing: -.06em;

    color: var(--white);
}

.hub-seal-center i {
    width: 7px;
    height: 7px;

    margin-top: 15px;

    border-radius: 50%;

    background: #cbd5c8;
}


/* FLOATING DATA */

.hub-seal-data {
    position: absolute;
    z-index: 4;

    min-width: 120px;

    padding: 12px 15px;

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

    border-radius: 10px;

    background: rgba(3, 35, 29, .76);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hub-seal-data span,
.hub-seal-data strong {
    display: block;
}

.hub-seal-data span {
    margin-bottom: 4px;

    font-size: .4rem;

    letter-spacing: .1em;

    color: rgba(255, 255, 255, .35);
}

.hub-seal-data strong {
    font-size: .57rem;

    font-weight: 500;

    color: rgba(255, 255, 255, .83);
}

.hub-seal-data-one {
    top: 16%;
    right: -1%;
}

.hub-seal-data-two {
    bottom: 18%;
    left: -2%;
}

.hub-seal-data-three {
    right: 3%;
    bottom: 7%;
}


/* ============================================================
   INTRO
   ============================================================ */

.hub-intro {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper);
}

.hub-intro::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 45%;
    height: 65%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .025) 0,
            rgba(6, 57, 47, .025) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            ellipse at left bottom,
            #000,
            transparent 73%
        );
}

.hub-intro-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(260px, .55fr);

    gap: clamp(60px, 9vw, 135px);

    align-items: end;
}

.hub-intro-heading .hub-index {
    margin-bottom: 27px;
}

.hub-intro-heading .display-heading {
    max-width: 900px;
}

.hub-intro-copy {
    display: grid;

    gap: 22px;
}

.hub-intro-copy p {
    margin: 0;

    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ============================================================
   TRACE
   ============================================================ */

.hub-trace {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi);
}

.hub-trace-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .028) 0,
            rgba(255, 255, 255, .028) 1px,
            transparent 1px,
            transparent 6px
        ),
        radial-gradient(
            circle at 77% 50%,
            rgba(255, 255, 255, .065),
            transparent 38%
        );
}

.hub-trace-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(420px, 1.05fr);

    gap: clamp(70px, 9vw, 135px);

    align-items: center;
}

.hub-trace-heading {
    max-width: 650px;
}

.hub-trace-heading .hub-index {
    margin-bottom: 28px;
}

.hub-trace-heading h2 {
    margin: 0;

    font-size: clamp(3.7rem, 5.8vw, 6.5rem);
    line-height: .94;

    font-weight: 500;

    letter-spacing: -.067em;

    color: var(--white);
}

.hub-trace-heading h2 span {
    display: block;

    color: #cbd5c8;
}

.hub-trace-heading p {
    max-width: 450px;

    margin: 31px 0 0;

    font-size: .86rem;
    line-height: 1.78;

    color: rgba(255, 255, 255, .62);
}


/* RECORD */

.hub-record {
    width: 100%;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(3, 35, 29, .44);

    box-shadow: 0 35px 90px rgba(0, 0, 0, .1);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hub-record-header {
    min-height: 65px;

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

    gap: 20px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.hub-record-header > div {
    display: flex;
    align-items: center;

    gap: 10px;
}

.hub-record-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cbd5c8;
}

.hub-record-header strong {
    font-size: .62rem;

    font-weight: 500;

    color: var(--white);
}

.hub-record-header > span {
    font-size: .48rem;

    color: rgba(255, 255, 255, .4);
}

.hub-record-event {
    padding: 34px 27px 31px;

    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.hub-record-event-top {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 27px;
}

.hub-record-event-top span {
    font-size: .43rem;

    letter-spacing: .1em;

    color: rgba(255, 255, 255, .38);
}

.hub-record-event-top span:last-child {
    color: #cbd5c8;
}

.hub-record-event h3 {
    margin: 0;

    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.05em;

    color: var(--white);
}

.hub-record-event p {
    margin: 11px 0 0;

    font-size: .65rem;

    color: rgba(255, 255, 255, .47);
}

.hub-record-details {
    display: grid;

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

.hub-record-detail {
    min-height: 92px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 18px 26px;

    border-right: 1px solid rgba(255, 255, 255, .09);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.hub-record-detail:nth-child(2n) {
    border-right: 0;
}

.hub-record-detail:nth-child(n + 3) {
    border-bottom: 0;
}

.hub-record-detail span {
    margin-bottom: 8px;

    font-size: .41rem;

    letter-spacing: .1em;

    color: rgba(255, 255, 255, .35);
}

.hub-record-detail strong {
    font-size: .61rem;

    font-weight: 500;

    color: rgba(255, 255, 255, .78);
}

.hub-record-detail .hub-record-confirmed {
    color: #cbd5c8;
}

.hub-record-footer {
    min-height: 54px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 15px;

    align-items: center;

    padding: 0 25px;

    border-top: 1px solid rgba(255, 255, 255, .1);
}

.hub-record-footer span {
    font-size: .41rem;

    letter-spacing: .12em;

    color: rgba(255, 255, 255, .3);
}

.hub-record-footer div {
    height: 1px;

    background: rgba(255, 255, 255, .09);
}


/* ============================================================
   ACTIVITY
   ============================================================ */

.hub-activity {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.hub-activity-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .76fr)
        minmax(430px, 1.12fr);

    gap: clamp(70px, 9vw, 135px);

    align-items: center;
}

.hub-activity-copy {
    max-width: 600px;
}

.hub-activity-copy .hub-index {
    margin-bottom: 28px;
}

.hub-activity-copy h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.5vw, 6.2rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.hub-activity-copy h2 span {
    display: block;

    color: var(--orbi);
}

.hub-activity-copy p {
    max-width: 490px;

    margin: 34px 0 0;

    font-size: .88rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* ACTIVITY PANEL */

.hub-activity-panel {
    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(6, 57, 47, .1);

    border-radius: 22px;

    background: var(--paper);

    box-shadow: 0 25px 70px rgba(32, 40, 35, .05);
}

.hub-activity-top {
    min-height: 64px;

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

    gap: 20px;

    padding: 0 22px;

    border-bottom: 1px solid rgba(6, 57, 47, .09);
}

.hub-activity-top > div {
    display: flex;
    align-items: center;

    gap: 10px;
}

.hub-activity-mark {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--orbi);

    font-size: .48rem;

    color: var(--white);
}

.hub-activity-top strong {
    font-size: .61rem;

    font-weight: 500;

    color: var(--orbi);
}

.hub-activity-top > span {
    font-size: .48rem;

    color: var(--muted);
}

.hub-activity-list {
    padding: 5px 20px;
}

.hub-activity-item {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        auto;

    gap: 15px;

    align-items: center;

    min-height: 91px;

    border-bottom: 1px solid rgba(6, 57, 47, .08);
}

.hub-activity-item:last-child {
    border-bottom: 0;
}

.hub-activity-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(6, 57, 47, .11);

    border-radius: 50%;

    font-size: .46rem;

    color: var(--orbi);
}

.hub-activity-info,
.hub-activity-time {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.hub-activity-info strong {
    font-size: .63rem;

    font-weight: 500;

    color: var(--orbi);
}

.hub-activity-info span {
    font-size: .49rem;

    color: var(--muted);
}

.hub-activity-time {
    text-align: right;
}

.hub-activity-time strong {
    font-size: .55rem;

    font-weight: 500;

    color: var(--ink);
}

.hub-activity-time span {
    font-size: .45rem;

    color: var(--muted);
}

.hub-activity-bottom {
    min-height: 53px;

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

    padding: 0 22px;

    border-top: 1px solid rgba(6, 57, 47, .09);

    font-size: .48rem;

    color: var(--muted);
}

.hub-activity-bottom i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--orbi);
}


/* ============================================================
   PRINCIPLE
   ============================================================ */

.hub-principle {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding: 120px 0;

    overflow: hidden;

    background: var(--orbi-dark);
}

.hub-principle-background {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 48%,
            rgba(49, 88, 77, .42),
            transparent 38%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .023) 0,
            rgba(255, 255, 255, .023) 1px,
            transparent 1px,
            transparent 6px
        );
}

.hub-principle-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(130px, .35fr)
        minmax(0, 1fr);

    gap: clamp(50px, 8vw, 120px);

    align-items: center;
}

.hub-principle-index {
    font-size: clamp(7rem, 13vw, 13rem);
    line-height: .8;

    font-weight: 400;

    letter-spacing: -.08em;

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

    user-select: none;
}

.hub-principle-copy {
    max-width: 900px;
}

.hub-principle-copy .hub-label {
    margin-bottom: 28px;
}

.hub-principle-copy h2 {
    margin: 0;

    font-size: clamp(3.3rem, 5.4vw, 6.2rem);
    line-height: .96;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--white);
}

.hub-principle-copy h2 span {
    display: block;

    color: #cbd5c8;
}

.hub-principle-copy p {
    max-width: 520px;

    margin: 35px 0 0;

    font-size: .88rem;
    line-height: 1.8;

    color: rgba(255, 255, 255, .62);
}


/* ============================================================
   ADMINISTRATION
   ============================================================ */

.hub-admin {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper);
}

.hub-admin::before {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 48%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(6, 57, 47, .023) 0,
            rgba(6, 57, 47, .023) 1px,
            transparent 1px,
            transparent 6px
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at right center,
            #000,
            transparent 76%
        );
}

.hub-admin .section-container {
    position: relative;
    z-index: 2;
}

.hub-admin-heading {
    max-width: 900px;

    margin-bottom: 75px;
}

.hub-admin-heading .hub-index {
    margin-bottom: 28px;
}

.hub-admin-heading h2 {
    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.hub-admin-heading h2 span {
    display: block;

    color: var(--orbi);
}

.hub-admin-heading p {
    max-width: 520px;

    margin: 32px 0 0;

    font-size: .88rem;
    line-height: 1.8;

    color: var(--ink-soft);
}

.hub-admin-grid {
    display: grid;

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

    border-top: 1px solid var(--border-green);
    border-left: 1px solid var(--border-green);
}

.hub-admin-card {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 26px;

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.hub-admin-card > span {
    font-size: .55rem;

    color: var(--muted);
}

.hub-admin-card h3 {
    margin: 0 0 15px;

    font-size: clamp(1.8rem, 2.7vw, 2.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.055em;

    color: var(--orbi);
}

.hub-admin-card p {
    max-width: 310px;

    margin: 0;

    font-size: .78rem;
    line-height: 1.7;

    color: var(--ink-soft);
}


/* ============================================================
   ECOSYSTEM
   ============================================================ */

.hub-ecosystem {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--paper-soft);
}

.hub-ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, .45fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: end;

    margin-bottom: 75px;
}

.hub-ecosystem-heading .hub-index {
    margin-bottom: 28px;
}

.hub-ecosystem-heading h2 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(3.5rem, 5.7vw, 6.5rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--ink);
}

.hub-ecosystem-heading h2 span {
    display: block;

    color: var(--orbi);
}

.hub-ecosystem-heading > p {
    max-width: 430px;

    margin: 0;

    font-size: .9rem;
    line-height: 1.8;

    color: var(--ink-soft);

    text-align: left;
}


/* PRODUCTS */

.hub-products {
    display: grid;

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

    border-top: 1px solid var(--border-green);
    border-left: 1px solid var(--border-green);
}

.hub-product {
    min-width: 0;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

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

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease);
}

.hub-product span {
    font-size: .56rem;

    color: var(--muted);

    transition: color .6s var(--ease);
}

.hub-product strong {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    line-height: 1;

    font-weight: 450;

    letter-spacing: -.045em;

    color: var(--orbi);

    transition: color .6s var(--ease);
}

.hub-product:hover,
.hub-product.is-active {
    background: var(--orbi);
}

.hub-product:hover span,
.hub-product.is-active span {
    color: rgba(255, 255, 255, .48);
}

.hub-product:hover strong,
.hub-product.is-active strong {
    color: var(--white);
}


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

@media (max-width: 1050px) {

    .hub-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(290px, .58fr);

        gap: 50px;
    }

    .hub-hero-visual {
        max-width: 370px;
    }

    .hub-seal {
        width: 215px;
        height: 215px;
    }


    .hub-intro-layout,
    .hub-trace-layout,
    .hub-activity-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .hub-intro-copy {
        max-width: 620px;
    }

    .hub-trace-heading,
    .hub-activity-copy {
        max-width: 730px;
    }

    .hub-record,
    .hub-activity-panel {
        max-width: 780px;
    }


    .hub-ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .hub-ecosystem-heading > p {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .hub-label,
    .hub-index {
        font-size: .58rem;
    }


    /* HERO */

    .hub-hero {
        min-height: auto;
    }

    .hub-hero-inner {
        grid-template-columns: 1fr;

        gap: 58px;

        padding: 125px 0 88px;
    }

    .hub-hero-copy .hub-label {
        margin-bottom: 21px;
    }

    .hub-hero-copy h1 {
        font-size: clamp(3.1rem, 13.5vw, 4.5rem);
        line-height: .95;
    }

    .hub-hero-copy p {
        max-width: 350px;

        margin-top: 25px;

        font-size: .85rem;
        line-height: 1.74;
    }

    .hub-hero-copy .button {
        margin-top: 26px;
    }

    .hub-hero-visual {
        width: min(100%, 315px);

        justify-self: center;
    }

    .hub-seal {
        width: 180px;
        height: 180px;

        padding: 30px 15px;
    }

    .hub-seal-center strong {
        font-size: 1.55rem;
    }

    .hub-seal-data {
        min-width: 93px;

        padding: 9px 10px;
    }

    .hub-seal-data strong {
        font-size: .48rem;
    }

    .hub-seal-data-one {
        right: -2%;
    }

    .hub-seal-data-two {
        left: -1%;
    }


    /* INTRO */

    .hub-intro {
        padding: 95px 0;
    }

    .hub-intro-layout {
        gap: 38px;
    }

    .hub-intro-heading .hub-index {
        margin-bottom: 20px;
    }

    .hub-intro-copy {
        gap: 18px;
    }

    .hub-intro-copy p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }


    /* TRACE */

    .hub-trace {
        min-height: auto;

        padding: 95px 0;
    }

    .hub-trace-layout {
        gap: 48px;
    }

    .hub-trace-heading .hub-index {
        margin-bottom: 20px;
    }

    .hub-trace-heading h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .hub-trace-heading p {
        margin-top: 26px;

        font-size: .82rem;
    }

    .hub-record {
        border-radius: 18px;
    }

    .hub-record-header {
        min-height: 57px;

        padding: 0 17px;
    }

    .hub-record-event {
        padding: 27px 19px;
    }

    .hub-record-event h3 {
        font-size: 1.8rem;
    }

    .hub-record-details {
        grid-template-columns: 1fr;
    }

    .hub-record-detail {
        min-height: 74px;

        padding: 15px 19px;

        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .hub-record-detail:nth-child(n + 3) {
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .hub-record-detail:last-child {
        border-bottom: 0;
    }


    /* ACTIVITY */

    .hub-activity {
        min-height: auto;

        padding: 95px 0;
    }

    .hub-activity-layout {
        gap: 48px;
    }

    .hub-activity-copy .hub-index {
        margin-bottom: 20px;
    }

    .hub-activity-copy h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .hub-activity-copy p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

    .hub-activity-panel {
        border-radius: 18px;
    }

    .hub-activity-top {
        min-height: 58px;

        padding: 0 17px;
    }

    .hub-activity-list {
        padding: 4px 14px;
    }

    .hub-activity-item {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            auto;

        gap: 10px;

        min-height: 82px;
    }

    .hub-activity-icon {
        width: 29px;
        height: 29px;
    }

    .hub-activity-info strong {
        font-size: .55rem;
    }

    .hub-activity-info span {
        font-size: .43rem;
    }

    .hub-activity-time strong {
        font-size: .49rem;
    }

    .hub-activity-time span {
        font-size: .4rem;
    }


    /* PRINCIPLE */

    .hub-principle {
        min-height: auto;

        padding: 95px 0;
    }

    .hub-principle-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .hub-principle-index {
        font-size: 5rem;
    }

    .hub-principle-copy .hub-label {
        margin-bottom: 20px;
    }

    .hub-principle-copy h2 {
        font-size: clamp(2.9rem, 12.5vw, 4.4rem);
    }

    .hub-principle-copy p {
        margin-top: 27px;

        font-size: .83rem;
        line-height: 1.75;
    }


    /* ADMIN */

    .hub-admin {
        padding: 95px 0;
    }

    .hub-admin-heading {
        margin-bottom: 52px;
    }

    .hub-admin-heading .hub-index {
        margin-bottom: 20px;
    }

    .hub-admin-heading h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .hub-admin-heading p {
        margin-top: 27px;

        font-size: .84rem;
        line-height: 1.75;
    }

    .hub-admin-grid {
        grid-template-columns: 1fr;
    }

    .hub-admin-card {
        min-height: 215px;

        padding: 21px;
    }

    .hub-admin-card h3 {
        font-size: 2rem;
    }


    /* ECOSYSTEM */

    .hub-ecosystem {
        padding: 95px 0;
    }

    .hub-ecosystem-heading {
        gap: 32px;

        margin-bottom: 55px;
    }

    .hub-ecosystem-heading .hub-index {
        margin-bottom: 20px;
    }

    .hub-ecosystem-heading h2 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .hub-ecosystem-heading > p {
        font-size: .84rem;
        line-height: 1.75;

        text-align: left;
    }

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

    .hub-product {
        min-height: 125px;

        padding: 17px;
    }

    .hub-product strong {
        font-size: 1.3rem;
    }

}


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

@media (max-width: 380px) {

    .hub-hero-copy h1 {
        font-size: 2.95rem;
    }

    .hub-hero-visual {
        width: 280px;
    }

    .hub-seal {
        width: 165px;
        height: 165px;
    }

    .hub-seal-data-three {
        right: -1%;
    }

    .hub-trace-heading h2,
    .hub-activity-copy h2,
    .hub-principle-copy h2,
    .hub-admin-heading h2,
    .hub-ecosystem-heading h2 {
        font-size: 2.8rem;
    }

}


/* ============================================================
   ACCESSIBILITY, RESILIENCE AND RESPONSIVE POLISH
   ============================================================ */

html {
    scroll-padding-top: 110px;
}

body {
    min-width: 0;
    overflow-x: clip;
}

main {
    overflow-x: clip;
    overflow-y: visible;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(6, 57, 47, .42);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: 10px;
    left: 12px;
    padding: 11px 16px;
    border-radius: 9px;
    color: var(--white);
    background: var(--orbi);
    font-size: .78rem;
    font-weight: 500;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.nav-link[aria-current="page"],
.product-menu-item[aria-current="page"],
.mobile-navigation a[aria-current="page"] {
    color: var(--orbi);
}

.nav-link[aria-current="page"]::after {
    width: 100%;
}

.product-menu-item {
    position: relative;
    padding-left: 48px;
}

.product-menu-item::before {
    position: absolute;
    left: 12px;
    top: 50%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(6, 57, 47, .12);
    border-radius: 8px;
    color: var(--orbi);
    background: rgba(6, 57, 47, .045);
    font-size: .6rem;
    font-weight: 600;
    transform: translateY(-50%);
}

.product-menu-item:nth-child(1)::before { content: "Fa"; }
.product-menu-item:nth-child(2)::before { content: "Do"; }
.product-menu-item:nth-child(3)::before { content: "Hu"; }
.product-menu-item:nth-child(4)::before { content: "AI"; }
.product-menu-item:nth-child(5)::before { content: "Fo"; }
.product-menu-item:nth-child(6)::before { content: "Do"; }
.product-menu-item:nth-child(7)::before { content: "Fi"; }
.product-menu-item:nth-child(8)::before { content: "Me"; }

.products-menu-header span {
    letter-spacing: .08em;
    text-transform: uppercase;
}

.button,
.login-button,
.menu-toggle,
.mobile-products-list a {
    touch-action: manipulation;
}

.footer a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   MIGRATION AND POLICIES
   ============================================================ */

.editorial-page {
    background: var(--paper);
}

.editorial-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    color: var(--white);
    background: var(--orbi-dark);
    overflow: hidden;
}

.editorial-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}

.editorial-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -35% 38%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 133, 118, .34), transparent 68%);
    pointer-events: none;
}

.editorial-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: clamp(60px, 9vw, 140px);
    align-items: end;
}

.section-kicker {
    display: block;
    margin-bottom: 24px;
    color: var(--orbi-soft);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.editorial-hero .section-kicker,
.editorial-cta .section-kicker {
    color: rgba(255, 255, 255, .56);
}

.editorial-hero h1,
.policy-hero h1 {
    margin: 0;
    max-width: 850px;
    font-size: clamp(3.7rem, 7vw, 7.5rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.07em;
    text-wrap: balance;
}

.editorial-hero h1 em,
.policy-hero h1 em,
.split-heading h2 em,
.section-heading-compact h2 em,
.editorial-cta h2 em {
    font-style: italic;
    font-weight: 400;
}

.editorial-hero h1 em {
    color: #c8d3ce;
}

.editorial-hero-copy > p {
    max-width: 600px;
    margin: 32px 0 0;
    color: rgba(255, 255, 255, .67);
    font-size: clamp(.9rem, 1.25vw, 1.04rem);
    line-height: 1.75;
}

.editorial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    margin-top: 38px;
}

.text-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .78);
    font-size: .74rem;
}

.migration-summary {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
}

.migration-summary > span {
    display: block;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .52);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.migration-summary ol {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.migration-summary li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.migration-summary li:last-child { border-bottom: 0; }
.migration-summary b { color: #89a398; font-size: .66rem; font-weight: 500; }
.migration-summary li span { font-size: .82rem; }

.editorial-intro,
.migration-process,
.migration-care,
.policy-content,
.policy-notice {
    padding: clamp(100px, 12vw, 170px) 0;
}

.split-heading {
    display: grid;
    grid-template-columns: minmax(180px, .52fr) minmax(0, 1.48fr);
    gap: clamp(40px, 8vw, 120px);
}

.section-index {
    display: block;
    margin-bottom: 28px;
    color: var(--orbi);
    font-size: .72rem;
}

.split-heading h2,
.section-heading-compact h2,
.editorial-cta h2,
.policy-copy > h2,
.policy-notice h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.7rem, 5vw, 5.5rem);
    font-weight: 500;
    line-height: .99;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.split-heading h2 em,
.section-heading-compact h2 em,
.editorial-cta h2 em {
    color: var(--orbi);
}

.split-heading p,
.section-heading-compact > p {
    max-width: 680px;
    margin: 32px 0 0;
    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.8;
}

.migration-process {
    background: #e9e5da;
}

.section-heading-compact {
    max-width: 920px;
    margin-bottom: 72px;
}

.migration-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-green);
}

.migration-step {
    min-height: 330px;
    padding: 30px 30px 36px 0;
    border-right: 1px solid var(--border-green);
}

.migration-step + .migration-step { padding-left: 30px; }
.migration-step:last-child { border-right: 0; }
.migration-step > span { color: var(--orbi); font-size: .68rem; }
.migration-step h3 { margin: 100px 0 18px; font-size: 1.35rem; font-weight: 500; letter-spacing: -.04em; }
.migration-step p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.75; }

.migration-care-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
    gap: clamp(70px, 10vw, 150px);
}

.migration-principles article {
    display: grid;
    grid-template-columns: minmax(130px, .45fr) 1fr;
    gap: 28px;
    padding: 24px 0;
    border-top: 1px solid var(--border-green);
}

.migration-principles h3 { margin: 0; color: var(--orbi); font-size: .82rem; font-weight: 500; }
.migration-principles p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.7; }

.editorial-cta {
    padding: clamp(110px, 14vw, 190px) 0;
    text-align: center;
    color: var(--white);
    background: var(--orbi);
}

.editorial-cta h2 { margin-inline: auto; color: var(--white); }
.editorial-cta h2 em { color: #cbd5c8; }
.editorial-cta p { max-width: 560px; margin: 30px auto; color: rgba(255, 255, 255, .7); font-size: .9rem; line-height: 1.75; }

.policy-hero {
    padding: 180px 0 110px;
    background: #e8e3d7;
}

.policy-hero h1 { color: var(--ink); }
.policy-hero h1 em { color: var(--orbi); }
.policy-hero > .section-container > p { max-width: 640px; margin: 35px 0 0; color: var(--ink-soft); line-height: 1.8; }

.policy-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 50px;
}

.policy-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--border-green);
    border-radius: 100px;
    color: var(--orbi);
    font-size: .72rem;
    transition: background-color .35s ease;
}

.policy-jump a:hover { background: rgba(6, 57, 47, .06); }
.policy-content-tint { background: #e9e5da; }

.policy-layout {
    display: grid;
    grid-template-columns: minmax(170px, .4fr) minmax(0, 1.6fr);
    gap: clamp(50px, 10vw, 150px);
}

.policy-layout aside { color: var(--orbi); }
.policy-layout aside span { font-size: .68rem; }
.policy-layout aside p { margin: 12px 0 0; font-size: .72rem; }
.policy-copy > h2 { margin-bottom: 56px; }
.policy-copy article { display: grid; grid-template-columns: minmax(180px, .45fr) 1fr; gap: 36px; padding: 28px 0; border-top: 1px solid var(--border-green); }
.policy-copy h3 { margin: 0; color: var(--orbi); font-size: .88rem; font-weight: 500; }
.policy-copy p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.8; }

.policy-notice > .section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 10vw, 150px);
}

.policy-notice h2 { font-size: clamp(2.3rem, 4vw, 4.4rem); }
.policy-notice p { margin: 0 0 18px; color: var(--ink-soft); font-size: .82rem; line-height: 1.8; }
.policy-notice a { color: var(--orbi); text-decoration: underline; text-underline-offset: 3px; }
.policy-notice small { color: var(--muted); font-size: .68rem; }

@media (max-width: 1180px) {
    .desktop-nav { gap: 18px; }
    .nav-link { font-size: .68rem; }
    .login-button { padding-inline: 14px; }
}

@media (max-width: 1050px) {
    .editorial-hero-layout,
    .migration-care-layout {
        grid-template-columns: 1fr;
    }

    .migration-summary { max-width: 600px; }
    .migration-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .migration-step:nth-child(2) { border-right: 0; }
    .migration-step:nth-child(3), .migration-step:nth-child(4) { border-top: 1px solid var(--border-green); }
}

@media (max-width: 760px) {
    .section-container { width: calc(100% - 40px); }
    .editorial-hero { min-height: auto; padding: 140px 0 75px; }
    .editorial-hero h1,
    .policy-hero h1 { font-size: clamp(3rem, 14vw, 5.2rem); }
    .split-heading,
    .policy-layout,
    .policy-notice > .section-container { grid-template-columns: 1fr; }
    .split-heading { gap: 32px; }
    .migration-steps { grid-template-columns: 1fr; }
    .migration-step,
    .migration-step + .migration-step {
        min-height: 0;
        padding: 28px 0 34px;
        border-right: 0;
        border-top: 1px solid var(--border-green);
    }
    .migration-step h3 { margin: 44px 0 14px; }
    .migration-principles article,
    .policy-copy article { grid-template-columns: 1fr; gap: 12px; }
    .policy-hero { padding: 145px 0 85px; }
    .policy-copy > h2 { margin-bottom: 36px; }
}

@media (max-width: 420px) {
    .section-container { width: calc(100% - 32px); }
    .site-header { width: calc(100% - 16px); }
    .mobile-menu { padding: 94px 16px max(20px, env(safe-area-inset-bottom)); }
    .mobile-navigation > a,
    .mobile-products-trigger { padding: 15px 0; font-size: clamp(1.45rem, 8vw, 2rem); }
    .mobile-products-list a { min-height: 44px; padding: 12px 0; }
    .editorial-actions { align-items: stretch; flex-direction: column; }
    .editorial-actions .button,
    .editorial-actions .text-action { width: 100%; justify-content: center; }
    .migration-summary { padding: 22px; }
    .editorial-hero h1,
    .policy-hero h1 { font-size: clamp(2.65rem, 13.6vw, 4rem); }
    .split-heading h2,
    .section-heading-compact h2,
    .editorial-cta h2,
    .policy-copy > h2 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
}

@media (max-height: 620px) and (orientation: landscape) {
    .mobile-menu { padding-top: 88px; }
    .mobile-navigation > a,
    .mobile-products-trigger { padding: 10px 0; font-size: 1.25rem; }
    .mobile-products.is-open .mobile-products-list { padding: 6px 0 10px; }
    .editorial-hero { min-height: auto; padding-block: 130px 70px; }
}

.orbi-contact-form-actions a {
    color: var(--orbi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.error-page {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: 60px 0;
    background:
        radial-gradient(circle at 80% 18%, rgba(6, 57, 47, .11), transparent 32%),
        var(--paper);
}

.error-page .section-container {
    max-width: 980px;
}

.error-brand {
    display: block;
    width: 118px;
    margin-bottom: clamp(70px, 12vh, 130px);
}

.error-page .section-container > span {
    color: var(--orbi);
    font-size: .68rem;
    letter-spacing: .12em;
}

.error-page h1 {
    margin: 22px 0 28px;
    font-size: clamp(3.2rem, 8vw, 8rem);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.075em;
}

.error-page h1 em {
    color: var(--orbi);
    font-weight: 400;
}

.error-page p {
    max-width: 520px;
    color: var(--ink-soft);
    line-height: 1.75;
}

.error-page .section-container > div {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    margin-top: 34px;
}

.error-page .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}