@import "https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap";

html {
box-sizing: border-box
}

body {
margin: 0;
min-height: 100dvh;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #10131C;
background: #F2F6F8;
display: flex;
flex-direction: column
}

.topband {
background: linear-gradient(135deg, #fff 0%, #F2F6F8 100%);
border-bottom: 1px solid #10131c14;
position: relative;
padding: 20px 0
}

.topband::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, #e8a7fd05 35px, #e8a7fd05 70px);
pointer-events: none
}

.topgrid {
max-width: 1366px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
align-items: center
}

.brandblock {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 2
}

.logoholder {
display: flex;
align-items: center;
gap: 20px
}

.logoframe {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 12px;
box-shadow: -1px 5px 18px 0 #10131c1c 0 0 0 1px #e8a7fd26;
padding: 12px;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.logoframe:hover {
transform: translateY(-2px);
box-shadow: -1px 12px 52px 0 #10131c24 0 0 0 1px #e8a7fd40
}

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

.companyname {
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.02em;
color: #10131C;
margin: 0
}

.tagline {
font-size: 16px;
line-height: 1.4;
color: #10131cb3;
max-width: 520px;
margin: 0
}

.navzone {
display: flex;
align-items: center;
position: relative;
z-index: 2
}

.primarynav {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0
}

.navitem {
margin: 0
}

.navlink {
display: block;
padding: 12px 20px;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #10131C;
text-decoration: none;
background: #fff;
border: 2px solid #10131c1f;
border-radius: 6px;
transition: background .18s cubic-bezier(0.4, 0, 0.2, 1), border-color .18s cubic-bezier(0.4, 0, 0.2, 1), color .18s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.navlink::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(180deg, #e8a7fd26 0%, #e8a7fd4d 100%);
transition: height .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.navlink:hover {
background: #fff;
border-color: #E8A7FD;
color: #10131C;
transform: translateY(-1px)
}

.navlink:hover::before {
height: 100%
}

.navlink:focus {
outline: 3px solid #e8a7fd80;
outline-offset: 2px
}

.navlink:active {
transform: translateY(0);
box-shadow: inset -1px 2px 6px 0 #10131c14
}

@media (max-width: 1200px) {
.topgrid {
gap: 32px;
padding: 0 20px
}

.tagline {
font-size: 16px
}

.primarynav {
gap: 8px
}

.navlink {
padding: 12px 20px;
font-size: 16px
}
}

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

.brandblock {
gap: 12px
}

.navzone {
justify-content: flex-start
}

.primarynav {
width: 100%
}

.logoframe {
width: 64px;
height: 64px
}

.companyname {
font-size: 22px
}
}

@media (max-width: 600px) {
.topband {
padding: 20px 0
}

.topgrid {
padding: 0 12px;
gap: 20px
}

.logoholder {
gap: 12px
}

.logoframe {
width: 56px;
height: 56px;
padding: 8px
}

.companyname {
font-size: 18px
}

.tagline {
font-size: 16px
}

.primarynav {
gap: 8px
}

.navlink {
padding: 12px 20px;
font-size: 16px
}
}

main {
flex: 1
}

.bottomband {
background: #ffffffb3;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid #10131c14;
padding: 64px 0 32px;
position: relative;
margin-top: 64px
}

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

.footergrid {
max-width: 1366px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 64px
}

.footercolumn {
display: flex;
flex-direction: column;
gap: 20px
}

.footerlogobox {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px
}

.footerlogoframe {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 12px;
box-shadow: -1px 2px 6px 0 #10131c14;
padding: 12px;
border: 1px solid #e8a7fd33
}

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

.footerdesc {
font-size: 16px;
line-height: 1.6;
color: #10131cb3;
margin: 0;
max-width: 340px
}

.footerheading {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -.01em;
color: #10131C;
margin: 0 0 12px
}

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

.footerlistitem {
margin: 0
}

.footerlink {
font-size: 16px;
line-height: 1.4;
color: #10131ccc;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px
}

.footerlink:hover {
color: #10131C
}

.footerlink:focus {
outline: 2px solid #e8a7fd99;
outline-offset: 2px
}

.footerlink i {
font-size: 18px;
color: #E8A7FD
}

.contactdetail {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 1.6;
color: #10131ccc
}

.contactdetail i {
font-size: 20px;
color: #E8A7FD;
margin-top: 2px;
flex-shrink: 0
}

.contacttext {
display: flex;
flex-direction: column;
gap: 4px
}

.contactlabel {
font-weight: 700;
color: #10131C;
font-size: 16px
}

.contactvalue {
color: #10131ccc
}

.contactvalue a {
color: inherit;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactvalue a:hover {
color: #10131C
}

.contactvalue a:focus {
outline: 2px solid #e8a7fd99;
outline-offset: 2px
}

.legalrow {
max-width: 1366px;
margin: 32px auto 0;
padding: 32px 32px 0;
border-top: 1px solid #10131c14;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap
}

.copyright {
font-size: 16px;
line-height: 1.4;
color: #10131c99;
margin: 0
}

.legallinks {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0
}

.legallinks li {
margin: 0
}

.legallinks a {
font-size: 16px;
line-height: 1.4;
color: #10131cb3;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.legallinks a:hover {
color: #10131C
}

.legallinks a:focus {
outline: 2px solid #e8a7fd99;
outline-offset: 2px
}

@media (max-width: 1200px) {
.footergrid {
gap: 32px;
padding: 0 20px
}

.legalrow {
padding: 32px 20px 0
}
}

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

.footercolumn:first-child {
grid-column: 1 / -1
}
}

@media (max-width: 600px) {
.bottomband {
padding: 32px 0 20px;
margin-top: 32px
}

.footergrid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 12px
}

.footercolumn:first-child {
grid-column: 1
}

.legalrow {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 20px 12px 0
}

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

.consentbox {
position: fixed;
bottom: 32px;
left: 32px;
max-width: 420px;
background: #fff;
border: 2px solid #10131c1f;
border-radius: 12px;
padding: 32px;
box-shadow: -1px 12px 52px 0 #10131c24;
z-index: 4000;
display: none;
transform: translateY(100px);
opacity: 0;
transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1), opacity .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.consentbox.visible {
transform: translateY(0);
opacity: 1
}

.consenttitle {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
color: #10131C;
margin: 0 0 12px
}

.consenttext {
font-size: 16px;
line-height: 1.6;
color: #10131ccc;
margin: 0 0 20px
}

.consentactions {
display: flex;
gap: 12px
}

.consentbtn {
flex: 1;
padding: 12px 20px;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #10131C;
background: transparent;
border: 2px solid #10131c1f;
border-radius: 6px;
cursor: pointer;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Oxygen', sans-serif
}

.consentbtn:hover {
background: #e8a7fd1a;
border-color: #E8A7FD
}

.consentbtn:focus {
outline: 3px solid #e8a7fd80;
outline-offset: 2px
}

.consentbtn:active {
box-shadow: inset -1px 2px 6px 0 #10131c14
}

@media (max-width: 600px) {
.consentbox {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
padding: 20px
}

.consentactions {
flex-direction: column
}
}

.policy-article {
max-width: 1366px;
margin: 0 auto;
padding: 64px 32px;
background: #fff
}

@media (max-width: 900px) {
.policy-article {
padding: 32px 20px
}
}

@media (max-width: 600px) {
.policy-article {
padding: 20px 12px
}
}

.policy-article h1 {
font-size: 56px;
line-height: 1.15;
margin: 0 0 32px;
color: #10131C;
letter-spacing: -.02em
}

.policy-article h2 {
font-size: 40px;
line-height: 1.15;
margin: 64px 0 20px;
color: #10131C;
letter-spacing: -.01em
}

.policy-article h3 {
font-size: 28px;
line-height: 1.4;
margin: 32px 0 12px;
color: #10131C;
letter-spacing: -.01em
}

.policy-article h4 {
font-size: 22px;
line-height: 1.4;
margin: 32px 0 12px;
color: #10131C
}

.policy-article h5 {
font-size: 18px;
line-height: 1.4;
margin: 20px 0 8px;
color: #10131C
}

.policy-article h6 {
font-size: 16px;
line-height: 1.4;
margin: 20px 0 8px;
color: #10131C
}

@media (max-width: 900px) {
.policy-article h1 {
font-size: 40px;
margin-bottom: 20px
}

.policy-article h2 {
font-size: 28px;
margin-top: 32px
}

.policy-article h3 {
font-size: 22px
}
}

@media (max-width: 600px) {
.policy-article h1 {
font-size: 28px;
margin-bottom: 12px
}

.policy-article h2 {
font-size: 22px;
margin-top: 20px
}

.policy-article h3 {
font-size: 18px
}
}

.policy-article p {
font-size: 18px;
line-height: 1.6;
margin: 0 0 20px;
color: #10131C
}

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

.policy-article ul,
.policy-article ol {
font-size: 18px;
line-height: 1.6;
margin: 0 0 20px;
padding-left: 32px;
color: #10131C
}

@media (max-width: 600px) {

.policy-article ul,
.policy-article ol {
font-size: 16px;
padding-left: 20px
}
}

.policy-article li {
margin-bottom: 8px
}

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

.policy-article ul ul,
.policy-article ul ol,
.policy-article ol ul,
.policy-article ol ol {
margin-top: 8px;
margin-bottom: 8px
}

.policy-article a {
color: #E8A7FD;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-bottom-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.policy-article a:hover {
border-bottom-color: #E8A7FD
}

.policy-article a:active {
color: #10131C;
border-bottom-color: #10131C
}

.policy-article table {
width: 100%;
border-collapse: collapse;
margin: 32px 0;
font-size: 16px;
line-height: 1.4;
background: #fff;
border: 2px solid #F2F6F8;
border-radius: 12px;
overflow: hidden
}

@media (max-width: 900px) {
.policy-article table {
font-size: 16px;
margin: 20px 0
}
}

.policy-article thead {
background: #F2F6F8
}

.policy-article th {
padding: 20px;
text-align: left;
font-weight: 600;
color: #10131C;
border-bottom: 2px solid #E8A7FD
}

@media (max-width: 600px) {
.policy-article th {
padding: 12px
}
}

.policy-article td {
padding: 20px;
border-bottom: 1px solid #F2F6F8;
color: #10131C
}

@media (max-width: 600px) {
.policy-article td {
padding: 12px
}
}

.policy-article tbody tr:last-child td {
border-bottom: none
}

.policy-article tbody tr:hover {
background: #e8a7fd0a
}

.policy-article hr {
border: none;
height: 2px;
background: #F2F6F8;
margin: 64px 0;
border-radius: 6px
}

@media (max-width: 900px) {
.policy-article hr {
margin: 32px 0
}
}

@media (max-width: 600px) {
.policy-article hr {
margin: 20px 0
}
}

.policy-article div {
margin: 0
}

.policy-article strong,
.policy-article b {
font-weight: 600;
color: #10131C
}

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

.policy-article blockquote {
margin: 32px 0;
padding: 20px 32px;
border-left: 4px solid #E8A7FD;
background: #F2F6F8;
border-radius: 12px;
font-size: 18px;
line-height: 1.6;
color: #10131C
}

@media (max-width: 600px) {
.policy-article blockquote {
margin: 20px 0;
padding: 12px 20px;
font-size: 16px
}
}

.policy-article code {
background: #F2F6F8;
padding: 4px 8px;
border-radius: 6px;
font-size: 16px;
color: #10131C
}

.policy-article pre {
background: #F2F6F8;
padding: 20px;
border-radius: 12px;
overflow-x: auto;
margin: 20px 0
}

.policy-article pre code {
background: none;
padding: 0
}

.contactpage {
background: #F2F6F8;
overflow-x: clip
}

.contactpage .formwrapper {
max-width: 1366px;
margin: 0 auto;
padding: 64px 32px;
position: relative
}

.contactpage .formwrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(83deg, #e8a7fd08 0%, #10131c05 68%);
pointer-events: none;
animation: aurorashift 18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
z-index: 0
}

@keyframes aurorashift {

0%,
100% {
background: linear-gradient(83deg, #e8a7fd08 0%, #10131c05 68%)
}

50% {
background: linear-gradient(83deg, #10131c05 0%, #e8a7fd0a 72%)
}
}

.contactpage .formcontent {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 64px;
align-items: start
}

.contactpage .dividerline {
width: 1px;
height: 100%;
background: linear-gradient(83deg, #E8A7FD 0%, #10131C 68%);
opacity: .2;
align-self: stretch
}

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

.contactpage .leftside h1 {
font-size: 56px;
line-height: 1.15;
color: #10131C;
letter-spacing: -.02em;
margin: 0
}

.contactpage .leftside h1 span {
display: block
}

.contactpage .leftside .description {
font-size: 18px;
line-height: 1.6;
color: #10131C;
opacity: .85;
margin: 0
}

.contactpage .contactdetails {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 32px
}

.contactpage .detailitem {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px;
background: #fff;
border-radius: 12px;
border: 1px solid #10131c14;
box-shadow: -1px 2px 6px 0 #10131c14;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .detailitem:hover {
transform: translateY(-2px);
box-shadow: -1px 5px 18px 0 #10131c1c
}

.contactpage .detailitem::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(83deg, #e8a7fd05 0%, transparent 68%);
opacity: 0;
transition: opacity .26s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none;
border-radius: 12px
}

.contactpage .detailitem:hover::before {
opacity: 1
}

.contactpage .detailicon {
width: 24px;
height: 24px;
flex-shrink: 0;
fill: #E8A7FD;
margin-top: 2px
}

.contactpage .detailtext {
display: flex;
flex-direction: column;
gap: 4px
}

.contactpage .detaillabel {
font-size: 16px;
line-height: 1.4;
color: #10131C;
opacity: .6;
margin: 0
}

.contactpage .detailvalue {
font-size: 18px;
line-height: 1.4;
color: #10131C;
margin: 0
}

.contactpage .detailvalue a {
color: inherit;
text-decoration: none;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .detailvalue a:hover {
color: #E8A7FD
}

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

.contactpage .rightside h2 {
font-size: 40px;
line-height: 1.15;
color: #10131C;
letter-spacing: -.01em;
margin: 0
}

.contactpage .formblock {
background: #fff;
padding: 32px;
border-radius: 20px;
border: 2px solid #10131c0f;
box-shadow: -1px 5px 18px 0 #e8a7fd1c
}

.contactpage .formblock form {
display: flex;
flex-direction: column;
gap: 20px
}

.contactpage .inputgroup {
display: flex;
flex-direction: column;
gap: 8px;
position: relative
}

.contactpage .inputgroup label {
font-size: 16px;
line-height: 1.4;
color: #10131C;
opacity: .75;
transition: opacity .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .inputgroup input[type="text"],
.contactpage .inputgroup input[type="tel"] {
width: 100%;
padding: 12px 20px;
font-size: 18px;
line-height: 1.4;
color: #10131C;
background: #F2F6F8;
border: 2px solid #10131c1f;
border-radius: 6px;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .inputgroup input[type="text"]:focus,
.contactpage .inputgroup input[type="tel"]:focus {
outline: none;
border-color: #E8A7FD;
box-shadow: 0 0 0 3px #e8a7fd26
}

.contactpage .inputgroup input[type="text"]::placeholder,
.contactpage .inputgroup input[type="tel"]::placeholder {
color: #10131c66
}

.contactpage .radiogroup {
display: flex;
flex-direction: column;
gap: 12px
}

.contactpage .radiogroup legend {
font-size: 16px;
line-height: 1.4;
color: #10131C;
opacity: .75;
margin-bottom: 4px
}

.contactpage .radiooptions {
display: flex;
flex-direction: column;
gap: 8px
}

.contactpage .radiooption {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #F2F6F8;
border: 2px solid #10131c14;
border-radius: 6px;
cursor: pointer;
transition: border-color .19s cubic-bezier(0.4, 0, 0.2, 1), background .19s cubic-bezier(0.4, 0, 0.2, 1);
position: relative
}

.contactpage .radiooption:hover {
border-color: #e8a7fd66;
background: #e8a7fd0a
}

.contactpage .radiooption input[type="radio"] {
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
accent-color: #E8A7FD
}

.contactpage .radiooption label {
font-size: 18px;
line-height: 1.4;
color: #10131C;
cursor: pointer;
flex: 1;
margin: 0
}

.contactpage .checkboxwrap {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 8px
}

.contactpage .checkboxwrap input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 2px;
cursor: pointer;
accent-color: #E8A7FD;
flex-shrink: 0
}

.contactpage .checkboxwrap label {
font-size: 16px;
line-height: 1.6;
color: #10131C;
opacity: .75;
cursor: pointer
}

.contactpage .checkboxwrap label a {
color: #E8A7FD;
text-decoration: none;
transition: opacity .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .checkboxwrap label a:hover {
opacity: .75
}

.contactpage .submitbtn {
padding: 20px 32px;
font-size: 18px;
line-height: 1.4;
color: #fff;
background: #10131C;
border: 3px solid #10131C;
border-radius: 12px;
cursor: pointer;
transition: background .24s cubic-bezier(0.4, 0, 0.2, 1), transform .24s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.contactpage .submitbtn::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #E8A7FD;
transition: height .28s cubic-bezier(0.0, 0, 0.2, 1);
z-index: -1
}

.contactpage .submitbtn:hover::before {
height: 100%
}

.contactpage .submitbtn:hover {
transform: translateY(-1px)
}

.contactpage .submitbtn:active {
transform: translateY(0);
box-shadow: inset -1px 2px 6px 0 #10131c33
}

.contactpage .infosection {
max-width: 1366px;
margin: 0 auto;
padding: 64px 32px;
background: #10131C;
position: relative;
overflow: hidden
}

.contactpage .infosection::before {
content: '';
position: absolute;
top: 20%;
left: 10%;
width: 8px;
height: 8px;
background: #E8A7FD;
border-radius: 50%;
opacity: .15
}

.contactpage .infosection::after {
content: '';
position: absolute;
top: 60%;
right: 15%;
width: 12px;
height: 12px;
background: #E8A7FD;
border-radius: 50%;
opacity: .1
}

.contactpage .dotdecor1 {
position: absolute;
top: 35%;
left: 25%;
width: 6px;
height: 6px;
background: #E8A7FD;
border-radius: 50%;
opacity: .12
}

.contactpage .dotdecor2 {
position: absolute;
top: 75%;
right: 30%;
width: 10px;
height: 10px;
background: #E8A7FD;
border-radius: 50%;
opacity: .08
}

.contactpage .dotdecor3 {
position: absolute;
top: 15%;
right: 45%;
width: 7px;
height: 7px;
background: #E8A7FD;
border-radius: 50%;
opacity: .14
}

.contactpage .infocontent {
position: relative;
z-index: 1
}

.contactpage .infocontent h2 {
font-size: 40px;
line-height: 1.15;
color: #fff;
letter-spacing: -.01em;
margin: 0 0 32px;
text-align: center
}

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

.contactpage .infocard {
background: #f2f6f80d;
padding: 32px;
border-radius: 12px;
border: 1px solid #e8a7fd26;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .infocard:hover {
transform: translateY(-4px);
border-color: #e8a7fd59
}

.contactpage .infocard::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(83deg, #e8a7fd08 0%, transparent 68%);
opacity: 0;
transition: opacity .27s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none;
border-radius: 12px
}

.contactpage .infocard:hover::before {
opacity: 1
}

.contactpage .cardicon {
width: 48px;
height: 48px;
fill: #E8A7FD
}

.contactpage .infocard h3 {
font-size: 28px;
line-height: 1.4;
color: #fff;
margin: 0
}

.contactpage .infocard p {
font-size: 18px;
line-height: 1.6;
color: #fffc;
margin: 0
}

.contactpage .imagepair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 32px
}

.contactpage .imagebox {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 10
}

.contactpage .imagebox img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .3;
transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .imagebox:hover img {
opacity: .5;
transform: scale(1.05)
}

.contactpage .curveddecor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 2px;
pointer-events: none
}

.contactpage .curveddecor svg {
width: 100%;
height: 100%
}

.contactpage .curveddecor path {
stroke: #E8A7FD;
stroke-width: 2;
fill: none;
opacity: .2
}

@media (max-width: 1200px) {
.contactpage .formcontent {
grid-template-columns: 1fr;
gap: 64px
}

.contactpage .dividerline {
display: none
}

.contactpage .leftside h1 {
font-size: 40px
}

.contactpage .rightside h2 {
font-size: 28px
}

.contactpage .infocontent h2 {
font-size: 28px
}

.contactpage .cardsgrid {
grid-template-columns: 1fr
}

.contactpage .imagepair {
grid-template-columns: 1fr
}
}

@media (max-width: 900px) {
.contactpage .formwrapper {
padding: 32px 20px
}

.contactpage .infosection {
padding: 32px 20px
}

.contactpage .leftside h1 {
font-size: 28px
}

.contactpage .leftside .description {
font-size: 16px
}

.contactpage .rightside h2 {
font-size: 22px
}

.contactpage .formblock {
padding: 20px
}

.contactpage .infocontent h2 {
font-size: 22px
}

.contactpage .infocard h3 {
font-size: 22px
}

.contactpage .infocard p {
font-size: 16px
}
}

@media (max-width: 600px) {
.contactpage .formwrapper {
padding: 32px 12px
}

.contactpage .infosection {
padding: 32px 12px
}

.contactpage .formcontent {
gap: 32px
}

.contactpage .leftside {
gap: 20px
}

.contactpage .rightside {
gap: 20px
}

.contactpage .cardsgrid {
gap: 20px
}
}

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

.aboutpage .tophero {
max-width: 1366px;
margin: 0 auto;
padding: 64px 32px 32px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px;
align-items: center;
position: relative
}

.aboutpage .tophero::before {
content: '"';
position: absolute;
top: 20px;
left: 20px;
font-size: 240px;
line-height: 1;
color: #F2F6F8;
font-weight: 700;
z-index: 0;
pointer-events: none
}

.aboutpage .herotxt {
position: relative;
z-index: 1
}

.aboutpage .herotxt h1 {
font-size: 56px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.02em
}

.aboutpage .herotxt .quoteline {
font-size: 22px;
line-height: 1.6;
color: #10131C;
font-style: italic;
margin: 0;
opacity: .85
}

.aboutpage .herovisual {
position: relative;
width: 380px;
height: 440px;
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 5px 18px 0 #10131c1c
}

.aboutpage .herovisual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: sepia(0.18) saturate(1.15) brightness(1.05);
transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .herovisual:hover img {
transform: scale(1.04)
}

.aboutpage .herovisual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(83deg, #e8a7fd14 0%, #f2f6f81f 100%);
pointer-events: none
}

.aboutpage .storyframe {
background: #F2F6F8;
position: relative;
overflow: hidden
}

.aboutpage .storyframe::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #10131C 12px, transparent 12px, transparent 24px, #10131C 24px, transparent 24px, transparent 36px, #10131C 36px, transparent 36px, transparent 48px, #10131C 48px, transparent 48px);
background-size: 48px 1px;
opacity: .15
}

.aboutpage .storyframe::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #10131C 12px, transparent 12px, transparent 24px, #10131C 24px, transparent 24px, transparent 36px, #10131C 36px, transparent 36px, transparent 48px, #10131C 48px, transparent 48px);
background-size: 48px 1px;
opacity: .15
}

.aboutpage .storycontent {
max-width: 1366px;
margin: 0 auto;
padding: 64px 32px;
display: grid;
grid-template-columns: 420px 1fr;
gap: 64px;
align-items: start
}

.aboutpage .leftside {
position: relative
}

.aboutpage .leftside::before {
content: '';
position: absolute;
left: -32px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, transparent 0%, #E8A7FD 40%, #E8A7FD 60%, transparent 100%)
}

.aboutpage .leftside::after {
content: '';
position: absolute;
right: -32px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, transparent 0%, #10131C 40%, #10131C 60%, transparent 100%);
opacity: .12
}

.aboutpage .profilearea {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 32px
}

.aboutpage .profilepic {
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #fff;
box-shadow: -1px 5px 18px 0 #10131c1c;
margin: 0 auto
}

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

.aboutpage .profileinfo {
text-align: center
}

.aboutpage .profileinfo h4 {
font-size: 22px;
line-height: 1.4;
color: #10131C;
margin: 0 0 8px
}

.aboutpage .profileinfo .jobtitle {
font-size: 16px;
line-height: 1.6;
color: #10131C;
opacity: .7;
margin: 0
}

.aboutpage .metricsbox {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 20px 0 0
}

.aboutpage .metricitem {
background: #fff;
padding: 20px;
border-radius: 12px;
text-align: center;
border: 2px solid transparent;
transition: border-color .21s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .metricitem:hover {
border-color: #E8A7FD;
transform: translateY(-2px)
}

.aboutpage .metricnum {
font-size: 40px;
line-height: 1.15;
color: #10131C;
font-weight: 700;
margin: 0 0 4px
}

.aboutpage .metriclabel {
font-size: 16px;
line-height: 1.4;
color: #10131C;
opacity: .7;
margin: 0
}

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

.aboutpage .textblock h2 {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.01em;
display: flex;
align-items: center;
gap: 12px
}

.aboutpage .textblock h2::before {
content: '';
width: 32px;
height: 3px;
background: #E8A7FD;
flex-shrink: 0
}

.aboutpage .textblock p {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0 0 20px
}

.aboutpage .textblock p:first-of-type {
font-size: 22px;
line-height: 1.6;
opacity: .95
}

.aboutpage .textblock p:last-child {
margin-bottom: 0
}

.aboutpage .textblock .accent {
font-style: italic;
font-size: 1.1em;
color: #10131C
}

.aboutpage .visualgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 32px 0 0
}

.aboutpage .gridimg {
position: relative;
width: 100%;
height: 240px;
border-radius: 12px;
overflow: hidden;
box-shadow: -1px 2px 6px 0 #10131c14
}

.aboutpage .gridimg:nth-child(1) {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)
}

.aboutpage .gridimg:nth-child(2) {
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%)
}

.aboutpage .gridimg:nth-child(3) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
grid-column: span 2;
height: 280px
}

.aboutpage .gridimg:nth-child(4) {
clip-path: circle(50% at 50% 50%)
}

.aboutpage .gridimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .gridimg:hover img {
transform: scale(1.08)
}

.aboutpage .gridimg::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 4px, #10131c05 4px, #10131c05 8px);
opacity: 0;
transition: opacity .24s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none
}

