/* =========================================================
       ROOT COLORS & GLOBAL SPACING
    ========================================================= */
    :root {
        --primary: #00e5a0;
        --primary-dark: #00a878;
        --primary-light: #70ffd0;
        --secondary: #00c8ff;

        --gold: #c99a3b;
        --gold-light: #fff0b0;
        --gold-dark: #8a6a28;

        --dark: #031018;
        --dark-soft: #061a22;
        --glass: rgba(3, 20, 28, 0.68);
        --glass-light: rgba(8, 38, 46, 0.58);

        --text: #f2fff9;
        --text-muted: #b3d0d0;
        --border: rgba(74, 255, 201, 0.2);

        /* Common section spacing */
        --section-padding: 40px 0;

        /* Trading section spacing */
        --trading-section-padding: var(--section-padding);

        --bs-primary: #00e5a0;
        --bs-primary-rgb: 0, 229, 160;
        --bs-body-bg: #031018;
        --bs-body-color: #f2fff9;
    }

    /* =========================================================
       GLOBAL
    ========================================================= */
    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 85px;
    }

    body {
        margin: 0;
        min-height: 100vh;
        font-family: 'Outfit', sans-serif;
        color: var(--text);
        background-color: var(--dark);
        background-image:
            linear-gradient(
                90deg,
                rgba(2, 12, 22, 0.48),
                rgba(0, 15, 22, 0.18),
                rgba(1, 15, 23, 0.42)
            ),
            url("assets/img/bg.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
    }

    a {
        text-decoration: none;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    .page-wrapper {
        position: relative;
        isolation: isolate;
    }

    .page-wrapper::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(2, 12, 20, 0.18),
            rgba(2, 12, 20, 0.08) 50%,
            rgba(2, 12, 20, 0.45)
        );
    }

    .section-padding {
        padding: var(--section-padding);
    }

    .section-heading {
        font-size: clamp(32px, 4vw, 52px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -1.5px;
        color: var(--text);
    }

    .section-heading span {
        background: linear-gradient(
            100deg,
            var(--gold-light),
            var(--gold),
            #fff5cb
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .section-description {
        max-width: 650px;
        margin: 15px auto 0;
        color: var(--text-muted);
        font-size: 15px;
        line-height: 1.9;
        font-weight: 300;
    }

    .section-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        border: 1px solid rgba(201, 154, 59, 0.35);
        border-radius: 50px;
        background: rgba(12, 27, 30, 0.65);
        color: var(--gold-light);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
    }

    .section-label i {
        color: var(--gold);
    }

    /* =========================================================
       NAVIGATION
    ========================================================= */
    .navbar {
        position: sticky;
        top: 0;
        min-height: 76px;
        padding: 12px 0;
        background: rgba(1, 12, 19, 0.76);
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 1000;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text) !important;
        font-size: 25px;
        font-weight: 800;
        letter-spacing: 5px;
    }

    .brand-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 35px;
        filter: drop-shadow(0 0 10px rgba(0, 229, 160, 0.5));
    }

    .navbar-nav {
        gap: 7px;
    }

    .navbar .nav-link {
        position: relative;
        padding: 10px 13px !important;
        color: #d5eeee;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: var(--primary-light);
    }

    .navbar .nav-link::after {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        left: 13px;
        bottom: 2px;
        background: var(--primary);
        box-shadow: 0 0 10px var(--primary);
        transition: width 0.3s ease;
    }

    .navbar .nav-link:hover::after,
    .navbar .nav-link.active::after {
        width: calc(100% - 26px);
    }

    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn-vortex,
    .btn-outline-vortex {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 9px;
        padding: 12px 23px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    .btn-vortex {
        color: #001b16;
        background: linear-gradient(120deg, #00e5a0, #b2ffda);
        border: 1px solid rgba(161, 255, 219, 0.8);
        box-shadow: 0 0 20px rgba(0, 229, 160, 0.15);
    }

    .btn-vortex:hover {
        color: #001b16;
        transform: translateY(-3px);
        box-shadow: 0 0 28px rgba(0, 229, 160, 0.42);
    }

    .btn-outline-vortex {
        color: var(--primary-light);
        background: rgba(1, 19, 27, 0.5);
        border: 1px solid var(--primary);
    }

    .btn-outline-vortex:hover {
        color: #001b16;
        background: var(--primary);
        box-shadow: 0 0 22px rgba(0, 229, 160, 0.35);
        transform: translateY(-3px);
    }

    .navbar-toggler {
        border: 1px solid var(--border);
        color: var(--primary);
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.15);
    }

    .navbar-toggler-icon {
        filter: invert(1);
    }

    /* =========================================================
       HERO SECTION
    ========================================================= */
    .hero-section {
        position: relative;
        min-height: calc(100vh - 76px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 45px 0 35px;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    .hero-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 9px 16px;
        border: 1px solid rgba(0, 229, 160, 0.32);
        border-radius: 30px;
        background: rgba(0, 26, 31, 0.55);
        color: var(--primary-light);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
    }

    .live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--primary);
        box-shadow: 0 0 12px var(--primary);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.5);
        }

        50% {
            opacity: 0.7;
            box-shadow: 0 0 0 7px rgba(0, 229, 160, 0);
        }
    }

    .hero-title {
        max-width: 1000px;
        margin: 24px auto 18px;
        color: #f3fff9;
        font-size: clamp(45px, 6.5vw, 88px);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -3px;
    }

    .hero-title .highlight {
        background: linear-gradient(
            100deg,
            #00e5a0 5%,
            #b5ffe0 50%,
            #00c8ff 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 0 20px rgba(0, 229, 160, 0.16));
    }

    .hero-description {
        max-width: 660px;
        margin: 0 auto;
        color: #c3dada;
        font-size: clamp(14px, 1.3vw, 17px);
        line-height: 1.9;
        font-weight: 300;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
    }

    .hero-buttons .btn {
        min-width: 165px;
        min-height: 50px;
    }

    .hero-note {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        margin-top: 28px;
        color: #c2dddd;
        font-size: 12px;
    }

    .hero-note span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .hero-note i {
        color: var(--primary);
    }

    /* =========================================================
       HERO MARKET STATS
    ========================================================= */
    .market-stats {
        position: relative;
        z-index: 2;
        padding: 15px 0 35px;
    }

    .stats-panel {
        height: 100%;
        min-height: 90px;
        padding: 15px 17px;
        display: flex;
        align-items: center;
        gap: 13px;
        background: rgba(2, 20, 27, 0.75);
        border: 1px solid var(--border);
        border-radius: 10px;
        backdrop-filter: blur(16px);
        transition: all 0.3s ease;
    }

    .stats-panel:hover {
        border-color: rgba(0, 229, 160, 0.7);
        background: rgba(4, 35, 39, 0.86);
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 229, 160, 0.1);
    }

    .stats-icon {
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--primary);
        background: rgba(0, 229, 160, 0.11);
        font-size: 20px;
    }

    .stats-label {
        color: var(--text-muted);
        font-size: 11px;
        letter-spacing: 0.6px;
    }

    .stats-value {
        color: #effff8;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
    }

    .stats-change {
        font-size: 11px;
        color: var(--primary);
    }

    /* =========================================================
       ABOUT SECTION
    ========================================================= */
    .about-section {
        position: relative;
        padding: var(--section-padding);
        overflow: hidden;
        background: rgba(1, 13, 20, 0.28);
        border-top: 1px solid rgba(0, 229, 160, 0.12);
        border-bottom: 1px solid rgba(0, 229, 160, 0.12);
    }

    .about-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: 10%;
        left: -250px;
        border-radius: 50%;
        background: rgba(0, 229, 160, 0.08);
        filter: blur(100px);
        pointer-events: none;
    }

    .about-section::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        bottom: -200px;
        right: -200px;
        border-radius: 50%;
        background: rgba(0, 200, 255, 0.08);
        filter: blur(100px);
        pointer-events: none;
    }

    .about-content {
        position: relative;
        z-index: 2;
    }

    .about-description {
        max-width: 720px;
        margin: 18px auto 0;
        color: #c4dada;
        font-size: 15px;
        line-height: 1.95;
        font-weight: 300;
    }

    .about-highlight {
        color: var(--gold-light);
        font-weight: 500;
    }

    /* =========================================================
       ANIMATED GOLD GRADIENT BORDER
    ========================================================= */
    @property --border-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }

    .card-animated-border {
        position: relative;
        isolation: isolate;
        border: 1px solid transparent !important;
        background: rgba(3, 18, 25, 0.76);
        background-clip: padding-box;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 16px;
        overflow: hidden;
        transition:
            transform 0.4s ease,
            box-shadow 0.4s ease,
            background 0.4s ease;
    }

    .card-animated-border::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(
            from var(--border-angle),
            transparent 0deg,
            #8a6a28 50deg,
            #c99a3b 100deg,
            #fff0b0 150deg,
            #e4be63 190deg,
            #c99a3b 240deg,
            transparent 300deg,
            transparent 360deg
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 3;
        animation: goldBorderRotate 4s linear infinite;
    }

    @keyframes goldBorderRotate {
        to {
            --border-angle: 360deg;
        }
    }

    .card-animated-border:hover {
        transform: translateY(-7px);
        box-shadow:
            0 0 18px rgba(201, 154, 59, 0.15),
            0 20px 45px rgba(0, 0, 0, 0.25);
        background: rgba(5, 28, 33, 0.88);
    }

    /* =========================================================
       ABOUT CARDS
    ========================================================= */
    .about-cards {
        margin-top: 55px;
    }

    .about-card {
        position: relative;
        height: 100%;
        min-height: 260px;
        padding: 30px 27px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .about-card::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        right: -55px;
        top: -55px;
        border-radius: 50%;
        background: rgba(201, 154, 59, 0.08);
        filter: blur(35px);
        pointer-events: none;
    }

    .about-card-icon {
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(201, 154, 59, 0.3);
        border-radius: 14px;
        background: linear-gradient(
            145deg,
            rgba(201, 154, 59, 0.17),
            rgba(201, 154, 59, 0.04)
        );
        color: var(--gold-light);
        font-size: 25px;
        box-shadow: 0 0 25px rgba(201, 154, 59, 0.08);
        transition: all 0.4s ease;
    }

    .about-card:hover .about-card-icon {
        transform: translateY(-4px) rotate(-5deg);
        background: rgba(201, 154, 59, 0.22);
        box-shadow: 0 0 25px rgba(201, 154, 59, 0.2);
    }

    .about-card h3 {
        position: relative;
        z-index: 2;
        margin: 23px 0 12px;
        color: var(--text);
        font-size: 20px;
        font-weight: 700;
    }

    .about-card p {
        position: relative;
        z-index: 2;
        margin: 0;
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.85;
        font-weight: 300;
    }

    .about-card .card-number {
        position: absolute;
        right: 22px;
        bottom: 12px;
        color: rgba(201, 154, 59, 0.12);
        font-size: 58px;
        font-weight: 800;
        line-height: 1;
        pointer-events: none;
    }

    /* =========================================================
       ABOUT BOTTOM FEATURE STRIP
    ========================================================= */
    .about-bottom {
        margin-top: 45px;
        padding: 23px 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .about-bottom-item {
        display: flex;
        align-items: center;
        gap: 11px;
        color: #d5e8e5;
        font-size: 13px;
        font-weight: 500;
    }

    .about-bottom-item i {
        color: var(--gold-light);
        font-size: 20px;
    }

    /* =========================================================
       CTA
    ========================================================= */
    .about-cta {
        margin-top: 45px;
    }

    .about-cta p {
        color: var(--text-muted);
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* =========================================================
       FOOTER
    ========================================================= */
    .bottom-strip {
        position: relative;
        z-index: 2;
        padding: 17px 0;
        border-top: 1px solid rgba(0, 229, 160, 0.18);
        background: rgba(1, 12, 19, 0.76);
        backdrop-filter: blur(16px);
    }

    .bottom-strip .strip-item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 9px;
        color: #c6dddd;
        font-size: 12px;
    }

    .bottom-strip i {
        color: var(--primary);
        font-size: 17px;
    }

    .footer-copy {
        padding: 15px 0;
        color: rgba(195, 218, 218, 0.65);
        text-align: center;
        font-size: 11px;
        background: rgba(1, 12, 19, 0.86);
    }

    /* =========================================================
       CURSOR SPARKLE
    ========================================================= */
    .cursor-sparkle {
        position: fixed;
        width: 8px;
        height: 8px;
        z-index: 99999;
        pointer-events: none;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: var(--gold-light);
        box-shadow:
            0 0 6px var(--gold-light),
            0 0 14px var(--gold),
            0 0 25px rgba(201, 154, 59, 0.7);
        animation: sparkleFade 700ms ease-out forwards;
    }

    .cursor-sparkle::before,
    .cursor-sparkle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: var(--gold-light);
        transform: translate(-50%, -50%);
        border-radius: 5px;
    }

    .cursor-sparkle::before {
        width: 2px;
        height: 17px;
    }

    .cursor-sparkle::after {
        width: 17px;
        height: 2px;
    }

    @keyframes sparkleFade {
        0% {
            opacity: 0;
            scale: 0.2;
        }

        20% {
            opacity: 1;
            scale: 1;
        }

        100% {
            opacity: 0;
            scale: 0.1;
        }
    }

    /* =========================================================
       TRADING SECTION ROOT COLORS
    ========================================================= */
    :root {
        --trade-bg: rgba(3, 15, 24, .88);
        --trade-panel: rgba(4, 24, 31, .88);
        --trade-card: rgba(7, 31, 37, .78);
        --trade-border: rgba(0, 229, 160, .19);
        --trade-gold: #d4af37;
        --trade-gold-light: #ffe6a0;
        --trade-green: #00e5a0;
        --trade-cyan: #00c8ff;
        --trade-red: #ff646e;
        --trade-text: #f2fff9;
        --trade-muted: #9eb8b9;
    }

    /* =========================================================
       TRADING SECTION
    ========================================================= */
    .vortex-trading-section {
        position: relative;
        padding: var(--trading-section-padding);
        color: var(--trade-text);
        isolation: isolate;
    }

    .vortex-trading-section .trading-heading {
        position: relative;
        z-index: 1;
    }

    .trading-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        border: 1px solid rgba(212, 175, 55, .35);
        border-radius: 50px;
        color: var(--trade-gold-light);
        background: rgba(4, 20, 27, .7);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .trading-heading h2 {
        margin: 17px 0 8px;
        font-size: clamp(30px, 4vw, 48px);
        font-weight: 800;
        letter-spacing: -1.5px;
    }

    .trading-heading h2 span {
        background: linear-gradient(
            110deg,
            #d4af37,
            #fff0ad,
            #00e5a0
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .trading-heading p {
        color: #bdd0d1;
        font-size: 14px;
    }

    /* =========================================================
       MAIN GLASS DASHBOARD
    ========================================================= */
    .trading-dashboard {
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: 17px;
        background: rgba(2, 13, 23, .84);
        border: 1px solid rgba(212, 175, 55, .2);
        box-shadow: 0 25px 80px rgba(0, 0, 0, .38);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .trading-dashboard::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(0, 229, 160, .055),
                transparent 40%
            );
        z-index: 0;
    }

    .trading-dashboard > .row {
        position: relative;
        z-index: 1;
    }

    .chart-column {
        min-width: 0;
    }

    .chart-container {
        height: 100%;
        min-height: 480px;
        padding: 20px 20px 13px;
        display: flex;
        flex-direction: column;
    }

    /* =========================================================
       CHART HEADER
    ========================================================= */
    .chart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 20px;
    }

    .chart-pair {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .pair-icon {
        width: 39px;
        height: 39px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: var(--trade-gold-light);
        background: linear-gradient(
            145deg,
            rgba(212, 175, 55, .24),
            rgba(0, 229, 160, .11)
        );
        border: 1px solid rgba(212, 175, 55, .3);
        font-size: 20px;
    }

    .chart-pair h5 {
        margin: 0;
        color: var(--trade-text);
        font-size: 16px;
        font-weight: 700;
    }

    .pair-subtitle {
        display: block;
        margin-top: 2px;
        color: var(--trade-muted);
        font-size: 11px;
    }

    .chart-price {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .chart-price strong {
        font-size: 23px;
        font-weight: 700;
        letter-spacing: -.5px;
    }

    .price-change {
        padding: 5px 8px;
        border-radius: 6px;
        background: rgba(0, 229, 160, .1);
        color: var(--trade-green);
        font-size: 11px;
        font-weight: 600;
    }

    /* =========================================================
       CHART TOOLBAR
    ========================================================= */
    .chart-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }

    .timeframes,
    .chart-tools {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .toolbar-label {
        color: var(--trade-muted);
        font-size: 11px;
        margin-right: 7px;
    }

    .time-btn,
    .chart-tool {
        border: 1px solid transparent;
        color: #a7c0c0;
        background: transparent;
        transition: .25s ease;
    }

    .time-btn {
        padding: 7px 11px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 600;
    }

    .time-btn:hover,
    .time-btn.active {
        color: var(--trade-gold-light);
        border-color: rgba(212, 175, 55, .3);
        background: rgba(212, 175, 55, .12);
    }

    .chart-tool {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .045);
        border-color: rgba(255, 255, 255, .07);
    }

    .chart-tool:hover {
        color: var(--trade-gold-light);
        border-color: var(--trade-gold);
        background: rgba(212, 175, 55, .1);
    }

    /* =========================================================
       CHART CANVAS
    ========================================================= */
    .chart-main {
        flex: 1;
        min-height: 300px;
        display: flex;
        gap: 8px;
        border-top: 1px solid rgba(255, 255, 255, .035);
        border-bottom: 1px solid rgba(255, 255, 255, .035);
    }

    .chart-canvas-wrap {
        position: relative;
        flex: 1;
        min-width: 0;
        min-height: 300px;
        overflow: hidden;
    }

    #vortexChart {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 300px;
        cursor: crosshair;
    }

    .chart-axis {
        width: 56px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 9px 0 25px;
        color: #a9c0c3;
        font-size: 10px;
        text-align: right;
    }

    .chart-tooltip {
        display: none;
        position: absolute;
        z-index: 5;
        padding: 7px 10px;
        border: 1px solid rgba(212, 175, 55, .4);
        border-radius: 7px;
        color: var(--trade-text);
        background: rgba(2, 15, 23, .95);
        font-size: 11px;
        pointer-events: none;
        white-space: nowrap;
    }

    .chart-footer {
        display: flex;
        justify-content: space-between;
        padding: 10px 62px 0 5px;
        color: #8fa9ab;
        font-size: 10px;
    }

    .chart-footer i {
        color: var(--trade-gold);
        margin-right: 3px;
    }

    .chart-legend {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 12px;
        font-size: 10px;
        color: #a5babb;
    }

    .legend-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 4px;
        border-radius: 50%;
    }

    .legend-dot.bullish {
        background: var(--trade-green);
    }

    .legend-dot.bearish {
        background: var(--trade-red);
    }

    .chart-disclaimer {
        margin-left: auto;
        color: #7e999a;
    }

    /* =========================================================
       TRADE PANEL
    ========================================================= */
    .trade-column {
        border-left: 1px solid rgba(212, 175, 55, .16);
        background: rgba(2, 16, 24, .5);
    }

    .trade-panel {
        height: 100%;
        min-height: 480px;
        padding: 21px 18px;
        display: flex;
        flex-direction: column;
    }

    .trade-panel-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .panel-eyebrow {
        color: var(--trade-gold);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.6px;
    }

    .trade-panel-heading h5 {
        margin: 4px 0 0;
        color: var(--trade-text);
        font-size: 17px;
        font-weight: 700;
    }

    .panel-status {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--trade-muted);
        font-size: 10px;
    }

    .panel-status .live-dot {
        width: 6px;
        height: 6px;
    }

    /* =========================================================
       LONG / SHORT
    ========================================================= */
    .trade-direction {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        padding: 5px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .07);
    }

    .direction-btn {
        padding: 10px 8px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: #a9bfc0;
        background: transparent;
        font-size: 12px;
        font-weight: 700;
        transition: .25s ease;
    }

    .direction-btn i {
        margin-right: 5px;
    }

    .direction-btn.long.active {
        color: #001b15;
        background: linear-gradient(120deg, #00d99b, #b2ffda);
        box-shadow: 0 0 20px rgba(0, 229, 160, .15);
    }

    .direction-btn.short.active {
        color: #fff;
        background: linear-gradient(120deg, #c74751, #ff7378);
        box-shadow: 0 0 20px rgba(255, 100, 110, .14);
    }

    /* =========================================================
       ORDER TABS
    ========================================================= */
    .order-tabs {
        display: flex;
        gap: 20px;
        margin: 17px 0 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .order-tab {
        position: relative;
        padding: 0 1px 10px;
        border: 0;
        color: #91aaab;
        background: transparent;
        font-size: 11px;
        font-weight: 500;
    }

    .order-tab.active {
        color: var(--trade-gold-light);
    }

    .order-tab.active::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--trade-gold), var(--trade-green));
    }

    /* =========================================================
       INPUTS
    ========================================================= */
    .trade-input-box {
        padding: 12px 13px;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 8px;
        background: rgba(255, 255, 255, .055);
    }

    .input-top,
    .input-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .input-top {
        margin-bottom: 8px;
    }

    .input-top label {
        color: #a9bdbf;
        font-size: 10px;
    }

    .input-top span {
        color: #9bb0b1;
        font-size: 9px;
    }

    .input-top b {
        color: var(--trade-gold-light);
    }

    .input-bottom input {
        width: 60%;
        min-width: 0;
        padding: 0;
        outline: 0;
        border: 0;
        color: var(--trade-text);
        background: transparent;
        font-size: 19px;
        font-weight: 700;
    }

    .input-bottom input::-webkit-inner-spin-button,
    .input-bottom input::-webkit-outer-spin-button {
        appearance: none;
    }

    .currency-label {
        color: #e0e9e8;
        font-size: 11px;
        font-weight: 600;
    }

    .currency-label i {
        margin-left: 5px;
        color: var(--trade-gold);
        font-size: 9px;
    }

    .swap-indicator {
        position: relative;
        z-index: 2;
        width: 32px;
        height: 32px;
        margin: -1px auto;
        display: grid;
        place-items: center;
        border: 1px solid rgba(212, 175, 55, .38);
        border-radius: 8px;
        color: #001a15;
        background: linear-gradient(130deg, #d4af37, #f7e4a1);
        box-shadow: 0 0 16px rgba(212, 175, 55, .2);
    }

    .receive-box {
        margin-top: 0;
    }

    .input-bottom strong {
        color: var(--trade-text);
        font-size: 18px;
    }

    /* =========================================================
       LEVERAGE
    ========================================================= */
    .leverage-section {
        margin-top: 19px;
    }

    .leverage-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .leverage-heading label {
        color: #b4c6c6;
        font-size: 11px;
    }

    .leverage-heading span {
        color: var(--trade-gold-light);
        font-size: 12px;
        font-weight: 700;
    }

    #leverageSlider {
        width: 100%;
        height: 4px;
        margin: 5px 0;
        appearance: none;
        border-radius: 20px;
        outline: none;
        background: linear-gradient(
            90deg,
            var(--trade-gold) 0%,
            var(--trade-gold) 5%,
            rgba(255,255,255,.14) 5%
        );
        cursor: pointer;
    }

    #leverageSlider::-webkit-slider-thumb {
        width: 13px;
        height: 13px;
        appearance: none;
        border: 2px solid #f8e5a2;
        border-radius: 50%;
        background: #d4af37;
        box-shadow: 0 0 10px rgba(212, 175, 55, .6);
    }

    #leverageSlider::-moz-range-thumb {
        width: 10px;
        height: 10px;
        border: 2px solid #f8e5a2;
        border-radius: 50%;
        background: #d4af37;
        box-shadow: 0 0 10px rgba(212, 175, 55, .6);
    }

    .leverage-markers {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        color: #789091;
        font-size: 9px;
    }

    /* =========================================================
       ORDER DETAILS
    ========================================================= */
    .order-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .order-details div {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .order-details span {
        color: #91a8a9;
        font-size: 10px;
    }

    .order-details strong {
        color: #dce9e6;
        font-size: 10px;
        font-weight: 600;
    }

    /* =========================================================
       ORDER BUTTON
    ========================================================= */
    .place-order-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin-top: auto;
        padding: 13px 15px;
        border: 1px solid rgba(255, 231, 160, .7);
        border-radius: 8px;
        color: #061a13;
        background: linear-gradient(110deg, #d4af37, #f5e6a5, #00e5a0);
        font-size: 12px;
        font-weight: 800;
        transition: .3s ease;
    }

    .place-order-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 24px rgba(212, 175, 55, .25);
    }

    .place-order-btn i {
        font-size: 15px;
    }

    .trade-note {
        margin: 12px 0 0;
        color: #7f999b;
        text-align: center;
        font-size: 9px;
    }

    .trade-note i {
        color: var(--trade-gold);
        margin-right: 4px;
    }

    /* =========================================================
       BOTTOM INFO CARDS
    ========================================================= */
    .trading-bottom-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 22px;
    }

    .bottom-info-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 18px;
        border: 1px solid rgba(212, 175, 55, .2);
        border-radius: 10px;
        background: rgba(3, 17, 25, .72);
        backdrop-filter: blur(12px);
        transition: .3s ease;
    }

    .bottom-info-item:hover {
        transform: translateY(-3px);
        border-color: rgba(212, 175, 55, .65);
        box-shadow: 0 8px 28px rgba(212, 175, 55, .09);
    }

    .bottom-info-item > i {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 10px;
        color: var(--trade-gold-light);
        background: rgba(212, 175, 55, .1);
        font-size: 18px;
    }

    .bottom-info-item strong,
    .bottom-info-item span {
        display: block;
    }

    .bottom-info-item strong {
        color: var(--trade-text);
        font-size: 12px;
    }

    .bottom-info-item span {
        margin-top: 3px;
        color: var(--trade-muted);
        font-size: 10px;
    }

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

    /* Large desktops */
    @media (min-width: 1200px) and (min-height: 650px) {
        .hero-section {
            min-height: calc(100vh - 76px);
        }
    }

    @media (min-width: 1200px) {
        .vortex-trading-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .trading-dashboard {
            max-width: 1600px;
            margin: auto;
        }
    }

    /* Laptops and smaller desktops */
    @media (max-width: 1199.98px) {
        :root {
            --section-padding: 75px 0 60px;
            --trading-section-padding: var(--section-padding);
        }

        .navbar-nav {
            gap: 0;
        }

        .navbar .nav-link {
            padding: 9px 8px !important;
            font-size: 13px;
        }

        .hero-title {
            font-size: clamp(44px, 7vw, 72px);
        }

        .about-card {
            padding: 25px 22px;
        }

        .trade-column {
            border-left: 0;
            border-top: 1px solid rgba(212, 175, 55, .16);
        }

        .trade-panel {
            min-height: 0;
        }

        .place-order-btn {
            margin-top: 22px;
        }
    }

    /* Tablets */
    @media (max-width: 991.98px) {
        :root {
            --section-padding: 65px 0 55px;
            --trading-section-padding: var(--section-padding);
        }

        body {
            background-attachment: fixed;
        }

        .navbar-collapse {
            margin-top: 12px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: rgba(2, 17, 24, 0.97);
            backdrop-filter: blur(20px);
        }

        .navbar-nav {
            align-items: stretch !important;
        }

        .navbar .nav-link {
            padding: 11px 10px !important;
        }

        .navbar .nav-link::after {
            display: none;
        }

        .navbar-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .hero-section {
            min-height: calc(100vh - 76px);
            padding: 65px 0 45px;
        }

        .market-stats {
            padding-top: 10px;
            padding-bottom: 30px;
        }

        .about-cards {
            margin-top: 40px;
        }

        .about-card {
            min-height: 240px;
        }
    }

    /* Mobile */
    @media (max-width: 767.98px) {
        :root {
            --section-padding: 55px 0 45px;
            --trading-section-padding: var(--section-padding);
        }

        .chart-container {
            padding: 15px 12px;
            height: auto;
            min-height: 0;
        }

        .chart-header {
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .chart-price strong {
            font-size: 20px;
        }

        .chart-toolbar {
            align-items: flex-start;
        }

        .timeframes {
            flex-wrap: wrap;
            gap: 2px;
        }

        .time-btn {
            padding: 6px 8px;
            font-size: 9px;
        }

        .chart-main {
            flex: 0 0 270px;
            min-height: 270px;
        }

        .chart-canvas-wrap,
        #vortexChart {
            height: 100%;
            min-height: 0;
        }

        .chart-axis {
            width: 43px;
            font-size: 9px;
        }

        .chart-footer {
            padding-right: 48px;
            font-size: 8px;
        }

        .chart-legend {
            gap: 10px;
            font-size: 9px;
        }

        .trade-panel {
            padding: 20px 15px;
        }

        .trading-bottom-info {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    /* Small mobile */
    @media (max-width: 575.98px) {
        :root {
            --section-padding: 45px 0 40px;
            --trading-section-padding: var(--section-padding);
        }

        .navbar {
            min-height: 66px;
        }

        .navbar-brand {
            font-size: 21px;
            letter-spacing: 4px;
        }

        .brand-icon {
            width: 35px;
            height: 35px;
            font-size: 30px;
        }

        .navbar-actions {
            flex-direction: column;
        }

        .navbar-actions a {
            width: 100%;
        }

        .hero-section {
            min-height: auto;
            padding: 75px 0 45px;
        }

        .hero-title {
            margin-top: 22px;
            font-size: clamp(39px, 10.5vw, 54px);
            letter-spacing: -1.7px;
        }

        .hero-description {
            font-size: 14px;
            line-height: 1.8;
        }

        .hero-buttons {
            gap: 10px;
        }

        .hero-buttons .btn {
            width: 100%;
        }

        .hero-note {
            gap: 12px;
            font-size: 11px;
        }

        .market-stats {
            padding-top: 5px;
            padding-bottom: 35px;
        }

        .stats-panel {
            padding: 12px;
            gap: 9px;
            min-height: 78px;
        }

        .stats-icon {
            width: 35px;
            height: 35px;
            font-size: 17px;
        }

        .stats-label {
            font-size: 10px;
        }

        .stats-value {
            font-size: 17px;
        }

        .stats-change {
            font-size: 10px;
        }

        .section-heading {
            font-size: 36px;
            letter-spacing: -1px;
        }

        .section-description,
        .about-description {
            font-size: 13px;
            line-height: 1.85;
        }

        .about-cards {
            margin-top: 35px;
        }

        .about-card {
            min-height: 220px;
            padding: 25px 23px;
        }

        .about-card h3 {
            font-size: 19px;
        }

        .about-card p {
            font-size: 13px;
        }

        .about-bottom {
            padding: 20px;
            justify-content: flex-start;
            gap: 18px;
        }

        .about-bottom-item {
            width: 100%;
            font-size: 12px;
        }

        .bottom-strip .strip-item {
            font-size: 10px;
            gap: 5px;
        }

        .bottom-strip i {
            font-size: 14px;
        }

        .cursor-sparkle {
            display: none;
        }
    }

    /* Extra small trading chart */
    @media (max-width: 400px) {
        .chart-price {
            gap: 6px;
        }

        .chart-price strong {
            font-size: 18px;
        }

        .price-change {
            font-size: 9px;
        }

        .chart-container {
            padding: 12px 9px;
        }

        .chart-tools {
            margin-left: auto;
        }

        .chart-disclaimer {
            font-size: 8px;
        }
    }

    /* Reduced motion accessibility */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .card-animated-border::before {
            animation: none;
        }

        .bottom-info-item,
        .place-order-btn {
            transition: none;
        }
    }



/* FAQ Section */
    .faq-section {
        position: relative;
        overflow: hidden;
    }

    .faq-left {
        position: relative;
        text-align: left;
    }

    .faq-subtitle {
        display: inline-block;
        margin-bottom: 12px;
        color: var(--gold, #d4af37);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .faq-title {
        margin-bottom: 18px;
        color: #fff8e7;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 800;
        line-height: 1.2;
    }

    .faq-title span {
        color: var(--gold, #d4af37);
    }

    .faq-description {
        max-width: 500px;
        margin-bottom: 20px;
        color: rgba(255, 248, 231, 0.75);
        font-size: 15px;
        line-height: 1.8;
    }

    /* FAQ Image */
    .faq-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-top: 20px;
    }

    .faq-image {
        display: block;
        width: 100%;
        max-width: 480px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
        transition: transform 0.5s ease;
    }

    .faq-image:hover {
        transform: translateY(-6px);
    }

    /* Accordion */
    .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .faq-item {
        overflow: hidden;
        border: 1px solid rgba(212, 175, 55, 0.25);
        border-radius: 14px !important;
        background: rgba(5, 35, 25, 0.8);
        transition: border-color 0.3s ease, transform 0.3s ease;
    }

    .faq-item:hover {
        border-color: rgba(212, 175, 55, 0.7);
        transform: translateY(-2px);
    }

    .faq-item .accordion-button {
        padding: 22px 24px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #fff8e7;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
    }

    .faq-item .accordion-button:not(.collapsed) {
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light, #f0d78c);
    }

    .faq-item .accordion-button::after {
        width: 20px;
        height: 20px;
        background-image: none;
        content: "+";
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold, #d4af37);
        font-size: 26px;
        font-weight: 400;
        transition: transform 0.3s ease;
    }

    .faq-item .accordion-button:not(.collapsed)::after {
        content: "−";
        transform: rotate(180deg);
    }

    .faq-item .accordion-button:focus {
        box-shadow: none;
    }

    .faq-item .accordion-body {
        padding: 0 24px 22px;
        color: rgba(255, 248, 231, 0.75);
        font-size: 14px;
        line-height: 1.8;
    }

    /* Responsive */
    @media (max-width: 991.98px) {
        .faq-image {
            max-width: 400px;
        }

        .faq-accordion {
            gap: 12px;
        }
    }

    @media (max-width: 767.98px) {
        .faq-left {
            text-align: center;
        }

        .faq-description {
            margin-right: auto;
            margin-left: auto;
        }

        .faq-image-wrapper {
            justify-content: center;
        }

        .faq-image {
            max-width: 340px;
        }

        .faq-accordion {
            margin-top: 10px;
        }
    }

    @media (max-width: 575.98px) {
        .faq-title {
            font-size: 32px;
        }

        .faq-description {
            font-size: 14px;
        }

        .faq-image {
            max-width: 280px;
        }

        .faq-item .accordion-button {
            padding: 17px 18px;
            font-size: 14px;
        }

        .faq-item .accordion-body {
            padding: 0 18px 18px;
            font-size: 13px;
        }
    }
/* FAQ Section */

    /* =====================================================
   VORTEX REVIEW CINEMATIC SECTION
===================================================== */

.vortex-review-story {

    --review-progress: 0;

    position: relative;

    /*
       More scroll distance gives enough time
       for all 3 stages.
    */

    height: 500vh;

    /* background: #02080b; */
}


.vortex-review-sticky {

    position: sticky;

    top: 0;

    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background:
        url("../assets/vortex-bg.png")
        center center / cover fixed no-repeat;
}


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

.vortex-review-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at center,
            rgba(34,230,168,.14),
            transparent 25%
        ),

        radial-gradient(
            circle at center,
            rgba(0,190,255,.08),
            transparent 55%
        );

    transform:
        scale(
            calc(
                1 +
                var(--review-progress) * 1.8
            )
        );

    transition:
        transform .1s linear;
}


