/* ===================================================================
   Star Pro Markets — Black & Gold theme (2026-07-31)
   Loaded last (after style.css, responsive.css, and the inline
   "Star Pro Markets Custom Overrides" block in index.html/tradon/index.html)
   so every rule here wins the cascade at equal specificity. Colors/type
   only — no structural, layout, or spacing changes; same selectors as
   the page already uses.

   Palette: bg #050505/#111111/#171717, gold #EAB526, gold highlight
   #FFD76A, dark gold #B27A10, text #FFFFFF/#CFCFCF/#8E8E8E,
   success #00D26A, danger #FF4D4F, warning #FFB020, info #3B82F6.
   =================================================================== */

:root {
  --spm-bg: #050505;
  --spm-bg-2: #111111;
  --spm-bg-3: #171717;
  --spm-gold: #EAB526;
  --spm-gold-highlight: #FFD76A;
  --spm-gold-dark: #B27A10;
  --spm-border: rgba(255,255,255,0.08);
  --spm-border-gold: rgba(234,181,38,0.18);
  --spm-text-secondary: #CFCFCF;
  --spm-text-muted: #8E8E8E;
  --spm-success: #00D26A;
  --spm-danger: #FF4D4F;
  --spm-warning: #FFB020;
  --spm-info: #3B82F6;
}

/* ---- Typography: Space Grotesk (headings), Inter (body), IBM Plex Sans (numbers) ---- */
body, p, a, li, span, div {
  font-family: 'Inter', 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---- Base surfaces ---- */
body { background-color: var(--spm-bg); }

/* Hero: drop the stock-photo backdrop for the minimal dark-mode look; keep the section's
   own layout/height untouched. */
.ico-bg2 {
  background-image: none !important;
  background-color: var(--spm-bg);
}
#grow { background: var(--spm-bg-2) !important; }

/* ---- Nav: dark glass, gold hover/active state, gold active indicator ----
   No backdrop-filter here: it creates a new containing block for `position: fixed`
   descendants, and the mobile off-canvas menu (.classy-menu, fixed + height:100%) lives
   inside this element — with the filter present, the menu sized itself to this ~84px header
   box instead of the full viewport, collapsing the mobile menu to a sliver showing only its
   close icon. Solid translucent background gets most of the same look without that side effect. */
.header-area {
  background: rgba(5,5,5,0.82);
  border-bottom: 1px solid var(--spm-border-gold);
  transition: background-color 300ms ease;
}
.header-area.sticky {
  background-color: rgba(5,5,5,0.92);
  border-bottom: 1px solid var(--spm-border-gold);
}
.classynav > ul > li > a {
  transition: color 260ms ease;
}
.classynav > ul > li > a:hover,
.classynav > ul > li.active > a {
  color: var(--spm-gold) !important;
}
#nav li { position: relative; }
#nav li.active > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--spm-gold), var(--spm-gold-highlight));
}

/* ---- Mobile off-canvas menu (classy-nav.min.css defaults to a light/navy skin —
   the site initializes ClassyNav with theme:"dark" via JS (tradon/js/script.js), which adds
   a runtime "dark" class on top of the static "light" class already in the markup, so the
   *actual* rules in effect are the `.dark.breakpoint-on ...` ones — match that exact compound
   selector here rather than relying on !important against a lower-specificity selector). */
.classy-menu,
.dark.breakpoint-on .classy-navbar .classy-menu,
.breakpoint-on .classy-navbar .classy-menu {
  background-color: var(--spm-bg-2) !important;
  border-left: 1px solid var(--spm-border-gold);
}
.classynav > ul > li > a,
.classynav ul li a,
.dark.breakpoint-on .classynav > ul > li > a,
.breakpoint-on .classynav > ul > li > a {
  background-color: transparent !important;
  color: #fff !important;
  border-bottom: 1px solid var(--spm-border) !important;
}
.classynav ul li a:hover,
.classynav ul li a:focus {
  color: var(--spm-gold) !important;
}
.classy-navbar-toggler .navbarToggler span,
.dark .classy-navbar-toggler .navbarToggler span {
  background-color: var(--spm-gold) !important;
}
.cross-wrap span,
.dark .classycloseIcon .cross-wrap span {
  background: var(--spm-gold) !important;
}
.classycloseIcon {
  z-index: 1200;
}
/* The panel's fixed 300px width leaves a sliver of the page (and the header's own hamburger
   toggler, now morphed into its own "X" shape) visible down the right edge on narrow phones —
   reading as two overlapping close buttons. Full-width panel on small screens covers the
   toggler entirely (one close icon, the panel's own) and is easier to tap/read on mobile.
   Panel actually slides in from the LEFT here (no `.right`/`.right-nav` class on this page's
   markup, so the plugin's left-anchored rules are the ones in effect, not its right-anchored
   ones) — and the vendor rule sizing it is `.breakpoint-on .classy-navbar .classy-menu`
   (3 classes), so the override needs that same selector to actually win. */
