/******************** Font Family ****************/
@font-face {
    font-family: "Gotham Ultra";
    src: url("../fonts/Gotham-Ultra.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Book";
    src: url("../fonts/Gotham-Book.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Bold";
    src: url("../fonts/Gotham-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/********************* Navigation Menu *****************/
.custom-logo-link {
    width: 64px;
}

.hamburger-icon {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    border-top: 2.5px solid #F6F6F6;
}

.nav-link {
    --bs-nav-link-font-size: 2rem;
    --bs-nav-link-font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 28px;
    font-family: 'Gotham Ultra', Arial, sans-serif;
}

.navbar-dark {
    --bs-navbar-color: #ffffff;
}

#main-menu {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.navbar-collab-logo {
    position: absolute;
    left: 47.5%;
    top: 11%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.navbar-collab-logo img {
    width: 175px;
    height: auto;
}

#main-nav.menu-open .navbar-collab-logo {
    opacity: 1;
    visibility: visible;
}

#main-nav.menu-open {
    background: #00000094!important;
}

#main-nav {
    transition: background 0.3s ease;
    z-index: 1050;
}

#page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #0000008A;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1040;
    pointer-events: none;
}

#page:has(#main-nav.menu-open)::before {
    opacity: 1;
    visibility: visible;
}

#navbarNavDropdown, .nav-copyright {
    padding-top: 100px;
}

.nav-copyright {
    width: max-content;
    left: -2.5%;
    position: relative;
    font-size: 12px;
}

#main-nav.menu-open .hamburger-icon span:first-child {
    transform: translateY(9.75px) rotate(45deg);
    border-top: 2px solid #FFFFFF;
}

#main-nav.menu-open .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

#main-nav.menu-open .hamburger-icon span:last-child {
    transform: translateY(-9.75px) rotate(-45deg);
    border-top: 2px solid #FFFFFF;
}

#main-nav.menu-open #main-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/********************* Body *****************/
body {
    font-family: 'Gotham Book', Arial, sans-serif;
    color: #ffffff;
}

.bg-primary {
    background-color: #010B09!important;
}

strong {
    font-family: 'Gotham Bold', Arial, sans-serif;
}

/********************* Headings *****************/
.text_outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.69px #FFFFFF;
    font-family: 'Gotham Ultra', Arial, sans-serif;
    letter-spacing: 8%;
}

h3 {
    font-family: 'Gotham Ultra', Arial, sans-serif;
}

/********************* Homepage *****************/
#hero_banner {
    height: 100vh;
    background-color: #130e19;
    background-image:
        radial-gradient(
            ellipse 65% 70% at 100% 100%,
            rgba(64, 15, 105, 0.85) 0%,
            rgba(48, 13, 71, 0.72) 25%,
            rgba(21, 11, 27, 0.35) 55%,
            rgba(0, 0, 0, 0) 78%
        ),

        radial-gradient(
            ellipse 60% 65% at 60% 105%,
            rgba(8, 10, 10, 0.98) 0%,
            rgba(27, 12, 18, 0.88) 30%,
            rgba(75, 22, 28, 0.42) 58%,
            rgba(0, 0, 0, 0) 80%
        ),

        radial-gradient(
            ellipse 70% 85% at 105% 25%,
            rgba(255, 39, 42, 0.98) 0%,
            rgba(239, 47, 47, 0.90) 30%,
            rgba(181, 32, 56, 0.60) 58%,
            rgba(111, 19, 58, 0.20) 78%,
            rgba(0, 0, 0, 0) 100%
        ),

        radial-gradient(
            ellipse 55% 65% at 73% 35%,
            rgba(242, 91, 45, 0.92) 0%,
            rgba(220, 80, 52, 0.72) 35%,
            rgba(198, 67, 69, 0.32) 65%,
            rgba(0, 0, 0, 0) 85%
        ),

        radial-gradient(
            ellipse 50% 65% at 53% 43%,
            rgba(209, 91, 155, 0.92) 0%,
            rgba(187, 82, 170, 0.72) 35%,
            rgba(133, 72, 171, 0.30) 65%,
            rgba(0, 0, 0, 0) 88%
        ),

        radial-gradient(
            ellipse 42% 58% at 36% 45%,
            rgba(150, 83, 231, 0.90) 0%,
            rgba(108, 91, 206, 0.68) 34%,
            rgba(58, 107, 165, 0.30) 67%,
            rgba(0, 0, 0, 0) 90%
        ),

        radial-gradient(
            ellipse 45% 75% at 20% 62%,
            rgba(31, 153, 143, 0.88) 0%,
            rgba(25, 126, 122, 0.66) 40%,
            rgba(16, 88, 84, 0.25) 70%,
            rgba(0, 0, 0, 0) 92%
        ),

        radial-gradient(
            ellipse 55% 65% at -3% 92%,
            rgba(10, 222, 91, 0.98) 0%,
            rgba(10, 183, 83, 0.82) 35%,
            rgba(12, 119, 75, 0.42) 68%,
            rgba(0, 0, 0, 0) 92%
        ),

        radial-gradient(
            ellipse 70% 80% at -5% -5%,
            rgba(7, 65, 15, 1) 0%,
            rgba(8, 75, 34, 0.92) 42%,
            rgba(11, 88, 66, 0.55) 72%,
            rgba(0, 0, 0, 0) 100%
        );
    background-image: url('/wp-content/uploads/2026/10/gradient-splash-screen.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

#hero-fluid-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.collab-icon {
    position: absolute;
    top: 40%;
    left: 40%;
}

