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

html {
scroll-behavior: smooth;
margin: 0;
padding: 0
}

body {
margin: 0;
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #FFF;
color: #1d1d1d;
line-height: 1.55;
font-size: 16px;
overflow-x: hidden
}

.topband {
background: linear-gradient(135deg, #5A0AAF 0%, #F90A8A 100%);
padding: 8px 0;
position: relative;
z-index: 100
}

.topband-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px
}

.topband-contact {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap
}

.topband-contact a {
color: #FFF;
text-decoration: none;
font-size: 13px;
letter-spacing: .03em;
display: flex;
align-items: center;
gap: 8px;
transition: opacity .5s ease-in-out
}

.topband-contact a:hover {
opacity: .85
}

.topband-contact a:focus {
outline: 2px solid #FFF;
outline-offset: 3px;
border-radius: 2px
}

.topband-social {
display: flex;
gap: 16px;
align-items: center
}

.topband-social a {
color: #FFF;
font-size: 18px;
transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
align-items: center
}

.topband-social a:hover {
transform: translateY(-2px)
}

.topband-social a:focus {
outline: 2px solid #FFF;
outline-offset: 3px;
border-radius: 2px
}

.brandbar {
background: #FFF;
border-bottom: 3px solid #F90A8A;
padding: 16px 0;
position: relative;
z-index: 99;
box-shadow: -1px 2px 5px 0 #f90a8a0d
}

.brandbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap
}

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

.logoframe {
width: 42px;
height: 42px;
border: 1px solid #e8e8e8;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
box-shadow: -1px 2px 5px 0 #5a0aaf0d;
flex-shrink: 0
}

.logoframe img {
width: 32px;
height: 32px;
object-fit: contain
}

.brandtext {
display: flex;
flex-direction: column;
gap: 2px
}

.brandname {
font-family: 'PT Serif', Georgia, serif;
font-size: 21px;
font-weight: 700;
color: #5A0AAF;
letter-spacing: -.01em;
line-height: 1.2
}

.brandtag {
font-size: 13px;
color: #6d6d6d;
letter-spacing: .02em
}

.proofchip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #f90a8a14 0%, #5a0aaf14 100%);
border: 2px solid #F90A8A;
border-radius: 40px;
font-size: 13px;
font-weight: 700;
color: #5A0AAF;
letter-spacing: .02em
}

.proofchip svg {
width: 16px;
height: 16px;
fill: #F90A8A
}

.navplate {
background: #FFF;
border-bottom: 1px solid #f0f0f0;
position: relative;
z-index: 98
}

.navplate-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px
}

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

.navlist li {
margin: 0;
padding: 0
}

.navlist a {
display: block;
padding: 16px 24px;
color: #2d2d2d;
text-decoration: none;
font-size: 16px;
font-weight: 400;
letter-spacing: .01em;
border: 2px solid transparent;
border-radius: 2px;
transition: all .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative
}

.navlist a:hover {
color: #F90A8A;
border-color: #F90A8A;
background: #f90a8a0a
}

.navlist a:focus {
outline: 2px solid #5A0AAF;
outline-offset: 2px;
border-color: #5A0AAF
}

.navlist a[href="./"] {
font-weight: 700;
color: #5A0AAF
}

@media (max-width: 768px) {
.topband-inner {
flex-direction: column;
align-items: flex-start;
gap: 8px
}

.topband-contact {
flex-direction: column;
align-items: flex-start;
gap: 8px
}

.brandbar-inner {
flex-direction: column;
align-items: flex-start;
gap: 16px
}

.proofchip {
align-self: flex-start
}

.navlist {
flex-direction: column;
align-items: stretch;
gap: 0
}

.navlist a {
padding: 16px;
border-left: 0;
border-right: 0;
border-top: 0;
border-bottom: 2px solid transparent;
border-radius: 0
}
}

@media (max-width: 480px) {

.topband-inner,
.brandbar-inner,
.navplate-inner {
padding: 0 16px
}

.brandname {
font-size: 18px
}

.brandtag {
font-size: 12px
}
}

.footerdeck {
background: linear-gradient(180deg, #FFF 0%, #fafcff 100%);
border-top: 3px solid #5A0AAF;
padding: 64px 0 32px;
position: relative;
margin-top: 96px
}

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

.footerdeck-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px
}

.footertop {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 64px;
margin-bottom: 64px;
align-items: start
}

.footerbrand {
display: flex;
flex-direction: column;
gap: 16px
}

.footerlogo-pod {
display: flex;
align-items: center;
gap: 16px
}

.footerlogo-frame {
width: 44px;
height: 44px;
border: 2px solid #5A0AAF;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
box-shadow: -1px 6px 20px 0 #5a0aaf17;
flex-shrink: 0
}

.footerlogo-frame img {
width: 34px;
height: 34px;
object-fit: contain
}

.footerbrand-name {
font-family: 'PT Serif', Georgia, serif;
font-size: 21px;
font-weight: 700;
color: #5A0AAF;
letter-spacing: -.01em;
line-height: 1.2
}

.footerbrand-desc {
font-size: 13px;
line-height: 1.55;
color: #4d4d4d;
letter-spacing: .01em
}

.footerbrand-year {
font-size: 13px;
color: #8d8d8d;
letter-spacing: .02em
}

.footernav {
display: flex;
flex-direction: column;
gap: 32px
}

.footernav-heading {
font-family: 'PT Serif', Georgia, serif;
font-size: 21px;
font-weight: 700;
color: #5A0AAF;
letter-spacing: -.01em;
line-height: 1.2;
margin: 0
}

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

.footernav-list a {
color: #2d2d2d;
text-decoration: none;
font-size: 16px;
letter-spacing: .01em;
transition: color .5s ease-in-out;
display: inline-block;
position: relative;
padding-left: 20px
}

.footernav-list a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #F90A8A;
border-radius: 40px;
transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.footernav-list a:hover {
color: #F90A8A
}

.footernav-list a:hover::before {
transform: translateY(-50%) scale(1.3)
}

.footernav-list a:focus {
outline: 2px solid #5A0AAF;
outline-offset: 3px;
border-radius: 2px
}

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

.footercontact-heading {
font-family: 'PT Serif', Georgia, serif;
font-size: 21px;
font-weight: 700;
color: #5A0AAF;
letter-spacing: -.01em;
line-height: 1.2;
margin: 0
}

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

.footercontact-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
line-height: 1.55;
color: #4d4d4d;
letter-spacing: .01em
}

.footercontact-list svg {
width: 18px;
height: 18px;
fill: #F90A8A;
flex-shrink: 0;
margin-top: 2px
}

.footercontact-list a {
color: #2d2d2d;
text-decoration: none;
transition: color .5s ease-in-out
}

.footercontact-list a:hover {
color: #F90A8A
}

.footercontact-list a:focus {
outline: 2px solid #5A0AAF;
outline-offset: 2px;
border-radius: 2px
}

.footerbottom {
border-top: 2px solid #F90A8A;
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap
}

.footercopy {
font-size: 13px;
color: #6d6d6d;
letter-spacing: .02em
}

.footerlegal {
display: flex;
gap: 32px;
flex-wrap: wrap
}

.footerlegal a {
font-size: 13px;
color: #4d4d4d;
text-decoration: none;
letter-spacing: .01em;
padding: 8px 16px;
border: 2px solid #5A0AAF;
border-radius: 40px;
transition: all .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: inline-block
}

.footerlegal a:hover {
background: #5A0AAF;
color: #FFF;
filter: brightness(1.1)
}

.footerlegal a:focus {
outline: 2px solid #F90A8A;
outline-offset: 3px
}

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

@media (max-width: 768px) {
.footerdeck {
padding: 48px 0 24px;
margin-top: 64px
}

.footerdeck-inner {
padding: 0 16px
}

.footertop {
gap: 32px;
margin-bottom: 32px
}

.footerbottom {
flex-direction: column;
align-items: flex-start;
gap: 16px
}

.footerlegal {
flex-direction: column;
gap: 8px;
width: 100%
}

.footerlegal a {
text-align: center
}
}

@media (max-width: 480px) {

.footernav-heading,
.footercontact-heading,
.footerbrand-name {
font-size: 18px
}
}

input:focus,
textarea:focus,
select:focus {
outline: 2px solid #5A0AAF;
outline-offset: 2px
}

button:focus {
outline: 2px solid #F90A8A;
outline-offset: 3px
}

a:focus {
outline: 2px solid #5A0AAF;
outline-offset: 2px
}

::placeholder {
font-style: italic;
opacity: .55;
color: #6d6d6d
}

.pure-button {
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
}

.pure-form input[type="text"],
.pure-form input[type="email"],
.pure-form input[type="tel"],
.pure-form textarea,
.pure-form select {
box-sizing: border-box
}

.info-doc-jkn {
max-width: 1200px;
margin: 0 auto;
padding: 64px 16px;
background: #FFF
}

.info-doc-jkn h1 {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
color: #5A0AAF;
margin: 0 0 32px
}

.info-doc-jkn h2 {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
color: #5A0AAF;
margin: 64px 0 16px
}

.info-doc-jkn h3 {
font-size: 21px;
line-height: 1.55;
letter-spacing: 0;
color: #5A0AAF;
margin: 32px 0 16px
}

.info-doc-jkn h4 {
font-size: 21px;
line-height: 1.55;
letter-spacing: 0;
color: #333;
margin: 32px 0 8px
}

.info-doc-jkn h5 {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #333;
text-transform: uppercase;
margin: 16px 0 8px
}

