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

html {
box-sizing: border-box
}

*,
::before,
::after {
box-sizing: inherit
}

body {
margin: 0;
min-height: 100dvh;
overflow-x: hidden;
font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #151F21;
background: #FFF
}

.siteheader {
background: linear-gradient(135deg, #FFF 0%, #BDEECB 100%);
padding: 40px 20px;
box-shadow: 1px 4px 28px 0 #151f2117;
position: relative
}

.headerwrap {
max-width: 1500px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px
}

.brandarea {
display: flex;
align-items: center;
gap: 12px;
background: #ffffffd9;
padding: 12px 20px;
border-radius: 10px;
box-shadow: 1px 1px 4px 0 #151f2114
}

.logowrap {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
border-radius: 10px;
border: 1px solid #151f211f;
box-shadow: 1px 1px 4px 0 #151f2114;
flex-shrink: 0
}

.logoimg {
width: 42px;
height: 42px;
object-fit: contain
}

.companyname {
font-size: 23px;
line-height: 1.15;
font-weight: 700;
color: #151F21;
margin: 0
}

.topnav {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center
}

.navlink {
font-size: 16px;
line-height: 1.7;
color: #151F21;
text-decoration: none;
padding: 12px 20px;
border: 1px solid #151f2133;
border-radius: 10px;
background: #ffffffb3;
transition: border-color .48s cubic-bezier(0.4, 0, 0.2, 1), background .52s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block
}

.navlink:hover {
border-color: #151F21;
background: #fffffff2
}

.navlink:focus {
outline: 2px solid #151F21;
outline-offset: 2px;
border-color: #151F21
}

.socialproof {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
padding: 12px 20px;
background: #bdeecb4d;
border-radius: 10px;
border: 1px solid #bdeecb80
}

.prooficon {
width: 20px;
height: 20px;
background: #BDEECB;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #151F21;
flex-shrink: 0
}

.prooftext {
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0
}

@media (min-width: 576px) {
.siteheader {
padding: 40px
}

.headerwrap {
gap: 40px
}

.brandarea {
padding: 12px 40px
}

.topnav {
gap: 12px 20px
}
}

@media (min-width: 992px) {
.siteheader {
padding: 40px 80px
}

.headerwrap {
flex-direction: row;
align-items: center;
justify-content: space-between
}

.navwrap {
display: flex;
align-items: center;
gap: 40px
}

.socialproof {
margin-top: 0
}
}

.sitefooter {
background: linear-gradient(to bottom, #FFF 0%, #151F21 100%);
padding: 80px 20px 40px;
color: #FFF
}

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

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

.footerlogowrap {
display: flex;
align-items: center;
gap: 12px
}

.footerlogobox {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
border-radius: 10px;
border: 1px solid #bdeecb4d;
box-shadow: 1px 1px 4px 0 #bdeecb14;
flex-shrink: 0
}

.footerlogo {
width: 42px;
height: 42px;
object-fit: contain
}

.footercompanyname {
font-size: 23px;
line-height: 1.15;
font-weight: 700;
color: #FFF;
margin: 0
}

.abouttext {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
margin: 0;
max-width: 520px
}

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

.contactlabel {
font-size: 15px;
line-height: 1.7;
font-weight: 700;
color: #BDEECB;
margin: 0;
letter-spacing: .05em;
text-transform: uppercase
}

.contactitem {
display: flex;
align-items: flex-start;
gap: 12px
}

.contacticon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #BDEECB;
flex-shrink: 0;
margin-top: 2px
}

.contactlink {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
text-decoration: none;
transition: color .44s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactlink:hover {
color: #BDEECB
}

.contactlink:focus {
outline: 2px solid #BDEECB;
outline-offset: 2px;
color: #BDEECB
}

.contacttext {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
margin: 0
}

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

.footernavlabel {
font-size: 15px;
line-height: 1.7;
font-weight: 700;
color: #BDEECB;
margin: 0;
letter-spacing: .05em;
text-transform: uppercase
}

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

.footernavlink {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
text-decoration: none;
transition: color .44s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block
}

.footernavlink:hover {
color: #BDEECB
}

.footernavlink:focus {
outline: 2px solid #BDEECB;
outline-offset: 2px;
color: #BDEECB
}

.footerbottom {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #bdeecb33;
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start
}

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

.footerbottomlink {
font-size: 15px;
line-height: 1.7;
color: #ffffffb3;
text-decoration: none;
transition: color .44s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block
}

.footerbottomlink:hover {
color: #BDEECB
}

.footerbottomlink:focus {
outline: 2px solid #BDEECB;
outline-offset: 2px;
color: #BDEECB
}

.copyright {
font-size: 15px;
line-height: 1.7;
color: #fff9;
margin: 0
}

@media (min-width: 576px) {
.sitefooter {
padding: 80px 40px 40px
}

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

.footerbottom {
flex-direction: row;
justify-content: space-between;
align-items: center
}
}

@media (min-width: 992px) {
.sitefooter {
padding: 80px 80px 40px
}

.footerwrap {
grid-template-columns: 2fr 1fr 1fr
}
}

@media (min-width: 1200px) {
.footerwrap {
grid-template-columns: 2.5fr 1fr 1fr
}
}

.consentpopup {
position: fixed;
top: 20px;
right: 20px;
width: 340px;
max-width: calc(100vw - 40px);
background: #FFF;
border: 1px solid #151f2126;
border-radius: 10px;
box-shadow: 1px 12px 60px 0 #151f211c;
padding: 20px;
z-index: 2000;
display: none;
opacity: 0;
transform: translateY(-12px);
transition: opacity .56s cubic-bezier(0.0, 0, 0.2, 1), transform .56s cubic-bezier(0.0, 0, 0.2, 1)
}

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

.consenttext {
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0 0 20px
}

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

.consentbtn {
font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: 16px;
line-height: 1.7;
font-weight: 700;
color: #151F21;
background: transparent;
border: 1px solid #151f214d;
border-radius: 10px;
padding: 12px 20px;
cursor: pointer;
transition: border-color .48s cubic-bezier(0.4, 0, 0.2, 1), background .52s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center
}

.consentbtn:hover {
border-color: #151F21;
background: #bdeecb26
}

.consentbtn:focus {
outline: 2px solid #151F21;
outline-offset: 2px;
border-color: #151F21
}

.consentlink {
font-size: 15px;
line-height: 1.7;
color: #151f21b3;
text-decoration: none;
text-align: center;
transition: color .44s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
padding: 6px
}

.consentlink:hover {
color: #151F21
}

.consentlink:focus {
outline: 2px solid #151F21;
outline-offset: 2px;
color: #151F21
}

@media (min-width: 576px) {
.consentpopup {
width: 380px
}
}

.terms-area {
max-width: 1500px;
margin: 0 auto;
padding: 80px 40px
}

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

@media (max-width: 576px) {
.terms-area {
padding: 40px 12px
}
}

.terms-area h1 {
font-size: 58px;
line-height: 1.15;
margin: 0 0 40px;
color: #151F21
}

.terms-area h2 {
font-size: 43px;
line-height: 1.15;
margin: 80px 0 20px;
color: #151F21
}

.terms-area h3 {
font-size: 23px;
line-height: 1.15;
margin: 40px 0 20px;
color: #151F21
}

.terms-area h4,
.terms-area h5,
.terms-area h6 {
font-size: 16px;
line-height: 1.15;
margin: 40px 0 12px;
color: #151F21
}

.terms-area h1:first-child,
.terms-area h2:first-child,
.terms-area h3:first-child {
margin-top: 0
}

@media (max-width: 992px) {
.terms-area h1 {
font-size: 43px
}

.terms-area h2 {
font-size: 23px;
margin-top: 40px
}

.terms-area h3 {
font-size: 16px
}
}

@media (max-width: 576px) {
.terms-area h1 {
font-size: 23px
}

.terms-area h2 {
font-size: 16px
}
}

.terms-area p {
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
color: #151F21
}

.terms-area ul,
.terms-area ol {
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
padding-left: 40px;
color: #151F21
}

@media (max-width: 576px) {

.terms-area ul,
.terms-area ol {
padding-left: 20px
}
}

.terms-area li {
margin-bottom: 12px
}

.terms-area li:last-child {
margin-bottom: 0
}

.terms-area ul ul,
.terms-area ul ol,
.terms-area ol ul,
.terms-area ol ol {
margin-top: 12px;
margin-bottom: 0
}

.terms-area strong,
.terms-area b {
font-weight: 600;
color: #151F21
}

.terms-area em,
.terms-area i {
font-style: italic
}

.terms-area hr {
border: none;
height: 1px;
background-color: #151f2126;
margin: 40px 0
}

@media (max-width: 576px) {
.terms-area hr {
margin: 20px 0
}
}

.poddetail {
background: #FFF;
color: #151F21;
max-width: 1500px;
margin: 0 auto;
padding: 0
}

.poddetail .titlezone {
padding: 80px 20px;
text-align: center;
position: relative;
overflow: visible;
background: linear-gradient(253deg, #151F21 0%, #BDEECB 100%)
}

.poddetail .titlezone::before {
content: '';
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
background: #BDEECB;
opacity: .15;
border-radius: 50%;
pointer-events: none
}

.poddetail .heroimg {
max-width: 900px;
width: 100%;
height: 480px;
margin: 0 auto 40px;
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 12px 60px 0 #151f211c
}

.poddetail .heroimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: sepia(0.18) saturate(1.15) brightness(1.05);
display: block
}

.poddetail .manifesto {
max-width: 720px;
margin: 0 auto;
color: #FFF
}

.poddetail .manifesto h1 {
font-size: 58px;
line-height: 1.15;
margin: 0 0 20px;
animation: splittitle .56s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes splittitle {
0% {
letter-spacing: 0;
opacity: .7
}

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

.poddetail .manifesto .subtitle {
font-size: 23px;
line-height: 1.7;
margin: 0 0 12px;
opacity: .92
}

.poddetail .metarow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin: 20px 0 0
}

.poddetail .metaitem {
font-size: 15px;
line-height: 1.7;
color: #FFF;
opacity: .85;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px
}

.poddetail .metaicon {
width: 18px;
height: 18px;
fill: currentColor
}

.poddetail .metatag {
background: #fff3;
padding: 6px 12px;
border-radius: 10px;
font-size: 15px;
line-height: 1.15;
color: #FFF
}

.poddetail .bodysection {
padding: 80px 20px;
background: #FFF;
position: relative
}

.poddetail .bodysection::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 12px solid #151F21
}

.poddetail .bodysection::after {
content: '';
position: absolute;
top: 0;
left: calc(50% + 40px);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 12px solid #BDEECB
}

.poddetail .bodywrap {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
gap: 80px;
align-items: start
}

.poddetail .sidebar {
position: sticky;
top: 40px;
background: linear-gradient(253deg, #BDEECB 0%, #FFF 100%);
padding: 40px;
border-radius: 10px;
box-shadow: 1px 4px 28px 0 #151f2117
}

.poddetail .sidebar .sideheading {
font-size: 23px;
line-height: 1.15;
margin: 0 0 20px;
color: #151F21;
position: relative;
padding-left: 20px
}

.poddetail .sidebar .sideheading::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background: #151F21;
border-radius: 0
}

.poddetail .sidebar .authorname {
font-size: 16px;
line-height: 1.7;
margin: 0 0 12px;
color: #151F21;
font-weight: 600
}

.poddetail .sidebar .authorbio {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #151F21;
opacity: .8
}

.poddetail .contentarea {
background: #FFF
}

.poddetail .contentarea p {
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
color: #151F21
}

.poddetail .contentarea h2 {
font-size: 43px;
line-height: 1.15;
margin: 40px 0 20px;
color: #151F21;
position: relative
}

.poddetail .contentarea h2::before {
content: '';
position: absolute;
left: -40px;
top: 0;
width: 2px;
height: 100%;
background: #BDEECB;
border-radius: 0
}

.poddetail .contentarea h3 {
font-size: 23px;
line-height: 1.15;
margin: 40px 0 12px;
color: #151F21;
position: relative;
padding-left: 20px
}

.poddetail .contentarea h3::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 8px;
background: #151F21;
transform: rotate(45deg)
}

.poddetail .contentarea h4 {
font-size: 16px;
line-height: 1.7;
margin: 20px 0 12px;
color: #151F21;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em
}

.poddetail .contentarea mark {
background: #BDEECB;
color: #151F21;
padding: 2px 6px;
border-radius: 0
}

.poddetail .contentarea ul {
margin: 0 0 20px;
padding: 0 0 0 40px;
list-style: none
}

.poddetail .contentarea ul li {
font-size: 16px;
line-height: 1.7;
margin: 0 0 12px;
color: #151F21;
position: relative;
counter-increment: none
}

.poddetail .contentarea ul li::before {
content: '';
position: absolute;
left: -24px;
top: 12px;
width: 6px;
height: 6px;
background: #BDEECB;
border-radius: 50%
}

.poddetail .contentarea ol {
margin: 0 0 20px;
padding: 0 0 0 40px;
list-style: decimal
}

.poddetail .contentarea ol li {
font-size: 16px;
line-height: 1.7;
margin: 0 0 12px;
color: #151F21;
padding-left: 12px
}

.poddetail .contentarea ol li::marker {
color: #151F21;
font-weight: 600
}

.poddetail .contentarea figure {
margin: 40px 0;
padding: 0
}

.poddetail .contentarea figure img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 1px 4px 28px 0 #151f2117
}

