html {
  box-sizing: border-box;
  font-size: 100%
}

*,
::before,
::after {
  box-sizing: inherit
}

html,
body {
  margin: 0
}

body {
  font-family: 'Roboto Mono', monospace;
  -webkit-text-size-adjust: 100%;
  background-color: #1b1526;
  color: #D4CBE2;
  overflow-x: hidden
}

.topbar {
  background: linear-gradient(135deg, #1b1526 0%, #231c35 60%, #2a2040 100%);
  border-bottom: 1px solid #8871b92e;
  padding: 24px 0 0
}

.topbar-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 36px
}

.brandrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px
}

.logobox {
  width: 54px;
  height: 54px;
  border: 2px solid #8871B9;
  border-radius: 8px;
  background-color: #F7F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  flex-shrink: 0;
  overflow: hidden
}

.logobox img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block
}

.brandname {
  font-family: 'Roboto Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F7F4F8;
  text-decoration: none
}

.navstrip {
  border-top: 1px solid #8871b924;
  background: #8871b90f
}

.navstrip-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.navstrip-inner a {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #D4CBE2;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 2px;
  display: inline-block;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color .25s ease-in-out, background-color .28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative
}

.navstrip-inner a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background-color: #8871B9;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .25s ease-in-out
}

.navstrip-inner a:hover {
  color: #F7F4F8;
  background-color: #8871b91a
}

.navstrip-inner a:hover::after {
  transform: scaleX(1)
}

.navstrip-inner a:focus-visible {
  outline: 2px solid #8871B9;
  outline-offset: 2px;
  border-radius: 2px
}

.navstrip-inner a.active {
  color: #F7F4F8;
  font-weight: 700
}

.pgfooter {
  background: linear-gradient(180deg, #1b1526 0%, #160f22 100%);
  border-top: 1px solid #8871b92e;
  padding: 72px 0 0
}

.pgfooter-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 36px
}

.pgfooter-body {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #8871b91f
}

.pgfooter-about {
  flex: 1 1 320px
}

.pgfooter-about p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 12px 0 0;
  max-width: 400px
}

.pgfooter-brand {
  font-family: 'Roboto Mono', monospace;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #F7F4F8;
  letter-spacing: -.02em
}

.pgfooter-links {
  flex: 0 1 200px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.pgfooter-links-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #8871B9;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px
}

.pgfooter-links a {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  text-decoration: none;
  padding: 6px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color .26s ease-in-out;
  border-bottom: 1px solid transparent
}

.pgfooter-links a:hover {
  color: #F7F4F8;
  border-bottom-color: #8871b94d
}

.pgfooter-links a:focus-visible {
  outline: 2px solid #8871B9;
  outline-offset: 2px;
  border-radius: 2px
}

.pgfooter-contact {
  flex: 0 1 220px
}

.pgfooter-contact-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #8871B9;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px
}

.pgfooter-contact a {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  text-decoration: none;
  display: block;
  transition: color .26s ease-in-out
}

.pgfooter-contact a:hover {
  color: #F7F4F8
}

.pgfooter-contact a:focus-visible {
  outline: 2px solid #8871B9;
  outline-offset: 2px;
  border-radius: 2px
}

.pgfooter-contact span {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  display: block
}

.pgfooter-bottom {
  padding: 36px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.pgfooter-logostrip {
  display: flex;
  align-items: center;
  gap: 12px
}

.pgfooter-logobox {
  width: 50px;
  height: 50px;
  border: 2px solid #8871b980;
  border-radius: 8px;
  background-color: #F7F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  overflow: hidden
}

.pgfooter-logobox img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block
}

.pgfooter-copy {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe28c
}

.cookiepop {
  display: none;
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 320px;
  background: #231c35;
  border: 1px solid #8871b959;
  border-radius: 16px;
  padding: 24px;
  z-index: 4000;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.cookiepop-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #F7F4F8;
  margin: 0 0 12px
}

.cookiepop-desc {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 24px
}

.cookiepop-actions {
  display: flex;
  gap: 24px;
  align-items: center
}

.cookiepop-accept {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #1b1526;
  background-color: #8871B9;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  min-height: 44px;
  text-decoration: underline;
  transition: background-color .27s cubic-bezier(0.4, 0, 0.2, 1), color .27s cubic-bezier(0.4, 0, 0.2, 1)
}

.cookiepop-accept:hover {
  background-color: #D4CBE2;
  color: #1b1526
}

.cookiepop-accept:focus-visible {
  outline: 2px solid #F7F4F8;
  outline-offset: 2px
}

.cookiepop-decline {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #D4CBE2;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  min-height: 44px;
  transition: color .25s ease-in-out
}

.cookiepop-decline:hover {
  color: #F7F4F8
}

.cookiepop-decline:focus-visible {
  outline: 2px solid #8871B9;
  outline-offset: 2px;
  border-radius: 2px
}

@media (max-width: 768px) {
  .topbar-inner {
    padding: 0 24px
  }

  .navstrip-inner {
    padding: 0 24px
  }

  .navstrip-inner a {
    padding: 12px
  }

  .pgfooter-inner {
    padding: 0 24px
  }

  .pgfooter-body {
    flex-direction: column;
    gap: 36px
  }

  .pgfooter-links {
    flex: 1 1 auto
  }

  .pgfooter-contact {
    flex: 1 1 auto
  }

  .pgfooter-bottom {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width: 390px) {
  .topbar-inner {
    padding: 0 12px
  }

  .navstrip-inner {
    padding: 0 12px;
    gap: 0
  }

  .navstrip-inner a {
    padding: 12px 6px;
    font-size: 14px
  }

  .brandname {
    font-size: 21px
  }

  .pgfooter-inner {
    padding: 0 12px
  }

  .cookiepop {
    width: calc(100% - 24px);
    top: 12px
  }
}

.policy-rr-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 36px;
  background: #1a0f2e;
  color: #D4CBE2
}

.policy-rr-page p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin-bottom: 24px
}

.policy-rr-page ul,
.policy-rr-page ol {
  margin: 0 0 24px;
  padding-left: 36px
}

.policy-rr-page ul {
  list-style-type: disc
}

.policy-rr-page ol {
  list-style-type: decimal
}

.policy-rr-page li {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin-bottom: 6px;
  padding-left: 6px
}

.policy-rr-page li::marker {
  color: #8871B9
}

.policy-rr-page strong,
.policy-rr-page b {
  color: #F7F4F8;
  font-weight: 700;
  letter-spacing: -.01em
}

.policy-rr-page hr {
  border: none;
  border-top: 1px solid #8871b938;
  margin: 36px 0;
  box-shadow: 0 2px 3px 0 #8871b90d
}

.policy-rr-page div {
  margin-bottom: 24px
}

@media (max-width: 768px) {
  .policy-rr-page {
    padding: 36px 24px
  }

  .policy-rr-page ul,
  .policy-rr-page ol {
    padding-left: 24px
  }
}

@media (max-width: 390px) {
  .policy-rr-page {
    padding: 24px 12px
  }

  .policy-rr-page p,
  .policy-rr-page li {
    font-size: 14px;
    line-height: 1.6
  }

  .policy-rr-page ul,
  .policy-rr-page ol {
    padding-left: 24px
  }
}

.wbdet {
  background: #120d1e;
  color: #D4CBE2;
  max-width: 100%;
  overflow-x: hidden
}

.wbdet .pg-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px
}

.wbdet .topbar {
  background: linear-gradient(135deg, #1a1030 0%, #0e0818 60%, #1e1035 100%);
  border-bottom: 2px dotted #8871b940;
  padding: 12px 0
}

.wbdet .topbar .pg-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.wbdet .breadnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
  flex-wrap: wrap
}

