/* ==========================================
   1. GLOBAL RESETS & BASE STYLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0b10;
    color: #f3f4f6;
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Responsive Images */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ==========================================
   2. CUSTOM SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0b10;
}
::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;
}

/* ==========================================
   3. UTILITY CLASSES (Effects & Backgrounds)
   ========================================== */

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Logo Pulse Animation */
@keyframes logo-pulse {
    0% { filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.6)); }
    50% { filter: drop-shadow(0 0 45px rgba(6, 182, 212, 1)); }
    100% { filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.6)); }
}

#hero img[alt="VexiqoCoin Logo"] {
    animation: logo-pulse 3s infinite ease-in-out;
    will-change: filter;
}

/* Hero Glow Background */
.bg-hero-glow {
    background: radial-gradient(circle at 50% 25%, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.08) 45%, transparent 70%);
}

/* Cyber Grid Pattern */
.bg-cyber-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Card Hover Micro-Interactions */
.card-hover {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px -10px rgba(6, 182, 212, 0.35);
    border-color: rgba(6, 182, 212, 0.5);
}

/* ==========================================
   4. THEME TOGGLE (Light / Dark Mode)
   ========================================== */

/* ---------- LIGHT MODE ---------- */
body.light-mode {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;
}

/* Light mode - Background sections */
body.light-mode section {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Light mode - All dark backgrounds become white/light grey */
body.light-mode [class*="bg-slate-950"],
body.light-mode [class*="bg-slate-900"],
body.light-mode [class*="bg-slate-800"],
body.light-mode [class*="bg-darkCard"],
body.light-mode [class*="bg-darkBg"],
body.light-mode [class*="bg-[#0a0e14]"] {
    background-color: #ffffff !important;
}

/* Light mode - Cards / Secondary backgrounds */
body.light-mode [class*="bg-slate-900/60"],
body.light-mode [class*="bg-slate-900/80"],
body.light-mode [class*="bg-slate-900/90"],
body.light-mode [class*="bg-slate-950/60"],
body.light-mode [class*="bg-darkCard/"] {
    background-color: #f1f5f9 !important;
}

/* Light mode - All text */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #0f172a !important;
}

body.light-mode p,
body.light-mode span,
body.light-mode li,
body.light-mode a,
body.light-mode div {
    color: #334155;
}

/* Light mode - Preserve accent colors */
body.light-mode [class*="text-cyan-400"],
body.light-mode [class*="text-cyan-500"] {
    color: #0891b2 !important;
}

body.light-mode [class*="text-purple-400"],
body.light-mode [class*="text-purple-500"] {
    color: #7c3aed !important;
}

body.light-mode [class*="text-emerald-400"],
body.light-mode [class*="text-emerald-500"] {
    color: #059669 !important;
}

body.light-mode [class*="text-slate-300"] {
    color: #475569 !important;
}

body.light-mode [class*="text-slate-400"] {
    color: #64748b !important;
}

body.light-mode [class*="text-slate-500"] {
    color: #94a3b8 !important;
}

body.light-mode [class*="text-white"] {
    color: #0f172a !important;
}

/* Light mode - Borders */
body.light-mode [class*="border-slate-"] {
    border-color: #e2e8f0 !important;
}

body.light-mode [class*="border-cyan-500/30"] {
    border-color: rgba(6, 182, 212, 0.4) !important;
}

/* Light mode - Navbar */
body.light-mode nav,
body.light-mode header {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-mode nav a {
    color: #334155 !important;
}

body.light-mode nav a:hover {
    color: #0891b2 !important;
}

/* Light mode - Buttons */
body.light-mode [class*="bg-slate-800/80"],
body.light-mode [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

/* Light mode - Input fields */
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* Light mode - Shadow adjustments (lighter shadows) */
body.light-mode [class*="shadow-"] {
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================
   5. THEME TOGGLE BUTTON STYLING (Desktop)
   ========================================== */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background-color: #334155;
    color: #06b6d4;
    border-color: #06b6d4;
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-btn .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.theme-toggle-btn .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-180deg) scale(0.5);
}

body.light-mode .theme-toggle-btn {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #0891b2;
}

body.light-mode .theme-toggle-btn:hover {
    background-color: #e2e8f0;
    color: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

body.light-mode .theme-toggle-btn .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
}

body.light-mode .theme-toggle-btn .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ==========================================
   6. THEME TOGGLE BUTTON STYLING (Mobile)
   ========================================== */
.theme-toggle-btn-mobile {
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn-mobile .icon-sun,
.theme-toggle-btn-mobile .icon-moon {
    position: absolute;
    left: 32%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-btn-mobile .icon-moon {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1);
}

.theme-toggle-btn-mobile .icon-sun {
    opacity: 0;
    transform: translateY(-50%) rotate(-180deg) scale(0.5);
}

body.light-mode .theme-toggle-btn-mobile .icon-moon {
    opacity: 0;
    transform: translateY(-50%) rotate(180deg) scale(0.5);
}

body.light-mode .theme-toggle-btn-mobile .icon-sun {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1);
    color: #f59e0b;
}

/* ==========================================
   7. RESPONSIVE MEDIA QUERIES
   ========================================== */

@media screen and (max-width: 1024px) {
    .logo {
        height: 50px;
    }
    .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 768px) {
    .logo {
        height: 45px;
    }
    h1 { font-size: clamp(1.8rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1.2rem, 4vw, 1.5rem) !important; }
    p  { font-size: 0.95rem !important; }
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    .break-words {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .carousel-wrapper {
        height: 300px !important;
    }
    .btn-mobile-full {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        height: 40px;
    }
    body {
        font-size: 14px;
    }
    #hero .w-32, #hero .w-40 {
        width: 6rem !important;
        height: 6rem !important;
    }
    #hero .md\:flex-row {
        flex-direction: column !important;
    }
}

/* ==========================================
   8. ACCESSIBILITY & PERFORMANCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

a:focus-visible, button:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}