.poddetail .contentarea figcaption {
font-size: 15px;
line-height: 1.7;
margin: 12px 0 0;
color: #151F21;
opacity: .7;
font-style: italic;
text-align: center
}

.poddetail .contentarea a {
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
display: inline
}

.poddetail .contentarea a:hover {
border-bottom-color: #151F21
}

.poddetail .compzone {
padding: 80px 20px;
background: #FAFBFA;
position: relative
}

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

.poddetail .compwrap {
max-width: 1200px;
margin: 0 auto
}

.poddetail .compheading {
font-size: 43px;
line-height: 1.15;
margin: 0 0 40px;
color: #151F21;
text-align: center;
position: relative;
padding-bottom: 20px
}

.poddetail .compheading::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: #BDEECB
}

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

.poddetail .compcard {
background: #FFF;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 1px 4px 0 #151f2114;
transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1), transform .28s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent
}

.poddetail .compcard:hover {
box-shadow: 1px 12px 60px 0 #151f211c;
transform: translateY(-4px);
border-color: #BDEECB
}

.poddetail .compcard .cardtitle {
font-size: 23px;
line-height: 1.15;
margin: 0 0 20px;
color: #151F21;
position: relative;
padding-left: 20px
}

.poddetail .compcard .cardtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background: #BDEECB;
border-radius: 50%
}

.poddetail .compcard .cardlist {
margin: 0;
padding: 0;
list-style: none
}

.poddetail .compcard .cardlist li {
font-size: 16px;
line-height: 1.7;
margin: 0 0 12px;
color: #151F21;
position: relative;
padding-left: 28px
}

.poddetail .compcard .cardlist li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 16px;
height: 2px;
background: #151F21
}

