body {
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
background: #F3F5E9;
color: #2a2a2a;
font-size: 16px;
line-height: 1.6
}

.top-bar-box,
.bottom-bar-box,
.navigation-box,
.logo-holder-box,
.menu-list-box,
.footer-card-box,
.footer-links-box,
.footer-contact-box {
box-sizing: border-box
}

.top-bar-box {
background: linear-gradient(135deg, #9FC8EC 0%, #b8d9f3 100%);
padding: 24px 40px;
position: relative;
box-shadow: 1px 7px 20px 0 #4d13471a
}

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

.logo-holder-box {
background: #4D1347;
padding: 12px 24px;
border-radius: 12px;
box-shadow: 1px 1px 3px 0 #4d134712 1px 8px 52px 0 #4d13471c;
display: flex;
align-items: center;
justify-content: center;
min-height: 80px
}

.logo-visual {
width: 140px;
height: 80px;
object-fit: contain
}

.menu-list-box {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
align-items: center
}

.menu-list-box li {
margin: 0
}

.menu-list-box a {
display: block;
padding: 12px 24px;
background: #fff;
color: #4D1347;
text-decoration: none;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
transition: background .42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .42s cubic-bezier(0.16, 1, 0.3, 1), transform .38s ease-in-out;
box-shadow: 1px 1px 3px 0 #4d134712
}

.menu-list-box a:hover {
background: #4D1347;
color: #fff;
box-shadow: 1px 7px 20px 0 #4d13471a;
transform: translateY(-2px)
}

.menu-list-box a:focus {
outline: none;
box-shadow: 0 0 0 4px #9fc8ec99
}

.menu-list-box a:active {
transform: translateY(0)
}

.region-indicator {
font-size: 15px;
color: #4D1347;
font-weight: 700;
padding: 8px 12px;
background: #ffffffb3;
border-radius: 20px;
white-space: nowrap
}

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

.navigation-box {
justify-content: center;
gap: 24px
}

.logo-holder-box {
width: 100%;
justify-content: center
}

.menu-list-box {
justify-content: center;
width: 100%
}

.region-indicator {
width: 100%;
text-align: center
}
}

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

.navigation-box {
gap: 12px
}

.logo-visual {
width: 100px;
height: 60px
}

.logo-holder-box {
min-height: 60px;
padding: 8px 12px
}

.menu-list-box {
gap: 4px
}

.menu-list-box a {
padding: 8px 12px;
font-size: 15px
}
}

@media (max-width: 480px) {
.menu-list-box a {
padding: 8px;
font-size: 15px
}
}

.bottom-bar-box {
background: #4D1347;
padding: 80px 40px;
position: relative
}

.bottom-bar-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg, #9FC8EC 0%, #4D1347 50%, #9FC8EC 100%)
}

.footer-card-box {
max-width: 1500px;
margin: 0 auto;
background: #f3f5e90d;
padding: 40px;
border-radius: 20px;
box-shadow: 1px 8px 52px 0 #9fc8ec1c;
border: 2px solid #9fc8ec33
}

.footer-logo-divider {
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #9FC8EC 50%, transparent 100%);
margin: 0 0 40px
}

.footer-logo-holder {
display: flex;
justify-content: center;
margin-bottom: 40px
}

.footer-logo-holder img {
width: 120px;
height: 70px;
object-fit: contain;
padding: 12px;
background: #ffffff1a;
border-radius: 12px;
box-shadow: 1px 1px 3px 0 #9fc8ec12
}

.footer-links-box {
margin-bottom: 40px
}

.footer-links-box ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px
}

.footer-links-box li {
margin: 0
}

.footer-links-box a {
color: #9FC8EC;
text-decoration: none;
font-size: 15px;
font-weight: 400;
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: border-color .45s cubic-bezier(0.16, 1, 0.3, 1), color .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.footer-links-box a:hover {
border-bottom-color: #9FC8EC;
color: #F3F5E9
}

.footer-links-box a:focus {
outline: none;
box-shadow: 0 0 0 3px #9fc8ec80;
border-radius: 4px
}

.footer-contact-box {
text-align: center;
margin-bottom: 40px
}

.contact-detail-row {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
margin-bottom: 24px
}

.contact-item {
color: #F3F5E9;
font-size: 15px;
line-height: 1.4;
display: flex;
align-items: center;
gap: 8px
}

.contact-item a {
color: #9FC8EC;
text-decoration: none;
transition: color .4s ease-in-out
}

.contact-item a:hover {
color: #F3F5E9
}

.contact-item a:focus {
outline: none;
box-shadow: 0 0 0 3px #9fc8ec80;
border-radius: 4px
}

.contact-icon {
width: 20px;
height: 20px;
display: inline-block;
position: relative
}

.contact-icon svg {
width: 100%;
height: 100%;
fill: #9FC8EC
}

.address-full {
color: #F3F5E9;
font-size: 15px;
line-height: 1.4;
font-style: normal
}

.copyright-notice {
text-align: center;
color: #f3f5e9b3;
font-size: 15px;
padding-top: 24px;
border-top: 1px solid #9fc8ec33
}

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

.footer-card-box {
padding: 24px
}

.footer-links-box ul {
flex-direction: column;
align-items: center;
gap: 12px
}
}

@media (max-width: 480px) {
.bottom-bar-box {
padding: 40px 12px
}

.footer-card-box {
padding: 12px
}

.contact-detail-row {
gap: 8px
}
}

.consent-bar-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 24px 40px;
box-shadow: 1px 8px 52px 0 #4d13471c;
z-index: 1200;
border-top: 4px solid #9FC8EC;
display: none;
opacity: 0;
transform: translateY(20px);
transition: opacity .22s ease-in-out, transform .22s ease-in-out
}

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

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

.consent-text-box {
flex: 1;
min-width: 280px
}

.consent-description {
font-size: 15px;
line-height: 1.4;
color: #2a2a2a;
margin: 0 0 8px
}

.consent-data-list {
font-size: 15px;
line-height: 1.4;
color: #555;
margin: 0;
padding-left: 24px
}

.consent-data-list li {
margin-bottom: 4px
}

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

.consent-button {
padding: 12px 24px;
background: #4D1347;
color: #fff;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
transition: background .38s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .38s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 1px 1px 3px 0 #4d134712
}

.consent-button:hover {
background: #9FC8EC;
color: #4D1347;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.consent-button:focus {
outline: none;
box-shadow: 0 0 0 4px #9fc8ec99
}

.consent-settings-toggle {
background: transparent;
color: #4D1347;
text-decoration: underline;
border: none;
padding: 8px 12px;
font-size: 15px;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
transition: color .4s ease-in-out
}

.consent-settings-toggle:hover {
color: #9FC8EC
}

.consent-settings-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px #9fc8ec80;
border-radius: 4px
}

.consent-settings-panel {
display: none;
margin-top: 24px;
padding-top: 24px;
border-top: 2px solid #9FC8EC;
width: 100%
}

.consent-settings-panel.active {
display: block
}

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

.consent-option-row label {
font-size: 15px;
color: #2a2a2a;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px
}

.consent-option-row input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer
}

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

.consent-inner-box {
flex-direction: column;
gap: 24px
}

.consent-actions-box {
width: 100%;
justify-content: center
}
}

@media (max-width: 480px) {
.consent-bar-box {
padding: 12px
}

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

.consent-button,
.consent-settings-toggle {
width: 100%
}
}

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

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

.policy-container h1 {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 40px;
font-weight: 700
}

.policy-container h2 {
font-size: 34px;
line-height: 1.4;
color: #4D1347;
margin: 80px 0 24px;
font-weight: 700
}

.policy-container h3 {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 40px 0 24px;
font-weight: 600
}

.policy-container h4 {
font-size: 20px;
line-height: 1.4;
color: #4D1347;
margin: 40px 0 12px;
font-weight: 600
}

.policy-container h5 {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 24px 0 12px;
font-weight: 600
}

.policy-container h6 {
font-size: 15px;
line-height: 1.6;
color: #4D1347;
margin: 24px 0 12px;
font-weight: 600
}

.policy-container p {
font-size: 16px;
line-height: 1.9;
color: #1a1a1a;
margin: 0 0 24px
}

.policy-container ul {
font-size: 16px;
line-height: 1.9;
color: #1a1a1a;
margin: 0 0 24px;
padding: 0 0 0 24px
}

.policy-container ol {
font-size: 16px;
line-height: 1.9;
color: #1a1a1a;
margin: 0 0 24px;
padding: 0 0 0 24px
}

.policy-container li {
margin: 0 0 12px
}

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

.policy-container strong {
font-weight: 700;
color: #4D1347
}

.policy-container b {
font-weight: 700;
color: #4D1347
}

.policy-container em {
font-style: italic
}

.policy-container i {
font-style: italic
}

