.about-page {
 background:
  radial-gradient(circle at 87% 11%, rgba(128, 106, 247, .07), transparent 24%),
  linear-gradient(180deg, #fafbff 0%, #fff 48%, #fafbff 100%);
}

.about-svg-defs {
 width: 0;
 height: 0;
 position: absolute;
 overflow: hidden;
}

.about-page main {
 padding: 22px 0 28px;
}

.about-page .crumb {
 min-height: 56px;
 padding: 0 26px;
 border-radius: 7px;
 display: flex;
 align-items: center;
 gap: 10px;
 color: #78839b;
 background: linear-gradient(100deg, #f0f0ff, #f4f4ff);
 font-size: 13px;
}

.about-page .crumb a {
 color: inherit;
}

.about-page .crumb b {
 color: #aeb5c7;
 font-size: 18px;
 font-weight: 400;
}

.about-hero {
 height: 360px;
 min-height: 360px;
 margin-top: 18px;
 padding: 30px clamp(28px, 3.4vw, 58px);
 border: 1px solid #e6e7f1;
 border-radius: 18px;
 position: relative;
 display: grid;
 grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr);
 align-items: center;
 overflow: hidden;
 background-color: #f5f4ff;
 background-image:
  linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 35%, rgba(255, 255, 255, 0) 58%),
  url("../images/about-hero-wide.webp");
 background-position: center, right center;
 background-size: 100% 100%, auto 100%;
 background-repeat: no-repeat, no-repeat;
 box-shadow: 0 16px 45px rgba(64, 56, 128, .05);
}

.about-hero::after,
.about-promise::after {
 content: "";
 width: 360px;
 height: 360px;
 border-radius: 50%;
 position: absolute;
 right: 22%;
 bottom: -42%;
 background: radial-gradient(circle, rgba(119, 83, 235, .13), transparent 66%);
 pointer-events: none;
}

.about-hero-copy {
 position: relative;
 z-index: 2;
 align-self: start;
}

.about-label {
 width: fit-content;
 min-height: 28px;
 padding: 0 11px;
 border: 1px solid #9d8df2;
 border-radius: 7px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #6545dc;
 background: rgba(255, 255, 255, .72);
 font-size: 12px;
 font-weight: 700;
}

.about-hero h1 {
 margin-top: 17px;
 color: #101833;
 font-size: clamp(30px, 2.1vw, 38px);
 line-height: 1.28;
 letter-spacing: -.035em;
}

.about-hero p {
 margin-top: 14px;
 color: #59657d;
 font-size: clamp(12px, .75vw, 14px);
 line-height: 1.7;
}

.about-actions {
 margin-top: 22px;
 display: flex;
 gap: 26px;
}

.about-actions .btn,
.about-promise .btn {
 min-width: 148px;
 min-height: 46px;
 border-radius: 8px;
 font-size: 14px;
}

.about-actions .outline {
 min-width: 146px;
}

.about-visual {
 min-width: 0;
 position: relative;
 overflow: hidden;
}

.about-hero-visual {
 min-height: 280px;
 align-self: stretch;
 z-index: 1;
}

.about-block {
 margin-top: 24px;
}

.about-block > h2,
.overview-copy > h2 {
 color: #151d37;
 font-size: clamp(30px, 2.25vw, 38px);
 line-height: 1.2;
}

.about-overview {
 min-height: 0;
 margin-top: 24px;
 display: grid;
 grid-template-columns: 377fr 365fr;
 gap: 14px;
}

.overview-visual {
 aspect-ratio: 1938 / 811;
 border-radius: 17px;
 background: #171547 url("../images/about-overview.webp") center / cover no-repeat;
}

.overview-copy {
 padding: 24px;
 border: 1px solid #e4e6f0;
 border-radius: 17px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 background: rgba(255, 255, 255, .9);
}

.overview-copy > h2 {
 font-size: 30px;
}