.wbdet .breadnav a {
  color: #8871B9;
  text-decoration: none;
  transition: color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.wbdet .breadnav a:hover {
  color: #D4CBE2
}

.wbdet .breadnav .sep {
  color: #8871b966;
  font-size: 14px
}

.wbdet .breadnav .cur {
  color: #d4cbe299
}

.wbdet .errbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe28c;
  text-decoration: none;
  border: 1px solid #8871b933;
  border-radius: 8px;
  padding: 6px 12px;
  transition: color .25s ease-in-out, border-color .25s ease-in-out, background .35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap
}

.wbdet .errbtn:hover {
  color: #D4CBE2;
  border-color: #8871b980;
  background: #8871b914
}

.wbdet .errbtn svg {
  flex-shrink: 0
}

.wbdet .titleband {
  position: relative;
  background: linear-gradient(118deg, #1e1040 0%, #2a1555 40%, #160c30 100%);
  padding: 36px 0;
  overflow: hidden
}

.wbdet .titleband::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #8871B9 40%, #D4CBE2 60%, transparent 100%);
  animation: linedrw .9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: left center
}

@keyframes linedrw {
  from {
    transform: scaleX(0);
    opacity: 0
  }

  to {
    transform: scaleX(1);
    opacity: 1
  }
}

.wbdet .titleband .pg-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 36px
}

.wbdet .titletxt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.wbdet .titletxt .metarow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.wbdet .titletxt .metarow .badge {
  font-size: 14px;
  line-height: 1.6;
  background: #8871b92e;
  color: #8871B9;
  border-radius: 8px;
  padding: 2px 12px;
  letter-spacing: .04em
}

.wbdet .titletxt .metarow .metaitem {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe280;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px
}

.wbdet .titletxt .metarow .metaitem svg {
  opacity: .6
}

.wbdet .titletxt h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0
}

.wbdet .titletxt h1 .acc {
  color: #8871B9
}

.wbdet .titletxt .priceline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.wbdet .titletxt .priceval {
  font-size: 28px;
  line-height: 1.2;
  color: #D4CBE2;
  letter-spacing: -.01em
}

.wbdet .titletxt .pricelabel {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe280
}

.wbdet .titletxt .enrollbtn {
  display: inline-block;
  background: #8871B9;
  color: #F7F4F8;
  border-radius: 16px;
  padding: 12px 36px;
  font-size: 21px;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 5px 25px 0 #8871b91c;
  align-self: flex-start;
  margin-top: 6px
}

.wbdet .titletxt .enrollbtn:hover {
  background: #7560a8;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.wbdet .titletxt .enrollbtn:focus {
  outline: 2px solid #D4CBE2;
  outline-offset: 2px
}

.wbdet .imgside {
  flex: 0 0 340px;
  max-width: 340px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 12px 52px 0 #8871b921;
  position: relative
}

.wbdet .imgside::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, #120d1e8c 0%, transparent 100%);
  pointer-events: none
}

.wbdet .imgside img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover
}

.wbdet .bodysec {
  padding: 72px 0 36px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #8871b912 0%, transparent 70%), #120d1e
}

.wbdet .bodysec .pg-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 72px
}

.wbdet .descol {
  flex: 1 1 0;
  min-width: 0
}

.wbdet .descol .seclabel {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
  text-decoration: underline;
  text-decoration-color: #8871b959;
  text-underline-offset: 4px
}

.wbdet .descol h2 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  letter-spacing: -.01em
}

.wbdet .descol .dropcap::first-letter {
  float: left;
  font-size: 70px;
  line-height: .8;
  color: #8871B9;
  margin-right: 6px;
  margin-top: 6px
}

.wbdet .descol .descbody {
  font-size: 21px;
  line-height: 1.9;
  color: #D4CBE2
}

.wbdet .descol .descbody p {
  margin: 0 0 24px
}

.wbdet .descol .descbody p:last-child {
  margin-bottom: 0
}

.wbdet .descol .descbody h2 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 36px 0 12px
}

.wbdet .descol .descbody h3 {
  font-size: 21px;
  line-height: 1.2;
  color: #D4CBE2;
  margin: 24px 0 12px
}

.wbdet .descol .descbody ul,
.wbdet .descol .descbody ol {
  padding-left: 24px;
  margin: 0 0 24px
}

.wbdet .descol .descbody li {
  font-size: 21px;
  line-height: 1.9;
  margin-bottom: 6px
}

.wbdet .descol .descbody blockquote {
  border-top: 2px dotted #8871b966;
  border-bottom: 2px dotted #8871b966;
  margin: 24px 0;
  padding: 24px;
  background: #8871b90f;
  border-radius: 8px
}

.wbdet .descol .descbody blockquote p {
  font-size: 21px;
  line-height: 1.6;
  color: #F7F4F8;
  font-style: italic;
  margin: 0 0 6px
}

.wbdet .descol .descbody cite {
  font-size: 14px;
  color: #d4cbe299;
  font-style: normal
}

.wbdet .descol .descbody strong {
  color: #F7F4F8
}

.wbdet .descol .descbody small {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe299
}

.wbdet .descol .descbody figure {
  margin: 24px 0
}

.wbdet .descol .descbody figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe28c;
  margin-top: 6px
}

.wbdet .descol .descbody details {
  background: #8871b912;
  border-radius: 8px;
  padding: 12px 24px;
  margin-bottom: 12px
}

.wbdet .descol .descbody summary {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  cursor: pointer
}

.wbdet .progsec {
  padding: 36px 0 72px;
  background: #160c2e;
  position: relative
}

.wbdet .progsec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #8871b94d 0px, #8871b94d 4px, transparent 4px, transparent 10px)
}

.wbdet .progsec::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #d4cbe226 0px, #d4cbe226 4px, transparent 4px, transparent 10px)
}

.wbdet .progsec .pg-wrap {
  display: flex;
  flex-direction: column;
  gap: 36px
}

.wbdet .proghd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px
}

.wbdet .proghd .seclabel {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: #8871b959;
  text-underline-offset: 4px
}

.wbdet .proghd h3 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0;
  letter-spacing: -.01em
}

.wbdet .progbody {
  font-size: 21px;
  line-height: 1.9;
  color: #D4CBE2
}

.wbdet .progbody p {
  margin: 0 0 24px
}

.wbdet .progbody p:last-child {
  margin-bottom: 0
}

.wbdet .progbody h2 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 24px 0 12px
}

.wbdet .progbody h3 {
  font-size: 21px;
  line-height: 1.2;
  color: #D4CBE2;
  margin: 24px 0 12px
}

.wbdet .progbody ul,
.wbdet .progbody ol {
  padding-left: 24px;
  margin: 0 0 24px
}

.wbdet .progbody li {
  font-size: 21px;
  line-height: 1.9;
  margin-bottom: 6px
}

.wbdet .progbody strong {
  color: #F7F4F8
}

.wbdet .progbody small {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe299
}

.wbdet .progbody figure {
  margin: 24px 0
}

.wbdet .progbody figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe28c;
  margin-top: 6px
}

.wbdet .progbody details {
  background: #8871b912;
  border-radius: 8px;
  padding: 12px 24px;
  margin-bottom: 12px
}

.wbdet .progbody summary {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  cursor: pointer
}

.wbdet .bottombar {
  background: #0e0818;
  padding: 24px 0;
  border-top: 1px solid #8871b91f
}

.wbdet .bottombar .pg-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.wbdet .toptopbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe28c;
  text-decoration: none;
  border: 1px solid #8871b933;
  border-radius: 8px;
  padding: 6px 12px;
  transition: color .25s ease-in-out, border-color .35s cubic-bezier(0.4, 0, 0.2, 1), background .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.wbdet .toptopbtn:hover {
  color: #D4CBE2;
  border-color: #8871b980;
  background: #8871b914
}

