html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%
}

.topbar {
  box-sizing: border-box;
  background: linear-gradient(135deg, #fff 0%, #F51A93 0%, #4906BF 100%);
  padding: 4px 0
}

.topbar-limiter {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px
}

.topbar-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: opacity .15s ease-out
}

.topbar-phone:hover {
  opacity: .85
}

.topbar-phone i {
  font-size: 16px
}

.topbar-email {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: opacity .15s ease-out
}

.topbar-email:hover {
  opacity: .85
}

.topbar-email i {
  font-size: 16px
}

.masthead {
  box-sizing: border-box;
  background: #fff;
  border-bottom: 2px solid #E6E6E6;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.masthead-limiter {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px
}

.brand-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0
}

.brand-mark {
  width: 68px;
  height: 68px;
  display: block;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 7px 18px 0 #f51a9314 0 1px 2px 0 #4906bf14;
  padding: 8px;
  box-sizing: border-box;
  border: 2px solid #E6E6E6
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.brand-name {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  color: #4906BF;
  margin: 0
}

.brand-tagline {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #F51A93;
  margin: 0
}

.primarynav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.navlink {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #4906BF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  border: 2px solid transparent;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
  background-color: transparent;
  box-sizing: border-box
}

.navlink:hover {
  border-color: #4906BF;
  box-shadow: 0 7px 18px 0 #4906bf14;
  background-color: #4906bf08
}

.navlink:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.navlink.active {
  background-color: #4906BF;
  color: #fff;
  border-color: #4906BF
}

@media (max-width: 900px) {
  .masthead-limiter {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .primarynav {
    width: 100%;
    justify-content: flex-start
  }

  .topbar-limiter {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }
}

@media (max-width: 600px) {
  .brand-text {
    display: none
  }

  .navlink {
    font-size: 13px;
    padding: 8px 16px
  }

  .topbar-phone,
  .topbar-email {
    font-size: 13px
  }
}

.basefooter {
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #E6E6E6 100%);
  border-top: 2px solid #4906BF;
  padding: 48px 0 24px;
  position: relative;
  overflow: hidden
}

.basefooter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 30%;
  height: 200px;
  background: radial-gradient(circle, #f51a9314 0%, transparent 70%);
  pointer-events: none
}

.basefooter::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 35%;
  height: 250px;
  background: radial-gradient(circle, #4906bf0f 0%, transparent 70%);
  pointer-events: none
}

.basefooter-limiter {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1
}

.footergrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px
}

.footercol {
  box-sizing: border-box
}

.footercol.center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.footerheading {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 16px
}

.footerdesc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  margin: 0 0 16px
}

.footerlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.footerlink {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #4906BF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .1s ease, transform .1s ease;
  padding: 4px 0
}

.footerlink:hover {
  color: #F51A93;
  transform: translateX(4px)
}

.footerlink:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.footerlink i {
  font-size: 19px;
  transition: transform .15s ease-out
}

.footerlink:hover i {
  transform: scale(1.15)
}

.contactitem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px
}

.contactitem i {
  font-size: 19px;
  color: #F51A93;
  margin-top: 4px;
  flex-shrink: 0
}

.contacttext {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #333
}

.contacttext a {
  color: #4906BF;
  text-decoration: none;
  transition: color .12s ease
}

.contacttext a:hover {
  color: #F51A93;
  text-decoration: underline
}

.brandcenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.brandcenter-mark {
  width: 72px;
  height: 72px;
  display: block;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px 0 #4906bf1a 0 1px 2px 0 #f51a9314;
  padding: 8px;
  box-sizing: border-box;
  border: 2px solid #4906BF
}

.brandcenter-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.brandcenter-name {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  color: #4906BF;
  margin: 0
}

.brandcenter-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  margin: 0;
  max-width: 320px
}

.socialgrid {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px
}

.sociallink {
  width: 46px;
  height: 46px;
  border-radius: 46px;
  background: #fff;
  border: 2px solid #4906BF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4906BF;
  text-decoration: none;
  font-size: 19px;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, transform .1s ease-out;
  box-shadow: 0 1px 2px 0 #4906bf14
}

.sociallink:hover {
  background-color: #4906BF;
  color: #fff;
  box-shadow: 0 7px 18px 0 #4906bf14;
  transform: translateY(-2px)
}

.sociallink:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.footerbottom {
  border-top: 2px solid #4906bf26;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.copyright {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
  margin: 0
}

.footernav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap
}

.footernav-link {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #4906BF;
  text-decoration: none;
  transition: color .12s ease
}

.footernav-link:hover {
  color: #F51A93;
  text-decoration: underline
}

.footernav-link:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.footerlogo-zone {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #f51a931f
}

.footerlogo-final {
  width: 64px;
  height: 64px;
  display: block;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 7px 18px 0 #4906bf14;
  padding: 8px;
  box-sizing: border-box;
  border: 2px solid #E6E6E6
}

.footerlogo-final img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

@media (max-width: 900px) {
  .footergrid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .footercol.center {
    order: -1
  }

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

  .footernav {
    width: 100%;
    flex-direction: column;
    gap: 8px
  }
}

@media (max-width: 600px) {
  .basefooter {
    padding: 24px 0 16px
  }

  .footergrid {
    gap: 24px;
    margin-bottom: 24px
  }

  .footerheading {
    font-size: 16px
  }

  .footerdesc,
  .contacttext,
  .footerlink {
    font-size: 13px
  }

  .brandcenter-name {
    font-size: 19px
  }

  .brandcenter-desc {
    font-size: 13px
  }

  .socialgrid {
    gap: 8px
  }

  .sociallink {
    width: 40px;
    height: 40px;
    font-size: 16px
  }
}