.info-doc-jkn h6 {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #666;
margin: 16px 0 8px
}

.info-doc-jkn p {
font-size: 21px;
line-height: 1.8;
letter-spacing: .01em;
color: #333;
margin: 0 0 16px
}

.info-doc-jkn ul {
font-size: 21px;
line-height: 1.8;
letter-spacing: .01em;
color: #333;
margin: 0 0 16px;
padding: 0 0 0 32px
}

.info-doc-jkn ol {
font-size: 21px;
line-height: 1.8;
letter-spacing: .01em;
color: #333;
margin: 0 0 16px;
padding: 0 0 0 32px
}

.info-doc-jkn li {
margin: 0 0 8px
}

.info-doc-jkn strong {
color: #5A0AAF;
font-weight: 600
}

.info-doc-jkn b {
color: #5A0AAF;
font-weight: 600
}

.info-doc-jkn a {
color: #F90A8A;
text-decoration: underline;
transition: color .5s ease-in-out
}

.info-doc-jkn a:hover {
color: #5A0AAF
}

.info-doc-jkn table {
width: 100%;
border-collapse: collapse;
margin: 32px 0;
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
box-shadow: -1px 2px 5px 0 #5a0aaf0d
}

.info-doc-jkn thead {
background: #5A0AAF;
color: #FFF
}

.info-doc-jkn tbody {
background: #FFF
}

.info-doc-jkn tr {
border-bottom: 1px solid #5a0aaf1a
}

.info-doc-jkn th {
padding: 16px;
text-align: left;
font-weight: 600;
font-size: 21px;
line-height: 1.55
}

.info-doc-jkn td {
padding: 16px;
color: #333
}

.info-doc-jkn hr {
border: none;
height: 2px;
background: #5a0aaf1a;
margin: 64px 0
}

@media (max-width: 768px) {
.info-doc-jkn {
padding: 32px 16px
}

.info-doc-jkn h1 {
font-size: 38px;
margin: 0 0 16px
}

.info-doc-jkn h2 {
font-size: 21px;
margin: 32px 0 16px
}

.info-doc-jkn h3 {
font-size: 21px;
margin: 16px 0 8px
}

.info-doc-jkn p {
font-size: 21px
}

.info-doc-jkn ul {
font-size: 21px;
padding: 0 0 0 16px
}

.info-doc-jkn ol {
font-size: 21px;
padding: 0 0 0 16px
}

.info-doc-jkn table {
font-size: 13px;
display: block;
overflow-x: auto
}

.info-doc-jkn th {
font-size: 13px;
padding: 8px
}

.info-doc-jkn td {
font-size: 13px;
padding: 8px
}
}

.abtus {
background: #FFF;
color: #1d1d1d;
overflow-x: clip
}

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

.abtus .hdrgrd {
position: relative;
background: linear-gradient(135deg, #F90A8A 0%, #5A0AAF 100%);
padding: 96px 32px;
overflow: hidden
}

.abtus .hdrgrd::before {
content: '';
position: absolute;
top: 16px;
left: 16px;
width: 40px;
height: 40px;
border: 3px solid #ffffff4d;
border-radius: 2px;
transform: rotate(45deg)
}

.abtus .hdrgrd::after {
content: '';
position: absolute;
top: 96px;
right: 64px;
width: 40px;
height: 40px;
border: 3px solid #ffffff4d;
border-radius: 2px;
transform: rotate(45deg)
}

.abtus .hdrptn {
position: absolute;
bottom: 32px;
left: 32px;
display: flex;
gap: 16px
}

.abtus .hdrptn span {
width: 8px;
height: 8px;
background: #fff6;
border-radius: 2px
}

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

.abtus .hdrtxt {
max-width: 680px
}

.abtus .hdrtxt h1 {
font-size: 66px;
line-height: 1.2;
color: #FFF;
margin: 0 0 32px;
letter-spacing: -.02em
}

.abtus .hdrtxt p {
font-size: 21px;
line-height: 1.55;
color: #fffffff2;
margin: 0;
letter-spacing: .01em
}

.abtus .stryblk {
max-width: 1200px;
margin: 0 auto;
padding: 96px 32px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 64px;
position: relative
}

.abtus .stryblk::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #F90A8A 0%, #5A0AAF 100%);
transform: translateX(-50%) skewX(-3deg)
}

.abtus .strycol h2 {
font-size: 52px;
line-height: 1.2;
color: #5A0AAF;
margin: 0 0 32px;
letter-spacing: -.01em
}

.abtus .strycol p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0 0 32px;
letter-spacing: .01em
}

.abtus .strycol p:last-child {
margin-bottom: 0
}

.abtus .strysup {
padding-top: 64px
}

.abtus .strysup h3 {
font-size: 38px;
line-height: 1.2;
color: #F90A8A;
margin: 0 0 16px;
letter-spacing: -.005em
}

.abtus .strysup p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .tmblk {
background: linear-gradient(to bottom, #fef5fb 0%, #f5f0fc 100%);
padding: 96px 32px;
position: relative;
overflow: hidden
}

.abtus .tmblk::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, #f90a8a14 0%, transparent 50%);
pointer-events: none
}

.abtus .tmbg {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, #5a0aaf26 0%, transparent 70%);
border-radius: 40px;
top: 64px;
left: 64px;
animation: driftspot 18s ease-in-out infinite
}

@keyframes driftspot {

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

25% {
transform: translate(80px, 40px)
}

50% {
transform: translate(40px, 80px)
}

75% {
transform: translate(-40px, 40px)
}
}

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

.abtus .tmhdr {
text-align: center;
margin-bottom: 64px
}

.abtus .tmhdr h2 {
font-size: 52px;
line-height: 1.2;
color: #5A0AAF;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abtus .tmhdr p {
font-size: 21px;
line-height: 1.55;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .tmgrd {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px
}

.abtus .tmcrd {
background: #FFF;
border: 3px solid #F90A8A;
border-radius: 2px;
padding: 32px;
box-shadow: -1px 6px 20px 0 #f90a8a17;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative
}

.abtus .tmcrd:hover {
transform: translateY(-8px);
box-shadow: -1px 8px 60px 0 #f90a8a1c
}

.abtus .tmcrd::before {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: 2px solid #5A0AAF;
border-radius: 2px;
transform: rotate(45deg)
}

.abtus .tmimg {
width: 100%;
aspect-ratio: 2/3;
border-radius: 40px;
overflow: hidden;
margin-bottom: 24px;
border: 3px solid #5A0AAF;
position: relative
}

.abtus .tmimg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, #0006 100%);
pointer-events: none
}

.abtus .tmimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.abtus .tmcrd h3 {
font-size: 38px;
line-height: 1.2;
color: #F90A8A;
margin: 0 0 8px;
letter-spacing: -.005em
}

.abtus .tmcrd h4 {
font-size: 21px;
line-height: 1.55;
color: #5A0AAF;
margin: 0 0 16px;
letter-spacing: 0
}

.abtus .tmcrd p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .tmalt {
background: #FFF;
border: 3px solid #5A0AAF;
border-radius: 2px;
padding: 32px;
box-shadow: -1px 6px 20px 0 #5a0aaf17;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative
}

.abtus .tmalt:hover {
transform: translateY(-8px);
box-shadow: -1px 8px 60px 0 #5a0aaf1c
}

.abtus .tmalt::before {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: 2px solid #F90A8A;
border-radius: 2px;
transform: rotate(45deg)
}

.abtus .tmalt h3 {
font-size: 38px;
line-height: 1.2;
color: #5A0AAF;
margin: 0 0 8px;
letter-spacing: -.005em
}

.abtus .tmalt h4 {
font-size: 21px;
line-height: 1.55;
color: #F90A8A;
margin: 0 0 16px;
letter-spacing: 0
}

.abtus .tmalt p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .valblk {
max-width: 1200px;
margin: 0 auto;
padding: 96px 32px
}

.abtus .valhdr {
margin-bottom: 64px
}

