.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} :root { --color-primary-text: #FFFFFF;
--color-accent-yellow: #FFD700;
--color-bg-dark: #1A1A1A;
--color-bg-overlay: rgba(26, 26, 26, 0.4);
--color-badge-bg: rgba(255, 255, 255, 0.08);
--color-badge-border: rgba(255, 255, 255, 0.15);
--color-nav-hover: rgba(255, 255, 255, 0.1);
--color-cta-blue: #4A5FD9;
--color-social-bg: rgba(255, 255, 255, 0.1);
--color-social-hover: rgba(255, 255, 255, 0.2); --spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 40px;
--spacing-3xl: 60px; --font-heading: 'Montserrat', 'Poppins', sans-serif;
--font-body: 'Inter', 'Helvetica Neue', sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.8rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 3rem;
--text-4xl: 4rem;
--text-5xl: 5rem; --header-height: 80px;
--container-padding: 60px; --radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px; --z-background: 1;
--z-overlay: 2;
--z-content: 10;
--z-nav: 100;
} .hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 700px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} .hero__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: var(--z-background);
}
.hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg-overlay);
z-index: var(--z-overlay);
} .hero__nav {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 80px); max-width: 1800px; height: 72px;
z-index: var(--z-nav);
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;  background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); transition: all 0.3s ease;
} .nav__logo {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--color-primary-text);
font-family: var(--font-heading);
margin-left: 12px; text-decoration: none;
}
.logo__text {
font-size: var(--text-lg);
font-weight: 700;
color: #10B981;
line-height: 1;
display: flex;
align-items: center;
}
.logo__badge {
font-size: var(--text-sm);
font-weight: 500;
padding: 0 10px 2px 10px; height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-badge-border);
border-radius: var(--radius-full);
background: var(--color-badge-bg);
line-height: 1;
margin-top: 4px; } .nav__menu {
display: flex;
align-items: center;
gap: 8px; list-style: none;
margin: 0;
padding: 0;
margin-left: auto; margin-right: 12px;
}
.nav__link {
text-decoration: none;
color: var(--color-primary-text);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
padding: 8px 16px;
border-radius: 999px; background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__link:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
} .nav__phone {
text-decoration: none;
color: var(--color-primary-text);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-right: 12px;
}
.nav__phone:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
} .nav__lang {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--color-badge-border);
border-radius: var(--radius-full);
background: var(--color-badge-bg);
}
.nav__lang .lang__btn {
background: none;
border: none;
color: #FFFFFF !important;
font-size: var(--text-sm);
font-weight: 600;
padding: 8px 12px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.6;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.nav__lang .lang__btn--active,
.nav__lang .lang__btn.active {
opacity: 1;
background: rgba(255, 255, 255, 0.15);
}
.nav__lang .lang__btn:hover {
opacity: 1;
} .nav__hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-xs);
}
.nav__hamburger span {
width: 24px;
height: 2px;
background: var(--color-primary-text);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
} .nav__hamburger.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.nav__hamburger.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .hero__content {
position: relative;
z-index: var(--z-content);
text-align: center;
max-width: 1600px;
padding: 0 var(--spacing-2xl);
}
.hero__title {
font-family: var(--font-heading);
font-size: 4.5rem; font-weight: 700;
line-height: 1.1;
margin-bottom: var(--spacing-lg);
color: var(--color-primary-text);
width: 100%; display: flex;
flex-direction: column;
align-items: center;
gap: 0.2em;
}
.hero__typed {
color: var(--color-accent-yellow);
display: inline-block;
min-height: 1.2em;
font-weight: 600;
}
.hero__typed::after {
content: '|';
animation: cursor-blink 1s step-end infinite;
margin-left: 4px;
}
@keyframes cursor-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
.hero__subtitle {
font-size: var(--text-xl);
font-weight: 400;
color: var(--color-primary-text);
opacity: 0.85;
max-width: 700px;
margin: 0 auto;
} .hero__social {
position: fixed;
right: var(--spacing-2xl);
top: 50%;
transform: translateY(-50%);
z-index: var(--z-content);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.social__link {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-social-bg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-decoration: none;
font-size: var(--text-lg);
font-size: var(--text-lg);
transition: var(--transition-base);
}
.social__link:hover {
background: var(--color-social-hover);
transform: translateY(-4px);
} .hero__footer {
position: absolute;
bottom: var(--spacing-3xl);
left: 0;
width: 100%;
z-index: var(--z-content);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--container-padding);
} .footer__badge {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1.5px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
font-size: 15px;
font-weight: 600;
color: var(--color-primary-text);
white-space: nowrap;
color: var(--color-primary-text);
white-space: nowrap;
box-shadow: var(--shadow-lg);
transition: var(--transition-base);
}
.footer__badge:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-4px);
box-shadow: var(--shadow-soft-hover);
}
.badge__dot {
font-size: 10px;
color: var(--color-accent-yellow);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.2);
}
} .section-transition {
position: relative;
width: 100%;
height: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
} .hero__actions {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
z-index: var(--z-content);
position: relative;
} .modern-hero-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 320px; height: 60px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
pointer-events: auto;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
z-index: 1;
} .modern-hero-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 215, 0, 0.1),
rgba(255, 215, 0, 0.3),
rgba(255, 215, 0, 0.1),
transparent);
background-size: 200% 100%;
transform: translateX(-100%);
transition: transform 0.6s ease;
z-index: -1;
}
.modern-hero-btn:hover::before {
transform: translateX(0);
animation: liquid-flow 3s infinite linear;
}
.modern-hero-btn:hover {
border-color: rgba(255, 215, 0, 0.5);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.2),
inset 0 0 20px rgba(255, 215, 0, 0.05);
transform: translateY(-4px);
color: var(--color-accent-yellow);
text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
.modern-hero-btn .btn-text {
position: relative;
z-index: 2;
}
@keyframes liquid-flow {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
} @media (max-width: 1024px) {
:root {
--container-padding: 40px;
}
.hero__nav {
top: 16px;
width: calc(100% - 24px); padding: 8px 12px;
}
.hero__title {
font-size: 3.5rem;
}
.nav__menu {
display: none;
}
.transition__cta {
width: 160px;
height: 160px;
}
.cta__icon {
width: 80px;
height: 80px;
}
.cta__icon svg {
width: 40px;
height: 40px;
}
.footer__badge {
padding: 16px 24px;
font-size: 14px;
}
.nav__hamburger {
display: flex;
}
}
@media (max-width: 768px) {
:root {
--container-padding: 20px;
--header-height: 64px;
}
.hero__nav {
top: 10px;
width: calc(100% - 20px);
height: 60px;
padding: 0 12px;
}
.nav__logo {
margin-left: 4px;
gap: 6px;
}
.logo__text {
font-size: 1.1rem;
}
.logo__badge {
font-size: 10px;
padding: 2px 8px;
}
.nav__phone {
display: none;
} .nav__lang {
margin-left: auto;
margin-right: 8px;
padding: 2px;
}
.lang__btn {
padding: 4px 8px;
font-size: 11px;
}
.hero__title {
font-size: 2.2rem;
}
.hero__subtitle {
font-size: var(--text-base);
}
.hero__social {
display: none;
}
.hero__footer {
bottom: var(--spacing-lg);
padding: 0 var(--spacing-lg);
}
.footer__badge {
font-size: 13px;
padding: 14px 20px;
gap: 8px;
}
.badge__dot {
font-size: 8px;
}
.transition__cta {
width: 140px;
height: 140px;
}
.cta__icon {
width: 70px;
height: 70px;
}
.cta__icon svg {
width: 35px;
height: 35px;
}
}
@media (max-width: 480px) {
.hero__title {
font-size: 2rem;
}
.footer__badge {
font-size: 11px;
padding: 12px 16px;
gap: 6px;
}
.hero__cta-circle {
width: 120px;
height: 120px;
}
.cta__icon {
width: 60px;
height: 60px;
}
.cta__icon svg {
width: 30px;
height: 30px;
}
} a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-accent-yellow);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.cta__circle {
animation: none;
}
.hero__typed::after {
animation: none;
opacity: 1;
}
} .hero__canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: var(--z-background); background: #000;
} .hero__overlay {
z-index: var(--z-overlay);
background: rgba(0, 0, 0, 0.4);
}:root { --color-service-orange: #FF5F1F; --color-service-01: #3B82F6; --color-service-02: #F4D264; --color-service-03: #EF4444; --color-service-04: #5EADA6; --color-service-05: #10B981; --color-service-06: #9B8FC7; --color-service-07: #FF69B4; --color-service-08: #F97316;  --color-card-bg: #FAFBFC;
--color-card-border: rgba(0, 0, 0, 0.05); --color-section-bg-services: linear-gradient(180deg, #FFFFFF 0%, #E8EAF6 100%); --color-text-dark: #1A1A2E;
--color-text-accent-purple: #7B68EE; --card-min-height: 300px;
--card-padding: 40px; --card-radius: 20px;
--icon-size: 56px; --color-capabilities-number-bg: #1A1A2E; --color-capabilities-number-text: #FFFFFF; --color-capabilities-text: #1A1A2E;  --number-badge-size: 38px;
--number-badge-size-mobile: 32px;
} .services {
position: relative;
width: 100%;
min-height: 100vh; padding: 120px 0;
background: var(--color-section-bg-services);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.services__container {
width: 100%;
max-width: 1800px; margin: 0 auto;
padding: 0 var(--container-padding);
} .services__header {
text-align: center;
margin-bottom: var(--spacing-3xl);
margin-bottom: 80px;
} .services__badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-lg);
background: rgba(123, 104, 238, 0.1);
border: 1px solid rgba(123, 104, 238, 0.2);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-accent-purple);
margin-bottom: var(--spacing-lg);
}
.badge__dot {
font-size: var(--text-base);
opacity: 0.8;
} .services__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-dark);
margin: 0;
}
.title__part {
display: inline;
}
.title__part--accent {
color: var(--color-text-accent-purple);
} .services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: var(--spacing-md); gap: 16px;
} .capabilities {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--card-padding, 40px);
background: var(--color-card-bg, #FAFBFC);
border: 1px solid var(--color-card-border, rgba(0, 0, 0, 0.05));
border-radius: var(--card-radius, 20px);
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
min-height: var(--card-min-height, 340px); } .capabilities__heading {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-capabilities-text);
margin: 0 0 var(--spacing-md) 0;
} .capabilities__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
} .capabilities__item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
} .item__number {
display: flex;
align-items: center;
justify-content: center;
width: var(--number-badge-size);
height: var(--number-badge-size);
min-width: var(--number-badge-size); background: var(--color-capabilities-number-bg);
color: var(--color-capabilities-number-text);
border-radius: 50%;
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
line-height: 1;
} .item__text {
flex: 1;
font-size: var(--text-base);
font-weight: 400;
line-height: 1.6;
color: var(--color-capabilities-text);
margin: 0;
padding-top: 8px; }  .service-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between; min-height: 340px; padding: var(--card-padding);
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--card-radius);
text-decoration: none;
color: var(--color-text-dark);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition-base); --current-icon-color: var(--color-text-dark);
} .service-card:nth-child(1) {
--current-icon-color: var(--color-service-orange);
} .service-card:nth-child(2) {
--current-icon-color: var(--color-service-02);
} .service-card:nth-child(3) {
--current-icon-color: var(--color-service-03);
} .service-card:nth-child(4) {
--current-icon-color: var(--color-service-04);
} .service-card:nth-child(5) {
--current-icon-color: var(--color-service-05);
} .service-card:nth-child(6) {
--current-icon-color: var(--color-service-06);
} .service-card:nth-child(7) {
--current-icon-color: var(--color-service-07);
} .service-card:nth-child(8) {
--current-icon-color: var(--color-service-08);
} .service-card:hover {
background: var(--current-icon-color);
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-soft-hover);
border-color: transparent;
}
.service-card:hover .service-card__title,
.service-card:hover .service-card__index {
color: #FFFFFF;
opacity: 1;
z-index: 2; } .service-card__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: var(--card-radius);
overflow: hidden;
pointer-events: none; }
.service-card:hover .service-card__background {
opacity: 1;
}
.service-card__background canvas {
width: 100% !important;
height: 100% !important;
border-radius: var(--card-radius);
} .service-card__icon {
position: absolute;
top: var(--card-padding);
right: var(--card-padding);
width: var(--icon-size);
height: var(--icon-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
justify-content: center;
transition: var(--transition-base);
background: var(--current-icon-color);
z-index: 2;
}
.service-card:hover .service-card__icon {
background: #FFFFFF;
transform: none;
} .service-card__icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px; height: 300px;
background-image: url(//ople.agency/wp-content/themes/ople-agency/assets/icon/detal.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
.service-card:hover .service-card__icon::before {
opacity: 1;
animation: rotate-ring 10s linear infinite;
}
@keyframes rotate-ring {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
} .service-card:hover .icon__arrow {
stroke: var(--current-icon-color);
} .service-card__index {
position: absolute;
top: var(--card-padding);
left: var(--card-padding);
font-size: var(--text-sm);
font-weight: 400;
font-family: 'Courier New', monospace;
color: var(--color-text-dark);
opacity: 0.6;
letter-spacing: 0.05em;
transition: color 0.3s ease;
z-index: 2;
} .service-card__title {
margin-top: auto; font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 700;
line-height: 1.1; color: var(--color-text-dark);
margin-bottom: 0;
transition: color 0.3s ease;
text-align: left;
width: 100%;
z-index: 2;
padding-right: 20px; }  @media (min-width: 1400px) {
.services__grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (max-width: 1400px) {
.services__grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (max-width: 1024px) {
:root {
--card-padding: 40px; --card-min-height: 280px;
--icon-size: 48px;
}
.services {
padding: 100px 0;
}
.services__title {
font-size: var(--text-3xl);
}
.services__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.capabilities {
padding: var(--card-padding, 40px);
min-height: var(--card-min-height, 280px);
}
.capabilities__heading {
font-size: var(--text-xl);
}
.item__text {
font-size: var(--text-sm);
}
} @media (max-width: 768px) {
:root {
--card-padding: 32px; --card-min-height: 240px;
--icon-size: 44px;
}
.services {
padding: 80px 0;
}
.services__header {
margin-bottom: 60px;
}
.services__badge {
font-size: var(--text-xs);
padding: var(--spacing-xs) var(--spacing-md);
}
.services__title {
font-size: var(--text-2xl);
}
.services__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.capabilities {
padding: var(--card-padding, 32px);
gap: var(--spacing-md);
min-height: var(--card-min-height, 240px);
}
.capabilities__heading {
font-size: var(--text-lg);
margin-bottom: var(--spacing-sm);
}
.capabilities__list {
gap: var(--spacing-md);
}
.item__number {
width: var(--number-badge-size-mobile);
height: var(--number-badge-size-mobile);
min-width: var(--number-badge-size-mobile);
font-size: var(--text-sm);
}
.item__text {
font-size: var(--text-sm);
padding-top: 6px;
}
.service-card__title {
font-size: var(--text-xl);
}
} @media (max-width: 480px) {
:root {
--card-padding: 24px; --icon-size: 40px;
}
.services {
padding: 60px 0;
}
.services__title {
font-size: var(--text-xl);
}
.service-card__title {
font-size: var(--text-lg);
}
.capabilities {
padding: 24px;
}
.capabilities__heading {
font-size: var(--text-base);
}
.item__number {
width: 28px;
height: 28px;
min-width: 28px;
font-size: 12px;
}
.item__text {
font-size: var(--text-xs);
}
}  .service-card:focus-visible {
outline: 3px solid var(--color-text-accent-purple);
outline-offset: 4px;
} @media (prefers-reduced-motion: reduce) {
.service-card,
.service-card__icon {
transition: none;
}
.service-card:hover {
transform: none;
}
.service-card:hover .service-card__icon {
transform: none;
}
}:root { --color-results-bg: #FAFBFC;
--color-results-heading: #1A1A2E;
--color-results-heading-accent: #10B981;
--color-case-card-bg: #FFFFFF;
--color-case-badge-contextual: #A8DAFF;
--color-case-badge-performance: #FFA26B;
--color-case-badge-webinar: #E8E8E8;
--color-case-badge-smm: #90D5AB;
--color-case-text: #1A1A2E;
--color-case-text-secondary: #6B7280;
}
.results-section {
position: relative;
width: 100%;
min-height: 100vh; padding: 100px 0;
background: var(--color-results-bg);
display: flex;
flex-direction: column;
justify-content: center;
}
.results-section__container {
max-width: 1800px; margin: 0 auto;
padding: 0 var(--container-padding);
} .results-section__header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.results-section__title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 800;
line-height: 1.2;
color: var(--color-results-heading);
margin: 0 0 var(--spacing-lg) 0;
}
.results-section__title .accent {
color: var(--color-results-heading-accent);
}
.results-section__description {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-case-text-secondary);
max-width: 900px;
margin: 0 auto;
} .cases-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); }
.case-card {
background: var(--color-case-card-bg);
border-radius: var(--radius-lg);
padding: 32px; box-shadow: var(--shadow-md);
transition: var(--transition-base);
cursor: pointer;
border: 1px solid transparent;
}
.case-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-soft-hover);
background: #3B82F6; border-color: #3B82F6;
} .case-card__header {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.case-card__logo {
flex-shrink: 0;
width: 60px; height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #F3F4F6;
border-radius: var(--radius-md);
transition: background 0.3s ease;
}
.case-card:hover .case-card__logo {
background: rgba(255, 255, 255, 0.2);
}
.case-card__logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.case-card__header-content {
flex: 1;
}
.case-card__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.case-badge {
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.case-badge--contextual {
background: var(--color-case-badge-contextual);
color: #1A1A2E;
}
.case-badge--performance {
background: var(--color-case-badge-performance);
color: #FFFFFF;
}
.case-badge--webinar {
background: var(--color-case-badge-webinar);
color: #1A1A2E;
}
.case-badge--smm {
background: var(--color-case-badge-smm);
color: #FFFFFF;
}
.case-card__title {
font-family: var(--font-heading);
font-size: var(--text-xl); font-weight: 700;
color: var(--color-case-text);
margin: 0;
transition: color 0.3s ease;
}
.case-card:hover .case-card__title {
color: #FFFFFF;
} .case-card__description {
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-case-text-secondary);
margin-bottom: var(--spacing-lg);
transition: color 0.3s ease;
}
.case-card:hover .case-card__description {
color: rgba(255, 255, 255, 0.9);
} .case-card__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-sm);
margin-bottom: 0;
padding-top: var(--spacing-md);
border-top: 1px solid #E5E7EB;
transition: border-color 0.3s ease;
}
.case-card:hover .case-card__stats {
border-top-color: rgba(255, 255, 255, 0.2);
}
.case-stat {
text-align: left;
}
.case-stat__label {
font-size: 11px;
color: var(--color-case-text-secondary);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.3s ease;
}
.case-card:hover .case-stat__label {
color: rgba(255, 255, 255, 0.7);
}
.case-stat__value {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-case-text);
transition: color 0.3s ease;
}
.case-card:hover .case-stat__value {
color: #FFFFFF;
} .case-card__additional-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
} .case-card__image {
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 16/9;
background: #E5E7EB;
}
.case-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 1024px) {
.results-section__title {
font-size: 44px;
}
.cases-grid {
gap: var(--spacing-xl);
}
.case-card {
padding: 40px;
}
}
@media (max-width: 768px) {
.results-section {
padding: 80px 0;
}
.results-section__title {
font-size: 32px;
}
.results-section__description {
font-size: var(--text-base);
}
.cases-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.case-card {
padding: 32px;
}
.case-card__stats {
grid-template-columns: repeat(2, 1fr);
}
.case-card__additional-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.results-section {
padding: 60px 0;
}
.case-card {
padding: 24px;
}
.case-card__header {
flex-direction: column;
}
.case-card__stats {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
}:root { --color-team-bg: #F5F5F5;
--color-team-badge-bg: #10B981;
--color-team-badge-text: #FFFFFF;
--color-team-title: #1A1A2E;
--color-team-subtitle: #6B7280;
}
.team-section {
position: relative;
width: 100%;
padding: 100px 0;
background: var(--color-team-bg);
}
.team-section__container {
max-width: 1800px;
margin: 0 auto;
padding: 0 var(--container-padding);
} .team-section__header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.team-section__badge {
display: inline-block;
padding: 8px 20px;
background: var(--color-team-badge-bg);
border-radius: var(--radius-full);
color: var(--color-team-badge-text);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--spacing-lg);
}
.team-section__title {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
line-height: 1.2;
color: var(--color-team-title);
max-width: 1100px;
margin: 0 auto var(--spacing-md);
}
.team-section__description {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-team-subtitle);
max-width: 900px;
margin: 0 auto;
} .team-panels {
display: flex;
width: 100%;
gap: 12px;
height: 65vh;
min-height: 450px;
max-height: 700px;
}
.team-panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 24px;
color: #fff;
cursor: pointer;
flex: 0.5;
position: relative;
overflow: hidden;
transition: flex 1.4s cubic-bezier(0.19, 1, 0.22, 1);
} .team-panel::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.1) 40%,
transparent 100%);
border-radius: 24px;
z-index: 1;
transition: opacity 0.8s ease;
}
.team-panel:hover::before {
opacity: 0.85;
}
.team-panel.active::before {
opacity: 0;
}
.team-panel h3 {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
position: absolute;
bottom: 28px;
left: 28px;
right: 28px;
margin: 0;
opacity: 0;
z-index: 2;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
transition: opacity 0.3s ease-in 0.4s;
}
.team-panel.active {
flex: 5;
display: flex;
cursor: default;
}
.team-panel.active::before {
opacity: 0;
} .team-panel__info {
width: 50%;
height: 100%;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center; background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.4);
color: var(--color-team-title); opacity: 0;
transform: translateX(-50px) scale(0.95); transition: opacity 0.1s ease 0s, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
z-index: 2;
pointer-events: none;
}
.team-panel__info h3 {
opacity: 0 !important;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s;
}
.team-panel__info p {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
}
.team-panel.active .team-panel__info {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
.team-panel.active .team-panel__info h3,
.team-panel.active .team-panel__info p {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto;
}
.team-panel__info h3 {
position: static !important;
opacity: 1 !important;
color: var(--color-team-title) !important;
font-size: 32px !important;
margin-bottom: 24px !important;
text-shadow: none !important;
}
.team-panel__info p {
font-size: 18px;
line-height: 1.6;
color: var(--color-team-subtitle);
margin: 0;
} .team-panel__image {
width: 50%;
height: 100%;
background-size: cover;
background-position: center;
background-size: cover;
background-position: center;
opacity: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.1) translateX(50px);
transition: opacity 1.2s ease 0.2s, transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.team-panel.active .team-panel__image {
opacity: 1;
transform: scale(1) translateX(0);
} .team-panel h3 {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
position: absolute;
bottom: 28px;
left: 28px;
right: 28px;
margin: 0;
opacity: 0;
z-index: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
transition: opacity 0.3s ease;
}
.team-panel:not(.active) h3 {
opacity: 0.8;
}
.team-panel.active>h3 {
display: none; } @media (max-width: 1024px) {
.team-panel__info {
padding: 40px;
}
.team-panel__info h3 {
font-size: 24px !important;
margin-bottom: 16px !important;
}
.team-panel__info p {
font-size: 16px;
}
}
@media (max-width: 768px) {
.team-section {
padding: 80px 0;
}
.team-section__title {
font-size: 32px;
}
.team-section__description {
font-size: var(--text-base);
}
.team-panels {
flex-direction: column;
height: auto;
min-height: unset;
max-height: unset;
gap: 16px;
}
.team-panel {
height: 100px;
min-height: unset;
flex: none;
border-radius: 16px;
}
.team-panel.active {
height: auto;
flex-direction: column;
}
.team-panel__info {
width: 100%;
height: auto;
padding: 30px;
transform: translateY(-10px);
}
.team-panel.active .team-panel__info {
transform: translateY(0);
}
.team-panel__image {
width: 100%;
height: 250px;
}
.team-panel h3 {
font-size: 18px;
bottom: 16px;
left: 20px;
}
}
@media (max-width: 480px) {
.team-section {
padding: 60px 0;
}
.team-section__title {
font-size: 28px;
}
.team-panel {
min-height: 80px;
height: 15vh;
}
.team-panel.active {
height: 40vh;
}
.team-panel h3 {
font-size: 16px;
}
}:root { --color-faq-bg: #FAFBFC;
--color-faq-title: #1A1A2E;
--color-faq-card-bg: #FFFFFF;
--color-faq-question: #1A1A2E;
--color-faq-answer: #6B7280;
--color-faq-icon: #9CA3AF;
--color-faq-card-shadow: rgba(0, 0, 0, 0.06);
}
.faq-section {
position: relative;
width: 100%;
min-height: 100vh; padding: 100px 0;
background: var(--color-faq-bg);
display: flex;
flex-direction: column;
justify-content: center;
}
.faq-section__container {
max-width: 1800px; margin: 0 auto;
padding: 0 var(--container-padding);
} .faq-section__header {
margin-bottom: var(--spacing-3xl);
}
.faq-section__title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 800;
line-height: 1.2;
color: var(--color-faq-title);
max-width: 800px;
margin: 0;
} .faq-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);
align-items: start; }
.faq-card {
background: var(--color-faq-card-bg);
border-radius: var(--radius-lg);
padding: 32px 40px;
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
cursor: pointer;
display: block; }
.faq-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
} .faq-card__header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-lg);
}
.faq-card__question {
flex: 1;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
line-height: 1.4;
color: var(--color-faq-question);
margin: 0;
}
.faq-card__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--color-faq-icon);
transition: var(--transition-base);
}
.faq-card.active .faq-card__icon {
transform: rotate(180deg);
} .faq-card__answer {
display: none;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid #E5E7EB; font-size: var(--text-base);
line-height: 1.6;
color: var(--color-faq-answer);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-card.active .faq-card__answer {
display: block;
} @media (max-width: 1024px) {
.faq-section__title {
font-size: 44px;
}
.faq-card {
padding: 28px 32px;
}
}
@media (max-width: 768px) {
.faq-section {
padding: 80px 0;
}
.faq-section__title {
font-size: 32px;
}
.faq-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.faq-card {
padding: 24px 28px;
}
.faq-card__question {
font-size: var(--text-base);
}
}
@media (max-width: 480px) {
.faq-section {
padding: 60px 0;
}
.faq-section__title {
font-size: 28px;
}
.faq-card {
padding: 20px 24px;
}
}:root { --color-contacts-bg: #10B981;
--color-contacts-badge-bg: rgba(255, 255, 255, 0.3);
--color-contacts-badge-text: #FFFFFF;
--color-contacts-title: #FFFFFF;
--color-contacts-description: rgba(255, 255, 255, 0.9);
--color-contacts-input-bg: #FFFFFF;
--color-contacts-input-text: #1A1A2E;
--color-contacts-input-placeholder: #9CA3AF;
--color-contacts-button-bg: #2E3659;
--color-contacts-button-text: #FFFFFF;
--color-contacts-phone: #FFFFFF;
--color-contacts-email: #FFFFFF;
--color-contacts-social-bg: #FFFFFF;
--color-contacts-social-icon: #1A1A2E;
}
.contacts-section {
position: relative;
width: 100%;
min-height: 100vh;
padding: 140px 0;
background: var(--color-contacts-bg);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.contacts-section__container {
max-width: 2000px;
padding: 0 var(--container-padding);
position: relative;
z-index: 10;
} .contacts-section__lines {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 40%;
pointer-events: none;
z-index: 1;
} .contacts-section__header {
margin-bottom: 64px;
}
.contacts-section__badge {
display: inline-block;
padding: 8px 20px;
background: var(--color-contacts-badge-bg);
border-radius: var(--radius-full);
color: var(--color-contacts-badge-text);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--spacing-lg);
}
.contacts-section__title {
font-family: var(--font-heading);
font-size: 80px;
font-weight: 800;
line-height: 1.1;
color: var(--color-contacts-title);
margin-bottom: 24px;
max-width: 900px;
}
.contacts-section__description {
font-size: 20px;
line-height: 1.6;
color: var(--color-contacts-description);
max-width: 700px;
} .contacts-form {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 80px;
} .contacts-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.contacts-form__input {
width: 100%;
padding: 24px 28px;
background: var(--color-contacts-input-bg);
border: none;
border-radius: 16px;
font-size: 18px;
color: var(--color-contacts-input-text);
transition: box-shadow 0.3s ease, transform 0.3s ease;
appearance: none; -webkit-appearance: none;
}
.contacts-form__input::placeholder {
color: var(--color-contacts-input-placeholder);
}
.contacts-form__input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), var(--shadow-sm);
transform: translateY(-2px);
} select.contacts-form__input {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 20px;
padding-right: 50px;
}
.contacts-form__button {
width: 100%;
padding: 24px 28px;
background: var(--color-contacts-button-bg);
border: none;
border-radius: 16px;
color: var(--color-contacts-button-text);
font-size: 18px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.02em;
transition: background 0.3s ease, transform 0.3s ease;
}
.contacts-form__button:hover {
background: #1F2540;
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
} .contacts-form__checkbox-wrapper {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--spacing-sm);
} .contacts-form__checkbox-wrapper .wpcf7-list-item {
margin: 0;
}
.contacts-form__checkbox-wrapper label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.contacts-form__checkbox {
width: 20px;
height: 20px;
cursor: pointer;
appearance: auto;
accent-color: var(--color-contacts-button-bg);
}
.contacts-form__checkbox-label,
.wpcf7-list-item-label {
font-size: var(--text-sm);
color: var(--color-contacts-description);
line-height: 1.4;
} .wpcf7-response-output {
grid-column: 1 / -1;
color: #fff;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
padding: 10px 20px !important;
margin: 20px 0 0 0 !important;
}
.wpcf7-not-valid-tip {
color: #ffcccc;
font-size: 12px;
margin-top: 5px;
display: block;
} .contacts-info {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-xl);
}
.contacts-info__section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.contacts-info__label {
font-size: var(--text-base);
color: var(--color-contacts-description);
}
.contacts-info__phone {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 800;
color: var(--color-contacts-phone);
text-decoration: none;
transition: opacity 0.3s ease;
}
.contacts-info__phone:hover {
opacity: 0.8;
}
.contacts-info__email {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 800;
color: var(--color-contacts-email);
text-decoration: none;
transition: opacity 0.3s ease;
}
.contacts-info__email:hover {
opacity: 0.8;
} .contacts-social {
display: flex;
gap: var(--spacing-md);
}
.contacts-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--color-contacts-social-bg);
border-radius: 16px;
color: var(--color-contacts-social-icon);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contacts-social__link:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-soft-hover);
} @media (max-width: 1024px) {
.contacts-section {
padding: 100px 0;
}
.contacts-section__title {
font-size: 56px;
}
.contacts-form {
grid-template-columns: repeat(2, 1fr);
}
.contacts-form__button {
grid-column: 1 / -1;
}
.contacts-info__phone,
.contacts-info__email {
font-size: 40px;
}
}
@media (max-width: 768px) {
.contacts-section {
padding: 80px 0;
}
.contacts-section__title {
font-size: 40px;
}
.contacts-form {
grid-template-columns: 1fr;
}
.contacts-info {
flex-direction: column;
align-items: flex-start;
}
.contacts-info__phone,
.contacts-info__email {
font-size: 32px;
}
}
@media (max-width: 480px) {
.contacts-section {
padding: 60px 0;
}
.contacts-section__title {
font-size: 32px;
}
.contacts-info__phone,
.contacts-info__email {
font-size: 26px;
}
.contacts-social__link {
width: 52px;
height: 52px;
}
}:root { --color-footer-bg: #2E3659;
--color-footer-logo-text: #FFFFFF;
--color-footer-description: rgba(255, 255, 255, 0.6);
--color-footer-heading: #FFFFFF;
--color-footer-link: rgba(255, 255, 255, 0.7);
--color-footer-link-hover: #FFFFFF;
--color-footer-contact: #FFFFFF;
--color-footer-social-bg: #FFFFFF;
--color-footer-social-icon: #1A1A2E;
--color-footer-lang-border: rgba(255, 255, 255, 0.3);
--color-footer-lang-text: #FFFFFF;
--color-footer-copyright: rgba(255, 255, 255, 0.5);
}
.footer {
position: relative;
width: 100%;
padding: 80px 0 40px;
background: var(--color-footer-bg);
}
.footer__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-padding);
} .footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: var(--spacing-3xl);
margin-bottom: var(--spacing-3xl);
} .footer__brand {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.footer__logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-decoration: none;
}
.footer__logo-text {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 800;
color: var(--color-footer-logo-text);
}
.footer__logo-badge {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-footer-logo-text);
}
.footer__description {
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-footer-description);
max-width: 350px;
}
.footer__credits {
margin-top: var(--spacing-xl);
}
.footer__copyright {
font-size: var(--text-sm);
color: var(--color-footer-copyright);
margin-bottom: var(--spacing-sm);
}
.footer__made-by {
font-size: var(--text-sm);
color: var(--color-footer-description);
}
.footer__made-by a {
color: var(--color-footer-link-hover);
text-decoration: none;
transition: opacity 0.3s ease;
}
.footer__made-by a:hover {
opacity: 0.8;
} .footer__nav {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.footer__nav-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-footer-heading);
margin-bottom: var(--spacing-sm);
}
.footer__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer__nav-link {
color: var(--color-footer-link);
text-decoration: none;
font-size: var(--text-base);
transition: color 0.3s ease;
}
.footer__nav-link:hover {
color: var(--color-footer-link-hover);
} .footer__contact {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.footer__contact-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-footer-heading);
margin-bottom: var(--spacing-sm);
}
.footer__phone {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-footer-contact);
text-decoration: none;
transition: opacity 0.3s ease;
}
.footer__phone:hover {
opacity: 0.8;
}
.footer__email {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-footer-contact);
text-decoration: none;
transition: opacity 0.3s ease;
}
.footer__email:hover {
opacity: 0.8;
} .footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--color-footer-social-bg);
border-radius: var(--radius-md);
color: var(--color-footer-social-icon);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer__social-link:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
} .footer__links {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.footer__policy-link {
color: var(--color-footer-link);
text-decoration: none;
font-size: var(--text-sm);
transition: color 0.3s ease;
}
.footer__policy-link:hover {
color: var(--color-footer-link-hover);
} .footer__lang {
display: flex;
gap: var(--spacing-sm);
}
.footer__lang-button {
padding: 8px 16px;
background: transparent;
border: 1px solid var(--color-footer-lang-border);
border-radius: var(--radius-sm);
color: var(--color-footer-lang-text);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
}
.footer__lang-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.footer__lang-button.active {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.6);
} @media (max-width: 1024px) {
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
}
}
@media (max-width: 768px) {
.footer {
padding: 60px 0 30px;
}
.footer__grid {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.footer__phone,
.footer__email {
font-size: var(--text-lg);
}
}
@media (max-width: 480px) {
.footer {
padding: 50px 0 25px;
}
.footer__logo-text {
font-size: var(--text-xl);
}
.footer__social {
gap: var(--spacing-xs);
}
.footer__social-link {
width: 42px;
height: 42px;
}
}.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9000;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
} .mobile-menu__container {
width: 100%;
max-width: 1400px;
background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 30px 50px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-20px) scale(0.98);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
gap: 40px;
max-height: 90vh;
overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__container {
transform: translateY(0) scale(1);
} .mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu__logo {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading, sans-serif);
color: #fff;
}
.mobile-menu__logo .logo__text {
font-size: 24px;
font-weight: 700;
}
.mobile-menu__logo .logo__badge {
font-size: 12px;
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
.mobile-menu__top-nav {
display: flex;
gap: 10px;
}
.mobile-menu__pill {
padding: 8px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
font-size: 14px;
transition: all 0.2s;
}
.mobile-menu__pill:hover {
background: rgba(255, 255, 255, 0.1);
}
.mobile-menu__phone {
color: #fff;
font-weight: 600;
text-decoration: none;
font-size: 16px;
}
.mobile-menu__lang {
display: flex;
background: rgba(255, 255, 255, 0.1);
padding: 4px;
border-radius: 20px;
}
.mobile-menu__lang .lang__btn {
background: none;
border: none;
color: #fff;
padding: 4px 10px;
border-radius: 16px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
opacity: 0.5;
text-decoration: none;
}
.mobile-menu__lang .lang__btn.active {
background: #fff;
color: #000;
opacity: 1;
}
.mobile-menu__close {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 8px;
opacity: 0.7;
transition: opacity 0.2s;
}
.mobile-menu__close:hover {
opacity: 1;
} .mobile-menu__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.mobile-menu__title {
font-size: 16px;
color: #fff;
opacity: 0.9;
font-weight: 600;
margin-bottom: 24px;
}
.mobile-menu__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-menu__link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 16px;
transition: color 0.2s;
}
.mobile-menu__link:hover {
color: #fff;
} .mobile-menu__contact-block {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.mobile-menu__phone-large {
color: #fff;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
.mobile-menu__email {
color: #fff;
font-size: 18px;
text-decoration: none;
opacity: 0.8;
}
.mobile-menu__socials {
display: flex;
gap: 12px;
margin-bottom: 32px;
}
.mobile-menu__social-icon {
width: 40px;
height: 40px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
transition: transform 0.2s;
}
.mobile-menu__social-icon:hover {
transform: translateY(-3px);
}
.mobile-menu__legal {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-menu__legal a {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
text-decoration: none;
} .mobile-menu__desc {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
line-height: 1.6;
max-width: 250px;
} @media (max-width: 1024px) {
.mobile-menu__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.mobile-menu__container {
padding: 20px;
height: 100%;
max-height: 100%;
border-radius: 0;
}
.mobile-menu__header {
flex-wrap: wrap;
gap: 15px;
}
.mobile-menu__top-nav {
display: none; }
.mobile-menu__phone {
display: none; }
.mobile-menu__grid {
grid-template-columns: 1fr;
gap: 30px;
}
.mobile-menu__col--info {
display: none; }
} @media (min-width: 1025px) {
.mobile-menu {
background: none; backdrop-filter: none;
-webkit-backdrop-filter: none;
height: auto; top: 100px; padding: 0;
align-items: flex-start; pointer-events: none; overflow: visible;
}
.mobile-menu.is-open {
pointer-events: auto;
}
.mobile-menu__container {
width: 1800px; max-width: calc(100% - 32px);
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 40px;
transform-origin: top center;
max-height: calc(100vh - 120px); } .mobile-menu__header {
display: none;
} .mobile-menu__grid {
gap: 60px;
padding-top: 10px;
}
}  .mobile-menu__list li,
.mobile-menu__title,
.mobile-menu__contact-block,
.mobile-menu__socials,
.mobile-menu__desc {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu.is-open .mobile-menu__list li,
.mobile-menu.is-open .mobile-menu__title,
.mobile-menu.is-open .mobile-menu__contact-block,
.mobile-menu.is-open .mobile-menu__socials,
.mobile-menu.is-open .mobile-menu__desc {
opacity: 1;
transform: translateY(0);
} .mobile-menu.is-open .mobile-menu__container {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-menu.is-open .mobile-menu__title {
transition-delay: 0.1s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(1) {
transition-delay: 0.15s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) {
transition-delay: 0.2s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) {
transition-delay: 0.25s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) {
transition-delay: 0.3s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(5) {
transition-delay: 0.35s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(6) {
transition-delay: 0.4s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(7) {
transition-delay: 0.45s;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(8) {
transition-delay: 0.5s;
}
.mobile-menu.is-open .mobile-menu__contact-block {
transition-delay: 0.3s;
}
.mobile-menu.is-open .mobile-menu__socials {
transition-delay: 0.4s;
}
.mobile-menu.is-open .mobile-menu__desc {
transition-delay: 0.2s;
}:root {
--popup-bg: #1A1A2E;
--popup-text: #FFFFFF;
--popup-input-bg: #FFFFFF;
--popup-input-text: #1A1A2E;
--popup-button-bg: #2E3659;
--popup-button-text: #FFFFFF;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.popup.active {
opacity: 1;
visibility: visible;
}
.popup__content {
background-color: var(--color-contacts-bg, #10B981);
padding: 50px 60px;
border-radius: 40px;
width: 95%;
max-width: 1200px; position: relative;
transform: translateY(30px) scale(0.95);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.popup.active .popup__content {
transform: translateY(0) scale(1);
} .popup__close {
position: absolute;
top: 30px;
right: 30px;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.popup__close:hover {
background: rgba(255, 255, 255, 0.4);
transform: rotate(90deg);
} .popup__title {
font-family: var(--font-heading, 'Montserrat', sans-serif);
color: #fff;
font-size: 42px;
font-weight: 800;
margin-bottom: 40px;
text-align: left;
line-height: 1.1;
} .popup .wpcf7-form {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
width: 100% !important;
} .popup .wpcf7-form-control-wrap {
display: block !important;
width: 100% !important;
}
.popup .contacts-form__input {
width: 100%;
padding: 24px 30px;
background: #FFFFFF;
border: none;
border-radius: 18px;
font-size: 18px;
color: #1A1A2E;
} .popup select.contacts-form__input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 24px center;
background-size: 22px;
} .popup .contacts-form__checkbox-wrapper {
grid-column: 1 / -1 !important; display: block !important;
width: 100% !important;
margin: 20px 0 !important;
} .popup .contacts-form__checkbox-wrapper span {
display: block !important;
width: 100% !important;
}
.popup .contacts-form__checkbox-wrapper label {
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
width: 100% !important;
cursor: pointer;
}
.popup .contacts-form__checkbox {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
margin-top: 4px !important;
}
.popup .contacts-form__checkbox-label,
.popup .wpcf7-list-item-label {
font-size: 14px !important;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.5 !important;
text-align: left !important;
flex: 1 !important;
display: inline-block !important; } .popup .contacts-form__button {
grid-column: 1 / -1 !important;
width: 100% !important;
padding: 26px !important;
background: #2E3659 !important;
color: #FFFFFF !important;
border-radius: 18px !important;
font-size: 20px !important;
font-weight: 800 !important;
cursor: pointer;
text-transform: uppercase;
}
.popup .contacts-form__button:hover {
background: #1F2540 !important;
transform: translateY(-4px);
} .popup .wpcf7-response-output {
grid-column: 1 / -1 !important;
background: rgba(0, 0, 0, 0.25);
border: none !important;
border-radius: 15px;
padding: 20px !important;
margin-top: 20px !important;
color: #fff;
text-align: center;
} @media (max-width: 1024px) {
.popup__content {
max-width: 900px;
}
}
@media (max-width: 768px) {
.popup__content {
padding: 40px 25px;
max-width: 500px;
}
.popup .wpcf7-form {
grid-template-columns: 1fr !important; }
.popup__title {
font-size: 28px;
text-align: center;
}
}:root { --color-bg-product-focus-section: #F5F6F7; --color-bg-product-card-start: #8FA3FF;
--color-bg-product-card-end: #A5B7FF;
--gradient-product-card: linear-gradient(135deg, var(--color-bg-product-card-start) 0%, var(--color-bg-product-card-end) 100%); --card-radius-large: 60px;
--card-padding: 40px;
--card-max-width: 1300px;
} .product-focus {
position: relative;
width: 100%;
min-height: 100vh; padding: 100px 0;  background: var(--color-bg-product-focus-section); overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
#liquid-gradient-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; pointer-events: auto; border-radius: var(--card-radius-large);
} #liquid-gradient-container canvas {
width: 100% !important;
height: 100% !important;
display: block;
border-radius: var(--card-radius-large);
}
.product-focus__container {
position: relative;
z-index: 10; width: 100%; max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
align-items: center;
justify-content: center;
will-change: opacity, transform;
} .product-focus__card {
position: relative;
width: 100%;
max-width: var(--card-max-width);
min-height: 600px;
background: transparent;
border-radius: var(--card-radius-large);
padding: var(--card-padding);
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
transition: box-shadow var(--transition-base);
}
.product-focus__card:hover {
box-shadow: var(--shadow-soft-hover); } .card__decoration {
position: absolute;
top: 50%;
right: 80px;
transform: translateY(-50%);
width: 120px;
height: auto;
opacity: 0.3;
pointer-events: none;
} .product-focus__title {
position: absolute;
top: 80px;
left: 80px;
z-index: 10;
font-family: var(--font-heading);
font-size: 100px;
font-weight: 900;
line-height: 0.9;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: -0.04em;
pointer-events: none;
margin: 0;
}
.title-short {
display: none;
} .corner-label {
position: absolute;
font-size: var(--text-sm);
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10; pointer-events: none;
}
.corner-label--bottom-left {
bottom: 60px;
left: 80px;
}
.corner-label--bottom-right {
bottom: 60px;
right: 80px;
} .product-focus__stats {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
z-index: 10;
pointer-events: none;
}
.pf-stat-circle {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
pointer-events: auto;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 20px;
text-align: center;
animation: pf-float 6s ease-in-out infinite;
z-index: 10;
}
.pf-stat-circle:hover {
transform: translateY(-8px) scale(1.08);
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.pf-stat-circle__number {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 800;
color: #FFFFFF;
line-height: 1;
margin-bottom: 4px;
}
.pf-stat-circle__label {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
max-width: 100px;
} .pf-stat-circle--1 {
width: 160px;
height: 160px;
top: 60px;
right: 80px;
animation-delay: 0s;
} .pf-stat-circle--2 {
width: 140px;
height: 140px;
top: 50%;
right: 40px;
transform: translateY(-50%);
animation-delay: 2s;
} .pf-stat-circle--3 {
width: 170px;
height: 170px;
bottom: 60px;
right: 120px;
animation-delay: 4s;
}
@keyframes pf-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
} @media (max-width: 1024px) {
.product-focus {
padding: 80px 0;
}
.product-focus__card {
min-height: 500px;
padding: 60px;
border-radius: 48px;
}
.product-focus__title {
font-size: 64px;
top: 60px;
left: 60px;
}
.card__decoration {
width: 100px;
right: 60px;
}
.corner-label--bottom-left {
bottom: 50px;
left: 60px;
}
.corner-label--bottom-right {
bottom: 50px;
right: 60px;
}
.pf-stat-circle--1 {
width: 130px;
height: 130px;
top: 50px;
right: 60px;
}
.pf-stat-circle--2 {
width: 120px;
height: 120px;
right: 20px;
}
.pf-stat-circle--3 {
width: 140px;
height: 140px;
bottom: 50px;
right: 80px;
}
.pf-stat-circle__number {
font-size: 28px;
}
.pf-stat-circle__label {
font-size: 12px;
}
}
@media (max-width: 768px) {
.product-focus {
padding: 60px 0;
}
.product-focus__card {
min-height: 400px;
padding: 50px;
border-radius: 32px;
}
.product-focus__title {
font-size: 48px;
top: 50px;
left: 50px;
}
#liquid-gradient-container,
#liquid-gradient-container canvas {
border-radius: 32px;
}
.card__decoration {
width: 80px;
right: 50px;
}
.corner-label {
font-size: 12px;
}
.corner-label--bottom-left {
bottom: 40px;
left: 50px;
}
.corner-label--bottom-right {
bottom: 40px;
right: 50px;
}
.product-focus__stats {
display: none;
}
}
@media (max-width: 480px) {
.product-focus {
padding: 40px 0;
}
.product-focus__card {
min-height: 350px;
padding: 40px;
border-radius: 24px;
}
.product-focus__title {
font-size: 36px;
top: 40px;
left: 40px;
}
.title-full {
display: none;
}
.title-short {
display: inline;
}
#liquid-gradient-container,
#liquid-gradient-container canvas {
border-radius: 24px;
}
.card__decoration {
width: 60px;
right: 40px;
}
.corner-label {
font-size: 11px;
}
.corner-label--bottom-left {
bottom: 30px;
left: 40px;
}
.corner-label--bottom-right {
bottom: 30px;
right: 40px;
}
} @media (prefers-reduced-motion: reduce) {
.product-focus__card {
transition: none;
transform: none !important;
}
}:root { --color-service-07-pink: #F5A3A3; --color-service-08-orange-alt: #F7A055; } .services-extended {
position: relative;
width: 100%;
min-height: 100vh; padding: 60px 0 100px;
background: var(--color-bg-services-section, #FAFBFC);
display: flex;
flex-direction: column;
justify-content: center;
}
.services-extended__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-padding);
}  .service-card__icon--pink {
background: var(--color-service-07-pink);
}
.service-card__icon--orange-alt {
background: var(--color-service-08-orange-alt);
}   .services__grid--extended {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
}  @media (max-width: 1024px) {
.services-extended {
padding: 50px 0 80px;
} .services__grid--extended {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 768px) {
.services-extended {
padding: 40px 0 60px;
} .services__grid--extended {
grid-template-columns: 1fr;
}
} @media (max-width: 480px) {
.services-extended {
padding: 30px 0 50px;
}
}:root { --color-complecs-card-start: #10B981;
--color-complecs-card-end: #9AB0FF;
--gradient-complecs-card: linear-gradient(135deg, var(--color-complecs-card-start) 0%, var(--color-complecs-card-end) 100%); --color-bg-complecs-section: #F5F6F7; --card-radius-large: 60px;
--card-padding: 40px;
--card-max-width: 1300px;
}
.complecs-section {
position: relative;
width: 100%;
min-height: 100vh; padding: 100px 0;
background: var(--color-bg-complecs-section);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.complecs-section__container {
width: 100%; max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
align-items: center;
justify-content: center;
will-change: opacity, transform;
} .complecs-card {
position: relative;
width: 100%;
max-width: var(--card-max-width);
min-height: 600px;
padding: var(--card-padding);
background: var(--gradient-complecs-card);
border-radius: var(--card-radius-large);
box-shadow: var(--shadow-xl);
transform-style: preserve-3d;
will-change: transform;
transition: box-shadow var(--transition-base); overflow: hidden; }
#liquid-gradient-container-complecs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; pointer-events: auto; border-radius: var(--card-radius-large);
}
#liquid-gradient-container-complecs canvas {
width: 100% !important;
height: 100% !important;
display: block;
border-radius: var(--card-radius-large);
}
.complecs-card:hover {
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
} .complecs-card__title {
position: absolute;
top: 80px;
left: 80px;
font-family: var(--font-heading);
font-size: 88px;
font-weight: 800;
line-height: 0.95;
color: #FFFFFF;
letter-spacing: -0.02em;
margin: 0;
z-index: 10; pointer-events: none;
} .complecs-card__description {
position: absolute;
top: 280px; left: 80px;
max-width: 600px;
font-size: var(--text-lg);
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
z-index: 10; pointer-events: none;
}  @media (max-width: 1024px) {
.complecs-section {
padding: 80px 0;
}
.complecs-card {
min-height: 500px;
padding: 60px;
border-radius: 48px;
}
.complecs-card__title {
font-size: 64px;
top: 60px;
left: 60px;
}
.complecs-card__description {
top: 220px;
left: 60px;
font-size: var(--text-base);
}
}
@media (max-width: 768px) {
.complecs-section {
padding: 60px 0;
}
.complecs-card {
min-height: 400px;
padding: 50px;
border-radius: 32px;
}
.complecs-card__title {
font-size: 48px;
top: 50px;
left: 50px;
}
.complecs-card__description {
top: 160px;
left: 50px;
}
}
@media (max-width: 480px) {
.complecs-section {
padding: 40px 0;
}
.complecs-card {
min-height: 350px;
padding: 40px;
border-radius: 24px;
}
.complecs-card__title {
font-size: 36px;
top: 40px;
left: 40px;
}
.complecs-card__description {
top: 120px;
left: 40px;
}
}:root { --color-clients-bg: #10B981;
--color-clients-heading: #FFFFFF;
--color-clients-heading-accent: #FFD93D;
--color-clients-badge-bg: rgba(255, 255, 255, 0.3);
--color-clients-logo-card-bg: #FFFFFF;
--color-clients-cta-bg: rgba(255, 255, 255, 0.2);
--color-clients-cta-text: #FFFFFF;
}
.clients-section {
position: relative;
width: 100%;
min-height: 100vh; padding: 100px 0;
background: var(--color-clients-bg);
display: flex;
flex-direction: column;
justify-content: center;
}
.clients-section__container {
max-width: 1800px; margin: 0 auto;
padding: 0 var(--container-padding);
} .clients-section__header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.clients-section__badge {
display: inline-block;
padding: 8px 20px;
background: var(--color-clients-badge-bg);
border-radius: var(--radius-full);
color: var(--color-clients-heading);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--spacing-lg);
}
.clients-section__title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 800;
line-height: 1.2;
color: var(--color-clients-heading);
margin: 0;
}
.clients-section__title .accent {
color: var(--color-clients-heading-accent);
} .clients-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
}
.client-logo-card {
background: var(--color-clients-logo-card-bg);
border-radius: var(--radius-md);
padding: 32px 24px;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
transition: var(--transition-base);
box-shadow: var(--shadow-sm);
}
.client-logo-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-soft-hover);
}
.client-logo-card img {
max-width: 100%;
max-height: 60px;
object-fit: contain;
} .client-logo-card--join {
background: rgba(255, 255, 255, 0.1);
border: 2px dashed rgba(255, 255, 255, 0.4);
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
cursor: pointer;
box-shadow: none;
}
.client-logo-card--join:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.client-logo-card--join span {
font-size: var(--text-lg);
text-align: center;
} .clients-section__cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
width: 100%;
max-width: 280px;
margin: 0 auto;
padding: 16px 32px;
background: var(--color-clients-cta-bg);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-full);
color: var(--color-clients-cta-text);
font-weight: 600;
text-decoration: none;
transition: background 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(10px);
}
.clients-section__cta:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
}
.cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
} @media (max-width: 1024px) {
.clients-grid {
grid-template-columns: repeat(4, 1fr);
}
.clients-section__title {
font-size: 44px;
}
}
@media (max-width: 768px) {
.clients-section {
padding: 80px 0;
}
.clients-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
}
.client-logo-card {
padding: 24px 16px;
min-height: 100px;
}
.clients-section__title {
font-size: 32px;
}
}
@media (max-width: 480px) {
.clients-section {
padding: 60px 0;
}
.clients-grid {
grid-template-columns: repeat(2, 1fr);
}
.client-logo-card {
padding: 20px 12px;
min-height: 80px;
}
.clients-section__title {
font-size: 28px;
}
}