.consent-popup {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 90%;
  max-width: 480px;
  background: #fff;
  border: 2px solid #4906BF;
  border-radius: 16px;
  box-shadow: 0 12px 48px 0 #4906bf1a 0 7px 18px 0 #f51a9314;
  padding: 24px;
  box-sizing: border-box;
  z-index: 1500;
  display: none;
  transform: translateX(-100vw);
  transition: transform .32s ease-out
}

.consent-popup.visible {
  transform: translateX(0)
}

.consent-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  margin: 0 0 16px
}

.consent-text strong {
  color: #4906BF;
  font-weight: 700
}

.consent-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap
}

.consent-btn {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #4906BF;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .12s ease;
  font-family: 'Roboto', sans-serif
}

.consent-btn:hover {
  color: #F51A93
}

.consent-btn:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.consent-settings-link {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #666;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .12s ease;
  font-family: 'Roboto', sans-serif
}

.consent-settings-link:hover {
  color: #4906BF
}

.consent-settings-link:focus {
  outline: 2px solid #4906BF;
  outline-offset: 4px
}

.consent-options {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #E6E6E6
}

.consent-options.active {
  display: block
}

.consent-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.consent-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #4906BF;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0
}

.consent-option label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  cursor: pointer
}

@media (max-width: 600px) {
  .consent-popup {
    width: calc(100% - 32px);
    bottom: 16px;
    padding: 16px
  }

  .consent-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }
}

.policy-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px
}

.policy-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 16px
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul,
.policy-content ol {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 24px;
  padding-left: 24px
}

.policy-content ul:last-child,
.policy-content ol:last-child {
  margin-bottom: 0
}

.policy-content li {
  margin-bottom: 8px
}

.policy-content li:last-child {
  margin-bottom: 0
}

.policy-content strong,
.policy-content b {
  font-weight: 600;
  color: #4906BF
}

.policy-content em,
.policy-content i {
  font-style: italic
}

.policy-content a {
  color: #4906BF;
  text-decoration: underline;
  transition: color .15s ease-out
}

.policy-content a:hover {
  color: #F51A93
}

.policy-content a:focus {
  outline: 2px solid #4906BF;
  outline-offset: 2px;
  border-radius: 2px
}

.policy-content hr {
  border: none;
  border-top: 1px solid #E6E6E6;
  margin: 48px 0
}

.policy-content div {
  margin-bottom: 24px
}

.policy-content div:last-child {
  margin-bottom: 0
}

@media (max-width: 768px) {
  .policy-content {
    padding: 24px 16px
  }

  .policy-content p,
  .policy-content ul,
  .policy-content ol {
    font-size: 16px
  }

  .policy-content hr {
    margin: 24px 0
  }
}

.entryhm {
  background: #FFF;
  color: #1d1d1d;
  margin: 0;
  padding: 0
}

.entryhm * {
  box-sizing: border-box
}

.entryhm .leadfrm {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative
}

.entryhm .leadfrm::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: #E6E6E6
}

.entryhm .imgframed {
  flex: 0 0 420px;
  position: relative
}

.entryhm .imgframed::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid #4906BF;
  border-radius: 16px;
  z-index: 1
}

.entryhm .imgframed::after {
  content: '';
  position: absolute;
  inset: -16px;
  border: 1px solid #E6E6E6;
  border-radius: 16px;
  z-index: 0
}

.entryhm .imgframed img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
  filter: saturate(0.7);
  position: relative;
  z-index: 2
}

.entryhm .leadcnt {
  flex: 1
}

.entryhm .leadcnt h1 {
  font-size: 46px;
  line-height: 1.15;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 700
}

.entryhm .leadcnt ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.entryhm .leadcnt li {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  padding-left: 32px;
  position: relative
}

.entryhm .leadcnt li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border: 2px solid #F51A93;
  border-radius: 2px;
  background: linear-gradient(135deg, #F51A93 0%, #F51A93 50%, transparent 50%)
}

@media (max-width: 900px) {
  .entryhm .leadfrm {
    flex-direction: column;
    padding: 48px 16px 72px
  }

  .entryhm .imgframed {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px
  }

  .entryhm .leadfrm::after {
    left: 16px;
    right: 16px
  }
}

.entryhm .suprt {
  background: #faf8fe;
  padding: 48px 24px
}

.entryhm .suprt .cntain {
  max-width: 1200px;
  margin: 0 auto
}

.entryhm .suprt h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  text-align: center;
  margin: 0 0 48px;
  font-weight: 600
}

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

.entryhm .suprt .card {
  background: #FFF;
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow .15s ease-out, border-color .15s ease-out;
  position: relative;
  overflow: hidden
}

.entryhm .suprt .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #4906BF 50%, transparent 100%);
  opacity: 0;
  transition: opacity .15s ease-out
}

.entryhm .suprt .card:hover {
  border-color: #4906BF;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.entryhm .suprt .card:hover::before {
  opacity: 1
}

.entryhm .suprt .card h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 16px;
  font-weight: 600;
  text-align: center
}

.entryhm .suprt .card p {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  margin: 0;
  text-align: center
}

@media (max-width: 900px) {
  .entryhm .suprt {
    padding: 48px 16px
  }

  .entryhm .suprt .grid {
    grid-template-columns: 1fr;
    gap: 16px
  }
}

.entryhm .proofsec {
  padding: 48px 24px;
  background: #FFF
}

.entryhm .proofsec .cntain {
  max-width: 1200px;
  margin: 0 auto
}

