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

html {
margin: 0;
padding: 0;
box-sizing: border-box
}

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

.brand-top {
background: linear-gradient(165deg, #1a1612 0%, #0d0c0a 100%);
padding: 24px 12px 12px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden
}

.brand-top::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle at 30% 40%, #f9c00008 0%, transparent 60%);
pointer-events: none
}

.brand-top::after {
content: '';
position: absolute;
bottom: -40%;
left: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle at 70% 60%, #09cac80a 0%, transparent 65%);
pointer-events: none
}

.logo-holder {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
background: #ff3d6605;
border: 1px solid #ffffff14;
box-shadow: 0 0 0 3px #09cac80d 0 4px 18px 0 #ff3d6617;
border-radius: 20px;
position: relative;
z-index: 10;
transition: box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.logo-holder:hover {
box-shadow: 0 0 0 3px #f9c0001f 0 8px 52px 0 #ff3d661c;
border-color: #ffffff24
}

.logo-holder img {
width: 62px;
height: 62px;
object-fit: contain
}

.nav-row {
background: linear-gradient(180deg, #0d0c0a 0%, #151311 100%);
padding: 12px 24px;
border-top: 1px solid #ffffff0a;
border-bottom: 1px solid #ffffff0a;
position: relative;
overflow: hidden
}

.nav-row::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #09cac833 50%, transparent 100%);
pointer-events: none
}

.nav-links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px 24px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 5
}

.nav-item {
margin: 0;
padding: 0
}

.nav-anchor {
display: inline-flex;
align-items: center;
padding: 12px 24px;
color: #ffffffb8;
text-decoration: none;
font-size: 16px;
font-weight: 400;
letter-spacing: .3px;
line-height: 1.4;
border: 1px solid #ffffff0f;
border-radius: 12px;
background: #ffffff03;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1), border-color .18s cubic-bezier(0.4, 0, 0.2, 1), background .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.nav-anchor::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff3d6614;
transform: translate(-50%, -50%);
transition: width .25s cubic-bezier(0.0, 0, 0.2, 1), height .25s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.nav-anchor:hover::before {
width: 200px;
height: 200px
}

.nav-anchor:hover {
color: #fffffff2;
border-color: #ff3d664d;
background: #ff3d660a;
box-shadow: 0 1px 3px 0 #ff3d660f 0 4px 18px 0 #ff3d6617
}

.nav-anchor:focus {
outline: 2px dashed #09cac880;
outline-offset: 3px;
color: #fffffff2
}

@media (max-width: 768px) {
.nav-links {
gap: 6px 12px
}

.nav-anchor {
padding: 12px;
font-size: 13px
}

.brand-top {
padding: 24px 6px 12px
}

.nav-row {
padding: 12px
}
}

@media (max-width: 360px) {
.nav-anchor {
padding: 12px;
font-size: 13px;
flex: 1 1 100%;
justify-content: center
}
}

.ground-box {
background: linear-gradient(175deg, #0f0e0c 0%, #1a1612 100%);
padding: 96px 24px 48px;
position: relative;
overflow: hidden;
border-top: 1px solid #ffffff0f
}

.ground-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, transparent 0%, transparent 48%, #09cac805 50%, transparent 52%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #f9c00004 50%, transparent 52%, transparent 100%);
background-size: 120px 120px, 180px 180px;
background-position: 0 0, 60px 60px;
pointer-events: none;
opacity: .4
}

.ground-box::after {
content: '';
position: absolute;
top: -200px;
right: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle at center, #ff3d660d 0%, transparent 70%);
pointer-events: none;
clip-path: polygon(30% 0%, 100% 0%, 100% 70%, 60% 100%, 0% 80%, 0% 30%)
}

.ground-inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 2
}

.geo-shapes {
position: absolute;
top: 48px;
left: 24px;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1
}

.geo-circle {
position: absolute;
top: 15%;
left: 8%;
width: 140px;
height: 140px;
border: 2px solid #09cac814;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #09cac808 0%, transparent 70%)
}

.geo-tri {
position: absolute;
bottom: 20%;
right: 12%;
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #f9c0000a;
filter: blur(1px)
}

.geo-rect {
position: absolute;
top: 40%;
right: 18%;
width: 100px;
height: 160px;
background: linear-gradient(145deg, #ff3d6608 0%, transparent 100%);
border: 1px solid #ff3d660f;
border-radius: 12px;
transform: rotate(-12deg)
}

.geo-hex {
position: absolute;
bottom: 35%;
left: 15%;
width: 80px;
height: 92px;
background: #09cac805;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
border: 1px solid #09cac814
}

@media (max-width: 1024px) {
.geo-shapes {
display: none
}
}

.sitemap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 48px;
margin-bottom: 96px;
position: relative;
z-index: 3
}

.sitemap-cluster {
display: flex;
flex-direction: column;
gap: 12px
}

.cluster-label {
font-size: 19px;
font-weight: 700;
line-height: 1.4;
color: #ffffffe0;
letter-spacing: .5px;
margin-bottom: 6px;
padding-bottom: 12px;
border-bottom: 2px solid #ff3d6626;
background: linear-gradient(90deg, #ff3d6699 0%, #09cac899 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.sitemap-cluster:hover .cluster-label {
border-color: #09cac859
}

.cluster-links {
display: flex;
flex-direction: column;
gap: 6px;
list-style: none;
margin: 0;
padding: 0
}

.cluster-item {
margin: 0;
padding: 0
}

.cluster-link {
display: inline-flex;
align-items: center;
padding: 12px 24px;
color: #ffffffad;
text-decoration: none;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: .2px;
border: 1px solid #ffffff0d;
border-radius: 12px;
background: #ffffff03;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1), background .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.cluster-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, #09cac800 0%, #09cac899 50%, #09cac800 100%);
opacity: 0;
transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.cluster-link:hover::before {
opacity: 1
}

.cluster-link:hover {
color: #fffffff2;
border-color: #09cac840;
background: #09cac808;
transform: translateX(6px);
box-shadow: 0 1px 3px 0 #09cac80f 0 4px 18px 0 #09cac817
}

.cluster-link:focus {
outline: 2px dashed #f9c00080;
outline-offset: 3px;
color: #fffffff2
}

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

.cluster-link {
padding: 12px
}
}

.bottom-seal {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding-top: 48px;
border-top: 1px solid #ffffff0f;
position: relative;
z-index: 3
}

.logo-base {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: #09cac805;
border: 1px solid #ffffff14;
box-shadow: 0 0 0 2px #f9c0000a 0 4px 18px 0 #09cac817;
border-radius: 20px;
transition: box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1), border-color .26s cubic-bezier(0.4, 0, 0.2, 1), transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.logo-base:hover {
box-shadow: 0 0 0 2px #ff3d661a 0 8px 52px 0 #09cac81c;
border-color: #ffffff26;
transform: translateY(-2px)
}

.logo-base img {
width: 58px;
height: 58px;
object-fit: contain
}

.legal-text {
font-size: 13px;
line-height: 1.6;
color: #ffffff85;
text-align: center;
letter-spacing: .4px;
max-width: 600px
}

.contact-cluster {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
margin-top: 24px
}

.contact-row {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
line-height: 1.6;
color: #ffffff94;
letter-spacing: .3px
}

.contact-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center
}

.contact-icon svg {
width: 100%;
height: 100%;
fill: #09cac899
}

.contact-link {
color: #ffffffad;
text-decoration: none;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1);
position: relative
}

.contact-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background: #09cac899;
transition: width .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-link:hover {
color: #ffffffeb
}

