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

.glow-primary { box-shadow: 0 0 20px rgba(219, 144, 255, 0.4); }

.glass-panel {
    background: rgba(8, 12, 22, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.step-line {
    height: 2px;
    background-image: linear-gradient(90deg, rgba(219,144,255,0.38) 0%, rgba(255,255,255,0.14) 45%, rgba(255,106,159,0.36) 100%);
    background-size: 24px 2px;
    animation: dash 4s linear infinite;
}

.step-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid rgba(255,255,255,0.18);
    background-color: rgba(8, 12, 22, 0.95);
    box-shadow: 0 0 0 8px rgba(255,255,255,0.04);
}

.step-dot.prim { border-color: rgba(219, 144, 255, 0.98); box-shadow: 0 0 0 10px rgba(219, 144, 255, 0.12); }
.step-dot.sec  { border-color: rgba(255, 106, 159, 0.98); box-shadow: 0 0 0 10px rgba(255, 106, 159, 0.12); }
.step-dot.ter  { border-color: rgba(182, 255, 237, 0.98); box-shadow: 0 0 0 10px rgba(182, 255, 237, 0.12); }

.step-card-top    { top: calc(50% - 18.75rem); }
.step-card-bottom { top: calc(50% + 1.25rem); }

@keyframes dash {
    from { background-position: 0 0; }
    to   { background-position: 36px 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up           { animation: fadeInUp 0.8s ease-out forwards; }
.fade-in-up.delay-1   { animation-delay: 0.1s; }
.fade-in-up.delay-2   { animation-delay: 0.2s; }
.fade-in-up.delay-3   { animation-delay: 0.3s; }
.fade-in-up.delay-4   { animation-delay: 0.4s; }
.fade-in-up.delay-5   { animation-delay: 0.5s; }

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.btn-hover { transition: all 0.3s ease; }
.btn-hover:hover  { transform: scale(1.02); box-shadow: 0 0 20px rgba(219, 144, 255, 0.4); }
.btn-hover:active { transform: scale(0.98); }