.entryhm .proofsec h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 600;
  text-align: center
}

.entryhm .proofsec .txtlrg {
  font-size: 19px;
  line-height: 1.6;
  color: #1d1d1d;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px
}

.entryhm .proofsec .imggrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.entryhm .proofsec .imgwrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 7px 18px 0 #f51a9314
}

.entryhm .proofsec .imgwrap img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .2s ease-out
}

.entryhm .proofsec .imgwrap:hover img {
  transform: scale(1.05)
}

.entryhm .proofsec .imgwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, #4906bf1a 100%);
  pointer-events: none
}

@media (max-width: 900px) {
  .entryhm .proofsec {
    padding: 48px 16px
  }

  .entryhm .proofsec .imggrid {
    grid-template-columns: 1fr
  }
}

.entryhm .invest {
  background: #FFF;
  padding: 48px 24px;
  position: relative
}

.entryhm .invest::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 2px;
  background: radial-gradient(ellipse at center, #F51A93 0%, transparent 70%)
}

.entryhm .invest .cntain {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center
}

.entryhm .invest .txtside {
  flex: 1
}

.entryhm .invest h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 600;
  text-align: center
}

.entryhm .invest p {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  margin: 0 0 24px;
  text-align: center
}

.entryhm .invest .pricebox {
  flex: 0 0 380px;
  background: linear-gradient(135deg, #faf8fe 0%, #faf8fe 33.33%, #FFF 33.33%, #FFF 66.66%, #fff5fb 66.66%);
  border: 2px solid #E6E6E6;
  border-radius: 30px;
  padding: 48px 24px;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 48px 0 #4906bf1a
}

.entryhm .invest .pricebox::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border: 1px solid #E6E6E6;
  border-radius: 24px;
  pointer-events: none
}

.entryhm .invest .pricebox h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase
}

.entryhm .invest .priceamt {
  font-size: 46px;
  line-height: 1.15;
  color: #4906BF;
  font-weight: 700;
  margin: 0 0 8px
}

.entryhm .invest .pricedetail {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 24px
}

.entryhm .invest .featurelist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.entryhm .invest .featurelist li {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  text-align: left;
  padding-left: 28px;
  position: relative
}

.entryhm .invest .featurelist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #F51A93;
  border-radius: 2px;
  transform: rotate(45deg)
}

@media (max-width: 900px) {
  .entryhm .invest {
    padding: 48px 16px
  }

  .entryhm .invest .cntain {
    flex-direction: column
  }

  .entryhm .invest .pricebox {
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px
  }
}

.entryhm .commsec {
  background: #faf8fe;
  padding: 48px 24px
}

.entryhm .commsec .cntain {
  max-width: 1200px;
  margin: 0 auto
}

.entryhm .commsec h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 600;
  text-align: center
}

.entryhm .commsec .intro {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 700px
}

.entryhm .commsec .layout {
  display: flex;
  gap: 48px;
  align-items: flex-start
}

.entryhm .commsec .imgcol {
  flex: 0 0 280px
}

.entryhm .commsec .imgcol img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.entryhm .commsec .txtcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.entryhm .commsec .benefit {
  background: #FFF;
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  padding: 24px;
  transition: transform .15s ease-out, box-shadow .15s ease-out
}

.entryhm .commsec .benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px 0 #f51a931a
}

.entryhm .commsec .benefit h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 8px;
  font-weight: 600;
  text-align: center
}

.entryhm .commsec .benefit p {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  margin: 0;
  text-align: center
}

@media (max-width: 900px) {
  .entryhm .commsec {
    padding: 48px 16px
  }

  .entryhm .commsec .layout {
    flex-direction: column
  }

  .entryhm .commsec .imgcol {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
    margin: 0 auto
  }
}

.entryhm .storysec {
  background: #FFF;
  padding: 48px 24px
}

.entryhm .storysec .cntain {
  max-width: 1200px;
  margin: 0 auto
}

.entryhm .storysec h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 48px;
  font-weight: 600;
  text-align: center
}

.entryhm .storysec .testgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.entryhm .storysec .testcard {
  background: #faf8fe;
  border: 2px solid #E6E6E6;
  border-radius: 30px;
  padding: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  transition: box-shadow .15s ease-out;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 30px);
  animation: clipreveal .8s ease-out forwards
}

@keyframes clipreveal {
  from {
    clip-path: inset(0 100% 0 0 round 30px)
  }

  to {
    clip-path: inset(0 0 0 0 round 30px)
  }
}

.entryhm .storysec .testcard:hover {
  box-shadow: 0 0 0 4px #f51a9326 inset, 0 7px 18px 0 #4906bf14
}

.entryhm .storysec .testcard .portrait {
  flex: 0 0 80px
}

.entryhm .storysec .testcard .portrait img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 8px
}

.entryhm .storysec .testcard .testcnt {
  flex: 1
}

.entryhm .storysec .testcard h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 8px;
  font-weight: 600;
  text-align: center
}

.entryhm .storysec .testcard .role {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 16px;
  text-align: center
}

.entryhm .storysec .testcard p {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  margin: 0;
  text-align: center
}

@media (max-width: 900px) {
  .entryhm .storysec {
    padding: 48px 16px
  }

  .entryhm .storysec .testgrid {
    grid-template-columns: 1fr
  }

  .entryhm .storysec .testcard {
    flex-direction: column;
    align-items: center
  }

  .entryhm .storysec .testcard .portrait {
    flex: 0 0 auto
  }
}

.entryhm .teamsec {
  background: #faf8fe;
  padding: 48px 24px
}

.entryhm .teamsec .cntain {
  max-width: 1200px;
  margin: 0 auto
}

