@import "https://cdn.jsdelivr.net/npm/@fontsource/pt-serif@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/pt-serif@latest/700.css";

html {
    font-size: 100%
}

body {
    margin: 0;
    overscroll-behavior: contain;
    overflow-x: hidden;
    font-family: 'PT Serif', serif;
    background: #F8FAFC;
    color: #131B25
}

.top-bar {
    position: relative;
    background: linear-gradient(135deg, #131B25 0%, #1a2633 50%, #131B25 100%);
    padding: 24px 40px;
    z-index: 100
}

.top-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, #131b2500 0%, #f8fafc08 100%);
    pointer-events: none
}

.top-bar-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 24px
}

.logo-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc0d;
    border: 1px solid #01c2e94d;
    border-radius: 3px;
    padding: 8px;
    box-shadow: 0 4px 25px 0 #01c2e917;
    transition: border-color .7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .7s cubic-bezier(0.4, 0, 0.2, 1)
}

.logo-box:hover {
    border-color: #01c2e999;
    box-shadow: 0 8px 60px 0 #01c2e921
}

.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.brand-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, #01c2e900 0%, #01c2e966 50%, #01c2e900 100%)
}

.brand-text {
    font-size: 24px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: .02em;
    line-height: 1.1
}

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

.nav-primary a {
    padding: 16px 24px;
    color: #F8FAFC;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.1;
    border-radius: 3px;
    background: #01c2e914;
    border: 1px solid #01c2e926;
    transition: background .65s cubic-bezier(0.4, 0, 0.2, 1), border-color .65s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .65s cubic-bezier(0.4, 0, 0.2, 1), color .65s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap
}

.nav-primary a:hover {
    background: #01c2e929;
    border-color: #01c2e966;
    box-shadow: 0 4px 25px 0 #01c2e917;
    color: #01C2E9
}

.nav-primary a:focus {
    outline: 2px solid #01C2E9;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #01c2e933
}

@media (max-width: 1024px) {
    .top-bar {
        padding: 24px
    }

    .top-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

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

    .nav-primary a {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 16px
    }

    .brand-zone {
        gap: 16px
    }

    .brand-text {
        font-size: 18px
    }

    .nav-primary {
        flex-direction: column;
        gap: 8px
    }

    .nav-primary a {
        width: 100%;
        padding: 16px
    }
}

@media (max-width: 375px) {
    .brand-divider {
        display: none
    }

    .logo-box {
        width: 36px;
        height: 36px
    }
}

.base-footer {
    background: linear-gradient(180deg, #131B25 0%, #0d1419 100%);
    color: #F8FAFC;
    padding: 80px 40px 40px;
    position: relative
}

.base-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #01c2e900 0%, #01c2e966 50%, #01c2e900 100%)
}

.footer-main {
    max-width: 1440px;
    margin: 0 auto
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 80px
}

.footer-col h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px;
    color: #01C2E9;
    line-height: 1.1
}

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

.footer-col a {
    color: #F8FAFC;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.75;
    display: inline-block;
    transition: color .6s cubic-bezier(0.4, 0, 0.2, 1), transform .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.footer-col a:hover {
    color: #01C2E9;
    transform: translateX(4px)
}

.footer-col a:focus {
    outline: 2px solid #01C2E9;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #01c2e933
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.footer-logo-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #01c2e914;
    border: 1px solid #01c2e940;
    border-radius: 3px;
    padding: 8px;
    box-shadow: 0 2px 5px 0 #01c2e914
}

.footer-logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.footer-brand-name {
    font-size: 18px;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1.1
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    line-height: 1.75;
    color: #f8fafcd9
}

.footer-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 4px;
    fill: #01C2E9
}

.footer-contact-item a {
    color: #f8fafcd9;
    text-decoration: none;
    transition: color .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.footer-contact-item a:hover {
    color: #01C2E9
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid #01c2e926;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.footer-copyright {
    font-size: 16px;
    line-height: 1.75;
    color: #f8fafcb3
}

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

.footer-legal a {
    color: #f8fafcb3;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.75;
    transition: color .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.footer-legal a:hover {
    color: #01C2E9
}

.footer-legal a:focus {
    outline: 2px solid #01C2E9;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #01c2e933
}

@media (max-width: 1024px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
    }
}

@media (max-width: 768px) {
    .base-footer {
        padding: 40px 24px 24px
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 40px
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 24px
    }

    .footer-legal {
        flex-direction: column;
        gap: 16px
    }
}

@media (max-width: 375px) {
    .base-footer {
        padding: 24px 16px 16px
    }
}

.consent-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #131B25 0%, #1a2633 100%);
    border-bottom: 2px solid #01c2e94d;
    box-shadow: 0 8px 60px 0 #131b2521;
    z-index: 8000;
    padding: 24px 40px;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent-bar.visible {
    opacity: 1;
    transform: translateY(0)
}

.consent-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap
}

.consent-text {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.consent-headline {
    font-size: 18px;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1.1;
    margin: 0
}

.consent-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #f8fafcd9;
    margin: 0
}

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

.consent-btn {
    padding: 16px 32px;
    font-size: 16px;
    font-family: 'PT Serif', serif;
    font-weight: 700;
    line-height: 1.1;
    border: 2px solid #01C2E9;
    border-radius: 32px;
    background: transparent;
    color: #F8FAFC;
    cursor: pointer;
    transition: background .7s cubic-bezier(0.4, 0, 0.2, 1), color .7s cubic-bezier(0.4, 0, 0.2, 1), border-color .7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .7s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: 140px
}

.consent-btn:hover {
    background: #01c2e926;
    border-color: #01C2E9;
    box-shadow: 0 4px 25px 0 #01c2e917
}

.consent-btn:focus {
    outline: 2px solid #01C2E9;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px #01c2e933
}

.consent-btn:active {
    transform: scale(0.98)
}

@media (max-width: 768px) {
    .consent-bar {
        padding: 24px
    }

    .consent-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px
    }

    .consent-text {
        flex: 1 1 auto
    }

    .consent-actions {
        flex-direction: column;
        gap: 16px
    }

    .consent-btn {
        width: 100%
    }
}

@media (max-width: 375px) {
    .consent-bar {
        padding: 16px
    }

    .consent-headline {
        font-size: 16px
    }
}

.policy-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #F8FAFC
}

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

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

.policy-content h1 {
    font-size: 62px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 40px
}

@media (max-width: 767px) {
    .policy-content h1 {
        font-size: 44px
    }
}

.policy-content h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 80px 0 24px
}

@media (max-width: 767px) {
    .policy-content h2 {
        font-size: 32px;
        margin: 40px 0 24px
    }
}

.policy-content h3 {
    font-size: 32px;
    line-height: 1.1;
    color: #131B25;
    margin: 40px 0 16px
}

@media (max-width: 767px) {
    .policy-content h3 {
        font-size: 24px
    }
}

.policy-content h4 {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 40px 0 16px
}

@media (max-width: 767px) {
    .policy-content h4 {
        font-size: 18px
    }
}

.policy-content h5 {
    font-size: 18px;
    line-height: 1.1;
    color: #131B25;
    margin: 24px 0 16px
}

.policy-content h6 {
    font-size: 16px;
    line-height: 1.1;
    color: #131B25;
    margin: 24px 0 16px
}

.policy-content p {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 24px
}

@media (max-width: 767px) {
    .policy-content p {
        font-size: 16px
    }
}

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

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

.policy-content a {
    color: #01C2E9;
    text-decoration: underline;
    transition: color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.policy-content a:hover {
    color: #131B25
}

.policy-content a:focus {
    outline: 2px solid #01C2E9;
    outline-offset: 4px;
    border-radius: 3px
}

.policy-content hr {
    border: none;
    height: 1px;
    background: #131b2526;
    margin: 80px 0
}

@media (max-width: 767px) {
    .policy-content hr {
        margin: 40px 0
    }
}

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

.policy-content h1:first-child,
.policy-content h2:first-child,
.policy-content h3:first-child,
.policy-content h4:first-child,
.policy-content h5:first-child,
.policy-content h6:first-child {
    margin-top: 0
}

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

.learning-program-detail {
    background: #F8FAFC;
    color: #131B25;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    overflow-x: clip
}

.learning-program-detail .intro-banner {
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
    animation: vertical-reveal 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards
}

@keyframes vertical-reveal {
    0% {
        clip-path: inset(0 0 100% 0)
    }

    100% {
        clip-path: inset(0 0 0 0)
    }
}

.learning-program-detail .intro-banner::before {
    content: '';
    position: absolute;
    top: 40px;
    right: 80px;
    width: 120px;
    height: 120px;
    border: 3px solid #f8fafc33;
    border-radius: 32px;
    transform: rotate(15deg)
}

.learning-program-detail .intro-banner::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: 100px;
    width: 80px;
    height: 80px;
    background: #f8fafc1a;
    border-radius: 32px;
    transform: rotate(-25deg)
}

