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

body {
margin: 0;
padding: 0;
position: relative;
min-height: 100vh;
background-color: #0d1420;
background-image: radial-gradient(circle at 20% 80%, #4698f70a 0%, transparent 50%), radial-gradient(circle at 80% 20%, #4698f708 0%, transparent 50%);
font-family: 'Spectral', serif;
color: #e8eaed;
font-size: 18px;
line-height: 1.7
}

.topbar {
background: linear-gradient(135deg, #122032 0%, #1a2d47 100%);
padding: 40px 20px;
position: relative;
overflow: hidden
}

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

.topbar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #4698f726
}

.topbarInner {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px
}

.brandZone {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px
}

.brandMark {
background-color: #0d1420;
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 5px 20px -1px #1220321a 0 10px 48px -1px #1220321f;
border: 1px solid #4698f733
}

.brandMark img {
display: block;
width: 42px;
height: 42px;
object-fit: contain
}

.brandStatement {
font-size: 16px;
line-height: 1.4;
color: #b8c5d6;
text-align: center;
max-width: 480px;
letter-spacing: .01em
}

.statusBadge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #4698f714;
padding: 10px 20px;
border-radius: 28px;
border: 1px solid #4698f740;
font-size: 16px;
line-height: 1.4;
color: #4698F7;
font-weight: 700
}

.statusIndicator {
width: 8px;
height: 8px;
background-color: #4698F7;
border-radius: 50%;
box-shadow: 0 0 10px #4698f799
}

.primaryNav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 20px
}

.navLink {
display: inline-block;
padding: 10px 20px;
font-size: 18px;
line-height: 1.4;
color: #e8eaed;
text-decoration: none;
border-radius: 6px;
background: #ffffff05;
border: 1px solid #ffffff0f;
transition: background-color .14s cubic-bezier(0.4, 0, 1, 1), border-color .14s cubic-bezier(0.4, 0, 1, 1), color .14s cubic-bezier(0.4, 0, 1, 1), box-shadow .16s cubic-bezier(0.4, 0, 1, 1);
font-weight: 400
}

.navLink:hover {
background: #4698f71f;
border-color: #4698f766;
color: #FFF;
box-shadow: 0 5px 20px -1px #4698f71a 0 10px 48px -1px #4698f71f
}

.navLink:focus {
outline: none;
background: #4698f726;
border-color: #4698F7;
color: #FFF;
box-shadow: 0 5px 20px -1px #4698f71a 0 10px 48px -1px #4698f71f;
position: relative
}

.navLink:focus::before {
content: 'Pasirinkta';
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.1;
color: #4698F7;
background: #0d1420;
padding: 4px 8px;
border-radius: 3px;
white-space: nowrap;
font-weight: 700
}