.policy-container a {
color: #4D1347;
text-decoration: underline;
transition: color .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.policy-container a:hover {
color: #9FC8EC
}

.policy-container a:focus {
outline: 2px solid #9FC8EC;
outline-offset: 2px
}

.policy-container hr {
border: none;
height: 1px;
background: #4d134726;
margin: 80px 0
}

@media (max-width: 1024px) {
.policy-container h1 {
font-size: 34px;
margin-bottom: 24px
}

.policy-container h2 {
font-size: 24px;
margin-top: 40px
}

.policy-container h3 {
font-size: 20px
}

.policy-container hr {
margin: 40px 0
}
}

@media (max-width: 480px) {
.policy-container h1 {
font-size: 24px
}

.policy-container h2 {
font-size: 20px
}

.policy-container h3 {
font-size: 16px
}

.policy-container p {
font-size: 15px
}

.policy-container ul {
font-size: 15px;
padding-left: 20px
}

.policy-container ol {
font-size: 15px;
padding-left: 20px
}
}

.learning-program-detail {
background: #F3F5E9;
color: #4D1347;
line-height: 1.6
}

.learning-program-detail .intro-gradient {
background: linear-gradient(253deg, #9FC8EC 0%, #F3F5E9 45%, #9fc8ec4d 100%);
padding: 120px 24px 80px;
position: relative;
overflow: hidden
}

.learning-program-detail .intro-gradient::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 60px;
background: #F3F5E9;
clip-path: path('M0,30 Q150,0 300,20 T600,30 T900,20 T1200,30 T1500,20 L1500,60 L0,60 Z')
}

.learning-program-detail .intro-content {
max-width: 1500px;
margin: 0 auto;
text-align: left
}

.learning-program-detail .intro-heading {
font-size: 64px;
line-height: 1.2;
margin: 0 0 40px;
text-transform: uppercase;
letter-spacing: -.5px;
animation: fadeInDown .45s cubic-bezier(0.16, 1, 0.3, 1)
}

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

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

.learning-program-detail .intro-theses {
font-size: 20px;
line-height: 1.9;
max-width: 800px;
margin: 0;
animation: fadeIn .55s cubic-bezier(0.16, 1, 0.3, 1) .2s both
}

@keyframes fadeIn {
from {
opacity: 0
}

to {
opacity: 1
}
}

.learning-program-detail .intro-theses p {
margin: 0 0 24px
}

.learning-program-detail .intro-theses p:last-child {
margin-bottom: 0
}

.learning-program-detail .enrollment-panel {
background: #fff;
padding: 80px 24px;
position: relative
}

.learning-program-detail .enrollment-wrapper {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
align-items: start
}

.learning-program-detail .enrollment-visual {
grid-column: 1 / 3;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 8px 52px 0 #4d13471c
}

.learning-program-detail .enrollment-visual img {
width: 100%;
height: 600px;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.learning-program-detail .enrollment-visual:hover img {
transform: scale(1.05)
}

.learning-program-detail .enrollment-details {
background: linear-gradient(253deg, #9fc8ec26 0%, #f3f5e9cc 70%);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(8px);
box-shadow: 1px 7px 20px 0 #4d13471a;
position: relative
}

.learning-program-detail .enrollment-details::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #9FC8EC;
border-radius: 4px 0 0 4px
}

.learning-program-detail .price-display {
font-size: 48px;
line-height: 1.2;
margin: 0 0 12px;
color: #4D1347;
font-weight: 700
}

.learning-program-detail .price-context {
font-size: 16px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 24px;
opacity: .8
}

.learning-program-detail .detail-row {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 24px
}

.learning-program-detail .detail-row:last-of-type {
margin-bottom: 40px
}

.learning-program-detail .detail-marker {
width: 12px;
height: 12px;
background: #9FC8EC;
border-radius: 999px;
flex-shrink: 0
}

.learning-program-detail .detail-text {
font-size: 16px;
line-height: 1.4;
margin: 0
}

.learning-program-detail .detail-label {
font-size: 15px;
opacity: .7;
margin: 0 8px 0 0
}

.learning-program-detail .detail-value {
font-size: 16px;
font-weight: 600
}

.learning-program-detail .enrollment-action {
background: #9FC8EC;
color: #4D1347;
border: none;
padding: 20px 40px;
font-size: 20px;
border-radius: 12px;
cursor: pointer;
width: 100%;
transition: background .4s cubic-bezier(0.16, 1, 0.3, 1), transform .35s ease-in-out;
box-shadow: 1px 7px 20px 0 #9fc8ec1a;
display: flex;
align-items: center;
justify-content: center;
gap: 12px
}

.learning-program-detail .enrollment-action:hover {
background: #7FB4DC;
transform: translateY(-2px);
box-shadow: 1px 8px 52px 0 #9fc8ec1c
}

.learning-program-detail .enrollment-action:active {
transform: translateY(0)
}

.learning-program-detail .enrollment-action svg {
width: 20px;
height: 20px;
fill: #4D1347
}

.learning-program-detail .seats-warning {
margin: 24px 0 0;
padding: 12px;
background: #4d13470d;
border-radius: 12px;
font-size: 15px;
line-height: 1.4;
text-align: center;
animation: attention-shake .5s ease-in-out 2s
}

@keyframes attention-shake {

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

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

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

.learning-program-detail .curriculum-section {
background: #fff;
padding: 80px 24px;
position: relative
}

.learning-program-detail .curriculum-section::before {
content: '';
position: absolute;
top: 0;
right: 40px;
width: 120px;
height: 3px;
background: #9FC8EC;
border-radius: 4px
}

.learning-program-detail .curriculum-container {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 400px 1fr;
gap: 80px;
align-items: start
}

.learning-program-detail .curriculum-intro {
position: sticky;
top: 40px
}

.learning-program-detail .curriculum-heading {
font-size: 34px;
line-height: 1.2;
margin: 0 0 24px;
color: #4D1347
}

.learning-program-detail .curriculum-summary {
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #4D1347;
opacity: .85
}

.learning-program-detail .curriculum-content {
position: relative
}

.learning-program-detail .curriculum-content::before {
content: '';
position: absolute;
left: 16px;
top: 40px;
bottom: 40px;
width: 2px;
background: linear-gradient(180deg, #9FC8EC 0%, #9fc8ec4d 100%)
}

.learning-program-detail .curriculum-content h2 {
font-size: 24px;
line-height: 1.4;
margin: 0 0 24px;
padding-left: 56px;
position: relative;
counter-increment: step-counter
}

.learning-program-detail .curriculum-content h2::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: #9FC8EC;
color: #4D1347;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
box-shadow: 1px 1px 3px 0 #4d134712
}

.learning-program-detail .curriculum-content {
counter-reset: step-counter
}

.learning-program-detail .curriculum-content p {
font-size: 16px;
line-height: 1.6;
margin: 0 0 40px 56px;
color: #4D1347
}

.learning-program-detail .curriculum-content ul {
margin: 0 0 40px 56px;
padding: 0;
list-style: none
}

.learning-program-detail .curriculum-content li {
font-size: 16px;
line-height: 1.6;
margin: 0 0 12px;
padding-left: 24px;
position: relative;
border-left: 3px solid #9FC8EC;
padding-left: 20px
}

.learning-program-detail .curriculum-content li:last-child {
margin-bottom: 40px
}

.learning-program-detail .curriculum-content blockquote {
margin: 0 0 40px 56px;
padding: 24px;
background: #9fc8ec1a;
border-radius: 12px;
border-left: 4px solid #9FC8EC;
font-size: 16px;
line-height: 1.6;
font-style: italic
}

.learning-program-detail .curriculum-content details {
margin: 0 0 24px 56px;
padding: 24px;
background: #F3F5E9;
border-radius: 12px;
border: 2px solid #9FC8EC
}

.learning-program-detail .curriculum-content summary {
font-size: 16px;
font-weight: 600;
cursor: pointer;
list-style: none;
color: #4D1347;
transition: color .35s ease-in-out
}

.learning-program-detail .curriculum-content summary:hover {
color: #9FC8EC
}

.learning-program-detail .curriculum-content summary::marker {
display: none
}

.learning-program-detail .curriculum-content details[open] summary {
margin-bottom: 12px
}

.learning-program-detail .curriculum-content small {
font-size: 15px;
opacity: .7
}

.learning-program-detail .curriculum-content abbr {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #9FC8EC;
cursor: help
}

.learning-program-detail .extended-description {
background: #4D1347;
color: #F3F5E9;
padding: 80px 24px;
position: relative
}

.learning-program-detail .extended-description::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #9FC8EC 50%, transparent 100%)
}

.learning-program-detail .extended-wrapper {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px
}

.learning-program-detail .extended-major {
grid-column: 1 / 4;
text-align: right
}

.learning-program-detail .extended-major-heading {
font-size: 48px;
line-height: 1.2;
margin: 0 0 40px;
text-transform: uppercase
}

.learning-program-detail .extended-major h3 {
font-size: 24px;
line-height: 1.4;
margin: 0 0 24px;
color: #9FC8EC
}

.learning-program-detail .extended-major p {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px
}

.learning-program-detail .extended-major p:last-child {
margin-bottom: 0
}

.learning-program-detail .extended-major ul {
list-style: none;
margin: 0 0 40px;
padding: 0;
text-align: right
}

.learning-program-detail .extended-major li {
font-size: 16px;
line-height: 1.6;
margin: 0 0 12px;
padding-right: 24px;
border-right: 3px solid #9FC8EC;
position: relative
}

.learning-program-detail .extended-major li:last-child {
margin-bottom: 0
}

.learning-program-detail .extended-major dl {
margin: 0 0 40px;
text-align: right
}

.learning-program-detail .extended-major dt {
font-size: 15px;
font-weight: 600;
margin: 0 0 8px;
color: #9FC8EC
}

.learning-program-detail .extended-major dd {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px
}

.learning-program-detail .extended-major blockquote {
margin: 0 0 40px;
padding: 24px;
background: #9fc8ec1a;
border-radius: 12px;
border-right: 4px solid #9FC8EC;
font-size: 16px;
line-height: 1.6;
font-style: italic
}

.learning-program-detail .extended-major figure {
margin: 0 0 40px
}

.learning-program-detail .extended-major figcaption {
font-size: 15px;
margin-top: 12px;
opacity: .8
}

.learning-program-detail .extended-major cite {
font-style: italic;
color: #9FC8EC
}

.learning-program-detail .extended-minor {
background: #f3f5e90d;
border-radius: 20px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px
}

.learning-program-detail .extended-minor-item {
text-align: center
}

.learning-program-detail .extended-minor-number {
font-size: 64px;
line-height: 1.2;
margin: 0 0 8px;
color: #9FC8EC;
font-weight: 700
}

.learning-program-detail .extended-minor-label {
font-size: 15px;
line-height: 1.4;
margin: 0;
opacity: .8
}

@media (max-width: 1024px) {
.learning-program-detail .intro-gradient {
padding: 80px 24px 60px
}

.learning-program-detail .intro-heading {
font-size: 48px
}

.learning-program-detail .enrollment-wrapper {
grid-template-columns: 1fr;
gap: 40px
}

.learning-program-detail .enrollment-visual {
grid-column: 1
}

.learning-program-detail .enrollment-visual img {
height: 400px
}

.learning-program-detail .curriculum-container {
grid-template-columns: 1fr;
gap: 40px
}

.learning-program-detail .curriculum-intro {
position: static
}

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

.learning-program-detail .extended-major {
grid-column: 1;
text-align: left
}

.learning-program-detail .extended-major-heading {
font-size: 34px
}

.learning-program-detail .extended-major ul {
text-align: left
}

.learning-program-detail .extended-major li {
padding-right: 0;
padding-left: 24px;
border-right: none;
border-left: 3px solid #9FC8EC
}

.learning-program-detail .extended-major dl {
text-align: left
}

.learning-program-detail .extended-major blockquote {
border-right: none;
border-left: 4px solid #9FC8EC
}
}

@media (max-width: 768px) {
.learning-program-detail .intro-gradient {
padding: 60px 24px 40px
}

.learning-program-detail .intro-heading {
font-size: 34px
}

.learning-program-detail .intro-theses {
font-size: 16px
}

.learning-program-detail .enrollment-panel {
padding: 40px 24px
}

.learning-program-detail .enrollment-visual img {
height: 300px
}

.learning-program-detail .enrollment-details {
padding: 24px
}

.learning-program-detail .price-display {
font-size: 34px
}

.learning-program-detail .curriculum-section {
padding: 40px 24px
}

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

.learning-program-detail .curriculum-content h2 {
font-size: 20px
}

.learning-program-detail .extended-description {
padding: 40px 24px
}

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

.learning-program-detail .extended-minor-number {
font-size: 48px
}
}

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

.learning-program-detail .intro-theses {
font-size: 15px
}

.learning-program-detail .price-display {
font-size: 24px
}

.learning-program-detail .enrollment-action {
padding: 20px 24px;
font-size: 16px
}

.learning-program-detail .curriculum-content h2 {
padding-left: 0
}

.learning-program-detail .curriculum-content h2::before {
position: static;
display: inline-block;
margin-right: 12px;
width: 32px;
height: 32px;
font-size: 16px
}

.learning-program-detail .curriculum-content::before {
display: none
}

.learning-program-detail .curriculum-content p,
.learning-program-detail .curriculum-content ul,
.learning-program-detail .curriculum-content blockquote,
.learning-program-detail .curriculum-content details {
margin-left: 0
}

.learning-program-detail .extended-minor-number {
font-size: 34px
}
}

.learning-program-detail .numbered-paragraph {
counter-increment: paragraph-counter;
position: relative;
padding-left: 40px
}

.learning-program-detail .numbered-paragraph::before {
content: counter(paragraph-counter) ".";
position: absolute;
left: 0;
font-weight: 600;
color: #9FC8EC
}

.learning-program-detail .extended-major {
counter-reset: paragraph-counter
}

.learning-program {
background: #F3F5E9;
min-height: 100vh;
padding: 0;
margin: 0;
overflow-x: hidden
}

.learning-program .title-area {
background: linear-gradient(253deg, #9FC8EC 0%, #4D1347 68%, #F3F5E9 100%);
padding: 80px 24px;
position: relative;
animation: fadeInBlur .55s cubic-bezier(0.16, 1, 0.3, 1)
}

@keyframes fadeInBlur {
from {
opacity: 0;
filter: blur(8px)
}

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

.learning-program .title-area::before {
content: '';
position: absolute;
top: 40px;
right: 80px;
width: 120px;
height: 120px;
border: 2px solid #f3f5e926;
border-radius: 50%;
pointer-events: none
}

.learning-program .title-area::after {
content: '';
position: absolute;
bottom: 60px;
left: 100px;
width: 80px;
height: 80px;
background: #f3f5e914;
transform: rotate(45deg);
pointer-events: none
}

.learning-program .title-content {
max-width: 1500px;
margin: 0 auto;
position: relative;
z-index: 1
}

.learning-program .title-main {
font-size: 64px;
line-height: 1.2;
color: #F3F5E9;
margin: 0 0 24px;
text-transform: uppercase;
letter-spacing: 0
}

.learning-program .title-description {
font-size: 20px;
line-height: 1.6;
color: #F3F5E9;
margin: 0 0 40px;
max-width: 700px
}

.learning-program .title-link {
display: inline-block;
padding: 12px 40px;
background: #F3F5E9;
color: #4D1347;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease-in-out;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.learning-program .title-link:hover {
transform: translateY(-2px);
box-shadow: 1px 8px 52px 0 #4d13471c
}

.learning-program .programs-section {
padding: 80px 24px;
background: #fff;
position: relative
}

.learning-program .programs-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: repeating-linear-gradient(to right, #9FC8EC 0px, #9FC8EC 12px, transparent 12px, transparent 24px)
}

.learning-program .programs-container {
max-width: 1500px;
margin: 0 auto
}

.learning-program .programs-heading {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 12px;
text-align: right
}

.learning-program .programs-intro {
font-size: 16px;
line-height: 1.6;
color: #2a2a2a;
margin: 0 0 80px;
text-align: right;
max-width: 650px;
margin-left: auto
}

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

.learning-program .program-card {
background: linear-gradient(253deg, #9FC8EC 0%, #F3F5E9 35%);
border-radius: 12px;
padding: 24px;
box-shadow: 1px 7px 20px 0 #9fc8ec1a;
transition: transform .4s ease-in-out, box-shadow .4s ease-in-out;
position: relative;
overflow: hidden;
animation: fadeInBlur .5s cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: backwards
}

.learning-program .program-card:nth-child(1) {
animation-delay: .1s
}

.learning-program .program-card:nth-child(2) {
animation-delay: .2s
}

.learning-program .program-card:nth-child(3) {
animation-delay: .3s
}

.learning-program .program-card:nth-child(4) {
animation-delay: .4s
}

.learning-program .program-card:hover {
transform: translateY(-8px);
box-shadow: 1px 8px 52px 0 #9fc8ec1c
}

.learning-program .program-card::before {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 0 solid transparent;
border-top: 16px solid #4d134726;
pointer-events: none
}

.learning-program .program-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
margin: 0 0 24px;
border: 3px solid #fff;
transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.learning-program .program-card:hover .program-image {
transform: scale(1.05)
}

.learning-program .program-meta {
display: flex;
gap: 12px;
margin: 0 0 12px;
flex-wrap: wrap
}

.learning-program .program-badge {
font-size: 15px;
color: #4D1347;
background: #ffffffb3;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid #4D1347
}

.learning-program .program-title {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 12px;
font-weight: 700
}

.learning-program .program-description {
font-size: 16px;
line-height: 1.6;
color: #2a2a2a;
margin: 0 0 24px
}

.learning-program .program-details {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 24px;
padding: 12px;
background: #ffffff80;
border-radius: 4px;
border-left: 4px solid #4D1347
}

.learning-program .program-detail-item {
font-size: 15px;
line-height: 1.4;
color: #2a2a2a;
display: flex;
justify-content: space-between
}

.learning-program .program-detail-label {
font-weight: 700;
color: #4D1347
}

.learning-program .program-price {
font-size: 34px;
line-height: 1.2;
color: #4D1347;
font-weight: 700;
margin: 0 0 8px
}

.learning-program .program-price-description {
font-size: 15px;
line-height: 1.4;
color: #2a2a2a;
margin: 0 0 24px
}

.learning-program .program-link {
display: inline-block;
padding: 12px 40px;
background: #4D1347;
color: #F3F5E9;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
transition: background .35s ease-in-out, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 1px 1px 3px 0 #4d134712
}

.learning-program .program-link:hover {
background: #6b1d63;
transform: translateX(4px)
}

.learning-program .structured-info {
padding: 80px 24px;
background: #fff;
position: relative
}

.learning-program .structured-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: repeating-linear-gradient(to right, #4D1347 0px, #4D1347 12px, transparent 12px, transparent 24px)
}

.learning-program .structured-container {
max-width: 1500px;
margin: 0 auto
}

.learning-program .structured-heading {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 40px
}

.learning-program .structured-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px
}

.learning-program .structured-text {
display: flex;
flex-direction: column;
gap: 24px
}

.learning-program .structured-paragraph {
font-size: 16px;
line-height: 1.6;
color: #2a2a2a;
margin: 0;
padding-left: 40px;
position: relative
}

.learning-program .structured-paragraph::before {
content: '1';
position: absolute;
left: 0;
top: 0;
font-size: 24px;
font-weight: 700;
color: #9FC8EC
}

.learning-program .structured-paragraph:nth-child(2)::before {
content: '2'
}

.learning-program .structured-paragraph:nth-child(3)::before {
content: '3'
}

.learning-program .structured-indicators {
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center
}

.learning-program .indicator-row {
display: flex;
gap: 24px;
align-items: center
}

.learning-program .indicator-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(253deg, #9FC8EC 0%, #4D1347 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: #F3F5E9;
box-shadow: 1px 7px 20px 0 #9fc8ec1a;
transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
border: 4px solid #fff;
flex-shrink: 0
}

.learning-program .indicator-circle:hover {
transform: rotate(360deg) scale(1.1)
}

.learning-program .indicator-label {
font-size: 16px;
line-height: 1.4;
color: #2a2a2a
}

.learning-program .visual-accent {
padding: 80px 24px;
background: linear-gradient(90deg, #9FC8EC 0%, #F3F5E9 100%);
position: relative
}

.learning-program .visual-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: repeating-linear-gradient(to right, #4D1347 0px, #4D1347 12px, transparent 12px, transparent 24px)
}

.learning-program .visual-container {
max-width: 1500px;
margin: 0 auto
}

.learning-program .visual-heading {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 12px
}

.learning-program .visual-subheading {
font-size: 24px;
line-height: 1.4;
color: #2a2a2a;
margin: 0 0 40px
}

.learning-program .visual-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 24px
}

.learning-program .visual-list-item {
font-size: 16px;
line-height: 1.6;
color: #2a2a2a;
padding: 12px 12px 12px 24px;
background: #fff9;
border-left: 4px solid #4D1347;
border-radius: 4px;
transition: transform .4s ease-in-out, border-left-width .4s ease-in-out
}

.learning-program .visual-list-item:hover {
transform: translateX(8px);
border-left-width: 8px
}

.learning-program .double-border-block {
padding: 40px;
margin: 40px 0 0;
background: #fff;
border: 2px solid #9FC8EC;
box-shadow: 0 0 0 6px #ffffff, 0 0 0 8px #4D1347;
border-radius: 12px
}

.learning-program .double-border-text {
font-size: 20px;
line-height: 1.6;
color: #2a2a2a;
margin: 0;
text-align: center
}

.learning-program .double-border-text .accent-word {
color: #4D1347;
position: relative;
display: inline-block;
font-weight: 700
}

.learning-program .double-border-text .accent-word::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: #9FC8EC
}

@media (max-width: 1024px) {
.learning-program .title-main {
font-size: 48px
}

.learning-program .programs-heading,
.learning-program .structured-heading,
.learning-program .visual-heading {
font-size: 34px
}

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

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

@media (max-width: 768px) {
.learning-program .title-area {
padding: 40px 12px
}

.learning-program .programs-section,
.learning-program .structured-info,
.learning-program .visual-accent {
padding: 40px 12px
}

.learning-program .title-main {
font-size: 34px
}

.learning-program .programs-heading,
.learning-program .structured-heading,
.learning-program .visual-heading {
font-size: 24px
}

.learning-program .program-price {
font-size: 24px
}

.learning-program .indicator-circle {
width: 60px;
height: 60px;
font-size: 20px
}

.learning-program .double-border-block {
padding: 24px
}
}

@media (max-width: 480px) {
.learning-program .title-main {
font-size: 24px
}

.learning-program .programs-heading,
.learning-program .structured-heading,
.learning-program .visual-heading {
font-size: 20px
}

.learning-program .title-description,
.learning-program .programs-intro,
.learning-program .program-description,
.learning-program .structured-paragraph,
.learning-program .visual-list-item,
.learning-program .double-border-text {
font-size: 15px
}
}

.portal {
background: #F3F5E9;
color: #4D1347;
overflow-x: clip
}

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

.portal .opening-view {
position: relative;
padding: 160px 24px 80px;
max-width: 1500px;
margin: 0 auto;
background: radial-gradient(ellipse at center, #9fc8ec47, #f3f5e9f2 68%);
overflow: visible
}

.portal .opening-view::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, #9fc8ec66, transparent 70%);
pointer-events: none
}

.portal .opening-image-container {
position: relative;
max-width: 680px;
margin: 0 auto 40px;
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.portal .opening-image-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(to top, #4d1347b8, transparent);
pointer-events: none
}

.portal .opening-image-container::before {
content: '';
position: absolute;
bottom: 12px;
right: 12px;
width: 80px;
height: 80px;
background: #9fc8ec4d;
border-radius: 50%;
z-index: 1
}

.portal .opening-image {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
transition: transform .48s cubic-bezier(0.16, 1, 0.3, 1)
}

.portal .opening-image-container:hover .opening-image {
transform: scale(1.06)
}

.portal .opening-headline {
font-size: 48px;
line-height: 1.2;
text-align: center;
margin: 0 0 24px;
position: relative;
z-index: 2;
font-weight: 600
}

@media (min-width: 768px) {
.portal .opening-view {
padding: 200px 40px 100px
}

.portal .opening-image {
height: 560px
}

.portal .opening-headline {
font-size: 64px
}
}

.portal .value-segment {
max-width: 780px;
margin: 0 auto;
padding: 80px 24px;
position: relative
}

.portal .value-segment::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 1px;
background: repeating-linear-gradient(to right, #9FC8EC 0, #9FC8EC 8px, transparent 8px, transparent 16px)
}

.portal .value-segment::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #9FC8EC;
border-radius: 50%
}

.portal .numbered-text {
counter-reset: paragraph-counter
}

.portal .numbered-text p {
position: relative;
padding-left: 44px;
margin: 0 0 24px;
font-size: 16px;
line-height: 1.6;
counter-increment: paragraph-counter
}

.portal .numbered-text p::before {
content: counter(paragraph-counter);
position: absolute;
left: 0;
top: 0;
font-size: 20px;
font-weight: 600;
color: #9FC8EC
}

.portal .value-heading {
font-size: 34px;
line-height: 1.4;
margin: 0 0 40px;
font-weight: 600
}

.portal .distinction-zone {
background: #fff;
padding: 80px 24px;
position: relative
}

.portal .distinction-zone::before {
content: '';
position: absolute;
top: 24px;
right: 24px;
width: 16px;
height: 16px;
background: #9FC8EC;
border-radius: 50%
}

.portal .distinction-zone::after {
content: '';
position: absolute;
top: 52px;
right: 52px;
width: 8px;
height: 8px;
background: #4d13474d;
border-radius: 50%
}

.portal .distinction-inner {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start
}

.portal .distinction-text-side {
max-width: 680px
}

.portal .distinction-title {
font-size: 34px;
line-height: 1.4;
margin: 0 0 24px;
font-weight: 600
}

.portal .distinction-description {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px
}

.portal .distinction-description:last-child {
margin-bottom: 0
}

.portal .distinction-image-side {
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 7px 20px 0 #9fc8ec1a
}

.portal .distinction-visual {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
transition: transform .52s ease-in-out
}

.portal .distinction-image-side:hover .distinction-visual {
transform: scale(1.08)
}

@media (min-width: 1024px) {
.portal .distinction-inner {
grid-template-columns: 1fr 1fr;
gap: 80px
}

.portal .distinction-visual {
height: 520px
}
}

.portal .experience-narrative {
max-width: 780px;
margin: 0 auto;
padding: 80px 24px;
text-align: right
}

.portal .experience-label {
font-size: 24px;
line-height: 1.4;
margin: 0 0 24px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px
}

.portal .experience-story {
font-size: 16px;
line-height: 1.9;
margin: 0 0 24px;
text-align: right
}

.portal .experience-story:last-of-type {
margin-bottom: 0
}

.portal .experience-accent {
display: inline-block;
color: #9FC8EC;
border-bottom: 2px solid #9FC8EC;
padding-bottom: 2px
}

.portal .currency-showcase {
background: linear-gradient(253deg, #9fc8ec26, #f3f5e9eb 68%);
padding: 80px 24px;
position: relative
}

.portal .currency-container {
max-width: 1500px;
margin: 0 auto
}

.portal .currency-intro {
max-width: 680px;
margin: 0 0 40px
}

.portal .currency-question {
font-size: 34px;
line-height: 1.4;
margin: 0 0 24px;
font-weight: 600
}

.portal .currency-answer {
font-size: 16px;
line-height: 1.6;
margin: 0
}

.portal .currency-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px
}

.portal .currency-card {
background: #fff;
padding: 24px;
border-radius: 12px;
border-left: 4px solid #9FC8EC;
box-shadow: 1px 1px 3px 0 #4d134712;
transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .42s cubic-bezier(0.16, 1, 0.3, 1);
animation: flipReveal .55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
transform-style: preserve-3d
}

.portal .currency-card:nth-child(1) {
animation-delay: .1s
}

.portal .currency-card:nth-child(2) {
animation-delay: .25s
}

.portal .currency-card:nth-child(3) {
animation-delay: .4s
}

.portal .currency-card:hover {
transform: translateY(-4px);
box-shadow: 1px 8px 52px 0 #4d13471c
}

@keyframes flipReveal {
from {
opacity: 0;
transform: perspective(800px) rotateY(-85deg)
}

to {
opacity: 1;
transform: perspective(800px) rotateY(0deg)
}
}

.portal .currency-card-title {
font-size: 20px;
line-height: 1.4;
margin: 0 0 12px;
font-weight: 600;
color: #4D1347
}

.portal .currency-card-detail {
font-size: 15px;
line-height: 1.6;
margin: 0;
color: #4D1347
}

@media (min-width: 768px) {
.portal .currency-grid {
grid-template-columns: repeat(3, 1fr)
}
}

.portal .outcome-display {
background: #fff;
padding: 80px 24px;
position: relative
}

.portal .outcome-display::before {
content: '';
position: absolute;
bottom: 40px;
left: 40px;
width: 20px;
height: 20px;
background: #9fc8ec66;
border-radius: 50%
}

.portal .outcome-display::after {
content: '';
position: absolute;
bottom: 68px;
left: 68px;
width: 10px;
height: 10px;
background: #4d134733;
border-radius: 50%
}

.portal .outcome-wrapper {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center
}

.portal .outcome-visual-area {
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 7px 20px 0 #9fc8ec1a
}

.portal .outcome-photo {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
transition: transform .45s ease-in-out
}

.portal .outcome-visual-area:hover .outcome-photo {
transform: scale(1.07)
}

.portal .outcome-content-area {
max-width: 680px
}

.portal .outcome-statement {
font-size: 34px;
line-height: 1.4;
margin: 0 0 24px;
font-weight: 600
}

.portal .outcome-elaboration {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px
}

.portal .outcome-elaboration:last-child {
margin-bottom: 0
}

@media (min-width: 1024px) {
.portal .outcome-wrapper {
grid-template-columns: 1fr 1fr;
gap: 80px
}

.portal .outcome-photo {
height: 520px
}
}

.portal .journey-shape {
max-width: 780px;
margin: 0 auto;
padding: 80px 24px 120px;
position: relative
}

.portal .journey-shape::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 1px;
background: repeating-linear-gradient(to right, #9FC8EC 0, #9FC8EC 8px, transparent 8px, transparent 16px)
}

.portal .journey-shape::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #9FC8EC;
border-radius: 50%
}

.portal .journey-header {
font-size: 34px;
line-height: 1.4;
margin: 0 0 40px;
font-weight: 600
}

.portal .journey-phases {
counter-reset: phase-counter
}

.portal .journey-phases p {
position: relative;
padding-left: 44px;
margin: 0 0 24px;
font-size: 16px;
line-height: 1.6;
counter-increment: phase-counter
}

.portal .journey-phases p::before {
content: counter(phase-counter);
position: absolute;
left: 0;
top: 0;
font-size: 20px;
font-weight: 600;
color: #9FC8EC
}

.portal .journey-phases p:last-child {
margin-bottom: 0
}

.portal .interactive-demo {
background: #fff;
padding: 80px 24px;
margin: 80px 0
}

.portal .demo-container {
max-width: 1200px;
margin: 0 auto
}

.portal .demo-heading {
font-size: 24px;
line-height: 1.4;
margin: 0 0 40px;
font-weight: 600;
text-align: center
}

.portal .metrics-display {
display: grid;
grid-template-columns: 1fr;
gap: 24px
}

.portal .metric-box {
background: linear-gradient(253deg, #9fc8ec14, #f3f5e94d 68%);
padding: 40px 24px;
border-radius: 12px;
text-align: center;
border: 2px solid transparent;
transition: border-color .4s ease-in-out, transform .4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative
}

.portal .metric-box:hover {
border-color: #9FC8EC;
transform: translateY(-8px)
}

.portal .metric-box:focus-within {
outline: 3px solid #9FC8EC;
outline-offset: 4px
}

.portal .metric-number {
font-size: 48px;
line-height: 1.2;
font-weight: 600;
color: #4D1347;
margin: 0 0 12px;
display: block
}

.portal .metric-label {
font-size: 16px;
line-height: 1.4;
color: #4D1347;
margin: 0
}

@media (min-width: 768px) {
.portal .metrics-display {
grid-template-columns: repeat(4, 1fr)
}
}

@media (min-width: 1024px) {
.portal .metrics-display {
grid-template-columns: 0.8fr 1.2fr 1.2fr 0.8fr
}
}

@media (min-width: 480px) {

.portal .opening-view,
.portal .value-segment,
.portal .distinction-zone,
.portal .experience-narrative,
.portal .currency-showcase,
.portal .outcome-display,
.portal .journey-shape,
.portal .interactive-demo {
padding-left: 40px;
padding-right: 40px
}
}

@media (min-width: 768px) {

.portal .value-heading,
.portal .distinction-title,
.portal .experience-label,
.portal .currency-question,
.portal .outcome-statement,
.portal .journey-header {
font-size: 48px
}

.portal .numbered-text p,
.portal .distinction-description,
.portal .experience-story,
.portal .currency-answer,
.portal .outcome-elaboration,
.portal .journey-phases p {
font-size: 20px
}
}

.contact-information-page {
background: #F3F5E9;
color: #4D1347;
overflow-x: clip
}

.contact-information-page .contact-header-section {
max-width: 1500px;
margin: 0 auto;
padding: 80px 24px 120px;
display: flex;
gap: 40px;
align-items: flex-start;
position: relative
}

.contact-information-page .contact-header-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 280px;
height: 280px;
background: linear-gradient(253deg, #9FC8EC 15%, #9fc8ec33 75%);
border-radius: 36px;
opacity: .4;
z-index: 0;
pointer-events: none
}

.contact-information-page .contact-header-section::after {
content: 'K';
position: absolute;
top: 40px;
left: 24px;
font-size: 320px;
font-weight: 700;
color: #4d13470a;
line-height: 1;
z-index: 0;
pointer-events: none
}

.contact-information-page .contact-text-zone {
flex: 1 1 65%;
position: relative;
z-index: 1
}

.contact-information-page .contact-visual-zone {
flex: 0 0 30%;
position: relative;
z-index: 1
}

.contact-information-page .contact-main-heading {
font-size: 64px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700
}

.contact-information-page .contact-main-heading .gradient-word {
background: linear-gradient(253deg, #9FC8EC 15%, #4D1347 75%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.contact-information-page .contact-intro-text {
font-size: 20px;
line-height: 1.6;
margin: 0 0 40px;
max-width: 680px
}

.contact-information-page .contact-pattern-decoration {
display: flex;
gap: 8px;
margin-top: 40px
}

.contact-information-page .pattern-dot {
width: 8px;
height: 8px;
background: #9FC8EC;
border-radius: 4px;
animation: patternPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite
}

.contact-information-page .pattern-dot:nth-child(2) {
animation-delay: .2s
}

.contact-information-page .pattern-dot:nth-child(3) {
animation-delay: .4s
}

.contact-information-page .pattern-dot:nth-child(4) {
animation-delay: .6s
}

.contact-information-page .pattern-dot:nth-child(5) {
animation-delay: .8s
}

@keyframes patternPulse {

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

50% {
opacity: 1;
transform: scale(1.4)
}
}

.contact-information-page .contact-visual-wrapper {
position: relative;
width: 100%;
height: 420px;
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 8px 52px 0 #4d13471c
}

.contact-information-page .contact-visual-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(253deg, #9fc8ecb3 15%, #4d134766 75%);
z-index: 1;
pointer-events: none
}

.contact-information-page .contact-visual-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1)
}

.contact-information-page .contact-visual-wrapper:hover img {
transform: scale(1.08)
}

.contact-information-page .form-interaction-section {
background: #FFF;
position: relative;
overflow: hidden
}

.contact-information-page .form-interaction-section::before {
content: '';
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1500px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #9FC8EC 50%, transparent 100%)
}

.contact-information-page .form-interaction-section::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 420px;
height: 420px;
background: linear-gradient(253deg, #9fc8ec14 15%, transparent 75%);
border-radius: 36px;
pointer-events: none
}

.contact-information-page .form-container {
max-width: 1500px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
gap: 80px;
align-items: flex-start
}

.contact-information-page .form-info-column {
flex: 0 0 35%
}

.contact-information-page .form-area-column {
flex: 1 1 auto
}

.contact-information-page .form-section-label {
font-size: 15px;
text-transform: uppercase;
letter-spacing: .05em;
color: #9FC8EC;
margin: 0 0 12px;
font-weight: 600
}

.contact-information-page .form-heading {
font-size: 48px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700
}

.contact-information-page .form-heading .outlined-word {
color: transparent;
-webkit-text-stroke: 2px #4D1347;
text-stroke: 2px #4D1347
}

.contact-information-page .form-description {
font-size: 16px;
line-height: 1.6;
margin: 0 0 40px;
color: #4D1347
}

.contact-information-page .contact-details-list {
list-style: none;
margin: 0;
padding: 0
}

.contact-information-page .contact-details-list li {
padding: 12px 0 12px 12px;
border-left: 3px solid #9FC8EC;
margin-bottom: 12px;
font-size: 16px;
line-height: 1.6;
position: relative;
transition: all .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.contact-information-page .contact-details-list li:hover {
padding-left: 20px;
border-left-color: #4D1347
}

.contact-information-page .contact-details-list li strong {
display: block;
font-weight: 600;
color: #4D1347;
margin-bottom: 4px
}

.contact-information-page .contact-details-list li a {
color: #4D1347;
text-decoration: none;
transition: color .35s ease-in-out
}

.contact-information-page .contact-details-list li a:hover {
color: #9FC8EC;
text-decoration: underline
}

.contact-information-page .contact-form {
background: #FFF;
border-radius: 20px;
padding: 40px;
box-shadow: 1px 7px 20px 0 #4d13471a;
position: relative;
animation: formExpand .55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform-origin: top;
overflow: hidden
}

@keyframes formExpand {
from {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0
}

to {
max-height: 2000px;
opacity: 1;
padding-top: 40px;
padding-bottom: 40px
}
}

.contact-information-page .form-row {
margin-bottom: 24px
}

.contact-information-page .form-row.double-column {
display: flex;
gap: 24px
}

.contact-information-page .form-row.double-column .form-field {
flex: 1
}

.contact-information-page .form-field label {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: #4D1347
}

.contact-information-page .form-field input[type="text"],
.contact-information-page .form-field input[type="email"],
.contact-information-page .form-field select,
.contact-information-page .form-field textarea {
width: 100%;
padding: 12px;
border: 2px solid #F3F5E9;
border-radius: 12px;
font-size: 16px;
color: #4D1347;
background: #FFF;
transition: all .4s ease-in-out;
outline: none;
box-shadow: inset 1px 1px 3px 0 #4d134712
}

.contact-information-page .form-field input[type="text"]:focus,
.contact-information-page .form-field input[type="email"]:focus,
.contact-information-page .form-field select:focus,
.contact-information-page .form-field textarea:focus {
border-color: #9FC8EC;
box-shadow: 1px 7px 20px 0 #9fc8ec1a
}

.contact-information-page .form-field input[type="text"]::placeholder,
.contact-information-page .form-field input[type="email"]::placeholder,
.contact-information-page .form-field textarea::placeholder {
color: #9B9B9B;
font-size: 15px
}

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

.contact-information-page .form-field textarea {
min-height: 140px;
resize: vertical;
font-family: inherit
}

.contact-information-page .radio-group-wrapper {
margin-bottom: 24px
}

.contact-information-page .radio-group-wrapper label.group-label {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
color: #4D1347
}

.contact-information-page .radio-options {
display: flex;
flex-wrap: wrap;
gap: 12px
}

.contact-information-page .radio-option {
position: relative
}

.contact-information-page .radio-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none
}

.contact-information-page .radio-option label {
display: block;
padding: 12px 24px;
border: 2px solid #F3F5E9;
border-radius: 12px;
font-size: 15px;
color: #4D1347;
background: #FFF;
cursor: pointer;
transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 1px 1px 3px 0 #4d134712;
font-weight: 500
}

.contact-information-page .radio-option input[type="radio"]:checked+label {
background: linear-gradient(253deg, #9FC8EC 15%, #4D1347 75%);
color: #FFF;
border-color: #4D1347;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.contact-information-page .radio-option label:hover {
border-color: #9FC8EC;
transform: translateY(-2px)
}

.contact-information-page .timeline-selector {
margin-bottom: 24px
}

.contact-information-page .timeline-selector label.timeline-label {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
color: #4D1347
}

.contact-information-page .timeline-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px
}

.contact-information-page .timeline-option {
position: relative
}

.contact-information-page .timeline-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none
}

.contact-information-page .timeline-option label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 12px;
border: 2px solid #F3F5E9;
border-radius: 12px;
background: #FFF;
cursor: pointer;
transition: all .4s ease-in-out;
box-shadow: 1px 1px 3px 0 #4d134712;
text-align: center;
min-height: 100px
}