.wbdet .toptopbtn svg {
  transition: transform .28s ease-in-out
}

.wbdet .toptopbtn:hover svg {
  transform: translateY(-2px)
}

.wbdet .bottomlinks {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap
}

.wbdet .bottomlinks a {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe273;
  text-decoration: none;
  transition: color .25s ease-in-out
}

.wbdet .bottomlinks a:hover {
  color: #8871B9
}

.wbdet .spiral {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: .06;
  pointer-events: none
}

.wbdet .spiral svg {
  width: 100%;
  height: 100%
}

.wbdet .statsrow {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px
}

.wbdet .statcard {
  background: #8871b914;
  border: 1px solid #8871b926;
  border-radius: 16px;
  padding: 24px;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  transition: background .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeup .5s ease-in-out both
}

.wbdet .statcard:nth-child(1) {
  animation-delay: .1s
}

.wbdet .statcard:nth-child(2) {
  animation-delay: .2s
}

.wbdet .statcard:nth-child(3) {
  animation-delay: .3s
}

.wbdet .statcard:nth-child(4) {
  animation-delay: .4s
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.wbdet .statcard:hover {
  background: #8871b921;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.wbdet .statcard .statlabel {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe280
}

.wbdet .statcard .statval {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  letter-spacing: -.02em
}

.wbdet .statcard .statval .acc {
  color: #8871B9
}

@media (max-width: 768px) {
  .wbdet .titleband .pg-wrap {
    flex-direction: column;
    gap: 24px
  }

  .wbdet .imgside {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%
  }

  .wbdet .imgside img {
    height: 180px
  }

  .wbdet .bodysec .pg-wrap {
    flex-direction: column;
    gap: 36px
  }

  .wbdet .statsrow {
    gap: 12px
  }

  .wbdet .bottombar .pg-wrap {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width: 390px) {
  .wbdet .titletxt h1 {
    font-size: 21px
  }

  .wbdet .titletxt .priceval {
    font-size: 21px
  }

  .wbdet .titletxt .enrollbtn {
    font-size: 14px;
    padding: 12px 24px
  }

  .wbdet .statcard .statval {
    font-size: 21px
  }

  .wbdet .descol .descbody {
    font-size: 14px
  }

  .wbdet .progbody {
    font-size: 14px
  }
}

@media (min-width: 1280px) {
  .wbdet .imgside {
    flex: 0 0 400px;
    max-width: 400px
  }

  .wbdet .imgside img {
    height: 260px
  }
}

.consult {
  background: #120e1a;
  color: #D4CBE2;
  overflow-x: clip
}

.consult .pgwrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px
}

.consult .titlesec {
  padding: 72px 24px 36px;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 36px;
  position: relative
}

.consult .titlesec::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #8871B9 0%, transparent 100%);
  border-radius: 2px
}

.consult .titleleft {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.consult .titleright {
  flex: 0 0 38%;
  position: relative
}

.consult .imgmask {
  width: 100%;
  aspect-ratio: 4/5;
  clip-path: polygon(12% 0%, 100% 0%, 100% 88%, 88% 100%, 0% 100%, 0% 12%);
  overflow: hidden;
  border-radius: 8px;
  filter: grayscale(1) contrast(1.15);
  box-shadow: 2px 12px 52px 0 #8871b921
}

.consult .imgmask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.consult .bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none
}

.consult .bracket.tl {
  top: -6px;
  left: -6px;
  border-top: 2px solid #8871B9;
  border-left: 2px solid #8871B9;
  border-radius: 2px 0 0 0
}

.consult .bracket.br {
  bottom: -6px;
  right: -6px;
  border-bottom: 2px solid #8871B9;
  border-right: 2px solid #8871B9;
  border-radius: 0 0 2px 0
}

.consult .tagline {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  letter-spacing: .08em;
  text-transform: uppercase
}

.consult .titlesec h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F7F4F8;
  margin: 0
}

.consult .titlesec h1 .ac {
  color: #8871B9
}

.consult .titlesec h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #D4CBE2;
  margin: 0
}

.consult .titledesc {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0;
  max-width: 480px
}

.consult .titledesc::first-letter {
  font-size: 42px;
  line-height: 1;
  float: left;
  margin-right: 6px;
  color: #8871B9;
  font-weight: 700
}

.consult .titlebtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #8871B9;
  color: #F7F4F8;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start
}

.consult .titlebtn:hover {
  background: #9d87cc;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.consult .titlebtn:focus {
  outline: 2px solid #8871B9;
  outline-offset: 2px
}

.consult .titlebtn:active {
  background: #7560a8
}

@keyframes borderglow {
  from {
    opacity: 0;
    box-shadow: 0 0 0 0 #8871b900
  }

  to {
    opacity: 1;
    box-shadow: 2px 2px 3px 0 #8871b90d 2px 5px 25px 0 #8871b91c
  }
}

.consult .titlesec .titleright {
  animation: borderglow .38s cubic-bezier(0.4, 0, 0.2, 1) .1s both
}

.consult .divband1 {
  height: 36px;
  background: linear-gradient(180deg, #8871B9 0%, transparent 100%);
  opacity: .12
}

.consult .offsec {
  background: #1a1228;
  padding: 72px 24px;
  position: relative
}

.consult .offsec::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, #8871B9 50%, transparent 100%);
  border-radius: 2px
}

.consult .offinner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start
}

.consult .offheadcol {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.consult .offheadcol h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #8871B9;
  display: inline-block
}

.consult .offheadcol h3 .ac {
  color: #8871B9
}

.consult .offheadcol p {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.consult .offheadcol p::first-letter {
  font-size: 42px;
  line-height: 1;
  float: left;
  margin-right: 6px;
  color: #8871B9;
  font-weight: 700
}

.consult .offcards {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.consult .offcard {
  background: #231840;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1)
}

.consult .offcard:hover {
  box-shadow: 2px 12px 52px 0 #8871b921
}

.consult .offnum {
  font-size: 28px;
  line-height: 1.2;
  color: #8871B9;
  font-weight: 700;
  flex-shrink: 0;
  width: 36px
}

.consult .offcardtext {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.consult .offcardtext h4 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #8871b94d
}

.consult .offcardtext p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.consult .divband2 {
  height: 36px;
  background: linear-gradient(180deg, #D4CBE2 0%, transparent 100%);
  opacity: .06
}

.consult .processsec {
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto;
  position: relative
}

.consult .processsec::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, #D4CBE2 100%);
  opacity: .18;
  border-radius: 2px
}

.consult .proctop {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 36px;
  margin-bottom: 36px
}

.consult .procheading {
  flex: 0 0 auto
}

.consult .procheading h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #8871B9
}

.consult .procheading h3 .ac {
  color: #8871B9
}

.consult .procdesc {
  flex: 1;
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.consult .procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.consult .procstep {
  background: linear-gradient(160deg, #1e1530 0%, #12102a 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .36s ease-in-out
}

.consult .procstep:hover {
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.consult .procstepnum {
  font-size: 70px;
  line-height: 1.2;
  color: #8871b92e;
  font-weight: 700;
  letter-spacing: -.04em;
  margin: 0
}

.consult .procstep h5 {
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #8871b940;
  font-weight: 600
}

.consult .procstep p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.consult .procimgrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
  align-items: center
}

.consult .procimgwrap {
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16/9;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.consult .procimgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.4) contrast(1.1)
}

.consult .procquote {
  background: #1e1530;
  border-radius: 30px;
  padding: 36px;
  box-shadow: 2px 12px 52px 0 #8871b921;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.consult .procquote blockquote {
  font-size: 21px;
  line-height: 1.6;
  color: #F7F4F8;
  margin: 0;
  font-style: italic
}

.consult .procquote cite {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  font-style: normal
}

.consult .divband3 {
  height: 36px;
  background: linear-gradient(180deg, #8871B9 0%, transparent 100%);
  opacity: .09
}

.consult .faqsec {
  background: #160f22;
  padding: 72px 24px;
  position: relative
}

.consult .faqsec::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #8871B9 0%, transparent 60%);
  border-radius: 2px;
  opacity: .5
}

.consult .faqinner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  align-items: start
}

.consult .faqheadcol {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px
}

.consult .faqheadcol h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #8871B9
}

