* {
box-sizing: border-box
}

body {
margin: 0;
font-family: 'Roboto', sans-serif
}

.top_bar {
background: #19192D;
padding: 8px 48px
}

.top_bar_row {
max-width: 1024px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px
}

.top_contact_item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
text-decoration: none;
letter-spacing: .03em;
transition: color .5s ease-in-out
}

.top_contact_item:hover {
color: #0CC1FC
}

.top_contact_item svg {
flex-shrink: 0
}

.top_sep {
width: 1px;
height: 16px;
background: #0cc1fc4d
}

.hd {
background: #FDFDFD;
position: relative;
border-bottom: 1px solid #19192d1a;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.hd_inner {
max-width: 1024px;
margin: 0 auto;
padding: 24px 48px;
display: flex;
align-items: flex-start;
gap: 48px
}

.brand_col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0
}

.brand_mark {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 90px;
border: 1px solid #19192d2e;
border-radius: 11px;
background: #FDFDFD;
box-shadow: 1px 2px 3px -1px #0cc1fc0f 1px 5px 25px -1px #0cc1fc1a;
padding: 8px;
text-decoration: none
}

.brand_mark img {
width: 62px;
height: 74px;
object-fit: contain;
display: block
}

.brand_name {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: #19192D;
letter-spacing: .12em;
text-transform: uppercase;
text-align: center
}

.hd_nav_col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: 8px
}

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

.prim_nav li {
display: flex
}

.prim_nav a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #19192D;
text-decoration: none;
padding: 8px 24px;
border-radius: 5px;
border: 1px solid transparent;
position: relative;
overflow: hidden;
transition: color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color .45s ease-in-out;
z-index: 1
}

.prim_nav a::before {
content: "";
position: absolute;
inset: 0;
background: #0CC1FC;
transform: translateX(100%);
transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
border-radius: 5px
}

.prim_nav a:hover::before {
transform: translateX(0)
}

.prim_nav a:hover {
color: #19192D;
border-color: #0CC1FC
}

.prim_nav a:focus-visible {
outline: 2px solid #0CC1FC;
outline-offset: 2px
}

.prim_nav .arr_lnk::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
transition: transform .45s ease-in-out
}

.prim_nav a:hover.arr_lnk::after {
transform: rotate(45deg) translate(2px, -2px)
}

.prim_nav .home_lnk {
font-weight: 700;
background: linear-gradient(135deg, #0CC1FC 0%, #0cc1fc26 100%);
border-color: #0CC1FC;
color: #19192D
}

.prim_nav .home_lnk::before {
background: #19192D
}

.prim_nav .home_lnk:hover {
color: #FDFDFD;
border-color: #19192D
}

.prim_nav .home_lnk:focus-visible {
outline-color: #19192D
}

.ft {
background: #19192D;
position: relative
}

.ft_upper {
max-width: 1024px;
margin: 0 auto;
padding: 48px 48px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px
}

.ft_tagline {
flex: 1
}

.ft_tagline_txt {
font-size: 31px;
font-weight: 700;
line-height: 1.2;
color: #FDFDFD;
margin: 0 0 8px
}

.ft_tagline_sub {
font-size: 15px;
line-height: 1.6;
color: #fdfdfd99;
margin: 0;
letter-spacing: .03em
}

.ft_logo_anchor {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 90px;
border: 1px solid #0cc1fc59;
border-radius: 11px;
background: #fdfdfd0f;
box-shadow: 1px 2px 3px -1px #0cc1fc0f 1px 5px 25px -1px #0cc1fc1a;
padding: 8px;
flex-shrink: 0;
text-decoration: none;
transition: border-color .5s ease-in-out, background .5s ease-in-out
}

.ft_logo_anchor:hover {
border-color: #0CC1FC;
background: #0cc1fc1a
}

.ft_logo_anchor img {
width: 62px;
height: 74px;
object-fit: contain;
display: block
}

.ft_divider {
max-width: 1024px;
margin: 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, #0cc1fc66, transparent)
}

.ft_bottom {
max-width: 1024px;
margin: 0 auto;
padding: 24px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap
}

.ft_copy {
font-size: 15px;
line-height: 1.6;
color: #fdfdfd80;
margin: 0;
letter-spacing: .02em
}

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

.ft_legal a {
font-size: 15px;
line-height: 1.6;
color: #fdfdfd80;
text-decoration: none;
letter-spacing: .03em;
transition: color .5s ease-in-out
}

.ft_legal a:hover {
color: #0CC1FC
}

.ft_legal a:focus-visible {
outline: 2px solid #0CC1FC;
outline-offset: 2px;
border-radius: 1px
}

@media (max-width: 768px) {
.top_bar {
padding: 8px 24px
}

.hd_inner {
padding: 24px;
flex-direction: column;
gap: 24px
}

.brand_col {
flex-direction: row;
align-items: center
}

.ft_upper {
padding: 48px 24px 24px;
flex-direction: column;
align-items: flex-start
}

.ft_logo_anchor {
align-self: flex-end
}

.ft_bottom {
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 8px
}
}

@media (max-width: 640px) {
.top_bar_row {
justify-content: center;
flex-wrap: wrap;
gap: 8px
}

.prim_nav {
gap: 8px
}

.prim_nav a {
padding: 8px 16px;
font-size: 15px
}

.ft_legal {
gap: 8px
}
}

.jv-doc-section {
max-width: 1024px;
margin: 0 auto;
padding: 96px 48px
}

.jv-doc-section p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
margin-bottom: 24px
}

.jv-doc-section ul,
.jv-doc-section ol {
font-size: 15px;
line-height: 1.6;
color: #19192D;
padding-left: 48px;
margin-bottom: 24px
}

.jv-doc-section li {
margin-bottom: 8px
}

.jv-doc-section li:last-child {
margin-bottom: 0
}

.jv-doc-section ul li {
list-style-type: disc
}

.jv-doc-section ol li {
list-style-type: decimal
}

.jv-doc-section ul ul,
.jv-doc-section ol ol,
.jv-doc-section ul ol,
.jv-doc-section ol ul {
margin-top: 8px;
margin-bottom: 8px
}

.jv-doc-section em,
.jv-doc-section i {
font-style: italic;
color: #19192D
}

.jv-doc-section table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 1.6;
margin-bottom: 48px;
border-radius: 11px;
overflow: hidden;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.jv-doc-section thead {
background-color: #19192D
}

.jv-doc-section thead th {
color: #FDFDFD;
font-size: 15px;
line-height: 1.2;
letter-spacing: .06em;
padding: 24px;
text-align: left;
font-weight: 600
}

.jv-doc-section tbody tr {
border-bottom: 1px solid #0cc1fc26;
transition: background-color .55s ease-in-out
}

.jv-doc-section tbody tr:last-child {
border-bottom: none
}

.jv-doc-section tbody tr:nth-child(even) {
background-color: #0cc1fc0a
}

.jv-doc-section tbody tr:hover {
background-color: #0cc1fc17
}

.jv-doc-section td {
color: #19192D;
padding: 24px;
font-size: 15px;
line-height: 1.6;
vertical-align: top
}

.jv-doc-section th {
padding: 24px;
vertical-align: top
}

.jv-doc-section div {
margin-bottom: 24px
}

.jv-doc-section div:last-child {
margin-bottom: 0
}

@media (max-width: 768px) {
.jv-doc-section {
padding: 48px 24px
}

.jv-doc-section ul,
.jv-doc-section ol {
padding-left: 24px
}

.jv-doc-section table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}

.jv-doc-section thead th,
.jv-doc-section td {
padding: 24px 8px
}
}

@media (max-width: 640px) {
.jv-doc-section {
padding: 48px 8px
}

.jv-doc-section thead th,
.jv-doc-section td {
padding: 8px;
font-size: 15px
}
}

.lpd {
max-width: 100%;
overflow-x: hidden
}

.lpd .pg-wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.lpd .radial-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
pointer-events: none;
z-index: 0
}

.lpd .radial-ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 1px solid #0cc1fc1f;
transform: translate(-50%, -50%) scale(0);
animation: ring-expand 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

.lpd .radial-ring:nth-child(1) {
width: 200px;
height: 200px;
animation-delay: 0s
}

.lpd .radial-ring:nth-child(2) {
width: 360px;
height: 360px;
animation-delay: .9s
}

.lpd .radial-ring:nth-child(3) {
width: 520px;
height: 520px;
animation-delay: 1.8s
}

@keyframes ring-expand {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: .7
}

80% {
opacity: .1
}

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

.lpd .title-band {
position: relative;
padding: 96px 0 48px;
background-color: #FDFDFD;
overflow: hidden
}

.lpd .title-grid {
display: grid;
grid-template-columns: 1fr 2.6fr 1fr;
gap: 24px;
align-items: center;
position: relative;
z-index: 1
}

.lpd .t-img-wrap {
position: relative;
border-radius: 11px;
overflow: hidden;
aspect-ratio: 3/4
}

.lpd .t-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .55s ease-in-out
}

.lpd .t-img-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to center, #19192d8c 0%, transparent 60%);
background: radial-gradient(ellipse at 30% 80%, #19192da6 0%, transparent 70%);
pointer-events: none
}

.lpd .t-img-wrap:hover img {
transform: scale(1.04)
}

.lpd .t-img-right::after {
background: radial-gradient(ellipse at 70% 80%, #19192da6 0%, transparent 70%)
}

.lpd .t-text {
text-align: center;
padding: 0 8px
}

.lpd .t-cat {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 24px
}

.lpd .cat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0CC1FC;
flex-shrink: 0
}

.lpd .cat-label {
font-size: 15px;
line-height: 1.2;
letter-spacing: .08em;
color: #0CC1FC;
text-transform: uppercase
}

