html {
    box-sizing: border-box
}

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

body {
    margin: 0;
    padding: 0;
    min-height: 100svh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    font-family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(165deg, #0d0d11 0%, #0f1318 35%, #0b0e13 100%);
    color: #f4f4f5;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .01em
}

.top-band {
    background: linear-gradient(92deg, #05975f14 0%, #7017521f 100%);
    border-bottom: 1px solid #05975f2e;
    padding: 12px 0
}

.top-band-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.quick-links {
    display: flex;
    gap: 24px;
    align-items: center
}

.qlink {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e8e8ea;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .02em;
    transition: color .22s ease-out, transform .18s ease-out;
    transform-style: preserve-3d
}

.qlink:hover {
    color: #05975F;
    transform: perspective(500px) rotateX(2deg) rotateY(-1deg)
}

.qlink:focus {
    outline: none;
    border: 1px solid #05975f99;
    background: #05975f14;
    padding: 4px 12px;
    border-radius: 3px
}

.qlink-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.qlink-ico circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8
}

.qlink-ico path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tagline-top {
    color: #fff4f7b8;
    font-size: 13px;
    letter-spacing: .03em
}

header {
    position: relative;
    background: linear-gradient(178deg, #70175217 0%, #05975f0f 100%);
    border-bottom: 2px solid #05975f38;
    box-shadow: 1px 6px 28px -2px #05975f14
}

.hdr-main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px
}

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

.logo-card {
    background: #fff4f7f5;
    border: 1px solid #70175224;
    border-radius: 5px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 3px 4px -2px #70175212;
    transition: box-shadow .28s ease-out, transform .22s ease-out;
    transform-style: preserve-3d
}

.logo-card:hover {
    box-shadow: 1px 6px 28px -2px #70175214;
    transform: perspective(600px) rotateX(-1deg) rotateY(2deg)
}

.logo-img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain
}

.brand-txt {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #f8f8f9;
    text-decoration: none;
    transition: color .25s ease-out
}

.brand-txt:hover {
    color: #05975F
}

.nav-primary {
    flex: 1;
    display: flex;
    justify-content: center
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center
}

.nav-item {
    display: block
}

.nav-link {
    display: block;
    padding: 12px 24px;
    color: #e8e8ea;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .02em;
    border-radius: 5px;
    background: linear-gradient(135deg, #05975f14 0%, #70175214 100%);
    border: 1px solid #05975f29;
    transition: background .32s ease-out, border-color .28s ease-out, color .22s ease-out, transform .2s ease-out;
    transform-style: preserve-3d
}

.nav-link:hover {
    background: linear-gradient(225deg, #05975f2e 0%, #70175224 100%);
    border-color: #05975f52;
    color: #05975F;
    transform: perspective(500px) rotateX(-2deg) rotateY(1deg)
}

.nav-link:focus {
    outline: none;
    border-color: #05975f99;
    background: #05975f24
}

.hdr-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0
}

.contact-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(145deg, #7017521f 0%, #05975f14 100%);
    border: 1px solid #7017523d;
    border-radius: 20px;
    color: #f4f4f5;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .02em;
    box-shadow: 1px 3px 4px -2px #70175212;
    transition: background .35s ease-out, border-color .3s ease-out, box-shadow .28s ease-out, transform .24s ease-out;
    transform-style: preserve-3d
}

.contact-chip:hover {
    background: linear-gradient(235deg, #70175238 0%, #05975f24 100%);
    border-color: #7017526b;
    box-shadow: 1px 6px 28px -2px #70175214;
    transform: perspective(550px) rotateX(2deg) rotateY(-2deg)
}

.contact-chip:focus {
    outline: none;
    border-color: #701752b3;
    background: #7017522e
}

.chip-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.chip-ico circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
}

.chip-ico path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.chip-ico rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media (max-width: 1200px) {
    .hdr-main {
        gap: 24px
    }

    .nav-list {
        gap: 4px
    }

    .nav-link {
        padding: 12px
    }
}

@media (max-width: 900px) {
    .top-band-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

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

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

    .nav-primary {
        width: 100%
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 4px
    }

    .nav-link {
        width: 100%;
        padding: 12px 24px
    }

    .hdr-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch
    }

    .contact-chip {
        width: 100%;
        justify-content: center
    }
}

@media (max-width: 600px) {
    .top-band {
        padding: 12px 0
    }

    .top-band-inner {
        padding: 0 12px
    }

    .tagline-top {
        display: none
    }

    .hdr-main {
        padding: 24px 12px
    }

    .brand-lock {
        gap: 12px
    }

    .brand-txt {
        font-size: 34px
    }

    .logo-card {
        padding: 12px
    }

    .logo-img {
        width: 38px;
        height: 38px
    }
}

main {
    min-height: 60svh
}

footer {
    background: linear-gradient(182deg, #05975f0f 0%, #70175217 100%);
    border-top: 2px solid #70175238;
    padding: 48px 0 24px;
    margin-top: 96px
}

.ftr-grid {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    margin-bottom: 48px
}

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

.ftr-heading {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #f8f8f9;
    margin: 0
}

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

.ftr-link {
    color: #fff4f7d1;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .01em;
    transition: color .26s ease-out, padding-left .22s ease-out;
    display: inline-block
}

.ftr-link:hover {
    color: #05975F;
    padding-left: 4px
}

.ftr-link:focus {
    outline: none;
    border: 1px solid #05975f99;
    background: #05975f14;
    padding: 4px 12px;
    border-radius: 3px
}

.ftr-txt {
    color: #fff4f7b8;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .01em;
    margin: 0
}

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

.ftr-logo-lock {
    display: flex;
    align-items: center;
    gap: 12px
}

.ftr-logo-card {
    background: #fff4f7f0;
    border: 1px solid #05975f24;
    border-radius: 5px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 3px 4px -2px #05975f12
}

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

.ftr-brand-name {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #f8f8f9
}

.ftr-divider {
    max-width: 1140px;
    margin: 0 auto 24px;
    padding: 0 24px;
    height: 1px;
    background: linear-gradient(90deg, #05975f29 0%, #70175229 50%, #05975f29 100%)
}

.ftr-bottom {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px
}

.ftr-copy {
    color: #fff4f79e;
    font-size: 13px;
    letter-spacing: .01em
}

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

.ftr-legal-link {
    color: #fff4f7b8;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .01em;
    transition: color .24s ease-out
}

.ftr-legal-link:hover {
    color: #701752
}

.ftr-legal-link:focus {
    outline: none;
    border: 1px solid #70175299;
    background: #70175214;
    padding: 4px 12px;
    border-radius: 3px
}

@media (max-width: 1200px) {
    .ftr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px
    }
}

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

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

    .ftr-legal {
        flex-direction: column;
        gap: 12px
    }
}

@media (max-width: 600px) {
    footer {
        padding: 48px 0 24px
    }

    .ftr-grid {
        padding: 0 12px;
        gap: 48px
    }

    .ftr-bottom {
        padding: 0 12px
    }

    .ftr-divider {
        padding: 0 12px
    }
}

.consent-wrap {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1500;
    max-width: 360px;
    display: none;
    opacity: 0;
    transition: opacity .18s ease-out
}

.consent-wrap.visible {
    opacity: 1
}

.consent-box {
    background: linear-gradient(168deg, #0d0d11fa 0%, #0f1318fa 100%);
    border: 1px solid #05975f52;
    border-radius: 5px;
    padding: 24px;
    box-shadow: 1px 12px 36px -2px #05975f1f;
    backdrop-filter: blur(12px)
}

.consent-desc {
    color: #fff4f7e0;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .01em;
    margin: 0 0 24px
}

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

.consent-btn {
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .02em;
    border-radius: 5px;
    cursor: pointer;
    transition: background .28s ease-out, border-color .24s ease-out, color .22s ease-out, box-shadow .26s ease-out, transform .2s ease-out;
    transform-style: preserve-3d;
    font-family: 'Red Hat Display', sans-serif;
    text-align: center;
    text-decoration: none;
    display: block
}

.consent-btn:hover {
    transform: perspective(500px) rotateX(-1deg) rotateY(1deg)
}

.consent-btn:active {
    box-shadow: inset 1px 3px 4px -2px #05975f1f
}

.consent-accept {
    background: transparent;
    border: 1px solid #05975f6b;
    color: #05975F
}

.consent-accept:hover {
    background: #05975f1f;
    border-color: #05975f9e;
    color: #05975F
}

.consent-accept:focus {
    outline: none;
    border-color: #05975fcc;
    background: #05975f29
}

.consent-decline {
    background: transparent;
    border: 1px solid #7017526b;
    color: #701752
}

.consent-decline:hover {
    background: #7017521f;
    border-color: #7017529e;
    color: #701752
}

.consent-decline:focus {
    outline: none;
    border-color: #701752cc;
    background: #70175229
}

@media (max-width: 600px) {
    .consent-wrap {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none
    }
}

img {
    max-width: 100%;
    height: auto
}

.text-legal {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 24px;
    background: #0a0f0d;
    color: #e8e8e8
}

.text-legal h1 {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 48px;
    padding-bottom: 24px;
    border-bottom: 2px solid #05975f33
}

.text-legal h2 {
    font-size: 46px;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: #f5f5f5;
    margin: 96px 0 24px
}

.text-legal h3 {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #efefef;
    margin: 48px 0 24px
}

.text-legal h4 {
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #05975F;
    margin: 48px 0 12px;
    font-weight: 600
}

.text-legal h5 {
    font-size: 13px;
    line-height: 1.65;
    color: #d8d8d8;
    margin: 24px 0 12px;
    font-weight: 600
}

.text-legal h6 {
    font-size: 13px;
    line-height: 1.65;
    color: #c8c8c8;
    margin: 24px 0 12px;
    font-style: italic
}

.text-legal p {
    font-size: 13px;
    line-height: 1.85;
    color: #d0d0d0;
    margin: 0 0 24px
}

.text-legal ul,
.text-legal ol {
    font-size: 13px;
    line-height: 1.85;
    color: #d0d0d0;
    margin: 0 0 24px;
    padding-left: 24px
}

.text-legal li {
    margin-bottom: 12px
}

.text-legal li:last-child {
    margin-bottom: 0
}

.text-legal ul ul,
.text-legal ul ol,
.text-legal ol ul,
.text-legal ol ol {
    margin-top: 12px;
    margin-bottom: 12px
}

.text-legal strong,
.text-legal b {
    color: #fff;
    font-weight: 600
}

.text-legal a {
    color: #05975F;
    text-decoration: none;
    border-bottom: 1px solid #05975f4d;
    transition: border-color .25s ease-out, color .2s ease-out
}

.text-legal a:hover {
    color: #07b575;
    border-bottom-color: #07b57599
}

.text-legal a:active {
    color: #FFF4F7
}

.text-legal hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, #05975f00 0%, #05975f4d 50%, #05975f00 100%);
    margin: 48px 0
}

