.about-main { padding: 26px 0 56px; background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 30%, #ffffff 100%); color: #16324f; }
.about-section { margin-top: 46px; }

.about-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.about-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(3, 121, 237, .1); color: #0379ed; font-weight: bold; font-size: 13px; }
.about-hero h1 { margin-top: 14px; font-size: 40px; line-height: 1.24; color: #102d4a; }
.about-hero p { margin-top: 16px; color: #586f85; line-height: 1.85; }
.about-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

.about-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: bold; }
.about-btn-primary { background: #0379ed; color: #fff; }
.about-btn-primary:hover { background: #0269ce; }
.about-btn-ghost { border: 1px solid #0379ed; color: #0379ed; background: #fff; }
.about-btn-ghost:hover { background: rgba(3, 121, 237, .06); }

.about-metrics { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.about-metrics dl { background: #fff; border: 1px solid #e6edf7; border-radius: 10px; padding: 12px 14px; }
.about-metrics dt { font-size: 28px; font-weight: bold; color: #0f2944; }
.about-metrics dd { margin-top: 6px; color: #687b8d; font-size: 13px; }

.about-hero-right { border-radius: 12px; padding: 18px; background: #fff; }
.about-img-wrap { border-radius: 10px; overflow: hidden; border: 1px solid #dbe7f5; }
.about-img-wrap img { width: 100%; height: 210px; object-fit: cover; display: block; }
.about-hero-right ul { margin-top: 14px; display: grid; gap: 10px; }
.about-hero-right li { display: flex; gap: 8px; align-items: center; color: #47617d; }
.about-hero-right i { color: #0379ed; }

.about-title { text-align: center; }
.about-title h2 { font-size: 30px; color: #102b47; }
.about-title p { margin-top: 10px; color: #66798c; }
.about-title-left { text-align: left; }

.about-grid { margin-top: 20px; display: grid; gap: 14px; }
.about-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-card { background: #fff; border: 1px solid #e5edf8; border-radius: 12px; padding: 16px; }
.about-card h3 { font-size: 18px; color: #12314f; }
.about-card p { margin-top: 8px; color: #5f7388; line-height: 1.8; }

.about-timeline-wrap { border-radius: 12px; padding: 26px; background: #fff; border: 1px solid #e6edf7; }
.about-timeline { margin-top: 16px; display: grid; gap: 10px; }
.about-time-item { border: 1px solid #e7eef8; border-left: 4px solid transparent; border-radius: 10px; padding: 14px 14px 14px 16px; transition: .2s ease; }
.about-time-item h3 { font-size: 18px; color: #123250; }
.about-time-item p { margin-top: 7px; color: #5f7488; line-height: 1.8; }
.about-time-item.active,
.about-time-item:hover { border-left-color: #0379ed; background: #f5f9ff; }

.about-cta { margin-top: 40px; text-align: center; border-radius: 14px; padding: 38px 20px; background: linear-gradient(128deg, #0c4b8c 0%, #1b7dde 58%, #42acff 100%); color: #fff; }
.about-cta h2 { font-size: 33px; }
.about-cta p { margin-top: 10px; color: rgba(255, 255, 255, .92); }
.about-cta .about-btn { margin-top: 20px; background: #fff; color: #0d5ea9; }

@media only screen and (max-width: 1280px) {
    .about-main { padding: 20px 16px 46px; }
}

@media only screen and (max-width: 992px) {
    .about-hero,
    .about-grid-3 { grid-template-columns: 1fr; }

    .about-hero h1 { font-size: 32px; }
    .about-cta h2 { font-size: 28px; }
}

@media only screen and (max-width: 768px) {
    .about-hero h1 { font-size: 27px; }
    .about-title h2 { font-size: 26px; }
    .about-metrics { grid-template-columns: 1fr; }
    .about-timeline-wrap { padding: 20px 14px; }
}