.lpd .t-h1 {
font-size: 43px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
letter-spacing: -.02em;
margin: 0 0 24px
}

.lpd .t-h1 .grad-word {
background: linear-gradient(117deg, #0CC1FC 0%, transparent 140%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.lpd .t-sub {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .72;
margin: 0 0 24px
}

.lpd .t-meta-row {
display: flex;
flex-direction: row;
justify-content: center;
gap: 24px;
flex-wrap: wrap
}

.lpd .t-meta-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px
}

.lpd .meta-val {
font-size: 15px;
line-height: 1.2;
font-weight: 700;
color: #19192D
}

.lpd .meta-lbl {
font-size: 15px;
line-height: 1.2;
color: #19192D;
opacity: .55;
letter-spacing: .05em
}

.lpd .diag-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0
}

.lpd .diag-line::before {
content: "";
position: absolute;
top: -20%;
left: 15%;
width: 1px;
height: 140%;
background: linear-gradient(to bottom, transparent 0%, #0cc1fc2e 40%, transparent 100%);
transform: rotate(18deg);
transform-origin: top left
}

.lpd .sec-divider {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
padding: 0 24px;
max-width: 1024px;
margin: 0 auto
}

.lpd .sec-divider::before,
.lpd .sec-divider::after {
content: "";
flex: 1;
height: 1px;
background: #19192d1f
}

.lpd .div-word {
font-size: 15px;
line-height: 1.2;
letter-spacing: .1em;
color: #19192D;
opacity: .4;
text-transform: uppercase;
white-space: nowrap
}

.lpd .detail-band {
padding: 48px 0 96px;
background-color: #FDFDFD;
position: relative
}

.lpd .detail-band::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0cc1fc06;
pointer-events: none
}

.lpd .detail-grid {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 48px;
align-items: start;
position: relative;
z-index: 1
}

.lpd .prog-col {
min-width: 0
}

.lpd .prog-lbl {
font-size: 15px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
color: #0CC1FC;
margin-bottom: 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.lpd .prog-lbl .cat-dot {
width: 6px;
height: 6px
}

.lpd .prog-body h2 {
font-size: 31px;
line-height: 1.2;
font-weight: 800;
color: #19192D;
letter-spacing: -.01em;
margin: 24px 0 8px
}

.lpd .prog-body h3 {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D;
margin: 24px 0 8px
}

.lpd .prog-body p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .8;
margin: 0 0 8px
}

.lpd .prog-body mark {
background: linear-gradient(90deg, #0cc1fc38 0%, transparent 100%);
color: #19192D;
padding: 1px 5px;
border-radius: 1px
}

.lpd .prog-body ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px
}

.lpd .prog-body li {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .82
}

.lpd .prog-body li::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #0CC1FC;
flex-shrink: 0;
margin-top: 8px
}

.lpd .prog-body figure {
margin: 24px 0;
border-radius: 11px;
overflow: hidden;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.lpd .prog-body figure img {
width: 100%;
height: auto;
display: block;
object-fit: cover
}

.lpd .prog-body figcaption {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .55;
padding: 8px 0 0;
font-style: italic
}

.lpd .desc-col {
min-width: 0
}

.lpd .desc-body h2 {
font-size: 31px;
line-height: 1.2;
font-weight: 800;
color: #19192D;
letter-spacing: -.01em;
margin: 24px 0 8px
}

.lpd .desc-body h3 {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D;
margin: 24px 0 8px
}

.lpd .desc-body p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .8;
margin: 0 0 8px
}

.lpd .desc-body strong {
font-weight: 700;
color: #19192D
}

.lpd .desc-body ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px
}

.lpd .desc-body li {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .82
}

.lpd .desc-body li::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #0CC1FC;
flex-shrink: 0;
margin-top: 8px
}

.lpd .desc-body dl {
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px
}

.lpd .desc-body dt {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D
}

.lpd .desc-body dd {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .75;
margin: 0 0 8px
}

.lpd .desc-body details {
border: 1px solid #0cc1fc40;
border-radius: 5px;
margin-bottom: 8px;
padding: 8px 24px;
transition: border-color .5s ease-in-out
}

.lpd .desc-body details[open] {
border-color: #0cc1fc8c
}

.lpd .desc-body summary {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D;
cursor: pointer;
user-select: none;
list-style: none;
padding: 4px 0
}

.lpd .desc-body summary::-webkit-details-marker {
display: none
}

.lpd .side-col {
display: flex;
flex-direction: column;
gap: 24px
}

.lpd .price-card {
background-color: #19192D;
border-radius: 20px;
padding: 24px;
box-shadow: 1px 12px 36px -1px #19192d21;
position: sticky;
top: 24px
}

.lpd .price-tag {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #FDFDFD;
letter-spacing: -.02em;
margin-bottom: 8px
}

.lpd .price-note {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
opacity: .55;
margin-bottom: 24px
}

.lpd .enroll-btn {
display: block;
width: 100%;
padding: 24px;
background-color: #0CC1FC;
color: #19192D;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
text-decoration: none;
border-radius: 11px;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.lpd .enroll-btn::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background-color: #FDFDFD;
transition: width .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.lpd .enroll-btn:hover::before {
width: 100%;
left: 0;
right: auto
}

.lpd .enroll-btn:hover {
color: #19192D;
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.lpd .enroll-btn span {
position: relative;
z-index: 1
}

.lpd .enroll-btn:focus-visible {
outline: 2px solid #0CC1FC;
outline-offset: 3px
}

.lpd .card-stats {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 24px
}

.lpd .stat-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #fdfdfd1a
}

.lpd .stat-row:last-child {
border-bottom: none
}

.lpd .stat-k {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
opacity: .55
}

.lpd .stat-v {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
font-weight: 700
}

.lpd .seats-indicator {
margin-top: 24px
}

.lpd .seats-label {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
opacity: .7;
margin-bottom: 8px;
display: flex;
flex-direction: row;
justify-content: space-between
}

.lpd .seats-bar {
height: 4px;
background: #fdfdfd26;
border-radius: 1px;
overflow: hidden
}

.lpd .seats-fill {
height: 100%;
background: linear-gradient(90deg, #0CC1FC 0%, transparent 100%);
border-radius: 1px;
width: 30%;
transition: width .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lpd .readtime-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0cc1fc14;
border: 1px solid #0cc1fc33;
border-radius: 34px;
padding: 8px 24px;
margin-top: 24px
}

.lpd .readtime-badge span {
font-size: 15px;
line-height: 1.2;
color: #19192D;
opacity: .7
}

.lpd .user-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #19192d0d;
border-radius: 5px;
padding: 8px;
margin-top: 8px
}

.lpd .user-badge span {
font-size: 15px;
line-height: 1.2;
color: #19192D;
opacity: .7
}

@media (max-width: 1024px) {
.lpd .title-grid {
grid-template-columns: 1fr 2fr 1fr
}

.lpd .detail-grid {
grid-template-columns: 2fr 1fr
}
}

@media (max-width: 768px) {
.lpd .title-grid {
grid-template-columns: 1fr;
gap: 24px
}

.lpd .t-img-wrap {
display: none
}

.lpd .t-img-wrap:first-child {
display: block;
aspect-ratio: 16/7
}

.lpd .detail-grid {
grid-template-columns: 1fr
}

.lpd .price-card {
position: static
}

.lpd .t-h1 {
font-size: 31px
}
}

@media (max-width: 640px) {
.lpd .title-band {
padding: 48px 0 24px
}

.lpd .t-h1 {
font-size: 31px
}

.lpd .t-meta-row {
gap: 8px
}

.lpd .detail-band {
padding: 24px 0 48px
}
}

.bys {
max-width: 100%;
overflow-x: hidden
}

.bys .pg-wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.bys .load-blur {
animation: clarify .55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

@keyframes clarify {
from {
filter: blur(6px);
opacity: .4
}

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

.bys .top-strip {
background: #FDFDFD;
padding: 48px 0;
position: relative
}

.bys .top-strip::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #0CC1FC, transparent)
}

.bys .top-strip::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #0CC1FC)
}

.bys .strip-inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 48px;
position: relative
}

.bys .strip-frame {
position: absolute;
top: -16px;
left: -16px;
right: -16px;
bottom: -16px;
border: 1px solid #0cc1fc2e;
border-radius: 5px;
pointer-events: none
}

.bys .strip-text {
flex: 1 1 0;
min-width: 0
}

.bys .strip-label {
font-size: 15px;
line-height: 1.6;
letter-spacing: .12em;
color: #0CC1FC;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 700
}

.bys .strip-h1 {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
letter-spacing: -.02em;
margin-bottom: 24px
}

.bys .strip-h1 span {
background: linear-gradient(120deg, #0CC1FC, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.bys .strip-desc {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .78;
max-width: 480px
}

.bys .strip-img-col {
flex: 0 0 320px;
position: relative
}

.bys .img-mask {
width: 320px;
height: 240px;
overflow: hidden;
border-radius: 11px;
clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
position: relative;
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.bys .img-mask img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.7) brightness(0.88);
transition: filter .55s ease-in-out
}

.bys .img-mask:hover img {
filter: saturate(1) brightness(1)
}

.bys .img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #0cc1fc47, transparent 60%);
transition: opacity .5s ease-in-out;
pointer-events: none
}

.bys .img-mask:hover .img-overlay {
opacity: 0
}

.bys .chevron-div {
width: 100%;
height: 36px;
overflow: hidden;
line-height: 0;
background: #FDFDFD
}

.bys .chevron-div svg {
display: block;
width: 100%;
height: 36px
}

.bys .mid-seg {
background: #19192D;
padding: 96px 0 48px;
position: relative
}

