/* =========================================================
   OBN VENTURES
   PREMIUM CORPORATE LANDING
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --obn-navy-deep: #061522;
    --obn-navy: #0B2236;
    --obn-navy-light: #123B59;

    /* Reference Image Orange */
    --obn-orange: #FB8A00;
    --obn-orange-light: #FFB13B;

    --obn-white: #FFFFFF;

    --obn-text: rgba(255, 255, 255, .92);
    --obn-text-soft: rgba(255, 255, 255, .62);
    --obn-text-muted: rgba(255, 255, 255, .38);

    --obn-border: rgba(255, 255, 255, .10);

    --obn-heading: "Playfair Display", Georgia, serif;
    --obn-body: "DM Sans", Arial, sans-serif;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        var(--obn-navy-deep);

    color:
        var(--obn-white);

    font-family:
        var(--obn-body);

    overflow-x: hidden;

}

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

.obn-hero {

    position: relative;

    width: 100%;

    min-height: 100vh;
    height: 100vh;

    display: flex;

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

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(circle at 50% 45%,
            rgba(18, 59, 89, 0.50),
            transparent 38%),

        radial-gradient(circle at 50% 50%,
            rgba(244, 119, 33, 0.055),
            transparent 48%),

        linear-gradient(135deg,
            #061522 0%,
            #0b2236 45%,
            #071a2b 100%);

}

/* =========================================================
   PREMIUM BACKGROUND LIGHT
========================================================= */

.obn-hero::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.015) 25%,
            transparent 68%);

    filter: blur(15px);

    pointer-events: none;

    animation:
        obnBreathing 8s ease-in-out infinite;

}

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

.obn-grid {

    position: absolute;

    inset: -100px;

    opacity: 0.65;

    background-image:

        linear-gradient(rgba(255, 255, 255, 0.028) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, 0.028) 1px,
            transparent 1px);

    background-size:
        80px 80px;

    transform:
        perspective(700px) rotateX(55deg) scale(1.5);

    transform-origin:
        center center;

    mask-image:

        radial-gradient(ellipse at center,
            black 15%,
            rgba(0, 0, 0, 0.6) 42%,
            transparent 78%);

    -webkit-mask-image:

        radial-gradient(ellipse at center,
            black 15%,
            rgba(0, 0, 0, 0.6) 42%,
            transparent 78%);

    animation:
        obnGridMove 18s linear infinite;

}

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

@keyframes obnGridMove {

    0% {

        background-position:
            0 0,
            0 0;

    }

    100% {

        background-position:
            0 80px,
            80px 0;

    }

}

/* =========================================================
   AMBIENT GLOWS
========================================================= */

.obn-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);

    opacity: 0.55;

}

/* TOP RIGHT */

.obn-glow-one {

    width: 520px;
    height: 520px;

    top: -280px;
    right: -160px;

    background:
        rgba(244, 119, 33, 0.12);

    animation:
        obnGlowOne 12s ease-in-out infinite;

}

/* BOTTOM LEFT */

.obn-glow-two {

    width: 500px;
    height: 500px;

    bottom: -300px;
    left: -180px;

    background:
        rgba(31, 72, 104, 0.50);

    animation:
        obnGlowTwo 15s ease-in-out infinite;

}

/* =========================================================
   GLOW ANIMATIONS
========================================================= */

@keyframes obnGlowOne {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

        opacity:
            0.45;

    }

    50% {

        transform:
            translate(-80px, 100px) scale(1.15);

        opacity:
            0.75;

    }

}

@keyframes obnGlowTwo {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(100px, -80px) scale(1.2);

    }

}

/* =========================================================
   FLOATING LIGHT PARTICLES
========================================================= */

.obn-light {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--obn-orange);

    box-shadow:

        0 0 10px rgba(244, 119, 33, 0.8),

        0 0 25px rgba(244, 119, 33, 0.35);

    opacity:
        0.55;

}

/* PARTICLE 1 */

.obn-light-one {

    top: 19%;
    left: 17%;

    animation:
        obnParticleOne 8s ease-in-out infinite;

}

/* PARTICLE 2 */

.obn-light-two {

    top: 27%;
    right: 16%;

    animation:
        obnParticleTwo 10s ease-in-out infinite;

}

/* PARTICLE 3 */

.obn-light-three {

    bottom: 22%;
    right: 23%;

    animation:
        obnParticleThree 7s ease-in-out infinite;

}

/* =========================================================
   PARTICLE ANIMATIONS
========================================================= */

@keyframes obnParticleOne {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity:
            0.25;

    }

    50% {

        transform:
            translate(40px, -50px);

        opacity:
            1;

    }

}

@keyframes obnParticleTwo {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity:
            0.25;

    }

    50% {

        transform:
            translate(-50px, 40px);

        opacity:
            0.9;

    }

}

@keyframes obnParticleThree {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity:
            0.25;

    }

    50% {

        transform:
            translate(30px, -35px);

        opacity:
            0.9;

    }

}

/* =========================================================
   CONTAINER
========================================================= */

.obn-container {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        40px 25px;

}

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

.obn-hero-content {

    position: relative;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}

/* =========================================================
   EYEBROW
========================================================= */

.obn-eyebrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-bottom:
        38px;

    color:
        var(--obn-text-muted);

    font-size:9px;

    font-weight:
        700;

    letter-spacing:
        0.32em;

    text-transform:
        uppercase;

    opacity:
        0;

    animation:
        obnFadeUp 1s cubic-bezier(.16, 1, .3, 1) 0.15s forwards;

}

.obn-eyebrow span {

    display:
        block;

    width:
        42px;

    height:
        1px;

    background:
        var(--obn-orange);

    opacity:
        0.7;

}

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

.obn-logo-wrap {

    position:
        relative;

    width:
        155px;

    height:
        155px;

    margin:
        0 auto 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025) 60%,
            transparent 72%);

    border:
        1px solid rgba(255, 255, 255, 0.13);

    box-shadow:

        inset 0 0 30px rgba(255, 255, 255, 0.025),

        0 30px 80px rgba(0, 0, 0, 0.35),

        0 0 100px rgba(244, 119, 33, 0.07);

    opacity:
        0;

    transform:
        scale(0.75);

    animation:
        obnLogoEntrance 1.5s cubic-bezier(.16, 1, .3, 1) 0.35s forwards;

}

/* =========================================================
   LOGO INNER RING
========================================================= */

.obn-logo-wrap::before {

    content: "";

    position:
        absolute;

    inset:
        -12px;

    border-radius:
        50%;

    border:
        1px solid rgba(244, 119, 33, 0.20);

    animation:
        obnRingPulse 4s ease-in-out infinite;

}

/* =========================================================
   LOGO ORBIT
========================================================= */

