/* Copy Animation */

.base-color {

    color: hsl(var(--main)) !important;

}



.copyInput {

    display: inline-block;

    line-height: 50px;

    position: absolute;

    top: 0;

    right: 0;

    width: 40px;

    text-align: center;

    font-size: 14px;

    cursor: pointer;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.copied::after {

    position: absolute;

    top: 8px;

    right: 12%;

    width: 100px;

    display: block;

    content: "COPIED";

    font-size: 1em;

    padding: 5px 5px;

    color: #fff;

    background-color: hsl(var(--base));

    border-radius: 3px;

    opacity: 0;

    will-change: opacity, transform;

    animation: showcopied 1.5s ease;

}



@keyframes showcopied {

    0% {

        opacity: 0;

        transform: translateX(100%);

    }



    50% {

        opacity: 0.7;

        transform: translateX(40%);

    }



    70% {

        opacity: 1;

        transform: translateX(0);

    }



    100% {

        opacity: 0;

    }

}





.cookies-card {

    width: 520px;

    padding: 30px;

    color: #1E2337;

    position: fixed;

    bottom: 15px;

    left: 15px;

    z-index: 999999;

    transition: all .5s;

    background: #d1d1d1;

    border-radius: 5px;

}



[data-theme=light] .cookies-card {

    background-color: hsl(var(--section-bg));

}



[data-theme=light] .cookies-card p {

    font-weight: 300;

    color: hsl(var(--black)/0.7) !important;

}





.cookies-card.hide {

    bottom: -500px !important;

}



.radius--10px {

    border-radius: 10px;

}



.cookies-card__icon {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background-color: #6e6f70;

    color: #fff;

    font-size: 32px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

}



.cookies-card__content {

    margin-bottom: 0;

}



.cookies-btn {

    color: #363636;

    text-decoration: none;

    padding: 10px 35px;

    margin: 3px 5px;

    display: inline-block;

    border-radius: 999px;

}



.cookies-btn:hover {

    color: #363636;

}





@media (max-width: 767px) {

    .cookies-card {

        width: 100%;

        left: 0;

        bottom: 0;

        font-size: 14px;

        padding: 15px;

    }

}









.hover-input-popup {

    position: relative;

}



.input-popup {

    display: none;

}



.hover-input-popup .input-popup {

    display: block;

    position: absolute;

    bottom: 130%;

    left: 50%;

    width: 280px;

    background-color: #1a1a1a;

    color: #fff;

    padding: 20px;

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -ms-border-radius: 5px;

    -o-border-radius: 5px;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}



.input-popup::after {

    position: absolute;

    content: '';

    bottom: -19px;

    left: 50%;

    margin-left: -5px;

    border-width: 10px 10px 10px 10px;

    border-style: solid;

    border-color: transparent transparent #1a1a1a transparent;

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);

}



.input-popup p {

    padding-left: 20px;

    position: relative;

}



.input-popup p::before {

    position: absolute;

    content: '';

    font-family: 'Line Awesome Free';

    font-weight: 900;

    left: 0;

    top: 4px;

    line-height: 1;

    font-size: 18px;

}



.input-popup p.error {

    text-decoration: line-through;

}



.input-popup p.error::before {

    content: "\f057";

    color: #ea5455;

}



.input-popup p.success::before {

    content: "\f058";

    color: #28c76f;

}



.show-filter {

    display: none;

}



@media(max-width:767px) {

    .responsive-filter-card {

        display: none;

        transition: none;

    }



    .show-filter {

        display: block;

    }

}



.verification-code-wrapper {

    box-shadow: var(--box-shadow) !important;

    background-color: hsl(var(--footer-bg)) !important;

    border: 0 !important;

}



.verification-code input {

    background-color: transparent !important;

    color: hsl(var(--black)) !important;

}



.verification-code::after {

    background-color: transparent !important;

}



.verification-code span {

    background-color: transparent !important;

    border-color: hsl(var(--base)) !important;

}



.verification-code input {

    letter-spacing: 67px !important;

}



/* =====================================================================

   Site-wide modern / professional polish (site + dashboard)

   Additive only -- no markup or JS selectors touched.

   ===================================================================== */