.navLinkActive {
background: linear-gradient(135deg, #4698F7 0%, #3578d4 100%);
border-color: #4698F7;
color: #FFF;
font-weight: 700;
box-shadow: 0 5px 20px -1px #4698f71a 0 10px 48px -1px #4698f71f
}

.navLinkActive:hover {
background: linear-gradient(135deg, #5aa8ff 0%, #4698F7 100%);
box-shadow: 0 10px 48px -1px #4698f71f 0 5px 20px -1px #4698f71a
}

@media (max-width: 576px) {
.topbar {
padding: 20px 10px
}

.topbarInner {
gap: 20px
}

.brandStatement {
font-size: 16px;
padding: 0 10px
}

.statusBadge {
font-size: 16px;
padding: 10px 20px
}

.primaryNav {
gap: 10px;
width: 100%;
padding: 0 10px
}

.navLink {
font-size: 16px;
padding: 10px 20px;
flex: 1 1 auto;
text-align: center;
min-width: 140px
}
}

@media (min-width: 577px) and (max-width: 992px) {
.topbar {
padding: 40px 20px
}

.primaryNav {
gap: 10px 20px
}

.navLink {
font-size: 18px
}
}

.baseFooter {
background: linear-gradient(135deg, #0a0f1a 0%, #122032 100%);
padding: 80px 20px 40px;
position: relative;
margin-top: 80px
}

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

.footerInner {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px
}

.footerCard {
background: #12203266;
border: 1px solid #4698f726;
border-radius: 18px;
padding: 40px;
box-shadow: 0 5px 20px -1px #1220321a 0 10px 48px -1px #1220321f;
display: flex;
flex-direction: column;
gap: 40px
}

.footerRow {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: space-between;
align-items: flex-start
}

.footerBrand {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1 1 280px
}

.footerLogoWrap {
background-color: #0d1420;
padding: 10px 20px;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 20px;
border: 1px solid #4698f733;
box-shadow: 0 1px 2px -1px #1220320f;
width: fit-content
}

.footerLogoWrap img {
display: block;
width: 38px;
height: 38px;
object-fit: contain
}

.foundingYear {
font-size: 16px;
line-height: 1.4;
color: #b8c5d6;
font-weight: 400
}

.footerContact {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1 1 280px
}

.contactLabel {
font-size: 18px;
line-height: 1.4;
color: #4698F7;
font-weight: 700;
margin-bottom: 10px
}

.contactItem {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
line-height: 1.4;
color: #e8eaed
}

.contactIcon {
width: 20px;
height: 20px;
flex-shrink: 0
}

.contactIcon svg {
width: 100%;
height: 100%;
fill: #4698F7
}

.contactLink {
color: #e8eaed;
text-decoration: none;
transition: color .12s cubic-bezier(0.4, 0, 1, 1)
}

.contactLink:hover {
color: #4698F7
}

.contactLink:focus {
outline: none;
color: #4698F7;
position: relative
}

.contactLink:focus::before {
content: 'Aktyvus';
position: absolute;
top: -22px;
left: 0;
font-size: 12px;
line-height: 1.1;
color: #4698F7;
background: #0d1420;
padding: 4px 8px;
border-radius: 3px;
white-space: nowrap;
font-weight: 700
}

.footerNav {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
justify-content: center
}

.footerNavLink {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
line-height: 1.4;
color: #b8c5d6;
text-decoration: none;
border-radius: 6px;
background: #ffffff05;
border: 1px solid #ffffff0d;
transition: background-color .14s cubic-bezier(0.4, 0, 1, 1), border-color .14s cubic-bezier(0.4, 0, 1, 1), color .14s cubic-bezier(0.4, 0, 1, 1), box-shadow .16s cubic-bezier(0.4, 0, 1, 1)
}

.footerNavLink:hover {
background: #4698f714;
border-color: #4698f74d;
color: #FFF;
box-shadow: 0 5px 20px -1px #4698f71a
}

.footerNavLink:focus {
outline: none;
background: #4698f71f;
border-color: #4698F7;
color: #FFF;
position: relative
}

.footerNavLink:focus::before {
content: 'Pasirinkta';
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.1;
color: #4698F7;
background: #0d1420;
padding: 4px 8px;
border-radius: 3px;
white-space: nowrap;
font-weight: 700
}

.footerBottom {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
align-items: center;
padding-top: 40px;
border-top: 1px solid #4698f71a
}

.copyright {
font-size: 16px;
line-height: 1.4;
color: #7a8a9e
}

.addressText {
font-size: 16px;
line-height: 1.4;
color: #7a8a9e;
font-style: normal
}

@media (max-width: 576px) {
.baseFooter {
padding: 40px 10px 20px;
margin-top: 40px
}

.footerInner {
gap: 40px
}

.footerCard {
padding: 20px;
gap: 40px
}

.footerRow {
flex-direction: column;
gap: 40px
}

.footerBrand,
.footerContact {
flex: 1 1 100%
}

.footerNav {
gap: 10px
}

.footerNavLink {
font-size: 16px;
padding: 10px 20px;
flex: 1 1 100%;
text-align: center
}

.footerBottom {
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding-top: 20px
}
}

@media (min-width: 577px) and (max-width: 992px) {
.baseFooter {
padding: 80px 20px 40px
}

.footerCard {
padding: 40px
}

.footerRow {
gap: 40px
}
}

.consentBar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #122032 0%, #1a2d47 100%);
padding: 20px;
z-index: 1200;
border-bottom: 2px solid #4698F7;
box-shadow: 0 10px 48px -1px #1220321f 0 5px 20px -1px #1220321a
}

.consentContent {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: space-between
}

.consentText {
flex: 1 1 400px;
font-size: 16px;
line-height: 1.4;
color: #e8eaed
}

.consentText strong {
color: #4698F7;
font-weight: 700
}

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

.acceptBtn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: linear-gradient(135deg, #4698F7 0%, #3578d4 100%);
color: #FFF;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
font-family: 'Spectral', serif;
border: none;
border-radius: 6px;
cursor: pointer;
transition: box-shadow .16s cubic-bezier(0.4, 0, 1, 1), transform .12s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 5px 20px -1px #4698f71a
}

.acceptBtn:hover {
box-shadow: 0 10px 48px -1px #4698f71f 0 5px 20px -1px #4698f71a;
transform: translateY(-1px)
}

.acceptBtn:focus {
outline: none;
box-shadow: 0 10px 48px -1px #4698f71f 0 5px 20px -1px #4698f71a 0 0 0 3px #4698f74d;
position: relative
}

.acceptBtn:focus::before {
content: 'Mygtukas aktyvus';
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.1;
color: #4698F7;
background: #0d1420;
padding: 4px 8px;
border-radius: 3px;
white-space: nowrap;
font-weight: 700
}

.declineLink {
color: #b8c5d6;
text-decoration: underline;
font-size: 16px;
line-height: 1.4;
cursor: pointer;
transition: color .12s cubic-bezier(0.4, 0, 1, 1);
background: none;
border: none;
font-family: 'Spectral', serif;
padding: 0
}

.declineLink:hover {
color: #4698F7
}

.declineLink:focus {
outline: none;
color: #4698F7;
position: relative
}

.declineLink:focus::before {
content: 'Nuoroda aktyvi';
position: absolute;
top: -22px;
left: 0;
font-size: 12px;
line-height: 1.1;
color: #4698F7;
background: #0d1420;
padding: 4px 8px;
border-radius: 3px;
white-space: nowrap;
font-weight: 700
}

@media (max-width: 576px) {
.consentBar {
padding: 20px 10px
}

.consentContent {
flex-direction: column;
gap: 20px;
align-items: stretch
}

.consentText {
flex: 1 1 100%;
text-align: center
}

.consentActions {
flex-direction: column;
gap: 10px;
width: 100%
}

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

.declineLink {
text-align: center
}
}

.policy-article {
max-width: 1440px;
margin: 0 auto;
padding: 80px 20px;
background: #0d1420;
color: #e8e8e8
}

.policy-article h1 {
font-size: 62px;
line-height: 1.1;
margin: 0 0 40px;
color: #fff
}

.policy-article h2 {
font-size: 44px;
line-height: 1.1;
margin: 80px 0 40px;
color: #fff
}

.policy-article h3 {
font-size: 32px;
line-height: 1.4;
margin: 40px 0 20px;
color: #fff
}

.policy-article h4 {
font-size: 24px;
line-height: 1.4;
margin: 40px 0 20px;
color: #fff
}

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

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

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

.policy-article ul,
.policy-article ol {
font-size: 18px;
line-height: 1.7;
margin: 0 0 20px;
padding: 0 0 0 40px;
color: #d4d4d4
}

.policy-article li {
margin: 0 0 10px
}

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

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

.policy-article a {
color: #4698F7;
text-decoration: none;
transition: color .14s cubic-bezier(0.4, 0, 1, 1)
}

.policy-article a:hover {
color: #6bb0ff
}

.policy-article table {
width: 100%;
border-collapse: collapse;
margin: 0 0 40px;
font-size: 16px;
background: #1a2332;
border-radius: 6px;
overflow: hidden
}

.policy-article thead {
background: #122032
}

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

.policy-article td {
padding: 20px;
color: #d4d4d4;
border-bottom: 1px solid #4698f71a
}

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

.policy-article tbody tr {
transition: background-color .12s cubic-bezier(0.4, 0, 1, 1)
}

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

.policy-article hr {
border: none;
height: 1px;
background: #4698f733;
margin: 40px 0
}

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

.policy-article h1 {
font-size: 44px;
margin-bottom: 40px
}

.policy-article h2 {
font-size: 32px;
margin-top: 40px;
margin-bottom: 20px
}

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

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

.policy-article table {
font-size: 16px
}

.policy-article th,
.policy-article td {
padding: 10px
}
}

@media (max-width: 576px) {
.policy-article {
padding: 40px 10px
}

.policy-article h1 {
font-size: 32px
}

.policy-article h2 {
font-size: 24px
}

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

.policy-article p,
.policy-article ul,
.policy-article ol {
font-size: 16px
}

.policy-article ul,
.policy-article ol {
padding-left: 20px
}

.policy-article table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
}

.entrypoint {
background: #0a0b0f;
color: #e8e9ed;
position: relative;
overflow-x: clip
}

.entrypoint::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 620px;
background: radial-gradient(ellipse at 50% 50%, #4698f714 0%, transparent 70%);
pointer-events: none;
z-index: 1
}

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

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

.entrypoint .limiter {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
position: relative;
z-index: 2
}

.entrypoint .openhero {
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: center;
position: relative
}

.entrypoint .openhero .imageslot {
position: relative;
aspect-ratio: 3/4;
border-radius: 10px;
overflow: hidden
}

.entrypoint .openhero .imageslot::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #122032b3 0%, transparent 60%);
z-index: 1;
pointer-events: none
}

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