.poddetail .backtop {
display: block;
margin: 80px auto 0;
padding: 0;
background: transparent;
border: 2px solid #151F21;
border-radius: 10px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer
}

.poddetail .backtop:hover {
background: #151F21;
border-color: #151F21
}

.poddetail .backtop svg {
width: 24px;
height: 24px;
fill: #151F21;
transition: fill .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.poddetail .backtop:hover svg {
fill: #FFF
}

.poddetail .curvedline {
position: absolute;
top: 50%;
left: -60px;
width: 80px;
height: 120px;
pointer-events: none;
opacity: .3
}

.poddetail .curvedline path {
stroke: #BDEECB;
stroke-width: 2;
fill: none
}

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

.poddetail .sidebar {
padding: 20px
}

.poddetail .contentarea h2::before {
left: -20px
}
}

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

.poddetail .heroimg {
height: 360px;
margin-bottom: 20px
}

.poddetail .manifesto h1 {
font-size: 43px
}

.poddetail .manifesto .subtitle {
font-size: 16px
}

.poddetail .bodysection {
padding: 40px 20px
}

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

.poddetail .sidebar {
position: static;
margin-bottom: 40px
}

.poddetail .contentarea h2 {
font-size: 23px;
margin: 20px 0 12px
}

.poddetail .contentarea h2::before {
display: none
}

.poddetail .compzone {
padding: 40px 20px
}

.poddetail .compheading {
font-size: 23px;
margin-bottom: 20px
}

.poddetail .compgrid {
grid-template-columns: 1fr;
gap: 20px
}

.poddetail .compcard {
padding: 20px
}

.poddetail .backtop {
margin-top: 40px
}
}

@media (max-width: 576px) {
.poddetail .titlezone {
padding: 20px 12px
}

.poddetail .heroimg {
height: 240px;
margin-bottom: 12px;
border-radius: 10px
}

.poddetail .manifesto h1 {
font-size: 23px
}

.poddetail .manifesto .subtitle {
font-size: 15px
}

.poddetail .metarow {
gap: 12px
}

.poddetail .bodysection {
padding: 20px 12px
}

.poddetail .bodywrap {
gap: 20px
}

.poddetail .sidebar {
padding: 20px
}

.poddetail .contentarea h3 {
font-size: 16px;
padding-left: 16px
}

.poddetail .contentarea ul,
.poddetail .contentarea ol {
padding-left: 20px
}

.poddetail .compzone {
padding: 20px 12px
}

.poddetail .compheading {
font-size: 23px;
margin-bottom: 20px
}

.poddetail .compcard {
padding: 20px
}

.poddetail .backtop {
margin-top: 20px
}
}

.budgetreach {
max-width: 1500px;
margin: 0 auto;
background: #FFF
}

.budgetreach .opening {
background: linear-gradient(253deg, #151F21 0%, #151F21 100%);
padding: 120px 40px 80px;
position: relative;
overflow: hidden
}

.budgetreach .opening::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 8px;
height: 8px;
background: #BDEECB;
border-radius: 10px
}

.budgetreach .opening::after {
content: '';
position: absolute;
top: 20px;
left: 36px;
width: 8px;
height: 8px;
background: #BDEECB;
border-radius: 10px
}

.budgetreach .patternrow {
position: absolute;
top: 60px;
left: 20px;
display: flex;
gap: 12px
}

.budgetreach .patternrow span {
width: 6px;
height: 6px;
background: #BDEECB;
opacity: .3;
border-radius: 10px
}

.budgetreach .openinginner {
max-width: 900px;
margin: 0 auto
}

.budgetreach .openingtitle {
font-size: 58px;
line-height: 1.15;
color: #FFF;
margin: 0 0 20px;
font-weight: 700
}

.budgetreach .openingsubtitle {
font-size: 23px;
line-height: 1.7;
color: #BDEECB;
margin: 0 0 40px
}

.budgetreach .openinglinks {
display: flex;
gap: 20px;
flex-wrap: wrap
}

.budgetreach .openinglinks a {
font-size: 16px;
line-height: 1.7;
color: #FFF;
text-decoration: none;
padding: 12px 40px;
border: 2px solid #BDEECB;
border-radius: 10px;
transition: background-color .52s cubic-bezier(0.4, 0, 0.2, 1), border-color .52s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block
}

.budgetreach .openinglinks a:hover {
background: linear-gradient(90deg, #BDEECB 0%, #BDEECB 100%);
background-size: 200% 100%;
background-position: 0 0;
animation: colorsweep .6s cubic-bezier(0.0, 0, 0.2, 1) forwards;
border-color: #BDEECB;
color: #151F21
}

@keyframes colorsweep {
from {
background-position: 100% 0
}

to {
background-position: 0 0
}
}

.budgetreach .openinglinks a:focus {
outline: 2px solid #BDEECB;
outline-offset: 4px
}

.budgetreach .meshsection {
background: radial-gradient(ellipse at 20% 30%, #bdeecb26 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, #151f2114 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, #bdeecb1f 0%, transparent 60%), #FFF;
padding: 80px 40px;
position: relative
}

.budgetreach .meshsection::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 4px;
background: #BDEECB
}

.budgetreach .meshinner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 320px 1fr;
gap: 80px;
align-items: start
}

.budgetreach .contactleft {
position: sticky;
top: 40px
}

.budgetreach .contactheading {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 20px;
font-weight: 700;
position: relative;
padding-left: 40px
}

.budgetreach .contactheading::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 20px;
height: 20px;
background: #BDEECB;
border-radius: 10px
}

.budgetreach .contactintro {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 40px
}

.budgetreach .detailsblock {
background: #FFF;
border: 3px solid #151F21;
border-radius: 10px;
padding: 20px;
box-shadow: 1px 4px 28px 0 #151f2117;
position: relative
}

.budgetreach .detailsblock::before {
content: '';
position: absolute;
inset: -9px;
border: 3px solid #BDEECB;
border-radius: 10px;
pointer-events: none
}

.budgetreach .detailitem {
margin: 0 0 20px
}

.budgetreach .detailitem:last-child {
margin: 0
}

.budgetreach .detaillabel {
font-size: 15px;
line-height: 1.7;
color: #151F21;
opacity: .6;
margin: 0 0 6px;
letter-spacing: .05em;
text-transform: uppercase
}

.budgetreach .detailvalue {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.budgetreach .detailvalue a {
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
display: inline
}

.budgetreach .detailvalue a:hover {
border-bottom-color: #151F21
}

.budgetreach .detailvalue a:focus {
outline: 2px solid #151F21;
outline-offset: 4px
}

.budgetreach .formwrapper {
background: #FFF;
border: 2px solid #151F21;
border-radius: 10px;
padding: 40px;
box-shadow: 1px 12px 60px 0 #151f211c
}

.budgetreach .formtitle {
font-size: 23px;
line-height: 1.15;
color: #151F21;
margin: 0 0 12px;
font-weight: 700
}

.budgetreach .formdescription {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 40px
}

.budgetreach .inputgroup {
margin: 0 0 20px
}

.budgetreach .inputlabel {
display: block;
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0 0 6px;
font-weight: 600
}

.budgetreach .inputfield {
width: 100%;
font-size: 16px;
line-height: 1.7;
color: #151F21;
padding: 12px 20px;
border: 2px solid #151F21;
border-radius: 10px;
background: #FFF;
transition: border-color .28s cubic-bezier(0.0, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.0, 0, 0.2, 1);
box-shadow: inset 1px 1px 4px 0 #151f2114
}

.budgetreach .inputfield:focus {
outline: none;
border-color: #BDEECB;
box-shadow: inset 1px 1px 4px 0 #151f2114 0 0 0 3px #bdeecb4d
}

.budgetreach .inputfield::placeholder {
color: #151f2166
}

.budgetreach .inputfield:invalid:not(:placeholder-shown) {
animation: shake .4s cubic-bezier(0.4, 0, 0.2, 1);
border-color: #151F21
}

@keyframes shake {

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

25% {
transform: translateX(-6px)
}

75% {
transform: translateX(6px)
}
}

.budgetreach .checkboxgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 0 0 20px
}