.entryhm .teamsec h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 600;
  text-align: center;
  -webkit-text-stroke: 1px #4906BF;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill
}

.entryhm .teamsec .intro {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px
}

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

.entryhm .teamsec .credcard {
  background: #FFF;
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  transition: border-color .15s ease-out
}

.entryhm .teamsec .credcard::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #F51A93;
  border-radius: 2px;
  transition: width .2s ease-out
}

.entryhm .teamsec .credcard:hover {
  border-color: #4906BF
}

.entryhm .teamsec .credcard:hover::before {
  width: 120px
}

.entryhm .teamsec .credcard .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #4906BF 0%, #F51A93 100%);
  border-radius: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 25px
}

.entryhm .teamsec .credcard h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 8px;
  font-weight: 600
}

.entryhm .teamsec .credcard p {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1d;
  margin: 0
}

@media (max-width: 900px) {
  .entryhm .teamsec {
    padding: 48px 16px
  }

  .entryhm .teamsec .credgrid {
    grid-template-columns: 1fr
  }
}

.entryhm button[type="button"],
.entryhm button[type="submit"] {
  background: transparent;
  border: 2px solid #4906BF;
  color: #4906BF;
  font-size: 16px;
  line-height: 1.4;
  padding: 16px 48px;
  border-radius: 30px;
  cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
  font-weight: 600;
  display: inline-block
}

.entryhm button[type="button"]:hover,
.entryhm button[type="submit"]:hover {
  background: #4906BF;
  color: #FFF;
  box-shadow: 0 12px 48px 0 #4906bf1a
}

.entryhm button[type="button"]:focus-visible,
.entryhm button[type="submit"]:focus-visible {
  outline: 3px solid #F51A93 !important;
  outline-offset: 4px !important
}

.entryhm a {
  color: #4906BF;
  text-decoration: none;
  transition: color .1s ease-out;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.entryhm a::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #F51A93;
  border-radius: 2px;
  flex-shrink: 0;
  transition: transform .15s ease-out
}

.entryhm a:hover {
  color: #F51A93
}

.entryhm a:hover::before {
  transform: translateX(4px)
}

.entryhm a:focus-visible {
  outline: 3px solid #F51A93 !important;
  outline-offset: 4px !important
}

.cntctpage {
  background: #fff;
  overflow-x: clip
}

.cntctpage .herozone {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  overflow: hidden
}

.cntctpage .herozone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #4606bf08 1px, transparent 1px), radial-gradient(circle, #f51a9308 1px, transparent 1px);
  background-size: 48px 48px, 72px 72px;
  background-position: 0 0, 24px 24px;
  pointer-events: none;
  z-index: 0
}

.cntctpage .heroinner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto
}

.cntctpage .herotxt h1 {
  font-size: 46px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #1a1a1a
}

.cntctpage .herotxt h1 .accent {
  color: #4906BF;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 25px;
  display: block;
  margin-bottom: 8px
}

.cntctpage .herotxt p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 24px
}

.cntctpage .heroimg {
  position: relative;
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto
}

.cntctpage .heroimg::before {
  content: '';
  display: block;
  padding-top: 56%
}

.cntctpage .heroimg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #000c 0%, #0003 50%, #0000 100%);
  pointer-events: none
}

.cntctpage .heroimg .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E6E6E6 0%, #E6E6E6 50%, #d0d0d0 50%, #d0d0d0 100%)
}

.cntctpage .formarea {
  background: #fafbfc;
  padding: 48px 24px;
  position: relative
}

.cntctpage .formarea::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 24px solid #fff
}

.cntctpage .formwrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start
}

.cntctpage .contactinfo {
  background: #fff;
  border-radius: 16px;
  padding: 48px;
  border: 2px dashed #E6E6E6;
  position: relative
}

.cntctpage .contactinfo h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 0 0 24px;
  color: #F51A93;
  text-align: center
}

.cntctpage .infolist {
  list-style: none;
  margin: 0;
  padding: 0
}

.cntctpage .infolist li {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.cntctpage .infolist li:last-child {
  margin-bottom: 0
}

.cntctpage .infoicon {
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background: linear-gradient(135deg, #4906BF 0%, #4906BF 50%, #F51A93 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden
}

.cntctpage .infoicon::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 30px;
  top: 2px;
  left: 2px
}

.cntctpage .infoicon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  animation: cntctpage-iconrotate 8s linear infinite
}

@keyframes cntctpage-iconrotate {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

.cntctpage .infoicon path {
  stroke: #4906BF;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cntctpage-tracepath 2s ease-out forwards
}

@keyframes cntctpage-tracepath {
  to {
    stroke-dashoffset: 0
  }
}

.cntctpage .infotxt {
  flex: 1
}

.cntctpage .infotxt strong {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 4px;
  font-weight: 600
}

.cntctpage .infotxt span,
.cntctpage .infotxt a {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  text-decoration: none;
  display: block
}

.cntctpage .infotxt a {
  transition: color .15s ease-out
}

.cntctpage .infotxt a:hover {
  color: #4906BF
}

.cntctpage .formbox {
  background: #fff;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 7px 18px 0 #4606bf14
}

.cntctpage .formbox h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #4906BF;
  text-align: center
}

.cntctpage .formbox .subhead {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  text-align: center;
  margin: 0 0 24px
}

.cntctpage .formgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px
}