.obn-logo-wrap::after {

    content: "";

    position:
        absolute;

    inset:
        -29px;

    border-radius:
        50%;

    border:
        1px dashed rgba(255, 255, 255, 0.10);

    animation:
        obnOrbit 24s linear infinite;

}

/* =========================================================
   LOGO
========================================================= */

.obn-logo {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    height:
        90px;

    object-fit:
        contain;

    filter:
        drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));

}

/* =========================================================
   SMALL ORBIT DOTS
========================================================= */

.obn-logo-wrap .orbit-dot {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--obn-orange);

    box-shadow:
        0 0 15px rgba(244, 119, 33, 0.8);

}

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

.obn-title {

    margin:
        0;

    font-family:
        var(--obn-heading);

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

    font-weight:
        600;

    line-height:
        0.95;

    letter-spacing:
        -0.045em;

    color:
        var(--obn-white);

    opacity:
        0;

    transform:
        translateY(35px);

    animation:
        obnFadeUp 1.2s cubic-bezier(.16, 1, .3, 1) 0.75s forwards;

}

.obn-title span {

    color:
        var(--obn-orange);

}

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

.obn-description {

    max-width:
        650px;

    margin:
        31px auto 0;

    color:
        var(--obn-text-soft);

    font-family:
        var(--obn-body);

    font-size:
        clamp(0.94rem,
            1.3vw,
            1.07rem);

    line-height:
        1.9;

    font-weight:
        400;

    opacity:
        0;

    transform:
        translateY(25px);

    animation:
        obnFadeUp 1.1s cubic-bezier(.16, 1, .3, 1) 1s forwards;

}

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

.obn-statement {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-top:
        34px;

    color:
        rgba(255, 255, 255, 0.40);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.28em;

    opacity:
        0;

    animation:
        obnFadeIn 1.2s ease 1.3s forwards;

}

.obn-statement-line {

    width:
        50px;

    height:
        1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(244, 119, 33, 0.55));

}

.obn-statement-line:last-child {

    background:
        linear-gradient(90deg,
            rgba(244, 119, 33, 0.55),
            transparent);

}

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

.obn-scroll {

    position:
        absolute;

    left:
        50%;

    bottom:
        -105px;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.30);

    opacity:
        0;

    animation:
        obnFadeIn 1s ease 1.7s forwards;

}

.obn-scroll-line {

    position:
        relative;

    width:
        1px;

    height:
        34px;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.10);

}

.obn-scroll-line::after {

    content:
        "";

    position:
        absolute;

    top:
        -100%;

    left:
        0;

    width:
        100%;

    height:
        100%;

    background:
        var(--obn-orange);

    animation:
        obnScrollLine 2s ease-in-out infinite;

}

.obn-scroll small {

    white-space:
        nowrap;

    font-size:
        7px;

    letter-spacing:
        0.22em;

    font-weight:
        600;

}

.obn-scroll i {

    color:
        var(--obn-orange);

    font-size:
        10px;

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

}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

@keyframes obnFadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(35px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}

@keyframes obnFadeIn {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}

@keyframes obnLogoEntrance {

    0% {

        opacity:
            0;

        transform:
            scale(0.65) rotate(-10deg);

    }

    60% {

        opacity:
            1;

        transform:
            scale(1.06) rotate(2deg);

    }

    100% {

        opacity:
            1;

        transform:
            scale(1) rotate(0);

    }

}

/* =========================================================
   LOGO RING ANIMATION
========================================================= */

@keyframes obnRingPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity:
            0.35;

    }

    50% {

        transform:
            scale(1.08);

        opacity:
            0.9;

    }

}

/* =========================================================
   ORBIT
========================================================= */

@keyframes obnOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}

/* =========================================================
   BREATHING LIGHT
========================================================= */

@keyframes obnBreathing {

    0%,
    100% {

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

        opacity:
            0.45;

    }

    50% {

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

        opacity:
            1;

    }

}

/* =========================================================
   SCROLL LINE
========================================================= */

@keyframes obnScrollLine {

    0% {

        transform:
            translateY(-100%);

    }

    50% {

        transform:
            translateY(100%);

    }

    100% {

        transform:
            translateY(100%);

    }

}

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

@keyframes obnArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.45;

    }

    50% {

        transform:
            translateY(6px);

        opacity:
            1;

    }

}

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

@media (max-width: 991.98px) {

    .obn-logo-wrap {

        width:
            140px;

        height:
            140px;

    }

    .obn-logo {

        width:
            82px;

        height:
            82px;

    }

}

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

@media (max-width: 767.98px) {

    .obn-hero {

        min-height:
            100svh;

        height:
            100svh;

    }

    .obn-grid {

        background-size:
            55px 55px;

        transform:
            perspective(600px) rotateX(55deg) scale(1.8);

    }

    .obn-container {

        padding:
            30px 18px;

    }

    .obn-eyebrow {

        font-size:
            7px;

        letter-spacing:
            0.20em;

        gap:
            9px;

        margin-bottom:
            30px;

    }

    .obn-eyebrow span {

        width:
            23px;

    }

    .obn-logo-wrap {

        width:
            115px;

        height:
            115px;

        margin-bottom:
            29px;

    }

    .obn-logo-wrap::after {

        inset:
            -22px;

    }

    .obn-logo {

        width:
            68px;

        height:
            68px;

    }

    .obn-title {

        font-size:
            3rem;

        line-height:
            0.98;

    }

    .obn-description {

        max-width:
            340px;

        margin-top:
            23px;

        font-size:
            0.86rem;

        line-height:
            1.8;

    }

    .obn-statement {

        margin-top:
            25px;

        font-size:
            6.5px;

        letter-spacing:
            0.16em;

        gap:
            9px;

    }

    .obn-statement-line {

        width:
            23px;

    }

    .obn-scroll {

        bottom:
            -78px;

    }

    .obn-scroll small {

        font-size:
            6px;

    }

    .obn-light {

        width:
            3px;

        height:
            3px;

    }

    .obn-glow-one {

        width:
            300px;

        height:
            300px;

        top:
            -170px;

        right:
            -170px;

    }

    .obn-glow-two {

        width:
            300px;

        height:
            300px;

        bottom:
            -180px;

        left:
            -170px;

    }

}

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

@media (max-width: 380px) {

    .obn-logo-wrap {

        width:
            100px;

        height:
            100px;

    }

    .obn-logo {

        width:
            60px;

        height:
            60px;

    }

    .obn-title {

        font-size:
            2.65rem;

    }

    .obn-description {

        font-size:
            0.82rem;

    }

}

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

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

    }

}

/* =========================================================
   OBN VENTURES — OUR BRANDS
========================================================= */

.obn-brands {

    position: relative;

    width: 100%;

    padding:
        140px 0 130px;

    overflow: hidden;

    background:

        radial-gradient(circle at 50% 0%,
            rgba(18, 59, 89, 0.45),
            transparent 42%),

        linear-gradient(180deg,
            #061522 0%,
            #071b2b 50%,
            #061522 100%);

}

/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.brands-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(120px);

    opacity: 0.35;

}

