/* Automation Page Specific Styles */

/* --- Dark Premium Section --- */
.section-dark {
    background-color: #0a0a0a;
    color: var(--color-white);
    padding: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p {
    color: var(--color-white);
}

.section-dark .hero-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Interactive Voice Animation --- */
.voice-wave-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    /* Tightened from 6px */
    height: 150px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    cursor: crosshair;
    transition: transform 0.1s ease-out;
}

.robot-face {
    position: relative;
    /* Stack normally */
    width: 80%;
    margin: 0 auto 20px auto;
    /* Center and add gap below */
    z-index: 5;
    opacity: 1 !important;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.robot-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
    transition: all 0.3s ease;
}



.robot-face:hover img {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    /* Glow shadow on hover */
    transform: scale(1.1);
}

/* --- App Dev Animation (Floating Phone) --- */
.phone-container {
    height: 380px;
    /* Slightly taller for nav */
    width: 200px;
    background: #050505;
    border: 3px solid #333;
    border-radius: 24px;
    /* Smoother jawline */
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.1s ease-out;
}

.phone-screen {
    flex: 1;
    background: #000;
    position: relative;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: 24px;
    background: #222;
    margin-bottom: 12px;
    border-radius: 4px;
    width: 100%;
}

.app-content-block {
    height: 50px;
    background: #151515;
    margin-bottom: 8px;
    border-radius: 6px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.app-content-block:nth-child(3) {
    height: 80px;
    /* Featured block */
}

/* App Bottom Nav */
.app-nav-bar {
    margin-top: auto;
    /* Push to bottom */
    height: 40px;
    border-top: 1px solid #222;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.nav-dot {
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
    transition: background 0.2s;
}

.nav-dot:nth-child(2) {
    width: 10px;
    height: 10px;
    background: #666;
    /* Active state */
    border-radius: 2px;
    /* Square/Home */
}

.app-content-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

/* --- Web Dev Animation (Constructing Browser) --- */
.browser-container {
    width: 100%;
    max-width: 600px;
    /* Wider for desktop look */
    height: 380px;
    /* Increased height */
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.1s ease-out;
}

.browser-header {
    height: 30px;
    background: #222;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    border-bottom: 1px solid #333;
}

.browser-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #444;
}

.browser-body {
    flex: 1;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Layout blocks for browser animation */
.layout-hero {
    width: 100%;
    height: 120px;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 10px;
    animation: pulse-block 2s infinite alternate;
}

.layout-grid {
    display: flex;
    gap: 10px;
    height: 100px;
}

.layout-col {
    flex: 1;
    background: #1a1a1a;
    border-radius: 4px;
    height: 100%;
    animation: pulse-block 2s infinite alternate;
}

.layout-col:nth-child(2) {
    animation-delay: 0.2s;
}

.layout-col:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse-block {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0.8;
    }
}

/* --- Software Dev Animation (Dashboard Monitor) --- */
.monitor-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
}

.monitor-screen {
    width: 100%;
    height: 260px;
    background: #050505;
    border: 8px solid #333;
    border-radius: 16px;
    /* Rounded corners for modern feel */
    position: relative;
    /* Vignette shadow for curved effect */
    box-shadow:
        0 0 0 2px #111,
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(0, 0, 0, 0.8);
    /* Stronger curve depth */
    overflow: hidden;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    /* Subtle gradient for screen reflection */
    background: radial-gradient(circle at 50% 30%, #151515, #050505 80%);
}

.monitor-stand {
    width: 80px;
    height: 40px;
    background: #222;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    background: linear-gradient(90deg, #111, #333, #111);
}

.monitor-base {
    width: 140px;
    height: 10px;
    background: #222;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #111, #333, #111);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.dashboard-widget {
    background: #111;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    /* Ensure content stays inside */
    border: 1px solid #222;
}

.dashboard-widget.large {
    /* Removed grid-row: span 2; to allow 2x2 grid */
    grid-column: 2;
    grid-row: 2;
    /* Force to bottom right */
}

/* Stock Graph Styles */
.stock-graph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stock-graph svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.graph-line {
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
    animation: draw-line 3s ease-out forwards;
}

@keyframes draw-line {
    from {
        stroke-dasharray: 0 1000;
    }

    to {
        stroke-dasharray: 1000 0;
    }
}

.widget-line {
    height: 6px;
    background: #333;
    border-radius: 3px;
    width: 70%;
}

.widget-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 5px;
}