/* ---- Typography ---- */

h1, h2, h3, h4, h5, h6,

.card-header, .sidebar-menu-list__link, .navbar-brand {

    letter-spacing: -0.01em;

}



h1, h2, h3 {

    font-weight: 800 !important;

}



/* ---- Header / navbar ---- */

.header {

    background-color: hsl(var(--static-black) / 0.92) !important;

    -webkit-backdrop-filter: saturate(160%) blur(14px);

    backdrop-filter: saturate(160%) blur(14px);

    border-bottom: 1px solid hsl(var(--base) / 0.16);

}



.header.fixed-header {

    background-color: hsl(var(--static-black) / 0.94) !important;

    box-shadow: 0 12px 30px hsl(var(--black) / 0.35);

}



@media (min-width: 992px) {

    .nav-menu .nav-item .nav-link {

        font-weight: 500;

        padding: 27px 0;

    }

}



.header .btn--base,

.header .sign-in {

    border-radius: 999px !important;

}



.header .sign-in {

    font-weight: 600;

    transition: color .2s ease;

}



.header .sign-in:hover {

    color: hsl(var(--base)) !important;

}



/* ---- Buttons ---- */

.btn--base,

.btn--base-two {

    border-radius: 999px !important;

    font-weight: 600 !important;

    letter-spacing: -0.01em;

    box-shadow: 0 10px 24px hsl(var(--base) / 0.28);

    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;

}



.btn--base:hover,

.btn--base-two:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 30px hsl(var(--base) / 0.4);

}



.btn--base.outline,

.btn--base-two.outline {

    border-radius: 999px !important;

    box-shadow: none;

    font-weight: 600 !important;

}



.btn--base.outline:hover,

.btn--base-two.outline:hover {

    transform: translateY(-2px);

}



/* ---- Cards (site + dashboard) ---- */

.card,

.custom--card {

    border-radius: 14px !important;

    transition: transform .2s ease, box-shadow .2s ease;

}



.custom--card {

    box-shadow: 0 10px 30px hsl(var(--black) / 0.28) !important;

}



/* ---- Dashboard sidebar active state ---- */

.dashboard-fluid .sidebar-menu-list__item.active > a,

.dashboard-fluid .sidebar-menu-list__link.active,

.dashboard-fluid .sidebar-menu-list__link:hover {

    background-color: hsl(var(--base) / 0.16) !important;

    border-radius: 10px;

    box-shadow: inset 3px 0 0 hsl(var(--base));

}



.dashboard-fluid .sidebar-menu-list__link {

    border-radius: 10px;

    transition: background-color .18s ease, box-shadow .18s ease;

}



/* ---- Footer ---- */

.footer-area {

    border-top: 1px solid hsl(var(--base) / 0.22);

}



.footer-menu__link,

.footer-contact-menu__item-content a {

    transition: color .18s ease, padding-left .18s ease;

}



.footer-menu__link:hover {

    padding-left: 4px;

}



/* =====================================================================
   HAITIAN FOREX FLAG SIGNATURE GLOBAL STYLES
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --brand-blue: #001F7A;
    --brand-blue-dark: #00134d;
    --brand-red: #D71920;
    --brand-red-dark: #a3121a;
    --brand-gold: #f5a623;
    --brand-gold-light: #ffd54a;
    
    --market-up: #00D84A;
    --market-down: #FF4040;
    
    --bg-dark: #050816;
    --bg-darker: #020309;
    --bg-panel: #0a0e24;
    
    --text-main: #e7ecf5;
    --text-mut: #8a93a6;
    
    --border-light: rgba(255, 255, 255, 0.08);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Base Buttons */
