:root {
    --hero-overlay: linear-gradient(135deg, hsla(224, 68%, 22%, 0.92), hsla(224, 76%, 18%, 0.75));
    --gradient-accent: linear-gradient(135deg, hsl(25, 95%, 53%), hsl(35, 95%, 55%));
    --shadow-card: 0 4px 24px -4px hsla(224, 76%, 18%, 0.08);
    --shadow-card-hover: 0 12px 40px -8px hsla(224, 76%, 18%, 0.15);
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: hsl(220, 40%, 98%);
    color: hsl(222, 25%, 12%);
}

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

.text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-overlay {
    background: var(--hero-overlay);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(220, 40%, 98%);
}

::-webkit-scrollbar-thumb {
    background: hsl(222, 10%, 45%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(25, 95%, 53%);
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
}

#mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* FAQ Accordion */
.faq-item .faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.faq-item.active .faq-content {
    max-height: 200px;
    padding-bottom: 1.25rem;
}

.faq-item .faq-icon {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}