.text-legal div {
    margin: 0
}

@media (max-width: 900px) {
    .text-legal {
        padding: 48px 12px
    }

    .text-legal h1 {
        font-size: 46px;
        margin-bottom: 24px
    }

    .text-legal h2 {
        font-size: 34px;
        margin-top: 48px
    }

    .text-legal h3 {
        font-size: 34px;
        margin-top: 24px
    }
}

@media (max-width: 600px) {
    .text-legal {
        padding: 24px 12px
    }

    .text-legal h1 {
        font-size: 34px;
        line-height: 1.4
    }

    .text-legal h2 {
        font-size: 34px;
        margin-top: 48px
    }

    .text-legal h3 {
        font-size: 13px;
        margin-top: 24px
    }

    .text-legal ul,
    .text-legal ol {
        padding-left: 12px
    }
}

.reach-page {
    background: #0a0a0d;
    color: #e8e8ea;
    overflow-x: clip
}

.reach-page .grad-intro {
    position: relative;
    padding: 144px 24px 96px;
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
    background: linear-gradient(ellipse at center, #05975f14, transparent 70%), linear-gradient(ellipse at 30% 20%, #7017520f, transparent 60%), #0d0d11
}

.reach-page .grad-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #fff4f704 2px, #fff4f704 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, #fff4f704 2px, #fff4f704 4px);
    opacity: .4;
    pointer-events: none;
    animation: grad-shift 18s ease-in-out infinite
}

@keyframes grad-shift {

    0%,
    100% {
        background-position: 0 0;
        opacity: .4
    }

    50% {
        background-position: 100% 100%;
        opacity: .6
    }
}

.reach-page .grad-intro .label-txt {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #05975fd9;
    margin-bottom: 12px;
    font-weight: 500
}

.reach-page .grad-intro .main-hdg {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 24px;
    font-weight: 700
}

.reach-page .grad-intro .main-hdg .accent-word {
    color: #05975F;
    position: relative
}

.reach-page .grad-intro .main-hdg .accent-word::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #701752;
    border-radius: 50%
}

.reach-page .grad-intro .desc-txt {
    font-size: 34px;
    line-height: 1.4;
    color: #c1c1c5;
    max-width: 780px
}

.reach-page .circles-deco {
    position: absolute;
    bottom: 48px;
    right: 48px;
    width: 280px;
    height: 280px;
    pointer-events: none;
    opacity: .12
}

.reach-page .circles-deco .circ {
    position: absolute;
    border: 1px solid #05975F;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.reach-page .circles-deco .circ:nth-child(1) {
    width: 80px;
    height: 80px
}

.reach-page .circles-deco .circ:nth-child(2) {
    width: 140px;
    height: 140px
}

.reach-page .circles-deco .circ:nth-child(3) {
    width: 200px;
    height: 200px
}

.reach-page .circles-deco .circ:nth-child(4) {
    width: 260px;
    height: 260px
}

.reach-page .arrow-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: #0f0f13
}

.reach-page .arrow-divider .arr {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #05975f4d;
    transition: border-top-color .28s ease-out
}

.reach-page .arrow-divider:hover .arr {
    border-top-color: #05975f99
}

.reach-page .split-zone {
    position: relative;
    background: linear-gradient(ellipse at 20% 40%, #70175214, transparent 65%), #0a0a0d;
    padding: 96px 24px
}

.reach-page .split-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(./image_bank/20240921-02-file.jpg);
    background-size: cover;
    background-position: center;
    opacity: .08;
    pointer-events: none;
    filter: brightness(0.4)
}

.reach-page .split-zone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0a0a0d 0%, transparent 15%, transparent 85%, #0a0a0d 100%);
    pointer-events: none
}

.reach-page .split-zone .inner-wrap {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 48px;
    position: relative;
    z-index: 1
}

.reach-page .split-zone .left-col {
    flex: 0 0 40%
}

.reach-page .split-zone .right-col {
    flex: 0 0 calc(60% - 48px)
}

.reach-page .split-zone .side-hdg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 24px;
    font-weight: 600;
    color: #e8e8ea
}

.reach-page .split-zone .info-grid {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.reach-page .split-zone .info-item {
    background: #0d0d1199;
    padding: 24px;
    border-radius: 5px;
    border: 1px solid #05975f26;
    transition: transform .32s ease-out, box-shadow .32s ease-out, border-color .32s ease-out;
    box-shadow: 1px 3px 4px -2px #05975f12;
    backdrop-filter: blur(8px)
}

.reach-page .split-zone .info-item:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 1px 6px 28px -2px #05975f14;
    border-color: #05975f4d
}

.reach-page .split-zone .info-item .item-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #701752bf;
    margin-bottom: 12px;
    font-weight: 500
}

.reach-page .split-zone .info-item .item-val {
    font-size: 34px;
    line-height: 1.4;
    color: #e8e8ea;
    word-break: break-word
}

.reach-page .split-zone .info-item .item-val a {
    color: #05975F;
    text-decoration: none;
    transition: color .22s ease-out
}

.reach-page .split-zone .info-item .item-val a:hover {
    color: #06b574
}

.reach-page .split-zone .form-wrap {
    background: #0f0f13d9;
    padding: 48px;
    border-radius: 20px;
    border: 1px solid #70175233;
    box-shadow: 1px 12px 36px -2px #7017521f;
    backdrop-filter: blur(12px)
}

.reach-page .split-zone .form-hdg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-bottom: 12px;
    font-weight: 600;
    color: #e8e8ea
}

.reach-page .split-zone .form-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #9a9a9e;
    margin-bottom: 24px
}

.reach-page .split-zone .form-ctrl {
    margin-bottom: 24px
}

.reach-page .split-zone .form-ctrl label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c1c1c5;
    margin-bottom: 12px;
    font-weight: 500
}

.reach-page .split-zone .form-ctrl input[type="email"] {
    width: 100%;
    padding: 12px 24px;
    font-size: 34px;
    line-height: 1.4;
    background: #0a0a0d99;
    border: 1px solid #05975f33;
    border-radius: 3px;
    color: #e8e8ea;
    transition: border-color .25s ease-out, box-shadow .25s ease-out;
    box-shadow: inset 1px 3px 4px -2px #05975f12
}

.reach-page .split-zone .form-ctrl input[type="email"]:focus {
    outline: none;
    border-color: #05975f80;
    box-shadow: inset 1px 6px 28px -2px #05975f14
}

.reach-page .split-zone .form-ctrl input[type="email"]::placeholder {
    color: #c1c1c54d
}

.reach-page .split-zone .interest-group {
    margin-bottom: 24px
}

.reach-page .split-zone .interest-group .group-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c1c1c5;
    margin-bottom: 12px;
    font-weight: 500;
    display: block
}

.reach-page .split-zone .interest-opts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.reach-page .split-zone .check-item {
    position: relative
}

.reach-page .split-zone .check-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.reach-page .split-zone .check-item .check-label {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: #0a0a0d66;
    border: 1px solid #70175233;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.65;
    color: #c1c1c5;
    transition: background .2s ease-out, border-color .2s ease-out, transform .2s ease-out;
    user-select: none
}

.reach-page .split-zone .check-item .check-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid #70175266;
    border-radius: 3px;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background .2s ease-out, border-color .2s ease-out;
    background: #0a0a0d99
}

.reach-page .split-zone .check-item input[type="checkbox"]:checked+.check-label {
    background: #70175226;
    border-color: #70175280
}

.reach-page .split-zone .check-item input[type="checkbox"]:checked+.check-label::before {
    background: #701752;
    border-color: #701752;
    box-shadow: inset 0 0 0 3px #0a0a0de6
}

