html {
font-size: calc(0.00006250000000052047rem + 1.1110416666666663vw);
}
/* Останавливаем резиновую верстку на экранах шире 1280px */
@media screen and (min-width: 1440px) {
html {
font-size: 1rem; /* Фиксируем размер шрифта */
}
}
/* Сохраняем резиновую верстку для экранов меньше 1280px */
@media screen and (max-width: 768px) {
html {
font-size: calc(0.00006250000000052047rem + 1.1110416666666663vw);
}
}
html {
scroll-behavior: smooth;
}
:root {
--color-background: #0c141f;
--color-text: #ffffff;
--color-accent: #0ddbb3;
--color-accent-lines: linear-gradient(to bottom, #0ddbb3 0%,#1563e0 100%);
--color-lines: linear-gradient(to bottom, #0ddbb3 0%,#0ddbb3 100%);
--color-lines-3: linear-gradient(to bottom, #0ddbb3 0%,#0ddbb3 100%);
--color-lines-4: linear-gradient(to bottom, #101d1f 0%,#0ddbb3 100%);
--color-accent-blue: #1563e0;
--color-lines: linear-gradient(45deg, #0ddbb220 0%,#1563e020 100%);
--color-object-bg: linear-gradient(120deg, #0ddbb200 0%,#0c141f 50%, #1563e007 100%);
--color-accent-bg: linear-gradient(120deg, #0ddbb310 0%, #0c141f 50%, #1563e010 100%);
--color-button: linear-gradient(45deg, #0ddbb3 0%,#1563e0 100%); --color-lines-5: linear-gradient(to bottom, #0ddbb3 0%,#1563e0 100%);
--color-object-background: linear-gradient(to bottom, #101d1f 0%,#1563e0 100%);
--color-text-gray70: #ffffffbb;
--color-dimond-gradient: radial-gradient(rgba(21,99,224,0.082) 0%,#0c141f00 100%);
}
body {
background-color: var(--color-background);
font-family: "Inter", Arial, sans-serif;
color: var(--color-text);
font-size: 1rem;
font-weight: 300;
}
H1 {
font-size: 3.07rem;
font-family: Inter;
font-weight: 700;
font-style: normal;
line-height: 108%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
}
/* H2 {
font-size: 2.5rem;
font-family: Inter;
font-weight: 600;
font-style: normal;
line-height: 120%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
} */
H2 {
font-size: 2rem;
font-family: Inter;
font-weight: 700;
font-style: normal;
line-height: 120%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
}
H3 {
font-size: 1.5rem;
font-family: Inter;
font-weight: 600;
font-style: normal;
line-height: 120%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
}
p {
font-size: 1.125rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 160%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
}
a {
font-size: 1.125rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
margin-block-start: 0rem;
margin-block-end: 0rem;
color: var(--color-text);
}
button {
cursor: pointer;
}
.subtitle {
font-size: 1.125rem;
font-family: Inter;
font-weight: 500;
font-style: normal;
text-decoration: none;
text-transform: none;
}
.text {
font-size: 1.125rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
}
body {
margin: 0;
}
.overlay {
display: none;
}
.cookie-banner {
position: fixed;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1000;
display: none;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-radius: 1rem;
border: 0.0625rem solid #1563e040;
background: #0c141fee;
backdrop-filter: blur(0.4rem);
}
.cookie-banner.is-visible {
display: flex;
}
.cookie-banner-text {
font-size: 0.95rem;
line-height: 1.45;
color: var(--color-text-gray70);
max-width: 60rem;
}
.cookie-banner-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.cookie-btn {
min-height: 2.5rem;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
border: 0.0625rem solid #1563e050;
cursor: pointer;
font-size: 0.95rem;
}
.cookie-btn-accept {
background: #0ddbb2e2;
color: #0c141f;
border: none;
}
.cookie-btn-decline {
background: transparent;
color: var(--color-text);
}
@media screen and (max-width: 768px) {
.cookie-banner {
left: 1.6rem;
right: 1.6rem;
bottom: 1.6rem;
flex-direction: column;
align-items: stretch;
gap: 2rem;
border-radius: 2rem;
padding: 2.2rem;
}
.cookie-banner-text {
font-size: 2.3rem;
line-height: 1.35;
}
.cookie-banner-actions {
width: 100%;
gap: 1.4rem;
}
.cookie-btn {
width: 100%;
min-height: 7rem;
font-size: 2.5rem;
border-radius: 1.6rem;
}
}
.hero {
margin-top: 6.5rem;
}
.s-text {
font-size: 0.875rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 160%;
text-decoration: none;
text-transform: none;
}
.header-wrapper {
position: fixed;
top: 0.75rem;
left: auto;
right: auto;
z-index: 999;
width: 70.8rem;
display: flex;
flex-direction: row;
align-items: center;
min-width: 70.8rem;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-left: auto;
margin-right: auto;
background: rgba(12, 20, 31, 0.5);
border-radius: 100rem;
backdrop-filter: blur(0.9rem);
-webkit-backdrop-filter: blur(0.9rem);
box-shadow: 0 0.38rem 1.25rem rgba(0, 0, 0, 0.2);
transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, top 220ms ease;
}
.header-wrapper.is-scrolled {
background: rgba(12, 20, 31, 0.62);
border-color: rgba(21, 99, 224, 0.26);
box-shadow: 0 0.52rem 1.55rem rgba(0, 0, 0, 0.24);
}
section {
min-width: 73.75rem;
max-width: 73.75rem;
margin-bottom: 5rem;
margin-left: auto;
margin-right: auto;
}
footer {
background: var(--color-background);
position: relative;
margin-top: 6rem;
padding-top: 3.125rem;
padding-bottom: 3.125rem;
padding-left: 3.5rem;
padding-right: 3.5rem;
margin-left: auto;
margin-right: auto;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.0625rem;
border-radius: 0.0625rem;
background: linear-gradient(
90deg,
rgba(13, 219, 179, 0.42) 0%,
rgba(21, 99, 224, 0.22) 45%,
rgba(255, 255, 255, 0.08) 100%
);
pointer-events: none;
}
.head {
display: flex;
justify-content: center;
}
.header-logo {
width: 11.875rem;
max-height: 2.4rem;
cursor: pointer;
position: relative;
display: flex;
gap: .625rem;
align-items: center;
}
.header-button {
max-height: 2rem;
min-height: 1.6rem;
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.35rem .5rem 1.35rem;
position: relative;
overflow: hidden;
background: transparent;
color: var(--color-text);
transition: color 250ms ease;
border-radius: 1.5rem;
border-width: 0;
}
.header-button::before,
.header-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.header-button::before {
background: linear-gradient(45deg, #0ddbb224 0%, #1563e024 100%);
}
.header-button::after {
background: linear-gradient(45deg, #0ddbb3 0%, #1563e0 100%);
opacity: 0;
transition: opacity 250ms ease;
}
.header-button:hover::after {
opacity: 1;
}
.header-button > * {
position: relative;
z-index: 1;
}
.header-button .text {
white-space: nowrap;
font-size: 1rem;
line-height: 1.2;
}
.header-telegram {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.2rem;
margin-right: 1.3rem;
opacity: 0.85;
transition: color 250ms ease, opacity 250ms ease;
}
.header-telegram svg {
width: 2rem;
height: 2rem;
}
.header-telegram:hover {
color: #ffffff95;
opacity: 1;
}
.header-button:hover {
color: var(--color-background);
}
.header-button-arrow path {
transition: 250ms ease;
}
.header-button:hover .header-button-arrow path {
fill: var(--color-background);
}
.header-button:hover .header-button-arrow{
transform:translateX(0.06rem);
}
.header-button-arrow {
min-width: 1.25rem;
width: 1.25rem;
height: 1rem;
width: 1.25rem;
transition: 500ms ease;
transform:translateX(-1.25rem);
}
.button-arrow-wrapper {
display: flex;
width: 1.25rem;
height: 1rem;
overflow: hidden;
border-radius: 1.5rem;
}
.menu {
display: flex;
gap: 1.5rem;
/* transition: 250ms ease; */
margin-left: 2.2rem;
margin-right: auto;
/* height: 1.97rem; */
align-items: center;
}
.menu-list {
display: flex;
gap: 2.15rem;
list-style: none;
padding: 0;
margin: 0;
}
.menu-list--primary {
gap: 1.5rem;
}
.menu-item {
transition: 250ms ease;
cursor: pointer;
font-size: 1.125rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 115%;
text-decoration: none;
text-transform: none;
color: #ffffffb8;
position: relative;
}
.menu-item:hover {
color: #ffffff;
}
.menu-item.is-active {
color: var(--color-text);
}
.menu-item::after {
content: "";
position: absolute;
left: 0;
bottom: -0.45rem;
width: 100%;
height: 0.1rem;
border-radius: 100rem;
background: transparent;
transition: background 250ms ease;
}
.menu-item.is-active::after {
background: var(--color-accent);
}
.menu-item:focus-visible,
.header-button:focus-visible,
.header-telegram:focus-visible {
outline: .125rem solid rgba(13, 219, 179, 0.8);
outline-offset: .125rem;
border-radius: 1rem;
}
.header-logo:hover .star-logo {
transform: rotate(180deg);
}
.star-logo {
transition: transform 0.5s ease;
}
@keyframes hero-bg-shimmer {
0% {
background-position: 12% 22%;
}
35% {
background-position: 90% 48%;
}
70% {
background-position: 38% 78%;
}
100% {
background-position: 12% 22%;
}
}
.hero {
position: relative;
max-width: 73.75rem;
/* height: 31.5rem; */
perspective: 1000px;
isolation: isolate;
align-items: stretch;
/* background-image: url("/wp-content/themes/fluxweb/assets/media/hero_bg.svg"); */
background: var(--object-background, linear-gradient(122deg, rgba(13, 219, 178, 0.075) -9.98%, rgba(21, 99, 224, 0.075) 102.62%));
background-size: 100% 100%;
display: flex;
flex-direction: row;
gap: 1.5rem;
justify-content: space-between;
border-radius: 2.3rem;
overflow: hidden;
}
.hero::before,
.work::before,
.form-section::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 0;
pointer-events: none;
background: linear-gradient(
118deg,
rgba(13, 219, 178, 0.14) 0%,
rgba(12, 20, 31, 0) 28%,
rgba(21, 99, 224, 0.12) 48%,
rgba(12, 20, 31, 0) 64%,
rgba(13, 219, 178, 0.09) 82%,
rgba(21, 99, 224, 0.11) 100%
);
background-size: 220% 220%;
}
.hero::before {
animation: hero-bg-shimmer 45s ease-in-out infinite;
}
.work::before,
.form-section::before {
animation: none;
background-position: 50% 40%;
}
.hero > .hero-content,
.hero > .hero-img {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero::before {
animation: none;
background-position: 50% 40%;
}
}
.w70t {
color: var(--color-text-gray70);
}
.hero-content {
flex: 0 0 33.9rem;
width: 33.9rem;
max-width: 33.9rem;
align-self: stretch;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 3rem 0 3rem 3rem;
justify-content: flex-start;
z-index: 2;
}
.hero-content .hero-lead {
margin-bottom: 0;
}
.hero-content h1 {
margin: 0;
}
.hero-head {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.hero-content h1.hero-title {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
gap: 0.08em;
line-height: 1.12;
}
.hero-title-line {
display: block;
}
.hero-title-accent {
color: rgba(13, 219, 178, 0.95);
}
.hero-title-kicker {
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.01em;
}
.hero-title-location {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-size: 0.42em;
font-weight: 600;
line-height: 1.2;
color: #ffffffd0;
white-space: nowrap;
}
.hero-title-loc-icon {
width: 1em;
height: 1em;
flex-shrink: 0;
margin-top: 0.06em;
color: var(--color-accent);
}
.hero-content p.w70t{
margin: 0;
font-size: 1rem;
line-height: 150%;
}
.hero-lead strong {
font-weight: 600;
color: rgba(13, 219, 178, 0.95);
}
.hero-stat-bar {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
font-size: 0.95rem;
line-height: 1.45;
color: var(--color-text-gray70);
}
.hero-stat strong {
font-weight: 600;
color: rgba(13, 219, 178, 0.95);
}
.hero-stat-dot {
opacity: 0.55;
}
.hero-actions-alt {
margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--color-text-gray70);
}
.hero-link-telegram {
color: rgba(13, 219, 178, 0.92);
text-decoration: underline;
text-underline-offset: 0.15em;
transition: color 175ms ease;
}
.hero-link-telegram:hover {
color: var(--color-accent);
}
.hero-trust-proof {
margin: 0;
}
.hero-trust-proof a {
color: rgba(13, 219, 178, 0.92);
text-decoration: underline;
text-underline-offset: 0.12em;
transition: color 175ms ease;
}
.hero-trust-proof a:hover {
color: var(--color-accent);
}
.hero-actions-note {
margin: 0.65rem 0 0;
font-size: 0.875rem;
line-height: 1.45;
}
.hero-cta {
margin-top: auto;
padding-top: 0.35rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
.hero-button {
margin-top: 0;
padding: .625rem 2rem;
background: rgba(13, 219, 178, 0.89);
width: 27.25rem;
max-width: 100%;
min-width: 20.7rem;
height: 2.5rem;
flex-shrink: 0;
border-radius: 1.5rem;
color: var(--color-background);
cursor: pointer;
transition: background-color 175ms ease, color 175ms ease, box-shadow 175ms ease, border-color 175ms ease;
outline: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: .0625rem solid rgba(13, 219, 179, 0.35);
}
.hero-button.hero-button-telegram {
width: 3.8rem;
min-width: 3.8rem;
max-width: 3.8rem;
min-height: 3.8rem;
height: 3.8rem;
padding: 0;
background: transparent;
color: var(--color-text);
border: .0625rem solid rgba(13, 219, 179, 0.45);
flex-shrink: 0;
}
.hero-button-telegram svg {
width: 2rem;
height: 2rem;
display: block;
}
.hero-button-telegram svg path {
fill: currentColor;
transition: fill 100ms ease;
}
@media screen and (max-width: 768px) {
.hero-content {
width: 100%;
max-width: 100%;
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
.hero-content h1,
.hero-content p.w70t {
margin: 0;
}
.hero-content h1.hero-title {
width: 100%;
align-items: stretch;
}
.hero-title-line {
width: 100%;
}
.hero-cta {
width: 100%;
gap: 0.3rem;
}
.hero-button.m {
display: none;
}
}
.hero-button:hover {
background: var(--color-accent);
color: var(--color-background);
box-shadow: .1rem .1rem 2rem #0ddbb233;
}
.text.herobtn {
font-weight: 400;
font-size: 1.22rem;
line-height: 1.2;
white-space: nowrap;
}
@media screen and (max-width: 768px) {
.text.herobtn {
font-size: 3.05rem;
line-height: 1.2;
}
}
.hero-trust {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hero-trust-line {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
color: var(--color-text-gray70);
font-size: 0.95rem;
line-height: 1.45;
}
.hero-chip {
color: var(--color-text);
font-weight: 400;
white-space: nowrap;
}
.hero-dot {
opacity: 0.55;
}
.hero-trust-sla {
margin: 0;
color: rgba(13, 219, 178, 0.89);
font-size: 0.95rem;
line-height: 1.45;
}
.hero-geo {
margin: -0.35rem 0 0;
color: var(--color-text-gray70);
font-size: 0.9375rem;
line-height: 1.45;
}
.hero-geo-link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.hero-geo-link:hover {
color: #ffffff;
}
@media screen and (max-width: 768px) {
.hero-trust {
gap: 0.65rem;
margin-top: 1.75rem;
}
.hero-geo {
margin: 0;
font-size: 2.9rem;
line-height: 1.45;
}
.hero-trust-line,
.hero-trust-sla {
font-size: 2.65rem;
line-height: 1.45;
}
.hero-chip {
font-weight: 500;
}
}
.hero-img {
position: relative;
flex: 0 0 27.25rem;
width: 27.25rem;
max-width: 27.25rem;
height: 26.75rem;
max-height: 26.75rem;
align-self: center;
margin: 0 6.3rem 0 1.6rem;
display: flex;
align-items: center;
justify-content: center;
scale: 0.95;
/* overflow: hidden; */
z-index: 1;
}
.hero-bg {
width: 40rem;
height: 40rem;
background: #1563e0;
opacity: 3%;
position: absolute;
top: -25%;
left: -25%;
z-index: -5;
border-radius: 31.25rem;
filter: blur(5rem);
}
.hero-pic {
width: 13.25rem;
height: 13.25rem;
position: absolute;
top: auto;
left: auto;
transition: transform 0.5s ease-out, filter 0.5s ease-out; /* Smooth transition */
filter: brightness(1); /* Initial brightness */
box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.3);
border-radius: 1.5rem;
}
.hero-card-1, .hero-card-2, .hero-card-3 {
transition: transform 0.5s ease-out, opacity 0.5s ease-out, filter 0.5s ease-out; /* Smooth transition */
box-shadow: 1rem 1rem 1.25rem rgba(0, 0, 0, 0.3); /* Add shadow for depth */
border-radius: 1.5rem;
z-index: 1;
}
.hero-card-1 {
display: flex;
background-image: url("/wp-content/themes/fluxweb/assets/media/bg-hero-card-1.svg");
background-size: 100% 100%;
flex-direction: row;
width: 27.38rem;
height: 4.8125rem;
position: absolute;
top: 0%;
left: 0%;
align-items: center;
justify-content: start;
gap: 1rem;
}
.hero-card-icon {
width: 2.625rem;
height: 2.625rem;
margin-left: 1.5rem;
}
.hero-card-2 {
display: flex;
background-image: url("/wp-content/themes/fluxweb/assets/media/bg-hero-card-2.svg");
background-size: 100% 100%;
flex-direction: row;
width: 18.9rem;
height: 4.8125rem;
position: absolute;
margin-left: 12.5rem;
margin-top: 8rem;
top: 0%;
left: 0%;
align-items: center;
justify-content: start;
gap: 1rem;
}
.hero-card-3 {
display: flex;
background-image: url("/wp-content/themes/fluxweb/assets/media/bg-hero-card-3.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
flex-direction: row;
width: 24.5rem;
height: 4.8125rem;
position: absolute;
margin-left: 1.4rem;
margin-top: 22rem;
top: 0%;
left: 0%;
align-items: center;
justify-content: start;
gap: 0.75rem;
overflow: hidden;
box-sizing: border-box;
}
.hero-card-text {
display: flex;
flex-direction: column;
gap: .125rem;
}
.hero-card-text .text {
margin: 0;
line-height: 1.25;
}
.hero-card-text .s-text.w70t {
margin: 0;
font-size: 0.8125rem;
line-height: 1.35;
max-width: 14rem;
}
.hero-card-3 .hero-card-icon {
position: relative;
z-index: 2;
flex-shrink: 0;
}
.hero-card-3 .hero-card-text {
flex: 1;
min-width: 0;
padding-right: 1.25rem;
}
.hero-card-3 .hero-card-text .s-text.w70t {
max-width: none;
white-space: nowrap;
letter-spacing: -0.01em;
}
.advantages {
display: flex;
gap: 2.5rem;
flex-direction: column;
}
.advantages-section-head {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 52rem;
}
.advantages-section-kicker {
margin: 0;
color: var(--color-accent);
}
.advantages-section-lead {
margin: 0;
max-width: 46rem;
font-size: 1.125rem;
line-height: 1.55;
}
.advantages-bridge {
margin: 0;
font-size: 1.125rem;
line-height: 1.55;
}
.advantages-bridge a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.advantages-bridge a:hover {
color: #ffffff;
}
.advantages-head {
display: flex;
flex-direction: column;
}
.advantages-item-bottom {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin-top: auto;
min-height: 1.5rem;
}
.advantages-step {
position: absolute;
left: 2.875rem;
bottom: 1.875rem;
z-index: 2;
margin: 0;
font-size: 1.75rem;
font-weight: 600;
line-height: 1.5rem;
height: 1.5rem;
letter-spacing: 0.04em;
color: rgba(13, 219, 178, 0.92);
pointer-events: none;
}
.advantages-head h3 {
margin: 0;
}
.advantages-text {
display: flex;
gap: 1.5rem;
flex-direction: column;
}
.advantages-content {
perspective: 1000px;
}
.advantages-item {
position: relative;
max-width: 19rem;
height: 14rem;
padding: 1.875rem;
border-radius: 1.5rem;
border: .0625rem solid #1563e020;
background: var(--color-object-bg);
transition: all 300ms linear;
display: flex;
justify-content: space-between;
}
.advantages-item:hover {
background-size: cover;
border: .0625rem solid #0ddbb340;
background: var(--color-accent-bg);
}
.advantages-item-texts {
display: flex;
transition: all 400msease;
flex-direction: column;
justify-content: space-between;
}
.advantages-arrow {
width: 0rem;
height: 1.5625rem;
transition: all 400ms ease;
}
.advantages-item:hover .advantages-arrow {
width: 1.5625rem;
}
.advantages-item-wrap {
display: flex;
flex-direction: row;
gap: .9375rem;
flex: 1;
width: 100%;
min-width: 0;
}
.advantages-card-pic {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
flex: 0 0 auto;
}
.card-pic {
width: 10.5rem;
}
.advantages-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
row-gap: 1.9375rem;
justify-content: space-between;
}
.work,
.form-section {
position: relative;
isolation: isolate;
background: var(--object-background, linear-gradient(122deg, rgba(13, 219, 178, 0.075) -9.98%, rgba(21, 99, 224, 0.075) 102.62%));
background-size: 100% 100%;
border-radius: 2.5rem;
overflow: hidden;
}
.work-inner,
.form-section-inner {
position: relative;
z-index: 1;
padding: 3.5rem 3rem 3.75rem;
}
.work-head {
display: flex;
align-items: center;
gap: 1.25rem;
}
.work-head h2 {
margin: 0;
flex-shrink: 0;
}
.work-head-line {
flex: 1;
min-width: 1.5rem;
height: 0.0625rem;
border-radius: 0.0625rem;
background: linear-gradient(
90deg,
rgba(13, 219, 179, 0.42) 0%,
rgba(21, 99, 224, 0.22) 45%,
rgba(255, 255, 255, 0.06) 100%
);
}
.work-slide-count {
flex-shrink: 0;
margin: 0;
display: flex;
align-items: baseline;
gap: 0.12em;
font-family: Inter, Arial, sans-serif;
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
color: var(--color-text-gray70);
font-variant-numeric: tabular-nums;
}
.work-slide-count-current {
color: var(--color-accent);
}
.work-slide-count-sep {
opacity: 0.45;
font-weight: 500;
}
.work-content {
margin-top: 1.75rem;
display: flex;
}
.work_slider {
display: flex;
flex-direction: row;
overflow: hidden;
height: 22rem;
}
.swiper-wrapper {
width: 73.75rem;
}
.slide-wrap {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
justify-content: space-between;
}
.slide-txts {
display: flex;
flex-direction: column;
min-width: 28.375rem;
max-width: 28.375rem;
align-content: center;
gap: 2rem;
}
.slide-svg {
height: 17.5rem;
}
.work-content {
max-width: 73.75rem;
position: relative;
}
.work-simple .work-inner {
display: flex;
flex-direction: column;
gap: 2rem;
}
.work-head-simple {
align-items: center;
}
.work-head-simple .work-head-line {
width: 100%;
}
.work-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.work-step {
border: 0.0625rem solid #1563e020;
background: rgba(12, 20, 31, 0.5);
backdrop-filter: blur(0.9rem);
-webkit-backdrop-filter: blur(0.9rem);
border-radius: 1.5rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.work-step-num {
color: rgba(13, 219, 178, 0.89);
font-weight: 600;
line-height: 1;
}
.work-step h3 {
font-size: 1.2rem;
}
.work-step p.w70t {
margin: 0;
font-size: 0.98rem;
}
.work-step-cta {
text-decoration: none;
border-color: #0ddbb340;
background: var(--color-accent-bg);
transition: border 175ms ease, background 175ms ease;
}
.work-step-cta:hover {
border-color: transparent;
background: linear-gradient(45deg, #0ddbb3 0%, #1563e0 100%);
}
.work-step-cta h3 {
color: var(--color-text);
}
.work-step-cta p.w70t {
color: var(--color-text-gray70);
}
.work-step-cta .work-step-num {
display: flex;
align-items: center;
}
.work-step-cta:hover h3,
.work-step-cta:hover p.w70t,
.work-step-cta:hover .work-step-num {
color: var(--color-background);
}
.work-step-cta:hover .header-button-arrow path {
fill: var(--color-background);
}
.work-step-cta:hover .header-button-arrow {
transform: translateX(0.06rem);
}
.about-section {
display: flex;
flex-direction: column;
gap: 2rem;
}
.about-section-head {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 52rem;
}
.about-section-kicker {
margin: 0;
color: var(--color-accent);
}
.about-section-lead {
margin: 0;
max-width: 46rem;
font-size: 1.125rem;
line-height: 1.55;
}
.about-bridge {
margin: 0;
font-size: 1.125rem;
line-height: 1.55;
}
.about-bridge a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.about-bridge a:hover {
color: #ffffff;
}
.about-inline-link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.about-inline-link:hover {
color: #ffffff;
}
.about-card .about-inline-link {
font-weight: 400;
}
.about-card-main h3 {
margin: 0;
color: var(--color-text);
}
.about-card-main h3 strong {
color: rgba(13, 219, 178, 0.95);
font-weight: 600;
}
/* .about-card .w70t {
font-size: 0.875rem;
font-weight: 300;
line-height: 1.6;
} */
.about-grid {
display: grid;
gap: 1rem;
}
.about-grid-top {
grid-template-columns: 2fr 1fr;
}
.about-grid-bottom {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-card {
border: 0.0625rem solid #1563e020;
background: var(--color-object-bg);
border-radius: 1.5rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.about-card h3 {
font-size: 1.5rem;
line-height: 120%;
}
.about-card p {
margin: 0;
color: var(--color-text-gray70);
}
.about-card-main {
border-color: #0ddbb340;
background: var(--color-accent-bg);
}
.about-card-main p {
color: var(--color-text);
}
@media screen and (max-width: 768px) {
/* work.work-simple: сетка и карточки как .advantages / .about-card */
.work-simple .work-inner {
gap: 6.56rem;
}
.work-simple .work-steps-grid {
grid-template-columns: 1fr;
gap: 4.22rem;
}
.work-simple .work-step {
padding: 4.69rem 3.75rem;
gap: 2.81rem;
border-radius: 2.81rem;
border-width: 0.12rem;
border-style: solid;
border-color: #1563e020;
}
.work-simple .work-step-cta {
border-width: 0.12rem;
border-color: #0ddbb340;
}
.work-simple .work-step > .work-step-num {
font-size: 3.05rem;
}
.work-simple .work-step h3,
.work-simple .work-step-cta h3 {
font-size: 4.45rem;
line-height: 140%;
}
.work-simple .work-step p.w70t,
.work-simple .work-step-cta p.w70t {
font-size: 3.05rem;
line-height: 1.35;
}
/* Как у .advantages / .advantages-item на мобилке */
.about-section {
gap: 6.56rem;
}
.about-section-head {
gap: 1.5rem;
max-width: none;
}
.about-section-lead,
.about-bridge {
max-width: none;
width: 100%;
font-size: 3.15rem !important;
line-height: 1.5 !important;
}
.about-card-main h3 {
font-size: 4.45rem !important;
line-height: 140% !important;
}
.about-card .w70t {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
.about-grid-top,
.about-grid-bottom {
grid-template-columns: 1fr;
gap: 4.22rem;
}
.about-card {
padding: 4.69rem 3.75rem;
gap: 2.81rem;
border-radius: 2.81rem;
border-width: 0.12rem;
border-style: solid;
border-color: #1563e020;
}
.about-card-main {
border-width: 0.12rem;
border-color: #0ddbb340;
}
.about-card h3 {
font-size: 4.45rem;
line-height: 140%;
}
.about-card p {
font-size: 3.05rem;
line-height: 1.35;
}
}
.slide-pic {
width: 43.75rem;
display: flex;
justify-content: center;
}
.swiper-pagination {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
gap: 1rem;
}
.swiper-pagination-bullet {
width: .5rem;
height: .5rem;
border: .0625rem solid var(--color-accent);
border-radius: 100%;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 50%;
}
.swiper-pagination-bullet:hover {
opacity: 1;
}
.swiper-pagination-bullet-active {
width: .75rem;
height: .75rem;
background-color: var(--color-accent);
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}
.slider-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.swiper-button-next path {
fill: #0ddbb3;
transition: all 0.3s ease;
}
.swiper-button-next:hover path {
fill: white;
}
.swiper-button-next {
width: 1.5rem;
cursor: pointer;
}
.swiper-button-prev path {
fill: #0ddbb3;
transition: all 0.3s ease;
}
.swiper-button-prev {
width: 1.5rem;
cursor: pointer;
}
.swiper-button-prev:hover path {
fill: white;
}
.blog{
margin-top: 5rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.blog_content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.form-column {
max-width: 46rem;
width: 100%;
min-width: 0;
}
.form-section .faq-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: stretch;
}
.form-section .faq-head {
max-width: none;
min-width: 0;
display: flex;
flex-direction: column;
}
.form-section .form-column {
max-width: none;
}
.form-section .form-input {
background: rgba(12, 20, 31, 0.5);
backdrop-filter: blur(0.9rem);
-webkit-backdrop-filter: blur(0.9rem);
border: 0.0625rem solid #1563e020;
transition: border-color 180ms ease, background-color 180ms ease;
}
.form-section .form-input:hover {
border-color: rgba(13, 219, 179, 0.58);
background-color: rgba(12, 20, 31, 0.72);
}
.form-section .form-input:focus {
border-color: #0ddbb3;
background-color: rgba(12, 20, 31, 0.78);
}
.form-section .messenger-segment {
border: 0.0625rem solid #1563e020;
background: rgba(12, 20, 31, 0.5);
backdrop-filter: blur(0.9rem);
-webkit-backdrop-filter: blur(0.9rem);
transition: border-color 180ms ease, background-color 180ms ease;
}
.form-section .messenger-segment:hover {
border-color: rgba(13, 219, 179, 0.5);
background-color: rgba(12, 20, 31, 0.65);
}
.form-section .submit.submit--full {
width: 100%;
margin-top: 0.25rem;
padding: 1rem 2rem;
min-height: 3.5rem;
height: auto;
background: rgba(13, 219, 178, 0.89);
border: 0.0625rem solid rgba(13, 219, 179, 0.35);
border-radius: 1.5rem;
color: var(--color-background);
font-family: Inter, system-ui, sans-serif;
font-weight: 400;
line-height: 1.2;
transition: background-color 175ms ease, color 175ms ease, box-shadow 175ms ease, border-color 175ms ease;
outline: none;
box-sizing: border-box;
}
.form-section .submit.submit--full:hover {
background: var(--color-accent);
color: var(--color-background);
box-shadow: 0.1rem 0.1rem 2rem #0ddbb233;
}
@media screen and (min-width: 769px) {
.form-section .form-input {
font-size: 1.0625rem;
font-weight: 400;
padding-top: 1.125rem;
padding-bottom: 1.125rem;
}
.form-section .messenger-segment__text {
font-size: 1rem;
font-weight: 500;
}
.form-section .form-messenger-label {
font-size: 1rem;
}
.form-section .form-messenger-hint {
font-size: 0.9375rem;
line-height: 1.45;
opacity: 0.92;
}
.form-section .faq-subtitle {
font-size: 1.0625rem;
line-height: 1.55;
}
.form-section .checkbox_wrap .s-text {
font-size: 1rem;
line-height: 1.55;
}
.form-section .form-promo-legal {
font-size: 0.8125rem;
line-height: 1.45;
margin: auto 0 0;
max-width: 100%;
color: var(--color-accent);
}
.form-section .form-trust-note {
font-size: 0.9375rem;
line-height: 1.45;
margin: 0 0 0.25rem;
}
.form-section .submit.submit--full {
min-height: 3.75rem;
padding: 1.1rem 2.25rem;
font-size: 1.1875rem;
}
}
.blog_item {
width: 19rem;
height: auto;
border-radius: 1.5rem;
border: .0625rem solid #1563e020;
background: var(--color-object-bg);
transition: all 300ms linear;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1.5rem;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.blog_item:hover {
border: .0625rem solid #0ddbb340;
}
/* Case layout (single/archive cards) */
.case-card {
position: relative;
padding: 0;
overflow: hidden;
gap: 0;
justify-content: flex-start;
}
.case-card-media {
position: relative;
width: 100%;
overflow: hidden;
border: 0;
border-radius: 1.5rem 1.5rem 0 0;
background: var(--color-object-bg);
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
}
.case-card-media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(12, 20, 31, 0) 0%, rgba(12, 20, 31, 0.72) 100%);
}
.case-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case-card:hover .case-card-media img {
transform: scale(1.02);
}
.case-media-placeholder {
width: 100%;
min-height: 7.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
text-align: center;
color: var(--color-text-gray70);
font-size: 0.875rem;
line-height: 1.4;
border: 0;
background: linear-gradient(120deg, rgba(13, 219, 179, 0.10) 0%, rgba(21, 99, 224, 0.08) 52%, rgba(12, 20, 31, 0.0) 100%);
}
.case-card-media .case-media-placeholder,
.case-hero-media .case-media-placeholder {
height: 100%;
min-height: 0;
}
.case-hero {
display: flex;
flex-direction: row;
gap: 2.5rem;
align-items: flex-start;
}
.case-hero-media {
width: 27rem;
max-width: 27rem;
border-radius: 1.75rem;
overflow: hidden;
border: .0625rem solid #1563e020;
background: var(--color-object-bg);
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
}
.case-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.case-hero-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.single-case-head {
padding-top: 1.5rem;
}
.single-case-head h2 {
margin-top: 0;
}
.case-card-body {
padding: 2rem 2rem 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.case-card-body h3 {
margin-top: 0.35rem;
}
.case-card-tag {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
z-index: 2;
max-width: calc(100% - 2.5rem);
padding: 0.4rem 0.85rem;
border-radius: 62.4375rem;
border: 0.0625rem solid rgba(13, 219, 179, 0.45);
background: linear-gradient(
120deg,
rgba(12, 20, 31, 0.92) 0%,
rgba(16, 29, 31, 0.88) 55%,
rgba(21, 99, 224, 0.22) 100%
);
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
color: rgba(13, 219, 178, 0.95);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.01em;
pointer-events: none;
}
.case-card-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.case-card-read {
margin: 0;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-accent);
transition: color 200ms ease;
}
.case-card:hover .case-card-read {
color: #ffffff;
}
.case-card-button {
margin-top: auto;
}
.case-card-link {
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
}
.case-card-body,
.case-card-media {
position: relative;
z-index: 1;
}
/* Case cards grid */
#cases .blog_content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
overflow: visible;
justify-content: start;
scroll-snap-type: none;
}
#cases .blog_item.case-card {
width: 100%;
min-width: 0;
max-width: none;
}
#cases .blog_item.case-card h3,
#cases .blog_item.case-card h3 a {
font-weight: 600;
}
#blog .blog_content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
justify-content: initial;
overflow: visible;
scroll-snap-type: none;
}
#blog .blog_item.case-card {
width: 100%;
min-width: 0;
max-width: none;
}
.cases-section-head {
width: 100%;
}
.cases-head-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 52rem;
}
.cases-section-kicker {
color: var(--color-accent);
}
.cases-section-lead {
margin: 0;
max-width: 46rem;
font-size: 1.125rem;
line-height: 1.55;
}
.cases-bridge {
margin: 0;
font-size: 1.125rem;
line-height: 1.55;
}
.cases-bridge a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.cases-bridge a:hover {
color: #ffffff;
}
.cases-empty {
margin-top: 2rem;
}
.cases-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
}
.cases-head-button {
width: fit-content;
min-width: 0;
flex: 0 0 auto;
height: 2.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
border-radius: 1rem;
}
.case-article {
max-width: 69rem;
}
.case-article h3 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.case-article p {
margin: 0.25rem 0;
color: var(--color-text-gray70);
}
.case-article a {
font-size: 1.2rem;
line-height: 1.45;
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.14em;
}
.case-article ul {
margin: 0.75rem 0 0.25rem;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.case-article li {
position: relative;
padding-left: 1.35rem;
}
.case-article li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background: var(--color-accent);
box-shadow: 0 0 0.9rem rgba(13, 219, 179, 0.35);
}
.case-article figure.wp-block-image img {
width: 100%;
height: auto;
display: block;
border-radius: 1.25rem;
border: .0625rem solid #1563e020;
}
.case-back {
margin-top: 0;
}
.case-back-button {
width: fit-content;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.single-post-breadcrumbs {
margin-bottom: 1rem;
}
.single-post-breadcrumbs p {
margin: 0;
}
.single-post-breadcrumbs a {
color: var(--color-text-gray70);
text-decoration: none;
}
.single-post-breadcrumbs a:hover {
color: var(--color-accent);
}
.single-post-head h1 {
margin-bottom: 0.75rem;
}
.single-post-meta {
margin: 0;
}
.single-post-excerpt {
margin-top: 1rem;
}
.single-post-cover {
margin: 0 0 1.5rem;
border-radius: 1.25rem;
overflow: hidden;
border: .0625rem solid #1563e020;
background: #0b1320;
}
.single-post-cover-image {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.single-post-cover-caption {
margin: 0;
padding: 0.625rem 0.875rem;
border-top: .0625rem solid #ffffff12;
}
.blog-article h2,
.blog-article h3,
.blog-article h4 {
margin-top: 1.75rem;
}
.blog-article figure.wp-block-table table {
margin-top: 1rem !important;
width: 100%;
border-collapse: collapse;
}
.blog-article figure.wp-block-table th,
.blog-article figure.wp-block-table td {
border: .0625rem solid #ffffff14;
padding: 0.75rem;
}
.blog-article .wp-block-quote {
border-left: .1875rem solid var(--color-accent);
margin: 1rem 0;
padding: 0.5rem 0 0.5rem 1rem;
}
.blog-archive {
padding-bottom: 4rem;
}
.blog-archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.blog-archive-grid .blog_item.case-card {
width: 100%;
min-width: 0;
max-width: none;
}
.blog-post-card {
min-height: 100%;
}
.blog-pagination {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.blog-pagination-item a,
.blog-pagination-item span {
display: inline-flex;
min-width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
border-radius: 0.875rem;
border: .0625rem solid #0ddbb340;
padding: 0 0.75rem;
}
.blog-pagination-item .current {
background: var(--color-accent);
color: var(--color-background);
}
@media screen and (max-width: 768px) {
.single-post-breadcrumbs {
margin-bottom: 2.2rem;
}
.single-post-breadcrumbs p,
.single-post-breadcrumbs a,
.single-post-breadcrumbs span {
font-size: 2.05rem;
line-height: 1.45;
}
.case-hero {
flex-direction: column;
gap: 1.5rem;
}
.case-hero-media {
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 11;
}
.case-article {
max-width: 100%;
}
.case-article,
.blog-article {
max-width: 100%;
line-height: 1.55;
}
.single-post-head h1,
.single-case-head h2 {
font-size: 4.85rem;
line-height: 1.22;
margin-bottom: 1.25rem;
}
.single-post-meta,
.single-case-head > p.s-text.w70t,
.single-post-cover-caption {
font-size: 2.15rem;
line-height: 1.5;
}
.case-article p,
.blog-article p {
font-size: 2.35rem;
line-height: 1.6;
margin: 0.75rem 0;
}
.case-article h2,
.blog-article h2 {
font-size: 3.95rem;
line-height: 1.3;
margin-top: 3rem;
margin-bottom: 1.25rem;
}
.case-article h3,
.blog-article h3 {
font-size: 3.25rem;
line-height: 1.32;
margin-top: 2.35rem;
margin-bottom: 1rem;
}
.case-article h4,
.blog-article h4 {
font-size: 2.85rem;
line-height: 1.35;
margin-top: 2rem;
margin-bottom: 0.85rem;
}
.case-article ul,
.case-article ol,
.blog-article ul,
.blog-article ol {
gap: 1.25rem;
margin-top: 1.2rem;
margin-bottom: 1rem;
}
.case-article li {
font-size: 2.6rem;
line-height: 1.45;
padding-left: 2.6rem;
}
.case-article a {
font-size: 2.9rem;
line-height: 1.45;
}
.case-article li code {
font-size: inherit;
line-height: inherit;
font-family: inherit;
white-space: normal;
word-break: break-word;
}
.blog-article figure.wp-block-image img,
.case-article figure.wp-block-image img {
border-radius: 2.2rem;
}
.blog-article .wp-block-quote,
.case-article .wp-block-quote {
border-left-width: 0.35rem;
margin: 1.4rem 0;
padding: 0.75rem 0 0.75rem 1.5rem;
}
.blog-article .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.blog-article figure.wp-block-table table {
min-width: 58rem;
}
.blog-article figure.wp-block-table th,
.blog-article figure.wp-block-table td {
font-size: 2.05rem;
line-height: 1.45;
padding: 0.95rem 1rem;
}
.blog-archive-grid {
grid-template-columns: 1fr;
}
#blog .blog_content {
grid-template-columns: 1fr;
}
.single-case-head {
padding-top: 2.5rem;
}
}
.plan-name {
width: fit-content;
display: flex;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
padding-top: .3rem;
padding-bottom: .3rem;
background: var(--color-button);
border-radius: 1.5rem;
color: var(--color-background);
}
.blog_top {
display: flex;
flex-direction: column;
min-height: 20rem;
gap: 1rem;
}
.plan-list-item {
display: flex;
gap: 1rem;
}
.icon-list-item {
padding-top: .2rem;
min-width: 1rem;
height: 1rem;
}
.plan-list {
margin-top: 1.125rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.blog-button {
display: flex;
justify-content: center;
height: 3.5rem;
background: var(--color-lines);
border-radius: 1.5rem;
border: .0625rem solid #0ddbb340;
align-items: center;
transition: all 200ms ease;
cursor: pointer;
}
.blog-button:hover {
background: var(--color-accent);
color: var(--color-background);
}
.plan-h {
min-height: 4.125rem;
}
.standart {
background: #0ddbb2e2;
color: var(--color-background);
transition: all 100ms ease;
cursor: pointer;
}
.standart:hover {
background: var(--color-accent);
box-shadow: .1rem .1rem 2rem #0ddbb233;
}
.blog-button:hover {
background: var(--color-accent);
box-shadow: .1rem .1rem 2rem #0ddbb233;
}
.contact-form {
display: flex;
justify-content: space-between;
gap: 1rem;
position: relative;
}
.contact-form--short {
flex-direction: column;
align-items: stretch;
max-width: 100%;
}
.form-short-fields {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 100%;
}
.form-messenger-block {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.form-messenger-label {
font-size: 0.875rem;
letter-spacing: 0.02em;
}
.messenger-segment {
display: flex;
padding: 0.25rem;
border-radius: 1.5rem;
border: 0.0625rem solid #1563e040;
background: rgba(21, 99, 224, 0.06);
gap: 0.25rem;
}
.messenger-segment__item {
flex: 1;
display: flex;
cursor: pointer;
margin: 0;
}
.messenger-segment__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.messenger-segment__text {
flex: 1;
text-align: center;
padding: 0.65rem 0.75rem;
border-radius: 1.25rem;
font-size: 0.9375rem;
font-weight: 400;
color: var(--color-text-gray70);
transition: background 200ms ease, color 200ms ease;
}
.messenger-segment__input:focus-visible + .messenger-segment__text {
outline: 0.125rem solid #0ddbb3;
outline-offset: 0.125rem;
}
.messenger-segment__input:checked + .messenger-segment__text {
background: #0ddbb2e2;
color: var(--color-background);
}
.form-messenger-hint {
font-size: 0.8125rem;
line-height: 140%;
margin: 0;
opacity: 0.85;
}
.submit--full {
max-width: none;
margin-top: 0.25rem;
}
.input-wrap2 {
display: flex;
gap: 1rem;
}
.input-wrap {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 36.25rem;
}
input {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
background: transparent;
border-radius: 1.5rem;
border: .0625rem solid #1563E020;
font-size: 1rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 160%;
width: -webkit-fill-available;
transition: border 300ms ease;
box-sizing: border-box;
}
textarea {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
background: transparent;
border-radius: 1.5rem;
border: .0625rem solid #1563E020;
font-size: 1rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 160%;
width: -webkit-fill-available;
transition: border 300ms ease;
resize: none;
box-sizing: border-box;
}
input:hover {
border: .0625rem solid #0ddbb340;
}
input:focus {
border: .0625rem solid #0ddbb3;
color: white;
outline: none;
}
input:valid {
color: white;
}
input:invalid {
color: var(--color-text-gray70);
}
textarea:hover {
border: .0625rem solid #0ddbb340;
}
textarea:focus {
border: .0625rem solid #0ddbb3;
color: white;
outline: none;
}
textarea:valid {
color: white;
}
textarea:invalid {
color: var(--color-text-gray70);
}
.left-inputs {
width: 35rem;
min-height: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-input.area {
width: 35rem;
height: 11.1rem;
}
.submit {
width: 100%;
display: flex;
justify-content: center;
height: 4rem;
background: #0ddbb2e2;
border-radius: 1.5rem;
border: .0625rem solid #0ddbb340;
align-items: center;
transition: all 200ms ease;
cursor: pointer;
font-size: 1rem;
font-weight: 300;
height: 2.8125rem;
}
.submit:hover {
background: var(--color-accent);
color: var(--color-background);
}
.right-inputs {
display: flex;
flex-direction: column;
gap: 1rem;
}
.checkbox_wrap {
display: flex;
flex-direction: row;
align-items: start;
cursor: pointer;
}
.checkbox_wrap label,
.checkbox_wrap .custom-checkbox {
cursor: pointer;
}
.custom-checkbox {
margin-left: 0rem;
margin-right: 1rem;
padding-left: 0rem;
padding-right: 0rem;
width: 1rem;
height: 1rem;
min-width: 1rem;
min-height: 1rem;
}
.underline {
font-size: 0.875rem;
font-family: Inter;
font-weight: 300;
font-style: normal;
line-height: 160%;
text-decoration: none;
text-transform: none;
opacity: 50%;
text-decoration: underline;
}
.footer_wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(1.25rem, 3vw, 2.5rem);
row-gap: 1.5rem;
align-items: start;
min-width: 73.75rem;
max-width: 73.75rem;
margin-left: auto;
margin-right: auto;
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 1.25rem;
justify-content: flex-start;
flex-wrap: nowrap;
max-height: none;
column-gap: 0;
min-width: 0;
justify-self: center;
width: max-content;
max-width: 100%;
}
.footer-contacts {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: .85rem;
min-width: 0;
justify-self: end;
width: max-content;
max-width: 100%;
}
.footer-contact-title {
display: inline-block;
}
.footer-cta-bundle {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .85rem;
}
.footer-cta-bundle .footer-messengers {
justify-content: flex-end;
}
.footer-messengers {
display: flex;
align-items: center;
gap: .85rem;
margin-bottom: 0;
}
.footer-messenger-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.375rem;
height: 2.375rem;
border-radius: 50%;
color: var(--color-text-gray70);
transition: color 200ms ease;
}
.footer-messenger-link:hover {
color: #ffffff95;
}
.fn {
cursor: pointer;
transition: color 200ms ease;
}
.fn:hover {
color: #ffffff95;
}
.footer-left {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
justify-self: start;
height: 100%;
justify-content: space-between;
}
.footer-copy {
margin: 0;
max-width: 22rem;
}
.burger {
display: none;
}
.burger-close {
display: none;
}
.hero-button.m {
display: none;
}
.form-message {
height: 1rem;
width:fit-content;
gap: 1rem;
margin: 1.88rem;
border-radius: 1rem;
font-size: 1rem;
line-height: 80%;
display: flex;
padding: 1rem;
position: fixed;
justify-content: space-between;
align-items: center;
font-weight: 500;
top: 3rem;
left: auto;
right: 0%;
transform: translate(93.75rem,0);
-webkit-transform: translate(93.75rem,0); /** Chrome & Safari **/
-o-transform: translate(93.75rem,0); /** Opera **/
-moz-transform: translate(93.75rem,0); /** Firefox **/
transition: all 400ms ease;
}
.close-success-button {
font-size: 2.2rem;
font-weight: 300;
line-height: 60%;
cursor: pointer;
}
.form-message.success {
background-color: var(--color-accent);
color: var(--color-background);
transform: translate(0,0);
-webkit-transform: translate(0,0); /** Chrome & Safari **/
-o-transform: translate(0,0); /** Opera **/
-moz-transform: translate(0,0); /** Firefox **/
}
.form-message.error {
background-color: lightpink;
color: red;
transform: translate(0,0);
-webkit-transform: translate(0,0); /** Chrome & Safari **/
-o-transform: translate(0,0); /** Opera **/
-moz-transform: translate(0,0); /** Firefox **/
}
.faq {
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 46rem;
width: 100%;
}
.faq-item {
border: 0.0625rem solid #1563e020;
background: var(--color-object-bg);
border-radius: 1.5rem;
padding-top: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
transition: all 300ms ease;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.faq-item:hover {
border: 0.0625rem solid #0ddbb340;
background: var(--color-accent-bg);
}
.faq-question {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--color-text);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: color 0.3s ease;
}
.faq-question h3{
text-align: left;
font-weight: 300;
}
.faq-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.faq-head {
max-width: 22rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-subtitle {
margin: 0;
color: var(--color-text-gray70);
font-size: 1rem;
line-height: 1.5;
}
#faq .faq-section-head {
max-width: 52rem;
gap: 0.75rem;
}
#faq .faq-section-kicker {
margin: 0;
color: var(--color-accent);
}
#faq .faq-subtitle {
font-size: 1.125rem;
line-height: 1.55;
max-width: 46rem;
}
.faq-arrow {
transition: transform 0.3s ease;
width: 1.5rem;
height: 1.5rem;
}
.faq-item.open .faq-arrow {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-answer p{
padding-bottom: 1.875rem;
}
.faq-item.open .faq-answer {
max-height: 9.38rem; /* ограничение для плавного раскрытия */
}
.faq-item.open {
border: 0.0625rem solid #0ddbb360;
background: var(--color-accent-bg);
}
.burger {
display: none;
}
.mobile-menu {
display: none;
}
.why-us {
display: flex;
flex-direction: column;
gap: 3.5rem;
}
.why-us-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto, 1fr);
gap: 2.5rem;
}
.why-us-card p{
color: var(--color-text-gray70);
}
.why-us-card.first {
display: flex;
grid-column: span 2;
padding: 1.88rem;
flex-direction: column;
align-items: flex-start;
gap: 1.44rem;
align-self: stretch;
border-radius: 1.44rem;
border: 0.0625rem solid #0ddbb340;
background: var(--color-accent-bg);
}
.why-us-card.first p{
color: var(--color-text)
}
.italic {
font-style: italic;
}
.why-us-card {
display: flex;
flex-direction: column;
gap: 1rem;
background: var(--color-object-bg);
border: 0.0625rem solid #1563e020;
border-radius: 1.5rem;
padding: 1.88rem;
transition: border 0.3s ease, background 0.3s ease;
}
.why-us-card.second {
display: flex;
flex-direction: row;
gap: 16px;
}
.why-us-card.second div{
font-size: 1.5rem;
}
.why-us-card:hover {
border: 0.0625rem solid #0ddbb340;
background: var(--color-accent-bg);
}
.why-us-card h3 {
font-size: 1.5rem;
font-weight: 600;
line-height: 120%;
}
.why-us-card.first p {
font-size: 1.125rem;
line-height: 160%;
color: var(--color-text);
}
@media screen and (max-width: 768px) {
h1 {
font-size: 6.9rem;
}
h2 {
font-size: 4.69rem;
}
h3 {
font-size: 4.45rem;
line-height: 140%;
}
h4 {
font-size: 3.75rem;
}
p {
font-size: 3.05rem;
}
.header-wrapper {
min-width: 85.3rem;
left: 0;
right: 0;
top: 1rem;
padding-left: 1.88rem;
padding-right: 1.88rem;
justify-content: space-between;
position: fixed;
z-index: 999;
background: rgba(12, 20, 31, 0.58);
border-radius: 100rem;
backdrop-filter: blur(0.9rem);
-webkit-backdrop-filter: blur(0.9rem);
height: 12rem;
}
.overlay.active {
display: flex;
}
.burger.active {
display: flex;
}
.burger-close.active {
display: flex;
}
.menu {
display: none;
}
.header-button {
order: 2;
display: inline-flex;
flex-shrink: 1;
min-width: 0;
max-height: none;
min-height: 7.2rem;
margin-left: auto;
margin-right: 1.6rem;
padding: 1.1rem 2.5rem;
background: var(--color-accent);
color: var(--color-background);
border: 0.12rem solid rgba(13, 219, 179, 0.35);
border-radius: 2.81rem;
}
.header-button::before,
.header-button::after {
display: none;
}
.header-button:hover {
color: var(--color-background);
background: var(--color-accent);
box-shadow: 0 0.25rem 1.5rem rgba(13, 219, 179, 0.35);
}
.header-button .text {
font-size: 2.65rem;
line-height: 1.2;
white-space: nowrap;
color: inherit;
}
.header-button .button-arrow-wrapper {
display: none;
}
.header-telegram {
display: none;
}
.burger {
order: 3;
display: none;
width: 10rem;
flex-shrink: 0;
}
.burger-close {
order: 3;
display: none;
width: 10rem;
flex-shrink: 0;
}
.header-logo {
order: 1;
width: 36rem;
max-height: none;
gap: 1.85rem;
flex-shrink: 0;
}
.header-logo .star-logo {
width: 5.95rem;
height: auto;
flex-shrink: 0;
}
.header-logo > svg:not(.star-logo) {
width: auto;
height: 3.55rem;
flex-shrink: 0;
}
section {
min-width: 83rem;
margin-top: 24rem;
margin-bottom: 6.56rem;
margin-left: auto;
margin-right: auto;
scroll-margin-top: 12rem;
}
.hero {
flex-direction: column;
gap: 1.17rem;
width: 86.25rem;
height: auto;
padding-top: 0rem;
margin-bottom: 13.13rem;
justify-content: center;
/* background-image: url("/wp-content/themes/fluxweb/assets/media/hero_bg_m.svg"); */
border-radius: 3.45rem;
padding-bottom: 4.69rem;
}
section.hero {
margin-top: 18rem;
}
.hero-content {
width: 100%;
max-width: 100%;
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 3.55rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
padding-top: 4.69rem;
align-self: stretch;
}
.hero-content .hero-lead {
margin-bottom: 0;
}
footer {
width: 100%;
max-width: 83rem;
height: auto;
box-sizing: border-box;
padding-top: 8rem;
padding-bottom: 8rem;
margin-bottom: 5rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
gap: 6.56rem;
}
.footer-left {
height: auto;
min-height: 0;
justify-self: stretch;
width: 100%;
max-width: 100%;
gap: 3.75rem;
}
.footer-nav {
flex-direction: column;
justify-content: flex-start;
gap: 4.22rem;
justify-self: stretch;
width: 100%;
max-width: 100%;
align-items: flex-start;
}
.footer-contacts {
gap: 4.22rem;
justify-self: stretch;
align-items: flex-start;
text-align: left;
width: 100%;
max-width: 100%;
}
.footer-cta-bundle {
align-items: flex-start;
gap: 3.75rem;
}
.footer-cta-bundle .footer-messengers {
justify-content: flex-start;
}
.footer-messengers {
gap: 3.5rem;
margin-top: 0.5rem;
}
.footer-messenger-link {
width: 7.2rem;
height: 7.2rem;
min-width: 7.2rem;
min-height: 7.2rem;
flex-shrink: 0;
}
.footer-messenger-link svg {
width: 4.85rem;
height: 4.85rem;
}
.footer_wrap {
display: grid;
grid-template-columns: 1fr;
gap: 5rem;
margin-left: 0rem;
margin-right: 0rem;
min-width: 0;
width: 100%;
max-width: 100%;
}
.footer_wrap .s-text,
.footer_wrap .fn {
font-size: 3.45rem;
line-height: 1.45;
}
.footer-copy {
max-width: 100%;
line-height: 1.55;
}
footer .footer_wrap .fn {
display: inline-flex;
align-items: center;
min-height: 5.75rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.text {
font-size: 3.05rem;
}
.s-text.w70t.m {
font-size: 3.05rem;
}
.s-text {
font-size: 2.11rem;
}
.s-text.m {
font-size: 3.05rem;
}
.hero-img {
min-width: 78.75rem;
min-height: 64.69rem;
}
.hero-pic {
width: 30.44rem;
height: 30.44rem;
border-radius: 3.45rem;
left: 0;
}
.hero-card-1 {
width: 68.76rem;
height: 12rem;
gap: 2.21rem;
border-radius: 3.45rem;
}
.why-us-card.first p {
font-size: 3.05rem;
}
.why-us-card.first {
grid-column: span 1;
}
.why-us-cards {
grid-template-columns: repeat(1, 1fr);
gap: 4.22rem;
}
.why-us-card h3 {
font-size: 4.45rem;
}
.why-us-card {
padding: 3.75rem;
gap: 2.81rem;
}
.faq {
gap: 6.56rem;
}
.faq-content {
flex-direction: column;
gap: 4.22rem;
}
.form-section .faq-content {
display: grid;
grid-template-columns: 1fr;
gap: 4.22rem;
}
.faq-head {
max-width: 100%;
}
.why-us-card.first {
padding: 3.75rem;
gap: 2.81rem;
}
.why-us-card.second div {
font-size: 4.45rem;
}
.why-us-card.second {
gap: 1rem
}
.why-us-card p {
font-size: 3.05rem;
}
.why-us {
gap: 6.56rem;
}
.hero-card-2 {
width: 46.78rem;
height: 12rem;
gap: 2.21rem;
border-radius: 3.45rem;
left: 21rem;
right: 0;
margin-top: 26rem;
}
.hero-card-3 {
width: 60.47rem;
height: 12rem;
gap: 2.21rem;
border-radius: 3.45rem;
margin-left: 0;
margin-top: 52.6rem;
}
.hero-card-icon {
width: 7.16rem;
height: 7.16rem;
margin-left: 3.45rem;
}
.hero-card-text {
gap: .72rem;
}
.hero-card-text .s-text.w70t,
.hero-card-3 .hero-card-text .s-text.w70t {
font-size: 2.32rem;
line-height: 1.35;
max-width: none;
}
.hero-cta {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
align-self: stretch;
margin-top: 0;
gap: 0.75rem;
}
.hero-cta .hero-button:not(.hero-button-telegram) {
display: flex;
width: 100%;
min-width: 0;
height: 9.84rem;
border-radius: 2.81rem;
justify-content: center;
}
.hero-button {
padding: .625rem .4rem;
}
.hero-cta .hero-button.hero-button-telegram {
width: 9.84rem;
min-width: 9.84rem;
max-width: 9.84rem;
min-height: 9.84rem;
height: 9.84rem;
}
.hero-button.m {
display: none;
}
.hero-stat-bar {
font-size: 2.65rem;
line-height: 1.45;
}
.hero-actions-alt {
font-size: 2.9rem;
line-height: 1.45;
margin: 0;
}
.hero-actions-note {
font-size: 2.9rem;
line-height: 1.45;
margin: 1.25rem 0 0;
}
.hero-head {
width: 100%;
gap: 1.7rem;
}
.hero-link-telegram {
font-size: 2.9rem;
}
.hero-actions-alt {
padding-top: 1rem;
}
.hero-content h1.hero-title {
width: 100%;
align-items: stretch;
gap: 0.04em;
line-height: 1.1;
}
.hero-title-line {
display: block;
width: 100%;
}
.hero-title-kicker {
font-size: 3.15rem;
line-height: 1.3;
}
.hero-trust-proof {
font-size: 2.65rem;
line-height: 1.45;
}
.hero-content p.w70t {
width: 100%;
max-width: 100%;
font-size: 2.8rem;
line-height: 1.45;
}
.advantages {
gap: 6.56rem;
}
.advantages-section-head {
gap: 1.5rem;
max-width: none;
}
.advantages-section-lead,
.advantages-bridge {
max-width: none;
width: 100%;
font-size: 3.15rem !important;
line-height: 1.5 !important;
}
.advantages-item-bottom {
margin-top: 2rem;
min-height: 3rem;
}
.advantages-step {
left: 2.875rem;
bottom: 4.69rem;
height: 3rem;
line-height: 3rem;
font-size: 4.25rem !important;
}
.advantages-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 4.22rem;
justify-content: space-between;
}
.faq-list {
max-width: 100%;
}
.faq-item {
padding-top: 3.75rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
gap: 3.75rem;
}
.faq-arrow {
width: 2.8rem;
height: 2.8rem;
}
.faq-question h3 {
font-size: 3.05rem;
}
.faq-item.open .faq-answer {
max-height: 36rem; /* ограничение для плавного раскрытия */
}
.faq-answer p {
padding-bottom: 3.75rem;
color: var(--color-text-gray70);
}
/* #faq на главной: карточки и типографика как .advantages-item */
#faq .faq-list {
gap: 4.22rem;
}
#faq .faq-head {
gap: 2.81rem;
}
#faq .faq-section-head {
max-width: none;
gap: 1.5rem;
}
#faq .faq-subtitle {
max-width: none;
width: 100%;
font-size: 3.15rem !important;
line-height: 1.5 !important;
}
#faq .faq-answer .w70t {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
#faq .faq-item {
padding: 4.69rem 3.75rem;
gap: 2.81rem;
border-radius: 2.81rem;
border-width: 0.12rem;
border-style: solid;
border-color: #1563e020;
}
#faq .faq-item.open {
border-width: 0.12rem;
border-style: solid;
border-color: #0ddbb360;
}
#faq .faq-question h3 {
font-size: 4.45rem;
line-height: 140%;
}
#faq .faq-answer p {
font-size: 3.05rem;
line-height: 1.35;
padding-bottom: 0;
padding-top: 0;
}
.advantages-arrow {
display: none;
}
.advantages-item {
position: relative;
max-width: 100%;
height: auto;
min-height: 34rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
padding-top: 4.69rem;
padding-bottom: 4.69rem;
border-radius: 2.81rem;
border: .12rem solid #1563e020;
}
.advantages-item-wrap {
width: 100%;
gap: 2.2rem;
}
.advantages-item-texts {
width: 100%;
min-height: 100%;
justify-content: space-between;
}
.advantages-card-pic {
width: auto;
margin-top: 0;
align-items: flex-end;
}
.advantages-card-pic svg {
max-width: 100%;
height: auto;
}
.advantages-text {
gap: 2.81rem;
}
.advantages-text .w70t.m {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
.work,
.form-section {
border-radius: 3.45rem;
}
.work-inner,
.form-section-inner {
padding: 9.38rem 3.75rem 6.56rem;
}
.work-head {
flex-direction: column;
align-items: flex-start;
gap: 3.28rem;
}
.work-head-line {
width: 100%;
height: 0.18rem;
min-width: 0;
flex: none;
background: linear-gradient(
90deg,
rgba(13, 219, 179, 0.5) 0%,
rgba(21, 99, 224, 0.28) 55%,
rgba(255, 255, 255, 0.08) 100%
);
}
.work-slide-count {
font-size: 3.05rem;
align-self: flex-end;
}
.swiper-pagination {
flex-direction: row;
gap: 2.81rem;
}
.slider-nav {
flex-direction: row;
width: 83rem;
}
.swiper-button-next {
display: none;
}
.swiper-button-prev {
display: none;
}
.swiper-pagination-bullet {
width: 1.44rem;
height: 1.44rem;
border: .18rem solid var(--color-accent);
}
.swiper-pagination-bullet-active {
width: 2.16rem;
height: 2.16rem;
}
.slider-nav {
margin-top: 6.56rem;
justify-content: center;
}
.card-pic1 {
min-height: 2.58rem;
min-width: 18.55rem;
}
.card-pic2 {
min-height: 3.75rem;
max-width: 35rem;
}
.blog_top {
gap: 3.75rem;
}
.card-pic3 {
height: 4.92rem;
width: 14.01rem;
}
.card-pic4 {
width: 100%;
max-width: 39.38rem;
height: auto;
}
.card-pic5 {
width: 100%;
max-width: 39.38rem;
height: auto;
}
.slide-wrap {
flex-direction: column;
align-items: start;
}
.slide-svg {
height: 32.93rem;
}
.slide-pic {
width: 100%;
}
.work-content {
margin-top: 4.5rem;
display: block;
}
.swiper {
width: 83rem;
max-height: 57.89rem;
flex-direction: column;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
min-width: 83rem;
max-width: 83rem;
}
.slide-txts {
min-width: 100%;
gap: 3.75rem;
}
.swiper {
height: 80rem;
}
.blog {
/* max-width: 87rem;
padding-left: 1.4rem; */
gap: 6.56rem;
margin-top: 24rem;
}
.blog_item {
height: auto;
min-height: 34rem;
min-width: 58rem;
max-width: 58rem;
padding-top: 5.16rem;
padding-bottom: 5.16rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
border-radius: 2.81rem;
justify-content: flex-start;
gap: 2.4rem;
}
.blog_item h3 {
font-size: 3.7rem;
line-height: 1.2;
}
.blog_item .s-text {
font-size: 2.45rem;
line-height: 1.45;
}
.blog-button {
height: 9.84rem;
font-size: 3.05rem;
border-radius: 2.81rem;
}
.plan-name {
padding-top: .94rem;
padding-bottom: .94rem;
padding-left: 3.75rem;
padding-right: 3.75rem;
border-radius: 3.52rem;
}
.s-text.w70t.plan-h {
font-size: 3.05rem;
}
.icon-list-item {
padding-top: 1.2rem;
width: 2.53rem;
height: 2.53rem;
}
.blog_content {
overflow-x: auto;
overflow-y: hidden;
gap: 4.22rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog_content::-webkit-scrollbar {
display: none;
}
.blog_content .blog_item {
scroll-snap-align: start;
}
.blog_content .blog_item:last-child {
margin-right: 1.4rem;
}
.form-input {
max-height: 9.38rem;
border-radius: 2.81rem;
font-size: 3.05rem;
padding: 2.81rem 2.81rem 2.81rem 2.81rem;
gap: 1.88rem;
width: 100%;
box-sizing: border-box;
}
.custom-checkbox {
width: 2.8rem;
height: 2.8rem;
min-width: 2.8rem;
min-height: 2.8rem;
margin-right: 1.6rem;
}
.right-inputs {
height: auto;
gap: 1.88rem;
width: 100%;
min-width: 0;
}
.left-inputs {
min-width: 0;
width: 100%;
max-width: 100%;
display: flex;
height: auto;
gap: 1.88rem;
}
.contact-form {
flex-direction: column;
height: auto;
gap: 1.88rem;
}
.checkbox_wrap {
display: flex;
gap: 1.88rem;
align-items: flex-start;
}
.checkbox_wrap .s-text {
font-size: 3.05rem;
line-height: 1.35;
}
.checkbox_wrap .underline {
font-size: 3.05rem;
}
.form-section .form-promo-legal {
font-size: 2.11rem;
line-height: 1.35;
margin: auto 0 0;
color: var(--color-accent);
}
@media screen and (max-width: 768px) {
.form-section .form-promo-legal {
margin-top: 0;
}
}
.form-section .form-trust-note {
font-size: 2.11rem;
line-height: 1.35;
margin: 0 0 0.5rem;
}
/* #form: мобильная сетка и типографика как #faq */
#form.form-section .faq-content,
#form .faq-content {
gap: 6.56rem;
}
#form .faq-head {
gap: 3.75rem;
}
#form .faq-subtitle {
font-size: 3.05rem;
line-height: 1.5;
}
#form .form-promo-legal {
font-size: 2.8rem;
line-height: 1.5;
margin-top: 0;
margin-bottom: 0;
}
#form .form-trust-note {
font-size: 3.05rem;
line-height: 1.5;
margin: 0.5rem 0 2rem;
}
#form .form-messenger-label {
font-size: 3.05rem;
line-height: 1.45;
display: block;
margin-bottom: 0.25rem;
}
#form .form-messenger-hint {
font-size: 3.05rem;
line-height: 1.5;
margin-top: 0.25rem;
}
#form .form-short-fields {
gap: 4.22rem;
}
#form .form-messenger-block {
gap: 3.75rem;
}
#form .contact-form.contact-form--short {
gap: 4.22rem;
}
#form .messenger-segment {
gap: 2.11rem;
padding: 0.65rem;
}
#form .checkbox_wrap {
gap: 2.81rem;
margin-top: 0.75rem;
}
#form .checkbox_wrap .s-text {
line-height: 1.5;
}
#form.form-section .messenger-segment,
#form .messenger-segment {
border-width: 0.12rem;
border-style: solid;
}
/* #form — сам section.form-section; не используем #form .form-section (вложенного блока нет) */
#form.form-section .form-input,
#form .form-input {
border-width: 0.12rem;
border-style: solid;
min-height: 10.75rem;
max-height: none;
padding: 3.35rem 3.15rem;
font-size: 3.35rem;
line-height: 1.35;
}
#form.form-section .form-input::placeholder,
#form .form-input::placeholder {
font-size: 3.45rem;
line-height: 1.35;
opacity: 0.62;
}
#form.form-section .form-input::-webkit-input-placeholder,
#form .form-input::-webkit-input-placeholder {
font-size: 3.45rem;
line-height: 1.35;
opacity: 0.62;
}
#form.form-section .form-input::-moz-placeholder,
#form .form-input::-moz-placeholder {
font-size: 3.45rem;
line-height: 1.35;
opacity: 0.62;
}
#form.form-section .submit.submit--full,
#form .submit.submit--full,
#cta.form-section .submit.submit--full,
#cta .submit.submit--full {
border-width: 0.12rem;
border-style: solid;
margin-top: 2.81rem;
}
#form .messenger-segment__text {
font-size: 3.05rem;
line-height: 1.4;
}
#form .form-message {
margin-top: 2.81rem;
padding: 2.81rem 3.75rem;
border-radius: 2.81rem;
font-size: 3.05rem;
line-height: 1.35;
font-weight: 600;
}
.submit {
height: 9.84rem;
border-radius: 2.81rem;
font-size: 3.05rem;
margin-top: 6.56rem;
color: var(--color-background);
}
.form-section .submit.submit--full {
width: 100%;
min-height: 11.5rem;
height: auto;
margin-left: 0;
margin-right: 0;
margin-top: 1rem;
padding: 2.6rem 2.81rem;
border-radius: 2.81rem;
font-size: 3.05rem;
font-weight: 400;
line-height: 1.15;
background: rgba(13, 219, 178, 0.89);
border: 0.0625rem solid rgba(13, 219, 179, 0.35);
transition: background-color 175ms ease, color 175ms ease, box-shadow 175ms ease, border-color 175ms ease;
box-sizing: border-box;
}
.form-input.area {
min-width: 0;
width: 100%;
max-width: 100%;
min-height: 18rem;
}
.input-wrap {
min-width: 0;
width: 100%;
max-width: 100%;
gap: 1.88rem;
}
.input-wrap2 {
min-width: 0;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.88rem;
}
.contact-form {
width: 100%;
max-width: 100%;
min-width: 0;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form--short {
max-width: 100%;
}
.form-short-fields {
gap: 1.88rem;
}
.messenger-segment {
padding: 0.4rem;
border-radius: 2.81rem;
}
.messenger-segment__text {
font-size: 2.11rem;
padding: 1.25rem 1.5rem;
border-radius: 2.5rem;
}
.form-messenger-hint {
font-size: 2.11rem;
line-height: 1.35;
}
.form-messenger-label {
font-size: 2.11rem;
}
.submit--full {
margin-top: 1rem;
}
.form-column {
max-width: 100%;
}
.plan-list {
gap: 1.88rem;
}
.plan-h {
min-height: 15rem;
}
.plan-list-item {
gap: 1.88rem;
}
.menu-list {
display: flex;
flex-direction: column;
gap: 0;
position: static;
width: 100%;
}
.mobile-menu {
display: flex;
position: absolute;
background: var(--color-background);
height: 100vh;
width: 56rem;
right: 0rem;
margin-right: -58rem;
transition: all .3s ease;
top: 13.9rem;
flex-direction: column;
gap: 23.44rem;
}
.mobile-menu.active {
margin-right: 0rem;
}
.menu-item {
color: var(--color-text);
font-size: 3.75rem;
padding-left: 4.69rem;
padding-top: 0rem;
padding-bottom: 0rem;
margin-top: 0rem;
margin-bottom: 0rem;
height: 11.72rem;
align-items: center;
border-radius: 0rem;
width: 100%;
display: flex;
border-bottom: .12rem solid #FFFFFF15;
gap: 0rem;
}
.menu-item:hover {
padding-left: 4.69rem;
padding-top: 0rem;
padding-bottom: 0rem;
margin-top: 0rem;
margin-bottom: 0rem;
border-radius: 0rem;
width: 100%;
display: flex;
border-bottom: .12rem solid #FFFFFF15;
gap: 0rem;
}
.menu {
gap: 0rem
}
.mobile-menu-button {
min-height: 11.72rem;
font-size: 3.75rem;
padding-left: 4.69rem;
background: var(--color-accent);
color: var(--color-background);
align-items: center ;
display: flex;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: #090e1672;
backdrop-filter: blur(.15rem);
z-index: 9;
display: none;
}
.menu.m {
display: flex;
flex-direction: column;
border: 0rem;
margin-left: 0;
margin-right: 0;
height: auto;
align-items: start;
}
.form-message {
padding: 2.11rem;
margin-top: 4rem;
border-radius: 1.5rem;
font-weight: bold;
font-size: 2.11rem;
}
/* Fix spacing for case cards in responsive mode */
.blog_item.case-card {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 0 !important;
min-height: auto !important;
height: auto !important;
justify-content: flex-start !important;
}
.blog_item.case-card .case-card-body {
padding-top: 0 !important; /* body padding top is already 0, but helps with overrides */
gap: 1rem !important;
}
/* Кейсы (#cases): как у advantages на мобилке — паддинги, gap, типографика */
#cases .blog_item.case-card {
border: 0.12rem solid #1563e020 !important;
border-radius: 2.81rem !important;
}
#cases .blog_item.case-card .case-card-body {
padding: 4.69rem 3.75rem !important;
gap: 2.81rem !important;
}
#cases .blog_item.case-card .case-card-body h3 {
margin-top: 1.5rem !important;
font-size: 4.45rem !important;
line-height: 140% !important;
}
#cases .blog_item.case-card .case-card-excerpt {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
.blog_item.case-card .case-card-body h3 {
margin-top: 1.5rem !important;
}
/* Match image corner radius with the card on mobile */
.blog_item.case-card .case-card-media {
border-radius: 2.81rem 2.81rem 0 0 !important;
}
/* Grid layout for cases on mobile (межкарточный gap как у .advantages-content) */
#cases .blog_content {
display: grid !important;
grid-template-columns: 1fr !important;
overflow: visible !important;
scroll-snap-type: none !important;
gap: 4.22rem !important;
}
/* Блог на главной (#blog): сетка и карточки как у #cases / .advantages */
#blog .blog_content {
display: grid !important;
grid-template-columns: 1fr !important;
overflow: visible !important;
scroll-snap-type: none !important;
gap: 4.22rem !important;
}
#blog .blog_item {
min-width: 0 !important;
width: 100% !important;
}
#blog .blog_item.case-card {
border: 0.12rem solid #1563e020 !important;
border-radius: 2.81rem !important;
}
#blog .blog_item.case-card .case-card-body {
padding: 4.69rem 3.75rem !important;
gap: 2.81rem !important;
}
#blog .blog_item.case-card .case-card-body h3 {
margin-top: 0 !important;
font-size: 4.45rem !important;
line-height: 140% !important;
}
#blog .blog_item.case-card .case-card-excerpt {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
/* Плейсхолдер «нет статей» — обычная .blog_item без case-card */
#blog .blog_item:not(.case-card) {
padding: 4.69rem 3.75rem !important;
gap: 2.81rem !important;
border-width: 0.12rem !important;
border-style: solid !important;
border-color: #1563e020 !important;
max-width: none !important;
justify-content: flex-start !important;
}
#blog .blog_item:not(.case-card) h3 {
margin-top: 0 !important;
font-size: 4.45rem !important;
line-height: 140% !important;
}
#blog .blog_item:not(.case-card) .s-text {
font-size: 3.05rem !important;
line-height: 1.35 !important;
}
.cases-head {
flex-direction: column;
align-items: stretch;
gap: 3.75rem;
}
.cases-head-text {
width: 100%;
max-width: none;
gap: 1.5rem;
}
.cases-section-lead {
max-width: none;
width: 100%;
font-size: 3.15rem !important;
line-height: 1.5 !important;
}
.cases-bridge {
font-size: 3.15rem !important;
line-height: 1.5 !important;
}
.case-card-tag {
left: 3.75rem;
bottom: 3.75rem;
max-width: calc(100% - 7.5rem);
padding: 1.1rem 2.2rem;
font-size: 2.35rem !important;
line-height: 1.25 !important;
border-radius: 62.4375rem;
}
.case-card-read {
font-size: 3.15rem !important;
}
.cases-head-button {
align-self: flex-start;
width: fit-content !important;
min-width: 0 !important;
height: 7rem;
padding-left: 2.2rem;
padding-right: 2.2rem;
border-radius: 1.8rem;
}
.form-message.success {
background-color: var(--color-accent);
color: var(--color-background);
}
.form-message.error {
background-color: lightpink;
color: red;
}
.underline {
font-size: 2.11rem;
}
}
/* 404: same section width as rest of theme, centered message + accent “404” */
.error-404-section.blog-archive {
gap: 0;
}
.error-404-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
min-height: min(62vh, 40rem);
padding: 2rem 1.5rem 3rem;
box-sizing: border-box;
gap: 1.25rem;
}
.error-404-code {
margin: 0;
font-family: Inter, Arial, sans-serif;
font-size: clamp(3.5rem, 11vw, 8rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
background: linear-gradient(120deg, #0ddbb3 0%, #1563e0 52%, rgba(255, 255, 255, 0.45) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 1.5rem rgba(13, 219, 179, 0.18));
}
.error-404-inner h1 {
margin: 0;
max-width: 22em;
}
.error-404-desc {
margin: 0;
max-width: 36rem;
}
.error-404-actions {
margin-top: 0.35rem;
display: flex;
justify-content: center;
}
@media screen and (max-width: 768px) {
section.error-404-section {
margin-top: 18rem;
}
.error-404-inner {
min-height: min(52vh, 120rem);
padding-top: 1rem;
gap: 2.5rem;
}
.error-404-actions .header-button {
display: inline-flex;
}
}
/* Force blog archive cards to match homepage layout */
.blog-archive .blog_content.blog-archive-grid,
.related-posts .blog_content.blog-archive-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1.5rem !important;
overflow: visible !important;
scroll-snap-type: none !important;
}
.blog-archive .blog_item.case-card,
.related-posts .blog_item.case-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
@media screen and (max-width: 768px) {
.blog-archive .blog_content.blog-archive-grid,
.related-posts .blog_content.blog-archive-grid {
grid-template-columns: 1fr !important;
}
}
@media screen and (max-width: 768px) {
/* Mobile readability safety net for small text across sections */
.text {
font-size: 2.6rem;
line-height: 1.35;
}
.s-text,
.w70t {
font-size: 2.65rem;
line-height: 1.45;
}
.hero-actions-alt,
.hero-actions-note,
.hero-geo {
font-size: 2.9rem;
line-height: 1.45;
}
.hero-card-text .s-text.w70t,
.hero-card-3 .hero-card-text .s-text.w70t {
font-size: 2.32rem;
line-height: 1.35;
}
a {
font-size: 3.15rem;
line-height: 1.35;
}
input,
textarea,
select,
button {
font-size: 2rem;
}
}
/* Footer layout refresh: left brand + right 3-column menu */
.footer-right {
min-width: 0;
}
.footer-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem 2.25rem;
align-items: start;
}
.footer-menu-col {
display: flex;
flex-direction: column;
gap: 0.95rem;
min-width: 0;
}
.footer-menu-col .fn--active {
color: var(--color-text);
}
.footer-menu-col .fn--active::before {
content: "";
display: inline-block;
width: 0.35rem;
height: 0.35rem;
margin-right: 0.4rem;
border-radius: 50%;
background: var(--color-accent);
vertical-align: middle;
}
.footer-menu-col--contacts {
align-items: flex-start;
gap: 1rem;
}
@media screen and (min-width: 769px) {
.footer_wrap {
grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
column-gap: clamp(2.25rem, 4vw, 4.5rem);
}
.footer-left {
gap: 1.1rem;
}
.footer-right {
justify-self: stretch;
}
.footer-messengers {
gap: 0.9rem;
}
}
@media screen and (max-width: 768px) {
.footer-menu-grid {
grid-template-columns: 1fr;
gap: 4.22rem;
}
.footer-menu-col {
gap: 3rem;
}
.footer-menu-col--contacts {
gap: 3rem;
}
}
/* CTA section (before footer) */
section.cta-section {
min-width: 0;
width: 100%;
max-width: 73.75rem;
box-sizing: border-box;
}
.cta-section {
position: relative;
isolation: isolate;
background: var(--object-background, linear-gradient(122deg, rgba(13, 219, 178, 0.075) -9.98%, rgba(21, 99, 224, 0.075) 102.62%));
border-radius: 2.5rem;
overflow: hidden;
}
.cta-section__shell {
padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 3rem);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.cta-section__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 27.5rem);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
width: 100%;
min-width: 0;
}
.cta-section__copy {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.cta-section__kicker {
margin: 0;
color: var(--color-accent);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
}
.cta-section__title {
margin: 0;
font-size: clamp(1.75rem, 2.4vw, 2.25rem);
line-height: 1.15;
font-weight: 600;
max-width: 26ch;
}
.cta-section__lead {
margin: 0;
max-width: 38ch;
color: var(--color-text-gray70);
font-size: 1.0625rem;
line-height: 1.55;
}
.cta-section__trust {
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.cta-section__trust li {
margin: 0;
padding: 0.45rem 0.85rem;
border-radius: 100rem;
border: 0.0625rem solid rgba(13, 219, 179, 0.28);
background: rgba(13, 219, 179, 0.08);
color: var(--color-text);
font-size: 0.8125rem;
line-height: 1.35;
white-space: nowrap;
}
.cta-section__panel {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: clamp(1.25rem, 2vw, 1.75rem);
border-radius: 1.5rem;
border: 0.0625rem solid rgba(21, 99, 224, 0.22);
background: rgba(12, 20, 31, 0.55);
backdrop-filter: blur(0.75rem);
-webkit-backdrop-filter: blur(0.75rem);
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.cta-section__panel-note {
margin: 0;
text-align: center;
color: rgba(13, 219, 179, 0.92);
font-size: 0.8125rem;
line-height: 1.4;
letter-spacing: 0.01em;
}
.cta-section__primary,
.cta-section__secondary {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 3.25rem;
padding: 0.85rem 1.25rem;
border-radius: 1rem;
text-decoration: none;
text-align: center;
transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.cta-section__primary {
border: 0.0625rem solid rgba(13, 219, 179, 0.45);
background: var(--color-accent);
color: var(--color-background);
box-shadow: 0 0.2rem 0.75rem rgba(13, 219, 179, 0.18);
}
.cta-section__primary:hover {
box-shadow: 0 0.35rem 1rem rgba(13, 219, 179, 0.28);
}
.cta-section__primary-title,
.cta-section__secondary-label,
.cta-section__primary-meta,
.cta-section__secondary-meta {
max-width: 100%;
overflow-wrap: anywhere;
}
.cta-section__primary-title {
font-size: clamp(0.875rem, 1.6vw, 1rem);
font-weight: 600;
line-height: 1.3;
}
.cta-section__primary-meta {
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.3;
opacity: 0.88;
}
.cta-section__divider {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--color-text-gray70);
font-size: 0.8125rem;
line-height: 1;
}
.cta-section__divider::before,
.cta-section__divider::after {
content: '';
flex: 1;
height: 0.0625rem;
background: rgba(255, 255, 255, 0.12);
}
.cta-section__secondary {
border: 0.0625rem solid rgba(255, 255, 255, 0.14);
background: rgba(12, 20, 31, 0.35);
color: var(--color-text);
}
.cta-section__secondary:hover {
border-color: rgba(13, 219, 179, 0.45);
background: rgba(13, 219, 179, 0.1);
}
.cta-section__secondary-label {
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-accent);
}
.cta-section__secondary-meta {
font-size: 0.75rem;
line-height: 1.3;
color: var(--color-text-gray70);
}
.faq-subtitle .faq-cta-link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.faq-subtitle .faq-cta-link:hover {
color: #ffffff;
}
/* Quiz popup: assets/css/quiz.css */
/* --- Audit 2026-05-21: CRO + a11y + mobile overflow --- */
.case-card-proof {
margin: 0 0 0.65rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.55rem;
line-height: 1.4;
}
.case-card-proof__metric {
color: var(--color-accent);
font-weight: 600;
font-size: 0.92rem;
}
.case-card-proof__detail {
color: var(--color-text-gray70);
font-size: 0.88rem;
}
.about-trust-line {
margin: 0.75rem 0 0;
max-width: 46rem;
color: var(--color-text-gray70);
font-size: 1rem;
line-height: 1.5;
}
.about-trust-line strong {
color: var(--color-text);
font-weight: 500;
}
.hero-link-short {
color: var(--color-text-gray70);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.hero-link-short:hover {
color: var(--color-accent);
}
.hero-actions-alt-sep {
opacity: 0.45;
}
.burger,
.burger-close {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
color: inherit;
}
@media screen and (max-width: 768px) {
html,
body {
overflow-x: hidden;
}
section,
section.cta-section,
.footer_wrap,
.header-wrapper,
section.hero {
min-width: 0;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
/* Боковые отступы от края экрана (как у .hero-content / footer) */
section:not(.hero):not(.cta-section) {
padding-left: 3.75rem;
padding-right: 3.75rem;
}
.about-trust-line {
font-size: 2.65rem;
line-height: 1.45;
max-width: none;
}
.case-card-proof__metric {
font-size: 2.4rem;
}
.case-card-proof__detail {
font-size: 2.32rem;
}
.cta-section__shell {
padding: 4.5rem 3.75rem 5rem;
}
.cta-section__grid {
grid-template-columns: 1fr;
gap: 5rem;
}
.cta-section__title {
font-size: 4.69rem;
max-width: 26ch;
}
.cta-section__kicker {
font-size: 2.65rem;
}
.cta-section__lead {
font-size: 3.05rem;
line-height: 1.5;
max-width: 38ch;
}
.cta-section__trust {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
margin-top: 2rem;
}
.cta-section__trust li {
font-size: 2.65rem;
line-height: 1.4;
white-space: normal;
padding: 1rem 1.75rem;
}
.cta-section__panel {
gap: 2.5rem;
padding: 3.75rem 3rem;
border-radius: 2.5rem;
overflow: hidden;
}
.cta-section__primary,
.cta-section__secondary {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.cta-section__panel-note {
font-size: 2.65rem;
}
.cta-section__primary,
.cta-section__secondary {
min-height: 9rem;
padding: 2rem 2.5rem;
border-radius: 2.5rem;
}
.cta-section__primary-title {
font-size: 3.05rem;
}
.cta-section__primary-meta,
.cta-section__secondary-meta {
font-size: 2.5rem;
}
.cta-section__secondary-label {
font-size: 2.8rem;
}
.cta-section__divider {
font-size: 2.65rem;
gap: 2rem;
}
}
/* Homepage bridge: existing site → dorabotka */
.service-bridge.work-simple .work-inner {
display: flex;
flex-direction: column;
gap: 2rem;
}
.service-bridge__head {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.service-bridge__head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem 2rem;
flex-wrap: wrap;
}
.service-bridge__head-text {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 46rem;
flex: 1 1 28rem;
min-width: 0;
}
.service-bridge__head-text h2 {
margin: 0;
}
.service-bridge__cta {
flex: 0 0 auto;
align-self: center;
white-space: nowrap;
}
.service-bridge__cards {
margin: 0;
}
.service-bridge__card {
position: relative;
}
.service-bridge__icon {
margin: 0;
font-size: 1.5rem;
line-height: 1;
}
.service-bridge__card--accent {
border-color: #0ddbb340;
background: var(--color-accent-bg);
}
.service-bridge__card--accent .w70t {
color: var(--color-text);
}
.service-bridge__footer {
margin: 0;
font-size: 1.125rem;
line-height: 1.55;
max-width: 52rem;
}
.service-bridge__footer a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.service-bridge__footer a:hover {
color: #ffffff;
}
.service-bridge__price {
color: rgba(13, 219, 178, 0.95);
font-weight: 600;
}
.service-bridge__quiz-link {
color: var(--color-accent);
}
@media screen and (max-width: 768px) {
.service-bridge__head-row {
flex-direction: column;
gap: 3rem;
}
.service-bridge__cta {
align-self: stretch;
width: 100%;
text-align: center;
justify-content: center;
min-height: 7rem;
height: auto;
padding: 2rem 2.5rem;
font-size: 2.8rem;
border-radius: 2rem;
}
.service-bridge__footer {
font-size: 2.65rem;
line-height: 1.45;
}
.service-bridge__icon {
font-size: 3rem;
}
}
/* Service page: dorabotka-sayta */
.service-page .service-section {
scroll-margin-top: 12rem;
}
.service-hero {
flex-direction: column;
width: 100%;
max-width: 73.75rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 8rem;
border-radius: 2.5rem;
background: var(--color-object-bg);
border: 0.0625rem solid #1563e020;
overflow: hidden;
}
section.service-hero {
margin-top: 8rem;
}
.service-hero__content {
width: 100%;
max-width: 52rem;
padding: 3.5rem 3rem 2.5rem;
gap: 1.75rem;
}
.service-hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
width: 100%;
max-width: 46rem;
margin-top: 0.5rem;
}
.service-hero__stat {
border: 0.0625rem solid #1563e020;
background: rgba(12, 20, 31, 0.55);
border-radius: 1.25rem;
padding: 1.125rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.service-hero__stat-value {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: rgba(13, 219, 178, 0.95);
}
.service-scope-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-exclude-lead {
margin: 0 0 1rem;
max-width: 46rem;
}
#process.service-section .work-steps-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-step-cta-btn {
margin-top: 0.75rem;
align-self: flex-start;
width: auto;
min-width: 14rem;
}
.work-step .service-step-cta-btn .herobtn {
font-size: 0.95rem;
}
@media screen and (max-width: 768px) {
section.service-hero {
margin-top: 14rem;
margin-bottom: 10rem;
}
.service-hero__content {
max-width: 100%;
padding: 4.5rem 3.75rem 3rem;
gap: 3rem;
}
.service-hero__stats {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 100%;
}
.service-hero__stat-value {
font-size: 2.8rem;
}
.service-scope-grid {
grid-template-columns: 1fr;
}
#process.service-section .work-steps-grid {
grid-template-columns: 1fr;
}
.work-step .service-step-cta-btn {
display: flex;
width: 100%;
min-width: 0;
height: 9.84rem;
border-radius: 2.81rem;
justify-content: center;
align-items: center;
align-self: stretch;
margin-top: 0;
}
.work-step .service-step-cta-btn .herobtn {
font-size: 3.05rem;
line-height: 1.2;
}
}