.bys .mid-seg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #0cc1fc38
}

.bys .mid-top {
margin-bottom: 48px
}

.bys .mid-eyebrow {
font-size: 15px;
line-height: 1.6;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
font-weight: 700;
margin-bottom: 8px
}

.bys .mid-h2 {
font-size: 31px;
line-height: 1.2;
font-weight: 900;
color: #FDFDFD;
letter-spacing: -.01em
}

.bys .three-col {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 24px;
align-items: start
}

.bys .col-main {
background: #fdfdfd0a;
border: 1px solid #0cc1fc26;
border-radius: 11px;
padding: 24px;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.bys .col-main-head {
font-size: 15px;
line-height: 1.6;
font-weight: 800;
color: #0CC1FC;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 8px
}

.bys .col-main-title {
font-size: 31px;
line-height: 1.2;
font-weight: 900;
color: #FDFDFD;
margin-bottom: 24px
}

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

.bys .step-list li {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px
}

.bys .step-num {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 5px;
background: #0cc1fc26;
border: 1px solid #0cc1fc4d;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #0CC1FC;
line-height: 1.2
}

.bys .step-txt {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdcc
}

.bys .step-txt strong {
color: #FDFDFD;
font-weight: 700
}

.bys .col-narrow {
display: flex;
flex-direction: column;
gap: 24px
}

.bys .narrow-card {
background: #fdfdfd0a;
border: 1px solid #fdfdfd14;
border-radius: 11px;
padding: 24px;
box-shadow: 1px 2px 3px -1px #0cc1fc0f
}

.bys .narrow-card-label {
font-size: 15px;
line-height: 1.2;
font-weight: 800;
color: #0CC1FC;
margin-bottom: 8px;
letter-spacing: .04em
}

.bys .narrow-card-body {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdb8
}

.bys .chevron-div-2 {
width: 100%;
height: 36px;
overflow: hidden;
line-height: 0;
background: #19192D
}

.bys .chevron-div-2 svg {
display: block;
width: 100%;
height: 36px
}

.bys .compare-seg {
background: #FDFDFD;
padding: 48px 0 96px;
position: relative
}

.bys .compare-seg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: #0cc1fc26
}

.bys .compare-top {
margin-bottom: 48px
}

.bys .compare-eyebrow {
font-size: 15px;
line-height: 1.6;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
font-weight: 700;
margin-bottom: 8px
}

.bys .compare-h2 {
font-size: 31px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
letter-spacing: -.01em;
margin-bottom: 8px
}

.bys .compare-sub {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .7;
max-width: 560px
}

.bys .compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start
}

.bys .cmp-card {
border-radius: 11px;
padding: 24px;
border: 1px solid #19192d1f;
background: #FDFDFD;
box-shadow: 1px 2px 3px -1px #19192d0f;
position: relative;
transition: box-shadow .5s ease-in-out, border-color .5s ease-in-out
}

.bys .cmp-card:hover {
box-shadow: 1px 5px 25px -1px #0cc1fc1a;
border-color: #0cc1fc4d
}

.bys .cmp-card.rec {
border-color: #0CC1FC;
background: #19192D;
box-shadow: 1px 12px 36px -1px #0cc1fc21;
transform: translateY(-8px)
}

.bys .rec-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #0CC1FC;
color: #19192D;
font-size: 15px;
font-weight: 800;
letter-spacing: .06em;
padding: 4px 16px;
border-radius: 20px;
white-space: nowrap
}

.bys .cmp-tier {
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 8px
}

.bys .cmp-card:not(.rec) .cmp-tier {
color: #19192D;
opacity: .55
}

.bys .cmp-card.rec .cmp-tier {
color: #0CC1FC
}

.bys .cmp-label {
font-size: 31px;
line-height: 1.2;
font-weight: 900;
margin-bottom: 24px
}

.bys .cmp-card:not(.rec) .cmp-label {
color: #19192D
}

.bys .cmp-card.rec .cmp-label {
color: #FDFDFD
}

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

.bys .cmp-features li {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.6
}

.bys .cmp-card:not(.rec) .cmp-features li {
color: #19192D;
opacity: .75
}

.bys .cmp-card.rec .cmp-features li {
color: #fdfdfdd9
}

.bys .feat-dot {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 1px;
margin-top: 8px
}

.bys .cmp-card:not(.rec) .feat-dot {
background: #19192d4d
}

.bys .cmp-card.rec .feat-dot {
background: #0CC1FC
}

.bys .cmp-card.rec .cmp-features li {
color: #fdfdfdd9
}

.bys .cmp-note {
margin-top: 24px;
font-size: 15px;
line-height: 1.6;
font-style: italic
}

.bys .cmp-card:not(.rec) .cmp-note {
color: #19192d80
}

.bys .cmp-card.rec .cmp-note {
color: #0cc1fccc
}

@media (max-width: 1024px) {
.bys .three-col {
grid-template-columns: 1fr 1fr
}

.bys .col-main {
grid-column: 1 / -1
}
}

@media (max-width: 768px) {
.bys .strip-inner {
flex-direction: column-reverse;
gap: 24px
}

.bys .strip-img-col {
flex: 0 0 auto;
width: 100%
}

.bys .img-mask {
width: 100%;
height: 200px
}

.bys .strip-h1 {
font-size: 31px
}

.bys .three-col {
grid-template-columns: 1fr
}

.bys .compare-grid {
grid-template-columns: 1fr
}

.bys .cmp-card.rec {
transform: none
}

.bys .mid-h2 {
font-size: 31px
}
}

@media (max-width: 640px) {
.bys .strip-h1 {
font-size: 31px
}

.bys .top-strip {
padding: 48px 0
}

.bys .mid-seg {
padding: 48px 0
}

.bys .compare-seg {
padding: 48px 0
}

.bys .strip-frame {
display: none
}
}

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

.frnt {
max-width: 100%;
overflow-x: hidden
}

.frnt .pg-wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.frnt .t-block {
padding: 96px 24px 48px;
max-width: 1024px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end
}

.frnt .t-text {
position: relative;
padding: 48px 0 24px
}

.frnt .t-text::before {
content: '';
position: absolute;
top: 0;
left: -24px;
right: 0;
bottom: 0;
background: linear-gradient(160deg, #0cc1fc14 0%, transparent 70%);
border-radius: 20px;
pointer-events: none;
z-index: 0
}

.frnt .t-text>* {
position: relative;
z-index: 1
}

.frnt .t-label {
font-size: 15px;
line-height: 1.6;
letter-spacing: .12em;
color: #0CC1FC;
text-transform: uppercase;
margin-bottom: 24px;
display: block
}

.frnt .t-h1 {
font-size: 58px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
margin-bottom: 24px;
letter-spacing: -.02em
}

.frnt .t-h1 .grad-w {
background: linear-gradient(125deg, #0CC1FC 0%, transparent 140%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.frnt .t-sub {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .75;
max-width: 420px;
margin-bottom: 24px
}

.frnt .t-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: #19192D;
text-decoration: none;
position: relative;
padding: 8px 0;
overflow: hidden;
transition: color .5s ease-in-out
}

.frnt .t-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #0CC1FC;
transform: scaleX(0);
transform-origin: right;
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.frnt .t-link:hover::after {
transform: scaleX(1);
transform-origin: left
}

.frnt .t-link:hover {
color: #0CC1FC
}

.frnt .t-link .arr {
display: inline-block;
width: 18px;
height: 2px;
background: currentColor;
position: relative;
transition: transform .45s ease-in-out
}

.frnt .t-link .arr::after {
content: '';
position: absolute;
right: 0;
top: -4px;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg)
}

.frnt .t-link:hover .arr {
transform: translateX(4px)
}

.frnt .t-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px
}

.frnt .t-img-wrap {
position: relative;
overflow: hidden;
border-radius: 11px;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.frnt .t-img-wrap.tall {
grid-row: span 2
}

.frnt .t-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: .7;
transition: opacity .55s ease-in-out
}

.frnt .t-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: #0cc1fc2e;
transition: opacity .55s ease-in-out;
pointer-events: none
}

.frnt .t-img-wrap:hover img {
opacity: 1
}

.frnt .t-img-wrap:hover::after {
opacity: 0
}

.frnt .t-img-sm {
height: 160px
}

.frnt .t-img-tall {
height: 328px
}

.frnt .t-img-sq {
height: 160px
}

.frnt .appr-sec {
background: #19192D;
padding: 96px 0 48px;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
margin-bottom: 48px
}

.frnt .appr-sec::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 160px;
background: linear-gradient(180deg, #0cc1fc0f 0%, transparent 100%);
pointer-events: none
}

.frnt .appr-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start
}

.frnt .appr-left {
padding-top: 8px
}

.frnt .appr-tag {
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
display: block;
margin-bottom: 24px
}

.frnt .appr-h {
font-size: 43px;
line-height: 1.2;
color: #FDFDFD;
font-weight: 900;
margin-bottom: 24px;
letter-spacing: -.01em
}

.frnt .appr-h .gw {
background: linear-gradient(110deg, #0CC1FC 0%, transparent 160%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.frnt .appr-desc {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdb3;
margin-bottom: 24px
}

.frnt .appr-right {
display: flex;
flex-direction: column;
gap: 24px
}

.frnt .appr-item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
padding: 24px;
border-radius: 11px;
background: #0cc1fc0d;
border: 1px solid #0cc1fc1f;
transition: background .5s ease-in-out, border-color .5s ease-in-out
}

.frnt .appr-item:hover {
background: #0cc1fc1a;
border-color: #0cc1fc40
}

.frnt .appr-num {
flex-shrink: 0;
width: 40px;
height: 40px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}

