/* =========================================
   Hybrid Continuous AI Operations Section
   (Interactive Vertical List + Sticky Visual)
   ========================================= */

/* Hero Design Philosophy Integration with Solution-style Gradient Background */
.scale-product-section {
    padding: 8rem 0;
    position: relative;
    /* Transparent to match Industry Solutions (shows global background) */
    background: transparent;
    overflow: hidden;
}

/* Remove the Scan Grid Overlay to reduce noise */
.scale-product-section::before {
    display: none;
}

/* Canvas for Neurons Background - Keep intact */
#continuous-neurons-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above base gradient, behind content */
    pointer-events: none;
    opacity: 0.8;
}

.scale-product-section .container {
    position: relative;
    z-index: 2; /* Content above neurons */
}

/* Override Grid Alignment for Sticky Behavior */
.scale-grid {
    align-items: flex-start !important; /* Override center alignment */
    position: relative;
    grid-template-columns: 65fr 35fr; /* Text 65%, Animation 35% */
    gap: 4rem; /* Reduced gap to maximize text space */
}

/* Left Side: Vertical Timeline List */
.timeline-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Gaps handled by connectors/margins */
    position: relative;
    padding-bottom: 2rem;
}

/* Timeline Step Card (Interactive) - "Glass" Design */
.timeline-step {
    /* Glass Effect with color hint base (Blue/Cyan default) */
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.08) 0%, rgba(0, 229, 255, 0.02) 100%);
    border: 1px solid rgba(0, 229, 255, 0.15); /* Subtle Blue Border */
    border-radius: 16px; /* Match HUD radius */
    padding: 2rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    opacity: 0.8 !important; /* Increased visibility */
    transform: scale(0.99); 
    backdrop-filter: blur(12px); /* Strong blur */
    margin-bottom: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); 
}

/* Override style.css scale-item specific borders if needed */
.scale-item {
    border: none !important;
    margin-bottom: 0;
}

.timeline-step.active,
.timeline-step:hover {
    opacity: 1 !important;
    transform: scale(1) translateY(-5px); /* Lift effect */
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.05) 100%);
    border-color: rgba(0, 229, 255, 0.4) !important;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 229, 255, 0.15);
}

/* --- Specific Color Integrations for Steps --- */

/* Step 2: Enrichment (Purple) */
.timeline-step.step-enrichment {
    background: linear-gradient(145deg, rgba(213, 0, 249, 0.08) 0%, rgba(213, 0, 249, 0.02) 100%);
    border-color: rgba(213, 0, 249, 0.15);
}
.timeline-step.step-enrichment.active,
.timeline-step.step-enrichment:hover {
    background: linear-gradient(145deg, rgba(213, 0, 249, 0.15) 0%, rgba(213, 0, 249, 0.05) 100%);
    border-color: rgba(213, 0, 249, 0.4) !important;
    box-shadow: 0 10px 40px rgba(213, 0, 249, 0.15);
}

/* Step 3: Insight (Orange) */
.timeline-step.step-highlight {
    background: linear-gradient(145deg, rgba(255, 61, 0, 0.08) 0%, rgba(255, 61, 0, 0.02) 100%);
    border-color: rgba(255, 61, 0, 0.15);
}
.timeline-step.step-highlight.active,
.timeline-step.step-highlight:hover {
    background: linear-gradient(145deg, rgba(255, 61, 0, 0.15) 0%, rgba(255, 61, 0, 0.05) 100%);
    border-color: rgba(255, 61, 0, 0.4) !important;
    box-shadow: 0 10px 40px rgba(255, 61, 0, 0.15);
}

/* Step 4: Feedback (Green) */
.timeline-step.step-orange { /* Class name is legacy step-orange but styled as Green */
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
    border-color: rgba(34, 197, 94, 0.15);
}
.timeline-step.step-orange.active,
.timeline-step.step-orange:hover {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.15);
}