.brands-bg-glow-one {

    width: 500px;

    height: 500px;

    top: 10%;

    left: -300px;

    background:
        rgba(244, 119, 33, 0.10);

    animation:
        brandsGlowOne 12s ease-in-out infinite;

}

.brands-bg-glow-two {

    width: 500px;

    height: 500px;

    right: -300px;

    bottom: 5%;

    background:
        rgba(18, 59, 89, 0.70);

    animation:
        brandsGlowTwo 15s ease-in-out infinite;

}

/* =========================================================
   CONTAINER
========================================================= */

.brands-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 0 25px;

}

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

.brands-header {

    max-width: 760px;

    margin:
        0 auto 75px;

    text-align: center;

}

/* =========================================================
   EYEBROW
========================================================= */

.brands-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 22px;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.30em;

}

.brands-eyebrow span {

    width: 35px;

    height: 1px;

    background:
        var(--obn-orange);

    opacity: 0.75;

}

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

.brands-title {

    margin: 0;

    font-family:
        var(--obn-heading);

    font-size:
        clamp(2.7rem,
            5vw,
            4.7rem);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing:
        -0.035em;

    color:
        #ffffff;

}

.brands-title span {

    display: block;

    color:
        var(--obn-orange);

}

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

.brands-intro {

    max-width: 650px;

    margin:
        25px auto 0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.96rem;

    line-height:
        1.85;

}

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

.brands-grid {

    display: grid;

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

    gap: 20px;

}

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

.brand-card {

    position: relative;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 24px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius:
        18px;

    background:

        linear-gradient(145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.018));

    backdrop-filter:
        blur(15px);

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

    box-shadow:

        0 25px 70px rgba(0, 0, 0, 0.20);

    transition:

        transform 0.55s cubic-bezier(.16, 1, .3, 1),

        border-color 0.45s ease,

        box-shadow 0.45s ease;

}

/* =========================================================
   CARD TOP ORANGE LINE
========================================================= */

.brand-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background:

        linear-gradient(90deg,
            transparent,
            var(--obn-orange),
            transparent);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1);

}

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

.brand-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(244, 119, 33, 0.28);

    box-shadow:

        0 35px 90px rgba(0, 0, 0, 0.35),

        0 0 50px rgba(244, 119, 33, 0.045);

}

.brand-card:hover::before {

    transform:
        scaleX(1);

}

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

.brand-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.brand-number {

    color:
        rgba(255, 255, 255, 0.23);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}

.brand-category {

    padding:
        6px 9px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        50px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        6.5px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    white-space:
        nowrap;

}

/* =========================================================
   LOGO AREA
========================================================= */

.brand-logo-area {

    position: relative;

    height:
        205px;

    margin:
        25px 0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

/* =========================================================
   LOGO BACKDROP
========================================================= */

.brand-logo-area::before {

    content: "";

    position: absolute;

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, 0.08),
            transparent 68%);

    opacity:
        0.8;

    transition:
        transform 0.7s ease,
        opacity 0.5s ease;

}

.brand-card:hover .brand-logo-area::before {

    transform:
        scale(1.25);

    opacity:
        1;

}

/* =========================================================
   LOGO
========================================================= */

.brand-logo {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px;

    border-radius:
        14px;

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1);

}

.brand-card:hover .brand-logo {

    transform:
        scale(1.07) translateY(-4px);

}

.brand-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    filter:
        drop-shadow(0 12px 25px rgba(0, 0, 0, 0.25));

}

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

.brand-content {

    display:
        flex;

    flex-direction:
        column;

    flex: 1;

}

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

.brand-content h3 {

    margin:
        0 0 13px;

    color:
        #ffffff;

    font-family:
        var(--obn-heading);

    font-size:
        1.55rem;

    font-weight:
        600;

    line-height:
        1.15;

}

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

.brand-content p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.49);

    font-size:
        0.82rem;

    line-height:
        1.75;

}

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

.brand-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        24px;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;

}

.brand-link i {

    color:
        var(--obn-orange);

    font-size:
        10px;

    transition:
        transform 0.3s ease;

}

.brand-link:hover {

    color:
        var(--obn-orange);

    gap:
        14px;

}

.brand-link:hover i {

    transform:
        translate(2px,
            -2px);

}

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

.brands-footer-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        75px;

}

.brands-footer-line span {

    width:
        60px;

    height:
        1px;

    background:
        rgba(255, 255, 255, 0.08);

}

.brands-footer-line p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.25);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.25em;

}

/* =========================================================
   GLOW ANIMATIONS
========================================================= */

@keyframes brandsGlowOne {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(100px, 60px) scale(1.2);

    }

}

@keyframes brandsGlowTwo {

    0%,
    100% {

        transform:
            translate(0, 0) scale(1);

    }

    50% {

        transform:
            translate(-100px, -80px) scale(1.15);

    }

}

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

@media (max-width: 1100px) {

    .brands-grid {

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

        max-width:
            850px;

        margin:
            0 auto;

    }

    .brand-card {

        min-height:
            480px;

    }

}

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

@media (max-width: 767.98px) {

    .obn-brands {

        padding:
            100px 0 90px;

    }

    .brands-container {

        padding:
            0 18px;

    }

    .brands-header {

        margin-bottom:
            50px;

    }

    .brands-eyebrow {

        font-size:
            7px;

        letter-spacing:
            0.20em;

    }

    .brands-title {

        font-size:
            2.7rem;

    }

    .brands-intro {

        font-size:
            0.87rem;

        line-height:
            1.8;

    }

    .brands-grid {

        grid-template-columns:
            1fr;

        max-width:
            520px;

        gap:
            18px;

    }

    .brand-card {

        min-height:
            450px;

        padding:
            22px;

    }

    .brand-logo-area {

        height:
            180px;

    }

    .brand-logo {

        width:
            170px;

        height:
            120px;

    }

    .brands-footer-line {

        margin-top:
            50px;

        gap:
            10px;

    }

    .brands-footer-line span {

        width:
            25px;

    }

    .brands-footer-line p {

        font-size:
            6px;

        letter-spacing:
            0.15em;

    }

}

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

@media (max-width: 380px) {

    .brands-title {

        font-size:
            2.35rem;

    }

    .brand-card {

        min-height:
            430px;

    }

    .brand-logo-area {

        height:
            160px;

    }

}

/* =========================================================
   OBN VENTURES — ABOUT SECTION
========================================================= */

.obn-about {

    position: relative;

    width: 100%;

    padding:
        150px 0;

    overflow: hidden;

    background:

        radial-gradient(circle at 80% 45%,
            rgba(18, 59, 89, 0.38),
            transparent 35%),

        linear-gradient(180deg,
            #061522 0%,
            #081d2e 50%,
            #061522 100%);

}

/* =========================================================
   BACKGROUND ORBS
========================================================= */

.about-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(120px);

}