.learning-program-detail .intro-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1
}

.learning-program-detail .intro-eyebrow {
    font-size: 16px;
    line-height: 1.75;
    color: #f8fafcd9;
    margin: 0 0 16px;
    letter-spacing: .02em;
    text-transform: uppercase
}

.learning-program-detail .intro-title {
    font-size: 62px;
    line-height: 1.1;
    color: #F8FAFC;
    margin: 0;
    font-weight: 700
}

.learning-program-detail .meta-grid {
    background: #FFF;
    padding: 40px 24px;
    border-top: 4px solid #01C2E9
}

.learning-program-detail .meta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.learning-program-detail .meta-item {
    background: #F8FAFC;
    padding: 24px;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 #01c2e914;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.learning-program-detail .meta-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.learning-program-detail .meta-label {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 8px;
    opacity: .7
}

.learning-program-detail .meta-value {
    font-size: 24px;
    line-height: 1.1;
    color: #01C2E9;
    margin: 0;
    font-weight: 700
}

.learning-program-detail .content-split {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: 1fr 3px 2fr;
    gap: 40px;
    align-items: start;
    animation: vertical-reveal 800ms cubic-bezier(0.4, 0, 0.2, 1) 200ms backwards
}

.learning-program-detail .split-divider {
    width: 3px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #01C2E9 0px, #01C2E9 8px, transparent 8px, transparent 16px);
    align-self: stretch
}

.learning-program-detail .split-left {
    position: sticky;
    top: 24px
}

.learning-program-detail .visual-wrapper {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 4px 25px 0 #131b2517
}

.learning-program-detail .visual-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1)
}

.learning-program-detail .visual-wrapper:hover .visual-image {
    transform: scale(1.08)
}

.learning-program-detail .price-card {
    background: #131B25;
    color: #F8FAFC;
    padding: 24px;
    border-radius: 3px;
    margin: 24px 0 0
}

.learning-program-detail .price-amount {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 700;
    background: linear-gradient(90deg, #01C2E9 0%, #F8FAFC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program-detail .price-info {
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    opacity: .8
}

.learning-program-detail .split-right {
    padding: 0
}

.learning-program-detail .content-heading {
    font-size: 32px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program-detail .content-text {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 24px
}

.learning-program-detail .content-text:first-of-type {
    font-size: 24px;
    line-height: 1.75
}

.learning-program-detail .program-wrapper {
    background: #FFF;
    padding: 40px;
    border-radius: 32px;
    margin: 40px 0 0;
    box-shadow: 0 2px 5px 0 #01c2e914;
    position: relative
}

.learning-program-detail .program-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: #01C2E9
}

.learning-program-detail .program-heading {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #131B25 0%, #01C2E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program-detail .program-wrapper h2 {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 24px 0 16px
}

.learning-program-detail .program-wrapper p {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 16px
}

.learning-program-detail .program-wrapper em {
    font-style: italic;
    color: #01C2E9
}

.learning-program-detail .program-wrapper mark {
    background: #01C2E9;
    color: #F8FAFC;
    padding: 4px 8px;
    border-radius: 3px
}

.learning-program-detail .program-wrapper ul,
.learning-program-detail .program-wrapper ol {
    margin: 0 0 16px;
    padding: 0 0 0 24px
}

.learning-program-detail .program-wrapper li {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 8px
}

.learning-program-detail .program-wrapper blockquote {
    border-left: 4px solid #01C2E9;
    padding: 16px 24px;
    margin: 24px 0;
    background: #F8FAFC;
    font-style: italic
}

.learning-program-detail .program-wrapper cite {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    opacity: .7;
    display: block;
    margin: 8px 0 0
}

.learning-program-detail .program-wrapper figure {
    margin: 24px 0
}

.learning-program-detail .program-wrapper figcaption {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    opacity: .7;
    margin: 8px 0 0;
    text-align: center
}

.learning-program-detail .process-flow {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><filter id="blur"><feGaussianBlur stdDeviation="40"/></filter><rect width="1200" height="400" fill="%23F8FAFC"/><circle cx="200" cy="100" r="80" fill="%2301C2E9" opacity="0.3" filter="url(%23blur)"/><circle cx="800" cy="300" r="100" fill="%23131B25" opacity="0.2" filter="url(%23blur)"/></svg>') center/cover no-repeat;
    padding: 80px 24px;
    position: relative;
    animation: vertical-reveal 850ms cubic-bezier(0.4, 0, 0.2, 1) 400ms backwards
}

.learning-program-detail .process-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f8fafcd9;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.learning-program-detail .process-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.learning-program-detail .process-title {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 40px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program-detail .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.learning-program-detail .step-card {
    background: #FFF;
    padding: 24px;
    border-radius: 32px;
    position: relative;
    box-shadow: 0 2px 5px 0 #01c2e914;
    transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 750ms cubic-bezier(0.4, 0, 0.2, 1)
}

.learning-program-detail .step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.learning-program-detail .step-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -24px;
    width: 24px;
    height: 3px;
    background: #01C2E9;
    transform: translateY(-50%);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%)
}

.learning-program-detail .step-card:last-child::after {
    display: none
}

.learning-program-detail .step-number {
    font-size: 44px;
    line-height: 1.1;
    color: #01C2E9;
    margin: 0 0 16px;
    font-weight: 700
}

.learning-program-detail .step-label {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 8px
}

.learning-program-detail .step-description {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8
}

.learning-program-detail .comparison-section {
    background: #131B25;
    padding: 80px 24px;
    position: relative;
    overflow: hidden
}

.learning-program-detail .geometric-divider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #01C2E9 0px, #01C2E9 16px, transparent 16px, transparent 24px)
}

.learning-program-detail .comparison-container {
    max-width: 1200px;
    margin: 0 auto
}

.learning-program-detail .comparison-title {
    font-size: 44px;
    line-height: 1.1;
    color: #F8FAFC;
    margin: 0 0 40px;
    text-align: center
}

.learning-program-detail .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

