:root {
--brand-primary: #e26f27;
--brand-primary-hover: #f28a43;
--action-primary: #b65518;
--action-primary-hover: #f28a43;
--action-primary-pressed: #c75f1e;
--action-focus-ring: #f28a43;
--action-disabled: #eceff2;
--action-ghost-hover: #f6f7f8;
--action-ghost-pressed: #eceff2;
--action-inverse-hover: #ffffff;
--text-primary: #17202a;
--text-secondary: #5c6773;
--text-disabled: #a3adb8;
--text-accent: #b65518;
--text-accent-strong: #c75f1e;
--text-accent-inverse: #f28a43;
--text-inverse: #ffffff;
--background-primary: #ffffff;
--background-secondary: #f6f7f8;
--background-dark: #050d18;
--background-accent-soft: #fff0e6;
--surface-dark: #081523;
--surface-dark-elevated: #102235;
--border-subtle: #eceff2;
--border-default: #cbd2d9;
--border-accent: #e26f27;
--border-accent-strong: #c75f1e;
--border-dark: #102235;
--border-inverse: #ffffff;
--navy-950: #050d18;
--white: #ffffff;
--radius-button: 10px;
--radius-input: 10px;
--radius-card: 16px;
--radius-card-large: 20px;
--radius-full: 999px;
--font-family-primary: "Golos Text", "Helvetica Neue", Arial, sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-size-12: 12px;
--font-size-14: 14px;
--font-size-15: 15px;
--font-size-16: 16px;
--font-size-18: 18px;
--font-size-20: 20px;
--font-size-24: 24px;
--font-size-28: 28px;
--font-size-32: 32px;
--font-size-40: 40px;
--font-size-48: 48px;
--font-size-56: 56px;
--font-size-60: 60px;
--font-size-72: 72px;
--line-height-18: 18px;
--line-height-20: 20px;
--line-height-22: 22px;
--line-height-24: 24px;
--line-height-28: 28px;
--line-height-30: 30px;
--line-height-32: 32px;
--line-height-34: 34px;
--line-height-40: 40px;
--line-height-44: 44px;
--line-height-48: 48px;
--line-height-56: 56px;
--line-height-60: 60px;
--line-height-68: 68px;
--line-height-80: 80px;
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-120: 120px;
--space-160: 160px;
--container-max: 1440px;
--container-gutter: 20px;
--transition-fast: 120ms;
--transition-base: 180ms;
--easing-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--z-header: 250;
--z-dropdown: 200;
--z-modal: 400;
}
@media (max-width: 767px) {
:root {
--container-gutter: 16px;
}
}
@font-face {
font-family: "Golos Text";
src: url("../assets/fonts/GolosText-Regular.woff2") format("woff2"), url("../assets/fonts/GolosText-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Golos Text";
src: url("../assets/fonts/GolosText-Medium.woff2") format("woff2"), url("../assets/fonts/GolosText-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Golos Text";
src: url("../assets/fonts/GolosText-DemiBold.woff2") format("woff2"), url("../assets/fonts/GolosText-DemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--background-primary);
color: var(--text-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
font-weight: var(--font-weight-regular);
overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img,
picture,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
address {
font-style: normal;
}
:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
h1 {
font-size: var(--font-size-48);
line-height: 1.1667;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.0208em;
}
h2 {
font-size: var(--font-size-40);
line-height: 1.2;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.025em;
}
h3 {
font-size: var(--font-size-32);
line-height: 1.25;
font-weight: var(--font-weight-semibold);
}
h4 {
font-size: var(--font-size-24);
line-height: 1.3333;
font-weight: var(--font-weight-medium);
}
h5,
h6 {
font-size: var(--font-size-20);
line-height: 1.4;
font-weight: var(--font-weight-medium);
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
@media (max-width: 1199px) {
h1 {
font-size: var(--font-size-40);
}
h2 {
font-size: var(--font-size-32);
}
h3 {
font-size: var(--font-size-28);
}
}
@media (max-width: 767px) {
h1 {
font-size: var(--font-size-32);
}
h2 {
font-size: var(--font-size-28);
}
h3 {
font-size: var(--font-size-24);
}
h4 {
font-size: var(--font-size-20);
}
}
.text-display-xl {
font-size: var(--font-size-72);
line-height: 1.1111;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.0278em;
}
.text-display-l {
font-size: var(--font-size-60);
line-height: 1.1333;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.0333em;
}
.text-h1 {
font-size: var(--font-size-48);
line-height: 1.1667;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.0208em;
}
.text-h2 {
font-size: var(--font-size-40);
line-height: 1.2;
font-weight: var(--font-weight-semibold);
letter-spacing: -0.025em;
}
.text-h3 {
font-size: var(--font-size-32);
line-height: 1.25;
font-weight: var(--font-weight-semibold);
}
.text-h4 {
font-size: var(--font-size-24);
line-height: 1.3333;
font-weight: var(--font-weight-medium);
}
.text-h5 {
font-size: var(--font-size-20);
line-height: 1.4;
font-weight: var(--font-weight-medium);
}
.text-body-xl {
font-size: var(--font-size-20);
line-height: 1.7;
font-weight: var(--font-weight-regular);
}
.text-body-l {
font-size: var(--font-size-18);
line-height: 1.6667;
font-weight: var(--font-weight-regular);
}
.text-body-m {
font-size: var(--font-size-16);
line-height: 1.75;
font-weight: var(--font-weight-regular);
}
.text-body-s {
font-size: var(--font-size-14);
line-height: 1.5714;
font-weight: var(--font-weight-regular);
}
.text-caption {
font-size: var(--font-size-12);
line-height: 1.5;
font-weight: var(--font-weight-regular);
}
.text-overline {
font-size: var(--font-size-12);
line-height: 1.5;
font-weight: var(--font-weight-medium);
letter-spacing: 0.8333em;
text-transform: uppercase;
}
.text-button-l {
font-size: var(--font-size-16);
line-height: 1.5;
font-weight: var(--font-weight-medium);
}
.text-button-m {
font-size: var(--font-size-15);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
}
.text-button-s {
font-size: var(--font-size-14);
line-height: 1.4286;
font-weight: var(--font-weight-medium);
}
.text-navigation {
font-size: var(--font-size-15);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
}
.text-metric-xl {
font-size: var(--font-size-56);
line-height: 1.0714;
font-weight: var(--font-weight-semibold);
}
.text-metric-l {
font-size: var(--font-size-40);
line-height: 1.1;
font-weight: var(--font-weight-semibold);
}
.text-metric-m {
font-size: var(--font-size-28);
line-height: 1.2143;
font-weight: var(--font-weight-semibold);
}
.text-primary {
color: var(--text-primary);
}
.text-secondary {
color: var(--text-secondary);
}
.text-accent {
color: var(--text-accent);
}
.text-inverse {
color: var(--text-inverse);
}
@media (max-width: 1199px) {
.text-display-xl {
font-size: var(--font-size-56);
}
.text-display-l {
font-size: var(--font-size-48);
}
.text-h1 {
font-size: var(--font-size-40);
}
.text-h2 {
font-size: var(--font-size-32);
}
.text-h3 {
font-size: var(--font-size-28);
}
.text-metric-xl {
font-size: var(--font-size-48);
}
.text-metric-l {
font-size: var(--font-size-32);
}
}
@media (max-width: 767px) {
.text-display-xl {
font-size: var(--font-size-40);
}
.text-display-l {
font-size: var(--font-size-32);
}
.text-h1 {
font-size: var(--font-size-32);
}
.text-h2 {
font-size: var(--font-size-28);
}
.text-h3 {
font-size: var(--font-size-24);
}
.text-h4 {
font-size: var(--font-size-20);
}
.text-body-xl {
font-size: var(--font-size-18);
}
.text-metric-xl {
font-size: var(--font-size-40);
}
.text-metric-l {
font-size: var(--font-size-28);
}
.text-metric-m {
font-size: var(--font-size-24);
}
.text-overline {
letter-spacing: 0.4167em;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.is-scroll-locked {
overflow: hidden;
}
.lead-form-status {
margin: 0;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.lead-form-status:empty {
display: none;
}
.container {
width: 100%;
max-width: calc(var(--container-max) + var(--container-gutter) * 2);
margin-inline: auto;
padding-inline: var(--container-gutter);
}
.container--narrow {
max-width: calc(900px + var(--container-gutter) * 2);
}
.container--flush {
padding-inline: 0;
}
.icon {
flex-shrink: 0;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
}
.icon--16 {
width: 16px;
height: 16px;
}
.icon--24 {
width: 24px;
height: 24px;
}
.icon--32 {
width: 32px;
height: 32px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
height: 44px;
padding-inline: var(--space-20);
border: 1px solid transparent;
border-radius: var(--radius-button);
font-family: var(--font-family-primary);
font-size: var(--font-size-15);
line-height: var(--line-height-22);
font-weight: var(--font-weight-medium);
text-align: center;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--transition-base) var(--easing-out),
border-color var(--transition-base) var(--easing-out),
color var(--transition-base) var(--easing-out);
}
.button:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.button--l {
height: 52px;
padding-inline: var(--space-24);
font-size: var(--font-size-16);
line-height: var(--line-height-24);
}
.button--s {
gap: var(--space-4);
height: 36px;
padding-inline: var(--space-16);
font-size: var(--font-size-14);
line-height: var(--line-height-20);
}
.button--primary {
background-color: var(--action-primary);
color: var(--text-inverse);
}
.button--primary:hover {
background-color: var(--action-primary-hover);
}
.button--primary:active {
background-color: var(--action-primary-pressed);
}
.button--secondary {
background-color: var(--surface-dark);
color: var(--text-inverse);
}
.button--secondary:hover {
background-color: var(--surface-dark-elevated);
}
.button--secondary:active {
background-color: var(--background-dark);
}
.button--outline {
border-color: var(--border-accent);
color: var(--text-accent);
}
.button--outline:hover {
background-color: var(--background-accent-soft);
}
.button--outline:active {
background-color: var(--background-accent-soft);
border-color: var(--border-accent-strong);
color: var(--text-accent-strong);
}
.button--ghost {
color: var(--text-primary);
}
.button--ghost:hover {
background-color: var(--action-ghost-hover);
}
.button--ghost:active {
background-color: var(--action-ghost-pressed);
}
.button--text {
padding-inline: 0;
color: var(--text-accent);
}
.button--text:hover {
color: var(--text-accent-strong);
}
.button--text:active {
color: var(--text-accent-strong);
}
.button--text:hover .button__icon--arrow,
.button--primary:hover .button__icon--arrow,
.button--secondary:hover .button__icon--arrow {
transform: translateX(3px);
}
.button--outline-inverse {
border-color: var(--border-inverse);
color: var(--text-inverse);
}
.button--outline-inverse:hover {
background-color: rgba(255, 255, 255, 0.12);
}
.button--outline-inverse:active {
background-color: rgba(255, 255, 255, 0.2);
}
.button[disabled],
.button--disabled {
pointer-events: none;
cursor: default;
}
.button--primary[disabled],
.button--primary.button--disabled,
.button--secondary[disabled],
.button--secondary.button--disabled {
background-color: var(--action-disabled);
color: var(--text-disabled);
}
.button--outline[disabled],
.button--outline.button--disabled {
border-color: var(--border-subtle);
color: var(--text-disabled);
}
.button--ghost[disabled],
.button--ghost.button--disabled,
.button--text[disabled],
.button--text.button--disabled {
color: var(--text-disabled);
}
.button--outline-inverse[disabled],
.button--outline-inverse.button--disabled {
opacity: 0.4;
}
.button__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform var(--transition-base) var(--easing-out);
}
.button--s .button__icon {
width: 16px;
height: 16px;
}
.button--icon-only {
padding-inline: 0;
width: 44px;
}
.button--icon-only.button--l {
width: 52px;
}
.button--icon-only.button--s {
width: 36px;
}
.button--cta {
position: relative;
overflow: hidden;
border-color: #ef8100;
color: var(--text-inverse);
background-image: linear-gradient(90deg, #c75f1e, #e26f27, #f28a43, #e26f27, #c75f1e);
background-size: 200% 100%;
box-shadow: 0 6px 18px -2px rgba(199, 94, 31, 0.3);
text-shadow: 0 1px 2px rgba(89, 33, 5, 0.45);
animation: solis-cta-flow 10s linear infinite;
}
.button--cta::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 24px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0));
pointer-events: none;
}
.button--cta::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 22px;
background-image: linear-gradient(to bottom, rgba(89, 33, 5, 0), rgba(89, 33, 5, 0.22));
pointer-events: none;
}
.button--cta:hover {
background-image: linear-gradient(90deg, #e26f27, #f28a43, #f9a468, #f28a43, #e26f27);
}
@keyframes solis-cta-flow {
from {
background-position: 0% 50%;
}
to {
background-position: -100% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.button--cta {
animation: none;
}
}
.link {
display: inline-block;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
font-weight: var(--font-weight-regular);
color: var(--text-primary);
transition: color var(--transition-fast) var(--easing-out);
}
.link:hover {
color: var(--text-accent);
}
.link--on-dark {
color: var(--text-inverse);
}
.link--on-dark:hover {
color: var(--text-accent-inverse);
}
.link--on-dark[aria-current="page"] {
color: var(--text-accent-inverse);
}
.link--inline {
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
color: var(--text-accent);
}
.link--inline:hover {
color: var(--text-accent-strong);
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-primary);
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: 10px;
}
.breadcrumbs__item:not(:last-child)::after {
content: "/";
opacity: 0.35;
}
.breadcrumbs__link {
color: inherit;
opacity: 0.6;
text-decoration: none;
}
.breadcrumbs__link:hover {
opacity: 1;
}
.breadcrumbs__item[aria-current="page"] {
opacity: 1;
}
.breadcrumbs--on-dark .breadcrumbs__list {
color: var(--text-inverse);
}
.category-card {
display: flex;
align-items: stretch;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: 24px;
background-color: var(--background-primary);
transition:
border-color var(--transition-base) var(--easing-out),
box-shadow var(--transition-base) var(--easing-out);
}
.category-card:hover {
border-color: var(--border-accent);
box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}
.category-card:hover .category-card__photo {
transform: scale(1.05);
}
.category-card:hover .category-card__cta {
background-color: var(--background-accent-soft);
border-color: var(--border-accent-strong);
color: var(--text-accent-strong);
}
.category-card__content {
display: flex;
flex: 1 0 0;
flex-direction: column;
justify-content: center;
gap: 18px;
min-width: 0;
padding: 40px 16px 40px 40px;
}
.category-card__index {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-accent);
}
.category-card__title {
margin-top: var(--space-8);
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.category-card__description {
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.category-card__cta {
align-self: flex-start;
}
.category-card__media {
position: relative;
flex-shrink: 0;
width: 280px;
overflow: hidden;
background-image: url("../assets/img/categories/bg-category-card.webp");
background-size: cover;
background-position: center;
}
.category-card__photo {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--transition-base) var(--easing-out);
}
@media (max-width: 767px) {
.category-card {
flex-direction: column-reverse;
}
.category-card__content {
padding: var(--space-24);
}
.category-card__media {
width: 100%;
height: auto;
aspect-ratio: 560 / 600;
}
}
.product-card {
display: flex;
flex-direction: column;
min-height: 400px;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
text-decoration: none;
transition:
border-color var(--transition-base) var(--easing-out),
box-shadow var(--transition-base) var(--easing-out);
}
.product-card:hover {
border-color: var(--border-accent);
box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}
.product-card:hover .product-card__image {
transform: scale(1.05);
}
.product-card__media {
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
height: 232px;
padding: 16px;
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, #f7f9fc 100%);
}
.product-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--transition-base) var(--easing-out);
}
.product-card__content {
display: flex;
flex: 1 0 0;
flex-direction: column;
justify-content: space-between;
min-height: 0;
padding: 20px 24px 24px;
}
.product-card__info {
display: flex;
flex-direction: column;
gap: 6px;
}
.product-card__title {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.product-card__type {
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.product-card__link {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-14);
line-height: var(--line-height-20);
font-weight: var(--font-weight-medium);
color: var(--text-accent);
}
.product-card__link-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.store-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
}
.store-badges__link {
display: flex;
align-items: center;
gap: var(--space-12);
padding: 12px 24px 12px 20px;
border-radius: 12px;
background-color: var(--surface-dark);
transition: background-color var(--transition-base) var(--easing-out);
}
.store-badges__link:hover {
background-color: var(--surface-dark-elevated);
}
.store-badges__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--text-inverse);
}
.store-badges__icon--apple {
width: 18px;
}
.store-badges__text {
display: flex;
flex-direction: column;
color: var(--text-inverse);
white-space: nowrap;
}
.store-badges__caption {
opacity: 0.7;
}
.solution-card {
position: relative;
overflow: hidden;
aspect-ratio: 1100 / 500;
border-radius: var(--radius-card-large);
background-color: var(--border-default);
}
.solution-card::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to bottom,
rgba(5, 13, 24, 0) 0%,
rgba(5, 13, 24, 0.15) 55%,
rgba(5, 13, 24, 0.82) 100%
);
pointer-events: none;
}
.solution-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.solution-card__content {
position: absolute;
bottom: var(--space-48);
left: var(--space-48);
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
}
.solution-card__title {
color: var(--text-inverse);
}
@media (max-width: 767px) {
.solution-card {
aspect-ratio: 8 / 7;
}
.solution-card__content {
bottom: var(--space-24);
left: var(--space-24);
gap: var(--space-16);
}
}
.slider__viewport {
overflow: hidden;
}
.slider__track {
display: flex;
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
transition: transform 450ms var(--easing-out);
}
.slider__slide {
flex: 0 0 76.4%;
min-width: 0;
max-width: 1100px;
}
.slider__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-12);
margin-top: var(--space-24);
}
.slider__counter {
padding-right: var(--space-12);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.slider__counter-current {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
.slider__nav {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: transparent;
cursor: pointer;
transition: border-color var(--transition-base) var(--easing-out);
}
.slider__nav:hover {
border-color: var(--text-accent);
}
.slider__nav:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.slider__nav-icon {
width: 20px;
height: 20px;
color: var(--text-primary);
}
.slider__nav--prev .slider__nav-icon {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.slider__track {
transition: none;
}
}
@media (max-width: 767px) {
.slider__slide {
flex-basis: 88%;
}
.slider__controls {
margin-top: var(--space-16);
}
}
.task-card {
display: flex;
align-items: center;
gap: var(--space-16);
padding: 22px 22px 22px 24px;
border: 1px solid var(--border-dark);
border-radius: var(--radius-input);
background-color: rgba(8, 21, 35, 0.8);
transition: border-color var(--transition-base) var(--easing-out);
}
.task-card:hover {
border-color: var(--border-accent);
}
.task-card__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
color: var(--text-accent);
}
.task-card__text {
flex: 1;
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-inverse);
}
.task-card__arrow {
flex-shrink: 0;
width: 18px;
height: 18px;
opacity: 0.45;
color: var(--text-inverse);
}
.header {
position: sticky;
top: 0;
z-index: var(--z-header);
}
.header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(5, 13, 24, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.header__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
height: 78px;
}
.header__logo {
flex-shrink: 0;
display: block;
line-height: 0;
}
.header__logo-image {
display: block;
width: 186px;
height: 31px;
}
.header__nav {
flex-shrink: 0;
}
.header__nav-list {
display: flex;
align-items: center;
gap: 28px;
}
.header__nav-item {
position: relative;
}
.header__nav-link {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 4px 12px;
color: var(--text-inverse);
font-size: var(--font-size-15);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.header__nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 20px;
height: 2px;
border-radius: var(--radius-full);
background-color: var(--brand-primary);
opacity: 0;
transform: translateX(-50%);
transition: opacity var(--transition-fast) var(--easing-out);
}
.header__nav-link:hover::after,
.header__nav-link:focus-visible::after,
.header__nav-link[aria-expanded="true"]::after {
opacity: 1;
}
.header__nav-link-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
transition: transform var(--transition-fast) var(--easing-out);
}
.header__nav-link--open .header__nav-link-icon {
transform: rotate(180deg);
}
.header__actions {
display: flex;
flex-shrink: 0;
align-items: center;
gap: var(--space-20);
}
.header__burger {
display: none;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-button);
color: var(--text-inverse);
transition: background-color var(--transition-base) var(--easing-out);
}
.header__burger:hover {
background-color: rgba(255, 255, 255, 0.06);
}
.header__toolbar {
display: contents;
}
.header__actions-compact {
display: none;
flex-shrink: 0;
}
.header__panel {
display: contents;
}
@media (max-width: 1299px) {
.header__burger {
display: inline-flex;
}
.header__toolbar {
display: flex;
flex-shrink: 0;
align-items: center;
gap: var(--space-16);
}
.header__actions-compact {
display: flex;
align-items: center;
gap: var(--space-12);
}
.header__panel {
position: fixed;
inset: 78px 0 0 0;
z-index: var(--z-dropdown);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-32);
padding: var(--space-24) var(--container-gutter) var(--space-32);
overflow-y: auto;
background-color: var(--surface-dark);
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition:
clip-path 380ms var(--easing-out),
visibility 0s linear 380ms;
pointer-events: none;
}
.header__panel--open {
visibility: visible;
clip-path: inset(0 0 0% 0);
transition:
clip-path 380ms var(--easing-out),
visibility 0s linear 0s;
pointer-events: auto;
}
.header__nav-list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.header__nav-item {
border-bottom: 1px solid var(--border-dark);
}
.header__nav-item:first-child {
border-top: 1px solid var(--border-dark);
}
.header__nav-link {
justify-content: space-between;
width: 100%;
padding: var(--space-16) var(--space-4);
}
.header__nav-link::after {
display: none;
}
.header__actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-16);
}
}
@media (max-width: 574px) {
.header__compact-cta {
display: none;
}
}
.nav-dropdown {
position: fixed;
top: 86px;
left: 50%;
z-index: var(--z-dropdown);
display: flex;
gap: var(--space-48);
width: min(var(--container-max), calc(100vw - var(--container-gutter) * 2));
padding: var(--space-48);
border: 1px solid var(--border-dark);
border-radius: var(--radius-card-large);
background-color: rgba(8, 21, 35, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 24px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
.nav-dropdown[hidden] {
display: none;
}
.nav-dropdown__intro {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 28px;
width: 320px;
}
.nav-dropdown__copy {
display: flex;
flex-direction: column;
gap: var(--space-12);
color: var(--text-inverse);
}
.nav-dropdown__title {
font-size: var(--font-size-24);
line-height: 1.3333;
font-weight: var(--font-weight-medium);
}
.nav-dropdown__description {
font-size: var(--font-size-16);
line-height: 1.75;
opacity: 0.7;
}
.nav-dropdown__divider {
flex-shrink: 0;
align-self: stretch;
width: 1px;
background-color: var(--border-dark);
}
.nav-dropdown__columns {
display: flex;
flex: 1;
min-width: 0;
gap: var(--space-32);
}
.nav-dropdown__column {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
gap: var(--space-12);
}
.nav-dropdown__category {
color: var(--brand-primary);
font-size: var(--font-size-12);
line-height: 1.5;
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.nav-dropdown__list {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.nav-dropdown__note {
margin-top: var(--space-8);
max-width: 277px;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-inverse);
opacity: 0.6;
}
.nav-dropdown__preview {
flex-shrink: 0;
align-self: stretch;
width: 293px;
overflow: hidden;
border-radius: 16px;
}
.nav-dropdown__preview-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-dropdown-scrim {
position: fixed;
top: 78px;
right: 0;
bottom: 0;
left: 0;
z-index: calc(var(--z-dropdown) - 1);
background-color: var(--navy-950);
opacity: 0.55;
}
.nav-dropdown-scrim[hidden] {
display: none;
}
@media (max-width: 1299px) {
.nav-dropdown {
position: static;
flex-direction: column;
width: 100%;
max-width: none;
margin-top: var(--space-16);
padding: var(--space-24);
box-shadow: none;
transform: none;
}
.nav-dropdown__intro {
width: 100%;
}
.nav-dropdown__divider {
width: 100%;
height: 1px;
align-self: auto;
}
.nav-dropdown__columns {
flex-direction: column;
gap: var(--space-24);
}
.nav-dropdown__preview {
display: none;
}
.nav-dropdown-scrim {
display: none;
}
}
.language-switcher {
position: relative;
}
.language-switcher__trigger {
display: inline-flex;
align-items: center;
gap: 4px;
height: 36px;
padding: 7px 10px 7px 14px;
border: 1px solid var(--border-dark);
border-radius: var(--radius-full);
color: var(--text-inverse);
font-size: var(--font-size-15);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
}
.language-switcher__chevron {
flex-shrink: 0;
width: 16px;
height: 16px;
transition: transform var(--transition-fast) var(--easing-out);
}
.language-switcher__trigger--open .language-switcher__chevron {
transform: rotate(180deg);
}
.language-switcher__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: var(--z-dropdown);
min-width: 140px;
padding: var(--space-8);
border: 1px solid var(--border-dark);
border-radius: var(--radius-card);
background-color: rgba(8, 21, 35, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 24px rgba(0, 0, 0, 0.32);
}
.language-switcher__panel[hidden] {
display: none;
}
.language-switcher__option {
display: flex;
width: 100%;
align-items: center;
gap: var(--space-8);
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-input);
color: var(--text-inverse);
font-size: var(--font-size-15);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
text-align: left;
}
.language-switcher__option:hover {
background-color: rgba(255, 255, 255, 0.06);
}
.language-switcher__option[aria-selected="true"]::after {
content: "";
width: 6px;
height: 6px;
margin-left: auto;
border-radius: 50%;
background-color: var(--brand-primary);
}
.modal {
width: 100%;
max-width: min(480px, calc(100vw - var(--container-gutter) * 2));
padding: 0;
border: none;
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2);
}
.modal::backdrop {
background-color: rgba(5, 13, 24, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal__panel {
padding: var(--space-32);
}
.modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-16);
margin-bottom: var(--space-16);
}
.modal__title {
color: var(--text-primary);
}
.modal__close {
flex-shrink: 0;
color: var(--text-secondary);
}
.modal__close:hover {
color: var(--text-primary);
}
.modal__body {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.modal--consultation {
width: 100%;
max-width: min(1040px, calc(100vw - var(--container-gutter) * 2));
border-radius: 28px;
box-shadow: 0px 36px 90px -16px rgba(3, 8, 15, 0.45);
overflow-y: auto;
overflow-x: hidden;
}
.consultation-modal {
display: flex;
height: 620px;
}
.consultation-modal__photo {
position: relative;
flex: 0 0 420px;
overflow: hidden;
}
.consultation-modal__photo-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.consultation-modal__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(8, 18, 31, 0.9) 0%, rgba(8, 18, 31, 0.22) 60%, rgba(8, 18, 31, 0.05) 100%);
}
.consultation-modal__decor-topleft {
position: absolute;
top: 0;
left: 0;
width: 147px;
height: 176px;
pointer-events: none;
}
.consultation-modal__wave {
position: absolute;
top: 0;
left: 300px;
z-index: 1;
width: 170px;
height: 100%;
pointer-events: none;
}
.consultation-modal__copy {
position: absolute;
left: 44px;
bottom: 44px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 14px;
width: 300px;
}
.consultation-modal__copy-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-inverse);
}
.consultation-modal__copy-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-inverse);
opacity: 0.82;
}
.consultation-modal__copy-rule {
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background-color: var(--brand-primary);
}
.consultation-modal__form {
position: relative;
flex: 1 1 0;
min-width: 0;
padding: 76px 56px 56px 100px;
overflow-y: auto;
}
.consultation-modal__close {
position: absolute;
top: 32px;
right: 40px;
z-index: 2;
}
.consultation-modal__form-head {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.consultation-modal__form-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.consultation-modal__form-subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.consultation-modal__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-24);
margin-top: var(--space-24);
}
.consultation-modal__fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.consultation-modal__input {
width: 100%;
height: 56px;
padding-inline: var(--space-20);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.consultation-modal__input::placeholder {
color: var(--text-secondary);
}
.consultation-modal__input:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.consultation-modal__actions {
display: flex;
flex-direction: column;
gap: 18px;
}
.consultation-modal__consent {
position: relative;
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
}
.consultation-modal__consent-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.consultation-modal__consent-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1.5px solid var(--border-default);
border-radius: 6px;
}
.consultation-modal__consent-check {
display: none;
width: 13px;
height: 13px;
transform: translate(11%, 21%);
color: var(--text-inverse);
}
.consultation-modal__consent:has(.consultation-modal__consent-input:checked) .consultation-modal__consent-box {
border-color: transparent;
background-color: var(--brand-primary);
}
.consultation-modal__consent:has(.consultation-modal__consent-input:checked) .consultation-modal__consent-check {
display: block;
}
.consultation-modal__consent:has(.consultation-modal__consent-input:focus-visible) .consultation-modal__consent-box {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.consultation-modal__consent-label {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.consultation-modal__submit {
width: 100%;
}
.consultation-modal__decor-bottomright {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: 225px;
height: 270px;
pointer-events: none;
}
@media (max-width: 1023px) {
.consultation-modal {
height: auto;
}
.consultation-modal__photo {
display: none;
}
.consultation-modal__form {
padding: var(--space-56) var(--space-32) var(--space-32);
}
}
@media (max-width: 767px) {
.consultation-modal__form {
padding: var(--space-48) var(--space-20) var(--space-24);
}
.consultation-modal__close {
top: var(--space-16);
right: var(--space-16);
}
.consultation-modal__decor-bottomright {
width: 160px;
height: 192px;
}
}
.modal--dealer-form {
width: 100%;
max-width: min(1360px, calc(100vw - var(--container-gutter) * 2));
border-radius: 28px;
box-shadow: 0px 36px 90px -16px rgba(3, 8, 15, 0.45);
overflow-y: auto;
overflow-x: hidden;
}
.dealer-form-modal {
position: relative;
display: flex;
height: 780px;
background-color: var(--background-primary);
}
.dealer-form-modal__photo {
position: relative;
flex: 0 0 44.1176%;
overflow: hidden;
}
.dealer-form-modal__photo-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.dealer-form-modal__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(8, 18, 31, 0) 0%, rgba(8, 18, 31, 0.18) 34.68%, rgba(8, 18, 31, 0.531) 55.33%, rgba(8, 18, 31, 0.88) 100%);
}
.dealer-form-modal__decor-topleft {
position: absolute;
top: 0;
left: 0;
width: 235px;
height: 282px;
pointer-events: none;
}
.dealer-form-modal__copy {
position: absolute;
left: 9.3333%;
bottom: 56px;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-20);
width: 66.6667%;
}
.dealer-form-modal__copy-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-40);
line-height: var(--line-height-48);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.4px;
color: var(--text-inverse);
}
.dealer-form-modal__copy-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-inverse);
opacity: 0.82;
}
.dealer-form-modal__copy-rule {
display: block;
width: 64px;
height: 3px;
border-radius: 2px;
background-color: var(--brand-primary);
}
.dealer-form-modal__wave {
position: absolute;
top: 0;
left: 33.2353%;
z-index: 1;
width: 16.1765%;
height: 100%;
pointer-events: none;
}
.dealer-form-modal__form {
position: relative;
z-index: 2;
flex: 1 1 0;
min-width: 0;
padding: 86px 64px 86px 100px;
overflow-y: auto;
}
.dealer-form-modal__close {
position: absolute;
top: 40px;
right: 40px;
z-index: 2;
}
.dealer-form-modal__form-head {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.dealer-form-modal__form-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.dealer-form-modal__form-subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.dealer-form-modal__body {
display: flex;
flex-direction: column;
gap: var(--space-28);
margin-top: var(--space-28);
}
.dealer-form-modal__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
.dealer-form-modal__input {
width: 100%;
height: 56px;
padding-inline: var(--space-20);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.dealer-form-modal__textarea {
height: 128px;
padding-block: 18px;
resize: none;
}
.dealer-form-modal__input::placeholder {
color: var(--text-secondary);
}
.dealer-form-modal__input:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.dealer-form-modal__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
}
.dealer-form-modal__consent {
position: relative;
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
}
.dealer-form-modal__consent-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dealer-form-modal__consent-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 6px;
background-color: var(--brand-primary);
}
.dealer-form-modal__consent-check {
width: 13px;
height: 13px;
transform: translate(11%, 21%);
color: var(--text-inverse);
}
.dealer-form-modal__consent:has(.dealer-form-modal__consent-input:focus-visible) .dealer-form-modal__consent-box {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.dealer-form-modal__consent-label {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
white-space: nowrap;
}
.dealer-form-modal__submit {
flex-shrink: 0;
}
@media (max-width: 1023px) {
.dealer-form-modal {
height: auto;
}
.dealer-form-modal__photo,
.dealer-form-modal__wave {
display: none;
}
.dealer-form-modal__form {
padding: var(--space-56) var(--space-32) var(--space-32);
}
}
@media (max-width: 767px) {
.dealer-form-modal__form {
padding: var(--space-48) var(--space-20) var(--space-24);
}
.dealer-form-modal__close {
top: var(--space-16);
right: var(--space-16);
}
.dealer-form-modal__fields {
grid-template-columns: 1fr;
}
.dealer-form-modal__actions {
flex-direction: column;
align-items: stretch;
}
.dealer-form-modal__submit {
width: 100%;
}
}
.partner-program {
position: relative;
overflow: hidden;
padding-block: 140px;
background-color: var(--background-secondary);
}
.partner-program--banner {
max-width: min(1780px, calc(100vw - var(--container-gutter) * 2));
margin-inline: auto;
margin-block: 110px;
padding-block: 90px;
border-radius: var(--radius-card-large);
}
@media (max-width: 767px) {
.partner-program--banner {
margin-block: var(--space-64);
}
}
.partner-program__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.partner-program::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.12) 100%);
pointer-events: none;
}
.partner-program__container {
position: relative;
z-index: 2;
}
.partner-program__header {
max-width: 930px;
margin-inline: auto;
margin-bottom: var(--space-40);
color: var(--text-inverse);
text-align: center;
}
.partner-program__description {
max-width: 620px;
margin-inline: auto;
margin-top: var(--space-20);
}
.partner-program__cards {
display: flex;
gap: var(--space-24);
max-width: 960px;
margin: 0 auto var(--space-40);
padding: 0;
list-style: none;
}
.partner-card {
display: flex;
flex: 1 1 0%;
flex-direction: column;
gap: var(--space-20);
min-width: 0;
padding: 16px 16px 28px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-card-large);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 16px 17px rgba(8, 21, 35, 0.2);
}
.partner-card__media {
overflow: hidden;
height: 210px;
border-radius: 12px;
}
.partner-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.partner-card__body {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-inline: var(--space-8);
color: var(--text-inverse);
}
.partner-card__description {
opacity: 0.78;
}
.partner-program__cta-wrap {
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.partner-program {
padding-block: var(--space-96);
}
.partner-card__media {
height: 240px;
}
}
@media (max-width: 767px) {
.partner-program {
padding-block: var(--space-64);
}
.partner-program__description {
max-width: none;
}
.partner-program__cards {
flex-direction: column;
margin-bottom: var(--space-32);
}
.partner-card__media {
height: 280px;
}
.partner-program__cta {
width: 100%;
}
}
.produkt-gallery {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: clamp(300px, 47vw, 560px);
flex-shrink: 0;
}
.produkt-gallery__stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
padding: var(--space-28);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
overflow: hidden;
}
.produkt-gallery__slides {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
font: inherit;
cursor: zoom-in;
}
.produkt-gallery__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--background-primary);
}
.produkt-gallery__slide[hidden] {
display: none;
}
.produkt-gallery__nav {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: var(--background-primary);
color: var(--text-primary);
cursor: pointer;
transform: translateY(-50%);
}
.produkt-gallery__nav:hover {
border-color: var(--border-accent);
color: var(--text-accent);
}
.produkt-gallery__nav--prev {
left: 15px;
}
.produkt-gallery__nav--prev .produkt-gallery__nav-icon {
transform: rotate(180deg);
}
.produkt-gallery__nav--next {
right: 15px;
}
.produkt-gallery__nav-icon {
width: 20px;
height: 20px;
}
.produkt-gallery__counter {
position: absolute;
right: 27px;
bottom: 27px;
z-index: 2;
padding: 6px 14px;
border-radius: var(--radius-full);
background-color: var(--background-secondary);
font-family: var(--font-family-primary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
}
.produkt-gallery__expand {
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: var(--background-primary);
color: var(--text-primary);
cursor: pointer;
}
.produkt-gallery__expand:hover {
border-color: var(--border-accent);
color: var(--text-accent);
}
.produkt-gallery__expand-icon {
width: 16px;
height: 16px;
}
.produkt-gallery__thumbs {
display: flex;
gap: var(--space-12);
height: 88px;
}
.produkt-gallery__thumb {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
padding: var(--space-8);
border: 1px solid var(--border-subtle);
border-radius: 12px;
background-color: var(--background-secondary);
cursor: pointer;
}
.produkt-gallery__thumb--active {
border: 1.5px solid var(--border-accent);
background-color: var(--background-primary);
}
.produkt-gallery__thumb-image {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.produkt-gallery__lightbox {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(23, 32, 42, 0.92);
}
.produkt-gallery__lightbox[hidden] {
display: none;
}
.produkt-gallery__lightbox-image {
max-width: min(1100px, 88vw);
max-height: 82vh;
object-fit: contain;
}
.produkt-gallery__lightbox-close {
position: absolute;
top: 24px;
right: 24px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.12);
color: var(--text-inverse);
cursor: pointer;
}
.produkt-gallery__lightbox-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.produkt-gallery__lightbox-close-icon {
width: 20px;
height: 20px;
}
.produkt-gallery__lightbox-nav {
background-color: rgba(255, 255, 255, 0.12);
border-color: transparent;
color: var(--text-inverse);
}
.produkt-gallery__lightbox-nav:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: transparent;
color: var(--text-inverse);
}
.produkt-gallery__lightbox-nav--prev {
left: 24px;
}
.produkt-gallery__lightbox-nav--prev .produkt-gallery__nav-icon {
transform: rotate(180deg);
}
.produkt-gallery__lightbox-nav--next {
right: 24px;
}
.produkt-gallery__lightbox-counter {
right: auto;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.12);
color: var(--text-inverse);
}
@media (max-width: 1023px) {
.produkt-gallery {
width: 100%;
}
}
@media (max-width: 599px) {
.produkt-gallery__stage {
height: 300px;
padding: var(--space-16);
}
.produkt-gallery__nav {
width: 40px;
height: 40px;
}
.produkt-gallery__thumbs {
height: 64px;
}
}
.legal-page-hero {
padding-block: var(--space-40) var(--space-56);
background-color: var(--background-secondary);
}
.legal-page-hero__container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
}
.legal-page-hero__title {
color: var(--text-primary);
}
.legal-page-content {
padding-block: var(--space-80);
background-color: var(--background-primary);
}
.legal-page-content__body {
display: flex;
flex-direction: column;
gap: var(--space-20);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.legal-page-content__body h2,
.legal-page-content__body h3 {
color: var(--text-primary);
}
.legal-page-content__body p,
.legal-page-content__body ul,
.legal-page-content__body ol {
margin: 0;
}
.legal-page-content__body ul,
.legal-page-content__body ol {
padding-left: 24px;
}
.legal-page-content__body ul {
list-style: disc;
}
.legal-page-content__body ol {
list-style: decimal;
}
.legal-page-content__body li + li {
margin-top: var(--space-8);
}
.legal-page-content__body a {
color: var(--text-accent);
}
.legal-page-content__body strong {
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
@media (max-width: 1199px) {
.legal-page-hero {
padding-block: var(--space-40) var(--space-48);
}
.legal-page-content {
padding-block: var(--space-64);
}
}
@media (max-width: 767px) {
.legal-page-hero {
padding-block: var(--space-40) var(--space-32);
}
.legal-page-content {
padding-block: var(--space-48);
}
}
.footer {
padding-top: var(--space-96);
padding-bottom: var(--space-48);
background-color: var(--background-dark);
}
.footer__inner {
display: flex;
flex-direction: column;
gap: var(--space-56);
}
.footer__columns {
display: flex;
gap: var(--space-80);
}
.footer__brand {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: var(--space-20);
width: 440px;
}
.footer__logo {
display: block;
line-height: 0;
}
.footer__logo-image {
display: block;
width: 186px;
height: 31px;
}
.footer__description {
color: var(--text-inverse);
font-size: var(--font-size-16);
line-height: 1.75;
font-weight: var(--font-weight-regular);
opacity: 0.7;
}
.footer__nav {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
gap: 18px;
}
.footer__nav-title {
color: var(--text-inverse);
font-size: var(--font-size-12);
line-height: 1.5;
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
opacity: 0.7;
}
.footer__nav-list {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.footer__divider {
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
}
.footer__copyright,
.footer__disclaimer {
color: var(--text-inverse);
font-size: var(--font-size-14);
line-height: 1.5714;
font-weight: var(--font-weight-regular);
opacity: 0.7;
}
.footer__legal {
display: flex;
align-items: center;
gap: var(--space-24);
}
.footer__legal-link {
color: #767a80;
transition: color var(--transition-fast) var(--easing-out);
}
.footer__legal-link:hover {
color: var(--text-inverse);
}
@media (max-width: 1199px) {
.footer {
padding-top: var(--space-64);
}
.footer__columns {
flex-wrap: wrap;
gap: var(--space-40);
}
.footer__brand {
width: 100%;
}
.footer__nav {
flex: 1;
}
.footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
}
.footer__legal {
flex-wrap: wrap;
gap: var(--space-8) var(--space-16);
}
}
@media (max-width: 767px) {
.footer__inner {
gap: var(--space-40);
}
.footer__columns {
flex-direction: column;
gap: var(--space-32);
}
.footer__nav {
width: 100%;
}
}
.hero {
position: relative;
display: flex;
align-items: center;
min-height: 720px;
overflow: hidden;
background-color: var(--background-dark);
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__bg-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.hero__bg-video {
display: none;
}
}
.hero__media {
position: absolute;
z-index: 1;
top: 50%;
height: auto;
transform: translateY(-50%);
}
.hero__media--left {
left: 0;
width: clamp(175px, 25vw, 649px);
}
.hero__media--right {
right: 0;
width: clamp(163px, 22.5vw, 600px);
}
.hero__container {
position: relative;
z-index: 2;
width: 100%;
}
.hero__content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
max-width: 950px;
margin-inline: auto;
padding-block: var(--space-96);
text-align: center;
}
.hero__eyebrow {
color: var(--text-accent);
font-size: var(--font-size-20);
line-height: 1.4667;
font-weight: var(--font-weight-medium);
}
.hero__title {
color: var(--text-inverse);
font-size: clamp(28px, 2.9vw, 42px);
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
}
.hero__description {
color: #f6f7f8;
font-size: var(--font-size-18);
line-height: 1.6;
font-weight: var(--font-weight-medium);
max-width: 700px;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-16);
margin-top: var(--space-16);
}
.hero__cta {
height: 56px;
}
@media (max-width: 1199px) {
.hero {
min-height: auto;
}
.hero__media {
opacity: 0.7;
}
.hero__content {
padding-block: var(--space-64);
}
}
@media (max-width: 767px) {
.hero__content {
padding-block: var(--space-48);
}
.hero__actions {
flex-direction: column;
width: 100%;
}
.hero__cta {
width: 100%;
}
}
.solutions-teaser {
position: relative;
overflow: hidden;
padding-top: 140px;
padding-bottom: var(--space-120);
background-color: var(--background-primary);
}
.solutions-teaser__decor {
position: absolute;
top: 0;
right: 0;
z-index: 0;
width: clamp(200px, 32vw, 689px);
height: auto;
pointer-events: none;
}
.solutions-teaser__header {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-24);
margin-bottom: var(--space-64);
}
.solutions-teaser__intro {
display: flex;
flex-direction: column;
gap: var(--space-20);
max-width: 860px;
}
.solutions-teaser__cta {
flex-shrink: 0;
}
@media (max-width: 1199px) {
.solutions-teaser {
padding-top: var(--space-96);
padding-bottom: var(--space-96);
}
}
@media (max-width: 767px) {
.solutions-teaser {
padding-top: var(--space-64);
padding-bottom: var(--space-64);
}
.solutions-teaser__header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
margin-bottom: var(--space-32);
}
.solutions-teaser__decor {
display: none;
}
}
.ecosystem {
position: relative;
overflow: hidden;
padding-top: 140px;
padding-bottom: 172px;
background-color: var(--background-secondary);
}
.ecosystem__decor {
position: absolute;
z-index: 0;
height: auto;
pointer-events: none;
}
.ecosystem__decor--left {
top: 0;
left: 0;
width: clamp(140px, 19vw, 364px);
}
.ecosystem__decor--right {
right: -30px;
bottom: -30px;
width: clamp(100px, 14vw, 280px);
}
.ecosystem__header {
position: relative;
z-index: 1;
max-width: 880px;
margin-inline: auto;
margin-bottom: var(--space-64);
text-align: center;
}
.ecosystem__description {
margin-top: var(--space-24);
}
.ecosystem__list {
position: relative;
z-index: 1;
display: flex;
margin: 0 0 var(--space-64);
padding: 0;
list-style: none;
}
.ecosystem__item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 28px;
padding-inline: var(--space-24);
text-align: center;
border-left: 1px solid #e3e7ec;
}
.ecosystem__item:first-child {
border-left: none;
}
.ecosystem__icon {
width: 112px;
height: 112px;
}
.ecosystem__item-body {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.ecosystem__cta-wrap {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.ecosystem {
padding-top: var(--space-96);
padding-bottom: var(--space-96);
}
.ecosystem__list {
flex-wrap: wrap;
row-gap: var(--space-48);
}
.ecosystem__item {
flex: 0 0 50%;
border-left: none;
}
}
@media (max-width: 767px) {
.ecosystem {
padding-top: var(--space-64);
padding-bottom: var(--space-64);
}
.ecosystem__header {
margin-bottom: var(--space-48);
}
.ecosystem__list {
flex-direction: column;
row-gap: var(--space-32);
}
.ecosystem__item {
flex-basis: auto;
}
.ecosystem__decor--left {
top: -20px;
left: -20px;
width: 150px;
}
.ecosystem__decor--right {
width: 125px;
}
}
.task-picker {
position: relative;
overflow: hidden;
padding-block: 140px;
background-color: var(--background-dark);
color: var(--text-inverse);
}
.task-picker::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
to bottom,
rgba(5, 13, 24, 0.41) 0%,
rgba(5, 13, 24, 0.48) 45%,
rgba(5, 13, 24, 0.55) 100%
);
pointer-events: none;
}
.task-picker__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.task-picker__container {
position: relative;
z-index: 2;
}
.task-picker__header {
max-width: 820px;
margin-inline: auto;
margin-bottom: var(--space-48);
text-align: center;
}
.task-picker__description {
margin-top: var(--space-12);
}
.task-picker__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-16) var(--space-24);
margin: 0 0 var(--space-48);
padding: 0;
list-style: none;
}
.task-picker__cta-wrap {
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.task-picker {
padding-block: var(--space-96);
}
.task-card {
padding: var(--space-16);
}
}
@media (max-width: 767px) {
.task-picker {
padding-block: var(--space-64);
}
.task-picker__header {
margin-bottom: var(--space-32);
}
.task-picker__list {
grid-template-columns: 1fr;
gap: var(--space-12);
margin-bottom: var(--space-32);
}
.task-picker__cta {
width: 100%;
}
}
.pillars {
padding-block: 140px;
background-color: var(--background-primary);
}
.pillars__header {
max-width: 880px;
margin-inline: auto;
margin-bottom: var(--space-64);
text-align: center;
}
.pillars__description {
margin-top: var(--space-20);
}
.pillars__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-24);
margin: 0 0 var(--space-64);
padding: 0;
list-style: none;
}
.pillars__card {
position: relative;
overflow: hidden;
aspect-ratio: 342 / 440;
border-radius: var(--radius-card);
background-color: var(--surface-dark);
}
.pillars__card::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to bottom,
rgba(5, 13, 24, 0) 0%,
rgba(5, 13, 24, 0.25) 45%,
rgba(5, 13, 24, 0.85) 100%
);
pointer-events: none;
}
.pillars__card-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pillars__card-title {
position: absolute;
z-index: 1;
right: 28px;
bottom: 28px;
left: 28px;
color: var(--text-inverse);
}
.pillars__cta-wrap {
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.pillars {
padding-block: var(--space-96);
}
.pillars__list {
grid-template-columns: repeat(2, 1fr);
row-gap: var(--space-24);
}
}
@media (max-width: 767px) {
.pillars {
padding-block: var(--space-64);
}
.pillars__header {
margin-bottom: var(--space-32);
}
.pillars__list {
grid-template-columns: 1fr;
margin-bottom: var(--space-32);
}
}
.storage-teaser {
position: relative;
overflow: hidden;
padding-block: 140px;
background-color: var(--background-dark);
}
.storage-teaser__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
}
.storage-teaser__container {
position: relative;
z-index: 1;
}
.storage-teaser__split {
display: grid;
grid-template-columns: minmax(0, 560px) 1fr;
align-items: center;
gap: var(--space-80);
}
.storage-teaser__copy {
display: flex;
flex-direction: column;
gap: var(--space-32);
}
.storage-teaser__title {
color: var(--text-accent);
}
.storage-teaser__title-white {
color: var(--text-inverse);
}
.storage-teaser__cta {
align-self: flex-start;
}
.storage-teaser__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-16) var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.storage-teaser__card {
background-color: rgba(8, 21, 35, 0.6);
}
@media (max-width: 1199px) {
.storage-teaser {
padding-block: var(--space-96);
}
.storage-teaser__split {
grid-template-columns: 1fr;
gap: var(--space-48);
}
}
@media (max-width: 767px) {
.storage-teaser {
padding-block: var(--space-64);
}
.storage-teaser__split {
gap: var(--space-32);
}
.storage-teaser__list {
grid-template-columns: 1fr;
}
.storage-teaser__cta {
width: 100%;
}
}
.backup-power {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--background-primary);
}
.backup-power__copy {
display: flex;
flex-direction: column;
gap: var(--space-32);
padding-block: 100px;
padding-right: var(--space-64);
padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}
.backup-power__steps {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.backup-power__steps::before {
content: "";
position: absolute;
top: 14px;
left: 13.5px;
width: 1px;
height: 156px;
background-color: var(--border-default);
}
.backup-power__step {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-20);
}
.backup-power__step-marker {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: var(--background-primary);
color: var(--text-accent);
font-size: var(--font-size-14);
line-height: var(--line-height-20);
font-weight: var(--font-weight-medium);
}
.backup-power__step-text {
flex: 1;
}
.backup-power__cta {
align-self: flex-start;
}
.backup-power__image {
width: 100%;
height: 100%;
min-width: 0;
object-fit: cover;
}
@media (max-width: 1024px) {
.backup-power {
grid-template-columns: 1fr;
}
.backup-power__copy {
padding: var(--space-64) var(--container-gutter);
}
.backup-power__image {
order: -1;
height: 420px;
}
}
@media (max-width: 767px) {
.backup-power__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
.backup-power__cta {
width: 100%;
}
.backup-power__image {
height: 320px;
}
}
.solis-cloud {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--background-secondary);
}
.solis-cloud__image {
width: 100%;
height: 100%;
min-width: 0;
object-fit: cover;
}
.solis-cloud__copy {
display: flex;
flex-direction: column;
gap: var(--space-32);
padding-block: 100px;
padding-left: var(--space-64);
padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}
.solis-cloud__capabilities {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.solis-cloud__capability {
display: flex;
align-items: center;
gap: var(--space-12);
}
.solis-cloud__capability-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--text-accent);
}
@media (max-width: 1024px) {
.solis-cloud {
grid-template-columns: 1fr;
}
.solis-cloud__copy {
padding: var(--space-64) var(--container-gutter);
}
.solis-cloud__image {
height: 420px;
}
}
@media (max-width: 767px) {
.solis-cloud__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
.solis-cloud__image {
height: 320px;
}
}
.projects-showcase {
padding-block: 140px;
background-color: var(--background-primary);
}
.projects-showcase__header {
max-width: 900px;
margin-inline: auto;
margin-bottom: var(--space-64);
text-align: center;
}
.projects-showcase__description {
margin-top: var(--space-20);
}
.projects-showcase__list {
display: flex;
gap: var(--space-24);
margin: 0 0 var(--space-64);
padding: 0;
list-style: none;
}
.projects-showcase__list .project-card {
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
background-color: var(--background-primary);
}
.projects-showcase__list .project-card__image {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
}
.projects-showcase__list .project-card__title {
padding: var(--space-24);
}
.projects-showcase__cta-wrap {
display: flex;
justify-content: center;
}
@media (max-width: 1199px) {
.projects-showcase {
padding-block: var(--space-96);
}
.projects-showcase__list {
overflow-x: auto;
margin-inline: calc(var(--container-gutter) * -1);
padding-inline: var(--container-gutter);
padding-bottom: var(--space-16);
}
.projects-showcase__list .project-card {
flex: 0 0 280px;
}
}
@media (max-width: 767px) {
.projects-showcase {
padding-block: var(--space-64);
}
.projects-showcase__header {
margin-bottom: var(--space-48);
}
.projects-showcase__list {
margin-bottom: var(--space-32);
}
.projects-showcase__cta {
width: 100%;
}
}
.final-cta-section {
padding-block: 50px;
padding-inline: var(--container-gutter);
background-color: var(--background-primary);
}
.final-cta {
position: relative;
overflow: hidden;
max-width: 1340px;
margin-inline: auto;
border-radius: 26px;
background-color: var(--surface-dark);
}
.final-cta__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 35%;
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
width: 59.5%;
background-image: linear-gradient(to right, #e26f27 0%, #e67935 39%, rgba(249, 176, 132, 0) 100%);
pointer-events: none;
}
.final-cta__decor {
position: absolute;
z-index: 1;
height: auto;
pointer-events: none;
}
.final-cta__decor--left {
top: 0;
left: 0;
width: clamp(120px, 19vw, 364px);
}
.final-cta__decor--right {
bottom: 0;
right: 0;
width: clamp(120px, 19vw, 364px);
}
.final-cta__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-40);
max-width: 517px;
margin: 117px 0 117px 150px;
}
.final-cta__header {
display: flex;
flex-direction: column;
gap: var(--space-20);
width: 100%;
}
.final-cta__title {
color: var(--text-inverse);
}
.final-cta__description {
color: var(--text-inverse);
font-size: var(--font-size-18);
line-height: 34px;
}
.final-cta__cta {
height: 56px;
}
@media (max-width: 1199px) {
.final-cta__content {
max-width: 600px;
margin: var(--space-96) 0 var(--space-96) var(--space-48);
}
}
@media (max-width: 767px) {
.final-cta-section {
padding-block: var(--space-32);
}
.final-cta::before {
width: 100%;
}
.final-cta__content {
max-width: none;
gap: var(--space-24);
margin: 0;
padding: var(--space-64) var(--space-24);
}
.final-cta__cta {
width: 100%;
}
}
.catalog-hero {
position: relative;
overflow: hidden;
background-color: var(--surface-dark);
}
.catalog-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.catalog-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(0, 7, 17, 1) 0%,
rgba(0, 7, 17, 0.9) 20%,
rgba(0, 7, 17, 0.65) 40%,
rgba(0, 7, 17, 0.35) 60%,
rgba(0, 7, 17, 0.1) 80%,
rgba(0, 7, 17, 0) 100%
);
pointer-events: none;
}
.catalog-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-block: 30px 80px;
}
.catalog-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.catalog-hero__content {
display: flex;
flex-direction: column;
gap: 28px;
}
.catalog-hero__heading {
display: flex;
flex-direction: column;
gap: 18px;
}
.catalog-hero__overline {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-accent-inverse);
}
.catalog-hero__title {
max-width: 720px;
color: var(--text-inverse);
}
.catalog-hero__description {
max-width: 760px;
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
@media (max-width: 1199px) {
.catalog-hero__container {
padding-block: var(--space-64) var(--space-48);
}
.catalog-hero__title {
max-width: 560px;
}
.catalog-hero__description {
max-width: 560px;
}
.catalog-hero__photo {
object-position: right center;
}
}
@media (max-width: 767px) {
.catalog-hero__container {
padding-block: var(--space-48) var(--space-32);
}
.catalog-hero__content {
gap: var(--space-20);
}
.catalog-hero__title,
.catalog-hero__description {
max-width: none;
}
}
.catalog-categories {
padding-block: 120px;
background-color: var(--background-primary);
}
.catalog-categories__groups {
display: flex;
flex-direction: column;
gap: 100px;
}
.catalog-category-group {
display: flex;
flex-direction: column;
gap: 36px;
}
.catalog-category-group__header {
display: flex;
align-items: center;
gap: 28px;
}
.catalog-category-group__title {
flex-shrink: 0;
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.catalog-category-group__rule {
flex: 1 0 0;
height: 1px;
background-color: var(--border-subtle);
}
.catalog-category-group__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-20);
}
@media (max-width: 1199px) {
.catalog-categories {
padding-block: var(--space-96);
}
.catalog-categories__groups {
gap: var(--space-64);
}
.catalog-category-group__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.catalog-categories {
padding-block: var(--space-64);
}
.catalog-category-group {
gap: var(--space-24);
}
.catalog-categories__groups {
gap: var(--space-48);
}
}
.produkt-hero {
position: relative;
overflow: hidden;
background-color: var(--surface-dark-elevated);
background-image: var(--hero-bg, none);
background-size: cover;
background-position: left center;
}
.produkt-hero__container {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-32);
}
.produkt-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 26px;
max-width: 780px;
padding-block: var(--space-40) 96px;
}
.produkt-hero__title {
max-width: 760px;
color: var(--text-inverse);
}
.produkt-hero__description {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-inverse);
opacity: 0.7;
}
.produkt-hero__product {
position: relative;
flex-shrink: 0;
width: clamp(320px, 34vw, 478px);
height: auto;
pointer-events: none;
}
@media (max-width: 1199px) {
.produkt-hero__content {
max-width: 480px;
padding-bottom: var(--space-64);
}
}
@media (max-width: 767px) {
.produkt-hero__container {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.produkt-hero__content {
max-width: none;
padding-block: var(--space-32) 0;
gap: var(--space-16);
}
.produkt-hero__product {
align-self: center;
width: 78%;
max-width: 340px;
margin-top: var(--space-24);
}
}
.attention {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--background-secondary);
}
.attention__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-32);
padding-block: 100px;
padding-right: var(--space-64);
padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}
.attention__title {
color: var(--text-primary);
}
.attention__checklist {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
.attention__checklist-item {
display: flex;
align-items: center;
gap: 14px;
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-primary);
}
.attention__check-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--text-accent);
}
.attention__photo-frame {
position: relative;
min-width: 0;
overflow: hidden;
box-shadow: 0 24px 56px -16px rgba(23, 33, 41, 0.18);
}
.attention__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.attention {
grid-template-columns: 1fr;
}
.attention__copy {
padding: var(--space-64) var(--container-gutter);
}
.attention__photo-frame {
order: -1;
height: 420px;
}
}
@media (max-width: 767px) {
.attention__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
.attention__cta {
width: 100%;
}
.attention__photo-frame {
height: 320px;
}
}
.series-picker {
padding-block: 80px;
background-color: var(--background-primary);
}
.series-picker__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-32);
padding: 40px 60px;
border-radius: var(--radius-card-large);
background-color: #eceff2;
}
.series-picker__head {
display: flex;
flex-direction: column;
gap: var(--space-20);
max-width: 880px;
}
.series-picker__title {
color: var(--text-primary);
}
.series-picker__description {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.series-picker__cta {
flex-shrink: 0;
}
@media (max-width: 1199px) {
.series-picker {
padding-block: var(--space-64);
}
.series-picker__card {
padding: var(--space-32);
}
}
@media (max-width: 767px) {
.series-picker {
padding-block: var(--space-48);
}
.series-picker__card {
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
padding: var(--space-24);
}
.series-picker__cta {
width: 100%;
}
}
.suggested-products {
padding-block: 40px 120px;
background-color: var(--background-primary);
}
.suggested-products__container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-56);
}
.suggested-products__title {
align-self: flex-start;
color: var(--text-primary);
}
.suggested-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-32);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1199px) {
.suggested-products {
padding-block: var(--space-64) var(--space-96);
}
.suggested-products__container {
gap: var(--space-40);
}
.suggested-products__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.suggested-products {
padding-block: var(--space-48) var(--space-64);
}
.suggested-products__grid {
grid-template-columns: 1fr;
gap: var(--space-20);
}
.suggested-products__cta {
width: 100%;
}
}
.equipment-cards {
padding-block: 80px;
background-color: var(--background-primary);
}
.equipment-cards__list {
display: flex;
flex-direction: column;
gap: var(--space-32);
margin-block: 0;
padding-block: 0;
list-style: none;
}
.equipment-card {
display: flex;
align-items: center;
gap: var(--space-56);
padding: var(--space-40);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
}
.equipment-card__photo {
flex-shrink: 0;
width: 480px;
height: 320px;
border-radius: var(--radius-card);
object-fit: cover;
}
.equipment-card__copy {
display: flex;
flex: 1 0 0;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
}
.equipment-card__title {
color: var(--text-primary);
}
.equipment-card__description {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
@media (max-width: 1199px) {
.equipment-cards {
padding-block: var(--space-64);
}
.equipment-card {
gap: var(--space-32);
padding: var(--space-32);
}
.equipment-card__photo {
width: 360px;
height: 240px;
}
}
@media (max-width: 1024px) {
.equipment-card {
flex-direction: column;
align-items: stretch;
}
.equipment-card__photo {
width: 100%;
height: auto;
aspect-ratio: 480 / 320;
}
}
@media (max-width: 767px) {
.equipment-cards {
padding-block: var(--space-48);
}
.equipment-cards__list {
gap: var(--space-24);
}
.equipment-card {
padding: var(--space-24);
}
}
.use-cases {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--background-secondary);
}
.use-cases__photo-frame {
position: relative;
min-width: 0;
overflow: hidden;
box-shadow: 0 24px 56px -16px rgba(23, 33, 41, 0.18);
}
.use-cases__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.use-cases__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-32);
padding-block: 100px;
padding-left: var(--space-64);
padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}
.use-cases__title {
color: var(--text-primary);
}
.use-cases__description {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-primary);
}
@media (max-width: 1024px) {
.use-cases {
grid-template-columns: 1fr;
}
.use-cases__copy {
padding: var(--space-64) var(--container-gutter);
}
.use-cases__photo-frame {
height: 420px;
}
}
@media (max-width: 767px) {
.use-cases__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
.use-cases__cta {
width: 100%;
}
.use-cases__photo-frame {
height: 320px;
}
}
.katalog-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding-block: 150px 50px;
background-color: var(--surface-dark);
}
.katalog-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.katalog-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.katalog-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.katalog-hero__title {
color: var(--text-inverse);
}
@media (max-width: 767px) {
.katalog-hero {
padding-block: var(--space-64) var(--space-32);
}
}
.katalog-scope {
padding-block: var(--space-40);
background-color: var(--background-primary);
}
.katalog-scope__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
}
.katalog-scope__label {
flex-shrink: 0;
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-accent);
}
.katalog-scope__chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-16);
}
.katalog-scope__chip {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding-inline: var(--space-24);
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: var(--background-primary);
color: var(--text-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
cursor: pointer;
}
.katalog-scope__chip--active {
border-color: transparent;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
@media (max-width: 1199px) {
.katalog-scope__row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
}
.katalog-scope__chips {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
width: 100%;
padding-bottom: var(--space-4);
}
.katalog-scope__chip {
flex-shrink: 0;
}
}
@media (max-width: 767px) {
.katalog-scope {
padding-block: var(--space-32);
}
}
.katalog-catalog {
padding-block: var(--space-48) 140px;
background-color: var(--background-secondary);
}
.katalog-catalog__layout {
display: grid;
grid-template-columns: clamp(220px, 28vw, 320px) 1fr;
align-items: start;
gap: var(--space-40);
}
.katalog-sidebar {
position: sticky;
top: 98px;
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.katalog-categories,
.katalog-filters {
display: flex;
flex-direction: column;
width: 100%;
padding: var(--space-24);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
}
.katalog-categories {
gap: var(--space-16);
}
.katalog-categories__title,
.katalog-filters__title {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.katalog-categories__group {
display: flex;
flex-direction: column;
gap: var(--space-12);
width: 100%;
}
.katalog-categories__group-label,
.katalog-filters__group-title {
width: 100%;
}
.katalog-categories__group-label {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-disabled);
}
.katalog-categories__nested {
display: flex;
flex-direction: column;
gap: var(--space-12);
width: 100%;
padding-left: 26px;
}
.katalog-categories__divider,
.katalog-filters__divider {
height: 1px;
width: 100%;
background-color: var(--border-subtle);
}
.katalog-option {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
cursor: pointer;
color: inherit;
text-decoration: none;
}
.katalog-option__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.katalog-option__box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1.5px solid var(--border-default);
border-radius: 5px;
}
.katalog-option__check {
display: none;
width: 12px;
height: 12px;
color: var(--text-inverse);
}
.katalog-option:has(.katalog-option__input:checked) .katalog-option__box,
.katalog-option--checked .katalog-option__box {
border-color: transparent;
background-color: var(--brand-primary);
}
.katalog-option:has(.katalog-option__input:checked) .katalog-option__check,
.katalog-option--checked .katalog-option__check {
display: block;
}
.katalog-option:hover:not(.katalog-option--disabled) .katalog-option__box {
border-color: var(--border-accent);
}
.katalog-option:hover:not(.katalog-option--disabled) .katalog-option__label {
color: var(--text-primary);
}
.katalog-option:has(.katalog-option__input:focus-visible) .katalog-option__box,
.katalog-option:focus-visible .katalog-option__box {
outline: 2px solid var(--border-accent);
outline-offset: 2px;
}
.katalog-option:focus-visible {
outline: none;
}
.katalog-option__label {
flex: 1 0 0;
min-width: 0;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.katalog-option:has(.katalog-option__input:checked) .katalog-option__label,
.katalog-option--checked .katalog-option__label {
color: var(--text-primary);
}
.katalog-option__count {
flex-shrink: 0;
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-disabled);
}
.katalog-option:has(.katalog-option__input:disabled),
.katalog-option--disabled {
cursor: not-allowed;
}
.katalog-option:has(.katalog-option__input:disabled) .katalog-option__label,
.katalog-option:has(.katalog-option__input:disabled) .katalog-option__count,
.katalog-option--disabled .katalog-option__label,
.katalog-option--disabled .katalog-option__count {
opacity: 0.4;
}
.katalog-filters {
gap: var(--space-20);
}
.katalog-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.katalog-filters__reset {
padding: 0;
border: none;
background: none;
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-accent);
cursor: pointer;
}
.katalog-filters__group {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.katalog-filters__group-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.katalog-filters__group-title {
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.katalog-filters__chevron {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--text-secondary);
transform: rotate(180deg);
transition: transform var(--transition-base) var(--easing-out);
}
.katalog-filters__group--collapsed .katalog-filters__chevron {
transform: rotate(0deg);
}
.katalog-filters__options {
display: flex;
flex-direction: column;
gap: var(--space-12);
width: 100%;
}
.katalog-filters__group--collapsed .katalog-filters__options,
.katalog-filters__group--collapsed .katalog-range {
display: none;
}
.katalog-range {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding-top: 6px;
}
.katalog-range__track {
position: relative;
height: 18px;
}
.katalog-range__bar {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
border-radius: 2px;
background-color: var(--border-default);
transform: translateY(-50%);
}
.katalog-range__active {
position: absolute;
top: 50%;
height: 4px;
border-radius: 2px;
background-color: var(--brand-primary);
transform: translateY(-50%);
left: calc((var(--range-from, 0) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
right: calc(100% - (var(--range-to, 100) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}
.katalog-range__handle {
position: absolute;
top: 50%;
width: 16px;
height: 16px;
padding: 0;
border: 2px solid var(--brand-primary);
border-radius: var(--radius-full);
background-color: var(--background-primary);
cursor: grab;
transform: translate(-50%, -50%);
}
.katalog-range__handle:active {
cursor: grabbing;
}
.katalog-range__handle[data-range-handle="from"] {
left: calc((var(--range-from, 0) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}
.katalog-range__handle[data-range-handle="to"] {
left: calc((var(--range-to, 100) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}
.katalog-range__labels {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
}
.katalog-content {
position: sticky;
top: 98px;
display: flex;
flex-direction: column;
gap: var(--space-24);
min-width: 0;
}
.katalog-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
}
.katalog-toolbar__found {
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.katalog-toolbar__found-value {
color: var(--text-primary);
}
.katalog-sort {
position: relative;
}
.katalog-sort__trigger {
display: flex;
align-items: center;
gap: 10px;
height: 44px;
padding-inline: var(--space-16);
border: 1px solid var(--border-default);
border-radius: var(--radius-button);
background-color: var(--background-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
cursor: pointer;
}
.katalog-sort__prefix {
color: var(--text-secondary);
}
.katalog-sort__value {
color: var(--text-primary);
white-space: nowrap;
}
.katalog-sort__panel {
position: absolute;
top: calc(100% + var(--space-8));
right: 0;
z-index: 5;
display: flex;
flex-direction: column;
min-width: 240px;
margin: 0;
padding: var(--space-8);
list-style: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-button);
background-color: var(--background-primary);
box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}
.katalog-sort__panel[hidden] {
display: none;
}
.katalog-sort__option {
width: 100%;
padding: var(--space-8) var(--space-12);
border: none;
border-radius: 8px;
background: none;
text-align: left;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-primary);
cursor: pointer;
}
.katalog-sort__option:hover {
background-color: var(--background-secondary);
}
.katalog-applied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.katalog-applied[hidden] {
display: none;
}
.katalog-applied__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.katalog-applied__chip {
display: flex;
align-items: center;
gap: var(--space-8);
height: 32px;
padding: 0 12px 0 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background-color: var(--background-secondary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
cursor: pointer;
}
.katalog-applied__clear {
padding: 0;
border: none;
background: none;
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
text-decoration: underline;
cursor: pointer;
}
.katalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.katalog-grid__item {
display: flex;
}
.katalog-grid__item[hidden] {
display: none;
}
.catalog-product-card {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
transition:
border-color var(--transition-base) var(--easing-out),
box-shadow var(--transition-base) var(--easing-out);
}
.catalog-product-card:hover {
border-color: var(--border-accent);
box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}
.catalog-product-card__media {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
height: 200px;
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, #f7f9fc 100%);
text-decoration: none;
}
.catalog-product-card__image {
display: block;
width: 240px;
height: 168px;
object-fit: contain;
}
.catalog-product-card__body {
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: var(--space-20);
padding: var(--space-24);
}
.catalog-product-card__head {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.catalog-product-card__category {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-accent);
}
.catalog-product-card__title {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
text-decoration: none;
}
.catalog-product-card__specs {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
}
.catalog-product-card__spec-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
}
.catalog-product-card__spec-label {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
}
.catalog-product-card__spec-value {
margin: 0;
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-primary);
text-align: right;
}
.catalog-product-card__mods {
display: flex;
flex-direction: column;
gap: 10px;
}
.catalog-product-card__mods-label {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
}
.catalog-product-card__mod-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.catalog-product-card__mod-chip {
height: 30px;
padding-inline: var(--space-12);
border: 1px solid var(--border-default);
border-radius: 8px;
background-color: var(--background-primary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
cursor: pointer;
}
.catalog-product-card__mod-chip--active {
border-color: transparent;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.catalog-product-card__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
min-height: 26px;
}
.catalog-product-card__badge {
display: flex;
align-items: center;
height: 26px;
padding-inline: 10px;
border-radius: 6px;
background-color: var(--background-secondary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
}
.catalog-product-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
margin-top: auto;
padding-inline: var(--space-16);
border: 1px solid var(--border-accent);
border-radius: var(--radius-button);
font-size: var(--font-size-14);
line-height: var(--line-height-20);
font-weight: var(--font-weight-medium);
color: var(--text-accent);
text-decoration: none;
text-align: center;
}
.catalog-product-card:hover .catalog-product-card__cta {
background-color: var(--background-accent-soft);
}
.katalog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
}
.katalog-pagination[hidden] {
display: none;
}
.katalog-pagination__item,
.katalog-pagination__next {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
min-width: 44px;
padding-inline: var(--space-16);
border: 1px solid var(--border-default);
border-radius: var(--radius-button);
background-color: var(--background-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-primary);
cursor: pointer;
}
.katalog-pagination__item {
padding-inline: 0;
}
.katalog-pagination__item--active {
border-color: transparent;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.katalog-pagination__next--disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 1199px) {
.katalog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 598px) {
.katalog-grid {
grid-template-columns: 1fr;
}
}
.katalog-mobile-filters-trigger {
display: none;
}
.katalog-sidebar__mobile-head,
.katalog-sidebar__mobile-actions {
display: none;
}
@media (max-width: 767px) {
.katalog-catalog {
padding-block: var(--space-32) var(--space-64);
}
.katalog-catalog__layout {
grid-template-columns: 1fr;
}
.katalog-sidebar,
.katalog-content {
position: static;
}
.katalog-mobile-filters-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding-inline: var(--space-20);
border: 1px solid var(--border-default);
border-radius: var(--radius-button);
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
cursor: pointer;
}
.katalog-sidebar {
position: fixed;
inset: 78px 0 0 0;
z-index: var(--z-modal);
flex-direction: column;
flex-wrap: nowrap;
gap: var(--space-24);
width: auto;
padding: var(--space-24) var(--container-gutter) 0;
overflow-y: auto;
background-color: var(--background-primary);
visibility: hidden;
clip-path: inset(0 100% 0 0);
transition:
clip-path 380ms var(--easing-out),
visibility 0s linear 380ms;
pointer-events: none;
}
.katalog-sidebar--open {
visibility: visible;
clip-path: inset(0 0% 0 0);
transition:
clip-path 380ms var(--easing-out),
visibility 0s linear 0s;
pointer-events: auto;
}
.katalog-sidebar__mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.katalog-sidebar__mobile-title {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.katalog-sidebar__mobile-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: var(--background-secondary);
color: var(--text-primary);
cursor: pointer;
}
.katalog-categories,
.katalog-filters {
flex-shrink: 0;
}
.katalog-sidebar__mobile-actions {
position: sticky;
bottom: 0;
display: flex;
flex-shrink: 0;
gap: var(--space-12);
margin-top: auto;
padding-block: var(--space-16);
background-color: var(--background-primary);
border-top: 1px solid var(--border-subtle);
}
.katalog-sidebar__mobile-clear,
.katalog-sidebar__mobile-apply {
flex: 1 0 0;
height: 48px;
border-radius: var(--radius-button);
font-family: var(--font-family-primary);
font-size: var(--font-size-15);
font-weight: var(--font-weight-medium);
cursor: pointer;
}
.katalog-sidebar__mobile-clear {
border: 1px solid var(--border-default);
background-color: var(--background-primary);
color: var(--text-primary);
}
.katalog-sidebar__mobile-apply {
border: none;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.katalog-toolbar {
flex-wrap: wrap;
align-items: center;
}
.katalog-toolbar__found {
flex: 1 0 100%;
}
.katalog-mobile-filters-trigger {
flex-shrink: 0;
}
.katalog-sort {
flex: 0 1 auto;
max-width: 160px;
min-width: 0;
}
.katalog-sort__trigger {
width: 100%;
}
.katalog-sort__prefix {
display: none;
}
.katalog-sort__value {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.katalog-sort__panel {
left: 0;
right: auto;
min-width: 0;
width: 100%;
}
}
.produkt-kartka-hero {
padding-block: 30px 100px;
background-color: var(--background-primary);
background-image: url("../assets/img/produkty/produkt-kartka-hero-bg.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% 100%;
}
.produkt-kartka-hero__breadcrumbs {
margin-bottom: var(--space-48);
}
.produkt-kartka-hero__layout {
display: flex;
align-items: center;
gap: var(--space-64);
}
.produkt-kartka-hero__copy {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--space-32);
}
.produkt-kartka-hero__head {
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.produkt-kartka-hero__category {
font-family: var(--font-family-primary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-accent);
}
.produkt-kartka-hero__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-48);
line-height: var(--line-height-56);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.48px;
color: var(--text-primary);
}
.produkt-kartka-hero__description {
font-family: var(--font-family-primary);
font-size: var(--font-size-18);
line-height: var(--line-height-30);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
}
.produkt-kartka-hero__mods {
display: flex;
flex-direction: column;
gap: 14px;
}
.produkt-kartka-hero__mods-label {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-kartka-hero__mod-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.produkt-kartka-hero__mod-chip {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding-inline: var(--space-12);
border: 1px solid var(--border-default);
border-radius: 8px;
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
cursor: pointer;
}
.produkt-kartka-hero__mod-chip--active {
border-color: transparent;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.produkt-kartka-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-16);
}
@media (max-width: 1199px) {
.produkt-kartka-hero {
padding-block: 30px 64px;
}
}
@media (max-width: 1023px) {
.produkt-kartka-hero__layout {
flex-direction: column;
align-items: stretch;
}
.produkt-gallery {
order: -1;
}
}
@media (max-width: 767px) {
.produkt-kartka-hero {
padding-block: var(--space-32) var(--space-48);
}
.produkt-kartka-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.produkt-kartka-hero__title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
}
.produkt-kartka-hero__actions {
flex-direction: column;
align-items: stretch;
}
.produkt-kartka-hero__action {
width: 100%;
}
}
.produkt-tabs {
background-color: var(--background-primary);
}
.produkt-tabs__bar {
position: sticky;
top: 78px;
z-index: 10;
border-bottom: 1px solid var(--border-subtle);
background-color: var(--background-primary);
}
.produkt-tabs__bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
height: 76px;
}
.produkt-tabs__list {
display: flex;
gap: var(--space-8);
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.produkt-tabs__list-item {
display: flex;
flex-shrink: 0;
height: 100%;
}
.produkt-tabs__tab {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 100%;
padding-inline: var(--space-20);
border: none;
border-bottom: 3px solid transparent;
background: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
}
.produkt-tabs__tab--active {
border-bottom-color: var(--brand-primary);
color: var(--text-primary);
}
.produkt-tabs__meta {
flex-shrink: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-tabs__panel {
padding-block: var(--space-80) var(--space-120);
opacity: 1;
transition: opacity 180ms var(--easing-out);
}
.produkt-tabs__panel[hidden] {
display: none;
}
.produkt-tabs__panel--leaving {
opacity: 0;
}
.produkt-tabs__panel-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-40);
line-height: var(--line-height-48);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.4px;
color: var(--text-primary);
}
.produkt-tabs__panel-subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.produkt-tabs__description {
display: flex;
align-items: flex-start;
gap: var(--space-64);
}
.produkt-tabs__description-copy {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--space-28);
}
.produkt-tabs__description-text {
display: flex;
flex-direction: column;
gap: var(--space-16);
font-family: var(--font-family-primary);
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.produkt-tabs__description-photo {
flex-shrink: 0;
width: 480px;
align-self: stretch;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
overflow: hidden;
}
.produkt-tabs__description-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.produkt-tabs__specs {
display: flex;
flex-direction: column;
gap: var(--space-56);
}
.produkt-tabs__specs-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
}
.produkt-tabs__specs-head-copy {
display: flex;
flex-direction: column;
gap: 18px;
}
.produkt-tabs__specs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.produkt-tabs__spec-card {
display: flex;
flex-direction: column;
gap: var(--space-24);
padding: var(--space-32);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
}
.produkt-tabs__spec-icon {
width: 40px;
height: 40px;
}
.produkt-tabs__spec-text {
display: flex;
flex-direction: column;
gap: var(--space-8);
font-family: var(--font-family-primary);
}
.produkt-tabs__spec-label {
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-tabs__spec-value {
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.produkt-tabs__spec-note {
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-tabs__features {
display: flex;
flex-direction: column;
gap: var(--space-56);
}
.produkt-tabs__features-list {
column-count: 2;
column-gap: var(--space-48);
margin: 0;
padding: 0;
list-style: none;
}
.produkt-tabs__feature-item {
display: flex;
gap: 14px;
margin-bottom: 22px;
break-inside: avoid;
}
.produkt-tabs__feature-icon {
flex-shrink: 0;
width: 20px;
height: 28px;
color: var(--brand-primary);
}
.produkt-tabs__feature-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.produkt-tabs__tech {
display: flex;
flex-direction: column;
gap: var(--space-40);
}
.produkt-tabs__tech-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
}
.produkt-tabs__tech-switcher {
display: flex;
align-items: center;
gap: var(--space-24);
padding: var(--space-16) var(--space-24);
border-radius: 16px;
background-color: var(--background-secondary);
}
.produkt-tabs__tech-switcher-label {
flex-shrink: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-tabs__tech-chips {
display: flex;
flex: 1 1 0;
flex-wrap: wrap;
gap: 10px;
min-width: 0;
}
.produkt-tabs__tech-chip {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding-inline: var(--space-12);
border: 1px solid var(--border-default);
border-radius: 8px;
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-12);
line-height: var(--line-height-18);
color: var(--text-secondary);
cursor: pointer;
}
.produkt-tabs__tech-chip--active {
border-color: transparent;
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.produkt-tabs__tech-sku {
flex-shrink: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-primary);
}
.produkt-tabs__tech-table {
display: flex;
align-items: flex-start;
gap: var(--space-24);
}
.produkt-tabs__tech-column {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--space-24);
}
.produkt-tabs__tech-group {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
overflow: hidden;
}
.produkt-tabs__tech-group-title {
padding: var(--space-20) var(--space-32);
background-color: var(--background-secondary);
font-family: var(--font-family-primary);
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.produkt-tabs__tech-rows {
margin: 0;
}
.produkt-tabs__tech-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-24);
padding: 14px var(--space-32);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
}
.produkt-tabs__tech-row:not(:first-child) {
border-top: 1px solid var(--border-subtle);
}
.produkt-tabs__tech-row[hidden] {
display: none;
}
.produkt-tabs__tech-row.produkt-tabs__tech-row--first {
border-top: 0;
}
.produkt-tabs__tech-label {
color: var(--text-secondary);
}
.produkt-tabs__tech-value {
flex-shrink: 0;
margin: 0;
font-weight: var(--font-weight-medium);
color: var(--text-primary);
text-align: right;
}
@media (max-width: 1199px) {
.produkt-tabs__bar-inner {
justify-content: flex-start;
}
.produkt-tabs__list {
min-width: 0;
overflow-x: auto;
}
.produkt-tabs__meta {
display: none;
}
.produkt-tabs__description-photo {
width: 400px;
}
.produkt-tabs__specs-grid {
grid-template-columns: repeat(2, 1fr);
}
.produkt-tabs__tech-table {
flex-direction: column;
}
}
@media (max-width: 1023px) {
.produkt-tabs__description {
flex-direction: column-reverse;
gap: var(--space-32);
}
.produkt-tabs__description-photo {
width: 100%;
height: 320px;
}
.produkt-tabs__specs-head {
flex-direction: column;
align-items: flex-start;
}
.produkt-tabs__tech-head {
flex-direction: column;
align-items: flex-start;
}
.produkt-tabs__tech-switcher {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.produkt-tabs__panel {
padding-block: var(--space-48) var(--space-80);
}
.produkt-tabs__panel-title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
}
.produkt-tabs__specs-grid {
grid-template-columns: 1fr;
}
.produkt-tabs__features-list {
column-count: 1;
}
.produkt-tabs__tech-row {
flex-direction: column;
gap: var(--space-4);
}
.produkt-tabs__tech-value {
text-align: left;
}
}
.produkt-compatible {
padding-block: var(--space-120);
background-color: var(--background-secondary);
}
.produkt-compatible__container {
display: flex;
flex-direction: column;
gap: var(--space-56);
}
.produkt-compatible__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-32);
}
.produkt-compatible__head-text {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 860px;
}
.produkt-compatible__controls {
display: flex;
flex-shrink: 0;
gap: var(--space-12);
}
.produkt-compatible__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-40);
line-height: var(--line-height-48);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.4px;
color: var(--text-primary);
}
.produkt-compatible__subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.produkt-compatible__slider {
display: flex;
flex-direction: column;
gap: var(--space-56);
width: 100%;
}
.produkt-compatible__slide {
flex: 0 0 336px;
max-width: 336px;
min-width: 0;
}
.produkt-compatible__card {
width: 100%;
}
.produkt-compatible__brands {
display: flex;
flex-direction: column;
gap: var(--space-24);
padding: var(--space-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
}
.produkt-compatible__brands-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.produkt-compatible__brands-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.produkt-compatible__brand-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
margin: 0;
padding: 0;
list-style: none;
}
.produkt-compatible__brand {
padding: 14px var(--space-24);
border-radius: 12px;
background-color: var(--background-secondary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.produkt-compatible__brand-logo {
display: block;
width: auto;
height: 28px;
object-fit: contain;
}
.produkt-compatible__brands-footnote {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
@media (max-width: 1199px) {
.produkt-compatible {
padding-block: var(--space-80);
}
}
@media (max-width: 767px) {
.produkt-compatible {
padding-block: var(--space-48);
}
.produkt-compatible__head {
flex-direction: column;
align-items: flex-start;
gap: var(--space-20);
}
.produkt-compatible__title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
}
.produkt-compatible__brands {
padding: var(--space-24);
}
}
.produkt-documents {
padding-block: 100px;
background-color: var(--border-subtle);
}
.produkt-documents__container {
display: flex;
flex-direction: column;
gap: var(--space-40);
}
.produkt-documents__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-40);
line-height: var(--line-height-48);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.4px;
color: var(--text-primary);
}
.produkt-documents__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-20);
margin: 0;
padding: 0;
list-style: none;
}
.produkt-documents__item {
display: flex;
flex: 1 1 calc(25% - var(--space-20) * 3 / 4);
min-width: 260px;
}
.produkt-documents__card {
display: flex;
align-items: center;
gap: var(--space-16);
width: 100%;
padding: var(--space-24) var(--space-20);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
}
.produkt-documents__icon {
flex-shrink: 0;
width: 80px;
height: 80px;
object-fit: contain;
}
.produkt-documents__content {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.produkt-documents__text {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.produkt-documents__name {
font-family: var(--font-family-primary);
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.produkt-documents__file {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.produkt-documents__file--empty {
color: var(--text-disabled);
}
@media (max-width: 1199px) {
.produkt-documents {
padding-block: var(--space-80);
}
.produkt-documents__list {
flex-wrap: wrap;
}
.produkt-documents__item {
flex: 1 1 calc(50% - var(--space-20) / 2);
min-width: 260px;
}
}
@media (max-width: 767px) {
.produkt-documents {
padding-block: var(--space-48);
}
.produkt-documents__title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
}
.produkt-documents__list {
flex-direction: column;
}
.produkt-documents__item {
min-width: 0;
}
.produkt-documents__card {
align-items: flex-start;
}
}
.produkt-faq {
padding-block: var(--space-120);
background-color: var(--background-primary);
}
.produkt-faq__container {
display: flex;
flex-direction: column;
gap: var(--space-48);
}
.produkt-faq__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-40);
line-height: var(--line-height-48);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.4px;
color: var(--text-primary);
}
.produkt-faq__list {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
.produkt-faq__item {
padding: var(--space-32) var(--space-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
transition: border-color var(--transition-base) var(--easing-out);
}
.produkt-faq__item--active {
border-color: var(--border-accent);
}
.produkt-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.produkt-faq__question-text {
flex: 1 1 0;
min-width: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.produkt-faq__question-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
color: var(--text-secondary);
transform: rotate(0deg);
transition: transform var(--transition-base) var(--easing-out);
}
.produkt-faq__item--active .produkt-faq__question-icon {
transform: rotate(180deg);
}
.produkt-faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-base) var(--easing-out);
}
.produkt-faq__item--active .produkt-faq__answer {
grid-template-rows: 1fr;
}
.produkt-faq__answer[hidden] {
display: none;
}
.produkt-faq__answer-inner {
overflow: hidden;
}
.produkt-faq__answer-text {
padding-top: var(--space-20);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
.produkt-faq__answer {
transition: none;
}
}
.produkt-faq__cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-32);
overflow: hidden;
padding: 44px var(--space-48);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
background-image: linear-gradient(270deg, rgba(249, 176, 132, 0) 0%, rgb(230, 121, 53) 60.931%, var(--brand-primary) 100%);
}
.produkt-faq__cta-bg {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 364px;
height: 100%;
pointer-events: none;
}
.produkt-faq__cta-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 820px;
}
.produkt-faq__cta-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-inverse);
}
.produkt-faq__cta-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-inverse);
}
.produkt-faq__cta-button {
position: relative;
z-index: 2;
flex-shrink: 0;
background-color: var(--surface-dark-elevated);
}
.produkt-faq__cta-button:hover {
background-color: var(--surface-dark);
}
@media (max-width: 1199px) {
.produkt-faq {
padding-block: var(--space-80);
}
.produkt-faq__item {
padding: var(--space-24);
}
}
@media (max-width: 767px) {
.produkt-faq {
padding-block: var(--space-48);
}
.produkt-faq__title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
}
.produkt-faq__item {
padding: var(--space-20);
}
.produkt-faq__question-icon {
width: 24px;
height: 24px;
}
.produkt-faq__cta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-20);
padding: var(--space-24);
background-image: linear-gradient(0deg, rgba(249, 176, 132, 0) 0%, rgb(230, 121, 53) 60.931%, var(--brand-primary) 100%);
}
.produkt-faq__cta-bg {
display: none;
}
.produkt-faq__cta-button {
width: 100%;
justify-content: center;
}
}
.rishennya-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 360px;
padding-block: var(--space-48);
background-color: var(--surface-dark);
}
.rishennya-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.rishennya-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(90deg, rgba(5, 13, 24, 0.8) 0%, rgba(5, 13, 24, 0) 100%);
pointer-events: none;
}
.rishennya-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rishennya-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.rishennya-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-28);
max-width: 780px;
}
.rishennya-hero__heading {
display: flex;
flex-direction: column;
gap: 18px;
}
.rishennya-hero__overline {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-accent-inverse);
}
.rishennya-hero__title {
max-width: 760px;
color: var(--text-inverse);
}
.rishennya-hero__description {
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
@media (max-width: 1199px) {
.rishennya-hero__photo {
object-position: right bottom;
}
}
@media (max-width: 767px) {
.rishennya-hero__content {
gap: var(--space-20);
max-width: none;
}
}
.solutions-list {
padding-block: 120px 140px;
background-color: var(--background-primary);
}
.solutions-list__items {
display: flex;
flex-direction: column;
gap: var(--space-40);
max-width: 1140px;
margin-block: 0;
padding-block: 0;
list-style: none;
}
@media (max-width: 1199px) {
.solutions-list {
padding-block: var(--space-96);
}
}
@media (max-width: 767px) {
.solutions-list {
padding-block: var(--space-64);
}
.solutions-list__items {
gap: var(--space-24);
}
}
.house-energy {
padding-block: 140px;
background-color: var(--background-primary);
}
.house-energy__container {
display: flex;
align-items: center;
gap: var(--space-80);
}
.house-energy__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-32);
width: 560px;
flex-shrink: 0;
}
.house-energy__title {
color: var(--text-primary);
}
.house-energy__description {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.house-energy__photo-frame {
position: relative;
overflow: hidden;
flex: 1 0 0;
aspect-ratio: 800 / 460;
border-radius: var(--radius-card-large);
}
.house-energy__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
@media (max-width: 1199px) {
.house-energy {
padding-block: var(--space-96);
}
.house-energy__container {
gap: var(--space-48);
}
.house-energy__copy {
width: 440px;
}
}
@media (max-width: 1024px) {
.house-energy__container {
flex-direction: column;
align-items: stretch;
}
.house-energy__copy {
width: 100%;
}
.house-energy__photo-frame {
order: -1;
flex: none;
width: 100%;
}
}
@media (max-width: 767px) {
.house-energy {
padding-block: var(--space-64);
}
.house-energy__container {
gap: var(--space-32);
}
.house-energy__copy {
gap: var(--space-24);
}
.house-energy__cta {
width: 100%;
}
}
.system-tasks {
position: relative;
overflow: hidden;
background-color: var(--surface-dark);
}
.system-tasks__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.system-tasks::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(5, 13, 24, 0.7);
}
.system-tasks__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-64);
padding-block: 140px;
}
.system-tasks__title {
color: var(--text-inverse);
text-align: center;
}
.system-tasks__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-20);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.system-tasks__tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
height: 220px;
padding: var(--space-28);
border-radius: var(--radius-card-large);
border: 1px solid rgba(255, 255, 255, 0.11);
background-color: rgba(16, 34, 53, 0.8);
backdrop-filter: blur(4.5px);
}
.system-tasks__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
color: var(--text-accent);
}
.system-tasks__text {
margin: 0;
font-size: var(--font-size-16);
line-height: 1.4;
color: var(--text-inverse);
text-align: center;
}
@media (max-width: 1199px) {
.system-tasks__container {
gap: var(--space-48);
padding-block: var(--space-96);
}
.system-tasks__list {
display: flex;
overflow-x: auto;
width: calc(100% + var(--container-gutter) * 2);
margin-inline: calc(var(--container-gutter) * -1);
padding-inline: var(--container-gutter);
padding-bottom: var(--space-16);
}
.system-tasks__tile {
flex: 0 0 272px;
height: auto;
min-height: 200px;
}
}
@media (max-width: 767px) {
.system-tasks__container {
gap: var(--space-32);
padding-block: var(--space-64);
}
.system-tasks__list {
gap: var(--space-16);
}
.system-tasks__tile {
flex: 0 0 240px;
min-height: 0;
}
}
.equipment-products {
padding-block: 140px;
background-color: var(--background-primary);
}
.equipment-products__container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-56);
}
.equipment-products__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-32);
width: 100%;
}
.equipment-products__text {
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: 760px;
}
.equipment-products__title {
color: var(--text-primary);
}
.equipment-products__controls {
display: flex;
flex-shrink: 0;
gap: var(--space-12);
}
.equipment-products__slider {
display: flex;
flex-direction: column;
gap: var(--space-56);
width: 100%;
}
.equipment-products__slide {
flex: 0 0 336px;
max-width: 336px;
min-width: 0;
}
@media (max-width: 1199px) {
.equipment-products {
padding-block: var(--space-96);
}
.equipment-products__container {
gap: var(--space-40);
}
.equipment-products__slider {
gap: var(--space-40);
}
}
@media (max-width: 767px) {
.equipment-products {
padding-block: var(--space-64);
}
.equipment-products__header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-20);
}
.equipment-products__slider {
gap: var(--space-32);
}
.equipment-products__cta {
width: 100%;
}
}
.solution-track {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
background-color: var(--background-secondary);
}
.solution-track__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-32);
padding-block: 100px;
padding-right: var(--space-64);
padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
}
.solution-track__title {
color: var(--text-primary);
}
.solution-track__photo-frame {
position: relative;
min-width: 0;
overflow: hidden;
box-shadow: 0 24px 56px -16px rgba(23, 33, 41, 0.18);
}
.solution-track__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.solution-track--reverse .solution-track__copy {
order: 2;
padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
padding-left: var(--space-64);
}
.solution-track--reverse .solution-track__photo-frame {
order: 1;
}
@media (max-width: 1024px) {
.solution-track {
grid-template-columns: 1fr;
min-height: 0;
}
.solution-track__copy {
padding: var(--space-64) var(--container-gutter);
}
.solution-track__photo-frame,
.solution-track--reverse .solution-track__photo-frame {
order: -1;
height: 420px;
}
.solution-track--reverse .solution-track__copy {
order: 0;
padding-inline: var(--container-gutter);
}
}
@media (max-width: 767px) {
.solution-track__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
.solution-track__cta {
width: 100%;
}
}
.pidtrymka-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 360px;
padding-block: 66px 96px;
background-color: var(--surface-dark);
}
.pidtrymka-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pidtrymka-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(5, 13, 24, 0.8) 0%,
rgba(5, 13, 24, 0.576) 42%,
rgba(5, 13, 24, 0.144) 75%,
rgba(5, 13, 24, 0) 100%
);
pointer-events: none;
}
.pidtrymka-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pidtrymka-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.pidtrymka-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-28);
}
.pidtrymka-hero__title {
max-width: 780px;
color: var(--text-inverse);
}
.pidtrymka-hero__description {
max-width: 480px;
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
@media (max-width: 767px) {
.pidtrymka-hero {
min-height: 0;
padding-block: var(--space-96) var(--space-64);
}
.pidtrymka-hero__content {
gap: var(--space-20);
}
.pidtrymka-hero__description {
max-width: none;
}
}
.support-directions {
padding-block: 100px 140px;
background-color: var(--background-primary);
}
.support-directions__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-24);
margin-block: 0;
padding-block: 0;
list-style: none;
}
.support-directions__card {
display: flex;
align-items: center;
gap: var(--space-24);
height: 100%;
min-width: 0;
border-radius: var(--radius-card-large);
background-color: #f6f4f5;
}
.support-directions__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
width: 412px;
flex-shrink: 0;
padding: var(--space-32) 0 var(--space-32) var(--space-32);
}
.support-directions__title {
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.support-directions__description {
color: var(--text-secondary);
}
.support-directions__photo-frame {
position: relative;
flex: 1 0 0;
align-self: stretch;
min-width: 0;
min-height: 228px;
}
.support-directions__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 1199px) {
.support-directions {
padding-block: var(--space-96);
}
.support-directions__list {
grid-template-columns: 1fr;
}
.support-directions__photo {
object-position: right center;
}
}
@media (max-width: 767px) {
.support-directions {
padding-block: var(--space-64);
}
.support-directions__list {
gap: var(--space-16);
}
.support-directions__card {
flex-direction: column-reverse;
align-items: stretch;
gap: 0;
}
.support-directions__copy {
width: 100%;
align-items: center;
padding: var(--space-24);
text-align: center;
}
.support-directions__photo-frame {
flex: none;
min-height: 0;
height: 140px;
margin-top: var(--space-24);
}
.support-directions__photo {
object-position: center;
}
.support-directions__cta {
width: 100%;
}
}
.partneram-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding-block: 66px 90px;
background-color: var(--surface-dark);
}
.partneram-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.partneram-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(5, 13, 24, 0.8) 0%,
rgba(5, 13, 24, 0.576) 42%,
rgba(5, 13, 24, 0.144) 75%,
rgba(5, 13, 24, 0) 100%
);
pointer-events: none;
}
.partneram-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.partneram-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.partneram-hero__row {
display: flex;
align-items: center;
gap: 60px;
width: 100%;
}
.partneram-hero__content {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--space-28);
}
.partneram-hero__title {
max-width: 982px;
color: var(--text-inverse);
}
.partneram-hero__description {
max-width: 480px;
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
.partneram-hero__form {
display: flex;
flex: 0 0 720px;
flex-direction: column;
gap: var(--space-28);
padding: var(--space-40);
border-radius: var(--radius-card-large);
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.partneram-hero__form-head {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.partneram-hero__form-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.partneram-hero__form-subtitle {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.partneram-hero__body {
display: flex;
flex-direction: column;
gap: var(--space-28);
}
.partneram-hero__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
.partneram-hero__input {
width: 100%;
height: 56px;
padding-inline: var(--space-20);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.partneram-hero__textarea {
height: 128px;
padding-block: 18px;
resize: none;
}
.partneram-hero__input::placeholder {
color: var(--text-secondary);
}
.partneram-hero__input:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.partneram-hero__consent {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
}
.partneram-hero__consent-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.partneram-hero__consent-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1.5px solid var(--border-dark);
border-radius: 5px;
background-color: var(--background-primary);
}
.partneram-hero__consent-check {
width: 13px;
height: 13px;
transform: translate(11%, 21%);
color: var(--text-inverse);
opacity: 0;
}
.partneram-hero__consent:has(.partneram-hero__consent-input:checked) .partneram-hero__consent-box {
border-color: var(--brand-primary);
background-color: var(--brand-primary);
}
.partneram-hero__consent:has(.partneram-hero__consent-input:checked) .partneram-hero__consent-check {
opacity: 1;
}
.partneram-hero__consent:has(.partneram-hero__consent-input:focus-visible) .partneram-hero__consent-box {
outline: 2px solid var(--action-focus-ring);
outline-offset: 2px;
}
.partneram-hero__consent-label {
font-family: var(--font-family-primary);
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.partneram-hero__submit {
width: 100%;
}
@media (max-width: 1279px) {
.partneram-hero__row {
flex-direction: column;
align-items: stretch;
}
.partneram-hero__form {
flex: 1 1 auto;
width: 100%;
}
}
@media (max-width: 767px) {
.partneram-hero {
padding-block: var(--space-96) var(--space-64);
}
.partneram-hero__row {
gap: var(--space-32);
}
.partneram-hero__content {
gap: var(--space-20);
}
.partneram-hero__description {
max-width: none;
}
.partneram-hero__form {
padding: var(--space-24);
}
.partneram-hero__fields {
grid-template-columns: 1fr;
}
}
.partner-directions {
padding-block: var(--space-120);
background-color: var(--background-primary);
}
.partner-directions__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-32);
margin-block: 0;
padding-block: 0;
list-style: none;
}
.partner-directions__card {
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
}
.partner-directions__photo {
width: 100%;
height: 240px;
object-fit: cover;
}
.partner-directions__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-40);
width: 100%;
padding: 44px var(--space-48) var(--space-48);
}
.partner-directions__top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-32);
width: 100%;
}
.partner-directions__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
}
.partner-directions__title {
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.partner-directions__lead {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-secondary);
}
.partner-directions__checklist {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.partner-directions__checklist-item {
display: flex;
align-items: flex-start;
gap: 14px;
color: var(--text-primary);
}
.partner-directions__check-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--text-accent);
}
@media (max-width: 1199px) {
.partner-directions {
padding-block: var(--space-96);
}
.partner-directions__list {
grid-template-columns: 1fr;
gap: var(--space-24);
}
}
@media (max-width: 767px) {
.partner-directions {
padding-block: var(--space-64);
}
.partner-directions__body {
gap: var(--space-32);
padding: var(--space-32) var(--space-24) var(--space-24);
}
.partner-directions__top {
gap: var(--space-24);
}
.partner-directions__title {
font-size: var(--font-size-24);
line-height: var(--line-height-32);
}
.partner-directions__cta {
width: 100%;
}
}
.pro-solis-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
height: 512px;
background-color: var(--surface-dark);
}
.pro-solis-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pro-solis-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgb(5, 13, 24) 0%,
rgba(5, 13, 24, 0.72) 42%,
rgba(5, 13, 24, 0.18) 75%,
rgba(5, 13, 24, 0) 100%
);
pointer-events: none;
}
.pro-solis-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pro-solis-hero__breadcrumbs {
margin-bottom: 78px;
}
.pro-solis-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-24);
max-width: 700px;
}
.pro-solis-hero__title {
color: var(--text-inverse);
}
.pro-solis-hero__description {
max-width: 520px;
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-inverse);
}
@media (max-width: 767px) {
.pro-solis-hero {
height: auto;
padding-block: var(--space-96) var(--space-64);
}
.pro-solis-hero__breadcrumbs {
margin-bottom: var(--space-32);
}
.pro-solis-hero__description {
max-width: none;
}
}
.pro-solis-experience {
position: relative;
overflow: hidden;
padding-block: var(--space-120);
background-color: var(--background-secondary);
}
.pro-solis-experience__decor-topleft {
position: absolute;
top: 0;
left: 0;
width: 364px;
height: 436px;
pointer-events: none;
}
.pro-solis-experience__decor-bottomright {
position: absolute;
right: 0;
bottom: 0;
width: 276px;
height: 362px;
pointer-events: none;
}
.pro-solis-experience__container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-32);
text-align: center;
}
.pro-solis-experience__title {
max-width: 820px;
letter-spacing: -0.4px;
color: var(--text-primary);
}
.pro-solis-experience__lead {
max-width: 860px;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.pro-solis-experience__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-64) 88px;
}
.pro-solis-experience__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
.pro-solis-experience__stat-value {
color: var(--text-accent);
}
.pro-solis-experience__stat-caption {
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-secondary);
}
.pro-solis-experience__photo {
width: 100%;
max-width: 1100px;
height: 500px;
border-radius: var(--radius-card-large);
object-fit: cover;
}
@media (max-width: 1199px) {
.pro-solis-experience__decor-topleft,
.pro-solis-experience__decor-bottomright {
display: none;
}
}
@media (max-width: 767px) {
.pro-solis-experience {
padding-block: var(--space-64);
}
.pro-solis-experience__stats {
gap: var(--space-32);
}
.pro-solis-experience__photo {
height: 320px;
}
}
.pro-solis-solutions {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
}
.pro-solis-solutions__photo-frame {
position: relative;
min-width: 0;
overflow: hidden;
}
.pro-solis-solutions__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pro-solis-solutions__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-28);
padding-block: 100px;
padding-left: var(--space-64);
padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
background-color: var(--background-primary);
}
.pro-solis-solutions__title {
max-width: 560px;
letter-spacing: -0.4px;
color: var(--text-primary);
}
.pro-solis-solutions__lead {
max-width: 520px;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.pro-solis-ukraine {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
}
.pro-solis-ukraine__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-28);
padding-block: 100px;
padding-right: var(--space-64);
padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
background-color: var(--background-secondary);
}
.pro-solis-ukraine__title {
max-width: 560px;
letter-spacing: -0.4px;
color: var(--text-primary);
}
.pro-solis-ukraine__checklist {
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: 520px;
margin: 0;
padding: 0;
list-style: none;
}
.pro-solis-ukraine__checklist-item {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-primary);
}
.pro-solis-ukraine__check-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 4px;
color: var(--text-accent);
}
.pro-solis-ukraine__photo-frame {
position: relative;
min-width: 0;
overflow: hidden;
}
.pro-solis-ukraine__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.pro-solis-solutions,
.pro-solis-ukraine {
grid-template-columns: 1fr;
min-height: 0;
}
.pro-solis-solutions__copy,
.pro-solis-ukraine__copy {
padding: var(--space-64) var(--container-gutter);
}
.pro-solis-solutions__photo-frame,
.pro-solis-ukraine__photo-frame {
order: -1;
height: 420px;
}
}
@media (max-width: 767px) {
.pro-solis-solutions__copy,
.pro-solis-ukraine__copy {
gap: var(--space-24);
padding: var(--space-48) var(--container-gutter);
}
}
.proiekty-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 290px;
padding-block: 30px 96px;
background-color: var(--surface-dark);
}
.proiekty-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.proiekty-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(5, 13, 24, 0.8) 0%,
rgba(5, 13, 24, 0.576) 42%,
rgba(5, 13, 24, 0.144) 75%,
rgba(5, 13, 24, 0) 100%
);
pointer-events: none;
}
.proiekty-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.proiekty-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.proiekty-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-28);
}
.proiekty-hero__title {
max-width: 982px;
color: var(--text-inverse);
}
.proiekty-hero__description {
max-width: 689px;
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
@media (max-width: 767px) {
.proiekty-hero {
min-height: 0;
padding-block: var(--space-96) var(--space-64);
}
.proiekty-hero__content {
gap: var(--space-20);
}
.proiekty-hero__description {
max-width: none;
}
}
.projects {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-40);
padding: 80px 0 140px;
background-color: var(--background-primary);
}
.projects-filter {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
width: 100%;
}
.projects-filter__item {
padding: 12px 22px;
border: none;
border-radius: var(--radius-full);
background-color: var(--background-secondary);
color: var(--text-secondary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: 20px;
font-weight: var(--font-weight-medium);
cursor: pointer;
}
.projects-filter__item--active {
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-24);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.projects-grid .project-card {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
}
.project-card__media {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
background-color: #cbd2d9;
}
.project-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-card__track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.4s ease;
}
.project-card__slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.project-card__nav {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(203, 210, 217, 0.6);
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
cursor: pointer;
transform: translateY(-50%);
}
.project-card__nav:hover {
border-color: var(--border-accent);
color: var(--text-accent);
}
.project-card__nav--prev {
left: 16px;
}
.project-card__nav--prev .project-card__nav-icon {
transform: rotate(180deg);
}
.project-card__nav--next {
right: 16px;
}
.project-card__nav-icon {
width: 20px;
height: 20px;
}
.project-card__dots {
position: absolute;
bottom: 18px;
left: 50%;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
padding: 0;
transform: translateX(-50%);
}
.project-card__dot {
width: 6px;
height: 6px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.project-card__dot--active {
width: 20px;
background-color: var(--brand-primary);
}
.project-card__body {
display: flex;
flex-direction: column;
gap: var(--space-12);
width: 100%;
padding: var(--space-28);
}
.projects-grid .project-card__title {
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.project-card__description {
color: var(--text-secondary);
}
.projects-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
margin-top: var(--space-40);
}
.projects-pagination[hidden] {
display: none;
}
.projects-pagination__item,
.projects-pagination__nav {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: transparent;
color: var(--text-secondary);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
font-weight: var(--font-weight-medium);
cursor: pointer;
}
.projects-pagination__item:hover {
background-color: var(--background-secondary);
}
.projects-pagination__item--active {
background-color: var(--brand-primary);
color: var(--text-inverse);
}
.projects-pagination__nav-icon {
width: 20px;
height: 20px;
}
.projects-pagination__nav--prev .projects-pagination__nav-icon {
transform: rotate(180deg);
}
.projects-pagination__nav:hover {
background-color: var(--background-secondary);
}
.projects-pagination__nav:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.projects-pagination__nav:disabled:hover {
background-color: transparent;
}
@media (max-width: 1199px) {
.projects {
padding: var(--space-64) 0 var(--space-96);
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.projects {
gap: var(--space-24);
padding: var(--space-48) 0 var(--space-64);
}
.projects-filter {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: var(--space-4);
}
.projects-filter__item {
flex-shrink: 0;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.kontakty-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 285px;
padding-block: 35px 52px;
background-color: var(--surface-dark);
}
.kontakty-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.kontakty-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(5, 13, 24, 0.8) 0%,
rgba(5, 13, 24, 0.576) 42%,
rgba(5, 13, 24, 0.144) 75%,
rgba(5, 13, 24, 0) 100%
);
pointer-events: none;
}
.kontakty-hero__container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.kontakty-hero__breadcrumbs {
margin-bottom: var(--space-24);
}
.kontakty-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-28);
}
.kontakty-hero__title {
max-width: 982px;
color: var(--text-inverse);
}
.kontakty-hero__description {
max-width: 640px;
font-size: var(--font-size-20);
line-height: var(--line-height-34);
color: var(--text-inverse);
opacity: 0.7;
}
@media (max-width: 767px) {
.kontakty-hero {
min-height: 0;
padding-block: var(--space-96) var(--space-64);
}
.kontakty-hero__content {
gap: var(--space-20);
}
.kontakty-hero__description {
max-width: none;
}
}
.contact-topics {
padding-block: var(--space-120);
background-color: var(--background-primary);
}
.contact-topics__container {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.contact-topics__list {
display: flex;
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.contact-topics__item {
display: flex;
flex: 1 1 0;
min-width: 0;
}
.contact-topics__card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
width: 100%;
padding: var(--space-32);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
}
.contact-topics__icon {
flex-shrink: 0;
width: 80px;
height: 80px;
}
.contact-topics__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-16);
width: 100%;
}
.contact-topics__title {
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.contact-topics__description {
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.direct-contacts {
display: flex;
gap: var(--space-40);
padding: 36px var(--space-40);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
}
.direct-contacts__group {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
gap: var(--space-8);
}
.direct-contacts__group--office {
flex: 0 0 460px;
}
.direct-contacts__group--stack {
gap: var(--space-24);
}
.direct-contacts__label {
font-size: var(--font-size-14);
line-height: var(--line-height-22);
color: var(--text-accent);
}
.direct-contacts__value {
font-size: var(--font-size-18);
line-height: var(--line-height-30);
color: var(--text-primary);
}
.direct-contacts__value--link {
display: block;
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
}
.direct-contacts__phones {
display: flex;
flex-direction: column;
gap: 6px;
}
.direct-contacts__phone {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.direct-contacts__phone:hover,
.direct-contacts__value--link:hover {
color: var(--text-accent);
}
@media (max-width: 1199px) {
.contact-topics {
padding-block: var(--space-80);
}
.contact-topics__list {
flex-wrap: wrap;
}
.contact-topics__item {
flex: 1 1 calc(50% - var(--space-24) / 2);
min-width: 260px;
}
.direct-contacts {
flex-wrap: wrap;
gap: var(--space-32);
}
.direct-contacts__group--office {
flex-basis: 100%;
}
}
@media (max-width: 767px) {
.contact-topics {
padding-block: var(--space-48);
}
.contact-topics__list {
flex-direction: column;
}
.contact-topics__item {
min-width: 0;
}
.contact-topics__cta {
width: 100%;
justify-content: center;
}
.direct-contacts {
flex-direction: column;
gap: var(--space-24);
padding: var(--space-24);
}
}
.faq-hero {
padding-block: var(--space-40) var(--space-56);
background-color: var(--background-secondary);
}
.faq-hero__container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
}
.faq-hero__title {
color: var(--text-primary);
}
.faq-list-section {
padding-block: var(--space-120);
background-color: var(--background-primary);
}
.faq-list-section__container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-48);
}
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 100%;
max-width: 948px;
margin: 0;
padding: 0;
list-style: none;
}
.faq-item {
padding: var(--space-32) var(--space-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
transition: border-color var(--transition-base) var(--easing-out);
}
.faq-item--active {
border-color: var(--border-accent);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.faq-question-text {
flex: 1 1 0;
min-width: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.faq-question-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
color: var(--text-secondary);
transform: rotate(0deg);
transition: transform var(--transition-base) var(--easing-out);
}
.faq-item--active .faq-question-icon {
transform: rotate(180deg);
}
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-base) var(--easing-out);
}
.faq-item--active .faq-answer {
grid-template-rows: 1fr;
}
.faq-answer[hidden] {
display: none;
}
.faq-answer-inner {
overflow: hidden;
}
.faq-answer-text {
padding-top: var(--space-20);
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
.faq-answer {
transition: none;
}
}
.faq-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-32);
overflow: hidden;
width: 100%;
padding: 44px var(--space-48);
border-radius: var(--radius-card-large);
background-color: var(--background-secondary);
background-image: linear-gradient(270deg, rgba(249, 176, 132, 0) 0%, rgb(230, 121, 53) 60.931%, var(--brand-primary) 100%);
}
.faq-cta__bg {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 364px;
height: 100%;
pointer-events: none;
}
.faq-cta__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 820px;
}
.faq-cta__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-24);
line-height: var(--line-height-32);
font-weight: var(--font-weight-medium);
color: var(--text-inverse);
}
.faq-cta__text {
font-family: var(--font-family-primary);
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-inverse);
}
.faq-cta__button {
position: relative;
z-index: 2;
flex-shrink: 0;
background-color: var(--surface-dark-elevated);
}
.faq-cta__button:hover {
background-color: var(--surface-dark);
}
@media (max-width: 1199px) {
.faq-hero {
padding-block: var(--space-40) var(--space-48);
}
.faq-list-section {
padding-block: var(--space-80);
}
.faq-item {
padding: var(--space-24);
}
}
@media (max-width: 767px) {
.faq-hero {
padding-block: var(--space-40) var(--space-32);
}
.faq-list-section {
padding-block: var(--space-48);
}
.faq-item {
padding: var(--space-20);
}
.faq-question-icon {
width: 24px;
height: 24px;
}
.faq-cta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-20);
padding: var(--space-24);
background-image: linear-gradient(0deg, rgba(249, 176, 132, 0) 0%, rgb(230, 121, 53) 60.931%, var(--brand-primary) 100%);
}
.faq-cta__bg {
display: none;
}
.faq-cta__button {
width: 100%;
justify-content: center;
}
}
.dokumentatsiya-hero {
padding-block: var(--space-40) var(--space-56);
background-color: var(--background-secondary);
}
.dokumentatsiya-hero__container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-24);
}
.dokumentatsiya-hero__breadcrumbs {
margin-bottom: 0;
}
.dokumentatsiya-hero__title {
color: var(--text-primary);
}
.doc-list-section {
padding-block: var(--space-120);
background-color: var(--background-primary);
}
.doc-list-section__container {
display: flex;
justify-content: center;
}
.doc-list {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 100%;
max-width: 948px;
margin: 0;
padding: 0;
list-style: none;
}
.doc-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
padding: var(--space-24) var(--space-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card-large);
background-color: var(--background-primary);
}
.doc-item__copy {
display: flex;
flex-direction: column;
gap: var(--space-8);
min-width: 0;
}
.doc-item__label {
font-size: var(--font-size-12);
line-height: var(--line-height-18);
font-weight: var(--font-weight-medium);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-accent);
}
.doc-item__title {
font-size: var(--font-size-20);
line-height: var(--line-height-28);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.doc-item__cta {
flex-shrink: 0;
}
@media (max-width: 1199px) {
.dokumentatsiya-hero {
padding-block: var(--space-40) var(--space-48);
}
.doc-list-section {
padding-block: var(--space-96);
}
}
@media (max-width: 767px) {
.dokumentatsiya-hero {
padding-block: var(--space-40) var(--space-32);
}
.doc-list-section {
padding-block: var(--space-64);
}
.doc-item {
flex-direction: column;
align-items: flex-start;
padding: var(--space-24);
}
.doc-item__cta {
width: 100%;
}
}
.dyakuyemo-card {
padding-block: var(--space-120);
background-color: var(--background-secondary);
}
.dyakuyemo-card__container {
display: flex;
justify-content: center;
}
.dyakuyemo-card__panel {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 620px;
padding: 64px 64px 56px;
border-radius: 28px;
background-color: var(--background-primary);
box-shadow: 0px 36px 45px rgba(3, 8, 15, 0.45);
text-align: center;
}
.dyakuyemo-card__halo {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 104px;
height: 104px;
border-radius: 50%;
background-color: var(--background-accent-soft);
}
.dyakuyemo-card__ring {
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 50%;
background-color: var(--brand-primary);
}
.dyakuyemo-card__icon {
width: 28px;
height: 28px;
transform: translate(11%, 21%);
color: var(--text-inverse);
}
.dyakuyemo-card__title {
margin-top: 28px;
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.dyakuyemo-card__description {
margin-top: 14px;
max-width: 492px;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.dyakuyemo-card__actions {
display: flex;
justify-content: center;
gap: var(--space-12);
margin-top: 36px;
}
@media (max-width: 767px) {
.dyakuyemo-card {
padding-block: var(--space-80);
}
.dyakuyemo-card__panel {
padding: var(--space-48) var(--space-24) var(--space-32);
}
.dyakuyemo-card__actions {
flex-direction: column;
width: 100%;
}
.dyakuyemo-card__action {
width: 100%;
}
}
.error-404 {
padding-block: var(--space-120);
background-color: var(--background-secondary);
}
.error-404__container {
display: flex;
justify-content: center;
}
.error-404__panel {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 620px;
padding: 64px 64px 56px;
border-radius: 28px;
background-color: var(--background-primary);
box-shadow: 0px 36px 45px rgba(3, 8, 15, 0.45);
text-align: center;
}
.error-404__code {
margin: 0;
font-size: var(--font-size-72);
line-height: var(--line-height-80);
font-weight: var(--font-weight-semibold);
color: var(--brand-primary);
}
.error-404__title {
margin-top: 12px;
font-size: var(--font-size-32);
line-height: var(--line-height-40);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.error-404__description {
margin-top: 14px;
max-width: 492px;
font-size: var(--font-size-16);
line-height: var(--line-height-28);
color: var(--text-secondary);
}
.error-404__actions {
display: flex;
justify-content: center;
gap: var(--space-12);
margin-top: 36px;
}
@media (max-width: 767px) {
.error-404 {
padding-block: var(--space-80);
}
.error-404__panel {
padding: var(--space-48) var(--space-24) var(--space-32);
}
.error-404__code {
font-size: var(--font-size-56);
line-height: var(--line-height-60);
}
.error-404__actions {
flex-direction: column;
width: 100%;
}
.error-404__action {
width: 100%;
}
}
.block {
display: contents;
}
.field__error {
margin: 4px 0 0;
color: #d0342c;
font-size: var(--font-size-14);
line-height: var(--line-height-20);
}
[aria-invalid="true"] {
border-color: #d0342c !important;
}
.lead-form__captcha {
display: contents;
}
.maintenance__logo {
display: block;
margin: 0 auto var(--space-32);
}
.search-page__form {
display: flex;
gap: var(--space-16);
max-width: 720px;
margin-bottom: var(--space-32);
}
.search-page__input {
flex: 1;
min-height: 48px;
padding: 0 var(--space-16);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font: inherit;
}
.search-page__group {
margin: var(--space-40) 0 var(--space-16);
font-size: var(--font-size-24);
font-weight: var(--font-weight-medium);
}
.search-page__list {
display: grid;
gap: var(--space-16);
margin: 0;
padding: 0;
list-style: none;
}
.search-page__item {
padding: var(--space-24);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
}
.search-page__title {
color: var(--text-primary);
font-size: var(--font-size-18);
font-weight: var(--font-weight-medium);
text-decoration: none;
}
.search-page__excerpt,
.search-page__note {
margin-top: var(--space-8);
color: var(--text-secondary);
}
.search-page .katalog-pagination {
margin-top: var(--space-40);
}