.eyebrow {
    letter-spacing: 20%;
}

.mission-visual {
    position: absolute;
    width: min(65vw, 583px);
    aspect-ratio: 1 / 1;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.mission-gradient {
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    background-image: url('/wp-content/uploads/2026/10/foreground-green-blob-Updated.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
}

#mission .gsap-reveal,
#proof .gsap-reveal {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.work-gradient {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background-image: url('/wp-content/uploads/2026/10/Foreground-Pink-Blob-Updated-v2.webp'); /*url('/wp-content/uploads/2026/10/Foreground-Pink-Blob-Updated.webp');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.small {
    font-size: .7em;
}

.overlay {
    background: linear-gradient(0deg, #010B09 0%, rgba(1, 11, 9, 0) 86.59%);
    position: absolute;
    bottom: 0;
    height: 35%;
    width: 100%;;
}

.blob_image {
    position: absolute;
    right: 9%;
}

.placeholder_overlay {
    position: absolute;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;
    top: 0;
}

.placeholder_proof_1 {
    position: absolute;
    top: 0;
    left: 27%;
}

.placeholder_proof_2 {
    position: absolute;
    top: 30%;
    right: 1%;
}

.heading_medium {
    font-size: clamp(24px, calc(16.61px + 1.972vw), 45px);
}

.heading_large {
    font-size: clamp(40px, calc(24.15px + 4.225vw), 85px);
}

.proof-video {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    /* background-color: #D1D1D1; */
}

.proof-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.text_pink {
    color: #DD7092;
}

.video_coming_soon {
    position: absolute;
    bottom: 0;
}

#video-play {
    background: url('/wp-content/uploads/2026/10/Video-Placeholder-Play-Icon.webp');
    width: 80px;
    height: 80px;
    background-size: cover;
    background-repeat: no-repeat;
}

.proof-visual {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.proof-gradient {
    position: absolute;
    top: 50%;
    left: 62%;
    background-image: url('/wp-content/uploads/2026/10/Foreground-Green-Blue-Blob-Updated.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bg_diff_1 {
    left: -21%;
    width: 51%;
    top: -15%;
}

.bg_solution_1 {
    right: 0;
    width: 22%;
    top: -30%;
}

.news-visual {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.news-gradient {
    position: absolute;
    top: 50%;
    left: 30%;
    background-image: url('/wp-content/uploads/2026/10/Foreground-Pink-Orange-Blob-scaled.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gradient-outline-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gradient-outline-text {
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    paint-order: stroke;
    font-size: clamp(40px, calc(24.15px + 100vw), 135px);
}

.btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;

    position: relative;
    display: inline-block;

    padding: 18px 28px;

    border: 0;
    border-radius: 10px;

    font-family: 'Gotham Bold', Arial, sans-serif;
    text-transform: uppercase;

    /* Gradient text */
    background: linear-gradient(90deg, #FE6929 0%, #DD7092 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Gradient rounded border */
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 10px;
    padding: 2px;

    background: linear-gradient(90deg, #FE6929 0%, #DD7092 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.btn-primary:hover {
    background-color: transparent !important;
    background-image: linear-gradient(
        90deg,
        #FE6929 0%,
        #DD7092 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    transform: translateY(-3px);
    filter: brightness(1.2);
    cursor: pointer;
}

.btn-primary:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

#wrapper-footer hr {
    border: 0.5px solid #FFFFFF;
}

.footer-social {
    gap: 20px;
}

.difference-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('/wp-content/uploads/2026/10/bg-for-collab-diff.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#difference::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(
        to bottom,
        rgba(1, 11, 9, 0) 0%,
        rgba(1, 11, 9, 0.35) 45%,
        rgba(1, 11, 9, 0.80) 80%,
        #010B09 100%
    );
    pointer-events: none;
    z-index: 1;
}

.difference-image {
    display: inline-block;
    height: auto;
    will-change: transform;
}

.collab-logo {
    --gap-co: 10.23px;
    --gap-ol: 14.71px;
    --gap-ll: 18.17px;
    --gap-la: 14.74px;
    --gap-ab: 18.2px;
}

.collab-logo .letter-o {
    margin-left: var(--gap-co);
}

.collab-logo .letter-l1 {
    margin-left: var(--gap-ol);
}

.collab-logo .letter-l2 {
    margin-left: var(--gap-ll);
}

.collab-logo .letter-a {
    --final-a-gap: var(--gap-la);
    margin-left: 0;
}

.collab-logo .letter-b {
    margin-left: var(--gap-ab);
}

#hero_banner .hero-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            #103d29 0%,
            #282344 45%,
            #130e19 100%
        );
}

#hero_banner .gradient-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

#hero_banner .gradient-green {
    background:
        radial-gradient(
            ellipse 70% 80% at 0% 0%,
            rgba(7, 65, 15, 1) 0%,
            rgba(8, 75, 34, 0.92) 42%,
            rgba(11, 88, 66, 0.55) 72%,
            transparent 100%
        );
}

#hero_banner .gradient-teal {
    background:
        radial-gradient(
            ellipse 45% 75% at 20% 62%,
            rgba(31, 153, 143, 0.88) 0%,
            rgba(25, 126, 122, 0.66) 40%,
            rgba(16, 88, 84, 0.25) 70%,
            transparent 92%
        );
}

#hero_banner .gradient-purple {
    background:
        radial-gradient(
            ellipse 42% 58% at 36% 45%,
            rgba(150, 83, 231, 0.90) 0%,
            rgba(108, 91, 206, 0.68) 34%,
            rgba(58, 107, 165, 0.30) 67%,
            transparent 90%
        );
}

