body { background: url('../img/bg-app.png') center / cover fixed no-repeat; }
.about-page { min-height: 100vh; padding: 38px 20px 32px; background: url('../img/bg-app.png') center / cover fixed no-repeat; }
.about-container { max-width: 1120px; }
.about-card { padding: 34px 52px 22px; border-radius: 26px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 38px rgba(16, 42, 92, .16); color: #1d355f; text-align: center; }
.about-logo { width: 148px; height: 148px; margin: 0 auto 10px; object-fit: contain; }
.about-title-row { display: inline-flex; align-items: center; justify-content: center; gap: 11px; }
.about-info-icon { display: inline-flex; width: 47px; height: 47px; align-items: center; justify-content: center; border-radius: 50%; background: #edf3ff; color: #1769ed; font-size: 27px; }
.about-card h1 { margin: 0; color: #142e62; font-size: clamp(30px, 3vw, 39px); font-weight: 800; line-height: 1.15; }
.about-lead { max-width: 700px; margin: 8px auto 0; color: #1769ed; font-size: 17px; font-weight: 700; line-height: 1.7; }
.about-divider { display: block; width: 64px; height: 4px; margin: 18px auto; border-radius: 4px; background: #2467e9; }
.about-description { max-width: 685px; margin: 0 auto; color: #223a68; font-size: 16px; line-height: 1.9; }
.about-project { display: flex; max-width: 720px; margin: 22px auto 24px; padding: 15px 48px; align-items: center; justify-content: center; gap: 22px; border-radius: 14px; background: linear-gradient(100deg, #f1f6ff, #e9f1ff); text-align: left; }
.about-unp-logo { width: 66px; height: 66px; flex: 0 0 auto; object-fit: contain; }
.about-project p { margin: 0; color: #18366c; font-size: 18px; font-weight: 800; line-height: 1.5; }
.contact-heading { display: grid; grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); align-items: center; gap: 24px; margin-bottom: 13px; }
.contact-heading > span { height: 2px; background: #b6d0ff; }
.contact-heading h2 { margin: 0; color: #1769ed; font-size: 21px; font-weight: 800; }
.contact-heading h2 i { margin-right: 7px; }
.contact-list { max-width: 970px; margin: 0 auto; }
.contact-card { display: flex; min-height: 164px; padding: 18px 24px; align-items: center; justify-content: center; gap: 20px; border: 1px solid #e1eafe; border-radius: 16px; background: #fff; box-shadow: 0 6px 15px rgba(35, 74, 142, .13); text-align: left; }
.contact-avatar { display: flex; width: 96px; height: 96px; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #e4eeff; color: #1769ed; font-size: 58px; }
.contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-content { min-width: 0; flex: 0 1 auto; }
.contact-content h3 { margin: 0; color: #18366c; font-size: 17px; font-weight: 800; }
.contact-content p { margin: 4px 0 0; color: #29436f; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.contact-content .contact-role { margin-top: 2px; }
.contact-content p i { display: inline-block; width: 26px; color: #1769ed; font-size: 18px; vertical-align: -2px; }
.about-back { width: min(310px, 100%); margin: 20px auto 0; justify-content: center; gap: 9px; border-radius: 10px; }
@media (max-width: 767.98px) { .about-page { padding: 24px 12px; } .about-card { padding: 28px 20px 20px; } .about-logo { width: 112px; height: 112px; } .about-project { padding: 14px 16px; gap: 13px; } .about-project p { font-size: 15px; } .about-unp-logo { width: 54px; height: 54px; } .contact-heading { gap: 10px; } .contact-heading h2 { font-size: 18px; } .contact-card { min-height: auto; padding: 18px; } }
@media (max-width: 430px) { .about-title-row { gap: 8px; } .about-info-icon { width: 40px; height: 40px; font-size: 23px; } .contact-card { align-items: flex-start; gap: 12px; padding: 14px; } .contact-avatar { width: 76px; height: 76px; font-size: 45px; } }