.contact-link:hover::after {
width: 100%
}

.contact-link:focus {
outline: 2px dashed #f9c00080;
outline-offset: 2px
}

.address-block {
font-size: 13px;
line-height: 1.6;
color: #ffffff85;
text-align: center;
letter-spacing: .3px;
max-width: 500px;
margin-top: 12px
}

@media (max-width: 768px) {
.contact-cluster {
gap: 12px
}

.contact-row {
flex-direction: column;
text-align: center;
gap: 6px
}
}

@media (max-width: 360px) {
.ground-box {
padding: 48px 12px 24px
}

.sitemap-grid {
gap: 24px;
margin-bottom: 48px
}

.bottom-seal {
gap: 12px;
padding-top: 24px
}
}

.consent-box {
position: fixed;
top: 24px;
left: 24px;
width: 420px;
max-width: calc(100vw - 48px);
background: linear-gradient(160deg, #1a1612 0%, #0f0e0c 100%);
border: 1px solid #ffffff1a;
border-radius: 20px;
padding: 24px;
box-shadow: 0 8px 52px 0 #ff3d661c 0 4px 18px 0 #09cac817;
z-index: 1200;
display: none;
opacity: 0;
transform: translateY(-12px);
transition: opacity .28s cubic-bezier(0.4, 0, 0.2, 1), transform .28s cubic-bezier(0.4, 0, 0.2, 1)
}

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

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

.consent-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #09cac814;
border: 1px solid #09cac833;
border-radius: 12px
}

.consent-icon svg {
width: 20px;
height: 20px;
fill: #09cac8cc
}

.consent-msg {
font-size: 13px;
line-height: 1.6;
color: #ffffffd1;
margin-bottom: 24px;
letter-spacing: .2px
}

.consent-actions {
display: flex;
gap: 12px
}

.consent-btn {
flex: 1;
padding: 12px 24px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .5px;
text-align: center;
border-radius: 12px;
cursor: pointer;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-family: 'Oxygen', sans-serif
}

.consent-accept {
background: #09cac80f;
border: 1px solid #09cac840;
color: #ffffffe0
}

.consent-accept::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #09cac826;
transform: translate(-50%, -50%);
transition: width .3s cubic-bezier(0.0, 0, 0.2, 1), height .3s cubic-bezier(0.0, 0, 0.2, 1)
}

.consent-accept:hover::before {
width: 300px;
height: 300px
}

.consent-accept:hover {
background: #09cac81f;
border-color: #09cac866;
color: #fffffffa;
box-shadow: 0 1px 3px 0 #09cac80f 0 4px 18px 0 #09cac817;
transform: translateY(-1px)
}

.consent-accept:focus {
outline: 2px dashed #09cac899;
outline-offset: 3px
}

.consent-decline {
background: #ffffff05;
border: 1px solid #ffffff1f;
color: #ffffffb8
}

.consent-decline::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff3d6614;
transform: translate(-50%, -50%);
transition: width .3s cubic-bezier(0.0, 0, 0.2, 1), height .3s cubic-bezier(0.0, 0, 0.2, 1)
}

.consent-decline:hover::before {
width: 300px;
height: 300px
}

.consent-decline:hover {
background: #ff3d660d;
border-color: #ff3d6640;
color: #ffffffe0;
box-shadow: 0 1px 3px 0 #ff3d660f;
transform: translateY(-1px)
}

.consent-decline:focus {
outline: 2px dashed #f9c00080;
outline-offset: 3px
}

@media (max-width: 768px) {
.consent-box {
top: 12px;
left: 12px;
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
padding: 24px
}

.consent-actions {
flex-direction: column
}

.consent-btn {
width: 100%
}
}

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

::selection {
background: #09cac81a;
color: #fffffff2
}

::-moz-selection {
background: #09cac81a;
color: #fffffff2
}

input::placeholder,
textarea::placeholder {
color: #09cac859;
opacity: 1
}

input:focus,
textarea:focus,
select:focus {
outline: 2px dashed #09cac880;
outline-offset: 2px;
box-shadow: inset 0 2px 4px 0 #09cac814
}

@media (min-width: 1440px) {
.ground-inner {
padding: 0 48px
}

.sitemap-grid {
grid-template-columns: repeat(4, 1fr);
gap: 48px
}
}

@media (min-width: 1024px) and (max-width: 1439px) {
.sitemap-grid {
grid-template-columns: repeat(3, 1fr)
}
}

.rlt-legal-main {
max-width: 1600px;
margin: 0 auto;
padding: 48px 24px;
background: #1a1614;
color: #e8e6e4
}

@media (min-width: 768px) {
.rlt-legal-main {
padding: 96px 48px
}
}

@media (min-width: 1024px) {
.rlt-legal-main {
padding: 96px
}
}

.rlt-legal-main p {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px
}

.rlt-legal-main p:last-child {
margin-bottom: 0
}

.rlt-legal-main strong,
.rlt-legal-main b {
font-weight: 600;
color: #f5f3f1
}

.rlt-legal-main em,
.rlt-legal-main i {
font-style: italic
}

.rlt-legal-main ul,
.rlt-legal-main ol {
margin: 0 0 24px;
padding-left: 24px
}

.rlt-legal-main ul {
list-style-type: disc
}

.rlt-legal-main ol {
list-style-type: decimal
}

.rlt-legal-main li {
font-size: 16px;
line-height: 1.6;
margin-bottom: 12px
}

.rlt-legal-main li:last-child {
margin-bottom: 0
}

.rlt-legal-main ul ul,
.rlt-legal-main ol ol,
.rlt-legal-main ul ol,
.rlt-legal-main ol ul {
margin-top: 12px;
margin-bottom: 12px
}

.rlt-legal-main table {
width: 100%;
border-collapse: collapse;
margin: 0 0 48px;
background: #211e1c;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 18px 0 #ff3d6617
}

.rlt-legal-main thead {
background: #2a2624
}

.rlt-legal-main th {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
text-align: left;
padding: 24px;
color: #f5f3f1;
border-bottom: 1px solid #3a3634
}

.rlt-legal-main td {
font-size: 16px;
line-height: 1.6;
padding: 24px;
border-bottom: 1px solid #2a2624
}

.rlt-legal-main tbody tr:last-child td {
border-bottom: none
}

.rlt-legal-main tbody tr {
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.rlt-legal-main tbody tr:hover {
background: #2a2624
}

.rlt-legal-main div {
margin: 0 0 24px
}

@media (max-width: 767px) {
.rlt-legal-main table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}

.rlt-legal-main th,
.rlt-legal-main td {
padding: 12px;
font-size: 13px
}
}

@media (min-width: 768px) {
.rlt-legal-main p {
font-size: 19px
}

.rlt-legal-main li {
font-size: 19px
}

.rlt-legal-main th,
.rlt-legal-main td {
font-size: 19px
}
}

.cntct-pg {
background: linear-gradient(157deg, #ff3d6608 0%, #09cac80a 100%), linear-gradient(223deg, #f9c00005 0%, #ff3d6608 100%), #1a1612;
min-height: 100vh;
position: relative;
overflow-x: clip
}

.cntct-pg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 40%, #ff3d6614 0%, transparent 60%);
pointer-events: none;
animation: pulse-glow 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
z-index: 0
}

@keyframes pulse-glow {

0%,
100% {
opacity: .4
}

50% {
opacity: .7
}
}

.cntct-pg>* {
position: relative;
z-index: 1
}

.cntct-pg .intro-banner {
max-width: 1600px;
margin: 0 auto;
padding: 96px 24px 48px;
position: relative;
overflow: hidden
}