.reach-page .split-zone .check-item input[type="checkbox"]:focus+.check-label {
    outline: 2px solid #70175266;
    outline-offset: 2px
}

.reach-page .split-zone .check-item .check-label:hover {
    background: #70175214;
    border-color: #70175259;
    transform: perspective(600px) rotateX(1deg)
}

.reach-page .split-zone .check-item input[type="checkbox"]:active+.check-label {
    transform: perspective(600px) translateY(2px);
    box-shadow: inset 1px 3px 4px -2px #70175212
}

.reach-page .split-zone .privacy-wrap {
    margin-bottom: 24px
}

.reach-page .split-zone .privacy-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.reach-page .split-zone .privacy-wrap .privacy-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.65;
    color: #9a9a9e;
    user-select: none
}

.reach-page .split-zone .privacy-wrap .privacy-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid #05975f4d;
    border-radius: 3px;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background .2s ease-out, border-color .2s ease-out;
    background: #0a0a0d99
}

.reach-page .split-zone .privacy-wrap input[type="checkbox"]:checked+.privacy-label::before {
    background: #05975F;
    border-color: #05975F;
    box-shadow: inset 0 0 0 3px #0a0a0de6
}

.reach-page .split-zone .privacy-wrap input[type="checkbox"]:focus+.privacy-label::before {
    outline: 2px solid #05975f66;
    outline-offset: 2px
}

.reach-page .split-zone .privacy-wrap input[type="checkbox"]:active+.privacy-label {
    transform: translateY(1px)
}

.reach-page .split-zone .privacy-wrap .privacy-label a {
    color: #05975F;
    text-decoration: none;
    transition: color .18s ease-out
}

.reach-page .split-zone .privacy-wrap .privacy-label a:hover {
    color: #06b574;
    text-decoration: underline
}

.reach-page .split-zone .submit-btn {
    width: 100%;
    padding: 24px 48px;
    font-size: 34px;
    line-height: 1.4;
    font-weight: 600;
    color: #0a0a0d;
    background: linear-gradient(135deg, #05975F 0%, #06b574 100%);
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: transform .35s ease-out, box-shadow .35s ease-out;
    box-shadow: 1px 6px 28px -2px #05975f14;
    position: relative;
    overflow: hidden
}

.reach-page .split-zone .submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(225deg, #05975F 0%, #06b574 100%);
    opacity: 0;
    transition: opacity .35s ease-out
}

.reach-page .split-zone .submit-btn:hover {
    transform: perspective(800px) rotateX(-2deg);
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.reach-page .split-zone .submit-btn:hover::before {
    opacity: 1
}

.reach-page .split-zone .submit-btn:active {
    transform: perspective(800px) rotateX(-2deg) translateY(3px);
    box-shadow: inset 1px 3px 4px -2px #05975f12
}

.reach-page .split-zone .submit-btn span {
    position: relative;
    z-index: 1
}

.reach-page .dense-data {
    background: #0d0d11;
    padding: 96px 24px;
    position: relative
}

.reach-page .dense-data .inner-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.reach-page .dense-data .data-col {
    background: #0f0f1399;
    padding: 48px;
    border-radius: 20px;
    border: 1px solid #05975f26;
    box-shadow: 1px 6px 28px -2px #05975f14
}

.reach-page .dense-data .data-col.dense {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.reach-page .dense-data .data-col.breathing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 480px
}

.reach-page .dense-data .stat-block {
    padding: 24px;
    background: #0a0a0d80;
    border-radius: 5px;
    border-left: 3px solid #05975F;
    transition: transform .27s ease-out, border-color .27s ease-out
}

.reach-page .dense-data .stat-block:hover {
    transform: perspective(700px) rotateY(2deg);
    border-color: #06b574
}

.reach-page .dense-data .stat-block .stat-num {
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
    color: #05975F;
    margin-bottom: 12px
}

.reach-page .dense-data .stat-block .stat-label {
    font-size: 13px;
    line-height: 1.65;
    color: #c1c1c5;
    text-transform: uppercase;
    letter-spacing: .08em
}

.reach-page .dense-data .breathing-hdg {
    font-size: 46px;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-bottom: 24px;
    font-weight: 600;
    color: #e8e8ea
}

.reach-page .dense-data .breathing-txt {
    font-size: 34px;
    line-height: 1.65;
    color: #9a9a9e;
    margin-bottom: 24px
}

.reach-page .dense-data .img-reveal {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 12px 36px -2px #7017521f
}

.reach-page .dense-data .img-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wipe-in 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    clip-path: inset(0 100% 0 0);
    filter: brightness(0.85) contrast(1.1)
}

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

.reach-page .dense-data .img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, #0a0a0d99 100%);
    pointer-events: none
}

.reach-page .circles-corner-deco {
    position: absolute;
    top: 48px;
    left: 48px;
    width: 200px;
    height: 200px;
    pointer-events: none;
    opacity: .08
}

.reach-page .circles-corner-deco .circ {
    position: absolute;
    border: 1px solid #701752;
    border-radius: 50%;
    top: 0;
    left: 0
}

.reach-page .circles-corner-deco .circ:nth-child(1) {
    width: 60px;
    height: 60px
}

.reach-page .circles-corner-deco .circ:nth-child(2) {
    width: 110px;
    height: 110px
}

.reach-page .circles-corner-deco .circ:nth-child(3) {
    width: 160px;
    height: 160px
}

@media (max-width: 900px) {
    .reach-page .grad-intro {
        padding: 96px 24px 48px
    }

    .reach-page .grad-intro .main-hdg {
        font-size: 46px
    }

    .reach-page .grad-intro .desc-txt {
        font-size: 34px
    }

    .reach-page .circles-deco {
        width: 200px;
        height: 200px;
        right: 24px;
        bottom: 24px
    }

    .reach-page .circles-deco .circ:nth-child(1) {
        width: 50px;
        height: 50px
    }

    .reach-page .circles-deco .circ:nth-child(2) {
        width: 90px;
        height: 90px
    }

    .reach-page .circles-deco .circ:nth-child(3) {
        width: 130px;
        height: 130px
    }

    .reach-page .circles-deco .circ:nth-child(4) {
        width: 170px;
        height: 170px
    }

    .reach-page .split-zone {
        padding: 48px 24px
    }

    .reach-page .split-zone .inner-wrap {
        flex-direction: column;
        gap: 48px
    }

    .reach-page .split-zone .left-col,
    .reach-page .split-zone .right-col {
        flex: 1 1 100%
    }

    .reach-page .split-zone .side-hdg {
        font-size: 34px
    }

    .reach-page .split-zone .form-wrap {
        padding: 24px
    }

    .reach-page .split-zone .form-hdg {
        font-size: 34px
    }

    .reach-page .split-zone .form-ctrl input[type="email"] {
        font-size: 34px;
        padding: 12px 24px
    }

    .reach-page .split-zone .interest-opts {
        grid-template-columns: 1fr
    }

    .reach-page .split-zone .submit-btn {
        font-size: 34px;
        padding: 24px 48px
    }

    .reach-page .dense-data {
        padding: 48px 24px
    }

    .reach-page .dense-data .inner-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .reach-page .dense-data .data-col {
        padding: 24px
    }

    .reach-page .dense-data .breathing-hdg {
        font-size: 34px
    }

    .reach-page .dense-data .breathing-txt {
        font-size: 34px
    }

    .reach-page .dense-data .img-reveal {
        height: 240px
    }
}

@media (max-width: 600px) {
    .reach-page .grad-intro {
        padding: 48px 12px 24px
    }

    .reach-page .grad-intro .main-hdg {
        font-size: 34px
    }

    .reach-page .grad-intro .desc-txt {
        font-size: 13px
    }

    .reach-page .circles-deco {
        display: none
    }

    .reach-page .split-zone {
        padding: 24px 12px
    }

    .reach-page .split-zone .inner-wrap {
        gap: 24px
    }

    .reach-page .split-zone .side-hdg {
        font-size: 34px
    }

    .reach-page .split-zone .info-item .item-val {
        font-size: 13px
    }

    .reach-page .split-zone .form-wrap {
        padding: 24px
    }

    .reach-page .split-zone .form-hdg {
        font-size: 34px
    }

    .reach-page .split-zone .form-ctrl input[type="email"] {
        font-size: 13px;
        padding: 12px
    }

    .reach-page .split-zone .submit-btn {
        font-size: 13px;
        padding: 12px 24px
    }

    .reach-page .dense-data {
        padding: 24px 12px
    }

    .reach-page .dense-data .data-col {
        padding: 24px
    }

    .reach-page .dense-data .stat-block .stat-num {
        font-size: 34px
    }

    .reach-page .dense-data .breathing-hdg {
        font-size: 34px
    }

    .reach-page .dense-data .breathing-txt {
        font-size: 13px
    }

    .reach-page .dense-data .img-reveal {
        height: 200px
    }

    .reach-page .circles-corner-deco {
        display: none
    }
}

.consult-pg {
    background: #0a0d0f;
    color: #e8e9ea;
    min-height: 100vh;
    position: relative;
    overflow-x: clip
}

.consult-pg .vis-hdr {
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: center;
    position: relative
}

.consult-pg .vis-hdr::before {
    content: '';
    position: absolute;
    top: 48px;
    left: 24px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #05975f14, transparent);
    pointer-events: none;
    z-index: 0
}