.frnt .appr-num svg {
position: absolute;
inset: 0;
width: 40px;
height: 40px
}

.frnt .appr-num span {
font-size: 15px;
font-weight: 900;
color: #0CC1FC;
position: relative;
z-index: 1
}

.frnt .appr-item-text {
flex: 1
}

.frnt .appr-item-h {
font-size: 15px;
font-weight: 700;
color: #FDFDFD;
margin-bottom: 8px;
line-height: 1.2
}

.frnt .appr-item-p {
font-size: 15px;
line-height: 1.6;
color: #fdfdfd99
}

.frnt .curr-sec {
padding: 48px 0 96px;
background: #FDFDFD
}

.frnt .curr-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.frnt .curr-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-bottom: 48px
}

.frnt .curr-img-wrap {
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 1px 12px 36px -1px #19192d21
}

.frnt .curr-img-wrap img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
opacity: .75;
transition: opacity .6s ease-in-out
}

.frnt .curr-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: #0cc1fc26;
transition: opacity .6s ease-in-out;
pointer-events: none
}

.frnt .curr-img-wrap:hover img {
opacity: 1
}

.frnt .curr-img-wrap:hover::after {
opacity: 0
}

.frnt .curr-tag {
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
display: block;
margin-bottom: 24px
}

.frnt .curr-h {
font-size: 43px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
margin-bottom: 24px;
letter-spacing: -.01em
}

.frnt .curr-h .gw {
background: linear-gradient(115deg, #0CC1FC 0%, transparent 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.frnt .curr-p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .72;
margin-bottom: 8px
}

.frnt .curr-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.frnt .stat-box {
padding: 24px;
border-radius: 11px;
border: 1px solid #0cc1fc33;
background: #0cc1fc08;
text-align: center;
transition: box-shadow .5s ease-in-out, border-color .5s ease-in-out
}

.frnt .stat-box:hover {
box-shadow: 1px 5px 25px -1px #0cc1fc1a;
border-color: #0cc1fc66
}

.frnt .stat-num {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
display: block;
letter-spacing: -.02em
}

.frnt .stat-lbl {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .65;
display: block;
margin-top: 8px
}

.frnt .long-sec {
padding: 96px 0;
background: linear-gradient(180deg, #0cc1fc0f 0%, #FDFDFD 60%)
}

.frnt .long-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.frnt .long-tag {
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
display: block;
margin-bottom: 24px;
text-align: center
}

.frnt .long-h {
font-size: 43px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
text-align: center;
margin-bottom: 8px;
letter-spacing: -.01em
}

.frnt .long-h .gw {
background: linear-gradient(120deg, #0CC1FC 0%, transparent 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.frnt .long-sub {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .7;
text-align: center;
max-width: 560px;
margin: 0 auto 48px
}

.frnt .long-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 24px
}

.frnt .long-feat {
grid-column: 1;
grid-row: span 2;
background: #19192D;
border-radius: 20px;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 360px;
position: relative;
overflow: hidden;
box-shadow: 1px 12px 36px -1px #19192d21;
transition: box-shadow .55s ease-in-out
}

.frnt .long-feat:hover {
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.frnt .long-feat::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at center, #0cc1fc1f 0%, transparent 70%);
animation: ring-expand 4s ease-in-out infinite;
pointer-events: none
}

.frnt .long-feat::after {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at center, #0cc1fc0f 0%, transparent 70%);
animation: ring-expand 4s ease-in-out 2s infinite;
pointer-events: none
}

@keyframes ring-expand {
0% {
transform: scale(1);
opacity: .8
}

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

.frnt .long-feat-h {
font-size: 31px;
line-height: 1.2;
color: #FDFDFD;
font-weight: 900;
margin-bottom: 24px;
position: relative;
z-index: 1
}

.frnt .long-feat-p {
font-size: 15px;
line-height: 1.6;
color: #fdfdfda6;
position: relative;
z-index: 1
}

.frnt .long-card {
border-radius: 11px;
padding: 24px;
border: 1px solid #0cc1fc26;
background: #0cc1fc08;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .5s ease-in-out, background .5s ease-in-out
}

.frnt .long-card:hover {
border-color: #0cc1fc59;
background: #0cc1fc12
}

.frnt .long-card-h {
font-size: 15px;
font-weight: 700;
color: #19192D;
line-height: 1.2
}

.frnt .long-card-p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .65
}

.frnt .rev-sec {
padding: 96px 0;
background: #FDFDFD
}

.frnt .rev-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.frnt .rev-tag {
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
display: block;
margin-bottom: 24px
}

.frnt .rev-h {
font-size: 43px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
margin-bottom: 48px;
letter-spacing: -.01em;
max-width: 600px
}

.frnt .rev-h .gw {
background: linear-gradient(115deg, #0CC1FC 0%, transparent 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.frnt .rev-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px
}

.frnt .rev-main {
background: #19192D;
border-radius: 20px;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 1px 12px 36px -1px #19192d21;
position: relative;
overflow: hidden
}

.frnt .rev-main::before {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 160px;
height: 160px;
border-radius: 50%;
border: 1px solid #0cc1fc26;
pointer-events: none
}

.frnt .rev-main::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 240px;
height: 240px;
border-radius: 50%;
border: 1px solid #0cc1fc14;
pointer-events: none
}

.frnt .rev-quote {
font-size: 31px;
line-height: 1.6;
color: #FDFDFD;
font-weight: 400;
margin-bottom: 24px;
position: relative;
z-index: 1
}

.frnt .rev-author {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1
}

.frnt .rev-name {
font-size: 15px;
font-weight: 700;
color: #0CC1FC
}

.frnt .rev-role {
font-size: 15px;
line-height: 1.6;
color: #fdfdfd8c
}

.frnt .rev-side {
display: flex;
flex-direction: column;
gap: 24px
}

.frnt .rev-stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px
}

.frnt .rev-metric {
background: #0cc1fc0d;
border: 1px solid #0cc1fc26;
border-radius: 11px;
padding: 24px;
text-align: center;
transition: border-color .5s ease-in-out
}

.frnt .rev-metric:hover {
border-color: #0cc1fc66
}

.frnt .rev-metric-n {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
letter-spacing: -.02em;
display: block
}

.frnt .rev-metric-l {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .6;
display: block;
margin-top: 8px
}

.frnt .rev-card {
background: #0cc1fc0a;
border: 1px solid #0cc1fc1f;
border-radius: 11px;
padding: 24px;
transition: background .5s ease-in-out, border-color .5s ease-in-out
}

.frnt .rev-card:hover {
background: #0cc1fc17;
border-color: #0cc1fc4d
}

.frnt .rev-card-q {
font-size: 15px;
line-height: 1.6;
color: #19192D;
margin-bottom: 24px;
opacity: .85
}

.frnt .rev-card-name {
font-size: 15px;
font-weight: 700;
color: #19192D;
display: block
}

.frnt .rev-card-role {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .55;
display: block
}

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

.frnt .t-h1 {
font-size: 43px
}

.frnt .long-grid {
grid-template-columns: 1fr 1fr
}

.frnt .long-feat {
grid-column: span 2;
grid-row: auto;
min-height: 240px
}
}

@media (max-width: 768px) {
.frnt .appr-inner {
grid-template-columns: 1fr;
gap: 48px
}

.frnt .curr-top {
grid-template-columns: 1fr;
gap: 24px
}

.frnt .curr-stats {
grid-template-columns: 1fr 1fr
}

.frnt .rev-layout {
grid-template-columns: 1fr
}

.frnt .long-grid {
grid-template-columns: 1fr
}

.frnt .long-feat {
grid-column: auto
}

.frnt .t-mosaic {
grid-template-columns: 1fr
}

.frnt .t-img-wrap.tall {
grid-row: auto
}

.frnt .t-img-tall {
height: 200px
}
}

@media (max-width: 640px) {
.frnt .t-h1 {
font-size: 31px
}

.frnt .appr-h {
font-size: 31px
}

.frnt .curr-h {
font-size: 31px
}

.frnt .long-h {
font-size: 31px
}

.frnt .rev-h {
font-size: 31px
}

.frnt .rev-quote {
font-size: 15px
}

.frnt .rev-stat-row {
grid-template-columns: 1fr
}

.frnt .curr-stats {
grid-template-columns: 1fr
}

.frnt .appr-sec {
clip-path: none
}

.frnt .long-feat {
padding: 24px
}

.frnt .rev-main {
padding: 24px
}
}

.abt {
background: #FDFDFD;
overflow-x: clip
}

.abt .pg-band {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.abt .title-strip {
padding: 48px 24px;
background: #19192D;
position: relative
}

.abt .title-strip::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: radial-gradient(ellipse at 100% 0%, #0cc1fc2e 0%, transparent 70%);
pointer-events: none
}

.abt .title-inner {
max-width: 1024px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 48px
}

.abt .title-text {
flex: 1;
min-width: 0
}

.abt .t-label {
font-size: 15px;
line-height: 1.6;
color: #0cc1fcd9;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 8px;
display: block
}

.abt .t-h1 {
font-size: 58px;
line-height: 1.2;
font-weight: 900;
color: #FDFDFD;
margin: 0 0 24px;
letter-spacing: -.02em
}

.abt .t-h1 span {
background: linear-gradient(112deg, #0CC1FC, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.abt .t-sub {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdb8;
max-width: 420px
}

.abt .t-deco-line {
width: 48px;
height: 2px;
border-top: 2px dashed #0CC1FC;
margin: 24px 0
}

.abt .img-frame {
width: 340px;
flex-shrink: 0;
position: relative;
border-radius: 11px;
overflow: hidden;
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.abt .img-frame img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
filter: brightness(0.82);
transition: filter .55s ease-in-out
}

.abt .img-frame:hover img {
filter: brightness(1)
}

.abt .img-frame::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 60%, transparent 40%, #19192d73 100%);
pointer-events: none;
border-radius: 11px
}

.abt .dir-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #0CC1FC;
text-decoration: none;
font-weight: 700;
letter-spacing: .04em;
position: relative;
overflow: hidden;
padding: 8px 0
}

