@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans@latest/700.css";

html {
font-size: 100%;
scroll-behavior: smooth
}

body {
margin: 0;
-webkit-text-size-adjust: 100%
}

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

.brand-box__mark {
width: 44px;
height: 44px;
padding: 8px;
border: 2px dashed #711A59;
border-radius: 4px;
background: #02eb7b0f;
box-shadow: 1px 2px 5px -1px #711a5912;
display: flex;
align-items: center;
justify-content: center
}

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

.brand-box__label {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
letter-spacing: -.01em
}

.topbar {
background: linear-gradient(135deg, #FFF 0%, #02eb7b0a 100%);
border-bottom: 1px solid #711a591f;
box-shadow: 1px 2px 5px -1px #711a5912
}

.topbar__grid {
max-width: 1200px;
margin: 0 auto;
padding: 16px 40px;
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center
}

.reach-box {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
justify-content: flex-end
}

.reach-box__links {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center
}

.reach-box__links a {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711A59;
text-decoration: none;
padding: 8px 0;
position: relative;
transition: color .18s ease-out
}

.reach-box__links a::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #02EB7B 0%, #711A59 100%);
transition: width .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.reach-box__links a:hover {
color: #02EB7B
}

.reach-box__links a:hover::after {
width: 100%
}

.reach-box__links a:focus {
outline: none;
box-shadow: 0 0 0 4px #02eb7b4d;
border-radius: 4px
}

.reach-box__contacts {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center
}

.reach-box__contact-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #711a590d;
border-radius: 36px;
transition: background .16s ease-out, box-shadow .16s ease-out
}

.reach-box__contact-item:hover {
background: #02eb7b14;
box-shadow: 1px 7px 28px -1px #02eb7b17
}

.reach-box__contact-item svg {
width: 16px;
height: 16px;
fill: #711A59;
transition: fill .14s ease-out
}

.reach-box__contact-item:hover svg {
fill: #02EB7B
}

.reach-box__contact-item a {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #711A59;
text-decoration: none;
transition: color .14s ease-out
}

.reach-box__contact-item:hover a {
color: #02EB7B
}

.reach-box__contact-item a:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b66;
border-radius: 4px
}

.baseplate {
background: linear-gradient(180deg, #711a5905 0%, #FFF 100%);
border-top: 1px solid #02eb7b26;
padding: 80px 0
}

.baseplate__grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 80px
}

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

.firm-cluster__brand {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px
}

.firm-cluster__brand-mark {
width: 32px;
height: 32px;
padding: 4px;
border: 1px dashed #711A59;
border-radius: 4px;
background: #02eb7b0a;
display: flex;
align-items: center;
justify-content: center
}

.firm-cluster__brand-mark img {
width: 100%;
height: 100%;
object-fit: contain
}

.firm-cluster__brand-name {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #711A59
}

.firm-cluster__address {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711a59bf;
font-style: normal
}

.firm-cluster__phone {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #711A59;
text-decoration: none;
transition: color .16s ease-out;
display: inline-block
}

.firm-cluster__phone:hover {
color: #02EB7B
}

.firm-cluster__phone:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b4d;
border-radius: 4px
}

.firm-cluster__email {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #711A59;
text-decoration: none;
transition: color .16s ease-out;
display: inline-block
}

.firm-cluster__email:hover {
color: #02EB7B
}

.firm-cluster__email:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b4d;
border-radius: 4px
}

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

.routes-cluster__head {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
margin-bottom: 8px
}

.routes-cluster__link {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711A59;
text-decoration: none;
display: inline-block;
padding: 4px 0;
position: relative;
transition: color .18s ease-out
}

.routes-cluster__link::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #02EB7B;
transition: width .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.routes-cluster__link:hover {
color: #02EB7B
}

.routes-cluster__link:hover::before {
width: 100%
}

.routes-cluster__link:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b4d;
border-radius: 4px
}

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

.legal-cluster__head {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
margin-bottom: 8px
}

.legal-cluster__link {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711A59;
text-decoration: none;
display: inline-block;
padding: 4px 0;
position: relative;
transition: color .18s ease-out
}

.legal-cluster__link::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #02EB7B;
transition: width .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.legal-cluster__link:hover {
color: #02EB7B
}

.legal-cluster__link:hover::before {
width: 100%
}

.legal-cluster__link:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b4d;
border-radius: 4px
}

.basement {
background: #711a5908;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid #02eb7b33;
padding: 40px 0
}

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

.basement__copy {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711a59b3
}

.basement__preference-link {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #711A59;
text-decoration: underline;
text-underline-offset: 4px;
transition: color .16s ease-out, text-decoration-color .16s ease-out;
cursor: pointer
}

.basement__preference-link:hover {
color: #02EB7B;
text-decoration-color: #02EB7B
}

.basement__preference-link:focus {
outline: none;
box-shadow: 0 0 0 3px #02eb7b4d;
border-radius: 4px
}

.gdpr-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(135deg, #711a59f7 0%, #02eb7bf2 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 1px 8px 36px -1px #711a591c;
z-index: 8000;
display: none;
opacity: 0;
transform: translateY(-100%);
transition: opacity .22s cubic-bezier(0.4, 0, 0.6, 1), transform .22s cubic-bezier(0.4, 0, 0.6, 1)
}

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

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

.gdpr-bar__message {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #FFF;
flex: 1;
min-width: 280px
}

.gdpr-bar__actions {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap
}

.gdpr-bar__btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
background: #FFF;
border: none;
padding: 8px 16px;
border-radius: 36px;
cursor: pointer;
transition: background .16s ease-out, color .16s ease-out, box-shadow .16s ease-out;
text-transform: lowercase
}

.gdpr-bar__btn:hover {
background: #02EB7B;
color: #FFF;
box-shadow: 1px 7px 28px -1px #02eb7b17
}

.gdpr-bar__btn:focus {
outline: none;
box-shadow: 0 0 0 4px #fff6
}

.gdpr-bar__link {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #FFF;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: color .14s ease-out, text-decoration-color .14s ease-out
}

.gdpr-bar__link:hover {
color: #02EB7B;
text-decoration-color: #02EB7B
}

.gdpr-bar__link:focus {
outline: none;
box-shadow: 0 0 0 3px #ffffff4d;
border-radius: 4px
}

.pref-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #711a59d9;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 8001;
display: none;
opacity: 0;
transition: opacity .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.pref-panel.visible {
opacity: 1
}

.pref-panel__dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 640px;
background: #FFF;
border-radius: 4px;
box-shadow: 1px 8px 36px -1px #711a591c;
padding: 40px;
max-height: 90vh;
overflow-y: auto
}

.pref-panel__head {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
margin-bottom: 16px;
letter-spacing: -.02em
}

.pref-panel__desc {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711a59bf;
margin-bottom: 40px
}

.pref-panel__options {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 40px
}

.pref-panel__option {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #02eb7b0a;
border-radius: 4px;
border: 1px solid #711a591a;
transition: background .14s ease-out, border-color .14s ease-out
}

.pref-panel__option:hover {
background: #02eb7b14;
border-color: #02eb7b4d
}

.pref-panel__option input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #02EB7B
}

.pref-panel__option-label {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #711A59;
cursor: pointer;
flex: 1
}

.pref-panel__sale-opt {
margin-top: 16px;
padding: 16px;
background: #711a590a;
border-radius: 4px;
border: 1px solid #711a5926
}

.pref-panel__sale-label {
display: flex;
align-items: center;
gap: 16px;
cursor: pointer
}

.pref-panel__sale-label input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #711A59
}

.pref-panel__sale-text {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: #711A59
}

.pref-panel__actions {
display: flex;
gap: 16px;
justify-content: flex-end;
flex-wrap: wrap
}

.pref-panel__btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #FFF;
background: #711A59;
border: none;
padding: 8px 16px;
border-radius: 36px;
cursor: pointer;
transition: background .16s ease-out, box-shadow .16s ease-out;
text-transform: lowercase
}

.pref-panel__btn:hover {
background: #02EB7B;
box-shadow: 1px 7px 28px -1px #02eb7b17
}

.pref-panel__btn:focus {
outline: none;
box-shadow: 0 0 0 4px #02eb7b4d
}

.pref-panel__btn--secondary {
background: transparent;
color: #711A59;
border: 1px solid #711A59
}

.pref-panel__btn--secondary:hover {
background: #711a590d;
box-shadow: none
}

@media (max-width: 1366px) {
.topbar__grid {
padding: 16px 40px;
gap: 40px
}

.baseplate__grid {
gap: 40px
}

.baseplate {
padding: 40px 0
}
}

@media (max-width: 768px) {
.topbar__grid {
grid-template-columns: 1fr;
padding: 16px;
gap: 16px
}

.brand-box {
justify-content: center
}

.reach-box {
flex-direction: column;
align-items: stretch;
gap: 16px
}

.reach-box__links {
flex-direction: column;
gap: 8px;
align-items: stretch
}

.reach-box__links a {
text-align: center;
padding: 8px
}

.reach-box__contacts {
flex-direction: column;
gap: 8px
}

.reach-box__contact-item {
justify-content: center
}

.baseplate__grid {
grid-template-columns: 1fr;
padding: 0 16px;
gap: 40px
}

.baseplate {
padding: 40px 0
}

.basement__inner {
flex-direction: column;
padding: 0 16px;
text-align: center
}

.gdpr-bar__inner {
flex-direction: column;
padding: 16px;
gap: 16px
}

.gdpr-bar__message {
text-align: center
}

.gdpr-bar__actions {
width: 100%;
justify-content: center
}

.pref-panel__dialog {
padding: 16px
}

.pref-panel__head {
font-size: 44px
}

.pref-panel__actions {
flex-direction: column
}

.pref-panel__btn {
width: 100%
}
}