.consult .faqheadcol h3 .ac {
  color: #8871B9
}

.consult .faqheadcol p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.consult .faqimgwrap {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3/4;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  filter: grayscale(0.6) contrast(1.08)
}

.consult .faqimgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.consult .faqlist {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.consult .faqitem {
  background: #1e1530;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  transition: box-shadow .26s ease-in-out
}

.consult .faqitem:hover {
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.consult .faqitem details {
  width: 100%
}

.consult .faqitem summary {
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  padding: 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  transition: color .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.consult .faqitem summary::-webkit-details-marker {
  display: none
}

.consult .faqitem summary:hover {
  color: #8871B9
}

.consult .faqitem summary:focus {
  outline: 2px solid #8871B9;
  outline-offset: -2px;
  border-radius: 8px
}

.consult .faqarrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-right: 2px solid #8871B9;
  border-bottom: 2px solid #8871B9;
  transform: rotate(45deg);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -4px
}

.consult .faqitem details[open] .faqarrow {
  transform: rotate(-135deg);
  margin-top: 4px
}

.consult .faqbody {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  padding: 0 24px 24px;
  margin: 0
}

@media (max-width: 1280px) {
  .consult .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .consult .titlesec {
    flex-direction: column;
    padding: 36px 24px 24px
  }

  .consult .titlesec h1 {
    font-size: 28px
  }

  .consult .titlesec h2 {
    font-size: 21px
  }

  .consult .titleleft {
    flex: 1 1 100%
  }

  .consult .titleright {
    flex: 0 0 100%;
    max-width: 320px
  }

  .consult .offinner {
    grid-template-columns: 1fr
  }

  .consult .procgrid {
    grid-template-columns: 1fr
  }

  .consult .proctop {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .consult .procimgrow {
    grid-template-columns: 1fr
  }

  .consult .faqinner {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .consult .faqimgwrap {
    aspect-ratio: 16/9;
    max-height: 220px
  }
}

@media (max-width: 390px) {
  .consult .titlesec h1 {
    font-size: 28px
  }

  .consult .titledesc {
    font-size: 14px
  }

  .consult .titlebtn {
    padding: 12px 24px
  }

  .consult .offsec,
  .consult .faqsec {
    padding: 36px 12px
  }

  .consult .processsec {
    padding: 36px 12px
  }

  .consult .procquote {
    padding: 24px
  }
}

.ctus {
  background: #0e0b14;
  color: #D4CBE2;
  padding: 0;
  overflow-x: clip
}

.ctus .titlearea {
  position: relative;
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  max-width: 1140px;
  margin: 0 auto
}

.ctus .titlearea::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 70% 80% at 8% 12%, #8871b938 0%, transparent 68%);
  pointer-events: none
}

.ctus .cornerdeco {
  position: absolute;
  pointer-events: none
}

.ctus .cornerdeco.tl {
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-top: 1px solid #8871b973;
  border-left: 1px solid #8871b973;
  border-radius: 2px 0 0 0
}

.ctus .cornerdeco.tr {
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-top: 1px solid #8871b973;
  border-right: 1px solid #8871b973;
  border-radius: 0 2px 0 0
}

.ctus .titlelabel {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8871B9;
  margin-bottom: 12px;
  position: relative
}

.ctus .titlemain {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 24px;
  position: relative;
  max-width: 700px
}

.ctus .titlemain .acc {
  color: #8871B9
}

.ctus .titledesc {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  max-width: 520px;
  margin: 0 0 36px;
  position: relative
}

.ctus .titledesc::first-letter {
  font-size: 28px;
  line-height: 1.2;
  float: left;
  margin-right: 6px;
  color: #8871B9;
  font-weight: 700
}

.ctus .metricsrow {
  display: flex;
  flex-direction: row;
  gap: 36px;
  position: relative
}

.ctus .metricitem {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ctus .metricnum {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  letter-spacing: -.01em;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px
}

.ctus .arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0
}

.ctus .arrow::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 10px;
  height: 2px;
  background: #8871B9;
  transform: rotate(-45deg);
  transform-origin: left center
}

.ctus .arrow::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 10px;
  height: 2px;
  background: #8871B9;
  transform: rotate(45deg);
  transform-origin: left center
}

.ctus .metriclbl {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe299
}

.ctus .contactbody {
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto
}

.ctus .twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start
}

.ctus .infoside {
  display: flex;
  flex-direction: column;
  gap: 36px
}

.ctus .infotag {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8871B9;
  margin-bottom: 6px
}

.ctus .infohead {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #8871b94d;
  text-decoration: none
}

.ctus .infopara {
  font-size: 14px;
  line-height: 1.9;
  color: #d4cbe2cc;
  margin: 0
}

.ctus .detailslist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0
}

.ctus .detailslist li {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ctus .detaillabel {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe280;
  letter-spacing: .06em;
  text-transform: uppercase
}

.ctus .detailval {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  text-decoration: none;
  transition: color .28s ease-in-out
}

.ctus .detailval:hover {
  color: #8871B9
}

.ctus .detailadr {
  font-size: 21px;
  line-height: 1.6;
  color: #F7F4F8
}

.ctus .linedrawwrap {
  position: relative;
  padding: 24px 0
}

.ctus .linedraw {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #8871B9 0%, transparent 100%);
  transform-origin: left center;
  animation: drawline .9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: scaleX(0)
}

@keyframes drawline {
  to {
    transform: scaleX(1)
  }
}

.ctus .linedraw2 {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, #8871b966 0%, transparent 100%);
  transform-origin: left center;
  animation: drawline 1.2s .35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: scaleX(0);
  margin-top: 6px
}

.ctus .formside {
  position: relative
}

.ctus .formcard {
  background: #8871b90f;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid #8871b92e;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.ctus .formhead {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #8871b940
}

.ctus .fieldgrp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px
}

.ctus .fieldlbl {
  font-size: 14px;
  line-height: 1.6;
  color: #d4cbe2b3;
  letter-spacing: .04em
}

.ctus .fieldinput {
  background: #0e0b14b3;
  border: 1px solid #8871b940;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .28s ease-in-out, box-shadow .28s ease-in-out;
  outline: none;
  appearance: none;
  -webkit-appearance: none
}

.ctus .fieldinput::placeholder {
  color: #d4cbe247
}

.ctus .fieldinput:focus {
  border-color: #8871B9;
  box-shadow: 2px 2px 3px 0 #8871b90d 0 0 0 3px #8871b924
}

.ctus .fieldselect {
  background: #0e0b14b3;
  border: 1px solid #8871b940;
  border-radius: 8px;
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .28s ease-in-out, box-shadow .28s ease-in-out;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238871B9' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center
}

.ctus .fieldselect:focus {
  border-color: #8871B9;
  box-shadow: 2px 2px 3px 0 #8871b90d 0 0 0 3px #8871b924
}

.ctus .fieldselect option {
  background: #1a1128;
  color: #F7F4F8
}

.ctus .checkrow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px
}

.ctus .checkboxinput {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: #8871B9;
  cursor: pointer;
  border-radius: 2px
}

