:root {
    --primary-green: #00E3AA; 
    
    /* --- DARK MODE VARIABLES (Default) --- */
    --bg-gradient: linear-gradient(120deg, #050a08 0%, #0f172a 100%);
    --text-main: #ffffff;
    --text-sub: #a1a1aa;
    --glass-nav: rgba(0, 0, 0, 0.301);
    --glass-border: rgba(255, 255, 255, 0.1);
    --search-bg: rgba(30, 41, 59, 0.7);
    --marquee-text: rgba(255,255,255,0.15); 

    --box2-bg: rgba(20, 20, 20, 0.6); 
    --box2-border: rgba(255, 255, 255, 0.1);
    --tag-bg: rgba(255, 255, 255, 0.15);
    --tag-text: #ffffff;

    /* Gradients */
    --grad-teal: linear-gradient(135deg, #50b4a4 0%, #7cdbd5 100%);
    --grad-pink: linear-gradient(135deg, #fa94f3 0%, #fcbdf8 100%);
    --grad-yellow: linear-gradient(135deg, #c5c356 0%, #fbfab6 100%);
    --grad-green: linear-gradient(135deg, #00E3AA 0%, #5ffbd4 100%);
    --grad-orange: linear-gradient(135deg, #d19e83 0%, #e8c6b3 100%);
}

/* --- LIGHT MODE VARIABLES --- */
body.light-mode {
    --bg-gradient: linear-gradient(120deg, #f0fdfa 0%, #fdfbfb 100%);
    --text-main: #1a1e21;
    --text-sub: #555;
    --glass-nav: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.4);
    --search-bg: rgba(255, 255, 255, 0.7);
    --marquee-text: rgba(0,0,0,0.08); 
    
    --box2-bg: rgba(255, 255, 255, 0.7);
    --box2-border: white;
    --tag-bg: rgba(255, 255, 255, 0.9);
    --tag-text: #1a1e21;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    transition: background 0.5s ease, color 0.5s ease; 
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }

/* --- THEME TOGGLE BUTTON --- */
.theme-btn {
    position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; border-radius: 50%;
    background: #fff; color: #000; border: none; cursor: pointer; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: transform 0.3s;
}
.theme-btn:hover { transform: scale(1.1) rotate(15deg); }
.sun-icon { width: 24px; height: 24px; }
body.light-mode .theme-btn { background: #1a1e21; color: #fff; }

/* --- BACKGROUND BLOBS --- */
.background-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; animation: float 15s infinite ease-in-out; transition: background 0.5s ease, opacity 0.5s ease; }

.blob-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: #064e3b; opacity: 0.4; animation-delay: 0s; }
.blob-2 { top: 40%; right: -15%; width: 500px; height: 500px; background: #4a044e; opacity: 0.4; animation-delay: 2s; }
.blob-3 { bottom: -20%; left: 20%; width: 700px; height: 700px; background: #0c4a6e; opacity: 0.4; animation-delay: 4s; }
.blob-4 { opacity: 0; }

body.light-mode .blob-1 { background: #cffcf2; opacity: 0.7; }
body.light-mode .blob-2 { background: #fae1f8; opacity: 0.7; }
body.light-mode .blob-3 { background: #fbfab6; opacity: 0.7; }
body.light-mode .blob-4 { top: 20%; left: 40%; width: 300px; height: 300px; background: #ffe4d6; animation-delay: 1s; opacity: 0.5; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* --- NAV --- */
nav {
    display: flex; justify-content: space-between; align-items: center; padding: 15px 5%;
    background: var(--glass-nav); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; z-index: 100; transition: background 0.5s ease;
}
.logo { height: 30px; width: auto; object-fit: contain; cursor: pointer; }
.nav-links a { text-decoration: none; color: var(--text-main); margin: 0 15px; font-weight: 600; font-size: 0.95rem; transition: 0.3s; }
.nav-links a:hover { color: var(--primary-green); }
.btn-main { background-color: var(--text-main); color: var(--bg-gradient); padding: 10px 24px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }
body:not(.light-mode) .btn-main { color: #000; background: #fff; }
body.light-mode .btn-main { background: #000; color: #fff; }
.btn-main:hover { transform: scale(1.05); }

/* --- HERO --- */
.hero { text-align: center; padding: 100px 20px 40px; max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: 4.5rem; line-height: 1; margin-bottom: 25px; color: var(--text-main); letter-spacing: -2px; }
.hero span { color: var(--primary-green); background: var(--grad-green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 1.25rem; color: var(--text-sub); margin-bottom: 40px; line-height: 1.6; }

.search-container {
    background: var(--search-bg); padding: 8px; border-radius: 60px; box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    display: flex; max-width: 500px; margin: 0 auto; border: 1px solid var(--glass-border); backdrop-filter: blur(10px);
}
.search-container input { border: none; flex-grow: 1; padding: 12px 24px; outline: none; background: transparent; border-radius: 50px; font-family: 'Outfit'; font-size: 1rem; color: var(--text-main); }
.search-container button { background: var(--primary-green); border: none; width: 46px; height: 46px; border-radius: 50%; color: white; cursor: pointer; transition: 0.3s; font-size: 1.2rem; }
.search-container button:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 227, 170, 0.4); }

/* --- MARQUEE --- */
.marquee-section { padding: 40px 0 80px 0; text-align: center; overflow: hidden; position: relative; }
.marquee-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-sub); margin-bottom: 30px; }
.marquee-track { display: flex; width: 100%; overflow: hidden; white-space: nowrap; position: relative; }

.marquee-track::before, .marquee-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; }
.marquee-track::before { left: 0; background: linear-gradient(to right, #050a08, transparent); }
.marquee-track::after { right: 0; background: linear-gradient(to left, #050a08, transparent); }
body.light-mode .marquee-track::before { background: linear-gradient(to right, #f0fdfa, transparent); }
body.light-mode .marquee-track::after { background: linear-gradient(to left, #fdfbfb, transparent); }

.marquee-content { display: flex; align-items: center; animation: scroll 40s linear infinite; }
.marquee-content img { height: 35px; width: auto; margin: 0 40px; filter: brightness(0) invert(1); opacity: 0.5; transition: 0.3s; cursor: pointer; }
.marquee-content img:hover { opacity: 1; }
body.light-mode .marquee-content img { filter: brightness(0); opacity: 0.6; }

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

/* --- CARDS --- */
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 320px); gap: 24px; padding: 20px 5%; max-width: 1400px; margin: 0 auto 80px auto; }
.tilt-card { transform-style: preserve-3d; transform: perspective(1000px); }

.card { border-radius: 35px; padding: 35px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--glass-border); }
.glass-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); z-index: 1; pointer-events: none;}
.content-wrapper { z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }

.card-title { font-size: 2.2rem; font-weight: 800; margin-top: 10px; letter-spacing: -1px; line-height: 0.95; }
.card-sub { font-size: 1.1rem; opacity: 0.9; font-weight: 500; }
.tag { background: var(--tag-bg); color: var(--tag-text); padding: 8px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; width: fit-content; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.tag-grey { background: var(--tag-bg); }
.dark-text { color: var(--text-main); }
.grey-text { color: var(--text-sub); }
.balance-text { font-size: 3.5rem; font-weight: 800; letter-spacing: -2px; }

/* NEW: Background Logos on Cards */
.card-bg-logo {
    position: absolute;
    bottom: -20px;
    right: -20px;
    height: 160px; /* Big size */
    width: auto;
    z-index: 0;
    transform: rotate(-15deg); /* Tilted look */
    pointer-events: none;
    
    /* Default Dark Mode: White, Faded */
    filter: brightness(0) invert(1);
    opacity: 0.25;
    transition: opacity 0.3s;
}

/* Light Mode Card Logos: Black, Faded */
body.light-mode .card-bg-logo {
    filter: brightness(0);
    opacity: 0.1;
}

/* Hover Effect for Card Logos */
.card:hover .card-bg-logo {
    opacity: 0.35;
    transform: rotate(-10deg) scale(1.1); /* Subtle movement on hover */
    transition: all 0.5s ease;
}

/* Colors */
.box-1 { grid-column: span 2; background: var(--grad-teal); color: white; box-shadow: 0 15px 35px -10px rgba(80, 180, 164, 0.4); }
.box-2 { grid-column: span 1; background: var(--box2-bg); backdrop-filter: blur(20px); border: 1px solid var(--box2-border); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.05); }
.box-3 { grid-column: span 1; background: var(--grad-pink); color: #4a054a; box-shadow: 0 15px 35px -10px rgba(250, 148, 243, 0.4); }
.box-4 { grid-column: span 1; background: var(--grad-yellow); color: #5c5a03; box-shadow: 0 15px 35px -10px rgba(245, 243, 138, 0.5); }
.box-5 { grid-column: span 2; background: var(--grad-green); color: #003d2d; box-shadow: 0 15px 35px -10px rgba(0, 227, 170, 0.4); }
.box-6 { grid-column: span 1; background: var(--grad-orange); color: white; box-shadow: 0 15px 35px -10px rgba(209, 158, 131, 0.4); }

footer { text-align: center; padding: 60px; color: var(--text-sub); font-size: 0.9rem; position: relative; z-index: 2; }
.scroll-hidden { opacity: 0; transform: translateY(40px) scale(0.95); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
.scroll-show { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 900px) {
    .grid-container { grid-template-columns: 1fr; grid-template-rows: auto; }
    .box-1, .box-2, .box-3, .box-4, .box-5, .box-6 { grid-column: span 1; height: 280px; }
    .hero h1 { font-size: 3rem; }
    .nav-links { display: none; }
    .theme-btn { bottom: 20px; left: 20px; }
}