/* ============================================
   OBS MARKETS - UI UPGRADE CSS
   ============================================ */

/* Global Dark Theme Enhancement */
body {
    background: #0a0e17 !important;
}

/* ---- NAVBAR UPGRADE ---- */
.navbar, header {
    background: rgba(10,14,23,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
}

.navbar-brand img { filter: brightness(1.1); }

.nav-link, .navbar-nav .nav-link {
    color: #a0aec0 !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    position: relative;
}

.nav-link:hover {
    color: #0ffffa !important;
}

/* ---- BUTTONS UPGRADE ---- */
.main-btn, .btn.main-btn {
    background: linear-gradient(135deg, #0ffffa, #0bb8b5) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(15,255,250,0.25) !important;
}

.main-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(15,255,250,0.4) !important;
}

.main-btn2, .btn.main-btn2 {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.main-btn2:hover {
    border-color: #0ffffa !important;
    color: #0ffffa !important;
    transform: translateY(-2px) !important;
}

/* ---- SECTION BACKGROUNDS ---- */
section, .section-bg {
    background: #0a0e17 !important;
    position: relative;
}

section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(15,255,250,0.02) 0%, transparent 70%);
    pointer-events: none;
}

/* ---- ABOUT SECTION ---- */
.about-section {
    padding: 80px 0 !important;
}

.about-content h2, .about-section h2 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #fff 0%, #0ffffa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- FEATURE SECTION ---- */
.feature-section {
    padding: 80px 0 !important;
    background: #0d1120 !important;
}

.feature-item, .benefit-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    transition: all 0.3s ease !important;
    height: 100%;
}

.feature-item:hover, .benefit-item:hover {
    background: rgba(15,255,250,0.05) !important;
    border-color: rgba(15,255,250,0.2) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.feature-item .title, .benefit-item .title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-top: 16px !important;
}

.feature-item p, .benefit-item p {
    color: #a0aec0 !important;
    line-height: 1.7 !important;
}

.feature-item .icon, .benefit-item .icon,
.feature-item i, .benefit-item i {
    color: #0ffffa !important;
    font-size: 2rem !important;
}

/* ---- HOW IT WORKS SECTION ---- */
.work-section {
    padding: 80px 0 !important;
    background: #0a0e17 !important;
}

.section-header h2, .section-title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #fff 0%, #0ffffa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px !important;
}