.contact-information-page .timeline-option input[type="radio"]:checked+label {
background: #9FC8EC;
border-color: #4D1347;
box-shadow: 1px 7px 20px 0 #9fc8ec1a
}

.contact-information-page .timeline-option label:hover {
border-color: #9FC8EC;
transform: scale(1.03)
}

.contact-information-page .timeline-option .timeline-period {
font-size: 16px;
font-weight: 600;
color: #4D1347;
display: block
}

.contact-information-page .privacy-consent {
margin: 24px 0;
padding: 12px;
background: #F3F5E9;
border-radius: 12px;
border-left: 3px solid #9FC8EC
}

.contact-information-page .privacy-consent label {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
line-height: 1.6;
color: #4D1347;
cursor: pointer
}

.contact-information-page .privacy-consent input[type="checkbox"] {
margin-top: 4px;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #9FC8EC;
flex-shrink: 0
}

.contact-information-page .privacy-consent a {
color: #4D1347;
text-decoration: underline;
transition: color .35s ease-in-out
}

.contact-information-page .privacy-consent a:hover {
color: #9FC8EC
}

.contact-information-page .submit-button-wrapper {
text-align: right
}

.contact-information-page .submit-button {
padding: 16px 40px;
background: linear-gradient(253deg, #9FC8EC 15%, #4D1347 75%);
color: #FFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all .45s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 1px 7px 20px 0 #4d13471a;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative
}

.contact-information-page .submit-button:hover {
transform: translateY(-3px);
box-shadow: 1px 8px 52px 0 #4d13471c
}

.contact-information-page .submit-button:active {
transform: translateY(-1px)
}

.contact-information-page .submit-button::after {
content: '';
width: 16px;
height: 16px;
border: 2px solid #FFF;
border-top-color: transparent;
border-radius: 50%;
animation: buttonSpin .8s linear infinite;
opacity: 0;
position: absolute;
right: 20px
}

@keyframes buttonSpin {
to {
transform: rotate(360deg)
}
}

.contact-information-page .submit-button:focus::after {
opacity: 1
}

.contact-information-page .submit-icon {
width: 20px;
height: 20px;
fill: none;
stroke: #FFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}

@media (max-width: 1024px) {
.contact-information-page .contact-header-section {
flex-direction: column;
padding: 80px 24px 100px
}

.contact-information-page .contact-text-zone,
.contact-information-page .contact-visual-zone {
flex: 1 1 100%
}

.contact-information-page .contact-visual-wrapper {
height: 360px
}

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

.contact-information-page .form-info-column,
.contact-information-page .form-area-column {
flex: 1 1 100%
}
}

@media (max-width: 768px) {
.contact-information-page .contact-header-section {
padding: 40px 12px 80px
}

.contact-information-page .contact-header-section::after {
font-size: 180px
}

.contact-information-page .contact-main-heading {
font-size: 48px
}

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

.contact-information-page .contact-visual-wrapper {
height: 280px
}

.contact-information-page .form-container {
padding: 40px 12px
}

.contact-information-page .form-heading {
font-size: 34px
}

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

.contact-information-page .form-row.double-column {
flex-direction: column
}

.contact-information-page .timeline-options {
grid-template-columns: 1fr
}

.contact-information-page .submit-button-wrapper {
text-align: center
}

.contact-information-page .submit-button {
width: 100%;
justify-content: center
}
}

@media (max-width: 480px) {
.contact-information-page .contact-main-heading {
font-size: 34px
}

.contact-information-page .contact-intro-text {
font-size: 15px
}

.contact-information-page .form-heading {
font-size: 24px
}

.contact-information-page .radio-options {
flex-direction: column
}

.contact-information-page .radio-option label {
width: 100%
}
}

.about-us-page {
background: #F3F5E9;
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: clip
}

.about-us-page .hero-introduction {
background: linear-gradient(253deg, #9FC8EC 0%, #F3F5E9 85%);
padding: 80px 24px;
position: relative;
overflow: hidden;
animation: brightness-pulse 8s ease-in-out infinite
}

@keyframes brightness-pulse {

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

50% {
filter: brightness(1.03)
}
}

.about-us-page .hero-introduction::before {
content: '';
position: absolute;
top: 12%;
right: 8%;
width: 180px;
height: 180px;
border: 2px solid #4d134726;
border-radius: 36px;
transform: rotate(15deg);
animation: gentle-pulse 4s ease-in-out infinite;
pointer-events: none
}

@keyframes gentle-pulse {

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

50% {
transform: rotate(15deg) scale(1.08);
opacity: .25
}
}

.about-us-page .hero-content-wrapper {
max-width: 1500px;
margin: 0 auto
}

.about-us-page .main-headline {
font-size: 64px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 24px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0
}

.about-us-page .supporting-text {
font-size: 20px;
line-height: 1.6;
color: #4D1347;
margin: 0;
max-width: 680px
}

.about-us-page .story-narrative {
background: #fff;
padding: 80px 24px 80px 104px;
position: relative;
margin-left: 60px
}

.about-us-page .story-narrative::before {
content: '';
position: absolute;
top: 50%;
left: -2px;
width: 100%;
height: 1px;
background: radial-gradient(circle, #9FC8EC 2px, transparent 2px);
background-size: 12px 12px;
background-repeat: repeat-x;
transform: translateY(-50%);
clip-path: polygon(0 0, 5% 30%, 10% 50%, 15% 65%, 20% 75%, 25% 80%, 30% 75%, 35% 65%, 40% 50%, 45% 30%, 50% 0, 55% 30%, 60% 50%, 65% 65%, 70% 75%, 75% 80%, 80% 75%, 85% 65%, 90% 50%, 95% 30%, 100% 0, 100% 100%, 0 100%);
pointer-events: none;
z-index: 1
}

.about-us-page .story-container {
max-width: 1500px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 80px;
align-items: flex-start
}

.about-us-page .narrative-content {
flex: 1;
min-width: 0
}

.about-us-page .section-label {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 40px;
font-weight: 600
}

.about-us-page .numbered-paragraph {
margin: 0 0 24px;
position: relative;
padding-left: 48px
}

.about-us-page .paragraph-number {
position: absolute;
left: 0;
top: 0;
font-size: 16px;
line-height: 1.6;
color: #9FC8EC;
font-weight: 700
}

.about-us-page .paragraph-text {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 0
}

.about-us-page .visual-element {
flex-shrink: 0;
width: 420px;
position: relative
}

.about-us-page .image-frame {
width: 100%;
height: 520px;
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.about-us-page .content-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1)
}

.about-us-page .image-frame:hover .content-image {
transform: scale(1.06)
}

.about-us-page .team-expertise {
background: linear-gradient(253deg, #4D1347 0%, #6b2563 92%);
padding: 80px 24px;
position: relative;
margin-right: 80px;
overflow: hidden
}

.about-us-page .team-expertise::after {
content: '';
position: absolute;
bottom: 15%;
left: 6%;
width: 240px;
height: 240px;
border: 3px solid #9fc8ec1f;
border-radius: 50%;
animation: slow-pulse 6s ease-in-out infinite;
pointer-events: none
}

@keyframes slow-pulse {

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

50% {
transform: scale(1.12);
opacity: .22
}
}

.about-us-page .team-wrapper {
max-width: 1500px;
margin: 0 auto
}

.about-us-page .expertise-headline {
font-size: 48px;
line-height: 1.2;
color: #F3F5E9;
margin: 0 0 80px;
font-weight: 700;
text-align: right
}

.about-us-page .comparison-table {
background: #f3f5e914;
border-radius: 12px;
padding: 40px;
backdrop-filter: blur(8px)
}

.about-us-page .table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 2px solid #9fc8ec4d
}

.about-us-page .header-cell {
font-size: 16px;
line-height: 1.4;
color: #9FC8EC;
font-weight: 700;
text-align: center
}

.about-us-page .header-cell:first-child {
text-align: left
}

.about-us-page .table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid #9fc8ec26;
transition: background-color .4s ease-in-out
}

.about-us-page .table-row:hover {
background-color: #9fc8ec0f
}

.about-us-page .table-row:last-child {
border-bottom: none
}

.about-us-page .row-label {
font-size: 16px;
line-height: 1.4;
color: #F3F5E9;
font-weight: 600
}

.about-us-page .indicator-cell {
display: flex;
justify-content: center;
align-items: center
}

.about-us-page .indicator-mark {
width: 24px;
height: 24px;
border-radius: 50%;
background: #9FC8EC;
display: flex;
align-items: center;
justify-content: center;
transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1)
}

.about-us-page .table-row:hover .indicator-mark {
transform: scale(1.15)
}

.about-us-page .indicator-mark::after {
content: '';
width: 10px;
height: 10px;
background: #4D1347;
border-radius: 50%
}

.about-us-page .indicator-empty {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #9fc8ec4d
}

.about-us-page .approach-methodology {
background: #fff;
padding: 80px 24px;
position: relative;
margin-left: 40px
}

.about-us-page .approach-methodology::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: radial-gradient(circle, #9FC8EC 2px, transparent 2px);
background-size: 10px 10px;
background-repeat: repeat-x;
clip-path: polygon(0 0, 4% 35%, 8% 55%, 12% 68%, 16% 78%, 20% 82%, 24% 78%, 28% 68%, 32% 55%, 36% 35%, 40% 0, 44% 35%, 48% 55%, 52% 68%, 56% 78%, 60% 82%, 64% 78%, 68% 68%, 72% 55%, 76% 35%, 80% 0, 84% 35%, 88% 55%, 92% 68%, 96% 78%, 100% 82%, 100% 100%, 0 100%);
pointer-events: none
}

.about-us-page .approach-wrapper {
max-width: 1500px;
margin: 0 auto
}

.about-us-page .approach-header {
font-size: 34px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 80px;
font-weight: 700;
max-width: 720px
}

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

.about-us-page .method-card {
background: #F3F5E9;
border-radius: 20px;
padding: 40px;
position: relative;
border-left: 4px solid #9FC8EC;
box-shadow: 1px 1px 3px 0 #4d134712;
transition: box-shadow .45s ease-in-out, transform .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.about-us-page .method-card:hover {
box-shadow: 1px 8px 52px 0 #4d13471c;
transform: translateY(-4px)
}

.about-us-page .card-number-badge {
position: absolute;
top: 40px;
right: 40px;
width: 48px;
height: 48px;
background: #9FC8EC;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1.2;
color: #4D1347;
font-weight: 700;
animation: badge-pulse 3s ease-in-out infinite
}

@keyframes badge-pulse {

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

50% {
transform: scale(1.08)
}
}

.about-us-page .method-title {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 24px;
font-weight: 600;
max-width: calc(100% - 72px)
}

.about-us-page .method-description {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 0 0 24px
}

.about-us-page .feature-list {
list-style: none;
padding: 0;
margin: 0
}

.about-us-page .feature-item {
padding: 12px 0 12px 24px;
border-left: 3px solid #9FC8EC;
margin-bottom: 12px;
font-size: 15px;
line-height: 1.6;
color: #4D1347;
transition: padding-left .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s ease-in-out
}

.about-us-page .feature-item:hover {
padding-left: 32px;
border-color: #4D1347
}

.about-us-page .feature-item:last-child {
margin-bottom: 0
}

.about-us-page .values-showcase {
background: url(/content_images/20251031_10_customer.jpg) center/cover no-repeat;
padding: 80px 24px;
position: relative;
margin-right: 100px;
overflow: hidden
}

.about-us-page .values-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f3f5e9f0;
pointer-events: none;
z-index: 1
}

.about-us-page .values-showcase::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 160px;
height: 160px;
border: 2px solid #9fc8ec4d;
border-radius: 4px;
transform: rotate(-12deg);
animation: gentle-pulse 5s ease-in-out infinite;
pointer-events: none;
z-index: 2
}