.vortex-review-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    /* background:
        linear-gradient(
            rgba(1,7,11,.70),
            rgba(1,8,11,.88)
        ); */
}


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

.review-intro {

    position: absolute;

    top: 50%;

    left: 8%;

    z-index: 20;

    width: 430px;

    transform:
        translateY(-50%)
        translateX(
            calc(
                var(--review-progress) * -500px
            )
        );

    opacity:
        calc(
            1 -
            var(--review-progress) * 3
        );
}


.review-label {

    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--vortex-green-bright);

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: .22em;
}


.review-intro h2 {

    margin: 0;

    color:
        #f4fffb;

    font-size:
        clamp(3rem, 5vw, 5.2rem);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.055em;
}


.review-intro h2 span {

    display: block;

    color:
        var(--vortex-green-bright);
}


.review-intro p {

    margin-top: 25px;

    color:
        rgba(238,255,248,.65);

    line-height: 1.8;
}


/* =====================================================
   REVIEW STAGE
===================================================== */

.review-stage {

    position: absolute;

    inset: 0;

    z-index: 10;
}


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

.review-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 360px;

    text-align: center;

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                .75 +
                var(--review-progress) * .8
            )
        );

    opacity:
        calc(
            .35 +
            var(--review-progress) * .65
        );

    z-index: 50;

    pointer-events: none;
}


