:root {
    --bg-main: #0b0e11;
    --bg-panel: #12161c;
    --bg-card: #161a1e;
    --bg-card-hover: #1a1f26;
    --border-color: #2b2f36;
    --text-primary: #ffffff;
    --text-secondary: #929aa5;
    --text-muted: #848e9c;
    --accent-gold: #f7a600;
    --accent-gold-hover: #ffb11a;
    --price-up: #03c087;
    --price-down: #f84960;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    background-image: 
        linear-gradient(135deg, rgba(247, 166, 0, 0.02) 0%, transparent 50%),
        linear-gradient(45deg, rgba(3, 192, 135, 0.015) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* News Ticker */
.news-ticker {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.ticker-label {
    background: var(--accent-gold);
    color: var(--bg-primary);
    padding: 0 15px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.ticker-wrapper {
    overflow: hidden;
    position: relative;
    flex: 1;
}

.ticker-content {
    white-space: nowrap;
    animation: ticker 40s linear infinite;
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: inline-block;
}

.ticker-item {
    display: inline-block;
    margin-right: 60px;
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Navbar */
.navbar {
    background-color: rgba(18, 22, 28, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled {
    background-color: rgba(18, 22, 28, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent-gold) !important;
    letter-spacing: -0.5px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-brand img {
    height: 40px;
    width: auto;
    transition: transform 0.3s;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-nav .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s;
    position: relative;
    border-radius: 6px;
    margin: 0 0.25rem;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--accent-gold);
    transition: transform 0.3s;
    border-radius: 2px;
}

.navbar-nav .nav-link:hover {
    color: var(--text-primary) !important;
    background: rgba(247, 166, 0, 0.05);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

.navbar-nav .nav-link.active {
    color: var(--accent-gold) !important;
    background: rgba(247, 166, 0, 0.1);
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(247, 166, 0, 0.25);
    outline: none;
}

.navbar-toggler-icon {
    width: 24px;
    height: 24px;
    position: relative;
    background: none;
}

.navbar-toggler-icon span,
.navbar-toggler-icon span::before,
.navbar-toggler-icon span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s;
}

.navbar-toggler-icon span {
    top: 50%;
    transform: translateY(-50%);
}

.navbar-toggler-icon span::before {
    content: '';
    top: -8px;
}

.navbar-toggler-icon span::after {
    content: '';
    top: 8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent-gold);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247, 166, 0, 0.3);
    color: #000;
}

.btn-outline-light {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-light:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-outline-warning {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-outline-warning:hover {
    background-color: var(--accent-gold);
    color: #000;
}

/* Hero Section - BACKUP VERSION (can be restored by adding .hero-bg-backup class) */
.hero-bg-backup {
    background: 
        radial-gradient(ellipse at top right, rgba(247, 166, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(3, 192, 135, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #0b0e11 0%, #1e2329 100%);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-bg-backup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='200' viewBox='0 0 1440 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120L48 115C96 110 192 100 288 95C384 90 480 90 576 92.5C672 95 768 100 864 102.5C960 105 1056 105 1152 107.5C1248 110 1344 115 1392 117.5L1440 120V200H0V120Z' fill='%23f7a600' fill-opacity='0.06'/%3E%3Cpath d='M0 150L48 148C96 146 192 142 288 138C384 134 480 130 576 132C672 134 768 142 864 145C960 148 1056 146 1152 144C1248 142 1344 140 1392 139L1440 138V200H0V150Z' fill='%23f7a600' fill-opacity='0.03'/%3E%3C/svg%3E") repeat-x top;
    animation: wave-flow 25s linear infinite;
    pointer-events: none;
}

.hero-bg-backup::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='150' viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80L60 82C120 84 240 88 360 85C480 82 600 72 720 68C840 64 960 66 1080 68C1200 70 1320 72 1380 73L1440 74V150H1380C1320 150 1200 150 1080 150C960 150 840 150 720 150C600 150 480 150 360 150C240 150 120 150 60 150H0V80Z' fill='%23161a1e' fill-opacity='0.9'/%3E%3Cpath d='M0 100L48 98C96 96 192 92 288 90C384 88 480 88 576 89C672 90 768 92 864 93C960 94 1056 94 1152 95C1248 96 1344 97 1392 97.5L1440 98V150H0V100Z' fill='%23f7a600' fill-opacity='0.05'/%3E%3C/svg%3E") repeat-x bottom;
    pointer-events: none;
}

@keyframes wave-flow {
    0% { background-position-x: 0; }
    100% { background-position-x: 1440px; }
}

/* Hero Section - standard background (no colour burst) */
.hero-bg {
    background: linear-gradient(180deg, #0b0e11 0%, #0f1319 50%, #0b0e11 100%);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

/* Hero Base */
.hero-base {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Hero Grid Perspective */
.hero-grid-perspective {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-grid-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hero-grid-svg {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

/* Hero TV Chart (Candlesticks) */
.hero-tv-chart {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.hero-tv-chart-left {
    left: 0;
    right: auto;
    width: 50%;
}

.hero-tv-chart-right {
    right: 0;
    left: auto;
    width: 50%;
}

.hero-tv-chart-svg {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    animation: candle-formation 8s ease-in-out infinite;
}

@keyframes candle-formation {
    0% {
        opacity: 0.5;
        transform: translateX(0) scale(1);
    }
    25% {
        opacity: 0.6;
        transform: translateX(2px) scale(1.01);
    }
    50% {
        opacity: 0.55;
        transform: translateX(0) scale(1);
    }
    75% {
        opacity: 0.6;
        transform: translateX(-2px) scale(1.01);
    }
    100% {
        opacity: 0.5;
        transform: translateX(0) scale(1);
    }
}

.hero-tv-grid-h,
.hero-tv-grid-v {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 0.5;
}

/* Hero Candles - Reduced brightness and infinite TradingView-style movement */
.hero-tv-chart-left {
    animation: chart-scroll-left 35s linear infinite;
}

.hero-tv-chart-right {
    animation: chart-scroll-right 28s linear infinite;
}

@keyframes chart-scroll-left {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(-25px);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes chart-scroll-right {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(25px);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Infinite candle formation animation is defined above */

.hero-candle {
    transform-origin: bottom center;
    animation: candle-rise 1.2s ease-out forwards, candle-infinite 4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s), calc(var(--i) * 0.15s + 1.5s);
    opacity: 0;
}

@keyframes candle-rise {
    0% {
        opacity: 0;
        transform: translateY(100px) scaleY(0);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.5;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes candle-infinite {
    0%, 100% {
        transform: translateY(0) scaleY(1);
        opacity: 0.5;
    }
    25% {
        transform: translateY(-2px) scaleY(1.02);
        opacity: 0.55;
    }
    50% {
        transform: translateY(-4px) scaleY(1.05);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-2px) scaleY(1.02);
        opacity: 0.55;
    }
}

.hero-wick {
    stroke: var(--accent-gold);
    stroke-width: 1.5;
    opacity: 0.4;
    animation: wick-draw 0.6s ease-out forwards;
    animation-delay: calc(var(--i) * 0.08s + 0.3s);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

@keyframes wick-draw {
    to {
        stroke-dashoffset: 0;
        opacity: 0.4;
    }
}

.hero-wick-upper {
    stroke: var(--accent-gold);
    opacity: 0.4;
}

.hero-wick-lower {
    stroke: var(--accent-gold);
    opacity: 0.4;
}

.hero-candle-body {
    fill: none;
    stroke: var(--accent-gold);
    stroke-width: 2;
    opacity: 0.5;
    animation: candle-body-grow 0.8s ease-out forwards;
    animation-delay: calc(var(--i) * 0.08s + 0.2s);
    transform-origin: center bottom;
    transform: scaleY(0);
}

@keyframes candle-body-grow {
    to {
        transform: scaleY(1);
        opacity: 0.5;
    }
}

.hero-candle-body.candle-white {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    opacity: 0.45;
}

/* Hero chart visual */
.hero-chart-visual {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    pointer-events: none;
}

.hero-chart-card {
    width: 320px;
    max-width: 100%;
    background: linear-gradient(145deg, rgba(22, 26, 30, 0.9), rgba(11, 14, 17, 0.95));
    border-radius: 18px;
    border: 1px solid rgba(247, 166, 0, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    padding: 16px 18px 14px;
    position: relative;
    overflow: hidden;
}

.hero-chart-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(247, 166, 0, 0.25), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.hero-chart-header,
.hero-chart-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-chart-header {
    margin-bottom: 10px;
}

.hero-chart-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.hero-chart-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hero-chart-pill {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(3, 192, 135, 0.15);
    color: var(--price-up);
    border: 1px solid rgba(3, 192, 135, 0.5);
}

.hero-chart-body {
    position: relative;
    z-index: 1;
    margin: 6px 0 10px;
    height: 80px;
    overflow: hidden;
}

.hero-chart-line {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, rgba(11, 14, 17, 0.9), rgba(11, 14, 17, 0.95)),
        linear-gradient(130deg, rgba(3, 192, 135, 0.4), rgba(247, 166, 0, 0.6));
    background-size: 100% 100%, 200% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg width='320' height='80' viewBox='0 0 320 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 L20 55 L40 58 L60 50 L80 52 L100 40 L120 44 L140 35 L160 32 L180 38 L200 30 L220 26 L240 34 L260 25 L280 20 L300 18 L320 14 L320 80 L0 80 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: cover;
    mask-repeat: no-repeat;
    animation: hero-line-rise 9s ease-in-out infinite alternate;
}

@keyframes hero-line-rise {
    0% {
        transform: translateY(12px) scaleY(0.9);
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        transform: translateY(0) scaleY(1);
        background-position: 0% 0%, 50% 0%;
    }
    100% {
        transform: translateY(-4px) scaleY(1.05);
        background-position: 0% 0%, 100% 0%;
    }
}

.hero-chart-footer {
    margin-top: 4px;
    font-size: 0.75rem;
}

.hero-chart-footer-label {
    color: var(--text-muted);
}

.hero-chart-footer-value {
    font-weight: 600;
    color: var(--text-primary);
}

.hero-chart-footer-value.positive {
    color: var(--price-up);
}

@media (max-width: 991.98px) {
    .hero-chart-visual {
        display: none;
    }
}

/* Subtle grid overlay - optional, very light */
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.4;
    pointer-events: none;
}

/* Bottom transition wave */
.hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='120' viewBox='0 0 1440 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L30 65C60 70 120 80 180 75C240 70 300 50 360 45C420 40 480 50 540 55C600 60 660 60 720 57.5C780 55 840 50 900 52.5C960 55 1020 65 1080 67.5C1140 70 1200 65 1260 62.5C1320 60 1380 60 1410 60L1440 60V120H1410C1380 120 1320 120 1260 120C1200 120 1140 120 1080 120C1020 120 960 120 900 120C840 120 780 120 720 120C660 120 600 120 540 120C480 120 420 120 360 120C300 120 240 120 180 120C120 120 60 120 30 120H0V60Z' fill='%23161a1e'/%3E%3Cpath d='M0 80L40 78C80 76 160 72 240 70C320 68 400 68 480 69C560 70 640 72 720 73C800 74 880 74 960 75C1040 76 1120 77 1200 78C1280 79 1360 79 1400 79.5L1440 80V120H0V80Z' fill='%23f7a600' fill-opacity='0.08'/%3E%3C/svg%3E") repeat-x bottom;
    pointer-events: none;
    z-index: 1;
}

@keyframes geometric-float {
    0%, 100% {
        background-position: 
            15% 25%, 85% 35%, 50% 15%, 25% 75%, 75% 85%,
            0% 0%, 100% 100%;
        opacity: 0.8;
    }
    25% {
        background-position: 
            20% 30%, 80% 40%, 55% 20%, 30% 80%, 70% 90%,
            10% 5%, 90% 95%;
        opacity: 0.9;
    }
    50% {
        background-position: 
            10% 20%, 90% 30%, 45% 10%, 20% 70%, 80% 80%,
            5% 10%, 95% 90%;
        opacity: 0.7;
    }
    75% {
        background-position: 
            18% 28%, 82% 38%, 52% 18%, 28% 78%, 72% 88%,
            8% 8%, 92% 92%;
        opacity: 0.85;
    }
}


/* Hero Content Rotation */
.hero-content-wrapper {
    position: relative;
    min-height: 300px;
}

.hero-content {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

.hero-content.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: all;
}

/* Wavy Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(247, 166, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(247, 166, 0, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(3, 192, 135, 0.02) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: 0;
}

body {
    position: relative;
}

body > * {
    position: relative;
    z-index: 1;
}

/* Animated Wavy Lines */
.wave-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='150' viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100L48 105C96 110 192 120 288 115C384 110 480 90 576 85C672 80 768 90 864 95C960 100 1056 100 1152 97.5C1248 95 1344 90 1392 87.5L1440 85V150H1392C1344 150 1248 150 1152 150C1056 150 960 150 864 150C768 150 672 150 576 150C480 150 384 150 288 150C192 150 96 150 48 150H0Z' fill='%23121a1c' fill-opacity='0.5'/%3E%3C/svg%3E") repeat-x;
    opacity: 0.6;
    animation: wave 20s linear infinite;
    pointer-events: none;
}

@keyframes wave {
    0% { background-position-x: 0; }
    100% { background-position-x: 1440px; }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    min-height: 120px;
}

@media (max-width: 768px) {
    .hero-title {
        min-height: 100px;
        font-size: 2rem;
    }
    
    .hero-content-wrapper {
        min-height: 250px;
    }
}

/* Market Cards */
.market-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.market-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.market-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.market-card:hover::before {
    transform: scaleX(1);
}

.market-card h4,
.market-card h5 {
    font-weight: 700;
    margin: 0;
}

.price-mono {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.price-up {
    color: var(--price-up);
    font-weight: 600;
}

.price-down {
    color: var(--price-down);
    font-weight: 600;
}

/* Market Table */
.table-dark {
    background-color: transparent;
}

.table-dark thead {
    background-color: var(--bg-panel);
}

.table-dark tbody tr {
    border-color: var(--border-color);
    transition: background-color 0.2s;
}

.table-dark tbody tr:hover {
    background-color: var(--bg-card);
    cursor: pointer;
}

.table-dark th,
.table-dark td {
    border-color: var(--border-color);
    padding: 1rem;
    vertical-align: middle;
}

/* Stats Section */
.stats-section {
    background: var(--bg-panel);
    padding: 80px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: 0.3;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Features Section */
.feature-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.feature-card {
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-8px);
}

/* Core Values Section */
/* About Page Hero Background */
.about-hero-bg {
    background: linear-gradient(135deg, #0b0e11 0%, #0f1319 30%, #0b0e11 100%);
    position: relative;
    overflow: hidden;
    padding: 120px 0 100px !important;
}

.about-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(247, 166, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(3, 192, 135, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(247, 166, 0, 0.04) 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.about-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='150' viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80L60 82C120 84 240 88 360 85C480 82 600 72 720 68C840 64 960 66 1080 68C1200 70 1320 72 1380 73L1440 74V150H1380C1320 150 1200 150 1080 150C960 150 840 150 720 150C600 150 480 150 360 150C240 150 120 150 60 150H0V80Z' fill='%23161a1e'/%3E%3Cpath d='M0 100L48 98C96 96 192 92 288 90C384 88 480 88 576 89C672 90 768 92 864 93C960 94 1056 94 1152 95C1248 96 1344 97 1392 97.5L1440 98V150H0V100Z' fill='%23f7a600' fill-opacity='0.08'/%3E%3C/svg%3E") repeat-x bottom;
    pointer-events: none;
    z-index: 1;
}

.about-hero-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

.about-hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.about-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    animation: about-shape-float 20s ease-in-out infinite;
}

.about-shape-1 {
    width: 400px;
    height: 400px;
    background: var(--accent-gold);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.about-shape-2 {
    width: 300px;
    height: 300px;
    background: var(--price-up);
    bottom: -50px;
    right: 10%;
    animation-delay: 5s;
}

.about-shape-3 {
    width: 250px;
    height: 250px;
    background: var(--accent-gold);
    top: 40%;
    right: -50px;
    animation-delay: 10s;
}

.about-shape-4 {
    width: 350px;
    height: 350px;
    background: rgba(247, 166, 0, 0.3);
    bottom: 20%;
    left: 15%;
    animation-delay: 15s;
}

@keyframes about-shape-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    25% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.2;
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
        opacity: 0.12;
    }
    75% {
        transform: translate(20px, 10px) scale(1.05);
        opacity: 0.18;
    }
}

/* About Page Sections Background */
.about-hero-bg ~ section {
    position: relative;
}

/* About Mission Section */
.about-mission-section {
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.about-mission-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(247, 166, 0, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(3, 192, 135, 0.02) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.about-mission-section .container {
    position: relative;
    z-index: 1;
}

.core-values-section {
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.core-values-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: 0.3;
}

.core-values-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(ellipse at center bottom, rgba(247, 166, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.core-values-section .container {
    position: relative;
    z-index: 1;
}

.section-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(247, 166, 0, 0.1);
    border: 1px solid rgba(247, 166, 0, 0.3);
    border-radius: 30px;
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.core-value-card {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.core-value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.core-value-card:hover {
    border-color: var(--accent-gold) !important;
    background: var(--bg-card-hover) !important;
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: 0 25px 60px rgba(247, 166, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.core-value-card:hover::before {
    transform: scaleX(1);
}

.core-value-icon-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(247, 166, 0, 0.05);
    border: 1px solid rgba(247, 166, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.8rem;
    transition: all 0.4s ease;
}

.core-value-icon {
    font-size: 2.8rem;
    color: var(--accent-gold);
    transition: all 0.4s ease;
}

.core-value-card:hover .core-value-icon-wrapper {
    background: rgba(247, 166, 0, 0.1);
    border-color: var(--accent-gold);
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(247, 166, 0, 0.2);
}

.core-value-card:hover .core-value-icon {
    transform: scale(1.15) rotate(8deg) !important;
}

.core-value-card h5 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.core-value-card p {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* How it works - step cards (homepage) */
.how-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.how-step-card:hover {
    border-color: rgba(247, 166, 0, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

.how-step-num {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(247, 166, 0, 0.15);
    line-height: 1;
}

.how-step-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 12px;
    background: rgba(247, 166, 0, 0.12);
    border: 1px solid rgba(247, 166, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-gold);
}

/* Testimonials (homepage) */
.testimonials-home-section {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.testimonial-card:hover {
    border-color: rgba(247, 166, 0, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.testimonial-card p {
    font-size: 0.95rem;
    line-height: 1.65;
}

/* FAQ accordion (homepage) - dark theme */
.faq-home-section {
    background: var(--bg-main);
}

.accordion-home .accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.accordion-home .accordion-button {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: none;
    font-weight: 600;
    padding: 1rem 1.25rem;
    box-shadow: none !important;
}

.accordion-home .accordion-button:not(.collapsed) {
    background: var(--bg-card-hover) !important;
    color: var(--accent-gold) !important;
}

.accordion-home .accordion-button::after {
    filter: invert(1);
}

.accordion-home .accordion-body {
    background: var(--bg-card);
    color: var(--text-secondary);
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Newsletter CTA strip (homepage) */
.newsletter-cta-section {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.newsletter-cta-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.newsletter-cta-card .form-control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 0.2rem rgba(247, 166, 0, 0.2);
}

/* Investment Cards */
.investment-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.investment-card .badge {
    width: fit-content;
    margin-bottom: 1rem;
}

/* Investment Calculator */
.calculator-section {
    background: var(--bg-panel);
    padding: 80px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.calculator-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='100' viewBox='0 0 1440 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L48 5C96 10 192 20 288 25C384 30 480 30 576 27.5C672 25 768 20 864 17.5C960 15 1056 15 1152 12.5C1248 10 1344 5 1392 2.5L1440 0V100H0V0Z' fill='%230b0e11'/%3E%3C/svg%3E") repeat-x bottom;
    opacity: 0.5;
    pointer-events: none;
}

.calculator-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(22, 26, 30, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.calculator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--price-up));
    opacity: 0.8;
}

.calculator-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(247, 166, 0, 0.3);
}

.calculator-form-modern {
    position: relative;
    z-index: 1;
    padding: 1.5rem 0;
}

.form-group-modern {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-group-modern:last-child {
    margin-bottom: 0;
}

.form-label-modern {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label-modern i {
    color: var(--accent-gold);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.form-control-modern {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(18, 22, 28, 0.6);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.form-control-modern:hover {
    border-color: rgba(247, 166, 0, 0.3);
    background: rgba(18, 22, 28, 0.7);
}

.form-control-modern:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(18, 22, 28, 0.85);
    box-shadow: 0 0 0 3px rgba(247, 166, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.form-control-modern::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 400;
}

.input-wrapper-modern {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper-modern .form-control-modern {
    padding-right: 3rem;
}

.input-icon {
    position: absolute;
    right: 1.25rem;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

.form-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.7;
    line-height: 1.4;
}

/* Enhanced select dropdown styling */
.form-control-modern select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f7a600' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-control-modern select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f7a600' d='M6 3l5 5H1z'/%3E%3C/svg%3E");
}

/* Form group animation on focus */
.form-group-modern:focus-within .form-label-modern {
    color: var(--accent-gold);
    transition: color 0.3s ease;
}

.form-group-modern:focus-within .form-label-modern i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.calculator-result {
    background: linear-gradient(135deg, rgba(247, 166, 0, 0.08), rgba(3, 192, 135, 0.05));
    border: 2px solid var(--accent-gold);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    backdrop-filter: blur(10px);
}

.calculator-result h6 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.calculator-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.calculator-result-item:last-child {
    border-bottom: none;
}

.calculator-result-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calculator-result-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
}

.calculator-input-group {
    margin-bottom: 1.5rem;
}

.calculator-input-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 500;
}

.calculator-input-group input,
.calculator-input-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s;
}

.calculator-input-group input:focus,
.calculator-input-group select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(247, 166, 0, 0.1);
}

/* Modern calculator styles are now defined above in .calculator-card section */

/* Investment Types Highlight */
.investment-type-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s;
    height: 100%;
}

.investment-type-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.investment-type-card.featured {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(247, 166, 0, 0.05) 100%);
}

.investment-type-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.investment-type-card.featured .investment-type-icon {
    background: var(--accent-gold);
    box-shadow: 0 4px 12px rgba(247, 166, 0, 0.3);
}

.apy-badge {
    display: inline-block;
    background: var(--price-up);
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Footer */
footer {
    background: 
        linear-gradient(180deg, var(--bg-panel) 0%, #0f1318 100%),
        radial-gradient(ellipse at top center, rgba(247, 166, 0, 0.05) 0%, transparent 70%);
    border-top: 1px solid var(--border-color);
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: 0.5;
}

footer::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='100' viewBox='0 0 1440 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50L48 52C96 54 192 58 288 56C384 54 480 46 576 44C672 42 768 46 864 48C960 50 1056 50 1152 52C1248 54 1344 58 1392 60L1440 62V100H0V50Z' fill='%23f7a600' fill-opacity='0.06'/%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 0;
    transition: padding-left 0.3s;
}

.footer-links li::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: var(--accent-gold);
    transition: all 0.3s;
}

.footer-links li:hover {
    padding-left: 20px;
}

.footer-links li:hover::before {
    opacity: 1;
    left: 0;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--accent-gold);
    transform: translateX(5px);
}

.social-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    transition: all 0.3s;
    text-decoration: none;
    font-size: 1.1rem;
}

.social-links a:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(247, 166, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-bg {
        padding: 60px 0 40px;
    }

    .stats-section {
        padding: 40px 0;
    }

    .stat-value {
        font-size: 2rem;
    }

    .market-card {
        margin-bottom: 1rem;
    }

    .calculator-card {
        padding: 1.5rem;
    }

    .calculator-section {
        padding: 40px 0;
    }

    .investment-type-card {
        margin-bottom: 1.5rem;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }

    .hero-title {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .calculator-result {
        padding: 1.5rem;
    }

    .calculator-result-item {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

/* Crypto Logo */
.crypto-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Price Loading Animation */
.price-mono.loading {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-panel) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 4px;
    color: transparent;
    min-width: 120px;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Price Update Animation */
.price-mono.updating {
    animation: price-update 0.5s ease;
}

@keyframes price-update {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: var(--accent-gold); }
    100% { transform: scale(1); }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Mobile Menu Enhancements */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--bg-panel);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid var(--border-color);
        border-radius: 8px;
        margin: 0.25rem 0;
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

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

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: rgba(247, 166, 0, 0.1);
    }
}

/* News Slider Section */
.news-slider-section {
    padding: 80px 0;
    background: var(--bg-panel);
    position: relative;
    overflow: hidden;
}

.news-slider-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='150' viewBox='0 0 1440 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50L48 45C96 40 192 30 288 35C384 40 480 60 576 65C672 70 768 60 864 57.5C960 55 1056 60 1152 62.5C1248 65 1344 65 1392 67.5L1440 70V150H1392C1344 150 1248 150 1152 150C1056 150 960 150 864 150C768 150 672 150 576 150C480 150 384 150 288 150C192 150 96 150 48 150H0Z' fill='%23f7a600' fill-opacity='0.05'/%3E%3C/svg%3E") repeat-x top;
    opacity: 0.8;
    pointer-events: none;
}

/* Full-Width News Slider */
.news-slider-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.news-slider-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.news-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

.news-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.news-slide.prev {
    transform: translateX(-100%);
}

.news-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.news-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 14, 17, 0.85) 0%, rgba(11, 14, 17, 0.7) 50%, rgba(11, 14, 17, 0.9) 100%);
    z-index: 1;
}

.news-slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px;
    max-width: 800px;
}

.news-slide-badge {
    display: inline-block;
    background: var(--accent-gold);
    color: #000;
    padding: 0.5rem 1.25rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    width: fit-content;
}

.news-slide-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.news-slide-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
}

.news-slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.news-slide-date {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.news-slide-link {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    font-size: 1rem;
}

.news-slide-link:hover {
    color: var(--accent-gold-hover);
    transform: translateX(5px);
}

/* Slider Controls */
.news-slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(22, 26, 30, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2rem;
}

.slider-btn:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(247, 166, 0, 0.4);
}

.slider-btn:active {
    transform: scale(0.95);
}

.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.5;
}

.slider-dot:hover {
    opacity: 1;
    transform: scale(1.2);
}

.slider-dot.active {
    background: var(--accent-gold);
    width: 32px;
    border-radius: 16px;
    opacity: 1;
    box-shadow: 0 0 10px rgba(247, 166, 0, 0.5);
}

/* Responsive News Slider */
@media (max-width: 768px) {
    .news-slider-wrapper {
        height: 400px;
        border-radius: 12px;
    }
    
    .news-slide-content {
        padding: 40px 30px;
    }
    
    .news-slide-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .news-slide-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .news-slide-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .news-slider-controls {
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .news-slider-wrapper {
        height: 350px;
    }
    
    .news-slide-content {
        padding: 30px 20px;
    }
    
    .news-slide-title {
        font-size: 1.5rem;
    }
    
    .news-slide-description {
        font-size: 0.9rem;
    }
    
    .news-slide-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
}

/* Sticky Bookmark Button */
.sticky-bookmark {
    position: fixed;
    bottom: 120px;
    left: 20px;
    width: 56px;
    height: 56px;
    background: var(--bg-card);
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sticky-bookmark:hover {
    background: var(--accent-gold);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(247, 166, 0, 0.4);
}

.sticky-bookmark.is-active {
    background: var(--accent-gold);
    color: #000;
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(247, 166, 0, 0.5);
}

.sticky-bookmark.tooltip-shown::after {
    content: 'Bookmark this page';
    position: absolute;
    left: 70px;
    white-space: nowrap;
    background: var(--bg-panel);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    border: 1px solid var(--border-color);
}

.sticky-bookmark:hover::after {
    opacity: 1;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 60px;
    left: 20px;
    width: 56px;
    height: 56px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-toggle:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    transform: scale(1.1);
}

/* Light Theme Styles */
body.light-theme {
    --bg-main: #f5f5f5;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f8f8;
    --border-color: #e0e0e0;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
}

body.light-theme .hero-bg {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

body.light-theme .news-slider-section,
body.light-theme .stats-section {
    background: #ffffff;
}

body.light-theme .market-card,
body.light-theme .investment-type-card,
body.light-theme .news-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Additional Rich Features */
.rich-feature-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background: 
        linear-gradient(180deg, var(--bg-panel) 0%, #0d1114 100%),
        radial-gradient(circle at 50% 50%, rgba(247, 166, 0, 0.12) 0%, transparent 70%);
    width: 100%;
    max-width: 100%;
}

.rich-feature-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 768px) {
    .rich-feature-section {
        padding: 60px 0;
    }
    
    .rich-feature-section .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Enhanced Gold Wave Background */
.rich-feature-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Globe pattern with dotted circles */
        radial-gradient(circle at 25% 30%, rgba(247, 166, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(247, 166, 0, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(247, 166, 0, 0.1) 0%, transparent 60%),
        /* Dotted pattern overlay */
        radial-gradient(circle at 2px 2px, rgba(247, 166, 0, 0.3) 1px, transparent 0),
        radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.1) 0.5px, transparent 0),
        /* Gold wave pattern */
        url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='gold-dots' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='2' fill='%23f7a600' fill-opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' stroke='%23f7a600' stroke-width='2' stroke-opacity='0.15' fill='none'/%3E%3Cpath d='M0 250 Q100 220 200 250 T400 250' stroke='%23f7a600' stroke-width='1.5' stroke-opacity='0.1' fill='none'/%3E%3Cpath d='M0 150 Q100 100 200 150 T400 150' stroke='%23f7a600' stroke-width='1.5' stroke-opacity='0.1' fill='none'/%3E%3Crect width='400' height='400' fill='url(%23gold-dots)'/%3E%3C/svg%3E"),
        /* Animated gradients */
        linear-gradient(45deg, rgba(247, 166, 0, 0.03) 0%, transparent 50%),
        linear-gradient(-45deg, rgba(247, 166, 0, 0.03) 0%, transparent 50%);
    background-size: 
        800px 800px, 900px 900px, 1000px 1000px,
        50px 50px, 30px 30px,
        400px 400px,
        200% 200%, 200% 200%;
    background-position: 
        25% 30%, 75% 70%, 50% 50%,
        0% 0%, 0% 0%,
        0% 0%,
        0% 0%, 100% 100%;
    animation: feature-bg-animate 25s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes feature-bg-animate {
    0%, 100% {
        background-position: 
            25% 30%, 75% 70%, 50% 50%,
            0% 0%, 0% 0%,
            0% 0%,
            0% 0%, 100% 100%;
    }
    50% {
        background-position: 
            30% 35%, 70% 65%, 55% 45%,
            50px 50px, 30px 30px,
            -100px -100px,
            100% 0%, 0% 100%;
    }
}

.rich-feature-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='200' viewBox='0 0 1440 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100L60 95C120 90 240 80 360 85C480 90 600 110 720 115C840 120 960 110 1080 105C1200 100 1320 100 1380 100L1440 100V200H1380C1320 200 1200 200 1080 200C960 200 840 200 720 200C600 200 480 200 360 200C240 200 120 200 60 200H0Z' fill='%23f7a600' fill-opacity='0.08'/%3E%3Cpath d='M0 120L48 118C96 116 192 112 288 110C384 108 480 108 576 112C672 116 768 124 864 125C960 126 1056 120 1152 122C1248 124 1344 134 1392 139L1440 144V200H1392C1344 200 1248 200 1152 200C1056 200 960 200 864 200C768 200 672 200 576 200C480 200 384 200 288 200C192 200 96 200 48 200H0Z' fill='%23f7a600' fill-opacity='0.05'/%3E%3C/svg%3E") repeat-x bottom;
    pointer-events: none;
    z-index: 1;
}

.feature-grid-card {
    background: rgba(22, 26, 30, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(247, 166, 0, 0.2);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    z-index: 2;
}

.feature-grid-card:hover {
    background: rgba(247, 166, 0, 0.08);
    border-color: rgba(247, 166, 0, 0.5);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(247, 166, 0, 0.2);
}

.feature-grid-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(247, 166, 0, 0.2), rgba(247, 166, 0, 0.4));
    border: 1px solid rgba(247, 166, 0, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--accent-gold);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.feature-grid-card:hover .feature-grid-icon {
    transform: rotate(5deg) scale(1.1);
    background: linear-gradient(135deg, rgba(247, 166, 0, 0.3), rgba(247, 166, 0, 0.5));
    border-color: rgba(247, 166, 0, 0.6);
    box-shadow: 0 8px 24px rgba(247, 166, 0, 0.3);
}

.feature-grid-card::before {
    opacity: 0;
}

/* Mobile Features Slider */
.features-mobile-slider {
    position: relative;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.features-slider-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0.5rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    box-sizing: border-box;
}

.features-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.features-slide {
    min-width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    width: calc(100% - 1rem);
    scroll-snap-align: start;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.features-slide .feature-grid-card {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.features-slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.features-slider-controls .slider-btn {
    width: 45px;
    height: 45px;
}

.features-slider-controls .slider-dots {
    gap: 0.5rem;
}

.features-slider-controls .slider-dot {
    width: 10px;
    height: 10px;
}

/* Wavy Background Enhancements */
.section-with-waves {
    position: relative;
    overflow: hidden;
}

.section-with-waves::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='100' viewBox='0 0 1440 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L48 8.3C96 16.7 192 33.3 288 41.7C384 50 480 50 576 41.7C672 33.3 768 16.7 864 8.3C960 0 1056 0 1152 8.3C1248 16.7 1344 33.3 1392 41.7L1440 50V100H0V0Z' fill='%23f7a600' fill-opacity='0.08'/%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
}

.section-with-waves-bottom::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg width='1440' height='100' viewBox='0 0 1440 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100L48 91.7C96 83.3 192 66.7 288 58.3C384 50 480 50 576 58.3C672 66.7 768 83.3 864 91.7C960 100 1056 100 1152 91.7C1248 83.3 1344 66.7 1392 58.3L1440 50V100H0Z' fill='%23f7a600' fill-opacity='0.08'/%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
}

/* Fixed Mobile Auth Buttons */
.mobile-auth-buttons {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 999;
    padding: 0 15px;
    max-width: 100%;
    width: calc(100% - 30px);
    justify-content: center;
}

.mobile-auth-btn {
    flex: 1;
    max-width: 160px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mobile-login-btn {
    background: rgba(18, 22, 28, 0.95);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
}

.mobile-login-btn:hover {
    background: rgba(18, 22, 28, 1);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 166, 0, 0.3);
}

.mobile-signup-btn {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    border: 1.5px solid var(--accent-gold);
    color: var(--bg-primary);
}

.mobile-auth-btn i {
    font-size: 0.9rem;
}

.mobile-signup-btn:hover {
    background: linear-gradient(135deg, var(--accent-gold-hover), var(--accent-gold));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 166, 0, 0.5);
    color: var(--bg-primary);
}

@media (max-width: 768px) {
    .sticky-bookmark,
    .theme-toggle {
        width: 48px;
        height: 48px;
        bottom: 80px;
        left: 15px;
        font-size: 1.25rem;
    }
    
    .theme-toggle {
        bottom: 140px;
    }
    
    .mobile-auth-buttons {
        display: flex;
    }
    
    /* Ensure Smartsupp chat widget doesn't conflict with mobile auth buttons */
    #smartsupp-widget,
    .smartsupp-widget,
    iframe[src*="smartsupp"] {
        bottom: 160px !important;
    }
}

@media (min-width: 992px) {
    .mobile-auth-buttons {
        display: none;
    }
}

/* Bookmark notification animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}
    
.news-slider-section {
    padding: 40px 0;
}

/* Dark Table Theme - Reusable for markets and homepage */
.dark-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.dark-table {
    margin: 0;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

.dark-table thead {
    background: var(--bg-panel);
}

.dark-table thead th {
    background: var(--bg-panel) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 15px;
    border-bottom: 2px solid var(--border-color);
    border-top: none;
    border-color: var(--border-color) !important;
}

.dark-table tbody {
    background: var(--bg-card);
}

.dark-table tbody tr {
    background: var(--bg-card) !important;
    transition: all 0.2s ease;
    border-color: var(--border-color);
}

.dark-table tbody tr:hover {
    background: var(--bg-card-hover) !important;
}

.dark-table tbody td {
    background: transparent !important;
    padding: 20px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-table tbody tr td.text-secondary {
    color: var(--text-secondary) !important;
}