@media (max-width: 480px) {
  .classy-navbar .classy-menu,
  .breakpoint-on .classy-navbar .classy-menu {
    width: 100%;
    left: -100%;
  }
  .classy-navbar .classy-menu.menu-on,
  .breakpoint-on .classy-navbar .classy-menu.menu-on {
    left: 0;
  }
}

/* ---- Footer (vendor .footer-content-area is navy #192057 with !important) ---- */
.footer-content-area {
  background: linear-gradient(180deg, var(--spm-bg-2) 0%, var(--spm-bg) 100%) !important;
}

/* ---- Gradient text accents (vendor .gradient-text/.gradient-text.cyan are purple→coral /
   flat cyan with !important — override both to gold) ---- */
.gradient-text {
  background-image: linear-gradient(135deg, var(--spm-gold), var(--spm-gold-highlight)) !important;
}
.gradient-text.cyan {
  background-image: linear-gradient(135deg, var(--spm-gold), var(--spm-gold-highlight)) !important;
}

/* ---- Buttons (vendor .dream-btn / .more-btn / .login-btn) ---- */
.login-btn,
.login-btn:hover,
.login-btn:focus {
  color: #0A0A0A !important;
  background: linear-gradient(135deg, var(--spm-gold), var(--spm-gold-highlight));
  border-color: var(--spm-gold-dark);
  border-radius: 8px;
  transition: all 260ms ease;
}
.login-btn:hover, .login-btn:focus { background: var(--spm-gold-highlight); }
.nav-auth-btns .login-btn.outline,
.nav-auth-btns .login-btn.outline:hover,
.nav-auth-btns .login-btn.outline:focus {
  color: #fff !important;
  background: transparent !important;
  border-color: var(--spm-border-gold);
}
.nav-auth-btns .login-btn.outline:hover,
.nav-auth-btns .login-btn.outline:focus {
  border-color: var(--spm-gold);
  background: rgba(234,181,38,0.08) !important;
}
.dream-btn, .more-btn {
  color: #0A0A0A;
  background-image: linear-gradient(to right, var(--spm-gold) 0%, var(--spm-gold-highlight) 51%, var(--spm-gold) 100%);
  border-color: var(--spm-gold-dark);
  transition: all 300ms ease, background-position 500ms ease;
}
.dream-btn:hover, .more-btn:hover { color: #0A0A0A; }
.more-btn.orange {
  background-image: linear-gradient(to right, var(--spm-gold-dark) 0%, var(--spm-gold-highlight) 51%, var(--spm-gold-dark) 100%);
}
.more-btn.pink {
  background: linear-gradient(135deg, var(--spm-gold), var(--spm-gold-highlight));
  color: #0A0A0A;
  box-shadow: 0 20px 43px 0 rgba(234,181,38,.32);
}

/* ---- Global transition/premium touches ---- */
a, .btn, .services-block-four, .team-member {
  transition: all 260ms ease;
}

/* ---- Lightbox (magnific-popup certificate viewer): gold accent only, overlay stays dark ---- */
.mfp-close, .mfp-arrow {
  transition: color 260ms ease;
}
.mfp-close:hover, .mfp-arrow:hover {
  color: var(--spm-gold) !important;
}

/* =========================================================================================
   Below: the page's own bespoke section styles (originally in index.html's inline
   <style> block — hero mockup, MT5 mockup, certificates, account tiers, payment card,
   "why us" cards), copied verbatim and re-colored from purple/cyan (#7b2ff7/#00c9ff and
   dark-navy backgrounds) to the gold/black palette above. Every selector and non-color
   property (layout, sizing, timing, structure) is identical to the source — only color
   values changed, plus one pre-existing bug fixed (.why-us-card h5 was #000000 on a
   near-black card, i.e. invisible; now #fff like its sibling heading classes).
   ========================================================================================= */

/* ======= Star Pro Markets Custom Overrides ======= */

/* Header nav auth buttons (Login / Register) — replaces the old single "Start Trading"
   button, which linked to a nonexistent public/login.html. Real destinations now:
   the MemberPanel React app's own /login and /register routes. */
.nav-auth-btns { display: flex; align-items: center; gap: 10px; }
.nav-auth-btns .login-btn { margin-left: 0 !important; }
.nav-auth-btns .login-btn.outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-auth-btns .login-btn.outline:hover,
.nav-auth-btns .login-btn.outline:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}
@media (max-width: 991px) {
    .nav-auth-btns { margin: 20px 0 0; }
}