.about-us-page .values-content {
max-width: 1500px;
margin: 0 auto;
position: relative;
z-index: 3
}

.about-us-page .values-title {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 80px;
font-weight: 700
}

.about-us-page .principles-container {
display: flex;
flex-direction: column;
gap: 40px
}

.about-us-page .principle-block {
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start
}

.about-us-page .principle-visual {
flex-shrink: 0;
width: 380px;
height: 280px;
border-radius: 12px;
overflow: hidden;
box-shadow: 1px 7px 20px 0 #4d13471a
}

.about-us-page .principle-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.about-us-page .principle-visual:hover .principle-image {
transform: scale(1.08)
}

.about-us-page .principle-text {
flex: 1;
min-width: 0
}

.about-us-page .principle-heading {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 24px;
font-weight: 600;
text-transform: uppercase
}

.about-us-page .principle-detail {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 0 0 24px
}

.about-us-page .principle-subheading {
font-size: 20px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 12px;
font-weight: 600
}

.about-us-page .accent-underline {
display: inline;
border-bottom: 3px solid #9FC8EC;
padding-bottom: 2px
}

@media (max-width: 1024px) {
.about-us-page .main-headline {
font-size: 48px
}

.about-us-page .hero-introduction {
padding: 40px 24px
}

.about-us-page .story-narrative {
padding: 40px 24px;
margin-left: 40px
}

.about-us-page .story-container {
flex-direction: column;
gap: 40px
}

.about-us-page .visual-element {
width: 100%
}

.about-us-page .team-expertise {
padding: 40px 24px;
margin-right: 40px
}

.about-us-page .expertise-headline {
font-size: 34px;
margin-bottom: 40px
}

.about-us-page .comparison-table {
padding: 24px
}

.about-us-page .table-header,
.about-us-page .table-row {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 12px
}

.about-us-page .approach-methodology {
padding: 40px 24px;
margin-left: 24px
}

.about-us-page .approach-header {
font-size: 24px;
margin-bottom: 40px
}

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

.about-us-page .values-showcase {
padding: 40px 24px;
margin-right: 40px
}

.about-us-page .values-title {
font-size: 34px;
margin-bottom: 40px
}

.about-us-page .principle-block {
flex-direction: column;
gap: 24px
}

.about-us-page .principle-visual {
width: 100%
}
}