/* Step Header */
.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.step-badge {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-weight: 700;
    border-radius: 2px; /* Tech square look */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace; /* Force Mono */
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.timeline-step.active .step-badge {
    background: rgba(0, 229, 255, 0.1);
    color: #00E5FF; /* Hero Cyan Text */
    border-color: #00E5FF;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Badge Color for Insight (Orange) */
.step-highlight.active .step-badge {
    background: rgba(255, 61, 0, 0.1);
    color: #FF3D00; /* Hero Orange */
    border-color: #FF3D00;
    box-shadow: 0 0 10px rgba(255, 61, 0, 0.3);
}

/* Badge Color for Feedback (Green) */
.step-orange.active .step-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E; /* Hero Green */
    border-color: #22C55E;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* Badge Color for Enrichment (Purple) */
.timeline-step.step-enrichment.active .step-badge {
    background: rgba(213, 0, 249, 0.1);
    border-color: #D500F9;
    color: #D500F9;
    box-shadow: 0 0 10px rgba(213, 0, 249, 0.3);
}

.step-header h3 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.step-subtitle {
    color: #00E5FF; /* Hero Cyan */
    font-size: 0.85rem;
    margin-bottom: 1rem;
    padding-left: calc(32px + 1rem);
    font-weight: 400;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.step-highlight .step-subtitle {
    color: #FF3D00; /* Hero Orange (Insight) */
}

.timeline-step.step-orange .step-subtitle {
    color: #22C55E; /* Hero Green (Feedback) */
}

.timeline-step.step-enrichment .step-subtitle {
    color: #D500F9; /* Hero Purple (Enrichment) */
}

/* Content Accordion Behavior */
.step-content {
    padding-left: calc(32px + 1rem);
    max-height: none; 
    opacity: 1;
    overflow: visible; 
    transition: opacity 0.4s ease;
}

.timeline-step.active .step-content {
    opacity: 1;
}

.step-desc {
    font-size: 1rem; 
    color: #a0a0b0; 
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Capability Tags */
.step-capabilities {
    font-size: 0.75rem;
    color: #00E5FF;
    margin-bottom: 1.5rem;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.1em;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
    text-transform: uppercase;
}

.step-highlight .step-capabilities {
    color: #FF3D00;
}

.timeline-step.step-orange .step-capabilities {
    color: #22C55E;
}

.timeline-step.step-enrichment .step-capabilities {
    color: #D500F9;
}

/* Step Details/Specs Box */
.step-details {
    list-style: none;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.timeline-step.active .step-details {
    border-left-color: #00E5FF;
    background: rgba(0, 229, 255, 0.03);
}

.step-highlight.active .step-details {
    border-left-color: #FF3D00;
}

.timeline-step.step-orange.active .step-details {
    border-left-color: #22C55E;
}

.timeline-step.step-enrichment.active .step-details {
    border-left-color: #D500F9;
}

.step-details li {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.step-details li:last-child { margin-bottom: 0; }
.step-details strong { color: var(--text-primary); }

/* Customer Proof Box */
.customer-proof {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(0, 255, 157, 0.05); /* Very subtle green tint */
    border: 1px solid rgba(0, 255, 157, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-left: 3px solid var(--accent-green);
    position: relative;
}

.customer-proof::before {
    content: "SUCCESS STORY";
    position: absolute;
    top: -8px;
    left: 10px;
    background: #0f0f0f; /* Match card bg */
    padding: 0 0.4rem;
    font-size: 0.65rem;
    color: var(--accent-green);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.customer-proof i {
    color: var(--accent-green);
    margin-top: 0.25rem;
    font-size: 1rem;
}

.customer-proof strong { 
    color: var(--text-primary); 
    display: block; 
    margin-bottom: 0.2rem;
}

.customer-proof span {
    line-height: 1.5;
}

/* Capability Tags Container */
.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.capability-tags span {
    font-size: 0.65rem;
    font-family: 'Space Mono', monospace;
    color: #8892b0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 2px;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-step.active .capability-tags span {
    border-color: rgba(0, 229, 255, 0.3);
    color: #00E5FF;
    background: rgba(0, 229, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.05);
}

.timeline-step.step-highlight.active .capability-tags span {
    border-color: rgba(255, 61, 0, 0.3); /* Hero Orange */
    color: #FF3D00;
    background: rgba(255, 61, 0, 0.05);
    box-shadow: 0 0 10px rgba(255, 61, 0, 0.05);
}

.timeline-step.step-orange.active .capability-tags span {
    border-color: rgba(34, 197, 94, 0.3); /* Hero Green */
    color: #22C55E;
    background: rgba(34, 197, 94, 0.05);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.05);
}

.timeline-step.step-enrichment.active .capability-tags span {
    border-color: rgba(213, 0, 249, 0.3); /* Hero Purple */
    color: #D500F9;
    background: rgba(213, 0, 249, 0.05);
    box-shadow: 0 0 10px rgba(213, 0, 249, 0.05);
}

/* Step Specs Grid */
.step-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.spec-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-row:hover {
    background: rgba(255,255,255,0.02);
}

.spec-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,0.05);
}

.timeline-step.active .spec-icon {
    color: #00E5FF;
    border-color: rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.05);
}

.timeline-step.step-highlight.active .spec-icon {
    color: #FF3D00; /* Hero Orange */
    border-color: rgba(255, 61, 0, 0.3);
    background: rgba(255, 61, 0, 0.05);
}

.timeline-step.step-orange.active .spec-icon {
    color: #22C55E; /* Hero Green */
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.timeline-step.step-enrichment.active .spec-icon {
    color: #D500F9; /* Hero Purple */
    border-color: rgba(213, 0, 249, 0.3);
    background: rgba(213, 0, 249, 0.05);
}

.spec-content {
    flex-grow: 1;
}

.spec-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

.spec-content p {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
    margin: 0;
}

.timeline-step.active .spec-content p {
    color: #fff;
}

/* Highlight Row (Outcome) */
.spec-row.highlight {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0%, transparent 100%);
    border-left: 2px solid #00E5FF;
}

.timeline-step.step-highlight .spec-row.highlight {
    background: linear-gradient(90deg, rgba(255, 61, 0, 0.05) 0%, transparent 100%);
    border-left: 2px solid #FF3D00; /* Hero Orange */
}

.timeline-step.step-orange .spec-row.highlight {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
    border-left: 2px solid #22C55E; /* Hero Green */
}

.timeline-step.step-enrichment .spec-row.highlight {
    background: linear-gradient(90deg, rgba(213, 0, 249, 0.05) 0%, transparent 100%);
    border-left: 2px solid #D500F9; /* Hero Purple */
}

/* Vertical Connectors */
.timeline-connector-vertical {
    width: 2px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: calc(2rem + 16px - 1px); /* Padding + Half Badge - Half Line */
    opacity: 0.5;
}

/* Competitor Marker Vertical */
.competitor-marker-vertical-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 1.5rem 0;
    margin-left: calc(2rem + 16px - 1px); /* Align wrapper left edge with the line center */
    border-left: 2px dashed rgba(255, 61, 0, 0.4); /* Alert Orange dashed line */
    min-height: 60px;
    justify-content: center;
}

.competitor-marker-badge {
    background: #151515;
    color: #FF3D00;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px dashed #FF3D00;
    white-space: nowrap;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    position: absolute; /* Float over the line */
    left: 0; 
    top: 50%;
    transform: translate(-50%, -50%); /* Center on line */
    margin: 0;
    font-family: 'Space Mono', monospace;
}

/* Right Side: Sticky Visual - Glass Update */
.scale-visual-area {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 120px; /* Fixed distance from top, safer than percentage */
    height: 500px; /* Reduced height to ensure it fits in standard laptop screens */
    min-height: 400px;
    max-height: 80vh; /* Never exceed viewport height */
    
    /* Dark Glass Background */
    background: rgba(10, 10, 10, 0.4); 
    backdrop-filter: blur(20px);
    border-radius: 16px; /* Match new cards */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    z-index: 20;
    align-self: flex-start;
    transition: all 0.3s ease;
}

/* Ensure container allows sticky */
.scale-product-section {
    overflow: visible !important; /* Force visible overflow */
}

.scale-grid {
    position: relative;
    overflow: visible;
}

.visual-overlay-label {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
}

#product-flow-canvas {
    width: 100%;
    height: 100%;
}

/* CTA */
.how-cta {
    margin-top: 6rem;
    text-align: center;
    padding-left: 0;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .scale-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .scale-visual-area {
        position: relative;
        top: 0;
        height: 400px;
        order: -1; /* Show visual on top */
        margin-bottom: 2rem;
    }

    .timeline-step.active .step-content {
        max-height: none; /* Always show active content fully */
    }
    
    .timeline-step {
        opacity: 1 !important; /* Always visible on mobile */
    }
    
    .how-cta {
        text-align: center;
        padding-left: 0;
    }
    
    .competitor-marker-badge {
        font-size: 0.65rem;
        margin-left: 1rem;
    }
}

/* =========================================
   Subtitle Steps Styling
   ========================================= */
.subtitle-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start; /* Left align as requested */
    width: 100%;
    margin-bottom: 3rem;
    padding-left: 2rem; /* Add padding to align with cards */
}

.subtitle-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem); /* Adjusted size */
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
}

