/* ==================== TRADEITFINVEST — SHARED STYLESHEET ==================== */
/* Extends style.css with header, footer, nav, and common component styles      */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==================== CSS VARIABLES ==================== */
:root {
    --primary:       #003D5C;
    --primary-teal:  #0FA9A9;
    --primary-light: rgba(15,169,169,0.10);
    --success:       #10B981;
    --danger:        #EF4444;
    --warning:       #F59E0B;
    --text-1:        #0F172A;
    --text-2:        #475569;
    --text-3:        #94A3B8;
    --border:        #E5E7EB;
    --bg:            #F8FAFC;
    --white:         #FFFFFF;
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     16px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md:     0 4px 16px rgba(0,61,92,.10);
    --shadow-lg:     0 12px 40px rgba(0,61,92,.15);
    --transition:    all .2s cubic-bezier(.4,0,.2,1);
}

/* ==================== RESET & BASE ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-1);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ==================== HEADER ==================== */
#site-header {
    transition: background-color .3s ease, box-shadow .3s ease;
}
#site-header.shadow-md {
    box-shadow: 0 4px 24px rgba(0,61,92,.10);
    background-color: rgba(255,255,255,.98) !important;
}

/* Desktop nav link active state */
.nav-link {
    position: relative;
    transition: var(--transition);
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-teal);
    border-radius: 2px;
    transition: width .2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 60%; }

/* Mobile menu animation */
#mobile-menu {
    animation: slideDown .2s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== FOOTER ==================== */
footer a { transition: var(--transition); }
footer .footer-link:hover { color: #fff !important; padding-left: 6px; }
footer .social-icon { transition: var(--transition); }

/* ==================== BUTTONS ==================== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-teal) 100%);
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,61,92,.22);
    transition: var(--transition);
    text-decoration: none;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,61,92,.30);
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: .9375rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ==================== CARD BASE ==================== */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
}
.card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(15,169,169,.35);
    transform: translateY(-3px);
}

/* ==================== BADGE ==================== */
.badge-up   { background: rgba(16,185,129,.12); color: #059669; }
.badge-down { background: rgba(239,68,68,.12);  color: #DC2626; }

/* ==================== SECTION HEADERS ==================== */
.section-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-teal);
    margin-bottom: .75rem;
}
.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.25;
    letter-spacing: -.02em;
}
.section-sub {
    font-size: 1rem;
    color: var(--text-2);
    line-height: 1.7;
    max-width: 560px;
    margin-top: .75rem;
}

/* ==================== FORMS ==================== */
.form-field {
    width: 100%;
    padding: .75rem 1rem;
    font-size: .9375rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-1);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(15,169,169,.12);
}
.form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: .375rem;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-teal));
    border-radius: 8px;
    border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-teal), var(--primary));
}

/* ==================== WHATSAPP FLOAT ==================== */
.whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 900; }
.whatsapp-wrapper { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.whatsapp-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #20BA5A);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(37,211,102,.40);
    transition: var(--transition);
    animation: wa-pulse 3s ease-in-out infinite;
}
.whatsapp-btn:hover { transform: scale(1.10); box-shadow: 0 6px 20px rgba(37,211,102,.50); }
.whatsapp-img { width: 80%; height: 80%; object-fit: contain; border-radius: 50%; }
.whatsapp-label {
    background: #fff; color: #25D366; padding: 6px 12px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    border: 1px solid rgba(37,211,102,.2);
    pointer-events: none;
}
@keyframes wa-pulse {
    0%,100% { box-shadow: 0 4px 14px rgba(37,211,102,.40), 0 0 0 0 rgba(37,211,102,.15); }
    50%      { box-shadow: 0 4px 14px rgba(37,211,102,.40), 0 0 0 8px rgba(37,211,102,0); }
}
@media (max-width: 768px) {
    .whatsapp-float { bottom: 20px; right: 20px; }
    .whatsapp-label { display: none; }
}