.btn--base, .btn--base-two {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 24px;
    box-shadow: 0 4px 14px rgba(0, 31, 122, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.btn--base::after, .btn--base-two::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn--base:hover::after, .btn--base-two:hover::after {
    left: 100%;
}

.btn--base.outline {
    background: transparent !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}
.btn--base.outline:hover {
    border-color: var(--brand-blue) !important;
    background: rgba(0, 31, 122, 0.1) !important;
}

/* Header Redesign */
.header {
    background: var(--bg-darker) !important;
    border-bottom: 1px solid var(--border-light) !important;
    backdrop-filter: none;
    padding: 0;
}
.header .navbar {
    padding: 16px 0;
}
.header .navbar-brand img {
    max-height: 44px;
}
.nav-menu .nav-item .nav-link {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main) !important;
    transition: color 0.2s ease;
}
.nav-menu .nav-item .nav-link:hover {
    color: var(--brand-gold) !important;
}

.header .sign-in {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--text-main) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    padding: 10px 16px;
}
.header .sign-in:hover {
    color: var(--brand-gold) !important;
}

.header-right .login-registration-list__item .btn {
    font-family: 'Manrope', sans-serif;
    border-radius: 4px !important;
    background: linear-gradient(135deg, var(--brand-blue), #00135a) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,31,122,0.4) !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px;
}

/* Mega menu drop-down */
.mega-menu {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--brand-blue);
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.mega-menu-list__item {
    border-radius: 4px;
    transition: background 0.2s ease;
}
.mega-menu-list__item:hover {
    background: rgba(0, 31, 122, 0.15);
}
.mega-menu-list__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: #fff;
}
.mega-menu-list__desc {
    color: var(--text-mut);
    font-size: 13px;
}

/* Footer Redesign */
.footer-area {
    background: var(--bg-darker);
    border-top: 4px solid var(--brand-blue) !important;
    position: relative;
    overflow: hidden;
}
.footer-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 4px;
    background: var(--brand-red);
}
.footer-item__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 16px;
    margin-bottom: 24px;
}
.footer-item__desc {
    color: var(--text-mut);
    font-size: 15px;
    line-height: 1.7;
}
.footer-menu__link {
    color: var(--text-mut);
    font-weight: 500;
    font-size: 15px;
    padding: 6px 0;
}
.footer-menu__link:hover {
    color: var(--brand-gold);
    transform: translateX(4px);
}
.bottom-footer {
    background: #010206;
    border-top: 1px solid var(--border-light);
}
.bottom-footer__text {
    color: var(--text-mut);
}
.social-list__link {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    border-radius: 4px;
    transition: all 0.2s ease;
}
.social-list__link:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* =====================================================================
   HAITIAN FOREX DASHBOARD SHELL & HOMEPAGE REBUILD
   ===================================================================== */
.hf-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-dark);
}
.hf-shell__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Sidebar */
.hf-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.hf-sidebar__logo {
    padding: 24px 20px;
}
.hf-sidebar__logo img {
    max-width: 100%;
    height: 40px;
}
.hf-sidebar__nav {
    flex: 1;
    padding: 0 12px;
}
.hf-sidebar__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hf-sidebar__nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-mut);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}
.hf-sidebar__nav li.active a, .hf-sidebar__nav li a:hover {
    background: rgba(215, 25, 32, 0.1);
    color: var(--brand-red);
}
.hf-sidebar__nav li.active a i, .hf-sidebar__nav li a:hover i {
    color: var(--brand-red);
}
.hf-sidebar__nav li a i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}
.hf-sidebar__vip {
    margin: 20px 16px;
    padding: 20px 16px;
    background: linear-gradient(160deg, rgba(255,196,74,.16), rgba(215,25,32,.10));
    border: 1px solid rgba(255,196,74,.28);
    border-radius: 12px;
    text-align: center;
}
.hf-sidebar__vip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd54a, #f5a623);
    color: #1a1a1a;
    font-size: 20px;
    margin-bottom: 12px;
}
.hf-sidebar__vip h4 {
    font-size: 14px;
    color: #fff;
    margin: 0 0 6px;
}
.hf-sidebar__vip p {
    font-size: 12px;
    color: var(--text-mut);
    margin: 0 0 16px;
    line-height: 1.4;
}
.hf-sidebar__vip .btn {
    width: 100%;
    font-size: 12px;
    padding: 8px 0;
    background: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}