.about-orb-one {

    width: 500px;

    height: 500px;

    left: -350px;

    top: 20%;

    background:
        rgba(244, 119, 33, 0.07);

    animation:
        aboutOrbOne 14s ease-in-out infinite;

}

.about-orb-two {

    width: 600px;

    height: 600px;

    right: -400px;

    bottom: -250px;

    background:
        rgba(18, 59, 89, 0.55);

    animation:
        aboutOrbTwo 18s ease-in-out infinite;

}

/* =========================================================
   CONTAINER
========================================================= */

.about-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding:
        0 25px;

}

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

.about-layout {

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items: center;

    gap: 100px;

}

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

.about-visual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

}

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

.about-visual-frame {

    position: relative;

    width: 390px;

    height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    background:

        linear-gradient(145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.012));

    box-shadow:

        0 40px 100px rgba(0, 0, 0, 0.30),

        inset 0 0 80px rgba(255, 255, 255, 0.015);

    backdrop-filter:
        blur(15px);

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

    transform:
        rotate(-2deg);

    transition:
        transform 0.7s cubic-bezier(.16, 1, .3, 1);

}

.about-visual-frame:hover {

    transform:
        rotate(0deg) translateY(-8px);

}

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

.about-visual-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, 0.025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px);

    background-size:
        45px 45px;

    mask-image:

        radial-gradient(circle at center,
            black,
            transparent 75%);

    -webkit-mask-image:

        radial-gradient(circle at center,
            black,
            transparent 75%);

    pointer-events: none;

}

/* =========================================================
   CORNERS
========================================================= */

.about-corner {

    position: absolute;

    width: 35px;

    height: 35px;

}

.about-corner-tl {

    top: -1px;

    left: -1px;

    border-top:
        2px solid var(--obn-orange);

    border-left:
        2px solid var(--obn-orange);

}

.about-corner-tr {

    top: -1px;

    right: -1px;

    border-top:
        2px solid var(--obn-orange);

    border-right:
        2px solid var(--obn-orange);

}

.about-corner-bl {

    bottom: -1px;

    left: -1px;

    border-bottom:
        2px solid rgba(244, 119, 33, 0.45);

    border-left:
        2px solid rgba(244, 119, 33, 0.45);

}

.about-corner-br {

    bottom: -1px;

    right: -1px;

    border-bottom:
        2px solid rgba(244, 119, 33, 0.45);

    border-right:
        2px solid rgba(244, 119, 33, 0.45);

}

/* =========================================================
   RINGS
========================================================= */

.about-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.07);

}

.about-ring-one {

    width: 245px;

    height: 245px;

    animation:
        aboutRotate 25s linear infinite;

}

.about-ring-two {

    width: 310px;

    height: 310px;

    border-style: dashed;

    border-color:
        rgba(244, 119, 33, 0.12);

    animation:
        aboutRotateReverse 35s linear infinite;

}

/* =========================================================
   MONOGRAM
========================================================= */

.about-monogram {

    position: relative;

    z-index: 5;

    width: 155px;

    height: 155px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(244, 119, 33, 0.16),
            rgba(255, 255, 255, 0.025) 65%,
            transparent 70%);

    border:
        1px solid rgba(244, 119, 33, 0.28);

    box-shadow:

        0 0 70px rgba(244, 119, 33, 0.08),

        inset 0 0 35px rgba(244, 119, 33, 0.04);

}

.about-monogram span {

    font-family:
        var(--obn-heading);

    font-size:
        5rem;

    font-weight:
        600;

    color:
        var(--obn-orange);

    line-height:
        1;

    text-shadow:
        0 10px 35px rgba(0, 0, 0, 0.35);

}

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

.about-orbit-dot {

    position: absolute;

    z-index: 10;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--obn-orange);

    box-shadow:

        0 0 12px rgba(244, 119, 33, 0.9),

        0 0 25px rgba(244, 119, 33, 0.35);

}

.about-orbit-dot-one {

    top:
        105px;

    left:
        88px;

    animation:
        aboutFloatOne 5s ease-in-out infinite;

}

.about-orbit-dot-two {

    right:
        80px;

    bottom:
        115px;

    width:
        4px;

    height:
        4px;

    animation:
        aboutFloatTwo 6s ease-in-out infinite;

}

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

.about-visual-label {

    position: absolute;

    left: 25px;

    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255, 255, 255, 0.30);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.24em;

}

.about-label-line {

    width:
        25px;

    height:
        1px;

    background:
        var(--obn-orange);

}

/* =========================================================
   YEAR / PHILOSOPHY CARD
========================================================= */

.about-year-card {

    position: absolute;

    right: -5px;

    bottom: 45px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        15px 18px;

    background:
        rgba(7, 25, 39, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.30);

    backdrop-filter:
        blur(15px);

}

.about-year-number {

    font-family:
        var(--obn-heading);

    font-size:
        1.7rem;

    color:
        var(--obn-orange);

}

.about-year-text {

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        6px;

    line-height:
        1.6;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}

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

.about-content {

    max-width:
        650px;

}

/* =========================================================
   EYEBROW
========================================================= */

.about-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        22px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.28em;

}

.about-eyebrow span {

    width:
        34px;

    height:
        1px;

    background:
        var(--obn-orange);

}

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

.about-title {

    margin:
        0;

    font-family:
        var(--obn-heading);

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

    line-height:
        1.08;

    letter-spacing:
        -0.04em;

    font-weight:
        600;

    color:
        #ffffff;

}

.about-title span {

    color:
        var(--obn-orange);

}

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

.about-description {

    margin-top:
        30px;

}

.about-description p {

    margin:
        0 0 18px;

    color:
        rgba(255, 255, 255, 0.54);

    font-size:
        0.92rem;

    line-height:
        1.9;

}

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

.about-principles {

    display:
        grid;

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

    gap:
        15px;

    margin-top:
        35px;

}

.about-principle {

    padding:
        19px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        border-color 0.4s ease,
        transform 0.4s ease,
        background 0.4s ease;

}

.about-principle:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(244, 119, 33, 0.20);

    background:
        rgba(255, 255, 255, 0.04);

}

.principle-icon {

    margin-bottom:
        15px;

    color:
        var(--obn-orange);

    font-size:
        15px;

}

.about-principle h4 {

    margin:
        0 0 7px;

    color:
        #ffffff;

    font-family:
        var(--obn-heading);

    font-size:
        1rem;

    font-weight:
        600;

}

.about-principle p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.40);

    font-size:
        0.68rem;

    line-height:
        1.6;

}

/* =========================================================
   SIGNATURE
========================================================= */

.about-signature {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        32px;

}

.about-signature span {

    width:
        42px;

    height:
        1px;

    background:
        var(--obn-orange);

}

