@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap";

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

body {
    margin: 0;
    scrollbar-gutter: stable;
    min-height: 100vh;
    font-family: 'Fira Code', monospace;
    background: #FFF;
    color: #1d1d1d
}

.topbar {
    background: linear-gradient(135deg, #FCA75F 0%, #fca75f1f 100%);
    padding: 12px 40px;
    border-bottom: 3px solid #7209B5
}

.topbar_grid {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.announce {
    font-size: 15px;
    line-height: 1.4;
    color: #2b2b2b;
    font-weight: 400
}

.announce_link {
    color: #7209B5;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.announce_link:hover {
    border-bottom-color: #7209B5
}

.announce_link:focus {
    outline: 2px solid #7209B5;
    outline-offset: 6px
}

.phonelink {
    font-size: 15px;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: 700;
    padding: 6px 12px;
    border: 3px solid #7209B5;
    border-radius: 40px;
    transition: background .22s cubic-bezier(0.0, 0, 0.2, 1), color .22s cubic-bezier(0.0, 0, 0.2, 1)
}

.phonelink:hover {
    background: #7209B5;
    color: #FFF
}

.phonelink:focus {
    outline: 2px solid #2b2b2b;
    outline-offset: 6px
}

.primaryheader {
    background: #fefefe;
    border-bottom: 2px solid #7209b526;
    padding: 24px 40px 12px;
    box-shadow: 1px 2px 6px 0 #7209b50f
}

.headerframe {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.brandbox {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #fca75f14 0%, #7209b514 100%);
    padding: 12px 24px;
    border-radius: 40px;
    border-bottom: 4px solid #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a;
    align-self: flex-start
}

.brandbox img {
    width: 92px;
    height: 92px;
    object-fit: contain
}

.navrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap
}

.navlist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    list-style: none;
    padding: 0;
    margin: 0
}

.navlist li {
    margin: 0
}

.navlink {
    font-size: 18px;
    line-height: 1.4;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: 400;
    padding: 12px 24px;
    display: block;
    border: 3px solid transparent;
    border-radius: 7px;
    transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1), background .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.navlink:hover {
    border-color: #FCA75F;
    background: #fca75f0f
}

.navlink:focus {
    outline: 2px solid #7209B5;
    outline-offset: 6px
}

.navlink.active {
    background: linear-gradient(135deg, #7209b51a 0%, #fca75f1a 100%);
    border-color: #7209B5;
    font-weight: 700
}

.sitefoot {
    background: linear-gradient(180deg, #fefefe 0%, #f7f7f7 100%);
    border-top: 4px solid #FCA75F;
    padding: 80px 40px 40px;
    box-shadow: 1px 10px 40px 0 #7209b51c inset
}

.footframe {
    max-width: 1500px;
    margin: 0 auto
}

.topfootrow {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 80px;
    padding-bottom: 40px;
    border-bottom: 3px solid #fca75f40
}

.footbrandbox {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #7209b50f 0%, #fca75f0f 100%);
    padding: 24px 40px;
    border-radius: 40px;
    border: 4px solid #7209B5;
    box-shadow: 1px 5px 18px 0 #7209b51a
}

.footbrandbox img {
    width: 96px;
    height: 96px;
    object-fit: contain
}

.footcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 80px 40px;
    margin-bottom: 80px
}

.footcol h2 {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #FCA75F
}

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

.footlink {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    text-decoration: none;
    display: inline-block;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.footlink:hover {
    color: #7209B5;
    border-bottom-color: #7209B5
}

.footlink:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.contactblock {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.contactitem {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 12px
}

.contactlabel {
    font-weight: 700;
    color: #7209B5;
    min-width: 80px
}

.contactvalue {
    color: #2b2b2b;
    border-bottom: 2px solid transparent;
    transition: border-color .22s cubic-bezier(0.0, 0, 0.2, 1)
}

a.contactitem:hover .contactvalue {
    border-bottom-color: #FCA75F
}

a.contactitem:focus {
    outline: 2px solid #7209B5;
    outline-offset: 6px
}

.addresstext {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.addresslabel {
    font-weight: 700;
    color: #7209B5;
    display: block;
    margin-bottom: 6px
}

.legalrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 40px;
    border-top: 2px solid #7209b526
}

.copyright {
    font-size: 15px;
    line-height: 1.4;
    color: #5a5a5a;
    margin: 0
}

.legallinks {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0
}

.legallink {
    font-size: 15px;
    line-height: 1.4;
    color: #5a5a5a;
    text-decoration: none;
    padding: 6px 12px;
    border: 2px solid transparent;
    border-radius: 7px;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.legallink:hover {
    color: #7209B5;
    border-color: #7209B5
}

.legallink:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.consentpanel {
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    max-width: 680px;
    background: #FFF;
    border: 4px solid #7209B5;
    border-radius: 13px;
    padding: 24px 40px;
    box-shadow: 1px 10px 40px 0 #7209b51c;
    z-index: 2000;
    display: none;
    transform: translateY(0);
    transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1), opacity .32s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1
}

.consentpanel.visible {
    display: block
}

.consentpanel.hidden_state {
    transform: translateY(-120%);
    opacity: 0
}

.consent_headline {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 12px
}

.consent_description {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0 0 24px
}

.consent_controls {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center
}

.consent_primary {
    font-size: 18px;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    color: #FFF;
    background: #7209B5;
    border: 4px solid #7209B5;
    border-radius: 7px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent_primary:hover {
    background: #5a0790;
    border-color: #5a0790
}

.consent_primary:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.consent_secondary {
    font-size: 18px;
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    color: #7209B5;
    background: transparent;
    border: 4px solid #FCA75F;
    border-radius: 7px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent_secondary:hover {
    background: #fca75f1a;
    color: #5a0790
}

.consent_secondary:focus {
    outline: 2px solid #7209B5;
    outline-offset: 6px
}

.consent_manage {
    font-size: 15px;
    font-family: 'Fira Code', monospace;
    color: #7209B5;
    background: transparent;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent_manage:hover {
    text-decoration-color: #7209B5
}

.consent_manage:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.preference_view {
    display: none
}

.preference_view.active {
    display: block
}

.preference_headline {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #FCA75F
}

.preference_groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px
}

.preference_group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fca75f0a;
    border: 2px solid #7209b526;
    border-radius: 7px
}

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

.preference_checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #7209B5
}

.preference_checkbox:disabled {
    cursor: not-allowed;
    opacity: .5
}

.preference_checkbox:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.preference_name {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0
}

.preference_desc {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
    padding-left: 36px
}

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

.preference_save {
    font-size: 18px;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    color: #FFF;
    background: #7209B5;
    border: 4px solid #7209B5;
    border-radius: 7px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.preference_save:hover {
    background: #5a0790;
    border-color: #5a0790
}

.preference_save:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.preference_back {
    font-size: 15px;
    font-family: 'Fira Code', monospace;
    color: #7209B5;
    background: transparent;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.preference_back:hover {
    text-decoration-color: #7209B5
}

.preference_back:focus {
    outline: 2px solid #FCA75F;
    outline-offset: 6px
}

.manage_trigger {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: #7209B5;
    border: 4px solid #FCA75F;
    border-radius: 24px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 5px 18px 0 #7209b51a;
    transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), transform .22s cubic-bezier(0.0, 0, 0.2, 1);
    z-index: 1999
}

.manage_trigger.visible {
    display: flex
}

.manage_trigger:hover {
    background: #5a0790;
    transform: scale(1.08)
}

.manage_trigger:focus {
    outline: 2px solid #1d1d1d;
    outline-offset: 6px
}

.manage_trigger::before {
    content: '';
    width: 28px;
    height: 28px;
    background: #FFF;
    border-radius: 3px
}

.manage_trigger::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 3px;
    background: #7209B5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

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

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

    .primaryheader {
        padding: 24px 24px 12px
    }

    .navrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .navlist {
        flex-direction: column;
        gap: 6px;
        width: 100%
    }

    .navlink {
        width: 100%
    }

    .sitefoot {
        padding: 40px 24px 24px
    }

    .footcols {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .topfootrow {
        justify-content: center;
        margin-bottom: 40px;
        padding-bottom: 24px
    }

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

    .legallinks {
        flex-direction: column;
        gap: 6px
    }

    .consentpanel {
        width: 85%;
        padding: 24px;
        bottom: 24px
    }

    .consent_controls {
        flex-direction: column;
        align-items: stretch
    }

    .consent_primary,
    .consent_secondary {
        width: 100%;
        text-align: center
    }

    .preference_actions {
        flex-direction: column
    }

    .preference_save {
        width: 100%
    }

    .manage_trigger {
        bottom: 24px;
        right: 24px
    }
}

@media (min-width: 769px) {
    .navlink {
        transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1), background .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .footlink {
        transition: color .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .announce_link {
        transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .phonelink {
        transition: background .22s cubic-bezier(0.0, 0, 0.2, 1), color .22s cubic-bezier(0.0, 0, 0.2, 1)
    }

    .legallink {
        transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .contactvalue {
        transition: border-color .22s cubic-bezier(0.0, 0, 0.2, 1)
    }

    .consent_primary {
        transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .consent_secondary {
        transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), color .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .consent_manage {
        transition: text-decoration-color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .preference_save {
        transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .preference_back {
        transition: text-decoration-color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .manage_trigger {
        transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), transform .22s cubic-bezier(0.0, 0, 0.2, 1)
    }
}

.policy-content {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 24px
}

@media (min-width: 768px) {
    .policy-content {
        padding: 80px 40px
    }
}

@media (min-width: 1024px) {
    .policy-content {
        padding: 80px
    }
}

.policy-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
    color: #1a1a1a
}

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

.policy-content ul,
.policy-content ol {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-left: 40px;
    color: #1a1a1a
}

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

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

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

.policy-content ul li {
    list-style-type: disc
}

.policy-content ol li {
    list-style-type: decimal
}

.policy-content strong,
.policy-content b {
    font-weight: 700;
    color: #0a0a0a
}

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

.policy-content a {
    color: #7209B5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px
}

@media (min-width: 1024px) {
    .policy-content a {
        transition: color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

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

.policy-content a:focus {
    outline: 2px solid #7209B5;
    outline-offset: 3px
}

.learnProgDetail {
    background: #FFF;
    min-height: 100vh
}

.learnProgDetail .topBanner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px
}

@media (min-width: 768px) {
    .learnProgDetail .topBanner {
        flex-direction: row;
        align-items: center;
        padding: 80px 40px
    }
}

.learnProgDetail .imgCol {
    flex: 0 0 auto;
    width: 100%
}

@media (min-width: 768px) {
    .learnProgDetail .imgCol {
        width: 38%
    }
}

.learnProgDetail .imgFrame {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    border: 2px solid #FCA75F
}

.learnProgDetail .imgFrame img {
    width: 100%;
    height: auto;
    display: block;
    filter: sepia(0.15) saturate(0.85) hue-rotate(-8deg)
}

.learnProgDetail .txtCol {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.learnProgDetail .metaRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center
}

.learnProgDetail .tagPill {
    background: linear-gradient(135deg, #FCA75F 0%, #7209B5 100%);
    color: #FFF;
    padding: 6px 12px;
    border-radius: 40px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600
}

.learnProgDetail .formatLabel {
    background: #F5F5F5;
    color: #2B2B2B;
    padding: 6px 12px;
    border-radius: 40px;
    font-size: 15px;
    line-height: 1.4
}

.learnProgDetail .numAccent {
    font-size: 68px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5;
    letter-spacing: -.02em
}

.learnProgDetail .mainHead {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0
}

.learnProgDetail .briefExplain {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0
}

.learnProgDetail .shapeDecor {
    position: absolute;
    pointer-events: none
}

.learnProgDetail .shapeOne {
    width: 80px;
    height: 80px;
    border: 3px solid #FCA75F;
    border-radius: 50%;
    top: -24px;
    right: -24px;
    opacity: .4
}

.learnProgDetail .shapeTwo {
    width: 60px;
    height: 60px;
    background: conic-gradient(from 45deg at 30% 30%, #7209B5, #FCA75F, #7209B5);
    border-radius: 7px;
    bottom: -12px;
    left: -12px;
    opacity: .3
}

.learnProgDetail .pricingPanel {
    background: #7209B5;
    padding: 80px 24px;
    position: relative;
    overflow: hidden
}

@media (min-width: 768px) {
    .learnProgDetail .pricingPanel {
        padding: 80px 40px
    }
}

.learnProgDetail .pricingInner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

@media (min-width: 768px) {
    .learnProgDetail .pricingInner {
        grid-template-columns: 1fr 2fr;
        gap: 80px
    }
}

.learnProgDetail .priceIntro {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.learnProgDetail .priceIntro h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #FFF;
    margin: 0
}

.learnProgDetail .priceIntro p {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffffe6;
    margin: 0
}

.learnProgDetail .priceDetails {
    background: #FFF;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow: 1px 10px 40px 0 #7209b51c
}

.learnProgDetail .priceAmount {
    display: flex;
    align-items: baseline;
    gap: 12px
}

.learnProgDetail .priceAmount span:first-child {
    font-size: 68px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5
}

.learnProgDetail .priceAmount span:last-child {
    font-size: 22px;
    line-height: 1.4;
    color: #4A4A4A
}

.learnProgDetail .priceMeta {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.learnProgDetail .metaPair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #E8E8E8
}

.learnProgDetail .metaPair:last-child {
    border-bottom: none
}

.learnProgDetail .metaLabel {
    font-size: 15px;
    line-height: 1.4;
    color: #6A6A6A
}

.learnProgDetail .metaValue {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #1A1A1A
}

.learnProgDetail .priceNote {
    font-size: 15px;
    line-height: 1.6;
    color: #6A6A6A;
    margin: 0;
    padding: 24px;
    background: #F9F9F9;
    border-radius: 13px
}

.learnProgDetail .enrollBtn {
    background: #FCA75F;
    color: #1A1A1A;
    border: 3px solid #FCA75F;
    padding: 12px 40px;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 768px) {
    .learnProgDetail .enrollBtn {
        transition: border-color .26s cubic-bezier(0.0, 0, 0.2, 1)
    }
}

.learnProgDetail .enrollBtn:hover {
    border-color: #7209B5
}

.learnProgDetail .programOutline {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px
}

@media (min-width: 768px) {
    .learnProgDetail .programOutline {
        padding: 80px 40px;
        flex-direction: row;
        gap: 80px
    }
}

.learnProgDetail .outlineLeft {
    flex: 0 0 auto;
    width: 100%
}

@media (min-width: 768px) {
    .learnProgDetail .outlineLeft {
        width: 35%
    }
}

.learnProgDetail .outlineLeft h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 24px
}

.learnProgDetail .outlineLeft p {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0
}

.learnProgDetail .outlineRight {
    flex: 1
}

.learnProgDetail .progContent {
    font-size: 18px;
    line-height: 1.6;
    color: #2B2B2B
}

.learnProgDetail .progContent p {
    margin: 0 0 24px
}

.learnProgDetail .progContent p:last-child {
    margin-bottom: 0
}

.learnProgDetail .progContent h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #1A1A1A;
    margin: 40px 0 24px
}

.learnProgDetail .progContent h2:first-child {
    margin-top: 0
}

.learnProgDetail .progContent ul,
.learnProgDetail .progContent ol {
    margin: 0 0 24px;
    padding-left: 24px
}

.learnProgDetail .progContent li {
    margin-bottom: 12px
}

.learnProgDetail .progContent li:last-child {
    margin-bottom: 0
}

.learnProgDetail .progContent mark {
    background: linear-gradient(135deg, #fca75f33 0%, #7209b533 100%);
    color: #1A1A1A;
    padding: 2px 6px;
    border-radius: 3px
}

.learnProgDetail .progContent cite {
    font-style: italic;
    color: #7209B5
}

.learnProgDetail .progContent dl {
    margin: 0 0 24px
}

.learnProgDetail .progContent dt {
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 6px
}

.learnProgDetail .progContent dd {
    margin: 0 0 12px 24px;
    color: #4A4A4A
}

.learnProgDetail .fullDesc {
    background: linear-gradient(157deg, #F8F8F8 0%, #FFF 100%);
    padding: 80px 24px
}

@media (min-width: 768px) {
    .learnProgDetail .fullDesc {
        padding: 80px 40px
    }
}

.learnProgDetail .descInner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

@media (min-width: 768px) {
    .learnProgDetail .descInner {
        grid-template-columns: 2fr 1fr;
        gap: 80px
    }
}

.learnProgDetail .descContent {
    font-size: 18px;
    line-height: 1.6;
    color: #2B2B2B
}

.learnProgDetail .descContent p {
    margin: 0 0 24px
}

.learnProgDetail .descContent p:last-child {
    margin-bottom: 0
}

.learnProgDetail .descContent h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #1A1A1A;
    margin: 40px 0 24px
}

.learnProgDetail .descContent h2:first-child {
    margin-top: 0
}

.learnProgDetail .descContent h3 {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: #1A1A1A;
    margin: 24px 0 12px
}

.learnProgDetail .descContent strong {
    font-weight: 700;
    color: #1A1A1A
}

.learnProgDetail .descContent ul,
.learnProgDetail .descContent ol {
    margin: 0 0 24px;
    padding-left: 24px
}

.learnProgDetail .descContent li {
    margin-bottom: 12px
}

.learnProgDetail .descContent li:last-child {
    margin-bottom: 0
}

.learnProgDetail .descContent dl {
    margin: 0 0 24px
}

.learnProgDetail .descContent dt {
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 6px
}

.learnProgDetail .descContent dd {
    margin: 0 0 12px 24px;
    color: #4A4A4A
}

.learnProgDetail .descContent details {
    margin: 0 0 24px;
    border: 2px solid #E8E8E8;
    border-radius: 13px;
    padding: 24px
}

.learnProgDetail .descContent summary {
    font-weight: 700;
    color: #1A1A1A;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.4
}

.learnProgDetail .descContent summary:hover {
    color: #7209B5
}

.learnProgDetail .descContent details[open] summary {
    margin-bottom: 12px
}

.learnProgDetail .pollBox {
    background: #FFF;
    border-radius: 24px;
    padding: 40px;
    border: 2px solid #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.learnProgDetail .pollBox h3 {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0
}

.learnProgDetail .pollForm {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.learnProgDetail .pollOption {
    position: relative
}

.learnProgDetail .pollOption input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.learnProgDetail .pollOption label {
    display: block;
    padding: 12px 24px;
    border: 2px solid #E8E8E8;
    border-radius: 7px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.4;
    color: #2B2B2B;
    transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), background .22s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 768px) {
    .learnProgDetail .pollOption label {
        transition: border-color .25s cubic-bezier(0.0, 0, 0.2, 1), background .25s cubic-bezier(0.0, 0, 0.2, 1)
    }
}

.learnProgDetail .pollOption label:hover {
    border-color: #FCA75F
}

.learnProgDetail .pollOption input[type="radio"]:checked+label {
    border-color: #7209B5;
    background: linear-gradient(135deg, #fca75f1a 0%, #7209b51a 100%);
    font-weight: 700;
    color: #7209B5
}

.learnProgDetail .pollSubmit {
    background: #7209B5;
    color: #FFF;
    border: 3px solid #7209B5;
    padding: 12px 40px;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
    transition: border-color .23s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 768px) {
    .learnProgDetail .pollSubmit {
        transition: border-color .27s cubic-bezier(0.0, 0, 0.2, 1)
    }
}

.learnProgDetail .pollSubmit:hover {
    border-color: #FCA75F
}

.learnProgDetail .engageStats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: #F5F5F5;
    border-radius: 13px
}

.learnProgDetail .statItem {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.learnProgDetail .statNum {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5
}

.learnProgDetail .statLabel {
    font-size: 15px;
    line-height: 1.4;
    color: #6A6A6A
}

.learnProgDetail .pathDeco {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 200px;
    height: 200px;
    pointer-events: none;
    opacity: .15
}

.learnProgDetail .pathDeco svg {
    width: 100%;
    height: 100%
}

@media (max-width: 767px) {
    .learnProgDetail .pathDeco {
        display: none
    }
}

@keyframes rowReveal {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

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

@media (min-width: 768px) {
    .learnProgDetail .topBanner {
        animation: rowReveal .5s cubic-bezier(0.4, 0, 0.2, 1) forwards
    }

    .learnProgDetail .pricingPanel {
        animation: rowReveal .5s cubic-bezier(0.4, 0, 0.2, 1) .15s forwards;
        opacity: 0
    }

    .learnProgDetail .programOutline {
        animation: rowReveal .5s cubic-bezier(0.4, 0, 0.2, 1) .3s forwards;
        opacity: 0
    }

    .learnProgDetail .fullDesc {
        animation: rowReveal .5s cubic-bezier(0.4, 0, 0.2, 1) .45s forwards;
        opacity: 0
    }
}

.learnProgDetail input::placeholder {
    color: #2B2B2B;
    opacity: .4
}

.learnProgDetail textarea::placeholder {
    color: #2B2B2B;
    opacity: .4
}

.learnProgDetail ::selection {
    background: #fca75f33;
    color: #1A1A1A
}

.biz {
    max-width: 1500px;
    margin: 0 auto;
    background: #FFF
}

.biz .tblk {
    position: relative;
    padding: 24px 24px 40px;
    background: linear-gradient(180deg, #f5f5f5 0%, #FFF 100%);
    overflow: visible
}

.biz .tblk::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 80px;
    height: 1px;
    background: #FCA75F
}

.biz .tblk::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 1px;
    height: 80px;
    background: #7209B5
}

.biz .tblk__imgwrap {
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 24px;
    border-radius: 3px;
    overflow: hidden
}

.biz .tblk__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(0.97);
    animation: imgGrow .24s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

@keyframes imgGrow {
    to {
        transform: scale(1)
    }
}

.biz .tblk__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #7209b54d 0%, #fca75f1a 100%);
    pointer-events: none
}

.biz .tblk__txt {
    max-width: 680px
}

.biz .tblk__h {
    font-size: 52px;
    line-height: 1.15;
    color: #1b1b1b;
    margin: 0 0 12px;
    letter-spacing: -.02em
}

.biz .tblk__desc {
    font-size: 18px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

@media (min-width: 768px) {
    .biz .tblk {
        padding: 40px 80px 80px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 80px
    }

    .biz .tblk__imgwrap {
        flex: 0 0 420px;
        height: 280px;
        margin-bottom: 0
    }

    .biz .tblk__txt {
        flex: 1;
        padding-top: 24px
    }
}

.biz .value {
    padding: 40px 24px;
    background: #FFF;
    position: relative
}

.biz .value::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FCA75F 0%, #7209B5 100%)
}

.biz .value__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto
}

.biz .value__left {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.biz .value__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0;
    font-weight: 700
}

.biz .value__p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.biz .value__right {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid #e8e8e8
}

.biz .value__img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    display: block
}

@media (min-width: 768px) {
    .biz .value {
        padding: 80px
    }

    .biz .value__grid {
        grid-template-columns: 1fr 1.4fr;
        gap: 80px;
        align-items: center
    }

    .biz .value__h {
        font-size: 52px
    }

    .biz .value__p {
        font-size: 18px
    }

    .biz .value__img {
        height: 480px
    }
}

.biz .cond {
    padding: 40px 24px;
    background: #fafbfc;
    position: relative;
    overflow: hidden
}

.biz .cond::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, #fca75f26 8px, #fca75f26 16px)
}

.biz .cond__inner {
    max-width: 1200px;
    margin: 0 auto
}

.biz .cond__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 40px;
    font-weight: 700;
    text-align: center
}

.biz .cond__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0
}

.biz .cond__item {
    background: #FFF;
    padding: 24px;
    border-radius: 7px;
    border: 2px solid transparent;
    position: relative;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.biz .cond__item::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 24px;
    width: 6px;
    height: 6px;
    background: #FCA75F;
    border-radius: 50%
}

.biz .cond__item:hover {
    border-color: #fca75f66
}

.biz .cond__itemh {
    font-size: 18px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 12px;
    padding-left: 18px;
    font-weight: 600
}

.biz .cond__itemp {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    padding-left: 18px
}

@media (min-width: 768px) {
    .biz .cond {
        padding: 80px
    }

    .biz .cond__h {
        font-size: 52px;
        margin-bottom: 80px
    }

    .biz .cond__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px
    }

    .biz .cond__item {
        padding: 40px 24px
    }

    .biz .cond__itemh {
        font-size: 22px
    }
}

.biz .hesit {
    padding: 40px 24px;
    background: #FFF;
    position: relative
}

.biz .hesit::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #7209B5 0%, #FCA75F 100%)
}

.biz .hesit__wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

.biz .hesit__txtside {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.biz .hesit__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0;
    font-weight: 700
}

.biz .hesit__p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.biz .hesit__imgside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.biz .hesit__imgbox {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e8e8e8
}

.biz .hesit__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(8px);
    animation: imgUnblur .28s cubic-bezier(0.0, 0, 0.2, 1) .2s forwards
}

@keyframes imgUnblur {
    to {
        filter: blur(0)
    }
}

@media (min-width: 768px) {
    .biz .hesit {
        padding: 80px
    }

    .biz .hesit__wrap {
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
        align-items: center
    }

    .biz .hesit__h {
        font-size: 52px
    }

    .biz .hesit__p {
        font-size: 18px
    }

    .biz .hesit__img {
        height: 320px
    }
}

.biz .environ {
    padding: 40px 24px;
    background: conic-gradient(from 135deg at 100% 0%, #fca75f14 0deg, #7209b50d 90deg, transparent 180deg);
    position: relative
}

.biz .environ__inner {
    max-width: 1200px;
    margin: 0 auto
}

.biz .environ__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 24px;
    font-weight: 700
}

.biz .environ__intro {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 40px;
    max-width: 720px
}

.biz .environ__profiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.biz .environ__prof {
    background: #FFF;
    border-radius: 13px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 2px solid #e8e8e8;
    transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.biz .environ__prof:hover {
    border-color: #7209b54d
}

.biz .environ__profimg {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center;
    border-radius: 7px;
    display: block
}

.biz .environ__proftxt {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.biz .environ__profname {
    font-size: 18px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0;
    font-weight: 600
}

.biz .environ__profrole {
    font-size: 15px;
    line-height: 1.4;
    color: #7209B5;
    margin: 0
}

.biz .environ__profp {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

@media (min-width: 768px) {
    .biz .environ {
        padding: 80px
    }

    .biz .environ__h {
        font-size: 52px;
        margin-bottom: 24px
    }

    .biz .environ__intro {
        font-size: 18px;
        margin-bottom: 80px
    }

    .biz .environ__profiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
    }

    .biz .environ__prof {
        flex-direction: row;
        align-items: flex-start
    }

    .biz .environ__profimg {
        width: 180px;
        flex-shrink: 0
    }
}

.biz .supp {
    padding: 40px 24px;
    background: #FFF;
    position: relative
}

.biz .supp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #FCA75F 50%, transparent 100%)
}

.biz .supp__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center
}

.biz .supp__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 24px;
    font-weight: 700
}

.biz .supp__lead {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 40px
}

.biz .supp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left
}

.biz .supp__card {
    background: #fafbfc;
    padding: 24px;
    border-radius: 7px;
    border: 2px solid #e8e8e8;
    position: relative;
    transition: all .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.biz .supp__card:hover {
    border-color: #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a
}

.biz .supp__cardh {
    font-size: 18px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 12px;
    font-weight: 600
}

.biz .supp__cardp {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

@media (min-width: 768px) {
    .biz .supp {
        padding: 80px
    }

    .biz .supp__h {
        font-size: 52px;
        margin-bottom: 24px
    }

    .biz .supp__lead {
        font-size: 18px;
        margin-bottom: 80px
    }

    .biz .supp__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
    }

    .biz .supp__card {
        padding: 40px 24px
    }

    .biz .supp__cardh {
        font-size: 22px
    }
}

.biz .appr {
    padding: 40px 24px 80px;
    background: linear-gradient(180deg, #FFF 0%, #fafbfc 100%);
    position: relative;
    overflow: hidden
}

.biz .appr::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: repeating-linear-gradient(90deg, transparent, transparent 12px, #7209b50a 12px, #7209b50a 13px);
    pointer-events: none
}

.biz .appr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: repeating-linear-gradient(0deg, transparent, transparent 12px, #fca75f0a 12px, #fca75f0a 13px);
    pointer-events: none
}

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

.biz .appr__top {
    margin-bottom: 40px
}

.biz .appr__h {
    font-size: 28px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 24px;
    font-weight: 700
}

.biz .appr__intro {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    max-width: 720px
}

.biz .appr__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

.biz .appr__col {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.biz .appr__item {
    background: #FFF;
    padding: 24px;
    border-radius: 40px;
    border: 3px solid #e8e8e8;
    position: relative;
    transition: border-color .28s cubic-bezier(0.0, 0, 0.2, 1)
}

.biz .appr__item:hover {
    border-color: #7209b54d
}

.biz .appr__itemh {
    font-size: 18px;
    line-height: 1.4;
    color: #1b1b1b;
    margin: 0 0 12px;
    font-weight: 600;
    position: relative;
    padding-left: 28px
}

.biz .appr__itemh::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #FCA75F
}

.biz .appr__itemp {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    padding-left: 28px
}

@media (min-width: 768px) {
    .biz .appr {
        padding: 80px 80px 120px
    }

    .biz .appr__top {
        margin-bottom: 80px
    }

    .biz .appr__h {
        font-size: 52px
    }

    .biz .appr__intro {
        font-size: 18px
    }

    .biz .appr__cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px
    }

    .biz .appr__itemh {
        font-size: 22px
    }

    .biz .tblk__img,
    .biz .hesit__img {
        transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .biz .tblk__imgwrap:hover .tblk__img,
    .biz .hesit__imgbox:hover .hesit__img {
        transform: scale(1.03)
    }
}

.subpage {
    background: #FFF;
    color: #1d1d1d;
    min-height: 100vh
}

.subpage .topblock {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    position: relative
}

.subpage .txtside {
    flex: 1;
    padding-right: 40px
}

.subpage .imgside {
    flex: 1;
    position: relative
}

.subpage .imgside img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 13px;
    opacity: .35;
    border: 1px solid #fca75f33
}

.subpage .decormark {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    opacity: .08
}

.subpage .decormark::before,
.subpage .decormark::after {
    content: '';
    position: absolute;
    background: #7209B5;
    border-radius: 3px
}

.subpage .decormark::before {
    width: 4px;
    height: 30px;
    top: 0;
    left: 10px;
    transform: rotate(-12deg)
}

.subpage .decormark::after {
    width: 4px;
    height: 30px;
    top: 0;
    left: 22px;
    transform: rotate(-12deg)
}

.subpage .decormark span {
    position: absolute;
    width: 4px;
    height: 30px;
    background: #7209B5;
    border-radius: 3px;
    top: 0;
    left: 34px;
    transform: rotate(-12deg)
}

.subpage .maintitle {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 24px;
    color: #2a2a2a;
    font-weight: 700;
    letter-spacing: -.02em
}

.subpage .pointlist {
    list-style: none;
    padding: 0;
    margin: 0
}

.subpage .pointlist li {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
    color: #3d3d3d
}

.subpage .pointlist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #FCA75F;
    border-radius: 40px;
    box-shadow: 1px 2px 6px 0 #fca75f0f
}

.subpage .pointlist li::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 11px;
    width: 10px;
    height: 2px;
    background: linear-gradient(90deg, #FCA75F 0%, transparent 100%)
}

.subpage .detailarea {
    background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
    border-top: 1px solid #7209b51f;
    position: relative;
    overflow: hidden
}

.subpage .detailarea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #fca75f0a 1px, transparent 1px), radial-gradient(circle, #7209b508 2px, transparent 2px);
    background-size: 40px 40px, 60px 60px;
    background-position: 0 0, 20px 30px;
    pointer-events: none
}

.subpage .detailwrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    position: relative
}