/* MT5 Section */
.mt5-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #111111 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.mt5-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('tradon/img/bg-img/icoback-3.jpg') center/cover no-repeat;
    opacity: 0.08;
}
.mt5-feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
}
.mt5-feature-item .mt5-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EAB526, #FFD76A);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 15px;
    font-size: 18px;
}
.mt5-feature-item .mt5-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.mt5-feature-item h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.mt5-feature-item p {
    color: #8E8E8E;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}
.mt5-visual-box {
    background: linear-gradient(135deg, rgba(234,181,38,0.15), rgba(255,215,106,0.1));
    border: 1px solid rgba(234,181,38,0.3);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mt5-visual-box::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234,181,38,0.2), transparent);
}
.mt5-chart-mock {
    background: rgba(23,23,23,0.8);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.08);
}
.mt5-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.mt5-pair {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}
.mt5-price-up {
    color: #00D26A;
    font-weight: 600;
    font-size: 14px;
}
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    margin-bottom: 10px;
}
.chart-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(234,181,38,0.8), rgba(255,215,106,0.4));
    min-height: 10px;
}
.chart-bar.up { background: linear-gradient(180deg, #00D26A, #00A855); }
.chart-bar.dn { background: linear-gradient(180deg, #FF4D4F, #C22224); }
.mt5-stats-row {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.mt5-stat {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.mt5-stat .val { color: #fff; font-size: 14px; font-weight: 700; }
.mt5-stat .lbl { color: #8E8E8E; font-size: 11px; }
.instrument-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.instrument-badge {
    background: rgba(234,181,38,0.2);
    border: 1px solid rgba(234,181,38,0.4);
    border-radius: 20px;
    padding: 5px 14px;
    color: #F2C879;
    font-size: 12px;
    font-weight: 600;
}

/* Payment Card Section */
.payment-card-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.payment-card-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(234,181,38,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(255,215,106,0.1) 0%, transparent 60%);
}
.coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #EAB526, #FFD76A);
    border-radius: 30px;
    padding: 6px 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.card-visual-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mock-payment-card {
    width: 320px;
    height: 200px;
    border-radius: 20px;
    background: linear-gradient(135deg, #111111 0%, #171717 40%, #111111 100%);
    border: 1px solid rgba(234,181,38,0.5);
    padding: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(234,181,38,0.3), 0 0 120px rgba(255,215,106,0.15);
}
.mock-payment-card::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,106,0.15), transparent);
}
.mock-payment-card::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234,181,38,0.2), transparent);
}
.card-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #B27A10, #FFD76A);
    border-radius: 5px;
    margin-bottom: 20px;
}
.card-number {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-family: 'IBM Plex Sans', monospace;
}
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.card-name {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.card-logo-area {
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    text-align: right;
}
.card-glow-ring {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(234,181,38,0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 3s ease-in-out infinite;
}
.card-glow-ring:nth-child(2) {
    width: 500px;
    height: 500px;
    animation-delay: 1s;
    border-color: rgba(255,215,106,0.15);
}
@keyframes pulse-ring {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.card-feature-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}
.card-feature-list li {
    display: flex;
    align-items: center;
    color: #8E8E8E;
    font-size: 14px;
    margin-bottom: 12px;
}
.card-feature-list li::before {
    content: '✦';
    color: #EAB526;
    margin-right: 10px;
    font-size: 12px;
}

/* Why Traders Choose Us */
.why-us-card {
    background: linear-gradient(135deg, rgba(234,181,38,0.08), rgba(255,215,106,0.05));
    border: 1px solid rgba(234,181,38,0.2);
    border-radius: 16px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.why-us-card:hover {
    border-color: rgba(234,181,38,0.5);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(234,181,38,0.15);
}
.why-us-icon {
    font-size: 36px;
    margin-bottom: 15px;
    display: block;
}
.why-us-card h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.why-us-card p {
    color: #8E8E8E;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Account Types */
.account-type-card {
    background: linear-gradient(135deg, rgba(17,17,17,0.9), rgba(23,23,23,0.9));
    border: 1px solid rgba(234,181,38,0.25);
    border-radius: 20px;
    padding: 35px 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.account-type-card.featured {
    border-color: rgba(234,181,38,0.6);
    background: linear-gradient(135deg, rgba(234,181,38,0.15), rgba(255,215,106,0.08));
    box-shadow: 0 0 40px rgba(234,181,38,0.2);
}
.account-type-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 15px;
    right: -30px;
    background: linear-gradient(135deg, #EAB526, #FFD76A);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 40px;
    transform: rotate(45deg);
}
.account-type-card:hover {
    transform: translateY(-5px);
    border-color: rgba(234,181,38,0.5);
}
.account-type-card .account-type-name {
    color: #F2C879;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.account-type-card h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}
.account-type-card .min-deposit {
    color: #8E8E8E;
    font-size: 13px;
    margin-bottom: 25px;
}
.account-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}
.account-feature-list li {
    color: #8E8E8E;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
}
.account-feature-list li::before {
    content: '✓';
    color: #00D26A;
    font-weight: 700;
    margin-right: 8px;
}
.account-feature-list li.na {
    color: #6E6E6E;
}
.account-feature-list li.na::before { color: #6E6E6E; content: '✕'; }

/* Market opportunities donut */
.market-donut-wrap {
    position: relative;
    display: inline-block;
}
.market-donut-wrap svg {
    filter: drop-shadow(0 0 20px rgba(234,181,38,0.4));
}
.donut-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.donut-center-text .big { color: #fff; font-size: 26px; font-weight: 800; display: block; }
.donut-center-text .small { color: #8E8E8E; font-size: 11px; }

/* Hero trading visual */
.trading-dashboard-mock {
    background: rgba(17,17,17,0.9);
    border: 1px solid rgba(234,181,38,0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 0 80px rgba(234,181,38,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dash-header {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot.r { background: #FF4D4F; }
.dash-dot.y { background: #ffca28; }
.dash-dot.g { background: #00D26A; }
.ticker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.ticker-pair { color: #fff; font-weight: 600; font-size: 13px; }
.ticker-price { color: #CFCFCF; font-size: 12px; font-family: 'IBM Plex Sans', monospace; }
.ticker-change.up { color: #00D26A; font-size: 12px; font-weight: 600; }
.ticker-change.dn { color: #FF4D4F; font-size: 12px; font-weight: 600; }
.mini-candle-chart {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
    padding: 0 5px;
}
.candle { width: 8px; border-radius: 2px; }
.candle.up { background: #00D26A; }
.candle.dn { background: #FF4D4F; }

/* ======= Hero Right Image Animation ======= */
.hero-visual {
    position: relative;
    display: block;
    perspective: 1000px;
}
/* Soft rotating glow behind the image */
.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    padding-bottom: 78%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234,181,38,0.35) 0%, rgba(255,215,106,0.18) 45%, rgba(0,0,0,0) 70%);
    filter: blur(30px);
    z-index: 0;
    animation: hero-glow 8s ease-in-out infinite;
}
/* Orbiting accent ring */
.hero-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    padding-bottom: 88%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(255,215,106,0.25);
    z-index: 0;
    animation: hero-orbit 26s linear infinite;
}
.hero-visual img,
.hero-chart {
    position: relative;
    z-index: 1;
    animation: hero-float 7s ease-in-out infinite, hero-reveal 1.2s ease-out both;
    transition: transform 0.6s ease;
    will-change: transform;
}
.hero-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.hero-visual:hover img,
.hero-visual:hover .hero-chart {
    transform: translateY(-8px) scale(1.03);
}

/* ---- Forex chart internals ---- */
.hc-grid line   { animation: hc-fade 0.9s ease-out 0.3s both; }
.hc-cndl        { animation: hc-rise 0.55s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); }
.hc-vol         { animation: hc-rise 0.5s ease-out both; animation-delay: var(--d, 0s); }
.hc-area        { animation: hc-fade 1.1s ease-out 2.1s both; }
.hc-line {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: hc-draw 2.4s ease-out 0.5s forwards;
}
.hc-dot         { animation: hc-fade 0.5s ease-out 2.7s both; }
.hc-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: hc-ping 2.2s ease-out 2.7s infinite;
}
.hc-blink       { animation: hc-blink 1.6s ease-in-out infinite; }

/* Scanning sweep across the chart */
.hc-sweep  { animation: hc-sweep 4.5s ease-in-out 2.6s infinite; }
/* Floating ticker cards */
.hc-card-a { animation: hc-fade .7s ease-out 1.5s both, hc-floatA 5.5s ease-in-out 1.5s infinite; }
.hc-card-b { animation: hc-fade .7s ease-out 1.8s both, hc-floatB 6.5s ease-in-out 1.8s infinite; }
/* Brand logo on the terminal screen */
.hc-logo   { animation: hc-fade 1s ease-out .4s both; }
.hc-wm     { animation: hc-wm 6s ease-in-out 1.6s infinite; }
/* Drifting particles */
.hc-p1 { animation: hc-drift1 9s ease-in-out infinite; }
.hc-p2 { animation: hc-drift2 11s ease-in-out infinite; }
.hc-p3 { animation: hc-drift1 13s ease-in-out 2s infinite; }

@keyframes hc-sweep  { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(514px); opacity: 0; } }
@keyframes hc-floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hc-floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hc-wm     { 0%, 100% { opacity: .05; } 50% { opacity: .11; } }
@keyframes hc-drift1 { 0%, 100% { transform: translate(0,0); opacity: .25; } 50% { transform: translate(14px,-20px); opacity: .7; } }
@keyframes hc-drift2 { 0%, 100% { transform: translate(0,0); opacity: .5; } 50% { transform: translate(-16px,18px); opacity: .2; } }

@keyframes hc-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hc-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-draw  { to   { stroke-dashoffset: 0; } }
@keyframes hc-ping  { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes hc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes hero-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(-1.2deg); }
}
@keyframes hero-glow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes hero-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes hero-reveal {
    from { opacity: 0; transform: translateY(40px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 767px) {
    .hero-visual::after { display: none; }
    .hero-visual::before { width: 90%; padding-bottom: 90%; }
}

/* ======= Brand logo sizing ======= */
/* classy-nav ships a fixed 70px navbar; give the bigger logo room to breathe */
.classy-navbar { height: 84px; }
.nav-brand img { height: 60px; width: auto; }
.footer-logo img { height: 60px; width: auto; }
@media (max-width: 991px) {
    .classy-navbar { height: 74px; }
    .nav-brand img { height: 50px; }
    .footer-logo img { height: 54px; }
}
@media (max-width: 480px) {
    .nav-brand img { height: 42px; }
    .footer-logo img { height: 46px; }
}

/* ======= Own Broker Section ======= */
.broker-section {
    background: linear-gradient(180deg, #0a0a0a 0%, #171717 55%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}
.broker-section::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -180px;
    width: 620px;
    height: 620px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255,215,106,0.13) 0%, rgba(0,0,0,0) 68%);
    pointer-events: none;
}
.broker-section .section-heading h2 { color: #fff; }
.broker-section .section-heading p  { color: #8E8E8E; }

.broker-eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, rgba(234,181,38,0.18), rgba(255,215,106,0.18));
    border: 1px solid rgba(255,215,106,0.35);
    color: #FFD76A;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 7px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}
.broker-title {
    color: #fff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 18px;
}
.broker-title .grad {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
.broker-lead { color: #8E8E8E; font-size: 15px; line-height: 1.8; margin-bottom: 32px; }

.broker-point { display: flex; gap: 16px; margin-bottom: 24px; }
.broker-point .bp-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(234,181,38,0.14);
    border: 1px solid rgba(234,181,38,0.32);
    transition: transform 0.35s ease, border-color 0.35s ease;
}
.broker-point:hover .bp-icon {
    transform: translateY(-4px) scale(1.06);
    border-color: rgba(255,215,106,0.6);
}
.broker-point h5 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 5px; }
.broker-point p  { color: #8E8E8E; font-size: 14px; line-height: 1.7; margin: 0; }

.broker-stats {
    display: flex;
    flex-wrap: wrap;
    margin-top: 38px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 28px;
}
.broker-stat { flex: 1 1 25%; min-width: 120px; padding-right: 12px; }
.broker-stat strong {
    display: block;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #EAB526, #FFD76A);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.broker-stat span { color: #8E8E8E; font-size: 12px; letter-spacing: 0.4px; }

/* Flow diagram */
.broker-flow { display: block; width: 100%; height: auto; }
.bk-packet    { animation: hc-fade .5s ease-out 1s both; }
.bk-ring      { transform-box: fill-box; transform-origin: center; animation: bk-ring 3s ease-out infinite; }
.bk-bypass    { animation: bk-bypass 5s ease-in-out infinite; }
@keyframes bk-ring   { 0% { transform: scale(.96); opacity: .55; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes bk-bypass { 0%, 100% { opacity: .32; } 50% { opacity: .16; } }

@media (max-width: 991px) {
    .broker-title { font-size: 30px; }
    .broker-flow  { margin-top: 45px; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
    .broker-stat { flex: 1 1 50%; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .broker-point .bp-icon { transition: none; }
    .bk-ring, .bk-bypass { animation: none; }
}

/* ======= Certificates Section ======= */
.certificates-section {
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}
.certificates-section::before {
    content: '';
    position: absolute;
    top: -160px;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(234,181,38,0.14) 0%, rgba(0,0,0,0) 68%);
    pointer-events: none;
}
.certificates-section .section-heading h2 { color: #ffffff; }
.certificates-section .section-heading p  { color: #8E8E8E; }
.cert-card {
    position: relative;
    background: linear-gradient(145deg, #171717 0%, #111111 100%);
    border: 1px solid rgba(234,181,38,0.28);
    border-radius: 18px;
    padding: 18px;
    height: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.cert-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255,215,106,0.55);
    box-shadow: 0 22px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,215,106,0.12);
}
/* Ribbon badge */
.cert-badge {
    position: absolute;
    top: 6px;
    right: 18px;
    z-index: 3;
    background: linear-gradient(135deg, #EAB526, #FFD76A);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(234,181,38,0.45);
}
.cert-thumb {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}
.cert-thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}
.cert-card:hover .cert-thumb img { transform: scale(1.05); }
/* Hover overlay with zoom cue */
.cert-thumb::after {
    content: '\f00e';           /* font-awesome search-plus */
    font-family: 'FontAwesome';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    background: rgba(17,17,17,0.72);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.cert-thumb:hover::after { opacity: 1; }
/* Sheen sweep across the certificate */
.cert-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}
.cert-card:hover .cert-thumb::before { animation: cert-sheen 1.1s ease-out; }
@keyframes cert-sheen { to { left: 120%; } }

.cert-info { padding: 20px 6px 4px; }
.cert-info h4 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
}
.cert-info p {
    color: #8E8E8E;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px;
}
.cert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cert-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #FFD76A;
    background: rgba(255,215,106,0.10);
    border: 1px solid rgba(255,215,106,0.28);
    border-radius: 20px;
    padding: 5px 12px;
}
.cert-tag.gold {
    color: #EAB526;
    background: rgba(234,181,38,0.10);
    border-color: rgba(234,181,38,0.30);
}
/* Trust strip below the cards */
.cert-trust {
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 34px;
}
.cert-trust-item { text-align: center; padding: 10px 0; }
.cert-trust-item .ct-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.cert-trust-item h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}
.cert-trust-item span { color: #8E8E8E; font-size: 12px; }

@media (max-width: 991px) {
    .cert-card { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .cert-card, .cert-thumb img { transition: none; }
    .cert-card:hover { transform: none; }
    .cert-card:hover .cert-thumb::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-visual::before,
    .hero-visual::after,
    .hero-visual img,
    .hero-chart,
    .hero-chart * { animation: none !important; }
    .hc-line { stroke-dashoffset: 0; }
    /* Scroll animations off, but content must stay visible */
    .wow, .animated {
        visibility: visible !important;
        animation: none !important;
        -webkit-animation: none !important;
    }
}