.budgetreach .checkboxwrap {
position: relative
}

.budgetreach .checkboxinput {
position: absolute;
opacity: 0;
width: 0;
height: 0
}

.budgetreach .checkboxlabel {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
line-height: 1.7;
color: #151F21;
cursor: pointer;
padding: 12px;
border: 2px solid #151F21;
border-radius: 10px;
transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none
}

.budgetreach .checkboxlabel::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid #151F21;
border-radius: 0;
flex-shrink: 0;
transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.budgetreach .checkboxinput:checked+.checkboxlabel {
background-color: #BDEECB;
border-color: #151F21
}

.budgetreach .checkboxinput:checked+.checkboxlabel::before {
background-color: #151F21;
border-color: #151F21
}

.budgetreach .checkboxinput:focus+.checkboxlabel {
outline: 2px solid #151F21;
outline-offset: 2px
}

.budgetreach .privacywrap {
margin: 0 0 20px
}

.budgetreach .privacylabel {
display: flex;
align-items: start;
gap: 12px;
font-size: 15px;
line-height: 1.7;
color: #151F21;
cursor: pointer;
user-select: none
}

.budgetreach .privacyinput {
width: 20px;
height: 20px;
border: 2px solid #151F21;
border-radius: 0;
flex-shrink: 0;
margin-top: 4px;
cursor: pointer;
transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.budgetreach .privacyinput:checked {
background-color: #151F21
}

.budgetreach .privacyinput:focus {
outline: 2px solid #BDEECB;
outline-offset: 2px
}

.budgetreach .privacytext a {
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.budgetreach .privacytext a:hover {
border-bottom-color: #151F21
}

.budgetreach .privacytext a:focus {
outline: 2px solid #151F21;
outline-offset: 2px
}

.budgetreach .submitbutton {
width: 100%;
font-size: 16px;
line-height: 1.7;
color: #151F21;
font-weight: 600;
padding: 12px 40px;
border: 2px solid #151F21;
border-radius: 10px;
background: #FFF;
cursor: pointer;
transition: background-color .52s cubic-bezier(0.4, 0, 0.2, 1), border-color .52s cubic-bezier(0.4, 0, 0.2, 1), color .52s cubic-bezier(0.4, 0, 0.2, 1)
}

.budgetreach .submitbutton:hover {
background: linear-gradient(90deg, #BDEECB 0%, #BDEECB 100%);
background-size: 200% 100%;
background-position: 0 0;
animation: colorsweep .6s cubic-bezier(0.0, 0, 0.2, 1) forwards;
border-color: #151F21;
color: #151F21
}

.budgetreach .submitbutton:focus {
outline: 2px solid #BDEECB;
outline-offset: 4px
}

.budgetreach .submitbutton:active {
transform: scale(0.98)
}

.budgetreach .visualblock {
margin: 40px 0 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 4px 28px 0 #151f2117
}

.budgetreach .visualimage {
width: 100%;
height: 320px;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1)
}

.budgetreach .visualblock:hover .visualimage {
transform: scale(1.08)
}

@media (max-width: 1200px) {
.budgetreach .meshinner {
grid-template-columns: 280px 1fr;
gap: 60px
}

.budgetreach .contactheading {
font-size: 43px
}

.budgetreach .openingtitle {
font-size: 43px
}
}

@media (max-width: 992px) {
.budgetreach .meshinner {
grid-template-columns: 1fr;
gap: 40px
}

.budgetreach .contactleft {
position: static
}

.budgetreach .opening {
padding: 80px 40px 60px
}

.budgetreach .meshsection {
padding: 60px 40px
}

.budgetreach .formwrapper {
padding: 40px 20px
}

.budgetreach .checkboxgrid {
grid-template-columns: 1fr
}
}

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

.budgetreach .openingtitle {
font-size: 43px
}

.budgetreach .openingsubtitle {
font-size: 16px
}

.budgetreach .openinglinks {
flex-direction: column
}

.budgetreach .openinglinks a {
width: 100%;
text-align: center
}

.budgetreach .meshsection {
padding: 40px 20px
}

.budgetreach .contactheading {
font-size: 23px;
padding-left: 32px
}

.budgetreach .contactheading::before {
width: 16px;
height: 16px;
top: 6px
}

.budgetreach .formwrapper {
padding: 20px
}

.budgetreach .formtitle {
font-size: 23px
}

.budgetreach .visualimage {
height: 240px
}

.budgetreach .detailsblock {
padding: 20px
}
}

.aboutpg {
max-width: 1500px;
margin: 0 auto
}

.aboutpg .titlezone {
position: relative;
background: linear-gradient(253deg, #151F21 0%, #151F21 52%, #BDEECB 52%, #BDEECB 100%);
padding: 80px 40px;
overflow: hidden
}

.aboutpg .titlezone::before {
content: '"';
position: absolute;
top: 20px;
right: 40px;
font-size: 280px;
line-height: 1;
color: #bdeecb26;
font-weight: 700;
pointer-events: none
}

.aboutpg .titlezone .titlegrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2
}

.aboutpg .titlezone .textpart {
padding: 40px 0
}

.aboutpg .titlezone h1 {
font-size: 58px;
line-height: 1.15;
color: #FFF;
margin: 0 0 20px
}

.aboutpg .titlezone .tagline {
font-size: 23px;
line-height: 1.7;
color: #ffffffe0;
margin: 0
}

.aboutpg .titlezone .imgpart {
position: relative;
border-radius: 10px;
overflow: hidden
}

.aboutpg .titlezone .imgpart::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(0deg, #151f2108 0px, transparent 1px, transparent 2px, #151f2108 3px);
pointer-events: none
}

.aboutpg .titlezone .imgpart img {
width: 100%;
height: 520px;
object-fit: cover;
object-position: center;
display: block;
transition: transform .52s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpg .titlezone .imgpart:hover img {
transform: scale(1.06)
}

.aboutpg .storyarea {
background: #FFF;
padding: 80px 40px;
position: relative
}

.aboutpg .storyarea::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: linear-gradient(253deg, #151F21, #BDEECB)
}

.aboutpg .storyarea::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #BDEECB;
border-radius: 0;
border: 2px solid #151F21
}

.aboutpg .storyarea .twocoltext {
display: grid;
grid-template-columns: 0.8fr 2fr;
gap: 80px;
max-width: 1200px;
margin: 0 auto
}

.aboutpg .storyarea .introcol {
padding: 20px 0
}

.aboutpg .storyarea .introcol p {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 12px
}

.aboutpg .storyarea .introcol p:last-child {
margin-bottom: 0
}

.aboutpg .storyarea .maincol h2 {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 40px;
position: relative;
padding-left: 40px
}

.aboutpg .storyarea .maincol h2::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 20px;
height: 20px;
background: #BDEECB;
border-radius: 0
}

.aboutpg .storyarea .maincol p {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 20px
}

.aboutpg .storyarea .maincol p:last-child {
margin-bottom: 0
}