/* OS Icons Grid */
.os-icons {
    display: flex;
    justify-content: space-around;
    /* Better spacing */
    align-items: center;
    height: 100%;
    color: #ccc !important;
    /* Lighter color for visibility */
    padding: 0 10px;
    z-index: 10;
    /* Ensure on top */
    width: 100%;
    /* Ensure full width */
    background: rgba(255, 255, 255, 0.05);
    /* Subtle background to confirm container existence */
    border-radius: 4px;
}

.os-icons svg {
    width: 24px !important;
    /* Larger icons */
    height: 24px !important;
    opacity: 0.9 !important;
    transition: all 0.3s ease;
    fill: currentColor;
    /* Ensure fill uses color */
}

.os-icons svg:hover {
    opacity: 1;
    color: #fff;
    transform: translateY(-2px) scale(1.1);
}

.chart-bar {
    flex: 1;
    background: #333;
    border-radius: 2px 2px 0 0;
    transition: height 0.5s ease;
    animation: bar-grow 2s infinite alternate;
}

.chart-bar:nth-child(1) {
    animation-delay: 0s;
    background: #3b82f6;
}

.chart-bar:nth-child(2) {
    animation-delay: 0.2s;
    background: #10b981;
}

.chart-bar:nth-child(3) {
    animation-delay: 0.4s;
    background: #f59e0b;
}

.chart-bar:nth-child(4) {
    animation-delay: 0.1s;
    background: #ef4444;
}

.chart-bar:nth-child(5) {
    animation-delay: 0.3s;
    background: #8b5cf6;
}

@keyframes bar-grow {
    from {
        transform: scaleY(0.8);
    }

    to {
        transform: scaleY(1.1);
    }
}

/* --- Neural Network Animation (Hidden/Unused for now but kept for reference) --- */
.neural-container {
    width: 100%;
    height: 300px;
    position: relative;
    transition: transform 0.1s ease-out;
    display: none;
    /* Hiding as we used Monitor for Software */
}

/* Overlay to darken image slightly so bars pop */
.voice-wave-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.6);
    z-index: 0;
}

@keyframes idle-wave {

    0%,
    100% {
        height: 30px;
    }

    50% {
        height: 50px;
    }
}

.voice-bar {
    z-index: 1;
    width: 2px;
    background-color: var(--color-white);
    border-radius: 999px;
    height: 40px;
    transition: height 0.1s ease, transform 0.2s ease;
    opacity: 0.9;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    animation: idle-wave 1.5s ease-in-out infinite;
}

/* Stagger animations for wave effect */
.voice-bar:nth-child(odd) {
    animation-delay: 0.1s;
    animation-duration: 1.4s;
}

.voice-bar:nth-child(even) {
    animation-delay: 0.2s;
    animation-duration: 1.6s;
}

.voice-bar:nth-child(3n) {
    animation-delay: 0.3s;
    animation-duration: 1.2s;
}

.voice-bar:nth-child(4n) {
    animation-delay: 0.4s;
    animation-duration: 1.8s;
}

/* When interacting, pause animation or override? JS sets inline height which overrides CSS height property. */

/* Stagger animations for CSS fallback */


/* --- Submenu Styles --- */
.nav-item-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    /* Space for arrow */
}

/* Arrow indicator */
/* SVG Arrow indicator */
.nav-item-dropdown>a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-item-dropdown>a .arrow-icon {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: transform 0.3s ease;
}

.nav-item-dropdown:hover .arrow-icon {
    transform: rotate(180deg);
}