.cntct-pg .intro-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, #ff3d6626 1px, transparent 1px), radial-gradient(circle, #09cac81f 1px, transparent 1px), radial-gradient(circle, #f9c0001a 1px, transparent 1px);
background-size: 48px 48px, 72px 72px, 96px 96px;
background-position: 0 0, 24px 24px, 48px 48px;
opacity: .3;
pointer-events: none
}

.cntct-pg .intro-banner__txt {
max-width: 920px;
margin: 0 auto;
text-align: center
}

.cntct-pg .intro-banner__h {
font-size: 62px;
line-height: 1.1;
color: #f4f1ed;
margin: 0 0 24px;
letter-spacing: -.02em
}

@media (max-width: 768px) {
.cntct-pg .intro-banner {
padding: 48px 24px 24px
}

.cntct-pg .intro-banner__h {
font-size: 25px;
margin: 0 0 12px
}
}

.cntct-pg .reach-methods {
max-width: 1600px;
margin: 0 auto;
padding: 96px 24px;
position: relative
}

.cntct-pg .reach-methods::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 1px;
background: repeating-linear-gradient(to right, #ff3d664d 0px, #ff3d664d 6px, transparent 6px, transparent 12px)
}

.cntct-pg .reach-methods::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #FF3D66;
border-radius: 50%;
box-shadow: 0 0 0 3px #ff3d6633
}

.cntct-pg .reach-methods__layout {
display: grid;
grid-template-columns: 380px 1fr;
gap: 48px;
align-items: start
}

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

.cntct-pg .reach-methods__sidebar {
position: sticky;
top: 96px
}