.subpage .detailgrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px
}

.subpage .primcol {
    position: relative
}

.subpage .sidecol {
    position: relative
}

.subpage .statsrow {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-bottom: 40px
}

.subpage .statbox {
    flex: 1;
    background: #FFF;
    border: 2px solid #FCA75F;
    border-radius: 7px;
    padding: 24px;
    position: relative;
    transition: transform .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.subpage .statbox:hover {
    transform: translateY(-4px)
}

.subpage .statnum {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5;
    margin: 0 0 6px
}

.subpage .statlabel {
    font-size: 15px;
    line-height: 1.4;
    color: #5a5a5a;
    margin: 0
}

.subpage .contentblock {
    background: #FFF;
    border: 1px solid #fca75f26;
    border-radius: 13px;
    padding: 40px;
    box-shadow: 1px 5px 18px 0 #7209b51a;
    position: relative
}

.subpage .contentblock h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 24px;
    color: #2a2a2a;
    font-weight: 700
}

.subpage .contentblock p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 24px;
    color: #3d3d3d
}

.subpage .contentblock p:last-child {
    margin-bottom: 0
}

.subpage .sidebox {
    background: #FFF;
    border: 3px solid #7209B5;
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
    transition: border-color .22s cubic-bezier(0.0, 0, 0.2, 1)
}