.entrypoint .openhero .textzone {
padding-left: 40px
}

.entrypoint .openhero .eyebrow {
font-size: 16px;
color: #4698F7;
margin-bottom: 20px;
letter-spacing: .5px;
text-transform: uppercase;
font-weight: 600
}

.entrypoint .openhero .mainheading {
font-size: 62px;
line-height: 1.1;
color: #FFF;
font-weight: 700;
margin: 0
}

.entrypoint .methodblock {
padding-top: 80px;
padding-bottom: 80px;
position: relative
}

.entrypoint .methodblock::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 280px;
background: linear-gradient(180deg, #4698f70a 0%, transparent 100%);
pointer-events: none
}

.entrypoint .methodblock .stripepattern {
position: absolute;
top: 0;
right: 80px;
width: 180px;
height: 100%;
opacity: .03;
pointer-events: none;
background-image: repeating-linear-gradient(0deg, #4698F7, #4698F7 1px, transparent 1px, transparent 8px)
}

.entrypoint .methodblock .sectionlabel {
font-size: 44px;
line-height: 1.1;
color: #FFF;
font-weight: 700;
margin-bottom: 40px;
margin-top: 0
}

.entrypoint .methodblock .twocolgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px
}

.entrypoint .methodblock .leftcol {
display: flex;
flex-direction: column;
gap: 40px
}

.entrypoint .methodblock .textcard {
background: #12203266;
padding: 40px;
border-radius: 10px;
border: 1px solid #4698f71a;
position: relative;
overflow: hidden
}

.entrypoint .methodblock .textcard::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4698F7 0%, transparent 100%)
}

.entrypoint .methodblock .cardtitle {
font-size: 24px;
line-height: 1.4;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 20px
}

.entrypoint .methodblock .cardbody {
font-size: 16px;
line-height: 1.7;
color: #c4c6cd;
margin: 0
}

.entrypoint .methodblock .rightcol {
position: relative
}

.entrypoint .methodblock .visualframe {
position: sticky;
top: 80px;
aspect-ratio: 4/5;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 48px -1px #4698f71f
}

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

.entrypoint .valueblock {
padding-top: 80px;
padding-bottom: 80px;
background: #0d0f15;
position: relative
}

.entrypoint .valueblock .decorstrokes {
position: absolute;
top: 80px;
left: 40px;
width: 60px;
height: 120px;
pointer-events: none;
z-index: 1
}

.entrypoint .valueblock .decorstrokes::before,
.entrypoint .valueblock .decorstrokes::after {
content: '';
position: absolute;
width: 40px;
height: 3px;
background: #4698F7;
opacity: .3
}

.entrypoint .valueblock .decorstrokes::before {
top: 0;
left: 0;
transform: rotate(-25deg)
}

.entrypoint .valueblock .decorstrokes::after {
top: 20px;
left: 10px;
width: 50px;
transform: rotate(-25deg)
}

.entrypoint .valueblock .valuegrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start
}

.entrypoint .valueblock .leftzone {
position: relative
}

.entrypoint .valueblock .sectiontitle {
font-size: 44px;
line-height: 1.1;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 40px
}

.entrypoint .valueblock .imagepair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px
}

.entrypoint .valueblock .imgwrap {
aspect-ratio: 1/1;
border-radius: 10px;
overflow: hidden;
position: relative;
animation: rowreveal .16s cubic-bezier(0.4, 0, 1, 1) backwards
}

.entrypoint .valueblock .imgwrap:nth-child(1) {
animation-delay: .1s
}