.cntct-pg .reach-methods__sidebar-img {
width: 100%;
height: 420px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 18px 0 #ff3d6617 0 8px 52px 0 #09cac81c;
transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.cntct-pg .reach-methods__sidebar-img:hover {
box-shadow: 0 8px 32px 0 #ff3d6626 0 16px 72px 0 #09cac82e
}

.cntct-pg .reach-methods__sidebar-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

@media (max-width: 1024px) {
.cntct-pg .reach-methods__sidebar {
position: static
}

.cntct-pg .reach-methods__sidebar-img {
height: 320px
}
}

.cntct-pg .reach-methods__content {
background: linear-gradient(134deg, #ff3d660a 0%, #09cac808 100%), #221c18;
border-radius: 20px;
padding: 48px;
border: 1px solid #ff3d661f
}

@media (max-width: 768px) {
.cntct-pg .reach-methods__content {
padding: 24px
}
}

.cntct-pg .reach-methods__h {
font-size: 25px;
line-height: 1.1;
color: #f4f1ed;
margin: 0 0 12px;
position: relative;
padding-left: 24px
}

.cntct-pg .reach-methods__h::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #FF3D66 0%, #09CAC8 100%);
border-radius: 12px
}

.cntct-pg .reach-methods__desc {
font-size: 16px;
line-height: 1.6;
color: #c4bfb8;
margin: 0 0 48px;
padding-left: 24px
}

.cntct-pg .reach-methods__steps {
display: flex;
gap: 24px;
margin-bottom: 48px
}

@media (max-width: 768px) {
.cntct-pg .reach-methods__steps {
flex-direction: column
}
}

.cntct-pg .step-card {
flex: 1;
background: #ff3d6608;
border-radius: 12px;
padding: 24px;
border: 1px solid #ff3d6614;
transition: all .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.cntct-pg .step-card:hover {
background: #ff3d660f;
border-color: #ff3d6633;
transform: translateY(-2px)
}

.cntct-pg .step-card__num {
display: inline-block;
width: 36px;
height: 36px;
background: linear-gradient(135deg, #FF3D66 0%, #09CAC8 100%);
border-radius: 50%;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
font-weight: 600;
margin-bottom: 12px
}

.cntct-pg .step-card__title {
font-size: 19px;
line-height: 1.4;
color: #f4f1ed;
margin: 0 0 6px
}

.cntct-pg .step-card__txt {
font-size: 13px;
line-height: 1.6;
color: #a8a39c;
margin: 0
}

.cntct-pg .reach-methods__info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}

@media (max-width: 768px) {
.cntct-pg .reach-methods__info-grid {
grid-template-columns: 1fr
}
}

.cntct-pg .info-item {
background: #09cac808;
border-radius: 12px;
padding: 24px;
border: 1px solid #09cac81a;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.cntct-pg .info-item:hover {
border-color: #09cac840
}

.cntct-pg .info-item__label {
font-size: 13px;
line-height: 1.4;
color: #09CAC8;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 6px
}

.cntct-pg .info-item__value {
font-size: 16px;
line-height: 1.6;
color: #e8e4df;
margin: 0
}

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

.cntct-pg .info-item__value a:hover {
color: #09CAC8
}

.cntct-pg .form-zone {
max-width: 1600px;
margin: 0 auto;
padding: 96px 24px;
background: linear-gradient(178deg, #f9c00005 0%, transparent 100%);
position: relative
}

.cntct-pg .form-zone::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 1px;
background: repeating-linear-gradient(to right, #09cac84d 0px, #09cac84d 6px, transparent 6px, transparent 12px)
}

.cntct-pg .form-zone::after {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: #09CAC8;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

.cntct-pg .form-zone__wrapper {
max-width: 920px;
margin: 0 auto;
background: #1a1612;
border-radius: 20px;
padding: 48px;
box-shadow: 0 4px 18px 0 #09cac817 0 8px 52px 0 #ff3d661c;
border: 1px solid #ff3d6614
}

@media (max-width: 768px) {
.cntct-pg .form-zone__wrapper {
padding: 24px
}
}

.cntct-pg .form-zone__h {
font-size: 25px;
line-height: 1.1;
color: #f4f1ed;
margin: 0 0 12px;
text-align: center
}

.cntct-pg .form-zone__subh {
font-size: 16px;
line-height: 1.6;
color: #c4bfb8;
margin: 0 0 48px;
text-align: center
}

.cntct-pg .contact-form {
display: flex;
flex-direction: column;
gap: 24px
}

.cntct-pg .form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}

@media (max-width: 768px) {
.cntct-pg .form-row {
grid-template-columns: 1fr
}
}

.cntct-pg .field-group {
display: flex;
flex-direction: column;
gap: 6px
}

.cntct-pg .field-group label {
font-size: 13px;
line-height: 1.4;
color: #e8e4df;
letter-spacing: .02em
}

.cntct-pg .field-group input[type="text"],
.cntct-pg .field-group input[type="email"] {
width: 100%;
padding: 12px 24px;
background: #ff3d6608;
border: 1px solid #ff3d6626;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
color: #f4f1ed;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 1px 3px 0 #ff3d660f
}

.cntct-pg .field-group input[type="text"]:focus,
.cntct-pg .field-group input[type="email"]:focus {
outline: none;
border-color: #FF3D66;
background: #ff3d660f;
box-shadow: inset 0 1px 3px 0 #ff3d661f 0 0 0 3px #ff3d6626
}

.cntct-pg .field-group input[type="text"]::placeholder,
.cntct-pg .field-group input[type="email"]::placeholder {
color: #ff3d6666
}

.cntct-pg .field-group select {
width: 100%;
padding: 12px 24px;
background: #09cac808;
border: 1px solid #09cac826 !important;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
color: #f4f1ed;
cursor: pointer;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2309CAC8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 24px center;
padding-right: 48px;
box-shadow: inset 0 1px 3px 0 #09cac80f
}

.cntct-pg .field-group select:focus {
outline: none;
border-color: #09CAC8 !important;
background-color: #09cac80f;
box-shadow: inset 0 1px 3px 0 #09cac81f 0 0 0 3px #09cac826
}

.cntct-pg .field-group select option {
background: #1a1612;
color: #f4f1ed;
padding: 12px
}

.cntct-pg .radio-set {
display: flex;
flex-direction: column;
gap: 6px
}

.cntct-pg .radio-set__label {
font-size: 13px;
line-height: 1.4;
color: #e8e4df;
letter-spacing: .02em;
margin-bottom: 6px
}

.cntct-pg .radio-set__options {
display: flex;
gap: 24px
}

@media (max-width: 768px) {
.cntct-pg .radio-set__options {
flex-direction: column;
gap: 12px
}
}

.cntct-pg .radio-option {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 12px 24px;
background: #f9c00008;
border: 1px solid #f9c0001f;
border-radius: 12px;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1
}

.cntct-pg .radio-option:hover {
background: #f9c0000f;
border-color: #f9c00040
}

.cntct-pg .radio-option input[type="radio"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #f9c00066;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: all .18s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0
}

.cntct-pg .radio-option input[type="radio"]:checked {
border-color: #F9C000
}

.cntct-pg .radio-option input[type="radio"]:checked::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #F9C000;
border-radius: 50%
}

.cntct-pg .radio-option__text {
font-size: 16px;
line-height: 1.4;
color: #e8e4df
}

.cntct-pg .checkbox-field {
display: flex;
align-items: start;
gap: 12px;
padding: 24px;
background: #ff3d6605;
border-radius: 12px;
border: 1px solid #ff3d6614
}

.cntct-pg .checkbox-field input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ff3d6666;
border-radius: 0;
position: relative;
cursor: pointer;
transition: all .18s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
margin-top: 2px
}

.cntct-pg .checkbox-field input[type="checkbox"]:checked {
background: #FF3D66;
border-color: #FF3D66
}

.cntct-pg .checkbox-field input[type="checkbox"]:checked::before {
content: '';
position: absolute;
top: 2px;
left: 6px;
width: 4px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}

.cntct-pg .checkbox-field label {
font-size: 13px;
line-height: 1.6;
color: #c4bfb8;
cursor: pointer
}

.cntct-pg .checkbox-field label a {
color: #FF3D66;
text-decoration: none;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.cntct-pg .checkbox-field label a:hover {
color: #09CAC8
}

.cntct-pg .submit-btn {
width: 100%;
padding: 24px 48px;
background: transparent;
border: 2px solid #FF3D66;
border-radius: 12px;
font-size: 16px;
line-height: 1.4;
color: #f4f1ed;
cursor: pointer;
transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
letter-spacing: .02em;
font-weight: 600
}

.cntct-pg .submit-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, #ff3d664d 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width .6s cubic-bezier(0.4, 0, 0.2, 1), height .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.cntct-pg .submit-btn:hover {
background: linear-gradient(135deg, #ff3d6626 0%, #09cac826 100%);
border-color: #09CAC8;
transform: translateY(-2px);
box-shadow: 0 4px 18px 0 #ff3d6617 0 8px 52px 0 #09cac81c
}

.cntct-pg .submit-btn:active::before {
width: 300px;
height: 300px
}

.cntct-pg .submit-btn:focus {
outline: none;
box-shadow: 0 0 0 3px #ff3d664d
}

@media (max-width: 768px) {
.cntct-pg .form-zone {
padding: 48px 24px
}

.cntct-pg .reach-methods {
padding: 48px 24px
}
}

::selection {
background: #ff3d661a;
color: #f4f1ed
}

.abt-pg {
background: #1a1614;
color: #e8e6e4;
overflow-x: clip
}

.abt-pg .ttl-zone {
position: relative;
padding: 96px 24px 192px;
max-width: 1600px;
margin: 0 auto;
background: linear-gradient(168deg, #ff3d662e 0%, transparent 68%);
overflow: visible
}

.abt-pg .ttl-zone::before {
content: '';
position: absolute;
top: 48px;
right: 12%;
width: 280px;
height: 280px;
border: 2px solid #f9c0001f;
border-radius: 50%;
transform: rotate(25deg)
}

.abt-pg .ttl-zone::after {
content: '';
position: absolute;
bottom: 96px;
left: 8%;
width: 420px;
height: 3px;
background: linear-gradient(94deg, transparent, #09cac847, transparent);
transform: rotate(-8deg)
}

.abt-pg .ttl-layout {
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
max-width: 1600px;
margin: 0 auto
}

.abt-pg .ttl-main {
flex: 1 1 65%
}

.abt-pg .ttl-side {
flex: 1 1 35%;
position: sticky;
top: 96px
}

.abt-pg .ttl-main h1 {
font-size: 62px;
line-height: 1.1;
margin: 0 0 24px;
font-weight: 700;
letter-spacing: -.02em
}

.abt-pg .ttl-main .lnk-explore {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 16px;
padding: 12px 24px;
border: 2px solid #ff3d664d;
border-radius: 12px;
text-decoration: none;
color: #e8e6e4;
transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), background-color .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.abt-pg .ttl-main .lnk-explore::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff3d6626;
transform: translate(-50%, -50%);
transition: width .28s cubic-bezier(0.0, 0, 0.2, 1), height .28s cubic-bezier(0.0, 0, 0.2, 1)
}

.abt-pg .ttl-main .lnk-explore:hover::before {
width: 300px;
height: 300px
}

.abt-pg .ttl-main .lnk-explore:hover {
border-color: #FF3D66;
background-color: #ff3d6614;
box-shadow: 0 4px 18px 0 #ff3d6617
}

.abt-pg .ttl-main .lnk-explore .icn-arr {
width: 18px;
height: 18px;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1
}

.abt-pg .ttl-main .lnk-explore:hover .icn-arr {
transform: translateX(6px)
}

.abt-pg .ttl-side img {
width: 100%;
height: auto;
border-radius: 20px;
display: block;
box-shadow: 0 8px 52px 0 #ff3d661c
}

.abt-pg .div-band {
height: 96px;
background: #09CAC8;
width: 100%;
position: relative
}

.abt-pg .story-wrap {
background: #16120f;
padding: 96px 24px;
position: relative
}

.abt-pg .story-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(./image_storage/post-thumbnail-4aa.jpg);
background-size: cover;
background-position: center;
opacity: .08;
pointer-events: none
}

.abt-pg .story-wrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(217deg, #ff3d6624, transparent 72%);
pointer-events: none
}

.abt-pg .story-inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start
}

.abt-pg .story-col {
display: flex;
flex-direction: column;
gap: 24px
}

.abt-pg .story-col h2 {
font-size: 25px;
line-height: 1.4;
margin: 0;
padding-left: 24px;
border-left: 4px solid #09CAC8;
font-weight: 600
}

.abt-pg .story-col p {
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #e8e6e4e0
}

.abt-pg .story-card {
background: #ff3d660a;
border: 1px solid #ff3d662e;
border-radius: 12px;
padding: 24px;
position: relative;
transition: transform .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 6px 6px 0 0 #ff3d661f
}

.abt-pg .story-card:hover {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 0 #ff3d6638
}

.abt-pg .story-card h3 {
font-size: 19px;
line-height: 1.4;
margin: 0 0 12px;
color: #F9C000;
font-weight: 600
}

.abt-pg .story-card p {
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #e8e6e4d6
}

.abt-pg .tm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
margin-top: 48px
}

