/* ===========================
   SECTION OVERLAYS & TEXT STYLING
   Dark overlays for branded backgrounds
   Proper text contrast and readability
   =========================== */

/* Dark Overlay for Branded Background Sections */
.section-dark-overlay {
    position: relative;
}

.section-dark-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(17, 24, 39, 0.92) 0%,
        rgba(17, 24, 39, 0.88) 50%,
        rgba(17, 24, 39, 0.92) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Glossy Dark Overlay with Chroma Accent */
.section-glossy-overlay {
    position: relative;
}

.section-glossy-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(17, 24, 39, 0.90) 0%,
        rgba(0, 255, 136, 0.05) 30%,
        rgba(17, 24, 39, 0.90) 70%,
        rgba(0, 255, 136, 0.05) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Subtle Green Tint Overlay */
.section-green-tint {
    position: relative;
}

.section-green-tint::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(17, 24, 39, 0.88) 0%,
        rgba(0, 255, 136, 0.08) 50%,
        rgba(17, 24, 39, 0.88) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Content Above Overlay */
.section-dark-overlay > .container,
.section-glossy-overlay > .container,
.section-green-tint > .container {
    position: relative;
    z-index: 1;
}

/* Text Colors for Dark Overlays */
.section-dark-overlay .section-title,
.section-glossy-overlay .section-title,
.section-green-tint .section-title {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-dark-overlay .section-subtitle,
.section-glossy-overlay .section-subtitle,
.section-green-tint .section-subtitle {
    color: var(--chroma-green);
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.section-dark-overlay p,
.section-glossy-overlay p,
.section-green-tint p {
    color: rgba(255, 255, 255, 0.9);
}

.section-dark-overlay .section-description,
.section-glossy-overlay .section-description,
.section-green-tint .section-description {
    color: rgba(255, 255, 255, 0.85);
}

/* Feature Boxes on Dark Overlays */
.section-dark-overlay .feature-box,
.section-glossy-overlay .feature-box,
.section-green-tint .feature-box {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 136, 0.15);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-dark-overlay .feature-box:hover,
.section-glossy-overlay .feature-box:hover,
.section-green-tint .feature-box:hover {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 255, 136, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.section-dark-overlay .feature-box h3,
.section-glossy-overlay .feature-box h3,
.section-green-tint .feature-box h3 {
    color: #ffffff;
}

.section-dark-overlay .feature-box p,
.section-glossy-overlay .feature-box p,
.section-green-tint .feature-box p {
    color: rgba(255, 255, 255, 0.85);
}

.section-dark-overlay .feature-box i,
.section-glossy-overlay .feature-box i,
.section-green-tint .feature-box i {
    color: var(--chroma-green);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

/* Benefit Cards on Dark Overlays */
.section-dark-overlay .benefit-card,
.section-glossy-overlay .benefit-card,
.section-green-tint .benefit-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 136, 0.15);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-dark-overlay .benefit-card:hover,
.section-glossy-overlay .benefit-card:hover,
.section-green-tint .benefit-card:hover {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 255, 136, 0.2);
}

.section-dark-overlay .benefit-card h3,
.section-glossy-overlay .benefit-card h3,
.section-green-tint .benefit-card h3 {
    color: #ffffff;
}

.section-dark-overlay .benefit-card p,
.section-glossy-overlay .benefit-card p,
.section-green-tint .benefit-card p {
    color: rgba(255, 255, 255, 0.85);
}

.section-dark-overlay .benefit-card i,
.section-glossy-overlay .benefit-card i,
.section-green-tint .benefit-card i {
    color: var(--chroma-green);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

/* Tech Stack Items on Dark Overlays */
.section-dark-overlay .tech-item,
.section-glossy-overlay .tech-item,
.section-green-tint .tech-item {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.section-dark-overlay .tech-item h3,
.section-glossy-overlay .tech-item h3,
.section-green-tint .tech-item h3 {
    color: #ffffff;
}

.section-dark-overlay .tech-item li,
.section-glossy-overlay .tech-item li,
.section-green-tint .tech-item li {
    color: rgba(255, 255, 255, 0.85);
}

/* Process Steps on Dark Overlays */
.section-dark-overlay .process-step,
.section-glossy-overlay .process-step,
.section-green-tint .process-step {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(10px);
    border-left: 3px solid var(--chroma-green);
}

.section-dark-overlay .step-number,
.section-glossy-overlay .step-number,
.section-green-tint .step-number {
    background: linear-gradient(135deg, var(--chroma-green) 0%, #00cc6a 100%);
    color: var(--dark-color);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.section-dark-overlay .step-content h3,
.section-glossy-overlay .step-content h3,
.section-green-tint .step-content h3 {
    color: #ffffff;
}

.section-dark-overlay .step-content p,
.section-glossy-overlay .step-content p,
.section-green-tint .step-content p {
    color: rgba(255, 255, 255, 0.85);
}

/* Portfolio Cards on Dark Overlays */
.section-dark-overlay .portfolio-card,
.section-glossy-overlay .portfolio-card,
.section-green-tint .portfolio-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.section-dark-overlay .portfolio-card h3,
.section-glossy-overlay .portfolio-card h3,
.section-green-tint .portfolio-card h3 {
    color: #ffffff;
}

.section-dark-overlay .portfolio-card p,
.section-glossy-overlay .portfolio-card p,
.section-green-tint .portfolio-card p {
    color: rgba(255, 255, 255, 0.85);
}

/* Pro Cards (Hardware Showcase) */
.section-dark-overlay .pro-card,
.section-glossy-overlay .pro-card,
.section-green-tint .pro-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.section-dark-overlay .pro-card h3,
.section-glossy-overlay .pro-card h3,
.section-green-tint .pro-card h3 {
    color: var(--chroma-green);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.section-dark-overlay .pro-card p,
.section-glossy-overlay .pro-card p,
.section-green-tint .pro-card p {
    color: rgba(255, 255, 255, 0.85);
}

/* FAQ Items on Dark Overlays */
.section-dark-overlay .faq-item,
.section-glossy-overlay .faq-item,
.section-green-tint .faq-item {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 136, 0.15);
}

.section-dark-overlay .faq-question h3,
.section-glossy-overlay .faq-question h3,
.section-green-tint .faq-question h3 {
    color: #ffffff;
}

.section-dark-overlay .faq-answer p,
.section-glossy-overlay .faq-answer p,
.section-green-tint .faq-answer p {
    color: rgba(255, 255, 255, 0.85);
}

/* Glossy Shine Effect */
.glossy-shine {
    position: relative;
    overflow: hidden;
}

.glossy-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: glossy-sweep 3s infinite;
}

@keyframes glossy-sweep {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-dark-overlay::before,
    .section-glossy-overlay::before,
    .section-green-tint::before {
        background: rgba(17, 24, 39, 0.93);
    }
}