.review-center-icon {

    width: 75px;

    height: 75px;

    margin:
        0 auto 15px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #002a1d;

    background:
        var(--vortex-green-bright);

    box-shadow:
        0 0 50px
        rgba(34,230,168,.45);

    font-size: 1.6rem;
}


.review-center span {

    color:
        rgba(231,255,247,.45);

    font-size: .62rem;

    letter-spacing: .2em;

    font-weight: 800;
}


.review-center h3 {

    margin-top: 12px;

    color:
        white;

    font-size: 1.8rem;

    font-weight: 800;
}


.review-center strong {

    color:
        var(--vortex-green-bright);
}


/* =====================================================
   COMMON REVIEW CARD
===================================================== */

.review-card {

    position: absolute;

    background:

        linear-gradient(
            145deg,
            rgba(7,31,37,.86),
            rgba(2,14,19,.78)
        );

    border:
        1px solid
        rgba(150,255,225,.18);

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.35);

    color:
        #ecfff8;

    transition:
        opacity .1s linear,
        transform .1s linear;
}


/* =====================================================
   STAGE 1
   3 LARGE REVIEWS
===================================================== */

.review-layer-one {

    position: absolute;

    inset: 0;

    opacity:
        clamp(
            0,
            calc(
                1 -
                var(--review-progress) * 4
            ),
            1
        );

    transform:
        scale(
            calc(
                1 -
                var(--review-progress) * .35
            )
        );
}