.abt .dir-arrow::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #0CC1FC;
transition: width .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt .dir-arrow:hover::before {
width: 100%
}

.abt .dir-arrow svg {
transition: transform .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt .dir-arrow:hover svg {
transform: translateX(5px)
}

.abt .about-body {
padding: 96px 24px;
background: #FDFDFD
}

.abt .about-body-inner {
max-width: 1024px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start
}

.abt .ab-left {
display: flex;
flex-direction: column;
gap: 24px
}

.abt .ab-tag {
font-size: 15px;
line-height: 1.6;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
font-weight: 700
}

.abt .ab-h2 {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
margin: 0;
letter-spacing: -.01em
}

.abt .ab-h2 em {
font-style: normal;
background: linear-gradient(127deg, #0CC1FC, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.abt .ab-para {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .82
}

.abt .ab-img2 {
width: 100%;
border-radius: 11px;
overflow: hidden;
box-shadow: 1px 5px 25px -1px #19192d1a;
margin-top: 8px
}

.abt .ab-img2 img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
filter: brightness(0.84);
transition: filter .52s ease-in-out
}

.abt .ab-img2:hover img {
filter: brightness(1)
}

.abt .ab-right {
display: flex;
flex-direction: column;
gap: 24px
}

.abt .stat-row {
display: flex;
flex-direction: row;
gap: 24px
}

.abt .stat-item {
flex: 1;
background: #19192D;
border-radius: 11px;
padding: 24px;
box-shadow: 1px 2px 3px -1px #19192d0f;
animation: warmcool 9s ease-in-out infinite alternate
}

.abt .stat-item.alt {
background: #0cc1fc17;
border: 1px solid #0cc1fc38;
animation-delay: 4.5s
}

@keyframes warmcool {
0% {
background: #19192D
}

50% {
background: #1e1e30
}

100% {
background: #19192D
}
}

.abt .stat-item.alt {
animation: warmcool-alt 9s ease-in-out infinite alternate
}

@keyframes warmcool-alt {
0% {
background: #0cc1fc17
}

50% {
background: #0cc1fc21
}

100% {
background: #0cc1fc17
}
}

.abt .stat-num {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #0CC1FC;
display: block;
letter-spacing: -.02em
}

.abt .stat-item.alt .stat-num {
color: #19192D
}

.abt .stat-desc {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdb8;
display: block
}

.abt .stat-item.alt .stat-desc {
color: #19192dbf
}

.abt .team-list {
display: flex;
flex-direction: column;
gap: 8px
}

.abt .team-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
padding: 24px;
border-radius: 11px;
background: #0cc1fc0d;
border: 1px solid #0cc1fc24;
transition: box-shadow .5s ease-in-out, border-color .5s ease-in-out
}

.abt .team-item:hover {
box-shadow: 1px 5px 25px -1px #0cc1fc1a;
border-color: #0cc1fc52
}

.abt .team-dot {
width: 8px;
height: 8px;
border-radius: 5px;
background: #0CC1FC;
flex-shrink: 0
}

.abt .team-name {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D
}

.abt .team-role {
font-size: 15px;
line-height: 1.6;
color: #19192d99;
margin-left: auto
}

.abt .dashed-div {
border: none;
border-top: 2px dashed #0cc1fc66;
margin: 0
}

.abt .contact-belt {
padding: 96px 24px;
position: relative;
background: #19192d08;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px)
}

.abt .contact-belt::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, #0cc1fc0a 0%, transparent 100%);
pointer-events: none
}

.abt .contact-inner {
max-width: 1024px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start
}

.abt .cf-left {
display: flex;
flex-direction: column;
gap: 24px
}

.abt .cf-h3 {
font-size: 31px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
margin: 0;
letter-spacing: -.01em
}

.abt .cf-h3 span {
background: linear-gradient(112deg, #0CC1FC, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.abt .cf-desc {
font-size: 15px;
line-height: 1.6;
color: #19192dc7
}

.abt .cf-img3 {
width: 100%;
border-radius: 11px;
overflow: hidden;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.abt .cf-img3 img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
filter: brightness(0.82);
transition: filter .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt .cf-img3:hover img {
filter: brightness(1)
}

.abt .contact-form {
display: flex;
flex-direction: column;
gap: 24px;
background: #FDFDFD;
border-radius: 11px;
padding: 48px;
box-shadow: 1px 12px 36px -1px #19192d21
}

.abt .form-row {
display: flex;
flex-direction: column;
gap: 8px
}

.abt .form-label {
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #19192D;
letter-spacing: .03em
}

.abt .form-input {
width: 100%;
padding: 8px 24px;
border: 1px solid #19192d33;
border-radius: 5px;
font-size: 15px;
line-height: 2;
color: #19192D;
background: #FDFDFD;
outline: none;
transition: border-color .48s ease-in-out, box-shadow .48s ease-in-out;
box-sizing: border-box
}

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

.abt .form-input:focus {
border-color: #0CC1FC;
box-shadow: inset 0 1px 2px #0cc1fc14 1px 2px 3px -1px #0cc1fc0f
}

.abt .method-opts {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap
}

.abt .method-opt {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 15px;
line-height: 1.6;
color: #19192D
}

.abt .method-opt input[type="radio"] {
accent-color: #0CC1FC;
width: 16px;
height: 16px;
cursor: pointer
}

.abt .cond-field {
display: none;
flex-direction: column;
gap: 8px
}

.abt #meth-phone:checked~.cond-wrap .cond-phone {
display: flex
}

.abt #meth-email:checked~.cond-wrap .cond-email-note {
display: flex
}

.abt #meth-video:checked~.cond-wrap .cond-video {
display: flex
}

.abt .method-block {
display: flex;
flex-direction: column;
gap: 8px
}

.abt .privacy-row {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px
}

.abt .privacy-row input[type="checkbox"] {
accent-color: #0CC1FC;
width: 16px;
height: 16px;
margin-top: 4px;
flex-shrink: 0;
cursor: pointer
}

.abt .privacy-text {
font-size: 15px;
line-height: 1.6;
color: #19192db8
}

.abt .privacy-text a {
color: #0CC1FC;
text-decoration: underline
}

.abt .submit-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: #19192D;
color: #FDFDFD;
border: none;
border-radius: 5px;
padding: 8px 48px;
font-size: 15px;
line-height: 2;
font-weight: 700;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color .52s ease-in-out;
letter-spacing: .04em;
align-self: flex-start
}

