#glt-bg-canvas,


.glt-bg-animation,


canvas#glt-bg-canvas,


canvas.glt-bg-animation {


    position: fixed !important;


    top: 0 !important;


    left: 0 !important;


    width: 100vw !important;


    height: 100vh !important;


    z-index: 0 !important;


    pointer-events: none !important;


    display: block !important;


    opacity: 1 !important;


    visibility: visible !important;


    filter: none !important;


    -webkit-filter: none !important;


    mix-blend-mode: normal !important;


}





#particles-canvas,


.hero::before,


section.hero::before,


#hero::before {


    display: none !important;


    content: none !important;


    opacity: 0 !important;


    visibility: hidden !important;


}




















/* ══════════════════════════════════════════════════════════════


   GLTtrade Luxury Gold Theme v14.0 — Production Master


   Matching https://glttrade.in/links Theme, Typography & Design


   ══════════════════════════════════════════════════════════════ */





@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:ital,wght@0,700;0,800;1,700;1,800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');





:root {


    /* Dark Theme Variables (Exact /links) */


    --dark-bg: #0A0A0A;


    --dark-surface: #141414;


    --dark-surface-elevated: #1B1B1B;


    --dark-border: rgba(184, 134, 11, 0.28);


    --dark-border-subtle: rgba(255, 255, 255, 0.08);


    --dark-text: #FFFFFF;


    --dark-text-muted: #E2D9C8;


    --dark-text-dim: #9E9689;





    /* Light / Cream Theme Variables (Exact /links) */


    --cream-bg: #F7EFE0;


    --cream-surface: #FFF9EE;


    --cream-surface-alt: #EFE4D0;


    --cream-border: rgba(184, 134, 11, 0.35);


    --cream-text: #141414;


    --cream-text-muted: #3D3933;


    --cream-text-dim: #6B655C;





    /* Gold Accents & Metallic Gradients (Exact /links) */


    --gold-start: #B8860B;


    --gold-mid: #F5D77A;


    --gold-end: #C99A2E;


    --gold-gradient: linear-gradient(135deg, #B8860B 0%, #F5D77A 50%, #C99A2E 100%);


    --gold-gradient-soft: linear-gradient(180deg, rgba(245, 215, 122, 0.15) 0%, rgba(184, 134, 11, 0.05) 100%);


    --gold-border: rgba(212, 165, 55, 0.38);


    --gold-border-strong: rgba(245, 215, 122, 0.75);


    --gold-glow: rgba(245, 215, 122, 0.22);


    --gold-solid: #D4A537;





    /* Typography */


    --font-serif: 'Playfair Display', Georgia, serif;


    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;


    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;





    /* Layout */


    --ease: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);


    --section-pad: 88px;


    --section-pad-m: 56px;


    --radius-sm: 6px;


    --radius-md: 10px;


    --radius-lg: 16px;


}





/* ── Global Reset of Blue/Cyan Backgrounds ── */


body::before, body::after {


    display: none !important;


    content: none !important;


}





body {


    background-color: var(--dark-bg) !important;


    color: var(--dark-text) !important;


    font-family: var(--font-body) !important;


    font-size: 16px !important;


    line-height: 1.7 !important;


    -webkit-font-smoothing: antialiased !important;


    overflow-x: hidden !important;


}





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


    font-family: var(--font-serif) !important;


}





a {


    color: var(--gold-solid);


    text-decoration: none;


    transition: var(--ease);


}





a:hover {


    color: #F5D77A !important;


}





/* ════════════════════════════════════


   NAVBAR (Single Line Desktop Layout)


   ════════════════════════════════════ */


.navbar, nav.navbar {


    background: rgba(10, 10, 10, 0.97) !important;


    backdrop-filter: blur(16px) !important;


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


    border-bottom: 1px solid var(--dark-border) !important;


    position: fixed !important;


    top: 0 !important;


    width: 100% !important;


    z-index: 9999 !important;


}





.navbar .container {


    display: flex !important;


    align-items: center !important;


    justify-content: space-between !important;


    flex-wrap: nowrap !important;


    max-width: 100% !important;


    padding: 0 24px !important;


}





.nav-right {


    display: flex !important;


    align-items: center !important;


    gap: 8px !important;


    flex-wrap: nowrap !important;


    flex-shrink: 0 !important;


}





.nav-links {


    display: flex !important;


    align-items: center !important;


    gap: 4px !important;


    flex-wrap: nowrap !important;


    list-style: none !important;


    margin: 0 !important;


    padding: 0 !important;


}





.nav-actions {


    display: flex !important;


    align-items: center !important;


    flex-shrink: 0 !important;


    margin-left: 6px !important;


}





.nav-brand, .nav-brand span {


    color: #F5D77A !important;


    font-family: var(--font-display) !important;


    font-weight: 800 !important;


    font-size: 1.15rem !important;


}


.nav-brand .glt { color: #F5D77A !important; }





.nav-btn-link {


    display: inline-flex !important;


    align-items: center !important;


    gap: 4px !important;


    color: var(--dark-text-muted) !important;


    font-family: var(--font-body) !important;


    font-size: 0.81rem !important;


    font-weight: 500 !important;


    padding: 6px 9px !important;


    border-radius: var(--radius-sm) !important;


    border: 1px solid rgba(184, 134, 11, 0.28) !important;


    background: transparent !important;


    transition: var(--ease) !important;


    text-decoration: none !important;


    white-space: nowrap !important;


    flex-shrink: 0 !important;


}





.nav-btn-link:hover {


    color: #F5D77A !important;


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


    background: rgba(184, 134, 11, 0.08) !important;


}





.btn-login-nav, .btn-user-nav {


    display: inline-flex !important;


    align-items: center !important;


    gap: 5px !important;


    color: var(--gold-solid) !important;


    font-family: var(--font-body) !important;


    font-size: 0.82rem !important;


    font-weight: 600 !important;


    padding: 6px 14px !important;


    border-radius: var(--radius-sm) !important;


    border: 1px solid var(--gold-border-strong) !important;


    background: rgba(184, 134, 11, 0.12) !important;


    transition: var(--ease) !important;


    text-decoration: none !important;


    white-space: nowrap !important;


    flex-shrink: 0 !important;


}





.btn-login-nav:hover, .btn-user-nav:hover {


    color: #0A0A0A !important;


    background: var(--gold-gradient) !important;


    border-color: #F5D77A !important;


}





.user-status-dot {


    width: 7px;


    height: 7px;


    border-radius: 50%;


    background: #4ade80;


    box-shadow: 0 0 6px #4ade80;


    display: inline-block;


}





/* ════════════════════════════════════


   HERO SECTION & ANIMATION ISOLATION


   Canvas is strictly inside the Hero section!


   ════════════════════════════════════ */


section.hero, .hero-section, #hero {


    position: relative !important;


    overflow: hidden !important;


    background: transparent !important;


    background-color: transparent !important;


    background-image: none !important;


    min-height: 100vh !important;


    z-index: 1 !important;


}