.abtus .valhdr h2 {
font-size: 52px;
line-height: 1.2;
color: #F90A8A;
margin: 0 0 16px;
letter-spacing: -.01em;
display: inline-block;
background: linear-gradient(90deg, #f90a8a1a 0%, #5a0aaf1a 100%);
padding: 8px 32px;
border-radius: 2px
}

.abtus .vallst {
display: flex;
flex-direction: column;
gap: 0;
position: relative
}

.abtus .vallst::before {
content: '';
position: absolute;
left: 32px;
top: 48px;
bottom: 48px;
width: 3px;
background: linear-gradient(to bottom, #F90A8A 0%, #5A0AAF 100%)
}

.abtus .valitm {
display: flex;
gap: 32px;
align-items: flex-start;
position: relative;
padding: 32px 0
}

.abtus .valnum {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 40px;
background: #FFF;
border: 4px solid #F90A8A;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
line-height: 1;
color: #5A0AAF;
font-weight: 700;
letter-spacing: -.01em;
position: relative;
z-index: 1
}

.abtus .valitm:nth-child(even) .valnum {
border-color: #5A0AAF;
color: #F90A8A
}

.abtus .valtxt h3 {
font-size: 38px;
line-height: 1.2;
color: #5A0AAF;
margin: 0 0 16px;
letter-spacing: -.005em
}

.abtus .valitm:nth-child(even) .valtxt h3 {
color: #F90A8A
}

.abtus .valtxt p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .mtrcblk {
background: #FFF;
padding: 96px 32px;
position: relative
}

.abtus .mtrcbg {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 400px;
opacity: .4;
pointer-events: none
}

.abtus .mtrcbg::before,
.abtus .mtrcbg::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: #F90A8A;
transform-origin: top right
}

.abtus .mtrcbg::before {
transform: rotate(15deg)
}

.abtus .mtrcbg::after {
transform: rotate(30deg);
background: #5A0AAF
}

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

.abtus .mtrchdr {
margin-bottom: 64px
}

.abtus .mtrchdr h2 {
font-size: 52px;
line-height: 1.2;
color: #5A0AAF;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abtus .mtrchdr p {
font-size: 21px;
line-height: 1.55;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

.abtus .mtrcgrd {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
align-items: center
}

.abtus .mtrcbig {
text-align: center;
padding: 64px 32px;
background: linear-gradient(135deg, #f90a8a0d 0%, #5a0aaf0d 100%);
border-radius: 2px;
border: 4px solid #F90A8A;
position: relative
}

.abtus .mtrcbig::before {
content: '';
position: absolute;
bottom: 16px;
left: 16px;
width: 48px;
height: 48px;
border: 3px solid #5A0AAF;
border-radius: 2px;
transform: rotate(45deg)
}

.abtus .mtrcbig span {
display: block;
font-size: 66px;
line-height: 1;
color: #F90A8A;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -.02em
}

.abtus .mtrcbig p {
font-size: 21px;
line-height: 1.55;
color: #5A0AAF;
margin: 0;
letter-spacing: .01em
}

.abtus .mtrctbl {
background: #FFF;
border-radius: 2px;
overflow: hidden;
border: 3px solid #5A0AAF;
box-shadow: inset 0 2px 8px #5a0aaf0f
}

.abtus .mtrctbl table {
width: 100%;
border-collapse: collapse
}

.abtus .mtrctbl thead {
background: linear-gradient(90deg, #F90A8A 0%, #5A0AAF 100%)
}

.abtus .mtrctbl th {
padding: 16px;
text-align: left;
font-size: 21px;
line-height: 1.2;
color: #FFF;
letter-spacing: 0
}

.abtus .mtrctbl td {
padding: 16px;
font-size: 21px;
line-height: 1.55;
color: #2d2d2d;
border-bottom: 1px solid #5a0aaf1a;
letter-spacing: .01em
}

.abtus .mtrctbl tbody tr:last-child td {
border-bottom: none
}

.abtus .mtrctbl .clhigh {
background: #f90a8a14
}

.abtus .mtrctbl .clmed {
background: #5a0aaf14
}

.abtus .mtrctbl .cllow {
background: #f90a8a08
}

.abtus .aprblk {
background: linear-gradient(to bottom, #FFF 0%, #fef5fb 100%);
padding: 96px 32px;
position: relative
}

.abtus .aprcnt {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center
}

.abtus .aprimg {
width: 100%;
aspect-ratio: 4/3;
border-radius: 2px;
overflow: hidden;
border: 4px solid #5A0AAF;
box-shadow: -1px 8px 60px 0 #5a0aaf1c;
position: relative
}

.abtus .aprimg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, #00000059 100%);
pointer-events: none
}

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

.abtus .aprtxt h2 {
font-size: 52px;
line-height: 1.2;
color: #F90A8A;
margin: 0 0 32px;
letter-spacing: -.01em
}

.abtus .aprtxt p {
font-size: 21px;
line-height: 1.8;
color: #2d2d2d;
margin: 0 0 32px;
letter-spacing: .01em
}

.abtus .aprtxt p:last-child {
margin-bottom: 0
}

.abtus .aprlst {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px
}

.abtus .apritm {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #5a0aaf0d;
border-radius: 2px;
border-left: 4px solid #F90A8A;
transition: background .5s ease-in-out, transform .5s ease-in-out
}

.abtus .apritm:hover {
background: #5a0aaf1a;
transform: translateX(8px)
}

.abtus .aprico {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 40px;
background: #F90A8A;
display: flex;
align-items: center;
justify-content: center
}

.abtus .aprico::before {
content: '';
width: 12px;
height: 12px;
background: #FFF;
border-radius: 40px
}

.abtus .apritm p {
font-size: 21px;
line-height: 1.55;
color: #2d2d2d;
margin: 0;
letter-spacing: .01em
}

@media (max-width: 1024px) {
.abtus .hdrtxt h1 {
font-size: 52px
}

.abtus .stryblk {
grid-template-columns: 1fr;
gap: 32px
}

.abtus .stryblk::before {
display: none
}

.abtus .strysup {
padding-top: 0
}

.abtus .tmgrd {
grid-template-columns: repeat(2, 1fr)
}

.abtus .mtrcgrd {
grid-template-columns: 1fr;
gap: 32px
}

.abtus .aprcnt {
grid-template-columns: 1fr
}
}

@media (max-width: 768px) {
.abtus .hdrgrd {
padding: 64px 16px
}

.abtus .hdrtxt h1 {
font-size: 38px
}

.abtus .hdrtxt p {
font-size: 21px
}

.abtus .stryblk {
padding: 64px 16px
}

.abtus .strycol h2 {
font-size: 38px
}

.abtus .strysup h3 {
font-size: 21px
}

.abtus .tmblk {
padding: 64px 16px
}

.abtus .tmhdr h2 {
font-size: 38px
}

.abtus .tmgrd {
grid-template-columns: 1fr
}

.abtus .valblk {
padding: 64px 16px
}

.abtus .valhdr h2 {
font-size: 38px
}

.abtus .vallst::before {
left: 16px
}

.abtus .valnum {
width: 48px;
height: 48px;
font-size: 21px
}

.abtus .valtxt h3 {
font-size: 21px
}

.abtus .mtrcblk {
padding: 64px 16px
}

.abtus .mtrchdr h2 {
font-size: 38px
}

.abtus .mtrcbig {
padding: 32px 16px
}

.abtus .mtrcbig span {
font-size: 52px
}

.abtus .mtrctbl {
overflow-x: auto
}

.abtus .aprblk {
padding: 64px 16px
}

.abtus .aprtxt h2 {
font-size: 38px
}
}

@media (max-width: 480px) {
.abtus .hdrtxt h1 {
font-size: 38px
}

.abtus .strycol h2,
.abtus .tmhdr h2,
.abtus .valhdr h2,
.abtus .mtrchdr h2,
.abtus .aprtxt h2 {
font-size: 38px
}

.abtus .tmcrd h3,
.abtus .tmalt h3,
.abtus .valtxt h3 {
font-size: 21px
}

.abtus .mtrcbig span {
font-size: 38px
}
}

.base {
background: #FFF;
color: #1a0a2e;
overflow-x: clip
}

.base * {
box-sizing: border-box;
margin: 0;
padding: 0
}

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

.base button {
background: none;
border: none;
cursor: pointer;
font: inherit
}

.titlearea {
background: #5A0AAF;
color: #FFF;
padding: 96px 16px;
position: relative
}

.titlearea::before {
content: '';
position: absolute;
top: 32px;
left: 8%;
width: 180px;
height: 180px;
border-radius: 50%;
background: #ffffff14;
pointer-events: none
}

.titlearea::after {
content: '';
position: absolute;
bottom: 64px;
right: 12%;
width: 240px;
height: 240px;
border-radius: 50%;
background: #ffffff0d;
pointer-events: none
}

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

.titlearea h1 {
font-size: 66px;
line-height: 1.2;
letter-spacing: -.02em;
margin-bottom: 32px;
font-weight: 700
}

.titlearea p {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
max-width: 720px;
opacity: .95
}

.outcomes {
background: linear-gradient(165deg, #FFF 0%, #fef5fc 100%);
padding: 96px 16px;
position: relative
}

.outcomes::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background: #F90A8A
}

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

.outcomeslabel {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
color: #5A0AAF;
margin-bottom: 64px;
font-weight: 600
}

.outcomegrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px
}

.outcomecol {
display: flex;
flex-direction: column;
gap: 32px
}

.outcomecard {
background: #FFF;
padding: 32px;
border: 3px solid #F90A8A;
border-radius: 2px;
box-shadow: -1px 6px 20px 0 #5a0aaf17;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: bounceappear .6s ease-out
}

@keyframes bounceappear {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95)
}

60% {
transform: translateY(-4px) scale(1.01)
}

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

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

.outcomecard h3 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
color: #5A0AAF;
margin-bottom: 16px;
font-weight: 600;
background: #f90a8a1f;
padding: 8px 16px;
display: inline-block;
border-radius: 2px
}

.outcomecard p {
font-size: 13px;
line-height: 1.8;
letter-spacing: .02em;
color: #2a1a3e
}

.outcomephoto {
width: 100%;
height: 280px;
overflow: hidden;
border-radius: 2px;
position: relative;
border: 3px solid transparent;
transition: border-color .5s ease-in-out
}

.outcomephoto:hover {
border-color: #5A0AAF
}

.outcomephoto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}

.offerings {
background: #FFF;
padding: 96px 16px;
position: relative
}

.offerings::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: #fef5fc;
z-index: 0
}

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

.offeringslabel {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
color: #5A0AAF;
margin-bottom: 64px;
font-weight: 700;
text-align: center
}

.offerlist {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px
}

.offeritem {
background: #FFF;
padding: 32px;
border: 4px solid #5A0AAF;
border-radius: 40px;
position: relative;
overflow: hidden;
box-shadow: -1px 8px 60px 0 #f90a8a1c;
transition: filter .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.offeritem:hover {
filter: brightness(1.08)
}

.offeritem:nth-child(1) {
background: #f90a8a0f
}

.offeritem:nth-child(2) {
background: #5a0aaf0f
}

.offeritem:nth-child(3) {
background: #f90a8a0a
}

.offeritem h4 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
color: #F90A8A;
margin-bottom: 16px;
font-weight: 700
}

