/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --brand-text: #2a2f3a;
    --brand-purple: #6e46c1;
    --brand-accent: #1fb6aa;
    --brand-navy: #1a2530; /* Matches Footer Dark BG */
    --brand-navy-light: #1a1d2f;
    --bs-primary: #2d3a8c;
    --bg-light: #f6f8ff;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--brand-text);
    line-height: 1.65;
}

/* =========================================
   2. UTILITIES
   ========================================= */
.section {
    padding-block: 5rem;
}

.tight {
    max-width: 1000px;
    margin-inline: auto;
}

.eyebrow {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.tiny {
    font-size: 0.7rem;
    letter-spacing: 1px;
}
.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Backgrounds & Text */
.bg-brand-navy {
    background-color: var(--brand-navy) !important;
}

.text-brand-purple {
    color: var(--brand-purple) !important;
}

.bg-brand-purple {
    background-color: var(--brand-purple) !important;
}

.bg-purple-subtle {
    background-color: rgba(110, 70, 193, 0.1);
}

.bg-primary-subtle {
    background-color: rgba(45, 58, 140, 0.1);
}

/* Object Fit */
.object-fit-cover {
    object-fit: cover;
}

/* =========================================
   3. COMPONENTS
   ========================================= */
.btn {
    border-radius: 50rem;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
}

.btn-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-brand-purple {
    background: var(--brand-purple);
    border-color: var(--brand-purple);
    color: #fff;
}

    .btn-brand-purple:hover {
        background: #5a32a3;
        color: #fff;
    }

.navbar {
    box-shadow: 0 2px 18px rgba(0,0,0,.08);
    padding-block: 14px;
}

.nav-link {
    font-weight: 500;
    color: var(--brand-text);
}

    .nav-link:hover {
        color: var(--brand-purple);
    }

/* Hero Moving Background */
.moving-bg {
    background: linear-gradient(135deg, #d5dcdb, #c7d0cf, #e1e6e5);
    background-size: 320% 320%;
    animation: bgSweep 15s ease-in-out infinite;
}

@keyframes bgSweep {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Quote Cards (Gratitude Section) */
.quote-card {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.5rem 2.75rem;
}

    .quote-card .quote-mark {
        position: absolute;
        left: 14px;
        top: 10px;
        font-size: 2rem;
        line-height: 1;
        color: #c6cbe0;
        font-weight: 800;
    }

    .quote-card .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #eef1f7;
    }
    .count-up {
        color:rebeccapurple;
    }
/* =========================================
   4. ANIMATIONS & HOVERS
   ========================================= */

.opacity-10 {
    opacity: 0.1 !important;
}
.transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .transition-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
    }

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .reveal.in-view {
        opacity: 1;
        transform: none;
    }

/* =========================================
   5. MASONRY GRID (Stories)
   ========================================= */
.masonry-wrapper {
    column-count: 1;
    column-gap: 1.5rem;
}

@media (min-width: 768px) {
    .masonry-wrapper {
        column-count: 2;
    }
}

.story-card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.quote-badge {
    position: absolute;
    bottom: -20px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 4px solid #fff;
    z-index: 2;
}

/* =========================================
   6. FORMS
   ========================================= */
.form-control:focus, .form-select:focus {
    background-color: #fff;
    box-shadow: none;
    border: 1px solid var(--brand-purple) !important;
}

.transition-transform {
    transition: transform 0.2s ease;
}

    .transition-transform:hover {
        transform: translateY(-2px);
    }