section.hero, .hero-section, #hero {


    position: relative !important;


    overflow: hidden !important;


    background: transparent !important;


    background-color: transparent !important;


    background-image: none !important;


    min-height: 100vh !important;


    z-index: 1 !important;


}











.hero-content {


    position: relative !important;


    z-index: 2 !important;


}





/* Hero Title: Giants' Logic Technology in Gold */


.gradient-text, h1 .gradient-text, .hero h1 .gradient-text {


    background: var(--gold-gradient) !important;


    -webkit-background-clip: text !important;


    background-clip: text !important;


    -webkit-text-fill-color: transparent !important;


    font-family: var(--font-serif) !important;


    font-weight: 800 !important;


}





.hero h1 span[style*="#fff"],


.hero h1 span[style*="white"] {


    color: #FFFFFF !important;


    font-family: var(--font-serif) !important;


}





.hero-badge {


    background: rgba(184, 134, 11, 0.12) !important;


    border: 1px solid rgba(212, 165, 55, 0.4) !important;


    color: #F5D77A !important;


}





.pulse-dot {


    background: #D4A537 !important;


    box-shadow: 0 0 0 0 rgba(212, 165, 55, 0.5) !important;


    animation: goldPulse 2s infinite !important;


}





@keyframes goldPulse {


    0%   { box-shadow: 0 0 0 0 rgba(212, 165, 55, 0.6); }


    70%  { box-shadow: 0 0 0 8px rgba(212, 165, 55, 0); }


    100% { box-shadow: 0 0 0 0 rgba(212, 165, 55, 0); }


}





.hero-subtitle {


    color: var(--dark-text-muted) !important;


}





.hero .btn, .hero a.btn, .hero .btn-primary, .hero .btn-lg, .pulse-btn {


    background: var(--gold-gradient) !important;


    color: #0A0A0A !important;


    border: 1px solid #F5D77A !important;


    font-weight: 700 !important;


    font-family: var(--font-display) !important;


    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35) !important;


    transition: var(--ease) !important;


    -webkit-text-fill-color: #0A0A0A !important;


}





.hero .btn:hover, .hero .btn-primary:hover, .pulse-btn:hover {


    transform: translateY(-2px) !important;


    box-shadow: 0 10px 28px rgba(184, 134, 11, 0.5) !important;


}





/* ════════════════════════════════════


   SECTIONS — Exact Alternating Theme


   ════════════════════════════════════ */


section {


    position: relative !important;


    z-index: 2 !important;


}





section.section-dark, .section-dark {


    background: #0A0A0A !important;


    background-color: #0A0A0A !important;


    background-image: none !important;


    color: var(--dark-text) !important;


    padding: var(--section-pad) 0 !important;


    border-top: 1px solid var(--dark-border) !important;


    border-bottom: 1px solid var(--dark-border) !important;


    position: relative !important;


    z-index: 1 !important;


}





section.section-cream, .section-cream {


    background-color: var(--cream-bg) !important;


    color: var(--cream-text) !important;


    padding: var(--section-pad) 0 !important;


    border-top: 1px solid var(--gold-border) !important;


    border-bottom: 1px solid var(--gold-border) !important;


    opacity: 1 !important;


}





/* Headings */


section.section-dark h1, .section-dark h1,


section.section-dark h2, .section-dark h2,


section.section-dark h3, .section-dark h3 {


    color: #FFFFFF !important;


    font-family: var(--font-serif) !important;


}





section.section-cream h1, .section-cream h1,


section.section-cream h2, .section-cream h2,


section.section-cream h3, .section-cream h3 {


    color: #141414 !important;


    font-family: var(--font-serif) !important;


}





section.section-dark p, .section-dark p,


section.section-dark li, .section-dark li {


    color: var(--dark-text-muted) !important;


}





section.section-cream p, .section-cream p,


section.section-cream li, .section-cream li {


    color: var(--cream-text-muted) !important;


}





.text-accent {


    color: var(--gold-solid) !important;


}





section.section-cream .text-accent {


    color: var(--gold-start) !important;


}





/* ════════════════════════════════════


   CARDS — Dark Section Cards


   ════════════════════════════════════ */


.section-dark .card,


.section-dark .product-card,


.section-dark .plan-card,


.section-dark .feature-card,


.section-dark .spec-card,


.section-dark .link-card,


.section-dark .glass-card,


.section-dark .glass-card-static,


.section-dark [class*="card"] {


    background: linear-gradient(135deg, #141414 0%, #1A1A1A 100%) !important;


    border: 1px solid var(--gold-border-strong) !important;


    color: var(--dark-text) !important;


    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 215, 122, 0.15) !important;


    border-radius: var(--radius-lg) !important;


    opacity: 1 !important;


}





.section-dark .card:hover,


.section-dark .product-card:hover,


.section-dark .feature-card:hover,


.section-dark .glass-card:hover {


    border-color: #F5D77A !important;


    box-shadow: 0 16px 40px rgba(184, 134, 11, 0.25) !important;


    transform: translateY(-2px) !important;


}





/* ════════════════════════════════════


   CARDS — Cream Section Cards (Exact /links)


   ════════════════════════════════════ */


.section-cream .card,


.section-cream .product-card,


.section-cream .plan-card,


.section-cream .feature-card,


.section-cream .glass-card,


.section-cream .glass-card-static,


.section-cream .about-card,


.section-cream .market-feature-card-glow,


.section-cream [class*="card"] {


    background: var(--cream-surface) !important;


    border: 1px solid var(--cream-border) !important;


    border-radius: var(--radius-lg) !important;


    color: var(--cream-text) !important;


    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.08) !important;


    opacity: 1 !important;


    backdrop-filter: none !important;


    -webkit-backdrop-filter: none !important;


}





.section-cream .glass-card::before,


.section-cream .glass-card-static::before,


.section-cream .about-card::before {


    display: none !important;


    content: none !important;


}





.section-cream .about-card {


    border-top: 3px solid #D4A537 !important;


}





.section-cream .about-card:hover,


.section-cream .card:hover,


