.about-page main { max-width: 1150px; padding-top: 76px; }
.about-page h1 { font-size: clamp(2.6rem, 5vw, 4rem); text-wrap: balance; }
.about-page h1 span { color: #60c5f5; }
.about-page h2 { margin: 0 0 24px; font-size: clamp(1.7rem, 3vw, 2.25rem); text-wrap: balance; }
.about-page h3 { font-size: 1.18rem; line-height: 1.35; margin: 0 0 12px; letter-spacing: -.015em; }
.about-page p { max-width: 65ch; }
.about-page [id] { scroll-margin-top: 130px; }
.about-page footer .in > div { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.about-page footer .in a { margin: 0; }
.about-page a:focus-visible { outline: 3px solid #60c5f5; outline-offset: 5px; }
.about-page .btn-primary { background: #007bbd; border-color: #2caee8; }
.about-page .btn-primary:hover { background: #006ba5; }
.about-page .bar [aria-current] { border-color: #60c5f5; }
.about-page .about-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; padding-bottom: 60px; }
.about-intro { font-size: 1.18rem; }
.about-small { font-size: .82rem; color: #9fb0c4; margin-top: 14px; }
.about-loop { background: #111d32; border: 1px solid #294766; border-radius: 22px; padding: 28px; }
.about-loop ol { list-style: none; padding: 0; margin: 0 0 22px; }
.about-loop li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid #29405d; }
.about-loop li:first-child { padding-top: 0; }
.about-loop li > span { color: #60c5f5; font-variant-numeric: tabular-nums; font-size: .85rem; }
.about-loop p { font-size: .92rem; margin: 7px 0 0; color: #adbed1; }
.about-loop a { font-size: .9rem; }
.about-section { padding: 60px 0; border-top: 1px solid #27344b; }
.about-origin, .about-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; }
.about-team { display: grid; gap: 32px; margin-top: 32px; }
.about-person { display: grid; grid-template-columns: 180px 1fr; gap: 32px; max-width: 900px; }
.about-person img { width: 180px; height: 210px; object-fit: cover; object-position: center 25%; border-radius: 16px; background: #16233a; }
.about-person h3 { font-size: 1.55rem; margin-bottom: 3px; }
.about-role { color: #60c5f5; font-size: .95rem; margin-bottom: 12px; }
.about-person-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: .92rem; }
.about-features, .about-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 60px; }
.about-number { color: #60c5f5; font-size: .83rem; display: block; margin: 4px 0 16px; }
.about-difference { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; }
.about-principles article { margin-bottom: 30px; padding-left: 24px; border-left: 2px solid #007bbd; }
.about-principles article:last-child { margin-bottom: 0; }
.about-principles p { margin-bottom: 8px; }
.about-principles a { font-size: .9rem; }
.about-audiences, .about-start { padding-left: 22px; color: #c6d2e0; }
.about-audiences li, .about-start li { padding-left: 5px; margin-bottom: 18px; }
.about-facts { margin: 0; }
.about-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid #27344b; }
.about-facts > div:first-child { padding-top: 0; }
.about-facts dt { font-weight: 600; }
.about-facts dd { margin: 0; color: #c6d2e0; }
.about-faq { margin-top: 32px; }
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-radius: 20px; padding: 36px; background: #111d32; border: 1px solid #294766; }
.about-cta h2 { margin-bottom: 10px; }
.about-cta p { margin: 0; }
.about-skip { position: fixed; left: 12px; top: -100px; background: #fff; color: #10203b; z-index: 10; padding: 10px 16px; }
.about-skip:focus { top: 12px; }
@media (max-width: 800px) {
  .about-page main { padding-top: 40px; }
  .about-page .about-hero, .about-origin, .about-split, .about-difference { grid-template-columns: 1fr; gap: 28px; }
  .about-section { padding: 40px 0; }
  .about-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
}
@media (max-width: 520px) {
  .about-page .bar .in { flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
  .about-page .bar nav { width: 100%; margin: 0; justify-content: space-between; gap: 5px; }
  .about-page .bar .btn { font-size: .78rem; padding: 8px 10px; }
  .about-page main { padding-left: 20px; padding-right: 20px; }
  .about-person { grid-template-columns: 1fr; gap: 18px; }
  .about-person img { width: 144px; height: 168px; }
  .about-features, .about-faq { grid-template-columns: 1fr; gap: 24px; }
  .about-loop { padding: 22px; }
  .about-facts > div { grid-template-columns: 90px 1fr; gap: 14px; }
}