.aboutpage .gridimg:hover::before {
opacity: 1
}

.aboutpage .valuelist {
list-style: none;
padding: 0;
margin: 32px 0 0;
display: flex;
flex-direction: column;
gap: 20px
}

.aboutpage .valuelist li {
position: relative;
padding-left: 32px;
font-size: 18px;
line-height: 1.6;
color: #10131C
}

.aboutpage .valuelist li::before {
content: '—';
position: absolute;
left: 0;
top: 0;
color: #E8A7FD;
font-weight: 700
}

@media (max-width: 900px) {
.aboutpage .tophero {
grid-template-columns: 1fr;
padding: 32px 20px 20px;
gap: 20px
}

.aboutpage .tophero::before {
font-size: 160px;
top: 12px;
left: 12px
}

.aboutpage .herotxt h1 {
font-size: 40px;
margin: 0 0 12px
}

.aboutpage .herotxt .quoteline {
font-size: 18px
}

.aboutpage .herovisual {
width: 100%;
height: 380px
}

.aboutpage .storycontent {
grid-template-columns: 1fr;
padding: 32px 20px;
gap: 32px
}

.aboutpage .leftside::before,
.aboutpage .leftside::after {
display: none
}

.aboutpage .profilearea {
position: static
}

.aboutpage .textblock h2 {
font-size: 28px;
margin: 0 0 12px
}

.aboutpage .textblock h2::before {
width: 24px;
height: 2px
}

.aboutpage .textblock p {
font-size: 16px;
margin: 0 0 12px
}

.aboutpage .textblock p:first-of-type {
font-size: 18px
}

.aboutpage .visualgrid {
grid-template-columns: 1fr;
gap: 12px;
margin: 20px 0 0
}

.aboutpage .gridimg {
height: 200px
}

.aboutpage .gridimg:nth-child(3) {
grid-column: span 1;
height: 200px
}

.aboutpage .valuelist {
margin: 20px 0 0;
gap: 12px
}

.aboutpage .valuelist li {
font-size: 16px;
padding-left: 24px
}

.aboutpage .metricsbox {
gap: 8px;
margin: 12px 0 0
}

.aboutpage .metricitem {
padding: 12px
}

.aboutpage .metricnum {
font-size: 28px
}

.aboutpage .metriclabel {
font-size: 16px
}
}