.about-signature p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.30);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.25em;

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes aboutRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes aboutOrbOne {

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

    50% {
        transform:
            translate(100px, -60px) scale(1.2);
    }

}

@keyframes aboutOrbTwo {

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

    50% {
        transform:
            translate(-100px, -80px) scale(1.15);
    }

}

@keyframes aboutFloatOne {

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

    50% {
        transform:
            translate(20px, -25px);
    }

}

@keyframes aboutFloatTwo {

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

    50% {
        transform:
            translate(-18px, 20px);
    }

}

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

@media (max-width: 1000px) {

    .about-layout {

        grid-template-columns:
            1fr;

        gap:
            70px;

        max-width:
            850px;

        margin:
            0 auto;

    }

    .about-visual {

        min-height:
            500px;

    }

    .about-content {

        max-width:
            700px;

        margin:
            0 auto;

    }

}

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

@media (max-width: 767.98px) {

    .obn-about {

        padding:
            100px 0;

    }

    .about-container {

        padding:
            0 18px;

    }

    .about-layout {

        gap:
            55px;

    }

    .about-visual {

        min-height:
            410px;

    }

    .about-visual-frame {

        width:
            285px;

        height:
            365px;

    }

    .about-ring-one {

        width:
            190px;

        height:
            190px;

    }

    .about-ring-two {

        width:
            245px;

        height:
            245px;

    }

    .about-monogram {

        width:
            120px;

        height:
            120px;

    }

    .about-monogram span {

        font-size:
            3.8rem;

    }

    .about-year-card {

        right:
            5px;

        bottom:
            20px;

    }

    .about-title {

        font-size:
            2.65rem;

    }

    .about-description {

        margin-top:
            23px;

    }

    .about-description p {

        font-size:
            0.84rem;

        line-height:
            1.8;

    }

    .about-principles {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }

    .about-principle {

        display:
            grid;

        grid-template-columns:
            35px 1fr;

        gap:
            8px;

        padding:
            15px;

    }

    .principle-icon {

        margin:
            2px 0 0;

    }

}

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

@media (max-width: 380px) {

    .about-visual {

        min-height:
            370px;

    }

    .about-visual-frame {

        width:
            255px;

        height:
            330px;

    }

    .about-year-card {

        right:
            -2px;

    }

    .about-title {

        font-size:
            2.3rem;

    }

}

/* =========================================================
   OBN VENTURES — FOOTER
========================================================= */

.obn-footer {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        90px 0 30px;

    background:

        linear-gradient(180deg,
            #061522 0%,
            #04111d 100%);

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

}

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

.footer-glow {

    position: absolute;

    width: 650px;

    height: 300px;

    top: -200px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(244, 119, 33, 0.07);

    filter:
        blur(100px);

    pointer-events:
        none;

    animation:
        footerGlow 9s ease-in-out infinite;

}

/* =========================================================
   CONTAINER
========================================================= */

.footer-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 25px;

}

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

.footer-main {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1.35fr 1.35fr;

    gap:
        60px;

}

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

.footer-brand {

    max-width:
        330px;

}

/* =========================================================
   LOGO
========================================================= */

.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        85px;

    height:
        85px;

    margin-bottom:
        23px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        border-color 0.3s ease,
        transform 0.4s ease;

}

.footer-logo:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(244, 119, 33, 0.35);

}

.footer-logo img {

    width:
        100%;

    height:
        42px;

    object-fit:
        contain;

}

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

.footer-description {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.43);

    font-size:
        0.78rem;

    line-height:
        1.8;

}

/* =========================================================
   TAGLINE
========================================================= */

.footer-tagline {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    color:
        rgba(255, 255, 255, 0.25);

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        0.20em;

}

.footer-tagline span {

    width:
        17px;

    height:
        1px;

    background:
        var(--obn-orange);

    opacity:
        0.7;

}

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

.footer-column h4 {

    margin:
        4px 0 23px;

    color:
        #ffffff;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;

}

.footer-column ul {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}

.footer-column li {

    margin-bottom:
        13px;

}

.footer-column li a {

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        0.75rem;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;

}

.footer-column li a:hover {

    color:
        var(--obn-orange);

    padding-left:
        5px;

}

/* =========================================================
   CONNECT
========================================================= */

.footer-connect>p {

    margin:
        0 0 18px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        0.72rem;

    line-height:
        1.7;

}

/* =========================================================
   EMAIL
========================================================= */

.footer-email {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        0.72rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;

}

.footer-email i {

    color:
        var(--obn-orange);

    font-size:
        9px;

}

.footer-email:hover {

    color:
        var(--obn-orange);

    gap:
        14px;

}

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

.footer-social {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

}

.footer-social a {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius:
        50%;

    color:
        rgba(255, 255, 255, 0.45);

    background:
        rgba(255, 255, 255, 0.02);

    font-size:
        11px;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

}

.footer-social a:hover {

    color:
        #ffffff;

    border-color:
        rgba(244, 119, 33, 0.50);

    background:
        rgba(244, 119, 33, 0.10);

    transform:
        translateY(-4px);

}

/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {

    width:
        100%;

    height:
        1px;

    margin:
        65px 0 25px;

    background:

        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.09),
            transparent);

}

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

.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}

.footer-copyright {

    color:
        rgba(255, 255, 255, 0.25);

    font-size:
        0.65rem;

}

.footer-bottom-right {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}

.footer-bottom-right>span {

    color:
        rgba(255, 255, 255, 0.20);

    font-size:
        0.62rem;

}

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

.footer-top {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, 0.40);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-decoration:
        none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;

}

.footer-top i {

    color:
        var(--obn-orange);

    font-size:
        9px;

}

.footer-top:hover {

    color:
        #ffffff;

    gap:
        12px;

}

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

@keyframes footerGlow {

    0%,
    100% {

        transform:
            translateX(-50%) scale(1);

        opacity:
            0.6;

    }

    50% {

        transform:
            translateX(-50%) scale(1.25);

        opacity:
            1;

    }

}

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

@media (max-width: 1000px) {

    .footer-main {

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

        gap:
            45px;

    }

    .footer-brand {

        grid-column:
            span 3;

        max-width:
            500px;

    }

}

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

@media (max-width: 767.98px) {

    .obn-footer {

        padding:
            70px 0 25px;

    }

    .footer-container {

        padding:
            0 20px;

    }

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;

    }

    .footer-brand {

        grid-column:
            span 2;

        max-width:
            100%;

    }

    .footer-column h4 {

        margin-bottom:
            18px;

    }

    .footer-connect {

        grid-column:
            span 2;

    }

    .footer-divider {

        margin:
            45px 0 22px;

    }

    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            15px;

    }

    .footer-bottom-right {

        width:
            100%;

        justify-content:
            space-between;

    }

}

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