@media (max-width: 768px) {
.about-us-page .main-headline {
font-size: 34px
}

.about-us-page .supporting-text {
font-size: 16px
}

.about-us-page .hero-introduction {
padding: 40px 12px
}

.about-us-page .hero-introduction::before {
width: 120px;
height: 120px;
top: 8%;
right: 4%
}

.about-us-page .story-narrative {
padding: 40px 12px;
margin-left: 24px
}

.about-us-page .section-label {
font-size: 20px;
margin-bottom: 24px
}

.about-us-page .numbered-paragraph {
padding-left: 36px;
margin-bottom: 24px
}

.about-us-page .paragraph-number {
font-size: 15px
}

.about-us-page .paragraph-text {
font-size: 15px
}

.about-us-page .team-expertise {
padding: 40px 12px;
margin-right: 24px
}

.about-us-page .expertise-headline {
font-size: 24px;
text-align: left
}

.about-us-page .comparison-table {
padding: 12px;
overflow-x: auto
}

.about-us-page .table-header,
.about-us-page .table-row {
grid-template-columns: 140px 60px 60px 60px;
gap: 8px
}

.about-us-page .header-cell,
.about-us-page .row-label {
font-size: 15px
}

.about-us-page .indicator-mark,
.about-us-page .indicator-empty {
width: 20px;
height: 20px
}

.about-us-page .indicator-mark::after {
width: 8px;
height: 8px
}

.about-us-page .approach-methodology {
padding: 40px 12px;
margin-left: 12px
}

.about-us-page .approach-header {
font-size: 20px;
margin-bottom: 24px
}

.about-us-page .method-card {
padding: 24px
}

.about-us-page .card-number-badge {
width: 40px;
height: 40px;
font-size: 16px;
top: 24px;
right: 24px
}

.about-us-page .method-title {
font-size: 20px;
margin-bottom: 12px
}

.about-us-page .method-description {
font-size: 15px;
margin-bottom: 12px
}

.about-us-page .feature-item {
font-size: 15px;
padding: 8px 0 8px 12px
}

.about-us-page .values-showcase {
padding: 40px 12px;
margin-right: 24px
}

.about-us-page .values-title {
font-size: 24px;
margin-bottom: 24px
}

.about-us-page .principles-container {
gap: 24px
}

.about-us-page .principle-heading {
font-size: 20px;
margin-bottom: 12px
}

.about-us-page .principle-detail {
font-size: 15px;
margin-bottom: 12px
}

.about-us-page .principle-subheading {
font-size: 16px
}
}