#hero_banner .gradient-pink {
    background:
        radial-gradient(
            ellipse 50% 65% at 53% 43%,
            rgba(209, 91, 155, 0.92) 0%,
            rgba(187, 82, 170, 0.72) 35%,
            rgba(133, 72, 171, 0.30) 65%,
            transparent 88%
        );
}

#hero_banner .gradient-orange {
    background:
        radial-gradient(
            ellipse 55% 65% at 73% 35%,
            rgba(242, 91, 45, 0.92) 0%,
            rgba(220, 80, 52, 0.72) 35%,
            rgba(198, 67, 69, 0.32) 65%,
            transparent 85%
        );
}

#hero_banner .gradient-red {
    background:
        radial-gradient(
            ellipse 70% 85% at 105% 25%,
            rgba(255, 39, 42, 0.98) 0%,
            rgba(239, 47, 47, 0.90) 30%,
            rgba(181, 32, 56, 0.60) 58%,
            rgba(111, 19, 58, 0.20) 78%,
            transparent 100%
        );
}

#hero_banner .gradient-dark {
    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(13, 9, 19, 0.25) 55%,
            rgba(5, 7, 12, 0.80) 80%,
            rgba(3, 8, 9, 1) 100%
        );

    z-index: 10;
    will-change: auto;
}

