/*
Base styles
- global backgrounds
- html, body rules
- gradient mesh
*/

/* ================================
   Root Variables
================================ */
html,

/* ================================
   Base Page Background
================================ */
body {
    background-color: var(--mesh-base);
    min-height: 100%;
    color: var(--text-primary);
}

/* ================================
   Gradient Mesh Background
================================ */
.gradient-mesh {
    background-image:
        radial-gradient(at 20% 20%, var(--mesh-1), transparent 50%),
        radial-gradient(at 80% 30%, var(--mesh-2), transparent 50%),
        radial-gradient(at 50% 80%, var(--mesh-3), transparent 50%),
        radial-gradient(at 10% 70%, var(--mesh-4), transparent 50%),
        radial-gradient(at 90% 90%, var(--mesh-5), transparent 50%);
    background-repeat: no-repeat;
    background-size: cover;
}

/* ================================
   Color Mode Switch
================================ */

/* Plain Mode */
body.color-mode-plain {
    background-color: var(--plain-bg);
}

body.color-mode-plain .gradient-mesh {
    background-image: none !important;
}

/* Vibrant Mode (default) */
body.color-mode-vibrant {
    background-color: var(--mesh-base);
}

/* ================================
   Prevent Tailwind Solid Backgrounds
================================ */
section.bg-black,
section.bg-black\/20,
section.bg-black\/30,
section.bg-black\/40 {
    background-color: transparent !important;
}
/* Subtle floating animation for hero mockups */
@keyframes floatSlow {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}


.float-anim {
    animation: floatSlow 6s ease-in-out infinite;
    will-change: transform;
}
/* ================================
   FIX: Modular Header Layout
================================ */

.site-header {
    min-height: 80px;
    height: auto;
    overflow: visible;
}

/* Top bar only */
.site-header .header-main {
    height: 80px;
    display: flex;
    align-items: center;
}

.site-header * {
    line-height: 1.2;
}

.site-header .site-logo img {
    max-height: 36px;
    width: auto;
    display: block;
}

.site-header .site-title {
    font-size: 1.25rem !important;
    font-weight: 800;
}

.site-header .header-actions button {
    font-size: 0.75rem;
    padding: 0.4rem 0.9rem;
}

.site-header .marquee {
    height: 36px;
    display: flex;
    align-items: center;
}
/* Info Strip Background */
.site-header .marquee,
.site-header .info-strip {
    background: var(--info-strip-bg);
}
.info-strip {
    background: var(--info-strip-bg);
}

/* Text Colors */
.text-muted,
.text-gray-400 {
    color: var(--text-secondary);
    
.dynamic-text-gradient {
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}    
    
}