@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap"); *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--red: #C8102E;
--bg: #F5EFE6;
--black: #111111;
--dark: #1A1A1A;
--muted: #6B6560;
--light: #AAAAAA;
--border: #E0D9D0;
--card-bg: #1E1A1A;
--radius: 16px;
--font: 'Montserrat', Arial, sans-serif;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--black);
line-height: 1.6;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
font-family: inherit;
}
.container {
max-width: 1032px;
margin: 0 auto;
} #site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 500;
background: #ffffff;
transition: box-shadow 0.3s var(--ease);
}
#site-nav.scrolled {
box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08);
}
.nav-inner {
max-width: 1032px;
margin: 0 auto;
padding: 0;
height: 55px;
display: flex;
align-items: center;
}
.nav-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.nav-logo img {
width: auto;
max-width: 220px;
height: 30px;
object-fit: cover;
}
.nav-logo-ph {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 26px;
font-weight: 700;
font-style: italic;
line-height: 1;
color: var(--red);
letter-spacing: -0.055em;
}
.nav-logo-ph::before {
content: '';
width: 25px;
height: 25px;
border: 4px solid var(--red);
border-radius: 50%;
box-shadow: inset 0 0 0 4px #fff;
}
.nav-menu {
margin-left: auto;
display: flex;
align-items: center;
gap: 48px;
}
.nav-menu a {
font-size: 21px;
font-weight: 400;
line-height: 1;
color: var(--black);
transition: color 0.2s var(--ease);
}
.nav-menu a:hover {
color: var(--red);
}
.nav-hamburger {
margin-left: 68px;
width: 32px;
height: 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
cursor: pointer;
background: none;
border: none;
padding: 0;
flex-shrink: 0;
}
.nav-hamburger span {
display: block;
width: 29px;
height: 2.5px;
background: var(--red);
border-radius: 99px;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(9.5px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-9.5px) rotate(-45deg);
} .hero {
min-height: 100vh;
padding-top: 95px;
background: #fbf7ec;
position: relative;
overflow: hidden;
}
.hero-bg-image {
position: absolute;
z-index: 0;
top: 55px;
right: -90px;
width: min(78vw, 1320px);
min-width: 940px;
height: auto;
max-width: none;
pointer-events: none;
user-select: none;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 1032px;
min-height: calc(100vh - 120px);
margin: 0 auto;
padding: 0px 0 0px;
width: 100%;
display: grid;
grid-template-columns: 565px 1fr;
gap: 70px;
align-items: start;
}
.hero-content {
margin-top: 87px;
}
.hero-title {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.01em;
color: #262629;
}
.hero-title-line {
display: block;
}
.hero-title-amount { color: var(--red);
}
.hero-title-bottom { padding-left: 30px;
}
.hero-sub {
max-width: 500px;
margin: 12px 0 0 50px;
font-size: 22px;
font-weight: 400;
line-height: 1.45;
color: #111;
}
.btn-red {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--red);
color: #fff;
padding: 14px 28px;
border: none;
border-radius: 6px;
font-family: var(--font);
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
text-decoration: none;
}
.btn-red:hover {
opacity: 0.9;
color: #fff;
}
.hero-btn {
min-width: 354px;
min-height: 66px;
margin: 30px 0 0 50px;
padding: 18px 38px;
border-radius: 8px;
font-size: 21px;
}
.hero-btn:hover {
transform: translateY(-1px);
} .hero-gallery {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.hero-photo-item {
border-radius: 14px;
overflow: hidden;
aspect-ratio: 1.615 / 1;
background: #d8d1c7;
box-shadow: none;
}
.hero-photo-item-1 {
width: 350px;
}
.hero-photo-item-2 {
width: 350px;
}
.hero-photo-item-3 {
width: 350px;
margin-top: 6px;
}
.hero-photo-item img,
.hero-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.hero-photo-item:hover img { }
.hero-photo-item .ph-block {
min-height: 100%;
background: rgba(255, 255, 255, 0.26);
} .main-2-section {
position: relative;
overflow: hidden;
min-height: 700px;
padding: 0px 0 104px;
background: #fbf7ec;
}
.main-2-bg-image {
position: absolute;
z-index: 0;
top: -520px;
right: -288px;
width: min(103vw, 2100px);
min-width: 1580px;
height: auto;
max-width: none;
pointer-events: none;
user-select: none;
}
.main-2-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1032px;
margin: 0 auto;
}
.main-2-title {
margin: 0 0 35px;
font-size: clamp(44px, 3.28vw, 44px);
font-weight: 800;
line-height: 1.08;
letter-spacing: 0.015em;
color: #262629;
}
.main-2-grid {
display: grid;
grid-template-columns: 542px 425px;
gap: -0;
align-items: start;
}
.main-2-left {
padding-top: 11px;
}
.main-2-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
margin: 0;
font-size: 20px;
font-weight: 400;
line-height: 1.34;
color: #111;
}
.main-2-intro strong {
display: block;
color: var(--red);
font-weight: 700;
}
.main-2-photo {
overflow: hidden;
border-radius: 14px;
background: transparent;
}
.main-2-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.main-2-photo-left {
width: 452px;
aspect-ratio: 1.24 / 1;
margin-top: 33px;
}
.main-2-photo-right {
width: 420px;
aspect-ratio: 1.865 / 1;
}
.main-2-text {
max-width: 552px;
margin-top: 47px;
font-size: 20px;
font-weight: 400;
line-height: 1.34;
color: #111;
}
.main-2-text p {
margin: 0;
}
.main-2-text p+p {
margin-top: 44px;
}
.main-2-text strong {
font-weight: 700;
} .main-3-section {
position: relative;
overflow: hidden;
padding: 0px 0 82px;
background: #fbf7ec;
}
.main-3-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 446px;
gap: 62px;
align-items: start;
}
.main-3-content {
min-width: 0;
}
.main-3-accent {
width: 52px;
height: 4px;
margin-bottom: 30px;
border-radius: 999px;
background: var(--red);
}
.main-3-title {
margin: 0;
color: #17181c;
font-size: 44px;
font-weight: 800;
line-height: 0.96;
text-transform: uppercase;
}
.main-3-subtitle {
max-width: 420px;
margin: 30px 0 0;
font-size: 20px;
font-weight: 500;
line-height: 1.48;
color: #7f7b76;
}
.main-3-list-card {
margin-top: 30px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(20, 20, 20, 0.02);
}
.main-3-list {
margin: 0;
padding: 0;
list-style: none;
}
.main-3-list li {
display: flex;
align-items: center;
gap: 16px;
min-height: 44px;
padding: 0px 22px;
border-bottom: 1px solid #ece7df;
}
.main-3-list li:last-child {
border-bottom: 0;
}
.main-3-list-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--red);
flex: 0 0 7px;
}
.main-3-list-text {
color: #1c1d22;
font-size: 19px;
font-weight: 500;
line-height: 1.36;
}
.main-3-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 364px;
min-height: 70px;
margin: 44px 0 0;
padding: 18px 28px;
border-radius: 8px;
font-size: 21px;
line-height: 1;
font-weight: 700;
box-shadow: 0 18px 24px rgba(200, 16, 46, 0.12);
}
.main-3-btn-arrow {
font-size: 18px;
line-height: 1;
}
.main-3-visual {
padding-top: 78px;
}
.main-3-frame {
position: relative;
border-radius: 22px;
padding: 16px 16px 14px;
}
.main-3-image,
.main-3-image-placeholder {
display: block;
width: 80%;
border-radius: 18px;
}
.main-3-image {
height: auto;
object-fit: cover;
}
.main-3-image-placeholder {
aspect-ratio: 4 / 3;
background: rgba(216, 64, 82, 0.08);
}
.main-3-badge {
position: absolute;
left: -24px;
bottom: 42px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 136px;
padding: 14px 18px 13px;
border-radius: 16px;
background: #101115;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.main-3-badge-top {
color: var(--red);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.main-3-badge-bottom {
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.main-3-corner {
position: absolute;
display: block;
background: var(--red);
border-radius: 999px;
}
.main-3-corner-right {
width: 3px;
height: 44px;
right: 8px;
bottom: 26px;
}
.main-3-corner-bottom {
width: 74px;
height: 3px;
right: 24px;
bottom: 8px;
}
@media (max-width: 1180px) {
.main-3-container {
padding: 0 28px;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 44px;
}
.main-3-title {
font-size: 58px;
}
}
@media (max-width: 991px) {
.main-3-section {
padding: 54px 0 68px;
}
.main-3-container {
grid-template-columns: 1fr;
gap: 34px;
}
.main-3-visual {
order: 2;
padding-top: 0;
max-width: 520px;
}
.main-3-title {
font-size: 50px;
}
.main-3-image,
.main-3-image-placeholder {
min-height: 460px;
}
}
@media (max-width: 767px) {
.main-3-container {
padding: 0 20px;
}
.main-3-accent {
width: 48px;
margin-bottom: 22px;
}
.main-3-title {
font-size: 40px;
}
.main-3-subtitle {
margin-top: 22px;
font-size: 16px;
}
.main-3-list li {
gap: 12px;
min-height: 48px;
padding: 14px 16px;
align-items: flex-start;
}
.main-3-list-text {
font-size: 16px;
}
.main-3-btn {
width: 100%;
min-width: 0;
min-height: 58px;
margin-top: 30px;
font-size: 14px;
padding: 16px 18px;
}
.main-3-frame {
padding: 10px 10px 12px;
border-radius: 18px;
}
.main-3-image,
.main-3-image-placeholder {
min-height: 340px;
border-radius: 14px;
}
.main-3-badge {
left: -6px;
bottom: 22px;
min-width: 118px;
padding: 12px 14px 10px;
border-radius: 14px;
}
.main-3-badge-top {
font-size: 18px;
}
.main-3-badge-bottom {
font-size: 11px;
}
.main-3-corner-right {
height: 34px;
right: 5px;
bottom: 22px;
}
.main-3-corner-bottom {
width: 56px;
right: 16px;
bottom: 5px;
}
} .main-4-section {
position: relative;
overflow: hidden;
min-height: 600px;
padding: 0px 0 0px;
background: #fbf7ec;
}
.main-4-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
display: flex;
align-items: center;
}
.main-4-content {
min-width: 0;
}
.main-4-title {
margin: 0;
font-size: clamp(44px, 3.35vw, 44px);
font-weight: 800;
line-height: 1.34;
color: #262629;
}
.main-4-contact {
margin: 106px 0 0 48px;
color: #111;
}
.main-4-contact-label {
margin: 0 0 4px;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.main-4-contact-name,
.main-4-phone {
display: block;
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.45;
}
.main-4-phone {
font-weight: 700;
transition: color 0.2s var(--ease);
}
.main-4-phone:hover {
color: var(--red);
}
.main-4-btn {
width: 310px;
min-height: 70px;
margin: 94px 0 0 0px;
padding: 18px 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 0;
background: var(--red);
color: #fff;
font-size: 21px;
font-weight: 700;
line-height: 1;
text-align: center;
cursor: pointer;
transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.main-4-btn:hover {
transform: translateY(-2px);
background: #b60e28;
box-shadow: 0 16px 32px rgba(200, 16, 46, 0.18);
}
.main-4-animation {
--primary-navy: #0f172a;
--secondary-slate: #475569;
--accent-green: #2e960d;
--soft-blue: #4c99e6;
--border-color: #4f74a6;
--line-color: #0074ff;
width: 100%;
max-width: 740px;
}
.main-4-svg {
width: 130%;
height: auto;
display: block;
overflow: visible;
}
.main-4-animation .doc-layer {
animation: main4Float 8s ease-in-out infinite;
}
.main-4-animation .doc-layer-delayed {
animation: main4Float 8s ease-in-out infinite -2s;
}
@keyframes main4Float {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -12px;
}
}
.main-4-animation .line-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: main4DrawLine 6s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite;
}
@keyframes main4DrawLine {
0% {
stroke-dashoffset: 1000;
opacity: 0;
}
10% {
opacity: 1;
}
70%,
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.main-4-animation .bar {
transform-origin: bottom;
transform-box: fill-box;
transform: scaleY(0);
animation: main4GrowBar 5s cubic-bezier(0.16, 1, 0.3, 1) forwards infinite;
}
@keyframes main4GrowBar {
0%,
10% {
transform: scaleY(0);
opacity: 0;
}
25% {
opacity: 1;
}
75%,
100% {
transform: scaleY(1);
opacity: 1;
}
}
.main-4-animation .highlight-sweep {
fill: url(#vks-main-4-highlightGradient);
animation: main4Sweep 7s linear infinite;
}
@keyframes main4Sweep {
0% {
transform: translateX(-300px) skewX(-20deg);
}
100% {
transform: translateX(600px) skewX(-20deg);
}
}
.main-4-animation .data-point {
opacity: 0;
animation: main4FadeInPoint 6s ease-out infinite;
}
@keyframes main4FadeInPoint {
0%,
50% {
opacity: 0;
transform: scale(0.5);
}
60%,
90% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
}
}
.main-4-animation .checkmark {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: main4DrawCheck 6s ease-in-out infinite;
}
@keyframes main4DrawCheck {
0%,
60% {
stroke-dashoffset: 50;
}
75%,
95% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 50;
}
}
.main-4-animation .text-label {
fill: var(--secondary-slate);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
}
.main-4-animation .metric-value {
fill: var(--primary-navy);
font-size: 16px;
font-weight: 700;
}
.main-4-animation .pulse-circle {
animation: main4Pulse 4s ease-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes main4Pulse {
0% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
} .main-5-section {
position: relative;
overflow: hidden;
padding: 15px 0 96px;
background: #fbf7ec;
}
.main-5-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
gap: 52px;
align-items: start;
}
.main-5-content {
position: relative;
min-width: 0;
}
.main-5-content::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 3px;
height: 188px;
}
.main-5-title {
margin: 0;
font-size: clamp(44px, 3.35vw, 44px);
font-weight: 800;
line-height: 1.14;
text-transform: uppercase;
color: #0f0f0f;
}
.main-5-title span {
display: block;
}
.main-5-title-red {
color: var(--red);
}
.main-5-list {
max-width: 452px;
margin: 10px 0 0;
list-style: none;
border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.main-5-list li {
position: relative;
min-height: 43px;
padding: 11px 0 10px 24px;
border-top: 1px solid rgba(17, 17, 17, 0.06);
font-size: 19px;
font-weight: 500;
line-height: 1.35;
color: #161616;
}
.main-5-list li::before {
content: '•';
position: absolute;
left: 0;
top: 10px;
color: var(--red);
font-size: 21px;
font-weight: 700;
line-height: 1;
}
.main-5-btn {
width: 500px;
min-height: 70px;
margin: 40px 0 0;
padding: 15px 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
border-radius: 6px;
border: 0;
background: var(--red);
color: #fff;
box-shadow: 0 24px 36px rgba(200, 16, 46, 0.14);
font-size: 20.5px;
font-weight: 700;
line-height: 1;
text-align: center;
transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.main-5-btn-arrow {
display: inline-block;
margin-top: -1px;
font-size: 17px;
font-weight: 500;
line-height: 1;
}
.main-5-btn:hover {
transform: translateY(-2px);
background: #b60e28;
box-shadow: 0 28px 42px rgba(200, 16, 46, 0.2);
}
.main-5-cards {
position: relative;
min-height: 430px;
padding-top: 2px;
}
.main-5-card {
position: relative;
width: min(100%, 508px);
min-height: 106px;
margin: 0 0 55px;
padding: 30px 40px 28px 48px;
border-radius: 10px;
background: #fff;
box-shadow: 0 16px 42px rgba(17, 17, 17, 0.07);
}
.main-5-card::before {
content: '';
position: absolute;
left: 0;
top: 25px;
width: 2px;
height: 42px;
}
.main-5-card-1 {
margin-left: 0;
}
.main-5-card-2 {
margin-left: 36px;
}
.main-5-card-3 {
margin-left: 72px;
margin-bottom: 0;
}
.main-5-card-number {
position: absolute;
left: 29px;
top: -13px;
width: 27px;
height: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--red);
color: #fff;
font-size: 18px;
font-weight: 800;
line-height: 1;
}
.main-5-card-body {
max-width: 410px;
}
.main-5-card-title {
margin: 0 0 5px;
font-size: 25px;
font-weight: 800;
line-height: 1.06;
letter-spacing: 0.01em;
color: var(--red);
}
.main-5-card-text {
margin: 0;
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
color: #111;
} .main-6-section {
position: relative;
overflow: hidden;
min-height: 500px;
padding: 0px 0 0px;
background: #fbf7ec;
}
.main-6-container {
position: relative;
width: 100%;
max-width: 1032px;
min-height: 580px;
margin: 0 auto;
padding: 0;
}
.main-6-content {
position: relative;
z-index: 2;
width: 520px;
}
.main-6-eyebrow {
margin: 0 0 22px;
color: var(--red);
font-size: 22px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
}
.main-6-title {
margin: 0;
color: #262629;
font-size: clamp(44px, 3.55vw, 44px);
font-weight: 800;
line-height: 1.18;
}
.main-6-title span {
display: block;
}
.main-6-title-red {
color: var(--red);
}
.main-6-years {
width: 506px;
margin-top: 58px;
}
.main-6-year {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 22px;
align-items: flex-start;
padding: 0 0 29px;
}
.main-6-year+.main-6-year {
padding-top: 23px;
border-top: 1px dashed rgba(17, 17, 17, 0.45);
}
.main-6-year-icon {
width: 54px;
min-height: 54px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.main-6-year-icon img {
width: 54px;
height: 54px;
object-fit: cover;
}
.main-6-year-heading {
margin: -2px 0 2px;
display: flex;
align-items: baseline;
gap: 12px;
color: var(--red);
font-weight: 700;
line-height: 1;
}
.main-6-year-heading span {
font-size: 20px;
letter-spacing: 0.03em;
}
.main-6-year-heading strong {
font-size: 23px;
letter-spacing: 0.02em;
}
.main-6-year p {
margin: 0;
max-width: 425px;
color: #111;
font-size: 19px;
font-weight: 400;
line-height: 1.25;
letter-spacing: 0.012em;
}
.main-6-map {
position: absolute;
z-index: 1;
top: 82px;
left: 502px;
width: 770px;
max-width: none;
pointer-events: none;
user-select: none;
}
.main-6-map img {
width: 100%;
max-width: none;
height: auto;
display: block;
} .section {
padding: 80px 0;
background: var(--bg);
}
.section-title {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--black);
margin-bottom: 32px;
}
.section-title .red {
color: var(--red);
} .about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.about-left {}
.about-intro {
font-size: 15px;
line-height: 1.7;
color: var(--black);
margin-bottom: 24px;
}
.about-intro .red {
color: var(--red);
font-weight: 700;
}
.about-photo {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/3;
background: #D9D0C6;
margin-top: 20px;
}
.about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-right {}
.about-photo-main {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/3;
background: #D9D0C6;
margin-bottom: 20px;
}
.about-photo-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-goal {
font-size: 14px;
color: var(--black);
line-height: 1.7;
}
.about-goal strong {
font-weight: 700;
} .founder-section {
background: var(--bg);
padding: 80px 0;
position: relative;
overflow: hidden;
} .founder-section::before {
content: '';
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 300px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 10 C20 60, 90 100, 30 150 C-20 200, 80 250, 40 290' stroke='%23C8102E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
opacity: 0.4;
pointer-events: none;
}
.founder-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.founder-h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
line-height: 1.1;
color: var(--black);
margin-bottom: 24px;
}
.founder-h2 .red {
color: var(--red);
}
.founder-list {
margin-bottom: 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
.founder-list li {
font-size: 15px;
color: var(--black);
display: flex;
align-items: flex-start;
gap: 8px;
}
.founder-list li::before {
content: '•';
color: var(--red);
flex-shrink: 0;
margin-top: 1px;
}
.founder-photo {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 3/4;
background: #D9D0C6;
}
.founder-photo img {
width: 100%;
height: 100%;
object-fit: cover;
} .download-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.download-or {
font-size: 14px;
font-weight: 700;
margin: 20px 0 4px;
}
.download-contact {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
.download-contact a {
color: var(--black);
font-weight: 700;
text-decoration: underline;
}
.download-hint {
margin-top: 12px;
font-size: 13px;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
} .cards-stack {
position: relative;
aspect-ratio: 1/1;
max-width: 380px;
margin-left: auto;
}
.card-mock {
position: absolute;
background: var(--card-bg);
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: 6px;
}
.card-mock .cm-icon {
font-size: 20px;
}
.card-mock .cm-title {
font-size: 16px;
color: #fff;
font-weight: 400;
}
.card-mock .cm-brand {
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 16px;
}
.card-mock .cm-glow {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--red);
filter: blur(28px);
opacity: 0.5;
right: 16px;
top: 16px;
}
.card-1 {
width: 65%;
right: 0;
top: 0;
z-index: 3;
}
.card-2 {
width: 65%;
right: 5%;
top: 30%;
z-index: 2;
}
.card-3 {
width: 70%;
right: 3%;
top: 55%;
z-index: 1;
} .what-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.what-h2 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
}
.what-h2 .red {
color: var(--red);
}
.what-list {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.what-list li {
font-size: 15px;
color: var(--black);
display: flex;
align-items: flex-start;
gap: 8px;
}
.what-list li::before {
content: '•';
color: var(--red);
flex-shrink: 0;
margin-top: 2px;
} .what-card {
background: var(--card-bg);
border-radius: 16px;
padding: 28px;
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.what-card .wc-icon {
font-size: 20px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 16px;
}
.what-card .wc-title {
font-size: 18px;
font-weight: 400;
color: #fff;
margin-bottom: 8px;
}
.what-card .wc-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
line-height: 1.6;
}
.what-card .wc-brand {
font-size: 10px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 20px;
} .plan-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.plan-h2 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 16px;
}
.plan-h2 .red {
color: var(--red);
}
.plan-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 28px;
} .map-container {
position: relative;
aspect-ratio: 5/3;
display: flex;
align-items: center;
justify-content: center;
}
.map-container svg {
width: 100%;
height: 100%;
} .forkogo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
margin-bottom: 32px;
}
.forkogo-h2 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
}
.forkogo-text {
font-size: 15px;
line-height: 1.7;
color: var(--black);
padding-top: 6px;
}
.forkogo-text .red {
color: var(--red);
font-weight: 700;
}
.forkogo-text strong {
font-weight: 700;
}
.forkogo-image {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16/6;
background: #2A1A1A;
position: relative;
}
.forkogo-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.forkogo-image .ph-dark {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 0.1em;
text-transform: uppercase;
} .steps-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.steps-left-h2 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 8px;
}
.steps-left-h2 .red {
color: var(--red);
}
.steps-sub {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 28px;
}
.steps-list {
display: flex;
flex-direction: column;
border-left: 2px solid rgba(200, 16, 46, 0.2);
padding-left: 0;
}
.step-item {
padding: 0 0 32px 0;
position: relative;
}
.step-item::before {
content: '';
position: absolute;
left: -33px;
top: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--red);
}
.step-num {
font-size: 12px;
font-weight: 700;
font-style: italic;
color: var(--muted);
letter-spacing: 0.06em;
margin-bottom: 4px;
padding-left: 24px;
}
.step-title {
font-size: 16px;
font-weight: 700;
color: var(--black);
margin-bottom: 6px;
padding-left: 24px;
}
.step-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
padding-left: 24px;
} .earn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.earn-h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
}
.earn-h2 .red {
color: var(--red);
}
.earn-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 12px;
} .earn-photos {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px;
}
.earn-photo {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4/3;
background: #D9D0C6;
}
.earn-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.earn-photo.span2 {
grid-column: 1 / -1;
aspect-ratio: 16/7;
} .marquee-section {
overflow: hidden;
padding: 18px 0;
background: var(--red);
transform: rotate(-1.5deg) scaleX(1.06);
margin: -10px 0;
position: relative;
z-index: 10;
}
.marquee-track {
display: flex;
animation: mq 22s linear infinite;
white-space: nowrap;
}
.marquee-item {
flex-shrink: 0;
padding: 0 24px;
font-size: 15px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 24px;
}
.marquee-item::after {
content: '/';
opacity: 0.4;
font-weight: 400;
}
@keyframes mq {
to {
transform: translateX(-50%);
}
} .package-section {
padding: 80px 0 40px;
}
.package-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
padding: 0 0 60px;
border-bottom: 1px solid var(--border);
margin-bottom: 60px;
}
.package-block:last-child {
border-bottom: none;
}
.pkg-num {
font-size: 14px;
color: var(--black);
margin-bottom: 2px;
}
.pkg-num .red {
color: var(--red);
font-weight: 700;
}
.pkg-name {
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 12px;
}
.pkg-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 24px;
}
.pkg-table-head {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--black);
margin-bottom: 8px;
margin-top: 24px;
}
.pkg-table {
width: 100%;
border-collapse: collapse;
}
.pkg-table tr {}
.pkg-table td {
padding: 9px 12px;
font-size: 13px;
background: rgba(0, 0, 0, 0.04);
border-bottom: 2px solid var(--bg);
}
.pkg-table tr:first-child td {
border-top: none;
}
.pkg-table td:first-child {
color: var(--muted);
width: 55%;
}
.pkg-table td:last-child {
color: var(--black);
text-align: right;
font-weight: 400;
} .pkg-photos {
display: flex;
flex-direction: column;
gap: 6px;
}
.pkg-photo {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16/9;
background: #D9D0C6;
}
.pkg-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pkg-photo .ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #B0A898;
letter-spacing: 0.08em;
text-transform: uppercase;
} .form-section {
padding: 0 0;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.form-h2 {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 8px;
}
.form-sub {
font-size: 19px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 28px;
}
.form-fields {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-input {
width: 100%;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.05);
border: none;
border-radius: 8px;
font-family: var(--font);
font-size: 15px;
color: var(--black);
outline: none;
transition: background 0.2s;
}
.form-input:focus {
background: rgba(0, 0, 0, 0.08);
}
.form-input::placeholder {
color: var(--light);
}
.form-phone-wrap {
display: flex;
}
.form-flag {
padding: 14px 14px;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px 0 0 8px;
font-size: 15px;
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
white-space: nowrap;
}
.form-input.phone {
border-radius: 0 8px 8px 0;
}
.form-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 19px;
color: var(--muted);
line-height: 1.5;
margin: 4px 0;
}
.form-check input {
accent-color: var(--red);
margin-top: 2px;
flex-shrink: 0;
}
.form-check a {
color: var(--muted);
text-decoration: underline;
}
.btn-red-full {
width: 100%;
background: var(--red);
color: #fff;
border: none;
border-radius: 8px;
padding: 16px;
font-family: var(--font);
font-size: 21px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
margin-top: 4px;
}
.btn-red-full:hover {
opacity: 0.85;
}
.form-photo {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/3; height: 550px;
width: 100%;
}
.form-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
} .brand-section {
padding: 72px 0 68px;
background: var(--bg);
}
.brand-container {
max-width: 1032px;
margin: 0 auto;
}
.brand-h2 {
margin: 0 0 34px;
color: #17181c;
font-size: clamp(32px, 4.2vw, 44px);
line-height: 1.05;
font-weight: 800;
letter-spacing: 0.08em;
text-align: left;
}
.brand-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.brand-card {
position: relative;
display: block;
min-width: 0;
margin: 0;
border-radius: 16px;
overflow: hidden;
background: #fff;
aspect-ratio: 1 / 1.29;
}
.brand-card--wide {
grid-column: span 2;
aspect-ratio: 2 / 1.26;
}
.brand-card--wide img {
object-fit: cover !important;
}
.brand-card--banner {
grid-column: 1 / -1;
aspect-ratio: 3.15 / 1;
}
.brand-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.brand-card .ph-block {
width: 100%;
height: 100%;
min-height: 0;
border-radius: 0;
}
@media (max-width: 991px) {
.brand-section {
padding: 58px 0 54px;
}
.brand-container {
max-width: 720px;
}
}
@media (max-width: 767px) {
.brand-section {
padding: 46px 0 48px;
}
.brand-h2 {
margin-bottom: 24px;
font-size: 30px;
letter-spacing: 0.055em;
}
.brand-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.brand-card--wide,
.brand-card--banner {
grid-column: 1 / -1;
}
.brand-card--wide {
aspect-ratio: 1.7 / 1;
}
.brand-card--banner {
aspect-ratio: 3 / 1;
object-fit: cover !important;
}
}
@media (max-width: 420px) {
.brand-gallery {
grid-template-columns: 1fr;
}
.brand-card--wide,
.brand-card--banner,
.brand-card {
grid-column: 1 / -1;
}
.brand-card--banner img {
object-fit: cover !important;
}
} .brand-steps-section {
position: relative;
overflow: hidden;
padding: 74px 0 76px;
background: #f7f1e6;
}
.brand-steps-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
}
.brand-steps-inner {
position: relative;
}
.brand-steps-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 34px;
}
.brand-steps-title {
margin: 0;
max-width: 650px;
color: #151515;
font-size: clamp(34px, 4.25vw, 44px);
font-weight: 800;
line-height: 1.02;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.brand-steps-line {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 210px;
height: 16px;
margin-bottom: 8px;
}
.brand-steps-line span {
display: block;
width: 50px;
height: 3px;
background: var(--red);
}
.brand-steps-line i {
display: block;
width: 12px;
height: 3px;
background: #d8d0c5;
}
.brand-steps-line b {
display: block;
width: min(180px, 16vw);
height: 1px;
background: #ddd5c9;
}
.brand-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(17, 17, 17, 0.09);
border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}
.brand-steps-card {
position: relative;
min-height: 238px;
padding: 32px 28px 30px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.brand-steps-card:not(:first-child) {
padding-left: 32px;
}
.brand-steps-icon {
width: 58px;
height: 58px;
margin-bottom: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 18px;
}
.brand-steps-icon img {
display: block;
width: 34px;
height: 34px;
object-fit: contain;
}
.brand-steps-icon span {
display: block;
width: 20px;
height: 20px;
border: 2px solid var(--red);
border-radius: 50%;
box-shadow: 18px 0 0 -8px rgba(200, 16, 46, 0.2), 0 18px 0 -8px rgba(200, 16, 46, 0.2);
}
.brand-steps-kicker {
margin: 0 0 12px;
color: var(--red);
font-size: 19px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.brand-steps-card-title {
margin: 0 0 14px;
max-width: 270px;
color: #141414;
font-size: 22px;
font-weight: 800;
line-height: 1.1;
}
.brand-steps-card-text {
margin: 0;
max-width: 275px;
color: #555b61;
font-size: 17px;
font-weight: 400;
line-height: 1.42;
}
.brand-steps-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 30px;
padding: 24px 28px;
border-radius: 22px;
}
.brand-steps-bottom p {
margin: 0;
color: #151515;
font-size: 26px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
}
.brand-steps-btn {
min-height: 56px;
padding: 0 22px 0 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
border-radius: 999px;
background: var(--red);
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 15px 32px rgba(200, 16, 46, 0.22);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brand-steps-btn:hover {
transform: translateY(-2px);
color: #fff;
box-shadow: 0 20px 38px rgba(200, 16, 46, 0.28);
}
.brand-steps-btn-arrow {
position: relative;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
background: #fff;
}
.brand-steps-btn-arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-top: 2px solid var(--red);
border-right: 2px solid var(--red);
transform: translate(-60%, -50%) rotate(45deg);
}
@media (max-width: 1100px) {
.brand-steps-container {
padding: 0 32px;
}
.brand-steps-card {
padding-right: 22px;
}
.brand-steps-card:not(:first-child) {
padding-left: 24px;
}
}
@media (max-width: 900px) {
.brand-steps-section {
padding: 64px 0 68px;
}
.brand-steps-head {
display: block;
margin-bottom: 24px;
}
.brand-steps-line {
justify-content: flex-start;
width: 260px;
margin: 22px 0 0;
}
.brand-steps-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
border-top: 0;
border-bottom: 0;
gap: 14px;
}
.flex-style {
display: flex;
justify-content: flex-start;
width: 100%;
align-items: center;
}
.brand-steps-card,
.brand-steps-card:not(:first-child) {
min-height: auto;
padding: 0px;
}
.brand-steps-icon {
margin-bottom: 18px;
}
.brand-steps-card-title,
.brand-steps-card-text {
max-width: 100%;
}
.brand-steps-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 560px) {
.brand-steps-section {
padding: 52px 0 58px;
}
.brand-steps-container {
padding: 0 10px;
}
.brand-steps-title {
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.brand-steps-line {
width: 210px;
}
.brand-steps-line b {
width: 115px;
}
.brand-steps-card {
border-radius: 18px;
}
.brand-steps-icon {
width: 52px;
height: 52px;
border-radius: 16px;
}
.brand-steps-kicker{
font-size: 12.8px;
}
.brand-steps-card-title {
font-size: 12.8px;
}
.brand-steps-card-text {
font-size: 12.8px;
}
.brand-steps-bottom {
margin-top: 20px;
padding: 22px;
border-radius: 18px;
}
.brand-steps-bottom p {
font-size: 22px;
}
.brand-steps-btn {
width: 100%;
min-height: 54px;
padding: 0 14px 0 20px;
gap: 12px;
font-size: 12px;
}
} footer {
background: var(--bg);
padding: 60px 0 0;
border-top: 1px solid var(--border);
}
.footer-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding-bottom: 60px;
}
.footer-h2 {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 28px;
}
.footer-nav-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.footer-col h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 14px;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col a {
font-size: 13px;
color: var(--muted);
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--red);
}
.footer-bottom {
border-top: 1px solid var(--border);
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.footer-copy {
font-size: 12px;
color: var(--light);
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
font-size: 12px;
color: var(--light);
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--red);
} .ph-block {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
}
.ph-block .ph-icon {
font-size: 18px;
color: #BEB9B3;
}
.ph-block .ph-label {
font-size: 9px;
color: #C0BAB4;
letter-spacing: 0.1em;
text-transform: uppercase;
} .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.d1 {
transition-delay: 0.1s;
}
.reveal.d2 {
transition-delay: 0.2s;
}
.reveal.d3 {
transition-delay: 0.3s;
}
.reveal.vis {
opacity: 1;
transform: none;
} @media (max-width: 1100px) {
.nav-inner,
.hero-inner {
max-width: none;
}
.hero-inner {
grid-template-columns: minmax(460px, 1fr) 390px;
gap: 36px;
min-height: 70vh;
padding-top: 45px;
}
.hero-title {
font-size: clamp(48px, 5.8vw, 64px);
}
.hero-sub {
font-size: clamp(18px, 2vw, 22px);
}
.hero-bg-image {
right: -180px;
width: min(92vw, 1180px);
min-width: 880px;
}
}
@media (max-width: 900px) {
.nav-menu {
gap: 28px;
}
.nav-menu a {
font-size: 18px;
}
.nav-hamburger {
margin-left: 34px;
}
.hero-inner {
grid-template-columns: 1fr;
gap: 36px;
padding: 52px 0 70px;
}
.hero-content {
margin-top: 0;
padding-left: 0;
}
.hero-gallery {
max-width: 400px;
width: 100%;
}
.hero-photo-item-1,
.hero-photo-item-2,
.hero-photo-item-3 {
width: 86%;
}
.hero-photo-item-1 {
margin-left: 7%;
}
.hero-photo-item-2 {
margin-left: 0;
}
.hero-photo-item-3 {
margin-left: 14%;
}
}
@media (max-width: 768px) {
.container {
padding: 0 10px;
}
.nav-inner {
height: 58px;
margin-left: 0;
margin-right: 0;
padding: 0 20px;
}
.nav-logo img {
height: 28px;
}
.nav-logo-ph {
font-size: 23px;
}
.nav-logo-ph::before {
width: 22px;
height: 22px;
border-width: 3px;
}
.nav-menu {
position: fixed;
top: 58px;
left: 0;
right: 0;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 18px 20px 20px;
background: #fff;
box-shadow: 0 18px 35px rgba(17, 17, 17, 0.08);
}
.nav-menu.open {
display: flex;
}
.nav-menu a {
width: 100%;
padding: 14px 0;
font-size: 19px;
}
.nav-hamburger {
margin-left: auto;
width: 31px;
}
.hero {
padding-top: 58px;
min-height: auto;
}
.hero-bg-image {
top: 58px;
right: -460px;
width: 980px;
min-width: 980px;
}
.hero-inner {
min-height: auto;
padding: 42px 10px 64px;
justify-items: center;
}
.hero-content {
width: 100%;
}
.hero-title {
font-size: clamp(42px, 12vw, 58px);
line-height: 1.05;
}
.hero-title-amount {}
.hero-title-bottom {
padding-left: 0;
}
.hero-sub {
margin: 24px 0 0;
max-width: 400px;
font-size: 18px;
}
.hero-btn {
width: 100%;
min-width: 0;
margin: 26px 0 0;
min-height: 58px;
font-size: 18px;
}
.about-grid,
.founder-grid,
.download-grid,
.what-grid,
.plan-grid,
.forkogo-grid,
.steps-grid,
.earn-grid,
.form-grid,
.package-block,
.footer-top {
grid-template-columns: 1fr;
}
.cards-stack {
max-width: 100%;
}
.founder-photo {
aspect-ratio: 4/3;
}
.footer-nav-grid {
grid-template-columns: 1fr 1fr;
}
.section {
padding: 60px 0;
}
.package-section {
padding: 60px 0 20px;
}
.marquee-section {
transform: rotate(-1deg) scaleX(1.03);
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 40px;
}
.hero-sub {
font-size: 17px;
}
.btn-red {
font-size: 17px;
}
.hero-photo-item-1,
.hero-photo-item-2,
.hero-photo-item-3 {
width: 100%;
margin-left: 0;
}
.footer-nav-grid {
grid-template-columns: 1fr;
}
.earn-photos {
grid-template-columns: 1fr;
}
.earn-photo.span2 {
grid-column: auto;
}
.brand-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1300px) {
.main-3-list-text {
font-size: 23px;
}
.main-2-container {
max-width: 1060px;
}
.main-2-grid {
grid-template-columns: minmax(420px, 1fr) minmax(470px, 1.05fr);
gap: 42px;
}
.main-2-photo-left,
.main-2-photo-right {
width: 100%;
}
.main-2-title {
font-size: clamp(42px, 4.6vw, 58px);
}
.main-2-intro,
.main-2-text {
font-size: 25px;
}
}
@media (max-width: 900px) {
.main-2-section {
min-height: auto;
padding: 64px 0 74px;
}
.main-2-bg-image {
top: -260px;
right: -520px;
width: 1180px;
min-width: 1180px;
}
.main-2-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.main-2-left {
padding-top: 0;
}
.main-2-title {
margin-bottom: 28px;
font-size: clamp(38px, 9vw, 52px);
line-height: 1.08;
}
.main-2-intro,
.main-2-text {
max-width: 620px;
font-size: 23px;
}
.main-2-photo-left {
margin-top: 28px;
max-width: 620px;
}
.main-2-photo-right {
max-width: 620px;
}
.main-2-text {
margin-top: 28px;
}
.main-2-text p+p {
margin-top: 26px;
}
}
@media (max-width: 480px) {
.main-2-section {
padding: 54px 0 62px;
}
.main-2-container {
padding: 0 10px;
}
.main-2-title {
font-size: 34px;
letter-spacing: 0.005em;
}
.main-2-intro,
.main-2-text {
font-size: 20px;
line-height: 1.38;
}
.main-2-photo-left,
.main-2-photo-right {
border-radius: 12px;
}
}
@media (max-width: 1300px) {
.main-3-container {
max-width: 1040px;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 48px;
}
.main-3-title {
font-size: clamp(44px, 4.8vw, 58px);
}
.main-3-subtitle {
font-size: 28px;
}
.main-3-list li,
.main-3-btn {
font-size: 23px;
}
.main-3-visual {
width: 360px;
}
}
@media (max-width: 900px) {
.main-3-section {
min-height: auto;
padding: 64px 0 76px;
}
.main-3-container {
grid-template-columns: 1fr;
gap: 34px;
}
.main-3-title {
font-size: clamp(38px, 9vw, 54px);
line-height: 1.18;
}
.main-3-subtitle {
max-width: 620px;
font-size: 24px;
line-height: 1.38;
}
.main-3-list {
margin: 28px 0 0 26px;
}
.main-3-list li {
font-size: 21px;
}
.main-3-btn {
width: 100%;
max-width: 444px;
margin: 32px 0 0;
font-size: 21px;
}
.main-3-visual {
width: 100%;
max-width: 420px;
padding-top: 0;
}
.main-3-image {
min-height: auto;
}
}
@media (max-width: 480px) {
.main-3-section {
padding: 54px 0 64px;
}
.main-3-container {
padding: 0 10px;
}
.main-3-title {
font-size: 34px;
letter-spacing: 0.005em;
}
.main-3-subtitle {
margin-top: 18px;
font-size: 20px;
}
.main-3-list {
margin-left: 22px;
}
.main-3-list li {
font-size: 18px;
line-height: 1.42;
}
.main-3-btn {
min-height: 62px;
padding: 17px 22px;
font-size: 18px;
}
.main-3-image {
border-radius: 12px;
}
}
@media (max-width: 1300px) {
.main-4-container {
max-width: 1040px;
grid-template-columns: minmax(0, 1fr) 440px;
gap: 40px;
}
.main-4-title {
font-size: clamp(44px, 4.8vw, 58px);
}
.main-4-animation {
max-width: 460px;
}
}
@media (max-width: 900px) {
.main-4-section {
min-height: auto;
padding: 64px 0 76px;
}
.main-4-container {
grid-template-columns: 1fr;
gap: 34px;
}
.main-4-title {
font-size: clamp(38px, 9vw, 54px);
line-height: 1.18;
}
.main-4-contact {
margin: 44px 0 0;
}
.main-4-contact-label {
font-size: 17px;
}
.main-4-contact-name,
.main-4-phone {
font-size: 17px;
}
.main-4-btn {
width: 100%;
max-width: 444px;
margin: 38px 0 0;
font-size: 21px;
}
.main-4-animation {
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.main-4-section {
padding: 54px 0 64px;
}
.main-4-container {
padding: 0 10px;
}
.main-4-title {
font-size: 34px;
letter-spacing: 0.005em;
}
.main-4-contact {
margin-top: 34px;
}
.main-4-contact-label,
.main-4-contact-name,
.main-4-phone {
font-size: 16px;
}
.main-4-btn {
min-height: 62px;
padding: 17px 22px;
font-size: 18px;
}
}
@media (max-width: 1300px) {
.main-5-container {
max-width: 1032px;
padding: 0 32px;
grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
gap: 44px;
}
.main-5-title {
font-size: clamp(43px, 4.5vw, 56px);
}
.main-5-card {
width: min(100%, 470px);
}
.main-5-card-2 {
margin-left: 28px;
}
.main-5-card-3 {
margin-left: 56px;
}
}
@media (max-width: 900px) {
.main-5-section {
padding: 70px 0 82px;
}
.main-5-container {
grid-template-columns: 1fr;
gap: 46px;
padding: 0 28px;
}
.main-5-content {
padding-left: 18px;
}
.main-5-content::before {
height: 82px;
}
.main-5-title {
font-size: clamp(36px, 8vw, 52px);
line-height: 1.15;
}
.main-5-list {
max-width: none;
margin-top: 42px;
}
.main-5-list li {
font-size: 16px;
}
.main-5-btn {
width: 100%;
max-width: 360px;
margin-top: 34px;
}
.main-5-cards {
min-height: auto;
padding-top: 0;
}
.main-5-card,
.main-5-card-1,
.main-5-card-2,
.main-5-card-3 {
width: 100%;
max-width: 560px;
min-height: 104px;
margin: 0 0 28px;
}
.main-5-card-2 {
margin-left: auto;
}
.main-5-card-3 {
margin-left: 0;
margin-bottom: 0;
}
}
@media (max-width: 480px) {
.main-5-section {
padding: 56px 0 68px;
}
.main-5-container {
padding: 0 10px;
gap: 36px;
}
.main-5-content {
padding-left: 15px;
}
.main-5-content::before {
width: 2px;
height: 70px;
}
.main-5-title {
font-size: 34px;
letter-spacing: 0.005em;
}
.main-5-list {
margin-top: 32px;
}
.main-5-list li {
min-height: auto;
padding: 10px 0 10px 20px;
font-size: 14.5px;
}
.main-5-btn {
max-width: none;
min-height: 52px;
padding: 15px 22px;
font-size: 14px;
}
.main-5-card {
padding: 27px 24px 24px 34px;
border-radius: 9px;
}
.main-5-card-number {
left: 22px;
}
.main-5-card-title {
font-size: 23px;
}
.main-5-card-text {
font-size: 14.5px;
}
}
@media (max-width: 1300px) {
.main-6-container {
max-width: 1032px;
padding: 0 32px;
}
.main-6-map {
left: 330px;
width: 890px;
}
}
@media (max-width: 900px) {
.main-6-section {
min-height: auto;
padding: 64px 0 76px;
}
.main-6-container {
min-height: auto;
padding: 0 32px;
}
.main-6-content {
width: 100%;
}
.main-6-title {
font-size: clamp(38px, 9vw, 54px);
line-height: 1.14;
letter-spacing: 0.06em;
}
.main-6-years {
width: 100%;
max-width: 560px;
margin-top: 42px;
}
.main-6-map {
position: relative;
top: auto;
left: auto;
width: min(960px, 140vw);
margin: 44px 0 0 -12vw;
}
}
@media (max-width: 480px) {
.main-6-section {
padding: 56px 0 68px;
}
.main-6-container {
padding: 0 10px;
}
.main-6-eyebrow {
margin-bottom: 18px;
font-size: 18px;
}
.main-6-title {
font-size: 34px;
letter-spacing: 0.045em;
}
.main-6-years {
margin-top: 34px;
}
.main-6-year {
grid-template-columns: 54px minmax(0, 1fr);
gap: 16px;
padding-bottom: 24px;
}
.main-6-year+.main-6-year {
padding-top: 22px;
}
.main-6-year-icon,
.main-6-year-icon img {
width: 42px;
height: 42px;
min-height: 42px;
}
.main-6-year-heading span {
font-size: 23px;
}
.main-6-year-heading strong {
font-size: 25px;
}
.main-6-year p {
font-size: 18px;
line-height: 1.33;
}
.main-6-map {
width: 480px;
margin-top: 34px;
margin-left: -35px;
}
} .main-7-section {
padding: 0px 0 54px;
background: #fbf7ec;
}
.main-7-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
}
.main-7-title {
margin: 0 0px 53px;
max-width: 980px;
text-align: start;
color: #17181c;
font-size: 44px;
line-height: 1.02;
font-weight: 800;
}
.main-7-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 86px;
align-items: start;
}
.main-7-col-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.main-7-col-head--between {
justify-content: space-between;
}
.main-7-col-title {
margin: 0;
color: #17181c;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
}
.main-7-badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 0 14px;
border: 1px solid rgba(216, 64, 82, 0.28);
border-radius: 999px;
background: rgba(216, 64, 82, 0.05);
color: var(--red);
font-size: 14px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.main-7-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--red);
flex: 0 0 7px;
}
.main-7-list {
list-style: none;
margin: 0;
padding: 0;
}
.main-7-item {
display: flex;
align-items: center;
gap: 14px;
min-height: 58px;
padding: 13px 0;
border-top: 1px solid #ece4db;
}
.main-7-item:last-child {
border-bottom: 1px solid #ece4db;
}
.main-7-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
font-size: 16px;
line-height: 1;
font-weight: 700;
}
.main-7-item.is-no .main-7-icon {
color: #ea6f78;
background: rgba(234, 111, 120, 0.1);
border: 1px solid rgba(234, 111, 120, 0.32);
}
.main-7-item.is-yes .main-7-icon {
color: #42b773;
background: rgba(66, 183, 115, 0.12);
border: 1px solid rgba(66, 183, 115, 0.34);
}
.main-7-text {
color: #1c1d227d;
font-size: 19px;
line-height: 1.35;
font-weight: 500;
}
.main-7-item.is-no .main-7-text {
color: #222120;
text-decoration-thickness: 1px;
}
.main-7-metric {
margin-top: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.main-7-metric-icon-wrap {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
}
.main-7-metric-icon {
display: block;
max-width: 22px;
height: auto;
}
.main-7-metric-fallback {
font-size: 16px;
line-height: 1;
}
.main-7-metric-copy {
display: flex;
flex-direction: column;
gap: 1px;
}
.main-7-metric-label {
color: #c6bdb4;
font-size: 14px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.main-7-metric-value {
color: var(--red);
font-size: 17px;
line-height: 1.05;
font-weight: 800;
}
@media (max-width: 1100px) {
.main-7-container {
padding: 0 28px;
}
.main-7-grid {
gap: 42px;
}
.main-7-title {
font-size: 48px;
max-width: 860px;
}
}
@media (max-width: 991px) {
.main-7-section {
padding: 58px 0 44px;
}
.main-7-title {
margin-bottom: 38px;
font-size: 42px;
}
.main-7-grid {
grid-template-columns: 1fr;
gap: 34px;
}
}
@media (max-width: 767px) {
.main-7-container {
padding: 0 10px;
}
.main-7-title {
font-size: 34px;
margin-bottom: 28px;
}
.main-7-col-head,
.main-7-col-head--between {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.main-7-col-title {
font-size: 22px;
}
.main-7-badge {
font-size: 12px;
padding: 0 12px;
min-height: 30px;
}
.main-7-item {
gap: 12px;
min-height: 0;
padding: 12px 0;
align-items: flex-start;
}
.main-7-icon {
margin-top: 1px;
}
.main-7-text {
font-size: 15px;
}
} .main-8-section {
padding: 72px 0 60px;
background: var(--bg);
}
.main-8-container {
--main-8-line-left: 446px;
--main-8-line-width: 46px;
position: relative;
display: grid;
grid-template-columns: minmax(0, 428px) minmax(0, 1fr);
column-gap: 82px;
align-items: start;
}
.main-8-container::before {
content: '';
position: absolute;
top: 0;
bottom: 22px;
left: var(--main-8-line-left);
width: var(--main-8-line-width);
border-radius: 3px;
background: linear-gradient(180deg, rgba(200, 16, 46, 0) 0%, rgba(200, 16, 46, 0.08) 16%, rgba(200, 16, 46, 0.34) 48%, var(--red) 100%);
pointer-events: none;
z-index: 0;
}
.main-8-left,
.main-8-steps {
position: relative;
z-index: 1;
}
.main-8-left {
padding-top: 10px;
}
.main-8-title {
margin: 0;
color: #17181c;
font-size: 44px;
line-height: 0.92;
font-weight: 800;
text-transform: uppercase;
}
.main-8-title span {
display: block;
}
.main-8-title-red {
margin-top: 8px;
color: var(--red);
}
.main-8-subtitle {
margin: 34px 0 0;
max-width: 368px;
color: #8e8a84;
font-size: 19px;
line-height: 1.45;
font-weight: 500;
}
.main-8-pill {
margin-top: 34px;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 9px 20px;
border-radius: 999px;
background: #101115;
color: #fff;
font-size: 14px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.main-8-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--red);
flex: 0 0 8px;
}
.main-8-pill-sep {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}
.main-8-steps {
display: flex;
flex-direction: column;
gap: 20px;
}
.main-8-step-card {
position: relative;
display: flex;
column-gap: 24px;
align-items: start;
}
.main-8-step-marker {
position: relative;
width: 14px;
height: 14px;
margin-top: 8px;
margin-left: 2px;
border: 2px solid var(--red);
border-radius: 50%;
}
.main-8-step-content {
min-height: 123px;
padding: 0 0 22px;
border-bottom: 1px solid #e6dfd5;
}
.main-8-step-meta {
margin: 0 0 8px;
color: var(--red);
font-size: 19px;
line-height: 1.1;
font-weight: 700;
font-style: italic;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.main-8-step-title {
margin: 0 0 10px;
color: #111111;
font-size: 20px;
line-height: 1.25;
font-weight: 800;
}
.main-8-step-text {
margin: 0;
color: #8f8b85;
font-size: 19px;
line-height: 1.48;
font-weight: 500;
}
@media (max-width: 1100px) {
.main-8-container {
--main-8-line-left: 410px;
--main-8-line-width: 36px;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
column-gap: 48px;
padding: 0 28px;
}
.main-8-title {
font-size: 58px;
}
}
@media (max-width: 900px) {
.main-8-section {
padding: 56px 0 44px;
}
.main-8-container {
grid-template-columns: 1fr;
gap: 42px;
padding: 0 24px;
}
.main-8-container::before {
display: none;
}
.main-8-left {
padding-top: 0;
}
.main-8-title {
font-size: 52px;
}
.main-8-subtitle {
max-width: 420px;
}
.main-8-step-content {
min-height: 0;
}
}
@media (max-width: 767px) {
.main-8-container {
padding: 0 10px;
gap: 34px;
}
.main-8-title {
font-size: 42px;
}
.main-8-subtitle {
margin-top: 24px;
font-size: 16px;
}
.main-8-pill {
margin-top: 26px;
font-size: 12px;
letter-spacing: 0.1em;
padding: 9px 16px;
}
.main-8-step-card {
grid-template-columns: 22px minmax(0, 1fr);
column-gap: 14px;
}
.main-8-step-marker {
width: 12px;
height: 12px;
margin-top: 7px;
margin-left: 0;
}
.main-8-step-content {
padding-bottom: 18px;
}
.main-8-step-meta {
font-size: 15px;
}
.main-8-step-title {
font-size: 17px;
margin-bottom: 8px;
}
.main-8-step-text {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.main-4-animation .doc-layer,
.main-4-animation .doc-layer-delayed,
.main-4-animation .line-path,
.main-4-animation .bar,
.main-4-animation .highlight-sweep,
.main-4-animation .data-point,
.main-4-animation .checkmark,
.main-4-animation .pulse-circle {
animation: none !important;
}
} .main-9-section {
position: relative;
overflow: hidden;
padding: 0 0 20px;
background: #f7f1e6;
}
.main-9-container {
width: 100%;
max-width: 1032px;
margin: 0 auto;
}
.main-9-inner {
position: relative;
min-height: 586px;
}
.main-9-title {
margin: 0;
max-width: 960px;
color: #151515;
font-size: clamp(44px, 4.65vw, 44px);
font-weight: 800;
line-height: 0.99;
text-transform: uppercase;
}
.main-9-title span {
display: block;
}
.main-9-title-red {
display: inline !important;
color: var(--red);
}
.main-9-title-line {
display: flex;
align-items: center;
gap: 8px;
width: 270px;
height: 15px;
margin: 30px 0 17px;
}
.main-9-title-line span {
display: block;
width: 50px;
height: 3px;
background: var(--red);
}
.main-9-title-line i {
display: block;
width: 12px;
height: 3px;
background: #d8d0c5;
}
.main-9-title-line b {
display: block;
width: 170px;
height: 1px;
background: #ddd5c9;
}
.main-9-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
min-height: 210px;
}
.main-9-card {
position: relative;
min-height: 210px;
padding: 27px 26px 15px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.main-9-card:not(:first-child) {
padding-left: 31px;
border-left: 1px solid rgba(17, 17, 17, 0.09);
}
.main-9-card-head {
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
}
.main-9-icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 8px;
}
.main-9-icon img {
width: 42px;
height: 32px;
object-fit: contain;
}
.main-9-card-title {
margin: 0;
color: #141414;
font-size: 17px;
font-weight: 700;
line-height: 1.02;
text-transform: uppercase;
}
.main-9-card-red-line {
width: 29px;
height: 2px;
margin: 20px 0 20px;
background: var(--red);
}
.main-9-card-text {
margin: 0 0 15px;
max-width: 210px;
color: #555b61;
font-size: 19px;
font-weight: 400;
line-height: 1.42;
letter-spacing: 0.01em;
}
.main-9-badge {
display: inline-flex;
align-items: center;
min-height: 23px;
padding: 1px 10px 2px;
border: 1px solid rgba(200, 16, 46, 0.22);
border-radius: 4px;
background: rgba(255, 233, 226, 0.65);
color: var(--red);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.main-9-card:first-child .main-9-badge,
.main-9-card:nth-child(2) .main-9-badge {
border-color: rgba(17, 17, 17, 0.11);
background: rgba(245, 241, 234, 0.95);
color: #171717;
}
.main-9-bottom-line {
position: relative;
height: 24px;
margin-top: 38px;
display: flex;
align-items: center;
justify-content: center;
color: #b4b4b4;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.main-9-bottom-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #d9d1c7;
}
.main-9-bottom-line span {
position: relative;
z-index: 1;
display: inline-block;
padding: 0 20px;
background: #f7f1e6;
}
.main-9-profit-note p {
font-size: 30px;
font-weight: 700;
}
@media (max-width: 1100px) {
.main-9-container {
padding: 0 32px;
}
.main-9-title {
font-size: clamp(42px, 5.6vw, 58px);
}
.main-9-card {
padding-right: 18px;
}
.main-9-card:not(:first-child) {
padding-left: 22px;
}
}
@media (max-width: 900px) {
.main-9-section {
padding: 72px 0 82px;
}
.main-9-inner {
min-height: auto;
padding-left: 24px;
}
.main-9-title {
font-size: clamp(38px, 8vw, 54px);
line-height: 1.04;
}
.main-9-title-line {
margin-bottom: 38px;
}
.main-9-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 34px;
}
.main-9-card {
min-height: 190px;
padding: 24px 24px 10px 0;
}
.main-9-card:nth-child(odd) {
border-left: 0;
padding-left: 0;
}
.main-9-card:nth-child(even) {
border-left: 1px solid rgba(17, 17, 17, 0.09);
padding-left: 26px;
}
}
@media (max-width: 560px) {
.main-9-section {
padding: 58px 0 68px;
}
.main-9-container {
padding: 0 10px;
}
.main-9-inner {
padding-left: 18px;
}
.main-9-inner::before {
top: 4px;
bottom: 34px;
width: 2px;
}
.main-9-title {
font-size: 32px;
line-height: 1.12;
letter-spacing: -0.035em;
}
.main-9-title-line {
width: 190px;
margin: 0px 0 0px;
}
.main-9-title-line b {
width: 110px;
}
.main-9-cards {
grid-template-columns: 1fr;
gap: 0;
}
.main-9-card,
.main-9-card:not(:first-child),
.main-9-card:nth-child(even) {
min-height: auto;
padding: 24px 0 27px;
border-left: 0;
border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}
.main-9-card:last-child {
border-bottom: 0;
}
.main-9-card-title {
font-size: 16px;
}
.main-9-card-text {
max-width: 100%;
font-size: 15px;
}
.main-9-bottom-line {
margin-top: 28px;
font-size: 11px;
letter-spacing: 0.13em;
}
.main-9-bottom-line span {
padding: 0 12px;
}
} .main-10-section {
position: relative;
margin: 14px 0 124px;
}
.main-10-marquee {
background: var(--red);
transform: rotate(356deg) scaleX(1.03);
transform-origin: center;
padding: 22px 0;
width: calc(100% + 40px);
margin-left: -20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.main-10-track {
display: flex;
align-items: center;
width: max-content;
white-space: nowrap;
animation: vksMain10Ticker 28s linear infinite;
}
.main-10-item {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-size: 20px;
line-height: 1;
font-weight: 700;
color: #fff;
letter-spacing: 0.01em;
padding: 0 34px;
}
.main-10-item::after {
content: '/';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-54%);
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
}
@keyframes vksMain10Ticker {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.main-10-section+.package-section {
padding-top: 30px;
}
@media (max-width: 991px) {
.main-10-section {
margin: 22px 0 18px;
}
.main-10-marquee {
padding: 16px 0;
}
.main-10-item {
font-size: 18px;
padding: 0 28px;
}
.main-10-section+.package-section {
padding-top: 24px;
}
}
@media (max-width: 767px) {
.main-10-marquee {
transform: rotate(-1.2deg) scaleX(1.02);
width: calc(100% + 18px);
margin-left: -9px;
padding: 14px 0;
}
.main-10-item {
font-size: 15px;
padding: 0 22px;
}
.main-10-section+.package-section {
padding-top: 20px;
}
} .main-11 {
padding: 20px 0 34px;
}
.main-11-top {
display: grid;
align-items: start;
}
.main-11-title {
margin: 0;
max-width: 720px;
font-size: 44px;
line-height: 0.92;
letter-spacing: -0.04em;
font-weight: 800;
text-transform: uppercase;
color: var(--ink);
}
.main-11-problems {
list-style: none;
margin: 20px 0 0;
padding: 0;
max-width: 690px;
}
.main-11-problem-item {
position: relative;
margin: 0;
padding: 0 0 0 28px;
font-size: 19px;
line-height: 1.35;
font-weight: 400;
color: #000000;
}
.main-11-problem-item+.main-11-problem-item {
margin-top: 6px;
}
.main-11-left {
padding: 8px 42px 34px;
}
.main-11-problem-item::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 13px;
height: 2px;
border-radius: 2px;
background: var(--red);
}
.main-11-warning-box {
min-height: 424px;
border-radius: 0;
background: linear-gradient(180deg, rgba(216, 64, 82, 0.08) 0%, rgba(216, 64, 82, 0.14) 100%);
position: relative;
}
.main-11-warning-icon-wrap {
position: absolute;
top: 66px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.main-11-warning-icon,
.main-11-check-icon {
display: block;
max-width: 100%;
height: auto;
}
.main-11-warning-fallback,
.main-11-check-fallback {
font-size: 28px;
line-height: 1;
color: rgba(39, 44, 58, 0.35);
}
.main-11-card {
margin-top: 10px;
background: #fff;
border-radius: 24px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.main-11-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 42px 13px;
border-bottom: 1px solid rgba(28, 30, 36, 0.08);
}
.main-11-card-title {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 44px;
line-height: 1.02;
letter-spacing: -0.04em;
font-weight: 800;
text-transform: uppercase;
color: var(--ink);
}
.main-11-card-title-red {
color: var(--red);
}
.main-11-check-wrap {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.main-11-benefits {
list-style: none;
margin: 0;
padding: 8px 42px 34px;
}
.main-11-benefit-item {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0;
border-bottom: 1px solid rgba(28, 30, 36, 0.08);
}
.main-11-benefit-num {
width: 22px;
height: 22px;
border-radius: 50%;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(216, 64, 82, 0.12);
color: var(--red);
font-size: 12px;
line-height: 1;
font-weight: 700;
}
.main-11-benefit-text {
font-size: 19px;
line-height: 1.35;
font-weight: 400;
color: rgb(0, 0, 0);
}
@media (max-width: 1199px) {
.main-11-title {
font-size: 50px;
}
.main-11-top {
gap: 36px;
}
}
@media (max-width: 991px) {
.main-11 {
padding: 56px 0 28px;
}
.main-11-top {
grid-template-columns: 1fr;
}
.main-11-warning-box {
min-height: 240px;
}
.main-11-card {
margin-top: 40px;
}
.main-11-card-head,
.main-11-benefits {
padding-left: 28px;
padding-right: 28px;
}
.main-11-card-title {
font-size: 30px;
}
}
@media (max-width: 767px) {
.main-11-title {
font-size: 38px;
}
.main-11-problems {
margin-top: 28px;
}
.main-11-problem-item,
.main-11-benefit-text {
font-size: 15px;
}
.main-11-warning-box {
min-height: 180px;
}
.main-11-card {
border-radius: 18px;
}
.main-11-card-head {
align-items: flex-start;
padding: 24px 20px 20px;
}
.main-11-card-title {
font-size: 24px;
}
.main-11-benefits {
padding: 0 20px 20px;
}
.main-11-left {
padding: 10px 0px 35px;
}
.main-11-benefit-item {
gap: 12px;
padding: 14px 0;
align-items: flex-start;
}
} .main-12 {
padding: 58px 0 40px;
}
.main-12-heading {
margin: 0 0 28px;
font-size: 44px;
line-height: 0.98;
font-weight: 800;
letter-spacing: -0.04em;
color: #181a1f;
text-transform: uppercase;
}
.main-12-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 44px;
}
.main-12-tab {
min-width: 134px;
padding: 17px 28px 16px;
border-radius: 6px;
border: 2px solid var(--red);
background: transparent;
color: var(--red);
font-size: 20px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.main-12-tab.is-active {
background: var(--red);
color: #fff;
box-shadow: 0 16px 26px rgba(200, 16, 46, 0.16);
}
.main-12-panel {
display: none;
}
.main-12-panel.is-active {
display: block;
}
.main-12-top,
.main-12-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.main-12-top {
align-items: stretch;
}
.main-12-summary {
padding: 36px 38px 38px 40px;
}
.main-12-pack-label {
margin-bottom: 18px;
font-size: 19px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #aba39b;
}
.main-12-pack-label span {
color: var(--red);
font-weight: 700;
}
.main-12-pack-name {
margin: 0 0 18px;
font-size: 60px;
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.045em;
text-transform: uppercase;
color: #111111;
}
.main-12-pack-desc {
max-width: 330px;
margin: 0 0 28px;
font-size: 19px;
line-height: 1.45;
font-weight: 500;
color: #9a9289;
}
.main-12-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 278px;
min-height: 70px;
padding: 16px 22px;
border-radius: 6px;
background: var(--red);
color: #fff;
font-size: 21px;
line-height: 1;
font-weight: 800;
box-shadow: 0 14px 26px rgba(200, 16, 46, 0.16);
}
.main-12-photo {
height: 355px;
background: rgba(216, 64, 82, 0.08);
overflow: hidden;
}
.main-12-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px
}
.main-12-photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 2px 0 0 0;
color: #5b524a;
font-size: 16px;
line-height: 1.2;
}
.main-12-bottom {
border-top: 1px solid #e7dfd5;
}
.main-12-col {
min-width: 0;
padding: 30px 40px 30px;
}
.main-12-col+.main-12-col {
border-left: 1px solid #e7dfd5;
}
.main-12-table-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #b7aea4;
}
.main-12-table-title::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: #ddd4ca;
}
.main-12-table {
width: 100%;
border-collapse: collapse;
}
.main-12-table td {
padding: 7px 0;
font-size: 19px;
line-height: 1.35;
border-bottom: 1px solid #ece4db;
}
.main-12-table td:first-child {
width: 52%;
color: #b0a89f;
font-weight: 500;
position: relative;
padding-right: 18px;
}
.main-12-table td:last-child {
color: #17181c;
font-weight: 700;
text-align: right;
}
.main-12-table td.is-accent {
color: var(--red);
font-weight: 600;
font-style: italic;
}
@media (max-width: 991px) {
.main-12 {
padding: 50px 0 34px;
}
.main-12-heading {
font-size: 36px;
margin-bottom: 24px;
}
.main-12-tabs {
margin-bottom: 30px;
}
.main-12-tab {
min-width: 118px;
font-size: 18px;
padding: 15px 22px;
}
.main-12-top,
.main-12-bottom {
grid-template-columns: 1fr;
}
.main-12-summary,
.main-12-col {
padding-left: 24px;
padding-right: 24px;
}
.main-12-summary {
padding-top: 28px;
padding-bottom: 28px;
}
.main-12-pack-name {
font-size: 50px;
}
.main-12-photo {
min-height: 280px;
}
.main-12-col+.main-12-col {
border-left: none;
border-top: 1px solid #e7dfd5;
}
}
@media (max-width: 767px) {
.main-12-heading {
font-size: 30px;
}
.main-12-tabs {
gap: 8px;
}
.main-12-tab {
min-width: 98px;
flex: 1 1 calc(33.333% - 6px);
font-size: 16px;
padding: 14px 10px;
}
.main-12-summary,
.main-12-col {
padding-left: 0px;
padding-right: 0px;
}
.main-12-pack-label {
font-size: 14px;
}
.main-12-pack-name {
font-size: 40px;
margin-bottom: 14px;
}
.main-12-pack-desc,
.main-12-table td {
font-size: 15px;
}
.main-12-btn {
width: 100%;
min-width: 0;
font-size: 15px;
}
.main-12-photo {
min-height: 220px;
}
.main-12-table-title {
font-size: 14px;
margin-bottom: 14px;
}
.main-12-table td:first-child,
.main-12-table td:last-child {
width: auto;
display: block;
text-align: left;
}
.main-12-table td:last-child {
padding-top: 0;
}
} .nav-inner {
position: relative;
}
.nav-logo {
min-width: 118px;
min-height: 32px;
}
.nav-logo img,
.nav-logo .custom-logo {
display: block;
width: auto;
max-width: 280px;
height: 34px;
object-fit: cover;
}
.nav-logo-ph,
.nav-logo-ph::before {
display: none !important;
}
.nav-menu--desktop {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 54px;
flex: 0 0 auto;
min-width: 0;
overflow: visible;
}
.nav-menu--desktop a {
flex: 0 0 auto;
font-size: 21px;
font-weight: 400;
line-height: 1;
color: var(--black);
white-space: nowrap;
transition: color 0.2s var(--ease);
}
.nav-menu--desktop a:hover,
.nav-menu--desktop a.is-active,
.nav-drawer a:hover,
.nav-drawer a.is-active {
color: var(--red);
}
.nav-hamburger {
margin-left: 68px;
}
.nav-drawer {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: min(360px, calc(100vw - 40px));
max-height: calc(100vh - 82px);
overflow-y: auto;
padding: 14px;
border: 1px solid rgba(17, 17, 17, 0.06);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 22px 55px rgba(17, 17, 17, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
pointer-events: none;
transition:
opacity 0.25s var(--ease),
visibility 0.25s var(--ease),
transform 0.25s var(--ease);
}
.nav-drawer.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.nav-drawer__inner {
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-drawer a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 12px;
color: var(--black);
font-size: 16px;
font-weight: 500;
line-height: 1.2;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-drawer a:hover,
.nav-drawer a.is-active {
background: rgba(200, 16, 46, 0.06);
}
.nav-drawer__mobile-link {
display: none !important;
}
@media (max-width: 1100px) {
.nav-inner {
padding-left: 24px;
padding-right: 24px;
}
.nav-menu--desktop {
gap: 34px;
}
.nav-menu--desktop a {
font-size: 18px;
}
.nav-hamburger {
margin-left: 34px;
}
.nav-drawer {
right: 24px;
}
}
@media (max-width: 768px) {
.nav-inner {
position: static;
}
.nav-logo {
min-width: 92px;
}
.nav-logo img,
.nav-logo .custom-logo {
max-width: 148px;
height: 30px;
}
.nav-menu--desktop {
display: none;
}
.nav-hamburger {
margin-left: auto;
width: 31px;
}
.nav-drawer {
position: fixed;
top: 58px;
left: 0;
right: 0;
width: auto;
max-height: calc(100vh - 58px);
padding: 18px 20px 20px;
border: 0;
border-radius: 0 0 18px 18px;
box-shadow: 0 18px 35px rgba(17, 17, 17, 0.08);
}
.nav-drawer__mobile-link {
display: flex !important;
}
.nav-drawer a {
min-height: 46px;
padding: 0 2px;
font-size: 18px;
border-radius: 0;
}
.nav-drawer a:hover,
.nav-drawer a.is-active {
background: transparent;
}
} @media (min-width: 901px) {
.main-8-section {
overflow: visible;
}
.main-8-left {
position: sticky;
top: 92px;
align-self: start;
}
}
@media (max-width: 900px) {
.main-8-left {
position: static;
}
}
@media (max-width: 991px) {
.nav-inner {
height: 58px;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0 20px;
}
.nav-logo {
min-width: 0;
}
.nav-logo img,
.nav-logo .custom-logo {
max-width: 148px;
height: 30px;
}
.nav-menu--desktop {
display: none !important;
}
.nav-hamburger {
display: flex;
margin-left: auto;
width: 31px;
}
.nav-drawer {
position: fixed;
top: 58px;
left: 0;
right: 0;
width: auto;
max-height: calc(100dvh - 58px);
padding: 14px 16px 18px;
border: 0;
border-top: 1px solid rgba(17, 17, 17, 0.06);
border-radius: 0 0 18px 18px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 35px rgba(17, 17, 17, 0.1);
overflow-y: auto;
}
.nav-drawer__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.nav-drawer__mobile-link {
display: flex !important;
}
.nav-drawer a {
min-height: 40px;
padding: 0 10px;
border-radius: 10px;
background: rgba(17, 17, 17, 0.025);
color: var(--black);
font-size: 14px;
font-weight: 600;
line-height: 1.15;
}
.nav-drawer a:hover,
.nav-drawer a.is-active {
background: rgba(200, 16, 46, 0.07);
color: var(--red);
}
body.nav-drawer-open {
overflow: hidden;
}
}
@media (max-width: 380px) {
.nav-drawer__inner {
grid-template-columns: 1fr;
}
} @media (max-width: 991px) {
#site-nav .nav-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 14px;
width: 100%;
max-width: none;
overflow: visible;
}
#site-nav .nav-logo {
max-width: calc(100vw - 92px);
min-width: 0 !important;
overflow: hidden;
}
#site-nav .nav-logo img,
#site-nav .nav-logo .custom-logo {
max-width: 100%;
}
#site-nav .nav-menu,
#site-nav .nav-menu--desktop {
display: none !important;
visibility: hidden !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
flex: 0 0 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
#site-nav .nav-hamburger {
grid-column: 2;
justify-self: end;
display: flex !important;
margin-left: 0 !important;
}
#site-nav .nav-drawer {
display: block !important;
box-sizing: border-box;
}
} html,
body {
max-width: 100%;
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip;
}
}
@media (max-width: 991px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip !important;
}
}
body {
position: relative;
}
#site-nav,
.hero,
.main-2-section,
.main-3-section,
.main-4-section,
.main-5-section,
.main-6-section,
.main-7-section,
.main-8-section,
.main-9-section,
.main-10-section,
.main-11,
.main-12,
.form-section,
.brand-section,
.footer {
max-width: 100vw;
overflow-x: hidden;
}
@supports (overflow: clip) {
#site-nav,
.hero,
.main-2-section,
.main-3-section,
.main-4-section,
.main-5-section,
.main-6-section,
.main-7-section,
.main-8-section,
.main-9-section,
.main-10-section,
.main-11,
.main-12,
.form-section,
.brand-section,
.footer {
overflow-x: clip;
}
}
.container,
.nav-inner,
.hero-inner,
.main-2-container,
.main-3-container,
.main-4-container,
.main-5-container,
.main-6-container,
.main-7-container,
.main-8-container,
.main-9-container,
.main-11-container,
.main-12-container {
max-width: 100%;
}
.main-10-section {
overflow: hidden !important;
contain: paint;
padding: 15px 0px;
}
.main-10-marquee {
width: 100% !important;
margin-left: 0 !important;
transform: rotate(-1.2deg) !important;
}
.main-10-track {
max-width: none;
will-change: transform;
}
.main-6-map {
max-width: 100%;
margin-left: 0 !important;
}
}
@media (max-width: 480px) {
.main-6-map {
width: 100% !important;
}
} .main-7-col {
min-width: 0;
}
.main-7-collapse {
max-height: none;
overflow: hidden;
transition: max-height 0.35s ease;
will-change: max-height;
}
.main-7-col.is-collapsed .main-7-collapse {
max-height: var(--main-7-collapsed-height, 116px);
border-bottom: 1px solid #ece4db;
}
.main-7-col.is-open .main-7-collapse {
border-bottom: 0;
}
.main-7-col.is-static .main-7-collapse {
max-height: none !important;
border-bottom: 0;
}
.main-7-col.is-static .main-7-toggle {
display: none !important;
}
.main-7-toggle {
appearance: none;
-webkit-appearance: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin: 30px auto 0;
padding: 0;
border: 1px solid rgba(216, 64, 82, 0.28);
border-radius: 50%;
background: rgba(255, 255, 255, 0.54);
color: var(--red);
box-shadow: 0 12px 26px rgba(201, 22, 43, 0.1);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.main-7-toggle-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.main-7-toggle-icon {
display: block;
width: 16px;
height: 16px;
margin-top: -4px;
border-right: 3px solid currentColor;
border-bottom: 3px solid currentColor;
border-radius: 2px;
transform: rotate(45deg);
transition: transform 0.28s ease, margin 0.28s ease;
}
.main-7-toggle-icon::before,
.main-7-toggle-icon::after {
content: none !important;
display: none !important;
}
.main-7-col.is-open .main-7-toggle-icon {
margin-top: 4px;
transform: rotate(-135deg);
}
.main-7-toggle:hover,
.main-7-toggle:focus-visible {
color: #b80f24;
border-color: rgba(216, 64, 82, 0.44);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 14px 30px rgba(201, 22, 43, 0.14);
transform: translateY(-1px);
}
.main-7-toggle:focus-visible {
outline: 2px solid rgba(201, 22, 43, 0.28);
outline-offset: 4px;
}
@media (max-width: 767px) {
.main-7-toggle {
width: 48px;
height: 48px;
margin-top: 22px;
}
.main-7-toggle-icon {
width: 14px;
height: 14px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
}
} .main-12-photo {
position: relative;
overflow: hidden;
}
.main-12-photo.is-carousel {
cursor: pointer;
}
.main-12-photo-track {
position: relative;
width: 100%;
height: 100%;
}
.main-12-photo-slide {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
visibility: hidden;
transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
}
.main-12-photo-slide.is-active {
opacity: 1;
visibility: visible;
}
.main-12-photo:not(.is-carousel) .main-12-photo-slide {
position: relative;
opacity: 1;
visibility: visible;
} .main-12-carousel-arrow {
position: absolute;
top: 50%;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: var(--red);
font: inherit;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 0 14px 26px rgba(20, 14, 8, 0.14);
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.main-12-carousel-arrow:hover {
background: var(--red);
color: #fff;
transform: translateY(-50%) scale(1.04);
}
.main-12-carousel-arrow--prev {
left: 16px;
}
.main-12-carousel-arrow--next {
right: 16px;
}
.main-12-carousel-arrow span {
display: block;
margin-top: -3px;
font-size: 42px;
line-height: 1;
font-weight: 400;
}
.main-12-carousel-numbers {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: calc(100% - 32px);
padding: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 12px 24px rgba(20, 14, 8, 0.12);
transform: translateX(-50%);
}
.main-12-carousel-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 7px;
border: 0;
border-radius: 999px;
background: transparent;
color: #7e746b;
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.main-12-carousel-number.is-active,
.main-12-carousel-number:hover {
background: var(--red);
color: #fff;
}
@media (max-width: 767px) {
.main-12-carousel-arrow {
width: 38px;
height: 38px;
}
.main-12-carousel-arrow--prev {
left: 10px;
}
.main-12-carousel-arrow--next {
right: 10px;
}
.main-12-carousel-arrow span {
font-size: 34px;
}
.main-12-carousel-numbers {
bottom: 10px;
gap: 4px;
padding: 5px;
}
.main-12-carousel-number {
min-width: 24px;
height: 24px;
padding: 0 5px;
font-size: 11px;
}
} .main-12-carousel-arrow {
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--red);
box-shadow: 0 16px 34px rgba(20, 14, 8, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.main-12-carousel-arrow:hover {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.main-12-carousel-arrow span {
display: none;
}
.main-12-carousel-arrow::before {
content: '';
display: block;
width: 12px;
height: 12px;
border-top: 3px solid currentColor;
border-right: 3px solid currentColor;
border-radius: 1px;
}
.main-12-carousel-arrow--prev::before {
transform: translateX(2px) rotate(-135deg);
}
.main-12-carousel-arrow--next::before {
transform: translateX(-2px) rotate(45deg);
}
.main-12-carousel-arrow:focus-visible {
outline: 3px solid rgba(204, 9, 44, 0.22);
outline-offset: 4px;
}
@media (max-width: 767px) {
.main-12-carousel-arrow {
width: 42px;
height: 42px;
}
.main-12-carousel-arrow::before {
width: 10px;
height: 10px;
border-top-width: 2.5px;
border-right-width: 2.5px;
}
} .main-7-preview {
display: block;
overflow: hidden;
}
.main-7-preview-list .main-7-item:last-child {
border-bottom: 1px solid #ece4db;
}
.main-7-col.is-collapsed .main-7-preview {
display: block;
}
.main-7-col.is-open .main-7-preview {
display: none;
}
.main-7-col.is-collapsed .main-7-collapse {
max-height: 0 !important;
opacity: 0;
border-bottom: 0 !important;
pointer-events: none;
}
.main-7-col.is-open .main-7-collapse {
opacity: 1;
pointer-events: auto;
} body.contact-modal-open {
overflow: hidden;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.footer-logo {
display: inline-flex;
align-items: center;
max-width: 240px;
}
.footer-logo img,
.footer-logo .custom-logo {
display: block;
width: auto;
max-width: 100%;
max-height: 82px;
object-fit: contain;
}
.footer-logo-text {
max-width: 360px;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.contact-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.contact-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.contact-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(16, 18, 24, 0.62);
backdrop-filter: blur(6px);
}
.contact-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 520px);
max-height: calc(100vh - 48px);
overflow: auto;
background: #fff;
border-radius: 22px;
padding: 34px;
box-shadow: 0 28px 80px rgba(16, 18, 24, 0.24);
outline: none;
transform: translateY(14px) scale(0.98);
transition: transform 0.2s ease;
}
.contact-modal.is-open .contact-modal__dialog {
transform: translateY(0) scale(1);
}
.contact-modal__close {
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
cursor: pointer;
}
.contact-modal__close::before,
.contact-modal__close::after {
content: "";
position: absolute;
left: 12px;
top: 19px;
width: 16px;
height: 2px;
border-radius: 999px;
background: #17181c;
}
.contact-modal__close::before {
transform: rotate(45deg);
}
.contact-modal__close::after {
transform: rotate(-45deg);
}
.contact-modal__title {
margin: 0 48px 10px 0;
color: #17181c;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.03em;
}
.contact-modal__text {
margin: 0 0 22px;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.contact-modal__text p {
margin: 0;
}
.contact-modal__text p+p {
margin-top: 10px;
}
.contact-modal .form-fields {
gap: 12px;
}
.contact-modal .form-input,
.contact-modal .form-flag {
background: rgba(0, 0, 0, 0.055);
}
.contact-modal .form-check {
font-size: 13px;
line-height: 1.45;
}
.contact-modal .btn-red-full {
font-size: 16px;
}
.contact-modal__telegram {
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
min-height: 48px;
padding: 12px 18px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.06);
color: #17181c;
font-size: 15px;
font-weight: 700;
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
}
.contact-modal__telegram:hover {
background: #17181c;
color: #fff;
}
@media (max-width: 768px) {
.contact-modal {
padding: 14px;
}
.contact-modal__dialog {
padding: 28px 18px 20px;
border-radius: 18px;
}
.contact-modal__close {
top: 12px;
right: 12px;
}
.footer-logo {
max-width: 190px;
}
} .form-phone-wrap {
position: relative;
display: flex;
align-items: stretch;
overflow: visible;
}
.vks-country-picker {
position: relative;
z-index: 3;
flex: 0 0 124px;
min-width: 0;
}
.form-country-select--native {
position: absolute;
inset: auto auto 0 0;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.vks-country-picker__button {
position: relative;
display: flex;
width: 100%;
height: 100%;
min-height: 48px;
align-items: center;
gap: 7px;
padding: 13px 9px;
border: 0;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px 0 0 8px;
background: rgba(0, 0, 0, 0.05);
color: var(--muted);
font-family: var(--font);
font-size: 13px;
font-weight: 700;
line-height: 1;
outline: none;
cursor: pointer;
transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.vks-country-picker__button:hover,
.vks-country-picker__button:focus,
.vks-country-picker.is-open .vks-country-picker__button {
background: rgba(0, 0, 0, 0.08);
color: var(--dark);
}
.vks-country-flag {
display: block;
width: 22px;
height: 16px;
flex: 0 0 22px;
border-radius: 3px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 2px 5px rgba(15, 23, 42, 0.08);
}
.vks-country-picker__iso,
.vks-country-picker__code {
white-space: nowrap;
}
.vks-country-picker__chevron {
width: 7px;
height: 7px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: 0.72;
transition: transform 0.2s var(--ease);
}
.vks-country-picker.is-open .vks-country-picker__chevron {
transform: translateY(2px) rotate(225deg);
}
.vks-country-picker__list {
position: absolute;
top: calc(100% + 8px);
left: 0;
display: none;
width: 230px;
max-height: 260px;
padding: 6px;
overflow-y: auto;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
z-index: 30;
}
.vks-country-picker.is-open .vks-country-picker__list {
display: grid;
gap: 2px;
}
.vks-country-picker__option {
display: grid;
grid-template-columns: 22px 34px 1fr;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--dark);
font-family: var(--font);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-align: left;
cursor: pointer;
transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.vks-country-picker__option:hover,
.vks-country-picker__option:focus,
.vks-country-picker__option[aria-selected="true"] {
background: rgba(200, 16, 46, 0.08);
color: var(--red);
outline: none;
}
.form-input.phone {
flex: 1 1 auto;
min-width: 0;
border-radius: 0 8px 8px 0;
}
.contact-modal .vks-country-picker__button {
background: rgba(0, 0, 0, 0.055);
}
@media (max-width: 575px) {
.form-phone-wrap {
flex-direction: row;
gap: 0;
}
.vks-country-picker {
flex: 0 0 116px;
}
.vks-country-picker__button {
min-height: 46px;
padding: 12px 8px;
gap: 6px;
font-size: 12px;
}
.vks-country-flag {
width: 21px;
height: 15px;
flex-basis: 21px;
}
.vks-country-picker__list {
width: min(230px, calc(100vw - 28px));
max-height: 240px;
}
.form-input.phone {
border-radius: 0 8px 8px 0;
}
} .main-2-intro-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.main-2-intro-point {
display: inline-flex;
align-items: baseline;
gap: 7px;
}
.main-2-intro-point-mark {
color: var(--red);
font-weight: 800;
line-height: 1;
} .main-4-btn.is-disabled {
cursor: not-allowed;
opacity: 0.58;
pointer-events: none;
}
@media (max-width: 575px) {
.form-phone-wrap {
flex-direction: row;
gap: 0;
}
.form-country-select {
flex: 0 0 112px;
width: 112px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px 0 0 8px;
font-size: 13px;
}
.form-input.phone {
border-radius: 0 8px 8px 0;
}
} @media (max-width: 767px) {
.hero-inner {
padding-top: 26px;
padding-bottom: 38px;
gap: 20px;
}
.hero-title {
font-size: clamp(32px, 10.5vw, 40px);
line-height: 1.08;
}
.hero-sub {
margin-top: 14px;
font-size: 15.5px;
line-height: 1.38;
}
.hero-btn,
.main-3-btn,
.main-4-btn,
.main-5-btn,
.main-12-btn {
min-height: 50px;
margin-top: 20px;
padding: 14px 18px;
font-size: 14px;
}
.hero-gallery {
gap: 8px;
width: 100%;
max-width: 100%;
}
.hero-photo-item {
max-height: 168px;
}
.main-2-section,
.main-3-section,
.main-4-section,
.main-5-section,
.main-6-section,
.main-7-section,
.main-8-section,
.main-9-section,
.main-11,
.main-12,
.brand-section {
padding-top: 36px !important;
padding-bottom: 38px !important;
}
.main-10-section {
margin-top: 8px;
margin-bottom: 8px;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
footer {
padding-top: 34px;
}
.footer-top {
gap: 24px;
padding-bottom: 34px;
}
.main-2-title,
.main-3-title,
.main-4-title,
.main-5-title,
.main-6-title,
.main-7-title,
.main-8-title,
.main-9-title,
.main-11-title,
.main-12-heading,
.brand-h2 {
font-size: clamp(28px, 8.6vw, 34px) !important;
line-height: 1.08 !important;
margin-bottom: 18px;
}
.main-4-container {
flex-direction: column;
align-items: flex-start;
}
.main-2-grid,
.main-3-container,
.main-4-container,
.main-5-container,
.main-7-grid,
.main-8-container,
.main-11-top,
.main-12-top,
.main-12-bottom {
gap: 20px !important;
}
.main-2-intro,
.main-2-text,
.main-3-subtitle,
.main-4-contact-label,
.main-4-contact-name,
.main-4-phone,
.main-5-list li,
.main-6-year p,
.main-7-text,
.main-8-subtitle,
.main-11-problem-item,
.main-11-benefit-text,
.main-12-pack-desc,
.main-12-table td {
font-size: 12.5px !important;
line-height: 1.36 !important;
}
.main-9-profit-note p {
font-size: 15.5px !important;
}
.main-2-text {
margin-top: 18px;
}
.main-2-text p+p {
margin-top: 16px;
}
.main-2-photo-left {
margin-top: 18px;
}
.main-2-photo-left,
.main-2-photo-right {
max-height: 230px;
}
.main-2-photo-left img,
.main-2-photo-right img {
height: 100%;
object-fit: cover;
}
.main-3-accent {
margin-bottom: 16px;
}
.main-3-subtitle {
margin-top: 14px;
}
.main-3-list-card,
.main-3-list {
margin-top: 18px;
}
.main-3-list li {
min-height: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.main-3-frame {
padding: 0px;
}
.main-3-image,
.main-3-image-placeholder {
min-height: 0 !important;
max-height: 100%;
width: 100%;
object-fit: contain;
}
.main-4-contact {
margin-top: 22px;
}
.main-4-animation {
max-width: 100%;
margin-top: 8px;
}
.main-4-svg {
width: 100%;
max-height: 270px;
}
.main-5-container {
gap: 24px !important;
}
.main-5-content {
padding-left: 0;
}
.main-5-list {
margin-top: 14px;
}
.main-5-list li {
min-height: 0;
padding-top: 8px;
padding-bottom: 8px;
}
.main-5-cards {
min-height: 0;
}
.main-5-card,
.main-5-card-1,
.main-5-card-2,
.main-5-card-3 {
min-height: 0;
margin: 0 0 16px !important;
padding: 20px 22px 18px;
}
.main-5-card:last-child,
.main-5-card-3 {
margin-bottom: 0 !important;
}
.main-5-card-title {
font-size: 15px;
}
.main-5-card-text {
font-size: 13.5px;
line-height: 1.32;
}
.main-6-container {
min-height: 0;
}
.main-6-eyebrow {
margin-bottom: 12px;
font-size: 15px;
}
.main-6-years {
margin-top: 22px;
}
.main-6-year {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
padding-bottom: 16px;
}
.main-6-year+.main-6-year {
padding-top: 16px;
}
.main-6-year-icon,
.main-6-year-icon img {
width: 36px;
height: 36px;
min-height: 36px;
}
.main-6-year-heading {
gap: 8px;
}
.main-6-year-heading span,
.main-6-year-heading strong {
font-size: 18px;
}
.main-6-map {
width: 100% !important;
max-width: 420px;
margin: 18px auto 0 !important;
}
.main-7-title {
margin-bottom: 20px;
}
.main-7-col-head,
.main-7-col-head--between {
gap: 8px;
margin-bottom: 12px;
}
.main-7-col-title {
font-size: 19px;
}
.main-7-item {
min-height: 0;
gap: 10px;
padding: 9px 0;
}
.main-7-icon {
width: 20px;
height: 20px;
flex-basis: 20px;
font-size: 13px;
}
.main-7-metric {
margin-top: 12px;
}
.main-7-toggle {
height: 38px;
margin-top: 12px;
}
.main-8-container {
gap: 20px !important;
}
.main-8-subtitle {
margin-top: 14px;
}
.main-8-pill {
margin-top: 16px;
padding: 8px 12px;
}
.main-8-step-card {
padding-top: 12px;
padding-bottom: 12px;
}
.main-9-section {
overflow: hidden;
}
.main-9-inner {
padding-left: 0px;
}
.main-9-title-line {
margin-bottom: 0px;
}
.main-9-cards {
row-gap: 16px;
}
.main-9-card {
min-height: 0;
padding-top: 14px;
padding-bottom: 10px;
}
.main-10-marquee {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
.main-10-item {
font-size: 13px;
padding-left: 16px;
padding-right: 16px;
}
.main-11-problems {
margin-top: 18px;
}
.main-11-warning-box {
min-height: 120px;
}
.main-11-card {
margin-top: 24px;
}
.main-11-card-head,
.main-11-benefits {
padding-left: 18px;
padding-right: 18px;
}
.main-12-tabs {
gap: 6px;
margin-bottom: 20px;
}
.main-12-tab {
min-width: 0;
padding: 11px 8px;
font-size: 13px;
}
.main-12-summary {
padding: 0px;
}
.main-12-col {
padding-top: 20px;
padding-bottom: 20px;
}
.main-12-pack-label {
margin-bottom: 10px;
font-size: 12px;
}
.main-12-pack-name {
margin-bottom: 10px;
font-size: 34px;
}
.main-12-pack-desc {
margin-bottom: 18px;
}
.main-12-photo {
height: 230px;
min-height: 0 !important;
}
.main-12-table-title {
margin-bottom: 10px;
font-size: 12px;
}
.main-12-table td {
padding-top: 5px;
padding-bottom: 5px;
}
.brand-h2 {
margin-bottom: 18px;
}
.brand-gallery {
gap: 8px;
}
.brand-card {
border-radius: 12px;
}
}
@media (max-width: 480px) {
.main-2-section,
.main-3-section,
.main-4-section,
.main-5-section,
.main-6-section,
.main-7-section,
.main-8-section,
.main-9-section,
.main-11,
.main-12,
.brand-section {
padding-top: 30px !important;
padding-bottom: 32px !important;
}
.hero-inner {
padding-top: 22px;
padding-bottom: 32px;
}
.hero-title {
font-size: 34px;
}
.main-2-title,
.main-3-title,
.main-4-title,
.main-5-title,
.main-6-title,
.main-7-title,
.main-8-title,
.main-9-title,
.main-11-title,
.main-12-heading,
.brand-h2 {
font-size: 18px !important;
}
.main-4-svg {
max-height: 235px;
}
.main-12-photo {
height: 210px;
}
} @media (max-width: 767px) {
.main-3-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
margin-left: 0 !important;
margin-top: 14px !important;
}
.main-3-list li {
min-height: 0 !important;
align-items: flex-start;
gap: 7px !important;
padding: 8px 0 !important;
}
.main-3-list li:nth-child(odd) {
padding-right: 8px !important;
}
.main-3-list-dot {
width: 5px;
height: 5px;
flex-basis: 5px;
margin-top: 7px;
}
.main-3-list-text {
font-size: 12.8px !important;
line-height: 1.28 !important;
}
.main-4-content {
min-width: 100%;
}
.main-5-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 14px;
margin-top: 14px !important;
border-bottom: 0;
}
.main-5-list li {
min-height: 0 !important;
padding: 8px 0 8px 16px !important;
font-size: 12.8px !important;
line-height: 1.28 !important;
}
.main-5-list li::before {
top: 8px;
font-size: 16px;
}
.main-5-list li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.main-7-col.is-open .main-7-list:not(.main-7-preview-list) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
}
.main-7-col.is-open .main-7-list:not(.main-7-preview-list) .main-7-item {
min-height: 0 !important;
gap: 7px !important;
padding: 8px 0 !important;
}
.main-7-col.is-open .main-7-list:not(.main-7-preview-list) .main-7-item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.main-7-icon {
width: 18px !important;
height: 18px !important;
flex-basis: 18px !important;
font-size: 11px !important;
}
.main-7-text {
font-size: 12.8px !important;
line-height: 1.28 !important;
}
.main-8-steps {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px 14px !important;
}
.main-8-step-card {
display: block !important;
padding: 0 !important;
}
.main-8-step-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.main-8-step-content {
min-height: 0 !important;
padding: 10px 0 12px !important;
}
.main-8-step-meta {
margin-bottom: 6px !important;
font-size: 11.5px !important;
line-height: 1.12 !important;
}
.main-8-step-title {
margin-bottom: 6px !important;
font-size: 13.8px !important;
line-height: 1.2 !important;
}
.main-8-step-text {
font-size: 12.8px !important;
line-height: 1.3 !important;
}
.main-9-cards {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 14px !important;
}
.main-9-card,
.main-9-card:not(:first-child),
.main-9-card:nth-child(even) {
min-height: 0 !important;
gap: 10px !important;
padding: 12px 0 14px !important;
border-left: 0 !important;
border-bottom: 1px solid rgba(17, 17, 17, 0.09) !important;
}
.main-9-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.main-9-card-head {
min-height: 0;
gap: 8px;
}
.main-9-icon,
.main-9-icon img {
width: 28px;
height: 24px;
}
.main-9-card-title {
font-size: 12.8px !important;
line-height: 1.12 !important;
}
.main-9-card-red-line {
margin: 4px 0;
}
.main-9-card-text {
max-width: none !important;
margin-bottom: 8px !important;
font-size: 12.8px !important;
line-height: 1.3 !important;
}
.main-9-badge {
min-height: 20px;
padding: 1px 7px 2px;
font-size: 11px;
}
.main-11-problems,
.main-11-benefits {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0 14px;
}
.main-11-problem-item+.main-11-problem-item {
margin-top: 0;
}
.main-11-problem-item {
padding-left: 18px !important;
padding-bottom: 8px;
font-size: 12.8px !important;
line-height: 1.3 !important;
}
.main-11-problem-item::before {
top: 8px;
width: 9px;
}
.main-11-benefits {
padding-top: 0 !important;
padding-bottom: 18px !important;
}
.main-11-benefit-item {
gap: 8px !important;
padding: 8px 0 !important;
}
.main-11-benefit-num {
width: 18px;
height: 18px;
flex-basis: 18px;
font-size: 10px;
}
.main-11-benefit-text {
font-size: 12.8px !important;
line-height: 1.3 !important;
}
.main-12-table tr {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #ece4db;
}
.main-12-table td,
.main-12-table td:first-child,
.main-12-table td:last-child {
display: block !important;
width: auto !important;
padding: 0 !important;
border-bottom: 0 !important;
text-align: left !important;
font-size: 12.8px !important;
line-height: 1.28 !important;
}
.brand-gallery {
grid-auto-flow: dense;
} } @media (min-width: 768px) and (max-width: 991px) {
.main-3-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
.main-3-list li {
min-height: 0 !important;
align-items: flex-start;
gap: 9px !important;
padding: 10px 0 !important;
}
.main-3-list-dot {
width: 6px;
height: 6px;
flex-basis: 6px;
margin-top: 8px;
}
.main-3-list-text {
font-size: 15px !important;
line-height: 1.32 !important;
}
.main-5-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
gap: 0 22px;
border-bottom: 0;
}
.main-5-list li {
min-height: 0 !important;
padding: 10px 0 10px 18px !important;
font-size: 15px !important;
line-height: 1.32 !important;
}
.main-5-list li::before {
top: 10px;
font-size: 17px;
}
.main-7-col.is-open .main-7-list:not(.main-7-preview-list) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
}
.main-7-col.is-open .main-7-list:not(.main-7-preview-list) .main-7-item {
min-height: 0 !important;
gap: 9px !important;
padding: 10px 0 !important;
}
.main-7-icon {
width: 19px !important;
height: 19px !important;
flex-basis: 19px !important;
font-size: 12px !important;
}
.main-7-text {
font-size: 15px !important;
line-height: 1.32 !important;
}
.main-8-steps {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 14px 22px !important;
}
.main-8-step-card {
display: block !important;
padding: 0 !important;
}
.main-8-step-marker,
.main-8-step-connector {
display: none !important;
}
.main-8-step-content {
min-height: 0 !important;
padding: 12px 0 14px !important;
}
.main-8-step-meta {
margin-bottom: 7px !important;
font-size: 13px !important;
line-height: 1.15 !important;
}
.main-8-step-title {
margin-bottom: 7px !important;
font-size: 16px !important;
line-height: 1.22 !important;
}
.main-8-step-text {
font-size: 15px !important;
line-height: 1.34 !important;
}
.main-9-cards {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 22px !important;
}
.main-9-card,
.main-9-card:not(:first-child),
.main-9-card:nth-child(even) {
min-height: 0 !important;
gap: 12px !important;
padding: 14px 0 16px !important;
border-left: 0 !important;
border-bottom: 1px solid rgba(17, 17, 17, 0.09) !important;
}
.main-9-card-head {
min-height: 0;
gap: 10px;
}
.main-9-card-title,
.main-9-card-text {
font-size: 15px !important;
line-height: 1.3 !important;
}
.main-11-problems,
.main-11-benefits {
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0 22px;
}
.main-11-problem-item+.main-11-problem-item {
margin-top: 0;
}
.main-11-problem-item {
padding-left: 20px !important;
padding-bottom: 10px;
font-size: 15px !important;
line-height: 1.32 !important;
}
.main-11-benefit-item {
gap: 10px !important;
padding: 10px 0 !important;
}
.main-11-benefit-text {
font-size: 15px !important;
line-height: 1.32 !important;
}
.main-12-table tr {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #ece4db;
}
.main-12-table td,
.main-12-table td:first-child,
.main-12-table td:last-child {
display: block !important;
width: auto !important;
padding: 0 !important;
border-bottom: 0 !important;
text-align: left !important;
font-size: 15px !important;
line-height: 1.32 !important;
}
.brand-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 14px;
}
.brand-card--wide,
.brand-card--banner {
grid-column: 1 / -1;
}
.brand-gallery .brand-card:nth-last-child(2):not(.brand-card--wide):not(.brand-card--banner) {
grid-column: 1 / -1;
aspect-ratio: 2 / 1;
}
} .brand-mobile-carousel-controls {
display: none;
}
@media (max-width: 767px) {
.brand-gallery[data-brand-mobile-carousel] {
display: block !important;
}
.brand-gallery[data-brand-mobile-carousel] .brand-card:not([data-brand-mobile-slide]),
.brand-gallery[data-brand-mobile-carousel] [data-brand-mobile-hidden] {
display: none !important;
}
.brand-gallery[data-brand-mobile-carousel] [data-brand-mobile-slide] {
display: none !important;
width: 100%;
margin: 0;
grid-column: auto !important;
aspect-ratio: 1.55 / 2;
}
.brand-gallery[data-brand-mobile-carousel] .brand-card--wide {
display: none !important;
}
.brand-gallery[data-brand-mobile-carousel] [data-brand-mobile-slide].is-active {
display: block !important;
}
.brand-gallery[data-brand-mobile-carousel] [data-brand-mobile-slide] img {
width: 100%;
height: 100%;
object-fit: contain !important;
object-position: center;
}
.brand-gallery[data-brand-mobile-carousel] .brand-card--wide img {
object-fit: contain !important;
}
.brand-mobile-carousel-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 12px 0 14px;
}
.brand-mobile-carousel-arrow {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border: 1px solid rgba(200, 16, 46, 0.26);
border-radius: 999px;
background: #fff;
box-shadow: 0 10px 22px rgba(17, 17, 17, 0.08);
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.brand-mobile-carousel-arrow::before {
content: '';
display: block;
width: 9px;
height: 9px;
border-top: 2px solid #c8102e;
border-right: 2px solid #c8102e;
}
.brand-mobile-carousel-arrow--prev::before {
transform: translateX(2px) rotate(-135deg);
}
.brand-mobile-carousel-arrow--next::before {
transform: translateX(-2px) rotate(45deg);
}
.brand-mobile-carousel-arrow:active {
transform: scale(0.96);
}
.brand-mobile-carousel-dots {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
.brand-mobile-carousel-dot {
min-width: 24px;
height: 24px;
padding: 0 5px;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(23, 24, 28, 0.46);
font-size: 10px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease;
}
.brand-mobile-carousel-dot.is-active {
background: #c8102e;
color: #fff;
}
}