.subpage .sidebox:hover {
    border-color: #FCA75F
}

.subpage .sidebox h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: #2a2a2a;
    font-weight: 700
}

.subpage .sidebox p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: #5a5a5a
}

.subpage .indicatorwrap {
    margin-top: 40px;
    padding: 24px;
    background: linear-gradient(180deg, #fca75f0d 0%, #7209b50d 100%);
    border-radius: 7px;
    border: 1px solid #fca75f33
}

.subpage .progresstrack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.subpage .progresstrack::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #7209b526;
    z-index: 1
}

.subpage .progresstrack li {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1
}

.subpage .progresstrack li::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: #FFF;
    border: 3px solid #7209b54d;
    border-radius: 40px;
    margin: 0 auto 12px;
    transition: all .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.subpage .progresstrack li.current::before {
    background: #FCA75F;
    border-color: #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a
}

.subpage .progresstrack li span {
    font-size: 15px;
    line-height: 1.4;
    color: #5a5a5a;
    display: block
}

.subpage .progresstrack li.current span {
    color: #2a2a2a;
    font-weight: 700
}

.subpage .dividerline {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    height: 1px;
    background: #fca75f33;
    position: relative
}

.subpage .dividerline::before,
.subpage .dividerline::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 8px;
    background: #fca75f66;
    top: -3px
}