.overview-copy > p {
 max-width: 720px;
 margin-top: 10px;
 color: #56627a;
 font-size: 14px;
 line-height: 1.6;
}

.overview-stats {
 margin-top: 12px;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
}

.overview-stats article {
 min-height: 64px;
 padding: 10px 14px;
 border: 1px solid #e5e6ef;
 border-radius: 12px;
 display: flex;
 align-items: center;
 gap: 14px;
 background: linear-gradient(145deg, #fff, #fbfbff);
 box-shadow: 0 8px 24px rgba(49, 48, 102, .04);
}

.overview-stats i,
.value-grid i,
.partner-grid i {
 flex: 0 0 auto;
 display: grid;
 place-items: center;
 color: #6848e5;
 background: #f0edff;
}

.overview-stats i {
 width: 36px;
 height: 36px;
 border-radius: 50%;
}

.overview-stats svg,
.value-grid svg,
.partner-grid svg,
.advantage-main li svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.overview-stats svg {
 width: 22px;
 height: 22px;
}

.overview-stats span {
 display: block;
 color: #505d76;
 font-size: 12px;
}

.overview-stats strong {
 margin-top: 4px;
 display: block;
 color: #6946e5;
 font-size: 26px;
 line-height: 1;
}

.overview-stats small {
 color: #657189;
 font-size: 11px;
 font-weight: 500;
}

.value-grid {
 margin-top: 14px;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 20px;
}

.value-grid article {
 min-height: 130px;
 padding: 20px 24px;
 border: 1px solid #e4e6ef;
 border-radius: 16px;
 display: grid;
 grid-template-columns: 66px minmax(0, 1fr);
 align-items: center;
 gap: 18px;
 background: linear-gradient(145deg, #fff, #fafaff);
}

.value-grid i {
 width: 66px;
 height: 66px;
 border-radius: 50%;
 background: transparent;
 overflow: visible;
}

.value-grid i img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.value-grid svg {
 width: 35px;
 height: 35px;
}

.value-grid h3,
.advantage-grid h3 {
 color: #15203a;
 font-size: clamp(20px, 1.45vw, 25px);
}

.value-grid p,
.advantage-grid p {
 margin-top: 13px;
 color: #657088;
 font-size: 14px;
 line-height: 1.75;
}

.advantage-grid {
 min-height: 360px;
 margin-top: 14px;
 display: grid;
 grid-template-columns: .94fr 1.06fr;
 gap: 14px;
}

.advantage-main,
.advantage-stack > article {
 border: 1px solid #e3e5f0;
 border-radius: 17px;
 position: relative;
 overflow: hidden;
 background: linear-gradient(135deg, #fbfbff, #f1efff);
}

.advantage-main {
 padding: 24px 30px 0;
 display: flex;
 flex-direction: column;
 min-height: 352px;
}

.advantage-main > div {
 position: relative;
 z-index: 2;
 max-width: 390px;
}

.advantage-main p {
 max-width: 520px;
}

.advantage-main ul {
 margin-top: 16px;
 display: grid;
 gap: 11px;
 color: #4d5a73;
 font-size: 14px;
}

.advantage-main li {
 display: flex;
 align-items: center;
 gap: 12px;
}

.advantage-main li i {
 width: 22px;
 height: 22px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 color: #6646e4;
 background: #eee9ff;
}

.advantage-main li svg {
 width: 13px;
 height: 13px;
 stroke-width: 2.5;
}

.advantage-main-visual {
 position: absolute;
 right: -12px;
 bottom: -8px;
 width: 520px;
 height: 248px;
 min-height: 0;
 margin: 0;
 background: url("../images/about-ecosystem.webp") right bottom / contain no-repeat;
}

.advantage-stack {
 display: grid;
 grid-template-rows: repeat(3, 1fr);
 gap: 14px;
}

.advantage-stack > article {
 min-height: 108px;
 padding: 8px 26px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 250px;
 align-items: center;
}

.advantage-stack > article:nth-child(2) {
 background: linear-gradient(135deg, #fff, #f4f3ff);
}

.advantage-stack > article:nth-child(3) {
 background: linear-gradient(135deg, #fff, #efefff);
}

.advantage-stack article > div {
 position: relative;
 z-index: 2;
}

.advantage-side-visual {
 height: 100%;
 min-height: 76px;
}

.advantage-side-visual[data-image-slot="about-service"] {
 background: url("../images/about-support.webp") right center / contain no-repeat;
}

.advantage-side-visual[data-image-slot="about-technology"] {
 background: url("../images/about-technology.webp") right center / contain no-repeat;
}

.advantage-side-visual[data-image-slot="about-compliance"] {
 background: url("../images/about-compliance.webp") right center / contain no-repeat;
}

.partners-intro {
 margin-top: 10px;
 color: #59657d;
 font-size: 15px;
 line-height: 1.85;
}

.partner-grid {
 margin-top: 14px;
 display: grid;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 gap: 16px;
}

.partner-grid article {
 min-height: 158px;
 padding: 10px 16px;
 border: 1px solid #e3e5ef;
 border-radius: 14px;
 text-align: center;
 background: linear-gradient(145deg, #fff, #f9f9ff);
}

.partner-grid i {
 width: 48px;
 height: 48px;
 margin: 0 auto 10px;
 border-radius: 0;
 background: transparent;
}

.partner-grid svg {
 width: 42px;
 height: 42px;
 stroke-width: 1.7;
}

.partner-grid h3 {
 color: #27334e;
 font-size: 16px;
}

.partner-grid p {
 margin-top: 8px;
 color: #7b859a;
 font-size: 12px;
 line-height: 1.65;
}

.about-promise {
 min-height: 250px;
 margin-top: 22px;
 padding: 28px 42px;
 border: 1px solid #e3e5f0;
 border-radius: 17px;
 position: relative;
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 overflow: hidden;
 background: linear-gradient(110deg, #f6f5ff 0%, #fafaff 45%, #efefff 100%);
}

.promise-copy {
 position: relative;
 z-index: 2;
}

.about-promise .about-label {
 min-height: 30px;
 padding-inline: 12px;
 border: 0;
 background: #eae4ff;
 font-size: 12px;
}

.about-promise h2 {
 margin-top: 12px;
 color: #121a35;
 font-size: clamp(28px, 2vw, 38px);
}

.about-promise p {
 margin-top: 10px;
 color: #606c83;
 font-size: 15px;
 line-height: 1.8;
}

.about-promise .btn {
 margin-top: 15px;
 min-width: 146px;
 min-height: 44px;
}

.promise-visual {
 min-height: 180px;
 align-self: stretch;
 z-index: 1;
 background: url("../images/about-promise.webp") right center / auto 100% no-repeat;
}

.about-more {
 min-height: 44px;
 margin-top: 10px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 22px;
 color: #8992a6;
 background: #f5f6fb;
 font-size: 13px;
}

.about-more span {
 width: 43px;
 height: 1px;
 background: #a7afc0;
}

@media (max-width: 1180px) {
 .about-hero {
  height: 340px;
  min-height: 340px;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .85fr);
 }

 .about-overview {
  min-height: 0;
 }

 .overview-copy {
  padding: 24px;
 }

 .overview-stats {
  gap: 10px;
 }

 .overview-stats article {
  min-height: 64px;
  padding: 10px 12px;
 }

 .value-grid article {
  padding: 18px 22px;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 18px;
 }

 .value-grid i {
  width: 66px;
  height: 66px;
 }

 .advantage-stack > article {
  grid-template-columns: minmax(0, 1fr) 220px;
 }

 .partner-grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

@media (max-width: 820px) {
 .about-page main {
  padding-top: 14px;
 }

 .about-page .crumb {
  min-height: 56px;
  padding-inline: 18px;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
 }

 .about-hero {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin-top: 14px;
  padding: 28px 22px 20px;
  border-radius: 12px;
  grid-template-columns: 1fr;
  background:
   radial-gradient(circle at 38% 25%, rgba(255, 255, 255, .98), transparent 31%),
   linear-gradient(110deg, #f6f5ff 0%, #fbfbff 43%, #eeeeff 100%);
 }

 .about-label {
  min-height: 29px;
  padding-inline: 10px;
  font-size: 12px;
 }

 .about-hero h1 {
  margin-top: 18px;
  font-size: 26px;
  line-height: 1.3;
 }

 .about-hero p {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.75;
 }

 .about-hero p br,
 .partners-intro br,
 .about-promise p br {
  display: none;
 }

 .about-actions {
  margin-top: 24px;
  gap: 10px;
 }

 .about-actions .btn {
  min-width: 0;
  min-height: 44px;
  padding-inline: 18px;
  flex: 1;
  font-size: 14px;
 }

 .about-hero-visual {
  min-height: 0;
  aspect-ratio: 712 / 340;
  margin: 22px -22px -20px;
  background: url("../images/about-hero-mobile.webp") center / cover no-repeat;
 }

 .about-overview {
  min-height: 0;
  margin-top: 18px;
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .overview-visual {
  min-height: 0;
  aspect-ratio: 1938 / 811;
  border-radius: 12px;
  background: #171547 url("../images/about-overview.webp") center / cover no-repeat;
 }

 .overview-copy {
  padding: 24px 18px;
  border: 1px solid #e4e6f0;
  border-radius: 12px;
 }

 .about-block > h2,
 .overview-copy > h2 {
  font-size: 24px;
 }

 .overview-copy > p {
  margin-top: 16px;
  font-size: 13px;
 }

 .overview-stats {
  margin-top: 22px;
  gap: 8px;
 }

 .overview-stats article {
  min-height: 72px;
  padding: 12px;
  gap: 10px;
  border-radius: 10px;
 }

 .overview-stats i {
  width: 38px;
  height: 38px;
 }

 .overview-stats svg {
  width: 21px;
  height: 21px;
 }

 .overview-stats span {
  font-size: 11px;
 }

 .overview-stats strong {
  font-size: 22px;
 }

 .overview-stats small {
  font-size: 9px;
 }

 .about-block {
  margin-top: 22px;
 }

 .value-grid {
  margin-top: 18px;
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .value-grid article {
  min-height: 0;
  padding: 22px 18px;
  border-radius: 11px;
  grid-template-columns: 58px 1fr;
  gap: 15px;
 }

 .value-grid i {
  width: 58px;
  height: 58px;
 }

 .value-grid svg {
  width: 27px;
  height: 27px;
 }

 .value-grid h3,
 .advantage-grid h3 {
  font-size: 18px;
 }

 .value-grid p,
 .advantage-grid p {
  margin-top: 8px;
  font-size: 12px;
 }

 .advantage-grid {
  min-height: 0;
  margin-top: 18px;
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .advantage-main {
  min-height: 300px;
  padding: 26px 20px 0;
  border-radius: 12px;
 }

 .advantage-main > div {
  max-width: none;
 }

 .advantage-main ul {
  margin-top: 24px;
  gap: 12px;
  font-size: 12px;
 }

 .advantage-main-visual {
  position: relative;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 160px;
  margin: auto -20px 0;
  background-position: 72% 100%;
  background-size: auto 100%;
 }

 .advantage-stack {
  gap: 10px;
 }

 .advantage-stack > article {
  min-height: 95px;
  padding: 12px 20px;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) 150px;
 }

 .advantage-side-visual {
  min-height: 85px;
 }


 .partners-intro {
  margin-top: 14px;
  font-size: 13px;
 }

 .partner-grid {
  margin-top: 18px;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
 }

 .partner-grid article {
  min-height: 135px;
  padding: 10px 14px 12px;
  border-radius: 11px;
 }

 .partner-grid i {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
 }

 .partner-grid svg {
  width: 40px;
  height: 40px;
 }

 .partner-grid h3 {
  font-size: 14px;
 }

 .partner-grid p {
  margin-top: 9px;
  font-size: 11px;
 }

 .about-promise {
  min-height: 0;
  margin-top: 28px;
  padding: 24px 20px 18px;
  border-radius: 12px;
  grid-template-columns: 1fr;
 }

 .promise-visual {
  min-height: 105px;
 }

 .about-promise h2 {
  margin-top: 16px;
  font-size: 25px;
  line-height: 1.3;
 }

 .about-promise p {
  margin-top: 14px;
  font-size: 12px;
 }

 .about-promise .btn {
  min-height: 44px;
  margin-top: 20px;
  font-size: 14px;
 }

 .about-more {
  min-height: 48px;
  margin-top: 12px;
  gap: 12px;
  font-size: 11px;
 }

 .about-more span {
  width: 28px;
 }
}

@media (max-width: 390px) {
 .about-hero h1 {
  font-size: 24px;
 }

 .about-actions {
  flex-direction: column;
 }
}

@media (min-width: 821px) {
 .about-label {
  min-height: 28px;
  padding-inline: 12px;
  font-size: 12px;
  line-height: 1;
 }

 .about-hero h1 {
  margin-top: 14px;
  font-size: clamp(34px, 2.55vw, 44px);
  line-height: 1.18;
  letter-spacing: -.025em;
 }

 .about-hero p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.72;
 }

 .about-block > h2,
 .overview-copy > h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
 }

 .overview-copy > h2 {
  font-size: 32px;
 }

 .overview-copy > p,
 .partners-intro,
 .about-promise p {
  font-size: 15px;
  line-height: 1.72;
 }

 .overview-stats span {
  font-size: 13px;
 }

 .overview-stats strong {
  font-size: 28px;
 }

 .overview-stats small {
  font-size: 12px;
 }

 .value-grid h3,
 .advantage-grid h3 {
  font-size: 21px;
  line-height: 1.25;
 }

 .value-grid p,
 .advantage-grid p {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.66;
 }

 .advantage-main ul {
  font-size: 15px;
  line-height: 1.55;
 }

 .partner-grid h3 {
  font-size: 17px;
  line-height: 1.25;
 }

 .partner-grid p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
 }

 .about-promise h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
 }

 .about-more {
  min-height: 56px;
  margin-top: 18px;
  gap: 24px;
  color: #6f7890;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
 }

 .about-more p {
  margin: 0;
 }
}

@media (max-width: 820px) {
 .about-hero h1 {
  font-size: 28px;
  line-height: 1.22;
 }

 .about-hero p {
  font-size: 12px;
  line-height: 1.7;
 }

 .about-block > h2,
 .overview-copy > h2 {
  font-size: 25px;
  line-height: 1.24;
 }

 .overview-copy > p,
 .partners-intro,
 .about-promise p {
  font-size: 12px;
  line-height: 1.7;
 }

 .value-grid h3,
 .advantage-grid h3 {
  font-size: 17px;
  line-height: 1.25;
 }

 .value-grid p,
 .advantage-grid p,
 .advantage-main ul {
  font-size: 12px;
  line-height: 1.6;
 }

 .partner-grid h3 {
  font-size: 15px;
  line-height: 1.25;
 }

 .partner-grid p {
  font-size: 11px;
  line-height: 1.58;
 }

 .about-promise h2 {
  font-size: 25px;
  line-height: 1.28;
 }

 .about-more {
  min-height: 48px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
 }
}

@media (max-width: 390px) {
 .about-hero h1 {
  font-size: 24px;
 }
}