.section-cream .product-card:hover {


    border-top-color: #B8860B !important;


    border-color: #B8860B !important;


    background: #FFFFFF !important;


    box-shadow: 0 12px 32px rgba(184, 134, 11, 0.14) !important;


    transform: translateY(-3px) !important;


}





.section-cream .about-card h3,


.section-cream .about-card h4,


.section-cream .glass-card-static h3,


.section-cream .card h2,


.section-cream .card h3,


.section-cream .product-card h3 {


    color: #141414 !important;


    font-family: var(--font-serif) !important;


}





.section-cream .about-card p,


.section-cream .glass-card-static p,


.section-cream .card p,


.section-cream .product-card p {


    color: var(--cream-text-muted) !important;


}





/* ════════════════════════════════════


   FREE TRIAL BANNER (High-Contrast Gold)


   ════════════════════════════════════ */


.trial-hero-banner,


.section-cream .trial-hero-banner {


    background: linear-gradient(135deg, #141414 0%, #1A1A1A 50%, #0d0d0d 100%) !important;


    border: 1px solid rgba(245, 215, 122, 0.75) !important;


    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(184, 134, 11, 0.18), inset 0 1px 0 rgba(245, 215, 122, 0.15) !important;


    border-radius: 24px !important;


    opacity: 1 !important;


}





/* Fix Unreadable Text in Trial Banner */


.trial-hero-banner h3,


.section-cream .trial-hero-banner h3,


.trial-hero-banner h3 span:not([style*="linear-gradient"]) {


    color: #FFFFFF !important;


    font-family: var(--font-serif) !important;


}





.trial-hero-banner p,


.section-cream .trial-hero-banner p {


    color: #E2D9C8 !important;


    line-height: 1.75 !important;


}





.trial-cta-indicator,


.trial-cta-combo {


    border-radius: var(--radius-md) !important;


    transition: var(--ease) !important;


}





.trial-cta-indicator {


    background: linear-gradient(135deg, rgba(184,134,11,0.2) 0%, rgba(16,13,4,0.95) 60%, rgba(10,8,2,0.98) 100%) !important;


    border: 1px solid var(--gold-border-strong) !important;


}





.trial-cta-combo {


    background: linear-gradient(135deg, rgba(184,134,11,0.12) 0%, rgba(14,11,3,0.92) 60%, rgba(8,6,2,0.97) 100%) !important;


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


}





.trial-cta-indicator:hover, .trial-cta-combo:hover {


    border-color: #F5D77A !important;


    transform: translateY(-3px) scale(1.01) !important;


    box-shadow: 0 14px 40px rgba(184, 134, 11, 0.35) !important;


}





.trial-cta-icon-box {


    border-color: var(--gold-border-strong) !important;


    background: rgba(184, 134, 11, 0.15) !important;


}





.trial-cta-icon-box svg {


    stroke: var(--gold-solid) !important;


}





.badge-indicator, .badge-combo {


    color: var(--gold-solid) !important;


    font-family: var(--font-display) !important;


}





.trial-cta-headline {


    color: #FFFFFF !important;


    font-family: var(--font-serif) !important;


}





.trial-cta-subline, .trial-cta-arrow {


    color: var(--dark-text-muted) !important;


}





/* Product Pricing & Badges */


.price-current, .price-val, .plan-price {


    color: var(--gold-solid) !important;


    font-family: var(--font-display) !important;


    font-weight: 800 !important;


}





.section-cream .price-current,


.section-cream .price-val,


.section-cream .plan-price {


    color: #B8860B !important;


}





.product-badge, .platform-badge, .indicator-badge {


    background: rgba(184, 134, 11, 0.12) !important;


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


    color: var(--gold-solid) !important;


}





.section-cream .product-badge,


.section-cream .platform-badge,


.section-cream .indicator-badge {


    background: rgba(184, 134, 11, 0.1) !important;


    border-color: rgba(184, 134, 11, 0.3) !important;


    color: #B8860B !important;


}





/* ════════════════════════════════════


   TESTIMONIAL & MT4 PROOF (No Bleed)


   ════════════════════════════════════ */


#performance, .performance-section, .testimonial-card, .proof-card {


    position: relative !important;


    z-index: 2 !important;


}





.testimonial-card, .performance-card, .chart-frame {


    background: #141414 !important;


    border: 1px solid var(--gold-border-strong) !important;


    opacity: 1 !important;


}





/* ════════════════════════════════════


   TICKER BAR


   ════════════════════════════════════ */


.ticker-bar {


    background: rgba(10, 10, 10, 0.98) !important;


    border-top: 1px solid var(--dark-border) !important;


    border-bottom: 1px solid var(--dark-border) !important;


    position: relative !important;


    z-index: 2 !important;


}





.ticker-item { color: var(--dark-text-muted) !important; }


.ticker-item .pair { color: var(--gold-solid) !important; font-weight: 700 !important; }


.ticker-separator { color: rgba(212, 165, 55, 0.35) !important; }





/* ════════════════════════════════════


   BUTTONS (Luxury Gold)


   ════════════════════════════════════ */


.btn-primary, .btn-gold, .btn-gold-primary, .cta-btn, .purchase-btn {


    background: var(--gold-gradient) !important;


    color: #0A0A0A !important;


    -webkit-text-fill-color: #0A0A0A !important;


    border: 1px solid #F5D77A !important;


    font-weight: 700 !important;


    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35) !important;


    transition: var(--ease) !important;


}





.btn-primary:hover, .btn-gold:hover, .cta-btn:hover, .purchase-btn:hover {


    transform: translateY(-2px) !important;


    box-shadow: 0 10px 28px rgba(184, 134, 11, 0.5) !important;


    color: #000000 !important;


    -webkit-text-fill-color: #000000 !important;


}





.btn-outline-primary, .btn-gold-outline {


    background: transparent !important;


    color: var(--gold-solid) !important;


    border: 1px solid var(--gold-border-strong) !important;


    font-weight: 600 !important;


}





.btn-outline-primary:hover {


    background: rgba(245, 215, 122, 0.12) !important;


    color: #FFFFFF !important;


}





/* ════════════════════════════════════


   FOOTER


   ════════════════════════════════════ */


footer, .footer {


    background: #080808 !important;


    border-top: 1px solid var(--dark-border) !important;


    position: relative !important;


    z-index: 2 !important;


}





footer h4, .footer h4 {


    color: var(--gold-mid) !important;


    font-family: var(--font-serif) !important;


}





footer a, .footer a {


    color: var(--dark-text-muted) !important;


}





footer a:hover, .footer a:hover {


    color: var(--gold-solid) !important;


}





footer p, .footer-desc {


    color: var(--dark-text-dim) !important;


}





