/* =========================================================
   RSK STUDIO MULTIMEDIA
   FINAL STYLE
========================================================= */

:root {

    --bg: #080808;
    --surface: #111111;
    --card: #171717;

    --gold: #d4af37;
    --gold-light: #f1ce55;

    --white: #ffffff;
    --muted: #a3a3a3;

    --border:
        rgba(255, 255, 255, 0.09);

    --gold-border:
        rgba(212, 175, 55, 0.30);

    --header-height:
        76px;

}


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

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

    scroll-padding-top:
        90px;

}


body {

    min-height:
        100vh;

    overflow-x:
        hidden;

    color:
        var(--white);

    background:
        var(--bg);

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

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font:
        inherit;

}


img {

    max-width:
        100%;

}


[hidden] {

    display:
        none !important;

}


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

.background-effects {

    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    overflow:
        hidden;

}


.grid-background {

    position:
        absolute;

    inset:
        0;

    opacity:
        0.12;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

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

    background-size:
        50px 50px;

}


.glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    border-radius:
        50%;

    filter:
        blur(110px);

    opacity:
        0.10;

}


.glow-one {

    top:
        -180px;

    right:
        -150px;

    background:
        var(--gold);

}


.glow-two {

    left:
        -250px;

    top:
        50%;

    background:
        #806b22;

}


/* =========================================================
   COMMON
========================================================= */

.container {

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

    margin:
        0 auto;

}


.section {

    padding:
        95px 0;

}


.section-alt {

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

}


.section-heading {

    margin-bottom:
        40px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}