.learning-program-detail .comparison-side {
    background: #f8fafc0d;
    padding: 40px;
    border-radius: 32px;
    border: 2px dashed #01c2e94d;
    transition: border-color 700ms cubic-bezier(0.4, 0, 0.2, 1), background 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.learning-program-detail .comparison-side:hover {
    border-color: #01C2E9;
    background: #f8fafc14
}

.learning-program-detail .comparison-label {
    font-size: 18px;
    line-height: 1.75;
    color: #01C2E9;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.learning-program-detail .comparison-number {
    font-size: 72px;
    line-height: 1.1;
    color: #F8FAFC;
    margin: 0 0 16px;
    font-weight: 700
}

.learning-program-detail .comparison-text {
    font-size: 18px;
    line-height: 1.75;
    color: #F8FAFC;
    margin: 0;
    opacity: .85
}

.learning-program-detail .action-zone {
    background: #FFF;
    padding: 80px 24px;
    text-align: center
}

.learning-program-detail .action-container {
    max-width: 800px;
    margin: 0 auto
}

.learning-program-detail .action-title {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #131B25 0%, #01C2E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program-detail .action-text {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 40px
}

.learning-program-detail .button-group {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    align-items: center
}

.learning-program-detail .primary-button {
    background: #01C2E9;
    color: #F8FAFC;
    font-size: 18px;
    line-height: 1.75;
    padding: 16px 40px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: background 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px 0 #01c2e914;
    text-decoration: none;
    display: inline-block
}

.learning-program-detail .primary-button:hover {
    background: #131B25;
    transform: translateY(-2px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.learning-program-detail .primary-button:focus {
    outline: 3px solid #01C2E9;
    outline-offset: 4px
}

.learning-program-detail .primary-button:active {
    transform: translateY(0)
}

.learning-program-detail .secondary-button {
    background: transparent;
    color: #131B25;
    font-size: 18px;
    line-height: 1.75;
    padding: 16px 40px;
    border: 2px solid #131B25;
    border-radius: 32px;
    cursor: pointer;
    transition: background 700ms cubic-bezier(0.4, 0, 0.2, 1), color 700ms cubic-bezier(0.4, 0, 0.2, 1), border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block
}

.learning-program-detail .secondary-button:hover {
    background: #131B25;
    color: #F8FAFC;
    border-color: #131B25
}

.learning-program-detail .secondary-button:focus {
    outline: 3px solid #01C2E9;
    outline-offset: 4px
}

@media (max-width: 1280px) {
    .learning-program-detail .intro-title {
        font-size: 44px
    }

    .learning-program-detail .meta-container {
        grid-template-columns: repeat(2, 1fr)
    }

    .learning-program-detail .comparison-number {
        font-size: 62px
    }

    .learning-program-detail .action-title,
    .learning-program-detail .process-title,
    .learning-program-detail .comparison-title {
        font-size: 32px
    }
}

@media (max-width: 1024px) {
    .learning-program-detail .content-split {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .learning-program-detail .split-divider {
        display: none !important
    }

    .learning-program-detail .split-left {
        position: static
    }

    .learning-program-detail .comparison-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .learning-program-detail .step-card::after {
        display: none
    }
}

@media (max-width: 768px) {
    .learning-program-detail .intro-banner {
        padding: 40px 16px
    }

    .learning-program-detail .intro-title {
        font-size: 32px
    }

    .learning-program-detail .meta-grid,
    .learning-program-detail .process-flow,
    .learning-program-detail .comparison-section,
    .learning-program-detail .action-zone {
        padding: 40px 16px
    }

    .learning-program-detail .content-split {
        padding: 40px 16px
    }

    .learning-program-detail .meta-container {
        grid-template-columns: 1fr
    }

    .learning-program-detail .program-wrapper {
        padding: 24px
    }

    .learning-program-detail .comparison-side {
        padding: 24px
    }

    .learning-program-detail .button-group {
        flex-direction: column
    }

    .learning-program-detail .primary-button,
    .learning-program-detail .secondary-button {
        width: 100%
    }

    .learning-program-detail .steps-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 375px) {
    .learning-program-detail .intro-title {
        font-size: 24px
    }

    .learning-program-detail .price-amount {
        font-size: 32px
    }

    .learning-program-detail .content-heading {
        font-size: 24px
    }

    .learning-program-detail .comparison-number {
        font-size: 44px
    }
}

.contact-page {
    background: #F8FAFC;
    overflow-x: hidden;
    max-width: 1440px;
    margin: 0 auto
}

.contact-page .gradient-hero {
    background: linear-gradient(135deg, #131B25 0%, #01C2E9 50%, #131B25 100%);
    position: relative;
    padding-top: 120px;
    padding-bottom: 80px;
    overflow: hidden
}

.contact-page .gradient-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 24px, #f8fafc08 24px, #f8fafc08 48px), repeating-linear-gradient(-45deg, transparent, transparent 24px, #f8fafc08 24px, #f8fafc08 48px);
    pointer-events: none
}

.contact-page .gradient-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center
}

.contact-page .gradient-hero h1 {
    font-size: 72px;
    line-height: 1.1;
    color: #F8FAFC;
    margin: 0 0 24px;
    animation: slideInLeft 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0
}

@keyframes slideInLeft {
    from {
        transform: translateX(-60px);
        opacity: 0
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(60px);
        opacity: 0
    }

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

.contact-page .gradient-hero h1 .accent-phrase {
    background: linear-gradient(90deg, #01C2E9 0%, #F8FAFC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block
}

.contact-page .gradient-hero .intro-text {
    font-size: 24px;
    line-height: 1.75;
    color: #f8fafce6;
    margin: 0;
    animation: slideInRight 900ms cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards;
    opacity: 0
}

.contact-page .contact-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px;
    position: relative
}

.contact-page .decorative-sidebar {
    flex: 0 0 320px;
    position: relative
}

.contact-page .decorative-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #01C2E9;
    border-radius: 32px;
    pointer-events: none
}

.contact-page .sidebar-content {
    padding: 40px;
    position: relative;
    animation: slideInLeft 900ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards;
    opacity: 0
}

.contact-page .sidebar-content h2 {
    font-size: 32px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 40px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.contact-page .contact-detail {
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contact-page .contact-detail:last-child {
    margin: 0
}

.contact-page .detail-label {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px
}

.contact-page .detail-label::after {
    content: ':';
    color: #01C2E9;
    font-weight: 700
}

.contact-page .detail-value {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    word-break: break-word
}

.contact-page .detail-value a {
    color: #131B25;
    text-decoration: none;
    transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative
}

.contact-page .detail-value a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #01C2E9;
    transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .detail-value a:hover {
    color: #01C2E9
}

.contact-page .detail-value a:hover::after {
    width: 100%
}

.contact-page .icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #01C2E9;
    border-radius: 3px;
    flex-shrink: 0
}

.contact-page .icon-box svg {
    width: 16px;
    height: 16px;
    fill: #01C2E9
}

.contact-page .form-zone {
    flex: 1;
    background: #FFF;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 8px 60px 0 #01c2e921;
    animation: slideInRight 900ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards;
    opacity: 0
}

.contact-page .form-zone h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 16px;
    background: linear-gradient(90deg, #131B25 0%, #01C2E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.contact-page .form-zone .form-intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 40px
}

.contact-page .contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.contact-page .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contact-page .form-field label {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    font-weight: 600
}

.contact-page .form-field input,
.contact-page .form-field textarea {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    background: #F8FAFC;
    border: 2px solid transparent;
    border-radius: 3px;
    padding: 16px;
    transition: border-color 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .form-field input:focus,
.contact-page .form-field textarea:focus {
    outline: none;
    border-color: #01C2E9;
    box-shadow: 0 0 0 4px #01c2e91a
}

.contact-page .form-field input::placeholder,
.contact-page .form-field textarea::placeholder {
    color: #131b2566
}

.contact-page .form-field textarea {
    min-height: 180px;
    resize: vertical
}

.contact-page .privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0 0
}

.contact-page .privacy-consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 4px 0 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #01C2E9
}

.contact-page .privacy-consent label {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    cursor: pointer
}

.contact-page .privacy-consent a {
    color: #01C2E9;
    text-decoration: none;
    transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #01C2E9
}

.contact-page .privacy-consent a:hover {
    color: #131B25;
    border-bottom-color: #131B25
}

.contact-page .submit-btn {
    background: #01C2E9;
    color: #FFF;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 600;
    padding: 16px 40px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start;
    position: relative;
    overflow: hidden
}

.contact-page .submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff3, transparent);
    transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .submit-btn:hover {
    background: #131B25;
    transform: translateY(-2px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.contact-page .submit-btn:hover::before {
    left: 100%
}

.contact-page .submit-btn:active {
    transform: translateY(0)
}

.contact-page .divider-band {
    width: 100%;
    height: 8px;
    background: #01C2E9;
    margin: 80px 0 0
}

.contact-page .info-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
}

.contact-page .info-card {
    background: #FFF;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 4px 25px 0 #01c2e917;
    position: relative;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInLeft 900ms cubic-bezier(0.4, 0, 0.2, 1) 800ms forwards;
    opacity: 0
}

.contact-page .info-card:nth-child(2) {
    animation: slideInRight 900ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms forwards
}

.contact-page .info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 32px;
    transition: border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none
}

.contact-page .info-card::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #01C2E9;
    border-radius: 32px;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
    pointer-events: none
}

.contact-page .info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.contact-page .info-card:hover::before {
    border-color: #01C2E9
}

.contact-page .info-card:hover::after {
    opacity: 1
}

.contact-page .info-card h3 {
    font-size: 32px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.contact-page .info-card p {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 16px
}

.contact-page .info-card p:last-child {
    margin: 0
}

.contact-page .info-card .link-with-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #01C2E9;
    text-decoration: none;
    font-weight: 600;
    transition: gap 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .info-card .link-with-arrow::after {
    content: '→';
    font-size: 18px;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .info-card .link-with-arrow:hover {
    gap: 16px
}

.contact-page .info-card .link-with-arrow:hover::after {
    transform: translateX(4px)
}

.contact-page .image-showcase {
    display: flex;
    gap: 24px;
    margin: 24px 0 0
}

.contact-page .image-showcase .image-wrapper {
    flex: 1;
    border-radius: 3px;
    overflow: hidden;
    position: relative
}

.contact-page .image-showcase .image-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: .8
}

.contact-page .image-showcase .image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #01C2E9 0%, transparent 100%);
    opacity: .3;
    pointer-events: none;
    z-index: 1;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-page .info-card:hover .image-showcase .image-wrapper img {
    transform: scale(1.08);
    opacity: 1
}

.contact-page .info-card:hover .image-showcase .image-wrapper::before {
    opacity: .15
}

@media (max-width: 1280px) {
    .contact-page .gradient-hero h1 {
        font-size: 62px
    }

    .contact-page .contact-wrapper {
        padding: 80px 40px
    }

    .contact-page .info-grid {
        padding: 80px 40px
    }
}

@media (max-width: 1024px) {
    .contact-page .gradient-hero {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .contact-page .gradient-hero h1 {
        font-size: 44px
    }

    .contact-page .gradient-hero .intro-text {
        font-size: 18px
    }

    .contact-page .contact-wrapper {
        flex-direction: column;
        gap: 40px;
        padding: 80px 24px
    }

    .contact-page .decorative-sidebar {
        flex: 1
    }

    .contact-page .info-grid {
        grid-template-columns: 1fr;
        padding: 80px 24px
    }
}

@media (max-width: 768px) {
    .contact-page .gradient-hero {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .contact-page .gradient-hero h1 {
        font-size: 32px
    }

    .contact-page .gradient-hero .intro-text {
        font-size: 16px
    }

    .contact-page .contact-wrapper {
        padding: 40px 16px
    }

    .contact-page .form-zone {
        padding: 24px
    }

    .contact-page .form-zone h2 {
        font-size: 32px
    }

    .contact-page .sidebar-content {
        padding: 24px
    }

    .contact-page .sidebar-content h2 {
        font-size: 24px
    }

    .contact-page .info-grid {
        padding: 40px 16px;
        gap: 24px
    }

    .contact-page .info-card {
        padding: 24px
    }

    .contact-page .info-card h3 {
        font-size: 24px
    }

    .contact-page .info-card p {
        font-size: 16px
    }

    .contact-page .image-showcase {
        flex-direction: column
    }

    .contact-page .image-showcase .image-wrapper img {
        height: 160px
    }
}

@media (max-width: 375px) {
    .contact-page .gradient-hero h1 {
        font-size: 24px
    }

    .contact-page .form-zone h2 {
        font-size: 24px
    }

    .contact-page .submit-btn {
        width: 100%;
        text-align: center
    }
}

.about-us {
    background: #F8FAFC;
    overflow-x: clip
}

.about-us .opening {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: center;
    position: relative
}

.about-us .opening::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #131B25 0%, transparent 100%);
    opacity: .03;
    pointer-events: none;
    z-index: 1
}

.about-us .text-zone {
    position: relative;
    z-index: 2
}

.about-us .text-zone::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -24px;
    width: 120px;
    height: 120px;
    background: linear-gradient(90deg, #01C2E9 0%, transparent 100%);
    opacity: .08;
    border-radius: 32px;
    z-index: -1
}

.about-us .opening h1 {
    font-size: 62px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-us .opening .tagline {
    font-size: 24px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .75
}

.about-us .img-zone {
    position: relative;
    z-index: 2
}

.about-us .img-zone img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    position: relative
}

.about-us .img-zone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 30%, #131b2599 100%);
    border-radius: 32px;
    pointer-events: none
}

.about-us .story {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    background: #fff
}

.about-us .story .left {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.about-us .story .right {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.about-us .story h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center
}

.about-us .story .intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.about-us .story .body {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8
}

.about-us .story img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    transition: transform .75s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .story img:hover {
    transform: scale(1.05)
}

.about-us .approach {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    position: relative
}

.about-us .approach::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./media_archive/draft_IMG-6015.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: .04;
    pointer-events: none;
    animation: pan-bg 60s linear infinite
}

@keyframes pan-bg {
    0% {
        background-position: 0 center
    }

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

.about-us .approach .inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px
}

.about-us .approach .divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #01C2E9;
    transform: translateX(-50%)
}

.about-us .approach .col {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.about-us .approach h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-us .approach .intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.about-us .approach .body {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8
}

.about-us .approach img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .approach img:hover {
    transform: scale(1.05)
}

.about-us .values {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

.about-us .values h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 40px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-us .values .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px
}

.about-us .values .item {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: start
}

.about-us .values .icon-box {
    width: 64px;
    height: 64px;
    border: 2px solid #01C2E9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .65s cubic-bezier(0.4, 0, 0.2, 1), border-color .65s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .values .item:hover .icon-box {
    background-color: #01C2E9;
    border-color: #131B25
}

.about-us .values .icon-box svg {
    width: 32px;
    height: 32px;
    fill: #01C2E9;
    transition: fill .65s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .values .item:hover .icon-box svg {
    fill: #fff
}

.about-us .values .content {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.about-us .values h3 {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.about-us .values .body {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8
}

.about-us .metrics {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #F8FAFC;
    position: relative;
    overflow: hidden
}

.about-us .metrics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./media_archive/new-resource10alt.jpg);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: .03;
    pointer-events: none
}

.about-us .metrics .inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.about-us .metrics .stat {
    text-align: center;
    padding: 40px 24px;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 4px 25px 0 #01c2e917;
    transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .7s cubic-bezier(0.4, 0, 0.2, 1);
    animation: reveal-clip .9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    clip-path: inset(100% 0 0 0)
}

@keyframes reveal-clip {
    to {
        clip-path: inset(0 0 0 0)
    }
}

.about-us .metrics .stat:nth-child(1) {
    animation-delay: .1s
}

.about-us .metrics .stat:nth-child(2) {
    animation-delay: .2s
}

.about-us .metrics .stat:nth-child(3) {
    animation-delay: .3s
}

.about-us .metrics .stat:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.about-us .metrics .number {
    font-size: 62px;
    line-height: 1.1;
    color: #01C2E9;
    margin: 0 0 16px;
    font-weight: 700
}

.about-us .metrics .label {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .75
}

.about-us .team {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

.about-us .team h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-us .team .intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 auto 40px;
    max-width: 800px;
    text-align: center
}

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

.about-us .team .member {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center
}

.about-us .team .photo {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    transition: transform .75s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .team .member:hover .photo {
    transform: scale(1.05)
}

.about-us .team h3 {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.about-us .team .role {
    font-size: 16px;
    line-height: 1.75;
    color: #01C2E9;
    margin: 0
}

.about-us .team .bio {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8;
    text-align: left
}

.about-us .commitment {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #F8FAFC;
    border-top: 2px dotted #131b2526
}

.about-us .commitment .wrapper {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 80px;
    align-items: center
}

.about-us .commitment img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1)
}

.about-us .commitment img:hover {
    transform: scale(1.05)
}

.about-us .commitment .text {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.about-us .commitment h2 {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center
}

.about-us .commitment .intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.about-us .commitment .body {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .8
}

.about-us .commitment .accent-box {
    padding: 24px;
    border: 2px dashed #01C2E9;
    border-radius: 3px;
    background: #fff
}

.about-us .commitment .accent-box .body {
    opacity: 1
}

@media (max-width: 1280px) {
    .about-us .opening {
        grid-template-columns: 1fr 320px;
        gap: 40px
    }

    .about-us .opening h1 {
        font-size: 44px
    }

    .about-us .img-zone img {
        height: 400px
    }

    .about-us .story {
        gap: 40px
    }

    .about-us .story h2 {
        font-size: 32px
    }

    .about-us .approach h2 {
        font-size: 32px
    }

    .about-us .values h2 {
        font-size: 32px
    }

    .about-us .team h2 {
        font-size: 32px
    }

    .about-us .commitment h2 {
        font-size: 32px
    }

    .about-us .commitment .wrapper {
        grid-template-columns: 360px 1fr;
        gap: 40px
    }

    .about-us .commitment img {
        height: 400px
    }
}

@media (max-width: 1024px) {
    .about-us .opening {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 24px
    }

    .about-us .img-zone {
        max-width: 480px;
        margin: 0 auto
    }

    .about-us .story {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 24px
    }

    .about-us .approach {
        padding: 40px 24px
    }

    .about-us .approach .inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-us .approach .divider {
        display: none
    }

    .about-us .values {
        padding: 40px 24px
    }

    .about-us .values .grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-us .metrics {
        padding: 40px 24px
    }

    .about-us .metrics .inner {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .about-us .team {
        padding: 40px 24px
    }

    .about-us .team .grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-us .commitment {
        padding: 40px 24px
    }

    .about-us .commitment .wrapper {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-us .commitment img {
        max-width: 480px;
        margin: 0 auto
    }
}

@media (max-width: 768px) {
    .about-us .opening h1 {
        font-size: 32px
    }

    .about-us .opening .tagline {
        font-size: 18px
    }

    .about-us .img-zone img {
        height: 320px
    }

    .about-us .story h2 {
        font-size: 24px
    }

    .about-us .story img {
        height: 280px
    }

    .about-us .approach h2 {
        font-size: 24px
    }

    .about-us .approach img {
        height: 280px
    }

    .about-us .values h2 {
        font-size: 24px
    }

    .about-us .metrics .number {
        font-size: 44px
    }

    .about-us .team h2 {
        font-size: 24px
    }

    .about-us .team .photo {
        height: 280px
    }

    .about-us .commitment h2 {
        font-size: 24px
    }

    .about-us .commitment img {
        height: 320px
    }
}

@media (max-width: 375px) {
    .about-us .opening {
        padding: 24px 16px
    }

    .about-us .opening h1 {
        font-size: 24px
    }

    .about-us .opening .tagline {
        font-size: 16px
    }

    .about-us .story {
        padding: 24px 16px
    }

    .about-us .approach {
        padding: 24px 16px
    }

    .about-us .values {
        padding: 24px 16px
    }

    .about-us .metrics {
        padding: 24px 16px
    }

    .about-us .team {
        padding: 24px 16px
    }

    .about-us .commitment {
        padding: 24px 16px
    }
}

.learning-program {
    background: #F8FAFC;
    overflow-x: clip
}

.learning-program .split-title {
    display: flex;
    flex-direction: row;
    min-height: 480px;
    position: relative;
    overflow: hidden
}

.learning-program .split-title .zone-left {
    flex: 1;
    background: #131B25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    position: relative
}

.learning-program .split-title .zone-right {
    flex: 1;
    background: #01C2E9;
    position: relative;
    overflow: hidden
}

.learning-program .split-title .zone-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.4)
}

.learning-program .split-title .txt-wrap {
    max-width: 520px;
    position: relative;
    z-index: 2
}

.learning-program .split-title h1 {
    font-size: 62px;
    line-height: 1.1;
    color: #F8FAFC;
    margin: 0 0 24px
}

.learning-program .split-title h1 .marked {
    background: linear-gradient(90deg, #01C2E9 0%, #F8FAFC 100%);
    padding: 0 8px;
    display: inline-block
}

.learning-program .split-title .curves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

.learning-program .split-title .curve-line {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 2px solid #01c2e94d;
    border-radius: 32px;
    transform: rotate(25deg)
}

.learning-program .split-title .curve-line:nth-child(1) {
    top: 40px;
    left: -80px
}

.learning-program .split-title .curve-line:nth-child(2) {
    bottom: -60px;
    right: 80px;
    border-color: #01c2e933
}

.learning-program .catalog-grid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 40px
}

.learning-program .catalog-grid h2 {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 40px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.learning-program .grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 40px
}

.learning-program .program-card {
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 8px 60px 0 #131b2521;
    transition: transform .7s ease-in-out, box-shadow .7s ease-in-out;
    position: relative
}

.learning-program .program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.learning-program .program-card .img-box {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative
}

.learning-program .program-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease-in-out
}

.learning-program .program-card:hover .img-box img {
    transform: scale(1.08)
}

.learning-program .program-card .fold-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: transparent #01C2E9 transparent transparent;
    transition: border-width .6s ease-in-out
}

.learning-program .program-card:hover .fold-corner {
    border-width: 0 60px 60px 0
}

.learning-program .program-card .txt-area {
    padding: 24px
}

.learning-program .program-card .badge-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0 0 16px
}

.learning-program .program-card .tag {
    background: #131B25;
    color: #F8FAFC;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 3px
}

.learning-program .program-card h3 {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #131B25
}

.learning-program .program-card .desc {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 24px
}

.learning-program .program-card .info-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px
}

