/* Custom styles to complement Tailwind */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: #0A0F1F; /* A deep, technical navy blue */
    color: #E2E8F0; /* Slate 200 for soft, readable text */
}

/* "Digital Blueprint" background with a subtle panning grid */
.blueprint-bg {
    background-image:
        linear-gradient(rgba(10, 15, 31, 0) 0%, #0A0F1F 100%),
        linear-gradient(to right, rgba(0, 255, 157, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 255, 157, 0.05) 1px, transparent 1px);
    background-size: 100%, 100%, 50px 50px, 50px 50px;
    animation: pan-grid 60s linear infinite;
}

@keyframes pan-grid {
    0% { background-position: 0% 0%; }
    100% { background-position: 50px 50px; }
}

/* Concentrated glow for the hero section to highlight the main headline */
.hero-glow {
    background-image: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0, 255, 157, 0.1), transparent);
}

/* Custom gradient for headings */
.text-gradient {
    background: linear-gradient(135deg, #FFFFFF, #00FF9D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Reliable CSS transition for fade-in effect on scroll */
.observed {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for step number circles */
@keyframes pulse-pink-glow {
    0%   { 
        border-color: #0891b2; /* Initial Cyan */
        box-shadow: none; 
    }
    15%  { 
        border-color: #f472b6; /* Soft Pink */
        box-shadow: 0 0 25px 5px rgba(244, 114, 182, 0.5); /* Soft Pink Glow */
    }
    30%  { 
        border-color: #0891b2; /* Back to Cyan */
        box-shadow: none;
    }
    100% { 
        border-color: #0891b2; 
        box-shadow: none;
    }
}

/* Keyframes for the CTA button to glow on and off continuously */
@keyframes pulse-pink-cta-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.8; }
}

/* Class for the CTA button's wrapper to enable the glow effect */
.cta-glow-wrapper::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -8px; /* How far the glow extends */
    background: linear-gradient(to right, #ec4899, #f472b6);
    border-radius: 9999px; /* Matches button's rounded-full */
    filter: blur(25px);
    animation: pulse-pink-cta-glow 3s ease-in-out infinite; /* Using the updated animation */
}

.step-animation-1 { animation: pulse-pink-glow 4.5s infinite; animation-delay: 0s; }
.step-animation-2 { animation: pulse-pink-glow 4.5s infinite; animation-delay: 1.5s; }
.step-animation-3 { animation: pulse-pink-glow 4.5s infinite; animation-delay: 3s; }

/* Solid header style */
.header-solid {
    background-color: #060913; /* A solid, rich navy slightly darker than the body */
    border-bottom: 1px solid rgba(0, 255, 157, 0.1);
}