.footer-brand {


    color: var(--gold-mid) !important;


    font-family: var(--font-display) !important;


    font-weight: 800 !important;


}





/* ════════════════════════════════════


   SCROLLBAR & SELECTION


   ════════════════════════════════════ */


::-webkit-scrollbar { width: 6px !important; }


::-webkit-scrollbar-track { background: #0A0A0A !important; }


::-webkit-scrollbar-thumb { background: rgba(184, 134, 11, 0.45) !important; border-radius: 3px !important; }


::-webkit-scrollbar-thumb:hover { background: var(--gold-solid) !important; }


::selection { background: rgba(212, 165, 55, 0.3) !important; color: #F5D77A !important; }





/* ════════════════════════════════════


   RESPONSIVE DESIGN


   ════════════════════════════════════ */


@media (max-width: 1024px) {


    .nav-links { gap: 2px !important; }


    .nav-btn-link { font-size: 0.78rem !important; padding: 5px 8px !important; }


}





@media (max-width: 768px) {


    section.section-dark, section.section-cream { padding: var(--section-pad-m) 0 !important; }


    h1 { font-size: 2rem !important; }


    h2 { font-size: 1.6rem !important; }


    .navbar .container { padding: 0 16px !important; }


    .trial-hero-banner { padding: 24px 20px !important; }


}








/* Ensure ALL cards and images in dark sections are 100% solid opaque - NO see-through */


.section-dark .card,


.section-dark .product-card,


.section-dark .plan-card,


.section-dark .feature-card,


.section-dark .spec-card,


.section-dark .link-card,


.section-dark .glass-card,


.section-dark .glass-card-static,


.section-dark .testimonial-card,


.section-dark .performance-card,


.section-dark .trade-card,


.section-dark .chart-frame,


.section-dark [class*="card"] {


    background: #141414 !important;


    background-color: #141414 !important;


    backdrop-filter: none !important;


    -webkit-backdrop-filter: none !important;


    opacity: 1 !important;


    border: 1px solid var(--gold-border-strong) !important;


    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(245, 215, 122, 0.15) !important;


    position: relative !important;


    z-index: 2 !important;


}





.section-dark img,


.section-dark .chart-img,


.section-dark .trade-card-img,


.section-dark .comparison-slider {


    background: #141414 !important;


    opacity: 1 !important;


    position: relative !important;


    z-index: 2 !important;


}








/* Hero section: transparent so candlestick orbit & GLT monogram shine through */
section.hero,
.hero-section,
#hero {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ALL dark sections: solid opaque deep luxury black - PREVENTS hero animation bleeding through */
section.section-dark,
.section-dark,
#capabilities,
#difference,
#performance,
#guide,
#markets,
#mt4-guide,
footer,
.footer,
#footer {
    background: #0A0A0A !important;
    background-color: #0A0A0A !important;
    background-image: none !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ALL cream sections: solid opaque luxury warm cream - PREVENTS hero animation bleeding through */
section.section-cream,
.section-cream,
#comparison,
#products,
#products-section,
#about,
#referral,
#faq {
    background: #F7EFE0 !important;
    background-color: #F7EFE0 !important;
    background-image: none !important;
    position: relative !important;
    z-index: 2 !important;
}

/* High-contrast Headings for Cream Sections */
section.section-cream h1, .section-cream h1,
section.section-cream h2, .section-cream h2,
section.section-cream h3, .section-cream h3,
#comparison h2, #products h2, #about h2, #referral h2, #faq h2 {
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    font-family: var(--font-serif) !important;
}

section.section-cream h2 span.text-accent,
section.section-cream h2 span.gradient-text,
#comparison h2 span.text-accent,
#products h2 span.text-accent,
#about h2 span.text-accent,
#referral h2 span.text-accent,
#faq h2 span.text-accent {
    background: linear-gradient(135deg, #B8860B 0%, #D4A537 50%, #996515 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

section.section-cream .section-header p,
.section-cream .section-header p,
#comparison .section-header p,
#products .section-header p,
#about .section-header p,
#referral .section-header p,
#faq .section-header p {
    color: #4A3E2D !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* High-contrast Headings for Dark Sections */
section.section-dark h1, .section-dark h1,
section.section-dark h2, .section-dark h2,
section.section-dark h3, .section-dark h3,
#capabilities h2, #difference h2, #performance h2, #markets h2, #mt4-guide h2, #guide h2 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family: var(--font-serif) !important;
}