.learning-program .program-card .info-pair {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 16px
}

.learning-program .program-card .info-pair .label {
    color: #131B25
}

.learning-program .program-card .info-pair .colon {
    color: #01C2E9
}

.learning-program .program-card .info-pair .val {
    color: #01C2E9;
    font-weight: 600
}

.learning-program .program-card .price-box {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 24px
}

.learning-program .program-card .price-main {
    font-size: 32px;
    line-height: 1.1;
    color: #131B25;
    font-weight: 700
}

.learning-program .program-card .price-note {
    font-size: 16px;
    color: #131B25
}

.learning-program .program-card .btn-link {
    display: inline-block;
    background: #01C2E9;
    color: #131B25;
    font-size: 18px;
    padding: 16px 40px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .6s ease-in-out, color .6s ease-in-out
}

.learning-program .program-card .btn-link:hover {
    background: #131B25;
    color: #F8FAFC
}

.learning-program .stats-split {
    background: linear-gradient(180deg, #01C2E9 0%, #01C2E9 50%, #131B25 50%, #131B25 100%);
    padding: 80px 40px;
    position: relative
}

.learning-program .stats-split .inner {
    max-width: 1440px;
    margin: 0 auto
}

.learning-program .stats-split h2 {
    font-size: 44px;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 40px;
    color: #131B25
}

.learning-program .stats-split .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px
}