.step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.step-circle.blue {
    background: rgba(0, 229, 255, 0.1);
    border-color: #00E5FF;
    color: #00E5FF;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}

.step-circle.purple {
    background: rgba(213, 0, 249, 0.1);
    border-color: #D500F9;
    color: #D500F9;
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.2);
}

.step-circle.green {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22C55E;
    color: #22C55E;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.step-circle.orange {
    background: rgba(255, 61, 0, 0.1);
    border-color: #FF3D00;
    color: #FF3D00;
    box-shadow: 0 0 20px rgba(255, 61, 0, 0.2);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .subtitle-row {
        font-size: 1.2rem;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    
    .subtitle-steps {
        align-items: flex-start;
    }
    
    .step-circle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* =========================================
   Loop Visual Section (New)
   ========================================= */
.loop-visual-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
    padding: 2rem 0;
    width: 100%;
    text-align: center;
}

.loop-text h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.loop-graphic {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    padding-bottom: 3rem; /* Space for the return arrow */
}

.loop-step {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.loop-step[data-step="1"] { border-color: #00E5FF; color: #00E5FF; box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); }
.loop-step[data-step="2"] { border-color: #D500F9; color: #D500F9; box-shadow: 0 0 15px rgba(213, 0, 249, 0.2); }
.loop-step[data-step="3"] { border-color: #FF3D00; color: #FF3D00; box-shadow: 0 0 15px rgba(255, 61, 0, 0.2); }
.loop-step[data-step="4"] { border-color: #22C55E; color: #22C55E; box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }

.loop-arrow {
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.5;
}

.loop-return-arrow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 1;
}

.loop-return-arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Update Gradient for Loop Arrow to match Green -> Blue */
#gradient-loop stop:first-child { stop-color: #22C55E !important; }
#gradient-loop stop:last-child { stop-color: #00E5FF !important; }
#arrowhead polygon { fill: #00E5FF !important; }

/* Mobile Loop Adjustment */
@media (max-width: 768px) {
    .loop-graphic {
        gap: 1rem;
    }
    .loop-step {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}