.entrypoint .valueblock .imgwrap:nth-child(2) {
animation-delay: .2s
}

@keyframes rowreveal {
from {
opacity: 0;
transform: translateY(20px)
}

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

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

.entrypoint .valueblock .rightzone {
display: flex;
flex-direction: column;
gap: 40px
}

.entrypoint .valueblock .statcard {
background: #12203280;
padding: 40px;
border-radius: 10px;
text-align: right;
position: relative;
border: 1px solid #4698f714
}

.entrypoint .valueblock .statcard .counter {
position: absolute;
top: 20px;
left: 20px;
width: 32px;
height: 32px;
background: #4698F7;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #FFF
}

.entrypoint .valueblock .statcard .stattitle {
font-size: 24px;
line-height: 1.4;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 20px
}

.entrypoint .valueblock .statcard .stattext {
font-size: 16px;
line-height: 1.7;
color: #c4c6cd;
margin: 0
}

.entrypoint .audienceblock {
padding-top: 80px;
padding-bottom: 80px;
position: relative;
background: #08090d
}

.entrypoint .audienceblock::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #4698F7 50%, transparent 100%);
opacity: .3
}

.entrypoint .audienceblock .audiencegrid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 80px;
align-items: start
}

.entrypoint .audienceblock .profilezone {
position: relative
}

.entrypoint .audienceblock .profileframe {
aspect-ratio: 1/1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 48px -1px #1220321f;
margin-bottom: 20px
}

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

.entrypoint .audienceblock .profileinfo {
text-align: center
}

.entrypoint .audienceblock .profilename {
font-size: 24px;
line-height: 1.4;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px
}

.entrypoint .audienceblock .profilerole {
font-size: 16px;
line-height: 1.4;
color: #4698F7;
margin: 0
}

.entrypoint .audienceblock .contentzone {
display: flex;
flex-direction: column;
gap: 40px
}

.entrypoint .audienceblock .sectionheading {
font-size: 44px;
line-height: 1.1;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 0
}

.entrypoint .audienceblock .criteriaset {
display: flex;
flex-direction: column;
gap: 40px
}

.entrypoint .audienceblock .criteriaitem {
display: grid;
grid-template-columns: 60px 1fr;
gap: 20px;
align-items: start;
animation: rowreveal .14s cubic-bezier(0.4, 0, 1, 1) backwards
}

.entrypoint .audienceblock .criteriaitem:nth-child(1) {
animation-delay: .15s
}

.entrypoint .audienceblock .criteriaitem:nth-child(2) {
animation-delay: .3s
}

.entrypoint .audienceblock .criteriaitem:nth-child(3) {
animation-delay: .45s
}

.entrypoint .audienceblock .criteriaitem:nth-child(4) {
animation-delay: .6s
}

.entrypoint .audienceblock .iconbox {
width: 60px;
height: 60px;
border-radius: 6px;
background: #4698f71a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.entrypoint .audienceblock .iconbox svg {
width: 28px;
height: 28px;
fill: #4698F7
}

.entrypoint .audienceblock .criteriatext {
padding-top: 10px
}

.entrypoint .audienceblock .criteriatitle {
font-size: 18px;
line-height: 1.4;
color: #FFF;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px
}

.entrypoint .audienceblock .criteriabody {
font-size: 16px;
line-height: 1.7;
color: #c4c6cd;
margin: 0
}

.entrypoint .animatedpan {
animation: panimage 20s linear infinite
}

@keyframes panimage {
0% {
transform: translateX(0)
}

50% {
transform: translateX(-40px)
}

100% {
transform: translateX(0)
}
}

@media (max-width: 1200px) {
.entrypoint .openhero {
grid-template-columns: 240px 1fr;
gap: 40px
}

.entrypoint .openhero .mainheading {
font-size: 44px
}

.entrypoint .methodblock .twocolgrid {
grid-template-columns: 1fr
}

.entrypoint .methodblock .visualframe {
position: relative;
top: 0
}

.entrypoint .valueblock .valuegrid {
grid-template-columns: 1fr
}

.entrypoint .audienceblock .audiencegrid {
grid-template-columns: 1fr;
gap: 40px
}

.entrypoint .audienceblock .profilezone {
max-width: 380px;
margin-left: auto;
margin-right: auto
}
}

@media (max-width: 992px) {
.entrypoint .openhero {
grid-template-columns: 1fr;
padding-top: 40px;
padding-bottom: 40px
}

.entrypoint .openhero .imageslot {
max-width: 280px;
margin-left: auto;
margin-right: auto
}

.entrypoint .openhero .textzone {
padding-left: 0;
text-align: center
}

.entrypoint .openhero .mainheading {
font-size: 32px
}

.entrypoint .methodblock {
padding-top: 40px;
padding-bottom: 40px
}

.entrypoint .methodblock .sectionlabel {
font-size: 32px
}

.entrypoint .valueblock {
padding-top: 40px;
padding-bottom: 40px
}

.entrypoint .valueblock .sectiontitle {
font-size: 32px
}

.entrypoint .valueblock .imagepair {
grid-template-columns: 1fr
}

.entrypoint .audienceblock {
padding-top: 40px;
padding-bottom: 40px
}

.entrypoint .audienceblock .sectionheading {
font-size: 32px
}

.entrypoint .audienceblock .criteriaitem {
grid-template-columns: 1fr
}
}

@media (max-width: 576px) {
.entrypoint .limiter {
padding-left: 10px;
padding-right: 10px
}

.entrypoint .openhero .mainheading {
font-size: 24px
}

.entrypoint .methodblock .sectionlabel {
font-size: 24px
}

.entrypoint .methodblock .textcard {
padding: 20px
}

.entrypoint .methodblock .cardtitle {
font-size: 18px
}

.entrypoint .valueblock .sectiontitle {
font-size: 24px
}

.entrypoint .valueblock .statcard {
padding: 20px
}

.entrypoint .valueblock .statcard .stattitle {
font-size: 18px
}

.entrypoint .audienceblock .sectionheading {
font-size: 24px
}

.entrypoint .audienceblock .profilename {
font-size: 18px
}

.entrypoint .audienceblock .criteriatitle {
font-size: 16px
}
}