.abt-pg .tm-mbr {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center
}

.abt-pg .tm-pic {
width: 100%;
max-width: 280px;
aspect-ratio: 1;
border-radius: 20px;
overflow: hidden;
position: relative;
border: 2px solid #09cac833;
transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .tm-mbr:hover .tm-pic {
border-color: #09CAC8
}

.abt-pg .tm-pic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.abt-pg .tm-nm {
font-size: 19px;
line-height: 1.4;
margin: 0;
font-weight: 600;
color: #e8e6e4
}

.abt-pg .tm-role {
font-size: 13px;
line-height: 1.4;
margin: 0;
color: #e8e6e49e;
text-transform: uppercase;
letter-spacing: .08em
}

.abt-pg .val-lst {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 24px
}

.abt-pg .val-lst li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 1.6
}

.abt-pg .val-lst li::before {
content: '';
width: 16px;
height: 16px;
background: #F9C000;
border-radius: 50%;
flex-shrink: 0;
margin-top: 6px
}

.abt-pg .val-lst li strong {
color: #09CAC8
}

.abt-pg .spiral-deco {
position: absolute;
bottom: 48px;
right: 6%;
width: 160px;
height: 160px;
opacity: .06;
pointer-events: none
}

.abt-pg .spiral-deco::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 3px solid #F9C000;
border-radius: 50% 50% 0 50%;
transform: rotate(45deg)
}

.abt-pg .spiral-deco::after {
content: '';
position: absolute;
top: 24px;
left: 24px;
width: calc(100% - 48px);
height: calc(100% - 48px);
border: 2px solid #09CAC8;
border-radius: 50% 0 50% 50%;
transform: rotate(-25deg)
}

@media (max-width: 1024px) {
.abt-pg .ttl-layout {
flex-direction: column;
gap: 48px
}

.abt-pg .ttl-main {
flex: 1 1 100%
}

.abt-pg .ttl-side {
flex: 1 1 100%;
position: static;
max-width: 480px
}

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

.abt-pg .tm-grid {
grid-template-columns: repeat(2, 1fr);
gap: 48px
}
}

@media (max-width: 768px) {
.abt-pg .ttl-zone {
padding: 48px 24px 96px
}

.abt-pg .ttl-main h1 {
font-size: 25px;
margin: 0 0 24px
}

.abt-pg .story-wrap {
padding: 48px 24px
}

.abt-pg .story-col h2 {
font-size: 19px
}

.abt-pg .tm-grid {
grid-template-columns: 1fr;
gap: 48px
}

.abt-pg .div-band {
height: 48px
}
}

@media (max-width: 360px) {
.abt-pg .ttl-zone {
padding: 24px 12px 48px
}

.abt-pg .story-wrap {
padding: 24px 12px
}

.abt-pg .story-inner {
gap: 24px
}

.abt-pg .tm-grid {
gap: 24px
}
}

.abt-pg .metric-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px
}

