@font-face {
  font-family: "BB Arkhip";
  src: url("/css/Arkhip-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.basis-b {
  padding: clamp(24px, 2.1vw, 34px) 24px clamp(44px, 4.5vw, 68px);
  color: #312783;
  background: #fff;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.basis-b *,
.basis-b *::before,
.basis-b *::after { box-sizing: border-box; }

.basis-b .bb-wrap { max-width: 1240px; margin: 0 auto; }
.gl-foundation-record { scroll-margin-top: 20px; }
.basis-b .bb-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 27px; }
.basis-b .bb-heading h2 { margin: 0; font: 400 26px/1.35 "BB Arkhip", sans-serif; color: #312783; }
.basis-b .bb-heading-note { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: #766d99; }

.basis-b .bb-studio { overflow: hidden; border-radius: 32px 32px 32px 0; background: #312783; color: #fff; }
.basis-b .bb-main { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.basis-b .bb-copy { position: relative; z-index: 1; padding: 38px 42px 34px; background: radial-gradient(ellipse at 0 0, #4b3f9c 0, #312783 70%); }
.basis-b .bb-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #d7d2f4; }
.basis-b .bb-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #d1c7ff; box-shadow: 0 0 0 4px #b8a8ff1a; flex-shrink: 0; }
.basis-b .bb-title { margin: 0; font: 400 clamp(35px, 3.12vw, 45px)/1.16 "BB Arkhip", sans-serif; letter-spacing: -.025em; color: #fff; }
.basis-b .bb-title > span { color: #c4b8ff; }
.basis-b .bb-description { margin: 21px 0 26px; font-size: 14px; font-weight: 400; line-height: 1.75; color: #e0dcf1; }
.basis-b .bb-founder { display: flex; align-items: center; gap: 14px; }
.basis-b .bb-logo-well { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; background: #e8e1ff; }
.basis-b .bb-logo-well > img { display: block; width: auto; height: 54px; object-fit: contain; }
.basis-b .bb-founder > div > span { display: block; margin-bottom: 5px; font-size: 10px; line-height: 1.4; letter-spacing: .04em; color: #c4bde1; }
.basis-b .bb-founder p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 400; color: #fff; }
.basis-b .bb-founder strong { font-weight: 600; }

.basis-b .bb-scene { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #17142e; }
.basis-b .bb-photo { display: block; position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: 55% 50%; }
.basis-b .bb-scene::after { position: absolute; content: ""; inset: 0; background: linear-gradient(0deg, #16102ad9 0, #16102a00 37%); pointer-events: none; }
.basis-b .bb-scene-caption { position: absolute; z-index: 1; right: 30px; bottom: 30px; left: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 13px; color: #fff; font-size: 11px; line-height: 1.5; }
.basis-b .bb-scene-label { color: #e6e0f1; }
.basis-b .bb-scene-link { display: flex; align-items: center; gap: 13px; }
.basis-b .bb-scene-line { position: relative; display: block; width: 35px; height: 1px; flex-shrink: 0; background: #d4c6fc; }
.basis-b .bb-scene-line::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid #d4c6fc; border-right: 1px solid #d4c6fc; transform: rotate(45deg); }

.basis-b .bb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.18fr); margin: 0; padding: 25px 42px 28px; background: #29216f; border-top: 1px solid #ffffff1c; }
.basis-b .bb-fact { min-width: 0; padding: 0 26px; border-left: 1px solid #ffffff26; }
.basis-b .bb-fact:first-child { padding-left: 0; border-left: 0; }
.basis-b .bb-fact:last-child { padding-right: 0; }
.basis-b .bb-fact dt { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; line-height: 1; color: #fff; }
.basis-b .bb-number { font-family: "BB Arkhip", sans-serif; font-size: 47px; letter-spacing: -.055em; }
.basis-b .bb-unit { font-size: 15px; color: #e6e0ff; }
.basis-b .bb-plus { color: #b9a7ff; }
.basis-b .bb-fact dd { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.55; color: #e3ddf7; }
.basis-b .bb-channel-name { white-space: nowrap; }
.basis-b .bb-fact-note { display: block; margin-top: 2px; color: #c5bce6; font-size: 10px; }
.basis-b .bb-video { display: block; width: 30px; height: 30px; flex: 0 0 30px; margin-left: auto; align-self: center; color: #e6e0ff; }

@media (max-width: 1100px) {
  .basis-b .bb-copy { padding: 30px; }
  .basis-b .bb-title { font-size: clamp(32px, 3.6vw, 37px); }
  .basis-b .bb-facts { padding-right: 32px; padding-left: 32px; }
  .basis-b .bb-fact { padding-right: 18px; padding-left: 18px; }
  .basis-b .bb-scene-caption { right: 24px; left: 24px; gap: 10px; font-size: 10px; }
  .basis-b .bb-scene-link { gap: 10px; }
  .basis-b .bb-scene-line { width: 23px; }
}

@media (max-width: 900px) {
  .basis-b .bb-heading { margin-bottom: 20px; }
  .basis-b .bb-heading-note { display: none; }
  .basis-b .bb-main { grid-template-columns: 1fr; }
  .basis-b .bb-title { font-size: clamp(32px, 5.2vw, 42px); }
  .basis-b .bb-scene { height: clamp(260px, 48vw, 390px); }
  .basis-b .bb-photo { object-position: 50% 50%; }
  .basis-b .bb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 25px 30px 28px; gap: 22px 0; }
  .basis-b .bb-fact { padding: 0 0 0 26px; }
  .basis-b .bb-fact:nth-child(odd) { padding-left: 0; padding-right: 26px; border-left: 0; }
  .basis-b .bb-fact:nth-child(n + 3) { padding-top: 22px; border-top: 1px solid #ffffff26; }
  .basis-b .bb-number { font-size: 44px; }
  .basis-b .bb-fact dd { font-size: 13px; }
  .basis-b .bb-fact-note { font-size: 11px; }
}

@media (max-width: 600px) {
  .basis-b { padding: 23px 16px 44px; }
  .basis-b .bb-heading h2 { font-size: clamp(19px, 5.4vw, 23px); }
  .basis-b .bb-studio { border-radius: 25px 25px 25px 0; }
  .basis-b .bb-copy { padding: 24px 26px; }
  .basis-b .bb-eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: .12em; }
  .basis-b .bb-title { font-size: clamp(27px, 7.7vw, 38px); line-height: 1.2; }
  .basis-b .bb-description { margin-top: 14px; margin-bottom: 18px; font-size: 13px; line-height: 1.7; }
  .basis-b .bb-founder { gap: 11px; }
  .basis-b .bb-logo-well { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; }
  .basis-b .bb-logo-well > img { height: 46px; }
  .basis-b .bb-founder p { font-size: 12px; }
  .basis-b .bb-founder > div > span { font-size: 10px; margin-bottom: 3px; }
  .basis-b .bb-scene { height: clamp(210px, 56vw, 310px); }
  .basis-b .bb-photo { object-position: 50% 45%; }
  .basis-b .bb-scene-caption { right: 22px; left: 22px; bottom: 18px; font-size: 11px; gap: 4px 8px; }
  .basis-b .bb-scene-link { gap: 8px; }
  .basis-b .bb-scene-line { width: 19px; }
  .basis-b .bb-facts { padding: 22px; gap: 20px 0; }
  .basis-b .bb-fact { padding: 0 0 0 20px; }
  .basis-b .bb-fact:nth-child(odd) { padding-left: 0; padding-right: 18px; border-left: 0; }
  .basis-b .bb-fact:nth-child(n + 3) { padding-top: 20px; }
  .basis-b .bb-fact dt { gap: 5px; margin-bottom: 8px; }
  .basis-b .bb-number { font-size: 40px; }
  .basis-b .bb-unit { font-size: 12px; }
  .basis-b .bb-fact dd { font-size: 12px; }
  .basis-b .bb-fact-note { margin-top: 3px; font-size: 10px; }
  .basis-b .bb-video { width: 26px; height: 26px; flex-basis: 26px; }
}

@media (max-width: 380px) {
  .basis-b .bb-copy { padding: 24px 22px; }
  .basis-b .bb-facts { padding: 20px 18px; }
  .basis-b .bb-fact { padding-left: 16px; }
  .basis-b .bb-fact:nth-child(odd) { padding-right: 16px; }
  .basis-b .bb-number { font-size: 37px; }
  .basis-b .bb-scene-caption { right: 18px; left: 18px; }
}