@media (max-width: 375px) {
.topbar__grid {
padding: 8px
}

.brand-box__label {
font-size: 16px
}

.reach-box__links a {
font-size: 16px
}

.reach-box__contact-item {
padding: 8px
}

.baseplate__grid {
padding: 0 8px;
gap: 16px
}

.basement__inner {
padding: 0 8px
}

.gdpr-bar__inner {
padding: 8px
}

.pref-panel__dialog {
padding: 16px;
width: 95%
}

.pref-panel__head {
font-size: 44px
}
}

.terms-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 80px 16px;
background: #FFF
}

.terms-wrapper h1 {
font-size: 72px;
line-height: 1.2;
margin: 0 0 40px;
color: #711A59
}

.terms-wrapper h2 {
font-size: 44px;
line-height: 1.2;
margin: 80px 0 40px;
color: #711A59
}

.terms-wrapper h3 {
font-size: 18px;
line-height: 1.55;
margin: 40px 0 16px;
color: #711A59;
font-weight: 600
}

.terms-wrapper h4 {
font-size: 16px;
line-height: 1.55;
margin: 40px 0 16px;
color: #711A59;
font-weight: 600
}

.terms-wrapper h5 {
font-size: 16px;
line-height: 1.55;
margin: 16px 0 8px;
color: #711A59;
font-weight: 600
}

.terms-wrapper h6 {
font-size: 16px;
line-height: 1.55;
margin: 16px 0 8px;
color: #711A59;
font-weight: 500
}

.terms-wrapper p {
font-size: 16px;
line-height: 1.8;
margin: 0 0 16px;
color: #1a1a2e
}

.terms-wrapper ul {
margin: 0 0 16px;
padding: 0 0 0 40px;
list-style-type: disc
}

.terms-wrapper ol {
margin: 0 0 16px;
padding: 0 0 40px;
list-style-type: decimal
}

.terms-wrapper li {
font-size: 16px;
line-height: 1.8;
margin: 0 0 8px;
color: #1a1a2e
}

.terms-wrapper ul ul {
margin: 8px 0;
padding: 0 0 0 40px;
list-style-type: circle
}

.terms-wrapper ol ol {
margin: 8px 0;
padding: 0 0 0 40px;
list-style-type: lower-alpha
}

.terms-wrapper strong {
font-weight: 600;
color: #711A59
}

.terms-wrapper b {
font-weight: 600;
color: #711A59
}

.terms-wrapper em {
font-style: italic
}

.terms-wrapper i {
font-style: italic
}

.terms-wrapper hr {
border: none;
height: 1px;
background: linear-gradient(to right, #02eb7b33, #711a5933, #02eb7b33);
margin: 80px 0
}

.terms-wrapper table {
width: 100%;
border-collapse: collapse;
margin: 0 0 40px;
background: #FFF;
box-shadow: 1px 2px 5px -1px #711a5912;
border-radius: 4px;
overflow: hidden
}

.terms-wrapper thead {
background: linear-gradient(135deg, #02eb7b14, #711a5914)
}

.terms-wrapper tbody tr {
border-bottom: 1px solid #711a591a;
transition: background-color .16s ease-out
}

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

.terms-wrapper tbody tr:hover {
background: #02eb7b08
}

.terms-wrapper th {
font-size: 16px;
line-height: 1.55;
padding: 16px;
text-align: left;
color: #711A59;
font-weight: 600
}

.terms-wrapper td {
font-size: 16px;
line-height: 1.8;
padding: 16px;
color: #1a1a2e
}

.terms-wrapper div {
margin: 0 0 16px
}

@media (max-width: 1366px) {
.terms-wrapper {
padding: 40px 16px
}

.terms-wrapper h1 {
font-size: 62px;
margin: 0 0 40px
}

.terms-wrapper h2 {
font-size: 44px;
margin: 40px 0 16px
}
}

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

.terms-wrapper h1 {
font-size: 44px;
margin: 0 0 16px
}

.terms-wrapper h2 {
font-size: 18px;
margin: 40px 0 16px
}

.terms-wrapper h3 {
font-size: 16px;
margin: 16px 0 8px
}

.terms-wrapper ul {
padding: 0 0 0 16px
}

.terms-wrapper ol {
padding: 0 0 0 16px
}

.terms-wrapper ul ul {
padding: 0 0 0 16px
}

.terms-wrapper ol ol {
padding: 0 0 0 16px
}

.terms-wrapper hr {
margin: 40px 0
}

.terms-wrapper table {
font-size: 16px
}

.terms-wrapper th {
padding: 8px;
font-size: 16px
}

.terms-wrapper td {
padding: 8px;
font-size: 16px
}
}

@media (max-width: 375px) {
.terms-wrapper {
padding: 16px 8px
}

.terms-wrapper h1 {
font-size: 44px
}

.terms-wrapper h2 {
font-size: 18px
}

.terms-wrapper table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
}

.dtm {
background: #FFF;
min-height: 100vh;
padding: 0;
margin: 0
}

.dtm__hero {
max-width: 1200px;
margin: 0 auto;
padding: 40px 16px;
display: flex;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden
}

.dtm__hero-deco {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: #02eb7b0a;
pointer-events: none;
z-index: 1
}

.dtm__hero-deco:nth-of-type(1) {
top: -80px;
left: 120px
}

.dtm__hero-deco:nth-of-type(2) {
bottom: -100px;
right: 180px;
background: #711a5908;
width: 340px;
height: 340px
}

.dtm__hero-img-wrap {
flex-shrink: 0;
width: 420px;
height: 240px;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
position: relative;
z-index: 2
}

.dtm__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: contrast(1.08) brightness(0.96)
}

.dtm__hero-img::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, #00000005 2px, #00000005 4px);
pointer-events: none
}

.dtm__hero-txt {
flex: 1;
z-index: 2
}

.dtm__hero-meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap
}