.abtus {
background: #0a0a0f;
color: #e8e8e8;
position: relative;
overflow-x: clip
}

.abtus::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(0deg, #4698f705 0px, transparent 1px, transparent 40px, #4698f705 41px), repeating-linear-gradient(90deg, #4698f705 0px, transparent 1px, transparent 40px, #4698f705 41px);
pointer-events: none;
z-index: 1
}

.abtus>* {
position: relative;
z-index: 2
}

.abtus .lead {
max-width: 1440px;
margin: 0 auto;
padding: 80px 20px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 80px;
align-items: center
}

.abtus .leadtxt {
position: relative
}

.abtus .leadtxt::before {
content: '';
position: absolute;
top: -40px;
left: -40px;
width: 180px;
height: 180px;
background: radial-gradient(ellipse at center, #4698f726, transparent 70%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
pointer-events: none;
z-index: -1
}

.abtus .leadnum {
font-size: 72px;
line-height: 1.1;
font-weight: 700;
color: #4698F7;
margin: 0 0 10px
}

.abtus .leadh {
font-size: 44px;
line-height: 1.1;
font-weight: 700;
color: #fff;
margin: 0 0 20px
}

.abtus .leadp {
font-size: 18px;
line-height: 1.7;
color: silver;
margin: 0
}

.abtus .leadimg {
width: 380px;
height: 480px;
border-radius: 18px;
overflow: hidden;
position: relative;
box-shadow: 0 10px 48px -1px #1220321f
}

.abtus .leadimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(100%) contrast(1.3);
transition: filter .14s cubic-bezier(0.4, 0, 1, 1)
}

.abtus .leadimg:hover img {
filter: grayscale(0%) contrast(1)
}

.abtus .mission {
max-width: 1440px;
margin: 0 auto;
padding: 80px 20px;
background: #122032;
position: relative
}

.abtus .mission::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, #4698F7 0%, #122032 100%)
}

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

.abtus .card {
background: #ffffff08;
border-radius: 10px;
padding: 40px;
position: relative;
overflow: hidden;
transition: box-shadow .16s cubic-bezier(0.4, 0, 1, 1), transform .16s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 1px 2px -1px #4698f70f
}

.abtus .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #4698F7;
opacity: 0;
transition: opacity .12s cubic-bezier(0.4, 0, 1, 1)
}

.abtus .card:hover {
box-shadow: 0 10px 48px -1px #4698f71f;
transform: translateY(-4px)
}

.abtus .card:hover::before {
opacity: 1
}

.abtus .cardh {
font-size: 24px;
line-height: 1.4;
font-weight: 700;
color: #fff;
margin: 0 0 20px
}

.abtus .cardp {
font-size: 16px;
line-height: 1.7;
color: silver;
margin: 0
}

.abtus .cardimg {
width: 100%;
height: 240px;
border-radius: 6px;
overflow: hidden;
margin: 0 0 20px
}

.abtus .cardimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .18s cubic-bezier(0.4, 0, 1, 1)
}

.abtus .card:hover .cardimg img {
transform: scale(1.05)
}

.abtus .missiongrid:hover .card:not(:hover) {
opacity: .5;
transition: opacity .14s cubic-bezier(0.4, 0, 1, 1)
}

.abtus .compare {
max-width: 1440px;
margin: 0 auto;
padding: 80px 20px
}

.abtus .compareh {
font-size: 44px;
line-height: 1.1;
font-weight: 700;
color: #fff;
margin: 0 0 40px;
text-align: center
}

.abtus .matrix {
background: #ffffff05;
border-radius: 10px;
overflow: hidden;
border: 1px solid #4698f71a
}

.abtus .matrixrow {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 0;
border-bottom: 1px solid #4698f71a
}

.abtus .matrixrow:last-child {
border-bottom: none
}

.abtus .matrixhead {
background: #4698f714;
font-weight: 700
}

.abtus .matrixcell {
padding: 20px;
font-size: 16px;
line-height: 1.4;
color: silver;
border-right: 1px solid #4698f71a;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background .12s cubic-bezier(0.4, 0, 1, 1)
}

.abtus .matrixcell:first-child {
justify-content: flex-start;
text-align: left;
font-weight: 600;
color: #fff
}

.abtus .matrixcell:last-child {
border-right: none
}

.abtus .matrixrow:hover .matrixcell {
background: #4698f70a
}

.abtus .matrixhead .matrixcell {
color: #fff
}

.abtus .indicator {
width: 24px;
height: 24px;
border-radius: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700
}

.abtus .yes {
background: #4698f733;
color: #4698F7
}

.abtus .no {
background: #ffffff0d;
color: #666
}

.abtus .partial {
background: #4698f71a;
color: #8bb8f5
}

.abtus .team {
max-width: 1440px;
margin: 0 auto;
padding: 80px 20px;
position: relative
}

.abtus .team::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, #4698f714, transparent 60%);
pointer-events: none;
z-index: -1;
animation: breathe 8s ease-in-out infinite
}

@keyframes breathe {

0%,
100% {
opacity: .6
}

50% {
opacity: 1
}
}

.abtus .teamh {
font-size: 44px;
line-height: 1.1;
font-weight: 700;
color: #fff;
margin: 0 0 40px;
text-align: center
}

.abtus .teamgrid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 80px;
align-items: start
}

.abtus .teamside {
display: flex;
flex-direction: column;
gap: 40px
}