section.section-dark h2 span.text-accent,
section.section-dark h2 span.gradient-text,
#capabilities h2 span.text-accent,
#performance h2 span.text-accent,
#markets h2 span.text-accent,
#mt4-guide h2 span.text-accent,
#guide h2 span.text-accent {
    background: linear-gradient(135deg, #B8860B 0%, #F5D77A 50%, #C99A2E 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

section.section-dark .section-header p,
.section-dark .section-header p {
    color: #C8BFB0 !important;
}








/* ═══════════════════════════════════════════════════════════════


   THEME VISIBILITY & HIGH-CONTRAST TYPOGRAPHY ENHANCEMENTS


   ═══════════════════════════════════════════════════════════════ */





/* 1. All Gold Buttons & CTAs - Guarantee 100% Bold Black Readable Text */


.btn,


.btn-primary,


.btn-gold,


.btn-gold-primary,


.cta-btn,


.purchase-btn,


.pulse-btn,


a.btn,


a.btn-primary,


a[style*="linear-gradient"],


a[style*="background: linear-gradient"],


button.btn,


button.btn-primary {


    color: #0A0A0A !important;


    -webkit-text-fill-color: #0A0A0A !important;


    font-weight: 700 !important;


    text-shadow: none !important;


}





a.btn:hover,


a.btn-primary:hover,


.btn:hover,


.btn-primary:hover,


a[style*="linear-gradient"]:hover {


    color: #000000 !important;


    -webkit-text-fill-color: #000000 !important;


}





/* 2. Hero Subtitle & Stat Counters */


.hero-subtitle {


    color: #E2D9C8 !important;


    font-size: 1.15rem !important;


    line-height: 1.8 !important;


    max-width: 680px !important;


    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;


}





.hero-stats {


    gap: var(--space-2xl) !important;


    margin-top: var(--space-3xl) !important;


}





.hero-stat .value {


    color: #F5D77A !important;


    font-family: var(--font-display), 'Montserrat', sans-serif !important;


    font-weight: 800 !important;


    font-size: 2.1rem !important;


    text-shadow: 0 0 20px rgba(245, 215, 122, 0.4) !important;


}





.hero-stat .label {


    color: #D1C7B7 !important;


    font-size: 0.82rem !important;


    font-weight: 700 !important;


    text-transform: uppercase !important;


    letter-spacing: 1.8px !important;


    margin-top: 6px !important;


}





/* 3. Product Cards in Cream Section - Badges & High-Contrast Typography */


.section-cream .product-platform-strip,


.section-cream .product-platform-strip.combo {


    display: inline-flex !important;


    align-items: center !important;


    gap: 8px !important;


    background: rgba(184, 134, 11, 0.1) !important;


    border: 1px solid rgba(184, 134, 11, 0.3) !important;


    border-radius: 8px !important;


    padding: 5px 12px !important;


}





.section-cream .plat-chip {


    font-size: 0.68rem !important;


    font-weight: 800 !important;


    padding: 3px 8px !important;


    border-radius: 5px !important;


    letter-spacing: 0.5px !important;


    font-family: var(--font-mono, monospace) !important;


}





.section-cream .plat-chip.mt4,


.section-cream .plat-chip.mt5 {


    background: #141414 !important;


    color: #F5D77A !important;


    border: 1px solid rgba(212, 165, 55, 0.4) !important;


}





.section-cream .plat-chip.server {


    background: #B8860B !important;


    color: #FFFFFF !important;


    border: 1px solid #996515 !important;


}


.plat-chip.mt4-datafeed,
.section-cream .plat-chip.mt4-datafeed {
    background: #141414 !important;
    color: #F5D77A !important;
    border: 1px solid rgba(212, 165, 55, 0.45) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    font-family: var(--font-mono, monospace) !important;
}





.section-cream .plat-chip-text {


    font-size: 0.82rem !important;


    font-weight: 600 !important;


    color: #2D2416 !important;


}





/* Features List in Cream Section */


.section-cream .features li {


    color: #2D2416 !important;


    font-size: 0.88rem !important;


    font-weight: 500 !important;


    line-height: 1.5 !important;


}





.section-cream .features li::before {


    content: '✦' !important;


    color: #B8860B !important;


    font-size: 0.75rem !important;


    flex-shrink: 0 !important;


}





.section-cream .features li.highlight-feat {


    color: #141414 !important;


    font-weight: 700 !important;


}





.section-cream .features li.highlight-feat::before {


    color: #D4A537 !important;


}





.section-cream .price-original {


    color: #7A6C58 !important;


    text-decoration: line-through !important;


    font-weight: 500 !important;


}





.section-cream .price-label {


    color: #5A4A32 !important;


    font-weight: 500 !important;


}








/* ── Centered 3rd Card in Why GLTtrade (#about) ── */


#about .product-grid {


    display: grid !important;


    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;


    gap: 28px !important;


    max-width: 1120px !important;


    margin: 0 auto !important;


}





#about .product-grid .about-card:nth-child(3),


#about .product-grid .about-card:last-child {


    grid-column: 1 / -1 !important;


    max-width: 560px !important;


    width: 100% !important;


    margin: 0 auto !important;


}








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


   v16.0 MOBILE NAVIGATION & RESPONSIVE POLISH ENHANCEMENTS


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





/* Mobile Hamburger Toggle Button */


.nav-mobile-toggle {


    display: none;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    gap: 5px;


    width: 38px;


    height: 38px;


    padding: 0;


    margin-left: 8px;


    background: rgba(255, 255, 255, 0.04);


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


    border-radius: 8px;


    cursor: pointer;


    transition: all 0.25s ease;


    z-index: 10001;


}





.nav-mobile-toggle:hover,


.nav-mobile-toggle:active {


    background: rgba(212, 175, 55, 0.15);


    border-color: #D4AF37;


}





.nav-mobile-toggle .bar {


    display: block;


    width: 20px;


    height: 2px;


    background-color: #F5D77A;


    border-radius: 2px;


    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;


}





.nav-mobile-toggle.active .bar-1 {


    transform: translateY(7px) rotate(45deg);


}


.nav-mobile-toggle.active .bar-2 {


    opacity: 0;


    transform: scaleX(0);


}


.nav-mobile-toggle.active .bar-3 {


    transform: translateY(-7px) rotate(-45deg);


}





.mobile-nav-lang-item {


    display: none;


}





@media (max-width: 991px) {


    /* Prevent body scrolling while menu is open */


    body.nav-drawer-open {


        overflow: hidden !important;


    }





    .navbar, nav.navbar {


        height: 60px !important;


        padding: 0 !important;


    }





    .navbar .container {


        padding: 0 14px !important;


        height: 60px !important;


        display: flex !important;


        align-items: center !important;


        justify-content: space-between !important;


        flex-wrap: nowrap !important;


        max-width: 100vw !important;


    }





    .nav-left {


        display: flex !important;


        align-items: center !important;


        gap: 8px !important;


        flex-shrink: 0 !important;


    }





    .nav-left .nav-brand {


        font-size: 1.15rem !important;


    }





    .desktop-translate-slot {


        display: none !important;


    }





    .nav-right {


        display: flex !important;


        align-items: center !important;


        gap: 6px !important;


        flex-shrink: 0 !important;


    }





    .nav-mobile-toggle {


        display: flex !important;


    }





    /* Mobile Drawer */


    .nav-links {


        display: none !important;


        position: fixed !important;


        top: 60px !important;


        left: 0 !important;


        right: 0 !important;


        width: 100vw !important;


        height: calc(100vh - 60px) !important;


        background: rgba(10, 10, 10, 0.98) !important;


        backdrop-filter: blur(24px) !important;


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


        border-top: 1px solid rgba(212, 175, 55, 0.25) !important;


        flex-direction: column !important;


        align-items: stretch !important;


        padding: 20px 18px 40px !important;


        gap: 10px !important;


        overflow-y: auto !important;


        -webkit-overflow-scrolling: touch !important;


        z-index: 10000 !important;


    }





    .nav-links.open {


        display: flex !important;


        animation: navDrawerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;


    }





    @keyframes navDrawerFadeIn {


        from {


            opacity: 0;


            transform: translateY(-8px);


        }


        to {


            opacity: 1;


            transform: translateY(0);


        }


    }





    .nav-links li {


        width: 100% !important;


        list-style: none !important;


    }





    .mobile-nav-lang-item {


        display: block !important;


        margin-bottom: 12px !important;


        padding: 10px 14px !important;


        background: rgba(212, 175, 55, 0.08) !important;


        border: 1px solid rgba(212, 175, 55, 0.25) !important;


        border-radius: 10px !important;


    }





    .mobile-nav-lang-item #google_translate_element {


        display: block !important;


        width: 100% !important;


    }





    .mobile-nav-lang-item #google_translate_element select {


        width: 100% !important;


        max-width: 100% !important;


        background: #141414 !important;


        color: #F5D77A !important;


        border: 1px solid rgba(212, 175, 55, 0.4) !important;


        border-radius: 6px !important;


        height: 38px !important;


        font-size: 0.9rem !important;


        padding: 4px 10px !important;


    }





    .nav-btn-link {


        width: 100% !important;


        padding: 13px 16px !important;


        font-size: 0.98rem !important;


        font-weight: 600 !important;


        color: #F0E6D2 !important;


        background: rgba(255, 255, 255, 0.03) !important;


        border: 1px solid rgba(212, 175, 55, 0.15) !important;


        border-radius: 10px !important;


        display: flex !important;


        align-items: center !important;


        gap: 12px !important;


        justify-content: flex-start !important;


        transition: all 0.2s ease !important;


    }





    .nav-btn-link:hover,


    .nav-btn-link:active {


        background: rgba(212, 175, 55, 0.12) !important;


        border-color: rgba(212, 175, 55, 0.4) !important;


        color: #F5D77A !important;


    }





    .nav-btn-link .nav-btn-icon {


        width: 18px !important;


        height: 18px !important;


        stroke: #D4AF37 !important;


    }





    .btn-login-nav, .btn-user-nav {


        padding: 7px 12px !important;


        font-size: 0.82rem !important;


        border-radius: 8px !important;


    }


}