.subpage .dividerline::before {
    left: 25%
}

.subpage .dividerline::after {
    left: 75%
}

.subpage .dividerline span {
    position: absolute;
    width: 1px;
    height: 8px;
    background: #fca75f66;
    top: -3px;
    left: 50%
}

.subpage .layerblock {
    position: relative;
    overflow: hidden
}

.subpage .layerinner {
    position: relative;
    transition: opacity .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.subpage .layerblock:hover .layerinner {
    opacity: .7
}

.subpage .accentarrow {
    display: inline-block;
    margin-left: 6px;
    color: #FCA75F;
    font-weight: 700
}

.subpage .rotatearrive {
    animation: rotatesettle .6s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes rotatesettle {
    0% {
        transform: rotate(-8deg) scale(0.94);
        opacity: 0
    }

    60% {
        transform: rotate(2deg) scale(1.02);
        opacity: 1
    }

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

@media (max-width: 768px) {
    .subpage .topblock {
        flex-direction: column;
        padding: 40px 24px;
        gap: 24px
    }

    .subpage .txtside {
        padding-right: 0
    }

    .subpage .imgside img {
        height: 320px
    }

    .subpage .maintitle {
        font-size: 28px;
        margin-bottom: 24px
    }

    .subpage .pointlist li {
        font-size: 15px
    }

    .subpage .detailwrap {
        padding: 40px 24px
    }

    .subpage .detailgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .subpage .statsrow {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px
    }

    .subpage .statnum {
        font-size: 28px
    }

    .subpage .contentblock {
        padding: 24px
    }

    .subpage .contentblock h2 {
        font-size: 22px
    }

    .subpage .contentblock p {
        font-size: 15px
    }

    .subpage .sidebox {
        padding: 24px;
        margin-bottom: 12px
    }

    .subpage .sidebox h3 {
        font-size: 18px
    }

    .subpage .indicatorwrap {
        margin-top: 24px;
        padding: 12px
    }

    .subpage .progresstrack {
        flex-direction: column;
        gap: 24px
    }

    .subpage .progresstrack::before {
        left: 12px;
        top: 12px;
        bottom: 12px;
        width: 2px;
        height: auto;
        right: auto
    }

    .subpage .progresstrack li {
        text-align: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%
    }

    .subpage .progresstrack li::before {
        margin: 0;
        flex-shrink: 0
    }

    .subpage .progresstrack li span {
        text-align: left
    }

    .subpage .decormark {
        top: 24px;
        right: 24px;
        width: 40px;
        height: 40px
    }

    .subpage .decormark::before,
    .subpage .decormark::after,
    .subpage .decormark span {
        height: 20px
    }

    .subpage .layerblock:hover .layerinner {
        opacity: 1
    }

    .subpage .statbox {
        transition: none
    }

    .subpage .statbox:hover {
        transform: none
    }

    .subpage .sidebox {
        transition: none
    }

    .subpage .progresstrack li::before {
        transition: none
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .subpage .detailgrid {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .subpage .primcol {
        grid-column: 1 / -1
    }
}

.abtUs {
    background: #FFF;
    color: #2C2C2C;
    max-width: 100%;
    overflow-x: clip
}

.abtUs ::selection {
    background-color: #fca75f2e;
    color: #2C2C2C
}

.abtUs .titleWrap {
    position: relative;
    padding: 80px 24px 40px;
    background: linear-gradient(135deg, #FEFEFE 0%, #F7F7F7 100%);
    overflow: hidden
}

.abtUs .titleWrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, #fca75f08 12px, #fca75f08 24px);
    pointer-events: none
}

.abtUs .titleInner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start
}

.abtUs .titleText {
    flex: 1;
    position: relative;
    z-index: 2
}

.abtUs .titleText h1 {
    font-size: 52px;
    line-height: 1.15;
    color: #1A1A1A;
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -.02em
}

.abtUs .titleText h1 br {
    display: block
}

.abtUs .titleText p {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0;
    max-width: 620px
}

.abtUs .titleImgStrip {
    width: 280px;
    flex-shrink: 0;
    position: relative
}

.abtUs .titleImgStrip img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 13px
}

.abtUs .titleImgStrip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #7209b526 0%, #fca75f1f 100%);
    pointer-events: none;
    border-radius: 13px
}

.abtUs .svgDivider {
    width: 100%;
    display: block;
    height: 60px;
    margin: 0;
    padding: 0;
    line-height: 0
}

.abtUs .svgDivider svg {
    width: 100%;
    height: 100%;
    display: block
}

.abtUs .storySection {
    padding: 80px 24px;
    background: #FEFEFE;
    position: relative
}

.abtUs .storyContainer {
    max-width: 1500px;
    margin: 0 auto
}

.abtUs .storyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.abtUs .storyTextCol h2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 24px;
    font-weight: 700
}

.abtUs .storyTextCol p {
    font-size: 15px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0 0 24px
}

.abtUs .storyTextCol p:last-child {
    margin-bottom: 0
}

.abtUs .storyImgCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.abtUs .storyImgBox {
    position: relative;
    border: 2px solid #E8E8E8;
    border-radius: 13px;
    overflow: hidden;
    background: #FFF
}

.abtUs .storyImgBox::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #FCA75F 0%, #7209B5 100%);
    z-index: 2
}

