:root {
    --z-ink: #262626;
    --z-ink-soft: #5f5a56;
    --z-sand: #faf3ee;
    --z-sand-strong: #ede7e1;
    --z-teal: #1b7f79;
    --z-teal-dark: #13665f;
    --z-cream: #fffdfa;
}

body {
    font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
    color: var(--z-ink);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.font-display {
    font-family: "Sora", "Segoe UI", Tahoma, sans-serif;
}

.hero-bg {
    background:
        radial-gradient(circle at 10% 10%, rgba(27, 127, 121, 0.12), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(32, 164, 243, 0.16), transparent 50%),
        linear-gradient(135deg, var(--z-sand) 0%, var(--z-sand-strong) 100%);
}

.section-border {
    border-top: 1px solid rgba(38, 38, 38, 0.08);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(27, 127, 121, 0.12);
    color: var(--z-teal-dark);
    margin-bottom: 1rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    background: var(--z-teal);
    color: #ffffff;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 12px 24px rgba(27, 127, 121, 0.18);
}

.btn-primary:hover {
    background: var(--z-teal-dark);
    transform: translateY(-1px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    border: 2px solid rgba(38, 38, 38, 0.2);
    font-weight: 700;
    color: var(--z-ink);
    background: rgba(255, 255, 255, 0.7);
    transition: border 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover {
    border-color: rgba(38, 38, 38, 0.5);
    transform: translateY(-1px);
}

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(38, 38, 38, 0.12);
}

.link-arrow {
    font-weight: 700;
    color: var(--z-teal-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.link-arrow::after {
    content: "\2192";
    font-size: 1.1rem;
}

.stat-card {
    background: var(--z-cream);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 12px 24px rgba(38, 38, 38, 0.08);
}

.nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(38, 38, 38, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    transition: border 0.2s ease, transform 0.2s ease;
}

.nav-toggle:hover {
    border-color: rgba(38, 38, 38, 0.4);
    transform: translateY(-1px);
}

.nav-toggle span {
    display: block;
    width: 1.3rem;
    height: 2px;
    background: var(--z-ink);
    margin: 3px 0;
}

.mobile-menu {
    border: 1px solid rgba(38, 38, 38, 0.08);
    border-radius: 1rem;
    background: var(--z-cream);
    padding: 1rem;
    box-shadow: 0 16px 32px rgba(38, 38, 38, 0.08);
}

.mobile-link {
    display: block;
    font-weight: 700;
    padding: 0.65rem 0.25rem;
    color: var(--z-ink);
}

.service-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.text-z-ink-soft {
    color: var(--z-ink-soft);
}