.abtus .profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center
}

.abtus .profileimg {
width: 120px;
height: 120px;
border-radius: 28px;
overflow: hidden;
margin: 0 0 20px;
border: 3px solid #4698f733;
transition: border-color .14s cubic-bezier(0.4, 0, 1, 1), transform .16s cubic-bezier(0.4, 0, 1, 1)
}

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

.abtus .profile:hover .profileimg {
border-color: #4698F7;
transform: scale(1.05)
}

.abtus .profilename {
font-size: 18px;
line-height: 1.4;
font-weight: 700;
color: #fff;
margin: 0 0 10px
}

.abtus .profilerole {
font-size: 16px;
line-height: 1.4;
color: #4698F7;
margin: 0
}

.abtus .teamcenter {
background: #ffffff08;
border-radius: 18px;
padding: 40px;
text-align: right;
box-shadow: 0 5px 20px -1px #4698f71a
}

.abtus .centerh {
font-size: 32px;
line-height: 1.4;
font-weight: 300;
color: #fff;
margin: 0 0 20px
}

.abtus .centerp {
font-size: 16px;
line-height: 1.7;
color: silver;
margin: 0 0 20px
}

.abtus .centerp:last-child {
margin: 0
}

@media (max-width: 1200px) {
.abtus .lead {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 20px
}

.abtus .leadimg {
width: 100%;
max-width: 480px;
margin: 0 auto
}

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

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

.abtus .teamside {
flex-direction: row;
justify-content: center
}

.abtus .teamcenter {
text-align: left
}

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

.abtus .matrixcell {
border-right: none;
border-bottom: 1px solid #4698f71a;
justify-content: flex-start;
text-align: left
}

.abtus .matrixcell:last-child {
border-bottom: none
}
}

@media (max-width: 992px) {
.abtus .leadnum {
font-size: 62px
}

.abtus .leadh,
.abtus .compareh,
.abtus .teamh {
font-size: 32px
}

.abtus .centerh {
font-size: 24px
}

.abtus .mission,
.abtus .compare,
.abtus .team {
padding: 40px 20px
}
}

@media (max-width: 576px) {
.abtus .lead {
padding: 40px 10px
}

.abtus .leadnum {
font-size: 44px
}

.abtus .leadh {
font-size: 24px
}

.abtus .leadp,
.abtus .profilename {
font-size: 16px
}

.abtus .cardh,
.abtus .centerh {
font-size: 18px
}

.abtus .compareh,
.abtus .teamh {
font-size: 24px
}

.abtus .card,
.abtus .teamcenter {
padding: 20px
}

.abtus .mission,
.abtus .compare,
.abtus .team {
padding: 40px 10px
}

.abtus .teamside {
flex-direction: column
}

.abtus .matrixcell {
padding: 10px;
font-size: 16px
}
}

.scontact {
background: #0d1621;
color: #e8edf2;
min-height: 100vh;
position: relative;
overflow-x: clip
}

.scontact::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse 900px 700px at 20% 30%, #4698f714 0%, transparent 60%), radial-gradient(ellipse 800px 600px at 80% 70%, #1220321f 0%, transparent 60%);
pointer-events: none;
z-index: 0;
animation: desatcycle 18s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes desatcycle {

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

50% {
filter: saturate(0.7)
}
}

.scontact .htitlewrap {
position: relative;
padding: 80px 20px;
max-width: 1440px;
margin: 0 auto;
background: radial-gradient(ellipse 1200px 800px at 15% 25%, #4698f724 0%, transparent 55%), radial-gradient(ellipse 1000px 700px at 85% 75%, #1220322e 0%, transparent 60%), radial-gradient(ellipse 1400px 900px at 50% 50%, #4698f70f 0%, transparent 70%);
z-index: 1
}

.scontact .htitlewrap::before,
.scontact .htitlewrap::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 2px solid #4698f74d
}

.scontact .htitlewrap::before {
top: 40px;
left: 40px;
border-right: none;
border-bottom: none
}

.scontact .htitlewrap::after {
bottom: 40px;
right: 40px;
border-left: none;
border-top: none
}

.scontact .hcontent {
max-width: 920px;
margin: 0 auto;
text-align: center
}

.scontact .hcontent h1 {
font-size: 62px;
line-height: 1.1;
color: #fff;
margin: 0 0 20px;
font-weight: 700
}

.scontact .hcontent .hdesc {
font-size: 18px;
line-height: 1.7;
color: #b8c5d6;
margin: 0 0 40px;
max-width: 680px;
margin-left: auto;
margin-right: auto
}

.scontact .hcontent .hlink {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 40px;
background: #4698F7;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
transition: box-shadow .15s cubic-bezier(0.4, 0, 1, 1), transform .12s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 5px 20px -1px #4698f71a
}

.scontact .hcontent .hlink:hover {
box-shadow: 0 10px 48px -1px #4698f71f;
transform: translateY(-2px)
}

.scontact .hcontent .hlink svg {
width: 18px;
height: 18px;
fill: currentColor
}

.scontact .formzone {
position: relative;
padding: 80px 20px;
max-width: 1440px;
margin: 0 auto;
z-index: 1
}

.scontact .formzone::before {
content: '';
position: absolute;
top: 40px;
right: 60px;
width: 180px;
height: 180px;
border: 1px solid #4698f714;
border-radius: 50%;
pointer-events: none
}

.scontact .formzone::after {
content: '';
position: absolute;
top: 60px;
right: 80px;
width: 140px;
height: 140px;
border: 1px solid #4698f70f;
border-radius: 50%;
pointer-events: none
}

.scontact .formlayout {
display: grid;
grid-template-columns: 1fr;
gap: 80px;
max-width: 1200px;
margin: 0 auto
}