.cntctpage .fieldgroup {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntctpage .fieldgroup label {
  font-size: 13px;
  line-height: 1.4;
  color: #1a1a1a;
  font-weight: 600;
  letter-spacing: .02em
}

.cntctpage .fieldgroup input,
.cntctpage .fieldgroup select {
  width: 100%;
  padding: 16px;
  border: 2px solid #E6E6E6;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: #1a1a1a;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
  box-shadow: inset 0 2px 4px #4606bf0a
}

.cntctpage .fieldgroup input::placeholder {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cntctpage .fieldgroup input:focus,
.cntctpage .fieldgroup select:focus {
  outline: none;
  border-color: #4906BF;
  box-shadow: inset 0 2px 4px #4606bf14 0 0 0 3px #4606bf1a
}

.cntctpage .fieldgroup select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234906BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
  cursor: pointer
}

.cntctpage .privacycheck {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px
}

.cntctpage .privacycheck input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #4906BF
}

.cntctpage .privacycheck label {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  cursor: pointer
}

.cntctpage .privacycheck a {
  color: #4906BF;
  text-decoration: none;
  transition: color .12s ease
}

.cntctpage .privacycheck a:hover {
  color: #F51A93
}

.cntctpage .submitbtn {
  width: 100%;
  padding: 16px 24px;
  background: transparent;
  border: 2px solid #4906BF;
  border-radius: 30px;
  font-size: 16px;
  line-height: 1.4;
  color: #4906BF;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow: 0 1px 2px 0 #4606bf14
}

.cntctpage .submitbtn:hover {
  background: #4906BF;
  color: #fff;
  box-shadow: 0 12px 48px 0 #4606bf1a
}

.cntctpage .submitbtn:active {
  transform: scale(0.98)
}

.cntctpage .submitbtn:focus {
  outline: none;
  box-shadow: 0 0 0 4px #4606bf33
}

@media (max-width: 900px) {
  .cntctpage .formwrap {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .cntctpage .herozone {
    padding: 24px 16px
  }

  .cntctpage .formarea {
    padding: 24px 16px
  }

  .cntctpage .contactinfo,
  .cntctpage .formbox {
    padding: 24px
  }

  .cntctpage .herotxt h1 {
    font-size: 25px
  }

  .cntctpage .herotxt h1 .accent {
    font-size: 19px
  }
}

@media (max-width: 600px) {
  .cntctpage .infolist li {
    flex-direction: column;
    align-items: center;
    text-align: center
  }

  .cntctpage .fieldgroup input,
  .cntctpage .fieldgroup select {
    padding: 12px
  }
}

.learnprog {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background: #fff
}

.learnprog .titlesec {
  position: relative;
  padding: 48px 24px;
  overflow: hidden;
  background: linear-gradient(217deg, #4906BF 0%, #4906BF 33%, #F51A93 33%, #F51A93 66%, #E6E6E6 66%, #E6E6E6 100%);
  animation: learnprog-gradshift 8s ease-in-out infinite;
  border-top: 2px solid #4906BF;
  border-bottom: 2px solid #F51A93
}

@keyframes learnprog-gradshift {

  0%,
  100% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.learnprog .titlesec::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 24px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 30px;
  opacity: .6
}

.learnprog .titlesec::after {
  content: '';
  position: absolute;
  top: 48px;
  left: 40px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 30px;
  opacity: .4
}

.learnprog .titledots {
  position: absolute;
  bottom: 48px;
  right: 24px;
  display: flex;
  gap: 8px
}

.learnprog .titledots span {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 30px;
  opacity: .5
}

.learnprog .titledots span:nth-child(2) {
  opacity: .3
}

.learnprog .titledots span:nth-child(3) {
  opacity: .6
}

.learnprog .titlewrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1
}

.learnprog .titlewrap h1 {
  font-size: 62px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: .02em
}

.learnprog .titlewrap .subhed {
  font-size: 25px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 24px;
  opacity: .95
}

.learnprog .titlewrap .titleaction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  color: #fff;
  text-decoration: none;
  padding: 16px 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  transition: box-shadow .15s ease-out, background .15s ease-out
}

.learnprog .titlewrap .titleaction:hover {
  background: #ffffff26;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.learnprog .titlewrap .titleaction:active {
  box-shadow: 0 1px 2px 0 #4906bf14
}

.learnprog .overviewsec {
  padding: 48px 24px;
  background: #fff;
  position: relative
}

.learnprog .overviewsec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: repeating-linear-gradient(to right, #4906BF 0px, #4906BF 8px, transparent 8px, transparent 16px, #F51A93 16px, #F51A93 24px, transparent 24px, transparent 32px)
}

.learnprog .overviewcont {
  max-width: 800px;
  margin: 0 auto
}

.learnprog .overviewcont h2 {
  font-size: 46px;
  line-height: 1.15;
  color: #4906BF;
  margin: 0 0 24px;
  text-align: center;
  -webkit-text-stroke: 1px #4906BF;
  -webkit-text-fill-color: transparent
}

.learnprog .overviewgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 24px
}

.learnprog .overviewcard {
  padding: 24px;
  background: #fff;
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  transition: border-color .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden
}

.learnprog .overviewcard::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-right: 16px solid transparent;
  transition: border-color .18s ease-out, width .18s ease-out, height .18s ease-out
}

.learnprog .overviewcard:hover {
  border-color: #4906BF;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.learnprog .overviewcard:hover::before {
  width: 24px;
  height: 24px;
  border-top-color: #4906BF;
  border-right-color: #4906BF
}

.learnprog .overviewcard h3 {
  font-size: 25px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 16px;
  text-align: center
}

.learnprog .overviewcard p {
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0;
  text-align: center
}

.learnprog .overviewimg {
  margin: 24px 0 0;
  text-align: center
}

.learnprog .overviewimg img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 16px;
  filter: blur(4px);
  transition: filter .2s ease-out
}

