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

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
    font-family: 'Cormorant', serif;
    font-size: 18px;
    line-height: 1.55;
    color: #2b2b2b;
    background-color: #fff;
    letter-spacing: .015em
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0
}

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

.top-bar {
    background: linear-gradient(135deg, #FFF7ED 0%, #fff 100%);
    border-bottom: 1px solid #9c44f11f;
    padding: 8px 0
}

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

.logo-group {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #fff;
    padding: 8px 24px;
    border-radius: 32px;
    border-bottom: 2px solid #0c91842e;
    box-shadow: 2px 2px 2px -2px #9c44f10f 2px 6px 14px -2px #9c44f117
}

.logo-link {
    display: block;
    line-height: 0
}

.logo-image {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px #0c918426)
}

.company-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #1a1a1a
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: linear-gradient(135deg, #0c918414, #9c44f10f);
    border-radius: 20px;
    border: 1px solid #0c918426;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #0C9184
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #0C9184;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #0c918440;
    animation: pulse-availability 2.4s cubic-bezier(0.34, 1.2, 0.64, 1) infinite
}

@keyframes pulse-availability {

    0%,
    100% {
        box-shadow: 0 0 0 2px #0c918440
    }

    50% {
        box-shadow: 0 0 0 5px #0c918426
    }
}

.primary-nav {
    background: #fff;
    border-bottom: 2px solid #9c44f114;
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417
}

.nav-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 72px
}

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

.nav-item {
    position: relative
}

.nav-link {
    display: block;
    padding: 8px 24px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #3a3a3a;
    border-radius: 10px;
    background: transparent;
    border: 2px solid transparent;
    transition: all .42s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #9A44F1, #0C9184);
    transition: width .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.nav-link:hover {
    color: #9A44F1;
    background: #9c44f10a;
    border-color: #9c44f11f;
    box-shadow: inset 2px 2px 8px #9c44f114
}

.nav-link:hover::before {
    width: 100%
}

.nav-link:focus {
    outline: 2px solid #9A44F1;
    outline-offset: 3px
}

footer {
    background: linear-gradient(180deg, #fff 0%, #FFF7ED 100%);
    border-top: 3px solid #9c44f126;
    margin-top: 80px
}

.footer-divider {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px
}

.divider-ornament {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #0c91844d 20%, #9c44f14d 50%, #0c91844d 80%, transparent 100%);
    position: relative
}

.divider-ornament::before,
.divider-ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #9A44F1;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #9c44f133
}

.divider-ornament::before {
    left: 20%
}

.divider-ornament::after {
    right: 20%;
    background: #0C9184;
    box-shadow: 0 0 0 2px #0c918433
}

.footer-main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px 40px
}

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

.footer-column h3 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #1a1a1a;
    margin: 0 0 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid #9c44f133
}

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

.footer-link {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .015em;
    color: #4a4a4a;
    padding: 8px;
    border-radius: 5px;
    transition: all .35s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    padding-left: 24px
}

.footer-link::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #0C9184;
    border-radius: 50%;
    transition: all .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.footer-link:hover {
    color: #9A44F1;
    background: #9c44f10f;
    padding-left: 32px;
    box-shadow: inset 2px 2px 6px #9c44f11a
}

.footer-link:hover::before {
    background: #9A44F1;
    width: 6px;
    height: 6px;
    left: 10px
}

.footer-link:focus {
    outline: 2px solid #0C9184;
    outline-offset: 2px
}

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

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 18px;
    line-height: 1.55;
    color: #4a4a4a;
    padding: 8px;
    background: #0c918408;
    border-radius: 5px;
    border-left: 3px solid #0C9184
}

.contact-item i {
    font-size: 21px;
    color: #0C9184;
    margin-top: 3px;
    flex-shrink: 0
}

.contact-item a {
    transition: color .35s ease-in-out
}

.contact-item a:hover {
    color: #9A44F1
}

.footer-logo-area {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #9c44f11f;
    margin-top: 40px
}

.footer-logo-link {
    display: inline-block;
    margin-bottom: 24px;
    padding: 8px 24px;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #0c918426;
    box-shadow: 2px 2px 2px -2px #9c44f10f 2px 6px 14px -2px #9c44f117
}

.footer-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px #0c918433)
}

.copyright {
    font-size: 16px;
    letter-spacing: .02em;
    color: #6a6a6a;
    margin: 0
}

.consent-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #fff 0%, #FFF7ED 100%);
    border-bottom: 3px solid #9c44f133;
    box-shadow: 2px 8px 48px -2px #0c91841c;
    z-index: 8000;
    padding: 24px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .42s cubic-bezier(0.34, 1.2, 0.64, 1), transform .42s cubic-bezier(0.34, 1.2, 0.64, 1)
}

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

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

.consent-text {
    flex: 1 1 400px;
    font-size: 16px;
    line-height: 1.55;
    color: #3a3a3a;
    letter-spacing: .015em;
    margin: 0
}

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

.consent-btn {
    padding: 8px 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 10px;
    border: 2px solid;
    background: transparent;
    transition: all .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    cursor: pointer;
    min-width: 120px;
    text-align: center
}

.consent-accept {
    border-color: #0C9184;
    color: #0C9184
}

.consent-accept:hover {
    background: #0c918414;
    box-shadow: inset 2px 2px 8px #0c91841f
}

.consent-accept:focus {
    outline: 2px solid #0C9184;
    outline-offset: 3px
}

.consent-reject {
    border-color: #9A44F1;
    color: #9A44F1
}

.consent-reject:hover {
    background: #9c44f114;
    box-shadow: inset 2px 2px 8px #9c44f11f
}

.consent-reject:focus {
    outline: 2px solid #9A44F1;
    outline-offset: 3px
}

.consent-settings-link {
    font-size: 16px;
    font-weight: 700;
    color: #6a6a6a;
    text-decoration: underline;
    cursor: pointer;
    transition: color .35s ease-in-out;
    padding: 8px
}

.consent-settings-link:hover {
    color: #9A44F1
}

.consent-settings-link:focus {
    outline: 2px solid #9A44F1;
    outline-offset: 2px
}

.consent-details {
    display: none;
    width: 100%;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #9c44f11f
}

.consent-details.visible {
    display: block
}

.consent-category {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    background: #0c918408;
    border-radius: 5px;
    border-left: 3px solid #9c44f133
}

.consent-category input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #9A44F1
}

.consent-category label {
    font-size: 16px;
    font-weight: 700;
    color: #3a3a3a;
    cursor: pointer;
    letter-spacing: .015em
}

.consent-category input[type="checkbox"]:focus {
    outline: 2px solid #9A44F1;
    outline-offset: 2px
}

.consent-category input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .6
}