.offeritem p {
font-size: 13px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a1a3e;
margin-bottom: 16px
}

.offerdetail {
font-size: 13px;
line-height: 1.8;
letter-spacing: .02em;
color: #5A0AAF;
font-weight: 600
}

.testimonials {
background: #5A0AAF;
color: #FFF;
padding: 96px 16px;
position: relative
}

.testimonials::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background: repeating-linear-gradient(90deg, #F90A8A 0px, #F90A8A 20px, transparent 20px, transparent 24px, #FFF 24px, #FFF 44px, transparent 44px, transparent 48px)
}

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

.testimonialslabel {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
margin-bottom: 64px;
font-weight: 600
}

.testimonialrow {
display: grid;
grid-template-columns: 280px 1fr;
gap: 64px;
align-items: start
}

.testimonialprofile {
width: 280px;
height: 350px;
overflow: hidden;
border-radius: 40px;
position: relative;
border: 3px solid transparent;
transition: border-color .52s ease-in-out
}

.testimonialprofile:hover {
border-color: #F90A8A
}

.testimonialprofile img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top
}

.testimonialcontent {
display: flex;
flex-direction: column;
gap: 32px
}

.testimonialbox {
background: #ffffff1f;
padding: 32px;
border-radius: 2px;
border-left: 6px solid #F90A8A;
box-shadow: inset -1px 2px 5px 0 #f90a8a0d
}

.testimonialbox h5 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
margin-bottom: 16px;
font-weight: 600;
color: #F90A8A
}

.testimonialbox p {
font-size: 13px;
line-height: 1.8;
letter-spacing: .02em;
opacity: .95
}

.testimonialauthor {
font-size: 13px;
line-height: 1.55;
letter-spacing: .01em;
color: #F90A8A;
font-weight: 700;
margin-top: 16px
}

.journey {
background: #FFF;
padding: 96px 16px;
position: relative
}

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

.journeylabel {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
color: #5A0AAF;
margin-bottom: 64px;
font-weight: 700
}

.journeygrid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 64px
}

.journeymain {
display: flex;
flex-direction: column;
gap: 32px
}

.journeystep {
display: flex;
gap: 32px;
align-items: start;
position: relative
}

.journeystep::after {
content: '';
position: absolute;
left: 31px;
top: 64px;
bottom: -32px;
width: 2px;
background: linear-gradient(180deg, #F90A8A 0%, #f90a8a33 100%)
}

.journeystep:last-child::after {
display: none
}

.stepnum {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 2px;
background: #F90A8A;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
line-height: 1;
letter-spacing: -.01em;
font-weight: 700;
position: relative;
z-index: 1;
animation: pulse 2.4s ease-in-out infinite
}

@keyframes pulse {

0%,
100% {
opacity: 1
}

50% {
opacity: .75
}
}

.stepnum sup {
font-size: 21px;
font-weight: 600;
vertical-align: super;
margin-left: 2px
}

.stepcontent h6 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
color: #5A0AAF;
margin-bottom: 16px;
font-weight: 600
}

.stepcontent p {
font-size: 13px;
line-height: 1.8;
letter-spacing: .02em;
color: #2a1a3e
}

.journeyside {
display: flex;
flex-direction: column;
gap: 32px
}

.journeyphoto {
width: 100%;
height: 240px;
overflow: hidden;
border-radius: 40px;
position: relative;
border: 3px solid transparent;
transition: border-color .58s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.journeyphoto:hover {
border-color: #F90A8A
}

.journeyphoto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}

.journeynote {
background: #5a0aaf14;
padding: 32px;
border-radius: 2px;
border: 2px solid #5A0AAF
}

.journeynote p {
font-size: 13px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a1a3e
}

@media (max-width: 1024px) {
.titlearea h1 {
font-size: 52px
}

.outcomegrid {
grid-template-columns: 1fr;
gap: 32px
}

.offerlist {
grid-template-columns: 1fr
}

.testimonialrow {
grid-template-columns: 1fr;
gap: 32px
}

.testimonialprofile {
width: 100%;
max-width: 320px;
margin: 0 auto
}

.journeygrid {
grid-template-columns: 1fr
}
}

@media (max-width: 768px) {
.titlearea {
padding: 64px 16px
}

.titlearea h1 {
font-size: 38px
}

.titlearea p {
font-size: 13px
}

.outcomes,
.offerings,
.testimonials,
.journey {
padding: 64px 16px
}

.outcomeslabel,
.offeringslabel,
.testimonialslabel,
.journeylabel {
font-size: 38px;
margin-bottom: 32px
}

.outcomecard,
.offeritem,
.testimonialbox,
.journeynote {
padding: 16px
}

.journeystep {
gap: 16px
}

.stepnum {
width: 48px;
height: 48px;
font-size: 21px
}

.stepnum sup {
font-size: 13px
}

.journeystep::after {
left: 23px;
top: 48px
}
}

@media (max-width: 480px) {
.titlearea h1 {
font-size: 21px
}

.outcomeslabel,
.offeringslabel,
.testimonialslabel,
.journeylabel {
font-size: 21px
}

.outcomecard h3,
.offeritem h4,
.testimonialbox h5,
.stepcontent h6 {
font-size: 13px
}
}

.srvcs {
background: #FFF;
color: #1d1d1d;
overflow-x: clip
}

.srvcs .srvcsHd {
max-width: 1200px;
margin: 0 auto;
padding: 96px 32px 128px;
position: relative;
overflow: hidden
}

.srvcs .srvcsHd::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to right, #5a0aaf08 1px, transparent 1px), linear-gradient(to bottom, #5a0aaf08 1px, transparent 1px);
background-size: 64px 64px;
z-index: 0;
pointer-events: none
}

.srvcs .srvcsHdWrp {
display: flex;
flex-direction: row;
gap: 64px;
align-items: center;
position: relative;
z-index: 1
}

.srvcs .srvcsHdImgBox {
flex: 0 0 280px;
width: 280px;
height: 373px;
border-radius: 2px;
overflow: hidden;
position: relative
}

.srvcs .srvcsHdImgBox::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f90a8a47;
pointer-events: none;
z-index: 1
}

.srvcs .srvcsHdImgBox img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs .srvcsHdImgBox:hover img {
transform: scale(1.08)
}

.srvcs .srvcsHdTxt {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px
}

.srvcs .srvcsHdTtl {
font-size: 66px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
color: #5A0AAF;
margin: 0
}

.srvcs .srvcsHdDesc {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2d2d2d;
margin: 0
}

.srvcs .offrng {
background: linear-gradient(to bottom, #fef8fc 0%, #f9f3fb 100%);
padding: 96px 32px;
position: relative;
animation: bgPulse 8s ease-in-out infinite
}

@keyframes bgPulse {

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

50% {
filter: brightness(1.02)
}
}

.srvcs .offrngInr {
max-width: 1200px;
margin: 0 auto
}

.srvcs .offrngHd {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #2d2d2d;
margin: 0 0 64px;
text-align: center
}

.srvcs .offrngGrd {
display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr;
gap: 32px;
margin-bottom: 64px
}

.srvcs .offrngCrd {
background: #FFF;
border: 3px solid #F90A8A;
border-radius: 2px;
padding: 32px;
position: relative;
box-shadow: -1px 6px 20px 0 #f90a8a17;
transition: border-color .52s ease-in-out, box-shadow .52s ease-in-out;
display: flex;
flex-direction: column;
gap: 16px
}

.srvcs .offrngCrd:hover {
border-color: #5A0AAF;
box-shadow: -1px 8px 60px 0 #5a0aaf1c
}

.srvcs .offrngCrdTtl {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0;
position: relative;
padding-left: 16px
}

.srvcs .offrngCrdTtl::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #F90A8A
}

.srvcs .offrngCrdTxt {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #3d3d3d;
margin: 0
}

.srvcs .offrngFeat {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start
}

.srvcs .offrngFeatTxt {
flex: 2;
display: flex;
flex-direction: column;
gap: 32px
}

.srvcs .offrngFeatHd {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.005em;
font-weight: 700;
color: #2d2d2d;
margin: 0;
background: #F90A8A;
color: #FFF;
padding: 8px 16px;
display: inline-block;
border-radius: 2px;
align-self: flex-start
}

.srvcs .offrngFeatPara {
font-size: 21px;
line-height: 1.8;
letter-spacing: .01em;
color: #3d3d3d;
margin: 0;
columns: 2;
column-gap: 32px
}

.srvcs .offrngFeatSd {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px
}

.srvcs .offrngFeatSdItm {
background: #FFF;
border: 2px solid #5A0AAF;
border-radius: 40px;
padding: 16px 32px;
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #2d2d2d;
box-shadow: -1px 2px 5px 0 #5a0aaf0d;
transition: filter .48s ease-in-out
}

.srvcs .offrngFeatSdItm:hover {
filter: brightness(1.15)
}

.srvcs .offrngDcr {
position: absolute;
top: 32px;
right: 64px;
width: 120px;
height: 80px;
pointer-events: none;
z-index: 0
}

.srvcs .offrngDcrLn {
position: absolute;
background: #F90A8A;
opacity: .15;
border-radius: 2px
}

.srvcs .offrngDcrLn:nth-child(1) {
width: 3px;
height: 60px;
top: 0;
left: 0;
animation: lineExpand 3s ease-in-out infinite
}