.learnprog .overviewimg img:hover {
  filter: blur(0)
}

@media (max-width: 768px) {
  .learnprog .overviewgrid {
    grid-template-columns: 1fr
  }
}

.learnprog .instructsec {
  padding: 48px 24px;
  background: linear-gradient(217deg, #4906bf08 0%, #4906bf08 50%, #f51a9308 50%, #f51a9308 100%);
  position: relative;
  border-top: 2px solid #E6E6E6;
  border-bottom: 2px solid #E6E6E6
}

.learnprog .instructsec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../images/attachment-10.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(24px);
  opacity: .15;
  z-index: 0
}

.learnprog .instructcont {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.learnprog .instructcont h2 {
  font-size: 46px;
  line-height: 1.15;
  color: #F51A93;
  margin: 0 0 48px;
  text-align: center;
  -webkit-text-stroke: 1px #F51A93;
  -webkit-text-fill-color: transparent
}

.learnprog .instructlist {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.learnprog .instructrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 1px 2px 0 #f51a9314;
  transition: box-shadow .15s ease, transform .15s ease
}

.learnprog .instructrow:hover {
  box-shadow: 0 7px 18px 0 #f51a9314;
  transform: translateY(-2px)
}

.learnprog .instructrow .profpic {
  width: 80px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden
}

.learnprog .instructrow .profpic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top
}

.learnprog .instructrow .profinfo {
  text-align: center
}

.learnprog .instructrow .profinfo h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 8px
}

.learnprog .instructrow .profinfo p {
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0
}

.learnprog .instructrow .proficon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F51A93;
  border-radius: 46px;
  transition: transform .18s ease-out
}

.learnprog .instructrow:hover .proficon {
  transform: rotate(360deg)
}

.learnprog .instructrow .proficon svg {
  width: 24px;
  height: 24px;
  fill: #fff
}

@media (max-width: 768px) {
  .learnprog .instructrow {
    grid-template-columns: 1fr;
    text-align: center
  }

  .learnprog .instructrow .profpic {
    margin: 0 auto
  }
}

.learnprog .detailsec {
  padding: 48px 24px;
  background: #fff;
  position: relative
}

.learnprog .detailsec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: repeating-linear-gradient(to right, #F51A93 0px, #F51A93 8px, transparent 8px, transparent 16px, #4906BF 16px, #4906BF 24px, transparent 24px, transparent 32px)
}

.learnprog .detailcont {
  max-width: 800px;
  margin: 0 auto
}

.learnprog .detailcont h2 {
  font-size: 46px;
  line-height: 1.15;
  color: #4906BF;
  margin: 0 0 24px;
  text-align: center;
  -webkit-text-stroke: 1px #4906BF;
  -webkit-text-fill-color: transparent
}

.learnprog .detailquote {
  position: relative;
  padding: 24px 24px 24px 48px;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #4906bf0d 0%, #f51a930d 100%);
  border-left: 4px solid #F51A93;
  border-radius: 2px
}

.learnprog .detailquote::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 24px;
  width: 16px;
  height: 16px;
  background: #F51A93;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%)
}

.learnprog .detailquote p {
  font-size: 19px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0;
  text-align: center;
  font-style: italic
}

.learnprog .detailtext {
  margin: 0 0 24px
}

.learnprog .detailtext p {
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0 0 16px;
  text-align: center
}

.learnprog .detailtext p:last-child {
  margin-bottom: 0
}

.learnprog .detailtext a {
  color: #4906BF;
  text-decoration: none;
  border-bottom: 1px solid #4906BF;
  transition: border-color .1s ease, color .1s ease
}

.learnprog .detailtext a::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #4906BF;
  border-radius: 30px;
  margin-right: 4px;
  vertical-align: middle;
  transition: background .1s ease
}

.learnprog .detailtext a:hover {
  color: #F51A93;
  border-bottom-color: #F51A93
}

.learnprog .detailtext a:hover::before {
  background: #F51A93
}

.learnprog .detaillimit {
  margin: 24px 0 0;
  padding: 24px;
  background: #fff;
  border: 2px solid #E6E6E6;
  border-radius: 16px
}

.learnprog .detaillimit h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em
}

.learnprog .limitbar {
  position: relative;
  width: 100%;
  height: 24px;
  background: #E6E6E6;
  border-radius: 46px;
  overflow: hidden
}

.learnprog .limitbar .limitfill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 68%;
  background: linear-gradient(90deg, #4906BF 0%, #F51A93 100%);
  border-radius: 46px;
  transition: width .2s ease-out
}

.learnprog .limitbar:hover .limitfill {
  width: 70%
}

.learnprog .limitlabels {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0
}

.learnprog .limitlabels span {
  font-size: 13px;
  line-height: 1.4;
  color: #2a2a2a
}

.learnprog .limitlabels .used {
  color: #4906BF;
  font-weight: 600
}

.learnprog .limitlabels .available {
  color: #F51A93;
  font-weight: 600
}

@media (max-width: 768px) {
  .learnprog .titlewrap h1 {
    font-size: 46px
  }

  .learnprog .titlewrap .subhed {
    font-size: 19px
  }

  .learnprog .overviewcont h2,
  .learnprog .instructcont h2,
  .learnprog .detailcont h2 {
    font-size: 25px
  }

  .learnprog .overviewcard h3,
  .learnprog .instructrow .profinfo h3 {
    font-size: 19px
  }

  .learnprog .detailquote p {
    font-size: 16px
  }
}

.abtus {
  background: #fff;
  color: #1a1a1a;
  overflow-x: clip
}