.large-review {

    width: 330px;

    padding: 25px;

    border-radius: 22px;
}


.review-a {

    top: 18%;

    left: 12%;

    transform:
        translate(
            calc(
                var(--review-progress) * -150px
            ),
            calc(
                var(--review-progress) * -100px
            )
        );
}


.review-b {

    top: 20%;

    right: 12%;

    transform:
        translate(
            calc(
                var(--review-progress) * 150px
            ),
            calc(
                var(--review-progress) * -100px
            )
        );
}


.review-c {

    bottom: 13%;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(
            calc(
                var(--review-progress) * 150px
            )
        );
}


.review-stars,
.small-review .review-stars {

    color:
        #61ffc9;

    font-size: .75rem;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


.large-review p {

    color:
        rgba(240,255,249,.76);

    font-size: .9rem;

    line-height: 1.7;

    margin-bottom: 22px;
}


.review-person {

    display: flex;

    align-items: center;

    gap: 12px;
}


.person-avatar {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(34,230,168,.12);

    border:
        1px solid
        rgba(34,230,168,.3);

    color:
        var(--vortex-green-bright);

    font-size: .7rem;

    font-weight: 800;
}


.review-person strong {

    display: block;

    font-size: .85rem;
}


.review-person small {

    display: block;

    margin-top: 3px;

    color:
        rgba(235,255,247,.45);

    font-size: .68rem;
}


/* =====================================================
   STAGE 2
   12 REVIEWS
===================================================== */

.review-layer-two {

    position: absolute;

    inset: 0;

    opacity:
        clamp(
            0,
            calc(
                (var(--review-progress) - .22) * 4
            ),
            1
        );

    transform:
        scale(
            calc(
                .7 +
                var(--review-progress) * .8
            )
        );
}


/* Common */

.small-review {

    width: 205px;

    padding: 15px;

    border-radius: 16px;
}


.small-review p {

    margin: 0 0 12px;

    color:
        rgba(238,255,248,.68);

    font-size: .7rem;

    line-height: 1.5;
}


.small-review span {

    color:
        rgba(238,255,248,.45);

    font-size: .65rem;
}


/* Positions */

.r01 {
    top: 7%;
    left: 5%;
}

.r02 {
    top: 5%;
    left: 38%;
}

.r03 {
    top: 9%;
    right: 5%;
}

.r04 {
    top: 30%;
    left: 2%;
}

.r05 {
    top: 27%;
    left: 23%;
}

.r06 {
    top: 29%;
    right: 21%;
}

.r07 {
    top: 25%;
    right: 2%;
}

.r08 {
    bottom: 25%;
    left: 5%;
}

.r09 {
    bottom: 19%;
    left: 27%;
}

.r10 {
    bottom: 24%;
    right: 26%;
}

.r11 {
    bottom: 15%;
    right: 4%;
}

.r12 {
    bottom: 5%;
    left: 43%;
}


/* =====================================================
   STAGE 3
   MANY REVIEWS
===================================================== */

.review-layer-three {

    position: absolute;

    inset: -10%;

    opacity:
        clamp(
            0,
            calc(
                (var(--review-progress) - .50) * 3
            ),
            1
        );

    transform:
        scale(
            calc(
                .7 +
                var(--review-progress) * 1.1
            )
        );
}


/* Smallest reviews */

.micro-review {

    width: 150px;

    padding: 12px;

    border-radius: 13px;

    opacity: .82;
}


.micro-review b {

    color:
        var(--vortex-green-bright);

    font-size: .6rem;

    letter-spacing: 2px;
}


.micro-review p {

    margin: 7px 0;

    color:
        rgba(239,255,249,.65);

    font-size: .62rem;

    line-height: 1.4;
}


.micro-review span {

    color:
        rgba(239,255,249,.38);

    font-size: .55rem;
}


/* Positions */

.m01 { top: 2%; left: 3%; }
.m02 { top: 12%; left: 18%; }
.m03 { top: 2%; left: 38%; }
.m04 { top: 10%; right: 18%; }
.m05 { top: 3%; right: 3%; }

.m06 { top: 32%; left: 1%; }
.m07 { top: 42%; left: 14%; }
.m08 { top: 31%; right: 12%; }
.m09 { top: 45%; right: 1%; }

.m10 { bottom: 28%; left: 2%; }
.m11 { bottom: 18%; left: 17%; }
.m12 { bottom: 30%; right: 16%; }
.m13 { bottom: 15%; right: 2%; }

.m14 { bottom: 4%; left: 8%; }
.m15 { bottom: 3%; left: 40%; }
.m16 { bottom: 6%; right: 10%; }


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

.review-scroll {

    position: absolute;

    bottom: 35px;

    left: 50%;

    z-index: 80;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    opacity:
        calc(
            1 -
            var(--review-progress) * 5
        );
}


.review-scroll span {

    color:
        rgba(240,255,249,.4);

    font-size: .6rem;

    letter-spacing: .2em;
}


.review-scroll div {

    width: 1px;

    height: 40px;

    background:
        linear-gradient(
            to bottom,
            var(--vortex-green-bright),
            transparent
        );
}


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

.review-final {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 100;

    width: 600px;

    text-align: center;

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                .7 +
                var(--review-progress) * 1
            )
        );

    opacity:
        clamp(
            0,
            calc(
                (var(--review-progress) - .78) * 5
            ),
            1
        );
}