@media (max-width: 400px) {

    .footer-main {

        grid-template-columns:
            1fr;

    }

    .footer-brand,
    .footer-connect {

        grid-column:
            span 1;

    }

    .footer-bottom-right {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            15px;

    }

}

/* =========================================================
   OBN VENTURES — CINEMATIC ANIMATION SYSTEM
========================================================= */

/* =========================================================
   PAGE LOADER
========================================================= */

.obn-page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #061522;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;

}

.obn-page-loader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.loader-inner {

    position: relative;

    width: 120px;

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.loader-inner::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.10);

}

.loader-inner::after {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border:
        1px dashed rgba(244, 119, 33, 0.35);

    animation:
        loaderRotate 3s linear infinite;

}

.loader-logo {

    width: 65px;

    height: 65px;

    object-fit: contain;

    animation:
        loaderLogo 1.4s cubic-bezier(.16, 1, .3, 1) infinite alternate;

}

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

.reveal {

    opacity: 0;

    transform:
        translateY(60px);

    transition:

        opacity 1s cubic-bezier(.16, 1, .3, 1),

        transform 1s cubic-bezier(.16, 1, .3, 1);

}

.reveal.active {

    opacity: 1;

    transform:
        translateY(0);

}

/* =========================================================
   REVEAL FROM LEFT
========================================================= */

.reveal-left {

    opacity: 0;

    transform:
        translateX(-70px);

    transition:

        opacity 1s cubic-bezier(.16, 1, .3, 1),

        transform 1s cubic-bezier(.16, 1, .3, 1);

}

.reveal-left.active {

    opacity: 1;

    transform:
        translateX(0);

}

/* =========================================================
   REVEAL FROM RIGHT
========================================================= */

.reveal-right {

    opacity: 0;

    transform:
        translateX(70px);

    transition:

        opacity 1s cubic-bezier(.16, 1, .3, 1),

        transform 1s cubic-bezier(.16, 1, .3, 1);

}

.reveal-right.active {

    opacity: 1;

    transform:
        translateX(0);

}

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

.reveal-scale {

    opacity: 0;

    transform:
        scale(0.85);

    transition:

        opacity 1s cubic-bezier(.16, 1, .3, 1),

        transform 1s cubic-bezier(.16, 1, .3, 1);

}

.reveal-scale.active {

    opacity: 1;

    transform:
        scale(1);

}

/* =========================================================
   STAGGER SYSTEM
========================================================= */

.stagger>* {

    opacity: 0;

    transform:
        translateY(35px);

    transition:

        opacity 0.8s cubic-bezier(.16, 1, .3, 1),

        transform 0.8s cubic-bezier(.16, 1, .3, 1);

}

.stagger.active>*:nth-child(1) {

    transition-delay:
        0.05s;

}

.stagger.active>*:nth-child(2) {

    transition-delay:
        0.15s;

}

.stagger.active>*:nth-child(3) {

    transition-delay:
        0.25s;

}

.stagger.active>*:nth-child(4) {

    transition-delay:
        0.35s;

}

.stagger.active>*:nth-child(5) {

    transition-delay:
        0.45s;

}

.stagger.active>*:nth-child(6) {

    transition-delay:
        0.55s;

}

.stagger.active>* {

    opacity: 1;

    transform:
        translateY(0);

}

/* =========================================================
   HERO CINEMATIC ENTRANCE
========================================================= */

.obn-hero-content {

    perspective:
        1000px;

}

.obn-eyebrow {

    animation:
        heroEyebrow 1.1s cubic-bezier(.16, 1, .3, 1) 0.25s both;

}

.obn-logo-wrap {

    animation:
        heroLogo 1.4s cubic-bezier(.16, 1, .3, 1) 0.45s both;

}

.obn-title {

    animation:
        heroTitle 1.3s cubic-bezier(.16, 1, .3, 1) 0.7s both;

}

.obn-description {

    animation:
        heroDescription 1.1s cubic-bezier(.16, 1, .3, 1) 1s both;

}

.obn-statement {

    animation:
        heroStatement 1s cubic-bezier(.16, 1, .3, 1) 1.3s both;

}

.obn-scroll {

    animation:
        heroScroll 1s ease 1.7s both;

}

/* =========================================================
   HERO TITLE SHIMMER
========================================================= */

.obn-title {

    background:
        linear-gradient(110deg,
            #ffffff 20%,
            #ffffff 40%,
            rgba(255, 255, 255, 0.45) 50%,
            #ffffff 60%,
            #ffffff 80%);

    background-size:
        220% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:

        heroTitle 1.3s cubic-bezier(.16, 1, .3, 1) 0.7s both,

        titleShimmer 8s ease-in-out 2s infinite;

}

.obn-title span {

    -webkit-text-fill-color:
        var(--obn-orange);

}

/* =========================================================
   BRAND CARD 3D
========================================================= */

.brand-card {

    transform-style:
        preserve-3d;

    will-change:
        transform;

}

.brand-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        inherit;

    background:

        radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(244, 119, 33, 0.10),
            transparent 35%);

    opacity: 0;

    transition:
        opacity 0.4s ease;

    pointer-events:
        none;

}

.brand-card:hover::after {

    opacity:
        1;

}

/* =========================================================
   BRAND LOGO FLOAT
========================================================= */

.brand-card:nth-child(1) .brand-logo img {

    animation:
        logoFloatOne 5s ease-in-out infinite;

}

.brand-card:nth-child(2) .brand-logo img {

    animation:
        logoFloatTwo 6s ease-in-out infinite;

}

.brand-card:nth-child(3) .brand-logo img {

    animation:
        logoFloatThree 5.5s ease-in-out infinite;

}

.brand-card:nth-child(4) .brand-logo img {

    animation:
        logoFloatFour 6.5s ease-in-out infinite;

}

/* =========================================================
   ABOUT VISUAL FLOAT
========================================================= */

.about-visual {

    animation:
        aboutVisualFloat 7s ease-in-out infinite;

}

.about-year-card {

    animation:
        yearCardFloat 5s ease-in-out infinite;

}

/* =========================================================
   ABOUT TITLE REVEAL
========================================================= */

.about-title {

    overflow:
        hidden;

}

.about-title span {

    display:
        inline-block;

}

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

.obn-footer {

    position:
        relative;

}

.obn-footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 0;

    height: 1px;

    background:
        var(--obn-orange);

    transform:
        translateX(-50%);

    transition:
        width 1.5s cubic-bezier(.16, 1, .3, 1);

}

.obn-footer.footer-visible::before {

    width:
        80%;

}

/* =========================================================
   CURSOR GLOW
========================================================= */

.obn-cursor-glow {

    position: fixed;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9998;

    background:
        radial-gradient(circle,
            rgba(244, 119, 33, 0.07),
            transparent 65%);

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

    opacity:
        0;

    transition:
        opacity 0.4s ease;

}