.ctus .checktext {
  font-size: 14px;
  line-height: 1.9;
  color: #d4cbe2b3
}

.ctus .checktext a {
  color: #8871B9;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease-in-out
}

.ctus .checktext a:hover {
  color: #D4CBE2
}

.ctus .submitbtn {
  background: #8871B9;
  color: #F7F4F8;
  border: none;
  border-radius: 30px;
  padding: 16px 36px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: background .38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 5px 25px 0 #8871b91c;
  position: relative;
  overflow: hidden
}

.ctus .submitbtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 6px;
  height: 100%;
  background: #f7f4f82e;
  transition: left .4s cubic-bezier(0.4, 0, 0.2, 1)
}

.ctus .submitbtn:hover::before {
  left: 110%
}

.ctus .submitbtn:hover {
  background: #9d88cc;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.ctus .submitbtn:focus {
  outline: 3px solid #8871b980;
  outline-offset: 3px
}

.ctus .submitbtn:active {
  background: #7560a8
}

@keyframes shakebtn {

  0%,
  100% {
    transform: translateX(0)
  }

  20% {
    transform: translateX(-6px)
  }

  40% {
    transform: translateX(6px)
  }

  60% {
    transform: translateX(-4px)
  }

  80% {
    transform: translateX(4px)
  }
}

.ctus .submitbtn:invalid {
  animation: shakebtn .4s cubic-bezier(0.4, 0, 0.2, 1)
}

.ctus .stripeeffect {
  position: relative;
  overflow: hidden
}

.ctus .stripeeffect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #8871B9 0%, #8871b94d 100%);
  transition: left .35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none
}

.ctus .stripeeffect:hover::after {
  left: 0
}

@media (max-width: 1280px) {
  .ctus .titlemain {
    font-size: 70px
  }

  .ctus .twocol {
    gap: 36px
  }
}

@media (max-width: 768px) {
  .ctus .titlemain {
    font-size: 28px
  }

  .ctus .titledesc {
    font-size: 14px
  }

  .ctus .metricsrow {
    flex-direction: column;
    gap: 24px
  }

  .ctus .twocol {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .ctus .titlearea {
    padding: 36px 24px
  }

  .ctus .contactbody {
    padding: 36px 24px
  }
}

@media (max-width: 390px) {
  .ctus .titlemain {
    font-size: 28px
  }

  .ctus .formcard {
    padding: 24px
  }

  .ctus .metricsrow {
    gap: 24px
  }
}

.wbnrs {
  background: #120e1a;
  min-height: 100vh;
  overflow-x: hidden
}

.wbnrs .titband {
  background: #1a1228;
  padding: 36px 24px;
  position: relative
}

.wbnrs .titband::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, #8871b921 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 80% 30%, #d4cbe212 0%, transparent 65%);
  pointer-events: none
}

.wbnrs .titband::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 60px;
  width: 200px;
  height: 80px;
  border: 1px solid #8871b92e;
  border-radius: 46px;
  transform: rotate(-12deg);
  pointer-events: none
}

.wbnrs .titrow {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 36px
}

.wbnrs .titlabel {
  font-size: 14px;
  color: #8871B9;
  letter-spacing: .08em;
  margin-bottom: 12px;
  display: block
}

.wbnrs .tithead {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F7F4F8;
  margin: 0
}

.wbnrs .tithead em {
  font-style: normal;
  color: #8871B9
}

.wbnrs .titdesc {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 12px 0 0;
  max-width: 480px
}

.wbnrs .titcurve {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0
}

.wbnrs .titcurve svg {
  width: 100%;
  height: 100%
}

.wbnrs .titright {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0
}

.wbnrs .titcount {
  font-size: 70px;
  line-height: 1.2;
  color: #8871b938;
  letter-spacing: -.04em
}

.wbnrs .titcountlabel {
  font-size: 14px;
  color: #8871B9;
  display: block;
  margin-top: 6px
}

.wbnrs .cardgrid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.wbnrs .wcard {
  background: #1e1530;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .28s ease-in-out;
  text-decoration: none
}

.wbnrs .wcard:hover {
  box-shadow: 2px 12px 52px 0 #8871b921;
  transform: translateY(-4px)
}

.wbnrs .wcard:focus-visible {
  outline: 2px solid #8871B9;
  outline-offset: 4px
}

.wbnrs .wcardimg {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative
}

.wbnrs .wcardimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .38s ease-in-out
}

.wbnrs .wcard:hover .wcardimg img {
  transform: scale(1.04)
}

.wbnrs .wcardimg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #1e1530, transparent);
  pointer-events: none
}

.wbnrs .wcardprice {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #8871B9;
  color: #F7F4F8;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 2px 2px 3px 0 #8871b90d
}

.wbnrs .wcardbody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px
}

.wbnrs .wcardtitle {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0;
  letter-spacing: -.01em;
  text-decoration: underline;
  text-decoration-color: #8871b959;
  text-underline-offset: 4px
}

.wbnrs .wcarddesc {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.wbnrs .wcardfoot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed #8871b933;
  margin-top: auto
}

.wbnrs .wcardmeta {
  font-size: 14px;
  color: #d4cbe28c;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px
}

.wbnrs .wcardmeta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0
}

.wbnrs .wcardlink {
  margin-left: auto;
  font-size: 14px;
  color: #8871B9;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  transition: color .25s ease-in-out
}

.wbnrs .wcard:hover .wcardlink {
  color: #D4CBE2
}

.wbnrs .wcardlink svg {
  width: 14px;
  height: 14px
}

.wbnrs .divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0
}

.wbnrs .divider span {
  display: block;
  width: 48px;
  height: 1px;
  background: #8871b959
}

.wbnrs .divider figure {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid #8871B9;
  border-radius: 2px;
  transform: rotate(45deg);
  margin: 0
}

.wbnrs .infosec {
  background: #16102a;
  padding: 72px 24px;
  position: relative
}

.wbnrs .infosec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 85% 50%, #d4cbe20f 0%, transparent 65%), radial-gradient(ellipse 40% 70% at 15% 80%, #8871b917 0%, transparent 60%);
  pointer-events: none;
  animation: meshA 9s ease-in-out infinite alternate, meshB 13s ease-in-out infinite alternate-reverse
}

@keyframes meshA {
  from {
    opacity: .7
  }

  to {
    opacity: 1
  }
}

@keyframes meshB {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.06)
  }
}

.wbnrs .infoinner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  align-items: start
}

.wbnrs .infoleft h2 {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  letter-spacing: -.02em;
  text-decoration: underline;
  text-decoration-color: #8871b966;
  text-underline-offset: 6px
}

.wbnrs .infoleft h2 strong {
  color: #8871B9;
  font-weight: inherit
}

.wbnrs .infoleft p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.wbnrs .infoleft p::first-letter {
  font-size: 28px;
  line-height: 1;
  color: #8871B9;
  float: left;
  margin-right: 6px;
  margin-top: 4px
}

.wbnrs .inforight {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.wbnrs .factbox {
  background: #231940;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  position: relative
}

.wbnrs .factbox::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 1px;
  background: #8871b966;
  border-style: dashed;
  border-width: 0 0 1px;
  border-color: #8871b966
}

.wbnrs .factnum {
  font-size: 70px;
  line-height: 1.2;
  color: #8871B9;
  letter-spacing: -.04em;
  display: block
}

.wbnrs .factlabel {
  font-size: 14px;
  color: #D4CBE2;
  line-height: 1.6;
  margin-top: 6px;
  display: block
}

.wbnrs .factrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.wbnrs .imgfeatsec {
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto
}

.wbnrs .imgfeatinner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px
}

