.about-us {
  --about-navy: #0b1b3d;
  --about-blue: #2055d9;
  scroll-margin-top: 82px;
  padding: 30px 0 70px;
  border-top: 1px solid #edf1f6;
  background: #fbfdfe;
}

.about-us__hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(34px, 5vw, 68px);
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 36px 24px 70px;
}

.about-us__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-us__eyebrow {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid #dce9fa;
  border-radius: 999px;
  background: #eaf2fd;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-us__copy h2 {
  margin: 19px 0 17px;
  color: var(--about-navy);
  font-size: clamp(37px, 3.7vw, 49px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.16;
}

.about-us__copy h2 span {
  color: var(--about-blue);
}

.about-us__copy > p {
  max-width: 480px;
  color: #68758a;
  font-size: 14px;
  line-height: 1.75;
}

.about-us__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.about-us__button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}

.about-us__button:hover {
  transform: translateY(-1px);
}

.about-us__button--primary {
  background: #0b1b3d;
  color: #fff;
}

.about-us__button--primary:hover {
  background: #152b5a;
}

.about-us__button--secondary {
  border-color: #e1e6ed;
  background: #fff;
  color: #4d5a70;
}

.about-us__button--secondary:hover {
  background: #f8fafc;
}

.about-us__hero-visual {
  position: relative;
  min-width: 0;
  padding-top: 6px;
}

.about-us__flow-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.08fr) 24px 82px;
  align-items: center;
  gap: 8px;
  margin: 0 10px -35px;
}

.about-us__flow-card {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  background: #ffffffef;
  box-shadow: 0 8px 20px #0b173614;
  backdrop-filter: blur(8px);
}

.about-us__flow-icon {
  display: grid;
  width: 33px;
  height: 33px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--about-blue);
  font-size: 17px;
}

.about-us__flow-card strong,
.about-us__flow-card small {
  display: block;
}

.about-us__flow-card strong {
  color: #14213a;
  font-size: 10px;
}

.about-us__flow-card small {
  margin-top: 4px;
  color: #778398;
  font-size: 8px;
  line-height: 1.4;
}

.about-us__arrow {
  color: #5c91ee;
  font-size: 19px;
  text-align: center;
}

.about-us__platform {
  display: flex;
  width: 82px;
  height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--about-blue);
  box-shadow: 0 9px 20px #2055d938;
  color: #fff;
  text-align: center;
}

.about-us__platform strong {
  max-width: 68px;
  font-size: 9px;
  line-height: 1.2;
}

.about-us__platform small {
  margin-top: 5px;
  color: #d6e3ff;
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.about-us__hero-visual > img {
  display: block;
  width: 100%;
  height: clamp(330px, 32vw, 420px);
  border: 1px solid #e7edf4;
  border-radius: 23px;
  background: #f1f4f8;
  object-fit: cover;
  object-position: center;
}

.about-role {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 48px 24px 76px;
}

.about-role__header {
  max-width: 760px;
  margin: 0 auto 35px;
  text-align: center;
}

.about-role__header h3,
.about-purpose__copy h3 {
  margin: 13px 0 9px;
  color: var(--about-navy);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.about-role__header > p {
  color: #6d7a8e;
  font-size: 13px;
  line-height: 1.65;
}

.about-role__diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 94px 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 34px;
  border: 1px solid #edf0f4;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 6px 24px #11182708;
}

.about-role__card {
  min-width: 0;
  padding: 23px;
  border: 1px solid #e7edf4;
  border-radius: 18px;
  background: #f8fafc;
}

.about-role__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #e9f2ff;
  color: #2055d9;
  font-size: 19px;
}

.about-role__tag {
  display: block;
  margin-top: 15px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-role__card h4 {
  margin: 3px 0 13px;
  color: #0b1b3d;
  font-size: 18px;
}

.about-role__card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-role__card li {
  position: relative;
  padding-left: 14px;
  color: #5d6a7e;
  font-size: 11px;
  line-height: 1.5;
}

.about-role__card li::before {
  position: absolute;
  top: .5em;
  left: 0;
  color: #3472e4;
  content: '•';
  font-weight: 800;
}

.about-role__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5790ed;
  font-size: 15px;
}