.collab-side-nav {
    position: fixed;
    top: 50%;
    left: 28px;
    right: auto;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: #F2F3F0;
}

/* Number counter */

.side-nav-count {
    height: 24px;
    min-height: 24px;
    flex: 0 0 24px;
}

.side-nav-current {
    font-variant-numeric: tabular-nums;
}

.side-nav-total {
    font-size: 12px;
    color: rgba(242, 243, 240, 0.45);
}

/* .side-nav-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    flex-shrink: 0;
} */

.side-nav-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* .side-nav-line {
    width: 2px;
    height: 28px;
    border: 0;
    padding: 0;
    background: rgba(242, 243, 240, 0.25);
    cursor: pointer;
} */

.side-nav-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;
    border-radius: 999px;

    background: rgba(242, 243, 240, 0.45);
    transform: translate(-50%, -50%);

    transition:
        height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease;
}

.side-nav-line:hover::before {
    background: rgba(242, 243, 240, 0.8);
}

.side-nav-line.active:hover::before {
    background: #F2F3F0;
}

.side-nav-line.active::before {
    height: 24px;
    background: #F2F3F0;
}

.side-nav-line {
    position: relative;

    width: 12px;
    height: 30px;
    min-height: 30px;

    flex: 0 0 30px;

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

    padding: 0;
    margin: 0;
    border: 0;

    background: transparent;
    cursor: pointer;
}

.side-nav-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    width: 20px;
    flex: 0 0 140px;

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

    white-space: nowrap;
    overflow: hidden;

    font-size: 13px;
    letter-spacing: 4px;
    color: rgba(242, 243, 240, 0.55);
}

#incubator .pl-incubator { padding-left: 100px; }

.bg_incubator {
    position: absolute;
    top: -20%;
    width: 70%;
}


/********************* Responsive *****************/
@media only screen and (max-width: 1024px) {
    #incubator .pl-incubator { padding-left: 50px; }
}

@media only screen and (max-width: 991px) {
    .placeholder_proof_2 img, .placeholder_proof_1 img {
        width: 350px;
    }

    .bg_solution_1 {
        top: 0;
    }

    #hero_banner::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(0deg, #010B09 0%, rgba(1, 11, 9, 0) 86.59%)
    }

    .bottom-navigation {
        position: relative;
    }

    .mission-visual {
        right: 0%;
    }

    #incubator .pl-incubator { padding-left: 20px; }
}

@media only screen and (max-width: 920px) {
    .collab-side-nav {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .custom-vh-100 {
        height: 100vh!important;
    }

    .proof-video {
        max-width: 350px;
        aspect-ratio: 350 / 623;
    }

    .proof-visual {
        max-width: 350px;
    }

    .news-gradient {
        width: 250%;
        height: 250%;
    }
}

@media only screen and (max-width: 767px) {
    .mission-visual {
        right: 9%;
    }

    .proof-video {
        max-width: 100%;
        aspect-ratio: 350 / 623;
    }

    .proof-visual {
        max-width: 100%;
    }

    .news-gradient {
        width: 150%;
        height: 150%;
        left: 0;
    }

    .collab-brand {
        zoom: min(1, calc((100vw - 32px) / 680px));
    }

    .bg_incubator { 
        top: 0%;
        width: 100%;
    }
}

@media only screen and (min-width: 576px) {
    body {
        --bs-body-font-size: 1.25rem;
    }

    section, .padding-100 {
        padding-top: 100px;
        padding-bottom: 100px;;
    }

    .proof-gradient {
        width: 250%;
        height: 250%;
    }

    .difference-image {
        max-width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    section, .padding-100 {
        padding-top: 50px;
        padding-bottom: 50px;;
    }

    .proof-gradient {
        width: 300%;
        height: 200%;
    }

    .difference-image {
        max-width: 70%;
    }
}