.wbnrs .imgfeathead {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 12px;
  letter-spacing: -.02em;
  text-decoration: underline;
  text-decoration-color: #8871b966;
  text-underline-offset: 6px
}

.wbnrs .imgfeathead em {
  font-style: normal;
  color: #8871B9
}

.wbnrs .imgfeatwrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 12px 52px 0 #8871b921;
  position: relative
}

.wbnrs .imgfeatwrap img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block
}

.wbnrs .imgfeatwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, #120e1a8c 100%);
  pointer-events: none
}

.wbnrs .imgfeatcaption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 1
}

.wbnrs .imgfeatcaption p {
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  margin: 0;
  max-width: 480px
}

.wbnrs .ctasec {
  background: #1e1530;
  padding: 72px 24px;
  position: relative
}

.wbnrs .ctasec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, #8871b91a 0%, transparent 70%);
  pointer-events: none
}

.wbnrs .ctainner {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center
}

.wbnrs .ctainner h2 {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 12px;
  letter-spacing: -.02em
}

.wbnrs .ctainner h2 span {
  color: #8871B9
}

.wbnrs .ctainner p {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0 auto 36px;
  max-width: 540px
}

.wbnrs .ctabtn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: #8871B9;
  color: #F7F4F8;
  font-size: 21px;
  padding: 24px 36px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: background .28s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.wbnrs .ctabtn:hover {
  background: #7560a8;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.wbnrs .ctabtn:focus-visible {
  outline: 2px solid #D4CBE2;
  outline-offset: 4px
}

.wbnrs .ctabtn svg {
  width: 20px;
  height: 20px
}

@media (max-width: 768px) {
  .wbnrs .tithead {
    font-size: 28px
  }

  .wbnrs .titrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .wbnrs .titright {
    margin-left: 0;
    text-align: left
  }

  .wbnrs .titcount {
    font-size: 28px
  }

  .wbnrs .cardgrid {
    grid-template-columns: 1fr;
    padding: 36px 24px
  }

  .wbnrs .infoinner {
    grid-template-columns: 1fr
  }

  .wbnrs .factrow {
    grid-template-columns: 1fr
  }

  .wbnrs .titcurve {
    display: none
  }
}

@media (max-width: 390px) {
  .wbnrs .titband {
    padding: 24px 12px
  }

  .wbnrs .cardgrid {
    padding: 24px 12px;
    gap: 12px
  }

  .wbnrs .wcardbody {
    padding: 12px
  }

  .wbnrs .infosec {
    padding: 36px 12px
  }

  .wbnrs .ctasec {
    padding: 36px 12px
  }

  .wbnrs .imgfeatsec {
    padding: 36px 12px
  }

  .wbnrs .ctabtn {
    font-size: 14px;
    padding: 12px 24px
  }
}

@media (min-width: 1280px) {
  .wbnrs .cardgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.abt {
  background: #120e1a;
  color: #D4CBE2;
  overflow-x: clip
}

.abt .pg-strip {
  position: relative;
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto
}

.abt .titblock {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 36px;
  align-items: end;
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto
}

.abt .titblock-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
  margin-bottom: 36px;
  position: relative
}

.abt .titblock-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .38s cubic-bezier(0.4, 0, 0.2, 1), transform .38s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt .titblock-img:hover img {
  filter: brightness(1.1);
  transform: scale(1.03)
}

.abt .titblock-text {
  grid-column: 1 / 2
}

.abt .titblock-side {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  padding-bottom: 12px
}

.abt .geo-shape {
  width: 80px;
  height: 80px;
  opacity: .13
}

.abt .geo-dots {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end
}

.abt .dot {
  border-radius: 46px;
  background: #8871B9
}

.abt .dot-lg {
  width: 22px;
  height: 22px;
  opacity: .35
}

.abt .dot-md {
  width: 14px;
  height: 14px;
  opacity: .22
}

.abt .dot-sm {
  width: 8px;
  height: 8px;
  opacity: .15
}

.abt .h1main {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F7F4F8;
  margin: 0 0 24px;
  font-weight: 700
}

.abt .h1main .acc {
  color: #8871B9
}

.abt .tagline {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  max-width: 560px;
  margin: 0
}

.abt .numaccent {
  font-size: 28px;
  font-weight: 700;
  color: #8871B9
}

.abt .reveal {
  opacity: 0;
  transform: translateY(32px);
  animation: riseup .55s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

.abt .reveal-d1 {
  animation-delay: .1s
}

.abt .reveal-d2 {
  animation-delay: .22s
}

.abt .reveal-d3 {
  animation-delay: .36s
}

.abt .reveal-d4 {
  animation-delay: .5s
}

@keyframes riseup {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt .sec-story {
  background: #1a1325;
  position: relative
}

.abt .sec-story::before {
  content: '';
  position: absolute;
  inset: 0;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  background: #1a1325;
  z-index: 0
}

.abt .story-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  align-items: start
}

.abt .story-left {
  display: flex;
  flex-direction: column;
  gap: 36px
}

.abt .story-imgwrap {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 2px 12px 52px 0 #8871b921;
  position: relative
}

.abt .story-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .42s ease-in-out, transform .42s ease-in-out;
  filter: saturate(1)
}

.abt .story-imgwrap:hover img {
  filter: saturate(0);
  transform: scale(1.04)
}

.abt .story-stat {
  background: #231a35;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.abt .story-stat-num {
  font-size: 70px;
  line-height: 1.2;
  font-weight: 700;
  color: #8871B9;
  letter-spacing: -.03em
}

.abt .story-stat-label {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin-top: 6px
}

.abt .story-right {
  display: flex;
  flex-direction: column;
  gap: 36px
}

.abt .story-h2 {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0;
  letter-spacing: -.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid #8871B9;
  display: inline-block
}

.abt .story-h2 .acc {
  color: #8871B9
}

.abt .story-body {
  font-size: 21px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.abt .story-body::first-letter {
  font-size: 70px;
  line-height: 1;
  float: left;
  margin-right: 12px;
  margin-top: 6px;
  color: #8871B9;
  font-weight: 700
}

.abt .story-body2 {
  font-size: 21px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0
}

.abt .person-card {
  background: #231a35;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.abt .person-imgwrap {
  width: 80px;
  height: 80px;
  border-radius: 46px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 2px 2px 3px 0 #8871b90d
}

.abt .person-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .35s ease-in-out
}

.abt .person-imgwrap:hover img {
  filter: brightness(1.15)
}

.abt .person-info {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.abt .person-name {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  font-weight: 600;
  margin: 0
}

.abt .person-role {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  margin: 0
}

.abt .person-note {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.abt .sec-metrics {
  position: relative;
  background: #120e1a
}

.abt .metrics-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 24px
}

.abt .metrics-head {
  margin-bottom: 72px;
  max-width: 600px
}

.abt .metrics-h2 {
  font-size: 28px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  letter-spacing: -.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid #8871B9;
  display: inline-block
}

.abt .metrics-h2 .acc {
  color: #8871B9
}

.abt .metrics-sub {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.abt .metrics-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 36px;
  align-items: start
}

.abt .rings-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px
}

.abt .ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.abt .ring-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg)
}

.abt .ring-track {
  fill: none;
  stroke: #231a35;
  stroke-width: 8
}

.abt .ring-fill {
  fill: none;
  stroke: #8871B9;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt .ring-item:hover .ring-fill {
  stroke: #D4CBE2
}

.abt .ring-label {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  text-align: center
}

.abt .ring-pct {
  font-size: 21px;
  font-weight: 700;
  color: #F7F4F8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg)
}

.abt .ring-wrap {
  position: relative;
  width: 120px;
  height: 120px
}

.abt .rings-loaded .ring-fill-78 {
  stroke-dashoffset: calc(283 * (1 - 0.78))
}