.aboutpg .storyarea .maincol a {
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpg .storyarea .maincol a:hover {
border-bottom-color: #151F21
}

.aboutpg .valuezone {
background: linear-gradient(253deg, #BDEECB 0%, #bdeecb66 100%);
padding: 80px 40px;
position: relative
}

.aboutpg .valuezone::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, #151f2105 35px, #151f2105 70px), repeating-linear-gradient(-45deg, transparent, transparent 35px, #151f2105 35px, #151f2105 70px);
pointer-events: none
}

.aboutpg .valuezone .valuewrap {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto
}

.aboutpg .valuezone h2 {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 80px;
text-align: center
}

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

.aboutpg .valuezone .valuecard {
background: #FFF;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 4px 28px 0 #151f2117;
position: relative;
transform-style: preserve-3d;
animation: cardflip .6s cubic-bezier(0.4, 0, 0.2, 1) backwards
}

.aboutpg .valuezone .valuecard:nth-child(1) {
animation-delay: .1s;
height: 380px
}

.aboutpg .valuezone .valuecard:nth-child(2) {
animation-delay: .24s;
height: 420px
}

.aboutpg .valuezone .valuecard:nth-child(3) {
animation-delay: .38s;
height: 360px
}

@keyframes cardflip {
0% {
transform: rotateY(90deg);
opacity: 0
}

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

.aboutpg .valuezone .valuecard::before {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 24px 24px 0;
border-color: transparent #BDEECB transparent transparent;
opacity: .4
}

.aboutpg .valuezone .valuecard h3 {
font-size: 23px;
line-height: 1.15;
color: #151F21;
margin: 0 0 20px;
position: relative;
padding-left: 32px
}

.aboutpg .valuezone .valuecard h3::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background: #151F21;
border-radius: 10px
}

.aboutpg .valuezone .valuecard p {
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.aboutpg .teamzone {
background: #151F21;
padding: 80px 40px;
position: relative
}

.aboutpg .teamzone::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(180deg, #151F21 0%, #151f2100 100%);
pointer-events: none
}

.aboutpg .teamzone .teamwrap {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2
}

.aboutpg .teamzone h2 {
font-size: 43px;
line-height: 1.15;
color: #FFF;
margin: 0 0 20px;
position: relative;
padding-left: 40px
}

.aboutpg .teamzone h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #BDEECB
}

.aboutpg .teamzone .teamintro {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
margin: 0 0 60px;
max-width: 680px
}

.aboutpg .teamzone .teamgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px
}

.aboutpg .teamzone .memberwrap {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
align-items: start
}

.aboutpg .teamzone .portraitbox {
position: relative;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 5/7
}

.aboutpg .teamzone .portraitbox img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
transition: transform .48s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpg .teamzone .portraitbox:hover img {
transform: scale(1.08)
}

.aboutpg .teamzone .memberinfo h3 {
font-size: 23px;
line-height: 1.15;
color: #FFF;
margin: 0 0 6px
}

.aboutpg .teamzone .memberinfo .role {
font-size: 15px;
line-height: 1.7;
color: #BDEECB;
margin: 0 0 20px;
letter-spacing: .04em;
text-transform: uppercase
}

.aboutpg .teamzone .memberinfo p {
font-size: 15px;
line-height: 1.7;
color: #ffffffd1;
margin: 0 0 12px
}

.aboutpg .teamzone .memberinfo p:last-child {
margin-bottom: 0
}

.aboutpg .codedemo {
background: #FFF;
padding: 80px 40px
}

.aboutpg .codedemo .demowrap {
max-width: 1200px;
margin: 0 auto
}

.aboutpg .codedemo h2 {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 40px;
text-align: center
}

.aboutpg .codedemo .splitview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
background: #f5f5f5;
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 12px 60px 0 #151f211c
}

.aboutpg .codedemo .codeside {
background: #151F21;
padding: 40px;
position: relative
}

.aboutpg .codedemo .codeside::before {
content: 'Příklad výpočtu';
position: absolute;
top: 12px;
left: 40px;
font-size: 15px;
line-height: 1.7;
color: #BDEECB;
letter-spacing: .03em
}

.aboutpg .codedemo .codeside pre {
margin: 40px 0 0;
padding: 0;
font-family: 'Courier New', monospace;
font-size: 15px;
line-height: 1.7;
color: #FFF;
white-space: pre-wrap;
word-wrap: break-word
}

.aboutpg .codedemo .outputside {
background: #FFF;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center
}

.aboutpg .codedemo .outputside h4 {
font-size: 23px;
line-height: 1.15;
color: #151F21;
margin: 0 0 20px
}

