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

body {
    font-family: 'Inter', sans-serif;
}

.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #00d3f2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glow {
    box-shadow: 0 0 80px rgba(0, 211, 242, 0.15);
}

.glow-sm {
    box-shadow: 0 0 30px rgba(0, 211, 242, 0.1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.scroll-animation {
    animation: scroll 20s linear infinite;
}

.toggle-slider {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.circuit-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v15m0 30v15M0 30h15m30 0h15M15 15l10 10m10 10l10 10M45 15l-10 10m-10 10l-10 10' stroke='%231e3148' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%231e3148'/%3E%3C/svg%3E");
}

@keyframes flowDash {
    to {
        stroke-dashoffset: -20;
    }
}

.flow-edge-animated {
    animation: flowDash 1s linear infinite;
}

.flow-node {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.flow-node:hover {
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.15));
    transform: translateY(-2px);
}