/* Actually, valid approach: The base css uses ::after on 'a'. 
   I should NOT use ::after for the arrow if I want to keep the underline.
   I will add the arrow in HTML or use flex gap. 
   Let's just align it here. 
*/

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* Align left or center? User wants alignment. Left is safer for submenu. */
    transform: translateY(10px);
    background-color: #ffffff;
    /* Explicit white */
    min-width: 220px;
    padding: 10px 0;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-out;
    display: flex;
    flex-direction: column;
    z-index: 1001;
}

/* Dark mode adjustment if needed, but for now assuming light dropdown for contrast or matching theme. 
   If header is dark, user might want dark dropdown. 
   Let's stick to simple clean white for now as per "simple" request. */

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a::after {
    display: none !important;
}

.dropdown-menu a {
    color: #333;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    opacity: 1;
    display: block;
    font-weight: 400;
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* --- Automation Content Grids --- */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.solution-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    transition: transform 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.solution-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.solution-card ul {
    list-style: disc;
    padding-left: 20px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.solution-card .outcome {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.9rem;
}

/* White Label Section */
.white-label-section {
    background-color: var(--color-bg);
}

.feature-list-large li {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-list-large li::before {
    content: '✓';
    color: var(--color-text);
    /* or accent */
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 20px;
        opacity: 1;
        visibility: visible;
        display: none;
        /* Hidden by default on mobile, JS toggles .active on parent */
    }

    /* Show when parent has .active class */
    .nav-item-dropdown.active .dropdown-menu {
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Footer Button Override */
.btn-pill-white {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff;
}

.btn-pill-white a {
    color: #000000 !important;
}

.btn-pill-white:hover {
    background-color: #f0f0f0 !important;
    transform: translateY(-2px);
    color: #000000 !important;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

/* Footer Alignment Fix ensuring match with Homepage */
.contact-section.dark-footer {
    background-color: #0a0a0a;
    /* Ensure dark background */
    color: #fff;
}

.contact-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 60px;
    /* Consistent spacing */
    flex-wrap: wrap;
    /* Safe for mobile */
    gap: 20px;
}

.contact-footer p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9rem;
}

.contact-footer .social-links {
    display: flex;
    gap: 20px;
}

.contact-footer .social-links a {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

/* --- White Label Section Improvements --- */
.feature-grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-block {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feature-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #f0f0f0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
}

.feature-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Geometric Scale Visual */
.scale-visual-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
    background: #f9f9f9;
    /* Subtle container bg */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    /* Let float card pop out */
}

.scale-visual {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.scale-bar {
    width: 40px;
    background: #1a1a1a;
    border-radius: 8px 8px 0 0;
    animation: grow-bar 3s ease-in-out infinite alternate;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.bar-1 {
    height: 40%;
    opacity: 0.4;
    animation-delay: 0s;
}

.bar-2 {
    height: 70%;
    opacity: 0.7;
    animation-delay: 0.2s;
}

.bar-3 {
    height: 100%;
    opacity: 1;
    animation-delay: 0.4s;
}

.scale-circle {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    animation: rotate-circle 10s linear infinite;
}

.scale-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translate(40px, 0);
}

.scale-card-float {
    position: absolute;
    bottom: 40px;
    right: -20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    animation: float-card 4s ease-in-out infinite;
}

.card-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.card-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.card-graph-line {
    width: 100%;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.card-graph-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: #10b981;
    border-radius: 2px;
}

@keyframes grow-bar {
    0% {
        transform: scaleY(0.8);
    }

    100% {
        transform: scaleY(1.05);
    }
}

@keyframes rotate-circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes float-card {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .scale-visual-container {
        margin-top: 40px;
        height: 300px;
    }

    .scale-card-float {
        right: 0;
        bottom: 20px;
    }
}

/* --- Automation Page Refined Styles (v3.2) --- */

/* Clean Flow Design - No Cards */
:root {
    --accent-color: #00ff88;
    --neutral-glow: rgba(255, 255, 255, 0.5);
    --node-bg: #111;
    --text-main: #000000;
    /* Black Headings */
    --text-muted: #666666;
}

/* Removed Glass Card Backgrounds */
.glass-card {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Divider */
    border-radius: 0 !important;
    padding: 4rem 0;
    /* More vertical space */
    transition: all 0.3s ease;
    position: relative;
    color: #ccc;
    /* Default body text light */
}

.glass-card::before {
    display: none;
}

/* Typography & Contrast */
.glass-card h3 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #000000 !important;
    /* Forces Black Headings per user request */
    font-weight: 700;
}

.glass-card p {
    font-size: 1.1rem;
    color: #cccccc;
    /* Keep body light for readability on dark theme */
    max-width: 90%;
}

.glass-card .text-muted,
.glass-card .opacity-70 {
    color: #888 !important;
}

/* Big Icon Wrapper - Fixed Visibility */
.cat-icon-wrapper {
    background: rgba(0, 0, 0, 0.03);
    /* Subtle dark tint for visibility on light bg */
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    /* Black icon default */
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 1rem;
}

.cat-icon-wrapper svg {
    width: 40px;
    height: 40px;
}

/* Hover: Invert to Black for Contrast */
.glass-card:hover .cat-icon-wrapper {
    background: #000;
    /* Solid Black */
    color: #fff;
    /* White Icon */
    border-color: #000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* Interactive Process Flow */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease;
}

.glass-card:hover .process-flow {
    border-color: rgba(255, 255, 255, 0.1);
}

.process-node {
    background: var(--node-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    flex: 1;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.glass-card:hover .process-node {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(30, 30, 30, 0.8);
    transform: translateY(-2px);
}

.glass-card:hover .process-node:nth-child(3) {
    /* Center node emphasis */
    border-color: var(--color-accent, #00ff88);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.process-arrow {
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.glass-card:hover .process-arrow {
    color: var(--color-accent, #00ff88);
    opacity: 1;
    transform: translateX(3px);
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.3));
}

@media (max-width: 768px) {
    .process-flow {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 1rem;
    }

    .process-node {
        width: 100%;
        max-width: 250px;
    }

    .process-arrow {
        transform: rotate(90deg);
    }

    .glass-card:hover .process-arrow {
        transform: rotate(90deg) translateY(3px);
    }
}

/* Intro n8n Visual */
.n8n-visual-container {
    position: relative;
    padding: 3rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    overflow: hidden;
    /* Prevent overflow of flow-line */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.n8n-node {
    width: 60px;
    height: 60px;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.n8n-visual-container:hover .n8n-node {
    transform: scale(1.05);
}

.n8n-logo-pulse {
    animation: pulse-ring 3s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(0, 255, 136, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }
}

/* Flow Line Animation */
.flow-line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    transform: translateY(-50%);
    overflow: hidden;
}

.flow-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-accent, #00ff88), transparent);
    animation: flow-anim 2s infinite linear;
}

@keyframes flow-anim {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

/* Typography Override */
.section-title h2 {
    font-size: 3rem;
    color: #000000;
    /* Force Black */
    background: none;
    -webkit-text-fill-color: initial;
    font-weight: 700;
}

.text-accent-glow {
    color: var(--color-accent, #00ff88);
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

/* Clean Stack Card (AI Section) */
.clean-stack-card {
    background: #1a1a1a;
    /* Sleek Dark Grey */
    padding: 2.5rem;
    border-radius: 16px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.clean-stack-card:hover {
    background: #222;
    transform: translateY(-5px);
}

.clean-stack-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.clean-stack-card .role-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1rem;
    display: block;
    font-weight: 600;
}

.clean-stack-card p {
    color: #aaa;
    line-height: 1.6;
    font-size: 1rem;
}

/* Ensure header alignment on all screens */
.service-category-grid .category-header {
    justify-content: flex-start;
}

/* --- Mobile Responsive Fixes (v3.3) --- */
.service-category-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
    .service-category-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 2rem;
    }

    /* Ensure visual flow container has enough height/spacing on mobile */
    .service-category-grid .process-flow {
        margin-top: 1rem;
        padding: 2rem 1rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .n8n-visual-container {
        padding: 4rem 1rem;
        flex-direction: column;
        gap: 2.5rem;
        justify-content: center;
        background: rgba(255, 255, 255, 0.03);
        /* Slightly lighter on mobile for depth */
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .n8n-arrow {
        transform: rotate(90deg);
        opacity: 0.6;
    }

    .n8n-visual-container:hover .n8n-arrow {
        color: var(--color-accent, #00ff88) !important;
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4));
    }

    .n8n-node {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto;
        transform: scale(0.9);
        /* Slightly smaller on mobile */
    }

    .n8n-node.n8n-logo-pulse {
        transform: scale(1.1);
        /* Keep main node prominent */
    }

    .flow-line {
        height: 100%;
        width: 2px;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .flow-line::after {
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, transparent, var(--color-accent, #00ff88), transparent);
        animation: flow-anim-vertical 2s infinite linear;
    }
}

@keyframes flow-anim-vertical {
    0% {
        top: -50%;
    }

    100% {
        top: 150%;
    }
}

/* --- Contact Page Premium Styles --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: stretch;
    margin-top: 60px;
}

.contact-info-glass {
    background: rgba(15, 15, 15, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-info-glass::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.contact-info-glass h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.1;
}

.contact-info-header .accent-text {
    opacity: 0.5;
}

.contact-form-glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

.contact-form-glass h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    font-weight: 600;
}

/* Form refinement */
.contact-form-glass .wpcf7-form {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.contact-form-glass .wpcf7-form-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    color: #fff !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
}

.contact-form-glass .wpcf7-form-control:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
}

.contact-form-glass .wpcf7-submit {
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 20px !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}

.contact-form-glass .wpcf7-submit:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
}

.hq-status {
    margin-top: 40px;
}

.status-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.status-dot-pulse {
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.8);
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.status-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.dashboard-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: auto;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-item span {
    display: block;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 6px;
    letter-spacing: 0.1em;
}

.detail-item a,
.detail-item p {
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
}

.accent-border-link {
    position: relative;
    padding-bottom: 2px;
}

.accent-border-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.3s ease;
}

.accent-border-link:hover::after {
    width: 100%;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-info-glass {
        padding: 40px;
    }

    .contact-form-glass {
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .dashboard-details {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --- Contact Page Elevation (Statue & Sync) --- */
.contact-visual-statue {
    position: relative;
    width: 100%;
    /* Remove height: 100% to avoid stretching or centering issues */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align to top */
    overflow: visible;
}

.contact-main-image {
    width: 100%;
    height: auto;
    filter: grayscale(0.2) brightness(0.9);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
    display: block;
    border-radius: 24px;
    /* Matches form card */
}

.contact-visual-statue:hover .contact-main-image {
    filter: grayscale(0) brightness(1);
    transform: translateY(-5px);
}

.creative-note-primary {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bug-accent {
    color: #00ffc8;
    /* Punchy Teal/Cyan */
}

.creative-note-secondary {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Refined Glass for Elevation */
.contact-info-glass.elevated {
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Ensure content stays at top */
}

.info-overlay-content {
    position: relative;
    z-index: 10;
    padding: 30px;
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
}

.social-form-link {
    font-size: 0.75rem;
    opacity: 0.8;
    letter-spacing: 0.1em;
    color: #fff;
    transition: all 0.3s ease;
}

.social-form-link:hover {
    opacity: 1;
    color: #00ffc8;
    /* Matches bug accent */
    transform: translateY(-2px);
}

/* Sync with Homepage Colors */
.contact-grid.sync-home {
    margin-top: 40px;
    align-items: flex-start;
    /* Grid level top alignment */
}

.contact-grid.sync-home .contact-form-glass {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
    margin-top: 0;
    /* Ensure no top margin */
}

.contact-grid.sync-home h2,
.contact-grid.sync-home h3 {
    font-family: var(--font-heading);
    color: #fff;
    letter-spacing: -0.03em;
}

.contact-grid.sync-home .status-text {
    color: #fff;
    opacity: 0.4;
}

/* Mobile Adjustments for Statue */
@media (max-width: 992px) {
    .contact-visual-statue {
        height: auto;
        order: -1;
        margin-bottom: 20px;
    }

    .contact-main-image {
        width: 100%;
    }

    .info-overlay-content {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: -60px;
    }
}