.learning-program .stats-split .metric-box {
    background: #fff;
    padding: 40px 24px;
    border-radius: 32px;
    text-align: center;
    box-shadow: 0 4px 25px 0 #01c2e917;
    transition: transform .65s ease-in-out
}

.learning-program .stats-split .metric-box:hover {
    transform: scale(1.05)
}

.learning-program .stats-split .metric-num {
    font-size: 62px;
    line-height: 1.1;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 16px;
    font-weight: 700
}

.learning-program .stats-split .metric-label {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25
}

.learning-program .detail-info {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 40px
}

.learning-program .detail-info h2 {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 8px;
    color: #131B25;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px
}

.learning-program .detail-info h2::before {
    content: '';
    width: 8px;
    height: 44px;
    background: #01C2E9;
    display: block;
    border-radius: 3px
}

.learning-program .detail-info .intro-txt {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 40px;
    max-width: 720px
}

.learning-program .detail-info .body-txt {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 24px
}

.learning-program .detail-info .body-txt:last-child {
    margin: 0
}

.learning-program .polygon-bg {
    background: #F8FAFC;
    position: relative;
    overflow: hidden
}

.learning-program .polygon-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: polygon(12% 18%, 28% 22%, 35% 8%, 45% 24%, 58% 12%, 72% 28%, 85% 15%, 95% 32%), polygon(8% 45%, 22% 52%, 18% 68%, 35% 58%, 48% 72%, 62% 55%, 78% 68%, 88% 52%), polygon(5% 82%, 18% 88%, 28% 78%, 42% 92%, 55% 85%, 68% 95%, 82% 82%, 92% 88%);
    opacity: .03;
    pointer-events: none;
    z-index: 0
}

.learning-program .polygon-bg .inner {
    position: relative;
    z-index: 1
}

.learning-program .divider-curve {
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden
}

.learning-program .divider-curve svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px
}

.learning-program .divider-curve.top {
    transform: rotate(180deg)
}

.learning-program .gradient-anim {
    background: linear-gradient(90deg, #F8FAFC 0%, #01c2e91a 50%, #F8FAFC 100%);
    background-size: 200% 100%;
    animation: gradient-shift 8s ease-in-out infinite
}

@keyframes gradient-shift {
    0% {
        background-position: 0 50%
    }

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

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

@media (max-width: 1280px) {
    .learning-program .split-title h1 {
        font-size: 44px
    }

    .learning-program .catalog-grid h2,
    .learning-program .stats-split h2,
    .learning-program .detail-info h2 {
        font-size: 32px
    }

    .learning-program .stats-split .metric-num {
        font-size: 44px
    }
}

@media (max-width: 1024px) {
    .learning-program .split-title {
        flex-direction: column;
        min-height: auto
    }

    .learning-program .split-title .zone-left,
    .learning-program .split-title .zone-right {
        min-height: 400px
    }

    .learning-program .grid-items {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px
    }

    .learning-program .catalog-grid,
    .learning-program .stats-split,
    .learning-program .detail-info {
        padding: 40px 24px
    }
}

@media (max-width: 768px) {
    .learning-program .split-title h1 {
        font-size: 32px
    }

    .learning-program .catalog-grid h2,
    .learning-program .stats-split h2,
    .learning-program .detail-info h2 {
        font-size: 24px
    }

    .learning-program .stats-split .metric-num {
        font-size: 32px
    }

    .learning-program .stats-split .metric-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .learning-program .grid-items {
        grid-template-columns: 1fr
    }

    .learning-program .program-card .price-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
}

@media (max-width: 375px) {
    .learning-program .split-title h1 {
        font-size: 24px
    }

    .learning-program .catalog-grid,
    .learning-program .stats-split,
    .learning-program .detail-info {
        padding: 24px 16px
    }

    .learning-program .program-card .txt-area {
        padding: 16px
    }
}

.preparation {
    background: #F8FAFC;
    color: #131B25;
    max-width: 1440px;
    margin: 0 auto
}

.preparation .intro-visual {
    position: relative;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(90deg, #01C2E9 0%, #01c2e900 100%);
    overflow: hidden
}

.preparation .intro-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #131B25
}

.preparation .intro-visual::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #131b254d
}

.preparation .intro-img-wrap {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 0 40px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 8px 60px 0 #01c2e921
}

.preparation .intro-img-wrap::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, #131b25b3 100%);
    z-index: 1;
    pointer-events: none
}

