/* ==========================================================================
   AI AUTOMATION: SYSTEMS, AUTOMATION, INTELLIGENCE, WORKFLOWS
   ========================================================================== */

/* Hero Layout */
.page-ai-automation .service-hero {
    padding: calc(var(--spacing-9) + 20px) 0 var(--spacing-8);
    background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
                var(--color-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-hero-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--spacing-8);
    align-items: center;
}

/* Hero Live Node Pipeline Console */
.workflow-console {
    background: rgba(11, 31, 58, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: var(--radius-panel);
    padding: var(--spacing-6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(56, 189, 248, 0.12);
}

.workflow-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.workflow-status-live {
    font-family: monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #38BDF8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-status-live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38BDF8;
    box-shadow: 0 0 10px #38BDF8;
}

.workflow-node-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workflow-node-card {
    background: rgba(7, 22, 41, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-card);
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.workflow-node-card::after {
    content: '↓';
    position: absolute;
    bottom: -11px;
    left: 24px;
    font-size: 0.75rem;
    color: #38BDF8;
    font-weight: 800;
    z-index: 2;
}

.workflow-node-card:last-child::after {
    display: none;
}

.node-info strong {
    font-size: 0.8125rem;
    color: #fff;
    display: block;
}

.node-info span {
    font-size: 0.6875rem;
    color: rgba(245, 247, 250, 0.6);
}

.node-latency {
    font-family: monospace;
    font-size: 0.6875rem;
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Central 6-Stage Workflow Architecture Section */
.central-workflow-section {
    padding: var(--spacing-9) 0;
    background: var(--color-midnight);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.central-workflow-pipeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-3);
    margin-top: var(--spacing-7);
}

.central-flow-node {
    background: rgba(31, 36, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-card);
    padding: var(--spacing-5) var(--spacing-3);
    position: relative;
    text-align: center;
}

.central-flow-node::after {
    content: '→';
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: #38BDF8;
    font-weight: 800;
    font-size: 1.125rem;
    z-index: 2;
}

.central-flow-node:last-child::after {
    display: none;
}

.central-flow-node__step {
    font-size: 0.6875rem;
    font-weight: 800;
    font-family: monospace;
    color: #38BDF8;
    display: block;
    margin-bottom: 4px;
}

.central-flow-node h4 {
    font-size: 0.9375rem;
    color: #fff;
    margin-bottom: 6px;
    font-weight: 700;
}

.central-flow-node p {
    font-size: 0.75rem;
    color: var(--color-gray-light);
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
}

/* Real-World Business Process Case Pipelines */
.business-process-pipelines-section {
    padding: var(--spacing-9) 0;
    background: var(--color-navy);
}

.process-pipeline-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-top: var(--spacing-7);
}

.process-pipeline-card {
    background: rgba(31, 36, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-panel);
    padding: var(--spacing-7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.process-pipeline-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.4);
}

.process-pipeline-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: var(--spacing-3);
}

.process-pipeline-card p {
    font-size: 0.875rem;
    color: var(--color-gray-light);
    line-height: 1.5;
    margin-bottom: var(--spacing-5);
}

.process-pathway {
    background: rgba(7, 22, 41, 0.7);
    border-radius: 6px;
    padding: var(--spacing-4);
    font-family: monospace;
    font-size: 0.75rem;
    color: #38BDF8;
    line-height: 1.6;
}

/* Safeguards & Human-in-the-Loop */
.safeguards-section {
    padding: var(--spacing-9) 0;
    background: var(--color-midnight);
}

.safeguards-panel {
    background: rgba(11, 31, 58, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-panel);
    padding: var(--spacing-8);
    margin-top: var(--spacing-7);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: center;
}

.safeguards-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.safeguards-list li {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9375rem;
    color: var(--color-gray-light);
    display: flex;
    gap: 12px;
}

.safeguards-list li:last-child {
    border-bottom: none;
}

.safeguards-list li strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .ai-hero-layout { grid-template-columns: 1fr; }
    .central-workflow-pipeline { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-5); }
    .central-flow-node::after { display: none; }
    .process-pipeline-cards { grid-template-columns: 1fr; }
    .safeguards-panel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .central-workflow-pipeline { grid-template-columns: 1fr; }
}