@media (max-width: 600px) {
.aboutpage .tophero {
padding: 20px 12px 12px
}

.aboutpage .tophero::before {
font-size: 120px;
top: 8px;
left: 8px
}

.aboutpage .herotxt h1 {
font-size: 28px
}

.aboutpage .herotxt .quoteline {
font-size: 16px
}

.aboutpage .herovisual {
height: 320px
}

.aboutpage .storycontent {
padding: 20px 12px;
gap: 20px
}

.aboutpage .textblock h2 {
font-size: 22px;
gap: 8px
}

.aboutpage .textblock h2::before {
width: 20px
}

.aboutpage .profilepic {
width: 140px;
height: 140px;
border: 3px solid #fff
}

.aboutpage .profileinfo h4 {
font-size: 18px
}

.aboutpage .metricsbox {
grid-template-columns: 1fr
}
}

.aboutpage .animreveal {
opacity: 0;
transform: translateY(32px);
animation: revealup .7s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.aboutpage .animreveal:nth-child(1) {
animation-delay: .08s
}

.aboutpage .animreveal:nth-child(2) {
animation-delay: .16s
}

.aboutpage .animreveal:nth-child(3) {
animation-delay: .24s
}

.aboutpage .animreveal:nth-child(4) {
animation-delay: .32s
}

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

.aboutpage .gridimg:nth-child(1) {
opacity: 0;
transform: translateY(20px);
animation: revealup .65s cubic-bezier(0.0, 0, 0.2, 1) .1s forwards
}

.aboutpage .gridimg:nth-child(2) {
opacity: 0;
transform: translateY(40px);
animation: revealup .65s cubic-bezier(0.0, 0, 0.2, 1) .2s forwards
}

.aboutpage .gridimg:nth-child(3) {
opacity: 0;
transform: translateY(60px);
animation: revealup .65s cubic-bezier(0.0, 0, 0.2, 1) .3s forwards
}

.aboutpage .gridimg:nth-child(4) {
opacity: 0;
transform: translateY(80px);
animation: revealup .65s cubic-bezier(0.0, 0, 0.2, 1) .4s forwards
}

.aboutpage ::selection {
background: #10131C;
color: #fff
}

.ld {
background: #F2F6F8;
color: #10131C;
overflow-x: clip
}

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

.ld .titlewrap {
background: #10131C;
position: relative;
padding: 64px 20px 120px;
overflow: visible
}

.ld .titlewrap::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(83deg, #e8a7fd08 0px, transparent 2px, transparent 4px, #e8a7fd08 6px), repeating-linear-gradient(-7deg, #f2f6f805 0px, transparent 1px, transparent 3px, #f2f6f805 4px);
pointer-events: none
}

.ld .titlewrap::after {
content: '';
position: absolute;
width: 420px;
height: 420px;
background: radial-gradient(circle, #e8a7fd2e 0%, transparent 68%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: breathepulse 8.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
pointer-events: none
}

@keyframes breathepulse {

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

50% {
transform: translate(-50%, -50%) scale(1.24);
opacity: .72
}
}

.ld .titlecontent {
max-width: 1366px;
margin: 0 auto;
position: relative;
z-index: 1
}

.ld .maintitle {
font-size: 56px;
line-height: 1.15;
color: #F2F6F8;
text-align: center;
margin: 0 0 32px;
letter-spacing: -.02em
}

.ld .maintitle span {
display: block
}

.ld .titledesc {
font-size: 22px;
line-height: 1.6;
color: #f2f6f8d6;
text-align: center;
max-width: 740px;
margin: 0 auto
}

.ld .beforeafter {
background: #FFF;
padding: 64px 20px
}

.ld .beforeafterinner {
max-width: 1366px;
margin: 0 auto
}

.ld .baheading {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
letter-spacing: -.01em
}

.ld .comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin: 0 0 32px
}

.ld .compcolumn {
background: #F2F6F8;
padding: 32px;
border-radius: 12px;
border: 2px solid #E8A7FD;
position: relative
}

.ld .complabel {
font-size: 18px;
line-height: 1.4;
color: #10131C;
font-weight: 600;
margin: 0 0 20px;
text-transform: uppercase;
letter-spacing: .05em
}

.ld .comptext {
font-size: 16px;
line-height: 1.6;
color: #10131C
}

.ld .witnesswrap {
display: grid;
grid-template-columns: 120px 1fr;
gap: 20px;
align-items: start;
margin: 32px 0 0
}

.ld .witnessimg {
width: 120px;
height: 180px;
border-radius: 6px;
overflow: hidden
}

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

.ld .witnesscontent {
display: flex;
flex-direction: column;
gap: 12px
}

.ld .witnessname {
font-size: 18px;
line-height: 1.4;
color: #10131C;
font-weight: 600
}

.ld .witnessquote {
font-size: 16px;
line-height: 1.6;
color: #10131C;
font-style: italic
}

.ld .approachsec {
background: linear-gradient(83deg, #F2F6F8 0%, #FFF 67%);
padding: 64px 20px
}

.ld .approachinner {
max-width: 1366px;
margin: 0 auto
}

.ld .approachhead {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
letter-spacing: -.01em
}

.ld .approachgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px
}

.ld .approachcard {
background: #FFF;
padding: 32px;
border-radius: 12px;
box-shadow: -1px 2px 6px 0 #10131c14;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.ld .approachcard::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 8px, #e8a7fd0f 8px, #e8a7fd0f 16px);
opacity: 0;
transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none
}

.ld .approachcard:hover::before {
opacity: 1
}

.ld .approachcard:hover {
transform: translateY(-4px);
box-shadow: -1px 5px 18px 0 #10131c1c
}

.ld .approachnum {
font-size: 72px;
line-height: 1;
color: #E8A7FD;
font-weight: 700;
margin: 0 0 12px;
position: relative
}

.ld .approachnum::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 48px;
height: 3px;
background: #E8A7FD
}