body.cursor-active .obn-cursor-glow {

    opacity:
        1;

}

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

@keyframes loaderRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes loaderLogo {

    from {
        transform:
            scale(0.90);
        opacity:
            0.65;
    }

    to {
        transform:
            scale(1.05);
        opacity:
            1;
    }

}

@keyframes heroEyebrow {

    from {

        opacity: 0;

        transform:
            translateY(-25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@keyframes heroLogo {

    from {

        opacity: 0;

        transform:
            scale(0.55) rotate(-15deg);

        filter:
            blur(10px);

    }

    to {

        opacity: 1;

        transform:
            scale(1) rotate(0);

        filter:
            blur(0);

    }

}

@keyframes heroTitle {

    from {

        opacity: 0;

        transform:
            translateY(55px) rotateX(25deg);

        filter:
            blur(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0) rotateX(0);

        filter:
            blur(0);

    }

}

@keyframes heroDescription {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@keyframes heroStatement {

    from {

        opacity: 0;

        transform:
            scaleX(0.5);

    }

    to {

        opacity: 1;

        transform:
            scaleX(1);

    }

}

@keyframes heroScroll {

    from {

        opacity: 0;

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

    }

    to {

        opacity: 1;

        transform:
            translate(-50%, 0);

    }

}

@keyframes titleShimmer {

    0%,
    70%,
    100% {
        background-position:
            200% center;
    }

    85% {
        background-position:
            -20% center;
    }

}

@keyframes logoFloatOne {

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

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

}

@keyframes logoFloatTwo {

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

    50% {
        transform:
            translateY(-6px) rotate(1deg);
    }

}

@keyframes logoFloatThree {

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

    50% {
        transform:
            translateY(-8px) scale(1.025);
    }

}

@keyframes logoFloatFour {

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

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

}

@keyframes aboutVisualFloat {

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

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

}

@keyframes yearCardFloat {

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

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

}

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

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}

/* =========================================================
   MOBILE — REDUCE HEAVY EFFECTS
========================================================= */

@media (max-width: 767.98px) {

    .obn-cursor-glow {

        display:
            none;

    }

    .brand-card:hover {

        transform:
            translateY(-7px);

    }

    .about-visual {

        animation-duration:
            9s;

    }

}

/* =========================================================
   OBN VENTURES — ORBITAL ABOUT VISUAL
========================================================= */

.about-visual {
    position: relative;
    width: 100%;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.about-orbit-stage {
    position: relative;

    width: min(600px, 100%);
    aspect-ratio: 1 / 1;

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

    overflow: hidden;

    background:
        radial-gradient(circle at center,
            rgba(244, 119, 33, 0.08),
            transparent 38%),
        linear-gradient(145deg,
            rgba(10, 32, 50, 0.95),
            rgba(4, 17, 29, 0.98));

    border: 1px solid rgba(255, 255, 255, 0.07);

    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.35),
        0 30px 80px rgba(0, 0, 0, 0.25);
}

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

.orbit-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px);

    background-size: 70px 70px;

    opacity: .45;

    mask-image: radial-gradient(circle,
            black 30%,
            transparent 78%);

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

/* =========================================================
   ORBIT CIRCLES
========================================================= */

.orbit-circle {

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}

/* Outer */

.orbit-circle-outer {

    width: 88%;
    height: 88%;

    border: 1px dashed rgba(244, 119, 33, 0.45);

    box-shadow:
        0 0 15px rgba(244, 119, 33, 0.04);

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

/* Middle */

.orbit-circle-middle {

    width: 69%;
    height: 69%;

    border: 1px solid rgba(255, 255, 255, 0.18);

}

/* Inner */

.orbit-circle-inner {

    width: 51%;
    height: 51%;

    border: 1px solid rgba(244, 119, 33, 0.35);

    box-shadow:
        0 0 30px rgba(244, 119, 33, 0.08),
        inset 0 0 25px rgba(244, 119, 33, 0.03);

}

/* =========================================================
   CENTER LOGO
========================================================= */

.orbit-center {

    position: absolute;

    width: 235px;
    height: 235px;

    left: 50%;
    top: 50%;

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

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

    z-index: 10;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(9, 25, 39, 0.98),
            rgba(3, 14, 24, 0.98));

    border: 1px solid rgba(244, 119, 33, 0.30);

    box-shadow:
        0 0 40px rgba(244, 119, 33, 0.12),
        inset 0 0 35px rgba(244, 119, 33, 0.05);
}

/* Rotating center ring */

.orbit-center-ring {

    position: absolute;

    inset: -9px;

    border-radius: 50%;

    border: 2px solid transparent;

    border-top-color: var(--obn-orange);
    border-right-color: rgba(244, 119, 33, 0.45);

    filter: drop-shadow(0 0 7px rgba(244, 119, 33, 0.45));

    animation: centerSpin 8s linear infinite;
}

/* Logo */

.orbit-logo {

    position: relative;

    width: 155px;
    height: 155px;

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

    z-index: 2;
}

.orbit-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 25px rgba(0, 0, 0, 0.45));

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

/* =========================================================
   ROTATING TRACK
========================================================= */

.orbit-track {

    position: absolute;

    width: 72%;
    height: 72%;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    animation:
        orbitRotate 22s linear infinite;

    z-index: 20;
}

/* =========================================================
   ORBIT ITEMS
========================================================= */

.orbit-item {

    position: absolute;

    width: 110px;
    height: 110px;

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

    margin-left: -55px;
    margin-top: -55px;

}

/* Keep individual item upright */

.orbit-node {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    animation:
        orbitCounterRotate 22s linear infinite;

    text-align: center;

}

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

.orbit-icon {

    width: 65px;
    height: 65px;

    border-radius: 50%;

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

    background:
        radial-gradient(circle,
            rgba(15, 32, 45, 0.98),
            rgba(3, 15, 25, 0.98));

    border: 2px solid var(--obn-orange);

    color: #ffad62;

    font-size: 22px;

    box-shadow:
        0 0 20px rgba(244, 119, 33, 0.22),
        inset 0 0 20px rgba(244, 119, 33, 0.04);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.orbit-node:hover .orbit-icon {

    transform: scale(1.08);

    box-shadow:
        0 0 30px rgba(244, 119, 33, 0.45),
        0 0 70px rgba(244, 119, 33, 0.10);
}

/* =========================================================
   LABEL
========================================================= */

.orbit-label {

    color: rgba(255, 255, 255, 0.95);

    font-family: var(--obn-body);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .22em;

    white-space: nowrap;

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.15);
}

/* =========================================================
   ORBIT POSITIONS
========================================================= */

.orbit-item-vision {

    left: 50%;
    top: 0;

}

.orbit-item-growth {

    left: 100%;
    top: 50%;

}

.orbit-item-business {

    left: 50%;
    top: 100%;

}

.orbit-item-innovation {

    left: 0;
    top: 50%;

}

/* =========================================================
   ORBIT PARTICLES
========================================================= */

.orbit-particle {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--obn-orange);

    box-shadow:
        0 0 10px rgba(244, 119, 33, 0.9),
        0 0 25px rgba(244, 119, 33, 0.35);

    z-index: 5;

    animation:
        particlePulse 2.5s ease-in-out infinite;
}

