/* Shared LabsCare CTA styling for the current /new static site. */
.cta-section {
    margin-top: 100px !important;
    padding: 64px 60px !important;
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.06) 0%, rgba(0, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(0, 255, 102, 0.2) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #00ff66, #00ffff, transparent) !important;
    opacity: 0.85 !important;
}

.cta-section h2 {
    position: relative !important;
    z-index: 1 !important;
    max-width: 900px !important;
    margin: 0 0 15px !important;
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

.cta-section p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.cta-section .cta-text {
    position: relative !important;
    z-index: 1 !important;
    flex: initial !important;
    width: 100% !important;
    max-width: 900px !important;
}

.cta-section .cta-buttons,
.cta-section .btn-group {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 4px !important;
}

.cta-form-section {
    max-width: 1200px !important;
    margin: 100px auto 0 !important;
    padding: 60px !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta-form-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #00ffff, #00ff66, transparent) !important;
    opacity: 0.85 !important;
}

.cta-form-section .cta-text {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.cta-form-section .cta-text h2 {
    margin: 0 0 15px !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}

.cta-form-section .cta-text p {
    margin: 0 0 20px !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

.cta-form-section .cta-highlight {
    display: block !important;
    margin-top: 10px !important;
    color: #00ffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
}

.cta-form-section .cta-form-box {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 !important;
    min-width: 320px !important;
    padding: 30px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
}

.cta-form-section .form-group {
    margin-bottom: 20px !important;
}

.cta-form-section .form-control {
    width: 100% !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    outline: none !important;
    transition: 0.3s !important;
}

.cta-form-section .form-control:focus {
    background: rgba(0, 255, 255, 0.05) !important;
    border-color: #00ffff !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important;
}

.cta-form-section .form-control::placeholder {
    color: #64748b !important;
}

.cta-form-section .btn-submit {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 14px !important;
    background: linear-gradient(90deg, #00ff66, #00ffff) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    box-shadow: 0 5px 15px rgba(0, 255, 102, 0.3) !important;
}

.cta-form-section .btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 255, 102, 0.5) !important;
}

.cta-form-section .btn-submit:disabled {
    cursor: not-allowed !important;
    opacity: 0.72 !important;
    transform: none !important;
}

.labscare-form-status {
    min-height: 20px;
    margin: 14px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

.labscare-form-status.is-success {
    color: #00ff66;
}

.labscare-form-status.is-error {
    color: #f87171;
}

@media (max-width: 768px) {
    .cta-section,
    .cta-form-section {
        margin-top: 72px !important;
        padding: 42px 22px !important;
    }

    .cta-form-section {
        flex-direction: column !important;
        gap: 28px !important;
    }

    .cta-form-section .cta-text,
    .cta-form-section .cta-form-box {
        width: 100% !important;
        min-width: 0 !important;
    }

    .cta-section h2 {
        font-size: 26px !important;
    }

    .cta-form-section .cta-text h2 {
        font-size: 24px !important;
    }
}


.value-card:hover,
.value-card:nth-child(1):hover,
.value-card:nth-child(2):hover,
.value-card:nth-child(3):hover {
    background: rgba(255, 255, 255, 0.01) !important;
}

.phil-card:hover::after,
.stamp-card:hover::after,
.value-card:hover::after {
    opacity: inherit !important;
    left: auto !important;
    transform: none !important;
}

.value-card:hover .value-icon,
.stamp-card:hover .stamp-icon,
.phil-card:hover .phil-icon {
    transform: none !important;
    filter: none !important;
}

.value-card:hover .conveyor-track {
    opacity: 0.5 !important;
}

/* Shared card top-border language across the LabsCare site. */
:where(
    .step-card,
    .core-card,
    .service-card,
    .feature-item,
    .value-card,
    .eco-card,
    .phil-card,
    .coord-card,
    .radar-card,
    .stamp-card,
    .m5e1-card,
    .quality-card,
    .evidence-card,
    .card-stealth,
    .vault-item,
    .wheel-card,
    .twin-card,
    .flow-block,
    .card-fusion,
    .card-hw,
    .card-guard,
    .card-supply,
    .card-atom,
    .module-card,
    .card-qc,
    .card-gxp,
    .csv-check-item,
    .card-prep,
    .card-cell,
    .card-logistics,
    .honor-card-green,
    .honor-card-cyan,
    .standard-item,
    .recruit-card
) {
    box-shadow: inset 0 2px 0 rgba(0, 255, 255, 0.82) !important;
}

:where(
    .step-card,
    .core-card,
    .service-card,
    .feature-item,
    .value-card,
    .eco-card,
    .phil-card,
    .coord-card,
    .radar-card,
    .stamp-card,
    .m5e1-card,
    .quality-card,
    .evidence-card,
    .card-stealth,
    .vault-item,
    .wheel-card,
    .twin-card,
    .flow-block,
    .card-fusion,
    .card-hw,
    .card-guard,
    .card-supply,
    .card-atom,
    .module-card,
    .card-qc,
    .card-gxp,
    .csv-check-item,
    .card-prep,
    .card-cell,
    .card-logistics,
    .honor-card-green,
    .honor-card-cyan,
    .standard-item,
    .recruit-card
):hover {
    box-shadow: inset 0 2px 0 rgba(0, 255, 255, 0.92), 0 12px 28px rgba(0, 255, 255, 0.08) !important;
}

/* Parallel cards should keep one unified cyan palette instead of alternating cyan/green. */
:where(
    .value-card,
    .eco-card,
    .phil-card,
    .stamp-card,
    .module-card,
    .card-gxp,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .quality-card,
    .recruit-card,
    .honor-card-green,
    .honor-card-cyan
) {
    border-top-color: #00ffff !important;
}

:where(
    .value-card,
    .eco-card,
    .phil-card,
    .stamp-card,
    .module-card,
    .card-gxp,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .quality-card,
    .recruit-card,
    .honor-card-green,
    .honor-card-cyan
):hover {
    border-color: rgba(0, 255, 255, 0.4) !important;
    background: rgba(0, 255, 255, 0.02) !important;
}

:where(
    .value-card,
    .phil-card,
    .stamp-card,
    .card-gxp,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .recruit-card
) :where(
    .value-icon,
    .phil-icon,
    .stamp-icon,
    .card-gxp-icon,
    .card-guard-icon,
    .card-atom-icon,
    .card-cell-icon,
    .card-logistics-icon,
    .recruit-icon
) {
    color: #00ffff !important;
    border-color: rgba(0, 255, 255, 0.2) !important;
    background: rgba(0, 255, 255, 0.1) !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3)) !important;
}

:where(
    .value-card,
    .phil-card,
    .stamp-card,
    .card-gxp,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .recruit-card
) :where(h3, h3 span) {
    color: #00ffff !important;
}

:where(
    .value-card,
    .phil-card,
    .stamp-card,
    .card-gxp,
    .card-cell,
    .card-logistics,
    .module-card,
    .timeline-item,
    .m5e1-card,
    .card-stealth,
    .card-hw,
    .card-supply,
    .card-prep,
    .card-qc,
    .evidence-card,
    .quality-card
) ul li::before {
    color: #00ffff !important;
}

:where(
    .value-card,
    .phil-card,
    .stamp-card
)::after {
    border-color: rgba(0, 255, 255, 0.08) !important;
    color: rgba(0, 255, 255, 0.08) !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

/* Normalize inner accents for card content that still alternates to green. */
:where(
    .twin-card,
    .coord-card,
    .flow-block,
    .value-card,
    .eco-card,
    .module-card,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .phil-card,
    .recruit-card,
    .honor-card-green,
    .honor-card-cyan
) :where(
    h2,
    h3,
    h4,
    h3 span,
    .value-icon,
    .phil-icon,
    .recruit-icon,
    .coord-icon,
    .flow-icon,
    .flow-icon-wrap,
    .eco-icon,
    .card-guard-icon,
    .card-atom-icon,
    .card-cell-icon,
    .card-logistics-icon
) {
    color: #00ffff !important;
    border-color: rgba(0, 255, 255, 0.24) !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.32)) !important;
}