.ld .approachtitle {
font-size: 18px;
line-height: 1.4;
color: #10131C;
font-weight: 600;
margin: 0 0 12px
}

.ld .approachtext {
font-size: 16px;
line-height: 1.6;
color: #10131C
}

.ld .supportsec {
background: #10131C;
padding: 64px 20px;
position: relative
}

.ld .supportinner {
max-width: 1366px;
margin: 0 auto;
position: relative;
z-index: 1
}

.ld .supporthead {
font-size: 40px;
line-height: 1.15;
color: #F2F6F8;
margin: 0 0 32px;
letter-spacing: -.01em;
text-align: center
}

.ld .supportlayout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px
}

.ld .supportimg {
width: 100%;
height: 420px;
border-radius: 12px;
overflow: hidden
}

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

.ld .supportcontent {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center
}

.ld .supportitem {
padding: 20px 0;
border-bottom: 2px dashed #e8a7fd4d
}

.ld .supportitem:last-child {
border-bottom: none
}

.ld .supportlabel {
font-size: 18px;
line-height: 1.4;
color: #E8A7FD;
font-weight: 600;
margin: 0 0 8px
}

.ld .supportdesc {
font-size: 16px;
line-height: 1.6;
color: #f2f6f8e0
}

.ld .longtermblock {
background: #FFF;
padding: 64px 20px
}