.about-role__connector i {
  flex: 1;
  border-top: 2px dashed #78a6f1;
}

.about-role__hub {
  display: flex;
  width: 92px;
  height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2055d9;
  box-shadow: 0 9px 20px #2055d930;
  color: white;
  text-align: center;
}

.about-role__hub strong {
  max-width: 70px;
  font-size: 9px;
  line-height: 1.2;
}

.about-role__hub small {
  margin-top: 4px;
  color: #d8e5ff;
  font-size: 6px;
}

.about-purpose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(36px, 5vw, 68px);
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 0 24px 4px;
}

.about-purpose__visual {
  position: relative;
  min-width: 0;
}

.about-purpose__visual > img {
  display: block;
  width: 100%;
  height: clamp(300px, 31vw, 400px);
  border: 1px solid #e7edf4;
  border-radius: 22px;
  background: #f1f4f8;
  object-fit: cover;
  object-position: top center;
}

.about-purpose__visual blockquote {
  position: absolute;
  right: 24px;
  bottom: 21px;
  left: 24px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid #edf0f4;
  border-radius: 15px;
  background: #fffffff0;
  box-shadow: 0 7px 20px #11182716;
  backdrop-filter: blur(8px);
}

.about-purpose__visual blockquote > span {
  color: #2563eb;
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 800;
  line-height: .9;
}

.about-purpose__visual blockquote p {
  color: #4c5a70;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
}

.about-purpose__copy > p {
  color: #5f6c80;
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 1050px) {
  .about-us__hero { gap: 34px; }
  .about-us__flow-cards { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px 70px; gap: 5px; margin-right: 0; margin-left: 0; }
  .about-us__platform { width: 70px; height: 70px; }
  .about-role__diagram { grid-template-columns: minmax(0,1fr) 34px 80px 34px minmax(0,1fr); gap: 7px; padding: 22px; }
  .about-role__card { padding: 18px; }
}

@media (max-width: 760px) {
  .about-us { padding-top: 17px; }
  .about-us__hero { grid-template-columns: 1fr; gap: 34px; padding: 29px 20px 46px; }
  .about-us__copy h2 { font-size: clamp(36px, 8.7vw, 48px); }
  .about-us__flow-cards { margin: 0 0 -23px; }
  .about-us__hero-visual > img { height: clamp(290px, 65vw, 390px); }
  .about-role { padding: 37px 20px 55px; }
  .about-role__diagram { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .about-role__connector {
    position: relative;
    width: 20px;
    height: 30px;
    min-height: 30px;
    justify-self: center;
    transform: none;
  }
  .about-role__connector span { display: none; }
  .about-role__connector i {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 50%;
    width: 0;
    flex: none;
    border-top: 0;
    border-left: 2px dashed #78a6f1;
  }
  .about-role__connector::before,
  .about-role__connector::after {
    position: absolute;
    left: 50%;
    z-index: 1;
    padding: 0 2px;
    background: #fff;
    color: #5790ed;
    font-size: 12px;
    line-height: 1;
    transform: translateX(-50%);
  }
  .about-role__connector::before { top: 0; content: '↑'; }
  .about-role__connector::after { bottom: 0; content: '↓'; }
  .about-role__hub { justify-self: center; }
  .about-purpose { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
  .about-purpose__visual { order: 2; }
  .about-purpose__copy { order: 1; }
  .about-purpose__visual > img { height: 340px; }
}

@media (max-width: 520px) {
  .about-us__flow-cards { grid-template-columns: 1fr 18px 1fr; }
  .about-us__platform { grid-column: 1 / -1; justify-self: center; width: 74px; height: 74px; }
  .about-us__flow-card { gap: 7px; padding: 9px; }
  .about-us__flow-icon { width: 29px; height: 29px; }
  .about-us__flow-card strong { font-size: 9px; }
  .about-us__flow-card small { font-size: 7px; }
  .about-us__flow-cards > .about-us__arrow:nth-child(4) { display: none; }
  .about-purpose__visual blockquote { right: 14px; bottom: 14px; left: 14px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-us__button { transition: none; }
}