@media (max-width: 480px) {
.about-us-page .main-headline {
font-size: 24px
}

.about-us-page .supporting-text {
font-size: 15px
}

.about-us-page .hero-introduction {
padding: 24px 8px
}

.about-us-page .story-narrative {
padding: 24px 8px;
margin-left: 12px
}

.about-us-page .team-expertise {
padding: 24px 8px;
margin-right: 12px
}

.about-us-page .approach-methodology {
padding: 24px 8px;
margin-left: 8px
}

.about-us-page .values-showcase {
padding: 24px 8px;
margin-right: 12px
}
}

.compare {
background: #F3F5E9;
overflow-x: clip;
position: relative
}

.compare::before {
content: '';
position: absolute;
top: 80px;
left: -120px;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #9FC8EC;
opacity: .08;
pointer-events: none
}

.compare::after {
content: '';
position: absolute;
top: 600px;
right: -180px;
width: 500px;
height: 500px;
border-radius: 50%;
border: 1px solid #4D1347;
opacity: .06;
pointer-events: none
}

.compare .title-intro {
background: linear-gradient(253deg, #9FC8EC 0%, #F3F5E9 68%);
padding: 80px 24px;
position: relative;
overflow: visible
}

.compare .title-intro-container {
max-width: 1500px;
margin: 0 auto;
position: relative
}

.compare .title-intro-visual {
font-size: 64px;
line-height: 1.2;
color: #4D1347;
opacity: .12;
position: absolute;
top: -40px;
left: 0;
font-weight: 700;
letter-spacing: -.02em;
pointer-events: none;
user-select: none
}

.compare .title-intro-primary {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 24px;
text-transform: uppercase;
position: relative;
max-width: 900px
}

.compare .title-intro-secondary {
font-size: 24px;
line-height: 1.6;
color: #4D1347;
margin: 0;
max-width: 800px;
position: relative
}

.compare .title-intro-dots {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
gap: 12px;
pointer-events: none
}

.compare .title-intro-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4D1347;
opacity: .2;
animation: dotFade 2s ease-in-out infinite
}