.dtm__hero-tag {
display: inline-block;
padding: 4px 16px;
background: linear-gradient(135deg, #02eb7b1c, #711a5917);
border-radius: 36px;
font-size: 16px;
line-height: 1.55;
color: #711A59;
font-weight: 500
}

.dtm__hero-date {
font-size: 16px;
line-height: 1.55;
color: #5a5a5a
}

.dtm__hero-h {
font-size: 44px;
line-height: 1.2;
color: #1a1a1a;
margin: 0;
font-weight: 700;
letter-spacing: -.02em
}

.dtm__hero-sub {
font-size: 18px;
line-height: 1.55;
color: #4a4a4a;
margin: 16px 0 0
}

.dtm__divider-geo {
height: 40px;
background: linear-gradient(90deg, transparent 0%, #02eb7b14 50%, transparent 100%);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
overflow: hidden
}

.dtm__divider-shape {
width: 8px;
height: 8px;
background: #02EB7B;
border-radius: 50%;
opacity: .3;
animation: dtm-drop .18s cubic-bezier(0.4, 0, 0.6, 1) forwards
}

.dtm__divider-shape:nth-child(2) {
animation-delay: .04s
}

.dtm__divider-shape:nth-child(3) {
animation-delay: .08s
}

.dtm__divider-shape:nth-child(4) {
animation-delay: .12s
}

.dtm__divider-shape:nth-child(5) {
animation-delay: .16s
}

.dtm__divider-shape:nth-child(6) {
animation-delay: .2s
}

.dtm__divider-shape:nth-child(7) {
animation-delay: .24s
}

.dtm__divider-shape:nth-child(8) {
animation-delay: .28s
}

.dtm__divider-shape:nth-child(9) {
animation-delay: .32s
}

@keyframes dtm-drop {
0% {
transform: translateY(-20px);
opacity: 0
}

70% {
transform: translateY(2px)
}

100% {
transform: translateY(0);
opacity: .3
}
}

.dtm__body {
max-width: 1200px;
margin: 0 auto;
padding: 80px 16px;
display: grid;
grid-template-columns: 1fr 340px;
gap: 80px;
align-items: start
}

.dtm__article {
animation: dtm-reveal .22s ease-out forwards
}

@keyframes dtm-reveal {
0% {
opacity: 0;
transform: translateY(16px)
}

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

.dtm__article p {
font-size: 18px;
line-height: 1.8;
color: #2a2a2a;
margin: 0 0 16px
}

.dtm__article p:last-child {
margin-bottom: 0
}

.dtm__article h2 {
font-size: 44px;
line-height: 1.2;
color: #1a1a1a;
margin: 40px 0 16px;
font-weight: 700;
letter-spacing: -.01em;
position: relative;
padding-left: 16px
}

.dtm__article h2::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #02EB7B, #711A59);
border-radius: 4px
}

.dtm__article h3 {
font-size: 18px;
line-height: 1.55;
color: #1a1a1a;
margin: 40px 0 16px;
font-weight: 700
}

.dtm__article h4 {
font-size: 18px;
line-height: 1.55;
color: #3a3a3a;
margin: 16px 0 8px;
font-weight: 600
}

.dtm__article small {
font-size: 16px;
line-height: 1.55;
color: #6a6a6a
}

.dtm__article mark {
background: linear-gradient(180deg, transparent 60%, #02eb7b33 60%);
color: inherit;
padding: 0 4px
}

.dtm__article details {
margin: 16px 0;
padding: 16px;
background: #02eb7b0a;
border-radius: 4px;
border: 1px solid #02eb7b26
}

.dtm__article summary {
font-size: 18px;
line-height: 1.55;
color: #1a1a1a;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: color .15s ease-out
}

.dtm__article summary:hover {
color: #711A59
}

.dtm__article details[open] summary {
margin-bottom: 8px
}

.dtm__sidebar {
position: sticky;
top: 40px
}

.dtm__process {
background: #FFF;
padding: 40px;
border-radius: 4px;
box-shadow: 1px 7px 28px -1px #02eb7b17;
animation: dtm-reveal .22s ease-out .1s forwards;
opacity: 0
}

.dtm__process-h {
font-size: 18px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 40px;
font-weight: 700
}

.dtm__process-step {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 40px
}

.dtm__process-step:last-child {
margin-bottom: 0
}

.dtm__process-num {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #02EB7B, #711A59);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: #FFF;
font-weight: 700
}

.dtm__process-txt {
flex: 1;
padding-top: 8px
}

.dtm__process-label {
font-size: 16px;
line-height: 1.55;
color: #2a2a2a;
margin: 0
}

.dtm__mesh {
background: linear-gradient(217deg, #02eb7b0f, transparent 70%), linear-gradient(127deg, #711a590d, transparent 70%), linear-gradient(336deg, #02eb7b0a, transparent 70%);
padding: 80px 16px;
position: relative
}

.dtm__mesh-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}

.dtm__mesh-card {
background: #FFF;
padding: 40px;
border-radius: 36px;
box-shadow: 1px 8px 36px -1px #711a591c;
transition: transform .18s ease-out, box-shadow .18s ease-out;
animation: dtm-reveal .22s ease-out forwards;
opacity: 0
}

.dtm__mesh-card:nth-child(1) {
animation-delay: .05s
}

.dtm__mesh-card:nth-child(2) {
animation-delay: .1s;
transform: translateY(40px)
}

.dtm__mesh-card:hover {
transform: translateY(-4px);
box-shadow: 1px 8px 36px -1px #711a592e
}

.dtm__mesh-h {
font-size: 44px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
font-weight: 700;
letter-spacing: -.01em
}

.dtm__mesh-p {
font-size: 18px;
line-height: 1.8;
color: #3a3a3a;
margin: 0
}

.dtm__mesh-icon {
width: 64px;
height: 64px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #02eb7b1a, #711a5914);
border-radius: 50%
}

.dtm__mesh-svg {
width: 32px;
height: 32px;
fill: #711A59
}

.dtm__cta-zone {
max-width: 1200px;
margin: 0 auto;
padding: 80px 16px;
text-align: center
}

.dtm__cta-h {
font-size: 62px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 40px;
font-weight: 700;
letter-spacing: -.02em;
animation: dtm-reveal .22s ease-out forwards
}

.dtm__cta-btn {
display: inline-block;
padding: 16px 40px;
background: linear-gradient(135deg, #02EB7B, #711A59);
color: #FFF;
font-size: 18px;
line-height: 1.55;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
font-weight: 600;
transition: opacity .15s ease-out, box-shadow .15s ease-out;
box-shadow: 1px 2px 5px -1px #711a5912;
animation: dtm-reveal .22s ease-out .1s forwards;
opacity: 0
}

.dtm__cta-btn:hover {
opacity: .9;
box-shadow: 1px 7px 28px -1px #711a5917
}

.dtm__cta-btn:active {
box-shadow: inset 1px 4px 8px #711a5933
}

@media (max-width: 1366px) {
.dtm__hero {
gap: 40px
}

.dtm__hero-img-wrap {
width: 360px;
height: 200px
}

.dtm__body {
gap: 40px;
padding: 40px 16px
}

.dtm__mesh {
padding: 40px 16px
}

.dtm__cta-zone {
padding: 40px 16px
}
}

@media (max-width: 768px) {
.dtm__hero {
flex-direction: column;
padding: 40px 16px;
gap: 16px
}

.dtm__hero-img-wrap {
width: 100%;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%)
}

.dtm__hero-h {
font-size: 44px
}

.dtm__body {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 16px
}

.dtm__sidebar {
position: static
}

.dtm__mesh-inner {
grid-template-columns: 1fr;
gap: 16px
}

.dtm__mesh-card:nth-child(2) {
transform: translateY(0)
}

.dtm__cta-h {
font-size: 44px
}

.dtm__article h2 {
font-size: 44px
}
}

@media (max-width: 375px) {
.dtm__hero {
padding: 16px 8px
}

.dtm__hero-h {
font-size: 44px
}

.dtm__body {
padding: 40px 8px;
gap: 40px
}

.dtm__process {
padding: 16px
}

.dtm__mesh {
padding: 40px 8px
}

.dtm__mesh-card {
padding: 16px
}

.dtm__cta-zone {
padding: 40px 8px
}

.dtm__cta-h {
font-size: 44px
}
}

.pdc {
background: #FFF;
max-width: 1200px;
margin: 0 auto;
padding: 0
}

.pdc__hero {
display: flex;
align-items: stretch;
gap: 40px;
padding: 80px 16px;
position: relative;
overflow: hidden
}

.pdc__hero::before {
content: '';
position: absolute;
top: 50%;
left: 10%;
width: 320px;
height: 320px;
background: radial-gradient(circle, #02eb7b14 0%, transparent 70%);
filter: blur(60px);
transform: translateY(-50%);
pointer-events: none;
z-index: 0
}

.pdc__hero::after {
content: '';
position: absolute;
bottom: 15%;
right: 15%;
width: 280px;
height: 280px;
background: radial-gradient(circle, #711a590f 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: 0
}

.pdc__hero-frame {
position: relative;
flex: 0 0 420px;
z-index: 1
}

.pdc__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
opacity: .65;
transition: opacity .18s ease-out
}

.pdc__hero-frame:hover .pdc__hero-img {
opacity: .85
}

.pdc__hero-txt {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1
}

.pdc__hero-label {
font-size: 16px;
line-height: 1.55;
color: #711A59;
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .05em
}

.pdc__hero-hd {
font-size: 62px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 16px;
font-weight: 700
}

.pdc__hero-hd span:first-letter {
color: #02EB7B;
font-size: 72px
}

.pdc__hero-desc {
font-size: 18px;
line-height: 1.8;
color: #4a4a5e;
margin: 0
}

.pdc__math-bg {
position: absolute;
top: 50%;
right: -80px;
font-size: 280px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #02eb7b14;
font-weight: 300;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
z-index: 0
}

.pdc__divider-blur {
height: 1px;
background: linear-gradient(90deg, transparent 0%, #711a5933 50%, transparent 100%);
filter: blur(2px);
margin: 0
}

.pdc__episodes {
padding: 80px 16px;
background: linear-gradient(135deg, #02eb7b05 0%, #fff0 100%);
position: relative
}

.pdc__episodes-hd {
font-size: 44px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 40px;
font-weight: 700;
text-align: center
}

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

.pdc__card {
background: #FFF;
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 2px 5px -1px #02eb7b12 1px 7px 28px -1px #02eb7b17;
transition: transform .16s ease-out, box-shadow .16s ease-out;
position: relative;
animation: pdc-flip .22s cubic-bezier(0.4, 0, 0.6, 1) backwards
}

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

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

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

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

.pdc__card:nth-child(5) {
animation-delay: .4s
}

.pdc__card:nth-child(6) {
animation-delay: .48s
}

@keyframes pdc-flip {
0% {
transform: perspective(800px) rotateY(-90deg);
opacity: 0
}

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

.pdc__card::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: -8px;
bottom: -8px;
background: linear-gradient(135deg, #02eb7b26, #711a5926);
border-radius: 4px;
z-index: -1;
opacity: 0;
transition: opacity .18s ease-out
}

.pdc__card:hover {
transform: translateY(-4px);
box-shadow: 1px 8px 36px -1px #711a591c
}

.pdc__card:hover::before {
opacity: 1
}

.pdc__card-img-wrap {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: #f5f5f5
}

.pdc__card-img-wrap::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, #0000004d 100%);
z-index: 1;
opacity: 0;
transition: opacity .16s ease-out
}

.pdc__card:hover .pdc__card-img-wrap::before {
opacity: 1
}

.pdc__card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.pdc__card:hover .pdc__card-img {
transform: scale(1.08)
}

.pdc__card-meta {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: flex;
gap: 8px
}

.pdc__card-tag {
padding: 4px 8px;
background: #fffffff2;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 4px;
font-size: 16px;
line-height: 1.55;
color: #711A59;
font-weight: 600
}

.pdc__card-content {
padding: 16px
}

.pdc__card-title {
font-size: 18px;
line-height: 1.55;
color: #1a1a2e;
margin: 0 0 8px;
font-weight: 700
}

.pdc__card-subtitle {
font-size: 16px;
line-height: 1.55;
color: #02EB7B;
margin: 0 0 8px;
font-weight: 600
}

.pdc__card-desc {
font-size: 16px;
line-height: 1.8;
color: #6a6a7e;
margin: 0 0 16px
}

.pdc__card-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #711a591a
}

.pdc__card-date {
font-size: 16px;
line-height: 1.55;
color: #8a8a9e
}

.pdc__card-views {
font-size: 16px;
line-height: 1.55;
color: #8a8a9e;
display: flex;
align-items: center;
gap: 4px
}

.pdc__card-link {
position: absolute;
inset: 0;
z-index: 2
}

.pdc__stats {
padding: 80px 16px;
background: #711A59;
position: relative;
overflow: hidden
}

.pdc__stats::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, #ffffff05 19px, #ffffff05 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, #ffffff05 19px, #ffffff05 20px);
pointer-events: none
}

.pdc__stats-hd {
font-size: 44px;
line-height: 1.2;
color: #FFF;
margin: 0 0 40px;
font-weight: 700;
text-align: center
}

.pdc__stats-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr;
gap: 40px;
max-width: 1000px;
margin: 0 auto
}

.pdc__stat-box {
background: #ffffff14;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 4px;
padding: 40px 16px;
text-align: center;
transition: transform .14s ease-out, background .14s ease-out
}

.pdc__stat-box:hover {
transform: translateY(-4px);
background: #ffffff1f
}

.pdc__stat-num {
font-size: 62px;
line-height: 1.2;
color: #02EB7B;
margin: 0 0 8px;
font-weight: 700
}

.pdc__stat-label {
font-size: 18px;
line-height: 1.55;
color: #ffffffe6;
margin: 0
}

.pdc__table-wrap {
padding: 80px 16px;
background: #FFF
}

.pdc__table-hd {
font-size: 44px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 40px;
font-weight: 700
}

.pdc__table-hd span {
display: block
}

.pdc__table {
width: 100%;
border-collapse: collapse;
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 2px 5px -1px #711a5912 1px 7px 28px -1px #711a5917
}

.pdc__table-head {
background: linear-gradient(90deg, #02eb7b14 0%, #711a5914 100%)
}

.pdc__table-head th {
padding: 16px;
text-align: left;
font-size: 16px;
line-height: 1.55;
color: #1a1a2e;
font-weight: 700;
border-bottom: 2px solid #711a5933
}

.pdc__table-body tr {
transition: background .12s ease-out
}

.pdc__table-body tr:hover {
background: #02eb7b08
}

.pdc__table-body td {
padding: 16px;
font-size: 16px;
line-height: 1.55;
color: #4a4a5e;
border-bottom: 1px solid #711a5914
}

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

.pdc__cell-low {
background: #02eb7b1a;
color: #1a1a2e;
font-weight: 600;
border-radius: 4px;
padding: 4px 8px;
display: inline-block
}

.pdc__cell-med {
background: #711a591a;
color: #1a1a2e;
font-weight: 600;
border-radius: 4px;
padding: 4px 8px;
display: inline-block
}

.pdc__cell-high {
background: #02eb7b33;
color: #1a1a2e;
font-weight: 700;
border-radius: 4px;
padding: 4px 8px;
display: inline-block
}

@media (max-width: 1366px) {
.pdc__grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px
}

.pdc__stats-grid {
grid-template-columns: repeat(3, 1fr)
}
}

@media (max-width: 768px) {
.pdc__hero {
flex-direction: column;
padding: 40px 16px;
gap: 16px
}

.pdc__hero-frame {
flex: 0 0 auto;
width: 100%;
height: 280px
}

.pdc__hero-hd {
font-size: 44px
}

.pdc__hero-desc {
font-size: 16px
}

.pdc__math-bg {
font-size: 180px;
right: -60px
}

.pdc__episodes {
padding: 40px 16px
}

.pdc__episodes-hd {
font-size: 44px;
margin-bottom: 16px
}

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

.pdc__stats {
padding: 40px 16px
}

.pdc__stats-hd {
font-size: 44px;
margin-bottom: 16px
}

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

.pdc__stat-box {
padding: 16px
}

.pdc__table-wrap {
padding: 40px 16px
}

.pdc__table-hd {
font-size: 44px;
margin-bottom: 16px
}

.pdc__table {
font-size: 16px
}

.pdc__table-head th,
.pdc__table-body td {
padding: 8px;
font-size: 16px
}
}

@media (max-width: 375px) {
.pdc__hero {
padding: 16px
}

.pdc__hero-hd {
font-size: 44px
}

.pdc__episodes {
padding: 16px
}

.pdc__stats {
padding: 16px
}

.pdc__table-wrap {
padding: 16px
}
}

.cntct {
background: #FFF;
color: #1d1d1d;
max-width: 1200px;
margin: 0 auto;
padding: 0
}

.cntct__intro {
padding: 80px 16px;
position: relative;
overflow: hidden;
background: linear-gradient(112deg, transparent 0%, transparent 40%, #02eb7b08 40%, #02eb7b08 60%, transparent 60%, transparent 100%)
}

.cntct__intro::before {
content: '';
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: #711a590a;
top: -80px;
right: 10%;
pointer-events: none
}

.cntct__intro::after {
content: '';
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: #02eb7b0d;
bottom: 40px;
left: 8%;
pointer-events: none
}

.cntct__intro-inner {
max-width: 760px;
margin: 0 auto;
position: relative;
z-index: 1
}

.cntct__intro-title {
font-size: 62px;
line-height: 1.2;
margin: 0 0 40px;
font-weight: 700;
color: #1d1d1d
}

.cntct__intro-title span {
display: block
}

.cntct__intro-title span:first-child::first-letter {
color: #02EB7B;
font-size: 72px
}

.cntct__intro-desc {
font-size: 18px;
line-height: 1.55;
margin: 0 0 16px;
color: #3a3a3a
}

.cntct__intro-desc:last-of-type {
margin-bottom: 0
}

.cntct__form-wrap {
padding: 80px 16px;
background: #fafcfb;
position: relative
}

.cntct__form-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #02EB7B 20%, #711A59 80%, transparent 100%);
animation: cntct-glow 3.2s ease-out forwards;
opacity: 0
}

@keyframes cntct-glow {
0% {
opacity: 0;
box-shadow: 0 0 0 #02eb7b00
}

100% {
opacity: 1;
box-shadow: 0 0 16px #02eb7b66
}
}

.cntct__form-inner {
max-width: 680px;
margin: 0 auto
}

.cntct__form-heading {
font-size: 44px;
line-height: 1.2;
margin: 0 0 8px;
font-weight: 700;
color: #1d1d1d
}

.cntct__form-subhead {
font-size: 18px;
line-height: 1.55;
margin: 0 0 40px;
color: #4a4a4a
}

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

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

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

.cntct__form-label {
font-size: 16px;
line-height: 1.55;
color: #2a2a2a;
font-weight: 500
}

.cntct__form-input {
padding: 16px;
border: 1px solid #d4d4d4;
border-radius: 4px;
font-size: 16px;
line-height: 1.55;
color: #1d1d1d;
background: #FFF;
transition: border-color .16s ease-out, box-shadow .16s ease-out;
outline: none;
width: 100%
}

.cntct__form-input::placeholder {
color: #9a9a9a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

.cntct__form-input:focus {
border-color: #02EB7B;
box-shadow: 0 0 0 3px #02eb7b1a
}

.cntct__form-input:hover:not(:focus) {
border-color: #a4a4a4
}

.cntct__services-title {
font-size: 16px;
line-height: 1.55;
color: #2a2a2a;
font-weight: 500;
margin: 0 0 8px
}

.cntct__services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px
}

.cntct__service-option {
display: flex;
align-items: center;
gap: 8px;
padding: 16px;
border: 1px solid #d4d4d4;
border-radius: 4px;
background: #FFF;
cursor: pointer;
transition: border-color .14s ease-out, background-color .14s ease-out, box-shadow .14s ease-out;
position: relative
}

.cntct__service-option:hover {
border-color: #02EB7B;
background: #02eb7b05
}

.cntct__service-checkbox {
width: 20px;
height: 20px;
border: 2px solid #d4d4d4;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color .14s ease-out, background-color .14s ease-out;
position: relative
}

.cntct__service-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none
}

.cntct__service-input:checked+.cntct__service-option {
border-color: #02EB7B;
background: #02eb7b0a;
box-shadow: 1px 2px 5px -1px #02eb7b12
}

.cntct__service-input:checked+.cntct__service-option .cntct__service-checkbox {
border-color: #02EB7B;
background: #02EB7B
}

.cntct__service-input:checked+.cntct__service-option .cntct__service-checkbox::after {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-45deg);
margin-top: -2px
}

.cntct__service-label {
font-size: 16px;
line-height: 1.55;
color: #1d1d1d;
cursor: pointer;
user-select: none
}

.cntct__privacy-wrap {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 16px;
background: #711a5905;
border-radius: 4px;
margin-top: 8px
}

.cntct__privacy-checkbox-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 2px solid #d4d4d4;
border-radius: 4px;
flex-shrink: 0;
margin-top: 2px;
transition: border-color .14s ease-out, background-color .14s ease-out;
cursor: pointer;
position: relative
}

