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


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

:root {

    --obn-navy-deep: #061522;
    --obn-navy: #0b2236;
    --obn-navy-light: #123b59;

    --obn-orange: #f47721;
    --obn-orange-light: #ff9a52;

    --obn-white: #ffffff;

    --obn-text: rgba(255, 255, 255, 0.92);
    --obn-text-soft: rgba(255, 255, 255, 0.62);
    --obn-text-muted: rgba(255, 255, 255, 0.38);

    --obn-border: rgba(255, 255, 255, 0.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:
        90px;

    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:
        155px;

    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(3, 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;

    }

}