@media (max-width: 1024px) {
    .top-bar-inner {
        justify-content: center
    }

    .footer-grid {
        gap: 40px
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px
    }

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

    .logo-group {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

    .status-indicator {
        width: 100%;
        justify-content: center
    }

    .nav-list {
        gap: 24px;
        padding: 8px 0
    }

    .nav-link {
        font-size: 16px;
        padding: 8px
    }

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

    .consent-inner {
        flex-direction: column
    }

    .consent-actions {
        width: 100%;
        flex-direction: column
    }

    .consent-btn {
        width: 100%
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 8px 0
    }

    .top-bar-inner,
    .nav-inner,
    .footer-main,
    .footer-divider {
        padding-left: 8px;
        padding-right: 8px
    }

    .logo-group {
        padding: 8px
    }

    .nav-list {
        gap: 8px
    }

    .footer-main {
        padding: 40px 8px 24px
    }

    .footer-grid {
        gap: 40px
    }

    .consent-banner {
        padding: 8px
    }
}

.terms-body {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

.terms-body p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 24px;
    color: #2d2d2d
}

.terms-body p:last-child {
    margin-bottom: 0
}

.terms-body strong,
.terms-body b {
    font-weight: 600;
    color: #1a1a1a
}

.terms-body ul,
.terms-body ol {
    margin-bottom: 24px;
    padding-left: 40px
}

.terms-body ul {
    list-style-type: disc
}

.terms-body ol {
    list-style-type: decimal
}

.terms-body li {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 8px;
    color: #2d2d2d
}

.terms-body li:last-child {
    margin-bottom: 0
}

.terms-body ul ul,
.terms-body ol ol,
.terms-body ul ol,
.terms-body ol ul {
    margin-top: 8px;
    margin-bottom: 8px
}

.terms-body table {
    width: 100%;
    margin-bottom: 40px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.55;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117
}

.terms-body thead {
    background: linear-gradient(135deg, #f8f5fc 0%, #fff 100%)
}

.terms-body th {
    padding: 24px;
    text-align: left;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 2px solid #9A44F1
}

.terms-body td {
    padding: 24px;
    color: #2d2d2d;
    border-bottom: 1px solid #f0f0f0
}

.terms-body tbody tr:last-child td {
    border-bottom: none
}

.terms-body tbody tr {
    transition: background-color .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.terms-body tbody tr:hover {
    background: #fdfcfe
}

.terms-body div {
    margin-bottom: 24px
}

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

    .terms-body p,
    .terms-body li {
        font-size: 16px;
        line-height: 1.8
    }

    .terms-body table {
        font-size: 16px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .terms-body th,
    .terms-body td {
        padding: 24px;
        white-space: nowrap
    }

    .terms-body ul,
    .terms-body ol {
        padding-left: 24px
    }
}

@media (max-width: 480px) {
    .terms-body {
        padding: 24px
    }

    .terms-body th,
    .terms-body td {
        padding: 24px
    }
}

.detail-study {
    background: #fff;
    min-height: 100vh
}

.detail-study ::selection {
    background: #0C9184;
    color: #fff
}

.detail-study .top-anchor {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s ease-in-out;
    z-index: 100;
    opacity: 0;
    pointer-events: none
}

.detail-study .top-anchor.visible {
    opacity: 1;
    pointer-events: all
}

.detail-study .top-anchor:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 2px 4px 6px -2px #9a44f114 2px 10px 20px -2px #9a44f124 2px 16px 56px -2px #9a44f12e
}

.detail-study .top-anchor svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.detail-study .banner-intro {
    background: #9A44F1;
    padding: 24px 40px;
    position: relative;
    overflow: hidden
}

.detail-study .banner-intro::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFF7ED 0%, #0C9184 50%, #FFF7ED 100%)
}

.detail-study .banner-intro .decor-stripe {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: linear-gradient(270deg, #fff7ed1f 0%, #0c918414 100%);
    pointer-events: none;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%)
}

.detail-study .banner-intro .constraint {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.detail-study .banner-intro h1 {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 24px;
    max-width: 920px
}

.detail-study .banner-intro .meta-row {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap
}

.detail-study .banner-intro .tag-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: #ffffff26;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.35;
    color: #fff;
    border: 1px solid #fff3
}

.detail-study .banner-intro .read-info {
    font-size: 16px;
    line-height: 1.35;
    color: #ffffffd9;
    display: flex;
    align-items: center;
    gap: 8px
}

.detail-study .banner-intro .read-info svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}

.detail-study .banner-intro .like-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.35;
    color: #ffffffd9
}

.detail-study .banner-intro .like-counter svg {
    width: 20px;
    height: 20px;
    fill: #FFF7ED
}

.detail-study .visual-content {
    background: #fafbfc;
    padding: 80px 40px;
    position: relative
}

.detail-study .visual-content .constraint {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start
}

.detail-study .visual-content .image-holder {
    flex: 0 0 58%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c;
    border: 2px solid #e8eaed;
    transition: transform .42s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .4s ease-in-out
}

.detail-study .visual-content .image-holder:hover {
    transform: scale(1.03);
    box-shadow: 2px 4px 6px -2px #0c918414 2px 10px 20px -2px #0c918424 2px 16px 56px -2px #0c91842e
}

.detail-study .visual-content .image-holder img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    mix-blend-mode: multiply
}

.detail-study .visual-content .image-holder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #9a44f12e 0%, #0c91841f 100%);
    pointer-events: none
}

.detail-study .visual-content .milestone-track {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: inset 2px 2px 8px #9a44f10a inset -2px -2px 8px #fff9;
    border: 1px solid #e8eaed
}

.detail-study .visual-content .milestone-track h2 {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #1a1d23;
    margin: 0 0 40px
}

.detail-study .visual-content .track-list {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.detail-study .visual-content .track-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative
}

.detail-study .visual-content .track-item::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 48px;
    width: 2px;
    height: calc(100% + 24px);
    background: linear-gradient(180deg, #9A44F1 0%, #0C9184 100%);
    opacity: .2
}

.detail-study .visual-content .track-item:last-child::before {
    display: none
}

.detail-study .visual-content .track-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 32px;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    position: relative;
    z-index: 2
}

.detail-study .visual-content .track-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff
}

.detail-study .visual-content .track-text {
    flex: 1;
    padding-top: 8px
}

.detail-study .visual-content .track-text h3 {
    font-size: 18px;
    line-height: 1.35;
    color: #1a1d23;
    margin: 0 0 8px;
    letter-spacing: -.005em
}

.detail-study .visual-content .track-text .date-stamp {
    font-size: 16px;
    line-height: 1.35;
    color: #6b7785
}

.detail-study .visual-content .decor-dots {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    gap: 8px;
    pointer-events: none
}

.detail-study .visual-content .decor-dots span {
    width: 12px;
    height: 12px;
    border-radius: 32px;
    background: #9A44F1;
    opacity: .15;
    animation: dot-pulse 2.4s ease-in-out infinite
}

.detail-study .visual-content .decor-dots span:nth-child(2) {
    width: 8px;
    height: 8px;
    background: #0C9184;
    animation-delay: .3s
}

.detail-study .visual-content .decor-dots span:nth-child(3) {
    width: 16px;
    height: 16px;
    background: #FFF7ED;
    border: 2px solid #9A44F1;
    animation-delay: .6s
}

@keyframes dot-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .15
    }

    50% {
        transform: scale(1.3);
        opacity: .35
    }
}

.detail-study .text-body {
    background: #fff;
    padding: 80px 40px;
    position: relative
}

.detail-study .text-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="zigzag" x="0" y="0" width="80" height="20" patternUnits="userSpaceOnUse"><path d="M0 10 L15 0 L30 10 L50 5 L65 10 L80 0" fill="none" stroke="%239A44F1" stroke-width="1.5" opacity="0.15"/></pattern></defs><rect width="100%" height="100%" fill="url(%23zigzag)"/></svg>') repeat-x top left;
    pointer-events: none;
    opacity: .4
}

.detail-study .text-body .constraint {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.detail-study .text-body h2 {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #1a1d23;
    margin: 0 0 24px
}

.detail-study .text-body h2:first-letter {
    font-size: 52px;
    line-height: 1;
    color: #9A44F1;
    float: left;
    margin-right: 8px;
    margin-top: 4px
}

.detail-study .text-body p {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: .01em;
    color: #3a3f4a;
    margin: 0 0 24px
}

.detail-study .text-body p:last-child {
    margin-bottom: 0
}

.detail-study .text-body strong {
    color: #1a1d23;
    font-weight: 600
}

.detail-study .text-body abbr {
    text-decoration: none;
    border-bottom: 2px dotted #9A44F1;
    cursor: help
}

.detail-study .text-body details {
    background: #fafbfc;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 24px;
    margin: 24px 0;
    box-shadow: inset 2px 2px 6px #9a44f108;
    transition: box-shadow .35s ease-in-out
}

.detail-study .text-body details:hover {
    box-shadow: inset 2px 2px 12px #9a44f10f 2px 2px 2px -2px #9a44f10f
}

.detail-study .text-body details summary {
    font-size: 18px;
    line-height: 1.55;
    color: #1a1d23;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .32s ease-in-out
}

.detail-study .text-body details summary::-webkit-details-marker {
    display: none
}

.detail-study .text-body details summary::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 32px;
    background: #9A44F1;
    flex-shrink: 0;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), background .32s ease-in-out
}

.detail-study .text-body details[open] summary::before {
    transform: scale(1.4);
    background: #0C9184
}

.detail-study .text-body details summary:hover {
    color: #9A44F1
}

.detail-study .text-body details p {
    margin-top: 24px
}

.detail-study .text-body a {
    color: #9A44F1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .3s ease-in-out, text-decoration-color .3s ease-in-out
}

.detail-study .text-body a:hover {
    color: #0C9184;
    text-decoration-color: #0C9184
}

.detail-study .text-body a:visited {
    text-decoration: line-through;
    opacity: .7
}

@media (max-width: 1024px) {
    .detail-study .banner-intro {
        padding: 24px
    }

    .detail-study .banner-intro h1 {
        font-size: 40px
    }

    .detail-study .visual-content {
        padding: 40px 24px
    }

    .detail-study .visual-content .constraint {
        flex-direction: column
    }

    .detail-study .visual-content .image-holder {
        flex: 0 0 100%
    }

    .detail-study .text-body {
        padding: 40px 24px
    }

    .detail-study .top-anchor {
        bottom: 24px;
        right: 24px;
        width: 48px;
        height: 48px
    }
}