.abtus ::selection {
  background: #4906bf26;
  color: #1a1a1a
}

.abtus .titlezone {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 48px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
  position: relative
}

.abtus .titlezone::before,
.abtus .titlezone::after {
  content: '';
  position: absolute;
  border: 1px solid #E6E6E6;
  pointer-events: none
}

.abtus .titlezone::before {
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-radius: 2px
}

.abtus .titlezone::after {
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border-radius: 2px;
  opacity: .4
}

.abtus .imgcard {
  width: 100%;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 7px 18px 0 #4906bf14;
  position: relative;
  z-index: 1
}

.abtus .imgcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85) brightness(1.05) contrast(1.1) hue-rotate(-8deg)
}

.abtus .txtwrap {
  padding: 48px 0 0
}

.abtus .txtwrap h1 {
  font-size: 62px;
  line-height: 1.15;
  color: #4906BF;
  margin: 0 0 24px;
  font-weight: 700
}

.abtus .txtwrap .subdesc {
  font-size: 19px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0
}

.abtus .storyarea {
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
  padding: 96px 24px;
  position: relative
}

.abtus .storyarea::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border: 2px solid #4906bf1f;
  border-radius: 46px;
  animation: slowpulse 8s ease-in-out infinite
}

@keyframes slowpulse {

  0%,
  100% {
    opacity: .3;
    transform: translateX(-50%) scale(1)
  }

  50% {
    opacity: .6;
    transform: translateX(-50%) scale(1.1)
  }
}

.abtus .storyarea::after {
  content: '';
  position: absolute;
  top: 96px;
  right: 80px;
  width: 120px;
  height: 120px;
  border: 2px solid #f51a9326;
  border-radius: 30px;
  animation: slowpulse 10s ease-in-out infinite 2s
}

.abtus .innercont {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.abtus .secdivide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 48px;
  gap: 48px
}

.abtus .secdivide::before,
.abtus .secdivide::after {
  content: '';
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #4906BF 0%, #4906BF 60%, transparent 100%)
}

.abtus .secdivide::after {
  background: linear-gradient(270deg, #F51A93 0%, #F51A93 60%, transparent 100%)
}

.abtus .storytxt {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin: 0 0 48px
}

.abtus .storycard {
  background: #fff;
  padding: 48px 24px;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 #4906bf14;
  text-align: center;
  position: relative;
  transition: box-shadow .15s ease-out, transform .15s ease-out
}

.abtus .storycard:hover {
  box-shadow: 0 12px 48px 0 #4906bf1a;
  transform: translateY(-4px)
}

.abtus .numring {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.abtus .numring svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.abtus .numring circle {
  fill: none;
  stroke-width: 2
}

.abtus .numring .ringbase {
  stroke: #E6E6E6
}

.abtus .numring .ringfill {
  stroke: #4906BF;
  stroke-dasharray: 220;
  stroke-dashoffset: 55;
  transition: stroke-dashoffset .2s ease
}

.abtus .storycard:hover .ringfill {
  stroke-dashoffset: 0
}

.abtus .numring .numval {
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
  color: #4906BF;
  position: relative;
  z-index: 1
}

.abtus .storycard h3 {
  font-size: 25px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em
}

.abtus .storycard p {
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0
}

.abtus .teamzone {
  padding: 96px 24px;
  background: #fff;
  position: relative
}

.abtus .teamzone::before {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 120px;
  width: 200px;
  height: 200px;
  border: 2px solid #f51a931a;
  border-radius: 46px;
  animation: slowpulse 12s ease-in-out infinite 4s
}

.abtus .teamcont {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.abtus .teamhead {
  text-align: center;
  margin: 0 0 48px
}

.abtus .teamhead h2 {
  font-size: 46px;
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px #4906BF;
  text-stroke: 2px #4906BF
}

.abtus .teamhead .subdesc {
  font-size: 19px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0
}

.abtus .teamgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px
}

.abtus .memcard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  background: linear-gradient(135deg, #fafbff 0%, #fff 50%, #fff8fd 100%);
  padding: 24px;
  border-radius: 30px;
  box-shadow: 0 1px 2px 0 #f51a9314;
  transition: box-shadow .12s ease, transform .12s ease
}

.abtus .memcard:hover {
  box-shadow: 0 12px 48px 0 #f51a931a;
  transform: translateY(-2px)
}

.abtus .memimg {
  width: 100%;
  height: 320px;
  border-radius: 30px;
  overflow: hidden;
  position: relative
}

.abtus .memimg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4906bf00;
  transition: background .18s ease-out;
  pointer-events: none
}

.abtus .memcard:hover .memimg::after {
  background: #4906bf26
}

.abtus .memimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block
}

.abtus .memtxt {
  padding: 16px 0
}

.abtus .memtxt h4 {
  font-size: 25px;
  line-height: 1.4;
  color: #4906BF;
  margin: 0 0 8px;
  font-weight: 700
}

.abtus .memrole {
  font-size: 16px;
  line-height: 1.4;
  color: #F51A93;
  margin: 0 0 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em
}

.abtus .memtxt p {
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0
}

.abtus .linkicon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4906BF;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.6;
  transition: color .12s ease
}

.abtus .linkicon::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  flex-shrink: 0
}

.abtus .linkicon:hover {
  color: #F51A93
}

@keyframes rotatein {
  0% {
    opacity: 0;
    transform: rotate(-8deg) translateY(16px)
  }

  100% {
    opacity: 1;
    transform: rotate(0deg) translateY(0)
  }
}

.abtus .storycard {
  animation: rotatein .6s ease-out backwards
}