.scontact .formcard {
background: #12203266;
padding: 40px;
border-radius: 10px;
border: 3px solid #4698f71f;
box-shadow: 0 5px 20px -1px #1220321a
}

.scontact .formcard h2 {
font-size: 32px;
line-height: 1.4;
color: #fff;
margin: 0 0 10px;
font-weight: 700
}

.scontact .formcard .formsub {
font-size: 16px;
line-height: 1.7;
color: #9ba9bc;
margin: 0 0 40px
}

.scontact .formcard form {
display: flex;
flex-direction: column;
gap: 20px
}

.scontact .formrow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px
}

.scontact .finput {
display: flex;
flex-direction: column;
gap: 10px
}

.scontact .finput label {
font-size: 16px;
color: #d1dae6;
font-weight: 600
}

.scontact .finput input,
.scontact .finput select {
padding: 16px 20px;
background: #0d162199;
border: 2px solid #4698f733;
border-radius: 6px;
color: #e8edf2;
font-size: 16px;
transition: border-color .14s cubic-bezier(0.4, 0, 1, 1), background .14s cubic-bezier(0.4, 0, 1, 1)
}

.scontact .finput input:focus,
.scontact .finput select:focus {
outline: none;
border-color: #4698F7;
background: #0d1621cc
}

.scontact .finput input::placeholder {
color: #6b7a8f;
font-size: 15px
}

.scontact .finput select {
cursor: pointer;
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 1.5L6 6.5L11 1.5' stroke='%234698F7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 50px
}

.scontact .finput select option {
background: #0d1621;
color: #e8edf2
}

.scontact .fcheck {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0 0
}

.scontact .fcheck input[type="checkbox"] {
margin-top: 4px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #4698F7
}

.scontact .fcheck label {
font-size: 16px;
line-height: 1.7;
color: #9ba9bc;
cursor: pointer
}

.scontact .fcheck label a {
color: #4698F7;
text-decoration: none;
transition: color .12s cubic-bezier(0.4, 0, 1, 1)
}

.scontact .fcheck label a:hover {
color: #6bb0ff
}

.scontact .fsubmit {
padding: 18px 40px;
background: #4698F7;
color: #fff;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: box-shadow .15s cubic-bezier(0.4, 0, 1, 1), transform .12s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 5px 20px -1px #4698f71a;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px
}

.scontact .fsubmit:hover {
box-shadow: 0 10px 48px -1px #4698f71f;
transform: translateY(-2px)
}

.scontact .fsubmit svg {
width: 20px;
height: 20px;
fill: currentColor
}

.scontact .detailszone {
position: relative;
padding: 80px 20px;
background: #1220324d;
z-index: 1
}

.scontact .detailszone::before {
content: '';
position: absolute;
bottom: 40px;
left: 60px;
width: 200px;
height: 200px;
border: 1px solid #4698f712;
border-radius: 50%;
pointer-events: none
}

.scontact .detailszone::after {
content: '';
position: absolute;
bottom: 60px;
left: 80px;
width: 160px;
height: 160px;
border: 1px solid #4698f70d;
border-radius: 50%;
pointer-events: none
}

.scontact .detailswrap {
max-width: 1440px;
margin: 0 auto
}

.scontact .detailswrap h2 {
font-size: 44px;
line-height: 1.1;
color: #fff;
margin: 0 0 40px;
font-weight: 700;
text-align: center
}

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

.scontact .dcard {
background: #0d162180;
padding: 40px;
border-radius: 10px;
border: 2px solid #4698f726;
transition: border-color .16s cubic-bezier(0.4, 0, 1, 1), transform .14s cubic-bezier(0.4, 0, 1, 1);
position: relative;
overflow: hidden
}

.scontact .dcard::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #4698F7 0%, transparent 100%);
opacity: 0;
transition: opacity .16s cubic-bezier(0.4, 0, 1, 1)
}

.scontact .dcard:hover {
border-color: #4698f759;
transform: translateY(-4px)
}

.scontact .dcard:hover::before {
opacity: 1
}

.scontact .dcard .dicon {
width: 48px;
height: 48px;
background: #4698f726;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 20px
}

.scontact .dcard .dicon svg {
width: 24px;
height: 24px;
fill: #4698F7
}

.scontact .dcard h3 {
font-size: 24px;
line-height: 1.4;
color: #fff;
margin: 0 0 10px;
font-weight: 700
}

.scontact .dcard .dtext {
font-size: 16px;
line-height: 1.7;
color: #9ba9bc;
margin: 0
}

.scontact .dcard .dlink {
display: inline-block;
margin: 20px 0 0;
color: #4698F7;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: color .12s cubic-bezier(0.4, 0, 1, 1)
}

.scontact .dcard .dlink:hover {
color: #6bb0ff
}

.scontact .mapzone {
position: relative;
padding: 80px 20px;
max-width: 1440px;
margin: 0 auto;
z-index: 1
}

.scontact .mapwrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.scontact .mapleft h2 {
font-size: 44px;
line-height: 1.1;
color: #fff;
margin: 0 0 20px;
font-weight: 700
}

.scontact .mapleft .mapdesc {
font-size: 18px;
line-height: 1.7;
color: #b8c5d6;
margin: 0 0 40px
}

.scontact .mapleft .infogrid {
display: flex;
flex-direction: column;
gap: 20px
}

.scontact .inforow {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: #1220324d;
border-radius: 6px;
border: 1px solid #4698f71a;
transition: background .14s cubic-bezier(0.4, 0, 1, 1), border-color .14s cubic-bezier(0.4, 0, 1, 1)
}

.scontact .inforow:hover {
background: #12203280;
border-color: #4698f733
}

