/* ======================================== */
/* about.css - Extracted from blade      */
/* ======================================== */

/* ========== HERO ========== */
.about-hero {
    background-image:
        linear-gradient(135deg, rgba(2, 74, 87, 0.82) 0%, rgba(4, 165, 181, 0.72) 50%, rgba(3, 134, 143, 0.82) 100%),
        url('/images/about-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 72px 0 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.04); z-index: 0; }
.about-hero::after { content: ''; position: absolute; bottom: -100px; left: -40px; width: 350px; height: 350px; border-radius: 50%; background: rgba(255,255,255,.03); z-index: 0; }
.about-hero h1 { font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 12px; position: relative; z-index: 1; }
.about-hero p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; line-height: 1.7; }

/* ========== CONTENT ========== */
.about-content { padding: 48px 0 72px; }

/* Mission section */
.about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 56px; align-items: center; }
.mission-text h2 { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin-bottom: 14px; }
.mission-text p { font-size: .92rem; color: #666; line-height: 1.8; margin-bottom: 12px; }
.mission-visual { background: linear-gradient(135deg, #f0f9fa, #e6f4f6); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; }
.mission-visual .big-num { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg,#024A57,#04A5B5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mission-visual .big-label { font-size: .88rem; color: #888; font-weight: 600; margin-top: 4px; }

/* Stats */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.stat-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 20px; text-align: center; transition: all .2s; }
.stat-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); transform: translateY(-2px); }
.stat-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.stat-icon.blue { background: rgba(4,165,181,.1); color: #04A5B5; }
.stat-icon.green { background: rgba(16,185,129,.1); color: #10B981; }
.stat-icon.purple { background: rgba(139,92,246,.1); color: #8B5CF6; }
.stat-icon.orange { background: rgba(245,158,11,.1); color: #F59E0B; }
.stat-num { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; }
.stat-label { font-size: .82rem; color: #888; font-weight: 600; margin-top: 4px; }

/* Values */
.about-values { margin-bottom: 56px; }
.about-values h2 { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; text-align: center; }
.about-values .sub { font-size: .9rem; color: #888; text-align: center; margin-bottom: 32px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 24px; transition: all .2s; }
.value-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); transform: translateY(-2px); }
.value-card .v-icon { font-size: 1.6rem; margin-bottom: 12px; }
.value-card h3 { font-size: .95rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.value-card p { font-size: .84rem; color: #777; line-height: 1.7; }

/* Team */
.about-team { margin-bottom: 56px; }
.about-team h2 { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; text-align: center; }
.about-team .sub { font-size: .9rem; color: #888; text-align: center; margin-bottom: 32px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 24px; text-align: center; transition: all .2s; }
.team-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #f0f9fa, #d0eef3); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.5rem; font-weight: 800; color: #04A5B5; }
.team-card h4 { font-size: .9rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.team-card span { font-size: .78rem; color: #888; }

/* CTA */
.about-cta { background: linear-gradient(135deg, #024A57, #04A5B5); border-radius: 20px; padding: 48px 40px; text-align: center; color: #fff; }
.about-cta h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
.about-cta p { font-size: .92rem; color: rgba(255,255,255,.7); margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; }
.about-cta .cta-btn { display: inline-block; padding: 13px 36px; border-radius: 12px; background: #fff; color: #024A57; font-weight: 700; font-size: .92rem; text-decoration: none; transition: all .15s; }
.about-cta .cta-btn:hover { background: #f0f0f0; transform: translateY(-1px); }

@media (max-width: 768px) {
    .about-mission { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .values-grid, .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .about-stats, .values-grid, .team-grid { grid-template-columns: 1fr; }
}