.section-heading h2 {

    margin-top:
        8px;

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

    font-size:
        clamp(32px,5vw,52px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

}


.section-heading > p {

    max-width:
        450px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


.center-heading {

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


.section-kicker {

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


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

.button {

    min-height:
        52px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid transparent;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        .22s ease;

}


.button-primary {

    color:
        #090909;

    background:

        linear-gradient(
            135deg,
            #f4d875,
            #dcb328
        );

}


.button-secondary {

    border-color:
        var(--border);

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

}


.button:hover {

    transform:
        translateY(-2px);

}


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

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    background:
        var(--bg);

    transition:
        .4s ease;

}


.page-loader.hidden {

    opacity:
        0;

    visibility:
        hidden;

}


.loader-logo {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        20px;

    color:
        var(--gold);

    font-weight:
        800;

}


.loader-text {

    color:
        #777;

    font-size:
        8px;

    letter-spacing:
        2px;

}


.loader-bar {

    width:
        150px;

    height:
        2px;

    overflow:
        hidden;

    background:
        #222;

}


.loader-bar-fill {

    width:
        50%;

    height:
        100%;

    background:
        var(--gold);

    animation:
        loading 1s infinite alternate;

}


@keyframes loading {

    from {

        transform:
            translateX(-100%);

    }

    to {

        transform:
            translateX(200%);

    }

}


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

.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        2000;

    height:
        var(--header-height);

    transition:
        .25s ease;

}


.site-header.scrolled {

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

    background:
        rgba(8,8,8,.94);

    backdrop-filter:
        blur(20px);

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

}


.header-container {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.brand-logo {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        12px;

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        800;

}


.brand-text {

    display:
        flex;

    flex-direction:
        column;

}


.brand-text strong {

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

    font-size:
        12px;

}


.brand-text span {

    color:
        var(--gold);

    margin-top:
        3px;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.desktop-nav {

    display:
        flex;

    gap:
        26px;

}


.nav-link {

    color:
        #777;

    font-size:
        10px;

    font-weight:
        600;

}


.nav-link.active,
.nav-link:hover {

    color:
        var(--gold);

}


.mobile-menu-button {

    width:
        44px;

    height:
        44px;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

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

    border-radius:
        12px;

    background:
        #151515;

}


.mobile-menu-button span {

    width:
        18px;

    height:
        1px;

    background:
        #ddd;

}


.mobile-menu {

    display:
        none;

}


.mobile-menu.show {

    display:
        block;

}


.mobile-menu-inner {

    padding:
        13px;

    display:
        grid;

    gap:
        4px;

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

    background:
        rgba(8,8,8,.98);

}


.mobile-menu-inner a {

    padding:
        13px;

    border-radius:
        10px;

    color:
        #888;

    font-size:
        11px;

}


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

.hero {

    min-height:
        100vh;

    padding:
        140px 0 80px;

    display:
        flex;

    align-items:
        center;

}


.hero-container {

    display:
        grid;

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

    gap:
        75px;

    align-items:
        center;

}


.eyebrow {

    width:
        fit-content;

    min-height:
        30px;

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

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

    border-radius:
        999px;

    color:
        #aaa;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #37dc80;

    box-shadow:
        0 0 10px
        rgba(55,220,128,.7);

}


.hero h1 {

    margin-top:
        26px;

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

    font-size:
        clamp(56px,7vw,92px);

    line-height:
        .95;

    letter-spacing:
        -5px;

}


.hero h1 span {

    display:
        block;

    color:
        var(--gold);

}


.hero-subtitle {

    margin-top:
        28px;

    font-size:
        16px;

    font-weight:
        700;

}


.hero-description {

    max-width:
        620px;

    margin-top:
        16px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


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

.hero-social-actions {

    margin-top:
        25px;

    margin-bottom:
        11px;

    display:
        flex;

    gap:
        8px;

}


.hero-social-button {

    min-height:
        42px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

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

    border-radius:
        11px;

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

    color:
        #999;

    font-size:
        9px;

    font-weight:
        700;

}


.hero-social-button:hover {

    color:
        #fff;

    border-color:
        var(--gold-border);

}


.hero-social-icon {

    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        6px;

    background:
        rgba(212,175,55,.08);

    color:
        var(--gold);

}


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

.hero-actions {

    display:
        flex;

    gap:
        9px;

}


.hero-tech-list {

    margin-top:
        25px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    color:
        #6f6f6f;

    font-size:
        9px;

}


.hero-tech-list b {

    color:
        var(--gold);

}


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

.hero-visual {

    position:
        relative;

    min-height:
        480px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.visual-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:
        50%;

}


.orbit-one {

    width:
        450px;

    height:
        450px;

}


.orbit-two {

    width:
        310px;

    height:
        310px;

}


.hero-device {

    position:
        relative;

    z-index:
        2;

    width:
        min(100%,370px);

    overflow:
        hidden;

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

    border-radius:
        28px;

    background:
        #111;

}


.device-header {

    height:
        53px;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

}


.window-controls {

    display:
        flex;

    gap:
        5px;

}


.window-controls span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #555;

}


.device-title {

    color:
        #666;

    font-size:
        8px;

}


.device-screen {

    min-height:
        315px;

    padding:
        35px 28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.device-logo {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

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

    border-radius:
        18px;

    color:
        var(--gold);

    font-weight:
        800;

}


.device-logo.has-project-logo {

    padding:
        4px;

}


.hero-project-logo-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        14px;

}


.device-label {

    margin-top:
        28px;

    color:
        var(--gold);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.device-screen h3 {

    margin-top:
        10px;

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

    font-size:
        27px;

    line-height:
        1.15;

}


.device-screen p {

    margin-top:
        13px;

    color:
        var(--muted);

    font-size:
        11px;

}


.mini-project-status {

    margin-top:
        24px;

    display:
        flex;

    gap:
        8px;

}


.live-badge,
.android-badge {

    min-height:
        26px;

    padding:
        0 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        800;

}


.live-badge {

    color:
        #68e59d;

    border:
        1px solid
        rgba(49,210,120,.25);

}


.android-badge {

    color:
        var(--gold);

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

}


/* =========================================================
   STATISTICS
========================================================= */

.statistics-section {

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

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

}


.statistics-grid {

    display:
        grid;

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

}


.stat-card {

    padding:
        30px 15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.stat-card strong {

    color:
        var(--gold);

    font-size:
        32px;

}


.stat-card span {

    margin-top:
        5px;

    color:
        #777;

    font-size:
        8px;

}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.featured-project {

    display:
        grid;

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

    overflow:
        hidden;

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

    border-radius:
        27px;

    background:
        #101010;

}


.project-image-area {

    min-height:
        400px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.11),
            transparent 45%
        ),

        #0c0c0c;

}


.project-logo-display {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.project-logo-glow {

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.15),
            transparent 70%
        );

}


.project-logo-frame {

    position:
        relative;

    z-index:
        2;

    width:
        145px;

    height:
        145px;

    padding:
        6px;

    overflow:
        hidden;

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

    border-radius:
        31px;

    background:
        #151515;

}


.project-logo-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        24px;

}


.project-content {

    padding:
        50px;

}


.project-badges {

    margin-bottom:
        17px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.project-badge {

    min-height:
        26px;

    padding:
        0 9px;

    display:
        inline-flex;

    align-items:
        center;

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

    border-radius:
        999px;

    color:
        #999;

    font-size:
        7px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.project-badge.live {

    color:
        #67e39b;

    border-color:
        rgba(49,210,120,.25);

}


.project-content h3 {

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

    font-size:
        35px;

}


.project-content > p {

    margin-top:
        14px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.75;

}


.project-technologies {

    margin-top:
        20px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.tech-pill {

    padding:
        6px 8px;

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

    border-radius:
        7px;

    color:
        #888;

    font-size:
        7px;

}


.project-actions {

    margin-top:
        23px;

}


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

.project-grid {

    display:
        grid;

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

    gap:
        18px;

}


.project-card {

    overflow:
        hidden;

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

    border-radius:
        23px;

    background:
        #111;

}


.project-card-image {

    height:
        200px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #0d0d0d;

}


.project-card-logo-frame {

    width:
        100px;

    height:
        100px;

    padding:
        5px;

    overflow:
        hidden;

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

    border-radius:
        24px;

}


.project-card-logo-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        18px;

}


.project-card-body {

    padding:
        24px;

}


.project-card-body h3 {

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

    font-size:
        20px;

}


.project-card-body p {

    margin-top:
        9px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.7;

}


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

.technology-grid {

    display:
        grid;

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

    gap:
        10px;

}


.technology-card,
.feature-card,
.info-card {

    padding:
        23px;

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

    border-radius:
        18px;

    background:
        #111;

}


.features-grid {

    display:
        grid;

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

    gap:
        14px;

}


.technology-card {

    min-height:
        125px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        #999;

    font-size:
        9px;

}


.technology-icon {

    margin-bottom:
        10px;

    color:
        var(--gold);

}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

    min-height:
        200px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px dashed
        var(--border);

    border-radius:
        20px;

}


.empty-state p {

    margin-top:
        7px;

    color:
        #777;

    font-size:
        10px;

}


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

.about-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


.about-card,
.about-visual {

    padding:
        40px;

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

    border-radius:
        24px;

    background:
        #111;

}


.about-card h2 {

    margin-top:
        9px;

    font-size:
        34px;

}


.about-card p {

    margin-top:
        15px;

    color:
        var(--muted);

    line-height:
        1.8;

    font-size:
        12px;

}


.about-visual {

    min-height:
        310px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}


.about-big-logo {

    width:
        110px;

    height:
        110px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        27px;

    color:
        var(--gold);

    font-size:
        26px;

    font-weight:
        800;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-card {

    padding:
        40px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

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

    border-radius:
        24px;

    background:
        #111;

}


.contact-card h2 {

    margin-top:
        8px;

    font-size:
        34px;

}


.contact-card p {

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        11px;

}


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

.footer {

    padding:
        40px 0;

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

}


.footer-bottom {

    color:
        #555;

    font-size:
        9px;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        9000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(0,0,0,.95);

}


.lightbox.show {

    display:
        flex;

}


.lightbox img {

    max-width:
        90vw;

    max-height:
        85vh;

    border-radius:
        15px;

}


.lightbox-close {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        50%;

    background:
        #151515;

    color:
        #fff;

}


/* =========================================================
   DESKTOP MOBILE NAV OFF
========================================================= */

.mobile-bottom-nav {

    display:
        none;

}


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

@media (
    max-width:
    768px
) {

    :root {

        --header-height:
            64px;

    }


    body {

        padding-bottom:

            calc(
                98px +
                env(safe-area-inset-bottom)
            );

    }


    .container {

        width:
            calc(100% - 28px);

    }


    .section {

        padding:
            65px 0;

    }


    /* HEADER */

    .desktop-nav {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

    }


    /* HERO */

    .hero {

        min-height:
            auto;

        padding:
            110px 0 65px;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .hero h1 {

        font-size:
            clamp(
                48px,
                14vw,
                64px
            );

        letter-spacing:
            -3px;

    }


    .hero-subtitle {

        font-size:
            14px;

    }


    .hero-description {

        font-size:
            11px;

    }


    .hero-social-actions {

        display:
            grid;

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

    }


    .hero-social-button {

        min-width:
            0;

        padding:
            0 5px;

        font-size:
            7px;

    }


    .hero-actions {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .hero-actions .button {

        width:
            100%;

    }


    .hero-visual {

        min-height:
            380px;

    }


    .orbit-one {

        width:
            340px;

        height:
            340px;

    }


    .orbit-two {

        width:
            240px;

        height:
            240px;

    }


    .hero-device {

        width:
            min(100%,340px);

    }


    /* STAT */

    .statistics-grid {

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

    }


    /* SECTION */

    .section-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        margin-bottom:
            25px;

    }


    .section-heading h2 {

        font-size:
            30px;

        letter-spacing:
            -1px;

    }


    /* FEATURED */

    .featured-project {

        grid-template-columns:
            1fr;

        padding:
            11px;

        border-radius:
            22px;

    }


    .project-image-area {

        height:
            175px;

        min-height:
            175px;

        border-radius:
            17px;

    }


    .project-logo-frame {

        width:
            100px;

        height:
            100px;

        border-radius:
            23px;

    }


    .project-content {

        padding:
            20px 7px
            7px;

    }


    .project-content h3 {

        font-size:
            24px;

    }


    .project-actions .button {

        width:
            100%;

    }


    /* CARDS */

    .project-grid {

        grid-template-columns:
            1fr;

    }


    .project-card-image {

        height:
            160px;

    }


    .project-card-logo-frame {

        width:
            90px;

        height:
            90px;

    }


    /* OTHER */

    .technology-grid {

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

    }


    .features-grid {

        grid-template-columns:
            1fr;

    }


    .about-layout {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        flex-direction:
            column;

    }


    /* =====================================================
       PROFESSIONAL FLOATING BOTTOM NAVBAR
    ===================================================== */

    .mobile-bottom-nav {

        position:
            fixed;

        left:
            50%;

        bottom:
            calc(
                10px +
                env(safe-area-inset-bottom)
            );

        transform:
            translateX(-50%);


        z-index:
            5000;


        width:
            calc(100% - 22px);

        max-width:
            470px;


        min-height:
            70px;


        padding:
            7px;


        display:
            grid;

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


        gap:
            4px;


        border:

            1px solid

            rgba(
                255,
                255,
                255,
                .095
            );


        border-radius:
            23px;


        background:

            linear-gradient(
                180deg,
                rgba(
                    27,
                    27,
                    27,
                    .96
                ),
                rgba(
                    9,
                    9,
                    9,
                    .985
                )
            );


        box-shadow:

            0 22px
            60px
            rgba(
                0,
                0,
                0,
                .65
            ),

            inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                .045
            );


        backdrop-filter:
            blur(24px);


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

    }


    /* ITEM */

    .mobile-nav-item {

        position:
            relative;


        min-width:
            0;

        min-height:
            55px;


        padding:
            5px 2px;


        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;


        gap:
            4px;


        border-radius:
            16px;


        color:
            #686868;


        transition:

            color .2s ease,

            background .2s ease,

            transform .15s ease;

    }


    .mobile-nav-item:active {

        transform:
            scale(.95);

    }


    /* ICON WRAPPER */

    .mobile-nav-icon {

        width:
            29px;

        height:
            29px;


        display:
            grid;

        place-items:
            center;


        border-radius:
            9px;


        transition:
            .22s ease;

    }


    /* SVG */

    .mobile-nav-icon svg {

        width:
            18px;

        height:
            18px;


        fill:
            none;


        stroke:
            currentColor;


        stroke-width:
            1.8;


        stroke-linecap:
            round;


        stroke-linejoin:
            round;

    }


    /* LABEL */

    .mobile-nav-label {

        max-width:
            100%;


        color:
            inherit;


        font-size:
            7px;


        font-weight:
            600;


        line-height:
            1;


        overflow:
            hidden;


        white-space:
            nowrap;


        text-overflow:
            ellipsis;

    }


    /* ACTIVE */

    .mobile-nav-item.active {

        color:
            var(--gold-light);


        background:

            linear-gradient(
                180deg,
                rgba(
                    212,
                    175,
                    55,
                    .11
                ),
                rgba(
                    212,
                    175,
                    55,
                    .035
                )
            );

    }


    .mobile-nav-item.active
    .mobile-nav-icon {

        color:
            var(--gold-light);


        background:
            rgba(
                212,
                175,
                55,
                .12
            );


        box-shadow:

            0 0
            22px
            rgba(
                212,
                175,
                55,
                .10
            );

    }


    /* ACTIVE LINE */

    .mobile-nav-item.active::after {

        content:
            "";


        position:
            absolute;


        left:
            50%;


        bottom:
            1px;


        transform:
            translateX(-50%);


        width:
            18px;


        height:
            2px;


        border-radius:
            100px;


        background:

            linear-gradient(
                90deg,
                transparent,
                var(--gold),
                transparent
            );

    }


    /* APPS CENTER ITEM */

    .mobile-nav-main
    .mobile-nav-icon {

        border:
            1px solid
            rgba(
                212,
                175,
                55,
                .16
            );

    }


}


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

@media (
    max-width:
    380px
) {

    body {

        padding-bottom:

            calc(
                92px +
                env(safe-area-inset-bottom)
            );

    }


    .container {

        width:
            calc(100% - 22px);

    }


    .hero h1 {

        font-size:
            44px;

        letter-spacing:
            -2px;

    }


    .mobile-bottom-nav {

        width:
            calc(100% - 14px);


        bottom:
            calc(
                7px +
                env(safe-area-inset-bottom)
            );


        min-height:
            65px;


        padding:
            6px;


        border-radius:
            20px;

    }


    .mobile-nav-item {

        min-height:
            51px;


        border-radius:
            14px;

    }


    .mobile-nav-icon {

        width:
            26px;


        height:
            26px;

    }


    .mobile-nav-icon svg {

        width:
            16px;


        height:
            16px;

    }


    .mobile-nav-label {

        font-size:
            6.5px;

    }

}