.cntct__privacy-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none
}

.cntct__privacy-input:checked+.cntct__privacy-checkbox-wrap {
border-color: #711A59;
background: #711A59
}

.cntct__privacy-input:checked+.cntct__privacy-checkbox-wrap::after {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-45deg);
margin-top: -2px
}

.cntct__privacy-text {
font-size: 16px;
line-height: 1.55;
color: #3a3a3a
}

.cntct__privacy-text a {
color: #711A59;
text-decoration: none;
border-bottom: 1px solid #711a594d;
transition: border-color .14s ease-out, opacity .14s ease-out
}

.cntct__privacy-text a:hover {
opacity: .7;
border-color: #711A59
}

.cntct__submit-btn {
padding: 16px 40px;
background: linear-gradient(135deg, #02EB7B 0%, #01c969 100%);
color: #FFF;
border: none;
border-radius: 4px;
font-size: 16px;
line-height: 1.55;
font-weight: 600;
cursor: pointer;
transition: opacity .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
text-transform: lowercase;
box-shadow: 1px 2px 5px -1px #02eb7b12;
position: relative;
overflow: hidden
}

.cntct__submit-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff3;
opacity: 0;
transition: opacity .18s ease-out;
pointer-events: none
}

.cntct__submit-btn:hover {
opacity: .9;
box-shadow: 1px 7px 28px -1px #02eb7b17 0 0 20px #02eb7b4d;
transform: translateY(-1px)
}