.srvcs .offrngDcrLn:nth-child(2) {
width: 3px;
height: 45px;
top: 10px;
left: 20px;
animation: lineExpand 3s ease-in-out infinite .5s
}

.srvcs .offrngDcrLn:nth-child(3) {
width: 3px;
height: 55px;
top: 5px;
left: 40px;
animation: lineExpand 3s ease-in-out infinite 1s
}

.srvcs .offrngDcrLn:nth-child(4) {
width: 3px;
height: 50px;
top: 8px;
left: 60px;
animation: lineExpand 3s ease-in-out infinite 1.5s
}

@keyframes lineExpand {

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

50% {
transform: scaleY(1.3)
}
}

.srvcs .aprch {
background: #FFF;
padding: 96px 32px;
position: relative
}

.srvcs .aprchInr {
max-width: 1200px;
margin: 0 auto
}

.srvcs .aprchHd {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 64px
}

.srvcs .aprchSplit {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start;
margin-bottom: 64px
}

.srvcs .aprchSplitSd {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px
}

.srvcs .aprchSplitMn {
flex: 2;
display: flex;
flex-direction: column;
gap: 32px
}

.srvcs .aprchSubhd {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.005em;
font-weight: 700;
color: #2d2d2d;
margin: 0
}

.srvcs .aprchPara {
font-size: 21px;
line-height: 1.8;
letter-spacing: .01em;
color: #3d3d3d;
margin: 0
}

.srvcs .aprchStps {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 64px
}