.review-final > span {

    color:
        var(--vortex-green-bright);

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .22em;
}


.review-final h2 {

    margin: 15px 0;

    color:
        white;

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

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.05em;
}


.review-final strong {

    color:
        var(--vortex-green-bright);
}


.review-final p {

    color:
        rgba(239,255,249,.55);
}


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

@media (max-width: 991px) {

    .vortex-review-story {

        height: auto;

        min-height: 100vh;

    }


    .vortex-review-sticky {

        position: relative;

        height: auto;

        min-height: 100vh;

        padding:
            100px 20px;
    }


    .review-intro {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        text-align: center;

        transform: none !important;

        opacity: 1 !important;

        margin-bottom: 60px;
    }


    .review-stage {

        position: relative;

        inset: auto;

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    .review-layer-one,
    .review-layer-two,
    .review-layer-three {

        position: relative;

        inset: auto;

        display: grid;

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

        gap: 15px;

        opacity: 1 !important;

        transform: none !important;
    }


    .large-review,
    .small-review,
    .micro-review {

        position: relative;

        inset: auto !important;

        width: 100%;

        transform: none !important;
    }


    .review-center {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        transform: none !important;

        margin: 50px 0;

        opacity: 1 !important;
    }


    .review-final {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        transform: none !important;

        opacity: 1 !important;

        margin-top: 80px;
    }


    .review-scroll {

        display: none;
    }

}


@media (max-width: 575px) {

    .review-layer-one,
    .review-layer-two,
    .review-layer-three {

        grid-template-columns: 1fr;
    }


    .review-intro h2 {

        font-size: 2.8rem;
    }


    .review-final h2 {

        font-size: 2.8rem;
    }

}
/* =========================================
   Review Cinematic
========================================= */

    
/* =========================================
   VORTEX CONTACT SECTION
========================================= */

.vortex-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--section-padding, 100px 0);
    color: var(--text);
}