.ld .longterminner {
max-width: 1366px;
margin: 0 auto
}

.ld .longtermhead {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
letter-spacing: -.01em
}

.ld .longtermgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 0 0 32px
}

.ld .longtermcard {
background: #F2F6F8;
padding: 32px;
border-radius: 12px;
border: 3px solid #10131C;
position: relative;
transition: background .18s cubic-bezier(0.0, 0, 0.2, 1);
overflow: hidden
}

.ld .longtermcard::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(83deg, #E8A7FD 0%, #10131C 67%);
transition: height .27s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0
}

.ld .longtermcard:hover::after {
height: 100%
}

.ld .longtermcard>* {
position: relative;
z-index: 1
}

.ld .longtermcard:hover .longtermtitle,
.ld .longtermcard:hover .longtermtext {
color: #FFF
}

.ld .longtermtitle {
font-size: 18px;
line-height: 1.4;
color: #10131C;
font-weight: 600;
margin: 0 0 12px;
transition: color .27s cubic-bezier(0.4, 0, 0.2, 1)
}

.ld .longtermtext {
font-size: 16px;
line-height: 1.6;
color: #10131C;
transition: color .27s cubic-bezier(0.4, 0, 0.2, 1)
}

.ld .longtermimg {
width: 100%;
height: 320px;
border-radius: 12px;
overflow: hidden
}

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

.ld .distinctblock {
background: linear-gradient(83deg, #FFF 0%, #F2F6F8 67%);
padding: 64px 20px
}

.ld .distinctinner {
max-width: 1366px;
margin: 0 auto
}

.ld .distincthead {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
letter-spacing: -.01em;
text-align: center
}

.ld .distinctlayout {
display: grid;
grid-template-columns: 380px 1fr;
gap: 32px;
align-items: start
}

.ld .distinctprofile {
background: #FFF;
padding: 32px;
border-radius: 20px;
box-shadow: -1px 5px 18px 0 #10131c1c
}

.ld .distinctportrait {
width: 100%;
height: 480px;
border-radius: 12px;
overflow: hidden;
margin: 0 0 20px
}

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

.ld .distinctpname {
font-size: 22px;
line-height: 1.4;
color: #10131C;
font-weight: 600;
margin: 0 0 8px
}

.ld .distinctprole {
font-size: 16px;
line-height: 1.6;
color: #10131C
}

.ld .distinctcontent {
display: flex;
flex-direction: column;
gap: 20px
}

.ld .distinctpara {
font-size: 16px;
line-height: 1.6;
color: #10131C
}

.ld .distinctpara:first-of-type {
font-size: 18px;
line-height: 1.6
}

.ld .distinctlist {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px
}

.ld .distinctlist li {
font-size: 16px;
line-height: 1.6;
color: #10131C;
padding-left: 20px;
position: relative
}

.ld .distinctlist li::before {
content: '—';
position: absolute;
left: 0;
color: #E8A7FD
}

.ld .graduationblock {
background: #F2F6F8;
padding: 64px 20px
}

.ld .graduationinner {
max-width: 1366px;
margin: 0 auto
}

.ld .graduationhead {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
letter-spacing: -.01em
}

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

.ld .graduationbox {
background: #FFF;
padding: 32px;
border-radius: 12px;
border: 2px solid #10131C;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
transition: transform .19s cubic-bezier(0.4, 0, 0.2, 1)
}

.ld .graduationbox:hover {
transform: scale(1.03)
}

.ld .graduationbox:hover~.graduationbox {
transform: translateX(8px);
transition: transform .24s cubic-bezier(0.0, 0, 0.2, 1)
}

.ld .graduationtitle {
font-size: 22px;
line-height: 1.4;
color: #10131C;
font-weight: 600
}

.ld .graduationtext {
font-size: 16px;
line-height: 1.6;
color: #10131C
}

.ld .graduationimg {
width: 100%;
height: 280px;
border-radius: 12px;
overflow: hidden
}

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

.ld .dividerline {
height: 8px;
background: linear-gradient(83deg, #10131C 0%, #E8A7FD 67%);
margin: 0
}

.ld .dividerstack {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0
}

.ld .dividerstack span {
height: 2px;
background: #10131C
}

.ld .dividerstack span:nth-child(2) {
height: 4px;
background: #E8A7FD
}

.ld .dividerstack span:nth-child(3) {
height: 2px;
background: #10131C
}

@media (max-width: 1200px) {
.ld .maintitle {
font-size: 40px
}

.ld .titledesc {
font-size: 18px
}

.ld .baheading,
.ld .approachhead,
.ld .supporthead,
.ld .longtermhead,
.ld .distincthead,
.ld .graduationhead {
font-size: 28px
}

.ld .approachgrid {
grid-template-columns: repeat(2, 1fr)
}

.ld .longtermgrid {
grid-template-columns: repeat(2, 1fr)
}

.ld .distinctlayout {
grid-template-columns: 1fr
}
}

@media (max-width: 900px) {
.ld .titlewrap {
padding: 32px 20px 64px
}

.ld .maintitle {
font-size: 28px
}

.ld .comparison {
grid-template-columns: 1fr
}

.ld .supportlayout {
grid-template-columns: 1fr
}

.ld .graduationgrid {
grid-template-columns: 1fr
}
}

@media (max-width: 600px) {
.ld .titlewrap {
padding: 32px 12px 64px
}

.ld .beforeafter,
.ld .approachsec,
.ld .supportsec,
.ld .longtermblock,
.ld .distinctblock,
.ld .graduationblock {
padding: 32px 12px
}

.ld .maintitle {
font-size: 22px
}

.ld .titledesc {
font-size: 16px
}

.ld .approachgrid {
grid-template-columns: 1fr
}

.ld .longtermgrid {
grid-template-columns: 1fr
}

.ld .witnesswrap {
grid-template-columns: 1fr
}
}

::selection {
background: #10131C;
color: #F2F6F8
}

.exprtopin {
max-width: 1366px;
margin: 0 auto;
background: #FFF;
color: #10131C
}

.exprtopin .topzone {
display: flex;
flex-direction: row;
align-items: stretch;
padding: 64px 32px 96px;
gap: 32px;
position: relative;
overflow: hidden;
background: linear-gradient(83deg, #F2F6F8 0%, #FFF 62%)
}

.exprtopin .topzone::before {
content: '';
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
width: 280px;
height: 280px;
background-image: radial-gradient(circle, #e8a7fd26 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
z-index: 1
}

.exprtopin .leftimg {
flex: 0 0 280px;
position: relative;
z-index: 2
}

.exprtopin .leftimg img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
filter: blur(0px);
box-shadow: -1px 5px 18px 0 #10131c1c
}

.exprtopin .leftimg::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
box-shadow: inset 0 0 60px 20px #fff6;
pointer-events: none
}

.exprtopin .righttxt {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
position: relative;
z-index: 2;
padding-right: 120px
}

.exprtopin .maintitle {
font-size: 56px;
line-height: 1.15;
letter-spacing: -.02em;
color: #10131C;
margin: 0
}

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

.exprtopin .keypts li {
font-size: 18px;
line-height: 1.6;
color: #10131C;
padding-left: 32px;
position: relative
}

.exprtopin .keypts li::before {
content: '—';
position: absolute;
left: 0;
color: #E8A7FD;
font-weight: 600
}

.exprtopin .budgetdata {
padding: 64px 32px;
background: #FFF;
position: relative
}

.exprtopin .budgetdata::before {
content: 'BP';
position: absolute;
left: 32px;
top: 64px;
font-size: 180px;
line-height: 1;
font-weight: 700;
color: #e8a7fd14;
pointer-events: none;
z-index: 0
}

.exprtopin .budgetcontain {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
align-items: start
}

.exprtopin .budgetleft {
position: sticky;
top: 32px
}

.exprtopin .budgetleft h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -.01em;
color: #10131C;
margin: 0 0 20px
}

.exprtopin .budgetleft p {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0
}

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

.exprtopin .budgettable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #F2F6F8;
border-radius: 12px;
overflow: hidden;
box-shadow: -1px 2px 6px 0 #10131c14
}

