/* Custom CSS for gradients and subtle animations */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0F172A; /* Dark Sapphire Blue background */
    color: #E2E8F0;
}
.hero-gradient {
    background: linear-gradient(180deg, rgba(15, 23, 42, 1) 0%, rgba(30, 41, 59, 1) 100%);
}
.glow-effect {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glow-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 60px rgba(59, 130, 246, 0.4);
}
.dynamic-line {
    height: 2px;
    background: linear-gradient(90deg, #FACC15 0%, #3B82F6 100%);
    width: 100px;
    margin: 0 auto;
    border-radius: 9999px;
}
.animated-entry {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Style for hidden sections (SPA simulation) */
.page-section {
    display: none;
}
.page-section.active {
    display: block;
}