:root {

            /* BACKGROUNDS */

            --bg-canvas: #0b0e11;
            --bg-surface: #181a20;
            --bg-elevated: #1e2329;

            --bg-deep: #080a0d;
            --bg-glass: rgba(11, 14, 17, .82);

            /* BORDERS */

            --border-hairline: #2b3139;
            --border-soft: rgba(255, 255, 255, .055);
            --border-green: rgba(14, 203, 129, .20);
            --border-yellow: rgba(252, 213, 53, .28);

            /* MARKET */

            --color-up: #0ecb81;
            --color-down: #f6465d;

            /* BRAND */

            --accent-primary: #FCD535;
            --accent-hover: #f0b90b;

            /* TYPOGRAPHY */

            --text-main: #FFFFFF;
            --text-secondary: #d7dbe0;
            --text-muted: #707a8a;
            --text-dim: #4f5865;

            /* FONTS */

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

            --font-tabular:
                "JetBrains Mono",
                "SFMono-Regular",
                Consolas,
                monospace;
        }


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

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

        html {
            scroll-behavior: smooth;
        }

        body {

            min-height: 100vh;

            overflow-x: hidden;

            background:
                var(--bg-canvas);

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            -webkit-font-smoothing:
                antialiased;

        }


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

        body::after {

            content: "";

            position: fixed;

            inset: 0;

            z-index: -2;

            pointer-events: none;

            opacity: .17;

            background-image:

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

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

            background-size:
                70px 70px;

        }


        /* =========================================================
   GRAIN
========================================================= */

        body::before {

            content: "";

            position: fixed;

            inset: 0;

            z-index: 9999;

            pointer-events: none;

            opacity: .018;

            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

        }


        /* =========================================================
   NAVIGATION
========================================================= */

        nav {

            height: 76px;

            padding: 0 5.5vw;

            display: flex;

            align-items: center;

            justify-content: space-between;

            position: relative;

            z-index: 100;

            background:
                rgba(11, 14, 17, .88);

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

            backdrop-filter:
                blur(22px);

        }

        .main-image-box {
            width: 50%;

            img {
                width: 100%;
                aspect-ratio: 1.5;
            }
        }


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

        .logo {

            display: flex;

            align-items: center;

            gap: 12px;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size:
                17px;

            font-weight:
                800;

            letter-spacing:
                4px;

        }


        .logo-mark {

            width: 24px;

            height: 25px;

            display: flex;

            align-items: flex-end;

            gap: 4px;

        }


        .logo-mark span {

            display: block;

            width: 5px;

            border-radius: 1px 1px 0 0;

            background:
                var(--color-up);

            box-shadow:
                0 0 14px rgba(14, 203, 129, .20);

        }


        .logo-mark span:nth-child(1) {
            height: 10px;
            opacity: .45;
        }

        .logo-mark span:nth-child(2) {
            height: 17px;
            opacity: .72;
        }

        .logo-mark span:nth-child(3) {
            height: 25px;
            background: var(--accent-primary);
        }


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

        .nav-right {

            display:
                flex;

            align-items:
                center;

            gap:
                30px;

        }


        .nav-links {

            display:
                flex;

            align-items:
                center;

            gap:
                27px;

        }


        .nav-links a {

            color:
                var(--text-muted);

            text-decoration:
                none;

            font-size:
                10px;

            font-weight:
                700;

            letter-spacing:
                1.1px;

            transition:
                color .2s ease;

        }


        .nav-links a:hover {

            color:
                var(--text-main);

        }


        /* =========================================================
   LANGUAGES
========================================================= */

        .languages {

            display:
                flex;

            gap:
                8px;

            font-size:
                9px;

            font-weight:
                700;

        }


        .languages span {

            color:
                var(--text-dim);

        }


        .languages .active {

            color:
                var(--accent-primary);

        }


        /* =========================================================
   CONSULTATION CTA
========================================================= */

        .consult-btn {

            height:
                39px;

            padding:
                0 16px;

            display:
                flex;

            align-items:
                center;

            gap:
                16px;

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

            background:
                var(--accent-primary);

            color:
                #0b0e11;

            font-family:
                var(--font-ui);

            font-size:
                9px;

            font-weight:
                800;

            letter-spacing:
                .8px;

            cursor:
                pointer;

            transition:
                all .2s ease;

        }


        .consult-btn:hover {

            background:
                var(--accent-hover);

            border-color:
                var(--accent-hover);

            transform:
                translateY(-1px);

        }


        /* =========================================================
   MARKET TICKER
========================================================= */

        .ticker {

            height:
                48px;

            width:
                100%;

            overflow:
                hidden;

            background:
                #0d1014;

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

            position:
                relative;

        }


        /* subtle fade edges */

        .ticker::before,
        .ticker::after {

            content:
                "";

            position:
                absolute;

            top: 0;
            bottom: 0;

            width: 90px;

            z-index: 4;

            pointer-events: none;

        }


        .ticker::before {

            left: 0;

            background:
                linear-gradient(90deg,
                    #0d1014,
                    transparent);

        }


        .ticker::after {

            right: 0;

            background:
                linear-gradient(270deg,
                    #0d1014,
                    transparent);

        }


        .ticker-track {

            height:
                100%;

            width:
                max-content;

            display:
                flex;

            align-items:
                center;

            gap:
                24px;

            animation:
                tickerMove 75s linear infinite;

        }


        @keyframes tickerMove {

            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }

        }


        .ticker-item {

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

            white-space:
                nowrap;

        }


        .ticker-logo {

            width:
                19px;

            height:
                19px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                #c5cad1;

        }


        .ticker-logo svg {

            width:
                100%;

            height:
                100%;

        }


        .ticker-name {

            color:
                #d9dde2;

            font-size:
                9px;

            font-weight:
                700;

        }


        .ticker-type {

            color:
                var(--text-dim);

            font-size:
                7px;

            font-weight:
                700;

            letter-spacing:
                .8px;

        }


        .ticker-price {

            color:
                var(--text-secondary);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                600;

        }


        .ticker-up {

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                700;

        }


        .ticker-down {

            color:
                var(--color-down);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                700;

        }


        .ticker-separator {

            width:
                1px;

            height:
                17px;

            background:
                var(--border-hairline);

        }


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

        .hero {

            width:
                100%;

            max-width:
                1580px;

            min-height:
                calc(100vh - 124px);

            margin:
                auto;

            padding:
                80px 4.5vw 45px;

            display:
                grid;

            /* grid-template-columns:
        43% 57%; */

            align-items:
                center;

        }


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

        .hero-copy {

            position:
                relative;

            z-index:
                20;

            padding-left:
                1vw;
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }


        .eyebrow {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

            margin-bottom:
                24px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                700;

            letter-spacing:
                1.4px;

        }


        .eyebrow::before {

            content:
                "";

            width:
                25px;

            height:
                1px;

            background:
                var(--color-up);

        }

        .reviews-eyebrow {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;
        }

        .reviews-eyebrow::before {

            content:
                "";

            width:
                25px;

            height:
                1px;

            background:
                var(--color-up);

        }


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

        .hero-title {

            max-width:
                720px;

            font-family:
                var(--font-ui);

            font-size:
                clamp(64px,
                    7.2vw,
                    116px);

            font-weight:
                900;

            line-height:
                .86;

            letter-spacing:
                -5px;

            text-transform:
                uppercase;

        }


        .hero-title .green {

            color:
                var(--color-up);

        }


        .hero-title .outline {

            color:
                transparent;

            -webkit-text-stroke:
                1px rgba(255, 255, 255, .38);

        }


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

        .hero-description {

            max-width:
                510px;

            margin-top:
                31px;

            color:
                var(--text-muted);

            font-size:
                12px;

            line-height:
                1.85;

        }


        .hero-description strong {

            color:
                var(--text-secondary);

            font-weight:
                700;

        }


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

        .buttons {

            display:
                flex;

            align-items:
                center;

            gap:
                25px;

            margin-top:
                31px;

        }


        .primary {

            min-height:
                47px;

            padding:
                0 20px;

            display:
                flex;

            align-items:
                center;

            gap:
                22px;

            background:
                var(--accent-primary);

            color:
                #0b0e11;

            text-decoration:
                none;

            font-size:
                9px;

            font-weight:
                800;

            letter-spacing:
                .8px;

            transition:
                all .2s ease;

        }


        .primary:hover {

            background:
                var(--accent-hover);

            transform:
                translateY(-2px);

        }


        .secondary {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

            color:
                var(--text-secondary);

            text-decoration:
                none;

            font-size:
                9px;

            font-weight:
                700;

            letter-spacing:
                .7px;

            transition:
                color .2s ease;

        }


        .secondary:hover {

            color:
                var(--color-up);

        }


        .secondary span {

            color:
                var(--color-up);

            font-size:
                13px;

        }


        /* =========================================================
   SMALL MARKET STATS
========================================================= */

        .hero-stats {

            display:
                flex;

            align-items:
                center;

            gap:
                0;

            margin-top:
                48px;

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

            width:
                min(510px, 100%);

        }


        .stat {

            min-width:
                125px;

            padding:
                17px 25px 0 0;

        }


        .stat+.stat {

            padding-left:
                25px;

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

        }


        .stat-label {

            color:
                var(--text-muted);

            font-size:
                7px;

            font-weight:
                700;

            letter-spacing:
                1px;

        }


        .stat-value {

            margin-top:
                6px;

            color:
                var(--text-main);

            font-family:
                var(--font-tabular);

            font-size:
                14px;

            font-weight:
                700;

        }


        .stat-change {

            margin-top:
                3px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                600;

        }


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

        .market-visual {

            height:
                660px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            position:
                relative;

        }






        .globe-shell:active {

            cursor:
                grabbing;

        }


        #globe {

            width:
                100%;

            height:
                100%;

            overflow:
                visible;

        }


        /* =========================================================
   GLOBE
========================================================= */

        .sphere {

            fill:
                url(#globeGradient);

            stroke:
                rgba(14, 203, 129, .52);

            stroke-width:
                1;

        }


        /* =========================================================
   GRATICULE
========================================================= */

        .graticule {

            fill:
                none;

            stroke:
                rgba(255, 255, 255, .055);

            stroke-width:
                .5;

        }


        /* =========================================================
   COUNTRY / CONTINENT DETAIL
========================================================= */

        .country {

            fill:
                rgba(38, 65, 53, .46);

            stroke:
                rgba(119, 153, 135, .38);

            stroke-width:
                .42;

            vector-effect:
                non-scaling-stroke;

        }


        .country:hover {

            fill:
                rgba(14, 203, 129, .16);

            stroke:
                rgba(14, 203, 129, .60);

        }


        /* =========================================================
   MARKET ROUTES
========================================================= */

        .market-route {

            fill:
                none;

            stroke:
                rgba(14, 203, 129, .30);

            stroke-width:
                .7;

            stroke-dasharray:
                2 7;

        }


        /* =========================================================
   MARKET MARKERS
========================================================= */

        .market-marker {

            pointer-events:
                none;

        }


        .marker-core {

            fill:
                var(--color-up);

            filter:
                url(#nodeGlow);

        }


        .marker-ring {

            fill:
                none;

            stroke:
                rgba(14, 203, 129, .55);

            stroke-width:
                1;

        }


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

        .primary-label-bg {

            fill:
                rgba(11, 14, 17, .96);

            stroke:
                rgba(14, 203, 129, .25);

            stroke-width:
                .7;

        }


        .primary-label-line {

            stroke:
                rgba(14, 203, 129, .34);

            stroke-width:
                .7;

            stroke-dasharray:
                2 5;

        }


        .primary-code {

            fill:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            font-weight:
                700;

            letter-spacing:
                1px;

        }


        .primary-name {

            fill:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size:
                9px;

            font-weight:
                800;

        }


        .primary-type {

            fill:
                var(--text-muted);

            font-family:
                var(--font-ui);

            font-size:
                5px;

            font-weight:
                700;

            letter-spacing:
                .7px;

        }


        /* =========================================================
   GLOBE EDGE
========================================================= */

        .globe-edge {

            fill:
                none;

            stroke:
                rgba(14, 203, 129, .44);

            stroke-width:
                1;

        }


        .globe-edge-soft {

            fill:
                none;

            stroke:
                rgba(14, 203, 129, .08);

            stroke-width:
                5;

        }


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

        .globe-caption {

            position:
                absolute;

            bottom:
                2px;

            left:
                50%;

            transform:
                translateX(-50%);

            color:
                var(--text-dim);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            font-weight:
                600;

            letter-spacing:
                1.6px;

            white-space:
                nowrap;

        }


        /* =========================================================
   LIVE INDICATOR
========================================================= */

        .live-indicator {

            position:
                absolute;

            right:
                5%;

            top:
                12%;

            display:
                flex;

            align-items:
                center;

            gap:
                7px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                7px;

            font-weight:
                600;

            letter-spacing:
                .7px;

        }


        .live-dot {

            width:
                5px;

            height:
                5px;

            border-radius:
                50%;

            background:
                var(--color-up);

            box-shadow:
                0 0 10px rgba(14, 203, 129, .65);

        }


        /* =========================================================
   GLOBE CORNER DATA
========================================================= */

        .globe-meta {

            position:
                absolute;

            left:
                2%;

            top:
                15%;

            color:
                var(--text-dim);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            line-height:
                1.8;

            letter-spacing:
                .8px;

        }


        .globe-meta strong {

            color:
                var(--text-muted);

        }


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

        @media(max-width:1200px) {

            nav {

                padding:
                    0 4vw;

            }


            .nav-links {

                display:
                    none;

            }


            .hero {

                grid-template-columns:
                    1fr;

                padding:
                    65px 5vw 30px;

            }


            .hero-copy {

                padding-left:
                    0;
                gap: 50px;
            }


            .market-visual {

                margin-top:
                    -45px;

            }

        }


        @media(max-width:700px) {

            nav {

                height:
                    70px;

                padding:
                    0 20px;

            }


            .logo {

                font-size:
                    16px;

                letter-spacing:
                    3px;

            }


            .languages,
            .consult-btn {

                display:
                    none;

            }


            .hero {

                padding:
                    48px 21px 25px;

            }


            .hero-title {

                font-size:
                    62px;

                line-height:
                    .88;

                letter-spacing:
                    -3px;

            }


            .hero-description {

                margin-top:
                    26px;

                font-size:
                    11px;

            }


            .buttons {

                flex-direction:
                    column;

                align-items:
                    flex-start;

                gap:
                    19px;

            }


            .hero-stats {

                margin-top:
                    38px;

            }


            .stat {

                min-width:
                    100px;

            }


            .market-visual {

                height:
                    430px;

                margin-top:
                    -20px;

            }


            .globe-shell {

                transform:
                    scale(.67);

            }


            .globe-caption {

                display:
                    none;

            }


            .globe-meta,
            .live-indicator {

                display:
                    none;

            }


            .ticker-track {

                gap:
                    18px;

            }

        }





        :root {

            /* --- BACKGROUNDS & SURFACES --- */

            --bg-canvas: #0b0e11;
            --bg-surface: #181a20;
            --bg-elevated: #1e2329;
            --border-hairline: #2b3139;


            /* --- MARKET SEMANTICS --- */

            --color-up: #0ecb81;
            --color-down: #f6465d;


            /* --- BRAND & ACTION ACCENTS --- */

            --accent-primary: #FCD535;
            --accent-hover: #f0b90b;


            /* --- TYPOGRAPHY --- */

            --text-main: #FFFFFF;
            --text-muted: #707a8a;


            /* --- FONT FAMILIES --- */

            --font-ui:
                'Inter',
                'Roboto',
                'SF Pro Display',
                sans-serif;

            --font-tabular:
                'JetBrains Mono',
                'Consolas',
                'Monaco',
                monospace;
        }


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

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            margin: 0;

            background:
                radial-gradient(circle at 50% -20%,
                    rgba(252, 213, 53, .035),
                    transparent 40%),
                var(--bg-canvas);

            color: var(--text-main);

            font-family: var(--font-ui);

            -webkit-font-smoothing: antialiased;

        }


        /* =====================================================
   MARKET SECTION
====================================================== */

        .markets-section {

            width: 100%;

            padding:
                80px
                /* clamp(24px, 5vw, 80px) */
                4.5vw 45px;

            background: var(--bg-canvas);

            overflow: hidden;
        }


        .markets-container {

            width: 100%;

            max-width: 1500px;

            margin: 0 auto;
        }


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

        .markets-header {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr) minmax(280px, 460px);

            gap: 60px;

            align-items: end;

            margin-bottom: 55px;

            padding-bottom: 30px;

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


        .markets-eyebrow {

            display: flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 18px;

            color: var(--accent-primary);

            font-family: var(--font-tabular);

            font-size: 11px;

            font-weight: 600;

            letter-spacing: .16em;

        }


        .markets-eyebrow::before {

            content: "";

            width: 25px;

            height: 1px;

            border-radius: 50%;

            background: var(--color-up);

            /* box-shadow:
        0 0 0 4px rgba(14, 203, 129, .08),
        0 0 12px rgba(14, 203, 129, .45); */
        }


        .markets-title {

            margin: 0;

            max-width: 800px;

            font-size:
                clamp(42px, 6vw, 78px);

            line-height: .96;

            letter-spacing: -.055em;

            font-weight: 700;

            color: var(--text-main);
        }


        .markets-title .italic {

            color: var(--accent-primary);

            font-style: normal;
        }


        .markets-description {

            margin: 0;

            max-width: 420px;

            color: var(--text-muted);

            font-size: 15px;

            line-height: 1.7;

        }


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

        .market-grid {

            display: grid;

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

            gap: 16px;
        }


        /* =====================================================
   MARKET CARD
====================================================== */

        .market-card {

            position: relative;

            min-width: 0;

            overflow: hidden;

            background: var(--bg-surface);

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

            transition:
                border-color .3s ease,
                background .3s ease,
                transform .3s ease;

        }


        .market-card:hover {

            background: var(--bg-elevated);

            border-color:
                rgba(252, 213, 53, .45);

            transform: translateY(-4px);
        }


        /* =====================================================
   CARD TOP VISUAL
====================================================== */

        .market-visual {

            position: relative;

            height: 370px;

            overflow: hidden;

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

            background:

                linear-gradient(180deg,
                    rgba(255, 255, 255, .015),
                    transparent),

                #11151a;
        }


        .market-visual::after {

            content: "";

            position: absolute;

            inset: 0;

            pointer-events: none;

            background:
                linear-gradient(90deg,
                    transparent 49.8%,
                    rgba(43, 49, 57, .25) 50%,
                    transparent 50.2%),

                linear-gradient(0deg,
                    transparent 49.8%,
                    rgba(43, 49, 57, .2) 50%,
                    transparent 50.2%);

            background-size:
                80px 80px;

            opacity: .45;
        }


        .visual-label {

            position: absolute;

            z-index: 5;

            top: 20px;

            left: 22px;

            color: var(--text-muted);

            font-family: var(--font-tabular);

            font-size: 9px;

            font-weight: 600;

            letter-spacing: .13em;
        }


        /* =====================================================
   SVG
====================================================== */

        .market-svg {

            position: absolute;

            inset: 0;

            width: 100%;

            height: 100%;
        }


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

        .forex-card .market-visual {

            background:
                radial-gradient(circle at 50% 48%,
                    rgba(14, 203, 129, .10),
                    transparent 35%),
                #11151a;
        }


        .forex-grid {

            fill: none;

            stroke:
                rgba(112, 122, 138, .16);

            stroke-width: 1;
        }


        .forex-route {

            fill: none;

            stroke:
                rgba(14, 203, 129, .65);

            stroke-width: 1.5;

            stroke-linecap: round;

            stroke-dasharray: 4 7;

            animation:
                forexFlow 8s linear infinite;
        }


        .forex-route.secondary {

            stroke:
                rgba(252, 213, 53, .28);

            stroke-width: 1;

            stroke-dasharray: none;

            animation: none;
        }


        @keyframes forexFlow {

            to {
                stroke-dashoffset: -100;
            }
        }


        .forex-node {

            fill: var(--color-up);

            filter:
                drop-shadow(0 0 7px rgba(14, 203, 129, .7));
        }


        .forex-ring {

            fill: none;

            stroke:
                rgba(14, 203, 129, .16);

            stroke-width: 1;

            animation:
                forexRing 4s ease-in-out infinite;
        }


        .forex-ring:nth-child(2) {
            animation-delay: .8s;
        }

        .forex-ring:nth-child(3) {
            animation-delay: 1.6s;
        }


        @keyframes forexRing {

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

            50% {
                opacity: .7;
            }
        }


        .forex-symbol {

            fill: var(--text-main);

            font-family: var(--font-tabular);

            font-size: 26px;

            font-weight: 500;

            text-anchor: middle;

            dominant-baseline: middle;
        }


        .forex-symbol-small {

            fill: var(--text-muted);

            font-family: var(--font-tabular);

            font-size: 10px;

            letter-spacing: .08em;

            text-anchor: middle;
        }


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

        .stocks-card .market-visual {

            background:
                radial-gradient(circle at 50% 50%,
                    rgba(252, 213, 53, .075),
                    transparent 38%),
                #11151a;
        }


        .stock-grid {

            stroke:
                rgba(112, 122, 138, .16);

            stroke-width: 1;
        }


        .stock-column {

            fill:
                rgba(252, 213, 53, .055);

            stroke:
                rgba(252, 213, 53, .22);

            stroke-width: 1;
        }


        .stock-column-highlight {

            fill:
                rgba(252, 213, 53, .12);

            stroke:
                rgba(252, 213, 53, .5);

            stroke-width: 1;
        }


        .stock-line {

            fill: none;

            stroke:
                var(--accent-primary);

            stroke-width: 2;

            stroke-linecap: round;

            stroke-linejoin: round;

            filter:
                drop-shadow(0 0 6px rgba(252, 213, 53, .25));
        }


        .stock-area {

            fill:
                url(#stockArea);
        }


        .stock-node {

            fill:
                var(--accent-primary);

            stroke:
                #11151a;

            stroke-width: 2;
        }


        .stock-ticker {

            fill:
                var(--text-main);

            font-family:
                var(--font-tabular);

            font-size: 13px;

            font-weight: 600;

            text-anchor: middle;
        }


        .stock-ticker-muted {

            fill:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 9px;

            text-anchor: middle;
        }


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

        .digital-card .market-visual {

            background:
                radial-gradient(circle at 50% 48%,
                    rgba(252, 213, 53, .08),
                    transparent 35%),
                #11151a;
        }


        .crypto-orbit {

            fill: none;

            stroke:
                rgba(252, 213, 53, .18);

            stroke-width: 1;

            stroke-dasharray: 3 8;

            animation:
                cryptoOrbit 18s linear infinite;
        }


        .crypto-orbit.green {

            stroke:
                rgba(14, 203, 129, .18);

            animation-duration: 22s;

            animation-direction: reverse;
        }


        @keyframes cryptoOrbit {

            to {
                transform:
                    rotate(360deg);
                transform-origin:
                    200px 170px;
            }
        }


        .crypto-line {

            fill: none;

            stroke:
                rgba(252, 213, 53, .38);

            stroke-width: 1;

            stroke-linecap: round;
        }


        .crypto-line.green {

            stroke:
                rgba(14, 203, 129, .35);
        }


        .crypto-node {

            fill:
                var(--accent-primary);

            filter:
                drop-shadow(0 0 7px rgba(252, 213, 53, .55));
        }


        .crypto-node.green {

            fill:
                var(--color-up);

            filter:
                drop-shadow(0 0 7px rgba(14, 203, 129, .55));
        }


        .crypto-center {

            fill:
                var(--bg-elevated);

            stroke:
                var(--accent-primary);

            stroke-width: 1.5;

            filter:
                drop-shadow(0 0 14px rgba(252, 213, 53, .2));
        }


        .crypto-symbol {

            fill:
                var(--accent-primary);

            font-family:
                var(--font-tabular);

            font-size: 30px;

            font-weight: 600;

            text-anchor: middle;

            dominant-baseline: middle;
        }


        .crypto-label {

            fill:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 9px;

            text-anchor: middle;

            letter-spacing: .08em;
        }


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

        .market-content {

            position: relative;

            padding: 25px 24px 28px;
        }


        .market-index {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 10px;

            letter-spacing: .08em;
        }


        .market-arrow {

            position: absolute;

            top: 22px;

            right: 22px;

            display: flex;

            align-items: center;

            justify-content: center;

            width: 34px;

            height: 34px;

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

            color:
                var(--text-muted);

            font-size: 15px;

            transition:
                color .25s ease,
                background .25s ease,
                border-color .25s ease;
        }


        .market-card:hover .market-arrow {

            color:
                var(--bg-canvas);

            background:
                var(--accent-primary);

            border-color:
                var(--accent-primary);
        }


        .market-name {

            margin:
                28px 0 10px;

            color:
                var(--text-main);

            font-size: 25px;

            line-height: 1;

            letter-spacing: -.035em;

            font-weight: 600;
        }


        .market-content .market-description {

            margin: 0;

            max-width: 340px;

            color:
                var(--text-muted);

            font-size: 13px;

            line-height: 1.65;
        }


        /* =====================================================
   MARKET META
====================================================== */

        .market-meta {

            display: flex;

            align-items: center;

            gap: 10px;

            margin-top: 20px;

            padding-top: 16px;

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

        }


        .meta-label {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 9px;

            letter-spacing: .08em;
        }


        .meta-value {

            margin-left: auto;

            color:
                var(--text-main);

            font-family:
                var(--font-tabular);

            font-size: 11px;

            font-weight: 600;
        }


        .meta-up {

            color:
                var(--color-up);
        }


        .meta-down {

            color:
                var(--color-down);
        }


        /* =====================================================
   ASSET SYMBOL BADGES
====================================================== */

        .asset-badge {

            position: absolute;

            z-index: 4;

            right: 22px;

            top: 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            width: 38px;

            height: 38px;

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

            background:
                rgba(24, 26, 32, .82);

            color:
                var(--accent-primary);

            font-family:
                var(--font-tabular);

            font-size: 13px;

            font-weight: 600;

            backdrop-filter:
                blur(8px);
        }


        /* =====================================================
   LIVE INDICATOR
====================================================== */

        .market-live {

            display: flex;

            align-items: center;

            gap: 7px;

            margin-top: 17px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 9px;

            letter-spacing: .08em;
        }


        .live-dot {

            width: 5px;

            height: 5px;

            border-radius: 50%;

            background:
                var(--color-up);

            box-shadow:
                0 0 0 3px rgba(14, 203, 129, .08),
                0 0 9px rgba(14, 203, 129, .6);
        }


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

        @media (max-width: 1050px) {

            .market-grid {

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

            .markets-header {

                grid-template-columns:
                    1fr;

                gap: 25px;
            }

        }


        @media (max-width: 700px) {

            .markets-section {

                padding:
                    80px 18px;
            }


            .market-grid {

                grid-template-columns:
                    1fr;

                gap: 14px;
            }


            .market-visual {

                height: 330px;
            }


            .markets-title {

                font-size: 44px;
            }


            .markets-description {

                font-size: 14px;
            }

        }


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

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

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

                animation-duration: .01ms !important;

                animation-iteration-count: 1 !important;

                transition-duration: .01ms !important;
            }
        }





        /* =====================================================
           TRADING DASHBOARD DESIGN SYSTEM
        ===================================================== */

        :root {

            /* Backgrounds */
            --bg-canvas: #0b0e11;
            --bg-surface: #181a20;
            --bg-elevated: #1e2329;
            --border-hairline: #2b3139;

            /* Market semantics */
            --color-up: #0ecb81;
            --color-down: #f6465d;

            /* Brand */
            --accent-primary: #FCD535;
            --accent-hover: #f0b90b;

            /* Typography */
            --text-main: #FFFFFF;
            --text-muted: #707a8a;

            /* Fonts */
            --font-ui: 'Inter', 'Roboto', 'SF Pro Display', sans-serif;
            --font-tabular: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

            /* Additional */
            --green-soft: rgba(14, 203, 129, .10);
            --yellow-soft: rgba(252, 213, 53, .08);
            --red-soft: rgba(246, 70, 93, .08);
        }


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

        * {
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            margin: 0;

            background:
                var(--bg-canvas);

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            -webkit-font-smoothing:
                antialiased;

            -moz-osx-font-smoothing:
                grayscale;
        }


        button,
        input,
        textarea,
        select {

            font-family:
                var(--font-ui);
        }


        a {

            color:
                inherit;

            text-decoration:
                none;
        }


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

        .markets-page {

            width: 100%;

            min-height: 100vh;

            padding: 25px 4.5vw 45px;

            background:
                var(--bg-canvas);
        }


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

        .markets-header {

            min-height: 165px;

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            padding-bottom: 34px;
        }


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

        .markets-eyebrow {

            margin-bottom: 18px;

            /* color:
                var(--text-muted); */

            font-family:
                var(--font-tabular);

            font-size: 8px;

            font-weight: 500;

            letter-spacing: 2.5px;

            text-transform: uppercase;
        }


        /* =====================================================
           MAIN HEADING
        ===================================================== */

        .markets-title {

            margin: 0;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size:
                clamp(48px, 5vw, 68px);

            font-weight: 600;

            line-height: .94;

            letter-spacing: -3px;
        }


        .markets-title .italic {

            color:
                var(--accent-primary);

            font-family:
                var(--font-ui);

            font-style:
                normal;

            font-weight:
                500;

            letter-spacing:
                -3px;
        }


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

        .markets-description {

            width: 250px;

            margin:
                0 17px 3px 0;

            color:
                var(--text-muted);

            font-family:
                var(--font-ui);

            font-size: 11px;

            font-weight: 400;

            line-height: 1.65;
        }


        /* =====================================================
           MAIN DASHBOARD
        ===================================================== */

        .market-dashboard {

            display: grid;

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

            /* min-height: 595px; */

            background:
                var(--bg-canvas);

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


        /* =====================================================
           LEFT MAP PANEL
        ===================================================== */

        .market-map-section {

            min-width: 0;

            display: flex;

            flex-direction: column;

            background:
                var(--bg-canvas);

            border-right:
                1px solid var(--border-hairline);
        }


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

        .map-heading {

            padding:
                20px 18px 0;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 8px;

            font-weight: 400;

            letter-spacing: 1.8px;

            text-transform: uppercase;
        }


        /* =====================================================
           MAP
        ===================================================== */

        .map-area {

            position: relative;

            height: 306px;

            margin:
                0 18px;

            overflow: hidden;

            background:

                radial-gradient(circle at 50% 50%,
                    rgba(14, 203, 129, .045),
                    transparent 58%),

                var(--bg-canvas);

            border-bottom:
                1px solid rgba(43, 49, 57, .65);
        }


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

        .map-area::before {

            content: "";

            position: absolute;

            inset: 0;

            background-image:

                linear-gradient(rgba(43, 49, 57, .25) 1px,
                    transparent 1px),

                linear-gradient(90deg,
                    rgba(43, 49, 57, .25) 1px,
                    transparent 1px);

            background-size:
                38px 38px;

            opacity: .22;

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


        /* =====================================================
           WORLD MAP
        ===================================================== */

        .world {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-image: radial-gradient(circle at center,
                    rgba(120, 170, 140, .18),
                    transparent 55%),
                url('./globe2d.jpg');


            background-position: center;


            background-size: contain;



            opacity: .35;



            filter:

                brightness(.7) contrast(1.2);



            animation:

                globePulse 8s ease-in-out infinite;
        }


        .continent {

            position: absolute;

            background:
                rgba(14, 203, 129, .045);

            border:
                1px solid rgba(14, 203, 129, .10);

            box-shadow:
                inset 0 0 20px rgba(14, 203, 129, .025);
        }


        /* =====================================================
           NORTH AMERICA
        ===================================================== */

        .north-america {

            width: 160px;

            height: 83px;

            left: 8%;

            top: 29px;

            clip-path:
                polygon(0 28%,
                    16% 10%,
                    34% 5%,
                    45% 16%,
                    63% 11%,
                    75% 25%,
                    87% 31%,
                    82% 48%,
                    72% 49%,
                    66% 64%,
                    52% 62%,
                    45% 80%,
                    35% 72%,
                    28% 54%,
                    13% 52%,
                    5% 42%);
        }


        /* =====================================================
           CENTRAL AMERICA
        ===================================================== */

        .central-america {

            width: 55px;

            height: 55px;

            left: 25%;

            top: 91px;

            transform:
                rotate(27deg);

            clip-path:
                polygon(10% 0,
                    85% 13%,
                    70% 37%,
                    100% 54%,
                    63% 63%,
                    58% 100%,
                    30% 78%,
                    0 58%,
                    24% 34%);
        }


        /* =====================================================
           SOUTH AMERICA
        ===================================================== */

        .south-america {

            width: 92px;

            height: 132px;

            left: 29%;

            top: 105px;

            transform:
                rotate(8deg);

            clip-path:
                polygon(43% 0,
                    66% 12%,
                    70% 30%,
                    91% 39%,
                    77% 55%,
                    83% 70%,
                    62% 82%,
                    52% 100%,
                    37% 89%,
                    30% 68%,
                    16% 54%,
                    25% 36%,
                    8% 21%);
        }


        /* =====================================================
           EUROPE
        ===================================================== */

        .europe {

            width: 75px;

            height: 48px;

            left: 49%;

            top: 42px;

            clip-path:
                polygon(3% 38%,
                    22% 14%,
                    41% 22%,
                    51% 2%,
                    68% 15%,
                    93% 18%,
                    83% 43%,
                    100% 56%,
                    79% 75%,
                    58% 64%,
                    45% 93%,
                    29% 69%,
                    10% 76%);
        }


        /* =====================================================
           AFRICA
        ===================================================== */

        .africa {

            width: 125px;

            height: 137px;

            left: 49%;

            top: 77px;

            clip-path:
                polygon(32% 0,
                    62% 8%,
                    77% 25%,
                    92% 35%,
                    84% 53%,
                    75% 70%,
                    63% 83%,
                    54% 100%,
                    40% 82%,
                    29% 71%,
                    21% 53%,
                    8% 42%,
                    17% 25%);
        }


        /* =====================================================
           ASIA
        ===================================================== */

        .asia {

            width: 235px;

            height: 104px;

            right: 7%;

            top: 38px;

            clip-path:
                polygon(0 26%,
                    11% 13%,
                    25% 21%,
                    37% 7%,
                    52% 12%,
                    64% 2%,
                    76% 14%,
                    90% 13%,
                    100% 28%,
                    94% 45%,
                    82% 48%,
                    78% 67%,
                    62% 63%,
                    56% 85%,
                    43% 72%,
                    31% 76%,
                    20% 57%,
                    8% 63%);
        }


        /* =====================================================
           AUSTRALIA
        ===================================================== */

        .australia {

            width: 92px;

            height: 55px;

            right: 13%;

            top: 147px;

            border-radius:
                50% 45% 48% 38%;

            transform:
                rotate(-5deg);

            clip-path:
                polygon(5% 27%,
                    21% 8%,
                    42% 5%,
                    66% 14%,
                    89% 23%,
                    98% 48%,
                    85% 69%,
                    61% 82%,
                    38% 73%,
                    18% 86%,
                    3% 61%);
        }


        /* =====================================================
           WORLD TEXTURE
        ===================================================== */

        .world::after {

            content: "";

            position: absolute;

            inset: 0;

            background-image:

                radial-gradient(circle,
                    rgba(14, 203, 129, .30) 1px,
                    transparent 1px);

            background-size:
                7px 7px;

            opacity: .32;

            mask-image:
                radial-gradient(ellipse,
                    black 15%,
                    transparent 75%);
        }


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

        .market-orbit {

            position: absolute;

            width: 55%;

            height: 155px;

            left: 22%;

            top: 48px;

            border:
                1px dashed rgba(112, 122, 138, .65);

            border-radius: 50%;

            transform:
                rotate(4deg);
        }


        /* =====================================================
           MARKET MARKERS
        ===================================================== */

        .map-marker {

            position: absolute;

            z-index: 10;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 7px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 7px;

            font-weight: 400;

            letter-spacing: 1.3px;

            text-transform: uppercase;

            white-space: nowrap;
        }


        .marker-dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background:
                var(--color-up);

            box-shadow:

                0 0 5px var(--color-up),

                0 0 14px rgba(14, 203, 129, .55),

                0 0 28px rgba(14, 203, 129, .25);
        }


        .marker-americas {

            left: 18%;

            top: 126px;
        }


        .marker-europe {

            left: 49%;

            top: 85px;
        }


        .marker-asia {

            right: 17%;

            top: 126px;
        }


        .marker-digital {

            left: 50%;

            top: 214px;
        }


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

        .map-statistics {

            display: grid;

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

            min-height: 94px;

            /* border-bottom:
                1px solid var(--border-hairline); */
        }


        .map-stat {

            padding:
                26px 21px;

            background:
                transparent;

            border-right:
                1px solid var(--border-hairline);
        }


        .map-stat:last-child {

            border-right:
                0;
        }


        .map-stat-value {

            color:
                var(--text-main);

            font-family:
                var(--font-tabular);

            font-size: 17px;

            font-weight: 600;

            letter-spacing: -.5px;
        }


        .map-stat-label {

            margin-top: 10px;

            color:
                var(--text-muted);

            font-family:
                var(--font-ui);

            font-size: 7px;

            font-weight: 500;

            letter-spacing: .5px;

            text-transform: uppercase;
        }


        /* =====================================================
           RIGHT PANEL
        ===================================================== */

        .market-detail {

            min-width: 0;

            display: flex;

            flex-direction: column;

            padding:
                20px 16px 17px;

            background:
                var(--bg-canvas);
        }


        /* =====================================================
           REGION NAVIGATION
        ===================================================== */

        .region-nav {

            border-bottom:
                1px solid var(--border-hairline);
            padding: unset;
        }


        .region-link {

            min-height: 43px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            /* border-bottom:
                1px solid var(--border-hairline); */

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size: 10px;

            font-weight: 500;

            transition:
                color .18s ease,
                background .18s ease;
        }

/* 
        .region-link:last-child {

            border-bottom:
                0;
        } */


        /* .region-link:hover {

            color:
                var(--accent-primary);

            background:
                var(--yellow-soft);
        } */


        .region-arrow {

            color:
                var(--text-muted);

            font-size: 12px;
        }


        /* =====================================================
           REGION INFO
        ===================================================== */

        .region-info {

            padding:
                36px 0 25px;
        }


        .region-index {

            margin-bottom: 10px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 8px;

            font-weight: 400;
        }


        .region-title {

            margin: 0;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size: 31px;

            font-weight: 600;

            line-height: 1;

            letter-spacing: -1.2px;
        }


        .region-description {

            max-width: 290px;

            margin:
                10px 0 0;

            color:
                var(--text-muted);

            font-family:
                var(--font-ui);

            font-size: 10px;

            line-height: 1.55;
        }


        /* =====================================================
           TAGS
        ===================================================== */

        .market-tags {

            display: flex;

            flex-wrap: wrap;

            gap: 7px;

            margin-top: 13px;
        }


        .market-tag {

            padding:
                5px 8px;

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

            background:
                transparent;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 6px;

            font-weight: 400;

            letter-spacing: .2px;

            text-transform: uppercase;
        }


        /* .market-tag:hover {

            color:
                var(--accent-primary);

            border-color:
                var(--accent-primary);

            background:
                var(--yellow-soft);
        } */


        /* =====================================================
           MARKET SNAPSHOT
        ===================================================== */

        .snapshot {

            padding:
                14px 13px;

            background:
                var(--bg-surface);

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


        .snapshot-title {

            margin-bottom: 7px;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size: 13px;

            font-weight: 500;
        }


        .snapshot-row {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding:
                3px 0;

            color:
                var(--text-muted);

            font-family:
                var(--font-ui);

            font-size: 9px;
        }


        .snapshot-row strong {

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size: 9px;

            font-weight: 600;
        }


        /* =====================================================
           EXPLORE BUTTON
        ===================================================== */

        .explore-button {

            height: 47px;

            margin-top: 18px;

            display: flex;

            align-items: center;

            justify-content: center;

            background:
                transparent;

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

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size: 11px;

            font-weight: 500;

            transition:
                background .2s ease,
                color .2s ease,
                border-color .2s ease;
        }


        .explore-button:hover {

            background:
                var(--yellow-soft);

            border-color:
                var(--accent-primary);

            color:
                var(--accent-primary);
        }


        /* =====================================================
           TICKER
        ===================================================== */

        .market-ticker {

            height: 51px;

            display: grid;

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

            background:
                var(--bg-canvas);

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

            border-top:
                0;
        }


        .ticker-item {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

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

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size: 8px;

            transition:
                background .18s ease;
        }


        .ticker-item:last-child {

            border-right:
                0;
        }


        .ticker-symbol {

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


        .ticker-up {

            color:
                var(--color-up);
        }


        .ticker-down {

            color:
                var(--color-down);
        }


        .ticker-item:hover {

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


        .ticker-item:hover .ticker-symbol {

            color:
                var(--text-main);
        }


        /* =====================================================
           OPTIONAL ASSET COLORS
        ===================================================== */

        .positive {
            color:
                var(--color-up);
        }


        .negative {
            color:
                var(--color-down);
        }


        .accent {
            color:
                var(--accent-primary);
        }


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

        @media (max-width: 850px) {

            .markets-header {

                min-height: auto;

                display: block;

                padding-bottom: 28px;
            }


            .markets-description {

                width: auto;

                max-width: 370px;

                margin:
                    30px 0 0;
            }


            .market-dashboard {

                grid-template-columns:
                    1fr;
            }


            .market-map-section {

                border-right:
                    0;

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


            .market-detail {

                min-height:
                    550px;
            }


            .market-ticker {

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

                height:
                    auto;
            }


            .ticker-item {

                min-height:
                    44px;
            }
        }


        @media (max-width: 560px) {

            .markets-page {

                padding:
                    8px 8px 15px;
            }


            .markets-title {

                font-size:
                    43px;

                letter-spacing:
                    -2px;
            }


            .markets-title .italic {

                letter-spacing:
                    -2px;
            }


            .markets-description {

                font-size:
                    10px;
            }


            .map-area {

                height:
                    250px;

                margin-left:
                    12px;

                margin-right:
                    12px;
            }


            .map-statistics {

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


            .map-stat {

                min-height:
                    85px;

                padding:
                    20px 14px;
            }


            .map-stat:nth-child(2) {

                border-right:
                    0;
            }


            .map-stat:nth-child(-n+2) {

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


            .market-ticker {

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


            .region-info {

                padding-top:
                    28px;
            }
        }





        /* =========================================================
   BELVARN — TRADING DASHBOARD DESIGN SYSTEM
========================================================= */

        :root {

            /* --- BACKGROUNDS & SURFACES --- */

            --bg-canvas: #0b0e11;
            --bg-surface: #181a20;
            --bg-elevated: #1e2329;
            --border-hairline: #2b3139;


            /* --- MARKET SEMANTICS --- */

            --color-up: #0ecb81;
            --color-down: #f6465d;


            /* --- BRAND & ACTION ACCENTS --- */

            --accent-primary: #FCD535;
            --accent-hover: #f0b90b;


            /* --- TYPOGRAPHY COLORS --- */

            --text-main: #FFFFFF;
            --text-muted: #707a8a;


            /* --- FONT FAMILIES --- */

            --font-ui:
                'Inter',
                'Roboto',
                'SF Pro Display',
                sans-serif;

            --font-tabular:
                'JetBrains Mono',
                'Consolas',
                'Monaco',
                monospace;
        }


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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;

            background:
                var(--bg-canvas);

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            -webkit-font-smoothing:
                antialiased;

            overflow-x:
                hidden;
        }


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

        .work-section {

            position: relative;

            width: 100%;

            min-height: 100vh;

            padding: 25px 4.5vw 45px;

            overflow: hidden;

            background:
                var(--bg-canvas);
        }


        /* =========================================================
   TRADING GRID ATMOSPHERE
========================================================= */

        .work-section::before {

            content: "";

            position: absolute;

            inset: 0;

            pointer-events: none;

            opacity: .35;

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

            background-size:
                80px 80px;

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


        /* subtle yellow market glow */

        .work-section::after {

            content: "";

            position: absolute;

            width: 700px;
            height: 400px;

            right: -250px;
            top: -180px;

            pointer-events: none;

            background:
                radial-gradient(ellipse,
                    rgba(252, 213, 53, .035),
                    transparent 68%);

            filter:
                blur(25px);
        }


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

        .section-header {

            position: relative;

            z-index: 5;

            display: grid;

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

            align-items: end;

            padding:
                0 0 48px;
        }


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

        .eyebrow {

            color:
                var(--accent-primary);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            line-height:
                1;

            font-weight:
                600;

            letter-spacing:
                1.5px;

            text-transform:
                uppercase;
        }


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

        .section-title {

            margin-top:
                25px;

            max-width:
                780px;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size:
                clamp(54px,
                    6.15vw,
                    86px);

            line-height:
                .86;

            font-weight:
                600;

            letter-spacing:
                -4.5px;
        }

        .section-title .accent {

            display:
                block;

            color:
                var(--accent-primary);

            font-style:
                italic;

            font-weight:
                500;

            letter-spacing:
                -4.8px;

            text-shadow:
                0 0 35px rgba(252, 213, 53, .08);
        }


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

        .header-description {

            max-width:
                270px;

            padding-bottom:
                4px;

            color:
                #9aa2ae;

            font-family:
                var(--font-ui);

            font-size:
                11px;

            line-height:
                1.65;

            font-weight:
                400;
        }


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

        .work-grid {

            position:
                relative;

            z-index:
                5;

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                13px;
        }


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

        .work-card {

            position:
                relative;

            min-height:
                390px;

            overflow:
                hidden;

            background:
                var(--bg-surface);

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

            isolation:
                isolate;

            transition:
                background .45s ease,
                border-color .45s ease,
                transform .45s ease;
        }

        .work-card:nth-child(2) {
            background:
                #16191f;
        }

        .work-card:hover {

            background:
                var(--bg-elevated);

            border-color:
                #3a414c;
        }


        /* =========================================================
   TOP MARKET BAR
========================================================= */

        .work-card::before {

            content: "";

            position: absolute;

            left: 0;
            right: 0;
            top: 0;

            height: 2px;

            background:
                linear-gradient(90deg,
                    transparent,
                    rgba(252, 213, 53, .45),
                    transparent);

            opacity: .45;

            z-index: 30;
        }


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

        .card-number {

            position:
                absolute;

            top:
                28px;

            left:
                28px;

            z-index:
                20;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            line-height:
                1;

            font-weight:
                500;

            letter-spacing:
                .8px;
        }


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

        .visual {

            position:
                absolute;

            inset:
                0;

            z-index:
                1;

            pointer-events:
                none;
        }


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

        .card-content {

            position:
                absolute;

            left:
                28px;

            right:
                28px;

            bottom:
                27px;

            z-index:
                20;
        }


        /* =========================================================
   CATEGORY
========================================================= */

        .card-category {

            margin-bottom:
                19px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                7px;

            line-height:
                1;

            font-weight:
                500;

            letter-spacing:
                1.15px;

            text-transform:
                uppercase;
        }


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

        .card-title {

            max-width:
                520px;

            color:
                var(--text-main);

            font-family:
                var(--font-ui);

            font-size:
                clamp(31px,
                    3.15vw,
                    42px);

            line-height:
                .9;

            font-weight:
                400;

            letter-spacing:
                -2px;
        }

        .card-title .italic {

            display:
                block;

            color:
                var(--accent-primary);

            font-style:
                italic;

            font-weight:
                400;

            letter-spacing:
                -2px;
        }


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

        .card-description {

            max-width:
                420px;

            margin-top:
                14px;

            color:
                #a5acb7;

            font-family:
                var(--font-ui);

            font-size:
                10px;

            line-height:
                1.55;

            font-weight:
                400;
        }


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

        .card-link {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                13px;

            margin-top:
                22px;

            color:
                var(--accent-primary);

            font-family:
                var(--font-tabular);

            font-size:
                7px;

            line-height:
                1;

            font-weight:
                600;

            letter-spacing:
                .85px;

            text-decoration:
                none;

            text-transform:
                uppercase;

            transition:
                color .25s ease,
                gap .25s ease;
        }

        .card-link span {

            font-family:
                var(--font-ui);

            font-size:
                12px;

            line-height:
                0;

            transition:
                transform .25s ease;
        }

        .card-link:hover {

            color:
                var(--accent-hover);

            gap:
                17px;
        }

        .card-link:hover span {

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


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

        .work-card::after {

            content:
                "";

            position:
                absolute;

            left:
                0;

            right:
                0;

            bottom:
                0;

            height:
                1px;

            background:
                linear-gradient(90deg,
                    transparent,
                    rgba(252, 213, 53, .18),
                    transparent);

            z-index:
                25;
        }


        /* =========================================================
   =========================================================
   VISUAL 01 — LIVE MARKET
   =========================================================
   ========================================================= */

        .market-visual {

            position:
                absolute;

            top:
                12px;

            right:
                -10px;

            width:
                69%;

            height:
                260px;

            opacity:
                .94;

            transform:
                rotate(-1deg);

            transition:
                transform .8s cubic-bezier(.2, .7, .2, 1),
                opacity .5s ease;
        }

        .work-card:hover .market-visual {

            transform:
                translate(-6px, 4px) rotate(-2deg);

            opacity:
                1;
        }


        /* =========================================================
   MARKET GLOW
========================================================= */

        .market-glow {

            position:
                absolute;

            width:
                430px;

            height:
                220px;

            top:
                20px;

            left:
                10px;

            background:
                radial-gradient(ellipse,
                    rgba(14, 203, 129, .09),
                    transparent 67%);

            filter:
                blur(25px);
        }


        /* =========================================================
   MARKET TERMINAL
========================================================= */

        .market-terminal {

            position:
                absolute;

            top:
                48px;

            right:
                28px;

            width:
                135px;

            padding:
                12px;

            background:
                rgba(24, 26, 32, .9);

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

            box-shadow:
                0 15px 45px rgba(0, 0, 0, .25);

            backdrop-filter:
                blur(12px);
        }

        .terminal-code {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            letter-spacing:
                .9px;
        }

        .terminal-name {

            margin-top:
                5px;

            color:
                var(--text-main);

            font-size:
                11px;

            font-weight:
                600;
        }

        .terminal-price {

            margin-top:
                7px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                12px;

            font-weight:
                600;
        }

        .terminal-change {

            margin-top:
                3px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                6px;
        }


        /* =========================================================
   CANDLESTICK CHART
========================================================= */

        .market-chart {

            position:
                absolute;

            left:
                0;

            top:
                35px;

            width:
                100%;

            height:
                220px;

            overflow:
                visible;
        }


        /* chart grid */

        .chart-grid {

            stroke:
                rgba(112, 122, 138, .16);

            stroke-width:
                1;

            vector-effect:
                non-scaling-stroke;

            stroke-dasharray:
                2 5;
        }


        /* baseline */

        .chart-axis {

            stroke:
                rgba(112, 122, 138, .22);

            stroke-width:
                1;
        }


        /* bullish candles */

        .candle-up {

            fill:
                var(--color-up);

            stroke:
                var(--color-up);

            filter:
                drop-shadow(0 0 5px rgba(14, 203, 129, .16));
        }


        /* bearish candles */

        .candle-down {

            fill:
                var(--color-down);

            stroke:
                var(--color-down);

            filter:
                drop-shadow(0 0 5px rgba(246, 70, 93, .12));
        }


        /* trend */

        .chart-line {

            fill:
                none;

            stroke:
                var(--accent-primary);

            stroke-width:
                1.25;

            opacity:
                .8;

            vector-effect:
                non-scaling-stroke;

            stroke-linecap:
                round;

            stroke-linejoin:
                round;

            stroke-dasharray:
                900;

            stroke-dashoffset:
                900;

            animation:
                chartDraw 3s ease forwards;
        }

        @keyframes chartDraw {

            to {
                stroke-dashoffset:
                    0;
            }
        }


        /* glowing current point */

        .chart-node {

            fill:
                var(--accent-primary);

            filter:
                drop-shadow(0 0 7px rgba(252, 213, 53, .65));

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

        @keyframes nodePulse {

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

            50% {
                opacity: 1;
            }
        }


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

        .chart-label {

            fill:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            letter-spacing:
                .5px;
        }


        /* =========================================================
   =========================================================
   VISUAL 02 — PORTFOLIO DASHBOARD
   =========================================================
   ========================================================= */

        .portfolio-visual {

            position:
                absolute;

            top:
                8px;

            right:
                10px;

            width:
                67%;

            height:
                270px;

            transition:
                transform .9s cubic-bezier(.2, .7, .2, 1);
        }

        .work-card:hover .portfolio-visual {

            transform:
                translate(-5px, 4px) rotate(-1deg);
        }


        /* =========================================================
   PORTFOLIO GLOW
========================================================= */

        .portfolio-glow {

            position:
                absolute;

            width:
                340px;

            height:
                260px;

            left:
                0;

            top:
                0;

            background:
                radial-gradient(ellipse,
                    rgba(252, 213, 53, .055),
                    transparent 68%);

            filter:
                blur(20px);
        }


        /* =========================================================
   PORTFOLIO DASHBOARD
========================================================= */

        .portfolio-dashboard {

            position:
                absolute;

            top:
                28px;

            left:
                15px;

            width:
                290px;

            min-height:
                185px;

            padding:
                14px;

            background:
                rgba(24, 26, 32, .94);

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

            box-shadow:
                0 25px 70px rgba(0, 0, 0, .28);

            backdrop-filter:
                blur(12px);
        }


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

        .dashboard-header {

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                center;
        }

        .dashboard-label {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                6px;

            letter-spacing:
                .8px;
        }

        .dashboard-status {

            display:
                flex;

            align-items:
                center;

            gap:
                5px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                5px;
        }

        .dashboard-status::before {

            content:
                "";

            width:
                4px;

            height:
                4px;

            border-radius:
                50%;

            background:
                var(--color-up);

            box-shadow:
                0 0 8px rgba(14, 203, 129, .7);
        }


        /* =========================================================
   DASHBOARD VALUE
========================================================= */

        .dashboard-value {

            margin-top:
                13px;

            color:
                var(--text-main);

            font-family:
                var(--font-tabular);

            font-size:
                21px;

            font-weight:
                500;

            letter-spacing:
                -1px;
        }

        .dashboard-return {

            margin-top:
                4px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                7px;

            font-weight:
                500;
        }


        /* =========================================================
   ALLOCATION BARS
========================================================= */

        .allocation-list {

            margin-top:
                16px;

            display:
                grid;

            gap:
                8px;
        }

        .allocation-row {

            display:
                grid;

            grid-template-columns:
                58px 1fr 35px;

            align-items:
                center;

            gap:
                8px;
        }

        .allocation-name {

            color:
                #9ca3ae;

            font-family:
                var(--font-tabular);

            font-size:
                5px;
        }

        .allocation-track {

            height:
                4px;

            overflow:
                hidden;

            background:
                #2b3139;
        }

        .allocation-fill {

            height:
                100%;

            background:
                var(--accent-primary);

            box-shadow:
                0 0 9px rgba(252, 213, 53, .15);
        }

        .allocation-fill.green {

            background:
                var(--color-up);
        }

        .allocation-fill.red {

            background:
                var(--color-down);
        }

        .allocation-percent {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                5px;

            text-align:
                right;
        }


        /* =========================================================
   PORTFOLIO DONUT
========================================================= */

        .portfolio-donut {

            position:
                absolute;

            right:
                -34px;

            top:
                73px;

            width:
                108px;

            height:
                108px;

            border-radius:
                50%;

            background:
                conic-gradient(var(--accent-primary) 0deg 125deg,
                    var(--color-up) 125deg 235deg,
                    #586170 235deg 292deg,
                    var(--color-down) 292deg 325deg,
                    #2b3139 325deg 360deg);

            box-shadow:
                0 0 35px rgba(252, 213, 53, .06);

            animation:
                donutFloat 6s ease-in-out infinite;
        }

        .portfolio-donut::after {

            content:
                "";

            position:
                absolute;

            inset:
                14px;

            border-radius:
                50%;

            background:
                var(--bg-surface);

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

        @keyframes donutFloat {

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

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


        /* =========================================================
   FLOATING DATA CHIP
========================================================= */

        .data-chip {

            position:
                absolute;

            right:
                25px;

            top:
                38px;

            padding:
                8px 10px;

            background:
                rgba(30, 35, 41, .94);

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

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

            backdrop-filter:
                blur(10px);
        }

        .data-chip-label {

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                5px;

            letter-spacing:
                .7px;
        }

        .data-chip-value {

            margin-top:
                4px;

            color:
                var(--color-up);

            font-family:
                var(--font-tabular);

            font-size:
                8px;

            font-weight:
                600;
        }


        /* =========================================================
   MINI TICKER
========================================================= */

        .mini-ticker {

            position:
                absolute;

            bottom:
                8px;

            left:
                0;

            display:
                flex;

            gap:
                14px;

            color:
                var(--text-muted);

            font-family:
                var(--font-tabular);

            font-size:
                5px;

            letter-spacing:
                .4px;
        }

        .mini-ticker .up {
            color:
                var(--color-up);
        }

        .mini-ticker .down {
            color:
                var(--color-down);
        }


        /* =========================================================
   RESPONSIVE — TABLET
========================================================= */

        @media (max-width: 900px) {

            .section-header {

                grid-template-columns:
                    1fr;

                padding-bottom:
                    38px;
            }

            .header-description {

                margin-top:
                    28px;

                max-width:
                    360px;
            }

            .section-title {

                font-size:
                    clamp(50px,
                        9vw,
                        76px);
            }

            .work-grid {

                grid-template-columns:
                    1fr;
            }

            .work-card {

                min-height:
                    390px;
            }

            .market-visual {

                width:
                    64%;
            }

            .portfolio-visual {

                width:
                    62%;
            }
        }


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

        @media (max-width: 600px) {

            .work-section {

                padding:
                    11px 9px 12px;
            }

            .section-header {

                padding:
                    0 8px 34px;
            }

            .eyebrow {

                font-size:
                    9px;

                letter-spacing:
                    1.3px;
            }

            .section-title {

                margin-top:
                    22px;

                font-size:
                    clamp(47px,
                        14vw,
                        66px);

                line-height:
                    .88;

                letter-spacing:
                    -3px;
            }

            .section-title .accent {

                letter-spacing:
                    -3.3px;
            }

            .header-description {

                margin-top:
                    26px;

                max-width:
                    290px;

                font-size:
                    10px;
            }

            .work-grid {

                gap:
                    10px;
            }

            .work-card {

                min-height:
                    410px;
            }

            .card-number {

                top:
                    24px;

                left:
                    20px;
            }

            .card-content {

                left:
                    20px;

                right:
                    20px;

                bottom:
                    23px;
            }

            .card-title {

                font-size:
                    31px;

                letter-spacing:
                    -1.5px;
            }

            .card-title .italic {

                letter-spacing:
                    -1.5px;
            }

            .card-description {

                max-width:
                    285px;

                font-size:
                    10px;
            }

            .market-visual {

                top:
                    10px;

                right:
                    -110px;

                width:
                    115%;

                opacity:
                    .85;
            }

            .portfolio-visual {

                top:
                    0;

                right:
                    -100px;

                width:
                    115%;

                opacity:
                    .85;
            }

            .market-terminal {

                right:
                    85px;
            }

            .portfolio-dashboard {

                left:
                    0;

                width:
                    280px;
            }

            .portfolio-donut {

                right:
                    -50px;
            }

            .data-chip {

                right:
                    70px;
            }
        }


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

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

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

                animation:
                    none !important;

                transition:
                    none !important;
            }
        }



        /* ===== BELVARN CONTACT INTEGRATION ===== */
        .bv-contact {
            min-height: 640px;
            padding: 25px 4.5vw 45px;
            position: relative;
            overflow: hidden;
            background: var(--bg-canvas);
            color: var(--text-main)
        }

        .bv-contact:before,
        .bv-contact:after {
            content: "";
            position: absolute;
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: 50%
        }

        .bv-contact:before {
            width: 760px;
            height: 760px;
            right: -180px;
            top: -200px
        }

        .bv-contact:after {
            width: 520px;
            height: 520px;
            right: 200px;
            top: -90px
        }

        .bv-contact-wrap {
            max-width: 1280px;
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 470px;
            gap: 90px;
            align-items: center;
            position: relative;
            z-index: 2
        }

        .bv-contact .eyebrow {
            font-family: var(--font-tabular);
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 700;
            margin-bottom: 28px
        }

        .bv-contact h2 {
            font-size: clamp(55px, 6vw, 82px);
            line-height: .9;
            letter-spacing: -4px;
            font-weight: 900;
            color: var(--text-main)
        }

        .bv-contact h2 span {
            display: block;
            color: var(--color-up);
            font-style: italic
        }

        .bv-contact .description {
            margin-top: 30px;
            color: var(--text-muted);
            font-size: 13px;
            line-height: 1.8
        }

        .bv-contact .confidential {
            margin-top: 38px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-tabular);
            color: var(--text-muted);
            font-size: 10px;
            letter-spacing: 1.5px
        }

        .bv-contact .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-up);
            box-shadow: 0 0 12px rgba(14, 203, 129, .5)
        }

        .bv-form {
            background: rgba(24, 26, 32, .65);
            border: 1px solid var(--border-hairline);
            padding: 30px;
            backdrop-filter: blur(20px)
        }

        .bv-field {
            margin-bottom: 25px
        }

        .bv-field label {
            display: block;
            font-family: var(--font-tabular);
            color: var(--text-muted);
            font-size: 9px;
            letter-spacing: 1.8px;
            margin-bottom: 16px
        }

        .bv-field input,
        .bv-field textarea {
            width: 100%;
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--border-hairline);
            padding: 0 0 14px;
            color: var(--text-main);
            outline: none;
            font-family: var(--font-ui)
        }

        .bv-field textarea {
            height: 70px;
            resize: none
        }

        .bv-form button {
            width: 100%;
            height: 43px;
            border: 0;
            background: var(--accent-primary);
            color: var(--bg-canvas);
            font-family: var(--font-tabular);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.5px;
            cursor: pointer
        }

        .bv-form button:hover {
            background: var(--accent-hover)
        }

        .bv-note {
            margin-top: 16px;
            color: var(--text-muted);
            font-size: 9px
        }

        .bv-footer {
            background: #080a0d;
            border-top: 1px solid var(--border-hairline);
            padding: 55px 7vw;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 50px
        }

        .bv-footer h3 {
            color: var(--text-muted);
            font-family: var(--font-tabular);
            font-size: 9px;
            letter-spacing: 2px;
            margin-bottom: 20px
        }

        .bv-footer p,
        .bv-footer a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 12px;
            line-height: 2
        }

        .bv-logo {
            font-family: var(--font-tabular);
            font-size: 16px;
            letter-spacing: 4px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 35px
        }

        @media(max-width:900px) {

            .bv-contact-wrap,
            .bv-footer {
                grid-template-columns: 1fr
            }
        }
        .reviews-section {
            max-width: 1200px;
            margin: 100px auto;
            padding: 0 24px;
        }

        .reviews-header {
            margin-bottom: 40px;
        }
        

        .reviews-eyebrow {
            font-size: 8px;
            letter-spacing: .16em;
            color: var(--accent-primary, #d4af37);
            margin-bottom: 14px;
        }

        .reviews-title {
            font-family: var(--font-ui, inherit);
            font-size: 42px;
            line-height: 1.05;
            color: var(--text-main, #fff);
            margin: 0;
        }

        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .review-card {
            background: rgba(255, 255, 255, .035);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 18px;
            padding: 22px;
            min-height: 170px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .review-stars {
            color: #d4af37;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .review-text {
            font-size: 14px;
            line-height: 1.55;
            color: var(--text-secondary, #c7c7c7);
            margin: 0;
        }

        .review-name {
            margin-top: 18px;
            font-size: 13px;
            color: var(--text-main, #fff);
            font-weight: 600;
        }

        /* Chrome, Safari, Edge, Opera */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        @media(max-width:900px) {
            .reviews-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media(max-width:600px) {
            .reviews-grid {
                grid-template-columns: 1fr
            }

            .reviews-title {
                font-size: 32px;
            }
        }