@media (max-width: 768px) {
    .detail-study .banner-intro h1 {
        font-size: 32px
    }

    .detail-study .banner-intro .meta-row {
        gap: 24px
    }

    .detail-study .visual-content .milestone-track {
        padding: 24px
    }

    .detail-study .visual-content .milestone-track h2 {
        font-size: 21px;
        margin-bottom: 24px
    }

    .detail-study .text-body h2 {
        font-size: 21px
    }

    .detail-study .text-body h2:first-letter {
        font-size: 40px
    }

    .detail-study .text-body p {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .detail-study .banner-intro {
        padding: 24px 8px
    }

    .detail-study .banner-intro h1 {
        font-size: 27px
    }

    .detail-study .visual-content {
        padding: 40px 8px
    }

    .detail-study .text-body {
        padding: 40px 8px
    }

    .detail-study .visual-content .milestone-track {
        padding: 24px 8px
    }

    .detail-study .top-anchor {
        width: 44px;
        height: 44px
    }

    .detail-study .top-anchor svg {
        width: 20px;
        height: 20px
    }
}

.abt-us {
    background: #fff;
    color: #1a1a1a
}

.abt-us .vis-top {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.abt-us .vis-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 2px;
    background: linear-gradient(127deg, #9A44F1 0%, #0c91844d 50%, #FFF7ED 100%);
    opacity: .4
}

.abt-us .txt-zone {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 24px;
    z-index: 2
}

.abt-us .txt-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 40%, #9a44f114, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none
}

.abt-us .main-heading {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #2a2a2a
}

.abt-us .main-heading .first-word {
    font-size: 68px;
    color: #9A44F1;
    display: inline-block
}

.abt-us .lead-desc {
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: .01em;
    color: #4a4a4a;
    margin: 0
}

.abt-us .img-zone {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px
}

.abt-us .img-zone img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: blur(0px);
    animation: gentle-zoom 18s cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate
}

.abt-us .img-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid #9a44f126;
    border-radius: 20px;
    pointer-events: none
}

@keyframes gentle-zoom {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.08)
    }
}

.abt-us .story-panel {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: linear-gradient(217deg, #fff7ed80 0%, #fffc 100%)
}

.abt-us .story-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,30 Q300,10 600,35 T1200,25 L1200,0 L0,0 Z" fill="%23ffffff" opacity="0.9"/></svg>') no-repeat;
    background-size: cover
}

.abt-us .story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto
}

.abt-us .story-card {
    background: #fff;
    padding: 40px 24px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    position: relative;
    overflow: hidden;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.abt-us .story-card:hover {
    transform: translateY(-4px);
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c inset 0 -2px 8px #9a44f10d
}

.abt-us .story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(92deg, #9A44F1 0%, #0C9184 100%);
    opacity: 0;
    transition: opacity .35s ease-in-out
}

.abt-us .story-card:hover::before {
    opacity: 1
}

.abt-us .story-card h2 {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 0 0 24px;
    color: #2a2a2a
}

.abt-us .story-card p {
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: .005em;
    margin: 0;
    color: #4a4a4a
}

.abt-us .approach-section {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

.abt-us .approach-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 40px
}

.abt-us .approach-divider::before,
.abt-us .approach-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #9a44f14d, transparent);
    max-width: 300px
}

.abt-us .divider-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9a44f11a, #0c91841a);
    border-radius: 32px;
    border: 1px solid #9a44f133
}

.abt-us .divider-icon svg {
    width: 16px;
    height: 16px;
    fill: #9A44F1
}

.abt-us .approach-wide {
    max-width: 1200px;
    margin: 0 auto 40px
}

.abt-us .approach-heading {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-align: center;
    margin: 0 0 40px;
    color: #2a2a2a
}

.abt-us .approach-img-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 0 40px
}

.abt-us .approach-img-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #000000bf 0%, #000000d9 100%);
    z-index: 1;
    pointer-events: none
}

.abt-us .approach-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slow-pan 20s ease-in-out infinite alternate
}

@keyframes slow-pan {
    0% {
        transform: scale(1.1) translateX(0)
    }

    100% {
        transform: scale(1.15) translateX(-20px)
    }
}

.abt-us .approach-narrow {
    max-width: 800px;
    margin: 0 auto
}

.abt-us .approach-text {
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .01em;
    text-align: center;
    color: #4a4a4a;
    margin: 0 0 24px
}

.abt-us .approach-text:last-child {
    margin: 0
}

.abt-us .metrics-section {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: linear-gradient(142deg, #9a44f108 0%, #ffff 50%, #0c91840a 100%);
    animation: color-wash 25s ease-in-out infinite alternate
}

@keyframes color-wash {
    0% {
        background: linear-gradient(142deg, #9a44f108 0%, #ffff 50%, #0c91840a 100%)
    }

    100% {
        background: linear-gradient(142deg, #0c91840a 0%, #ffff 50%, #9a44f108 100%)
    }
}

.abt-us .metrics-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,25 Q200,45 400,30 T800,35 Q1000,25 1200,40 L1200,0 L0,0 Z" fill="%23ffffff" opacity="0.95"/></svg>') no-repeat;
    background-size: cover
}

.abt-us .metrics-header {
    text-align: center;
    margin: 0 0 40px
}

.abt-us .metrics-header h2 {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #2a2a2a
}

.abt-us .metrics-header p {
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: .01em;
    margin: 0;
    color: #4a4a4a;
    max-width: 700px;
    margin: 0 auto
}

.abt-us .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto
}

.abt-us .metric-box {
    background: #fff;
    padding: 40px 24px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 2px 8px #9a44f10f;
    transition: box-shadow .42s cubic-bezier(0.34, 1.2, 0.64, 1), transform .35s ease-in-out
}

.abt-us .metric-box:hover {
    box-shadow: inset 0 4px 16px #9a44f11f 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417;
    transform: scale(1.02)
}

.abt-us .metric-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #9A44F1, transparent);
    opacity: 0;
    transition: opacity .4s ease-in-out
}

.abt-us .metric-box:hover::before {
    opacity: 1
}

.abt-us .metric-value {
    font-size: 68px;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #9A44F1;
    margin: 0 0 8px;
    font-weight: 600
}

.abt-us .metric-label {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: .005em;
    color: #4a4a4a;
    margin: 0
}

.abt-us .progress-wrapper {
    margin: 40px 0 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.abt-us .progress-trail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 24px 0
}

.abt-us .progress-trail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #9a44f133, #0c918433);
    transform: translateY(-50%);
    z-index: 1
}

.abt-us .progress-dot {
    width: 20px;
    height: 20px;
    border-radius: 32px;
    background: #e8e8e8;
    border: 2px solid #d0d0d0;
    position: relative;
    z-index: 2;
    transition: all .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.abt-us .progress-dot.active {
    background: linear-gradient(135deg, #9A44F1, #0C9184);
    border-color: #9A44F1;
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 4px #9a44f126
}

.abt-us .progress-dot:hover {
    transform: scale(1.3);
    background: linear-gradient(135deg, #9A44F1, #0C9184);
    border-color: #9A44F1
}

.abt-us .team-section {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #fff
}

.abt-us .team-intro {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center
}

.abt-us .team-intro h2 {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #2a2a2a;
    position: relative;
    display: inline-block
}

.abt-us .team-intro h2::before,
.abt-us .team-intro h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%)
}

.abt-us .team-intro h2::before {
    left: -48px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239A44F1"><circle cx="12" cy="12" r="3"/></svg>') no-repeat center;
    background-size: contain
}

.abt-us .team-intro h2::after {
    right: -48px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230C9184"><circle cx="12" cy="12" r="3"/></svg>') no-repeat center;
    background-size: contain
}

.abt-us .team-intro p {
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .01em;
    margin: 0;
    color: #4a4a4a
}

.abt-us .team-profiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto
}

.abt-us .profile-card {
    background: linear-gradient(135deg, #fff7ed66, #ffffffe6);
    padding: 40px 24px;
    border-radius: 20px;
    position: relative;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    transition: transform .4s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s ease-in-out
}

.abt-us .profile-card:hover {
    transform: translateY(-6px);
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c inset 0 -3px 12px #9a44f114
}

.abt-us .profile-card h3 {
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: #2a2a2a
}

.abt-us .profile-role {
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: .005em;
    color: #9A44F1;
    margin: 0 0 24px;
    font-weight: 500
}

.abt-us .profile-card p {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: .005em;
    margin: 0;
    color: #4a4a4a
}

.abt-us .vision-final {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 24px;
    background: linear-gradient(180deg, #fff 0%, #fff7ed4d 100%);
    display: flex;
    flex-direction: column;
    align-items: center
}

.abt-us .vision-content {
    max-width: 700px;
    text-align: center
}

.abt-us .vision-content h2 {
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #2a2a2a
}

.abt-us .vision-content p {
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .01em;
    margin: 0 0 24px;
    color: #4a4a4a
}

.abt-us .vision-content p:last-child {
    margin: 0
}

.abt-us .vision-img-holder {
    width: 100%;
    max-width: 600px;
    margin: 40px 0 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden
}

.abt-us .vision-img-holder::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid #9a44f133;
    border-radius: 10px;
    z-index: 2;
    pointer-events: none
}

.abt-us .vision-img-holder img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    animation: subtle-scale 22s ease-in-out infinite alternate
}