.consult-pg .vis-hdr::after {
    content: '';
    position: absolute;
    bottom: 96px;
    right: 180px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #7017520f, transparent);
    pointer-events: none;
    z-index: 0
}

.consult-pg .txt-zone {
    position: relative;
    z-index: 1
}

.consult-pg .mini-label {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: #05975F;
    margin: 0 0 12px;
    text-transform: uppercase
}

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

.consult-pg .vis-hdr h1::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #05975F;
    margin: 0 0 12px 12px
}

.consult-pg .lead-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #b8babb;
    margin: 0
}

.consult-pg .img-card {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.consult-pg .img-card img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    opacity: .88
}

.consult-pg .img-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(ellipse at 20% 20%, transparent 30%, #0a0d0f66 100%);
    pointer-events: none
}

.consult-pg .approach-sec {
    background: linear-gradient(147deg, #0d1113 0%, #0a0d0f 100%);
    padding: 96px 24px;
    position: relative;
    overflow: hidden
}

.consult-pg .approach-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #05975f4d 20%, #7017524d 80%, transparent 100%)
}

.consult-pg .wave-div {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 48px;
    overflow: hidden
}

.consult-pg .wave-div svg {
    width: 100%;
    height: 100%;
    display: block
}

.consult-pg .approach-inner {
    max-width: 1140px;
    margin: 0 auto
}

.consult-pg .approach-hdr {
    text-align: center;
    margin: 0 0 48px
}

.consult-pg .approach-hdr h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 24px
}

.consult-pg .approach-hdr p {
    font-size: 13px;
    line-height: 1.65;
    color: #b8babb;
    max-width: 680px;
    margin: 0 auto
}

.consult-pg .method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 48px
}

.consult-pg .method-item {
    background: #fff4f705;
    border: 1px solid #fff4f70f;
    border-radius: 5px;
    padding: 24px;
    position: relative;
    transition: transform .28s ease-out, box-shadow .28s ease-out, border-color .28s ease-out
}

.consult-pg .method-item:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 1px 6px 28px -2px #70175214;
    border-color: #70175226
}

.consult-pg .method-item:nth-child(2):hover {
    transform: perspective(800px) rotateX(-1deg) rotateY(1deg)
}

.consult-pg .method-item:nth-child(3):hover {
    transform: perspective(800px) rotateX(2deg) rotateY(2deg)
}

.consult-pg .method-num {
    font-size: 34px;
    line-height: 1.15;
    color: #05975F;
    margin: 0 0 12px;
    font-weight: 600
}

.consult-pg .method-item h3 {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px
}

.consult-pg .method-item p {
    font-size: 13px;
    line-height: 1.65;
    color: #9fa1a2;
    margin: 0
}

.consult-pg .visual-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.consult-pg .large-txt-blk {
    background: #05975f08;
    border: 1px solid #05975f14;
    border-radius: 32px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.consult-pg .large-txt-blk::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border: 2px solid #05975f14;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent
}

.consult-pg .large-txt-blk h3 {
    font-size: 34px;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 24px
}

.consult-pg .large-txt-blk p {
    font-size: 13px;
    line-height: 1.65;
    color: #b8babb;
    margin: 0
}

.consult-pg .mini-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.consult-pg .mini-blk {
    background: #7017520a;
    border: 1px solid #7017521a;
    border-radius: 5px;
    padding: 24px;
    transition: transform .35s ease-out, background .35s ease-out;
    position: relative
}

.consult-pg .mini-blk:hover {
    transform: perspective(600px) rotateX(-3deg) rotateY(3deg);
    background: #7017520f
}

.consult-pg .mini-blk h4 {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #701752;
    margin: 0 0 12px
}

.consult-pg .mini-blk p {
    font-size: 13px;
    line-height: 1.65;
    color: #9fa1a2;
    margin: 0
}

.consult-pg .outcomes-sec {
    background: #FFF4F7;
    padding: 96px 24px;
    position: relative
}

.consult-pg .outcomes-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    width: 80px;
    height: 80px;
    border-top: 2px solid #70175226;
    border-left: 2px solid #70175226;
    border-radius: 3px 0 0 0
}

.consult-pg .outcomes-sec::after {
    content: '';
    position: absolute;
    top: 0;
    right: 12px;
    width: 80px;
    height: 80px;
    border-top: 2px solid #70175226;
    border-right: 2px solid #70175226;
    border-radius: 0 3px 0 0
}

.consult-pg .outcomes-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 48px;
    align-items: start
}

.consult-pg .outcomes-txt h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #0a0d0f;
    margin: 0 0 24px
}

.consult-pg .outcomes-txt p {
    font-size: 13px;
    line-height: 1.65;
    color: #3d4142;
    margin: 0 0 24px
}

.consult-pg .outcomes-txt p:last-of-type {
    margin: 0
}

.consult-pg .img-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.consult-pg .stack-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 3px 4px -2px #70175212;
    position: relative;
    transition: transform .32s ease-out, opacity .32s ease-out
}

.consult-pg .stack-img:hover {
    transform: perspective(700px) rotateY(-4deg);
    opacity: .92
}

.consult-pg .stack-img:nth-child(2):hover {
    transform: perspective(700px) rotateY(4deg)
}

.consult-pg .stack-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    opacity: .85
}

.consult-pg .cta-bar {
    margin: 48px 0 0;
    display: flex;
    gap: 12px;
    align-items: center
}

.consult-pg .btn-primary {
    background: linear-gradient(135deg, #05975F 0%, #048554 100%);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform .22s ease-out, box-shadow .22s ease-out, background .22s ease-out;
    box-shadow: 1px 3px 4px -2px #05975f12
}

.consult-pg .btn-primary:hover {
    background: linear-gradient(180deg, #05975F 0%, #048554 100%);
    transform: translateY(-2px);
    box-shadow: 1px 6px 28px -2px #05975f14
}

.consult-pg .btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 1px 2px 3px #00000026
}

.consult-pg .btn-secondary {
    background: transparent;
    color: #0a0d0f;
    font-size: 13px;
    line-height: 1.4;
    padding: 12px 24px;
    border: 2px solid #70175233;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform .25s ease-out, border-color .25s ease-out, background .25s ease-out
}

.consult-pg .btn-secondary:hover {
    border-color: #70175266;
    background: #70175208;
    transform: perspective(500px) rotateX(-2deg)
}

.consult-pg .btn-secondary:active {
    transform: translateY(1px);
    box-shadow: inset 1px 2px 3px #7017521a
}

.consult-pg .anim-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(147deg, #0a0d0f 0%, #0d1113 50%, #0a0d0f 100%);
    background-size: 200% 200%;
    animation: bgShift 15s linear infinite;
    z-index: -1;
    pointer-events: none
}

@keyframes bgShift {
    0% {
        background-position: 0 50%
    }

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

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

@media (max-width: 1200px) {
    .consult-pg .vis-hdr {
        grid-template-columns: 1fr 340px;
        gap: 24px
    }

    .consult-pg .img-card img {
        height: 400px
    }

    .consult-pg .outcomes-inner {
        grid-template-columns: 420px 1fr;
        gap: 24px
    }
}

@media (max-width: 900px) {
    .consult-pg .vis-hdr {
        grid-template-columns: 1fr;
        padding: 48px 24px
    }

    .consult-pg .img-card {
        display: none
    }

    .consult-pg .vis-hdr h1 {
        font-size: 46px
    }

    .consult-pg .method-grid {
        grid-template-columns: 1fr
    }

    .consult-pg .visual-cluster {
        grid-template-columns: 1fr
    }

    .consult-pg .outcomes-inner {
        grid-template-columns: 1fr
    }

    .consult-pg .img-stack {
        display: none
    }

    .consult-pg .approach-sec {
        padding: 48px 24px
    }

    .consult-pg .outcomes-sec {
        padding: 48px 24px
    }
}

@media (max-width: 600px) {
    .consult-pg .vis-hdr h1 {
        font-size: 34px
    }

    .consult-pg .approach-hdr h2 {
        font-size: 34px
    }

    .consult-pg .outcomes-txt h2 {
        font-size: 34px
    }

    .consult-pg .large-txt-blk {
        padding: 24px
    }

    .consult-pg .large-txt-blk h3 {
        font-size: 26px
    }

    .consult-pg .cta-bar {
        flex-direction: column;
        align-items: stretch
    }

    .consult-pg .btn-primary,
    .consult-pg .btn-secondary {
        text-align: center
    }
}

.sketchbase {
    background: #0a0a0b;
    color: #e8e8ea;
    overflow-x: clip
}

.sketchbase .intro-stage {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 48px 24px;
    overflow: hidden;
    background: radial-gradient(ellipse at 85% 20%, #05975f26 0%, transparent 60%)
}

.sketchbase .intro-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0a0a0bf2 0%, #0a0a0b66 65%, transparent 100%);
    z-index: 1
}

.sketchbase .intro-stage-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.sketchbase .intro-stage-content {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%
}

.sketchbase .intro-stage-title {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #fff;
    margin: 0;
    animation: zoomsettle .42s ease-out
}

@keyframes zoomsettle {
    0% {
        transform: scale(1.18);
        opacity: 0
    }

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

.sketchbase .method-reveal {
    padding: 96px 24px;
    background: #0d0d0f;
    position: relative
}

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

.sketchbase .method-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.sketchbase .method-text-zone {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.sketchbase .method-hdg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0;
    position: relative;
    padding-bottom: 12px
}

.sketchbase .method-hdg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 3px;
    background: #05975F;
    border-radius: 3px
}

.sketchbase .method-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #b8b8bc;
    margin: 0
}

.sketchbase .method-visual-zone {
    position: relative;
    perspective: 1200px
}

.sketchbase .method-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 6px 28px -2px #05975f14;
    transition: transform .38s ease-out, box-shadow .38s ease-out
}

