body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: #cbd5e1;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
}

.gradient-text {
    background: linear-gradient(to right, #3b82f6, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.animated-gradient {
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}
.animated-gradient:hover {
    background-position: right center;
}

@keyframes gradient-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pan-gradient {
    background-size: 200% 200%;
    animation: gradient-pan 10s ease infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.reveal-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    background: linear-gradient(to right, #3b82f6, #818cf8);
    transition: all 0.3s ease;
    opacity: 0.8;
}
#scrollTopBtn:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}

@keyframes pulse-opacity {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
.svg-pulse {
    animation: pulse-opacity 4s ease-in-out infinite;
}

@keyframes draw-line {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}
.svg-draw {
    stroke-dasharray: 100;
    animation: draw-line 5s ease-in-out infinite alternate;
}