/* Use Poppins for headings, Inter for body */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc; /* Lighter gray background */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* Animated Gradient Hero */
.hero-gradient {
    background: linear-gradient(135deg, #1A202C 0%, #2D3748 50%, #4A5568 100%);
    background-size: 200% 200%;
    position: relative;
    overflow: hidden;
    animation: gradient-flow 10s ease infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Hero pattern overlay */
.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 100% 150%, #6366F1 0%, transparent 40%);
    opacity: 0.1;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* Typing effect cursor */
.typed-text::after {
    content: '|';
    display: inline-block;
    animation: blink-caret .75s step-end infinite;
}

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: white;
    }
}

/* Scrolled Header Style */
.header-scrolled {
    background-color: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 0px;
}

.header-scrolled .nav-link {
    color: #374151 !important; /* text-gray-700 */
}

.header-scrolled .nav-link:hover {
    color: #4f46e5 !important; /* text-indigo-600 */
}

.header-scrolled .brand-text {
    color: #1f2937 !important; /* text-gray-800 */
}

.header-scrolled .brand-span {
    color: #4f46e5 !important; /* text-indigo-600 */
}

.header-scrolled .social-icon {
    color: #4b5563 !important; /* text-gray-600 */
}

.header-scrolled .social-icon:hover {
    color: #4f46e5 !important; /* text-indigo-600 */
}

.header-scrolled .mobile-btn {
    color: #1f2937 !important; /* text-gray-800 */
}

/* Scroll Down Arrow */
.scroll-down {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -20px);
    }
    60% {
        transform: translate(-50%, -10px);
    }
}