/* Background */
.vortex-contact-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../assets/vortex-bg.png") center / cover no-repeat;
    opacity: 0.2;
}

.vortex-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 229, 160, 0.09),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            rgba(3, 16, 24, 0.98),
            rgba(3, 16, 24, 0.88)
        );
    pointer-events: none;
}

.vortex-contact-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(0, 229, 160, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 160, 0.12) 1px, transparent 1px);
    background-size: 65px 65px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
    pointer-events: none;
}

.vortex-contact .container {
    position: relative;
    z-index: 2;
}

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

.contact-left {
    padding-right: 35px;
}

.contact-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 25px;
    color: var(--primary-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.contact-label::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 12px rgba(0, 229, 160, 0.5);
}

.contact-title {
    max-width: 650px;
    margin: 0;
    color: var(--text);
    font-size: 34px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.contact-title span {
    /* display: block; */
    margin-top: 8px;
    color: var(--primary);
    text-shadow: 0 0 35px rgba(0, 229, 160, 0.2);
}

.contact-description {
    max-width: 450px;
    margin: 27px 0 38px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.9;
}

/* Small decorative status */
.contact-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(0, 229, 160, 0.18);
    border-radius: 50px;
    background: rgba(0, 229, 160, 0.045);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    animation: contactPulse 1.8s infinite;
}