.section-header p, .section-subtitle {
    color: #a0aec0 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

.work-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.work-item:hover {
    background: rgba(15,255,250,0.04) !important;
    border-color: rgba(15,255,250,0.15) !important;
    transform: translateY(-4px) !important;
}

.work-item .work-number {
    background: linear-gradient(135deg, #0ffffa, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
}

.work-item .title {
    color: #fff !important;
    font-weight: 700 !important;
}

.work-item p { color: #a0aec0 !important; }

/* ---- PLAN SECTION ---- */
.plan-section {
    padding: 80px 0 !important;
    background: #0d1120 !important;
}

.plan-item, .pricing-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    padding: 32px 24px !important;
    transition: all 0.3s ease !important;
}

.plan-item:hover {
    background: rgba(15,255,250,0.05) !important;
    border-color: rgba(15,255,250,0.25) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,0.4) !important;
}

.plan-item .plan-name, .plan-item .title {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
}

.plan-item .plan-price {
    background: linear-gradient(135deg, #0ffffa, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
}

/* ---- FAQ SECTION ---- */
.faq-section {
    padding: 80px 0 !important;
    background: #0a0e17 !important;
}

.accordion-item, .faq-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.accordion-button, .faq-header {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
}

.accordion-button:not(.collapsed) {
    background: rgba(15,255,250,0.05) !important;
    color: #0ffffa !important;
    box-shadow: none !important;
}

.accordion-body, .faq-body {
    color: #a0aec0 !important;
    line-height: 1.8 !important;
    padding: 16px 24px !important;
}

/* ---- TESTIMONIAL SECTION ---- */
.testimonial-section {
    padding: 80px 0 !important;
    background: #0d1120 !important;
}

.testimonial-item, .investor-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    transition: all 0.3s ease !important;
}

.testimonial-item:hover, .investor-item:hover {
    background: rgba(15,255,250,0.04) !important;
    border-color: rgba(15,255,250,0.15) !important;
    transform: translateY(-4px) !important;
}

.investor-item .name {
    color: #fff !important;
    font-weight: 700 !important;
}

.investor-item .designation {
    color: #0ffffa !important;
    font-size: 0.85rem !important;
}

/* ---- NEWSLETTER SECTION ---- */
.newsletter-section {
    padding: 80px 0 !important;
    background: linear-gradient(135deg, rgba(15,255,250,0.05) 0%, rgba(124,58,237,0.05) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.newsletter-section h2 {
    background: linear-gradient(135deg, #fff 0%, #0ffffa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}

.newsletter-form input, .newsletter-section input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
}

.newsletter-form input::placeholder {
    color: #718096 !important;
}

/* ---- CONTACT SECTION ---- */
.contact-section {
    padding: 80px 0 !important;
}

.contact-form, .contact-box {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    padding: 32px !important;
}

.form-control {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.form-control:focus {
    border-color: rgba(15,255,250,0.4) !important;
    box-shadow: 0 0 0 3px rgba(15,255,250,0.1) !important;
    background: rgba(255,255,255,0.07) !important;
}

/* ---- FOOTER UPGRADE ---- */
footer, .footer-section {
    background: #060912 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.footer-section h4, .footer-section h5 {
    color: #fff !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.footer-section a, .footer-section p {
    color: #718096 !important;
    transition: color 0.3s ease !important;
}

.footer-section a:hover {
    color: #0ffffa !important;
}

.footer-bottom {
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding: 20px 0 !important;
}

/* ---- TRANSACTION SECTION ---- */
.transaction-section {
    padding: 80px 0 !important;
    background: #0d1120 !important;
}

.transaction-item, .table {
    background: transparent !important;
    color: #a0aec0 !important;
}

.table thead th {
    color: #0ffffa !important;
    font-weight: 700 !important;
    border-color: rgba(255,255,255,0.06) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table tbody tr {
    border-color: rgba(255,255,255,0.04) !important;
    transition: background 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(15,255,250,0.03) !important;
}

/* ---- BLOG SECTION ---- */
.blog-section {
    padding: 80px 0 !important;
}

.blog-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.blog-item:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(15,255,250,0.15) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.blog-item .title a {
    color: #fff !important;
    font-weight: 700 !important;
}

.blog-item .title a:hover { color: #0ffffa !important; }

/* ---- SCROLL ANIMATIONS ---- */
.feature-item, .work-item, .plan-item, .blog-item, .testimonial-item, .investor-item {
    animation: fadeInUp 0.6s ease both;
}

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

/* ---- CUSTOM SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0e17; }
::-webkit-scrollbar-thumb { background: rgba(15,255,250,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,255,250,0.5); }

/* ---- BADGE & LABELS ---- */
.badge, .tag {
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
}

/* ---- SPREAD SECTION FIX ---- */
.spread-section h2 {
    background: linear-gradient(135deg, #fff 0%, #0ffffa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
}

.spread-section .btn-success {
    background: linear-gradient(135deg, #0ffffa, #0bb8b5) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
}

.spread-section .btn-outline-success {
    border-color: rgba(15,255,250,0.4) !important;
    color: #0ffffa !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
}

/* Counter section fix */
.counter-section {
    padding: 40px 0 !important;
    background: #0d1120 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    min-height: auto !important;
    clear: both !important;
}

/* Live ticker fix */
.live-ticker-strip {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
}

/* Banner section height fix */
.banner-section {
    min-height: 85vh !important;
    max-height: 100vh !important;
}

/* Spread section fix */
.spread-section {
    padding: 60px 0 !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Counter section fix */
.counter-section {
    padding: 40px 0 !important;
    background: #0d1120 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    min-height: auto !important;
    clear: both !important;
}

/* Live ticker fix */
.live-ticker-strip {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
}

/* Banner section height fix */
.banner-section {
    min-height: 85vh !important;
    max-height: 100vh !important;
}

/* Spread section fix */
.spread-section {
    padding: 60px 0 !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}