.sketchbase .method-img-wrap:hover {
    transform: rotateY(4deg) rotateX(-2deg);
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.sketchbase .method-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block
}

.sketchbase .method-diamond {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #05975F 0%, #701752 100%);
    transform: rotate(45deg);
    border-radius: 5px;
    box-shadow: 1px 3px 4px -2px #70175212
}

.sketchbase .catalog-display {
    padding: 96px 24px;
    background: radial-gradient(ellipse at center, #70175214 0%, transparent 70%);
    position: relative
}

.sketchbase .catalog-inner {
    max-width: 1140px;
    margin: 0 auto
}

.sketchbase .catalog-hdg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 48px;
    text-align: center
}

.sketchbase .catalog-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.8fr;
    gap: 24px
}

.sketchbase .catalog-card {
    background: linear-gradient(135deg, #05975f0d 0%, #7017520d 100%);
    border: 1px solid #fff4f714;
    border-radius: 20px;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .28s ease-out, border-color .28s ease-out;
    perspective: 1200px
}

.sketchbase .catalog-card:hover {
    transform: rotateY(-3deg) rotateX(2deg);
    border-color: #05975f4d
}

.sketchbase .catalog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #05975f08 0%, transparent 100%);
    opacity: 0;
    transition: opacity .28s ease-out;
    pointer-events: none
}

.sketchbase .catalog-card:hover::before {
    opacity: 1
}

.sketchbase .catalog-card-hdg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 12px;
    text-transform: uppercase;
    font-weight: 300
}

.sketchbase .catalog-card-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #b8b8bc;
    margin: 0
}

.sketchbase .catalog-card-accent {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 8px;
    height: 8px;
    background: #05975F;
    border-radius: 32px;
    box-shadow: 0 0 12px #05975f99
}

.sketchbase .timeline-journey {
    padding: 96px 24px;
    background: #05975F;
    position: relative
}

.sketchbase .timeline-journey::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #70175233 0%, transparent 100%);
    pointer-events: none
}

.sketchbase .timeline-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.sketchbase .timeline-hdg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 48px
}

.sketchbase .timeline-structure {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative
}

.sketchbase .timeline-structure::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, #fff4f766 0%, #fff4f71a 100%)
}

.sketchbase .timeline-phase {
    position: relative;
    padding-left: 72px;
    animation: zoomsettle .35s ease-out;
    animation-fill-mode: both
}

.sketchbase .timeline-phase:nth-child(2) {
    animation-delay: .08s
}

.sketchbase .timeline-phase:nth-child(3) {
    animation-delay: .16s
}

.sketchbase .timeline-phase:nth-child(4) {
    animation-delay: .24s
}

.sketchbase .timeline-marker {
    position: absolute;
    left: 12px;
    top: 4px;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 4px solid #05975F;
    border-radius: 32px;
    box-shadow: 0 0 16px #ffffff80
}

.sketchbase .timeline-phase-hdg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 12px;
    font-weight: 600
}

.sketchbase .timeline-phase-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #ffffffd9;
    margin: 0
}

.sketchbase .outcome-contrast {
    padding: 96px 24px;
    background: #0d0d0f;
    position: relative
}

.sketchbase .outcome-inner {
    max-width: 1140px;
    margin: 0 auto
}

.sketchbase .outcome-hdg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 48px;
    text-align: center
}

.sketchbase .outcome-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative
}

.sketchbase .outcome-compare::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 80%;
    background: linear-gradient(180deg, transparent 0%, #70175299 50%, transparent 100%)
}

.sketchbase .outcome-side {
    padding: 48px;
    border-radius: 20px;
    position: relative;
    transition: transform .32s ease-out;
    perspective: 1200px
}

.sketchbase .outcome-side:hover {
    transform: rotateY(-2deg) rotateX(1deg)
}

.sketchbase .outcome-before {
    background: linear-gradient(135deg, #70175214 0%, #70175205 100%);
    border: 1px solid #70175233
}

.sketchbase .outcome-after {
    background: linear-gradient(135deg, #05975f14 0%, #05975f05 100%);
    border: 1px solid #05975f33
}

.sketchbase .outcome-side-label {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b8b8bc;
    margin: 0 0 12px;
    font-weight: 600
}

.sketchbase .outcome-side-hdg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 24px
}

.sketchbase .outcome-side-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #b8b8bc;
    margin: 0
}

.sketchbase .outcome-img-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.sketchbase .outcome-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 3px 4px -2px #05975f12;
    transition: transform .25s ease-out, box-shadow .25s ease-out
}

.sketchbase .outcome-img-wrap:hover {
    transform: translateY(-4px);
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.sketchbase .outcome-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block
}

.sketchbase .divider-brush {
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden
}

.sketchbase .divider-brush svg {
    width: 100%;
    height: 100%;
    display: block
}

.sketchbase .hidden-reveal-zone {
    padding: 96px 24px;
    background: #0a0a0b;
    position: relative
}

.sketchbase .hidden-reveal-inner {
    max-width: 1140px;
    margin: 0 auto
}

.sketchbase .reveal-trigger {
    position: relative;
    border: 2px solid #05975f4d;
    border-radius: 20px;
    padding: 48px;
    background: linear-gradient(135deg, #05975f0d 0%, #7017520d 100%);
    cursor: pointer;
    transition: border-color .22s ease-out, background .22s ease-out
}

.sketchbase .reveal-trigger:focus {
    outline: none;
    border-color: #05975F;
    background: #05975f14
}

.sketchbase .reveal-trigger:focus .reveal-content {
    opacity: 1;
    transform: translateY(0)
}

.sketchbase .reveal-trigger:focus .reveal-placeholder {
    opacity: 0
}

.sketchbase .reveal-placeholder {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #fff;
    text-align: center;
    margin: 0;
    transition: opacity .28s ease-out
}

.sketchbase .reveal-content {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease-out, transform .35s ease-out;
    position: absolute;
    top: 48px;
    left: 48px;
    right: 48px
}

.sketchbase .reveal-content-hdg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 12px
}

.sketchbase .reveal-content-txt {
    font-size: 13px;
    line-height: 1.65;
    color: #b8b8bc;
    margin: 0
}

@media (max-width: 900px) {
    .sketchbase .intro-stage-title {
        font-size: 46px
    }

    .sketchbase .method-inner {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .sketchbase .method-hdg,
    .sketchbase .catalog-hdg,
    .sketchbase .timeline-hdg,
    .sketchbase .outcome-hdg {
        font-size: 34px
    }

    .sketchbase .catalog-grid {
        grid-template-columns: 1fr
    }

    .sketchbase .outcome-compare {
        grid-template-columns: 1fr
    }

    .sketchbase .outcome-compare::before {
        display: none
    }

    .sketchbase .outcome-img-grid {
        grid-template-columns: 1fr
    }

    .sketchbase .method-img,
    .sketchbase .outcome-img {
        display: none
    }
}

@media (max-width: 600px) {
    .sketchbase .intro-stage {
        min-height: 400px;
        padding: 24px 12px
    }

    .sketchbase .intro-stage-title {
        font-size: 34px
    }

    .sketchbase .method-reveal,
    .sketchbase .catalog-display,
    .sketchbase .timeline-journey,
    .sketchbase .outcome-contrast,
    .sketchbase .hidden-reveal-zone {
        padding: 48px 12px
    }

    .sketchbase .method-hdg,
    .sketchbase .catalog-hdg,
    .sketchbase .timeline-hdg,
    .sketchbase .outcome-hdg {
        font-size: 34px;
        margin-bottom: 24px
    }

    .sketchbase .catalog-card-hdg,
    .sketchbase .timeline-phase-hdg,
    .sketchbase .outcome-side-hdg,
    .sketchbase .reveal-placeholder,
    .sketchbase .reveal-content-hdg {
        font-size: 34px
    }

    .sketchbase .catalog-card {
        padding: 24px 12px
    }

    .sketchbase .timeline-phase {
        padding-left: 48px
    }

    .sketchbase .outcome-side {
        padding: 24px
    }

    .sketchbase .reveal-trigger {
        padding: 24px
    }

    .sketchbase .reveal-content {
        top: 24px;
        left: 24px;
        right: 24px
    }
}

.abt-pg {
    background: #0d0d0f;
    color: #e8e8ea;
    overflow-x: clip
}

.abt-pg .ttl-zone {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px
}

.abt-pg .ttl-img-wrap {
    width: 100%;
    max-width: 720px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.abt-pg .ttl-img-wrap img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    filter: brightness(0.72);
    mask-image: linear-gradient(to bottom, #0006 0%, #000f 100%);
    -webkit-mask-image: linear-gradient(to bottom, #0006 0%, #000f 100%);
    transition: transform .38s ease-out, filter .32s ease-out
}

.abt-pg .ttl-img-wrap:hover img {
    transform: scale(1.04) perspective(800px) rotateX(1deg) rotateY(-1.5deg);
    filter: brightness(0.82)
}

.abt-pg .ttl-txt-area {
    text-align: center;
    max-width: 680px;
    padding: 24px 12px 48px
}

.abt-pg .ttl-txt-area h1 {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #f4f4f5
}

.abt-pg .ttl-txt-area .thesis-grp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 0
}

.abt-pg .ttl-txt-area .thesis-grp p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #b8b8bc
}

.abt-pg .dot-trail {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    animation: dot-reveal .42s ease-out .25s forwards
}

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

.abt-pg .dot-trail span {
    width: 4px;
    height: 4px;
    border-radius: 3px;
    background: #05975f99
}

.abt-pg .dot-trail span:nth-child(2) {
    background: #70175299
}

.abt-pg .dot-trail span:nth-child(3) {
    background: #05975f66
}

.abt-pg .story-band {
    background: linear-gradient(ellipse at 50% 50%, #05975f0a 0%, transparent 70%);
    padding: 96px 24px;
    position: relative;
    animation: slide-left .45s ease-out
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(-48px)
    }

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

.abt-pg .story-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #05975f4d 50%, transparent 100%)
}

.abt-pg .story-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 96px;
    align-items: start
}