.abtUs .storyImgBox img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (hover: hover) {
    .abtUs .storyImgBox:hover img {
        transform: scale(1.05)
    }
}

.abtUs .metricsSection {
    padding: 80px 24px;
    background: #fca75f0a;
    position: relative
}

.abtUs .metricsSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #FCA75F 50%, transparent 100%)
}

.abtUs .metricsContainer {
    max-width: 1500px;
    margin: 0 auto
}

.abtUs .metricsHeader {
    text-align: center;
    margin-bottom: 80px
}

.abtUs .metricsHeader h2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 24px;
    font-weight: 700
}

.abtUs .metricsHeader p {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0 auto;
    max-width: 720px
}

.abtUs .metricsRow {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    animation: metricReveal .24s cubic-bezier(0.0, 0, 0.2, 1) backwards
}

@keyframes metricReveal {
    from {
        opacity: 0;
        transform: scale(0.9)
    }

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

.abtUs .metricItem {
    flex: 1;
    max-width: 360px;
    padding: 40px;
    text-align: center;
    position: relative;
    background: #FFF;
    border: 2px solid #E8E8E8
}

.abtUs .metricItem:first-child {
    border-radius: 24px 0 0 24px
}

.abtUs .metricItem:last-child {
    border-radius: 0 24px 24px 0
}

.abtUs .metricItem:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, #7209B5 50%, transparent 100%)
}

.abtUs .metricNum {
    font-size: 52px;
    line-height: 1.15;
    color: #7209B5;
    font-weight: 700;
    margin: 0 0 12px;
    display: block
}

.abtUs .metricLabel {
    font-size: 15px;
    line-height: 1.4;
    color: #4A4A4A;
    margin: 0
}

.abtUs .teamSection {
    padding: 80px 24px;
    background: #FFF;
    position: relative
}

.abtUs .teamContainer {
    max-width: 1500px;
    margin: 0 auto
}

.abtUs .teamIntro {
    margin-bottom: 80px
}

.abtUs .teamIntro h2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 24px;
    font-weight: 700
}

.abtUs .teamIntro p {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0;
    max-width: 820px
}

.abtUs .teamGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
}

.abtUs .teamCard {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    padding: 40px;
    background: #FEFEFE;
    border: 3px solid #E8E8E8;
    border-radius: 13px;
    position: relative;
    transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1);
    animation: teamCardReveal .28s cubic-bezier(0.0, 0, 0.2, 1) backwards
}

