@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-body: "Inter", sans-serif; --font-display: "Inter Display", "Inter", sans-serif; --background-primary: #101010; --background-secondary: #181818; --text-primary: #f7f7f7; --text-secondary: #cecfd2; --text-tertiary: #94979c; --text-quaternary: #94979c; --border-primary: #2f3238; --brand: #fdb022; --button-primary: #373c43; --button-primary-hover: #40464e; --border-secondary: #525966; --white: #ffffff; --radius-md: 8px; --radius-lg: 10px; --header-height: 62px; --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 6px; --spacing-md: 8px; --spacing-lg: 12px; --spacing-xl: 16px; --spacing-2xl: 20px; --spacing-3xl: 24px; --spacing-4xl: 32px; --spacing-5xl: 40px; --spacing-6xl: 48px; --spacing-7xl: 64px; --spacing-8xl: 80px; --spacing-9xl: 96px; --spacing-10xl: 128px; --spacing-11xl: 160px; --h1-size: 60px; --h1-line: 62px; --h1-tracking: -0.9px; --h2-size: 50px; --h2-line: 52px; --h2-tracking: -0.5px; --h3-size: 40px; --h3-line: 42px; --h3-tracking: -0.4px; --h4-size: 36px; --h4-line: 38px; --h4-tracking: -0.36px; --h5-size: 32px; --h5-line: 34px; --h5-tracking: -0.32px; --h6-size: 18px; --h6-line: 24px; --h6-tracking: -0.09px; --body1-size: 18px; --body1-line: 24px; --body1-tracking: -0.09px; --body2-size: 16px; --body2-line: 22px; --body2-tracking: -0.08px; --body3-size: 15px; --body3-line: 20px; --body3-tracking: -0.075px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; background-color: var(--background-secondary); } html:has(.site-header--home:not(.site-header--dark)), body:has(.site-header--home:not(.site-header--dark)) { background-color: #fafafb; } body.body--header-overlay.overscroll-block-top, html:has(body.body--header-overlay.overscroll-block-top) { overscroll-behavior-y: none; } body { font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding-top: var(--header-height); min-width: 340px; } @media (min-width: 768px) { :root { --header-height: 72px; } html:has(.site-header--home) { --header-height: 64px; } } body.body--has-header-line { padding-top: 0; } body.body--sticky-header { padding-top: 0; } .header-line { width: 100%; height: var(--header-height); padding: 0; box-sizing: border-box; flex-shrink: 0; display: flex; justify-content: center; border-top: 1px solid var(--border-primary); } @media (min-width: 390px) { .header-line { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .header-line { padding: 0 var(--spacing-3xl); } } .header-line__inner { position: relative; width: 100%; max-width: 1392px; height: 100%; } @media (min-width: 390px) { .header-line__inner { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } .header-line--contact { background-color: #fafafb; border-top-color: #e5e7ec; } .header-line--contact .header-line__inner { border-left-color: #e5e7ec; border-right-color: #e5e7ec; } .footer-link { color: var(--text-primary); text-decoration: none; font-family: "Inter", sans-serif; font-weight: 500; font-size: 20px; line-height: 24px; } .footer-link:hover { color: var(--brand); } .footer-link--legal { color: var(--text-tertiary); font-size: 14px; line-height: 20px; } .footer-link--legal:hover { color: var(--text-secondary); } .footer__copyright { margin: 0; color: var(--text-tertiary); font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; } @media (min-width: 390px) { .footer__copyright { white-space: nowrap; } } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; width: 100%; background-color: var(--background-secondary); border-bottom: 1px solid var(--border-primary); } body.body--sticky-header .site-header:not(.is-open) { position: sticky; } .header__inner { width: 100%; max-width: 1440px; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-xl) var(--spacing-3xl); } .header__logo { display: block; width: 151px; height: 28px; flex-shrink: 0; } .header__logo img { display: block; width: 100%; height: 100%; } .header__burger { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; touch-action: manipulation; } .header__burger-icon--close { display: none; } .site-header.is-open .header__burger-icon--menu { display: none; } .site-header.is-open .header__burger-icon--close { display: block; } .header__mobile-panel { display: none; width: 100%; } .site-header.is-open .header__mobile-panel { display: flex; flex-direction: column; gap: var(--spacing-5xl); width: 100%; padding: var(--spacing-lg) var(--spacing-3xl) var(--spacing-5xl); } .header__mobile-links { display: flex; flex-direction: column; width: 100%; } .header-mlink { display: flex; align-items: center; width: 100%; height: 62px; border-bottom: 1px solid var(--border-primary); font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; line-height: 22px; color: var(--text-primary); text-decoration: none; } .header-mlink:hover { color: var(--brand); } .header__mobile-cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; background-color: var(--button-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; line-height: 22px; color: var(--text-primary); text-decoration: none; } .header__mobile-cta:hover { background-color: var(--button-primary-hover); color: var(--white); } .header__right { display: none; } @media (min-width: 768px) { .header__burger { display: none; } .header__mobile-panel { display: none !important; } .header__right { display: flex; align-items: center; gap: var(--spacing-4xl); } } .header__links { display: flex; align-items: center; gap: var(--spacing-3xl); } .header-link { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 24px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .header-link:hover { color: var(--brand); } .header__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md) var(--spacing-2xl); background-color: var(--button-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 24px; color: var(--text-primary); text-decoration: none; white-space: nowrap; } .header__cta:hover { background-color: var(--button-primary-hover); color: var(--white); } .site-header.site-header--home { background-color: transparent; border-bottom-color: transparent; transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .site-header.site-header--home.site-header--no-transition { transition: none; } .site-header--home.site-header--no-transition .header__burger-icon, .site-header--home.site-header--no-transition .header-home__social-link { transition: none; } @media (min-width: 768px) { .site-header--home .header__inner { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } } .header-home__logo { display: block; position: relative; width: 151px; height: 28px; flex-shrink: 0; } .header-home__logo-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .header-home__logo-img--light { opacity: 0; } .header-home__right { display: none; } @media (min-width: 768px) { .header-home__right { display: flex; align-items: center; gap: var(--spacing-4xl); } } .header-home__links { display: flex; align-items: center; gap: var(--spacing-3xl); } .header-home__link { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 24px; text-decoration: none; white-space: nowrap; transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .header-home__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid transparent; font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 24px; text-decoration: none; white-space: nowrap; transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .site-header--home.site-header--transparent { background-color: rgba(255, 255, 255, 0.01); border-bottom-color: rgba(255, 255, 255, 0.1); } .site-header--home.site-header--transparent .header-home__link { color: var(--text-secondary); } .site-header--home.site-header--transparent .header-home__link:hover { color: var(--text-primary); } .site-header--home.site-header--transparent .header-home__cta { background-color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #181d27; } .site-header--home.site-header--transparent .header-home__cta:hover { background-color: rgba(255, 255, 255, 0.9); border-color: #fff; } .site-header--home.site-header--transparent.is-open { background-color: var(--white); border-bottom-color: #e5e7ec; } .site-header--home.site-header--transparent.is-open .header-home__logo-img--dark { opacity: 0; } .site-header--home.site-header--transparent.is-open .header-home__logo-img--light { opacity: 1; } .site-header--home.site-header--light { background-color: var(--white); border-bottom-color: #e5e7ec; } .site-header--home.site-header--light .header-home__logo-img--dark { opacity: 0; } .site-header--home.site-header--light .header-home__logo-img--light { opacity: 1; } .site-header--home.site-header--light .header-home__link { color: #414651; } .site-header--home.site-header--light .header-home__link:hover { color: #181d27; } .site-header--home.site-header--dark { background-color: var(--background-secondary); border-bottom-color: var(--border-primary); } .site-header--home.site-header--dark .header-home__link { color: var(--text-secondary); } .site-header--home.site-header--dark .header-home__link:hover { color: var(--text-primary); } .site-header--home.site-header--light .header-home__cta, .site-header--home.site-header--dark .header-home__cta { background-color: #373c43; border-color: #525966; color: #f7f7f7; } .site-header--home.site-header--light .header-home__cta:hover, .site-header--home.site-header--dark .header-home__cta:hover { background-color: #40464e; } .header__burger-icon { color: var(--text-secondary); transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .site-header--home.site-header--light .header__burger-icon, .site-header--home.site-header--transparent.is-open .header__burger-icon { color: #181d27; } .site-header--home.site-header--light .header-mlink, .site-header--home.site-header--transparent.is-open .header-mlink { color: #181d27; border-bottom-color: #e5e7ec; } .header-home__socials { display: flex; align-items: center; gap: var(--spacing-3xl); } .header-home__social-link { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-tertiary); transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .header-home__social-icon { display: block; width: 24px; height: 24px; } .site-header--home.site-header--light .header-home__social-link, .site-header--home.site-header--transparent.is-open .header-home__social-link { color: #535862; } body.body--header-overlay { padding-top: 0; } .hero { width: 100%; height: 100vh; background-color: var(--background-primary); display: flex; align-items: center; justify-content: center; padding: var(--spacing-3xl); overflow: hidden; } .hero__title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); color: var(--text-primary); text-align: center; white-space: nowrap; word-break: break-word; } .hero-main { width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: linear-gradient(to bottom, var(--background-secondary), var(--background-primary)); height: calc(100vh - var(--header-height)); height: calc(100lvh - var(--header-height)); min-height: 660px; } @media (min-width: 768px) { .hero-main { min-height: 860px; padding: 0 var(--spacing-3xl); } } .hero-main__container { width: 100%; max-width: 1392px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7xl); padding: var(--spacing-9xl) var(--spacing-3xl) var(--spacing-6xl); } @media (min-width: 768px) { .hero-main__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-10xl) var(--spacing-6xl) var(--spacing-9xl); } } @media (min-width: 1000px) { .hero-main__container { padding-left: var(--spacing-8xl); padding-right: var(--spacing-8xl); } } .hero-main__content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4xl); } @media (min-width: 1000px) { .hero-main__content { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .hero-main__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); } @media (min-width: 768px) { .hero-main__text { gap: var(--spacing-xl); } } @media (min-width: 1000px) { .hero-main__text { width: auto; flex: 1 0 0; min-width: 0; } } .hero-main__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); white-space: nowrap; } @media (min-width: 390px) { .hero-main__heading { font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); } } @media (min-width: 768px) { .hero-main__heading { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-tracking); } } .hero-main__accent { color: var(--brand); } .hero-main__support { margin: 0; width: 100%; max-width: 380px; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-secondary); } @media (min-width: 390px) { .hero-main__support { font-size: var(--body1-size); line-height: var(--body1-line); letter-spacing: var(--body1-tracking); } } .hero-main__buttons { display: flex; align-items: center; gap: var(--spacing-lg); flex-shrink: 0; } .hero-main__buttons .hero-main__cta--desktop { display: none; } .hero-main__buttons .hero-main__cta--mobile { display: inline-flex; } @media (min-width: 768px) { .hero-main__buttons .hero-main__cta--desktop { display: inline-flex; } .hero-main__buttons .hero-main__cta--mobile { display: none; } } .hero-main__cover-container { width: 100%; max-width: 1392px; flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } @media (min-width: 768px) { .hero-main__cover-container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } .hero-main__cover { position: relative; width: 100%; flex: 1 0 0; min-height: 0; background-color: var(--background-primary); display: flex; overflow: hidden; } .hero-main__cover::before, .hero-main__cover::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.1); pointer-events: none; } .hero-main__cover::before { top: 0; } .hero-main__cover::after { bottom: 0; } .hero-main__video { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; } .home-hero { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .home-hero__media { position: absolute; inset: 0; } .home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .home-hero__blur { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4, 22, 65, 0.05), rgba(4, 22, 65, 0.5)); pointer-events: none; } .home-hero__content { position: relative; z-index: 1; width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--spacing-4xl); padding: var(--spacing-8xl) var(--spacing-2xl); } @media (min-width: 390px) { .home-hero__content { padding: var(--spacing-8xl) var(--spacing-3xl); } } @media (min-width: 768px) { .home-hero__content { gap: var(--spacing-5xl); padding: var(--spacing-9xl) var(--spacing-7xl); } } @media (min-width: 1000px) { .home-hero__content { flex-direction: row; align-items: flex-end; gap: var(--spacing-4xl); } } .home-hero__text { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--spacing-lg); width: 100%; color: #f7f7f7; } @media (min-width: 390px) { .home-hero__text { align-items: flex-start; } } @media (min-width: 1000px) { .home-hero__text { flex: 1 1 0; min-width: 0; } } .home-hero__title { margin: 0; width: 100%; max-width: 350px; font-family: "Inter Display", "Inter", sans-serif; font-weight: 600; font-size: 35px; line-height: 35px; letter-spacing: -0.525px; } @media (min-width: 390px) { .home-hero__title { font-size: 43px; line-height: 43px; letter-spacing: -0.645px; } } @media (min-width: 768px) { .home-hero__title { max-width: 500px; font-size: 60px; line-height: 60px; letter-spacing: -0.9px; } } .home-hero__support { margin: 0; width: 100%; max-width: 350px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; } @media (min-width: 768px) { .home-hero__support { max-width: 400px; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; } } .home-hero__buttons { display: flex; align-items: center; gap: var(--spacing-lg); flex-shrink: 0; } .home-hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid transparent; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; line-height: 24px; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .home-hero__btn--secondary { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); color: #f7f7f7; } .home-hero__btn--secondary:hover { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15); } .home-hero__btn--primary { background-color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.9); color: #181d27; } .home-hero__btn--primary:hover { background-color: rgba(255, 255, 255, 0.9); border-color: #fff; } .home-hero__btn--areas { display: none; } @media (min-width: 768px) { .home-hero__btn--contact { display: none; } .home-hero__btn--areas { display: inline-flex; } } .social { width: 100%; background-color: var(--background-primary); border-bottom: 1px solid var(--border-primary); } .social--light { --background-primary: #fafafb; --border-primary: #e5e7ec; border-bottom: none; } .social__container { width: 100%; max-width: 1392px; margin: 0 auto; overflow: hidden; padding: var(--spacing-5xl) 0; } @media (min-width: 768px) { .social__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .social__container { padding: var(--spacing-6xl) 0; } } @media (min-width: 1000px) { .social__container { padding: var(--spacing-7xl) 0; } } @media (min-width: 768px) { .social { padding: 0 var(--spacing-3xl); } } .social__track { display: flex; width: max-content; animation: social-marquee 42s linear infinite; will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; } .social__track.is-dragging { cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .social__track { animation: none; } } @keyframes social-marquee { to { transform: translate3d(calc(-100% / 3), 0, 0); } } .social__group { display: flex; align-items: flex-start; flex-shrink: 0; } .social__logo { box-sizing: border-box; flex-shrink: 0; height: 96px; } .social__logo img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-drag: none; } .social__logo--a100 { width: 150px; padding: 32px 32px; } .social__logo--alutech { width: 167.8px; padding: 34.5px 32px; } .social__logo--great-stone { width: 174.82px; padding: 32px 32px; } .social__logo--amkodor { width: 220px; padding: 29px 32px; } .social__logo--bolma { width: 141.7px; padding: 26.5px 32px 35.5px; } .social__logo--scmitz { width: 179.46px; padding: 23.5px 32px 34.5px; } @media (min-width: 1000px) { .social__logo--a100 { width: 182px; padding: 32px 48px; } .social__logo--alutech { width: 199.8px; padding: 34.5px 48px; } .social__logo--great-stone { width: 206.82px; padding: 32px 48px; } .social__logo--amkodor { width: 252px; padding: 29px 48px; } .social__logo--bolma { width: 173.7px; padding: 26.5px 48px 35.5px; } .social__logo--scmitz { width: 211.46px; padding: 23.5px 48px 34.5px; } } .divider { display: flex; width: 100%; background-color: var(--background-primary); justify-content: center; } .divider__inner { width: 100%; max-width: 1392px; height: 64px; } @media (min-width: 390px) { .divider { padding: 0 var(--spacing-2xl); } .divider__inner { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .divider { padding: 0 var(--spacing-3xl); } .divider__inner { height: 80px; } } @media (min-width: 1000px) { .divider__inner { height: 96px; } } .divider--edge { display: none; } @media (min-width: 1000px) { .divider--edge { display: flex; } } .divider--secondary { background-color: var(--background-secondary); } .divider--hidden-320 { display: none; } @media (min-width: 390px) { .divider--hidden-320 { display: flex; } } .divider--light { --background-primary: #fafafb; --border-primary: #e5e7ec; } .divider--only-1440 { display: none; } @media (min-width: 1440px) { .divider--only-1440 { display: flex; } } .cta { width: 100%; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); display: flex; justify-content: center; } .cta__inner { width: 100%; max-width: 1392px; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .cta { padding: 0 var(--spacing-2xl); } .cta__inner { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .cta { padding: 0 var(--spacing-3xl); } .cta__inner { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .cta { padding: 0 var(--spacing-3xl); border-bottom: 1px solid var(--border-primary); } } .cta__content { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; } @media (min-width: 768px) { .cta__content { flex-direction: row; align-items: flex-end; gap: var(--spacing-4xl); } } .cta__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); text-align: center; } .cta__accent { color: var(--brand); } @media (min-width: 390px) { .cta__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } @media (min-width: 768px) { .cta__heading { flex: 1 0 0; min-width: 0; font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); text-align: left; } } @media (min-width: 1000px) { .cta__heading { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-tracking); } } @media (min-width: 1440px) { .cta__heading { font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: var(--h1-tracking); } } .cta__buttons { display: flex; flex-direction: column; gap: var(--spacing-lg); align-items: flex-start; justify-content: center; width: 100%; max-width: 300px; } .cta__buttons .btn { width: 100%; } @media (min-width: 768px) { .cta__buttons { flex-direction: row; align-items: center; width: 250px; max-width: none; flex-shrink: 0; } .cta__buttons .btn { width: auto; flex: none; } .cta__buttons .btn--services { width: 119px; } } .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 24px; color: var(--text-primary); text-decoration: none; white-space: nowrap; touch-action: manipulation; } .btn--primary { background-color: var(--button-primary); border-color: var(--border-secondary); } @media (hover: hover) { .btn--primary:hover { background-color: var(--button-primary-hover); color: var(--white); } } .btn--primary.is-pencil-hover { background-color: var(--button-primary-hover); color: var(--white); } .btn--secondary { background-color: var(--background-secondary); border-color: var(--border-primary); } @media (hover: hover) { .btn--secondary:hover { border-color: var(--border-secondary); } } .btn--secondary.is-pencil-hover { border-color: var(--border-secondary); } .brands { width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } .brands__inner { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4xl); padding: var(--spacing-8xl) var(--spacing-lg); } @media (min-width: 390px) { .brands { padding: 0 var(--spacing-2xl); } .brands__inner { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .brands { padding: 0 var(--spacing-3xl); } .brands__inner { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .brands__inner { padding: var(--spacing-10xl) var(--spacing-4xl) var(--spacing-9xl); } } .brands__intro { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2xl); width: 100%; } .brands__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(253, 176, 34, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--brand); } .brands__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); text-align: center; color: var(--text-primary); } .brands__heading-muted { color: var(--text-tertiary); } @media (min-width: 768px) { .brands__heading { font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); } } @media (min-width: 1000px) { .brands__heading { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-tracking); } } .brands__grid { width: 100%; max-width: 1392px; display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .brands__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) { .brands__grid { grid-template-columns: repeat(5, 1fr); } } .brands__cell { height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-style: solid; border-color: var(--border-primary); border-width: 0; } .brands__cell img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; } .brands__cell--oventrop, .brands__cell--elco { display: none; } @media (min-width: 1000px) { .brands__cell--oventrop, .brands__cell--elco { display: flex; } } .brands__cell--meibes { padding-bottom: 8px; } .brands__cell--arbonia { padding-bottom: 4px; } .brands__cell--kermi { padding-bottom: 2px; } .brands__cell--wilo { padding-bottom: 7px; } .brands__cell--viessmann, .brands__cell--tece { border-top-width: 1px; } .brands__cell--viessmann, .brands__cell--tece, .brands__cell--meibes, .brands__cell--arbonia, .brands__cell--geberit, .brands__cell--kermi { border-bottom-width: 1px; } .brands__cell--viessmann, .brands__cell--meibes, .brands__cell--geberit, .brands__cell--wilo { border-right-width: 1px; } @media (min-width: 390px) { .brands__cell--viessmann, .brands__cell--meibes, .brands__cell--geberit, .brands__cell--wilo { border-left-width: 1px; } .brands__cell--tece, .brands__cell--arbonia, .brands__cell--kermi, .brands__cell--flamco { border-right-width: 1px; } } @media (min-width: 768px) { .brands__cell { border-top-width: 0; border-bottom-width: 0; border-right-width: 0; } .brands__cell--meibes, .brands__cell--wilo { border-left-width: 0; } .brands__cell--viessmann, .brands__cell--geberit { border-left-width: 1px; } .brands__cell--arbonia, .brands__cell--flamco { border-right-width: 1px; } .brands__cell--viessmann, .brands__cell--tece, .brands__cell--meibes, .brands__cell--arbonia { border-top-width: 1px; border-bottom-width: 1px; } .brands__cell--viessmann, .brands__cell--tece, .brands__cell--meibes, .brands__cell--geberit, .brands__cell--kermi, .brands__cell--wilo { border-right-width: 1px; } } @media (min-width: 1000px) { .brands__cell { border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 1px; } .brands__cell--viessmann, .brands__cell--tece, .brands__cell--meibes, .brands__cell--arbonia, .brands__cell--geberit { border-top-width: 1px; border-bottom-width: 1px; } .brands__cell--viessmann, .brands__cell--kermi { border-left-width: 1px; } } .stats { scroll-margin-top: var(--header-height); --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; --button-primary: #e5e7ec; --button-primary-hover: #e9ebee; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .stats { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .stats { padding: 0 var(--spacing-3xl); } } .stats__intro { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4xl); padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .stats__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .stats__intro { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .stats__intro { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .stats__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; max-width: 660px; } @media (min-width: 768px) { .stats__title-badge { max-width: none; } } @media (min-width: 1000px) { .stats__title-badge { flex: 1 0 0; min-width: 0; } } .stats__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .stats__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .stats__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .stats__heading-muted { color: var(--text-quaternary); } .stats__btn { flex-shrink: 0; } .stats__grid { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 390px) { .stats__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .stats__grid { flex-direction: row; border-left-width: 0; border-right-width: 0; } } .stats__cell { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--spacing-7xl); width: 100%; padding: var(--spacing-3xl); border-style: solid; border-color: var(--border-primary); border-width: 0; border-top-width: 1px; } @media (min-width: 768px) and (max-width: 999.98px) { .stats__cell { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; padding: var(--spacing-4xl); } } @media (min-width: 1000px) { .stats__cell { flex: 1 1 0; min-width: 0; width: auto; flex-direction: column-reverse; gap: var(--spacing-9xl); padding: var(--spacing-5xl); border-left-width: 1px; border-right-width: 1px; } .stats__cell:first-child { border-right-width: 0; } .stats__cell:last-child { border-left-width: 0; } } @media (min-width: 1440px) { .stats__cell { gap: var(--spacing-11xl); } } .stats__cell-text { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 300px; } .stats__cell:last-child .stats__cell-text { max-width: 280px; } @media (min-width: 1000px) and (max-width: 1439px) { .stats__cell:nth-child(1) .stats__cell-text { max-width: 224px; } .stats__cell:nth-child(2) .stats__cell-text { max-width: 225px; } .stats__cell:nth-child(3) .stats__cell-text { max-width: 187px; } } .stats__cell-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); color: var(--text-primary); } .stats__cell-desc { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-quaternary); } .stats__cell-value { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); color: var(--brand); white-space: nowrap; } @media (min-width: 1000px) { .stats__cell-value { white-space: normal; } } .areas { scroll-margin-top: var(--header-height); --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; --button-primary: #e5e7ec; --button-primary-hover: #e9ebee; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .areas { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .areas { padding: 0 var(--spacing-3xl); } } .areas__intro { width: 100%; max-width: 1392px; display: flex; align-items: flex-end; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .areas__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .areas__intro { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .areas__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .areas__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); flex: 1 0 0; min-width: 0; max-width: 480px; } @media (min-width: 1440px) { .areas__title-badge { max-width: 540px; } } .areas__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .areas__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .areas__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .areas__heading-muted { color: var(--text-quaternary); } .areas__grid { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 390px) { .areas__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .areas__grid { flex-direction: row; border-left-width: 0; border-right-width: 0; } } .areas__card { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; padding: var(--spacing-3xl); border-style: solid; border-color: var(--border-primary); border-width: 0; } .areas__card--engineering { border-top-width: 1px; border-bottom-width: 1px; } @media (min-width: 390px) { .areas__card--engineering { padding: 0 0 var(--spacing-3xl); border-top-width: 0; border-bottom-width: 0; } .areas__card--supply { padding: var(--spacing-3xl) 0 var(--spacing-6xl); } .areas__content { padding: 0 var(--spacing-3xl); } } @media (min-width: 768px) { .areas__card { flex: 1 1 0; min-width: 0; width: auto; padding: var(--spacing-3xl); } .areas__content { padding: 0; } .areas__card--engineering { border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; } .areas__card--supply { border-top-width: 1px; border-right-width: 1px; } } @media (min-width: 1000px) { .areas__card { padding: var(--spacing-5xl); } } .areas__image { position: relative; width: 100%; aspect-ratio: 615 / 460; overflow: hidden; } .areas__image picture, .areas__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .areas__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3xl); width: 100%; } .areas__card-text { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 272px; } @media (min-width: 390px) { .areas__card-text { max-width: 302px; } } @media (min-width: 768px) { .areas__card-text { max-width: 312px; } } @media (min-width: 1000px) { .areas__card-text { max-width: 396px; } } @media (min-width: 1440px) { .areas__card-text { max-width: 616px; } } .areas__card-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); color: var(--text-primary); } .areas__card-desc { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-quaternary); } .areas__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: fit-content; padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-lg); background-color: var(--background-secondary); border: 1px solid var(--border-primary); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; } @media (hover: hover) { .areas__btn:hover { border-color: var(--border-secondary); color: var(--text-primary); } .areas__btn:hover .areas__btn-icon path { stroke: var(--text-primary); } } .areas__btn.is-pencil-hover { border-color: var(--border-secondary); color: var(--text-primary); } .areas__btn.is-pencil-hover .areas__btn-icon path { stroke: var(--text-primary); } .areas__btn-icon { flex-shrink: 0; display: block; } .areas__btn-icon path { stroke: var(--text-tertiary); transition: stroke 0.15s ease; } .testimonial { width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .testimonial { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .testimonial { padding: 0 var(--spacing-3xl); } } .testimonial__container { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: center; padding: var(--spacing-7xl) var(--spacing-3xl); } @media (min-width: 390px) { .testimonial__container { padding: var(--spacing-7xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .testimonial__container { padding: var(--spacing-8xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .testimonial__container { padding: var(--spacing-9xl) var(--spacing-8xl); } } .testimonial__content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-5xl); } @media (min-width: 1000px) { .testimonial__content { flex-direction: row; align-items: center; gap: var(--spacing-6xl); } } @media (min-width: 1440px) { .testimonial__content { gap: var(--spacing-10xl); } } .testimonial__image { width: 200px; height: 200px; flex-shrink: 0; position: relative; overflow: hidden; border-radius: 12px; background-color: var(--background-secondary); border: 1px solid var(--border-primary); } @media (min-width: 1000px) { .testimonial__image { width: 328px; height: 328px; } } .testimonial__image img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; pointer-events: none; display: block; } .testimonial__body { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4xl); max-width: 580px; } @media (min-width: 1000px) { .testimonial__body { flex: 1 1 0; min-width: 0; max-width: 732px; } } .testimonial__quote-block { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); } @media (min-width: 1440px) { .testimonial__quote-block { gap: var(--spacing-3xl); } } .testimonial__stars { display: flex; align-items: center; gap: var(--spacing-xs); } .testimonial__star { width: 20px; height: 20px; display: block; } .testimonial__quote { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; color: var(--text-primary); font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); } @media (min-width: 390px) { .testimonial__quote { font-family: var(--font-display); font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); } } @media (min-width: 1000px) { .testimonial__quote { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } @media (min-width: 1440px) { .testimonial__quote { font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); } } .testimonial__attribution { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-xs); } .testimonial__name { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body1-size); line-height: var(--body1-line); letter-spacing: var(--body1-tracking); color: var(--text-primary); } .testimonial__role { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-tertiary); } .services { --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; --button-primary: #e5e7ec; --button-primary-hover: #e9ebee; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .services { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .services { padding: 0 var(--spacing-3xl); } } .services__container { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4xl); padding: var(--spacing-8xl) var(--spacing-4xl); } @media (min-width: 390px) { .services__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .services__container { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .services__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .services__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; max-width: 500px; } @media (min-width: 768px) { .services__title-badge { flex: 1 1 0; min-width: 0; } } @media (min-width: 1440px) { .services__title-badge { max-width: 900px; } } .services__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .services__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .services__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .services__heading-muted { color: var(--text-quaternary); } .services__btn { width: 125px; flex-shrink: 0; text-align: center; } .services__grid { width: 100%; max-width: 1392px; display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3, 1fr); } } .services__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-6xl); padding: var(--spacing-3xl); border-style: solid; border-color: var(--border-primary); border-width: 0; } @media (min-width: 768px) { .services__card { gap: var(--spacing-7xl); padding: var(--spacing-4xl); } } @media (min-width: 1000px) { .services__card { gap: var(--spacing-9xl); } } .services__icon { width: 28px; height: 28px; flex-shrink: 0; } .services__icon img { display: block; width: 100%; height: 100%; } .services__card-text { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 250px; } @media (min-width: 1440px) { .services__card-text { max-width: none; } } @media (min-width: 1440px) { .services__card-desc-break { display: none; } } .services__card-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); color: var(--text-primary); } .services__card-desc { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-quaternary); } .services__card { border-bottom-width: 1px; } .services__card:first-child { border-top-width: 1px; } .services__card:last-child { border-bottom-width: 0; } @media (min-width: 390px) { .services__card { border-left-width: 1px; border-right-width: 1px; } } @media (min-width: 768px) { .services__card:nth-child(n) { border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 1px; } .services__card:nth-child(odd) { border-left-width: 1px; } .services__card:nth-child(-n + 4) { border-top-width: 1px; } .services__card:nth-child(3), .services__card:nth-child(4) { border-bottom-width: 1px; } } @media (min-width: 1000px) { .services__card:nth-child(n) { border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 0; } .services__card:nth-child(3n + 1) { border-left-width: 1px; } .services__card:nth-child(3n + 2) { border-left-width: 1px; border-right-width: 1px; } .services__card:nth-child(3n) { border-right-width: 1px; } .services__card:nth-child(-n + 3) { border-top-width: 1px; border-bottom-width: 1px; } } .projects { --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; --button-primary: #e5e7ec; --button-primary-hover: #e9ebee; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .projects { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .projects { padding: 0 var(--spacing-3xl); } } .projects__intro { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .projects__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .projects__intro { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--spacing-4xl); padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .projects__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .projects__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; min-width: 296px; } @media (min-width: 390px) { .projects__title-badge { min-width: 0; } } @media (min-width: 768px) { .projects__title-badge { flex: 1 0 0; max-width: 460px; } } @media (min-width: 1000px) { .projects__title-badge { max-width: 480px; } } @media (min-width: 1440px) { .projects__title-badge { max-width: none; } } .projects__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); color: #325abc; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; } .projects__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .projects__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .projects__heading-muted { color: var(--text-quaternary); } .projects__intro .projects__buttons { display: none; } @media (min-width: 768px) { .projects__intro .projects__buttons { display: flex; } } .projects__buttons { display: flex; gap: var(--spacing-lg); align-items: flex-start; flex-shrink: 0; touch-action: manipulation; } .projects__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background-color: var(--background-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease; touch-action: manipulation; } @media (hover: hover) { .projects__nav-btn:hover { border-color: var(--border-secondary); } } .projects__nav-btn.is-pencil-hover { border-color: var(--border-secondary); } .projects__nav-btn svg { display: block; stroke: currentColor; } .projects__gallery { width: 100%; max-width: 1392px; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); padding: var(--spacing-3xl); overflow: hidden; } @media (min-width: 390px) { .projects__gallery { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .projects__gallery { border-bottom: none; padding: var(--spacing-4xl); } } .projects__viewport { width: 100%; touch-action: pan-y; cursor: grab; } .projects__viewport.is-dragging { cursor: grabbing; } .projects__track { display: flex; gap: var(--spacing-3xl); transition: transform 480ms cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } @media (min-width: 768px) { .projects__track { gap: var(--spacing-4xl); } } @media (prefers-reduced-motion: reduce) { .projects__track { transition: none; } } .projects__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 1 / 1; } @media (min-width: 768px) { .projects__slide { flex-basis: calc((100% - var(--spacing-4xl)) / 2); } } @media (min-width: 1440px) { .projects__slide { flex-basis: calc((100% - 2 * var(--spacing-4xl)) / 3); } } .projects__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .projects__bottom { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-4xl) var(--spacing-3xl); } @media (min-width: 390px) { .projects__bottom { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .projects__bottom { display: none; } } .site-footer { background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); display: flex; justify-content: center; width: 100%; } .footer-padding { display: none; } @media (min-width: 1000px) { .footer-padding { display: block; width: 100%; height: 48px; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); } } .footer__compact { display: flex; flex-direction: column; gap: var(--spacing-7xl); width: 100%; max-width: 1392px; padding: var(--spacing-7xl) var(--spacing-2xl) var(--spacing-4xl); } @media (min-width: 1000px) { .footer__compact { display: none; } } @media (min-width: 390px) { .footer__compact { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } } @media (min-width: 768px) { .footer__compact { gap: var(--spacing-8xl); padding-top: var(--spacing-8xl); padding-bottom: var(--spacing-7xl); padding-left: var(--spacing-6xl); padding-right: var(--spacing-6xl); } } .footer__compact-content { display: flex; flex-direction: column; gap: var(--spacing-6xl); width: 100%; } .footer__compact-columns { display: flex; flex-direction: column; gap: var(--spacing-4xl); width: 100%; } @media (min-width: 768px) { .footer__compact-columns { flex-direction: row; } } .footer__mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; } @media (min-width: 768px) { .footer__mlist { flex: 1 0 0; } } .footer-mlink { display: flex; align-items: center; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--border-primary); font-family: "Inter", sans-serif; font-weight: 500; font-size: 17px; line-height: 22px; color: var(--text-primary); text-decoration: none; } .footer-mlink:hover { color: var(--brand); } @media (min-width: 768px) { .footer-mlink--home { display: none; } } .footer__compact-logo-contact { display: flex; flex-direction: column; gap: var(--spacing-4xl); } .footer__mcontact { display: flex; flex-direction: column; gap: var(--spacing-lg); } @media (min-width: 768px) { .footer__mcontact { gap: var(--spacing-xl); } } .footer-mtext { font-family: "Inter", sans-serif; font-weight: 500; font-size: 17px; line-height: 22px; color: var(--text-primary); text-decoration: none; } .footer-mtext:hover { color: var(--brand); } .footer__compact-bottom { display: flex; flex-direction: column; gap: var(--spacing-xl); width: 100%; } @media (min-width: 390px) { .footer__compact-bottom { min-width: 320px; } } .footer__compact-bottom .footer__legal { width: 100%; } @media (min-width: 768px) { .footer__compact-bottom .footer__legal { width: 400px; } } .footer__wide { display: none; } @media (min-width: 1000px) { .site-footer { padding: 0 var(--spacing-3xl); } .footer__wide { display: flex; flex-direction: column; gap: var(--spacing-9xl); width: 100%; max-width: 1392px; padding: var(--spacing-9xl) var(--spacing-6xl) var(--spacing-5xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } .footer__wide-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } .footer__wide-logo-links { display: flex; align-items: flex-start; gap: var(--spacing-8xl); } .footer__wide-logo-links .footer__logo { margin-top: 4px; } .footer__wide-columns { display: flex; gap: var(--spacing-6xl); align-items: flex-start; } .footer__wide-contact { display: flex; flex-direction: column; gap: var(--spacing-2xl); width: 400px; flex-shrink: 0; } .footer__wide-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; } .footer__wide-bottom .footer__legal { width: 400px; } .footer__logo { display: block; width: 48px; height: 48px; flex-shrink: 0; } .footer__logo img { display: block; width: 100%; height: 100%; } .footer__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .footer__legal { display: flex; gap: var(--spacing-lg); align-items: center; } @media (min-width: 768px) { .footer__legal { gap: var(--spacing-xl); } } .contact, .form { --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; width: 100%; background-color: #fafafb; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .contact { border-bottom: 1px solid var(--border-primary); } .form { border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); } @media (min-width: 390px) { .contact, .form { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .contact, .form { padding: 0 var(--spacing-3xl); } } .contact__badge, .form__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .contact__intro-inner, .form__intro-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); max-width: 900px; width: 100%; flex: 1 0 0; min-width: 0; } .contact__heading, .form__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); } @media (min-width: 1440px) { .contact__heading, .form__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .contact__heading-accent, .form__heading-accent { color: var(--text-primary); } .contact__heading-muted, .form__heading-muted { color: var(--text-quaternary); } .contact__intro { display: flex; align-items: flex-end; gap: var(--spacing-4xl); width: 100%; max-width: 1392px; overflow: hidden; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .contact__intro { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .contact__intro { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .contact__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .contact__cards { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1392px; } @media (min-width: 768px) { .contact__cards { flex-direction: row; } } .contact__cards:last-child .contact__card:first-child { border-top: none; } @media (min-width: 768px) { .contact__cards:last-child .contact__card { border-top: none; } } .contact__card { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%; height: 200px; padding: var(--spacing-3xl); border: 1px solid var(--border-primary); overflow: hidden; } @media (max-width: 767.98px) { .contact__card:not(:first-child) { margin-top: -1px; } } @media (max-width: 389.98px) { .contact__card { border-left: none; border-right: none; } } @media (min-width: 390px) { .contact__card { height: 240px; padding: var(--spacing-4xl); } } @media (min-width: 768px) { .contact__card { height: 260px; width: auto; flex: 1 0 0; min-width: 0; margin-top: 0; } .contact__card:not(:first-child) { margin-left: -1px; } } .contact__cards:last-child .contact__card:last-child { border-bottom: none; } @media (min-width: 768px) { .contact__cards:last-child .contact__card { border-bottom: none; } } .contact__card-icon { display: block; width: 28px; height: 28px; color: var(--brand); flex-shrink: 0; } .contact__card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; max-width: 280px; } @media (min-width: 1000px) { .contact__card-text { max-width: 330px; } } .contact__card-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); width: 100%; } .contact__card-value { display: block; margin: 0; padding: 0; border: none; background: none; text-align: left; font-family: var(--font-body); font-weight: 500; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-quaternary); width: 100%; text-decoration: none; cursor: pointer; transition: color 0.15s ease; } .contact__card-value:hover { color: var(--text-tertiary); } .form__container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1392px; overflow: hidden; } @media (min-width: 390px) { .form__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .form__container { flex-direction: row; } } .form__intro, .form__content { width: 100%; max-width: 1392px; overflow: hidden; } .form__intro { display: flex; align-items: flex-start; gap: var(--spacing-4xl); } @media (min-width: 1000px) { .form__intro { width: auto; flex: 1 0 0; min-width: 0; align-self: stretch; border-right: 1px solid var(--border-primary); } } .form__intro-inner { padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .form__intro-inner { padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .form__intro-inner { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .form__intro-inner { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .form__content { display: flex; align-items: flex-start; gap: var(--spacing-4xl); border-top: 1px solid var(--border-primary); } @media (min-width: 1000px) { .form__content { width: auto; flex: 1 0 0; min-width: 0; border-top: none; } } .form__form { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--spacing-4xl); width: 100%; min-width: 0; flex: 1 0 0; max-width: 620px; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .form__form { padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .form__form { max-width: none; padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .form__form { max-width: 620px; padding: var(--spacing-10xl) var(--spacing-6xl) var(--spacing-9xl); } } @media (min-width: 1440px) { .form__form { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .form__fields { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; } .form__row { display: flex; flex-direction: column; gap: var(--spacing-2xl); width: 100%; } @media (min-width: 768px) { .form__row { flex-direction: row; } .form__row .form__field { flex: 1 0 0; min-width: 0; } } @media (min-width: 1000px) { .form__row { flex-direction: column; } .form__row .form__field { flex: none; min-width: auto; } } @media (min-width: 1440px) { .form__row { flex-direction: row; } .form__row .form__field { flex: 1 0 0; min-width: 0; } } .form__field { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .form__input { position: relative; display: block; width: 100%; height: 54px; box-sizing: border-box; background-color: var(--white); border: 1px solid var(--border-primary); border-radius: var(--spacing-lg); cursor: text; transition: border-color 0.15s ease; } .form__input:focus-within { border-color: var(--brand); } @media (hover: hover) { .form__input:hover { border-color: var(--brand); } } .form__input.is-pencil-hover { border-color: var(--brand); } .form__input.is-invalid { border-color: #d92d20; } .form__input-field { display: block; width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: none; outline: none; background: none; margin: 0; padding: 0 var(--spacing-xl); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--text-primary); transition: padding 0.15s ease; } .form__input-field::placeholder { color: transparent; } .form__input-field:not(:placeholder-shown) { padding-top: 20px; padding-bottom: 4px; } .form__input.is-invalid .form__input-field:not(:placeholder-shown) { color: #d92d20; } .form__input-label { position: absolute; left: var(--spacing-xl); right: var(--spacing-xl); top: 50%; transform: translateY(-50%); display: block; overflow: hidden; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 20px; color: var(--text-quaternary); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transition: font-size 0.15s ease, line-height 0.15s ease, top 0.15s ease, transform 0.15s ease, color 0.15s ease; } .form__input-field:not(:placeholder-shown) ~ .form__input-label { top: 9px; transform: translateY(0); font-size: 12px; line-height: 14px; } .form__input.is-invalid .form__input-field:placeholder-shown ~ .form__input-label { color: #d92d20; } .form__input--textarea { height: auto; min-height: 134px; } .form__input--textarea .form__input-label { top: 16px; transform: none; white-space: normal; } .form__input-field--textarea:not(:placeholder-shown) ~ .form__input-label { top: 9px; } .form__input-field--textarea { display: block; width: 100%; min-height: 134px; padding-top: 16px; padding-bottom: 16px; overflow: hidden; resize: none; line-height: 20px; } .form__input-field--textarea:not(:placeholder-shown) { padding-top: 24px; padding-bottom: 9px; } .form__checkbox-row { display: flex; align-items: flex-start; gap: var(--spacing-md); width: 100%; cursor: pointer; } .form__checkbox-pad { display: flex; align-items: center; flex-shrink: 0; } .form__checkbox-box { position: relative; display: block; width: 20px; height: 20px; background-color: var(--white); border: 1px solid var(--border-primary); border-radius: 6px; transition: background-color 0.15s ease, border-color 0.15s ease; } @media (hover: hover) { .form__checkbox-row:hover .form__checkbox-box { border-color: var(--brand); } } .form__checkbox-row.is-pencil-hover .form__checkbox-box { border-color: var(--brand); } .form__checkbox-check { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.15s ease; } .form__checkbox-input:checked + .form__checkbox-box { background-color: var(--brand); border-color: var(--brand); } .form__checkbox-input:checked + .form__checkbox-box .form__checkbox-check { opacity: 1; } .form__checkbox-input:focus-visible + .form__checkbox-box { outline: 2px solid var(--brand); outline-offset: 2px; } .form__checkbox-label { flex: 1 0 0; min-width: 0; font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--text-tertiary); } .form__checkbox-link { font-weight: 500; color: var(--text-primary); text-decoration: none; } .form__submit { flex-shrink: 0; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl); background-color: #373c43; border-color: #525966; color: #f7f7f7; } .form__submit-icon { flex-shrink: 0; width: 20px; height: 20px; } @media (hover: hover) { .form__submit:hover:not(:disabled) { background-color: #40464e; } } .form__submit.is-pencil-hover:not(:disabled) { background-color: #40464e; } .form__submit:disabled { cursor: default; opacity: 0.85; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .contact-toast { position: fixed; left: 50%; bottom: 20px; z-index: 1100; transform: translate(-50%, 16px); max-width: calc(100% - 40px); display: flex; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl); background-color: #2f3238; border: 1px solid #525966; border-radius: var(--spacing-9xl); box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .contact-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s ease, transform 0.25s ease; } @media (min-width: 768px) { .contact-toast { left: auto; right: 20px; bottom: 20px; transform: translateY(16px); max-width: calc(100vw - 40px); } .contact-toast.is-visible { transform: translateY(0); } } .contact-toast__icon { display: none; flex-shrink: 0; width: 22px; height: 22px; } .contact-toast--send .contact-toast__icon--send, .contact-toast--copy .contact-toast__icon--copy, .contact-toast--error .contact-toast__icon--error { display: block; } .contact-toast__text { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: #f7f7f7; white-space: nowrap; } .doc-hero { width: 100%; display: flex; flex-direction: column; align-items: center; background-color: var(--background-primary); } @media (min-width: 390px) { .doc-hero { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .doc-hero { padding: 0 var(--spacing-3xl); } } .doc-hero__container { width: 100%; max-width: 1392px; display: flex; align-items: flex-start; justify-content: center; gap: var(--spacing-4xl); overflow: hidden; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .doc-hero__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .doc-hero__container { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .doc-hero__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .doc-hero__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; max-width: 720px; min-width: 0; } .doc-hero__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(253, 176, 34, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--brand); white-space: nowrap; } .doc-hero__heading { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); } @media (min-width: 768px) { .doc-hero__heading { font-family: var(--font-display); font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); } } @media (min-width: 1440px) { .doc-hero__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .doc-hero__heading-accent { color: var(--text-primary); } .doc-hero__heading-muted { color: var(--text-quaternary); } .doc-hero--light { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; --background-primary: #fafafb; border-bottom: 1px solid var(--border-primary); } .doc-hero--light .doc-hero__badge { background-color: rgba(50, 90, 188, 0.1); color: #325abc; } .paragraph-l { --text-primary: #181d27; --text-secondary: #414651; --border-primary: #e5e7ec; --background-primary: #fafafb; width: 100%; display: flex; flex-direction: column; align-items: center; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); } @media (min-width: 390px) { .paragraph-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .paragraph-l { padding: 0 var(--spacing-3xl); } } .paragraph-l__container { width: 100%; max-width: 1392px; min-width: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: var(--spacing-4xl) var(--spacing-3xl); } @media (min-width: 390px) { .paragraph-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .paragraph-l__container { padding: var(--spacing-7xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .paragraph-l__container { padding: var(--spacing-8xl); } } .paragraph-l__content { width: 100%; max-width: 720px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3xl); } .paragraph-l__title { margin: 0; width: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } .paragraph-l__text { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 400; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-secondary); overflow-wrap: break-word; } .paragraph-l__text strong { font-weight: 700; } .paragraph-l__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } @media (hover: hover) { .paragraph-l__link:hover { color: var(--text-primary); } } .paragraph-d { width: 100%; display: flex; flex-direction: column; align-items: center; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); } @media (min-width: 390px) { .paragraph-d { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .paragraph-d { padding: 0 var(--spacing-3xl); } } .paragraph-d__container { width: 100%; max-width: 1392px; min-width: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: var(--spacing-4xl) var(--spacing-3xl); } @media (min-width: 390px) { .paragraph-d__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .paragraph-d__container { padding: var(--spacing-7xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .paragraph-d__container { padding: var(--spacing-8xl); } } .paragraph-d__content { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-6xl); min-width: 0; } .paragraph-d__title, .paragraph-d__preamble { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: var(--body2-size); line-height: var(--body2-line); letter-spacing: var(--body2-tracking); color: var(--text-primary); } .paragraph-d__text-browsers { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } .paragraph-d__list { margin: 0; padding-left: var(--spacing-3xl); width: 100%; min-width: 0; list-style: decimal; list-style-position: outside; font-family: var(--font-body); font-weight: 400; font-size: var(--body2-size); line-height: var(--body2-line); color: var(--text-primary); } .paragraph-d__list li { margin: 0; } .paragraph-d__link { color: var(--brand); text-decoration: none; } .paragraph-d__link:hover { opacity: 0.8; } .paragraph-d__sublist { margin: 0; padding-left: var(--spacing-3xl); width: 100%; list-style: disc; list-style-position: outside; } .paragraph-d__sublist li { margin: 0; } .paragraph-d__content--privacy { gap: var(--spacing-4xl); } .paragraph-d__content--privacy .paragraph-d__list > li + li { margin-top: var(--spacing-4xl); } .paragraph-d__table-wrap { width: 100%; margin-top: var(--spacing-3xl); overflow-x: auto; -webkit-overflow-scrolling: touch; } .paragraph-d__table { width: 1150px; max-width: none; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-primary); border-radius: var(--radius-md); overflow: hidden; background-color: var(--background-secondary); } .paragraph-d__table th, .paragraph-d__table td { width: 230px; box-sizing: border-box; vertical-align: top; text-align: left; padding: var(--spacing-lg); border-bottom: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); font-family: var(--font-body); font-size: 14px; line-height: 18px; letter-spacing: -0.07px; overflow-wrap: break-word; word-break: break-word; } .paragraph-d__table th:last-child, .paragraph-d__table td:last-child { border-right: none; } .paragraph-d__table tbody tr:last-child td { border-bottom: none; } .paragraph-d__table thead th { font-weight: 600; color: var(--text-primary); } .paragraph-d__table tbody td { font-weight: 500; color: var(--text-secondary); } .paragraph-d__table td p { margin: 0 0 var(--spacing-lg); } .paragraph-d__table td p:last-child { margin-bottom: 0; } .paragraph-d__browsers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); padding-left: var(--spacing-xs); } @media (min-width: 390px) { .paragraph-d__browsers { padding-left: var(--spacing-4xl); } } .paragraph-d__browser-link { display: block; width: 32px; height: 32px; flex-shrink: 0; line-height: 0; } .paragraph-d__browser-link img { display: block; width: 100%; height: 100%; } .hero-l { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; width: 100%; background-color: #fafafb; border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; overflow: hidden; height: calc(100vh - var(--header-height)); min-height: 600px; max-height: 800px; } @media (min-width: 390px) { .hero-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .hero-l { padding: 0 var(--spacing-3xl); min-height: 640px; max-height: 1000px; } } @media (min-width: 1000px) { .hero-l { min-height: 740px; } } .hero-l__container { width: 100%; max-width: 1392px; min-width: 0; min-height: 0; flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; gap: var(--spacing-5xl); padding: var(--spacing-8xl) var(--spacing-3xl) var(--spacing-4xl); } @media (min-width: 390px) { .hero-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); } } @media (min-width: 768px) { .hero-l__container { gap: var(--spacing-6xl); padding: var(--spacing-9xl) var(--spacing-6xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .hero-l__container { gap: var(--spacing-7xl); padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-8xl); } } .hero-l__title-badge { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } .hero-l__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .hero-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); } @media (min-width: 768px) { .hero-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } @media (min-width: 1000px) { .hero-l__heading { font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-tracking); } } .hero-l__heading-accent { color: var(--text-primary); } .hero-l__heading-muted { color: var(--text-quaternary); } .hero-l__cover { position: relative; width: 100%; flex: 1 0 0; min-height: 0; overflow: hidden; border-radius: var(--radius-md); background-color: #f3f4f6; } .hero-l__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); pointer-events: none; } .hero-l__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .team-l { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; width: 100%; background-color: #fafafb; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .team-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .team-l { padding: 0 var(--spacing-3xl); } } .team-l__container { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .team-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .team-l__container { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .team-l__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .team-l__title-badge { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } .team-l__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .team-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); } @media (min-width: 1440px) { .team-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .team-l__heading-accent { color: var(--text-primary); } .team-l__heading-muted { color: var(--text-quaternary); } .team-l__grid { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 1392px; } @media (min-width: 390px) { .team-l__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .team-l__grid { grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .team-l__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1440px) { .team-l__grid { grid-template-columns: repeat(4, 1fr); } } .team-l__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); min-width: 0; overflow: hidden; padding: var(--spacing-3xl); border-top: 1px solid var(--border-primary); } @media (min-width: 768px) { .team-l__card { padding: var(--spacing-4xl); border-top: none; } .team-l__card:nth-child(n + 3) { border-top: 1px solid var(--border-primary); } .team-l__card:nth-child(2n) { border-left: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .team-l__card:nth-child(-n + 3) { border-top: none; } .team-l__card:nth-child(n + 4) { border-top: 1px solid var(--border-primary); } .team-l__card:nth-child(2n) { border-left: none; } .team-l__card:nth-child(3n + 2) { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1440px) { .team-l__card:nth-child(2n), .team-l__card:nth-child(3n + 2) { border-left: none; border-right: none; } .team-l__card:nth-child(-n + 4) { border-top: none; } .team-l__card:nth-child(n + 5) { border-top: 1px solid var(--border-primary); } .team-l__card:nth-child(4n + 1), .team-l__card:nth-child(4n + 2), .team-l__card:nth-child(4n + 3) { border-right: 1px solid var(--border-primary); } } .team-l__card--placeholder { display: none; } .team-l__card--placeholder .team-l__photo, .team-l__card--placeholder .team-l__meta { opacity: 0; } @media (min-width: 768px) { .team-l__card--placeholder-1 { display: flex; } } @media (min-width: 1000px) { .team-l__card.team-l__card--placeholder-1 { border-right: none; } .team-l__card--placeholder-2 { display: flex; } } @media (min-width: 1440px) { .team-l__card--placeholder-2 { display: none; } } .team-l__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #f3f4f6; } .team-l__photo-img { position: absolute; max-width: none; display: block; } .team-l__photo-img--maksim { left: -11.07%; top: 3.32%; width: 122%; height: 122%; } .team-l__photo-img--evgeniy { left: -5.82%; top: 4.45%; width: 116%; height: 115.43%; } .team-l__photo-img--nikita { left: -2.9%; top: 3.89%; width: 106%; height: 106%; } .team-l__photo-img--natalya { left: -2.52%; top: -2.42%; width: 105%; height: 105%; } .team-l__photo-img--irina { left: -5.28%; top: -3.79%; width: 118%; height: 118%; } .team-l__photo-img--anastasiya { left: -3.44%; top: 9.25%; width: 107%; height: 107%; } .team-l__photo-img--sergey { left: -5.12%; top: 3.17%; width: 105%; height: 105%; } .team-l__meta { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-xxs); } .team-l__name { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); color: var(--text-primary); } .team-l__role { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--body3-size); line-height: var(--body3-line); letter-spacing: var(--body3-tracking); color: var(--text-quaternary); } .docs-l { --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .docs-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .docs-l { padding: 0 var(--spacing-3xl); } } .docs-l__intro { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .docs-l__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .docs-l__intro { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--spacing-4xl); padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .docs-l__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .docs-l__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; min-width: 296px; } @media (min-width: 390px) { .docs-l__title-badge { min-width: 0; } } @media (min-width: 768px) { .docs-l__title-badge { flex: 1 0 0; max-width: 460px; } } @media (min-width: 1000px) { .docs-l__title-badge { max-width: 480px; } } @media (min-width: 1440px) { .docs-l__title-badge { max-width: none; } } .docs-l__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); color: #325abc; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; } .docs-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .docs-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .docs-l__heading-muted { color: var(--text-quaternary); } .docs-l__intro .docs-l__buttons { display: none; } @media (min-width: 768px) { .docs-l__intro .docs-l__buttons { display: flex; } } .docs-l__buttons { display: flex; gap: var(--spacing-lg); align-items: flex-start; flex-shrink: 0; touch-action: manipulation; } .docs-l__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background-color: var(--background-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease; touch-action: manipulation; } @media (hover: hover) { .docs-l__nav-btn:hover { border-color: var(--border-secondary); } } .docs-l__nav-btn.is-pencil-hover { border-color: var(--border-secondary); } .docs-l__nav-btn svg { display: block; stroke: currentColor; } .docs-l__gallery { width: 100%; max-width: 1392px; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); padding: var(--spacing-3xl); overflow: hidden; } @media (min-width: 390px) { .docs-l__gallery { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .docs-l__gallery { border-bottom: none; padding: var(--spacing-4xl); } } .docs-l__viewport { width: 100%; touch-action: pan-y; cursor: grab; } .docs-l__viewport.is-dragging { cursor: grabbing; } .docs-l__track { display: flex; gap: var(--spacing-3xl); transition: transform 480ms cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } @media (min-width: 768px) { .docs-l__track { gap: var(--spacing-4xl); } } @media (prefers-reduced-motion: reduce) { .docs-l__track { transition: none; } } .docs-l__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 1 / 1; } @media (min-width: 768px) { .docs-l__slide { flex-basis: calc((100% - var(--spacing-4xl)) / 2); } } @media (min-width: 1440px) { .docs-l__slide { flex-basis: calc((100% - 2 * var(--spacing-4xl)) / 3); } } .docs-l__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .docs-l__bottom { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-4xl) var(--spacing-3xl); } @media (min-width: 390px) { .docs-l__bottom { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .docs-l__bottom { display: none; } } .gallery-l { --background-primary: #fafafb; --background-secondary: #f3f4f6; --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .gallery-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .gallery-l { padding: 0 var(--spacing-3xl); } } .gallery-l__intro { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .gallery-l__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .gallery-l__intro { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--spacing-4xl); padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .gallery-l__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .gallery-l__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; max-width: 340px; } @media (min-width: 768px) { .gallery-l__title-badge { flex: 1 0 0; } } @media (min-width: 1440px) { .gallery-l__title-badge { max-width: none; } } .gallery-l__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); color: #325abc; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; } .gallery-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .gallery-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .gallery-l__heading-muted { color: var(--text-quaternary); } .gallery-l__intro .gallery-l__buttons { display: none; } @media (min-width: 768px) { .gallery-l__intro .gallery-l__buttons { display: flex; } } .gallery-l__buttons { display: flex; gap: var(--spacing-lg); align-items: flex-start; flex-shrink: 0; touch-action: manipulation; } .gallery-l__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background-color: var(--background-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease; touch-action: manipulation; } @media (hover: hover) { .gallery-l__nav-btn:hover { border-color: var(--border-secondary); } } .gallery-l__nav-btn.is-pencil-hover { border-color: var(--border-secondary); } .gallery-l__nav-btn svg { display: block; stroke: currentColor; } .gallery-l__gallery { width: 100%; max-width: 1392px; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); padding: var(--spacing-3xl); overflow: hidden; } @media (min-width: 390px) { .gallery-l__gallery { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .gallery-l__gallery { border-bottom: none; padding: var(--spacing-4xl); } } .gallery-l__viewport { width: 100%; touch-action: pan-y; cursor: grab; } .gallery-l__viewport.is-dragging { cursor: grabbing; } .gallery-l__track { display: flex; gap: var(--spacing-3xl); transition: transform 480ms cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } @media (min-width: 768px) { .gallery-l__track { gap: var(--spacing-4xl); } } @media (prefers-reduced-motion: reduce) { .gallery-l__track { transition: none; } } .gallery-l__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 1 / 1; } @media (min-width: 768px) { .gallery-l__slide { flex-basis: calc((100% - var(--spacing-4xl)) / 2); } } @media (min-width: 1440px) { .gallery-l__slide { flex-basis: calc((100% - 2 * var(--spacing-4xl)) / 3); } } .gallery-l__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .gallery-l__bottom { width: 100%; max-width: 1392px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-4xl) var(--spacing-3xl); } @media (min-width: 390px) { .gallery-l__bottom { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .gallery-l__bottom { display: none; } } .features-l { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; width: 100%; background-color: #fafafb; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; } @media (min-width: 390px) { .features-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .features-l { padding: 0 var(--spacing-3xl); } } .features-l__intro { width: 100%; max-width: 1392px; display: flex; align-items: flex-end; justify-content: center; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .features-l__intro { padding: var(--spacing-8xl) var(--spacing-4xl); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .features-l__intro { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .features-l__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .features-l__title-badge { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); min-width: 0; } .features-l__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .features-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .features-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .features-l__heading-muted { color: var(--text-quaternary); } .features-l__container { width: 100%; max-width: 1392px; background-color: #f3f4f6; border-top: 1px solid var(--border-primary); padding: var(--spacing-2xl); } @media (min-width: 390px) { .features-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .features-l__container { padding: var(--spacing-4xl); } } @media (min-width: 1440px) { .features-l__container { padding: var(--spacing-7xl); } } .features-l__content { width: 100%; display: flex; flex-direction: column; border: 1px solid var(--border-primary); } @media (min-width: 1000px) { .features-l__content { flex-direction: row; } } .features-l__card { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7xl); padding: var(--spacing-3xl); background-color: #fafafb; } .features-l__card:nth-child(2) { border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); } @media (min-width: 768px) { .features-l__card { padding: var(--spacing-4xl); } } @media (min-width: 1000px) { .features-l__card { flex: 1 0 0; gap: var(--spacing-9xl); padding: var(--spacing-4xl); border-top: none; border-bottom: none; } .features-l__card:nth-child(2) { border-top: none; border-bottom: none; border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1440px) { .features-l__card { padding: var(--spacing-5xl); } } .features-l__icon { display: block; width: 28px; height: 28px; flex-shrink: 0; } .features-l__icon img { display: block; width: 100%; height: 100%; } .features-l__card-text-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } @media (min-width: 390px) { .features-l__card-text-wrap { max-width: 450px; } } @media (min-width: 1000px) { .features-l__card-text-wrap { max-width: 300px; } } .features-l__card-title { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); } .features-l__card-text { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--text-quaternary); } .stages-l { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; width: 100%; background-color: #fafafb; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; overflow: hidden; } @media (min-width: 390px) { .stages-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .stages-l { padding: 0 var(--spacing-3xl); } } .stages-l__container { width: 100%; max-width: 1392px; display: flex; align-items: flex-end; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .stages-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .stages-l__container { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .stages-l__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .stages-l__title-badge { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); min-width: 0; max-width: 900px; } .stages-l__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .stages-l__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .stages-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .stages-l__heading-muted { color: var(--text-quaternary); } .stages-l__grid { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 1392px; border-top: 1px solid var(--border-primary); } @media (min-width: 390px) { .stages-l__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .stages-l__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .stages-l__grid { grid-template-columns: repeat(3, 1fr); } } .stages-l__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7xl); min-width: 0; overflow: hidden; padding: var(--spacing-3xl); } .stages-l__card:not(:first-child) { border-top: 1px solid var(--border-primary); } @media (min-width: 768px) { .stages-l__card { padding: var(--spacing-4xl); } .stages-l__card:nth-child(-n + 2) { border-top: none; } .stages-l__card:nth-child(n + 3) { border-top: 1px solid var(--border-primary); } .stages-l__card:nth-child(2n) { border-left: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .stages-l__card { gap: var(--spacing-8xl); } .stages-l__card:nth-child(-n + 3) { border-top: none; } .stages-l__card:nth-child(n + 4) { border-top: 1px solid var(--border-primary); } .stages-l__card:nth-child(2n) { border-left: none; } .stages-l__card:nth-child(3n + 2) { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1440px) { .stages-l__card { gap: var(--spacing-9xl); } } .stages-l__card--placeholder { display: none; } @media (min-width: 768px) { .stages-l__card--placeholder-1 { display: flex; } } @media (min-width: 1000px) { .stages-l__card.stages-l__card--placeholder-1 { border-right: none; } .stages-l__card--placeholder-2 { display: flex; } } .stages-l__card--placeholder .stages-l__card-number, .stages-l__card--placeholder .stages-l__card-text-wrap { opacity: 0; } .stages-l__card-number { margin: 0; width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 42px; letter-spacing: -0.4px; color: var(--brand); } .stages-l__card-text-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; max-width: 300px; } @media (min-width: 1000px) { .stages-l__card-text-wrap { max-width: 230px; } .stages-l__card:nth-child(3) .stages-l__card-text-wrap { max-width: 210px; } } @media (min-width: 1440px) { .stages-l__card-text-wrap { max-width: 300px; } .stages-l__card:nth-child(3) .stages-l__card-text-wrap { max-width: 300px; } } .stages-l__card-title { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); } .stages-l__card-text { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--text-quaternary); } .portfolio-d { width: 100%; background-color: var(--background-primary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; overflow: hidden; } @media (min-width: 390px) { .portfolio-d { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .portfolio-d { padding: 0 var(--spacing-3xl); } } @media (min-width: 1000px) { .portfolio-d { height: 560px; } } @media (min-width: 1440px) { .portfolio-d { height: 700px; } } .portfolio-d__container { width: 100%; max-width: 1392px; display: flex; flex-direction: column; } @media (min-width: 390px) { .portfolio-d__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .portfolio-d__container { flex: 1 0 0; min-height: 0; flex-direction: row; align-items: center; } } .portfolio-d__panel { display: contents; } @media (min-width: 1000px) { .portfolio-d__panel { display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 0; min-width: 0; height: 100%; padding: var(--spacing-10xl) var(--spacing-6xl) var(--spacing-6xl); } } @media (min-width: 1440px) { .portfolio-d__panel { padding: var(--spacing-10xl) var(--spacing-7xl) var(--spacing-7xl); } } .portfolio-d__title-badge { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); width: 100%; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .portfolio-d__title-badge { padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .portfolio-d__title-badge { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .portfolio-d__title-badge { padding: 0; } } .portfolio-d__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(253, 176, 34, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--brand); } .portfolio-d__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .portfolio-d__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .portfolio-d__heading-muted { color: var(--text-quaternary); } .portfolio-d__media { order: 2; width: 100%; position: relative; overflow: hidden; background-color: var(--background-secondary); border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); aspect-ratio: 1 / 1; padding: var(--spacing-3xl); } @media (min-width: 768px) { .portfolio-d__media { padding: var(--spacing-4xl); } } @media (min-width: 1000px) { .portfolio-d__media { order: 0; width: auto; height: 100%; flex: 0 0 auto; border-top: none; border-bottom: none; border-left: 1px solid var(--border-primary); } } .portfolio-d__viewport { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .portfolio-d__viewport.is-dragging { cursor: grabbing; } .portfolio-d__track { display: flex; gap: var(--spacing-3xl); width: 100%; height: 100%; transition: transform 480ms cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } @media (min-width: 768px) { .portfolio-d__track { gap: var(--spacing-4xl); } } @media (prefers-reduced-motion: reduce) { .portfolio-d__track { transition: none; } } .portfolio-d__slide { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; } .portfolio-d__slide picture { display: block; width: 100%; height: 100%; } .portfolio-d__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .portfolio-d__text-buttons { order: 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4xl); width: 100%; padding: var(--spacing-4xl) var(--spacing-3xl) var(--spacing-6xl); } @media (min-width: 390px) { .portfolio-d__text-buttons { padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-8xl); } } @media (min-width: 768px) { .portfolio-d__text-buttons { flex-direction: row; align-items: flex-start; justify-content: space-between; padding: var(--spacing-6xl) var(--spacing-6xl) var(--spacing-9xl); } } @media (min-width: 1000px) { .portfolio-d__text-buttons { flex-direction: column; padding: 0; } } .portfolio-d__text-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; opacity: 1; transform: translateY(0); transition: opacity 0.26s ease, transform 0.26s ease; } @media (prefers-reduced-motion: reduce) { .portfolio-d__text-wrap { transition: none; } } .portfolio-d__text-wrap.is-swapping { opacity: 0; transform: translateY(10px); } @media (min-width: 768px) { .portfolio-d__text-wrap { flex: 1 0 0; height: 72px; overflow: hidden; } } @media (min-width: 1000px) { .portfolio-d__text-wrap { flex: none; height: auto; overflow: visible; } } .portfolio-d__text-wrap.is-slide-0 { max-width: 230px; } .portfolio-d__text-wrap.is-slide-1 { max-width: 270px; } .portfolio-d__text-wrap.is-slide-2, .portfolio-d__text-wrap.is-slide-3 { max-width: 270px; } @media (min-width: 768px) { .portfolio-d__text-wrap.is-slide-0 { max-width: 370px; } .portfolio-d__text-wrap.is-slide-1 { max-width: 380px; } .portfolio-d__text-wrap.is-slide-2, .portfolio-d__text-wrap.is-slide-3 { max-width: 360px; } } @media (min-width: 1000px) { .portfolio-d__text-wrap.is-slide-0 { max-width: 230px; } .portfolio-d__text-wrap.is-slide-1 { max-width: 270px; } .portfolio-d__text-wrap.is-slide-2, .portfolio-d__text-wrap.is-slide-3 { max-width: 270px; } } @media (min-width: 1440px) { .portfolio-d__text-wrap.is-slide-0 { max-width: 340px; } .portfolio-d__text-wrap.is-slide-1 { max-width: 380px; } .portfolio-d__text-wrap.is-slide-2, .portfolio-d__text-wrap.is-slide-3 { max-width: 370px; } } .portfolio-d__title { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); } .portfolio-d__desc { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--text-quaternary); } .portfolio-d__buttons { display: flex; gap: var(--spacing-lg); align-items: flex-start; flex-shrink: 0; touch-action: manipulation; } .portfolio-d__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background-color: var(--background-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease; touch-action: manipulation; } @media (hover: hover) { .portfolio-d__nav-btn:hover { border-color: var(--border-secondary); } } .portfolio-d__nav-btn.is-pencil-hover { border-color: var(--border-secondary); } .portfolio-d__nav-btn svg { display: block; stroke: currentColor; } .portfolio-d__text-data { display: none; } .catalog-l { --text-primary: #181d27; --text-secondary: #414651; --text-tertiary: #535862; --text-quaternary: #717680; --border-primary: #e5e7ec; --border-secondary: #cbd0d8; --background-secondary: #f3f4f6; width: 100%; background-color: #fafafb; border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; overflow: hidden; } @media (min-width: 390px) { .catalog-l { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .catalog-l { padding: 0 var(--spacing-3xl); } } .catalog-l__container { width: 100%; max-width: 1392px; display: flex; align-items: flex-end; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .catalog-l__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .catalog-l__container { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .catalog-l__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .catalog-l__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); flex: 1 0 0; min-width: 0; max-width: 900px; } .catalog-l__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .catalog-l__heading { margin: 0; width: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .catalog-l__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .catalog-l__heading-muted { color: var(--text-quaternary); } .catalog-l__grid { width: 100%; max-width: 1392px; display: grid; grid-template-columns: 1fr; } @media (min-width: 390px) { .catalog-l__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } @media (min-width: 768px) { .catalog-l__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1440px) { .catalog-l__grid { grid-template-columns: repeat(3, 1fr); } } .catalog-l__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3xl); min-width: 0; overflow: hidden; padding: var(--spacing-3xl); border-bottom: 1px solid var(--border-primary); } .catalog-l__card:nth-last-child(-n + 2) { border-bottom: none; } .catalog-l__card:first-child { border-top: 1px solid var(--border-primary); } @media (min-width: 390px) { .catalog-l__card { gap: var(--spacing-4xl); padding: var(--spacing-4xl); } } @media (min-width: 768px) { .catalog-l__card { border-bottom: none; border-top: 1px solid var(--border-primary); } .catalog-l__card:not(:nth-child(2n + 1)) { border-left: 1px solid var(--border-primary); } } @media (min-width: 1000px) { .catalog-l__card { padding: var(--spacing-5xl); } } @media (min-width: 1440px) { .catalog-l__card:not(:nth-child(2n + 1)) { border-left: none; } .catalog-l__card:not(:nth-child(3n + 1)) { border-left: 1px solid var(--border-primary); } } .catalog-l__card--placeholder { display: none; } @media (min-width: 768px) { .catalog-l__card--placeholder { display: block; } } @media (min-width: 1440px) { .catalog-l__card--placeholder { display: none; } } .catalog-l__cover { width: 100%; aspect-ratio: 384 / 300; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--spacing-md); background-color: var(--background-secondary); } .catalog-l__cover--wilo { padding-bottom: 4px; } .catalog-l__logo { display: block; flex-shrink: 0; } .catalog-l__logo--arbonia, .brand-hero__logo--arbonia { width: 177.806px; height: 30px; } .catalog-l__logo--elco, .brand-hero__logo--elco { width: 112px; height: 28px; } .catalog-l__logo--flamco, .brand-hero__logo--flamco { width: 159.206px; height: 46px; } .catalog-l__logo--geberit, .brand-hero__logo--geberit { width: 174.757px; height: 24px; } .catalog-l__logo--kermi, .brand-hero__logo--kermi { width: 96.842px; height: 36px; } .catalog-l__logo--tece, .brand-hero__logo--tece { width: 98px; height: 50px; } .catalog-l__logo--oventrop, .brand-hero__logo--oventrop { width: 183px; height: 44px; } .catalog-l__logo--viessmann, .brand-hero__logo--viessmann { width: 188.589px; height: 32px; } .catalog-l__logo--wilo, .brand-hero__logo--wilo { width: 93.506px; height: 40px; } .catalog-l__content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } .catalog-l__text { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .catalog-l__card-title { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); } .catalog-l__card-desc { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--text-quaternary); } .catalog-l__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); width: fit-content; flex-shrink: 0; padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-lg); background-color: var(--background-secondary); border: 1px solid var(--border-primary); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; } @media (hover: hover) { .catalog-l__btn:hover { border-color: var(--border-secondary); color: var(--text-primary); } .catalog-l__btn:hover .catalog-l__btn-icon path { stroke: var(--text-primary); } } .catalog-l__btn.is-pencil-hover { border-color: var(--border-secondary); color: var(--text-primary); } .catalog-l__btn.is-pencil-hover .catalog-l__btn-icon path { stroke: var(--text-primary); } .catalog-l__btn-icon { flex-shrink: 0; display: block; } .catalog-l__btn-icon path { stroke: var(--text-tertiary); transition: stroke 0.15s ease; } .brand-hero { --text-primary: #181d27; --text-quaternary: #717680; width: 100%; background-color: #fafafb; display: flex; flex-direction: column; align-items: center; overflow: hidden; height: calc(115vh - var(--header-height)); height: calc(115lvh - var(--header-height)); min-height: 550px; } @media (min-width: 390px) { .brand-hero { min-height: 600px; } } @media (min-width: 768px) { .brand-hero { height: calc(100vh - var(--header-height)); height: calc(100lvh - var(--header-height)); min-height: 800px; } } @media (min-width: 1000px) { .brand-hero { min-height: 900px; } } .brand-hero__container { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: var(--spacing-8xl) 0 var(--spacing-7xl); } @media (min-width: 768px) { .brand-hero__container { padding: var(--spacing-9xl) 0 var(--spacing-8xl); } } @media (min-width: 1000px) { .brand-hero__container { padding: var(--spacing-10xl) 0 var(--spacing-9xl); } } @media (min-width: 1440px) { .brand-hero__container { max-width: 1392px; } } .brand-hero__content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--spacing-3xl); } @media (min-width: 1000px) { .brand-hero__content { flex-direction: row; align-items: flex-end; gap: var(--spacing-4xl); } } @media (min-width: 1440px) { .brand-hero__content { padding: 0; } } .brand-hero__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } @media (min-width: 1000px) { .brand-hero__text { flex: 1 0 0; min-width: 0; } } .brand-hero__back { display: inline-block; flex-shrink: 0; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: -0.075px; color: #325abc; text-decoration: none; white-space: nowrap; } .brand-hero__heading { margin: 0; width: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .brand-hero__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .brand-hero__heading-muted { color: var(--text-quaternary); } .brand-hero__logo { display: none; } @media (min-width: 1000px) { .brand-hero__logo { display: block; flex-shrink: 0; } } .brand-hero__cover { width: 100%; flex: 1 0 0; min-height: 0; position: relative; overflow: hidden; } .brand-hero__cover picture { position: absolute; inset: 0; display: block; } .brand-hero__cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .brand-catalog { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; width: 100%; background-color: #fafafb; border-bottom: 1px solid var(--border-primary); display: flex; flex-direction: column; align-items: center; overflow: hidden; } @media (min-width: 390px) { .brand-catalog { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .brand-catalog { padding: 0 var(--spacing-3xl); } } .brand-catalog__intro { width: 100%; max-width: 1392px; flex-shrink: 0; display: flex; align-items: flex-end; gap: var(--spacing-4xl); padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .brand-catalog__intro { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .brand-catalog__intro { padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .brand-catalog__intro { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } .brand-catalog__title-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); flex: 1 0 0; min-width: 0; } .brand-catalog__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; } .brand-catalog__heading { margin: 0; width: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .brand-catalog__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .brand-catalog__heading-muted { color: var(--text-quaternary); } .brand-catalog__grid { width: 100%; max-width: 1392px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: stretch; gap: 0; } @media (min-width: 390px) { .brand-catalog__grid { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } } .brand-catalog__card { flex: 1 0 0; min-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-3xl); overflow: hidden; padding: var(--spacing-3xl); border-top: 1px solid var(--border-primary); } @media (min-width: 390px) { .brand-catalog__card { padding: var(--spacing-4xl); } } .brand-catalog__card--spacer { display: none; } @media (min-width: 768px) { .brand-catalog__card { min-width: 50%; } .brand-catalog__card:nth-child(odd) { border-right: 1px solid var(--border-primary); } .brand-catalog__card--spacer { display: flex; } } @media (min-width: 1440px) { .brand-catalog__card { padding: var(--spacing-5xl); } } .brand-catalog__image { width: 100%; aspect-ratio: 1 / 1; flex-shrink: 0; position: relative; overflow: hidden; } .brand-catalog__image picture { position: absolute; inset: 0; display: block; } .brand-catalog__image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .brand-catalog__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .brand-catalog__card-title { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.09px; color: var(--text-primary); } .brand-catalog__card-desc { margin: 0; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--text-quaternary); } .hero-404 { --text-primary: #181d27; --text-quaternary: #717680; --border-primary: #e5e7ec; --background-primary: #fafafb; width: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; background-color: var(--background-primary); border-bottom: 1px solid var(--border-primary); height: calc(100vh - var(--header-height)); height: calc(100lvh - var(--header-height)); min-height: 400px; } @media (min-width: 390px) { .hero-404 { padding: 0 var(--spacing-2xl); } } @media (min-width: 768px) { .hero-404 { padding: 0 var(--spacing-3xl); } } @media (min-width: 1440px) { .hero-404 { min-height: 600px; } } .hero-404__container { width: 100%; max-width: 1392px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--spacing-4xl); overflow: hidden; padding: var(--spacing-8xl) var(--spacing-3xl); } @media (min-width: 390px) { .hero-404__container { border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); padding: var(--spacing-8xl) var(--spacing-4xl); } } @media (min-width: 768px) { .hero-404__container { flex-direction: row; align-items: flex-end; justify-content: flex-start; padding: var(--spacing-9xl) var(--spacing-6xl); } } @media (min-width: 1000px) { .hero-404__container { padding: var(--spacing-10xl) var(--spacing-8xl) var(--spacing-9xl); } } @media (min-width: 1440px) { .hero-404__container { justify-content: space-between; gap: 0; } } .hero-404__title-badge { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); } @media (min-width: 768px) { .hero-404__title-badge { flex: 1 0 0; min-width: 0; width: auto; } } .hero-404__badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-md); background-color: rgba(50, 90, 188, 0.1); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #325abc; white-space: nowrap; } .hero-404__heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-line); letter-spacing: var(--h5-tracking); color: var(--text-primary); } @media (min-width: 1440px) { .hero-404__heading { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-tracking); } } .hero-404__heading-muted { color: var(--text-quaternary); } .hero-404 .btn--primary { color: #f7f7f7; border-color: #525966; } .hero-404__filler { width: 100%; max-width: 1392px; flex: 1 0 0; min-height: 0; border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); } .cookie-consent { --cc-bg: #ffffff; --cc-bg-secondary: #f3f4f6; --cc-text: #181d27; --cc-text-secondary: #414651; --cc-text-quaternary: #717680; --cc-border: #e5e7ec; --cc-btn-primary: #373c43; --cc-btn-primary-border: #525966; --cc-btn-primary-text: #f7f7f7; --cc-toggle-off: #f5f5f5; --cc-toggle-on: var(--brand); position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1150; background-color: var(--cc-bg); border-radius: 16px; box-shadow: 0 20px 24px -4px rgba(10, 13, 18, 0.08); opacity: 0; transform: translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease; } .cookie-consent[hidden] { display: block; visibility: hidden; pointer-events: none; } .cookie-consent.is-visible { opacity: 1; transform: translateY(0); } @media (min-width: 768px) { .cookie-consent { right: auto; width: 447px; } } .cookie-consent__body { display: flex; flex-direction: column; gap: var(--spacing-2xl); padding: var(--spacing-3xl) var(--spacing-2xl); } @media (min-width: 768px) { .cookie-consent__body { padding: var(--spacing-3xl); } } .cookie-consent__text-block { display: flex; flex-direction: column; gap: 4px; max-width: 340px; } .cookie-consent__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: -0.08px; color: var(--cc-text); } .cookie-consent__text { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: -0.075px; color: var(--cc-text-quaternary); } .cookie-consent__link { color: var(--cc-text-secondary); text-decoration: none; } .cookie-consent__link:hover { color: var(--cc-text); } .cookie-consent__button-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; } .cookie-consent__btn { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid var(--cc-border); background: none; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 24px; color: var(--cc-text); cursor: pointer; white-space: nowrap; touch-action: manipulation; } .cookie-consent__actions [data-cookie-action="settings"] { flex-basis: 100%; } @media (min-width: 768px) { .cookie-consent__actions [data-cookie-action="settings"] { flex-basis: 0; } } .cookie-consent__btn--ghost { background-color: var(--cc-bg-secondary); } .cookie-consent__btn--ghost:hover { background-color: var(--cc-border); } .cookie-consent__btn--primary { background-color: var(--cc-btn-primary); border-color: var(--cc-btn-primary-border); color: var(--cc-btn-primary-text); } .cookie-consent__btn--primary:hover { background-color: #40464e; } .cookie-consent__categories, .cookie-consent__save-actions { display: none; } .cookie-consent.is-expanded .cookie-consent__actions { display: none; } .cookie-consent.is-expanded .cookie-consent__categories { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; } .cookie-consent.is-expanded .cookie-consent__save-actions { display: flex; } .cookie-consent__category { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: var(--spacing-lg) var(--spacing-xl); border: 1px solid var(--cc-border); border-radius: var(--radius-md); cursor: pointer; } .cookie-consent__category--locked { cursor: default; } .cookie-consent__category-text { display: flex; flex: 1 0 0; flex-direction: column; gap: 2px; min-width: 0; } .cookie-consent__category-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -0.075px; color: var(--cc-text); } .cookie-consent__category-desc { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: -0.07px; color: var(--cc-text-quaternary); } .cookie-consent__toggle { position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: 9999px; background-color: var(--cc-toggle-off); cursor: pointer; transition: background-color 0.15s ease; } .cookie-consent__toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--white); box-shadow: 0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1); transition: transform 0.15s ease; } .cookie-consent__toggle--on { background-color: var(--cc-toggle-on); } .cookie-consent__toggle--on::before { transform: translateX(16px); } .cookie-consent__toggle--locked { cursor: not-allowed; }