.abt .submit-btn::before {
content: '';
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: #0CC1FC;
transition: right .52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.abt .submit-btn:hover::before {
right: 0
}

.abt .submit-btn:hover {
color: #19192D
}

.abt .submit-btn span {
position: relative;
z-index: 1
}

.abt .submit-btn svg {
position: relative;
z-index: 1;
transition: transform .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt .submit-btn:hover svg {
transform: translateX(4px)
}

.abt .submit-btn:focus {
outline: 2px solid #0CC1FC;
outline-offset: 3px
}

.abt .anim-in {
opacity: 0;
transform: translateY(18px);
animation: fadein .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.abt .anim-in.d1 {
animation-delay: .08s
}

.abt .anim-in.d2 {
animation-delay: .2s
}

.abt .anim-in.d3 {
animation-delay: .34s
}

.abt .anim-in.d4 {
animation-delay: .48s
}

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

@media (max-width: 1024px) {
.abt .t-h1 {
font-size: 43px
}

.abt .img-frame {
width: 280px
}
}

@media (max-width: 768px) {
.abt .title-inner {
flex-direction: column;
gap: 24px
}

.abt .img-frame {
width: 100%
}

.abt .about-body-inner {
grid-template-columns: 1fr;
gap: 48px
}

.abt .contact-inner {
grid-template-columns: 1fr;
gap: 48px
}

.abt .t-h1 {
font-size: 43px
}

.abt .ab-h2 {
font-size: 31px
}

.abt .stat-num {
font-size: 31px
}
}

@media (max-width: 640px) {
.abt .title-strip {
padding: 48px 24px
}

.abt .t-h1 {
font-size: 31px
}

.abt .about-body {
padding: 48px 24px
}

.abt .contact-belt {
padding: 48px 24px
}

.abt .contact-form {
padding: 24px
}

.abt .stat-row {
flex-direction: column
}

.abt .team-role {
display: none
}
}

.cont-us {
max-width: 100%;
overflow-x: hidden
}

.cont-us .reach {
max-width: 1024px;
margin: 0 auto;
padding: 96px 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start
}

.cont-us .reach_img_frame {
position: relative;
overflow: hidden;
border-radius: 20px;
height: 520px
}

.cont-us .reach_img_frame::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, #0cc1fc61 0%, transparent 60%);
z-index: 1;
transition: opacity .55s ease-in-out
}

.cont-us .reach_img_frame:hover::before {
opacity: 0
}

.cont-us .reach_img_frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.cont-us .reach_img_frame:hover img {
transform: scale(1.03)
}

.cont-us .reach_corner_tl {
position: absolute;
top: 24px;
left: 24px;
width: 48px;
height: 48px;
border-top: 1px solid #0cc1fcb3;
border-left: 1px solid #0cc1fcb3;
border-radius: 5px 0 0 0;
z-index: 2;
pointer-events: none
}

.cont-us .reach_corner_br {
position: absolute;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-bottom: 1px solid #0cc1fcb3;
border-right: 1px solid #0cc1fcb3;
border-radius: 0 0 5px 0;
z-index: 2;
pointer-events: none
}

.cont-us .reach_diag {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
border-radius: 20px
}

.cont-us .reach_diag svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}

.cont-us .reach_text {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 8px
}

.cont-us .reach_label {
font-size: 15px;
letter-spacing: .14em;
color: #0CC1FC;
font-weight: 700;
text-transform: uppercase
}

.cont-us .reach_h1 {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #19192D;
margin: 0;
letter-spacing: -.02em
}

.cont-us .reach_h1 .grad_word {
background: linear-gradient(120deg, #0CC1FC 0%, transparent 160%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.cont-us .reach_desc {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .78;
margin: 0
}

.cont-us .reach_steps {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px
}

.cont-us .reach_step {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 24px;
padding: 24px;
background: #FDFDFD;
border-radius: 11px;
box-shadow: 1px 2px 3px -1px #0cc1fc0f;
transition: box-shadow .5s ease-in-out, transform .5s ease-in-out
}

.cont-us .reach_step:hover {
box-shadow: 1px 5px 25px -1px #0cc1fc1a;
transform: translateX(4px)
}

.cont-us .reach_step_num {
font-size: 31px;
font-weight: 900;
line-height: 1.2;
color: #0CC1FC;
min-width: 48px;
letter-spacing: -.03em
}

.cont-us .reach_step_num .frac {
color: #19192D;
opacity: .28;
font-size: 15px;
font-weight: 400
}

.cont-us .reach_step_body {
display: flex;
flex-direction: column;
gap: 8px
}

.cont-us .reach_step_title {
font-size: 15px;
font-weight: 700;
color: #19192D;
margin: 0;
letter-spacing: .01em
}

.cont-us .reach_step_txt {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .72;
margin: 0
}

.cont-us .reach_contacts {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px
}

.cont-us .reach_contact_item {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px
}

.cont-us .reach_contact_ico {
width: 34px;
height: 34px;
border-radius: 11px;
background: #0cc1fc1a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.cont-us .reach_contact_ico svg {
width: 16px;
height: 16px;
stroke: #0CC1FC;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}

.cont-us .reach_contact_val {
font-size: 15px;
line-height: 1.6;
color: #19192D;
text-decoration: none;
transition: color .48s ease-in-out
}

.cont-us .reach_contact_val:hover {
color: #0CC1FC
}

.cont-us .form_wrap {
background: #19192D;
position: relative;
overflow: hidden
}

.cont-us .form_wrap::before {
content: "";
position: absolute;
top: -96px;
right: -96px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, #0cc1fc17 0%, transparent 70%);
pointer-events: none
}

.cont-us .form_curve_top {
width: 100%;
line-height: 0;
display: block
}

.cont-us .form_curve_top svg {
display: block;
width: 100%
}

.cont-us .form_inner {
max-width: 1024px;
margin: 0 auto;
padding: 48px 48px 96px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 48px;
align-items: start
}

.cont-us .form_meta {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 48px
}

.cont-us .form_label_top {
font-size: 15px;
letter-spacing: .14em;
color: #0CC1FC;
font-weight: 700;
text-transform: uppercase
}

.cont-us .form_heading {
font-size: 43px;
line-height: 1.2;
font-weight: 900;
color: #FDFDFD;
margin: 0;
letter-spacing: -.02em
}

.cont-us .form_heading .grad_word {
background: linear-gradient(120deg, #0CC1FC 0%, transparent 200%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.cont-us .form_sub {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
opacity: .65;
margin: 0
}

.cont-us .form_pulse_badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0cc1fc1f;
border: 1px solid #0cc1fc40;
border-radius: 34px;
padding: 8px 24px;
width: fit-content
}

.cont-us .form_pulse_dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #0CC1FC;
animation: soft_pulse 2.4s ease-in-out infinite
}

@keyframes soft_pulse {

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

50% {
transform: scale(1.02);
opacity: .8
}
}

.cont-us .form_pulse_txt {
font-size: 15px;
color: #0CC1FC;
font-weight: 600
}

.cont-us .form_ed_form {
display: flex;
flex-direction: column;
gap: 24px
}

.cont-us .f_row {
display: flex;
flex-direction: column;
gap: 8px
}

.cont-us .f_lbl {
font-size: 15px;
font-weight: 600;
color: #FDFDFD;
opacity: .85;
letter-spacing: .04em
}

.cont-us .f_input {
background: #fdfdfd0f;
border: 1px solid #fdfdfd24;
border-radius: 11px;
padding: 24px;
font-size: 15px;
color: #FDFDFD;
outline: none;
width: 100%;
box-sizing: border-box;
transition: border-color .5s ease-in-out, box-shadow .5s ease-in-out
}

.cont-us .f_input::placeholder {
font-style: italic;
opacity: .5;
color: #FDFDFD
}

.cont-us .f_input:focus {
border-color: #0CC1FC;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.cont-us .f_select {
background: #fdfdfd0f;
border: 1px solid #fdfdfd24;
border-radius: 11px;
padding: 24px;
font-size: 15px;
color: #FDFDFD;
outline: none;
width: 100%;
box-sizing: border-box;
appearance: none;
cursor: pointer;
transition: border-color .5s ease-in-out, box-shadow .5s ease-in-out
}

.cont-us .f_select option {
background: #19192D;
color: #FDFDFD
}

.cont-us .f_select:focus {
border-color: #0CC1FC;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.cont-us .f_select_wrap {
position: relative
}

.cont-us .f_select_wrap::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: #fdfdfd80;
clip-path: polygon(0 0, 100% 0, 50% 100%);
pointer-events: none
}

.cont-us .f_cond_phone {
display: none
}

.cont-us .f_select[name="contact_method"] option[value="phone"]:checked~.f_cond_phone {
display: flex
}

.cont-us .f_phone_trigger {
display: none
}

.cont-us .f_phone_trigger:checked~.f_cond_phone_field {
display: flex
}

.cont-us .f_cond_phone_field {
display: none;
flex-direction: column;
gap: 8px
}

.cont-us .f_method_group {
display: flex;
flex-direction: column;
gap: 8px
}

.cont-us .f_radio_row {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap
}

.cont-us .f_radio_opt {
position: relative
}

.cont-us .f_radio_opt input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0
}

.cont-us .f_radio_opt label {
display: inline-block;
padding: 8px 24px;
border-radius: 34px;
border: 1px solid #fdfdfd2e;
font-size: 15px;
color: #FDFDFD;
opacity: .7;
cursor: pointer;
transition: background .48s ease-in-out, border-color .48s ease-in-out, opacity .48s ease-in-out
}

.cont-us .f_radio_opt input[type="radio"]:checked+label {
background: #0cc1fc2e;
border-color: #0CC1FC;
color: #0CC1FC;
opacity: 1
}

.cont-us .f_radio_opt input[type="radio"]:focus+label {
outline: 2px solid #0CC1FC;
outline-offset: 2px
}

.cont-us .f_phone_reveal {
display: none;
flex-direction: column;
gap: 8px
}

.cont-us .f_radio_opt input[value="phone"]:checked~.f_phone_reveal {
display: flex
}

.cont-us .f_phone_group {
display: flex;
flex-direction: column;
gap: 8px
}

.cont-us .f_phone_input_wrap {
display: none
}

.cont-us #method_phone:checked~.f_phone_input_wrap {
display: flex;
flex-direction: column;
gap: 8px
}

.cont-us .f_privacy {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px
}

.cont-us .f_privacy input[type="checkbox"] {
margin-top: 4px;
accent-color: #0CC1FC;
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer
}

.cont-us .f_privacy_txt {
font-size: 15px;
line-height: 1.6;
color: #FDFDFD;
opacity: .6;
margin: 0
}

.cont-us .f_privacy_txt a {
color: #0CC1FC;
text-decoration: underline;
text-underline-offset: 3px
}

.cont-us .f_submit {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 24px 48px;
border-radius: 11px;
border: none;
background: #0CC1FC;
color: #19192D;
font-size: 15px;
font-weight: 700;
cursor: pointer;
overflow: hidden;
transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
letter-spacing: .04em;
align-self: flex-start
}