.preparation .intro-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform .75s cubic-bezier(0.4, 0, 0.2, 1)
}

.preparation .intro-img-wrap:hover .intro-img {
    transform: scale(1.08)
}

.preparation .intro-label {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 16px;
    text-align: center;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .8
}

.preparation .intro-heading {
    font-size: 62px;
    line-height: 1.1;
    margin: 0 0 24px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.preparation .intro-text {
    font-size: 18px;
    line-height: 1.75;
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
    color: #131B25
}

.preparation .detail-grid {
    padding: 80px 24px;
    background: #fff;
    position: relative
}

.preparation .detail-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: calc(100% - 48px);
    height: 2px;
    background: #131B25
}

.preparation .detail-grid::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 24px;
    width: calc(100% - 48px);
    height: 2px;
    background: #131b2533
}

.preparation .detail-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 40px
}

.preparation .detail-main {
    flex: 1 1 75%;
    min-width: 0
}

.preparation .detail-sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.preparation .detail-heading {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 40px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.preparation .detail-intro {
    font-size: 24px;
    line-height: 1.75;
    margin: 0 0 24px;
    color: #131B25
}

.preparation .detail-body {
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 24px;
    color: #131B25
}

.preparation .detail-body:last-child {
    margin: 0
}

.preparation .requirement-card {
    background: #F8FAFC;
    border-radius: 32px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 #01c2e914;
    transition: box-shadow .65s cubic-bezier(0.4, 0, 0.2, 1), transform .65s cubic-bezier(0.4, 0, 0.2, 1)
}

.preparation .requirement-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 0 32px 0 100%;
    background: #01c2e91f;
    pointer-events: none
}

.preparation .requirement-card:hover {
    box-shadow: 0 8px 60px 0 #01c2e921;
    transform: translateY(-4px)
}

.preparation .requirement-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: #01C2E9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    position: relative;
    box-shadow: 0 4px 25px 0 #01c2e917
}

.preparation .requirement-icon-wrap::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #01C2E9;
    border-radius: 32px;
    opacity: .3
}

.preparation .requirement-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.preparation .requirement-title {
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 8px;
    color: #131B25;
    font-weight: 700
}

.preparation .requirement-desc {
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    color: #131B25;
    opacity: .85
}

.preparation .checklist-card {
    background: linear-gradient(135deg, #131B25 0%, #131b25e6 100%);
    border-radius: 32px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 25px 0 #131b2517;
    animation: expand-height .85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top
}

@keyframes expand-height {
    from {
        max-height: 0;
        opacity: 0
    }

    to {
        max-height: 1000px;
        opacity: 1
    }
}

.preparation .checklist-heading {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #fff;
    font-weight: 700
}

.preparation .checklist-items {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.preparation .checklist-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px
}

.preparation .checklist-mark {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background: #01C2E9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px
}

.preparation .checklist-mark::after {
    content: '';
    width: 12px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-2px)
}

.preparation .checklist-label {
    font-size: 16px;
    line-height: 1.75;
    color: #fff;
    margin: 0;
    flex: 1
}

.preparation .resource-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 40px 0 0
}

.preparation .resource-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 #131b2514;
    transition: box-shadow .6s cubic-bezier(0.4, 0, 0.2, 1), transform .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.preparation .resource-item:hover {
    box-shadow: 0 4px 25px 0 #131b2517;
    transform: translateX(8px)
}

.preparation .resource-number {
    width: 48px;
    height: 48px;
    border-radius: 32px;
    background: #131B25;
    color: #01C2E9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    flex-shrink: 0
}

.preparation .resource-content {
    flex: 1;
    min-width: 0
}

.preparation .resource-name {
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 4px;
    color: #131B25;
    font-weight: 700
}

.preparation .resource-note {
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    color: #131B25;
    opacity: .75
}

@media (max-width: 1024px) {
    .preparation .intro-visual {
        padding: 80px 24px
    }

    .preparation .intro-heading {
        font-size: 44px
    }

    .preparation .detail-container {
        flex-direction: column
    }

    .preparation .detail-sidebar {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px
    }

    .preparation .detail-main {
        flex: 1 1 auto
    }
}

@media (max-width: 768px) {
    .preparation .intro-visual {
        padding: 40px 16px
    }

    .preparation .intro-heading {
        font-size: 32px
    }

    .preparation .intro-label {
        font-size: 16px
    }

    .preparation .intro-text {
        font-size: 16px
    }

    .preparation .intro-img {
        height: 280px
    }

    .preparation .detail-grid {
        padding: 40px 16px
    }

    .preparation .detail-grid::before,
    .preparation .detail-grid::after {
        left: 16px;
        width: calc(100% - 32px)
    }

    .preparation .detail-heading {
        font-size: 32px;
        margin: 0 0 24px
    }

    .preparation .detail-intro {
        font-size: 18px
    }

    .preparation .detail-body {
        font-size: 16px
    }

    .preparation .detail-sidebar {
        grid-template-columns: 1fr
    }

    .preparation .resource-list {
        margin: 24px 0 0
    }
}

@media (max-width: 375px) {
    .preparation .intro-heading {
        font-size: 24px
    }

    .preparation .detail-heading {
        font-size: 24px
    }

    .preparation .intro-img {
        height: 220px
    }
}

.debut {
    background: #F8FAFC;
    color: #131B25;
    overflow-x: clip
}

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

.debut .container-wide {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px
}

.debut .opening-statement {
    background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden
}

.debut .opening-statement::before {
    content: '';
    position: absolute;
    top: 120px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid #01C2E9;
    opacity: .04;
    pointer-events: none
}

.debut .opening-statement::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: -120px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid #131B25;
    opacity: .03;
    pointer-events: none
}

.debut .opening-statement .container-wide {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
    position: relative;
    z-index: 1
}

.debut .visual-anchor {
    flex-shrink: 0;
    width: 280px
}

.debut .visual-anchor img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 3px;
    filter: grayscale(100%) contrast(1.3);
    box-shadow: 0 8px 60px 0 #01c2e921;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .visual-anchor img:hover {
    transform: scale(1.05)
}

.debut .text-zone {
    flex: 1;
    padding-top: 120px;
    position: relative
}

.debut .text-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40px;
    width: 200px;
    height: 300px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300"><path d="M20,50 Q80,120 20,200 Q100,250 180,280" stroke="%2301C2E9" stroke-width="1.5" fill="none" opacity="0.12"/><path d="M40,30 Q120,80 60,160 Q140,220 200,260" stroke="%23131B25" stroke-width="1" fill="none" opacity="0.08"/></svg>') no-repeat center;
    background-size: contain;
    pointer-events: none;
    opacity: 0;
    animation: curve-reveal 900ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards
}

@keyframes curve-reveal {
    to {
        opacity: 1
    }
}

.debut .headline-primary {
    font-size: 72px;
    line-height: 1.1;
    margin: 0 0 16px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: text-appear 800ms cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards
}

@keyframes text-appear {
    to {
        opacity: 1
    }
}

.debut .headline-secondary {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #131B25;
    opacity: 0;
    animation: text-appear 800ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards
}

.debut .headline-tertiary {
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 40px;
    color: #131b25b3;
    opacity: 0;
    animation: text-appear 800ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards
}

.debut .intro-text {
    font-size: 24px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 24px;
    opacity: 0;
    animation: text-appear 800ms cubic-bezier(0.4, 0, 0.2, 1) 800ms forwards
}

.debut .body-text {
    font-size: 18px;
    line-height: 1.75;
    color: #131b25d9;
    margin: 0;
    opacity: 0;
    animation: text-appear 800ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms forwards
}

.debut .expertise-showcase {
    background: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative
}

.debut .expertise-showcase::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 80px 100vw;
    border-color: transparent transparent #F8FAFC;
    pointer-events: none
}