.hf-sidebar__bottom {
    padding: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hf-sidebar__lang, .hf-sidebar__login {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-mut);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.hf-sidebar__lang select {
    background: transparent;
    border: none;
    color: var(--text-mut);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}
.hf-sidebar__login:hover {
    color: #fff;
}

/* Topbar */
.hf-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 32px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
}
.hf-topbar__right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.hf-topbar__auth {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hf-btn-login {
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 16px;
}
.hf-btn-login:hover {
    color: var(--brand-gold);
}
.hf-btn-signup {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 31, 122, 0.3);
    transition: all 0.2s;
}
.hf-btn-signup:hover {
    background: #0028a3;
    color: #fff;
    transform: translateY(-2px);
}
.hf-topbar__theme.theme-switch {
    display: flex;
    align-items: center;
}
.hf-topbar__theme label {
    cursor: pointer;
    font-size: 18px;
    color: var(--text-mut);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    margin: 0;
}
.hf-topbar__theme label:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
[data-theme="dark"] .hf-topbar__theme .fa-moon { display: none; }
[data-theme="light"] .hf-topbar__theme .fa-sun { display: none; }

/* Main Homepage Content */
.hf-home {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 700px) {
    .hf-home {
        padding: 20px;
    }
    .vl-bento {
        grid-template-columns: 1fr !important;
    }
    .vl-bento-card {
        grid-column: span 1 !important;
    }
}

/* Hero */
.hf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 64px;
    border: 1px solid var(--border-light);
    isolation: isolate;
}
.hf-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hf-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 15%;
}
.hf-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(5,8,22,0.96) 0%, rgba(5,8,22,0.88) 32%, rgba(5,8,22,0.45) 58%, rgba(5,8,22,0.12) 82%),
        linear-gradient(180deg, rgba(5,8,22,0.15) 0%, rgba(5,8,22,0.55) 100%);
}
.hf-hero__content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 56px 32px 56px 56px;
}
.hf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-gold);
    background: rgba(245, 166, 35, 0.12);
    border: 1px solid rgba(245, 166, 35, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .hf-hero {
        display: block;
        min-height: 0;
    }
    .hf-hero__bg {
        position: relative;
        height: 240px;
    }
    .hf-hero__bg::after {
        background:
            linear-gradient(180deg, rgba(5,8,22,0.15) 0%, rgba(5,8,22,0.85) 100%);
    }
    .hf-hero__content {
        max-width: 100%;
        padding: 24px 20px 32px;
    }
    .hf-hero__eyebrow {
        font-size: 11px;
        padding: 5px 12px;
    }
}
@media (max-width: 480px) {
    .hf-hero__actions {
        flex-direction: column;
    }
    .hf-hero__actions .btn {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        white-space: nowrap;
    }
}
.hf-hero__content h1 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    margin-bottom: 16px;
    color: #fff;
}
.hf-hero__content p {
    font-size: 16px;
    color: var(--text-mut);
    margin-bottom: 24px;
    line-height: 1.6;
    max-width: 90%;
}
.hf-hero__checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}
.hf-hero__checklist li {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hf-hero__checklist li i {
    color: var(--brand-red);
    font-size: 16px;
}
.hf-hero__actions {
    display: flex;
    gap: 16px;
}

/* Ticker Cards */
.hf-ticker-cards {
    display: flex;
    gap: 16px;
    overflow: hidden;
    padding-bottom: 16px;
    margin-bottom: 48px;
    scrollbar-width: none;
}
.hf-ticker-cards::-webkit-scrollbar {
    display: none;
}

/* Ticker auto-slide */
.vl-ticker__track {
    animation: hf-ticker-scroll 36s linear infinite;
    will-change: transform;
}
.hf-ticker-cards:hover .vl-ticker__track {
    animation-play-state: paused;
}
@keyframes hf-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.hf-ticker-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    min-width: 180px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hf-ticker-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hf-ticker-card__sym {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.hf-ticker-card__id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hf-ticker-card__flags {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.hf-ticker-card__flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-panel);
    background: #0a0e24;
    display: block;
}
.hf-ticker-card__flag--second {
    margin-left: -8px;
}
.hf-ticker-card__otc {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--brand-gold);
    color: #000;
}
.hf-ticker-card__price {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hf-ticker-card__chg {
    font-size: 12px;
    font-weight: 700;
}
.hf-ticker-card__chg.up { color: var(--market-up); }
.hf-ticker-card__chg.down { color: var(--market-down); }
.hf-ticker-card__spark {
    height: 24px;
    width: 100%;
    margin-top: 8px;
    opacity: 0.6;
}

/* Features Row */
.hf-features-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}
.hf-feature {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    text-align: left;
}
.hf-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 31, 122, 0.2);
    color: #fff; /* Replaced var(--brand-blue) to make it stand out on dark */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,31,122, 0.4);
}
.hf-feature h3 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
}
.hf-feature p {
    font-size: 13px;
    color: var(--text-mut);
    line-height: 1.5;
    margin: 0;
}