/* ==================== PAGE TRANSITIONS ==================== */
body { animation: pageFade .3s ease; }
@keyframes pageFade { from { opacity: .85; } to { opacity: 1; } }

/* ==================== UTILITY ==================== */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-bg {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-teal) 100%);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .section-title { font-size: 1.6rem; }
    .section-sub   { font-size: .9375rem; }
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==================== PAGE LOADER ==================== */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo wrapper — pulse glow ring */
.loader-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-logo-wrap::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12,100,109,0.12) 0%, transparent 70%);
    animation: loader-glow 2s ease-in-out infinite;
}
@keyframes loader-glow {
    0%, 100% { transform: scale(0.85); opacity: 0.5; }
    50%       { transform: scale(1.15); opacity: 1; }
}
.loader-logo {
    height: 44px;
    width: auto;
    animation: loader-logo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}
@keyframes loader-logo-in {
    from { opacity: 0; transform: translateY(10px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Chart line SVG — stroke-dashoffset draw-on */
.loader-chart {
    display: block;
}
.loader-chart-line {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: loader-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
.loader-chart-fill {
    opacity: 0;
    animation: loader-fill-in 0.6s ease 1.5s forwards;
}
@keyframes loader-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes loader-fill-in {
    to { opacity: 1; }
}

/* Progress bar */
.loader-bar-track {
    width: 160px;
    height: 3px;
    background: rgba(12,100,109,0.12);
    border-radius: 99px;
    overflow: hidden;
}
.loader-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, #012C57, #0C646D);
    animation: loader-bar 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes loader-bar {
    0%   { width: 0%; }
    60%  { width: 75%; }
    85%  { width: 90%; }
    100% { width: 100%; }
}

/* ==================== PRINT ==================== */
@media print {
    #site-header, footer, .whatsapp-float, #page-loader { display: none !important; }
}

/* ==================== CHART BACKGROUND ==================== */
/*
 * Reusable market-chart SVG background.
 * Two variants:
 *   .chart-bg-light  — for light/white sections  (very subtle teal lines)
 *   .chart-bg-dark   — for dark gradient sections (white lines at low opacity)
 */
.chart-bg-light,
.chart-bg-dark {
    position: relative;
    overflow: hidden;
}
.chart-bg-light::before,
.chart-bg-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
/* Light variant — teal lines on white/light bg */
.chart-bg-light::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230C646D' stop-opacity='0.07'/%3E%3Cstop offset='1' stop-color='%230C646D' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- grid lines --%3E%3Cline x1='0' y1='80' x2='1440' y2='80' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='160' x2='1440' y2='160' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='240' x2='1440' y2='240' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='320' x2='1440' y2='320' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.12'/%3E%3Cline x1='180' y1='0' x2='180' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='360' y1='0' x2='360' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='540' y1='0' x2='540' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='720' y1='0' x2='720' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='900' y1='0' x2='900' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='1080' y1='0' x2='1080' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3Cline x1='1260' y1='0' x2='1260' y2='420' stroke='%230C646D' stroke-width='0.6' stroke-opacity='0.07'/%3E%3C!-- area fill --%3E%3Cpath d='M0 320 L80 290 L160 305 L240 260 L320 240 L400 255 L480 210 L560 195 L640 215 L720 180 L800 160 L880 175 L960 140 L1040 120 L1120 135 L1200 100 L1280 85 L1360 70 L1440 55 L1440 420 L0 420 Z' fill='url(%23gl)'/%3E%3C!-- trend line --%3E%3Cpath d='M0 320 L80 290 L160 305 L240 260 L320 240 L400 255 L480 210 L560 195 L640 215 L720 180 L800 160 L880 175 L960 140 L1040 120 L1120 135 L1200 100 L1280 85 L1360 70 L1440 55' fill='none' stroke='%230C646D' stroke-width='1.8' stroke-opacity='0.22'/%3E%3C!-- candlesticks --%3E%3Cline x1='120' y1='275' x2='120' y2='315' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='113' y='285' width='14' height='20' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='280' y1='235' x2='280' y2='275' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='273' y='242' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='440' y1='195' x2='440' y2='235' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='433' y='202' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='600' y1='178' x2='600' y2='218' stroke='%23EF4444' stroke-width='1.2' stroke-opacity='0.14'/%3E%3Crect x='593' y='185' width='14' height='20' fill='%23EF4444' fill-opacity='0.08' stroke='%23EF4444' stroke-width='1' stroke-opacity='0.14'/%3E%3Cline x1='760' y1='148' x2='760' y2='188' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='753' y='155' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='920' y1='118' x2='920' y2='158' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='913' y='125' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='1080' y1='95' x2='1080' y2='140' stroke='%23EF4444' stroke-width='1.2' stroke-opacity='0.14'/%3E%3Crect x='1073' y='102' width='14' height='24' fill='%23EF4444' fill-opacity='0.08' stroke='%23EF4444' stroke-width='1' stroke-opacity='0.14'/%3E%3Cline x1='1240' y1='68' x2='1240' y2='108' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='1233' y='75' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='1400' y1='42' x2='1400' y2='82' stroke='%230C646D' stroke-width='1.2' stroke-opacity='0.18'/%3E%3Crect x='1393' y='49' width='14' height='22' fill='%230C646D' fill-opacity='0.10' stroke='%230C646D' stroke-width='1' stroke-opacity='0.18'/%3E%3C/svg%3E");
    opacity: 1;
}
/* Dark variant — white lines on dark gradient bg */
.chart-bg-dark::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='gd' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- grid lines --%3E%3Cline x1='0' y1='60' x2='1440' y2='60' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Cline x1='0' y1='120' x2='1440' y2='120' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Cline x1='0' y1='180' x2='1440' y2='180' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Cline x1='0' y1='240' x2='1440' y2='240' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.08'/%3E%3Cline x1='240' y1='0' x2='240' y2='300' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.05'/%3E%3Cline x1='480' y1='0' x2='480' y2='300' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.05'/%3E%3Cline x1='720' y1='0' x2='720' y2='300' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.05'/%3E%3Cline x1='960' y1='0' x2='960' y2='300' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.05'/%3E%3Cline x1='1200' y1='0' x2='1200' y2='300' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C!-- area fill --%3E%3Cpath d='M0 240 L120 210 L240 195 L360 175 L480 185 L600 155 L720 135 L840 148 L960 115 L1080 95 L1200 108 L1320 80 L1440 60 L1440 300 L0 300 Z' fill='url(%23gd)'/%3E%3C!-- trend line --%3E%3Cpath d='M0 240 L120 210 L240 195 L360 175 L480 185 L600 155 L720 135 L840 148 L960 115 L1080 95 L1200 108 L1320 80 L1440 60' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.18'/%3E%3C!-- candlesticks --%3E%3Cline x1='180' y1='195' x2='180' y2='228' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='173' y='202' width='14' height='16' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3Cline x1='420' y1='165' x2='420' y2='198' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='413' y='172' width='14' height='18' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3Cline x1='660' y1='128' x2='660' y2='162' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='653' y='135' width='14' height='18' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3Cline x1='900' y1='108' x2='900' y2='142' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='893' y='115' width='14' height='18' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3Cline x1='1140' y1='82' x2='1140' y2='118' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='1133' y='89' width='14' height='18' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3Cline x1='1380' y1='55' x2='1380' y2='90' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.15'/%3E%3Crect x='1373' y='62' width='14' height='18' fill='%23ffffff' fill-opacity='0.08' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.15'/%3E%3C/svg%3E");
    opacity: 1;
}
/* Ensure children sit above the chart bg */
.chart-bg-light > *,
.chart-bg-dark > * {
    position: relative;
    z-index: 1;
}