.srvcs .aprchStps::before {
content: '';
position: absolute;
left: 20px;
top: 32px;
bottom: 32px;
width: 2px;
background: linear-gradient(to bottom, #F90A8A 0%, #5A0AAF 100%)
}

.srvcs .aprchStpItm {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
padding: 16px 0;
position: relative
}

.srvcs .aprchStpNum {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 40px;
background: #F90A8A;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
line-height: 1;
font-weight: 700;
position: absolute;
left: -64px;
top: 16px;
border: 3px solid #FFF;
box-shadow: -1px 2px 5px 0 #f90a8a0d
}

.srvcs .aprchStpCnt {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px
}

.srvcs .aprchStpTtl {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0
}

.srvcs .aprchStpTxt {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #3d3d3d;
margin: 0
}

.srvcs .aprchPrfl {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start
}

.srvcs .aprchPrflCrd {
flex: 1;
display: flex;
flex-direction: row;
gap: 32px;
background: #FFF;
border: 3px solid #5A0AAF;
border-radius: 2px;
padding: 32px;
box-shadow: -1px 6px 20px 0 #5a0aaf17 inset;
transition: filter .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs .aprchPrflCrd:hover {
filter: brightness(1.12)
}

.srvcs .aprchPrflImg {
flex: 0 0 120px;
width: 120px;
height: 160px;
border-radius: 2px;
overflow: hidden
}

.srvcs .aprchPrflImg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs .aprchPrflCrd:hover .aprchPrflImg img {
transform: scale(1.08)
}

.srvcs .aprchPrflCnt {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px
}

.srvcs .aprchPrflNm {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0
}

.srvcs .aprchPrflRl {
font-size: 13px;
line-height: 1.2;
letter-spacing: .02em;
color: #F90A8A;
margin: 0;
font-weight: 600
}

.srvcs .aprchPrflTxt {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #3d3d3d;
margin: 0
}

.srvcs .aprchDvdr {
margin: 64px 0;
height: 2px;
position: relative;
overflow: visible
}

.srvcs .aprchDvdr svg {
width: 100%;
height: 100%;
display: block
}

.srvcs .statshwcs {
background: #FFF;
padding: 96px 32px;
position: relative;
border-top: 2px solid #f90a8a26
}

.srvcs .statshwcsInr {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 64px;
align-items: center
}

.srvcs .statshwcsMn {
flex: 2;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
justify-content: center;
text-align: center
}

.srvcs .statshwcsHro {
font-size: 66px;
line-height: 1;
letter-spacing: -.02em;
font-weight: 700;
color: #F90A8A;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.srvcs .statshwcsHroNum {
font-size: 66px;
line-height: 1;
letter-spacing: -.03em
}

.srvcs .statshwcsHroLbl {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
color: #5A0AAF;
font-weight: 600
}

.srvcs .statshwcsSd {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px
}

.srvcs .statshwcsItm {
display: flex;
flex-direction: column;
gap: 8px
}

.srvcs .statshwcsItmNum {
font-size: 38px;
line-height: 1;
letter-spacing: -.01em;
font-weight: 700;
color: #5A0AAF;
margin: 0
}

.srvcs .statshwcsItmLbl {
font-size: 13px;
line-height: 1.2;
letter-spacing: .02em;
color: #3d3d3d;
margin: 0
}

.srvcs .statshwcsCntxt {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px
}

.srvcs .statshwcsCntxtTtl {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #2d2d2d;
margin: 0
}

.srvcs .statshwcsCntxtTxt {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #3d3d3d;
margin: 0
}

@media (max-width: 1024px) {
.srvcs .srvcsHdWrp {
flex-direction: column;
gap: 32px
}

.srvcs .srvcsHdImgBox {
flex: 0 0 auto;
width: 100%;
max-width: 400px;
height: 533px
}

.srvcs .offrngGrd {
grid-template-columns: 1fr 1fr
}

.srvcs .offrngFeat {
flex-direction: column;
gap: 32px
}

.srvcs .offrngFeatPara {
columns: 1
}

.srvcs .aprchSplit {
flex-direction: column;
gap: 32px
}

.srvcs .aprchPrfl {
flex-direction: column;
gap: 32px
}

.srvcs .statshwcsInr {
flex-direction: column;
gap: 32px
}
}

@media (max-width: 768px) {
.srvcs .srvcsHd {
padding: 64px 16px 96px
}

.srvcs .srvcsHdTtl {
font-size: 52px
}

.srvcs .srvcsHdDesc {
font-size: 21px
}

.srvcs .offrng {
padding: 64px 16px
}

.srvcs .offrngHd {
font-size: 38px;
margin-bottom: 32px
}

.srvcs .offrngGrd {
grid-template-columns: 1fr;
gap: 16px
}

.srvcs .offrngFeat {
gap: 32px
}

.srvcs .offrngFeatHd {
font-size: 21px
}

.srvcs .offrngFeatPara {
font-size: 21px
}

.srvcs .aprch {
padding: 64px 16px
}

.srvcs .aprchHd {
font-size: 38px;
margin-bottom: 32px
}

.srvcs .aprchSubhd {
font-size: 21px
}

.srvcs .aprchStps {
padding-left: 48px
}

.srvcs .aprchStps::before {
left: 16px
}

.srvcs .aprchStpNum {
left: -48px;
width: 32px;
height: 32px;
font-size: 13px
}

.srvcs .aprchPrflCrd {
flex-direction: column;
gap: 16px
}

.srvcs .aprchPrflImg {
width: 100%;
height: 320px
}

.srvcs .statshwcs {
padding: 64px 16px
}

.srvcs .statshwcsHro {
font-size: 52px
}

.srvcs .statshwcsHroNum {
font-size: 52px
}

.srvcs .statshwcsItmNum {
font-size: 21px
}
}

@media (max-width: 480px) {
.srvcs .srvcsHd {
padding: 32px 16px 64px
}

.srvcs .srvcsHdTtl {
font-size: 38px
}

.srvcs .srvcsHdDesc {
font-size: 21px
}

.srvcs .offrng {
padding: 32px 16px
}

.srvcs .offrngHd {
font-size: 21px
}

.srvcs .offrngCrd {
padding: 16px
}

.srvcs .aprch {
padding: 32px 16px
}

.srvcs .aprchHd {
font-size: 21px
}

.srvcs .statshwcs {
padding: 32px 16px
}

.srvcs .statshwcsHro {
font-size: 38px
}

.srvcs .statshwcsHroNum {
font-size: 38px
}
}

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

.msn .opnr {
max-width: 1200px;
margin: 0 auto;
padding: 64px 16px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 64px;
align-items: center;
position: relative
}

.msn .opnr::before {
content: '';
position: absolute;
left: -10%;
top: 20%;
width: 400px;
height: 400px;
background: linear-gradient(135deg, #f90a8a14 0%, #5a0aaf0d 100%);
clip-path: polygon(30% 0%, 100% 25%, 85% 100%, 0% 85%);
z-index: 1;
pointer-events: none
}

.msn .txtzone {
position: relative;
z-index: 2
}

.msn .leadh {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 32px;
animation: scaleReveal .55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
transform-origin: left center
}

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

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

.msn .leadh .altline {
display: block;
color: #F90A8A;
position: relative;
transition: transform .52s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.msn .leadh:hover .altline {
transform: translateX(16px)
}

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

.msn .keypts li {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a2a3e;
padding-left: 32px;
position: relative;
border-right: 4px solid #F90A8A;
padding-right: 16px;
transition: border-color .48s ease-in-out
}

.msn .keypts li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
background: #5A0AAF;
border-radius: 2px;
transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.msn .keypts li:hover::before {
transform: rotate(45deg)
}

.msn .keypts li:hover {
border-color: #5A0AAF
}

.msn .imgzone {
position: relative;
z-index: 2
}

.msn .opnrimg {
width: 100%;
height: 440px;
object-fit: cover;
object-position: center;
border-radius: 2px;
filter: grayscale(100%) contrast(1.3);
box-shadow: -1px 8px 60px 0 #5a0aaf1c
}

.msn .divline {
max-width: 1200px;
margin: 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #F90A8A 50%, transparent 100%)
}

.msn .valblk {
background: #f8f7fb;
padding: 96px 16px;
position: relative
}

.msn .valblk::before {
content: '';
position: absolute;
right: -5%;
bottom: 15%;
width: 350px;
height: 350px;
background: radial-gradient(ellipse at center, #f90a8a0f 0%, transparent 70%);
pointer-events: none;
z-index: 1
}

.msn .valcont {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2
}

.msn .valhead {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #FFF;
background: #5A0AAF;
display: inline-block;
padding: 8px 32px;
margin: 0 0 64px;
border-radius: 2px;
box-shadow: -1px 6px 20px 0 #5a0aaf17
}

.msn .valgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px
}

.msn .valcard {
background: #FFF;
padding: 32px;
border-radius: 40px;
box-shadow: inset -1px 2px 5px 0 #f90a8a0d;
transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative
}

.msn .valcard:nth-child(odd) {
margin-left: 0;
margin-right: 64px
}

.msn .valcard:nth-child(even) {
margin-left: 64px;
margin-right: 0
}

.msn .valcard:hover {
box-shadow: inset -1px 6px 20px 0 #f90a8a17
}

.msn .valcard .cardh {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #F90A8A;
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 16px
}

.msn .valcard .cardico {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #F90A8A 0%, #5A0AAF 100%);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: filter .52s ease-in-out
}

.msn .valcard:hover .cardico {
filter: brightness(1.2)
}

.msn .valcard .cardico svg {
width: 24px;
height: 24px;
fill: #FFF
}

.msn .valcard .cardtxt {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #3a3a4e;
margin: 0
}

.msn .profrow {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px;
align-items: start;
margin-top: 64px;
padding: 32px;
background: #FFF;
border-radius: 40px;
box-shadow: -1px 2px 5px 0 #5a0aaf0d
}

.msn .profimg {
width: 180px;
height: 252px;
object-fit: cover;
object-position: top;
border-radius: 2px;
box-shadow: -1px 6px 20px 0 #f90a8a17
}

.msn .profinfo {
display: flex;
flex-direction: column;
gap: 16px
}

.msn .profname {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0
}

.msn .proftitle {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #F90A8A;
margin: 0;
text-transform: uppercase
}

.msn .profbio {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #3a3a4e;
margin: 0
}

@media (max-width: 1024px) {
.msn .opnr {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 16px
}

.msn .leadh {
font-size: 38px
}

.msn .imgzone {
order: -1
}

.msn .opnrimg {
height: 320px
}

.msn .valgrid {
grid-template-columns: 1fr
}

.msn .valcard:nth-child(odd),
.msn .valcard:nth-child(even) {
margin-left: 0;
margin-right: 0
}

.msn .valhead {
font-size: 21px
}

.msn .profrow {
grid-template-columns: 1fr;
gap: 16px
}

.msn .profimg {
width: 100%;
height: auto;
aspect-ratio: 5/7
}
}

@media (max-width: 768px) {
.msn .leadh {
font-size: 21px
}

.msn .keypts li {
font-size: 13px
}

.msn .valblk {
padding: 64px 16px
}

.msn .valhead {
font-size: 21px;
padding: 8px 16px;
margin-bottom: 32px
}

.msn .valcard {
padding: 16px
}

.msn .valcard .cardh {
font-size: 21px
}

.msn .valcard .cardtxt {
font-size: 13px
}

.msn .profbio {
font-size: 13px
}
}

@media (max-width: 480px) {
.msn .opnr {
padding: 32px 8px
}

.msn .opnrimg {
height: 240px
}

.msn .valblk {
padding: 32px 8px
}

.msn .valcard .cardico {
width: 32px;
height: 32px
}

.msn .valcard .cardico svg {
width: 16px;
height: 16px
}

.msn .profrow {
padding: 16px
}
}

.learnprog {
background: #FFF;
color: #1d1d1d;
max-width: 100%;
overflow-x: clip
}

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

.learnprog .introsplit {
display: flex;
align-items: stretch;
min-height: 520px;
position: relative;
overflow: hidden;
background: linear-gradient(circle at 35% 45%, #f0f0f0, #FFF)
}

.learnprog .introsplit .txtzone {
flex: 1;
padding: 96px 64px 96px 96px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2
}

.learnprog .introsplit .imgzone {
flex: 1;
position: relative;
overflow: hidden;
padding: 32px
}

.learnprog .introsplit .imgzone img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(0.4) brightness(1.05);
border-radius: 2px;
box-shadow: -1px 6px 20px 0 #f90a8a17
}

.learnprog .introsplit .patternstrip {
position: absolute;
bottom: 32px;
left: 96px;
display: flex;
gap: 16px;
z-index: 3
}

.learnprog .introsplit .patternstrip .dot {
width: 8px;
height: 8px;
background: #F90A8A;
border-radius: 40px;
opacity: .3
}

.learnprog .introsplit .patternstrip .dot:nth-child(2) {
opacity: .5
}

.learnprog .introsplit .patternstrip .dot:nth-child(3) {
opacity: .7
}

.learnprog .introsplit .patternstrip .dot:nth-child(4) {
opacity: .9
}

.learnprog .introsplit h1 {
font-size: 66px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
margin: 0 0 32px;
color: #5A0AAF
}

.learnprog .introsplit .subdesc {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2d2d2d;
margin: 0
}

@media (max-width: 1024px) {
.learnprog .introsplit {
flex-direction: column;
min-height: auto
}

.learnprog .introsplit .txtzone {
padding: 64px 32px
}

.learnprog .introsplit .imgzone {
min-height: 380px
}

.learnprog .introsplit h1 {
font-size: 52px
}

.learnprog .introsplit .patternstrip {
left: 32px;
bottom: 16px
}
}

@media (max-width: 768px) {
.learnprog .introsplit h1 {
font-size: 38px
}

.learnprog .introsplit .subdesc {
font-size: 16px
}
}

.learnprog .curveaccent {
position: relative;
background: #fef5fb;
padding: 96px 32px;
overflow: visible
}

.learnprog .curveaccent::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 32px;
background-image: radial-gradient(circle at 16px 0, transparent 16px, #fef5fb 16px);
background-size: 32px 32px;
background-repeat: repeat-x
}

.learnprog .curveaccent .contain {
max-width: 1200px;
margin: 0 auto
}

.learnprog .curveaccent .headwrap {
background: linear-gradient(125deg, #F90A8A, #5A0AAF);
display: inline-block;
padding: 8px 32px;
border-radius: 2px;
margin-bottom: 64px
}

.learnprog .curveaccent .headwrap h2 {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
margin: 0;
color: #FFF
}

.learnprog .curveaccent .twocolgrid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 64px;
align-items: start
}

.learnprog .curveaccent .maincol p {
font-size: 21px;
line-height: 1.8;
letter-spacing: .005em;
color: #2d2d2d;
margin: 0 0 32px
}

.learnprog .curveaccent .maincol p:last-child {
margin-bottom: 0
}

.learnprog .curveaccent .sidecol {
background: #FFF;
padding: 32px;
border-radius: 2px;
border: 3px solid #5A0AAF;
box-shadow: inset -1px 2px 5px 0 #5a0aaf0d
}

.learnprog .curveaccent .sidecol .label {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
text-transform: uppercase;
color: #5A0AAF;
font-weight: 700;
margin: 0 0 16px
}

.learnprog .curveaccent .sidecol .value {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
color: #F90A8A;
margin: 0 0 8px
}

.learnprog .curveaccent .sidecol .note {
font-size: 13px;
line-height: 1.55;
letter-spacing: .01em;
color: #4d4d4d;
margin: 0
}

@media (max-width: 1024px) {
.learnprog .curveaccent .twocolgrid {
grid-template-columns: 1fr;
gap: 32px
}

.learnprog .curveaccent .headwrap h2 {
font-size: 32px
}

.learnprog .curveaccent .maincol p {
font-size: 18px
}
}

@media (max-width: 768px) {
.learnprog .curveaccent {
padding: 64px 16px
}

.learnprog .curveaccent .headwrap {
padding: 8px 16px
}

.learnprog .curveaccent .headwrap h2 {
font-size: 28px
}

.learnprog .curveaccent .sidecol {
padding: 24px
}
}

.learnprog .structmap {
background: #FFF;
padding: 96px 32px;
position: relative;
overflow: hidden
}

.learnprog .structmap .pulsebase {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 320px;
pointer-events: none;
z-index: 1
}

.learnprog .structmap .pulsering {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #f90a8a26;
border-radius: 50%;
animation: radialpulse 4.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

.learnprog .structmap .pulsering:nth-child(1) {
width: 120px;
height: 120px;
animation-delay: 0s
}

.learnprog .structmap .pulsering:nth-child(2) {
width: 180px;
height: 180px;
animation-delay: 1.2s
}

.learnprog .structmap .pulsering:nth-child(3) {
width: 240px;
height: 240px;
animation-delay: 2.4s
}

.learnprog .structmap .pulsering:nth-child(4) {
width: 300px;
height: 300px;
animation-delay: 3.6s
}

@keyframes radialpulse {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5)
}

20% {
opacity: 1
}

100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.4)
}
}

.learnprog .structmap .contain {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2
}

.learnprog .structmap h2 {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.015em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 64px;
text-align: center
}

.learnprog .structmap .chartzone {
max-width: 800px;
margin: 0 auto 64px;
position: relative
}

.learnprog .structmap .spiderweb {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 480px;
margin: 0 auto
}

.learnprog .structmap .spiderweb svg {
width: 100%;
height: 100%
}

.learnprog .structmap .axislabels {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}

.learnprog .structmap .axislabel {
position: absolute;
font-size: 13px;
line-height: 1.2;
letter-spacing: .01em;
font-weight: 700;
color: #5A0AAF;
white-space: nowrap
}

.learnprog .structmap .axislabel.top {
top: 0;
left: 50%;
transform: translateX(-50%)
}

.learnprog .structmap .axislabel.topright {
top: 12%;
right: 8%
}

.learnprog .structmap .axislabel.bottomright {
bottom: 28%;
right: 2%
}

.learnprog .structmap .axislabel.bottomleft {
bottom: 28%;
left: 2%
}

.learnprog .structmap .axislabel.topleft {
top: 12%;
left: 8%
}

.learnprog .structmap .threecol {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px
}

.learnprog .structmap .phasebox {
background: linear-gradient(135deg, #f9f9f9, #FFF);
border: 3px solid #F90A8A;
border-radius: 2px;
padding: 32px;
position: relative;
transition: border-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.learnprog .structmap .phasebox:hover {
border-color: #5A0AAF
}

.learnprog .structmap .phasebox .num {
font-size: 66px;
line-height: 1;
letter-spacing: -.03em;
font-weight: 700;
color: #f90a8a26;
margin: 0 0 16px
}

.learnprog .structmap .phasebox h3 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 16px
}

.learnprog .structmap .phasebox p {
font-size: 13px;
line-height: 1.55;
letter-spacing: .005em;
color: #3d3d3d;
margin: 0
}

@media (max-width: 1024px) {
.learnprog .structmap .threecol {
grid-template-columns: 1fr;
gap: 24px
}

.learnprog .structmap h2 {
font-size: 38px
}
}

@media (max-width: 768px) {
.learnprog .structmap {
padding: 64px 16px
}

.learnprog .structmap h2 {
font-size: 32px;
margin-bottom: 48px
}

.learnprog .structmap .phasebox {
padding: 24px
}

.learnprog .structmap .phasebox .num {
font-size: 52px
}
}

.learnprog .testimonialframe {
background: linear-gradient(165deg, #f90a8a08, #5a0aaf08);
padding: 96px 32px;
position: relative;
border-top: 4px solid #F90A8A;
border-bottom: 4px solid #5A0AAF
}

.learnprog .testimonialframe .framemarker {
position: absolute;
top: 0;
left: 64px;
width: 32px;
height: 32px;
background: #F90A8A;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

.learnprog .testimonialframe .framemarker.end {
top: auto;
bottom: 0;
left: auto;
right: 64px;
background: #5A0AAF
}

.learnprog .testimonialframe .contain {
max-width: 1200px;
margin: 0 auto
}

.learnprog .testimonialframe h2 {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 64px
}

.learnprog .testimonialframe .cardgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px
}

.learnprog .testimonialframe .testcard {
background: #FFF;
border: 2px solid #f90a8a33;
border-radius: 40px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: -1px 8px 60px 0 #5a0aaf1c;
transition: transform .5s ease-in-out, box-shadow .5s ease-in-out
}

.learnprog .testimonialframe .testcard:hover {
transform: translateY(-4px);
box-shadow: -1px 8px 60px 0 #5a0aaf2e
}

.learnprog .testimonialframe .testcard .toprow {
display: flex;
align-items: center;
gap: 16px
}

.learnprog .testimonialframe .testcard .portrait {
width: 80px;
height: 100px;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
border: 2px solid #F90A8A
}

.learnprog .testimonialframe .testcard .portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top
}

.learnprog .testimonialframe .testcard .nameblock h4 {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 8px
}

.learnprog .testimonialframe .testcard .nameblock .role {
font-size: 13px;
line-height: 1.55;
letter-spacing: .01em;
color: #6d6d6d;
margin: 0
}

.learnprog .testimonialframe .testcard .quote {
font-size: 13px;
line-height: 1.8;
letter-spacing: .005em;
color: #2d2d2d;
margin: 0;
font-style: italic
}

.learnprog .testimonialframe .imgshowcase {
margin-top: 64px;
display: flex;
gap: 32px;
align-items: center
}

.learnprog .testimonialframe .showcaseimg {
flex: 1;
border-radius: 2px;
overflow: hidden;
border: 3px solid #5A0AAF;
box-shadow: -1px 6px 20px 0 #f90a8a17;
position: relative
}

.learnprog .testimonialframe .showcaseimg img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: center;
display: block
}

.learnprog .testimonialframe .showcaseimg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: linear-gradient(to top, #5a0aaf66, transparent);
pointer-events: none
}

.learnprog .testimonialframe .divshape {
width: 2px;
height: 120px;
background: linear-gradient(to bottom, #F90A8A, #5A0AAF);
position: relative
}

.learnprog .testimonialframe .divshape::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: #F90A8A;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

@media (max-width: 1024px) {
.learnprog .testimonialframe .imgshowcase {
flex-direction: column
}

.learnprog .testimonialframe .divshape {
width: 120px;
height: 2px
}

.learnprog .testimonialframe .cardgrid {
grid-template-columns: 1fr
}
}

@media (max-width: 768px) {
.learnprog .testimonialframe {
padding: 64px 16px
}

.learnprog .testimonialframe h2 {
font-size: 32px;
margin-bottom: 48px
}

.learnprog .testimonialframe .testcard {
padding: 24px
}

.learnprog .testimonialframe .framemarker {
left: 16px
}

.learnprog .testimonialframe .framemarker.end {
right: 16px
}
}

@media (max-width: 480px) {
.learnprog .testimonialframe .cardgrid {
grid-template-columns: 1fr
}

.learnprog .testimonialframe .testcard .toprow {
flex-direction: column;
text-align: center
}
}

.touchbase {
background: #FFF;
color: #1a0a14;
max-width: 100%;
overflow-x: clip
}

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

.touchbase .topframe {
max-width: 1200px;
margin: 0 auto;
padding: 64px 32px;
display: grid;
grid-template-columns: 380px 1fr;
gap: 64px;
align-items: start;
position: relative
}

.touchbase .imgbox {
position: relative;
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 2px;
border: 3px solid #F90A8A;
background: linear-gradient(135deg, #5A0AAF 0%, #F90A8A 100%)
}

.touchbase .imgbox::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, #ffffff05 0px, transparent 1px, transparent 16px, #ffffff05 17px), repeating-linear-gradient(90deg, #ffffff05 0px, transparent 1px, transparent 16px, #ffffff05 17px);
pointer-events: none;
z-index: 2
}

.touchbase .imgbox::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 35% 45%, transparent 30%, #5a0aaf66 100%);
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1
}

.touchbase .txtside {
padding: 16px 0
}

.touchbase .txtside h1 {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 32px
}

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

.touchbase .brieflist li {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a1a24;
padding-left: 32px;
position: relative
}

.touchbase .brieflist li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 16px;
height: 16px;
background: #F90A8A;
clip-path: polygon(0 50%, 35% 85%, 100% 20%, 90% 10%, 35% 65%, 10% 40%);
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.touchbase .brieflist li:hover::before {
transform: scale(1.15)
}

.touchbase .splitzone {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px
}

.touchbase .colorside {
background: linear-gradient(145deg, #5A0AAF 0%, #7a1acf 100%);
padding: 64px 64px 64px 96px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden
}

.touchbase .colorside::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, #f90a8a26 0%, transparent 70%);
pointer-events: none
}

.touchbase .colorside::after {
content: '';
position: absolute;
bottom: 32px;
left: 32px;
width: 80px;
height: 80px;
background: #F90A8A;
transform: rotate(45deg);
opacity: .3;
border-radius: 2px
}

.touchbase .colorside h2 {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #FFF;
margin: 0 0 32px;
position: relative;
z-index: 1
}

.touchbase .contactgrid {
display: flex;
flex-direction: column;
gap: 32px;
position: relative;
z-index: 1
}

.touchbase .contactitem {
display: flex;
flex-direction: column;
gap: 8px
}

.touchbase .contactlabel {
font-size: 13px;
line-height: 1.55;
letter-spacing: .08em;
text-transform: uppercase;
color: #ffffffb3;
font-weight: 600
}

.touchbase .contactvalue {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #FFF;
font-weight: 500;
transition: filter .5s ease-in-out
}

.touchbase .contactvalue:hover {
filter: brightness(1.25)
}

.touchbase .contactvalue a {
color: inherit;
text-decoration: none;
transition: filter .5s ease-in-out
}

.touchbase .contactvalue a:hover {
filter: brightness(1.25)
}

.touchbase .neutralside {
background: #f5f3f8;
padding: 64px 96px 64px 64px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative
}

.touchbase .neutralside::before {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 120px;
height: 120px;
border: 2px solid #F90A8A;
transform: rotate(45deg);
opacity: .2;
border-radius: 2px;
pointer-events: none
}

.touchbase .formlabel {
font-size: 13px;
line-height: 1.55;
letter-spacing: .06em;
text-transform: uppercase;
color: #5A0AAF;
font-weight: 600;
margin: 0 0 8px;
display: block
}

.touchbase .formfield {
width: 100%;
padding: 16px;
border: 2px solid #5A0AAF;
border-radius: 2px;
background: #FFF;
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a1a24;
transition: box-shadow .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-family: inherit
}

.touchbase .formfield:focus {
outline: none;
border-color: #F90A8A;
box-shadow: -1px 6px 20px 0 #f90a8a17
}

.touchbase .formfield::placeholder {
font-style: italic;
opacity: .55;
color: #6a5a64
}

.touchbase .formrow {
margin-bottom: 32px
}

.touchbase .radiogroup {
display: flex;
gap: 16px;
margin-top: 8px
}

.touchbase .radiowrap {
position: relative
}

.touchbase .radiowrap input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0
}