.abt .rings-loaded .ring-fill-91 {
  stroke-dashoffset: calc(283 * (1 - 0.91))
}

.abt .rings-loaded .ring-fill-84 {
  stroke-dashoffset: calc(283 * (1 - 0.84))
}

.abt .metrics-aside {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.abt .aside-img {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.abt .aside-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .4s ease-in-out, transform .4s ease-in-out;
  filter: saturate(1)
}

.abt .aside-img:hover img {
  filter: saturate(0) brightness(1.1);
  transform: scale(1.03)
}

.abt .cta-bar {
  background: #231a35;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.abt .cta-bar-h {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  font-weight: 600;
  margin: 0
}

.abt .cta-bar-p {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.abt .btn-primary {
  display: inline-block;
  background: #8871B9;
  color: #F7F4F8;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center
}

.abt .btn-primary:hover {
  background: #9d88cc;
  box-shadow: 2px 12px 52px 0 #8871b938
}

.abt .btn-primary:focus {
  outline: 2px solid #D4CBE2;
  outline-offset: 2px
}

.abt .btn-primary:active {
  background: #7060a8
}

@media (max-width: 1280px) {
  .abt .h1main {
    font-size: 70px
  }

  .abt .titblock {
    grid-template-columns: 2fr 1fr
  }
}

@media (max-width: 768px) {
  .abt .titblock {
    grid-template-columns: 1fr;
    padding: 36px 24px
  }

  .abt .titblock-side {
    display: none
  }

  .abt .h1main {
    font-size: 28px
  }

  .abt .titblock-img {
    height: 120px
  }

  .abt .story-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 24px
  }

  .abt .story-left {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start
  }

  .abt .story-imgwrap {
    width: 140px;
    flex-shrink: 0;
    aspect-ratio: 3/4
  }

  .abt .metrics-grid {
    grid-template-columns: 1fr
  }

  .abt .rings-area {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
  }

  .abt .ring-svg,
  .abt .ring-wrap {
    width: 90px;
    height: 90px
  }

  .abt .metrics-inner {
    padding: 36px 24px
  }

  .abt .metrics-head {
    margin-bottom: 36px
  }
}

@media (max-width: 390px) {
  .abt .h1main {
    font-size: 28px
  }

  .abt .rings-area {
    grid-template-columns: 1fr
  }

  .abt .story-left {
    flex-direction: column
  }

  .abt .story-imgwrap {
    width: 100%
  }

  .abt .person-card {
    flex-direction: column;
    align-items: flex-start
  }
}

.dbt {
  background: #120e1a;
  color: #D4CBE2;
  overflow-x: clip
}

.dbt .pg-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px
}

.dbt .dot-border {
  position: relative
}

.dbt .dot-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #8871B9 0px, #8871B9 2px, transparent 2px, transparent 6px, #8871B9 6px, #8871B9 10px, transparent 10px, transparent 18px, #8871B9 18px, #8871B9 22px, transparent 22px, transparent 30px);
  opacity: .5
}

.dbt .divider-grow {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #8871B9 40%, #D4CBE2 100%);
  margin: 0;
  border: none
}

.dbt .dropcap-p::first-letter {
  font-size: 70px;
  line-height: 1.2;
  float: left;
  margin-right: 12px;
  margin-top: 6px;
  color: #8871B9;
  font-weight: 700
}

.dbt .accent-word {
  color: #8871B9
}

.dbt .dotrow {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center
}

.dbt .dotrow span {
  display: inline-block;
  border-radius: 46px;
  background: #8871B9;
  opacity: .55
}

.dbt .dotrow span:nth-child(1) {
  width: 4px;
  height: 4px
}

.dbt .dotrow span:nth-child(2) {
  width: 6px;
  height: 6px;
  opacity: .7
}

.dbt .dotrow span:nth-child(3) {
  width: 8px;
  height: 8px;
  opacity: .85
}

.dbt .dotrow span:nth-child(4) {
  width: 5px;
  height: 5px;
  opacity: .6
}

.dbt .dotrow span:nth-child(5) {
  width: 3px;
  height: 3px;
  opacity: .45
}

.dbt .underline-head {
  display: inline-block;
  border-bottom: 2px solid #8871B9;
  padding-bottom: 6px
}

.dbt .btn-primary {
  display: inline-block;
  background: #8871B9;
  color: #F7F4F8;
  padding: 12px 36px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .03em;
  cursor: pointer;
  text-decoration: none;
  transition: background .28s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.dbt .btn-primary:hover {
  background: #9d87cc;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .btn-primary:focus {
  outline: 2px solid #D4CBE2;
  outline-offset: 2px
}

.dbt .btn-primary:active {
  background: #7560a8
}

@keyframes btn-shake {

  0%,
  100% {
    transform: translateX(0)
  }

  20% {
    transform: translateX(-5px)
  }

  40% {
    transform: translateX(5px)
  }

  60% {
    transform: translateX(-4px)
  }

  80% {
    transform: translateX(3px)
  }
}

.dbt .btn-primary.shake {
  animation: btn-shake .38s cubic-bezier(0.4, 0, 0.2, 1)
}

@keyframes bg-osc {

  0%,
  100% {
    background-color: #120e1a
  }

  50% {
    background-color: #1a1228
  }
}

.dbt .osc-bg {
  animation: bg-osc 6s ease-in-out infinite
}

.dbt s1 {
  display: block
}

.dbt .titlebk {
  position: relative;
  background: linear-gradient(128deg, #1e1530 0%, #0e0b18 55%, #12101e 100%);
  padding: 72px 0
}

.dbt .titlebk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

.dbt .titlebk-text h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 24px;
  color: #F7F4F8
}

.dbt .titlebk-text h1 em {
  font-style: normal;
  color: #8871B9;
  display: block
}

.dbt .titlebk-text p {
  font-size: 21px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0 0 36px;
  max-width: 480px
}

.dbt .titlebk-img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .titlebk-img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  transition: filter .38s ease-in-out
}

.dbt .titlebk-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, #120e1ab8 100%);
  border-radius: 16px;
  pointer-events: none
}

.dbt .titlebk-img:hover img {
  filter: blur(1px) brightness(0.9)
}

.dbt .sec2 {
  padding: 72px 0 36px;
  background: #0e0b18
}

.dbt .sec2-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start
}

.dbt .sec2-img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.dbt .sec2-img:hover {
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .sec2-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  filter: blur(0px) brightness(1);
  transition: filter .4s ease-in-out
}

.dbt .sec2-img:hover img {
  filter: blur(0.8px) brightness(0.88)
}

.dbt .sec2-text h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 24px
}

.dbt .sec2-text p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 24px
}

.dbt .qual-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dbt .qual-list li {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  padding: 12px 16px;
  border-radius: 8px;
  background: #8871b914;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  transition: background .28s ease-in-out
}

.dbt .qual-list li:hover {
  background: #8871b926
}

.dbt .qual-list li strong {
  color: #F7F4F8
}

.dbt .sec3 {
  padding: 72px 0;
  background: linear-gradient(160deg, #1a1228 0%, #0e0b18 100%)
}

.dbt .sec3-head {
  text-align: center;
  margin: 0 0 36px
}

.dbt .sec3-head h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 12px
}

.dbt .sec3-head p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  max-width: 560px;
  margin: 0 auto
}

.dbt .infographic {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap
}

.dbt .infob {
  flex: 1 1 200px;
  max-width: 240px;
  background: #8871b912;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: background .32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative
}

.dbt .infob:hover {
  background: #8871b924;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .infob-icon {
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background: #8871b92e;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center
}

.dbt .infob-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #8871B9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dbt .infob-num {
  font-size: 28px;
  line-height: 1.2;
  color: #8871B9;
  font-weight: 700;
  letter-spacing: -.02em
}