@media (max-width: 768px) {


    /* Prevent any horizontal screen blowout */


    html, body {


        max-width: 100vw !important;


        overflow-x: hidden !important;


    }





    /* Hero section proportion on mobile */


    .hero, section.hero, .hero-section {


        padding: 85px 16px 36px 16px !important;


        min-height: auto !important;


    }





    .hero h1 {


        font-size: 1.85rem !important;


        line-height: 1.25 !important;


        margin-bottom: 14px !important;


    }





    .hero-subtitle {


        font-size: 0.95rem !important;


        line-height: 1.65 !important;


        max-width: 95% !important;


        margin: 0 auto 20px auto !important;


    }





    .hero-stats {


        display: grid !important;


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


        gap: 10px !important;


        margin-top: 24px !important;


        padding: 0 4px !important;


    }





    .hero-stat .value {


        font-size: 1.35rem !important;


    }





    .hero-stat .label {


        font-size: 0.70rem !important;


        letter-spacing: 0.8px !important;


    }





    /* Comparison Slider Badges on Mobile */


    .comparison-slider {


        margin: 0 auto !important;


        max-width: 100% !important;


    }





    .slider-label {


        font-size: 0.66rem !important;


        padding: 4px 8px !important;


        bottom: 8px !important;


        max-width: 42% !important;


        white-space: nowrap !important;


        overflow: hidden !important;


        text-overflow: ellipsis !important;


        letter-spacing: -0.2px !important;


        border-radius: 6px !important;


    }





    .slider-label.label-before {


        left: 8px !important;


    }





    .slider-label.label-after {


        right: 8px !important;


    }





    /* Social Proof Toast vs GLT Bot Avatar - Zero Collision */


    .toast-container {


        left: 10px !important;


        right: 76px !important;


        bottom: 12px !important;


        max-width: calc(100vw - 86px) !important;


        z-index: 150 !important;


    }





    .toast {


        max-width: 100% !important;


        padding: 8px 12px !important;


        font-size: 0.78rem !important;


        border-radius: 8px !important;


        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;


    }





    #glt-bot-trigger {


        right: 12px !important;


        bottom: 12px !important;


        width: 50px !important;


        height: 50px !important;


        z-index: 200 !important;


    }


}





/* Cream Section Disclaimer Card: Fix harsh cyan/neon contrast */


.section-cream .glass-card[style*="border-left"],


.section-cream .disclaimer-card {


    background: #ffffff !important;


    border: 1px solid rgba(212, 175, 55, 0.35) !important;


    border-left: 5px solid #D4AF37 !important;


    box-shadow: 0 10px 30px rgba(184, 134, 11, 0.12) !important;


    border-radius: 12px !important;


}





.section-cream .glass-card[style*="border-left"] h3,


.section-cream .disclaimer-card h3 {


    color: #141414 !important;


    text-shadow: none !important;


    font-size: 1.35rem !important;


}





.section-cream .glass-card[style*="border-left"] p,


.section-cream .disclaimer-card p {


    color: #2D2416 !important;


    font-size: 1.05rem !important;


    line-height: 1.65 !important;


}





.section-cream strong[style*="accent"],


.section-cream span[style*="accent"],


.section-cream .glass-card[style*="border-left"] strong[style*="accent"] {


    color: #8F5B10 !important; /* Deep luxury warm bronze-gold */


    font-weight: 700 !important;


    text-shadow: none !important;


}





.section-cream strong[style*="success"],


.section-cream span[style*="success"],


.section-cream .glass-card[style*="border-left"] strong[style*="success"] {


    color: #166534 !important; /* Deep forest emerald green */


    font-weight: 700 !important;


    text-shadow: none !important;


}




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

   v17.0 UNIVERSAL RESPONSIVE ENGINE (ALL VIEWPORTS: 320px to 4K)

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



html, body {

    max-width: 100vw !important;

    overflow-x: hidden !important;

}



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

    box-sizing: border-box !important;

}



/* -------------------------------------------------------------

   TABLETS, PHABLETS & SMALL LAPTOPS (<= 1080px)

   ------------------------------------------------------------- */