.cntct__submit-btn:hover::before {
opacity: 1
}

.cntct__submit-btn:active {
transform: translateY(0);
box-shadow: inset 0 4px 8px #00000026
}

.cntct__details {
padding: 80px 16px;
background: #FFF;
position: relative
}

.cntct__details::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(270deg, transparent 0%, #711A59 20%, #02EB7B 80%, transparent 100%)
}

.cntct__details-inner {
max-width: 960px;
margin: 0 auto
}

.cntct__details-heading {
font-size: 44px;
line-height: 1.2;
margin: 0 0 40px;
font-weight: 700;
color: #1d1d1d;
text-align: center
}

.cntct__details-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px
}

.cntct__detail-card {
padding: 40px;
background: #FFF;
border-radius: 4px;
box-shadow: 1px 2px 5px -1px #711a5912;
transition: box-shadow .2s ease-out, transform .2s ease-out;
border: 1px solid #ebebeb;
position: relative;
overflow: hidden
}

.cntct__detail-card::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: linear-gradient(180deg, #02EB7B 0%, #711A59 100%);
opacity: 0;
transition: opacity .2s ease-out
}

.cntct__detail-card:hover {
box-shadow: 1px 7px 28px -1px #711a5917;
transform: translateY(-2px)
}

.cntct__detail-card:hover::before {
opacity: 1
}

.cntct__detail-icon {
width: 48px;
height: 48px;
margin: 0 0 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #02eb7b1a 0%, #711a591a 100%);
border-radius: 36px;
transition: transform .2s ease-out
}

.cntct__detail-card:hover .cntct__detail-icon {
transform: scale(1.08)
}

.cntct__detail-icon svg {
width: 24px;
height: 24px;
fill: #711A59
}

.cntct__detail-title {
font-size: 18px;
line-height: 1.2;
margin: 0 0 8px;
font-weight: 600;
color: #1d1d1d
}

.cntct__detail-value {
font-size: 16px;
line-height: 1.55;
margin: 0;
color: #3a3a3a
}

.cntct__detail-value a {
color: #02EB7B;
text-decoration: none;
border-bottom: 1px solid #02eb7b4d;
transition: border-color .14s ease-out, opacity .14s ease-out
}

.cntct__detail-value a:hover {
opacity: .8;
border-color: #02EB7B
}

.cntct__detail-address {
font-size: 16px;
line-height: 1.8;
margin: 0;
color: #3a3a3a;
font-style: normal
}

.cntct__motif {
position: absolute;
width: 8px;
height: 8px;
background: #02EB7B;
border-radius: 50%;
opacity: .15;
pointer-events: none
}

.cntct__motif--1 {
top: 120px;
right: 40px
}

.cntct__motif--2 {
top: 200px;
right: 80px;
background: #711A59
}

.cntct__motif--3 {
top: 280px;
right: 60px
}

.cntct__motif--4 {
bottom: 140px;
left: 60px;
background: #711A59
}

.cntct__motif--5 {
bottom: 220px;
left: 100px
}

@media (min-width: 768px) {
.cntct__intro {
padding: 120px 40px
}

.cntct__form-wrap {
padding: 120px 40px
}

.cntct__form-row {
flex-direction: row
}

.cntct__form-group {
flex: 1
}

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

.cntct__details {
padding: 120px 40px
}

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

@media (min-width: 1366px) {
.cntct__intro {
padding: 160px 80px
}

.cntct__form-wrap {
padding: 160px 80px
}

.cntct__details {
padding: 160px 80px
}

.cntct__details-grid {
grid-template-columns: repeat(3, 1fr)
}
}

.first {
background: #FFF;
color: #1a1618;
line-height: 1.55;
font-size: 16px;
max-width: 100%;
overflow-x: clip
}

.first__intro {
background: linear-gradient(117deg, #02EB7B 0%, #02eb7bd9 48%, #02eb7b00 100%);
padding: 80px 16px;
position: relative;
overflow: hidden
}

.first__intro-inner {
max-width: 1200px;
margin: 0 auto;
position: relative
}

.first__intro-stripe {
position: absolute;
top: 0;
right: 80px;
width: 2px;
height: 100%;
background: #711a5926;
transform: rotate(-12deg);
transform-origin: top
}

.first__intro-h {
font-size: 72px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0;
letter-spacing: -.02em
}

.first__intro-h-accent {
color: #FFF;
display: block
}

.first__demand {
background: #FFF;
padding: 80px 16px;
position: relative
}

.first__demand::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 100%;
background: linear-gradient(180deg, #02EB7B 0%, #02eb7b00 100%)
}

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

.first__demand-visual {
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 1px 7px 28px -1px #711a5917
}

.first__demand-img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
filter: saturate(0.92) brightness(1.03);
transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.first__demand-visual:hover .first__demand-img {
transform: scale(1.02)
}

.first__demand-txt {
padding: 16px 0
}

.first__demand-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
letter-spacing: -.01em
}

.first__demand-h-line {
display: block
}

.first__demand-p {
margin: 0 0 16px;
color: #2d2426
}

.first__demand-p:last-child {
margin-bottom: 0
}

.first__demand-p-first::first-letter {
font-size: 62px;
line-height: 1;
color: #02EB7B;
float: left;
margin: 4px 8px 0 0;
font-weight: 700
}

.first__method {
background: #fafcfb;
padding: 80px 16px;
position: relative
}

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

.first__method-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
text-align: center;
letter-spacing: -.01em
}

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

.first__method-card {
background: #FFF;
border-radius: 36px;
padding: 40px;
box-shadow: 1px 2px 5px -1px #02eb7b12;
transition: box-shadow .16s ease-out, transform .16s ease-out;
position: relative
}

.first__method-card::after {
content: '';
position: absolute;
bottom: 0;
left: 40px;
right: 40px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #02EB7B 50%, transparent 100%);
opacity: 0;
transition: opacity .18s ease-out
}

.first__method-card:hover {
box-shadow: 1px 8px 36px -1px #711a591c;
transform: translateY(-4px)
}

.first__method-card:hover::after {
opacity: 1
}

.first__method-card-num {
font-size: 62px;
line-height: 1;
font-weight: 700;
color: #02EB7B;
margin: 0 0 16px
}

.first__method-card-label {
font-size: 18px;
line-height: 1.55;
font-weight: 600;
color: #711A59;
margin: 0 0 8px
}

.first__method-card-desc {
margin: 0;
color: #3d3335;
font-size: 16px
}

.first__adapt {
background: #FFF;
padding: 80px 16px;
position: relative
}

.first__adapt::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 100%;
background: linear-gradient(180deg, #711a5914 0%, transparent 100%)
}

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

.first__adapt-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
letter-spacing: -.01em
}

.first__adapt-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center
}

.first__adapt-txt {
padding: 16px 0
}

.first__adapt-p {
margin: 0 0 16px;
color: #2d2426
}

.first__adapt-p:last-child {
margin-bottom: 0
}

.first__adapt-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}

.first__adapt-img-wrap {
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 7px 28px -1px #02eb7b17;
position: relative
}

.first__adapt-img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
filter: saturate(0.88) brightness(1.05);
transition: opacity .14s ease-out
}

.first__adapt-img-wrap:hover .first__adapt-img {
opacity: .92
}

.first__signal {
background: linear-gradient(262deg, transparent 0%, #02eb7b0a 35%, transparent 100%);
padding: 80px 16px;
position: relative
}

.first__signal-diagonal {
position: absolute;
top: 80px;
left: 10%;
width: 1px;
height: 280px;
background: linear-gradient(180deg, transparent 0%, #711a591f 50%, transparent 100%);
transform: rotate(38deg);
pointer-events: none
}

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

.first__signal-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
text-align: center;
letter-spacing: -.01em
}

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

.first__signal-item {
background: #FFF;
border-radius: 4px;
padding: 40px;
box-shadow: 1px 2px 5px -1px #711a5912;
transition: box-shadow .2s cubic-bezier(0.4, 0, 0.6, 1);
position: relative;
overflow: hidden
}

.first__signal-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: #02EB7B;
transition: height .22s ease-out
}

.first__signal-item:hover {
box-shadow: 1px 8px 36px -1px #02eb7b1c
}

.first__signal-item:hover::before {
height: 100%
}

.first__signal-item-label {
font-size: 18px;
line-height: 1.55;
font-weight: 600;
color: #711A59;
margin: 0 0 8px
}

.first__signal-item-txt {
margin: 0;
color: #3d3335
}

.first__crew {
background: #FFF;
padding: 80px 16px;
position: relative
}

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

.first__crew-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
letter-spacing: -.01em
}

.first__crew-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px
}

.first__crew-member {
background: #fafcfb;
border-radius: 36px;
overflow: hidden;
box-shadow: 1px 2px 5px -1px #711a5912;
transition: transform .16s ease-out, box-shadow .16s ease-out
}