@keyframes subtle-scale {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.06)
    }
}

.abt-us .cta-btn {
    display: inline-block;
    padding: 24px 40px;
    background: linear-gradient(135deg, #9A44F1, #0C9184);
    color: #fff;
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: .005em;
    text-decoration: none;
    border-radius: 10px;
    margin: 40px 0 0;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .4s ease-in-out;
    cursor: pointer;
    border: none
}

.abt-us .cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 3px 10px #00000026 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c
}

.abt-us .cta-btn:active {
    transform: translateY(-1px)
}

.abt-us ::selection {
    background: #0C9184;
    color: #fff
}

.abt-us ::placeholder {
    font-style: italic;
    opacity: .55
}

@media (max-width: 1024px) {
    .abt-us .main-heading {
        font-size: 52px
    }

    .abt-us .main-heading .first-word {
        font-size: 52px
    }

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

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

    .abt-us .team-profiles {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .abt-us .approach-heading,
    .abt-us .metrics-header h2,
    .abt-us .team-intro h2,
    .abt-us .vision-content h2 {
        font-size: 52px
    }
}

@media (max-width: 768px) {
    .abt-us .vis-top {
        padding: 40px 24px 24px
    }

    .abt-us .main-heading {
        font-size: 27px
    }

    .abt-us .main-heading .first-word {
        font-size: 52px
    }

    .abt-us .lead-desc {
        font-size: 18px
    }

    .abt-us .img-zone img {
        height: 280px
    }

    .abt-us .story-panel,
    .abt-us .approach-section,
    .abt-us .metrics-section,
    .abt-us .team-section,
    .abt-us .vision-final {
        padding: 40px 24px
    }

    .abt-us .story-card,
    .abt-us .metric-box,
    .abt-us .profile-card {
        padding: 24px
    }

    .abt-us .approach-heading,
    .abt-us .metrics-header h2,
    .abt-us .team-intro h2,
    .abt-us .vision-content h2 {
        font-size: 27px
    }

    .abt-us .approach-text,
    .abt-us .metrics-header p,
    .abt-us .vision-content p {
        font-size: 18px
    }

    .abt-us .metric-value {
        font-size: 52px
    }

    .abt-us .approach-img-wrapper {
        height: 300px
    }

    .abt-us .vision-img-holder img {
        height: 260px
    }

    .abt-us .team-intro h2::before,
    .abt-us .team-intro h2::after {
        display: none
    }

    .abt-us .cta-btn {
        padding: 24px;
        font-size: 18px
    }
}

@media (max-width: 480px) {
    .abt-us .vis-top {
        padding: 24px 8px 8px
    }

    .abt-us .txt-zone {
        padding: 24px 8px
    }

    .abt-us .main-heading {
        font-size: 27px
    }

    .abt-us .main-heading .first-word {
        font-size: 27px
    }

    .abt-us .lead-desc {
        font-size: 16px
    }

    .abt-us .img-zone img {
        height: 220px
    }

    .abt-us .story-panel,
    .abt-us .approach-section,
    .abt-us .metrics-section,
    .abt-us .team-section,
    .abt-us .vision-final {
        padding: 24px 8px
    }

    .abt-us .story-card,
    .abt-us .metric-box,
    .abt-us .profile-card {
        padding: 24px 8px
    }

    .abt-us .story-card h2,
    .abt-us .profile-card h3 {
        font-size: 21px
    }

    .abt-us .approach-heading,
    .abt-us .metrics-header h2,
    .abt-us .team-intro h2,
    .abt-us .vision-content h2 {
        font-size: 27px
    }

    .abt-us .approach-text,
    .abt-us .metrics-header p,
    .abt-us .team-intro p,
    .abt-us .vision-content p {
        font-size: 16px
    }

    .abt-us .metric-value {
        font-size: 52px
    }

    .abt-us .approach-img-wrapper {
        height: 240px
    }

    .abt-us .vision-img-holder img {
        height: 200px
    }

    .abt-us .cta-btn {
        padding: 24px;
        font-size: 16px;
        width: 100%
    }

    .abt-us .progress-dot {
        width: 16px;
        height: 16px
    }

    .abt-us .progress-dot.active {
        width: 20px;
        height: 20px
    }
}

.case-stdy {
    background: linear-gradient(163deg, #fff 0%, #f5f5f5 100%);
    position: relative;
    overflow-x: clip
}

.case-stdy .grad-banner {
    background: linear-gradient(180deg, #9A44F1 0%, #9a44f100 100%);
    padding: 80px 24px 40px;
    position: relative;
    overflow: hidden
}

.case-stdy .grad-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(./site_media/5-container.jpg) center/cover no-repeat;
    opacity: .15;
    z-index: 0
}

.case-stdy .grad-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(0deg, #fff7ed00 0%, #fff7edd9 100%);
    z-index: 1
}

.case-stdy .banner-inner {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.case-stdy .banner-frame {
    border: 1px solid #9a44f133;
    border-radius: 3px;
    padding: 40px;
    background: #ffffffbf;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.case-stdy .banner-numeric {
    display: inline-block;
    font-size: 68px;
    line-height: 1.1;
    color: #9A44F1;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-right: 24px;
    vertical-align: middle
}

.case-stdy .banner-heading {
    display: inline-block;
    font-size: 52px;
    line-height: 1.1;
    color: #1a1d2e;
    font-weight: 700;
    letter-spacing: -.01em;
    vertical-align: middle;
    margin: 0
}

.case-stdy .banner-text {
    font-size: 18px;
    line-height: 1.55;
    color: #2c3142;
    margin: 24px 0 0;
    max-width: 820px;
    letter-spacing: .01em
}

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

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

.case-stdy .divider-brush path {
    fill: none;
    stroke: #9A44F1;
    stroke-width: 2;
    opacity: .3
}

.case-stdy .posts-zone {
    padding: 80px 24px;
    background: #fff;
    position: relative
}

.case-stdy .posts-zone::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at top right, #0c918414 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: bg-shift-posts 8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate
}

@keyframes bg-shift-posts {
    0% {
        opacity: .6;
        transform: translate(0, 0)
    }

    100% {
        opacity: .9;
        transform: translate(-40px, 40px)
    }
}

.case-stdy .posts-contain {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.case-stdy .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px
}

.case-stdy .post-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    display: flex;
    flex-direction: column
}

.case-stdy .post-card:hover {
    transform: translateY(-8px);
    box-shadow: 2px 4px 8px -2px #9a44f11f 2px 12px 24px -2px #9a44f129 2px 16px 64px -2px #9a44f133
}

.case-stdy .post-img-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    border-bottom: 2px solid #FFF7ED
}

.case-stdy .post-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #9a44f1b3 0%, #0c918480 100%);
    opacity: 0;
    transition: opacity .42s ease-in-out;
    pointer-events: none;
    z-index: 1
}

.case-stdy .post-card:hover .post-img-wrap::after {
    opacity: 1
}

.case-stdy .post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.88);
    transition: filter .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.case-stdy .post-card:hover .post-img {
    filter: brightness(1.1)
}

.case-stdy .post-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.case-stdy .post-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.case-stdy .post-tag {
    font-size: 16px;
    line-height: 1.35;
    color: #9A44F1;
    background: #9a44f114;
    padding: 8px 24px;
    border-radius: 32px;
    letter-spacing: .02em;
    font-weight: 600
}

.case-stdy .post-readtime {
    font-size: 16px;
    line-height: 1.35;
    color: #5a5d6e;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 8px
}

.case-stdy .post-readtime::before {
    content: '';
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230C9184" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>') center/contain no-repeat
}

.case-stdy .post-title {
    font-size: 21px;
    line-height: 1.35;
    color: #1a1d2e;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.005em
}

.case-stdy .post-title a {
    color: inherit;
    text-decoration: none;
    transition: color .32s ease-in-out
}

.case-stdy .post-title a:hover {
    color: #9A44F1
}

.case-stdy .post-desc {
    font-size: 16px;
    line-height: 1.55;
    color: #3c3f52;
    margin: 0 0 24px;
    letter-spacing: .005em;
    flex-grow: 1
}

.case-stdy .post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #9a44f11a
}

.case-stdy .post-like {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.35;
    color: #5a5d6e;
    letter-spacing: .01em
}

.case-stdy .post-like::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239A44F1" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>') center/contain no-repeat
}

.case-stdy .post-link {
    font-size: 16px;
    line-height: 1.35;
    color: #0C9184;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .35s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative
}