.touchbase .radiolabel {
display: inline-block;
padding: 16px 32px;
border: 3px solid #5A0AAF;
border-radius: 40px;
background: #FFF;
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #5A0AAF;
cursor: pointer;
transition: background .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out;
font-weight: 600
}

.touchbase .radiowrap input[type="radio"]:checked+.radiolabel {
background: #5A0AAF;
color: #FFF;
border-color: #5A0AAF
}

.touchbase .radiowrap input[type="radio"]:focus+.radiolabel {
box-shadow: -1px 6px 20px 0 #5a0aaf17
}

.touchbase .conditional {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
margin-top: 0
}

.touchbase #typeProject:checked~.conditional.projectfield,
.touchbase #typeGeneral:checked~.conditional.generalfield {
max-height: 200px;
opacity: 1;
margin-top: 32px
}

.touchbase .checkwrap {
display: flex;
align-items: start;
gap: 16px;
margin-bottom: 32px
}

.touchbase .checkwrap input[type="checkbox"] {
width: 24px;
height: 24px;
border: 2px solid #5A0AAF;
border-radius: 2px;
cursor: pointer;
flex-shrink: 0;
margin-top: 4px;
accent-color: #5A0AAF
}

.touchbase .checklabel {
font-size: 13px;
line-height: 1.8;
letter-spacing: .02em;
color: #4a3a44
}