.scontact .inforow .iicon {
width: 40px;
height: 40px;
background: #4698f726;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.scontact .inforow .iicon svg {
width: 20px;
height: 20px;
fill: #4698F7
}

.scontact .inforow .icontent {
flex: 1
}

.scontact .inforow .icontent .ilabel {
font-size: 16px;
color: #9ba9bc;
margin: 0 0 4px
}

.scontact .inforow .icontent .ivalue {
font-size: 18px;
color: #fff;
font-weight: 600;
margin: 0
}

.scontact .mapright {
position: relative;
border-radius: 10px;
overflow: hidden;
border: 4px solid #4698f733;
border-left-width: 2px;
box-shadow: 0 10px 48px -1px #1220321f
}

.scontact .mapright img {
width: 100%;
height: 480px;
object-fit: cover;
display: block
}

.scontact .divider {
max-width: 1440px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: relative;
z-index: 1
}

.scontact .divider::before,
.scontact .divider::after {
content: '';
width: 8px;
height: 8px;
background: #4698F7;
border-radius: 50%
}

.scontact .divider .dline {
width: 120px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #4698F7 50%, transparent 100%)
}

@media (max-width: 1200px) {
.scontact .hcontent h1 {
font-size: 44px
}

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

.scontact .mapwrap {
gap: 40px
}
}

@media (max-width: 992px) {
.scontact .htitlewrap {
padding: 40px 20px
}

.scontact .hcontent h1 {
font-size: 32px
}

.scontact .hcontent .hdesc {
font-size: 16px
}

.scontact .formzone,
.scontact .detailszone,
.scontact .mapzone {
padding: 40px 20px
}

.scontact .formcard {
padding: 20px
}

.scontact .formrow {
grid-template-columns: 1fr
}

.scontact .detailsgrid {
grid-template-columns: 1fr;
gap: 20px
}

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

.scontact .mapleft h2,
.scontact .detailswrap h2 {
font-size: 32px
}

.scontact .mapright img {
height: 320px
}

.scontact .htitlewrap::before,
.scontact .htitlewrap::after {
width: 30px;
height: 30px
}

.scontact .htitlewrap::before {
top: 20px;
left: 20px
}

.scontact .htitlewrap::after {
bottom: 20px;
right: 20px
}
}

@media (max-width: 576px) {
.scontact .hcontent h1 {
font-size: 24px
}

.scontact .formcard h2,
.scontact .mapleft h2,
.scontact .detailswrap h2 {
font-size: 24px
}

.scontact .dcard {
padding: 20px
}

.scontact .inforow {
flex-direction: column;
gap: 10px
}

.scontact .formzone::before,
.scontact .formzone::after,
.scontact .detailszone::before,
.scontact .detailszone::after {
display: none
}
}

.successpage {
background: linear-gradient(180deg, #0a0f1a 0%, #122032 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px
}

.successpage .confirmwrap {
max-width: 680px;
width: 100%;
text-align: center
}

.successpage .iconzone {
margin-bottom: 40px;
display: flex;
justify-content: center
}

.successpage .checkmark {
width: 88px;
height: 88px;
border: 4px solid #4698F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #4698f714
}

.successpage .checkmark::before {
content: '';
width: 28px;
height: 16px;
border-left: 4px solid #4698F7;
border-bottom: 4px solid #4698F7;
transform: rotate(-45deg);
position: absolute;
top: 28px;
left: 28px
}

.successpage .msgtitle {
font-size: 44px;
line-height: 1.1;
color: #FFF;
margin-bottom: 20px;
font-weight: 600
}

.successpage .msgbody {
font-size: 18px;
line-height: 1.7;
color: #ffffffc7;
margin-bottom: 40px
}

.successpage .msgbody p {
margin-bottom: 20px
}

.successpage .msgbody p:last-child {
margin-bottom: 0
}

.successpage .actionzone {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap
}

.successpage .btnprimary {
background: #4698F7;
color: #FFF;
padding: 18px 40px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
cursor: pointer;
transition: box-shadow .14s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 5px 20px -1px #4698f71a
}

.successpage .btnprimary:hover {
box-shadow: 0 10px 48px -1px #4698f71f
}

.successpage .btnprimary svg {
width: 18px;
height: 18px;
fill: currentColor
}

.successpage .btnsecondary {
background: transparent;
color: #4698F7;
padding: 18px 40px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid #4698f74d;
cursor: pointer;
transition: border-color .12s cubic-bezier(0.4, 0, 1, 1), background .12s cubic-bezier(0.4, 0, 1, 1)
}

.successpage .btnsecondary:hover {
border-color: #4698F7;
background: #4698f70f
}

.successpage .btnsecondary svg {
width: 18px;
height: 18px;
fill: currentColor
}

.successpage .infoblock {
margin-top: 80px;
padding-top: 40px;
border-top: 1px solid #4698f726
}

.successpage .infolist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
list-style: none;
padding: 0;
margin: 0
}

.successpage .infolist li {
text-align: center
}

.successpage .infolabel {
font-size: 16px;
color: #ffffff94;
margin-bottom: 10px;
display: block
}

.successpage .infovalue {
font-size: 18px;
color: #FFF;
font-weight: 600;
word-break: break-word
}

@media (max-width: 576px) {
.successpage {
padding: 40px 20px
}

.successpage .msgtitle {
font-size: 32px
}

.successpage .checkmark {
width: 72px;
height: 72px
}

.successpage .checkmark::before {
width: 22px;
height: 12px;
top: 24px;
left: 23px
}

.successpage .actionzone {
flex-direction: column;
align-items: stretch
}

.successpage .btnprimary,
.successpage .btnsecondary {
width: 100%;
justify-content: center
}

.successpage .infolist {
grid-template-columns: 1fr;
gap: 20px
}

.successpage .infoblock {
margin-top: 40px
}
}