.abt-pg .story-txt {
    max-width: 580px
}

.abt-pg .story-txt h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 24px;
    color: #f9f9fa
}

.abt-pg .story-txt p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 24px;
    color: #c2c2c6
}

.abt-pg .story-txt p:last-child {
    margin-bottom: 0
}

.abt-pg .story-txt .accent-inline {
    background: #7017522e;
    padding: 4px 12px;
    border-radius: 3px;
    color: #e8e8ea
}

.abt-pg .story-vis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.abt-pg .vis-card {
    background: #0d0d0fcc;
    border: 1px solid #05975f1f;
    border-radius: 5px;
    padding: 24px;
    box-shadow: 1px 3px 4px -2px #05975f12;
    transition: transform .28s ease-out, box-shadow .28s ease-out, border-color .28s ease-out;
    position: relative;
    overflow: hidden
}

.abt-pg .vis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, #7017520f 0%, transparent 70%);
    opacity: 0;
    transition: opacity .28s ease-out;
    pointer-events: none
}

.abt-pg .vis-card:hover {
    transform: perspective(600px) rotateX(-2deg) rotateY(2deg) translateY(-4px);
    box-shadow: 1px 12px 36px -2px #05975f1f;
    border-color: #05975f3d
}

.abt-pg .vis-card:hover::before {
    opacity: 1
}

.abt-pg .vis-card h3 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    color: #05975F
}

.abt-pg .vis-card p {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    color: #a8a8ad
}

.abt-pg .approach-zone {
    padding: 96px 24px;
    background: #05975f05;
    position: relative;
    animation: slide-right .4s ease-out .15s backwards
}

@keyframes slide-right {
    from {
        opacity: 0;
        transform: translateX(48px)
    }

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

.abt-pg .approach-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #7017524d 50%, transparent 100%)
}

.abt-pg .approach-zone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 0% 0%, #05975f08 0%, transparent 50%), radial-gradient(circle at 100% 0%, #05975f08 0%, transparent 50%), radial-gradient(circle at 0% 100%, #05975f08 0%, transparent 50%), radial-gradient(circle at 100% 100%, #05975f08 0%, transparent 50%), radial-gradient(circle at 50% 50%, #05975f08 0%, transparent 50%);
    background-size: 120px 120px;
    background-position: 0 0, 100% 0, 0 100%, 100% 100%, 50% 50%;
    pointer-events: none;
    clip-path: inset(0)
}

.abt-pg .approach-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.abt-pg .approach-hdr {
    text-align: center;
    margin: 0 0 48px
}

.abt-pg .approach-hdr h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    color: #f9f9fa;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .08em
}

.abt-pg .approach-hdr p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #b8b8bc;
    max-width: 640px;
    margin: 0 auto
}

.abt-pg .approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    margin: 48px 0 0
}

.abt-pg .approach-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative
}

.abt-pg .approach-icon {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: linear-gradient(135deg, #05975f1f 0%, #70175214 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px;
    box-shadow: 1px 3px 4px -2px #05975f12;
    transition: transform .32s ease-out, box-shadow .32s ease-out
}

.abt-pg .approach-item:hover .approach-icon {
    transform: perspective(400px) rotateX(-3deg) rotateY(3deg);
    box-shadow: 1px 6px 28px -2px #05975f14
}

.abt-pg .approach-icon svg {
    width: 32px;
    height: 32px;
    fill: #05975F
}

.abt-pg .approach-item h3 {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
    color: #e8e8ea;
    font-weight: 400
}

.abt-pg .approach-item p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #a8a8ad
}

.abt-pg .team-strand {
    padding: 96px 24px;
    background: #0a0a0c;
    position: relative;
    animation: slide-left .35s ease-out .2s backwards
}

.abt-pg .team-strand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #05975f4d 50%, transparent 100%)
}

.abt-pg .team-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px
}

.abt-pg .team-intro {
    max-width: 720px
}

.abt-pg .team-intro h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 24px;
    color: #f9f9fa
}

.abt-pg .team-intro p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #c2c2c6
}

.abt-pg .team-profiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.abt-pg .profile-card {
    background: #0d0d0f99;
    border: 1px solid #70175214;
    border-radius: 5px;
    overflow: hidden;
    transition: transform .3s ease-out, border-color .3s ease-out;
    position: relative
}

.abt-pg .profile-card:hover {
    transform: perspective(600px) rotateX(2deg) rotateY(-2deg);
    border-color: #7017522e
}

.abt-pg .profile-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative
}

.abt-pg .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .42s ease-out, filter .42s ease-out;
    filter: grayscale(0.3)
}

.abt-pg .profile-card:hover .profile-img img {
    transform: scale(1.08);
    filter: grayscale(0)
}

.abt-pg .profile-txt {
    padding: 24px
}

.abt-pg .profile-txt h3 {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 4px;
    color: #f4f4f5;
    font-weight: 500
}

.abt-pg .profile-txt .role {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: #701752;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px
}

.abt-pg .profile-txt p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #a8a8ad
}

.abt-pg .compare-section {
    padding: 96px 24px;
    background: linear-gradient(ellipse at 50% 50%, #7017520a 0%, transparent 70%);
    position: relative
}

.abt-pg .compare-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #7017524d 50%, transparent 100%)
}

.abt-pg .compare-inner {
    max-width: 1140px;
    margin: 0 auto
}

.abt-pg .compare-hdr {
    text-align: center;
    margin: 0 0 48px
}

.abt-pg .compare-hdr h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    color: #f9f9fa
}

.abt-pg .compare-hdr p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #b8b8bc;
    max-width: 640px;
    margin: 0 auto
}

.abt-pg .data-compare {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 880px;
    margin: 0 auto
}

.abt-pg .compare-row {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.abt-pg .compare-label {
    font-size: 13px;
    line-height: 1.4;
    color: #e8e8ea;
    text-transform: uppercase;
    letter-spacing: .04em
}

.abt-pg .compare-bars {
    display: flex;
    gap: 12px;
    align-items: center
}

.abt-pg .bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.abt-pg .bar-label {
    font-size: 13px;
    line-height: 1.4;
    color: #a8a8ad
}

.abt-pg .bar-track {
    height: 32px;
    background: #0d0d0fcc;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    border: 1px solid #05975f14
}

.abt-pg .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #05975f99 0%, #05975f4d 100%);
    transition: width .45s ease-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    position: relative;
    overflow: hidden
}

.abt-pg .bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, #ffffff14 50%, transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 2s ease-out infinite
}

@keyframes shimmer {
    to {
        transform: translateX(100%)
    }
}