.abtus .storycard:nth-child(1) {
  animation-delay: .1s
}

.abtus .storycard:nth-child(2) {
  animation-delay: .2s
}

.abtus .storycard:nth-child(3) {
  animation-delay: .3s
}

.abtus .memcard {
  animation: rotatein .5s ease-out backwards
}

.abtus .memcard:nth-child(1) {
  animation-delay: .15s
}

.abtus .memcard:nth-child(2) {
  animation-delay: .25s
}

@media (max-width: 1024px) {
  .abtus .titlezone {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 24px 48px
  }

  .abtus .imgcard {
    height: 400px
  }

  .abtus .txtwrap {
    padding: 0
  }

  .abtus .txtwrap h1 {
    font-size: 46px
  }

  .abtus .storytxt {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .abtus .teamgrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .abtus .memcard {
    grid-template-columns: 1fr
  }

  .abtus .memimg {
    height: 360px
  }
}

@media (max-width: 768px) {
  .abtus .titlezone {
    padding: 48px 16px 24px
  }

  .abtus .titlezone::before,
  .abtus .titlezone::after {
    left: 16px;
    right: 16px
  }

  .abtus .imgcard {
    height: 320px
  }

  .abtus .txtwrap h1 {
    font-size: 46px
  }

  .abtus .txtwrap .subdesc {
    font-size: 16px
  }

  .abtus .storyarea {
    padding: 72px 16px
  }

  .abtus .storyarea::before,
  .abtus .storyarea::after {
    display: none
  }

  .abtus .secdivide::before,
  .abtus .secdivide::after {
    width: 48px
  }

  .abtus .storycard {
    padding: 24px 16px
  }

  .abtus .teamzone {
    padding: 72px 16px
  }

  .abtus .teamzone::before {
    display: none
  }

  .abtus .teamhead h2 {
    font-size: 46px
  }

  .abtus .teamhead .subdesc {
    font-size: 16px
  }

  .abtus .memcard {
    padding: 16px
  }

  .abtus .memimg {
    height: 280px
  }
}

.successpage {
  background: linear-gradient(128deg, #4906BF 0%, #4906BF 32%, #F51A93 32%, #F51A93 68%, #E6E6E6 68%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px
}

.successpage .confirmwrap {
  background: #fff;
  max-width: 680px;
  width: 100%;
  padding: 48px;
  border-radius: 30px;
  box-shadow: 0 12px 48px 0 #4906bf1a;
  text-align: center
}

.successpage .iconcirc {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #4906BF 0%, #4906BF 48%, #F51A93 48%, #F51A93 100%);
  border-radius: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.successpage .iconcirc::before {
  content: '';
  width: 48px;
  height: 24px;
  border-left: 8px solid #fff;
  border-bottom: 8px solid #fff;
  transform: rotate(-45deg) translateY(-8px);
  position: absolute
}

.successpage .confirmwrap h1 {
  font-size: 46px;
  line-height: 1.15;
  color: #4906BF;
  margin: 0 0 16px;
  letter-spacing: .02em
}

.successpage .confirmwrap p {
  font-size: 19px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0 0 24px
}

.successpage .confirmwrap .detailbox {
  background: #fafbfc;
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  padding: 24px;
  margin: 0 0 24px;
  text-align: left
}

.successpage .confirmwrap .detailbox .inforow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #E6E6E6
}

.successpage .confirmwrap .detailbox .inforow:last-child {
  border-bottom: none
}

.successpage .confirmwrap .detailbox .inforow .lbl {
  font-size: 16px;
  line-height: 1.4;
  color: #6a6a6a
}

.successpage .confirmwrap .detailbox .inforow .val {
  font-size: 16px;
  line-height: 1.4;
  color: #2a2a2a;
  font-weight: 600
}

.successpage .confirmwrap .actiongrp {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.successpage .confirmwrap .actiongrp .btnprim {
  background: transparent;
  border: 2px solid #4906BF;
  color: #4906BF;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow .15s ease-out, background .15s ease-out, color .15s ease-out
}

.successpage .confirmwrap .actiongrp .btnprim:hover {
  background: #4906BF;
  color: #fff;
  box-shadow: 0 7px 18px 0 #4906bf14
}

.successpage .confirmwrap .actiongrp .btnsec {
  background: transparent;
  border: 2px solid #F51A93;
  color: #F51A93;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow .12s ease, background .12s ease, color .12s ease
}

.successpage .confirmwrap .actiongrp .btnsec:hover {
  background: #F51A93;
  color: #fff;
  box-shadow: 0 7px 18px 0 #f51a9314
}

.successpage .confirmwrap .footnote {
  font-size: 13px;
  line-height: 1.6;
  color: #6a6a6a;
  margin: 24px 0 0
}

@media (max-width: 768px) {
  .successpage {
    padding: 24px 16px
  }

  .successpage .confirmwrap {
    padding: 24px
  }

  .successpage .iconcirc {
    width: 90px;
    height: 90px
  }

  .successpage .iconcirc::before {
    width: 36px;
    height: 18px;
    border-left: 6px solid #fff;
    border-bottom: 6px solid #fff;
    transform: rotate(-45deg) translateY(-6px)
  }

  .successpage .confirmwrap h1 {
    font-size: 25px
  }

  .successpage .confirmwrap p {
    font-size: 16px
  }

  .successpage .confirmwrap .actiongrp {
    flex-direction: column
  }

  .successpage .confirmwrap .actiongrp .btnprim,
  .successpage .confirmwrap .actiongrp .btnsec {
    width: 100%
  }
}

h1, h2, h3, h4, h5, h6 {word-break: break-word;}