.dbt .infob-label {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin-top: 6px
}

.dbt .sec4 {
  padding: 72px 0;
  background: #12101e
}

.dbt .sec4-offset {
  display: grid;
  grid-template-columns: 3fr 2fr 4fr;
  gap: 36px;
  align-items: start
}

.dbt .sec4-a {
  padding-top: 36px
}

.dbt .sec4-b {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 36px 12px
}

.dbt .sec4-c {
  padding-top: 0
}

.dbt .sec4-a h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 24px
}

.dbt .sec4-a p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 12px
}

.dbt .phase-item {
  padding: 16px;
  border-radius: 8px;
  background: #d4cbe20d;
  border-top: 2px solid #8871b94d;
  transition: background .28s ease-in-out, border-color .28s ease-in-out
}

.dbt .phase-item:hover {
  background: #8871b91a;
  border-color: #8871B9
}

.dbt .phase-item h5 {
  font-size: 14px;
  line-height: 1.6;
  color: #F7F4F8;
  margin: 0 0 6px;
  letter-spacing: .01em
}

.dbt .phase-item p {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

.dbt .sec4-divider {
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, #8871B9 50%, transparent 100%);
  min-height: 200px;
  border-radius: 2px;
  align-self: stretch;
  margin: 0 auto
}

.dbt .sec4-c h4 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  letter-spacing: -.01em
}

.dbt .sec4-c p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 12px
}

.dbt .sec4-img {
  border-radius: 16px;
  overflow: hidden;
  margin-top: 24px;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: box-shadow .38s cubic-bezier(0.4, 0, 0.2, 1)
}

.dbt .sec4-img:hover {
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .sec4-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  filter: blur(0px);
  transition: filter .38s ease-in-out
}

.dbt .sec4-img:hover img {
  filter: blur(0.6px) brightness(0.9)
}

.dbt .sec5 {
  padding: 72px 0;
  background: #0e0b18
}

.dbt .sec5-head {
  margin: 0 0 36px
}

.dbt .sec5-head h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 12px
}

.dbt .sec5-head p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  max-width: 580px
}

.dbt .stories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.dbt .story-card {
  background: #8871b90f;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 2px 5px 25px 0 #8871b91c;
  transition: background .32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative
}

.dbt .story-card:hover {
  background: #8871b91f;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.dbt .story-card h5 {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  margin: 0 0 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px
}

.dbt .story-card h4 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 12px;
  letter-spacing: -.01em
}

.dbt .story-card p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 12px
}

.dbt .story-card .story-name {
  font-size: 14px;
  line-height: 1.6;
  color: #8871B9;
  margin: 0;
  font-weight: 600
}

.dbt .story-card.wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center
}

.dbt .sec6 {
  padding: 72px 0;
  background: linear-gradient(155deg, #16101f 0%, #0e0c1a 100%)
}

.dbt .sec6-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start
}

.dbt .sec6-left h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 24px
}

.dbt .sec6-left p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 24px
}

.dbt .notfor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dbt .notfor-list li {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  padding: 16px;
  border-radius: 8px;
  background: #d4cbe20a;
  box-shadow: 2px 2px 3px 0 #8871b90d;
  transition: background .28s ease-in-out
}

.dbt .notfor-list li:hover {
  background: #8871b917
}

.dbt .notfor-list li strong {
  color: #F7F4F8;
  display: block;
  margin-bottom: 6px
}

.dbt .sec6-right {
  padding-top: 36px
}

.dbt .sec6-right h4 {
  font-size: 21px;
  line-height: 1.2;
  color: #F7F4F8;
  margin: 0 0 24px;
  letter-spacing: -.01em
}

.dbt .sec6-right p {
  font-size: 14px;
  line-height: 1.9;
  color: #D4CBE2;
  margin: 0 0 24px
}

.dbt .fit-check {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dbt .fitrow {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 8px;
  background: #8871b912;
  transition: background .28s ease-in-out
}

.dbt .fitrow:hover {
  background: #8871b924
}

.dbt .fitrow-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 46px;
  background: #8871B9;
  margin-top: 6px
}

.dbt .fitrow p {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0
}

@media (max-width: 1280px) {
  .dbt .titlebk-text h1 {
    font-size: 70px
  }

  .dbt .sec4-offset {
    grid-template-columns: 1fr 1fr
  }

  .dbt .sec4-b {
    display: none
  }
}

@media (max-width: 768px) {
  .dbt .titlebk {
    padding: 36px 0
  }

  .dbt .titlebk-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .dbt .titlebk-text h1 {
    font-size: 28px
  }

  .dbt .titlebk-img img {
    height: 280px
  }

  .dbt .sec2-inner {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .dbt .sec2-img img {
    height: 260px
  }

  .dbt .infographic {
    gap: 12px
  }

  .dbt .infob {
    max-width: 100%
  }

  .dbt .sec4-offset {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .dbt .sec4-b {
    display: none
  }

  .dbt .stories {
    grid-template-columns: 1fr
  }

  .dbt .story-card.wide {
    grid-column: span 1;
    grid-template-columns: 1fr
  }

  .dbt .sec6-inner {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .dbt .sec6-right {
    padding-top: 0
  }
}

@media (max-width: 390px) {
  .dbt .pg-wrap {
    padding: 0 12px
  }

  .dbt .titlebk-text h1 {
    font-size: 28px
  }

  .dbt .titlebk-text p {
    font-size: 14px
  }

  .dbt .infob {
    padding: 24px 12px
  }

  .dbt .story-card {
    padding: 24px
  }

  .dbt .story-card.wide {
    grid-template-columns: 1fr
  }
}

.successPage {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #18122e;
  padding: 72px 24px
}

.successPage .successWrap {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  text-align: center
}

.successPage .iconRing {
  width: 72px;
  height: 72px;
  border-radius: 46px;
  background: linear-gradient(135deg, #8871B9 0%, #4a3470 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 36px;
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.successPage .iconRing svg {
  display: block
}

.successPage .successTitle {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F7F4F8;
  margin: 0 0 12px
}

.successPage .successTitle span {
  color: #8871B9
}

.successPage .successSub {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0 0 36px;
  padding: 0 12px
}

.successPage .successDivider {
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: #8871B9;
  margin: 0 auto 36px;
  opacity: .5
}

.successPage .successMeta {
  background: #221840;
  border-radius: 16px;
  padding: 24px 36px;
  margin-bottom: 36px;
  box-shadow: 2px 2px 3px 0 #8871b90d
}

.successPage .successMeta p {
  font-size: 14px;
  line-height: 1.6;
  color: #D4CBE2;
  margin: 0 0 6px
}

.successPage .successMeta p:last-child {
  margin-bottom: 0
}

.successPage .successMeta strong {
  color: #F7F4F8
}

.successPage .backBtn {
  display: inline-block;
  background: #8871B9;
  color: #F7F4F8;
  font-size: 14px;
  line-height: 1.2;
  padding: 12px 36px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .25s ease-in-out, box-shadow .38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 5px 25px 0 #8871b91c
}

.successPage .backBtn:hover {
  background: #6e5aa0;
  box-shadow: 2px 12px 52px 0 #8871b921
}

.successPage .backBtn:focus {
  outline: 2px solid #D4CBE2;
  outline-offset: 4px
}

.successPage .backBtn:active {
  background: #5c4a88
}

@media (max-width: 768px) {
  .successPage {
    padding: 72px 12px
  }

  .successPage .successMeta {
    padding: 24px
  }
}

@media (max-width: 390px) {
  .successPage .successTitle {
    font-size: 21px
  }

  .successPage .successMeta {
    padding: 12px
  }
}