@media (max-width: 1080px) {

    .navbar, nav.navbar {

        height: 60px !important;

        padding: 0 !important;

    }

    .navbar .container {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        padding: 0 16px !important;

        height: 60px !important;

        max-width: 100vw !important;

    }

    .nav-left {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        flex-shrink: 0 !important;

    }

    .nav-left .nav-brand {

        font-size: 1.15rem !important;

    }

    .desktop-translate-slot {

        display: none !important;

    }

    .nav-right {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        flex-shrink: 0 !important;

    }

    .nav-mobile-toggle {

        display: flex !important;

    }



    .nav-links, #mainNavLinks {

        display: none !important;

        position: fixed !important;

        top: 60px !important;

        left: 0 !important;

        right: 0 !important;

        width: 100vw !important;

        height: calc(100vh - 60px) !important;

        background: rgba(10, 10, 10, 0.98) !important;

        backdrop-filter: blur(24px) !important;

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

        border-top: 1px solid rgba(212, 175, 55, 0.25) !important;

        flex-direction: column !important;

        align-items: stretch !important;

        padding: 20px 18px 40px !important;

        gap: 10px !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

        z-index: 10001 !important;

    }

    .nav-links.open, #mainNavLinks.open {

        display: flex !important;

        animation: navDrawerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;

    }

    .nav-links li, #mainNavLinks li {

        width: 100% !important;

        list-style: none !important;

    }

    .mobile-nav-lang-item {

        display: block !important;

        margin-bottom: 12px !important;

        padding: 10px 14px !important;

        background: rgba(212, 175, 55, 0.08) !important;

        border: 1px solid rgba(212, 175, 55, 0.25) !important;

        border-radius: 10px !important;

    }

    .mobile-nav-lang-item #google_translate_element {

        display: block !important;

        width: 100% !important;

    }

    .mobile-nav-lang-item #google_translate_element select {

        width: 100% !important;

        max-width: 100% !important;

        background: #141414 !important;

        color: #F5D77A !important;

        border: 1px solid rgba(212, 175, 55, 0.4) !important;

        border-radius: 6px !important;

        height: 38px !important;

        font-size: 0.9rem !important;

        padding: 4px 10px !important;

    }

    .nav-btn-link {

        width: 100% !important;

        padding: 13px 16px !important;

        font-size: 0.98rem !important;

        font-weight: 600 !important;

        color: #F0E6D2 !important;

        background: rgba(255, 255, 255, 0.03) !important;

        border: 1px solid rgba(212, 175, 55, 0.15) !important;

        border-radius: 10px !important;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        justify-content: flex-start !important;

    }

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

        background: rgba(212, 175, 55, 0.12) !important;

        border-color: rgba(212, 175, 55, 0.4) !important;

        color: #F5D77A !important;

    }

    .nav-btn-link .nav-btn-icon {

        width: 18px !important;

        height: 18px !important;

        stroke: #D4AF37 !important;

    }

}



/* -------------------------------------------------------------

   MOBILE SCREENS & PHABLETS (<= 768px)

   ------------------------------------------------------------- */

@media (max-width: 768px) {

    .hero, section.hero, .hero-section {

        padding: 85px 16px 36px 16px !important;

        min-height: auto !important;

    }

    .hero h1 {

        font-size: clamp(1.75rem, 5vw, 2.2rem) !important;

        line-height: 1.25 !important;

        margin-bottom: 14px !important;

    }

    .hero-subtitle {

        font-size: clamp(0.92rem, 2.5vw, 1.05rem) !important;

        line-height: 1.65 !important;

        max-width: 95% !important;

        margin: 0 auto 20px auto !important;

    }

    .hero-stats {

        display: grid !important;

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

        gap: 8px !important;

        margin-top: 24px !important;

        padding: 0 4px !important;

    }

    .hero-stat .value {

        font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;

    }

    .hero-stat .label {

        font-size: 0.68rem !important;

        letter-spacing: 0.6px !important;

    }



    .comparison-slider {

        margin: 0 auto !important;

        max-width: 100% !important;

        border-radius: 12px !important;

    }

    .slider-label {

        font-size: 0.65rem !important;

        padding: 4px 8px !important;

        bottom: 8px !important;

        max-width: 42% !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        letter-spacing: -0.2px !important;

        border-radius: 6px !important;

    }

    .slider-label.label-before { left: 8px !important; }

    .slider-label.label-after { right: 8px !important; }



    .testimonial-card, .trade-card, .performance-card {

        max-width: 100% !important;

        padding: 16px 14px !important;

        border-radius: 12px !important;

    }

    .trade-card img, .testimonial-card img {

        max-width: 100% !important;

        height: auto !important;

        border-radius: 8px !important;

    }



    .toast-container {

        left: 10px !important;

        right: 76px !important;

        bottom: 12px !important;

        max-width: calc(100vw - 86px) !important;

        z-index: 150 !important;

    }

    .toast {

        max-width: 100% !important;

        padding: 8px 12px !important;

        font-size: 0.78rem !important;

        border-radius: 8px !important;

    }

    #glt-bot-trigger {

        right: 12px !important;

        bottom: 12px !important;

        width: 48px !important;

        height: 48px !important;

        z-index: 200 !important;

    }

}



/* -------------------------------------------------------------

   SMALL MOBILE SCREENS (<= 480px)

   ------------------------------------------------------------- */

@media (max-width: 480px) {

    .navbar .container {

        padding: 0 12px !important;

    }

    .nav-brand {

        font-size: 1.05rem !important;

    }

    .btn-login-nav, .btn-user-nav {

        padding: 6px 10px !important;

        font-size: 0.78rem !important;

    }

    .hero h1 {

        font-size: 1.65rem !important;

    }

    .hero-subtitle {

        font-size: 0.88rem !important;

    }

    .hero-stat .value {

        font-size: 1.15rem !important;

    }

    .hero-stat .label {

        font-size: 0.62rem !important;

        letter-spacing: 0.3px !important;

    }

}



/* -------------------------------------------------------------

   CREAM SECTION OVERRIDES

   ------------------------------------------------------------- */

.section-cream .glass-card[style*="border-left"],

.section-cream .disclaimer-card {

    background: #FFFFFF !important;

    background-color: #FFFFFF !important;

    border: 1px solid rgba(212, 175, 55, 0.4) !important;

    border-left: 6px solid #D4AF37 !important;

    box-shadow: 0 10px 32px rgba(184, 134, 11, 0.14) !important;

    border-radius: 14px !important;

    color: #141414 !important;

}



.section-cream .glass-card[style*="border-left"] h3,

.section-cream .disclaimer-card h3 {

    color: #141414 !important;

    text-shadow: none !important;

    font-size: clamp(1.2rem, 3vw, 1.45rem) !important;

}



.section-cream .glass-card[style*="border-left"] p,

.section-cream .disclaimer-card p {

    color: #2D2416 !important;

    font-size: clamp(0.95rem, 2vw, 1.12rem) !important;

    line-height: 1.65 !important;

}



.section-cream strong[style*="accent"],

.section-cream span[style*="accent"],

.section-cream .glass-card[style*="border-left"] strong[style*="accent"],

.disclaimer-card strong[style*="accent"] {

    color: #8F5B10 !important;

    font-weight: 700 !important;

    text-shadow: none !important;

}



.section-cream strong[style*="success"],

.section-cream span[style*="success"],

.section-cream .glass-card[style*="border-left"] strong[style*="success"],

.disclaimer-card strong[style*="success"] {

    color: #166534 !important;

    font-weight: 700 !important;

    text-shadow: none !important;

}