@keyframes contactPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 12px var(--primary);
    }
    50% {
        opacity: 0.45;
        box-shadow: 0 0 3px var(--primary);
    }
}

/* =========================================
   CONTACT INFO CARDS
========================================= */

.contact-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    max-width: 560px;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 17px 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
    transition: 0.3s ease;
}

.contact-detail:hover {
    border-color: rgba(0, 229, 160, 0.5);
    background: rgba(0, 229, 160, 0.055);
    transform: translateY(-3px);
}

.contact-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 229, 160, 0.2);
    border-radius: 11px;
    background: rgba(0, 229, 160, 0.07);
    color: var(--primary-light);
    font-size: 1.05rem;
}

.contact-detail small {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.contact-detail a,
.contact-detail > div > span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-detail a:hover {
    color: var(--primary-light);
}

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

.contact-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 30px;
}

.contact-social > span {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.social-links {
    display: flex;
    gap: 9px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.3s ease;
}

.social-links a:hover {
    border-color: var(--primary);
    background: rgba(0, 229, 160, 0.1);
    color: var(--primary-light);
    transform: translateY(-3px);
}

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

.contact-form-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(0, 229, 160, 0.18);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(13, 37, 43, 0.88),
        rgba(3, 19, 27, 0.9)
    );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.contact-form-card::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -120px;
    z-index: -1;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--primary);
    filter: blur(100px);
    opacity: 0.11;
    pointer-events: none;
}