.case-stdy .post-link::after {
    content: '→';
    margin-left: 8px;
    display: inline-block;
    transition: transform .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.case-stdy .post-link:hover {
    color: #9A44F1
}

.case-stdy .post-link:hover::after {
    transform: translateX(8px)
}

.case-stdy .post-counter {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: #fffffff2;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.1;
    color: #9A44F1;
    font-weight: 700;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    z-index: 2
}

.case-stdy .approach-zone {
    padding: 80px 24px;
    background: linear-gradient(217deg, #f8f9fa 0%, #fff 48%, #f8f9fa 100%);
    position: relative
}

.case-stdy .approach-zone::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at bottom left, #9a44f10f 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: bg-shift-approach 9s ease-in-out infinite alternate
}

@keyframes bg-shift-approach {
    0% {
        opacity: .5;
        transform: translate(0, 0)
    }

    100% {
        opacity: .85;
        transform: translate(40px, -40px)
    }
}

.case-stdy .approach-contain {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.case-stdy .approach-header {
    text-align: center;
    margin-bottom: 80px
}

.case-stdy .approach-heading {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1d2e;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.01em
}

.case-stdy .approach-subtext {
    font-size: 18px;
    line-height: 1.55;
    color: #3c3f52;
    max-width: 720px;
    margin: 0 auto;
    letter-spacing: .005em
}

.case-stdy .approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px
}

.case-stdy .approach-item {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 8px #9a44f10a;
    transition: box-shadow .4s ease-in-out, transform .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.case-stdy .approach-item:hover {
    box-shadow: inset 0 4px 16px #9a44f114 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    transform: translateY(-4px)
}

.case-stdy .approach-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #9A44F1 0%, #0C9184 50%, #FFF7ED 100%)
}

.case-stdy .approach-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #9a44f11f 0%, #0c91841f 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px
}

.case-stdy .approach-icon svg {
    width: 32px;
    height: 32px;
    stroke: #9A44F1;
    fill: none;
    stroke-width: 2
}

.case-stdy .approach-title {
    font-size: 21px;
    line-height: 1.35;
    color: #1a1d2e;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.005em
}

.case-stdy .approach-text {
    font-size: 16px;
    line-height: 1.55;
    color: #3c3f52;
    margin: 0;
    letter-spacing: .005em
}

.case-stdy .progress-zone {
    padding: 80px 24px;
    background: #fff;
    position: relative
}

.case-stdy .progress-contain {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.case-stdy .progress-visual {
    position: relative
}

.case-stdy .progress-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #9a44f126;
    filter: brightness(0.88);
    transition: filter .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.case-stdy .progress-visual:hover .progress-img {
    filter: brightness(1.1)
}

.case-stdy .progress-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(0deg, #9a44f1bf 0%, transparent 100%);
    pointer-events: none;
    border-radius: 5px
}

.case-stdy .progress-content-side {
    display: flex;
    flex-direction: column
}

.case-stdy .progress-heading {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1d2e;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.01em
}

.case-stdy .progress-text {
    font-size: 18px;
    line-height: 1.55;
    color: #3c3f52;
    margin: 0 0 40px;
    letter-spacing: .005em
}

.case-stdy .progress-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.case-stdy .progress-list-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative
}

.case-stdy .progress-list-item::before {
    content: '';
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: #9A44F1;
    border-radius: 32px;
    margin-top: 8px;
    box-shadow: 0 0 0 4px #9a44f126;
    transition: box-shadow .35s ease-in-out
}

.case-stdy .progress-list-item:hover::before {
    box-shadow: 0 0 0 8px #9a44f140
}

.case-stdy .progress-list-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 32px;
    width: 2px;
    height: calc(100% + 8px);
    background: linear-gradient(180deg, #9a44f14d 0%, transparent 100%)
}

.case-stdy .progress-list-text {
    font-size: 16px;
    line-height: 1.55;
    color: #3c3f52;
    margin: 0;
    letter-spacing: .005em;
    flex: 1
}

.case-stdy .decorative-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #9A44F1 50%, transparent 100%);
    margin: 80px 0;
    position: relative
}

.case-stdy .decorative-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #0C9184;
    border-radius: 32px;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px #0c918433
}

.case-stdy .future-zone {
    padding: 80px 24px;
    background: url(./site_media/6current.jpg) center/cover no-repeat;
    position: relative;
    overflow: hidden
}

.case-stdy .future-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #9a44f1eb 0%, #0c9184e0 100%);
    z-index: 0
}

.case-stdy .future-contain {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center
}

.case-stdy .future-heading {
    font-size: 52px;
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.01em
}

.case-stdy .future-text {
    font-size: 21px;
    line-height: 1.55;
    color: #fff;
    max-width: 820px;
    margin: 0 auto 40px;
    letter-spacing: .005em
}

.case-stdy .future-btn {
    display: inline-block;
    padding: 24px 80px;
    background: #fff;
    color: #9A44F1;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    letter-spacing: .01em;
    box-shadow: 2px 2px 2px -2px #0000000f 2px 6px 14px -2px #00000017 2px 8px 48px -2px #0000001c;
    transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1), transform .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.case-stdy .future-btn:hover {
    background: #FFF7ED;
    box-shadow: inset 0 2px 8px #9a44f126 2px 4px 8px -2px #0000001f 2px 12px 24px -2px #00000029;
    transform: translateY(-2px)
}

@media (max-width: 1024px) {
    .case-stdy .grad-banner {
        padding: 80px 24px 40px
    }

    .case-stdy .banner-numeric {
        font-size: 52px;
        margin-right: 24px
    }

    .case-stdy .banner-heading {
        font-size: 52px
    }

    .case-stdy .banner-text {
        font-size: 18px
    }

    .case-stdy .posts-zone {
        padding: 80px 24px
    }

    .case-stdy .posts-grid {
        gap: 40px
    }

    .case-stdy .approach-zone {
        padding: 80px 24px
    }

    .case-stdy .approach-heading {
        font-size: 52px
    }

    .case-stdy .approach-grid {
        gap: 40px
    }

    .case-stdy .progress-zone {
        padding: 80px 24px
    }

    .case-stdy .progress-contain {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .case-stdy .progress-heading {
        font-size: 52px
    }

    .case-stdy .future-zone {
        padding: 80px 24px
    }

    .case-stdy .future-heading {
        font-size: 52px
    }

    .case-stdy .future-text {
        font-size: 21px
    }
}

@media (max-width: 768px) {
    .case-stdy .grad-banner {
        padding: 40px 24px
    }

    .case-stdy .banner-numeric {
        font-size: 52px;
        display: block;
        margin-bottom: 24px;
        margin-right: 0
    }

    .case-stdy .banner-heading {
        font-size: 27px;
        display: block
    }

    .case-stdy .banner-text {
        font-size: 16px
    }

    .case-stdy .banner-frame {
        padding: 24px
    }

    .case-stdy .posts-zone {
        padding: 40px 24px
    }

    .case-stdy .posts-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .case-stdy .approach-zone {
        padding: 40px 24px
    }

    .case-stdy .approach-header {
        margin-bottom: 40px
    }

    .case-stdy .approach-heading {
        font-size: 27px
    }

    .case-stdy .approach-subtext {
        font-size: 16px
    }

    .case-stdy .approach-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .case-stdy .approach-item {
        padding: 24px
    }

    .case-stdy .progress-zone {
        padding: 40px 24px
    }

    .case-stdy .progress-contain {
        gap: 24px
    }

    .case-stdy .progress-heading {
        font-size: 27px
    }

    .case-stdy .progress-text {
        font-size: 16px
    }

    .case-stdy .progress-img {
        height: 320px
    }

    .case-stdy .decorative-line {
        margin: 40px 0
    }

    .case-stdy .future-zone {
        padding: 40px 24px
    }

    .case-stdy .future-heading {
        font-size: 27px
    }

    .case-stdy .future-text {
        font-size: 18px
    }

    .case-stdy .future-btn {
        padding: 24px 40px;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .case-stdy .grad-banner {
        padding: 40px 8px 24px
    }

    .case-stdy .banner-numeric {
        font-size: 27px
    }

    .case-stdy .banner-heading {
        font-size: 21px
    }

    .case-stdy .banner-text {
        font-size: 16px
    }

    .case-stdy .banner-frame {
        padding: 24px
    }

    .case-stdy .posts-zone {
        padding: 40px 8px
    }

    .case-stdy .posts-grid {
        gap: 24px
    }

    .case-stdy .post-content {
        padding: 24px
    }

    .case-stdy .approach-zone {
        padding: 40px 8px
    }

    .case-stdy .approach-heading {
        font-size: 21px
    }

    .case-stdy .approach-subtext {
        font-size: 16px
    }

    .case-stdy .approach-item {
        padding: 24px
    }

    .case-stdy .progress-zone {
        padding: 40px 8px
    }

    .case-stdy .progress-heading {
        font-size: 21px
    }

    .case-stdy .progress-text {
        font-size: 16px
    }

    .case-stdy .progress-img {
        height: 280px
    }

    .case-stdy .future-zone {
        padding: 40px 8px
    }

    .case-stdy .future-heading {
        font-size: 21px
    }

    .case-stdy .future-text {
        font-size: 16px
    }

    .case-stdy .future-btn {
        padding: 24px 40px;
        font-size: 16px
    }
}

.launch {
    background: #fff;
    min-height: 100vh;
    position: relative;
    overflow-x: clip
}

.launch::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 25%, #9a44f108 0%, transparent 45%), radial-gradient(circle at 85% 75%, #0c918408 0%, transparent 45%);
    pointer-events: none;
    z-index: 0
}

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

.launch::after {
    content: '';
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #9a44f105;
    top: -180px;
    right: -140px;
    pointer-events: none;
    z-index: 0
}

.title-zone {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
    z-index: 1
}

.title-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative
}