.abt-pg .metric-box {
background: #09cac80d;
border: 1px solid #09cac82e;
border-radius: 12px;
padding: 24px;
text-align: center;
position: relative;
overflow: hidden;
transition: background-color .25s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .metric-box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #09cac814 0%, transparent 70%);
opacity: 0;
transition: opacity .28s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.abt-pg .metric-box:hover::before {
opacity: 1
}

.abt-pg .metric-box:hover {
background-color: #09cac814;
border-color: #09CAC8
}

.abt-pg .metric-num {
font-size: 62px;
line-height: 1.1;
font-weight: 700;
color: #F9C000;
margin: 0 0 6px;
display: block
}

.abt-pg .metric-lbl {
font-size: 13px;
line-height: 1.4;
color: #e8e6e4b8;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0
}

@media (max-width: 768px) {
.abt-pg .metric-row {
grid-template-columns: 1fr;
gap: 24px
}
}

.abt-pg .lnk-inline {
color: #09CAC8;
text-decoration: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .lnk-inline::before {
content: '';
width: 12px;
height: 12px;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .lnk-inline::after {
content: '';
position: absolute;
bottom: -2px;
left: 18px;
right: 0;
height: 2px;
background: currentColor;
transform: scaleX(1);
transform-origin: left;
transition: height .22s cubic-bezier(0.4, 0, 0.2, 1), background-color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .lnk-inline:hover {
color: #F9C000
}

.abt-pg .lnk-inline:hover::after {
height: 3px;
background-color: #F9C000
}

.abt-pg .lnk-inline:hover::before {
transform: translateX(4px)
}

.abt-pg .anim-col-1 {
animation: col-reveal-1 .6s cubic-bezier(0.0, 0, 0.2, 1) forwards;
opacity: 0
}

.abt-pg .anim-col-2 {
animation: col-reveal-2 .6s cubic-bezier(0.0, 0, 0.2, 1) .2s forwards;
opacity: 0
}

@keyframes col-reveal-1 {
from {
opacity: 0;
transform: translateY(24px)
}

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

@keyframes col-reveal-2 {
from {
opacity: 0;
transform: translateY(24px)
}

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

.frnt {
background: #1a1612;
color: #e8e6e3;
max-width: 1600px;
margin: 0 auto
}

.frnt .ldg-bnr {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 640px;
position: relative;
overflow: hidden
}

.frnt .ldg-bnr__txt {
padding: 96px 48px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
position: relative;
z-index: 2
}

.frnt .ldg-bnr__deco {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: #FF3D66;
opacity: .04;
top: -80px;
left: -60px;
pointer-events: none
}

.frnt .ldg-bnr__h {
font-size: 62px;
line-height: 1.1;
letter-spacing: -.02em;
margin: 0
}

.frnt .ldg-bnr__h .accent-phrase {
background: linear-gradient(127deg, #FF3D66 0%, #09CAC8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.frnt .ldg-bnr__desc {
font-size: 19px;
line-height: 1.6;
color: #b8b5b1;
margin: 0
}

.frnt .ldg-bnr__vis {
position: relative;
overflow: hidden
}

.frnt .ldg-bnr__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.frnt .ldg-bnr__ovr {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(0deg, #1a1612eb 0%, #1a161200 100%);
pointer-events: none
}

.frnt .rltbl {
padding: 96px 48px;
background: #211d19;
position: relative
}

.frnt .rltbl::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-image: radial-gradient(circle, #ff3d6608 1px, transparent 1px), radial-gradient(circle, #09cac805 1px, transparent 1px);
background-size: 48px 48px, 72px 72px;
background-position: 0 0, 24px 24px;
pointer-events: none
}

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

.frnt .rltbl__hdr {
margin-bottom: 48px
}

.frnt .rltbl__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 12px;
padding-left: 24px;
border-left: 4px solid #FF3D66
}

.frnt .rltbl__sub {
font-size: 16px;
line-height: 1.6;
color: #a39f9a;
margin: 0;
max-width: 720px
}

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

.frnt .rltbl__crd {
background: #ffffff05;
padding: 24px;
border-radius: 12px;
border: 1px solid #ffffff0f;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.frnt .rltbl__crd:hover {
transform: translateY(-4px);
border-color: #ff3d664d;
box-shadow: 0 8px 52px 0 #ff3d661c
}

.frnt .rltbl__crd-ttl {
font-size: 19px;
line-height: 1.4;
margin: 0 0 12px;
color: #e8e6e3
}

.frnt .rltbl__crd-txt {
font-size: 16px;
line-height: 1.6;
color: #a39f9a;
margin: 0
}

.frnt .tchr {
padding: 96px 48px;
background: linear-gradient(217deg, #1a1612ff 0%, #211d19ff 100%)
}

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

.frnt .tchr__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center
}

.frnt .tchr__flx {
display: flex;
gap: 48px;
align-items: center
}

.frnt .tchr__img-wrap {
flex-shrink: 0;
width: 420px;
height: 520px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 18px 0 #09cac817
}

.frnt .tchr__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.frnt .tchr__cnt {
flex: 1
}

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

.frnt .tchr__prof-itm {
padding-left: 24px;
border-left: 3px solid #09cac84d;
transition: border-color .19s cubic-bezier(0.4, 0, 0.2, 1)
}

.frnt .tchr__prof-itm:hover {
border-left-color: #09CAC8
}

.frnt .tchr__prof-lbl {
font-size: 13px;
line-height: 1.4;
color: #09CAC8;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 6px
}

.frnt .tchr__prof-val {
font-size: 19px;
line-height: 1.4;
color: #e8e6e3;
margin: 0
}

.frnt .wvr {
position: relative;
height: 96px;
overflow: hidden
}

.frnt .wvr svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
fill: #2a2520
}

.frnt .prf {
padding: 96px 48px;
background: #2a2520
}

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

.frnt .prf__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 12px;
padding-left: 24px;
border-left: 4px solid #F9C000
}

.frnt .prf__lead {
font-size: 16px;
line-height: 1.6;
color: #b8b5b1;
margin: 0 0 48px;
max-width: 820px
}

.frnt .prf__grd {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px
}

.frnt .prf__blk {
display: flex;
gap: 24px
}

.frnt .prf__ico {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 12px;
background: #f9c00014;
display: flex;
align-items: center;
justify-content: center;
transition: background .21s cubic-bezier(0.4, 0, 0.2, 1), transform .21s cubic-bezier(0.4, 0, 0.2, 1)
}

.frnt .prf__blk:hover .prf__ico {
background: #f9c00024;
transform: scale(1.06)
}

.frnt .prf__ico-shp {
width: 32px;
height: 32px;
background: #F9C000;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
}

.frnt .prf__txt {
flex: 1
}

.frnt .prf__txt-h {
font-size: 19px;
line-height: 1.4;
margin: 0 0 12px;
color: #e8e6e3
}

.frnt .prf__txt-p {
font-size: 16px;
line-height: 1.6;
color: #a39f9a;
margin: 0
}

.frnt .tstm {
padding: 96px 48px;
background: linear-gradient(143deg, #1a1612ff 0%, #1e1a16ff 100%)
}

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

.frnt .tstm__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center
}

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

.frnt .tstm__card {
background: #ffffff08;
padding: 24px;
border-radius: 20px;
border: 1px solid #ffffff0d;
display: flex;
flex-direction: column;
gap: 24px;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.frnt .tstm__card:hover {
border-color: #ff3d6633;
box-shadow: 0 4px 18px 0 #ff3d6617
}

.frnt .tstm__card-top {
display: flex;
align-items: center;
gap: 24px
}

.frnt .tstm__card-img-wrap {
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px 0 #09cac80f
}

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

.frnt .tstm__card-meta {
flex: 1
}

.frnt .tstm__card-nm {
font-size: 19px;
line-height: 1.4;
margin: 0 0 6px;
color: #e8e6e3
}

.frnt .tstm__card-role {
font-size: 13px;
line-height: 1.4;
color: #09CAC8;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0
}

.frnt .tstm__card-txt {
font-size: 16px;
line-height: 1.6;
color: #b8b5b1;
margin: 0
}

.frnt .jrny {
padding: 96px 48px;
background: #1a1612
}

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

.frnt .jrny__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 12px;
padding-left: 24px;
border-left: 4px solid #09CAC8
}

.frnt .jrny__intro {
font-size: 16px;
line-height: 1.6;
color: #a39f9a;
margin: 0 0 48px;
max-width: 820px
}

.frnt .jrny__tln {
display: flex;
flex-direction: column;
gap: 48px
}

.frnt .jrny__phs {
display: grid;
grid-template-columns: 180px 1fr;
gap: 24px;
align-items: start
}

.frnt .jrny__phs-num {
font-size: 62px;
line-height: 1.1;
font-weight: 700;
background: linear-gradient(157deg, #ff3d6666 0%, #09cac866 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: right;
padding-right: 24px;
border-right: 2px solid #09cac833
}

.frnt .jrny__phs-cnt {
padding-top: 6px
}

.frnt .jrny__phs-ttl {
font-size: 19px;
line-height: 1.4;
margin: 0 0 12px;
color: #e8e6e3
}

.frnt .jrny__phs-desc {
font-size: 16px;
line-height: 1.6;
color: #b8b5b1;
margin: 0
}

.frnt .cmpl {
padding: 96px 48px;
background: linear-gradient(231deg, #1a1612ff 0%, #211d19ff 100%)
}

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

.frnt .cmpl__h {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center
}

.frnt .cmpl__flx {
display: flex;
gap: 48px;
align-items: center
}

.frnt .cmpl__vis {
flex-shrink: 0;
width: 480px;
height: 580px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 52px 0 #ff3d661c
}

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

.frnt .cmpl__cnt {
flex: 1
}

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

.frnt .cmpl__itm {
display: flex;
gap: 24px;
align-items: start
}

.frnt .cmpl__itm-blt {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 50%;
background: linear-gradient(135deg, #FF3D66 0%, #09CAC8 100%);
box-shadow: 0 2px 8px 0 #ff3d664d
}

.frnt .cmpl__itm-txt {
flex: 1
}

.frnt .cmpl__itm-h {
font-size: 19px;
line-height: 1.4;
margin: 0 0 6px;
color: #e8e6e3
}

.frnt .cmpl__itm-p {
font-size: 16px;
line-height: 1.6;
color: #a39f9a;
margin: 0
}

@media (max-width: 1024px) {
.frnt .ldg-bnr {
grid-template-columns: 1fr;
min-height: auto
}

.frnt .ldg-bnr__txt {
padding: 48px 24px
}

.frnt .ldg-bnr__h {
font-size: 42px
}

.frnt .ldg-bnr__vis {
min-height: 420px
}

.frnt .rltbl {
padding: 48px 24px
}

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

.frnt .tchr {
padding: 48px 24px
}

.frnt .tchr__flx {
flex-direction: column;
gap: 24px
}

.frnt .tchr__img-wrap {
width: 100%;
height: 420px
}

.frnt .prf {
padding: 48px 24px
}

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

.frnt .tstm {
padding: 48px 24px
}

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

.frnt .jrny {
padding: 48px 24px
}

.frnt .jrny__phs {
grid-template-columns: 120px 1fr;
gap: 24px
}

.frnt .jrny__phs-num {
font-size: 42px
}

.frnt .cmpl {
padding: 48px 24px
}

.frnt .cmpl__flx {
flex-direction: column;
gap: 24px
}

.frnt .cmpl__vis {
width: 100%;
height: 420px
}
}

@media (max-width: 768px) {
.frnt .ldg-bnr__h {
font-size: 32px
}

.frnt .ldg-bnr__desc,
.frnt .rltbl__sub,
.frnt .prf__lead,
.frnt .jrny__intro,
.frnt .tstm__card-txt,
.frnt .jrny__phs-desc,
.frnt .cmpl__itm-p,
.frnt .tchr__prof-val,
.frnt .prf__txt-p,
.frnt .rltbl__crd-txt {
font-size: 16px
}

.frnt .rltbl__h,
.frnt .tchr__h,
.frnt .prf__h,
.frnt .tstm__h,
.frnt .jrny__h,
.frnt .cmpl__h {
font-size: 22px
}

.frnt .jrny__phs {
grid-template-columns: 1fr;
gap: 12px
}

.frnt .jrny__phs-num {
text-align: left;
padding-right: 0;
padding-bottom: 12px;
border-right: none;
border-bottom: 2px solid #09cac833
}
}

@media (max-width: 360px) {

.frnt .ldg-bnr__txt,
.frnt .rltbl,
.frnt .tchr,
.frnt .prf,
.frnt .tstm,
.frnt .jrny,
.frnt .cmpl {
padding-left: 12px;
padding-right: 12px
}

.frnt .ldg-bnr__h {
font-size: 28px
}
}

.spnsr {
background: #1a1612;
color: #e8e6e3;
max-width: 1600px;
margin: 0 auto
}

.spnsr .ttl-frm {
display: flex;
align-items: center;
gap: 48px;
padding: 48px 24px;
position: relative;
overflow: visible
}

@media (max-width: 768px) {
.spnsr .ttl-frm {
flex-direction: column;
gap: 24px;
padding: 24px
}
}

.spnsr .img-dcr {
position: relative;
width: 30%;
min-width: 280px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 52px 0 #ff3d661c
}

@media (max-width: 768px) {
.spnsr .img-dcr {
width: 100%
}
}

.spnsr .img-dcr::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(to bottom, #1a1612b3, transparent);
z-index: 1;
pointer-events: none
}

.spnsr .img-dcr::after {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 48px;
height: 48px;
background: #ff3d6626;
border-radius: 12px;
z-index: 2;
pointer-events: none
}

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

@media (max-width: 768px) {
.spnsr .img-dcr img {
height: 280px
}
}

.spnsr .ttl-txt {
flex: 1
}

.spnsr .eyebrow {
font-size: 13px;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
color: #09CAC8;
margin: 0 0 12px
}

.spnsr .ttl-txt h1 {
font-size: 62px;
line-height: 1.1;
margin: 0;
color: #e8e6e3
}

@media (max-width: 1024px) {
.spnsr .ttl-txt h1 {
font-size: 42px
}
}

@media (max-width: 768px) {
.spnsr .ttl-txt h1 {
font-size: 32px
}
}

.spnsr .split-30-70 {
display: grid;
grid-template-columns: 30% 1fr;
gap: 48px;
padding: 96px 24px;
background: linear-gradient(127deg, #ff3d660a 0%, #09cac808 100%), linear-gradient(243deg, #f9c00005 0%, transparent 100%);
position: relative
}

@media (max-width: 1024px) {
.spnsr .split-30-70 {
grid-template-columns: 1fr;
gap: 24px;
padding: 48px 24px
}
}

.spnsr .split-30-70__left {
display: flex;
flex-direction: column;
gap: 24px
}

.spnsr .split-30-70 h2 {
font-size: 25px;
line-height: 1.4;
margin: 0;
color: #e8e6e3;
padding-left: 24px;
border-left: 4px solid #FF3D66
}

.spnsr .split-30-70__right {
display: flex;
flex-direction: column;
gap: 24px
}

.spnsr .split-30-70 p {
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #c4c2be
}

.spnsr .split-30-70 p strong {
color: #09CAC8;
font-weight: 600
}

.spnsr .tier-grid {
padding: 96px 24px;
background: #221d18;
position: relative
}

@media (max-width: 768px) {
.spnsr .tier-grid {
padding: 48px 24px
}
}

.spnsr .tier-grid h2 {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center;
color: #e8e6e3
}

.spnsr .tier-grid__wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1400px;
margin: 0 auto
}

@media (max-width: 1024px) {
.spnsr .tier-grid__wrap {
grid-template-columns: 1fr
}
}

.spnsr .tier-crd {
background: #1a1612;
border: 1px solid #3a3530;
border-radius: 20px;
padding: 48px 24px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow: hidden;
transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.spnsr .tier-crd::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, transparent 0%, transparent 100%);
opacity: 0;
border-radius: 20px;
transition: opacity .25s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none;
z-index: 0
}

.spnsr .tier-crd:hover::before {
opacity: 1
}

.spnsr .tier-crd:hover {
border-color: #FF3D66;
transform: translateY(-6px)
}

.spnsr .tier-crd__inner {
position: relative;
z-index: 1
}

.spnsr .tier-crd h3 {
font-size: 25px;
line-height: 1.1;
margin: 0 0 12px;
color: #e8e6e3
}

.spnsr .tier-crd__price {
font-size: 19px;
line-height: 1.4;
color: #09CAC8;
margin: 0 0 24px
}

.spnsr .tier-crd ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px
}

.spnsr .tier-crd li {
font-size: 16px;
line-height: 1.6;
color: #c4c2be;
padding-left: 32px;
position: relative
}

.spnsr .tier-crd li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #F9C000
}

.spnsr .tier-crd.featured {
border-color: #FF3D66;
background: linear-gradient(167deg, #ff3d6614 0%, #1a1612ff 100%)
}

.spnsr .tier-crd.featured::after {
content: 'Most Popular';
position: absolute;
top: 24px;
right: 24px;
font-size: 13px;
line-height: 1.4;
letter-spacing: .06em;
text-transform: uppercase;
color: #FF3D66;
background: #ff3d661f;
padding: 6px 12px;
border-radius: 12px;
z-index: 2
}

.spnsr .metrics-showcase {
padding: 96px 24px;
background: #1a1612;
position: relative
}

@media (max-width: 768px) {
.spnsr .metrics-showcase {
padding: 48px 24px
}
}

.spnsr .metrics-showcase::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, #09CAC8, transparent)
}

.spnsr .metrics-showcase::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #09CAC8;
border-radius: 50%;
box-shadow: 0 0 24px #09cac866
}

.spnsr .metrics-showcase h2 {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center;
color: #e8e6e3
}

.spnsr .metrics-showcase__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
max-width: 1400px;
margin: 0 auto
}

@media (max-width: 1024px) {
.spnsr .metrics-showcase__grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
}

@media (max-width: 768px) {
.spnsr .metrics-showcase__grid {
grid-template-columns: 1fr
}
}

.spnsr .metric-item {
text-align: center;
opacity: 0;
animation: cascadeReveal .6s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.spnsr .metric-item:nth-child(1) {
animation-delay: .1s
}

.spnsr .metric-item:nth-child(2) {
animation-delay: .2s
}

.spnsr .metric-item:nth-child(3) {
animation-delay: .3s
}

.spnsr .metric-item:nth-child(4) {
animation-delay: .4s
}

@keyframes cascadeReveal {
from {
opacity: 0;
transform: translateY(24px)
}

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

.spnsr .metric-item__num {
font-size: 62px;
line-height: 1.1;
font-weight: 700;
margin: 0 0 12px;
background: linear-gradient(135deg, #FF3D66 0%, #09CAC8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

@media (max-width: 768px) {
.spnsr .metric-item__num {
font-size: 42px
}
}

.spnsr .metric-item__lbl {
font-size: 16px;
line-height: 1.6;
color: #c4c2be;
margin: 0
}

.spnsr .compare-block {
padding: 96px 24px;
background: #221d18;
position: relative
}

@media (max-width: 768px) {
.spnsr .compare-block {
padding: 48px 24px
}
}

.spnsr .compare-block h2 {
font-size: 25px;
line-height: 1.4;
margin: 0 0 48px;
text-align: center;
color: #e8e6e3
}

.spnsr .compare-block__wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
max-width: 1200px;
margin: 0 auto
}

@media (max-width: 1024px) {
.spnsr .compare-block__wrap {
grid-template-columns: 1fr;
gap: 24px
}
}

.spnsr .compare-side {
background: #1a1612;
border-radius: 20px;
padding: 48px;
border: 2px solid #3a3530;
position: relative;
overflow: hidden;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

@media (max-width: 768px) {
.spnsr .compare-side {
padding: 24px
}
}

.spnsr .compare-side::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, transparent 0%, transparent 100%);
opacity: 0;
transition: opacity .27s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.spnsr .compare-side:hover::before {
opacity: 1
}

.spnsr .compare-side:hover {
border-color: #09CAC8
}

.spnsr .compare-side::after {
content: '';
position: absolute;
top: -100%;
right: -20px;
width: 200px;
height: 200%;
background: linear-gradient(90deg, transparent, #ff3d6614, transparent);
transform: skewX(-15deg);
opacity: 0;
transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), top .2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none
}

.spnsr .compare-side:hover::after {
opacity: 1;
top: 100%
}

.spnsr .compare-side h3 {
font-size: 25px;
line-height: 1.1;
margin: 0 0 24px;
color: #e8e6e3
}

.spnsr .compare-side p {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px;
color: #c4c2be
}

.spnsr .compare-side ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px
}

.spnsr .compare-side li {
font-size: 16px;
line-height: 1.6;
color: #c4c2be;
padding-left: 32px;
position: relative
}

.spnsr .compare-side li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #F9C000
}

.spnsr .compare-side.before h3 {
color: #c4c2be
}

.spnsr .compare-side.after {
border-color: #FF3D66
}

.spnsr .compare-side.after h3 {
color: #FF3D66
}

.spnsr .btn-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
border: 2px solid #3a3530;
border-radius: 12px;
background: transparent;
color: #e8e6e3;
font-size: 16px;
line-height: 1.4;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color .21s cubic-bezier(0.4, 0, 0.2, 1), color .21s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none
}

.spnsr .btn-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff3d6626;
transform: translate(-50%, -50%);
transition: width .24s cubic-bezier(0.0, 0, 0.2, 1), height .24s cubic-bezier(0.0, 0, 0.2, 1)
}

.spnsr .btn-cta:hover::before {
width: 300px;
height: 300px
}

.spnsr .btn-cta:hover {
border-color: #FF3D66;
color: #FF3D66
}

.spnsr .btn-cta span {
position: relative;
z-index: 1
}

.spnsr .btn-cta svg {
position: relative;
z-index: 1;
width: 20px;
height: 20px;
fill: currentColor
}

.spnsr .inline-highlight {
color: #09CAC8;
background: #09cac81f;
padding: 0 6px;
border-radius: 0
}

.spnsr ::selection {
background: #ff3d661a;
color: #e8e6e3
}

.spnsr ::-moz-selection {
background: #ff3d661a;
color: #e8e6e3
}

.success-confirm {
background: linear-gradient(158deg, #ff3d660a 0%, #09cac808 100%), linear-gradient(212deg, #f9c00005 0%, transparent 100%);
background-color: #1a1614;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px
}

.success-confirm .confirm-wrapper {
max-width: 680px;
width: 100%
}

.success-confirm .status-icon {
width: 96px;
height: 96px;
margin: 0 auto 48px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}

.success-confirm .status-icon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #09CAC8 0%, #FF3D66 100%);
border-radius: 50%;
opacity: .12;
animation: pulse-ring 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes pulse-ring {

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

50% {
transform: scale(1.18);
opacity: .04
}
}

.success-confirm .status-icon svg {
width: 52px;
height: 52px;
position: relative;
z-index: 2
}

.success-confirm .status-icon path {
stroke: #09CAC8;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 80;
stroke-dashoffset: 80;
animation: draw-check .8s cubic-bezier(0.4, 0, 0.2, 1) .2s forwards
}

@keyframes draw-check {
to {
stroke-dashoffset: 0
}
}

.success-confirm .confirm-content {
text-align: center
}

.success-confirm .confirm-heading {
font-size: 62px;
line-height: 1.1;
color: #f4f2f0;
margin: 0 0 24px;
letter-spacing: -.02em
}

.success-confirm .confirm-message {
font-size: 19px;
line-height: 1.6;
color: #b8b3ae;
margin: 0 0 48px;
max-width: 520px;
margin-left: auto;
margin-right: auto
}

.success-confirm .confirm-detail {
background: #ffffff05;
border: 1px solid #ffffff0f;
border-radius: 12px;
padding: 24px;
margin: 0 0 48px;
box-shadow: 0 4px 18px 0 #09cac817
}

.success-confirm .confirm-detail p {
font-size: 16px;
line-height: 1.6;
color: #d4cfca;
margin: 0
}

.success-confirm .confirm-detail p:first-child {
margin-bottom: 12px
}

.success-confirm .confirm-detail strong {
color: #09CAC8;
font-weight: 600
}

.success-confirm .action-group {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap
}

.success-confirm .btn-primary {
font-size: 16px;
padding: 16px 48px;
background: transparent;
color: #f4f2f0;
border: 2px solid #ff3d664d;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), background .22s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.success-confirm .btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff3d6626;
transform: translate(-50%, -50%);
transition: width .5s cubic-bezier(0.4, 0, 0.2, 1), height .5s cubic-bezier(0.4, 0, 0.2, 1)
}

.success-confirm .btn-primary:hover {
border-color: #FF3D66;
background: #ff3d6614;
transform: translateY(-2px)
}

.success-confirm .btn-primary:hover::before {
width: 300px;
height: 300px
}

.success-confirm .btn-primary svg {
width: 20px;
height: 20px
}

.success-confirm .btn-primary path {
fill: currentColor
}

.success-confirm .btn-secondary {
font-size: 16px;
padding: 16px 48px;
background: transparent;
color: #b8b3ae;
border: 2px solid #ffffff1a;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: border-color .19s cubic-bezier(0.4, 0, 0.2, 1), color .19s cubic-bezier(0.4, 0, 0.2, 1)
}

.success-confirm .btn-secondary:hover {
border-color: #09cac866;
color: #09CAC8
}

.success-confirm .btn-secondary svg {
width: 20px;
height: 20px
}

.success-confirm .btn-secondary path {
fill: currentColor
}

.success-confirm .support-note {
margin-top: 48px;
padding-top: 48px;
border-top: 1px solid #ffffff0f
}

.success-confirm .support-note p {
font-size: 13px;
line-height: 1.6;
color: #8a8581;
margin: 0;
letter-spacing: .02em
}

.success-confirm .support-note a {
color: #F9C000;
text-decoration: none;
transition: color .17s cubic-bezier(0.4, 0, 0.2, 1)
}

.success-confirm .support-note a:hover {
color: #ffd54f
}

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

.success-confirm .status-icon {
width: 72px;
height: 72px;
margin-bottom: 24px
}

.success-confirm .status-icon svg {
width: 38px;
height: 38px
}

.success-confirm .confirm-heading {
font-size: 25px;
margin-bottom: 12px
}

.success-confirm .confirm-message {
font-size: 16px;
margin-bottom: 24px
}

.success-confirm .confirm-detail {
padding: 12px;
margin-bottom: 24px
}

.success-confirm .action-group {
flex-direction: column
}

.success-confirm .btn-primary,
.success-confirm .btn-secondary {
width: 100%;
justify-content: center;
padding: 16px 24px
}

.success-confirm .support-note {
margin-top: 24px;
padding-top: 24px
}
}