.cont-us .f_submit::before {
content: "";
position: absolute;
inset: 0;
background: #19192D;
transform: translateX(100%);
transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.cont-us .f_submit:hover::before {
transform: translateX(0)
}

.cont-us .f_submit:hover {
color: #0CC1FC;
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.cont-us .f_submit span {
position: relative;
z-index: 1
}

.cont-us .f_submit:focus {
outline: 2px solid #0CC1FC;
outline-offset: 3px
}

.cont-us .f_submit_arrow {
position: relative;
z-index: 1;
transition: transform .48s ease-in-out
}

.cont-us .f_submit:hover .f_submit_arrow {
transform: translateX(4px)
}

@media (max-width: 1024px) {
.cont-us .reach {
grid-template-columns: 1fr;
padding: 96px 24px
}

.cont-us .reach_img_frame {
height: 360px
}

.cont-us .form_inner {
grid-template-columns: 1fr;
padding: 48px 24px 96px
}

.cont-us .form_meta {
position: static
}
}

@media (max-width: 768px) {
.cont-us .reach {
padding: 48px 24px;
gap: 24px
}

.cont-us .reach_h1 {
font-size: 31px
}

.cont-us .form_heading {
font-size: 31px
}

.cont-us .form_inner {
padding: 24px 24px 48px;
gap: 24px
}

.cont-us .reach_img_frame {
height: 280px
}
}

@media (max-width: 640px) {
.cont-us .reach {
padding: 48px 24px
}

.cont-us .f_radio_row {
flex-direction: column
}

.cont-us .f_submit {
width: 100%;
justify-content: center
}
}

.cont-us #method_phone:checked~.f_phone_input_wrap,
.cont-us .f_phone_input_wrap {
display: none
}

.lp {
background: #FDFDFD;
overflow-x: hidden
}

.lp .pg_wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.lp .title_blk {
padding: 96px 24px;
position: relative
}

.lp .title_blk::before {
content: "";
position: absolute;
top: 24px;
left: 48px;
right: 48px;
bottom: 24px;
border-top: 1px solid #0cc1fc4d;
border-bottom: 1px solid #0cc1fc4d;
pointer-events: none
}

.lp .title_blk::after {
content: "";
position: absolute;
top: 48px;
left: 24px;
right: 24px;
bottom: 48px;
border-left: 1px solid #0cc1fc33;
border-right: 1px solid #0cc1fc33;
pointer-events: none
}

.lp .title_inner {
max-width: 1024px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 48px
}

.lp .title_img_wrap {
flex: 0 0 420px;
position: relative;
border-radius: 11px;
overflow: hidden
}

.lp .title_img_wrap::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #0cc1fc73 0%, transparent 60%);
pointer-events: none;
transition: opacity .55s ease-in-out
}

.lp .title_img_wrap:hover::after {
opacity: 0
}

.lp .title_img_wrap img {
width: 100%;
height: 340px;
object-fit: cover;
display: block;
border-radius: 11px
}

.lp .title_text {
flex: 1
}

.lp .title_label {
font-size: 15px;
letter-spacing: .12em;
color: #0CC1FC;
text-transform: uppercase;
line-height: 1.6;
margin-bottom: 24px
}

.lp .title_h1 {
font-size: 58px;
line-height: 1.2;
color: #19192D;
font-weight: 900;
margin-bottom: 0
}

.lp .title_h1 span {
-webkit-text-stroke: 1.5px #19192D;
color: transparent
}

.lp .divider_a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
max-width: 1024px;
margin: 0 auto;
padding: 0 24px
}

.lp .divider_a .d_short {
width: 80px;
height: 1px;
background: #0CC1FC
}

.lp .divider_a .d_gem {
width: 8px;
height: 8px;
background: #0CC1FC;
transform: rotate(45deg);
margin: 0 8px;
flex-shrink: 0
}

.lp .divider_a .d_long {
flex: 1;
height: 1px;
background: linear-gradient(to right, #0CC1FC, transparent)
}

.lp .cards_grid_sec {
padding: 96px 24px;
max-width: 1024px;
margin: 0 auto
}

.lp .cards_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}

.lp .prog_card {
background: #FDFDFD;
border-radius: 11px;
box-shadow: 1px 5px 25px -1px #0cc1fc1a;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lp .prog_card:hover {
box-shadow: 1px 12px 36px -1px #0cc1fc21;
transform: translateY(-3px)
}

.lp .card_img_wrap {
position: relative;
overflow: hidden
}

.lp .card_img_wrap img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lp .prog_card:hover .card_img_wrap img {
transform: scale(1.04)
}

.lp .card_img_overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #19192d59;
transition: opacity .55s ease-in-out;
pointer-events: none
}

.lp .prog_card:hover .card_img_overlay {
opacity: 0
}

.lp .card_tag {
position: absolute;
top: 8px;
left: 8px;
background: #0CC1FC;
color: #19192D;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 5px;
line-height: 1.2;
letter-spacing: .04em
}

.lp .card_body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px
}

.lp .card_meta_row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap
}

.lp .card_badge {
font-size: 15px;
color: #19192D;
background: #0cc1fc1f;
border-radius: 5px;
padding: 2px 8px;
line-height: 1.6;
letter-spacing: .03em
}

.lp .card_readtime {
font-size: 15px;
color: #19192D;
opacity: .6;
line-height: 1.6
}

.lp .card_title {
font-size: 31px;
font-weight: 900;
line-height: 1.2;
color: #19192D;
margin: 8px 0 0
}

.lp .card_desc {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .8;
margin: 0
}

.lp .card_details_row {
display: flex;
flex-direction: row;
gap: 24px;
margin-top: 8px
}

.lp .card_detail {
display: flex;
flex-direction: column;
gap: 0
}

.lp .card_detail_lbl {
font-size: 15px;
color: #19192D;
opacity: .5;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.2
}

.lp .card_detail_val {
font-size: 15px;
color: #19192D;
font-weight: 700;
line-height: 1.6
}

.lp .card_seats {
font-size: 15px;
color: #19192D;
line-height: 1.6
}

.lp .card_seats span {
color: #0CC1FC;
font-weight: 700
}

.lp .card_footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #0cc1fc26
}

.lp .card_price_block {
display: flex;
flex-direction: column
}

.lp .card_price {
font-size: 31px;
font-weight: 900;
color: #19192D;
line-height: 1.2
}

.lp .card_price_note {
font-size: 15px;
color: #19192D;
opacity: .55;
line-height: 1.6
}

.lp .card_link {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: #19192D;
text-decoration: none;
position: relative;
padding: 8px 24px;
border-radius: 5px;
overflow: hidden;
transition: color .5s ease-in-out
}

.lp .card_link::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 100%;
background: #0CC1FC;
border-radius: 5px;
transition: left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.lp .card_link:hover::before {
left: 0
}

.lp .card_link:hover {
color: #19192D
}

.lp .card_link_txt {
position: relative;
z-index: 1
}

.lp .card_link_arr {
position: relative;
z-index: 1;
display: inline-block;
width: 14px;
height: 10px;
flex-shrink: 0
}

.lp .card_link_arr::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 4px;
height: 1.5px;
background: currentColor;
transform: translateY(-50%)
}

.lp .card_link_arr::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translateY(-50%) rotate(45deg)
}

.lp .divider_b {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.lp .divider_b .db_line {
flex: 1;
height: 1px;
background: linear-gradient(to left, #19192D, transparent)
}

.lp .divider_b .db_dot {
width: 5px;
height: 5px;
border-radius: 1px;
background: #19192D;
transform: rotate(45deg)
}

.lp .why_sec {
background: #19192D;
padding: 96px 24px;
position: relative
}

.lp .why_sec::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, #0cc1fc14 0%, transparent 70%);
pointer-events: none;
animation: glowpulse 4s ease-in-out infinite
}

@keyframes glowpulse {

0%,
100% {
opacity: .6
}

50% {
opacity: 1
}
}

.lp .why_inner {
max-width: 1024px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
position: relative
}

.lp .why_left {
flex: 0 0 320px
}

.lp .why_h2 {
font-size: 43px;
font-weight: 900;
line-height: 1.2;
color: #FDFDFD;
margin-bottom: 24px
}

.lp .why_h2 em {
font-style: normal;
-webkit-text-stroke: 1px #0CC1FC;
color: transparent
}

.lp .why_sub {
font-size: 15px;
line-height: 1.6;
color: #fdfdfdb3;
margin: 0
}

.lp .why_right {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px
}

.lp .why_item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start
}

.lp .why_icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 11px;
background: #0cc1fc26;
border: 1px solid #0cc1fc4d;
display: flex;
align-items: center;
justify-content: center
}

.lp .why_icon svg {
width: 18px;
height: 18px;
stroke: #0CC1FC;
fill: none;
stroke-width: 1.8
}

.lp .why_item_body {
flex: 1
}

.lp .why_item_h {
font-size: 15px;
font-weight: 700;
color: #FDFDFD;
line-height: 1.6;
margin-bottom: 4px
}

.lp .why_item_p {
font-size: 15px;
line-height: 1.6;
color: #fdfdfda6;
margin: 0
}

