/* Base & Typography */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-600: #0d9488;
    --teal-700: #115e59;
    --teal-800: #134e4a;
    --teal-900: #042f2e;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--slate-800);
}

.font-serif {
    font-family: 'Lora', Georgia, serif;
}

.font-sans {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }

/* Hero Animations */
.hero-subtitle {
    opacity: 0;
    animation: fadeUp 0.8s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-title {
    opacity: 0;
    animation: fadeUp 0.8s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-desc {
    opacity: 0;
    animation: fadeUp 0.8s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-cta {
    opacity: 0;
    animation: fadeUp 0.8s 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

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

/* Scroll Indicator */
.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-8px) translateX(-50%); }
    60% { transform: translateY(-4px) translateX(-50%); }
}

/* Service Cards */
.service-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header scroll state */
header.scrolled {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

/* Mobile menu transition */
#mobile-menu {
    animation: slideDown 0.3s ease forwards;
}

#mobile-menu.hidden {
    animation: slideUp 0.2s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 400px; }
}

@keyframes slideUp {
    from { opacity: 1; max-height: 400px; }
    to { opacity: 0; max-height: 0; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--slate-100);
}
::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--slate-400);
}