:where(
    .coord-card,
    .flow-block,
    .eco-card,
    .card-guard,
    .card-atom,
    .card-cell,
    .card-logistics,
    .honor-card-green,
    .honor-card-cyan
) :where(
    .coord-icon,
    .flow-icon-wrap,
    .eco-icon,
    .card-guard-icon,
    .card-atom-icon,
    .card-cell-icon,
    .card-logistics-icon
) {
    background: rgba(0, 255, 255, 0.08) !important;
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.12) !important;
}

.coord-card:hover,
.flow-block:hover,
.flow-block:nth-child(3),
.flow-block:nth-child(3):hover,
.honor-card-green:hover,
.recruit-card:nth-child(4n+2):hover,
.recruit-card:nth-child(4n+4):hover {
    border-color: rgba(0, 255, 255, 0.32) !important;
    background: rgba(0, 255, 255, 0.03) !important;
    box-shadow: 0 12px 28px rgba(0, 255, 255, 0.08) !important;
}

.coord-card:hover .coord-icon,
.coord-card:hover .coord-list li::before,
.flow-block:nth-child(3) .flow-icon-wrap,
.flow-block:nth-child(3) .flow-text h3,
.flow-block:nth-child(3):hover .flow-text h3,
.recruit-card:nth-child(4n+2) .recruit-icon,
.recruit-card:nth-child(4n+4) .recruit-icon,
.recruit-card:nth-child(4n+2) .recruit-salary,
.recruit-card:nth-child(4n+4) .recruit-salary,
.recruit-card:nth-child(4n+2) .recruit-section h4,
.recruit-card:nth-child(4n+4) .recruit-section h4,
.honor-card-green h3,
.honor-card-green .card-watermark,
.standard-item .svg-icon {
    color: #00ffff !important;
    border-color: rgba(0, 255, 255, 0.24) !important;
    background: rgba(0, 255, 255, 0.08) !important;
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.12) !important;
}

.twin-card:nth-child(3),
.twin-card:nth-child(4),
.feature-item[style*="#00ff66"],
.eco-card[style*="#00ff66"],
h2[style*="#00ff66"],
h3[style*="#00ff66"],
h4[style*="#00ff66"],
p[style*="#00ff66"],
div[style*="#00ff66"],
strong[style*="#00ff66"] {
    color: #00ffff !important;
    border-color: rgba(0, 255, 255, 0.24) !important;
}

/* Keep hero capsule labels consistent across all pages. */
.hero-tags span,
.hero-tags span:nth-child(2),
.hero-tags span:nth-child(even) {
    color: #00ff66 !important;
    border-color: #00ff66 !important;
    background: rgba(0, 255, 102, 0.05) !important;
    box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.05) !important;
}

.hero-tags span .svg-icon,
.hero-tags span svg {
    color: #00ff66 !important;
    fill: #00ff66 !important;
    stroke: #00ff66 !important;
    filter: drop-shadow(0 0 6px rgba(0, 255, 102, 0.6)) !important;
}

.hero-tags span svg path {
    fill: #00ff66 !important;
}

.hero-tags span svg path[stroke] {
    stroke: #00ff66 !important;
}