@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    color: white;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* LIQUID GOLD GRADIENT */
.gradient-text {
    background: linear-gradient(
        to right, 
        #ffd32b 0%, 
        #fff6ad 25%, 
        #ffd32b 50%, 
        #f9e48c 75%, 
        #ffd32b 100%
    );
    background-size: 200% auto;
    animation: shine 5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding-right: 0.2em;
    padding-bottom: 0.1em;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* PIPELINE LAYOUT */
.workflow-container {
    position: relative;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 211, 43, 0.05);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(20px);
    z-index: 10; /* Ensure container sits above the glow */
}

@media (min-width: 768px) {
    .workflow-container {
        border-radius: 24px;
        padding: 32px;
    }
}


/* CARD BASE STATE */
.node-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
    opacity: 0.15;
    transition: transform 0.4s ease;
}

/* SEQUENTIAL LOOP - Updated Colors */
.node-card:nth-child(1) { animation: highlightLoopCyan 9s infinite 0s; }
.node-card:nth-child(2) { animation: highlightLoopViolet 9s infinite 3s; }
.node-card:nth-child(3) { animation: highlightLoopPink 9s infinite 6s; }

@keyframes highlightLoopCyan {
    0%, 30% { 
        opacity: 1; 
        border-color: rgba(6, 182, 212, 0.5); /* Cyan-500 */
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.02) 100%);
        transform: translateX(10px);
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.15);
    }
    33%, 100% { 
        opacity: 0.3; 
        border-color: rgba(255, 255, 255, 0.05); 
        background: rgba(255, 255, 255, 0.02);
        transform: translateX(0);
        box-shadow: none;
    }
}

@keyframes highlightLoopViolet {
    0%, 30% { 
        opacity: 1; 
        border-color: rgba(139, 92, 246, 0.5); /* Violet-500 */
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.02) 100%);
        transform: translateX(10px);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
    }
    33%, 100% { 
        opacity: 0.3; 
        border-color: rgba(255, 255, 255, 0.05); 
        background: rgba(255, 255, 255, 0.02);
        transform: translateX(0);
        box-shadow: none;
    }
}

@keyframes highlightLoopPink {
    0%, 30% { 
        opacity: 1; 
        border-color: rgba(236, 72, 153, 0.5); /* Pink-500 */
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.1) 0%, rgba(236, 72, 153, 0.02) 100%);
        transform: translateX(10px);
        box-shadow: 0 0 30px rgba(236, 72, 153, 0.15);
    }
    33%, 100% { 
        opacity: 0.3; 
        border-color: rgba(255, 255, 255, 0.05); 
        background: rgba(255, 255, 255, 0.02);
        transform: translateX(0);
        box-shadow: none;
    }
}

/* ICON HIGHLIGHTS SYNCED - Updated Colors */
.node-card:nth-child(1) .icon-box { animation: iconHighlightCyan 9s infinite 0s; }
.node-card:nth-child(2) .icon-box { animation: iconHighlightViolet 9s infinite 3s; }
.node-card:nth-child(3) .icon-box { animation: iconHighlightPink 9s infinite 6s; }

@keyframes iconHighlightCyan {
    0%, 30% { background: #06b6d4; color: black; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); border-color: #06b6d4; }
    33%, 100% { background: rgba(255,255,255,0.05); color: #06b6d4; box-shadow: none; border-color: rgba(255,255,255,0.1); }
}

@keyframes iconHighlightViolet {
    0%, 30% { background: #8b5cf6; color: white; box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); border-color: #8b5cf6; }
    33%, 100% { background: rgba(255,255,255,0.05); color: #8b5cf6; box-shadow: none; border-color: rgba(255,255,255,0.1); }
}

@keyframes iconHighlightPink {
    0%, 30% { background: #ec4899; color: white; box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); border-color: #ec4899; }
    33%, 100% { background: rgba(255,255,255,0.05); color: #ec4899; box-shadow: none; border-color: rgba(255,255,255,0.1); }
}

/* REVEAL SYNCED */
.coords-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.node-card:nth-child(1) .coords-reveal { animation: revealBox 9s infinite 0s; }

@keyframes revealBox {
    0%, 30% { max-height: 100px; margin-top: 12px; opacity: 1; }
    33%, 100% { max-height: 0; margin-top: 0; opacity: 0; }
}

/* Restored Hero Glow */
.hero-glow {
    position: absolute;
    top: -40%;
    right: -25%;
    width: clamp(300px, 70vw, 500px); /* Responsive width */
    height: clamp(300px, 70vw, 500px); /* Responsive height */
    background: radial-gradient(circle, rgba(255, 211, 43, 0.08) 0%, rgba(0,0,0,0) 70%);
    z-index: 1; /* Behind workflow container (z=10) but above background */
    pointer-events: none;
}

/* CANVAS STYLING - FIXED FULL-SCREEN BACKGROUND */
#networkCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.line-flow {
    stroke-dasharray: 10;
    animation: flow 20s linear infinite;
}

@keyframes flow {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0; }
}

/* Base Card Style */
.step-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

/* HOVER EFFECTS - Individual Colors */
.step-card:nth-child(1):hover {
    transform: translateY(-5px);
    border-color: #f97316; /* Orange */
    box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.05);
}

.step-card:nth-child(2):hover {
    transform: translateY(-5px);
    border-color: #f43f5e; /* Rose */
    box-shadow: 0 10px 30px -10px rgba(244, 63, 94, 0.3);
    background: rgba(244, 63, 94, 0.05);
}

.step-card:nth-child(3):hover {
    transform: translateY(-5px);
    border-color: #f59e0b; /* Amber */
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

/* PRICING CARDS */
.pricing-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.pricing-card:hover {
    border-color: rgba(255, 211, 43, 0.3);
    background: rgba(255, 211, 43, 0.02);
    transform: translateY(-5px);
}
.pricing-highlight {
    border-color: rgba(255, 211, 43, 0.4);
    background: rgba(255, 211, 43, 0.05);
}

/* FAQ ACCORDION */
.faq-details summary::-webkit-details-marker {
    display: none;
}
.faq-details summary {
    list-style: none;
}
.faq-details[open] .chevron-icon {
    transform: rotate(180deg) !important;
}
.chevron-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* BAR ANIMATION */
@keyframes fillBar {
    from { width: 0; }
    to { width: var(--target-width); }
}
.animate-bar {
    width: 0;
    animation: fillBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}