/* Haiti Panel */
.hf-haiti-panel {
    display: flex;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 64px;
    min-height: 280px;
}
.hf-haiti-panel__content {
    flex: 1;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hf-haiti-panel__content h2 {
    font-size: 28px;
    color: #fff;
    margin-bottom: 16px;
}
.hf-haiti-panel__content p {
    font-size: 15px;
    color: var(--text-mut);
    margin-bottom: 24px;
    max-width: 80%;
}
.hf-haiti-panel__flag {
    width: 35%;
    background: linear-gradient(to bottom, #00209F 50%, #D21034 50%);
    position: relative;
}
.hf-haiti-panel__flag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,14,36,1) 0%, rgba(10,14,36,0) 100%);
}

/* Stats Bar */
.hf-stats-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 32px 24px;
    margin-bottom: 64px;
}
.hf-stat-item {
    text-align: center;
}
.hf-stat-item h4 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.hf-stat-item p {
    font-size: 12px;
    color: var(--text-mut);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Existing sections overrides */
.hf-home .vl-section {
    padding: 40px 0;
    max-width: 100%;
}
.hf-home .vl-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.hf-home .vl-bento-card.vl-bento__wide {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .hf-hero {
        grid-template-columns: 1fr;
    }
    .hf-features-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-haiti-panel {
        flex-direction: column;
    }
    .hf-haiti-panel__flag {
        width: 100%;
        height: 180px;
    }
    .hf-stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 16px;
    }
}
@media (max-width: 991px) {
    .hf-shell__main {
        width: 100%;
    }
    .hf-sidebar {
        display: none; /* Hide sidebar on mobile in shell view */
    }
    .hf-features-row {
        grid-template-columns: 1fr;
    }
    .hf-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Redesigned Terminal to match reference */
.hf-terminal {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.hf-terminal__head {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: rgba(255,255,255,0.02);
}
.hf-terminal__body {
    position: relative;
    height: 300px;
    background: #0b101d; /* darker for chart */
}
.hf-terminal__panel {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    background: rgba(255,255,255,0.02);
    align-items: center;
}
.hf-term-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}
.hf-term-input label {
    font-size: 11px;
    color: var(--text-mut);
    margin-bottom: 4px;
}
.hf-term-input .val {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}
.hf-term-actions {
    display: flex;
    gap: 8px;
}
.hf-term-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hf-term-btn.up {
    background: var(--market-up);
    box-shadow: 0 4px 14px rgba(0, 216, 74, 0.2);
}
.hf-term-btn.down {
    background: var(--market-down);
    box-shadow: 0 4px 14px rgba(255, 64, 64, 0.2);
}


/* HaitiForex brand logo - safe sizing for sidebar/logo slots (icon-mark logo, 1:1 aspect) */
.hf-sidebar__logo img {
    max-height: 40px;
    max-width: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.sidebar-logo img {
    max-height: 44px;
    max-width: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.account-left__logo img {
    max-height: 140px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.hf-landing { min-height: 100vh; background: var(--bg-dark); }
.hf-topbar--landing { justify-content: space-between; gap: 24px; }
.hf-topbar__brand { display: flex; align-items: center; flex: 0 0 auto; }
.hf-topbar__brand img { height: 34px; width: auto; object-fit: contain; }
.hf-topbar__nav { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.hf-topbar__nav a { color: var(--text-mut); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .15s ease; }
.hf-topbar__nav a:hover { color: #fff; }
@media (max-width: 991px) {
  .hf-topbar--landing { padding: 14px 20px; }
}