.first__crew-member:hover {
transform: translateY(-8px);
box-shadow: 1px 8px 36px -1px #02eb7b1c
}

.first__crew-photo {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
filter: saturate(0.9) brightness(1.02)
}

.first__crew-info {
padding: 40px
}

.first__crew-name {
font-size: 18px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 8px
}

.first__crew-role {
font-size: 16px;
line-height: 1.55;
color: #02EB7B;
margin: 0 0 16px;
font-weight: 600
}

.first__crew-bio {
margin: 0;
color: #3d3335;
font-size: 16px
}

.first__relation {
background: linear-gradient(94deg, transparent 0%, #711a5908 100%);
padding: 80px 16px;
position: relative
}

.first__relation-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 40px;
align-items: center
}

.first__relation-txt {
padding: 16px 0
}

.first__relation-h {
font-size: 44px;
line-height: 1.2;
font-weight: 700;
color: #711A59;
margin: 0 0 40px;
letter-spacing: -.01em
}

.first__relation-p {
margin: 0 0 16px;
color: #2d2426
}

.first__relation-p:last-child {
margin-bottom: 0
}

.first__relation-visual {
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 7px 28px -1px #711a5917;
position: relative
}

.first__relation-img {
width: 100%;
height: 460px;
object-fit: cover;
display: block;
filter: saturate(0.9) brightness(1.04)
}

.first__relation-link {
color: #711A59;
text-decoration: none;
border-bottom: 2px solid #02EB7B;
transition: border-color .14s ease-out, border-width .14s ease-out, color .14s ease-out;
display: inline;
padding-bottom: 2px
}

.first__relation-link:hover {
border-bottom-width: 3px;
border-color: #711A59;
color: #02EB7B
}

@media (max-width: 1366px) {
.first__intro {
padding: 80px 16px
}

.first__intro-h {
font-size: 62px
}

.first__demand-inner {
gap: 40px
}

.first__method-grid {
gap: 40px
}

.first__crew-layout {
gap: 40px
}
}

@media (max-width: 768px) {
.first__intro {
padding: 40px 16px
}

.first__intro-h {
font-size: 44px
}

.first__intro-stripe {
right: 40px
}

.first__demand {
padding: 40px 16px
}

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

.first__demand-h {
font-size: 44px
}

.first__demand-img {
height: 320px
}

.first__method {
padding: 40px 16px
}

.first__method-h {
font-size: 44px
}

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

.first__method-card {
padding: 40px
}

.first__adapt {
padding: 40px 16px
}

.first__adapt-h {
font-size: 44px
}

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

.first__adapt-visual {
gap: 8px
}

.first__adapt-img {
height: 200px
}

.first__signal {
padding: 40px 16px
}

.first__signal-h {
font-size: 44px
}

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

.first__signal-item {
padding: 40px
}

.first__crew {
padding: 40px 16px
}

.first__crew-h {
font-size: 44px
}

.first__crew-layout {
grid-template-columns: 1fr;
gap: 16px
}

.first__crew-photo {
height: 240px
}

.first__crew-info {
padding: 40px
}

.first__relation {
padding: 40px 16px
}

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

.first__relation-h {
font-size: 44px
}

.first__relation-img {
height: 340px
}
}

@media (max-width: 375px) {
.first__intro {
padding: 40px 8px
}

.first__intro-h {
font-size: 44px
}

.first__demand {
padding: 40px 8px
}

.first__demand-inner {
gap: 16px
}

.first__demand-img {
height: 280px
}

.first__method {
padding: 40px 8px
}

.first__method-card {
padding: 16px
}

.first__adapt {
padding: 40px 8px
}

.first__adapt-img {
height: 160px
}

.first__signal {
padding: 40px 8px
}

.first__signal-item {
padding: 16px
}

.first__crew {
padding: 40px 8px
}

.first__crew-info {
padding: 16px
}

.first__crew-photo {
height: 200px
}

.first__relation {
padding: 40px 8px
}

.first__relation-img {
height: 280px
}
}

.first__intro-reveal {
animation: first-reveal .8s cubic-bezier(0.4, 0, 0.6, 1) forwards;
clip-path: inset(0 0 100% 0)
}

@keyframes first-reveal {
to {
clip-path: inset(0 0 0 0)
}
}

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

.abt__hero {
max-width: 1200px;
margin: 0 auto;
padding: 80px 16px;
position: relative;
display: flex;
flex-direction: column;
gap: 40px
}

.abt__hero-curves {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .08;
z-index: 0
}

.abt__hero-curve {
position: absolute;
stroke: #02EB7B;
fill: none;
stroke-width: 2
}

.abt__hero-curve--one {
top: 16%;
left: 8%;
width: 280px;
height: 180px
}

.abt__hero-curve--two {
top: 42%;
right: 12%;
width: 320px;
height: 220px;
stroke: #711A59
}

.abt__hero-curve--three {
bottom: 18%;
left: 18%;
width: 240px;
height: 160px
}

.abt__hero-text {
position: relative;
z-index: 1;
max-width: 720px
}

.abt__manifesto {
font-size: 44px;
line-height: 1.2;
letter-spacing: -.02em;
margin: 0 0 40px;
font-weight: 600
}

.abt__manifesto-line {
display: block;
opacity: 0;
animation: abt-fade-in .18s ease-out forwards
}

.abt__manifesto-line:nth-child(1) {
animation-delay: .08s
}

.abt__manifesto-line:nth-child(2) {
animation-delay: .22s
}

.abt__manifesto-line:nth-child(3) {
animation-delay: .36s
}

.abt__manifesto-accent {
color: #02EB7B;
font-size: 62px
}

.abt__hero-img-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 680px;
margin-left: auto;
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 8px 36px -1px #02eb7b1c;
opacity: 0;
animation: abt-img-reveal .22s ease-out .5s forwards
}

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

@keyframes abt-fade-in {
to {
opacity: 1
}
}

@keyframes abt-img-reveal {
to {
opacity: 1
}
}

.abt__foundation {
background: linear-gradient(112deg, #02eb7b08 0%, transparent 48%, transparent 52%, #711a5908 100%);
padding: 80px 16px;
position: relative
}

.abt__foundation-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 28% 42%, #02eb7b0f 0%, transparent 38%);
pointer-events: none;
animation: abt-shadow-drift 8s ease-in-out infinite
}

@keyframes abt-shadow-drift {

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

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

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

.abt__foundation-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start
}

.abt__foundation-content {
display: flex;
flex-direction: column;
gap: 40px
}

.abt__foundation-heading {
font-size: 44px;
line-height: 1.2;
margin: 0;
font-weight: 600;
letter-spacing: -.01em
}

.abt__foundation-heading-word {
display: block
}

.abt__foundation-text {
font-size: 18px;
line-height: 1.8;
margin: 0
}

.abt__foundation-text--first::first-letter {
font-size: 72px;
line-height: 1;
float: left;
margin: 4px 16px 0 0;
color: #711A59;
font-weight: 700
}

.abt__foundation-sidebar {
background: #FFF;
padding: 40px;
border-radius: 36px;
box-shadow: 1px 7px 28px -1px #711a5917;
position: sticky;
top: 40px
}

.abt__foundation-label {
font-size: 16px;
line-height: 1.55;
color: #711A59;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 16px;
font-weight: 600
}