.orbit-particle-1 {
    left: 24%;
    top: 21%;
}

.orbit-particle-2 {
    right: 22%;
    top: 24%;
    animation-delay: .6s;
}

.orbit-particle-3 {
    right: 25%;
    bottom: 19%;
    animation-delay: 1.2s;
}

.orbit-particle-4 {
    left: 24%;
    bottom: 22%;
    animation-delay: 1.8s;
}

/* =========================================================
   CROSS LINES
========================================================= */

.orbit-line {

    position: absolute;

    background: rgba(255, 255, 255, 0.08);

    z-index: 1;
}

.orbit-line-horizontal {

    width: 100%;
    height: 1px;

    left: 0;
    top: 50%;
}

.orbit-line-vertical {

    width: 1px;
    height: 100%;

    left: 50%;
    top: 0;
}

/* =========================================================
   CORNER BRACKETS
========================================================= */

.orbit-corner {

    position: absolute;

    width: 75px;
    height: 75px;

    border-color: var(--obn-orange);

    opacity: .8;

    z-index: 3;
}

.orbit-corner-tl {

    top: 12px;
    left: 12px;

    border-top: 3px solid;
    border-left: 3px solid;
}

.orbit-corner-tr {

    top: 12px;
    right: 12px;

    border-top: 3px solid;
    border-right: 3px solid;
}

.orbit-corner-bl {

    bottom: 12px;
    left: 12px;

    border-bottom: 3px solid;
    border-left: 3px solid;
}

.orbit-corner-br {

    bottom: 12px;
    right: 12px;

    border-bottom: 3px solid;
    border-right: 3px solid;
}

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

.orbit-caption {

    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 12px;

    color: rgba(255, 255, 255, 0.35);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .20em;

    white-space: nowrap;

    z-index: 10;
}

.orbit-caption span {

    width: 22px;
    height: 1px;

    background: rgba(244, 119, 33, 0.55);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes orbitRotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes orbitCounterRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}

@keyframes centerSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes logoBreath {

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

    50% {
        transform: scale(1.035);
    }

}

@keyframes orbitPulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}

@keyframes particlePulse {

    0%,
    100% {
        transform: scale(.7);
        opacity: .55;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

}

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

@media (max-width: 1199px) {

    .about-orbit-stage {
        width: min(540px, 100%);
    }

    .orbit-center {
        width: 210px;
        height: 210px;
    }

    .orbit-logo {
        width: 140px;
        height: 140px;
    }

}

@media (max-width: 991px) {

    .about-visual {
        min-height: auto;

        padding: 20px 0 50px;
    }

    .about-orbit-stage {
        width: min(560px, 92vw);
    }

}

@media (max-width: 600px) {

    .about-visual {
        padding: 10px 0 40px;
    }

    .about-orbit-stage {
        width: 94vw;

        max-width: 430px;
    }

    .orbit-center {
        width: 155px;
        height: 155px;
    }

    .orbit-logo {
        width: 105px;
        height: 105px;
    }

    .orbit-center-ring {
        inset: -7px;
    }

    .orbit-icon {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }

    .orbit-item {
        width: 80px;
        height: 80px;

        margin-left: -40px;
        margin-top: -40px;
    }

    .orbit-label {
        font-size: 8px;
        letter-spacing: .16em;
    }

    .orbit-caption {
        font-size: 6px;
        bottom: 10px;
    }

    .orbit-corner {
        width: 45px;
        height: 45px;
    }

}

/* =========================================================
   ABOUT ORBITAL VISUAL — PERMANENT HIGHLIGHT
   No :root changes
========================================================= */

/* Orbit rings */
.about-orbit-stage .orbit-circle-outer {
    border-color: rgba(251, 138, 0, 0.48);
    box-shadow: 0 0 15px rgba(251, 138, 0, 0.08);
}

.about-orbit-stage .orbit-circle-inner {
    border-color: rgba(251, 138, 0, 0.45);

    box-shadow:
        0 0 30px rgba(251, 138, 0, 0.10),
        inset 0 0 25px rgba(251, 138, 0, 0.04);
}

/* =========================================================
   CENTER
========================================================= */

.about-orbit-stage .orbit-center {
    border-color: rgba(251, 138, 0, 0.40);

    box-shadow:
        0 0 40px rgba(251, 138, 0, 0.16),
        inset 0 0 35px rgba(251, 138, 0, 0.06);
}

.about-orbit-stage .orbit-center-ring {
    border-top-color: #FB8A00;
    border-right-color: rgba(251, 138, 0, 0.55);

    filter:
        drop-shadow(0 0 8px rgba(251, 138, 0, 0.55));
}

/* =========================================================
   ICONS — HOVER STYLE IS NOW ALWAYS ACTIVE
========================================================= */

.about-orbit-stage .orbit-icon {

    color: #FFB13B;

    border-color: #FB8A00;

    background:
        radial-gradient(
            circle,
            rgba(18, 32, 45, 0.98),
            rgba(3, 15, 25, 0.98)
        );

    box-shadow:
        0 0 25px rgba(251, 138, 0, 0.30),
        inset 0 0 20px rgba(251, 138, 0, 0.06);

    transform: scale(1.05);
}

/* Remove the need for hover */
.about-orbit-stage .orbit-node:hover .orbit-icon {

    color: #FFB13B;

    border-color: #FB8A00;

    box-shadow:
        0 0 25px rgba(251, 138, 0, 0.30),
        inset 0 0 20px rgba(251, 138, 0, 0.06);

    transform: scale(1.05);
}

/* =========================================================
   LABELS
========================================================= */

.about-orbit-stage .orbit-label {
    color: #FFFFFF;

    text-shadow:
        0 0 12px rgba(251, 138, 0, 0.15);
}

/* =========================================================
   PARTICLES
========================================================= */

.about-orbit-stage .orbit-particle {

    background: #FB8A00;

    box-shadow:
        0 0 10px rgba(251, 138, 0, 0.95),
        0 0 25px rgba(251, 138, 0, 0.40);
}

/* =========================================================
   CORNER BRACKETS
========================================================= */

.about-orbit-stage .orbit-corner {
    border-color: #FB8A00;

    filter:
        drop-shadow(0 0 5px rgba(251, 138, 0, 0.35));
}

/* =========================================================
   CAPTION
========================================================= */

.about-orbit-stage .orbit-caption span {
    background: #FB8A00;

    box-shadow:
        0 0 8px rgba(251, 138, 0, 0.45);
}