.title-content::before {
    content: '01';
    position: absolute;
    font-size: 280px;
    font-weight: 700;
    color: #9a44f10a;
    top: -120px;
    left: -40px;
    line-height: 1;
    z-index: -1;
    pointer-events: none
}

.title-content h1 {
    font-size: 68px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0
}

.title-quote {
    font-size: 21px;
    line-height: 1.55;
    color: #3d3d5c;
    font-style: italic;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 3px solid #9A44F1
}

.title-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.title-visual img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    position: relative
}

.title-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #9a44f11f;
    mix-blend-mode: multiply;
    pointer-events: none
}

.title-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
    z-index: 1;
    pointer-events: none
}

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

    .title-content h1 {
        font-size: 52px
    }

    .title-visual img {
        height: 380px
    }
}

@media (max-width: 768px) {
    .title-content h1 {
        font-size: 52px
    }

    .title-quote {
        font-size: 18px
    }

    .title-visual img {
        height: 320px
    }
}

@media (max-width: 480px) {
    .title-zone {
        padding: 40px 8px
    }

    .title-content h1 {
        font-size: 52px
    }

    .title-quote {
        font-size: 16px;
        padding: 0 0 0 8px
    }
}

.distinction-area {
    position: relative;
    background: linear-gradient(125deg, #9a44f10a 0%, #fff7ed99 45%, #0c91840a 100%);
    padding: 80px 40px;
    z-index: 1
}

.distinction-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: radial-gradient(circle at 20px 0, transparent 20px, #fff 20px) 0 0, radial-gradient(circle at 20px 0, transparent 20px, #fff 20px) 40px 0;
    background-size: 80px 40px;
    background-repeat: repeat-x;
    transform: translateY(-39px)
}

.distinction-wrap {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.distinction-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto
}

.distinction-head h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 24px
}

.distinction-head p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

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

.distinction-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: inset 0 2px 8px #9a44f10a 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    transition: box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    overflow: hidden
}

.distinction-card::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #0c918405;
    bottom: -140px;
    right: -100px;
    pointer-events: none
}

.distinction-card:hover {
    box-shadow: inset 0 4px 16px #9a44f114 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.distinction-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.distinction-icon i {
    font-size: 32px;
    color: #fff
}

.distinction-card h3 {
    font-size: 27px;
    line-height: 1.35;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -.01em
}

.distinction-card p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

@media (max-width: 1024px) {
    .distinction-area {
        padding: 40px 24px
    }

    .distinction-grid {
        gap: 24px
    }

    .distinction-head h2 {
        font-size: 52px
    }
}

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

    .distinction-head h2 {
        font-size: 52px
    }

    .distinction-card {
        padding: 24px
    }
}

@media (max-width: 480px) {
    .distinction-area {
        padding: 40px 8px
    }

    .distinction-head h2 {
        font-size: 52px
    }

    .distinction-card h3 {
        font-size: 21px
    }

    .distinction-card p {
        font-size: 16px
    }
}

.relations-field {
    position: relative;
    padding: 80px 40px;
    background: #fff;
    z-index: 1
}

.relations-container {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center
}

.relations-text {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.relations-text h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0
}

.relations-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #3d3d5c;
    margin: 0
}

.relations-text p:first-of-type span:first-word {
    font-size: 27px;
    font-weight: 700;
    color: #9A44F1
}

.relations-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #9a44f11f
}

.relations-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    animation: zoom-cycle 18s ease-in-out infinite
}

.relations-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
    z-index: 1;
    pointer-events: none
}

@keyframes zoom-cycle {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

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

.relations-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    position: relative;
    padding: 0 0 0 32px
}

.relations-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%);
    box-shadow: 0 0 0 3px #9a44f126
}

.relations-list li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: calc(50% + 12px);
    width: 2px;
    height: 24px;
    background: #9a44f126
}

.relations-list li:last-child::after {
    display: none
}

@media (max-width: 1024px) {
    .relations-field {
        padding: 40px 24px
    }

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

    .relations-text h2 {
        font-size: 52px
    }

    .relations-visual img {
        height: 380px
    }
}

@media (max-width: 768px) {
    .relations-text h2 {
        font-size: 52px
    }

    .relations-visual img {
        height: 320px
    }
}

@media (max-width: 480px) {
    .relations-field {
        padding: 40px 8px
    }

    .relations-text h2 {
        font-size: 52px
    }

    .relations-text p,
    .relations-list li {
        font-size: 16px
    }
}

.evidence-section {
    position: relative;
    background: #FFF7ED;
    padding: 80px 40px;
    z-index: 1
}

.evidence-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: radial-gradient(circle at 20px 40px, transparent 20px, #FFF7ED 20px) 0 0, radial-gradient(circle at 20px 40px, transparent 20px, #FFF7ED 20px) 40px 0;
    background-size: 80px 40px;
    background-repeat: repeat-x;
    transform: translateY(-1px)
}

.evidence-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.evidence-intro {
    text-align: center;
    max-width: 840px;
    margin: 0 auto
}

.evidence-intro h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 24px
}

.evidence-intro p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

.evidence-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    perspective: 1000px
}

.evidence-item {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417;
    transition: transform .42s cubic-bezier(0.34, 1.2, 0.64, 1);
    animation: flip-reveal .7s cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
    transform-style: preserve-3d
}

.evidence-item:nth-child(1) {
    animation-delay: .1s
}

.evidence-item:nth-child(2) {
    animation-delay: .25s
}

.evidence-item:nth-child(3) {
    animation-delay: .4s
}

@keyframes flip-reveal {
    0% {
        transform: rotateY(90deg);
        opacity: 0
    }

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

.evidence-item:hover {
    transform: translateY(-8px)
}

.evidence-img {
    position: relative;
    overflow: hidden;
    height: 240px
}

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

.evidence-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
    z-index: 1;
    pointer-events: none
}

.evidence-body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.evidence-body h3 {
    font-size: 27px;
    line-height: 1.35;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em
}

.evidence-body p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

.evidence-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: linear-gradient(135deg, #9a44f114 0%, #0c918414 100%);
    border-radius: 32px;
    align-self: flex-start
}

.evidence-metric span {
    font-size: 21px;
    font-weight: 700;
    color: #9A44F1
}

@media (max-width: 1024px) {
    .evidence-section {
        padding: 40px 24px
    }

    .evidence-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px
    }

    .evidence-intro h2 {
        font-size: 52px
    }
}

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

    .evidence-intro h2 {
        font-size: 52px
    }

    .evidence-body {
        padding: 24px
    }
}

@media (max-width: 480px) {
    .evidence-section {
        padding: 40px 8px
    }

    .evidence-intro h2 {
        font-size: 52px
    }

    .evidence-body h3 {
        font-size: 21px
    }

    .evidence-body p {
        font-size: 16px
    }
}

.adapt-zone {
    position: relative;
    padding: 80px 40px;
    background: #fff7ed66;
    z-index: 1
}

.adapt-zone::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: #0c918405;
    top: 80px;
    left: -120px;
    pointer-events: none;
    z-index: 0
}

.adapt-container {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.adapt-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 40px
}

.adapt-header h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 24px
}

.adapt-header p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

.adapt-comparison {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 2px 8px #0c91840a 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c
}

.adapt-split {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.adapt-side {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative
}

.adapt-side.left {
    background: linear-gradient(135deg, #9a44f10a 0%, transparent 100%);
    border-right: 2px solid #9a44f11f
}

.adapt-side.right {
    background: linear-gradient(135deg, transparent 0%, #0c91840a 100%)
}

.adapt-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: #fff;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 700;
    color: #9A44F1;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    align-self: flex-start
}

.adapt-side.right .adapt-label {
    color: #0C9184
}

.adapt-side h3 {
    font-size: 27px;
    line-height: 1.35;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em
}

.adapt-side p {
    font-size: 18px;
    line-height: 1.8;
    color: #3d3d5c;
    margin: 0
}

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

.adapt-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    padding: 0 0 0 32px;
    position: relative
}

.adapt-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%)
}