@keyframes teamCardReveal {
    from {
        opacity: 0;
        transform: scale(0.9)
    }

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

.abtUs .teamCard:nth-child(1) {
    animation-delay: .05s
}

.abtUs .teamCard:nth-child(2) {
    animation-delay: .1s
}

@media (hover: hover) {
    .abtUs .teamCard:hover {
        border-color: #FCA75F
    }

    .abtUs .teamCard:hover .teamCornerAccent {
        width: 32px;
        height: 32px
    }
}

.abtUs .teamCornerAccent {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 24px;
    height: 24px;
    background: conic-gradient(from 90deg at 100% 0%, #7209B5 0deg, #FCA75F 90deg, transparent 90deg);
    border-radius: 0 13px 0 0;
    transition: width .24s cubic-bezier(0.4, 0, 0.2, 1), height .24s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none
}

.abtUs .teamPortrait {
    width: 140px;
    height: 175px;
    flex-shrink: 0;
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid #E8E8E8
}

.abtUs .teamPortrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

.abtUs .teamContent {
    flex: 1
}

.abtUs .teamContent h3 {
    font-size: 22px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 6px;
    font-weight: 700
}

.abtUs .teamRole {
    font-size: 15px;
    line-height: 1.4;
    color: #7209B5;
    margin: 0 0 24px;
    font-weight: 600
}

.abtUs .teamContent p {
    font-size: 15px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0
}

.abtUs .valuesSection {
    padding: 80px 24px;
    background: linear-gradient(135deg, #FEFEFE 0%, #7209b505 100%);
    position: relative
}

.abtUs .valuesContainer {
    max-width: 1500px;
    margin: 0 auto
}

.abtUs .valuesHeader {
    margin-bottom: 80px
}

.abtUs .valuesHeader h2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 24px;
    font-weight: 700
}

.abtUs .valuesHeader p {
    font-size: 18px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0;
    max-width: 820px
}

.abtUs .valuesList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.abtUs .valueBox {
    padding: 40px;
    background: #FFF;
    border: 2px solid #E8E8E8;
    border-radius: 40px;
    position: relative;
    box-shadow: 1px 2px 6px 0 #fca75f0f;
    transition: box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (hover: hover) {
    .abtUs .valueBox:hover {
        box-shadow: 1px 10px 40px 0 #fca75f1c
    }
}

.abtUs .valueIconBox {
    width: 56px;
    height: 56px;
    border: 3px solid #7209B5;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    background: #FEFEFE
}

.abtUs .valueIconBox::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: conic-gradient(from 0deg at 50% 50%, #FCA75F 0deg, #7209B5 180deg, #FCA75F 360deg);
    border-radius: 3px
}

.abtUs .valueBox h3 {
    font-size: 22px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0 0 12px;
    font-weight: 700
}

.abtUs .valueBox p {
    font-size: 15px;
    line-height: 1.6;
    color: #4A4A4A;
    margin: 0
}

@media (max-width: 1024px) {
    .abtUs .titleWrap {
        padding: 60px 24px 40px
    }

    .abtUs .titleInner {
        flex-direction: column;
        gap: 40px
    }

    .abtUs .titleImgStrip {
        width: 100%;
        max-width: 400px;
        margin: 0 auto
    }

    .abtUs .titleImgStrip img {
        height: 380px
    }

    .abtUs .titleText h1 {
        font-size: 42px
    }

    .abtUs .storyGrid {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .abtUs .storyImgCol {
        order: -1
    }

    .abtUs .metricsRow {
        flex-direction: column;
        align-items: stretch
    }

    .abtUs .metricItem {
        max-width: 100%;
        border-radius: 24px
    }

    .abtUs .metricItem:first-child,
    .abtUs .metricItem:last-child {
        border-radius: 24px
    }

    .abtUs .metricItem:not(:last-child)::after {
        display: none
    }

    .abtUs .teamGrid {
        grid-template-columns: 1fr
    }

    .abtUs .valuesList {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

@media (max-width: 768px) {
    .abtUs .titleWrap {
        padding: 40px 12px 24px
    }

    .abtUs .titleText h1 {
        font-size: 32px;
        margin-bottom: 12px
    }

    .abtUs .titleText p {
        font-size: 15px
    }

    .abtUs .titleImgStrip img {
        height: 320px
    }

    .abtUs .storySection,
    .abtUs .metricsSection,
    .abtUs .teamSection,
    .abtUs .valuesSection {
        padding: 60px 12px
    }

    .abtUs .storyImgCol {
        grid-template-columns: 1fr
    }

    .abtUs .storyImgBox img {
        height: 200px
    }

    .abtUs .metricsHeader,
    .abtUs .teamIntro,
    .abtUs .valuesHeader {
        margin-bottom: 40px
    }

    .abtUs .metricItem {
        padding: 24px
    }

    .abtUs .metricNum {
        font-size: 42px
    }

    .abtUs .teamCard {
        flex-direction: column;
        padding: 24px
    }

    .abtUs .teamPortrait {
        width: 100%;
        max-width: 200px;
        height: 250px;
        margin: 0 auto
    }

    .abtUs .valueBox {
        padding: 24px
    }
}

.contactPg {
    background: #FFF;
    color: #1a1a2e;
    overflow-x: clip
}

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

.contactPg .topZone {
    position: relative;
    padding: 80px 24px;
    background: radial-gradient(circle at 92% 8%, #fca75f24, #fca75f05 48%, #FFF 82%);
    overflow: hidden
}

.topZone .wrapMax {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.topZone .bgLetter {
    position: absolute;
    top: -40px;
    right: 80px;
    font-size: 380px;
    font-weight: 700;
    color: #7209b50a;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 1
}

.topZone .headRow {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px
}

.topZone .mainHead {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #2d2d3f;
    margin: 0;
    position: relative;
    opacity: 0;
    animation: fadeInUp .26s cubic-bezier(0.4, 0, 0.2, 1) .1s forwards
}

.topZone .mainHead::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 12px;
    width: 18px;
    height: 18px;
    background: conic-gradient(from 45deg at 50% 50%, #FCA75F, #7209B5, #FCA75F);
    border-radius: 3px
}

.topZone .descTxt {
    font-size: 18px;
    line-height: 1.6;
    color: #4a4a5e;
    margin: 0;
    opacity: 0;
    animation: fadeInUp .24s cubic-bezier(0.0, 0, 0.2, 1) .24s forwards
}

.topZone .imgFrame {
    margin-top: 40px;
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    max-width: 840px;
    opacity: 0;
    animation: fadeInUp .28s cubic-bezier(0.4, 0, 0.2, 1) .38s forwards
}

.topZone .imgFrame::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #fca75f33;
    border-radius: 13px;
    pointer-events: none;
    z-index: 2
}

.topZone .imgFrame img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    filter: blur(0);
    animation: zoomSlow 18s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate
}

.topZone .imgFrame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 45%, #ffffff4d 100%);
    pointer-events: none;
    z-index: 1
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

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

    to {
        transform: scale(1.08)
    }
}

.contactPg .formZone {
    position: relative;
    padding: 80px 24px;
    background: #fafafd;
    clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
    margin-top: -40px
}

.formZone .wrapMax {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px
}

.formZone .infoCol {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.formZone .infoBlock {
    padding: 24px;
    background: #FFF;
    border: 3px solid #e8e8f0;
    border-radius: 7px;
    position: relative;
    transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.formZone .infoBlock::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid transparent;
    border-radius: 7px;
    opacity: 0;
    transition: opacity .26s cubic-bezier(0.0, 0, 0.2, 1) 0.08s, border-color .26s cubic-bezier(0.0, 0, 0.2, 1) .08s;
    pointer-events: none
}

.formZone .infoBlock:hover {
    border-color: #fca75f66
}

.formZone .infoBlock:hover::before {
    opacity: 1;
    border-color: #7209b533
}

.formZone .infoLabel {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #7209B5;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

.formZone .infoLabel::before {
    content: '';
    width: 6px;
    height: 6px;
    background: conic-gradient(from 90deg at 50% 50%, #FCA75F, #7209B5, #FCA75F);
    border-radius: 50%
}

.formZone .infoValue {
    font-size: 18px;
    line-height: 1.6;
    color: #2d2d3f;
    margin: 0
}

.formZone .infoValue a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #fca75f4d;
    transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.formZone .infoValue a:hover {
    border-bottom-color: #FCA75F
}

.formZone .formCard {
    background: #FFF;
    border: 4px solid #7209B5;
    border-radius: 13px;
    padding: 40px;
    box-shadow: 1px 5px 18px 0 #7209b51a
}

.formZone .formHead {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: #2d2d3f;
    margin: 0 0 24px
}

.formZone .formDesc {
    font-size: 15px;
    line-height: 1.6;
    color: #5a5a6e;
    margin: 0 0 40px
}

.formZone .formGrid {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.formZone .fieldWrap {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.formZone .fieldLabel {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #2d2d3f;
    margin: 0
}

.formZone .fieldLabel .reqMark {
    color: #FCA75F;
    margin-left: 2px
}

.formZone .fieldInput {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    line-height: 1.6;
    color: #2d2d3f;
    background: #FFF;
    border: 3px solid #d0d0e0;
    border-radius: 7px;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none
}

.formZone .fieldInput::placeholder {
    color: #2d2d3f;
    opacity: .4
}

.formZone .fieldInput:focus {
    border-color: #7209B5;
    box-shadow: inset 1px 2px 6px 0 #7209b50f
}

.formZone .fieldInput:hover:not(:focus) {
    border-color: #fca75f99
}

.formZone .selectWrap {
    position: relative
}

.formZone .selectWrap::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #7209B5;
    pointer-events: none
}

.formZone .fieldSelect {
    width: 100%;
    padding: 12px 24px;
    padding-right: 48px;
    font-size: 15px;
    line-height: 1.6;
    color: #2d2d3f;
    background: #FFF;
    border: 3px solid #d0d0e0;
    border-radius: 7px;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    appearance: none;
    cursor: pointer
}

.formZone .fieldSelect:focus {
    border-color: #7209B5;
    box-shadow: inset 1px 2px 6px 0 #7209b50f
}

.formZone .fieldSelect:hover:not(:focus) {
    border-color: #fca75f99
}

.formZone .privacyWrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px
}

.formZone .privacyCheck {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    border: 3px solid #d0d0e0;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), background .2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    outline: none;
    position: relative
}

.formZone .privacyCheck:checked {
    background: #7209B5;
    border-color: #7209B5
}

.formZone .privacyCheck:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.formZone .privacyCheck:hover:not(:checked) {
    border-color: #fca75f99
}

.formZone .privacyTxt {
    font-size: 15px;
    line-height: 1.6;
    color: #5a5a6e;
    margin: 0
}

.formZone .privacyTxt a {
    color: #7209B5;
    text-decoration: none;
    border-bottom: 1px solid #7209b54d;
    transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.formZone .privacyTxt a:hover {
    border-bottom-color: #7209B5
}

.formZone .submitBtn {
    width: 100%;
    padding: 12px 40px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #FFF;
    background: #7209B5;
    border: 4px solid #7209B5;
    border-radius: 40px;
    cursor: pointer;
    transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), background .22s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 24px;
    position: relative;
    overflow: hidden
}

.formZone .submitBtn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 3px solid transparent;
    border-radius: 40px;
    opacity: 0;
    transition: opacity .26s cubic-bezier(0.0, 0, 0.2, 1) 0.06s, border-color .26s cubic-bezier(0.0, 0, 0.2, 1) .06s;
    pointer-events: none
}

.formZone .submitBtn:hover {
    background: #5a0794;
    border-color: #FCA75F
}

.formZone .submitBtn:hover::before {
    opacity: 1;
    border-color: #fca75f66
}

.formZone .submitBtn:active {
    transform: scale(0.98)
}

.formZone .dashDivider {
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #7209B5 0px, #7209B5 8px, transparent 8px, transparent 16px);
    margin: 40px 0
}

.formZone .contactGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.formZone .contactItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fca75f0a;
    border-radius: 7px;
    border-left: 0
}

.formZone .contactIcon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: conic-gradient(from 135deg at 50% 50%, #FCA75F, #7209B5, #FCA75F);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FFF;
    font-weight: 700
}

.formZone .contactDet {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.formZone .contactType {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: #7209B5;
    margin: 0
}

.formZone .contactVal {
    font-size: 15px;
    line-height: 1.6;
    color: #2d2d3f;
    margin: 0
}

.formZone .contactVal a {
    color: inherit;
    text-decoration: none;
    transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.formZone .contactVal a:hover {
    color: #7209B5
}

@media (min-width: 768px) {
    .topZone {
        padding: 120px 40px
    }

    .topZone .bgLetter {
        font-size: 520px;
        right: 120px;
        top: -80px
    }

    .topZone .headRow {
        max-width: 880px;
        gap: 40px
    }

    .topZone .mainHead {
        font-size: 68px
    }

    .topZone .mainHead::before {
        width: 24px;
        height: 24px;
        left: -48px;
        top: 18px
    }

    .topZone .descTxt {
        font-size: 22px
    }

    .topZone .imgFrame {
        max-width: 1100px
    }

    .topZone .imgFrame img {
        height: 540px
    }

    .formZone {
        padding: 120px 40px
    }

    .formZone .wrapMax {
        grid-template-columns: 380px 1fr;
        gap: 80px
    }

    .formZone .formCard {
        padding: 40px
    }

    .formZone .formHead {
        font-size: 28px
    }

    .formZone .formGrid {
        gap: 24px
    }

    .formZone .contactGrid {
        grid-template-columns: 1fr
    }

    .formZone .fieldInput,
    .formZone .fieldSelect {
        transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .formZone .submitBtn {
        transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), background .22s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1)
    }
}

@media (min-width: 1024px) {
    .topZone .imgFrame img {
        height: 620px
    }

    .formZone .wrapMax {
        grid-template-columns: 420px 1fr
    }

    .formZone .contactGrid {
        grid-template-columns: 1fr
    }
}

.learnProg {
    max-width: 1500px;
    margin: 0 auto;
    background: #FFF;
    color: #1d1d1d;
    overflow-x: clip
}

.learnProg .titleArea {
    position: relative;
    padding: 80px 24px;
    background: radial-gradient(circle at top left, #fca75f14 0%, #fff0 65%);
    overflow: hidden
}

.learnProg .titleArea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./photo_archive/slideshow-20.jpg);
    background-size: cover;
    background-position: center;
    opacity: .04;
    z-index: 0;
    pointer-events: none
}

.learnProg .titleArea::after {
    content: '';
    position: absolute;
    top: -12%;
    right: -8%;
    width: 420px;
    height: 420px;
    border: 2px solid #7209b51f;
    border-radius: 40px;
    transform: rotate(15deg);
    z-index: 0;
    pointer-events: none
}

.learnProg .titleContent {
    position: relative;
    z-index: 1;
    max-width: 780px
}

.learnProg .titleContent h1 {
    font-size: 68px;
    line-height: 1.15;
    margin: 0 0 24px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .titleContent p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

@media (max-width: 768px) {
    .learnProg .titleArea {
        padding: 40px 12px
    }

    .learnProg .titleContent h1 {
        font-size: 52px
    }

    .learnProg .titleArea::after {
        width: 280px;
        height: 280px;
        top: -5%;
        right: -15%
    }
}

.learnProg .catalog {
    padding: 80px 24px;
    background: linear-gradient(155deg, #FFF 0%, #fca75f08 100%)
}

.learnProg .catalogHead {
    max-width: 680px;
    margin: 0 0 40px
}

.learnProg .catalogHead h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .catalogHead p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

.learnProg .courseGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 40px;
    animation: catalogReveal .24s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

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

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

.learnProg .courseCard {
    background: #FFF;
    border: 3px solid #e8e8e8;
    border-radius: 13px;
    overflow: hidden;
    transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column
}

.learnProg .courseCard:nth-child(1) {
    animation: cardAppear .24s cubic-bezier(0.0, 0, 0.2, 1) 0s forwards
}

.learnProg .courseCard:nth-child(2) {
    animation: cardAppear .24s cubic-bezier(0.0, 0, 0.2, 1) .08s forwards
}

.learnProg .courseCard:nth-child(3) {
    animation: cardAppear .24s cubic-bezier(0.0, 0, 0.2, 1) .16s forwards
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@media (min-width: 769px) {
    .learnProg .courseCard:hover {
        border-color: #FCA75F;
        box-shadow: 1px 5px 18px 0 #fca75f1a
    }
}

.learnProg .courseImgWrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f5f5f5
}

.learnProg .courseImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 769px) {
    .learnProg .courseCard:hover .courseImgWrap img {
        transform: scale(1.05)
    }
}

.learnProg .courseMeta {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    z-index: 2
}

.learnProg .courseTag {
    background: #fffffff2;
    border: 2px solid #FCA75F;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 600;
    color: #1d1d1d
}

.learnProg .courseLevel {
    background: #7209b5eb;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 600;
    color: #FFF
}

.learnProg .courseBody {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.learnProg .courseBody h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .courseBody h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 769px) {
    .learnProg .courseBody h3 a:hover {
        color: #7209B5
    }
}

.learnProg .courseDesc {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
    color: #3d3d3d;
    flex-grow: 1
}

.learnProg .courseStats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 24px;
    padding: 24px 0 0;
    border-top: 2px solid #e8e8e8
}

.learnProg .statItem {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.learnProg .statLabel {
    font-size: 15px;
    line-height: 1.15;
    color: #7d7d7d
}

.learnProg .statValue {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .courseFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.learnProg .priceBlock {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.learnProg .priceMain {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5
}

.learnProg .priceNote {
    font-size: 15px;
    line-height: 1.15;
    color: #7d7d7d
}

.learnProg .courseBtn {
    background: transparent;
    border: 3px solid #FCA75F;
    color: #1d1d1d;
    padding: 12px 24px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), background .24s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap
}

@media (min-width: 769px) {
    .learnProg .courseBtn:hover {
        border-color: #7209B5;
        background: #7209b50d
    }
}

@media (max-width: 768px) {
    .learnProg .catalog {
        padding: 40px 12px
    }

    .learnProg .catalogHead h2 {
        font-size: 28px
    }

    .learnProg .courseGrid {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

.learnProg .valuesSec {
    padding: 80px 24px;
    background: #FFF;
    position: relative
}

.learnProg .valuesSec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FCA75F 0%, #7209B5 100%)
}

.learnProg .valuesLayout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: start
}

.learnProg .valuesLeft h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 24px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .valuesLeft p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

.learnProg .valuesRight {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
}

.learnProg .valueBox {
    background: linear-gradient(135deg, #fca75f0a 0%, #7209b50a 100%);
    border: 2px solid #e8e8e8;
    border-radius: 13px;
    padding: 40px 24px;
    text-align: left;
    transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 769px) {
    .learnProg .valueBox:hover {
        border-color: #FCA75F
    }
}

.learnProg .valueNum {
    font-size: 68px;
    line-height: 1.15;
    font-weight: 700;
    color: #7209B5;
    margin: 0 0 12px
}

.learnProg .valueLabel {
    font-size: 15px;
    line-height: 1.6;
    color: #7d7d7d;
    margin: 0
}

@media (max-width: 768px) {
    .learnProg .valuesSec {
        padding: 40px 12px
    }

    .learnProg .valuesLayout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .learnProg .valuesLeft h2 {
        font-size: 28px
    }

    .learnProg .valuesRight {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .learnProg .valueNum {
        font-size: 52px
    }
}

.learnProg .processSec {
    padding: 80px 24px;
    background: linear-gradient(225deg, #7209b50d 0%, #fca75f0d 100%);
    position: relative
}

.learnProg .processHead {
    max-width: 680px;
    margin: 0 0 80px
}

.learnProg .processHead h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .processHead p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

.learnProg .processSteps {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    max-width: 900px;
    margin: 0 auto
}

.learnProg .processSteps::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(180deg, #FCA75F 0%, #7209B5 100%);
    z-index: 0
}

.learnProg .stepItem {
    display: flex;
    gap: 24px;
    position: relative;
    z-index: 1
}

.learnProg .stepDot {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #FFF;
    border: 3px solid #FCA75F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1d;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), background .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.learnProg .stepItem:nth-child(2) .stepDot {
    border-color: #7209B5
}

.learnProg .stepItem:nth-child(3) .stepDot {
    border-color: #FCA75F
}

@media (min-width: 769px) {
    .learnProg .stepItem:hover .stepDot {
        background: #FCA75F;
        border-color: #FCA75F;
        color: #FFF
    }

    .learnProg .stepItem:nth-child(2):hover .stepDot {
        background: #7209B5;
        border-color: #7209B5
    }
}

.learnProg .stepContent {
    flex-grow: 1;
    padding: 0 0 24px
}

.learnProg .stepContent h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .stepContent p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

@media (max-width: 768px) {
    .learnProg .processSec {
        padding: 40px 12px
    }

    .learnProg .processHead {
        margin: 0 0 40px
    }

    .learnProg .processHead h2 {
        font-size: 28px
    }

    .learnProg .processSteps::before {
        left: 14px
    }

    .learnProg .stepDot {
        width: 30px;
        height: 30px;
        font-size: 15px
    }

    .learnProg .stepItem {
        gap: 12px
    }
}

.learnProg .teamSec {
    padding: 80px 24px;
    background: #FFF;
    position: relative
}

.learnProg .teamSec::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(270deg, #FCA75F 0%, #7209B5 100%)
}

.learnProg .teamHead {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 80px
}

.learnProg .teamHead h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .teamHead p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    color: #3d3d3d
}

.learnProg .teamGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto
}

.learnProg .teamMember {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

.learnProg .memberImgWrap {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 5/7;
    border-radius: 24px;
    overflow: hidden;
    border: 3px solid #e8e8e8;
    transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 769px) {
    .learnProg .teamMember:hover .memberImgWrap {
        border-color: #FCA75F
    }
}

.learnProg .memberImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (min-width: 769px) {
    .learnProg .teamMember:hover .memberImgWrap img {
        transform: scale(1.08)
    }
}

.learnProg .memberInfo h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 6px;
    font-weight: 700;
    color: #1d1d1d
}

.learnProg .memberRole {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: #7d7d7d
}

@media (max-width: 768px) {
    .learnProg .teamSec {
        padding: 40px 12px
    }

    .learnProg .teamHead {
        margin: 0 auto 40px
    }

    .learnProg .teamHead h2 {
        font-size: 28px
    }

    .learnProg .teamGrid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .learnProg .memberImgWrap {
        max-width: 220px
    }
}

.srvcs {
    background: #FFF;
    color: #1d1d1d;
    max-width: 1500px;
    margin: 0 auto
}

.srvcs::selection {
    background: #fca75f2e;
    color: #1d1d1d
}

.srvcs input::placeholder,
.srvcs textarea::placeholder {
    color: inherit;
    opacity: .4
}

.srvcs .leadZone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    margin-bottom: 80px
}

.srvcs .leadLeft {
    background: #7209B5;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.srvcs .leadRight {
    background: #FCA75F;
    position: relative;
    overflow: hidden
}

.srvcs .leadImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative
}

.srvcs .leadImgOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, #7209b5d9 0%, transparent 100%);
    pointer-events: none
}

.srvcs .leadWaveDivider {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 80px;
    overflow: hidden;
    line-height: 0
}

.srvcs .leadWaveDivider svg {
    display: block;
    width: calc(100% + 2px);
    height: 80px;
    position: relative
}

.srvcs .leadTxt {
    position: relative;
    z-index: 2
}

.srvcs .leadH1 {
    font-size: 52px;
    line-height: 1.15;
    color: #FFF;
    margin: 0 0 24px;
    font-weight: 700
}

.srvcs .leadH1 .accentPhrase {
    color: #FCA75F;
    position: relative
}

.srvcs .leadDesc {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffffeb;
    margin: 0
}

.srvcs .offerGrid {
    padding: 80px 40px;
    background: linear-gradient(127deg, #FFF 0%, #f4f4f4 48%, #FFF 100%);
    position: relative
}

.srvcs .offerH2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0 0 40px;
    font-weight: 700;
    text-align: left
}

.srvcs .offerCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px
}

.srvcs .offerCard {
    background: #FFF;
    border: 3px solid #e8e8e8;
    border-radius: 13px;
    padding: 24px;
    position: relative;
    transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.srvcs .offerCard.accent {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-color: #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a
}

.srvcs .offerCard:hover {
    border-color: #7209B5
}

.srvcs .offerCard.accent:hover {
    border-color: #FCA75F
}

.srvcs .offerCard:hover+.offerCard {
    border-color: #FCA75F
}

.srvcs .offerCardH3 {
    font-size: 22px;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0 0 12px;
    font-weight: 700
}

.srvcs .offerCardTxt {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.srvcs .offerCard.accent .offerCardH3 {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 24px
}

.srvcs .offerCard.accent .offerCardTxt {
    font-size: 18px;
    line-height: 1.6
}

.srvcs .offerMetrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px
}

.srvcs .offerMetric {
    background: #f9f9f9;
    border: 2px solid #e8e8e8;
    border-radius: 7px;
    padding: 12px;
    text-align: center;
    opacity: 0;
    animation: metricFadeIn .26s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.srvcs .offerMetric:nth-child(1) {
    animation-delay: .1s
}

.srvcs .offerMetric:nth-child(2) {
    animation-delay: .2s
}

.srvcs .offerMetric:nth-child(3) {
    animation-delay: .3s
}

@keyframes metricFadeIn {
    from {
        opacity: 0;
        filter: blur(4px)
    }

    to {
        opacity: 1;
        filter: blur(0)
    }
}

.srvcs .offerMetricNum {
    font-size: 28px;
    line-height: 1.15;
    color: #7209B5;
    font-weight: 700;
    display: block;
    margin-bottom: 6px
}

.srvcs .offerMetricLbl {
    font-size: 15px;
    line-height: 1.4;
    color: #3a3a3a;
    display: block
}

.srvcs .deliveryWrap {
    padding: 80px 40px;
    background: #FFF;
    position: relative
}

.srvcs .deliveryInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start
}

.srvcs .deliveryTxtZone {
    position: relative
}

.srvcs .deliveryH2 {
    font-size: 28px;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0 0 24px;
    font-weight: 700
}

.srvcs .deliveryIntro {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0 0 40px
}

.srvcs .deliverySteps {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative
}

.srvcs .deliverySteps::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, #FCA75F 0%, #7209B5 100%)
}

.srvcs .deliveryStep {
    position: relative;
    padding-left: 40px;
    margin-bottom: 24px
}

.srvcs .deliveryStep::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 40px;
    background: #FFF;
    border: 3px solid #FCA75F;
    transition: all .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.srvcs .deliveryStep.active::before {
    background: #FCA75F;
    border-color: #7209B5;
    box-shadow: 1px 2px 6px 0 #7209b50f
}

.srvcs .deliveryStepH4 {
    font-size: 18px;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0 0 6px;
    font-weight: 700
}

.srvcs .deliveryStepTxt {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.srvcs .deliveryVisual {
    position: relative
}

.srvcs .deliveryFigure {
    margin: 0;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 3px solid #e8e8e8;
    transition: border-color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.srvcs .deliveryFigure:hover {
    border-color: #7209B5
}

.srvcs .deliveryImg {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.srvcs .deliveryFigure:hover .deliveryImg {
    transform: scale(1.04)
}

.srvcs .deliveryProf {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fffffff0;
    padding: 12px 24px;
    border-radius: 40px;
    border: 2px solid #FCA75F;
    box-shadow: 1px 5px 18px 0 #fca75f1a;
    opacity: 0;
    animation: profSlideIn .24s cubic-bezier(0.0, 0, 0.2, 1) .4s forwards
}

@keyframes profSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(3px)
    }

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

.srvcs .deliveryProfImg {
    width: 44px;
    height: 44px;
    border-radius: 40px;
    object-fit: cover;
    object-position: center;
    border: 2px solid #7209B5
}

.srvcs .deliveryProfTxt {
    display: flex;
    flex-direction: column
}

.srvcs .deliveryProfName {
    font-size: 15px;
    line-height: 1.4;
    color: #1d1d1d;
    font-weight: 700;
    margin: 0
}

.srvcs .deliveryProfRole {
    font-size: 15px;
    line-height: 1.4;
    color: #7209B5;
    margin: 0
}

.srvcs .deliveryDivider {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, #FCA75F 0%, #FCA75F 68%, transparent 68%, transparent 100%)
}

@media (max-width: 768px) {
    .srvcs .leadZone {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-bottom: 40px
    }

    .srvcs .leadLeft {
        padding: 24px
    }

    .srvcs .leadH1 {
        font-size: 28px;
        margin-bottom: 12px
    }

    .srvcs .leadDesc {
        font-size: 15px
    }

    .srvcs .leadRight {
        min-height: 280px
    }

    .srvcs .offerGrid {
        padding: 40px 24px
    }

    .srvcs .offerH2 {
        font-size: 22px;
        margin-bottom: 24px
    }

    .srvcs .offerCards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px
    }

    .srvcs .offerCard.accent {
        grid-column: span 1;
        grid-row: span 1
    }

    .srvcs .offerCard {
        padding: 24px
    }

    .srvcs .offerCardH3 {
        font-size: 18px
    }

    .srvcs .offerCard.accent .offerCardH3 {
        font-size: 22px;
        margin-bottom: 12px
    }

    .srvcs .offerCard.accent .offerCardTxt {
        font-size: 15px
    }

    .srvcs .offerMetrics {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 12px
    }

    .srvcs .offerMetricNum {
        font-size: 22px
    }

    .srvcs .deliveryWrap {
        padding: 40px 24px
    }

    .srvcs .deliveryInner {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .srvcs .deliveryH2 {
        font-size: 22px;
        margin-bottom: 12px
    }

    .srvcs .deliveryIntro {
        font-size: 15px;
        margin-bottom: 24px
    }

    .srvcs .deliveryStep {
        padding-left: 40px;
        margin-bottom: 24px
    }

    .srvcs .deliveryStepH4 {
        font-size: 15px
    }

    .srvcs .deliveryProf {
        position: static;
        margin-top: 12px;
        padding: 12px;
        justify-content: center
    }

    .srvcs .deliveryProfImg {
        width: 40px;
        height: 40px
    }
}

@media (min-width: 769px) {
    .srvcs .offerCard {
        transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), transform .26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .srvcs .offerCard:hover {
        transform: translateY(-3px)
    }

    .srvcs .deliveryStep {
        transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .srvcs .deliveryStep:hover {
        transform: translateX(6px)
    }
}

.successpg {
    background: linear-gradient(135deg, #FFF 0%, #FCA75F 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.successpg .confirmwrap {
    max-width: 680px;
    width: 100%;
    background: #FFF;
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    box-shadow: 1px 10px 40px 0 #fca75f1c;
    border: 3px solid #FCA75F
}

.successpg .iconcirc {
    width: 120px;
    height: 120px;
    background: conic-gradient(from 45deg at 50% 50%, #FCA75F 0deg, #7209B5 180deg, #FCA75F 360deg);
    border-radius: 40px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.successpg .iconcirc::before {
    content: '';
    position: absolute;
    width: 106px;
    height: 106px;
    background: #FFF;
    border-radius: 40px
}

.successpg .iconcirc::after {
    content: '';
    position: relative;
    width: 48px;
    height: 28px;
    border-left: 6px solid #7209B5;
    border-bottom: 6px solid #7209B5;
    transform: rotate(-45deg);
    margin-top: -12px
}

.successpg .mainhdg {
    font-size: 52px;
    line-height: 1.15;
    color: #7209B5;
    margin: 0 0 24px
}

.successpg .msgtext {
    font-size: 18px;
    line-height: 1.6;
    color: #2d2d2d;
    margin: 0 0 40px
}

.successpg .detailbox {
    background: #f5f5f5;
    border-radius: 13px;
    padding: 24px;
    margin: 0 0 40px;
    border: 2px solid #FCA75F
}

.successpg .detailbox p {
    font-size: 15px;
    line-height: 1.6;
    color: #2d2d2d;
    margin: 0
}

.successpg .detailbox p:first-child {
    margin-bottom: 12px
}

.successpg .actionrow {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.successpg .btnprim {
    font-size: 18px;
    line-height: 1.4;
    color: #FFF;
    background: #7209B5;
    border: 3px solid #7209B5;
    border-radius: 7px;
    padding: 12px 40px;
    text-decoration: none;
    display: inline-block
}

.successpg .btnsec {
    font-size: 18px;
    line-height: 1.4;
    color: #7209B5;
    background: #FFF;
    border: 3px solid #7209B5;
    border-radius: 7px;
    padding: 12px 40px;
    text-decoration: none;
    display: inline-block
}

@media (min-width: 60em) {
    .successpg .btnprim {
        transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .successpg .btnprim:hover {
        border-color: #FCA75F
    }

    .successpg .btnsec {
        transition: border-color .26s cubic-bezier(0.0, 0, 0.2, 1)
    }

    .successpg .btnsec:hover {
        border-color: #FCA75F
    }
}

@media (max-width: 30em) {
    .successpg .confirmwrap {
        padding: 40px 24px
    }

    .successpg .iconcirc {
        width: 100px;
        height: 100px;
        margin-bottom: 24px
    }

    .successpg .iconcirc::before {
        width: 86px;
        height: 86px
    }

    .successpg .iconcirc::after {
        width: 40px;
        height: 24px
    }

    .successpg .mainhdg {
        font-size: 28px
    }

    .successpg .actionrow {
        flex-direction: column
    }

    .successpg .btnprim,
    .successpg .btnsec {
        width: 100%
    }
}