:root {
--deep: #1E322A;
--deep2: #14231D;
--mint: #16C5A4;
--mint-d: #0CA78A;
--bg: #F4F7F5;
--card: #FFFFFF;
--line: #E2EAE6;
--ink: #1E322A;
--muted: #5C7268;
}
* {
box-sizing: border-box;
margin: 0;	
padding: 0
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px
}
body {
background: var(--bg);
color: var(--ink);
font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding-bottom: 0
}
.wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px
}
section {
padding: 66px 0
}
h1,
h2,
h3,
h4 {
line-height: 1.13;
letter-spacing: -.02em
}
h1 {
font-size: clamp(33px, 6.2vw, 60px);
font-weight: 800
}
h2 {
font-size: clamp(28px, 4.6vw, 45px);
font-weight: 800
}
h3 {
font-size: 21px;
font-weight: 700
}
.lead {
font-size: clamp(17px, 2.2vw, 21px);	
color: var(--muted);
max-width: 720px;
margin-top: 16px
}
.mint {
color: var(--mint)
}
.eyebrow {
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mint-d);
margin-bottom: 16px
} header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(244, 247, 245, .95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line)
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;	
padding: 13px 10px;
}
.logo {
font-weight: 800;
letter-spacing: .13em;
font-size: 15px;
text-transform: uppercase;
color: var(--deep);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid var(--mint);
padding-bottom: 2px
}
.nav-links {
display: none;
gap: 22px
}
.nav-links a {
color: var(--muted);
text-decoration: none;
font-size: 15px;
font-weight: 600;
white-space: nowrap
}
.nav-links a:hover {
color: var(--deep)
}
@media(min-width:960px) {
.nav-links {
display: flex
}
}
.btn {
display: inline-block;
background: var(--mint);
color: var(--deep);
font-weight: 700;
text-decoration: none;
padding: 14px 22px;
border-radius: 14px;
font-size: 16px;
transition: .15s;
border: 0;
cursor: pointer;
font-family: inherit
}
.btn:hover {
background: var(--mint-d);
color: #fff
}
.btn-ghost {
background: transparent;
border: 2px solid rgba(255, 255, 255, .28);
color: #fff
}
.btn-ghost:hover {
background: rgba(255, 255, 255, .1);
color: #fff
}
.btn-sm {
padding: 11px 16px;
font-size: 15px;
border-radius: 12px
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px
} .ph {
position: relative;
width: 100%;
aspect-ratio: 16/10;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #2A4238, #1E322A);
display: flex;
align-items: center;
justify-content: center
}
.ph::after {
content: attr(data-label);
position: absolute;
color: rgba(255, 255, 255, .34);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-align: center;
padding: 0 10px
}
.ph img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
display: block
} .hero {
position: relative;
background: var(--deep);
color: #fff;
padding: 76px 0 62px;
overflow: hidden
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .3
}
.hero .wrap {
position: relative;
z-index: 2
}
.hero h1 {
color: #fff;
max-width: 14ch
}
.hero .lead {
color: #D3E0DB
}
.countdown {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(22, 197, 164, .16);
border: 1px solid rgba(22, 197, 164, .4);
color: var(--mint);
border-radius: 999px;
padding: 8px 16px;
font-size: 14.5px;
font-weight: 700;
margin-bottom: 20px
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
animation: pulse 2s infinite
}
@keyframes pulse {
0%,
100% {
opacity: 1
}
50% {
opacity: .35
}
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 32px
}
.stat {
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 16px;
padding: 15px 21px;
backdrop-filter: blur(4px)
}
.stat b {
display: block;
font-size: 26px;
font-weight: 800;
color: var(--mint);
letter-spacing: -.02em
}
.stat span {
color: #B8CCC4;
font-size: 14px
}
.roles {
display: flex;
gap: 28px;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .16)
}
.role b {
display: block;
font-size: 19px;
font-weight: 800
}
.role span {
color: #B8CCC4;
font-size: 14.5px
} .co-top {
display: grid;
gap: 26px;
align-items: center
}
@media(min-width:860px) {
.co-top {
grid-template-columns: 1.05fr .95fr
}
}
.seen {
display: grid;
gap: 0;
margin-top: 28px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden
}
@media(min-width:700px) {
.seen {
grid-template-columns: 1fr 1fr
}
}
.seen div {
padding: 16px 21px;
border-bottom: 1px solid var(--line);
font-weight: 600;
font-size: 16px
}
@media(min-width:700px) {
.seen div:nth-child(2n) {
border-left: 1px solid var(--line)
}
}
.seen div:last-child,
.seen div:nth-last-child(2) {
border-bottom: 0
}
.statement {
margin-top: 28px;
font-size: clamp(20px, 2.8vw, 27px);
font-weight: 800;
line-height: 1.28;
max-width: 24ch
} .comp {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 23px;
display: flex;
gap: 17px;
margin-top: 13px
}
.comp .n {
flex: 0 0 auto;
width: 37px;
height: 37px;
border-radius: 11px;
background: var(--deep);
color: var(--mint);
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px
}
.comp p {
color: var(--muted);
margin-top: 6px
}
.circle {
margin-top: 20px;
background: var(--deep);
color: #fff;
border-radius: 18px;
padding: 22px 24px
}
.circle .eyebrow {
color: var(--mint);
margin-bottom: 8px
}
.circle p {
color: #C6D6CF;
font-size: 16.5px
} .illu {
margin-top: 16px;
background: #E8F1ED;
border: 1px solid #D2E3DC;
border-radius: 20px;
padding: 26px 24px
}
.illu .tagline {
font-size: 13px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mint-d);
margin-bottom: 6px
}
.illu h4 {
font-size: clamp(21px, 3vw, 28px);
font-weight: 800
}
.illu .sub {
color: var(--muted);
margin-top: 8px
}
.dates {
display: grid;
gap: 10px;
margin: 20px 0 4px
}
@media(min-width:640px) {
.dates {
grid-template-columns: 1fr 1fr
}
}
.date {
background: var(--deep);
color: #fff;
border-radius: 14px;
padding: 15px 18px
}
.date b {
display: block;
font-size: 19px;
font-weight: 800
}
.date span {
color: #B9CCC4;
font-size: 14.5px
}
.grid {
display: grid;
gap: 14px;
margin-top: 18px
}
@media(min-width:640px) {
.grid {
grid-template-columns: 1fr 1fr
}
}
@media(min-width:980px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr)
}
}
.item {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px
}
.item .n {
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
color: var(--mint-d);
text-transform: uppercase;
margin-top: 4px
}
.item h5 {
font-size: 17.5px;
font-weight: 700;
line-height: 1.25
}
.item .facts {
color: var(--muted);
font-size: 15px;
flex: 1
}
.item .val {
font-weight: 800;
font-size: 19px
}
.item .val small {
display: block;
font-weight: 600;
color: var(--muted);
font-size: 13.5px;
letter-spacing: 0
}
.item a.go {
margin-top: 2px;
font-weight: 700;
color: var(--mint-d);
text-decoration: none;
font-size: 15px
}
.item a.go:hover {
color: var(--deep)
}
.chip {
align-self: flex-start;
background: #FDF2E3;
color: #8A5A16;
font-size: 12.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px
}
.fine {
margin-top: 18px;
color: var(--muted);
font-size: 15px;
line-height: 1.5
} .dark {
background: var(--deep);
color: #fff
}
.dark h2 {
color: #fff
}
.dark .lead {
color: #C6D6CF
}
.path {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-top: 28px
}
.step {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 12px;
padding: 11px 16px;
font-weight: 700;
font-size: 15.5px
}
.step.last {
background: var(--mint);
color: var(--deep);
border-color: var(--mint)
}
.arrow {
color: #5E7B70;
font-weight: 800
}
.cycle {
margin-top: 26px;
display: flex;	
align-items: end;
gap: 14px;
flex-wrap: wrap
}
.cycle b {
font-size: 44px;
font-weight: 800;
color: var(--mint);
letter-spacing: -.03em
}
.cycle span {
color: #C6D6CF;
max-width: 34ch
} .budget {
display: grid;
gap: 12px;
margin-top: 26px
}
@media(min-width:700px) {
.budget {
grid-template-columns: repeat(3, 1fr)
}
}
.bline {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px
}
.bline b {
display: block;
font-size: 29px;
font-weight: 800;
letter-spacing: -.02em
}
.bline span {
color: var(--muted);
font-size: 15px
}
.total {
background: var(--deep);
color: #fff;
border-radius: 16px;
padding: 21px 24px;
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
align-items: baseline
}
.total b {
font-size: 36px;
font-weight: 800;
color: var(--mint);
letter-spacing: -.02em
}
.total span {
color: #C6D6CF
}
.after {
display: grid;
gap: 12px;
margin-top: 12px
}
@media(min-width:700px) {
.after {
grid-template-columns: repeat(3, 1fr)
}
}
.aft {
background: #E8F1ED;
border-radius: 16px;
padding: 18px 20px
}
.aft b {
display: block;
font-size: 27px;
font-weight: 800;
color: var(--mint-d)
}
.aft span {
color: var(--muted);
font-size: 14.5px
} .ways {
display: grid;
gap: 16px;
margin-top: 26px
}
@media(min-width:860px) {
.ways {
grid-template-columns: 1fr 1fr
}
}
.way {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 26px;
display: flex;
flex-direction: column
}
.way.accent {
background: var(--deep);
color: #fff;
border-color: var(--deep)
}
.way.accent p {
color: #C6D6CF
}
.way h3 {
margin-bottom: 8px
}
.way p {
color: var(--muted);
flex: 1
}
.way .btn {
margin-top: 18px;
align-self: flex-start
}
.quote {
background: var(--mint);
color: var(--deep);
border-radius: 20px;
padding: 26px;
font-size: clamp(19px, 2.5vw, 24px);
font-weight: 800;
line-height: 1.32;
margin-top: 26px
}
.quote small {
display: block;
margin-top: 12px;
font-size: 16px;
font-weight: 600;
line-height: 1.45
} .fit {
display: grid;
gap: 16px;
margin-top: 26px
}
@media(min-width:800px) {
.fit {
grid-template-columns: 1fr 1fr
}
}
.fitbox {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 24px
}
.fitbox h3 {
margin-bottom: 12px
}
.fitbox ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px
}
.fitbox li {
padding-left: 26px;
position: relative;
color: var(--muted)
}
.fitbox li::before {
position: absolute;
left: 0;
font-weight: 800
}
.yes li::before {
content: "✓";
color: var(--mint-d)
}
.no li::before {
content: "—";
color: #B4432E
} details {
background: var(--card);
border: 1px solid var(--line);
border-radius: 15px;
padding: 0;
margin-top: 11px;
overflow: hidden
}
summary {
padding: 19px 22px;
font-weight: 700;
cursor: pointer;
list-style: none;
font-size: 17.5px;
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start
}
summary::-webkit-details-marker {
display: none
}
summary::after {
content: "+";
color: var(--mint-d);
font-weight: 800;
font-size: 22px;
line-height: 1;
flex: 0 0 auto
}
details[open] summary::after {
content: "–"
}
details p {
padding: 0 22px 20px;
color: var(--muted)
} .final {
background: var(--deep2);
color: #fff;
padding: 66px 0
}
.final h2 {
color: #fff
}
.fgrid {
display: grid;
gap: 26px;
margin-top: 30px
}
@media(min-width:880px) {
.fgrid {
grid-template-columns: 1.05fr .95fr
}
}
.form {
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
padding: 24px
}
.form label {
display: block;
font-size: 14px;
font-weight: 700;
color: #B8CCC4;
margin: 14px 0 6px
}
.form label:first-of-type {
margin-top: 0
}
.form input,
.form select {
width: 100%;
padding: 13px 15px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(0, 0, 0, .22);
color: #fff;
font-size: 16px;
font-family: inherit
}
.form input::placeholder {
color: #7E958C
}
.form select option {
background: var(--deep2);
color: #fff
}
.form .btn {
width: 100%;
margin-top: 20px;
text-align: center;
padding: 16px
}
.form .hint {
margin-top: 12px;
font-size: 13.5px;
color: #8CA79C;
line-height: 1.45
}
.next {
background: rgba(255, 255, 255, .07);
border-radius: 18px;
padding: 22px 24px;
margin-top: 16px
}
.next b {
display: block;
margin-bottom: 10px
}
.next ol {
margin-left: 19px;
color: #C6D6CF;
display: flex;
flex-direction: column;
gap: 7px
}
.who {
margin-bottom: 18px
}
.who b {
display: block;
font-size: 19px
}
.who span {
color: #B9CCC4;
font-size: 15px
}
.contacts {
display: flex;
flex-direction: column;
gap: 11px
}
.contact {
background: rgba(255, 255, 255, .07);
border-radius: 14px;
padding: 15px 18px
}
.contact span {
display: block;
color: #9FB8AE;
font-size: 13px;
margin-bottom: 3px
}
.contact a {
color: #fff;
text-decoration: none;
font-weight: 700
} .sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
background: rgba(20, 35, 29, .97);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 10px 14px;
display: flex;
gap: 9px
}
.sticky a {
flex: 1;
text-align: center;
padding: 13px 10px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
font-size: 15.5px
}
.sticky .wa {
background: var(--mint);
color: var(--deep)
}
.sticky .tel {
background: rgba(255, 255, 255, .1);
color: #fff
}
@media(min-width:960px) {
.sticky {
display: none
}
}
@media(max-width:959px) {
body {
padding-bottom: 74px
}
}
footer {
background: #0E1B16;
color: #8CA79C;
padding: 34px 0;
font-size: 14.5px
}
footer a {
color: #B9CCC4;
text-decoration: none
}
footer a:hover {
color: var(--mint)
}
.foot {
display: flex;
flex-wrap: wrap;
gap: 12px 26px;
justify-content: space-between;
align-items: center
}
.legal {
display: flex;
flex-wrap: wrap;
gap: 18px
}
.disclaimer {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .09);
font-size: 13px;
line-height: 1.55;
color: #71897F
}	
.doc-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .3s ease,
visibility .3s ease;
}
.doc-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.doc-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
transition: background .3s ease;
}
.doc-modal.is-open .doc-modal__overlay {
background: rgba(0, 0, 0, .7);
}
.doc-modal__window {
position: relative;
z-index: 1;
height: min(900px, 90vh);
background: #e5e5e5;
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateY(30px) scale(.96);
transition:
opacity .35s ease,
transform .35s cubic-bezier(.22, 1, .36, 1);
}
.doc-modal.is-open .doc-modal__window {
opacity: 1;
transform: translateY(0) scale(1);
}
.doc-modal__close {
position: absolute;
top: 10px;
right: 15px;
z-index: 10;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: #fff;
font-size: 26px;
cursor: pointer;
}
.doc-modal__scroll {
width: 100%;
height: 100%;
overflow: auto;
padding: 40px 20px;
}