.touchbase .checklabel a {
color: #F90A8A;
text-decoration: none;
transition: filter .5s ease-in-out
}

.touchbase .checklabel a:hover {
filter: brightness(1.3)
}

.touchbase .submitbtn {
width: 100%;
padding: 16px 32px;
border: 4px solid #F90A8A;
border-radius: 2px;
background: #F90A8A;
color: #FFF;
font-size: 21px;
line-height: 1.55;
letter-spacing: .02em;
font-weight: 700;
cursor: pointer;
transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-family: inherit
}

.touchbase .submitbtn:hover {
filter: brightness(1.2);
transform: translateY(-2px)
}

.touchbase .submitbtn:active {
transform: translateY(0)
}

.touchbase .metricszone {
max-width: 1200px;
margin: 0 auto;
padding: 96px 32px;
position: relative
}

.touchbase .metricszone::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #5A0AAF 50%, transparent 100%)
}

.touchbase .waveline {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 40px;
overflow: visible;
pointer-events: none
}

.touchbase .waveline svg {
width: 100%;
height: 100%
}

.touchbase .metricszone h2 {
font-size: 38px;
line-height: 1.2;
letter-spacing: -.01em;
font-weight: 700;
color: #5A0AAF;
margin: 0 0 64px;
text-align: center;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%)
}

.touchbase .metricszone h2::before {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 8px;
background: #f90a8a40;
border-radius: 2px;
z-index: -1
}

.touchbase .statgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px
}

.touchbase .statcard {
background: #FFF;
border: 3px solid #F90A8A;
border-radius: 2px;
padding: 32px;
position: relative;
overflow: hidden;
transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: -1px 2px 5px 0 #5a0aaf0d
}

.touchbase .statcard:hover {
transform: rotate(2deg);
box-shadow: -1px 8px 60px 0 #f90a8a1c
}

.touchbase .statcard::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, #5a0aaf0d 0%, transparent 60%);
opacity: 0;
transition: opacity .65s ease-in-out;
pointer-events: none
}

.touchbase .statcard:hover::before {
opacity: 1
}

.touchbase .statnum {
font-size: 66px;
line-height: 1.2;
letter-spacing: -.03em;
font-weight: 700;
color: #F90A8A;
margin: 0 0 8px;
position: relative
}

.touchbase .statbadge {
position: absolute;
top: -12px;
right: -12px;
width: 48px;
height: 48px;
background: #5A0AAF;
color: #FFF;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
line-height: 1;
font-weight: 700;
box-shadow: -1px 6px 20px 0 #5a0aaf17
}

.touchbase .statlabel {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2a1a24;
font-weight: 500
}

@media (max-width: 1024px) {
.touchbase .topframe {
grid-template-columns: 1fr;
gap: 32px;
padding: 64px 32px
}

.touchbase .imgbox {
max-width: 400px;
margin: 0 auto
}

.touchbase .txtside {
text-align: center
}

.touchbase .brieflist li {
padding-left: 0;
text-align: left
}

.touchbase .splitzone {
grid-template-columns: 1fr
}

.touchbase .colorside {
padding: 64px 32px
}

.touchbase .neutralside {
padding: 64px 32px
}

.touchbase .statgrid {
grid-template-columns: 1fr;
gap: 32px
}
}

@media (max-width: 768px) {
.touchbase .topframe {
padding: 32px 16px
}

.touchbase .txtside h1 {
font-size: 38px
}

.touchbase .brieflist li {
font-size: 21px
}

.touchbase .colorside {
padding: 32px 16px
}

.touchbase .colorside h2 {
font-size: 32px
}

.touchbase .neutralside {
padding: 32px 16px
}

.touchbase .radiogroup {
flex-direction: column;
gap: 16px
}

.touchbase .radiolabel {
display: block;
text-align: center
}

.touchbase .metricszone {
padding: 64px 16px
}

.touchbase .metricszone h2 {
font-size: 32px
}

.touchbase .statnum {
font-size: 52px
}
}

@media (max-width: 480px) {
.touchbase .txtside h1 {
font-size: 32px
}

.touchbase .brieflist li {
font-size: 21px
}

.touchbase .colorside h2 {
font-size: 28px
}

.touchbase .contactvalue {
font-size: 21px;
word-break: break-word
}

.touchbase .formfield {
font-size: 21px
}

.touchbase .radiolabel {
font-size: 21px;
padding: 16px
}

.touchbase .submitbtn {
font-size: 21px
}

.touchbase .metricszone h2 {
font-size: 28px
}

.touchbase .statnum {
font-size: 38px
}

.touchbase .statlabel {
font-size: 21px
}
}

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

.successpg .successwrap {
max-width: 1200px;
width: 100%;
margin: 0 auto
}

.successpg .successcard {
background: #FFF;
border: 3px solid #F90A8A;
border-radius: 40px;
padding: 64px 32px;
text-align: center;
box-shadow: -1px 6px 20px 0 #f90a8a17;
position: relative;
overflow: hidden
}

.successpg .successcard::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, #5a0aaf08 0%, transparent 70%);
pointer-events: none
}

.successpg .iconcirc {
width: 96px;
height: 96px;
margin: 0 auto 32px;
border-radius: 2px;
background: linear-gradient(135deg, #F90A8A 0%, #5A0AAF 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative
}

.successpg .iconcirc svg {
width: 52px;
height: 52px;
stroke: #FFF;
stroke-width: 3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round
}

.successpg .mainhdg {
font-size: 52px;
line-height: 1.2;
letter-spacing: -.02em;
color: #5A0AAF;
margin: 0 0 16px;
font-weight: 700
}

.successpg .submsg {
font-size: 21px;
line-height: 1.55;
letter-spacing: .01em;
color: #2A2A2A;
margin: 0 0 32px;
max-width: 640px;
margin-left: auto;
margin-right: auto
}

.successpg .detailbox {
background: #FAFAFA;
border: 2px solid #F90A8A;
border-radius: 2px;
padding: 32px;
margin: 0 0 32px;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.successpg .detailbox .detailhdg {
font-size: 21px;
line-height: 1.2;
letter-spacing: 0;
color: #5A0AAF;
margin: 0 0 16px;
font-weight: 600
}

.successpg .detailbox .detailtxt {
font-size: 13px;
line-height: 1.55;
letter-spacing: .02em;
color: #4A4A4A;
margin: 0
}

.successpg .detailbox .detailtxt+.detailtxt {
margin-top: 8px
}

.successpg .actionrow {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px
}

.successpg .btnprim {
font-size: 13px;
line-height: 1.2;
letter-spacing: .03em;
padding: 16px 32px;
border: 3px solid #F90A8A;
background: #F90A8A;
color: #FFF;
border-radius: 2px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: filter .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer
}

.successpg .btnprim:hover {
filter: brightness(1.15)
}

.successpg .btnsec {
font-size: 13px;
line-height: 1.2;
letter-spacing: .03em;
padding: 16px 32px;
border: 3px solid #5A0AAF;
background: #FFF;
color: #5A0AAF;
border-radius: 2px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: filter .55s ease-in-out;
cursor: pointer
}

.successpg .btnsec:hover {
filter: brightness(0.95)
}

.successpg .footnote {
font-size: 13px;
line-height: 1.8;
letter-spacing: .01em;
color: #6A6A6A;
margin: 32px 0 0;
max-width: 560px;
margin-left: auto;
margin-right: auto
}

@media (max-width: 768px) {
.successpg {
padding: 64px 16px
}

.successpg .successcard {
padding: 32px 16px
}

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

.successpg .submsg {
font-size: 21px
}

.successpg .detailbox {
padding: 16px
}

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

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

@media (max-width: 480px) {
.successpg .iconcirc {
width: 64px;
height: 64px;
margin-bottom: 16px
}

.successpg .iconcirc svg {
width: 32px;
height: 32px
}

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