.abt-pg .bar-item:nth-child(2) .bar-fill {
    background: linear-gradient(90deg, #70175299 0%, #7017524d 100%)
}

.abt-pg .bar-value {
    font-size: 13px;
    line-height: 1.4;
    color: #f4f4f5;
    font-weight: 500
}

.abt-pg .bar-fill[data-width="85"] {
    width: 85%
}

.abt-pg .bar-fill[data-width="72"] {
    width: 72%
}

.abt-pg .bar-fill[data-width="91"] {
    width: 91%
}

.abt-pg .bar-fill[data-width="68"] {
    width: 68%
}

.abt-pg .bar-fill[data-width="78"] {
    width: 78%
}

.abt-pg .bar-fill[data-width="83"] {
    width: 83%
}

@media (max-width: 1200px) {
    .abt-pg .story-inner {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .abt-pg .approach-grid {
        grid-template-columns: 1fr 1fr
    }

    .abt-pg .team-profiles {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 900px) {
    .abt-pg .ttl-zone {
        padding: 48px 24px 24px
    }

    .abt-pg .ttl-txt-area h1 {
        font-size: 46px
    }

    .abt-pg .ttl-img-wrap img {
        height: 360px
    }

    .abt-pg .story-band,
    .abt-pg .approach-zone,
    .abt-pg .team-strand,
    .abt-pg .compare-section {
        padding: 48px 24px
    }

    .abt-pg .story-txt h2,
    .abt-pg .approach-hdr h2,
    .abt-pg .team-intro h2,
    .abt-pg .compare-hdr h2 {
        font-size: 34px
    }

    .abt-pg .vis-card h3 {
        font-size: 13px
    }

    .abt-pg .approach-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .abt-pg .team-profiles {
        grid-template-columns: 1fr
    }
}

@media (max-width: 600px) {
    .abt-pg .ttl-txt-area h1 {
        font-size: 34px
    }

    .abt-pg .ttl-img-wrap {
        display: none
    }

    .abt-pg .story-vis {
        grid-template-columns: 1fr
    }

    .abt-pg .compare-bars {
        flex-direction: column;
        gap: 24px
    }

    .abt-pg .bar-item {
        width: 100%
    }
}

.learn-prog {
    background: #0a0a0b;
    color: #e8e8ea;
    min-height: 100vh
}

.learn-prog img {
    max-width: 100%;
    height: auto
}

.learn-prog .grad-title {
    position: relative;
    padding: 96px 24px 48px;
    overflow: hidden;
    background: linear-gradient(ellipse at center, #05975f14 0%, transparent 70%), linear-gradient(ellipse at center, #7017520f 20%, transparent 80%), #0d0d0f;
    animation: bg-shift 8s ease-in-out infinite alternate
}

@keyframes bg-shift {
    0% {
        background: linear-gradient(ellipse at 30% 40%, #05975f14 0%, transparent 70%), linear-gradient(ellipse at 70% 60%, #7017520f 20%, transparent 80%), #0d0d0f
    }

    100% {
        background: linear-gradient(ellipse at 70% 60%, #05975f14 0%, transparent 70%), linear-gradient(ellipse at 30% 40%, #7017520f 20%, transparent 80%), #0d0d0f
    }
}

.learn-prog .grad-title-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative
}

.learn-prog .frame-deco {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    border: 1px solid #05975f26;
    border-radius: 3px;
    pointer-events: none
}

.learn-prog .frame-deco::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid #7017521f;
    border-radius: 3px
}

.learn-prog .title-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #05975fd9;
    margin-bottom: 12px;
    font-weight: 300
}

.learn-prog .title-main {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .title-desc {
    font-size: 34px;
    line-height: 1.4;
    color: #e8e8eabf;
    max-width: 880px;
    margin: 0;
    font-weight: 300
}

.learn-prog .structure-grid {
    background: #0f0f11;
    padding: 96px 24px;
    position: relative
}

.learn-prog .structure-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #05975f33 20%, #70175233 50%, #05975f33 80%, transparent 100%)
}

.learn-prog .structure-grid::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #70175233 20%, #05975f33 50%, #70175233 80%, transparent 100%)
}

.learn-prog .structure-wrap {
    max-width: 1140px;
    margin: 0 auto
}

.learn-prog .structure-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center
}

.learn-prog .structure-intro h2 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .structure-intro p {
    font-size: 34px;
    line-height: 1.4;
    color: #e8e8eab3;
    margin: 0;
    font-weight: 300
}

.learn-prog .cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 48px
}

.learn-prog .prog-card {
    background: linear-gradient(135deg, #05975f0a 0%, #70175208 100%);
    border: 1px solid #05975f26;
    border-radius: 20px;
    padding: 48px 24px;
    position: relative;
    transition: transform .28s ease-out, box-shadow .28s ease-out;
    overflow: hidden
}

.learn-prog .prog-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #05975f33, #70175233);
    border-radius: 20px;
    opacity: 0;
    transition: opacity .35s ease-out;
    z-index: -1
}

.learn-prog .prog-card:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.learn-prog .prog-card:hover::before {
    opacity: 1
}

.learn-prog .card-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #701752d9;
    color: #fff4f7;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500
}

.learn-prog .card-num {
    font-size: 62px;
    line-height: 1;
    color: #05975f4d;
    margin: 0 0 12px;
    font-weight: 700
}

.learn-prog .card-title {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 12px;
    font-weight: 600
}

.learn-prog .card-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    margin: 0
}

.learn-prog .curve-connect {
    position: relative;
    height: 48px;
    margin: 0 auto 48px;
    max-width: 800px
}

.learn-prog .curve-connect svg {
    width: 100%;
    height: 100%;
    display: block
}

.learn-prog .curve-path {
    fill: none;
    stroke: #05975f4d;
    stroke-width: 2;
    stroke-dasharray: 8 4;
    animation: dash-flow 3s linear infinite
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -24
    }
}

.learn-prog .showcase-split {
    background: #0a0a0b;
    padding: 96px 24px
}

.learn-prog .showcase-wrap {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 48px;
    align-items: center
}

.learn-prog .showcase-side {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.learn-prog .side-stat {
    background: #05975f0d;
    border: 1px solid #05975f33;
    border-radius: 5px;
    padding: 24px;
    transition: transform .22s ease-out, background .22s ease-out
}

.learn-prog .side-stat:hover {
    transform: perspective(800px) rotateX(-3deg) rotateY(3deg);
    background: #05975f14
}

.learn-prog .stat-value {
    font-size: 46px;
    line-height: 1;
    color: #05975f;
    margin: 0 0 4px;
    font-weight: 700
}

.learn-prog .stat-label {
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #e8e8ea99;
    margin: 0;
    font-weight: 300
}

.learn-prog .stat-value::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #701752;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle
}

.learn-prog .showcase-center {
    position: relative
}

.learn-prog .center-visual {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 1px 12px 36px -2px #7017521f
}

.learn-prog .center-visual img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    transition: transform .42s ease-out
}

.learn-prog .center-visual:hover img {
    transform: scale(1.05)
}

.learn-prog .center-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, #05975f26 100%);
    pointer-events: none
}

.learn-prog .showcase-side.right .side-stat {
    background: #7017520d;
    border-color: #70175233
}

.learn-prog .showcase-side.right .side-stat:hover {
    background: #70175214
}

.learn-prog .showcase-side.right .stat-value {
    color: #701752
}

.learn-prog .approach-detail {
    background: linear-gradient(ellipse at center, #70175208 0%, transparent 70%), #0d0d0f;
    padding: 96px 24px
}

.learn-prog .approach-wrap {
    max-width: 1140px;
    margin: 0 auto
}

.learn-prog .approach-header {
    max-width: 680px;
    margin: 0 0 48px
}

.learn-prog .approach-header h3 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .approach-header p {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    margin: 0
}

.learn-prog .phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.learn-prog .phase-item {
    background: #05975f08;
    border: 1px solid #05975f1f;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    transition: transform .25s ease-out, border-color .25s ease-out
}

.learn-prog .phase-item:hover {
    transform: perspective(900px) rotateX(-2deg) rotateY(2deg);
    border-color: #05975f4d
}

.learn-prog .phase-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #05975f26, #70175226);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform .32s ease-out
}

.learn-prog .phase-item:hover .phase-icon {
    transform: rotate(5deg) scale(1.1)
}

.learn-prog .phase-icon svg {
    width: 24px;
    height: 24px;
    fill: #05975f
}

.learn-prog .phase-name {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 12px;
    font-weight: 600
}

.learn-prog .phase-text {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    margin: 0
}

.learn-prog .tools-section {
    background: #0f0f11;
    padding: 96px 24px;
    position: relative
}

.learn-prog .tools-wrap {
    max-width: 1140px;
    margin: 0 auto
}

.learn-prog .tools-header {
    text-align: center;
    margin-bottom: 48px
}

.learn-prog .tools-header h4 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .tools-header p {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    max-width: 640px;
    margin: 0 auto
}

.learn-prog .tools-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px
}

.learn-prog .tool-card {
    background: linear-gradient(135deg, #7017520a 0%, #05975f08 100%);
    border: 1px solid #70175226;
    border-radius: 20px;
    padding: 24px;
    transition: transform .3s ease-out, box-shadow .3s ease-out;
    position: relative
}

.learn-prog .tool-card:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 1px 12px 36px -2px #7017521f
}

.learn-prog .tool-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.learn-prog .tool-badge {
    width: 8px;
    height: 8px;
    background: #701752;
    border-radius: 50%;
    flex-shrink: 0
}

.learn-prog .tool-name {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0;
    font-weight: 600
}

.learn-prog .tool-info {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    margin: 0
}

.learn-prog .outcomes-visual {
    background: #0a0a0b;
    padding: 96px 24px
}