.compare .title-intro-dots span:nth-child(2) {
animation-delay: .3s
}

.compare .title-intro-dots span:nth-child(3) {
animation-delay: .6s
}

.compare .title-intro-dots span:nth-child(4) {
animation-delay: .9s
}

@keyframes dotFade {

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

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

.compare .tool-analysis {
padding: 80px 24px;
position: relative;
background: linear-gradient(160deg, #fff 0%, #fff 58%, #F3F5E9 58%, #F3F5E9 100%);
overflow: hidden
}

.compare .tool-analysis::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to right, #9FC8EC 1px, transparent 1px), linear-gradient(to bottom, #9FC8EC 1px, transparent 1px);
background-size: 40px 40px;
opacity: .04;
pointer-events: none
}

.compare .tool-analysis-container {
max-width: 1500px;
margin: 0 auto;
position: relative
}

.compare .tool-analysis-layout {
display: grid;
grid-template-columns: 40fr 60fr;
gap: 80px;
align-items: start
}

.compare .tool-analysis-content {
position: relative
}

.compare .tool-analysis-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #9FC8EC;
position: relative;
margin: 0 0 24px
}

.compare .tool-analysis-label::before {
content: '1';
font-size: 20px;
line-height: 1;
color: #4D1347;
font-weight: 700
}

.compare .tool-analysis-label::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid #9FC8EC;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg)
}

.compare .tool-analysis-heading {
font-size: 34px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 24px
}

.compare .tool-analysis-text {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 0 0 40px
}

.compare .tool-analysis-image-wrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 1px 7px 20px 0 #4d13471a;
animation: imageReveal .8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
transform: translateY(40px);
animation-delay: .2s
}

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

.compare .tool-analysis-image-wrapper img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1)
}

.compare .tool-analysis-image-wrapper:hover img {
transform: scale(1.08)
}

.compare .tool-analysis-comparison {
background: #fff;
border-radius: 12px;
padding: 40px;
box-shadow: 1px 1px 3px 0 #4d134712
}

.compare .tool-analysis-comparison-heading {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 40px
}

.compare .tool-analysis-comparison-grid {
display: grid;
gap: 24px
}

.compare .tool-analysis-comparison-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 24px;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid #4d134714
}

.compare .tool-analysis-comparison-row:last-child {
border-bottom: none
}

.compare .tool-analysis-comparison-feature {
font-size: 16px;
line-height: 1.4;
color: #4D1347
}

.compare .tool-analysis-comparison-option {
width: 140px;
text-align: center;
font-size: 15px;
line-height: 1.4;
color: #4D1347;
font-weight: 600
}

.compare .tool-analysis-comparison-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto
}

.compare .tool-analysis-comparison-icon.check {
color: #9FC8EC
}

.compare .tool-analysis-comparison-icon.cross {
color: #4d13474d
}

.compare .tool-analysis-comparison-icon svg {
width: 100%;
height: 100%;
fill: currentColor
}

.compare .platform-selection {
padding: 80px 24px;
background: #fff;
position: relative
}

.compare .platform-selection::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: repeating-linear-gradient(to right, #9FC8EC 0px, #9FC8EC 8px, transparent 8px, transparent 12px, #9FC8EC 12px, #9FC8EC 14px, transparent 14px, transparent 24px);
opacity: .4
}

.compare .platform-selection-container {
max-width: 1500px;
margin: 0 auto
}

.compare .platform-selection-header {
text-align: right;
margin: 0 0 80px
}

.compare .platform-selection-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #4D1347;
position: relative;
margin: 0 0 24px
}

.compare .platform-selection-label::before {
content: '2';
font-size: 20px;
line-height: 1;
color: #4D1347;
font-weight: 700
}

.compare .platform-selection-label::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid #4D1347;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(45deg)
}

.compare .platform-selection-heading {
font-size: 34px;
line-height: 1.2;
color: #4D1347;
margin: 0
}

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

.compare .platform-selection-card {
background: #F3F5E9;
border-radius: 20px;
padding: 40px;
position: relative;
border: 2px solid transparent;
transition: all .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.compare .platform-selection-card:hover {
border-color: #9FC8EC;
box-shadow: 1px 1px 3px 0 #9fc8ec12 1px 8px 52px 0 #9fc8ec1c;
transform: translateY(-4px)
}

.compare .platform-selection-card:hover::after {
opacity: 1;
border-color: #9FC8EC
}

.compare .platform-selection-card::after {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 20px;
border: 2px solid transparent;
opacity: 0;
transition: all .55s cubic-bezier(0.16, 1, 0.3, 1) .1s;
pointer-events: none
}

.compare .platform-selection-card-title {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 24px;
text-transform: uppercase
}

.compare .platform-selection-card-description {
font-size: 16px;
line-height: 1.6;
color: #4D1347;
margin: 0 0 40px
}

.compare .platform-selection-card-features {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 24px
}

.compare .platform-selection-card-features li {
position: relative;
padding: 0 0 0 32px;
font-size: 16px;
line-height: 1.6;
color: #4D1347;
border-left: 3px solid #9FC8EC;
padding-left: 24px
}

.compare .platform-selection-card-features li::before {
content: '';
position: absolute;
left: -3px;
top: 0;
width: 3px;
height: 100%;
background: #4D1347;
transform: scaleY(0);
transform-origin: top;
transition: transform .4s ease-in-out
}

.compare .platform-selection-card:hover .platform-selection-card-features li::before {
transform: scaleY(1)
}

.compare .platform-selection-card-features li span {
position: relative
}

.compare .platform-selection-card-features li span::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: #9FC8EC;
transform: scaleX(0);
transform-origin: left;
transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1)
}

