:root {
    --salt-color-blue-500: #0078CF;
    --salt-color-gray-900: #242526;
    --salt-color-gray-500: #72777D;
    --salt-color-white: #FFFFFF;
}

body {
    background-color: var(--salt-color-white);
    color: var(--salt-color-gray-900);
}

.font-heading {
    font-family: 'Public Sans', sans-serif;
}

.font-body {
    font-family: 'Public Sans', sans-serif;
}

.bg-brand-white { background-color: var(--salt-color-white); }
.bg-brand-gray-900 { background-color: var(--salt-color-gray-900); }
.text-brand-gray-900 { color: var(--salt-color-gray-900); }
.text-brand-gray-500 { color: var(--salt-color-gray-500); }
.text-brand-blue-500 { color: var(--salt-color-blue-500); }


.nav-link {
    @apply relative font-semibold text-sm uppercase tracking-wider text-brand-gray-900 transition-colors duration-300;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--salt-color-blue-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-link-mobile {
    @apply border-b border-gray-100 font-semibold text-brand-gray-900 hover:bg-gray-50 transition-colors duration-200;
}

.section-title {
    @apply font-heading text-3xl md:text-4xl font-bold text-brand-gray-900;
}

.section-text {
    @apply text-lg md:text-xl text-brand-gray-500 leading-relaxed;
}

.pillar-card {
    @apply bg-white rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
}

.pillar-title {
    @apply font-heading text-xl font-bold text-brand-gray-900;
}

.pillar-text {
    @apply text-base text-brand-gray-500 leading-relaxed;
}

.scroll-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-target.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}