.contact-form-card::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -100px;
    z-index: -1;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--secondary);
    filter: blur(100px);
    opacity: 0.08;
    pointer-events: none;
}

.form-heading {
    position: relative;
    margin-bottom: 28px;
}

.form-heading > span {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary-light);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.form-heading h3 {
    margin: 0 0 9px;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.form-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* Form fields */
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.vortex-input {
    min-height: 49px;
    padding: 12px 14px;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    background: rgba(3, 16, 24, 0.62) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 0.78rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.vortex-input::placeholder {
    color: rgba(179, 208, 208, 0.4);
}

.vortex-input:focus {
    border-color: var(--primary) !important;
    background: rgba(3, 20, 28, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.07) !important;
}

select.vortex-input {
    color: var(--text-muted) !important;
}

select.vortex-input option {
    background: var(--dark);
    color: var(--text);
}

textarea.vortex-input {
    min-height: 125px;
    resize: vertical;
}

/* Submit button */
.contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 53px;
    margin-top: 3px;
    padding: 0 19px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    background: var(--primary);
    color: var(--dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: 0.3s ease;
}

.contact-submit i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.contact-submit:hover {
    border-color: var(--primary-light);
    background: var(--primary-light);
    color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 229, 160, 0.17);
}

.contact-submit:hover i {
    transform: translate(3px, -3px);
}

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

.contact-market-ticker {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 85px;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(3, 16, 24, 0.65);
    backdrop-filter: blur(12px);
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 35px;
    width: max-content;
    padding: 15px 0;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    animation: vortexTicker 25s linear infinite;
}

.ticker-track b {
    color: var(--primary);
}

@keyframes vortexTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .contact-status-dot {
        animation: none;
    }

    .contact-detail,
    .social-links a,
    .contact-submit {
        transition: none;
    }
}

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

@media (max-width: 991.98px) {
    .contact-left {
        padding-right: 0;
    }

    .contact-title {
        font-size: clamp(3.2rem, 8vw, 5.5rem);
    }

    .contact-form-card {
        padding: 32px;
    }

    .contact-market-ticker {
        margin-top: 65px;
    }
}

@media (max-width: 767.98px) {
    .vortex-contact {
        padding: 75px 0 0;
    }

    .contact-left {
        text-align: center;
    }

    .contact-label {
        justify-content: center;
    }

    .contact-title {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .contact-description {
        margin: 22px auto 25px;
    }

    .contact-status {
        margin-bottom: 28px;
    }

    .contact-details {
        margin: 0 auto;
        text-align: left;
    }

    .contact-social {
        justify-content: center;
        margin-bottom: 10px;
    }

    .contact-form-card {
        padding: 28px;
    }

    .contact-market-ticker {
        margin-top: 60px;
    }
}

@media (max-width: 575.98px) {
    .vortex-contact {
        padding-top: 65px;
    }

    .contact-title {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .contact-description {
        font-size: 0.85rem;
    }

    .contact-details {
        grid-template-columns: 1fr;
        max-width: 390px;
    }

    .contact-detail {
        padding: 14px;
    }

    .contact-form-card {
        padding: 23px 19px;
        border-radius: 17px;
    }

    .form-heading h3 {
        font-size: 1.7rem;
    }

    .contact-market-ticker {
        margin-top: 45px;
    }
}