.compare .platform-selection-card:hover .platform-selection-card-features li span::after {
transform: scaleX(1)
}

.compare .decision-framework {
padding: 80px 24px;
background: #F3F5E9;
position: relative;
overflow: hidden
}

.compare .decision-framework-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/content_images/20250604_v.jpg) center/cover no-repeat;
opacity: .08;
animation: panoramaMove 60s linear infinite;
pointer-events: none
}

@keyframes panoramaMove {
0% {
transform: translateX(0)
}

100% {
transform: translateX(-200px)
}
}

.compare .decision-framework-container {
max-width: 1500px;
margin: 0 auto;
position: relative
}

.compare .decision-framework-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #4D1347;
position: relative;
margin: 0 0 24px
}

.compare .decision-framework-label::before {
content: '3';
font-size: 20px;
line-height: 1;
color: #4D1347;
font-weight: 700
}

.compare .decision-framework-label::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid #4D1347;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-135deg)
}

.compare .decision-framework-heading {
font-size: 34px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 40px;
max-width: 800px
}

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

.compare .decision-framework-outer {
display: grid;
gap: 24px
}

.compare .decision-framework-card {
background: #fff;
border-radius: 12px;
padding: 40px;
box-shadow: 1px 1px 3px 0 #4d134712;
position: relative;
transition: box-shadow .4s ease-in-out, transform .4s ease-in-out
}

.compare .decision-framework-card:hover {
box-shadow: 1px 7px 20px 0 #4d13471a;
transform: translateY(-8px)
}

.compare .decision-framework-card-number {
font-size: 48px;
line-height: 1;
color: #9FC8EC;
opacity: .3;
margin: 0 0 24px;
font-weight: 700
}

.compare .decision-framework-card-title {
font-size: 20px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 12px
}

.compare .decision-framework-card-text {
font-size: 15px;
line-height: 1.6;
color: #4D1347;
margin: 0
}

.compare .decision-framework-outer:nth-child(1) .decision-framework-card {
background: linear-gradient(253deg, #fff 0%, #F3F5E9 92%)
}

.compare .decision-framework-outer:nth-child(2) {
grid-template-rows: auto auto
}

.compare .decision-framework-outer:nth-child(3) .decision-framework-card {
background: linear-gradient(253deg, #9FC8EC 0%, #fff 78%)
}

@media (max-width: 1024px) {
.compare .title-intro-visual {
font-size: 48px;
top: -24px
}

.compare .title-intro-primary {
font-size: 34px
}

.compare .title-intro-secondary {
font-size: 20px
}

.compare .title-intro {
padding: 80px 24px
}

.compare .tool-analysis-layout {
grid-template-columns: 1fr;
gap: 40px
}

.compare .tool-analysis-image-wrapper img {
height: 380px
}

.compare .decision-framework-grid {
grid-template-columns: 1fr;
gap: 24px
}

.compare .platform-selection-grid {
grid-template-columns: 1fr;
gap: 24px
}
}

@media (max-width: 768px) {
.compare .title-intro-visual {
font-size: 34px;
top: -12px
}

.compare .title-intro-primary {
font-size: 24px
}

.compare .title-intro-secondary {
font-size: 16px
}

.compare .title-intro {
padding: 40px 24px
}

.compare .title-intro-dots {
bottom: 24px;
right: 24px
}

.compare .tool-analysis {
padding: 40px 24px
}

.compare .tool-analysis-heading {
font-size: 24px
}

.compare .tool-analysis-image-wrapper img {
height: 280px
}

.compare .tool-analysis-comparison {
padding: 24px
}

.compare .tool-analysis-comparison-row {
grid-template-columns: 1fr;
gap: 12px
}

.compare .tool-analysis-comparison-option {
width: auto;
text-align: left
}

.compare .tool-analysis-comparison-icon {
margin: 0
}

.compare .platform-selection {
padding: 40px 24px
}

.compare .platform-selection-header {
margin: 0 0 40px
}

.compare .platform-selection-heading {
font-size: 24px
}

.compare .platform-selection-card {
padding: 24px
}

.compare .decision-framework {
padding: 40px 24px
}

.compare .decision-framework-heading {
font-size: 24px
}

.compare .decision-framework-card {
padding: 24px
}

.compare .decision-framework-card-number {
font-size: 34px
}
}

@media (max-width: 480px) {
.compare .title-intro-primary {
font-size: 20px
}

.compare .title-intro-secondary {
font-size: 15px
}

.compare .tool-analysis-heading {
font-size: 20px
}

.compare .platform-selection-heading {
font-size: 20px
}

.compare .decision-framework-heading {
font-size: 20px
}
}

.success-page {
background: linear-gradient(253deg, #F3F5E9 0%, #fff 68%);
min-height: 100vh;
padding: 80px 24px
}

.success-page .wrapper {
max-width: 1500px;
margin: 0 auto
}

.success-page .confirmation-block {
background: #fff;
border-radius: 20px;
padding: 80px 40px;
text-align: center;
box-shadow: 1px 7px 20px 0 #4d13471a;
margin-bottom: 80px
}

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

.success-page .icon-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #9FC8EC;
display: flex;
align-items: center;
justify-content: center;
animation: scaleIn .45s cubic-bezier(0.16, 1, 0.3, 1)
}

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

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

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

.success-page .checkmark-stem {
position: absolute;
width: 6px;
height: 28px;
background: #fff;
left: 26px;
top: 8px;
transform: rotate(45deg);
border-radius: 4px
}

.success-page .checkmark-kick {
position: absolute;
width: 6px;
height: 14px;
background: #fff;
left: 12px;
top: 22px;
transform: rotate(-45deg);
border-radius: 4px
}

.success-page .confirmation-block h1 {
font-size: 48px;
line-height: 1.2;
color: #4D1347;
margin: 0 0 24px
}

.success-page .confirmation-block .message {
font-size: 20px;
line-height: 1.6;
color: #333;
margin: 0 0 40px;
max-width: 680px;
margin-left: auto;
margin-right: auto
}

.success-page .reference-number {
display: inline-block;
background: #F3F5E9;
padding: 12px 24px;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
color: #4D1347;
margin-bottom: 40px;
border: 2px solid #9FC8EC
}

.success-page .reference-number strong {
font-weight: 600
}

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

.success-page .button-primary {
background: #4D1347;
color: #fff;
padding: 12px 40px;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background .4s ease-in-out, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
border: 2px solid #4D1347
}

.success-page .button-primary:hover {
background: #6b1c64;
border-color: #6b1c64;
transform: translateY(-2px)
}

.success-page .button-secondary {
background: transparent;
color: #4D1347;
padding: 12px 40px;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background .5s ease-in-out, color .4s ease-in-out;
border: 2px solid #9FC8EC
}

.success-page .button-secondary:hover {
background: #9FC8EC;
color: #4D1347
}

.success-page .arrow-icon {
width: 16px;
height: 16px;
position: relative
}

.success-page .arrow-line {
width: 12px;
height: 2px;
background: currentColor;
position: absolute;
left: 0;
top: 7px
}

.success-page .arrow-head {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
position: absolute;
right: 0;
top: 4px
}

.success-page .information-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-bottom: 80px
}

.success-page .info-card {
background: #fff;
padding: 40px 24px;
border-radius: 20px;
box-shadow: 1px 1px 3px 0 #4d134712;
transition: box-shadow .5s ease-in-out, transform .42s cubic-bezier(0.16, 1, 0.3, 1);
border-left: 4px solid #9FC8EC
}

.success-page .info-card:hover {
box-shadow: 1px 8px 52px 0 #4d13471c;
transform: translateY(-4px)
}

.success-page .info-card h2 {
font-size: 24px;
line-height: 1.4;
color: #4D1347;
margin: 0 0 12px
}

.success-page .info-card .description {
font-size: 16px;
line-height: 1.6;
color: #333;
margin: 0
}

.success-page .contact-section {
background: #4D1347;
padding: 80px 40px;
border-radius: 36px;
text-align: right
}

.success-page .contact-section h2 {
font-size: 34px;
line-height: 1.4;
color: #fff;
margin: 0 0 24px
}

.success-page .contact-list {
list-style: none;
padding: 0;
margin: 0 0 40px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-end
}

.success-page .contact-list li {
font-size: 16px;
line-height: 1.6;
color: #F3F5E9;
display: flex;
align-items: center;
gap: 12px;
padding-right: 24px;
border-right: 3px solid #9FC8EC
}

.success-page .contact-list a {
color: #9FC8EC;
text-decoration: none;
transition: color .38s ease-in-out
}

.success-page .contact-list a:hover {
color: #fff;
text-decoration: underline
}

.success-page .numbered-paragraph {
font-size: 15px;
line-height: 1.9;
color: #F3F5E9;
margin: 0;
text-align: right;
max-width: 720px;
margin-left: auto
}

.success-page .numbered-paragraph::before {
content: "1. ";
color: #9FC8EC;
font-weight: 600
}

@media (max-width: 1024px) {
.success-page .information-grid {
grid-template-columns: 1fr;
gap: 24px
}

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

.success-page .confirmation-block h1 {
font-size: 34px
}

.success-page .contact-section {
padding: 40px 24px;
text-align: left
}

.success-page .contact-list {
align-items: flex-start
}

.success-page .contact-list li {
padding-right: 0;
padding-left: 24px;
border-right: none;
border-left: 3px solid #9FC8EC
}

.success-page .numbered-paragraph {
text-align: left
}
}

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

.success-page .confirmation-block {
margin-bottom: 40px
}

.success-page .action-buttons {
flex-direction: column;
gap: 12px
}

.success-page .button-primary,
.success-page .button-secondary {
width: 100%;
justify-content: center
}

.success-page .contact-section {
margin-bottom: 0
}
}

@media (max-width: 480px) {
.success-page .confirmation-block h1 {
font-size: 24px
}

.success-page .confirmation-block .message {
font-size: 16px
}

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

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

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

.success-page .checkmark-stem {
height: 18px;
left: 18px;
top: 6px
}

.success-page .checkmark-kick {
height: 10px;
left: 8px;
top: 14px
}
}