.abt__foundation-value {
font-size: 62px;
line-height: 1.2;
margin: 0;
font-weight: 700;
background: linear-gradient(135deg, #02EB7B 0%, #711A59 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.abt__texture {
background-image: url(./graphics_gallery/PUBLISHED010.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
padding: 80px 16px
}

.abt__texture::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fffffff0;
z-index: 0
}

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

.abt__texture-heading {
font-size: 44px;
line-height: 1.2;
margin: 0 0 80px;
text-align: center;
font-weight: 600;
letter-spacing: -.01em
}

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

.abt__persona {
background: #FFF;
padding: 40px;
border-radius: 4px;
box-shadow: 1px 2px 5px -1px #02eb7b12;
transition: box-shadow .16s ease-out, transform .16s ease-out;
display: flex;
flex-direction: column;
gap: 16px
}

.abt__persona:hover {
box-shadow: 1px 8px 36px -1px #711a591c;
transform: translateY(-4px)
}

.abt__persona-icon {
width: 56px;
height: 56px;
border-radius: 4px;
background: linear-gradient(135deg, #02eb7b1f 0%, #711a591f 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px
}

.abt__persona-icon svg {
width: 28px;
height: 28px;
fill: #711A59
}

.abt__persona-label {
font-size: 16px;
line-height: 1.55;
color: #711A59;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0;
font-weight: 600
}

.abt__persona-title {
font-size: 18px;
line-height: 1.55;
margin: 0;
font-weight: 600
}

.abt__persona-desc {
font-size: 16px;
line-height: 1.8;
margin: 0;
color: #3a3a4a
}

.abt__divider {
max-width: 1200px;
margin: 0 auto;
padding: 80px 16px;
display: flex;
align-items: center;
justify-content: center
}

.abt__divider-symbol {
font-size: 72px;
line-height: 1;
color: #02EB7B;
font-weight: 700;
position: relative
}

.abt__divider-symbol::before,
.abt__divider-symbol::after {
content: '';
position: absolute;
top: 50%;
width: 160px;
height: 2px;
background: linear-gradient(to right, transparent, #02EB7B 50%, transparent)
}

.abt__divider-symbol::before {
right: 100%;
margin-right: 40px
}

.abt__divider-symbol::after {
left: 100%;
margin-left: 40px
}

.abt__values {
background: #FFF;
padding: 80px 16px;
position: relative
}

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

.abt__values-intro {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
align-items: start;
margin-bottom: 80px
}

.abt__values-heading {
font-size: 44px;
line-height: 1.2;
margin: 0;
font-weight: 600;
letter-spacing: -.01em;
position: sticky;
top: 40px
}

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

.abt__values-text {
font-size: 18px;
line-height: 1.8;
margin: 0
}

.abt__checklist {
background: linear-gradient(135deg, #02eb7b0a 0%, #711a590a 100%);
border-radius: 36px;
padding: 40px;
box-shadow: inset 0 2px 8px #711a590f
}

.abt__checklist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 16px;
border-bottom: 2px solid #02eb7b33
}

.abt__checklist-title {
font-size: 18px;
line-height: 1.55;
margin: 0;
font-weight: 600
}

.abt__checklist-progress {
font-size: 16px;
line-height: 1.55;
color: #711A59;
font-weight: 600
}

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

.abt__checklist-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #FFF;
border-radius: 4px;
transition: background .14s ease-out
}

.abt__checklist-item:hover {
background: #02eb7b0f
}

.abt__checklist-check {
width: 24px;
height: 24px;
border-radius: 4px;
background: #02EB7B;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.abt__checklist-check svg {
width: 14px;
height: 14px;
fill: #FFF
}

.abt__checklist-label {
font-size: 16px;
line-height: 1.55;
margin: 0;
flex: 1
}

.abt__gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}

.abt__gallery-item {
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 2px 5px -1px #02eb7b12;
transition: box-shadow .18s ease-out
}

.abt__gallery-item:hover {
box-shadow: 1px 7px 28px -1px #711a5917
}

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

.abt__quote {
background: linear-gradient(135deg, #711A59 0%, #02EB7B 100%);
padding: 80px 16px;
position: relative;
overflow: hidden
}

.abt__quote::before {
content: '"';
position: absolute;
top: -40px;
left: 40px;
font-size: 320px;
line-height: 1;
color: #ffffff14;
font-weight: 700;
pointer-events: none
}

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

.abt__quote-content {
max-width: 840px;
margin: 0 auto;
text-align: center;
color: #FFF
}

.abt__quote-text {
font-size: 44px;
line-height: 1.55;
margin: 0 0 40px;
font-weight: 300;
letter-spacing: -.01em
}

.abt__quote-word {
display: inline-block;
transition: background .16s ease-out;
padding: 4px 8px;
border-radius: 4px
}

.abt__quote-word:hover {
background: #ffffff24
}

.abt__quote-author {
font-size: 18px;
line-height: 1.55;
margin: 0;
opacity: .86
}

.abt__quote-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 40px
}

.abt__quote-icon {
width: 32px;
height: 32px;
fill: #fff9
}

@media (max-width: 1366px) {
.abt__hero {
padding: 80px 16px
}

.abt__foundation-grid {
gap: 40px
}

.abt__values-intro {
gap: 40px
}
}

@media (max-width: 768px) {
.abt__hero {
padding: 40px 16px;
gap: 40px
}

.abt__manifesto {
font-size: 44px
}

.abt__manifesto-accent {
font-size: 44px
}

.abt__hero-img {
height: 320px
}

.abt__foundation {
padding: 40px 16px
}

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

.abt__foundation-heading {
font-size: 44px
}

.abt__foundation-sidebar {
position: static
}

.abt__texture {
padding: 40px 16px
}

.abt__texture-heading {
font-size: 44px;
margin-bottom: 40px
}

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

.abt__divider {
padding: 40px 16px
}

.abt__divider-symbol::before,
.abt__divider-symbol::after {
width: 80px
}

.abt__values {
padding: 40px 16px
}

.abt__values-intro {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 40px
}

.abt__values-heading {
font-size: 44px;
position: static
}

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

.abt__gallery-img {
height: 280px
}

.abt__quote {
padding: 40px 16px
}

.abt__quote::before {
font-size: 180px;
top: -20px;
left: 16px
}

.abt__quote-text {
font-size: 18px;
margin-bottom: 16px
}

.abt__quote-icons {
gap: 16px;
margin-top: 16px
}
}

@media (max-width: 375px) {
.abt__hero {
padding: 40px 8px
}

.abt__manifesto {
font-size: 44px
}

.abt__foundation {
padding: 40px 8px
}

.abt__foundation-sidebar {
padding: 16px
}

.abt__texture {
padding: 40px 8px
}

.abt__persona {
padding: 16px
}

.abt__divider {
padding: 40px 8px
}

.abt__divider-symbol::before,
.abt__divider-symbol::after {
display: none
}

.abt__values {
padding: 40px 8px
}

.abt__checklist {
padding: 16px
}

.abt__quote {
padding: 40px 8px
}
}

.cmp {
background: #FFF;
color: #1a0d14;
max-width: 1200px;
margin: 0 auto;
padding: 0
}

.cmp__hero {
background: linear-gradient(127deg, #711A59 0%, #4a1139 100%);
padding: 80px 16px 120px;
position: relative;
overflow: hidden
}

.cmp__hero::before {
content: '';
position: absolute;
top: 40px;
left: 40px;
width: 80px;
height: 1px;
background: #02eb7b66
}

.cmp__hero::after {
content: '';
position: absolute;
top: 40px;
left: 40px;
width: 1px;
height: 80px;
background: #02eb7b66
}

.cmp__hero-inner {
max-width: 680px;
margin: 0 auto;
text-align: center
}

.cmp__hero-title {
font-size: 62px;
line-height: 1.2;
color: #FFF;
margin: 0 0 40px;
letter-spacing: -.02em
}

.cmp__hero-accent {
color: #02EB7B;
display: inline-block;
position: relative
}

.cmp__hero-text {
font-size: 18px;
line-height: 1.55;
color: #ffffffde;
margin: 0;
max-width: 580px;
margin: 0 auto
}

.cmp__grid {
padding: 80px 16px;
background: #FFF
}

.cmp__grid-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1168px;
margin: 0 auto
}

.cmp__card {
background: #FFF;
border-radius: 4px;
padding: 40px;
box-shadow: 1px 2px 5px -1px #711a5912 1px 7px 28px -1px #711a5917;
transition: box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1), transform .18s cubic-bezier(0.4, 0, 0.6, 1);
position: relative
}

.cmp__card:hover {
box-shadow: 1px 8px 36px -1px #711a591c;
transform: translateY(-4px)
}

.cmp__card-img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 40px;
display: block
}

.cmp__card-label {
font-size: 16px;
line-height: 1.2;
color: #711A59;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 16px;
font-weight: 600
}

.cmp__card-name {
font-size: 44px;
line-height: 1.2;
color: #1a0d14;
margin: 0 0 40px;
letter-spacing: -.01em
}

.cmp__card-desc {
font-size: 16px;
line-height: 1.55;
color: #4a4a4a;
margin: 0
}

.cmp__compare {
padding: 80px 16px;
background: linear-gradient(94deg, #02eb7b08 0%, #fff0 40%, #fff0 60%, #711a5908 100%);
position: relative
}

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

.cmp__compare-inner {
max-width: 1168px;
margin: 0 auto
}

.cmp__compare-head {
text-align: center;
margin-bottom: 80px
}

.cmp__compare-title {
font-size: 44px;
line-height: 1.2;
color: #1a0d14;
margin: 0 0 16px;
letter-spacing: -.01em
}

.cmp__compare-subtitle {
font-size: 18px;
line-height: 1.55;
color: #4a4a4a;
margin: 0
}

.cmp__table-wrap {
overflow-x: auto;
border-radius: 4px;
box-shadow: 1px 2px 5px -1px #711a5912 1px 7px 28px -1px #711a5917
}

.cmp__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #FFF
}

