/* Neural Synapse Transition Effect
   ============================================================================
   ARCHITECTURE: This section OVERLAPS adjacent sections using negative margins.
   It must be ABOVE (higher z-index) the sections so its gradient is visible.

   The gradient flows from technology section color → black (use-cases color)
   ============================================================================ */
.neural-transition {
    position: relative;
    width: 100%;
    height: 450px;
    /* Pull up MORE into technology section for seamless blend */
    margin-top: -180px;
    margin-bottom: -80px;
    /*
     * BACKGROUND: Solid black. The technology section's own ::after pseudo-element
     * (380px gradient, z-index 5) handles the green→black fade.
     * This div just provides the black canvas for neural synapse particles.
     */
    background: #000000;
    overflow: hidden;
    /* CRITICAL: Must be ABOVE sections (z-index 2) to be visible */
    z-index: 10;
    pointer-events: none;
}

#neural-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none; /* FIXED: Canvas is visual-only, must not block clicks */
}

/* Technology section - CONTENT must be above neural-transition */
.section.technology {
    position: relative;
    z-index: 1;  /* Section itself is below neural (z-index 10) */
    padding-bottom: calc(var(--space-28) + 160px) !important;
}

/* Technology section content needs to be above the neural overlay */
.section.technology > .container {
    position: relative;
    z-index: 15;  /* Above neural-transition (z-index 10) */
}

/* Tech cards at the bottom should extend into neural zone */
.section.technology .tech-grid {
    position: relative;
    z-index: 15;
}

/* Last row of tech cards - style for overlay on neural */
.section.technology .tech-card {
    position: relative;
    z-index: 15;
}

/* Bottom tech cards get subtle glow to blend with neural */
.section.technology .tech-card:nth-child(n+4) {
    /* Cards 4, 5, 6 (bottom row) get enhanced styling */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(0, 0, 0, 0.15);
}

.section.technology .tech-card:nth-child(n+4) .tech-title,
.section.technology .tech-card:nth-child(n+4) .tech-description {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Gradient fade at bottom of technology section to blend into neural zone */
.section.technology::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 380px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.12) 12%,
        rgba(0, 0, 0, 0.28) 25%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.6) 55%,
        rgba(0, 0, 0, 0.75) 70%,
        rgba(0, 0, 0, 0.88) 85%,
        rgba(0, 0, 0, 1) 100%
    );
    pointer-events: none;
    z-index: 5;
}

/* Use-cases section - CONTENT overlays the neural-transition */
.section.use-cases {
    position: relative;
    z-index: 11;  /* Above neural (z-index 10) so content is visible */
    /* Pull section up to overlay neural transition */
    margin-top: -200px;
    padding-top: 40px !important;
    /* Transparent top fading to black to match dark sections */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 60px,
        rgba(0, 0, 0, 0.3) 100px,
        rgba(0, 0, 0, 0.6) 150px,
        rgba(0, 0, 0, 0.85) 200px,
        #000000 260px,
        #000000 100%
    ) !important;
}

/* Use-cases section content - visible and properly positioned */
.section.use-cases > .container {
    position: relative;
    z-index: 20;
    /* Move entire content block up 260px to show full card bottoms */
    transform: translateY(-260px);
    /* Compensate for transform to maintain proper flow */
    margin-bottom: -260px;
}

/* Section header - ensure it's visible */
.section.use-cases .section-header {
    position: relative;
    z-index: 20;
    margin-bottom: 30px;
    transform: translateY(-25px);  /* Move header up 25px */
}

.section.use-cases .section-title {
    color: #F5F4F0 !important;  /* Light cream for dark background */
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
}

.section.use-cases .section-subtitle {
    color: #F8F6EE !important;  /* Warm cream - high contrast against green background */
    font-weight: 500;
}

/* Use cases grid - move up 50px as requested */
.section.use-cases .use-cases-grid {
    position: relative;
    z-index: 20;
    margin-top: -20px;
}

/* Tighter vertical stacking between use-cases and trust sections */
.section.use-cases {
    padding-bottom: 0.5rem !important;  /* Minimal bottom padding to clip section bottom */
    overflow: visible;  /* Allow content to extend but clip background */
}

.section.trust {
    position: relative;
    z-index: 12;  /* Above use-cases (z-index: 11) to ensure visibility */
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
    margin-top: 20px;  /* Positive margin to give use-case cards room */
}

/* Reduce section header margins */
.section.use-cases .section-header {
    margin-bottom: 1.5rem !important;
}

.section.trust .section-header {
    margin-bottom: 1.5rem !important;
}

/* Tighter use-cases grid */
.section.use-cases .use-cases-grid {
    gap: 1.5rem;
}

/* Tighter trust grid */
.section.trust .trust-grid {
    gap: 1rem;
}

/* Reduce use-case card internal padding */
.section.use-cases .use-case-card {
    padding: 1.25rem;
}

/* Reduce trust card internal padding */
.section.trust .trust-card {
    padding: 1.25rem;
}

/* Mobile responsiveness moved to css/mobile-only.css */