.lp .divider_c {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.lp .divider_c .dc_long {
flex: 1;
height: 1px;
background: linear-gradient(to right, #0CC1FC, transparent)
}

.lp .divider_c .dc_sq {
width: 6px;
height: 6px;
border: 1px solid #0CC1FC;
border-radius: 1px;
transform: rotate(45deg)
}

.lp .divider_c .dc_short {
width: 60px;
height: 1px;
background: #0CC1FC
}

.lp .formats_sec {
padding: 96px 24px;
background: #FDFDFD
}

.lp .formats_inner {
max-width: 1024px;
margin: 0 auto
}

.lp .formats_head {
margin-bottom: 48px
}

.lp .formats_h2 {
font-size: 43px;
font-weight: 900;
line-height: 1.2;
color: #19192D;
margin-bottom: 8px
}

.lp .formats_h2 span {
background: linear-gradient(120deg, #0CC1FC, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.lp .formats_sub {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .7;
max-width: 480px;
margin: 0
}

.lp .formats_table_wrap {
overflow: hidden;
border-radius: 11px;
box-shadow: 1px 5px 25px -1px #19192d1a
}

.lp .formats_table {
width: 100%;
border-collapse: collapse
}

.lp .formats_table th {
background: #19192D;
color: #FDFDFD;
font-size: 15px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
padding: 24px;
text-align: left;
line-height: 1.2
}

.lp .formats_table td {
font-size: 15px;
line-height: 1.6;
padding: 24px;
border-bottom: 1px solid #0cc1fc1a;
color: #19192D
}

.lp .formats_table tr:last-child td {
border-bottom: none
}

.lp .formats_table tr:nth-child(odd) td {
background: #0cc1fc0a
}

.lp .formats_table tr:nth-child(even) td {
background: #FDFDFD
}

.lp .cell_hi {
background: #0cc1fc2e !important;
font-weight: 700;
color: #19192D
}

.lp .cell_mid {
background: #0cc1fc14 !important
}

.lp .cell_lo {
background: #19192d0a !important;
color: #19192D;
opacity: .75
}

.lp .divider_d {
max-width: 1024px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.lp .divider_d .dd_line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #19192D)
}

.lp .divider_d .dd_tri {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #19192D
}

.lp .community_sec {
padding: 96px 24px;
background: linear-gradient(160deg, #0cc1fc0f 0%, #FDFDFD 60%);
position: relative
}

.lp .community_sec::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(60deg, transparent, transparent 28px, #0cc1fc0a 28px, #0cc1fc0a 29px);
pointer-events: none
}

.lp .community_inner {
max-width: 1024px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 48px;
align-items: center;
position: relative;
z-index: 1 !important
}

.lp .community_img_wrap {
flex: 0 0 380px;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 1px 12px 36px -1px #19192d21
}

.lp .community_img_wrap img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
border-radius: 20px;
transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lp .community_img_wrap:hover img {
transform: scale(1.03)
}

.lp .community_img_overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #0cc1fc40;
border-radius: 20px;
pointer-events: none;
transition: opacity .55s ease-in-out
}

.lp .community_img_wrap:hover .community_img_overlay {
opacity: 0
}

.lp .community_text {
flex: 1
}

.lp .community_label {
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #0CC1FC;
line-height: 1.6;
margin-bottom: 8px
}

.lp .community_h2 {
font-size: 43px;
font-weight: 900;
line-height: 1.2;
color: #19192D;
margin-bottom: 24px
}

.lp .community_p {
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .8;
margin-bottom: 24px
}

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

.lp .community_list li {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.6;
color: #19192D
}

.lp .community_list li::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 1px;
background: #0CC1FC;
flex-shrink: 0;
transform: rotate(45deg)
}

.lp .shake_btn {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: #19192D;
text-decoration: none;
padding: 8px 24px;
border-radius: 5px;
position: relative;
overflow: hidden;
transition: color .5s ease-in-out;
animation: shakeme 6s 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

.lp .shake_btn::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 100%;
background: #0CC1FC;
border-radius: 5px;
transition: left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.lp .shake_btn:hover::before {
left: 0
}

.lp .shake_btn:hover {
color: #19192D
}

.lp .shake_btn_txt {
position: relative;
z-index: 1
}

.lp .shake_btn_arr {
position: relative;
z-index: 1;
display: inline-block;
width: 14px;
height: 10px
}

.lp .shake_btn_arr::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 4px;
height: 1.5px;
background: currentColor;
transform: translateY(-50%)
}

.lp .shake_btn_arr::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translateY(-50%) rotate(45deg)
}

.lp .shake_btn_border {
border: 2px solid #19192D;
border-radius: 5px
}

@keyframes shakeme {

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

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

92% {
transform: translateX(4px)
}

94% {
transform: translateX(-3px)
}

96% {
transform: translateX(3px)
}

98% {
transform: translateX(-1px)
}
}

.lp .faq_sec {
background: #FDFDFD;
padding: 96px 24px
}

.lp .faq_inner {
max-width: 1024px;
margin: 0 auto
}

.lp .faq_h2 {
font-size: 43px;
font-weight: 900;
line-height: 1.2;
color: #19192D;
margin-bottom: 48px
}

.lp .faq_h2 em {
font-style: normal;
-webkit-text-stroke: 1.5px #0CC1FC;
color: transparent
}

.lp .faq_list {
display: flex;
flex-direction: column;
gap: 8px
}

.lp .faq_item {
border: 1px solid #0cc1fc33;
border-radius: 11px;
overflow: hidden
}

.lp .faq_q {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px;
cursor: pointer;
user-select: none;
background: #FDFDFD;
transition: background .5s ease-in-out;
list-style: none
}

.lp .faq_q::-webkit-details-marker {
display: none
}

.lp .faq_q_txt {
font-size: 15px;
font-weight: 700;
line-height: 1.6;
color: #19192D
}

.lp .faq_arrow {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 5px;
background: #0cc1fc1f;
display: flex;
align-items: center;
justify-content: center;
transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .5s ease-in-out
}

.lp .faq_arrow svg {
width: 10px;
height: 10px;
stroke: #19192D;
fill: none;
stroke-width: 2
}

.lp .faq_item[open] .faq_arrow {
transform: rotate(180deg);
background: #0CC1FC
}

.lp .faq_ans {
padding: 0 24px 24px;
font-size: 15px;
line-height: 1.6;
color: #19192D;
opacity: .8
}

@media (max-width: 1024px) {
.lp .title_img_wrap {
flex: 0 0 340px
}

.lp .why_left {
flex: 0 0 260px
}
}

@media (max-width: 768px) {
.lp .title_inner {
flex-direction: column
}

.lp .title_img_wrap {
flex: none;
width: 100%
}

.lp .title_h1 {
font-size: 43px
}

.lp .cards_grid {
grid-template-columns: 1fr
}

.lp .why_inner {
flex-direction: column
}

.lp .why_left {
flex: none;
width: 100%
}

.lp .community_inner {
flex-direction: column
}

.lp .community_img_wrap {
flex: none;
width: 100%
}

.lp .formats_table th,
.lp .formats_table td {
padding: 8px;
font-size: 15px
}
}

@media (max-width: 640px) {
.lp .title_blk {
padding: 48px 24px
}

.lp .title_h1 {
font-size: 31px
}

.lp .why_h2,
.lp .formats_h2,
.lp .community_h2,
.lp .faq_h2 {
font-size: 31px
}

.lp .card_details_row {
flex-direction: column;
gap: 8px
}

.lp .card_footer {
flex-direction: column;
align-items: flex-start;
gap: 8px
}
}

.succ_page {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 96px 24px;
background-color: #FDFDFD
}

.succ_page .succ_wrap {
max-width: 1024px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px
}

.succ_page .succ_icon {
width: 72px;
height: 72px;
flex-shrink: 0
}

.succ_page .succ_icon circle {
fill: none;
stroke: #0CC1FC;
stroke-width: 2.5;
transition: stroke-dashoffset .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.succ_page .succ_icon polyline {
fill: none;
stroke: #19192D;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round
}

.succ_page .succ_body {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center
}

.succ_page .succ_heading {
font-size: 43px;
line-height: 1.2;
color: #19192D;
font-weight: 800;
letter-spacing: -.02em;
margin: 0
}

.succ_page .succ_heading span {
background: linear-gradient(113deg, #0CC1FC, transparent);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}

.succ_page .succ_txt {
font-size: 15px;
line-height: 1.6;
color: #19192D;
max-width: 480px;
margin: 0;
opacity: .75
}

.succ_page .succ_divider {
width: 48px;
height: 2px;
background: #0CC1FC;
border-radius: 1px
}

.succ_page .succ_detail {
font-size: 15px;
line-height: 1.6;
color: #19192D;
max-width: 420px;
margin: 0;
opacity: .6;
font-style: italic
}

.succ_page .succ_actions {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: wrap;
justify-content: center
}

.succ_page .btn_primary {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 24px;
font-size: 15px;
line-height: 1.6;
font-weight: 700;
color: #FDFDFD;
background-color: #19192D;
border: none;
border-radius: 11px;
cursor: pointer;
overflow: hidden;
text-decoration: none;
box-shadow: 1px 5px 25px -1px #19192d1a;
transition: color .5s ease-in-out, box-shadow .45s ease-in-out
}

.succ_page .btn_primary::after {
content: '';
position: absolute;
inset: 0;
right: 100%;
background-color: #0CC1FC;
border-radius: 11px;
transition: right .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.succ_page .btn_primary:hover::after {
right: 0
}

.succ_page .btn_primary:hover {
color: #19192D;
box-shadow: 1px 12px 36px -1px #0cc1fc21
}

.succ_page .btn_primary:focus-visible {
outline: 2px solid #0CC1FC;
outline-offset: 3px
}

.succ_page .btn_primary span {
position: relative;
z-index: 1
}

.succ_page .btn_sec {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 24px;
font-size: 15px;
line-height: 1.6;
font-weight: 600;
color: #19192D;
background-color: transparent;
border: 1.5px solid #19192D;
border-radius: 11px;
cursor: pointer;
text-decoration: none;
box-shadow: 1px 2px 3px -1px #19192d0f;
transition: border-color .5s ease-in-out, color .5s ease-in-out, box-shadow .45s ease-in-out
}

.succ_page .btn_sec:hover {
border-color: #0CC1FC;
color: #0CC1FC;
box-shadow: 1px 5px 25px -1px #0cc1fc1a
}

.succ_page .btn_sec:focus-visible {
outline: 2px solid #0CC1FC;
outline-offset: 3px
}

.succ_page .btn_arrow {
display: inline-block;
width: 14px;
height: 14px;
flex-shrink: 0
}

.succ_page .succ_note {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
padding: 24px;
background-color: #FDFDFD;
border: 1px solid #0cc1fc4d;
border-radius: 20px;
max-width: 520px;
width: 100%;
box-shadow: 1px 2px 3px -1px #0cc1fc0f
}

.succ_page .note_icon {
flex-shrink: 0;
margin-top: 2px;
width: 18px;
height: 18px
}

.succ_page .note_txt {
font-size: 15px;
line-height: 1.6;
color: #19192D;
margin: 0;
opacity: .8
}

.succ_page .note_txt strong {
font-weight: 700;
opacity: 1
}

@media (max-width: 640px) {
.succ_page {
padding: 48px 24px
}

.succ_page .succ_heading {
font-size: 31px
}

.succ_page .succ_actions {
flex-direction: column;
align-items: stretch;
gap: 8px
}

.succ_page .btn_primary,
.succ_page .btn_sec {
justify-content: center
}
}