.cmp__table-head {
background: linear-gradient(135deg, #711A59 0%, #4a1139 100%)
}

.cmp__table-head th {
padding: 40px 16px;
text-align: left;
font-size: 18px;
line-height: 1.2;
color: #FFF;
font-weight: 600;
border-bottom: 2px solid #02EB7B
}

.cmp__table-head th:first-child {
border-top-left-radius: 4px;
width: 35%
}

.cmp__table-head th:last-child {
border-top-right-radius: 4px
}

.cmp__table-body tr {
transition: background-color .15s ease-out
}

.cmp__table-body tr:hover {
background-color: #02eb7b0a
}

.cmp__table-body td {
padding: 40px 16px;
font-size: 16px;
line-height: 1.55;
color: #1a0d14;
border-bottom: 1px solid #711a5914
}

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

.cmp__table-body tr:last-child td:first-child {
border-bottom-left-radius: 4px
}

.cmp__table-body tr:last-child td:last-child {
border-bottom-right-radius: 4px
}

.cmp__table-feat {
font-weight: 600;
color: #711A59
}

.cmp__table-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 36px;
background: linear-gradient(135deg, #02EB7B 0%, #01c769 100%);
color: #FFF;
font-size: 14px;
font-weight: 600
}

.cmp__table-cross {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 36px;
background: #711a591a;
color: #711A59;
font-size: 14px;
font-weight: 600
}

.cmp__details {
padding: 80px 16px;
background: #FFF;
position: relative
}

.cmp__details-inner {
max-width: 740px;
margin: 0 auto
}

.cmp__details-title {
font-size: 44px;
line-height: 1.2;
color: #1a0d14;
margin: 0 0 40px;
text-align: center;
letter-spacing: -.01em
}

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

.cmp__accordion-item {
background: #FFF;
border-radius: 4px;
box-shadow: 1px 2px 5px -1px #711a5912;
overflow: hidden;
transition: box-shadow .16s ease-out
}

.cmp__accordion-item:hover {
box-shadow: 1px 7px 28px -1px #711a5917
}

.cmp__accordion-toggle {
display: none
}

.cmp__accordion-header {
padding: 40px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: #FFF;
transition: background-color .14s ease-out;
position: relative
}

.cmp__accordion-header::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: linear-gradient(135deg, #02EB7B 0%, #01c769 100%);
transition: width .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cmp__accordion-item:hover .cmp__accordion-header::before {
width: 4px
}

.cmp__accordion-question {
font-size: 18px;
line-height: 1.2;
color: #1a0d14;
margin: 0;
font-weight: 600;
position: relative
}

.cmp__accordion-icon {
width: 28px;
height: 28px;
border-radius: 36px;
background: #711a5914;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color .16s ease-out, transform .16s ease-out
}

.cmp__accordion-icon::before,
.cmp__accordion-icon::after {
content: '';
position: absolute;
width: 12px;
height: 2px;
background: #711A59;
border-radius: 4px;
transition: transform .16s ease-out, opacity .16s ease-out
}

.cmp__accordion-icon::after {
transform: rotate(90deg)
}

.cmp__accordion-toggle:checked+.cmp__accordion-header .cmp__accordion-icon {
background: linear-gradient(135deg, #02EB7B 0%, #01c769 100%)
}

.cmp__accordion-toggle:checked+.cmp__accordion-header .cmp__accordion-icon::before,
.cmp__accordion-toggle:checked+.cmp__accordion-header .cmp__accordion-icon::after {
background: #FFF
}

.cmp__accordion-toggle:checked+.cmp__accordion-header .cmp__accordion-icon::after {
opacity: 0
}

.cmp__accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cmp__accordion-toggle:checked~.cmp__accordion-content {
max-height: 800px
}

.cmp__accordion-body {
padding: 0 40px 40px;
font-size: 16px;
line-height: 1.55;
color: #4a4a4a
}

.cmp__accordion-body p {
margin: 0 0 16px
}

.cmp__accordion-body p:last-child {
margin: 0
}

.cmp__metrics {
padding: 80px 16px;
background: #FFF;
position: relative;
overflow: hidden
}

.cmp__metrics::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #711a591f 20%, #711a591f 80%, transparent 100%)
}

.cmp__metrics-inner {
max-width: 1168px;
margin: 0 auto
}

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

.cmp__metric {
text-align: center;
padding: 40px 16px;
border-radius: 4px;
background: linear-gradient(135deg, #02eb7b05 0%, #711a5905 100%);
transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1);
position: relative
}

.cmp__metric::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, #02EB7B 0%, #711A59 100%);
transition: width .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cmp__metric:hover {
transform: translateY(-4px);
box-shadow: 1px 7px 28px -1px #711a5917
}

.cmp__metric:hover::before {
width: 80%
}

.cmp__metric-num {
font-size: 72px;
line-height: 1.2;
color: #711A59;
margin: 0 0 8px;
font-weight: 600;
letter-spacing: -.02em;
background: linear-gradient(135deg, #711A59 0%, #02EB7B 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.cmp__metric-label {
font-size: 16px;
line-height: 1.55;
color: #4a4a4a;
margin: 0
}

@media (max-width: 1366px) {
.cmp__hero {
padding: 80px 16px 100px
}

.cmp__hero-title {
font-size: 62px
}

.cmp__grid-wrap {
gap: 40px
}

.cmp__metrics-grid {
gap: 40px
}
}

@media (max-width: 768px) {
.cmp__hero {
padding: 80px 16px
}

.cmp__hero::before,
.cmp__hero::after {
display: none
}

.cmp__hero-title {
font-size: 44px
}

.cmp__hero-text {
font-size: 16px
}

.cmp__grid {
padding: 80px 16px
}

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

.cmp__card {
padding: 40px
}

.cmp__card-img {
height: 200px;
margin-bottom: 40px
}

.cmp__card-name {
font-size: 44px
}

.cmp__compare {
padding: 80px 16px
}

.cmp__compare-head {
margin-bottom: 40px
}

.cmp__compare-title {
font-size: 44px
}

.cmp__compare-subtitle {
font-size: 16px
}

.cmp__table-head th {
padding: 16px 8px;
font-size: 16px
}

.cmp__table-body td {
padding: 16px 8px;
font-size: 16px
}

.cmp__details {
padding: 80px 16px
}

.cmp__details-title {
font-size: 44px
}

.cmp__accordion-header {
padding: 16px
}

.cmp__accordion-question {
font-size: 16px
}

.cmp__accordion-body {
padding: 0 16px 16px;
font-size: 16px
}

.cmp__metrics {
padding: 80px 16px
}

.cmp__metrics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px
}

.cmp__metric {
padding: 40px 16px
}

.cmp__metric-num {
font-size: 62px
}
}

@media (max-width: 375px) {
.cmp__hero {
padding: 40px 16px
}

.cmp__hero-title {
font-size: 44px;
margin-bottom: 16px
}

.cmp__grid {
padding: 40px 16px
}

.cmp__card {
padding: 16px
}

.cmp__card-img {
height: 180px;
margin-bottom: 16px
}

.cmp__card-name {
font-size: 44px;
margin-bottom: 16px
}

.cmp__compare {
padding: 40px 16px
}

.cmp__compare-head {
margin-bottom: 40px
}

.cmp__compare-title {
font-size: 44px
}

.cmp__details {
padding: 40px 16px
}

.cmp__details-title {
font-size: 44px;
margin-bottom: 40px
}

.cmp__accordion {
gap: 8px
}

.cmp__accordion-header {
padding: 16px
}

.cmp__accordion-body {
padding: 0 16px 16px
}

.cmp__metrics {
padding: 40px 16px
}

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

.cmp__metric {
padding: 16px
}

.cmp__metric-num {
font-size: 44px
}
}

.success-page {
min-height: 100vh;
background: linear-gradient(112deg, transparent 0%, transparent 45%, #02eb7b08 45%, #02eb7b08 55%, transparent 55%, transparent 100%);
padding: 80px 16px;
display: flex;
align-items: center;
justify-content: center
}

.success-page__container {
max-width: 1200px;
width: 100%;
margin: 0 auto
}

.success-page__card {
background: #FFF;
border-radius: 36px;
padding: 80px 40px;
box-shadow: 1px 8px 36px -1px #711a591c;
max-width: 680px;
margin: 0 auto;
text-align: center
}

.success-page__icon {
width: 96px;
height: 96px;
margin: 0 auto 40px;
position: relative
}

.success-page__icon-circle {
width: 96px;
height: 96px;
border-radius: 4px;
background: linear-gradient(135deg, #02EB7B 0%, #02eb7bb3 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 1px 7px 28px -1px #02eb7b17
}

.success-page__icon-check {
width: 52px;
height: 52px;
stroke: #FFF;
stroke-width: 4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round
}

.success-page__title {
font-size: 62px;
line-height: 1.2;
color: #711A59;
margin: 0 0 16px;
letter-spacing: -.02em
}

.success-page__message {
font-size: 18px;
line-height: 1.55;
color: #2a2a2a;
margin: 0 0 40px
}

.success-page__details {
background: #02eb7b0a;
border-radius: 4px;
padding: 40px;
margin: 0 0 40px
}

.success-page__details-title {
font-size: 16px;
line-height: 1.55;
color: #711A59;
margin: 0 0 16px;
font-weight: 600
}

.success-page__details-text {
font-size: 16px;
line-height: 1.8;
color: #4a4a4a;
margin: 0
}

.success-page__details-text:not(:last-child) {
margin: 0 0 8px
}

.success-page__actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap
}

.success-page__btn {
font-size: 16px;
line-height: 1.55;
padding: 16px 40px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: opacity .18s ease-out, box-shadow .18s ease-out;
border: none;
cursor: pointer;
text-transform: lowercase
}

.success-page__btn--primary {
background: #02EB7B;
color: #1a1a1a;
box-shadow: 1px 2px 5px -1px #02eb7b12
}

.success-page__btn--primary:hover {
opacity: .88;
box-shadow: 1px 7px 28px -1px #02eb7b17
}

.success-page__btn--secondary {
background: transparent;
color: #711A59;
border: 2px solid #711A59
}

.success-page__btn--secondary:hover {
opacity: .82
}

.success-page__info {
margin: 40px 0 0;
padding: 40px 0 0;
border-top: 1px solid #711a591f
}

.success-page__info-text {
font-size: 16px;
line-height: 1.8;
color: #6a6a6a;
margin: 0
}

.success-page__info-contact {
color: #02EB7B;
text-decoration: none;
transition: opacity .16s ease-out
}

.success-page__info-contact:hover {
opacity: .76
}

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

.success-page__card {
padding: 40px 16px
}

.success-page__icon {
width: 72px;
height: 72px;
margin: 0 auto 40px
}

.success-page__icon-circle {
width: 72px;
height: 72px
}

.success-page__icon-check {
width: 38px;
height: 38px
}

.success-page__title {
font-size: 44px
}

.success-page__details {
padding: 16px
}

.success-page__actions {
flex-direction: column
}

.success-page__btn {
width: 100%
}
}

@media (max-width: 375px) {
.success-page__title {
font-size: 44px
}

.success-page__message {
font-size: 16px
}
}