.learn-prog .outcomes-wrap {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.learn-prog .outcomes-content h5 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .outcomes-list {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.learn-prog .outcome-point {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.learn-prog .outcome-marker {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #05975f, #701752);
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    transition: transform .27s ease-out
}

.learn-prog .outcome-point:hover .outcome-marker {
    transform: rotate(45deg)
}

.learn-prog .outcome-marker svg {
    width: 12px;
    height: 12px;
    fill: #fff4f7
}

.learn-prog .outcome-text {
    flex: 1
}

.learn-prog .outcome-text h6 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 4px;
    font-weight: 600
}

.learn-prog .outcome-text p {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    margin: 0
}

.learn-prog .outcomes-img {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.learn-prog .outcomes-img img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform .38s ease-out
}

.learn-prog .outcomes-img:hover img {
    transform: scale(1.08)
}

.learn-prog .outcomes-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #7017521a 0%, transparent 100%);
    pointer-events: none
}

.learn-prog .pricing-block {
    background: linear-gradient(ellipse at center, #05975f0d 0%, transparent 70%), #0d0d0f;
    padding: 96px 24px
}

.learn-prog .pricing-wrap {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center
}

.learn-prog .pricing-wrap h4 {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #f5f5f7;
    margin: 0 0 24px;
    font-weight: 600
}

.learn-prog .pricing-wrap p {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    max-width: 680px;
    margin: 0 auto 48px
}

.learn-prog .price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto
}

.learn-prog .price-option {
    background: #05975f0a;
    border: 1px solid #05975f26;
    border-radius: 20px;
    padding: 48px 24px;
    transition: transform .26s ease-out, border-color .26s ease-out;
    position: relative
}

.learn-prog .price-option:hover {
    transform: perspective(900px) rotateX(-2deg) rotateY(2deg);
    border-color: #05975f4d
}

.learn-prog .price-option.featured {
    background: linear-gradient(135deg, #05975f14 0%, #7017520f 100%);
    border-color: #70175240
}

.learn-prog .price-option.featured:hover {
    border-color: #70175266
}

.learn-prog .price-tier {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #05975fd9;
    margin-bottom: 12px;
    font-weight: 300
}

.learn-prog .price-option.featured .price-tier {
    color: #701752d9
}

.learn-prog .price-amount {
    font-size: 62px;
    line-height: 1;
    color: #f5f5f7;
    margin: 0 0 4px;
    font-weight: 700
}

.learn-prog .price-period {
    font-size: 13px;
    line-height: 1.4;
    color: #e8e8ea99;
    margin: 0 0 24px
}

.learn-prog .price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left
}

.learn-prog .price-features li {
    font-size: 13px;
    line-height: 1.65;
    color: #e8e8eab3;
    padding: 12px 0;
    border-bottom: 1px solid #05975f1a;
    display: flex;
    align-items: center;
    gap: 12px
}

.learn-prog .price-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #05975f;
    border-radius: 50%;
    flex-shrink: 0
}

.learn-prog .price-option.featured .price-features li::before {
    background: #701752
}

.learn-prog .price-btn {
    display: inline-block;
    background: linear-gradient(135deg, #05975f, #037a4d);
    color: #fff4f7;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 12px 48px;
    border-radius: 32px;
    text-decoration: none;
    transition: transform .23s ease-out, box-shadow .23s ease-out;
    box-shadow: 1px 6px 28px -2px #05975f14
}

.learn-prog .price-btn:hover {
    transform: translateY(-2px);
    box-shadow: 1px 12px 36px -2px #05975f1f;
    background: linear-gradient(135deg, #037a4d, #05975f)
}

.learn-prog .price-option.featured .price-btn {
    background: linear-gradient(135deg, #701752, #5a1242);
    box-shadow: 1px 6px 28px -2px #70175214
}

.learn-prog .price-option.featured .price-btn:hover {
    box-shadow: 1px 12px 36px -2px #7017521f;
    background: linear-gradient(135deg, #5a1242, #701752)
}

@media (max-width: 900px) {
    .learn-prog .grad-title {
        padding: 48px 24px 24px
    }

    .learn-prog .title-main {
        font-size: 46px
    }

    .learn-prog .title-desc {
        font-size: 13px
    }

    .learn-prog .structure-grid,
    .learn-prog .approach-detail,
    .learn-prog .tools-section,
    .learn-prog .outcomes-visual,
    .learn-prog .pricing-block,
    .learn-prog .showcase-split {
        padding: 48px 24px
    }

    .learn-prog .cards-row {
        grid-template-columns: 1fr
    }

    .learn-prog .showcase-wrap {
        grid-template-columns: 1fr
    }

    .learn-prog .showcase-side {
        flex-direction: row;
        gap: 12px
    }

    .learn-prog .outcomes-wrap {
        grid-template-columns: 1fr
    }

    .learn-prog .outcomes-img {
        display: none
    }

    .learn-prog .center-visual img {
        height: 360px
    }

    .learn-prog .outcomes-img img {
        height: 320px
    }
}

@media (max-width: 600px) {
    .learn-prog .title-main {
        font-size: 34px
    }

    .learn-prog .structure-intro h2,
    .learn-prog .approach-header h3,
    .learn-prog .tools-header h4,
    .learn-prog .outcomes-content h5,
    .learn-prog .pricing-wrap h4 {
        font-size: 34px
    }

    .learn-prog .card-title,
    .learn-prog .phase-name,
    .learn-prog .tool-name,
    .learn-prog .outcome-text h6 {
        font-size: 13px
    }

    .learn-prog .card-num,
    .learn-prog .stat-value,
    .learn-prog .price-amount {
        font-size: 46px
    }

    .learn-prog .showcase-side {
        flex-direction: column
    }

    .learn-prog .center-visual img {
        height: 280px
    }

    .learn-prog .frame-deco {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px
    }

    .learn-prog .frame-deco::before {
        top: 6px;
        left: 6px;
        right: 6px;
        bottom: 6px
    }
}

.success-pg {
    background: linear-gradient(135deg, #0a0f0d 0%, #0d1210 100%);
    color: #e8e8e8;
    min-height: 100vh;
    padding: 96px 24px
}

.success-pg .confirm-wrap {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center
}

.success-pg .check-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 48px;
    background: radial-gradient(ellipse at center, #05975f26 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 800px;
    transition: transform .35s ease-out
}

.success-pg .check-icon:hover {
    transform: rotateY(8deg) rotateX(-4deg)
}

.success-pg .check-icon svg {
    width: 64px;
    height: 64px;
    stroke: #05975F;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.success-pg .main-msg {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #fff
}

.success-pg .sub-msg {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0 0 48px;
    color: #fff4f7d9;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto
}

.success-pg .detail-box {
    background: #05975f14;
    border-radius: 20px;
    padding: 48px;
    max-width: 840px;
    margin: 0 auto 96px;
    box-shadow: 1px 6px 28px -2px #05975f14;
    transition: box-shadow .28s ease-out
}

.success-pg .detail-box:hover {
    box-shadow: 1px 12px 36px -2px #05975f1f
}

.success-pg .detail-box p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 24px;
    color: #d4d4d4
}

.success-pg .detail-box p:last-child {
    margin-bottom: 0
}

.success-pg .detail-box strong {
    color: #05975F;
    font-weight: 600
}

.success-pg .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto 96px
}

.success-pg .info-card {
    background: #7017520f;
    border-radius: 5px;
    padding: 24px;
    perspective: 900px;
    transition: transform .32s ease-out, box-shadow .32s ease-out;
    box-shadow: 1px 3px 4px -2px #70175212
}

.success-pg .info-card:hover {
    transform: rotateY(-3deg) rotateX(2deg);
    box-shadow: 1px 6px 28px -2px #70175214
}

.success-pg .info-card h2 {
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 300;
    margin: 0 0 12px;
    color: #701752
}

.success-pg .info-card p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #c8c8c8
}

.success-pg .action-zone {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

.success-pg .primary-btn {
    background: linear-gradient(125deg, #05975F 0%, #048556 100%);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 12px 48px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform .22s ease-out, box-shadow .22s ease-out;
    box-shadow: 1px 3px 4px -2px #05975f12;
    font-weight: 600;
    letter-spacing: .02em
}

.success-pg .primary-btn:hover {
    background: linear-gradient(145deg, #05975F 0%, #048556 100%);
    box-shadow: 1px 6px 28px -2px #05975f14;
    transform: translateY(-1px)
}

.success-pg .primary-btn:active {
    box-shadow: inset 1px 3px 4px -2px #0003;
    transform: translateY(0)
}

.success-pg .secondary-btn {
    background: transparent;
    color: #FFF4F7;
    font-size: 13px;
    line-height: 1.4;
    padding: 12px 48px;
    border: 2px solid #fff4f733;
    border-radius: 32px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: border-color .26s ease-out, background .26s ease-out;
    font-weight: 500;
    letter-spacing: .01em
}

.success-pg .secondary-btn:hover {
    border-color: #fff4f766;
    background: #fff4f708
}

.success-pg .secondary-btn:active {
    background: #fff4f70f
}

.success-pg .contact-ref {
    font-size: 13px;
    line-height: 1.65;
    color: #fff4f799;
    margin: 48px 0 0
}

.success-pg .contact-ref a {
    color: #05975F;
    text-decoration: none;
    transition: color .19s ease-out
}

.success-pg .contact-ref a:hover {
    color: #06b372;
    text-decoration: underline
}

@media (max-width: 900px) {
    .success-pg {
        padding: 48px 24px
    }

    .success-pg .check-icon {
        width: 96px;
        height: 96px;
        margin-bottom: 24px
    }

    .success-pg .check-icon svg {
        width: 48px;
        height: 48px
    }

    .success-pg .main-msg {
        font-size: 34px
    }

    .success-pg .sub-msg {
        font-size: 13px;
        margin-bottom: 24px
    }

    .success-pg .detail-box {
        padding: 24px;
        margin-bottom: 48px
    }

    .success-pg .info-grid {
        margin-bottom: 48px
    }
}

@media (max-width: 600px) {
    .success-pg .main-msg {
        font-size: 34px
    }

    .success-pg .info-grid {
        grid-template-columns: 1fr
    }

    .success-pg .action-zone {
        gap: 12px
    }

    .success-pg .primary-btn,
    .success-pg .secondary-btn {
        width: 100%;
        text-align: center
    }
}