.exprtopin .budgettable thead {
background: linear-gradient(83deg, #10131C 0%, #3a3d4a 100%)
}

.exprtopin .budgettable th {
padding: 20px;
text-align: left;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
color: #FFF;
border-bottom: 2px solid #E8A7FD
}

.exprtopin .budgettable tbody tr {
transition: background-color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.exprtopin .budgettable tbody tr:hover {
background: #e8a7fd1f
}

.exprtopin .budgettable td {
padding: 20px;
font-size: 16px;
line-height: 1.6;
color: #10131C;
border-bottom: 1px solid #10131c14
}

.exprtopin .budgettable tbody tr:last-child td {
border-bottom: none
}

.exprtopin .budgetnarrative {
background: #FFF;
border: 3px solid #E8A7FD;
border-radius: 12px;
padding: 32px;
box-shadow: -1px 5px 18px 0 #e8a7fd1c
}

.exprtopin .budgetnarrative h3 {
font-size: 28px;
line-height: 1.4;
letter-spacing: -.01em;
color: #10131C;
margin: 0 0 20px
}

.exprtopin .budgetnarrative p {
font-size: 16px;
line-height: 1.6;
color: #10131C;
margin: 0 0 12px
}

.exprtopin .budgetnarrative p:last-child {
margin-bottom: 0
}

.exprtopin .divwave {
width: 100%;
height: 80px;
position: relative;
overflow: hidden
}

.exprtopin .divwave svg {
width: 100%;
height: 100%;
display: block
}

.exprtopin .expertpanel {
padding: 64px 32px;
background: linear-gradient(83deg, #faf8fb 0%, #FFF 58%);
position: relative
}

.exprtopin .expertpanel::before {
content: 'EX';
position: absolute;
right: 64px;
top: 50%;
transform: translateY(-50%);
font-size: 200px;
line-height: 1;
font-weight: 700;
color: #10131c0a;
pointer-events: none;
z-index: 0
}

.exprtopin .expertgrid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1100px;
margin: 0 auto
}

.exprtopin .expertcard {
background: #FFF;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 2px 6px 0 #10131c14;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.exprtopin .expertcard::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, #e8a7fd08 10px, #e8a7fd08 20px);
opacity: 0;
transition: opacity .25s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.exprtopin .expertcard:hover {
transform: translateY(-4px);
box-shadow: -1px 12px 52px 0 #e8a7fd24
}

.exprtopin .expertcard:hover::before {
opacity: 1
}

.exprtopin .expertcard h3 {
font-size: 28px;
line-height: 1.4;
letter-spacing: -.01em;
color: #10131C;
margin: 0 0 8px;
position: relative;
z-index: 1
}

.exprtopin .expertrole {
font-size: 16px;
line-height: 1.4;
color: #E8A7FD;
font-weight: 600;
margin: 0 0 20px;
position: relative;
z-index: 1
}

.exprtopin .expertcard p {
font-size: 16px;
line-height: 1.6;
color: #10131C;
margin: 0;
position: relative;
z-index: 1
}

.exprtopin .practapp {
padding: 64px 32px;
background: #F2F6F8
}

.exprtopin .practapp h2 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -.01em;
color: #10131C;
text-align: center;
margin: 0 0 64px
}

.exprtopin .tagsholder {
max-width: 900px;
margin: 0 auto;
position: relative;
min-height: 180px
}

.exprtopin .tagbox {
position: relative
}

.exprtopin .tagtrigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 32px;
background: #FFF;
border: 3px solid #10131C;
border-radius: 6px;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: #10131C;
cursor: pointer;
transition: background-color .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.exprtopin .tagtrigger::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: #10131C;
transition: height .25s cubic-bezier(0.0, 0, 0.2, 1);
z-index: 0
}

.exprtopin .tagtrigger:hover::before {
height: 100%
}

.exprtopin .tagtrigger span {
position: relative;
z-index: 1;
transition: color .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.exprtopin .tagtrigger:hover span {
color: #FFF
}

.exprtopin .tagtrigger svg {
width: 16px;
height: 16px;
fill: currentColor;
position: relative;
z-index: 1;
transition: transform .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.exprtopin .tagtrigger:hover svg {
transform: rotate(180deg)
}

.exprtopin .taglist {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .28s cubic-bezier(0.4, 0, 0.2, 1), max-height .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.exprtopin .tagbox.expanded .taglist {
opacity: 1;
max-height: 500px
}

.exprtopin .tagitem {
padding: 8px 20px;
background: #FFF;
border: 2px solid #E8A7FD;
border-radius: 6px;
font-size: 16px;
line-height: 1.4;
color: #10131C;
transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1), background-color .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -1px 2px 6px 0 #e8a7fd14
}

.exprtopin .tagbox.expanded .tagitem {
animation: tagfanout .3s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.exprtopin .tagbox.expanded .tagitem:nth-child(1) {
animation-delay: .05s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(2) {
animation-delay: .08s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(3) {
animation-delay: .11s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(4) {
animation-delay: .14s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(5) {
animation-delay: .17s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(6) {
animation-delay: .2s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(7) {
animation-delay: .23s
}

.exprtopin .tagbox.expanded .tagitem:nth-child(8) {
animation-delay: .26s
}

@keyframes tagfanout {
from {
opacity: 0;
transform: translateY(-12px) scale(0.92)
}

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

.exprtopin .tagitem:hover {
transform: translateY(-2px);
background: #E8A7FD;
box-shadow: -1px 5px 18px 0 #e8a7fd1c
}

@keyframes rotateload {
from {
opacity: 0;
transform: rotate(-3deg)
}

to {
opacity: 1;
transform: rotate(0deg)
}
}

.exprtopin .expertcard {
animation: rotateload .6s cubic-bezier(0.0, 0, 0.2, 1) forwards;
opacity: 0
}

.exprtopin .expertcard:nth-child(1) {
animation-delay: .1s
}

.exprtopin .expertcard:nth-child(2) {
animation-delay: .2s
}

.exprtopin .expertcard:nth-child(3) {
animation-delay: .3s
}

.exprtopin .expertcard:nth-child(4) {
animation-delay: .4s
}

@media (max-width: 1200px) {
.exprtopin .topzone {
padding: 64px 20px 80px
}

.exprtopin .righttxt {
padding-right: 80px
}

.exprtopin .budgetcontain {
gap: 32px
}

.exprtopin .budgetdata {
padding: 64px 20px
}

.exprtopin .expertpanel {
padding: 64px 20px
}

.exprtopin .practapp {
padding: 64px 20px
}
}

@media (max-width: 900px) {
.exprtopin .topzone {
flex-direction: column;
padding: 32px 20px 64px
}

.exprtopin .leftimg {
flex: 0 0 auto;
width: 100%;
height: 320px
}

.exprtopin .righttxt {
padding-right: 0
}

.exprtopin .maintitle {
font-size: 40px
}

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

.exprtopin .budgetleft {
position: static
}

.exprtopin .budgetleft h2 {
font-size: 28px
}

.exprtopin .budgettable th,
.exprtopin .budgettable td {
padding: 12px;
font-size: 16px
}

.exprtopin .expertgrid {
grid-template-columns: 1fr;
gap: 20px
}

.exprtopin .practapp h2 {
font-size: 28px;
margin-bottom: 32px
}
}

@media (max-width: 600px) {
.exprtopin .topzone {
padding: 20px 12px 32px;
gap: 20px
}

.exprtopin .leftimg {
height: 240px
}

.exprtopin .maintitle {
font-size: 28px
}

.exprtopin .keypts li {
font-size: 16px
}

.exprtopin .budgetdata {
padding: 32px 12px
}

.exprtopin .budgetdata::before {
font-size: 120px;
left: 12px;
top: 32px
}

.exprtopin .budgetleft h2 {
font-size: 22px
}

.exprtopin .budgetnarrative {
padding: 20px
}

.exprtopin .budgetnarrative h3 {
font-size: 22px
}

.exprtopin .expertpanel {
padding: 32px 12px
}

.exprtopin .expertcard {
padding: 20px
}

.exprtopin .expertcard h3 {
font-size: 22px
}

.exprtopin .practapp {
padding: 32px 12px
}

.exprtopin .practapp h2 {
font-size: 22px;
margin-bottom: 20px
}

.exprtopin .tagtrigger {
font-size: 16px;
padding: 8px 20px
}

.exprtopin .divwave {
height: 60px
}
}

.servs {
background: #F2F6F8;
overflow-x: clip
}

.servs .titlezone {
position: relative;
padding: 64px 20px;
max-width: 1366px;
margin: 0 auto;
background: radial-gradient(ellipse at center, #e8a7fd2e 0%, #f2f6f800 68%);
display: flex;
flex-direction: column;
align-items: center;
gap: 32px
}

.servs .titlezone::before {
content: '"';
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
font-size: 280px;
line-height: 1;
color: #e8a7fd1f;
pointer-events: none;
z-index: 0
}

.servs .titletxt {
position: relative;
z-index: 1;
text-align: center;
max-width: 920px
}

.servs .maintitle {
font-size: 56px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.02em;
animation: titleexpand .8s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

@keyframes titleexpand {
from {
letter-spacing: -.08em;
opacity: 0
}

to {
letter-spacing: -.02em;
opacity: 1
}
}

.servs .numaccent {
color: #E8A7FD;
font-size: 72px;
display: inline-block;
margin: 0 8px 0 0
}

.servs .titledesc {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0
}

.servs .titleimg {
position: relative;
width: 100%;
max-width: 680px;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
box-shadow: -1px 5px 18px 0 #10131c1c;
animation: imgfadein 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 0
}

@keyframes imgfadein {
to {
opacity: 1
}
}

.servs .titleimg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.85) brightness(1.02)
}

.servs .offerblock {
background: #10131C;
padding: 64px 20px;
position: relative;
overflow: hidden
}

.servs .offerblock::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 340px;
height: 340px;
background: #e8a7fd14;
border-radius: 20px;
transform: rotate(25deg);
animation: slowrotate 18s linear infinite;
pointer-events: none
}

@keyframes slowrotate {
from {
transform: rotate(25deg)
}

to {
transform: rotate(385deg)
}
}

.servs .offercont {
max-width: 1366px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
align-items: start
}

.servs .bigtxt {
position: relative;
z-index: 1
}

.servs .offertitle {
font-size: 40px;
line-height: 1.15;
color: #F2F6F8;
margin: 0 0 20px;
letter-spacing: -.01em
}

.servs .offertitle span {
display: block
}

.servs .offersubline {
font-size: 18px;
line-height: 1.6;
color: #f2f6f8b8;
margin: 0;
text-align: left
}

.servs .clustergrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
position: relative;
z-index: 1
}

.servs .minicard {
background: #f2f6f80f;
padding: 20px;
border-radius: 6px;
border: 1px solid #e8a7fd2e;
transition: background .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.servs .minicard::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(83deg, transparent, transparent 2px, #e8a7fd08 2px, #e8a7fd08 4px);
opacity: 0;
transition: opacity .22s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none
}

.servs .minicard:hover {
background: #f2f6f81a;
border-color: #e8a7fd52
}

.servs .minicard:hover::before {
opacity: 1
}

.servs .minicard:nth-child(1) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .1s backwards
}

.servs .minicard:nth-child(2) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .2s backwards
}

.servs .minicard:nth-child(3) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .3s backwards
}

.servs .minicard:nth-child(4) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .4s backwards
}

.servs .minicard:nth-child(5) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .5s backwards
}

.servs .minicard:nth-child(6) {
animation: cardwave .6s cubic-bezier(0.4, 0, 0.2, 1) .6s backwards
}

@keyframes cardwave {
from {
opacity: 0;
transform: translateY(32px)
}

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

.servs .cardtitle {
font-size: 18px;
line-height: 1.4;
color: #F2F6F8;
margin: 0 0 8px;
font-weight: 600
}

.servs .carddesc {
font-size: 16px;
line-height: 1.6;
color: #f2f6f8ad;
margin: 0
}

.servs .stepssection {
padding: 64px 20px;
background: #FFF;
position: relative
}

.servs .stepssection::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: repeating-linear-gradient(to right, #10131C 0, #10131C 8px, transparent 8px, transparent 12px, #10131C 12px, #10131C 28px, transparent 28px, transparent 32px)
}

.servs .stepscont {
max-width: 1366px;
margin: 0 auto
}

.servs .stepstitle {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 32px;
text-align: center;
letter-spacing: -.01em
}

.servs .beforeafter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin: 0 0 64px
}

.servs .stepblock {
position: relative;
padding: 32px;
background: #F2F6F8;
border-radius: 12px;
border: 2px solid transparent;
transition: border-color .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.servs .stepblock:hover {
border-color: #E8A7FD;
box-shadow: -1px 5px 18px 0 #e8a7fd1c
}

.servs .steplabel {
font-size: 16px;
line-height: 1.4;
color: #E8A7FD;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600
}

.servs .steptitle {
font-size: 28px;
line-height: 1.4;
color: #10131C;
margin: 0 0 20px
}

.servs .stepdesc {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0
}

.servs .processlist {
display: flex;
flex-direction: column;
gap: 20px
}

.servs .processitem {
display: flex;
gap: 20px;
align-items: start;
padding: 20px;
background: #F2F6F8;
border-radius: 6px;
border-left: 4px solid #E8A7FD;
transition: background .18s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.servs .processitem:hover {
background: #FFF;
transform: translateX(8px)
}

.servs .processnum {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(83deg, #E8A7FD 32%, #10131C 92%);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
color: #FFF;
line-height: 1
}

.servs .processtxt {
flex: 1
}

.servs .processtitle {
font-size: 18px;
line-height: 1.4;
color: #10131C;
margin: 0 0 8px;
font-weight: 600
}

.servs .processdesc {
font-size: 16px;
line-height: 1.6;
color: #10131C;
margin: 0
}

.servs .expertsection {
padding: 64px 20px;
background: #FFF;
position: relative
}

.servs .expertsection::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: repeating-linear-gradient(to right, #10131C 0, #10131C 8px, transparent 8px, transparent 12px, #10131C 12px, #10131C 28px, transparent 28px, transparent 32px)
}

.servs .expertcont {
max-width: 1366px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px
}

.servs .expertheader {
text-align: center
}

.servs .experttitle {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.01em
}

.servs .expertintro {
font-size: 22px;
line-height: 1.6;
color: #10131C;
margin: 0 auto;
max-width: 860px
}

.servs .expertintro em {
font-style: italic;
font-size: 28px;
color: #E8A7FD
}

.servs .expertbody {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 32px 0 0;
max-width: 860px;
margin-left: auto;
margin-right: auto
}

.servs .teamgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin: 32px 0 0
}

.servs .teamcard {
display: flex;
gap: 20px;
align-items: center;
padding: 20px;
background: #F2F6F8;
border-radius: 12px;
border: 2px solid transparent;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.servs .teamcard::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(83deg, transparent, transparent 3px, #e8a7fd0a 3px, #e8a7fd0a 6px);
opacity: 0;
transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none
}

.servs .teamcard:hover {
border-color: #E8A7FD;
box-shadow: -1px 5px 18px 0 #e8a7fd1c
}

.servs .teamcard:hover::before {
opacity: 1
}

.servs .teamcard:nth-child(2) {
margin-left: 64px
}

.servs .teamphoto {
flex-shrink: 0;
width: 92px;
height: 138px;
border-radius: 6px;
overflow: hidden;
box-shadow: -1px 2px 6px 0 #10131c14;
position: relative;
z-index: 1
}

.servs .teamphoto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
filter: saturate(0.88) brightness(1.01)
}

.servs .teaminfo {
flex: 1;
position: relative;
z-index: 1
}

.servs .teamname {
font-size: 22px;
line-height: 1.4;
color: #10131C;
margin: 0 0 4px;
font-weight: 600
}

.servs .teamrole {
font-size: 16px;
line-height: 1.4;
color: #E8A7FD;
margin: 0 0 12px
}

.servs .teamdesc {
font-size: 16px;
line-height: 1.6;
color: #10131C;
margin: 0
}

.servs .ctazone {
padding: 64px 20px;
background: linear-gradient(83deg, #E8A7FD 32%, #F2F6F8 92%);
text-align: center
}

.servs .ctacont {
max-width: 1366px;
margin: 0 auto
}

.servs .ctatitle {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.01em
}

.servs .ctadesc {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0 0 32px;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.servs .ctabtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 32px;
background: #FFF;
color: #10131C;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
border: 3px solid #10131C;
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), color .26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: -1px 2px 6px 0 #10131c14
}

.servs .ctabtn::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #10131C;
transition: height .26s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0
}

.servs .ctabtn:hover::before {
height: 100%
}

.servs .ctabtn span {
position: relative;
z-index: 1
}

.servs .ctabtn:hover {
color: #FFF;
box-shadow: -1px 5px 18px 0 #10131c1c
}

.servs .ctabtn:active {
box-shadow: inset -1px 2px 6px 0 #10131c14
}

@media (max-width: 1200px) {
.servs .offercont {
grid-template-columns: 1fr;
gap: 32px
}

.servs .clustergrid {
grid-template-columns: repeat(2, 1fr)
}

.servs .beforeafter {
gap: 32px
}
}

@media (max-width: 900px) {
.servs .titlezone {
padding: 32px 20px
}

.servs .maintitle {
font-size: 40px
}

.servs .numaccent {
font-size: 56px
}

.servs .titledesc {
font-size: 16px
}

.servs .offerblock {
padding: 32px 20px
}

.servs .offertitle {
font-size: 28px
}

.servs .offersubline {
font-size: 16px
}

.servs .beforeafter {
grid-template-columns: 1fr;
gap: 20px
}

.servs .stepssection {
padding: 32px 20px
}

.servs .stepstitle {
font-size: 28px
}

.servs .steptitle {
font-size: 22px
}

.servs .expertsection {
padding: 32px 20px
}

.servs .experttitle {
font-size: 28px
}

.servs .expertintro {
font-size: 18px
}

.servs .expertintro em {
font-size: 22px
}

.servs .expertbody {
font-size: 16px
}

.servs .teamgrid {
grid-template-columns: 1fr
}

.servs .teamcard:nth-child(2) {
margin-left: 0
}

.servs .ctazone {
padding: 32px 20px
}

.servs .ctatitle {
font-size: 28px
}

.servs .ctadesc {
font-size: 16px
}
}

@media (max-width: 600px) {
.servs .titlezone {
padding: 32px 12px
}

.servs .maintitle {
font-size: 28px
}

.servs .numaccent {
font-size: 40px
}

.servs .clustergrid {
grid-template-columns: 1fr
}

.servs .offerblock {
padding: 32px 12px
}

.servs .stepssection {
padding: 32px 12px
}

.servs .stepblock {
padding: 20px
}

.servs .expertsection {
padding: 32px 12px
}

.servs .teamcard {
flex-direction: column;
text-align: center
}

.servs .teamphoto {
width: 120px;
height: 180px
}

.servs .ctazone {
padding: 32px 12px
}
}

.successpage {
max-width: 1366px;
margin: 0 auto;
padding: 64px 20px;
background: #F2F6F8
}

.successpage .confirmwrap {
max-width: 680px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
padding: 64px 32px;
box-shadow: -1px 5px 18px 0 #10131c1c;
text-align: center
}

.successpage .iconcheck {
width: 96px;
height: 96px;
margin: 0 auto 32px;
border: 4px solid #E8A7FD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(83deg, #E8A7FD 28%, #F2F6F8 92%)
}

.successpage .iconcheck svg {
width: 48px;
height: 48px;
fill: none;
stroke: #10131C;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round
}

.successpage .mainhead {
font-size: 40px;
line-height: 1.15;
color: #10131C;
margin: 0 0 20px;
letter-spacing: -.02em
}

.successpage .desctext {
font-size: 18px;
line-height: 1.6;
color: #10131C;
margin: 0 0 32px
}

.successpage .infoblock {
background: #F2F6F8;
border-radius: 6px;
padding: 20px;
margin: 0 0 32px;
text-align: left
}

.successpage .infoblock .infolabel {
font-size: 16px;
line-height: 1.4;
color: #10131C;
margin: 0 0 12px;
font-weight: 600
}

.successpage .infoblock .infoitem {
font-size: 16px;
line-height: 1.6;
color: #10131C;
margin: 0 0 8px;
display: flex;
align-items: flex-start;
gap: 8px
}

.successpage .infoblock .infoitem:last-child {
margin: 0
}

.successpage .infoblock .infoitem .itemicon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px
}

.successpage .infoblock .infoitem .itemicon svg {
width: 100%;
height: 100%;
fill: #E8A7FD
}

.successpage .actionarea {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center
}

.successpage .actionarea .primarybtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: #10131C;
color: #fff;
border: 3px solid #10131C;
border-radius: 6px;
font-size: 18px;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition: background-color .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.successpage .actionarea .primarybtn::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(83deg, #E8A7FD 28%, #10131C 92%);
transition: height .26s cubic-bezier(0.0, 0, 0.2, 1);
z-index: 0
}

.successpage .actionarea .primarybtn:hover::before {
height: 100%
}

.successpage .actionarea .primarybtn span {
position: relative;
z-index: 1
}

.successpage .actionarea .secondarybtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
background: transparent;
color: #10131C;
border: none;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 2px solid transparent
}

.successpage .actionarea .secondarybtn:hover {
color: #E8A7FD;
border-bottom-color: #E8A7FD
}

.successpage .contactdetails {
margin: 32px 0 0;
padding: 20px 0 0;
border-top: 1px solid #10131c1f
}

.successpage .contactdetails .contactlabel {
font-size: 16px;
line-height: 1.4;
color: #10131C;
margin: 0 0 12px
}

.successpage .contactdetails .contactlist {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center
}

.successpage .contactdetails .contactlist .contactlink {
font-size: 16px;
line-height: 1.4;
color: #10131C;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px
}

.successpage .contactdetails .contactlist .contactlink:hover {
color: #E8A7FD
}

.successpage .contactdetails .contactlist .contactlink i {
font-size: 18px
}

@media (max-width: 600px) {
.successpage {
padding: 32px 12px
}

.successpage .confirmwrap {
padding: 32px 20px
}

.successpage .mainhead {
font-size: 28px
}

.successpage .desctext {
font-size: 16px
}

.successpage .actionarea .primarybtn {
width: 100%;
padding: 14px 20px
}
}