.debut .section-heading {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 80px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

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

.debut .expert-card {
    background: #F8FAFC;
    border-radius: 3px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 #01c2e914;
    transition: box-shadow 750ms cubic-bezier(0.4, 0, 0.2, 1), transform 750ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .expert-card:hover {
    box-shadow: 0 8px 60px 0 #01c2e921;
    transform: translateY(-4px)
}

.debut .expert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #131B25 0%, transparent 100%)
}

.debut .expert-photo {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 24px;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .expert-card:hover .expert-photo {
    transform: scale(1.08)
}

.debut .expert-name {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 8px;
    color: #131B25
}

.debut .expert-role {
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 16px;
    color: #01C2E9
}

.debut .expert-bio {
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    color: #131b25cc
}

.debut .metrics-display {
    background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative
}

.debut .metrics-display::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    border: 1px solid #01C2E9;
    opacity: .02;
    pointer-events: none
}

.debut .metrics-heading {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 80px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.debut .metrics-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: start
}

.debut .metric-block {
    background: #fff;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 4px 25px 0 #131b2517;
    position: relative;
    transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 800ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .metric-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 60px 0 #131b2521
}

.debut .metric-block:active {
    transform: translateY(-6px)
}

.debut .ring-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 24px
}

.debut .ring-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 16px solid #01c2e91a
}

.debut .ring-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 16px solid transparent;
    border-top-color: #01C2E9;
    border-right-color: #01C2E9;
    transform: rotate(-90deg);
    transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .metric-block:nth-child(1) .ring-progress {
    transform: rotate(162deg)
}

.debut .metric-block:nth-child(2) .ring-progress {
    transform: rotate(108deg)
}

.debut .metric-block:nth-child(3) .ring-progress {
    transform: rotate(198deg)
}

.debut .metric-block:nth-child(4) .ring-progress {
    transform: rotate(234deg)
}

.debut .ring-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    font-weight: 600
}

.debut .metric-label {
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
    margin: 0 0 16px;
    color: #131B25
}

.debut .metric-description {
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
    margin: 0;
    color: #131b25b3
}

.debut .support-framework {
    background: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative
}

.debut .support-framework::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 100vw 0 0;
    border-color: #F8FAFC transparent transparent;
    pointer-events: none
}

.debut .support-heading {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 40px;
    text-align: center;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.debut .support-intro {
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
    color: #131b25d9
}

.debut .support-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.debut .support-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 8px 60px 0 #01c2e921
}

.debut .support-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .support-image-wrapper:hover .support-image {
    transform: scale(1.06)
}

.debut .support-content {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.debut .support-item {
    background: #F8FAFC;
    border-radius: 3px;
    padding: 24px;
    position: relative;
    transition: background 650ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .support-item:hover {
    background: #01c2e90d
}

.debut .support-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #01C2E9 0%, #131B25 100%);
    border-radius: 3px 0 0 3px
}

.debut .support-item-title {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #131B25
}

.debut .support-item-text {
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    color: #131b25cc
}

.debut .support-item-text a {
    color: #01C2E9;
    text-decoration: none;
    transition: color 600ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative
}

.debut .support-item-text a::after {
    content: '→';
    margin-left: 4px;
    display: inline-block;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .support-item-text a:hover {
    color: #131B25
}

.debut .support-item-text a:hover::after {
    transform: translateX(4px)
}

@media (max-width: 1280px) {
    .debut .opening-statement .container-wide {
        gap: 40px
    }

    .debut .visual-anchor {
        width: 240px
    }

    .debut .visual-anchor img {
        height: 360px
    }

    .debut .text-zone {
        padding-top: 80px
    }

    .debut .headline-primary {
        font-size: 62px
    }

    .debut .headline-secondary {
        font-size: 32px
    }

    .debut .expert-grid {
        gap: 24px
    }

    .debut .metrics-layout {
        gap: 24px
    }

    .debut .support-columns {
        gap: 40px
    }
}

@media (max-width: 1024px) {
    .debut .opening-statement .container-wide {
        flex-direction: column;
        gap: 40px
    }

    .debut .visual-anchor {
        width: 100%;
        max-width: 400px;
        margin: 0 auto
    }

    .debut .visual-anchor img {
        height: 480px
    }

    .debut .text-zone {
        padding-top: 0
    }

    .debut .headline-primary {
        font-size: 44px
    }

    .debut .headline-secondary {
        font-size: 32px
    }

    .debut .headline-tertiary {
        font-size: 24px
    }

    .debut .expert-grid {
        grid-template-columns: 1fr
    }

    .debut .metrics-layout {
        grid-template-columns: 1fr
    }

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

    .debut .support-image {
        height: 400px
    }
}

@media (max-width: 768px) {
    .debut .opening-statement {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .debut .headline-primary {
        font-size: 32px
    }

    .debut .headline-secondary {
        font-size: 24px
    }

    .debut .headline-tertiary {
        font-size: 18px
    }

    .debut .intro-text {
        font-size: 18px
    }

    .debut .body-text {
        font-size: 16px
    }

    .debut .expertise-showcase {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .debut .section-heading {
        font-size: 32px;
        margin-bottom: 40px
    }

    .debut .expert-card {
        padding: 16px
    }

    .debut .expert-photo {
        height: 240px
    }

    .debut .metrics-display {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .debut .metrics-heading {
        font-size: 32px;
        margin-bottom: 40px
    }

    .debut .metric-block {
        padding: 24px
    }

    .debut .ring-container {
        width: 140px;
        height: 140px
    }

    .debut .ring-background,
    .debut .ring-progress {
        border-width: 12px
    }

    .debut .ring-value {
        font-size: 32px
    }

    .debut .support-framework {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .debut .support-heading {
        font-size: 32px
    }

    .debut .support-intro {
        margin-bottom: 40px
    }

    .debut .support-image {
        height: 320px
    }
}

@media (max-width: 375px) {
    .debut .container-wide {
        padding-left: 16px;
        padding-right: 16px
    }

    .debut .headline-primary {
        font-size: 24px
    }

    .debut .headline-secondary {
        font-size: 18px
    }

    .debut .visual-anchor img {
        height: 360px
    }

    .debut .expert-photo {
        height: 200px
    }

    .debut .ring-container {
        width: 120px;
        height: 120px
    }

    .debut .ring-background,
    .debut .ring-progress {
        border-width: 10px
    }

    .debut .ring-value {
        font-size: 24px
    }

    .debut .support-image {
        height: 280px
    }
}

.success-page {
    background: linear-gradient(to right, #131B25, transparent);
    padding: 80px 16px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.success-page .wrapper {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto
}

.success-page .content-box {
    background: #F8FAFC;
    border-radius: 32px;
    padding: 80px 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 60px 0 #01c2e921
}

.success-page .icon-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
    position: relative
}

.success-page .icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 3px;
    background: linear-gradient(to right, #01C2E9, #131B25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-appear 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: scale(0)
}

@keyframes icon-appear {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0
    }

    60% {
        transform: scale(1.15) rotate(180deg)
    }

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

.success-page .checkmark {
    width: 60px;
    height: 60px;
    position: relative
}

.success-page .checkmark::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 32px;
    border: solid #F8FAFC;
    border-width: 0 6px 6px 0;
    transform: rotate(45deg);
    left: 20px;
    top: 8px;
    animation: check-draw 600ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards;
    opacity: 0
}

@keyframes check-draw {
    0% {
        height: 0;
        opacity: 0
    }

    100% {
        height: 32px;
        opacity: 1
    }
}

.success-page .main-heading {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 24px;
    background: linear-gradient(to right, #01C2E9, #131B25);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.success-page .message-text {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0 0 40px
}

.success-page .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 40px
}

.success-page .info-item {
    background: #fff;
    padding: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 5px 0 #01c2e914;
    transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1)
}

.success-page .info-item:hover {
    transform: translateY(-4px)
}

.success-page .info-icon {
    width: 48px;
    height: 48px;
    background: #01C2E9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.success-page .info-icon svg {
    width: 24px;
    height: 24px;
    fill: #F8FAFC
}

.success-page .info-content {
    text-align: left;
    flex: 1
}

.success-page .info-label {
    font-size: 16px;
    line-height: 1.1;
    color: #131B25;
    margin: 0 0 4px;
    font-weight: 600
}

.success-page .info-value {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    opacity: .7
}

.success-page .action-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
}

.success-page .btn-primary {
    background: #131B25;
    color: #F8FAFC;
    padding: 16px 40px;
    border-radius: 3px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background 800ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 25px 0 #131b2517
}

.success-page .btn-primary:hover {
    background: #01C2E9
}

.success-page .btn-secondary {
    background: transparent;
    color: #131B25;
    padding: 16px 40px;
    border-radius: 3px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border: 2px solid #131B25;
    transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer
}

.success-page .btn-secondary:hover {
    background: #131B25;
    color: #F8FAFC
}

.success-page .footer-note {
    margin: 40px 0 0;
    padding: 24px;
    background: #fff;
    border-radius: 3px;
    border-left: 4px solid #01C2E9
}

.success-page .footer-note-text {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

@media (min-width: 768px) {
    .success-page .info-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 767px) {
    .success-page {
        padding: 40px 16px
    }

    .success-page .content-box {
        padding: 40px 24px
    }

    .success-page .main-heading {
        font-size: 32px
    }

    .success-page .icon-container {
        width: 80px;
        height: 80px;
        margin: 0 auto 24px
    }

    .success-page .icon-circle {
        width: 80px;
        height: 80px
    }

    .success-page .checkmark {
        width: 40px;
        height: 40px
    }

    .success-page .checkmark::before {
        width: 8px;
        height: 20px;
        border-width: 0 4px 4px 0;
        left: 14px;
        top: 6px
    }

    @keyframes check-draw {
        0% {
            height: 0;
            opacity: 0
        }

        100% {
            height: 20px;
            opacity: 1
        }
    }

    .success-page .action-group {
        flex-direction: column
    }

    .success-page .btn-primary,
    .success-page .btn-secondary {
        width: 100%
    }
}

.innovation {
    max-width: 1440px;
    margin: 0 auto
}

.innovation .lead-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 80px 24px;
    background: linear-gradient(90deg, #01C2E9 0%, #01c2e900 100%);
    position: relative;
    overflow: hidden
}

.innovation .lead-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #F8FAFC 0%, #f8fafc66 100%);
    pointer-events: none
}

.innovation .visual-zone {
    flex: 0 0 420px;
    position: relative;
    z-index: 1
}

.innovation .visual-zone::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: radial-gradient(circle at 30% 40%, #01c2e926 0%, transparent 70%);
    z-index: -1
}

.innovation .lead-img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    filter: sepia(0.2) hue-rotate(170deg) saturate(1.3);
    box-shadow: 0 8px 60px 0 #01c2e921
}

.innovation .text-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    position: relative;
    z-index: 1
}

.innovation .lead-heading {
    font-size: 62px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.innovation .lead-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.innovation .lead-list li {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.innovation .lead-list li::before {
    content: '';
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: #01C2E9;
    border-radius: 32px;
    margin-top: 4px;
    box-shadow: 0 2px 5px 0 #01c2e914
}

.innovation .metrics-wrapper {
    padding: 80px 24px;
    background: #F8FAFC;
    position: relative;
    clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
    margin-top: -40px
}

.innovation .metrics-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.innovation .metrics-header {
    text-align: center
}

.innovation .metrics-title {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 16px;
    background: linear-gradient(90deg, #01C2E9 0%, #131B25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.innovation .metrics-intro {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto
}

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

.innovation .metric-card {
    background: #fff;
    padding: 40px 24px;
    border-radius: 3px;
    border: 2px solid #131B25;
    outline: 2px solid #01C2E9;
    outline-offset: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1), outline-offset .7s cubic-bezier(0.4, 0, 0.2, 1);
    animation: brightness-pulse 8s ease-in-out infinite
}

@keyframes brightness-pulse {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.03)
    }
}

.innovation .metric-card:hover {
    transform: translateY(-8px);
    outline-offset: 8px
}

.innovation .metric-value {
    font-size: 44px;
    line-height: 1.1;
    color: #01C2E9;
    margin: 0
}

.innovation .metric-label {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.innovation .approach-section {
    padding: 80px 24px;
    background: #fff;
    position: relative
}

.innovation .approach-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./media_archive/IMG-1796.jpg);
    background-size: cover;
    background-position: center;
    opacity: .08;
    pointer-events: none
}

.innovation .approach-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: flex-start
}

