/* ==========================================================================
   custom-client-visuals.css — Platform Depth & Console Layout Layers
   ========================================================================== */

/* --- Low-Fatigue Layered Screen Banding With Bounce Lift --- */
section.section {
    margin: 0 !important; /* Flushes container boundaries clean edge-to-edge */
    padding: var(--space-md) var(--space-lg) !important;
    background: var(--band-1) !important; /* True black background grid main layer */
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    border: none !important; /* Strips old rigid template outlines */
    /* Forces the broad section lift mechanics to animate with smooth cubic-bezier transitions */
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

    /* Subtle alternate slate contrast bands across horizontal sections */
    section.section:nth-of-type(2n) {
        background: var(--band-2) !important; /* Charcoal offset data block canvas */
        border-top: 1px solid rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    /* Inner block grid controller constraints */
    section.section > .container {
        background: transparent !important; /* Removes cheap inner container box-in-a-box frames */
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 1240px !important; /* Maximizes desktop display asset data density width limits */
    }

    /* RESTORED SECTION LIFT: The entire broad section module steps up tightly on hover */
    section.section:hover {
        transform: translateY(-2px) !important; /* Broad page wrapper bounce mechanism activated */
        z-index: 5; /* Ensures the active lifting layer sits safely on top of resting blocks */
    }

        /* Suppresses legacy inner container hover jumps so they don't fight the primary section action */
        section.section:hover > .container {
            transform: none !important;
            box-shadow: none !important;
        }


    /* ==========================================================================
   HIGH-TECH ALTERNATING PARTIAL GRADIENT LINES (Modulus Automation)
   ========================================================================== */

    /* --- ODD SECTIONS (1, 3, 5): Fade Left to Right --- */
    section.section:nth-of-type(odd)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 70%; /* Stops short at 70% width */
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 255, 102, 0.20) 0%, /* Subdued green start point */
        rgba(255, 255, 255, 0.04) 40%, /* Highly muted silver thread */
        transparent 100% /* Dissolves completely into total darkness */
        );
        z-index: 1;
    }

    /* --- EVEN SECTIONS (2, 4, 6): Fade Right to Left --- */
    section.section:nth-of-type(even)::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0; /* Anchored strictly to the right side of the screen viewport */
        width: 70%; /* Stops short at 70% width */
        height: 1px;
        background: linear-gradient(270deg, rgba(0, 255, 102, 0.20) 0%, /* Subdued green start point on the right */
        rgba(255, 255, 255, 0.04) 40%, /* Highly muted silver thread */
        transparent 100% /* Dissolves completely into total darkness */
        );
        z-index: 1;
    }

    /* Clears out legacy absolute pseudoelement colliders entirely */
    section.section::after {
        display: none !important;
    }



/* ==========================================================================
   HERO ENHANCEMENTS & TELEMETRY GLOW LAYERS
   ========================================================================== */
.hero-text-overlay  {
    background: rgba(14, 18, 26, 0.90) !important;
    border: 1px solid rgba(0, 255, 102, 0.2) !important; /* Sharp green glowing telemetry banner framing */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 255, 102, 0.08) !important;
    padding: var(--space-md) !important;
    border-radius: 4px !important;
    color: var(--hero-text-color);
    text-shadow: var(--hero-text-shadow);
}


    .hero-text-overlay h1 {
        /*font-family: monospace, system-ui !important;*/
        color: var(--primary) !important; /* Cyber lime code output line */
    }

    /* Forces Hero subtitles to style like terminal code output lines */
    .hero-text-overlay p.image-paragraph {
        /*font-family: monospace, system-ui !important;*/
        color: var(--primary) !important; /* Cyber lime code output line */
        font-size: 0.9rem !important;
        letter-spacing: -0.01em;
        margin-top: 0.5rem;
    }

/* Remove ALL hero image overlays */
.hero.has-image::before,
.hero.has-image::after {
    background: none !important;
    opacity: 0 !important;
}


/* ==========================================================================
   PLATFORM UTILITIES & HYPERLINKS
   ========================================================================== */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

    a:hover {
        color: var(--primary-dark);
        transform: translateX(1px);
    }

/* Image Hover Dynamics (Subdued for technical dashboard environments) */
/*img:hover, .image img:hover {
    transform: none !important;
    opacity: 0.95;
    box-shadow: none !important;
}*/

img:hover, .image img:hover {
    opacity: 0.95;
    /* Removed the hard 'transform: none !important' that was locking down your card animations */
}

/* Elevation utilities */
.elevation-1 {
    box-shadow: var(--shadow-soft);
}

.elevation-2 {
    box-shadow: var(--shadow-strong);
}

/* Rounded utilities */
.rounded-sm {
    border-radius: 6px;
}

.rounded-md {
    border-radius: var(--radius);
}

.rounded-lg {
    border-radius: var(--radius-large);
}

/* Surface layers */
.surface-0 {
    background: var(--bg-main);
}

.surface-1 {
    background: var(--bg-alt);
}

.surface-2 {
    background: rgba(var(--overlay-rgb), 0.03);
}

/* Dark mode legacy fallback mapping dictionary */
:root[data-theme="dark"] {
    --bg-main: #1a1a1d;
    --bg-alt: #222226;
    --text-main: #eee;
    --text-muted: #bbb;
}