.adapt-side.right .adapt-features li::before {
    background: linear-gradient(135deg, #0C9184 0%, #9A44F1 100%)
}

.adapt-visual-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 40px 0 0
}

.adapt-img-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #9a44f11f
}

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

.adapt-img-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
    z-index: 1;
    pointer-events: none
}

@media (max-width: 1024px) {
    .adapt-zone {
        padding: 40px 24px
    }

    .adapt-header h2 {
        font-size: 52px
    }

    .adapt-split {
        grid-template-columns: 1fr
    }

    .adapt-side.left {
        border-right: none;
        border-bottom: 2px solid #9a44f11f
    }

    .adapt-visual-row {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

@media (max-width: 768px) {
    .adapt-header h2 {
        font-size: 52px
    }

    .adapt-side {
        padding: 24px
    }

    .adapt-img-box img {
        height: 240px
    }
}

@media (max-width: 480px) {
    .adapt-zone {
        padding: 40px 8px
    }

    .adapt-header h2 {
        font-size: 52px
    }

    .adapt-side h3 {
        font-size: 21px
    }

    .adapt-side p,
    .adapt-features li {
        font-size: 16px
    }
}

.method-space {
    position: relative;
    padding: 80px 40px;
    background: #fff;
    z-index: 1
}

.method-space::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: radial-gradient(circle at 20px 0, transparent 20px, #fff 20px) 0 0, radial-gradient(circle at 20px 0, transparent 20px, #fff 20px) 40px 0;
    background-size: 80px 40px;
    background-repeat: repeat-x;
    transform: translateY(-39px)
}

.method-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center
}

.method-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #0c91841f;
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c
}

.method-visual img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    animation: zoom-cycle 18s ease-in-out infinite
}

.method-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
    z-index: 1;
    pointer-events: none
}

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

.method-content h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0
}

.method-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #3d3d5c;
    margin: 0
}

.method-points {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 24px 0 0
}

.method-point {
    display: flex;
    gap: 24px;
    align-items: flex-start
}

.method-number {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #9A44F1 0%, #0C9184 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.method-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.method-detail h4 {
    font-size: 21px;
    line-height: 1.35;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em
}

.method-detail p {
    font-size: 18px;
    line-height: 1.55;
    color: #3d3d5c;
    margin: 0
}

@media (max-width: 1024px) {
    .method-space {
        padding: 40px 24px
    }

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

    .method-content h2 {
        font-size: 52px
    }

    .method-visual img {
        height: 380px
    }
}

@media (max-width: 768px) {
    .method-content h2 {
        font-size: 52px
    }

    .method-visual img {
        height: 320px
    }

    .method-points {
        gap: 8px
    }
}

@media (max-width: 480px) {
    .method-space {
        padding: 40px 8px
    }

    .method-content h2 {
        font-size: 52px
    }

    .method-point {
        gap: 8px
    }

    .method-number {
        width: 40px;
        height: 40px;
        font-size: 18px
    }

    .method-detail h4 {
        font-size: 18px
    }

    .method-detail p {
        font-size: 16px
    }
}

.launch a:not([class]) {
    color: #9A44F1;
    text-decoration: none !important;
    border-bottom: 2px solid #9a44f14d;
    transition: border-color .35s ease-in-out
}

.launch a:not([class]):hover {
    border-bottom-color: #9A44F1
}

.launch a:not([class]):visited {
    text-decoration: line-through !important;
    color: #0C9184;
    border-bottom-color: #0c91844d
}

.launch ::placeholder {
    font-style: italic;
    opacity: .55
}

.launch button {
    cursor: pointer
}

.launch button:focus-visible {
    outline: 3px solid #9a44f180;
    outline-offset: 3px
}

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

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

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

.kontakt .intro-gradient {
    position: relative;
    background: linear-gradient(127deg, #9A44F1 0%, #9a44f114 35%, #0c91841f 65%, #0C9184 100%);
    padding: 80px 24px;
    overflow: hidden
}

.kontakt .intro-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 80% 20%, #fff7ed66, transparent 60%);
    pointer-events: none;
    border-radius: 50%
}

.kontakt .intro-gradient::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 20% 80%, #0c918426, transparent 65%);
    pointer-events: none;
    border-radius: 50%
}

.kontakt .intro-wrap {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.kontakt .intro-split {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: center
}

.kontakt .intro-text-zone {
    flex: 1;
    padding: 40px;
    background: #ffffffeb;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    position: relative
}

.kontakt .intro-text-zone::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 180px;
    height: 4px;
    background: linear-gradient(90deg, #9A44F1, #0C9184);
    border-radius: 3px
}

.kontakt .intro-problem {
    font-size: 21px;
    line-height: 1.55;
    color: #2a2a2a;
    margin: 0 0 24px;
    letter-spacing: .01em
}

.kontakt .intro-solution {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0;
    font-weight: 700;
    letter-spacing: -.02em;
    position: relative;
    overflow: hidden
}

.kontakt .intro-solution span {
    display: inline-block;
    animation: colorSweep 1.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards
}

@keyframes colorSweep {
    0% {
        color: #1a1a1a
    }

    50% {
        color: #9A44F1
    }

    100% {
        color: #1a1a1a
    }
}

.kontakt .intro-data-zone {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.kontakt .funnel-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center
}

.kontakt .funnel-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative
}