.aboutpg .codedemo .outputside .resultbox {
background: linear-gradient(253deg, #bdeecb33, #bdeecb0d);
padding: 20px;
border-radius: 10px;
border: 1px solid #151f211a;
margin: 0 0 20px
}

.aboutpg .codedemo .outputside .resultbox p {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 12px
}

.aboutpg .codedemo .outputside .resultbox p:last-child {
margin-bottom: 0
}

.aboutpg .codedemo .outputside .resultbox strong {
color: #151F21;
font-weight: 600
}

.aboutpg .codedemo .outputside .note {
font-size: 15px;
line-height: 1.7;
color: #151f21b3;
margin: 0;
font-style: italic
}

@media (max-width: 1200px) {
.aboutpg .titlezone .titlegrid {
grid-template-columns: 1fr;
gap: 40px
}

.aboutpg .titlezone .imgpart img {
height: 420px
}

.aboutpg .storyarea .twocoltext {
grid-template-columns: 1fr;
gap: 40px
}

.aboutpg .valuezone .cardgrid {
grid-template-columns: 1fr;
gap: 40px
}

.aboutpg .valuezone .valuecard:nth-child(1),
.aboutpg .valuezone .valuecard:nth-child(2),
.aboutpg .valuezone .valuecard:nth-child(3) {
height: auto
}

.aboutpg .teamzone .teamgrid {
grid-template-columns: 1fr;
gap: 60px
}

.aboutpg .codedemo .splitview {
grid-template-columns: 1fr
}
}

@media (max-width: 992px) {
.aboutpg .titlezone {
padding: 60px 20px
}

.aboutpg .titlezone h1 {
font-size: 43px
}

.aboutpg .titlezone .tagline {
font-size: 16px
}

.aboutpg .storyarea {
padding: 60px 20px
}

.aboutpg .storyarea .twocoltext {
gap: 40px
}

.aboutpg .storyarea .maincol h2 {
font-size: 23px;
margin-bottom: 20px
}

.aboutpg .valuezone {
padding: 60px 20px
}

.aboutpg .valuezone h2 {
font-size: 23px;
margin-bottom: 40px
}

.aboutpg .valuezone .cardgrid {
gap: 20px
}

.aboutpg .valuezone .valuecard {
padding: 20px
}

.aboutpg .teamzone {
padding: 60px 20px
}

.aboutpg .teamzone h2 {
font-size: 23px
}

.aboutpg .teamzone .memberwrap {
grid-template-columns: 1fr;
gap: 20px
}

.aboutpg .teamzone .portraitbox {
max-width: 280px;
margin: 0 auto
}

.aboutpg .codedemo {
padding: 60px 20px
}

.aboutpg .codedemo h2 {
font-size: 23px
}

.aboutpg .codedemo .codeside,
.aboutpg .codedemo .outputside {
padding: 20px
}
}

@media (max-width: 576px) {
.aboutpg .titlezone {
padding: 40px 12px;
background: linear-gradient(253deg, #151F21 0%, #151F21 60%, #BDEECB 60%, #BDEECB 100%)
}

.aboutpg .titlezone::before {
font-size: 180px;
right: 12px
}

.aboutpg .titlezone h1 {
font-size: 23px
}

.aboutpg .titlezone .tagline {
font-size: 15px
}

.aboutpg .titlezone .imgpart img {
height: 320px
}

.aboutpg .storyarea {
padding: 40px 12px
}

.aboutpg .storyarea .twocoltext {
gap: 20px
}

.aboutpg .valuezone {
padding: 40px 12px
}

.aboutpg .valuezone h2 {
margin-bottom: 20px
}

.aboutpg .teamzone {
padding: 40px 12px
}

.aboutpg .teamzone .teamgrid {
gap: 40px
}

.aboutpg .codedemo {
padding: 40px 12px
}

.aboutpg .codedemo .splitview {
gap: 20px
}
}

.debut {
max-width: 1500px;
margin: 0 auto;
background: #FFF
}

.debut .splitlanding {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
position: relative;
overflow: hidden
}

.debut .splitlanding .leftzone {
background: #151F21;
padding: 80px 40px 80px 80px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative
}

.debut .splitlanding .rightzone {
background: #BDEECB;
padding: 80px 80px 80px 40px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}

.debut .splitlanding .rightzone::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 60px;
border-left: 3px solid #151f2126;
border-top: 3px solid #151f2126;
pointer-events: none
}

.debut .splitlanding .rightzone::after {
content: '';
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-right: 3px solid #151f2126;
border-bottom: 3px solid #151f2126;
pointer-events: none
}

.debut .splitlanding .manifesto {
font-size: 23px;
line-height: 1.7;
color: #FFF;
max-width: 520px
}

.debut .splitlanding .manifesto .accentword {
color: #BDEECB
}

.debut .splitlanding .decorshape {
width: 280px;
height: 280px;
background: linear-gradient(253deg, #151f2114, #bdeecb1f);
border-radius: 10px;
transform: rotate(12deg);
animation: tempshift 18s ease-in-out infinite
}

@keyframes tempshift {

0%,
100% {
background: linear-gradient(253deg, #151f2114, #bdeecb1f)
}

50% {
background: linear-gradient(253deg, #bdeecb1f, #151f2114)
}
}

.debut .offerings {
padding: 80px 40px;
background: linear-gradient(180deg, #FFF 0%, #F5FDF8 100%);
position: relative
}

.debut .offerings::after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #bdeecb66 50%, transparent 100%)
}

.debut .offerings .offercontain {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 300px 1fr;
gap: 80px;
align-items: start
}

.debut .offerings .offerhead {
font-size: 43px;
line-height: 1.15;
color: #151F21;
position: sticky;
top: 20px
}

.debut .offerings .offerhead::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #BDEECB;
margin-right: 12px;
vertical-align: middle;
border-radius: 10px
}

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

.debut .offerings .offercard {
background: #FFF;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 4px 28px 0 #151f2117;
transition: transform .52s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .52s cubic-bezier(0.4, 0, 0.2, 1);
position: relative
}

.debut .offerings .offercard:hover {
transform: translateY(-12px);
box-shadow: 1px 12px 60px 0 #151f211c
}

.debut .offerings .offercard::before {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-top: 2px solid #bdeecb4d;
border-right: 2px solid #bdeecb4d;
pointer-events: none
}

.debut .offerings .offercard .cardtitle {
font-size: 23px;
line-height: 1.15;
color: #151F21;
margin: 0 0 20px
}

.debut .offerings .offercard .carddesc {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0 0 20px
}

.debut .offerings .offercard .cardimg {
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 10px;
position: relative;
margin-bottom: 20px
}

.debut .offerings .offercard .cardimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.debut .offerings .offercard .cardimg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(180deg, transparent 0%, #ffffffb3 100%);
pointer-events: none
}

.debut .investment {
padding: 80px 40px;
background: #FFF;
position: relative
}

.debut .investment .investcontain {
max-width: 900px;
margin: 0 0 0 auto;
padding-right: 80px
}

.debut .investment .investhead {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 40px
}

.debut .investment .investcols {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 40px
}

.debut .investment .investintro {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.debut .investment .investdetail {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.debut .investment .pricetiers {
display: flex;
flex-direction: column;
gap: 20px
}

.debut .investment .tieritem {
display: grid;
grid-template-columns: 200px 1fr 140px;
gap: 20px;
align-items: center;
padding: 20px;
background: linear-gradient(253deg, #bdeecb14, #ffffff80);
border-radius: 10px;
border: 1px solid #bdeecb4d;
transition: border-color .48s cubic-bezier(0.4, 0, 0.2, 1), background .48s cubic-bezier(0.4, 0, 0.2, 1)
}

.debut .investment .tieritem:hover {
border-color: #BDEECB;
background: linear-gradient(253deg, #bdeecb26, #fffc)
}

.debut .investment .tierlabel {
font-size: 16px;
line-height: 1.15;
color: #151F21;
font-weight: 600;
margin: 0
}

.debut .investment .tierdesc {
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.debut .investment .tierprice {
font-size: 23px;
line-height: 1.15;
color: #151F21;
text-align: right;
margin: 0
}

.debut .conditions {
padding: 80px 40px;
background: #151F21;
position: relative
}

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

.debut .conditions .condcontain {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px
}

.debut .conditions .condhead {
font-size: 43px;
line-height: 1.15;
color: #FFF;
margin: 0 0 40px;
grid-column: 1 / -1
}

.debut .conditions .condcard {
background: #bdeecb0d;
padding: 40px;
border-radius: 10px;
border: 1px solid #bdeecb26;
position: relative;
transition: transform .56s cubic-bezier(0.0, 0, 0.2, 1), border-color .56s cubic-bezier(0.0, 0, 0.2, 1)
}

.debut .conditions .condcard:hover {
transform: translateY(-8px);
border-color: #bdeecb66
}

.debut .conditions .condcard::before {
content: '';
position: absolute;
bottom: 12px;
left: 12px;
width: 35px;
height: 35px;
border-bottom: 2px solid #bdeecb33;
border-left: 2px solid #bdeecb33;
pointer-events: none
}

.debut .conditions .condnum {
font-size: 58px;
line-height: 1.15;
color: #BDEECB;
margin: 0 0 20px;
opacity: .4
}

.debut .conditions .condtitle {
font-size: 23px;
line-height: 1.15;
color: #FFF;
margin: 0 0 12px
}

.debut .conditions .conddesc {
font-size: 16px;
line-height: 1.7;
color: #ffffffd9;
margin: 0
}

.debut .distinction {
padding: 80px 40px;
background: linear-gradient(180deg, #F5FDF8 0%, #FFF 100%);
position: relative
}

.debut .distinction .distcontain {
max-width: 1200px;
margin: 0 auto
}

.debut .distinction .disthead {
font-size: 43px;
line-height: 1.15;
color: #151F21;
margin: 0 0 40px;
max-width: 700px
}

.debut .distinction .disthead .bracketword {
color: #151F21;
position: relative
}

.debut .distinction .disthead .bracketword::before {
content: '[';
color: #BDEECB;
margin-right: 6px
}

.debut .distinction .disthead .bracketword::after {
content: ']';
color: #BDEECB;
margin-left: 6px
}

.debut .distinction .distlayout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start
}

.debut .distinction .disttext {
display: flex;
flex-direction: column;
gap: 20px
}

.debut .distinction .disttext p {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin: 0
}

.debut .distinction .disttext .listblock {
margin: 20px 0 0
}

.debut .distinction .disttext .listblock ol {
margin: 0;
padding-left: 20px;
list-style: decimal
}

.debut .distinction .disttext .listblock li {
font-size: 16px;
line-height: 1.7;
color: #151F21;
margin-bottom: 12px
}

.debut .distinction .disttext .listblock li::marker {
color: #BDEECB;
font-weight: 600
}

.debut .distinction .disttext .linktext {
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
display: inline
}

.debut .distinction .disttext .linktext:hover {
border-color: #151F21
}

.debut .distinction .distvisual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px
}

.debut .distinction .distimg {
width: 100%;
height: 240px;
overflow: hidden;
border-radius: 10px;
position: relative
}

.debut .distinction .distimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.debut .distinction .distimg::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent 0%, #bdeecb26 100%);
pointer-events: none
}

.debut .distinction .distimg.tall {
grid-row: span 2;
height: 500px
}

.debut .distinction .profilebox {
background: #FFF;
padding: 20px;
border-radius: 10px;
box-shadow: 1px 1px 4px 0 #151f2114;
display: flex;
align-items: center;
gap: 20px
}

.debut .distinction .profileimg {
width: 80px;
height: 112px;
overflow: hidden;
border-radius: 10px;
flex-shrink: 0
}

.debut .distinction .profileimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.debut .distinction .profileinfo {
display: flex;
flex-direction: column;
gap: 6px
}

.debut .distinction .profilename {
font-size: 16px;
line-height: 1.15;
color: #151F21;
font-weight: 600;
margin: 0
}

.debut .distinction .profilerole {
font-size: 15px;
line-height: 1.7;
color: #151f21b3;
margin: 0;
letter-spacing: .02em
}

@media (max-width: 1200px) {
.debut .splitlanding {
grid-template-columns: 1fr
}

.debut .splitlanding .leftzone {
padding: 40px
}

.debut .splitlanding .rightzone {
padding: 40px;
min-height: 300px
}

.debut .offerings .offercontain {
grid-template-columns: 1fr;
gap: 40px
}

.debut .offerings .offerhead {
position: static
}

.debut .distinction .distlayout {
grid-template-columns: 1fr;
gap: 40px
}
}

@media (max-width: 992px) {
.debut .offerings .offergrid {
grid-template-columns: 1fr
}

.debut .investment .investcontain {
padding-right: 0
}

.debut .investment .investcols {
grid-template-columns: 1fr
}

.debut .investment .tieritem {
grid-template-columns: 1fr;
gap: 12px
}

.debut .investment .tierprice {
text-align: left
}

.debut .conditions .condcontain {
grid-template-columns: 1fr
}

.debut .distinction .distvisual {
grid-template-columns: 1fr
}

.debut .distinction .distimg.tall {
grid-row: span 1;
height: 240px
}
}

@media (max-width: 576px) {
.debut .splitlanding {
min-height: auto
}

.debut .splitlanding .leftzone {
padding: 40px 20px
}

.debut .splitlanding .rightzone {
padding: 40px 20px
}

.debut .splitlanding .manifesto {
font-size: 16px
}

.debut .offerings {
padding: 40px 20px
}

.debut .offerings .offerhead {
font-size: 23px
}

.debut .offerings .offercard {
padding: 20px
}

.debut .investment {
padding: 40px 20px
}

.debut .investment .investhead {
font-size: 23px
}

.debut .conditions {
padding: 40px 20px
}

.debut .conditions .condhead {
font-size: 23px
}

.debut .conditions .condcard {
padding: 20px
}

.debut .conditions .condnum {
font-size: 43px
}

.debut .distinction {
padding: 40px 20px
}

.debut .distinction .disthead {
font-size: 23px
}
}

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

.pdcst .topzone {
position: relative;
overflow: hidden;
padding: 80px 20px 120px;
background: linear-gradient(253deg, #151F21 0%, #BDEECB 100%)
}

.pdcst .topzone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, #ffffff0d 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none
}

.pdcst .topimg {
width: 100%;
max-width: 900px;
height: 380px;
margin: 0 auto 40px;
display: block;
object-fit: cover;
object-position: center;
filter: grayscale(100%);
box-shadow: 1px 12px 60px 0 #151f211c;
border-radius: 10px
}

.pdcst .toptext {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: #FFF
}

.pdcst .tophead {
font-size: 58px;
line-height: 1.15;
margin: 0 0 20px;
font-weight: 700
}

.pdcst .topnum {
color: #BDEECB;
font-weight: 800
}

.pdcst .topdesc {
font-size: 16px;
line-height: 1.7;
margin: 0;
opacity: .95
}

.pdcst .curveline {
position: relative;
height: 120px;
overflow: hidden;
background: #FFF
}

.pdcst .curveline svg {
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 124px;
fill: none;
stroke: #151F21;
stroke-width: 2;
opacity: .15
}

.pdcst .listzone {
padding: 80px 20px;
background: #FFF;
position: relative
}

.pdcst .listhead {
font-size: 43px;
line-height: 1.15;
margin: 0 0 40px;
text-align: center;
color: #151F21;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px
}

.pdcst .listhead::before {
content: '';
width: 12px;
height: 12px;
background: #BDEECB;
border-radius: 0;
flex-shrink: 0
}

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

.pdcst .epcard {
background: #FFF;
border: 1px solid #151f211f;
border-radius: 10px;
overflow: hidden;
transition: box-shadow .52s cubic-bezier(0.4, 0, 0.2, 1), border-color .52s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 1px 1px 4px 0 #151f2114;
display: flex;
flex-direction: column
}

.pdcst .epcard:hover {
box-shadow: 1px 12px 60px 0 #151f211c;
border-color: #bdeecb66
}

.pdcst .epimg {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center;
display: block
}

.pdcst .epcontent {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column
}

.pdcst .eptags {
display: flex;
gap: 6px;
margin: 0 0 12px;
flex-wrap: wrap
}

.pdcst .eptag {
font-size: 15px;
line-height: 1.15;
padding: 6px 12px;
background: #bdeecb33;
color: #151F21;
border-radius: 10px;
font-weight: 500;
letter-spacing: .02em
}

.pdcst .eptitle {
font-size: 23px;
line-height: 1.15;
margin: 0 0 12px;
color: #151F21;
font-weight: 700
}

.pdcst .epsub {
font-size: 16px;
line-height: 1.7;
margin: 0 0 12px;
color: #151F21;
opacity: .7
}

.pdcst .epdesc {
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
color: #151F21;
flex-grow: 1
}

.pdcst .epmeta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0 0;
border-top: 1px solid #151f2114;
font-size: 15px;
line-height: 1.15;
color: #151F21;
opacity: .6
}

.pdcst .epauthor {
font-weight: 600
}

.pdcst .eplink {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 20px;
border: 2px solid #151F21;
background: transparent;
color: #151F21;
font-size: 16px;
line-height: 1.15;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: background-color .48s cubic-bezier(0.4, 0, 0.2, 1), color .48s cubic-bezier(0.4, 0, 0.2, 1), border-color .48s cubic-bezier(0.4, 0, 0.2, 1);
margin: 12px 0 0
}

.pdcst .eplink:hover {
background: #151F21;
color: #FFF;
border-color: #151F21
}

.pdcst .processzone {
padding: 80px 20px;
background: #FAFBFC;
position: relative;
overflow: hidden
}

.pdcst .processzone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(253deg, #bdeecb26 0%, #fff0 100%);
pointer-events: none;
animation: bgshift 15s linear infinite
}

@keyframes bgshift {
0% {
opacity: .3
}

50% {
opacity: .6
}

100% {
opacity: .3
}
}

.pdcst .processhead {
font-size: 43px;
line-height: 1.15;
margin: 0 0 40px;
text-align: center;
color: #151F21;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px
}

.pdcst .processhead::before {
content: '';
width: 16px;
height: 16px;
background: #151F21;
border-radius: 0;
flex-shrink: 0
}

.pdcst .flowsteps {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1
}

.pdcst .flowstep {
flex: 1;
padding: 40px 20px;
background: #FFF;
border: 2px solid #151f211a;
border-radius: 10px;
text-align: center;
box-shadow: 1px 4px 28px 0 #151f2117;
transition: transform .56s cubic-bezier(0.0, 0, 0.2, 1), box-shadow .56s cubic-bezier(0.0, 0, 0.2, 1)
}

.pdcst .flowstep:hover {
transform: translateY(-6px);
box-shadow: 1px 12px 60px 0 #151f211c
}

.pdcst .flownum {
font-size: 43px;
line-height: 1.15;
font-weight: 800;
color: #BDEECB;
margin: 0 0 12px
}

.pdcst .flowtitle {
font-size: 23px;
line-height: 1.15;
margin: 0 0 12px;
color: #151F21;
font-weight: 700
}

.pdcst .flowdesc {
font-size: 16px;
line-height: 1.7;
margin: 0;
color: #151F21;
opacity: .7
}

.pdcst .flowarrow {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center
}

.pdcst .flowarrow svg {
width: 100%;
height: 100%;
fill: #151F21;
opacity: .3
}

.pdcst .dividerline {
height: 1px;
background: #151f211a;
position: relative;
margin: 80px 0
}

.pdcst .dividerline::before,
.pdcst .dividerline::after {
content: '';
position: absolute;
top: -4px;
width: 1px;
height: 9px;
background: #151f211a
}

.pdcst .dividerline::before {
left: 20%
}

.pdcst .dividerline::after {
right: 20%
}

.pdcst .benefitzone {
padding: 80px 20px;
background: url(/visual_resources/features_3_5.jpg) center / cover no-repeat;
position: relative;
overflow: hidden
}

.pdcst .benefitzone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffffeb;
pointer-events: none
}

.pdcst .benefitcontent {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start
}

.pdcst .benefitleft {
position: sticky;
top: 40px
}

.pdcst .benefithead {
font-size: 43px;
line-height: 1.15;
margin: 0 0 20px;
color: #151F21;
font-weight: 700
}

.pdcst .benefitintro {
font-size: 16px;
line-height: 1.7;
margin: 0;
color: #151F21;
opacity: .7
}

.pdcst .benefitright {
display: flex;
flex-direction: column;
gap: 40px
}

.pdcst .benefititem {
padding: 40px;
background: #fffffff2;
border: 1px solid #151f2114;
border-radius: 10px;
box-shadow: 1px 4px 28px 0 #151f2117;
transition: transform .44s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .44s cubic-bezier(0.4, 0, 0.2, 1)
}

.pdcst .benefititem:hover {
transform: translateX(12px);
box-shadow: 1px 12px 60px 0 #151f211c
}

.pdcst .benefittitle {
font-size: 23px;
line-height: 1.15;
margin: 0 0 12px;
color: #151F21;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px
}

.pdcst .benefittitle::before {
content: '';
width: 8px;
height: 8px;
background: #BDEECB;
border-radius: 0;
flex-shrink: 0
}

.pdcst .benefittext {
font-size: 16px;
line-height: 1.7;
margin: 0;
color: #151F21
}

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

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

.pdcst .benefitleft {
position: static
}

.pdcst .flowsteps {
flex-direction: column;
gap: 20px
}

.pdcst .flowarrow {
transform: rotate(90deg)
}
}

@media (max-width: 992px) {
.pdcst .topzone {
padding: 40px 20px 80px
}

.pdcst .tophead {
font-size: 43px
}

.pdcst .topimg {
height: 280px;
margin-bottom: 20px
}

.pdcst .listzone {
padding: 40px 20px
}

.pdcst .listhead,
.pdcst .processhead,
.pdcst .benefithead {
font-size: 23px
}

.pdcst .episodes {
gap: 20px
}

.pdcst .processzone,
.pdcst .benefitzone {
padding: 40px 20px
}

.pdcst .dividerline {
margin: 40px 0
}

.pdcst .flowstep {
padding: 20px
}

.pdcst .benefititem {
padding: 20px
}
}

@media (max-width: 576px) {
.pdcst .episodes {
grid-template-columns: 1fr;
gap: 20px
}

.pdcst .tophead {
font-size: 23px
}

.pdcst .topimg {
height: 200px
}

.pdcst .epimg {
height: 180px
}

.pdcst .epcontent {
padding: 12px
}

.pdcst .eptitle {
font-size: 16px
}

.pdcst .epdesc {
font-size: 15px
}

.pdcst .flownum {
font-size: 23px
}

.pdcst .flowtitle,
.pdcst .benefittitle {
font-size: 16px
}

.pdcst .benefitcontent {
gap: 20px
}
}

.successpage {
max-width: 1500px;
margin: 0 auto;
padding: 80px 20px;
background: linear-gradient(253deg, #151F21, #BDEECB)
}

.successpage .confirmbox {
background: #FFF;
border-radius: 10px;
padding: 80px 40px;
max-width: 720px;
margin: 0 auto;
box-shadow: 1px 12px 60px 0 #151f211c
}

.successpage .iconwrap {
width: 86px;
height: 86px;
margin: 0 auto 40px;
border: 3px solid #BDEECB;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #bdeecb1f
}

.successpage .iconwrap svg {
width: 48px;
height: 48px
}

.successpage .mainhead {
font-size: 43px;
line-height: 1.15;
text-align: center;
color: #151F21;
margin: 0 0 20px
}

.successpage .leadtext {
font-size: 16px;
line-height: 1.7;
text-align: center;
color: #151F21;
margin: 0 0 40px;
opacity: .82
}

.successpage .detailgrid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 40px;
padding: 40px 0;
border-top: 1px solid #151f211c;
border-bottom: 1px solid #151f211c
}

.successpage .detailrow {
display: flex;
align-items: flex-start;
gap: 12px
}

.successpage .detailrow svg {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 2px
}

.successpage .detailrow span {
font-size: 15px;
line-height: 1.7;
color: #151F21
}

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

.successpage .primarybtn {
display: inline-block;
padding: 20px 40px;
background: #151F21;
color: #FFF;
font-size: 16px;
border: 2px solid #151F21;
border-radius: 10px;
text-decoration: none;
transition: background .24s cubic-bezier(0.4, 0, 0.2, 1), border-color .24s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer
}

.successpage .primarybtn:hover {
background: #BDEECB;
border-color: #BDEECB;
color: #151F21
}

.successpage .secondlink {
display: inline-block;
font-size: 15px;
color: #151F21;
text-decoration: none;
border-bottom: 3px solid #BDEECB;
padding-bottom: 2px;
transition: border-color .22s cubic-bezier(0.0, 0, 0.2, 1)
}

.successpage .secondlink:hover {
border-bottom-color: #151F21
}

.successpage .contactinfo {
margin-top: 80px;
padding-top: 40px;
border-top: 1px solid #151f211c;
text-align: center
}

.successpage .contactinfo p {
font-size: 15px;
line-height: 1.7;
color: #151F21;
margin: 0 0 12px;
opacity: .74
}

.successpage .contactinfo a {
color: #151F21;
text-decoration: none;
border-bottom: 2px solid #BDEECB;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.successpage .contactinfo a:hover {
border-bottom-color: #151F21
}

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

.successpage .confirmbox {
padding: 40px 20px
}

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

.successpage .iconwrap {
width: 64px;
height: 64px;
margin-bottom: 20px
}

.successpage .iconwrap svg {
width: 36px;
height: 36px
}

.successpage .detailgrid {
padding: 20px 0
}

.successpage .contactinfo {
margin-top: 40px;
padding-top: 20px
}
}