/* ==============================================================================
   v18.0 "HOW IT WORKS" & "PERFORMANCE" RESPONSIVE POLISH
   ============================================================================== */

/* Ensure dark sections completely cover background fixed canvas */
#guide, #performance, #capabilities, #markets, #footer {
    background: #0A0A0A !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Trade Review Cards (Ganapathi Namakkal) - Solid Luxury Gold Styling */
.trade-review-card {
    background: #141414 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(245, 215, 122, 0.1) !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.review-data-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 10px !important;
}

.review-data-label {
    color: #F5D77A !important;
    font-weight: 700 !important;
}

/* How It Works Timeline Responsiveness on Mobile / Tablets */
@media (max-width: 768px) {
    /* Hide horizontal scrollbar and prevent overflow */
    #guide .timeline-scroll-wrapper,
    #guide div[style*="overflow-x: auto"] {
        overflow: hidden !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

    #guide .timeline-flex,
    #guide div[style*="min-width: 600px"] {
        min-width: 100% !important;
        width: 100% !important;
        padding: 10px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    #guide .timeline-step-circle,
    #guide div[style*="width: 70px"] {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
        margin: 0 auto 6px auto !important;
        border: 2px solid rgba(212, 175, 55, 0.6) !important;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
    }

    #guide .timeline-line,
    #guide div[style*="top: 55px"] {
        top: 32px !important;
        left: 8% !important;
        right: 8% !important;
        height: 2px !important;
    }

    #guide h3, #guide h4 {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.2px !important;
        white-space: normal !important;
    }

    /* Cards below timeline */
    #guide .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #guide .glass-card {
        background: #141414 !important;
        border: 1px solid rgba(212, 175, 55, 0.35) !important;
        border-top: 4px solid #D4AF37 !important;
        border-radius: 14px !important;
        padding: 24px 20px !important;
    }
}

/* Auth modal toggle link styling */
.auth-modal-wrapper .auth-link,
.auth-modal-wrapper .auth-link p {
    color: #94a3b8 !important;
}

.auth-modal-wrapper .auth-link a,
.auth-modal-wrapper .auth-link button,
.auth-modal-wrapper button[onclick*="toggleAuthView"] {
    color: #D4A537 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.auth-modal-wrapper .auth-link a:hover,
.auth-modal-wrapper .auth-link button:hover,
.auth-modal-wrapper button[onclick*="toggleAuthView"]:hover {
    color: #F5D77A !important;
    text-shadow: 0 0 10px rgba(245, 215, 122, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES CRYSTAL-CLEAR READABILITY & HIGH CONTRAST (v21.0)
   (Terms of Service, Privacy Policy, Refund Policy, Disclosures)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Disable hero background animation canvas on legal pages */
body:has(.legal-container) #glt-bg-canvas,
.legal-container ~ #glt-bg-canvas,
.legal-card ~ #glt-bg-canvas {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. Solid, Opaque Legal Document Card Container */
.legal-container {
    position: relative !important;
    z-index: 10 !important;
    max-width: 920px !important;
    margin: 110px auto 70px auto !important;
}

.legal-header h1 {
    font-size: clamp(2rem, 4vw, 2.6rem) !important;
    font-family: var(--font-serif) !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px !important;
}

.legal-header p {
    color: #94a3b8 !important;
    font-size: 0.95rem !important;
}

.legal-card {
    background: #0E131F !important;
    background-color: #0E131F !important;
    border: 1px solid rgba(212, 165, 55, 0.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 0 35px rgba(184, 134, 11, 0.08) !important;
    color: #E2E8F0 !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    padding: clamp(24px, 5vw, 48px) !important;
    position: relative !important;
    z-index: 10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. Section Headings Inside Legal Cards */
.legal-card h2 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    font-family: var(--font-serif) !important;
    margin-top: 36px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(212, 165, 55, 0.3) !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.legal-card section:first-child h2 {
    margin-top: 0 !important;
}

/* 4. High-Contrast Paragraphs & Typography */
.legal-card p {
    color: #CBD5E1 !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    margin-bottom: 16px !important;
}

.legal-card strong,
.legal-card b {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.legal-card u {
    text-underline-offset: 3px !important;
}

.legal-card a {
    color: #F5D77A !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.legal-card a:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(245, 215, 122, 0.6) !important;
}

.legal-card ul, .legal-card ol {
    color: #CBD5E1 !important;
    font-size: 1.01rem !important;
    line-height: 1.8 !important;
    margin-bottom: 18px !important;
    padding-left: 24px !important;
}

.legal-card li {
    margin-bottom: 8px !important;
}

/* 5. Statutory Callout & Notice Boxes */
.legal-card div[style*="background"] {
    background: rgba(14, 22, 38, 0.95) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
}

.legal-card div[style*="background"] p,
.legal-card div[style*="background"] li {
    color: #E2E8F0 !important;
}


/* ═══════════════════════════════════════════════════════════════


/* ═══════════════════════════════════════════════════════════════
   HERO 7-DAY FREE TRIAL IRRESISTIBLE OFFER CARD (v24.0)
   ═══════════════════════════════════════════════════════════════ */
.hero-trial-box {
    max-width: 980px !important;
    width: 95% !important;
    margin: 26px auto 0 !important;
    padding: 24px 38px !important;
    background: linear-gradient(135deg, rgba(14, 20, 36, 0.88) 0%, rgba(10, 14, 26, 0.94) 100%) !important;
    border: 1px solid rgba(212, 165, 55, 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 165, 55, 0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
    animation: fadeInUp 0.8s var(--ease-out) 0.3s both !important;
}

.hero-trial-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid rgba(0, 255, 136, 0.35) !important;
    border-radius: 20px !important;
    color: #00ff88 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.hero-trial-title {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    line-height: 1.35 !important;
    font-family: var(--font-heading, inherit) !important;
}

.hero-trial-title .gold-accent {
    background: linear-gradient(135deg, #F5D77A 0%, #D4A537 50%, #B8860B 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.hero-trial-text {
    font-size: 0.98rem !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    margin: 0 auto 18px !important;
    max-width: 860px !important;
}

.hero-trial-text strong {
    color: #F5D77A !important;
    font-weight: 600 !important;
}

.hero-trial-guarantees {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
}

.hero-trial-guarantees span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

@media (max-width: 640px) {
    .hero-trial-box {
        padding: 20px 16px !important;
        margin: 20px 10px 0 !important;
    }
    .hero-trial-title {
        font-size: 1.2rem !important;
    }
    .hero-trial-guarantees {
        gap: 12px !important;
        font-size: 0.74rem !important;
    }
}