.kontakt .funnel-bar {
    height: 72px;
    background: linear-gradient(135deg, #9a44f1d9, #0c9184bf);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117
}

.kontakt .funnel-bar:hover {
    transform: scale(1.03);
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.kontakt .funnel-stage:nth-child(1) .funnel-bar {
    width: 100%
}

.kontakt .funnel-stage:nth-child(2) .funnel-bar {
    width: 78%
}

.kontakt .funnel-stage:nth-child(3) .funnel-bar {
    width: 56%
}

.kontakt .funnel-stage:nth-child(4) .funnel-bar {
    width: 34%
}

.kontakt .funnel-label {
    font-size: 16px;
    line-height: 1.35;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em
}

.kontakt .funnel-connector {
    width: 2px;
    height: 8px;
    background: linear-gradient(180deg, #9a44f166, #0c918466)
}

.kontakt .form-boundary {
    background: #fff;
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    position: relative;
    padding: 80px 24px
}

.kontakt .form-boundary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9A44F1, #0C9184, transparent)
}

.kontakt .form-container {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start
}

.kontakt .contact-meta {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.kontakt .meta-group {
    background: #fff;
    border: 1px solid #9a44f11f;
    border-radius: 10px;
    padding: 24px;
    position: relative;
    transition: box-shadow .42s ease-in-out, border-color .42s ease-in-out
}

.kontakt .meta-group:hover {
    border-color: #9a44f147;
    box-shadow: inset 2px 2px 8px #9a44f10f
}

.kontakt .meta-group::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9A44F1, #0C9184);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.kontakt .meta-group:hover::after {
    opacity: 1
}

.kontakt .meta-heading {
    font-size: 18px;
    line-height: 1.35;
    color: #1a1a1a;
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: .01em
}

.kontakt .meta-detail {
    font-size: 16px;
    line-height: 1.55;
    color: #3a3a3a;
    margin: 0;
    letter-spacing: .02em
}

.kontakt .meta-detail a {
    color: #0C9184;
    text-decoration: none;
    transition: color .33s ease-in-out;
    position: relative
}

.kontakt .meta-detail a:hover {
    color: #9A44F1
}

.kontakt .meta-detail a:visited {
    text-decoration: line-through;
    text-decoration-color: #9a44f14d;
    text-decoration-thickness: 1px
}

.kontakt .form-card {
    background: #FFF7ED;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 2px 2px 2px -2px #0c91840f 2px 6px 14px -2px #0c918417 2px 8px 48px -2px #0c91841c;
    position: relative
}

.kontakt .form-card::before {
    content: '';
    position: absolute;
    top: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #9a44f114, #0c918414);
    border-radius: 32px;
    pointer-events: none
}

.kontakt .form-title {
    font-size: 27px;
    line-height: 1.35;
    color: #1a1a1a;
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: -.01em
}

.kontakt .form-subtitle {
    font-size: 16px;
    line-height: 1.55;
    color: #4a4a4a;
    margin: 0 0 40px;
    letter-spacing: .01em
}

.kontakt .form-actual {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.kontakt .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.kontakt .field-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.kontakt .field-label {
    font-size: 16px;
    line-height: 1.35;
    color: #2a2a2a;
    font-weight: 600;
    letter-spacing: .01em
}

.kontakt .field-input {
    padding: 16px;
    border: 2px solid #9a44f126;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .36s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .36s cubic-bezier(0.34, 1.2, 0.64, 1);
    letter-spacing: .01em
}

.kontakt .field-input::placeholder {
    color: #5a5a5a;
    opacity: .55;
    font-style: italic
}

.kontakt .field-input:focus {
    outline: none;
    border-color: #9A44F1;
    box-shadow: inset 2px 2px 6px #9a44f114
}

.kontakt .field-input:hover:not(:focus) {
    border-color: #9a44f147
}

.kontakt .field-select {
    padding: 16px;
    border: 2px solid #0c918426;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .36s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .36s cubic-bezier(0.34, 1.2, 0.64, 1);
    cursor: pointer;
    letter-spacing: .01em;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%239A44F1' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px
}

.kontakt .field-select:focus {
    outline: none;
    border-color: #0C9184;
    box-shadow: inset 2px 2px 6px #0c918414
}

.kontakt .field-select:hover:not(:focus) {
    border-color: #0c918447
}

.kontakt .field-textarea {
    padding: 16px;
    border: 2px solid #9a44f126;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.55;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .36s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .36s cubic-bezier(0.34, 1.2, 0.64, 1);
    resize: vertical;
    min-height: 140px;
    letter-spacing: .01em
}

.kontakt .field-textarea::placeholder {
    color: #5a5a5a;
    opacity: .55;
    font-style: italic
}

.kontakt .field-textarea:focus {
    outline: none;
    border-color: #9A44F1;
    box-shadow: inset 2px 2px 6px #9a44f114
}

.kontakt .field-textarea:hover:not(:focus) {
    border-color: #9a44f147
}

.kontakt .privacy-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 16px;
    background: #fff9;
    border-radius: 5px;
    border: 1px solid #9a44f11a
}

.kontakt .privacy-check {
    width: 20px;
    height: 20px;
    border: 2px solid #9a44f14d;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .33s ease-in-out, background .33s ease-in-out;
    flex-shrink: 0;
    margin-top: 2px;
    appearance: none;
    position: relative
}

.kontakt .privacy-check:checked {
    background: #9A44F1;
    border-color: #9A44F1
}

.kontakt .privacy-check:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.kontakt .privacy-check:focus {
    outline: none;
    box-shadow: 0 0 0 3px #9a44f126
}

.kontakt .privacy-text {
    font-size: 16px;
    line-height: 1.55;
    color: #3a3a3a;
    margin: 0;
    letter-spacing: .01em
}

.kontakt .privacy-text a {
    color: #0C9184;
    text-decoration: none;
    transition: color .33s ease-in-out
}

.kontakt .privacy-text a:hover {
    color: #9A44F1
}

.kontakt .submit-btn {
    padding: 18px 40px;
    background: linear-gradient(135deg, #9A44F1, #0C9184);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    cursor: pointer;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    letter-spacing: .02em;
    align-self: flex-start
}

.kontakt .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.kontakt .submit-btn:active {
    transform: translateY(0);
    box-shadow: inset 2px 2px 8px #9a44f126
}

.kontakt .submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px #9a44f133 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117
}

.kontakt .submit-btn:invalid {
    animation: shake .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

@keyframes shake {

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

    25% {
        transform: translateX(-8px)
    }

    75% {
        transform: translateX(8px)
    }
}

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

    .kontakt .intro-split {
        flex-direction: column;
        gap: 40px
    }

    .kontakt .intro-text-zone {
        padding: 40px
    }

    .kontakt .intro-solution {
        font-size: 52px
    }

    .kontakt .form-container {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .kontakt .form-boundary {
        padding: 80px 24px
    }
}

@media (max-width: 768px) {
    .kontakt .intro-gradient {
        padding: 40px 24px
    }

    .kontakt .intro-text-zone {
        padding: 24px
    }

    .kontakt .intro-problem {
        font-size: 18px;
        margin: 0 0 24px
    }

    .kontakt .intro-solution {
        font-size: 27px
    }

    .kontakt .funnel-bar {
        height: 56px
    }

    .kontakt .funnel-label {
        font-size: 16px
    }

    .kontakt .form-boundary {
        padding: 40px 24px
    }

    .kontakt .form-card {
        padding: 24px
    }

    .kontakt .form-title {
        font-size: 21px
    }

    .kontakt .form-row {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .kontakt .submit-btn {
        width: 100%;
        padding: 18px 24px
    }
}

@media (max-width: 480px) {
    .kontakt .intro-gradient {
        padding: 40px 8px
    }

    .kontakt .intro-text-zone {
        padding: 24px
    }

    .kontakt .intro-problem {
        font-size: 16px;
        margin: 0 0 24px
    }

    .kontakt .intro-solution {
        font-size: 21px
    }

    .kontakt .intro-data-zone {
        padding: 8px
    }

    .kontakt .funnel-bar {
        height: 48px
    }

    .kontakt .funnel-label {
        font-size: 16px
    }

    .kontakt .form-boundary {
        padding: 40px 8px
    }

    .kontakt .form-card {
        padding: 24px
    }

    .kontakt .form-title {
        font-size: 21px
    }

    .kontakt .meta-group {
        padding: 24px
    }

    .kontakt .field-input,
    .kontakt .field-select,
    .kontakt .field-textarea {
        padding: 16px;
        font-size: 16px
    }
}

.success-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: linear-gradient(167deg, #f8f9fa 0%, #FFF7ED 45%, #fff 100%)
}

.success-page .confirmation-card {
    max-width: 680px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 80px 40px;
    text-align: center;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c;
    border: 1px solid #0c918414
}

.success-page .status-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 40px;
    background: linear-gradient(135deg, #9a44f114 0%, #0c918414 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.success-page .status-icon::before {
    content: '';
    width: 44px;
    height: 22px;
    border-left: 4px solid #0C9184;
    border-bottom: 4px solid #0C9184;
    transform: rotate(-45deg) translateY(-4px)
}

.success-page .confirmation-card h1 {
    font-size: 52px;
    line-height: 1.1;
    color: #1a1a2e;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.success-page .confirmation-card .message-text {
    font-size: 18px;
    line-height: 1.55;
    color: #4a4a5e;
    margin: 0 0 40px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}

.success-page .details-block {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 24px;
    margin: 0 0 40px;
    text-align: left;
    border: 1px solid #9a44f11a
}

.success-page .details-block .detail-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    gap: 24px
}

.success-page .details-block .detail-row:not(:last-child) {
    border-bottom: 1px solid #0c91841f
}

.success-page .details-block .detail-label {
    font-size: 16px;
    line-height: 1.55;
    color: #6a6a7e;
    flex-shrink: 0
}

.success-page .details-block .detail-value {
    font-size: 16px;
    line-height: 1.55;
    color: #2a2a3e;
    font-weight: 500;
    text-align: right
}

.success-page .action-buttons {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap
}

.success-page .btn-primary {
    background: linear-gradient(135deg, #9A44F1 0%, #7a2fc9 100%);
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
    padding: 18px 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117;
    transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s ease-in-out
}

.success-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 2px -2px #9a44f10f 2px 6px 14px -2px #9a44f117 2px 8px 48px -2px #9a44f11c
}

.success-page .btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 2px 2px 8px #7a2fc94d
}

.success-page .btn-secondary {
    background: transparent;
    color: #9A44F1;
    font-size: 16px;
    line-height: 1.35;
    padding: 14px 32px;
    border: 2px solid #9A44F1;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .42s ease-in-out, color .42s ease-in-out
}

.success-page .btn-secondary:hover {
    background: #9a44f10f
}

.success-page .btn-secondary:active {
    box-shadow: inset 2px 2px 6px #9a44f133
}

.success-page .info-note {
    font-size: 16px;
    line-height: 1.55;
    color: #6a6a7e;
    margin: 40px 0 0;
    font-style: italic;
    opacity: .6
}

@media (max-width: 768px) {
    .success-page .confirmation-card {
        padding: 40px 24px
    }

    .success-page .confirmation-card h1 {
        font-size: 27px;
        margin-bottom: 24px
    }

    .success-page .status-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 24px
    }

    .success-page .status-icon::before {
        width: 32px;
        height: 16px;
        border-left-width: 3px;
        border-bottom-width: 3px
    }

    .success-page .action-buttons {
        flex-direction: column;
        width: 100%
    }

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

    .success-page .details-block .detail-row {
        flex-direction: column;
        gap: 8px
    }

    .success-page .details-block .detail-value {
        text-align: left
    }
}

@media (max-width: 480px) {
    .success-page {
        padding: 24px 8px
    }

    .success-page .confirmation-card {
        padding: 40px 24px
    }
}