.innovation .approach-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 80px
}

.innovation .approach-heading {
    font-size: 44px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.innovation .approach-subtext {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.innovation .approach-main {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.innovation .approach-item {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start
}

.innovation .approach-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #F8FAFC;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px 0 #131b2514
}

.innovation .approach-icon {
    width: 24px;
    height: 24px;
    fill: #01C2E9
}

.innovation .approach-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.innovation .approach-item-title {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.innovation .approach-item-text {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.innovation .approach-item-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.75;
    color: #131B25
}

.innovation .approach-item-check::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #01C2E9;
    border-radius: 32px;
    flex-shrink: 0
}

.innovation .framework-zone {
    padding: 80px 24px;
    background: linear-gradient(90deg, #F8FAFC 0%, #fff 50%, #F8FAFC 100%);
    position: relative
}

.innovation .framework-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.innovation .framework-top {
    text-align: center
}

.innovation .framework-title {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 16px;
    background: linear-gradient(90deg, #131B25 0%, #01C2E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.innovation .framework-desc {
    font-size: 18px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

.innovation .framework-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.innovation .framework-block {
    background: #fff;
    padding: 40px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 25px 0 #01c2e917;
    transition: box-shadow .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative
}

.innovation .framework-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #01C2E9;
    border-radius: 3px 0 0 3px;
    transition: width .8s cubic-bezier(0.4, 0, 0.2, 1)
}

.innovation .framework-block:hover {
    box-shadow: 0 8px 60px 0 #01c2e921;
    transform: translateX(8px)
}

.innovation .framework-block:hover::before {
    width: 8px
}

.innovation .framework-block-heading {
    font-size: 24px;
    line-height: 1.1;
    color: #131B25;
    margin: 0
}

.innovation .framework-block-text {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

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

.innovation .framework-list li {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    display: flex;
    align-items: center;
    gap: 8px
}

.innovation .framework-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #01C2E9;
    border-radius: 32px;
    flex-shrink: 0
}

.innovation .framework-highlight {
    background: #F8FAFC;
    padding: 24px;
    border-radius: 3px;
    margin-top: 8px;
    box-shadow: inset 0 2px 4px 0 #131b250d
}

.innovation .framework-highlight-text {
    font-size: 16px;
    line-height: 1.75;
    color: #131B25;
    margin: 0
}

@media (max-width: 1280px) {
    .innovation .lead-container {
        gap: 24px;
        padding: 80px 16px
    }

    .innovation .visual-zone {
        flex: 0 0 360px
    }

    .innovation .lead-img {
        height: 520px
    }

    .innovation .lead-heading {
        font-size: 44px
    }

    .innovation .metrics-grid {
        gap: 16px
    }

    .innovation .approach-content {
        gap: 40px
    }
}

@media (max-width: 1024px) {
    .innovation .lead-container {
        flex-direction: column;
        gap: 40px
    }

    .innovation .visual-zone {
        flex: 0 0 auto;
        width: 100%
    }

    .innovation .lead-img {
        height: 420px
    }

    .innovation .lead-heading {
        font-size: 44px
    }

    .innovation .metrics-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .innovation .approach-content {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .innovation .approach-sidebar {
        position: static
    }

    .innovation .framework-body {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .innovation .lead-container {
        padding: 40px 16px
    }

    .innovation .lead-heading {
        font-size: 32px
    }

    .innovation .lead-list li {
        font-size: 16px
    }

    .innovation .metrics-wrapper {
        padding: 40px 16px
    }

    .innovation .metrics-title {
        font-size: 32px
    }

    .innovation .metrics-intro {
        font-size: 16px
    }

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

    .innovation .approach-section {
        padding: 40px 16px
    }

    .innovation .approach-heading {
        font-size: 32px
    }

    .innovation .approach-item-title {
        font-size: 18px
    }

    .innovation .framework-zone {
        padding: 40px 16px
    }

    .innovation .framework-title {
        font-size: 32px
    }

    .innovation .framework-desc {
        font-size: 16px
    }

    .innovation .framework-block {
        padding: 24px
    }
}

@media (max-width: 375px) {
    .innovation .lead-container {
        padding: 24px 8px
    }

    .innovation .lead-heading {
        font-size: 24px
    }

    .innovation .lead-img {
        height: 320px
    }

    .innovation .metrics-wrapper {
        padding: 24px 8px
    }

    .innovation .metrics-title {
        font-size: 24px
    }

    .innovation .metric-value {
        font-size: 32px
    }

    .innovation .approach-section {
        padding: 24px 8px
    }

    .innovation .approach-heading {
        font-size: 24px
    }

    .innovation .framework-zone {
        padding: 24px 8px
    }

    .innovation .framework-title {
        font-size: 24px
    }

    .innovation .framework-block {
        padding: 16px
    }
}