/* ============================================================================
   About page modernization — matches the home green-accent card language.
   Static override (loaded after the Vite bundle) so it deploys without a build.
   Hero is intentionally untouched.
   ============================================================================ */

/* Story cards: green left accent on hover + green-tinted lift */
.story-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 32px;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.story-card::before {
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
    opacity: 0;
    transition: opacity .3s ease, top .3s ease, bottom .3s ease;
}
.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(16, 185, 129, .12);
    border-color: #cceee2;
}
.story-card:hover::before { opacity: 1; top: 0; bottom: 0; }
.story-card h3 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 12px; }

/* Values: bolder green gradient number chip + green hover */
.values-grid { gap: 18px; }
.value-card {
    border-radius: 18px;
    padding: 28px;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(16, 185, 129, .12);
    border-color: #cceee2;
}
.value-icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #10b981, #0d9c6f);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(16, 185, 129, .30);
}
.value-card h3 { font-size: 18px; letter-spacing: -.01em; }

/* Team: green-tinted hover + ringed avatar */
.team-card {
    border-radius: 22px;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(16, 185, 129, .12);
    border-color: #cceee2;
}
.team-avatar {
    border: 3px solid #fff;
    outline: 2px solid #d1fae5;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .20);
}

/* Offices: green accent card */
.office-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.office-card::before {
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
    opacity: 0;
    transition: opacity .3s ease, top .3s ease, bottom .3s ease;
}
.office-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(16, 185, 129, .12);
    border-color: #cceee2;
}
.office-card:hover::before { opacity: 1; top: 0; bottom: 0; }

/* FAQ: same polish as home (icon rotates to a cross, green accent when open) */
.faq-item { transition: border-color .3s ease, box-shadow .3s ease; }
.faq-item:hover { border-color: #cceee2; }
.faq-item.active { border-color: #cceee2; box-shadow: 0 16px 40px rgba(16, 185, 129, .08); }
.faq-icon { transition: transform .3s ease, background .3s ease, color .3s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); }