:root {
--lp-bg: #f7f7f6;
--lp-text: #1a1a1a;
--lp-muted: #5f5f5f;
--lp-card: #ffffff;
--lp-border: #e8e8e8;
--lp-accent: #007bff;
--lp-view-width: 85vw;
--lp-view-max: 1680px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
}
body {
font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
background: var(--lp-bg);
color: var(--lp-text);
line-height: 1.5;
margin: 0 !important;
padding: 0 !important;
}
a {
color: inherit;
text-decoration: none;
}
.lp-container {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 0 auto;
}
.lp-header {
background: #fff;
border-bottom: 1px solid var(--lp-border);
}
.lp-header__row {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.lp-logo {
font-size: 26px;
font-weight: 800;
letter-spacing: 0.02em;
}
.lp-nav {
display: flex;
align-items: center;
gap: 16px;
font-weight: 600;
}
.lp-main {
padding-bottom: 60px;
}
body.home .lp-main,
body.front-page .lp-main {
padding-top: 18px;
}
.lp-section {
margin-top: 38px;
position: relative;
}
.lp-title {
margin: 0 0 18px;
font-size: clamp(24px, 3vw, 42px);
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
text-wrap: balance;
}
.lp-title::before {
content: "";
position: absolute;
left: -14px;
top: 12px;
width: 6px;
height: 1.2em;
background: linear-gradient(180deg, var(--lp-accent), transparent);
transform: scaleY(0);
transform-origin: top;
animation: lp-bar-grow 1s 0.2s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.lp-subtitle {
margin: 0 0 18px;
color: var(--lp-muted);
font-size: 16px;
}
.lp-grid {
display: grid;
gap: 18px;
}
.lp-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lp-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-card {
background: var(--lp-card);
border: 1px solid var(--lp-border);
border-radius: 14px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
translateZ(0);
}
.lp-card__media {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.lp-card__body {
padding: 14px;
position: relative;
}
.lp-card__body::after {
content: "";
position: absolute;
inset: auto 14px 0;
height: 2px;
background: linear-gradient(90deg, var(--lp-accent), transparent 70%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-card__title {
margin: 0;
font-size: 18px;
font-weight: 700;
}
.lp-card__text {
margin: 8px 0 0;
color: var(--lp-muted);
font-size: 14px;
}
.lp-card:hover {
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
}
.lp-card:hover .lp-card__body::after {
transform: scaleX(1);
}
.lp-story {
position: relative;
}
.lp-story__row {
display: grid;
gap: 12px;
grid-template-columns: repeat(6, minmax(140px, 1fr));
}
.lp-story__item {
border-radius: 16px;
overflow: hidden;
background: #ddd;
aspect-ratio: 9 / 16;
transform-origin: center 75%;
animation: lp-story-breathe 6s ease-in-out infinite;
}
.lp-story__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lp-materials {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 20px;
}
.lp-reveal {
opacity: 1;
transform: none;
filter: none;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease;
}
.lp-reveal.lp-reveal-left {
transform: none;
}
.lp-reveal.lp-reveal-right {
transform: none;
}
.lp-reveal.lp-reveal-pop {
transform: none;
}
.lp-reveal.is-visible {
opacity: 1;
transform: none;
filter: blur(0);
}
.lp-tilt {
will-change: transform;
}
.lp-materials__text {
background: #fff;
border: 1px solid var(--lp-border);
border-radius: 14px;
padding: 20px;
}
.lp-list {
margin: 0;
padding-left: 18px;
}
.lp-list li + li {
margin-top: 8px;
}
.lp-footer {
margin-top: 50px;
border-top: 1px solid var(--lp-border);
background: #fff;
}
.lp-footer__row {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--lp-muted);
font-size: 14px;
}
.lp-product {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 24px;
}
.lp-product__main-image {
width: 100%;
border-radius: 14px;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.lp-product__gallery {
padding: 12px;
}
.lp-product__info .lp-card__body {
padding: 20px;
}
.lp-product__price {
margin: 14px 0 0;
font-size: 18px;
}
.lp-thumbs {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.lp-thumbs img {
width: 78px;
height: 78px;
border-radius: 10px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
}
.lp-thumbs img.is-active {
border-color: var(--lp-accent);
}
.lp-spec-table {
margin-top: 14px;
border-top: 1px solid var(--lp-border);
}
.lp-spec-row {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--lp-border);
}
.lp-actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.lp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--lp-border);
background: #fff;
font-weight: 700;
}
.lp-btn--accent {
background: var(--lp-accent);
color: #fff;
border-color: var(--lp-accent);
}
.lp-contact,
.lp-catalog-form {
background: #fff;
border: 1px solid var(--lp-border);
border-radius: 14px;
padding: 20px;
}
.lp-form-grid {
display: grid;
gap: 12px;
}
.lp-field input,
.lp-field textarea {
width: 100%;
border: 1px solid var(--lp-border);
border-radius: 10px;
padding: 11px 12px;
font: inherit;
}
@keyframes lp-story-breathe {
0%,
100% {
transform: translateY(0) rotateZ(0deg);
}
50% {
transform: translateY(-3px) rotateZ(-0.35deg);
}
}
@keyframes lp-bar-grow {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@media (max-width: 980px) {
.lp-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-story__row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lp-materials {
grid-template-columns: 1fr;
}
.lp-product {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.lp-header__row {
min-height: 64px;
}
.lp-logo {
font-size: 21px;
}
.lp-nav {
font-size: 14px;
gap: 12px;
}
.lp-grid--3,
.lp-grid--2 {
grid-template-columns: 1fr;
}
.lp-story__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.lp-reveal,
.lp-card,
.lp-story__item,
.lp-title::before,
.lp-card__body::after {
animation: none !important;
transition: none !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
} header.header {
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 1100;
background: transparent;
box-shadow: none;
padding: 0;
}
.header__wrapper {
max-width: none;
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px clamp(12px, 3vw, 44px);
gap: 20px;
border-radius: 0 0 20px 20px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: linear-gradient(
130deg,
rgba(255, 255, 255, 0.82),
rgba(240, 248, 255, 0.64)
);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 12px 30px rgba(18, 39, 66, 0.14);
transition: background 0.35s ease, box-shadow 0.35s ease,
transform 0.35s ease;
}
header.header.is-scrolled .header__wrapper {
transform: translateY(-3px);
background: linear-gradient(
130deg,
rgba(255, 255, 255, 0.9),
rgba(232, 242, 255, 0.76)
);
box-shadow: 0 16px 34px rgba(10, 34, 66, 0.2);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 118px;
height: auto;
}
nav.menu {
margin-left: 40px;
flex: 1;
}
nav.menu ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
nav.menu ul li a {
text-decoration: none;
color: #15253c;
font-size: 16px;
font-weight: 600;
font-family: "Poppins", "Montserrat", sans-serif;
transition: color 0.3s ease;
display: block;
padding: 7px 0;
position: relative;
}
nav.menu ul li a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #007bff, #67bcff);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
nav.menu ul li a:hover {
color: #007bff;
}
nav.menu ul li a:hover::after {
transform: scaleX(1);
}
.buttons {
display: flex;
gap: 12px;
}
.button {
padding: 11px 18px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 15px;
text-decoration: none;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
font-family: "Poppins", "Montserrat", sans-serif;
}
.whatsapp {
background: linear-gradient(145deg, #2ad16e, #1baa58);
color: #fff;
box-shadow: 0 8px 20px rgba(26, 171, 88, 0.28);
}
.callback {
background: linear-gradient(145deg, #1485ff, #006ce4);
color: #fff;
box-shadow: 0 8px 20px rgba(0, 108, 228, 0.28);
}
.button:hover {
transform: translateY(-1px);
opacity: 0.94;
}
.burger {
display: none;
cursor: pointer;
width: 30px;
height: 25px;
position: relative;
z-index: 1002;
background: transparent;
border: none;
outline: none;
}
.burger span {
display: block;
width: 25px;
height: 3px;
background: #15253c;
margin: 5px;
transition: all 0.3s ease;
border-radius: 3px;
}
.mobile-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
width: min(var(--lp-view-width), var(--lp-view-max));
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
padding: 14px 20px;
z-index: 1001;
box-shadow: 0 12px 30px rgba(18, 39, 66, 0.16);
border-radius: 18px;
}
.mobile-menu.is-open {
display: block;
transform: translateX(-50%) translateY(0);
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu ul li {
margin-bottom: 10px;
}
.mobile-menu ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: 600;
font-family: "Poppins", "Montserrat", sans-serif;
display: block;
padding: 5px 0;
}
.mobile-menu .mobile-buttons {
margin-top: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(145deg, #1485ff, #006ce4);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
border: none;
z-index: 999;
}
.scroll-to-top.show {
opacity: 1;
visibility: visible;
}
.scroll-to-top:hover {
background: #0056b3;
transform: translateY(-5px);
}
.my-popup-bg {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 2000;
backdrop-filter: blur(3px);
}
.my-popup-bg.is-open {
display: flex;
}
.my-popup {
background: rgba(255, 255, 255, 0.97);
padding: 30px;
border-radius: 15px;
text-align: center;
position: relative;
max-width: 450px;
width: 90%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(215, 230, 255, 0.9);
}
.my-popup-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.05);
border: none;
font-size: 18px;
line-height: 1;
cursor: pointer;
color: #555;
width: 30px;
height: 30px;
border-radius: 50%;
}
.my-popup h3 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
color: #333;
}
.my-popup p {
font-size: 1rem;
color: #666;
margin-bottom: 1.5rem;
}
.my-popup form label {
display: block;
text-align: left;
margin-bottom: 5px;
font-size: 0.9rem;
font-weight: 600;
color: #333;
}
.my-popup form input,
.my-popup form textarea {
width: 100%;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.my-popup-submit {
width: 100%;
padding: 14px;
background: #007bff;
color: #fff;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
.footer {
background: #fafafa;
color: #000;
padding: 40px 20px;
display: flex;
justify-content: center;
position: relative;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: min(var(--lp-view-width), var(--lp-view-max));
width: 100%;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo img {
width: 120px;
height: auto;
}
.footer-info {
font-size: 14px;
text-align: right;
}
.footer-links {
display: flex;
flex-direction: column;
text-align: right;
}
.footer-links a {
color: #000;
text-decoration: none;
margin-bottom: 5px;
transition: opacity 0.3s ease;
}
.footer-links a:hover {
opacity: 0.7;
}
@media (max-width: 768px) {
nav.menu,
.buttons {
display: none;
}
.burger {
display: block;
margin-left: 10px;
}
.header__wrapper {
padding: 14px 16px;
}
.footer-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-info,
.footer-links {
text-align: center;
margin-top: 15px;
}
}
@media (max-width: 480px) {
.header__wrapper {
padding: 12px 14px;
}
.logo img {
width: 100px;
}
.scroll-to-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
} .lp-catalog-page {
margin-top: 10px;
}
.lp-catalog-head {
margin-bottom: 8px;
}
.lp-catalog-head .lp-title {
margin-bottom: 6px;
}
.lp-catalog-head .lp-subtitle {
max-width: 760px;
}
.lp-catalog-tabs-wrap {
margin-top: 6px;
margin-bottom: 10px;
}
.lp-catalog-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 6px;
border: 1px solid #dce5f2;
border-radius: 14px;
background: #f7faff;
}
.lp-catalog-tab {
border: 1px solid transparent;
background: transparent;
color: #264869;
border-radius: 10px;
padding: 9px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease,
box-shadow 0.2s ease;
}
.lp-catalog-tab:hover {
transform: translateY(-1px);
background: #edf4ff;
border-color: #d1def2;
}
.lp-catalog-tab.is-active {
background: #fff;
border-color: #b7d1f5;
color: #0e4f94;
box-shadow: 0 6px 12px rgba(20, 76, 140, 0.12);
}
.lp-catalog-subtabs-wrap {
margin: 0 0 14px;
}
.lp-catalog-subtabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lp-catalog-subtab {
border: 1px solid #d5e1f3;
background: #fff;
color: #31547c;
border-radius: 999px;
padding: 7px 11px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease,
background-color 0.2s ease;
}
.lp-catalog-subtab:hover {
transform: translateY(-1px);
border-color: #b6cef0;
color: #1f4f84;
}
.lp-catalog-subtab.is-active {
background: #1986ff;
border-color: #1986ff;
color: #fff;
box-shadow: 0 8px 14px rgba(25, 134, 255, 0.22);
}
.lp-catalog-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 12px;
align-items: stretch;
}
.lp-catalog-empty {
margin: 16px 0 0;
color: #5a6577;
}
.lp-catalog-card {
border-radius: 14px;
overflow: hidden;
border: 1px solid #e0e8f3;
background: #fff;
box-shadow: 0 6px 16px rgba(17, 40, 68, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.lp-catalog-card:hover {
transform: translateY(-4px);
border-color: #bfd5f1;
box-shadow: 0 14px 24px rgba(17, 40, 68, 0.12);
}
.lp-catalog-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.lp-catalog-card__media-wrap {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #edf2fa;
}
.lp-catalog-card__media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.lp-catalog-card:hover .lp-catalog-card__media {
transform: scale(1.035);
}
.lp-catalog-card__body {
padding: 11px 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
}
.lp-catalog-card__title {
margin: 0;
font-size: 17px;
line-height: 1.16;
}
.lp-catalog-card__text {
margin: 0;
color: #5a6577;
font-size: 13px;
line-height: 1.42;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lp-catalog-card__specs {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
}
.lp-catalog-card__specs li {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: baseline;
font-size: 12px;
padding: 6px 8px;
border-radius: 8px;
background: #f5f8fd;
}
.lp-catalog-card__specs span {
color: #627288;
white-space: nowrap;
}
.lp-catalog-card__specs strong {
margin-left: auto;
color: #1f2d41;
font-weight: 700;
text-align: right;
}
.lp-catalog-card__meta {
margin-top: auto;
padding-top: 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lp-catalog-card__meta.is-no-price {
justify-content: flex-end;
}
.lp-catalog-card__price {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(0, 123, 255, 0.1);
color: #0f4f8f;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
}
.lp-catalog-card__more {
color: #0d5fb5;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
} .lp-contacts-page {
margin-top: 10px;
}
.lp-contacts-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
}
.lp-contacts-info,
.lp-contacts-form-wrap {
background: #fff;
border: 1px solid #e7edf6;
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 18px rgba(17, 40, 68, 0.06);
}
.lp-contacts-highlight {
background: #eaf3ff;
border-left: 4px solid #007bff;
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 16px;
}
.lp-contacts-highlight p {
margin: 0;
}
.lp-contacts-highlight p + p {
margin-top: 8px;
}
.lp-contacts-highlight span {
font-weight: 700;
}
.lp-contacts-address {
margin: 0 0 14px;
}
.lp-contacts-socials {
margin-top: 16px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lp-contacts-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid #d9e6fb;
background: #f7fbff;
}
.lp-contacts-form {
display: grid;
gap: 8px;
}
.lp-contacts-form input,
.lp-contacts-form textarea {
width: 100%;
border: 1px solid #dbe6f6;
border-radius: 10px;
padding: 11px 12px;
font: inherit;
margin-bottom: 8px;
}
.lp-contacts-map {
margin-top: 18px;
background: #fff;
border: 1px solid #e7edf6;
border-radius: 16px;
padding: 10px;
overflow: hidden;
}
@media (max-width: 1300px) {
.lp-catalog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.lp-catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-contacts-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.lp-catalog-tab {
width: 100%;
text-align: center;
}
.lp-catalog-subtab {
width: 100%;
text-align: center;
border-radius: 10px;
}
.lp-catalog-grid {
grid-template-columns: 1fr;
}
} .lp-legacy-home,
.lp-legacy-catalog,
.lp-legacy-contacts {
width: 100%;
overflow-x: clip;
}
.lp-legacy-home img,
.lp-legacy-catalog img,
.lp-legacy-contacts img {
max-width: 100%;
height: auto;
}
.lp-legacy-home .container,
.lp-legacy-home .carousel-outer,
.lp-legacy-home .carousel-container,
.lp-legacy-home .materials-container,
.lp-legacy-home .design-container,
.lp-legacy-home .faq-container,
.lp-legacy-home .divider-text,
.lp-legacy-home .modern-section {
width: min(var(--lp-view-width), var(--lp-view-max)) !important;
max-width: min(var(--lp-view-width), var(--lp-view-max)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home .lp-legacy-home > *:not(style):not(script),
body.front-page .lp-legacy-home > *:not(style):not(script) {
width: min(var(--lp-view-width), var(--lp-view-max));
max-width: min(var(--lp-view-width), var(--lp-view-max));
margin-left: auto;
margin-right: auto;
}
body.home .lp-legacy-home .carousel-outer,
body.front-page .lp-legacy-home .carousel-outer {
opacity: 0;
transform: translateY(26px) scale(0.985);
animation: lp-hero-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
} body.home .lp-legacy-home > h2.section-title,
body.front-page .lp-legacy-home > h2.section-title,
body.home .lp-legacy-home > .section-divider,
body.front-page .lp-legacy-home > .section-divider,
body.home .lp-legacy-home .lp-examples-builder,
body.front-page .lp-legacy-home .lp-examples-builder {
width: min(var(--lp-view-width), var(--lp-view-max)) !important;
max-width: min(var(--lp-view-width), var(--lp-view-max)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.home .lp-legacy-home .lp-examples-builder,
body.front-page .lp-legacy-home .lp-examples-builder {
display: block;
margin-top: 28px !important;
margin-bottom: 36px !important;
} body.home .lp-legacy-home .lp-examples-builder ~ .divider-container,
body.front-page .lp-legacy-home .lp-examples-builder ~ .divider-container,
body.home .lp-legacy-home .lp-examples-builder ~ .container,
body.front-page .lp-legacy-home .lp-examples-builder ~ .container,
body.home .lp-legacy-home .lp-examples-builder ~ .contact-section,
body.front-page .lp-legacy-home .lp-examples-builder ~ .contact-section {
width: min(var(--lp-view-width), var(--lp-view-max)) !important;
max-width: min(var(--lp-view-width), var(--lp-view-max)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home .lp-legacy-home .lp-examples-builder ~ .container,
body.front-page .lp-legacy-home .lp-examples-builder ~ .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.home .lp-legacy-home .lp-examples-builder ~ .contact-section,
body.front-page .lp-legacy-home .lp-examples-builder ~ .contact-section {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px !important;
}
@media (max-width: 980px) {
body.home .lp-legacy-home .lp-examples-builder ~ .contact-section,
body.front-page .lp-legacy-home .lp-examples-builder ~ .contact-section {
grid-template-columns: 1fr !important;
}
}
@keyframes lp-hero-enter {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .lp-stories-fixed {
position: relative;
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 14px auto 24px;
background: #f9f9f9;
border-radius: 14px;
padding: 14px 12px 42px;
border: 1px solid #ececec;
}
.lp-stories-ig__track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 4px;
}
.lp-stories-ig__track::-webkit-scrollbar {
display: none;
}
.lp-story-item {
flex: 0 0 160px;
height: 280px;
border-radius: 16px;
overflow: hidden;
display: block;
border: 1px solid #e7e7e7;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-story-item img,
.lp-story-item video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lp-story-item--button {
padding: 0;
background: transparent;
cursor: pointer;
}
.lp-story-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
}
.lp-stories-fixed__btn {
position: absolute;
bottom: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.lp-stories-fixed__btn--left {
right: 54px;
}
.lp-stories-fixed__btn--right {
right: 14px;
}
.lp-stories-ig-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
}
.lp-stories-ig-modal[hidden] {
display: none !important;
}
.lp-stories-ig-modal__close {
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.lp-stories-ig-modal__frame {
width: min(420px, calc(100vw - 24px));
height: min(740px, calc(100vh - 36px));
border-radius: 14px;
overflow: hidden;
background: #000;
position: relative;
}
.lp-stories-ig-modal__progress {
position: absolute;
left: 12px;
right: 12px;
top: 12px;
display: flex;
gap: 4px;
z-index: 5;
}
.lp-stories-ig-modal__bar {
flex: 1;
height: 3px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.34);
overflow: hidden;
}
.lp-stories-ig-modal__bar-fill {
width: 0;
height: 100%;
background: #fff;
}
.lp-stories-ig-modal__slides,
.lp-stories-ig-modal__slide {
width: 100%;
height: 100%;
}
.lp-stories-ig-modal__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.28s ease;
}
.lp-stories-ig-modal__slide.is-active {
opacity: 1;
z-index: 2;
}
.lp-stories-ig-modal__slide img,
.lp-stories-ig-modal__slide video {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-stories-ig-modal__cta {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, 0.65);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 999px;
padding: 8px 12px;
font-size: 14px;
z-index: 4;
}
.lp-stories-ig-modal__nav {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
z-index: 3;
}
.lp-stories-ig-modal__nav--left {
left: 0;
}
.lp-stories-ig-modal__nav--right {
right: 0;
}
@media (max-width: 768px) {
.lp-story-item {
flex: 0 0 132px;
height: 230px;
}
} .lp-new-directions {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 28px auto 34px;
padding: 20px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f6faff);
border: 1px solid #e7eef9;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.lp-new-directions--pending {
display: none;
}
.lp-new-directions__title {
margin: 0 0 10px;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.lp-new-directions__subtitle {
margin: 0 0 18px;
color: #5d6778;
font-size: 15px;
}
.lp-new-directions__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.lp-new-card {
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid #e6ebf4;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.lp-new-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.09);
}
.lp-new-card__link {
display: grid;
grid-template-columns: 220px 1fr;
align-items: stretch;
color: inherit;
text-decoration: none;
}
.lp-new-card__media-wrap {
display: block;
min-height: 180px;
}
.lp-new-card__media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lp-new-card__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 18px;
}
.lp-new-card__name {
display: block;
font-weight: 800;
font-size: 22px;
margin-bottom: 8px;
}
.lp-new-card__desc {
color: #596273;
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 900px) {
.lp-new-directions__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.lp-new-card__link {
grid-template-columns: 1fr;
}
.lp-new-card__media-wrap {
min-height: 160px;
}
} .lp-showcase {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 28px auto 30px;
}
.lp-showcase__tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 12px;
}
.lp-showcase__tab {
border: 1px solid #d8e4f7;
background: #f7faff;
color: #17355b;
border-radius: 12px;
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.lp-showcase__tab.is-active {
background: linear-gradient(140deg, #1688ff, #0070ea);
border-color: #0070ea;
color: #fff;
}
.lp-showcase__card {
background: #fff;
border: 1px solid #e5ecf7;
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 22px rgba(16, 39, 67, 0.08);
}
.lp-showcase__top {
display: flex;
align-items: center;
gap: 12px;
}
.lp-showcase__arrow {
width: 36px;
height: 36px;
border: 1px solid #cfe0f8;
border-radius: 50%;
background: #f4f9ff;
color: #15365f;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.lp-showcase__name {
margin: 0;
font-size: clamp(24px, 3vw, 38px);
}
.lp-showcase__content {
margin-top: 12px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 18px;
}
.lp-showcase__left {
min-width: 0;
}
.lp-showcase__main-wrap {
background: #f2f3f5;
border-radius: 14px;
border: 1px solid #eceff4;
overflow: hidden;
}
.lp-showcase__main {
width: 100%;
height: 430px;
object-fit: cover;
display: block;
}
.lp-showcase__thumbs {
margin-top: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lp-showcase__thumb {
width: 88px;
height: 66px;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
background: #fff;
}
.lp-showcase__thumb.is-active {
border-color: var(--lp-accent);
}
.lp-showcase__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-showcase__desc {
margin: 0 0 10px;
color: #556174;
line-height: 1.5;
}
.lp-showcase__specs {
background: #f4f4f4;
border: 1px solid #ececec;
border-radius: 12px;
padding: 14px;
min-height: 130px;
}
.lp-showcase__spec-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.lp-showcase__actions {
margin-top: 16px;
display: flex;
gap: 10px;
} .lp-info-tabs {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 26px auto 22px;
}
.lp-info-tabs__controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.lp-info-tabs__tab {
border: 1px solid #d8e4f7;
background: #f7faff;
color: #17355b;
border-radius: 12px;
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.lp-info-tabs__tab.is-active {
background: linear-gradient(140deg, #1688ff, #0070ea);
border-color: #0070ea;
color: #fff;
}
.lp-info-tabs__content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px;
}
.lp-info-tabs__text p {
margin: 0 0 10px;
color: #3e434e;
line-height: 1.52;
}
.lp-info-tabs__faq-item {
border-bottom: 1px solid #d4d6dc;
}
.lp-info-tabs__faq-q {
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 14px 0;
font-size: 18px;
font-weight: 700;
color: #30333a;
cursor: pointer;
}
.lp-info-tabs__faq-q span {
display: inline-block;
width: 24px;
}
.lp-info-tabs__faq-a {
display: none;
color: #565c68;
padding: 0 0 12px 24px;
}
.lp-info-tabs__faq-item.is-open .lp-info-tabs__faq-a {
display: block;
} .lp-examples-builder {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 28px auto 36px;
}
.lp-home-focus {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin: 8px 0 24px;
}
.lp-home-focus__item {
background: #fff;
border: 1px solid #e7edf7;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 22px rgba(15, 39, 66, 0.08);
opacity: 1;
transform: none;
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-examples-builder.is-visible .lp-home-focus__item {
opacity: 1;
transform: translateY(0) scale(1);
}
.lp-examples-builder.is-visible .lp-home-focus__item:nth-child(2) {
transition-delay: 0.14s;
}
.lp-home-focus__media img {
display: block;
width: 100%;
height: 250px;
object-fit: cover;
}
.lp-home-focus__content {
padding: 16px 16px 18px;
}
.lp-home-focus__content h3 {
margin: 0 0 8px;
font-size: 24px;
line-height: 1.15;
}
.lp-home-focus__content p {
margin: 0 0 12px;
color: #546172;
line-height: 1.55;
}
.lp-home-focus__content a {
font-weight: 700;
color: #007bff;
text-decoration: none;
}
.lp-ex-grid {
display: grid;
gap: 16px;
}
.lp-ex-grid > * {
opacity: 1;
transform: none;
transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-examples-builder.is-visible .lp-ex-grid > * {
opacity: 1;
transform: translateY(0);
}
.lp-examples-builder.is-visible .lp-ex-grid > *:nth-child(2) {
transition-delay: 0.08s;
}
.lp-examples-builder.is-visible .lp-ex-grid > *:nth-child(3) {
transition-delay: 0.16s;
}
.lp-examples-builder.is-visible .lp-ex-grid > *:nth-child(4) {
transition-delay: 0.24s;
}
.lp-examples-builder.is-visible .lp-ex-grid > *:nth-child(5) {
transition-delay: 0.32s;
}
.lp-ex-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.lp-ex-two img,
.lp-ex-mix img {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 14px;
display: block;
}
.lp-ex-mix {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 16px;
align-items: stretch;
}
.lp-ex-panel {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 18px;
}
.lp-ex-panel h3 {
margin: 0 0 10px;
font-size: 28px;
line-height: 1.1;
}
.lp-ex-panel p {
margin: 0;
color: #525252;
line-height: 1.5;
}
.lp-ex-under {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lp-ex-under .lp-ex-under-left p {
margin-top: 10px;
color: #555;
line-height: 1.5;
}
@media (max-width: 980px) {
.lp-showcase__content,
.lp-info-tabs__content {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.lp-home-focus {
grid-template-columns: 1fr;
}
.lp-home-focus__media img {
height: 220px;
}
.lp-ex-two,
.lp-ex-mix,
.lp-ex-under {
grid-template-columns: 1fr;
}
.lp-ex-two img,
.lp-ex-mix img {
height: 260px;
}
} .lp-rd-home {
padding-bottom: 10px;
}
.lp-rd-wrap {
width: min(var(--lp-view-width), var(--lp-view-max));
margin: 0 auto;
}
.lp-rd-home .lp-reveal {
opacity: 0;
transform: translateY(24px);
filter: blur(5px);
}
.lp-rd-home .lp-reveal.lp-reveal-left {
transform: translateX(-26px);
}
.lp-rd-home .lp-reveal.lp-reveal-right {
transform: translateX(26px);
}
.lp-rd-home .lp-reveal.lp-reveal-pop {
transform: translateY(20px) scale(0.97);
}
.lp-rd-home .lp-reveal.is-visible {
opacity: 1;
transform: none;
filter: blur(0);
}
.lp-rd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid #d7dce3;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
transition: transform 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease,
color 0.24s ease, border-color 0.24s ease;
}
.lp-rd-btn:hover {
transform: translateY(-2px);
}
.lp-rd-btn--dark {
background: #1a1a1a;
border-color: #1a1a1a;
color: #fff;
box-shadow: 0 8px 18px rgba(17, 17, 17, 0.2);
}
.lp-rd-btn--dark:hover {
background: #007bff;
border-color: #007bff;
}
.lp-rd-btn--light {
background: rgba(255, 255, 255, 0.8);
color: #1a1a1a;
backdrop-filter: blur(8px);
}
.lp-rd-btn--light:hover {
background: #fff;
box-shadow: 0 8px 18px rgba(25, 29, 27, 0.12);
}
.lp-rd-btn--accent {
background: #007bff;
border-color: #007bff;
color: #fff;
box-shadow: 0 10px 22px rgba(0, 123, 255, 0.3);
}
.lp-rd-btn--accent:hover {
background: #006ce0;
border-color: #006ce0;
}
.lp-rd-hero {
margin-top: 6px;
background: #f7f7f6;
border: 1px solid #e1e5ec;
border-radius: 16px;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
height: calc(100svh - 120px);
max-height: 820px;
}
.lp-rd-hero__top {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: clamp(24px, 4vw, 72px);
align-items: end;
padding: clamp(24px, 3.2vw, 56px);
}
.lp-rd-hero__title {
margin: 0;
font-size: clamp(38px, 4.8vw, 98px);
line-height: 0.86;
letter-spacing: -0.03em;
text-transform: uppercase;
font-weight: 800;
}
.lp-rd-hero__line {
display: block;
overflow: hidden;
transform: translateY(108%);
opacity: 0;
animation: lp-rd-line-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lp-rd-hero__line:nth-child(2) {
animation-delay: 0.08s;
}
.lp-rd-hero__line:nth-child(3) {
animation-delay: 0.16s;
}
.lp-rd-hero__line:nth-child(4) {
animation-delay: 0.24s;
}
.lp-rd-hero__line em {
font-style: normal;
color: #007bff;
}
.lp-rd-hero__desc {
margin: 0;
justify-self: end;
max-width: 420px;
color: #707a85;
font-size: clamp(12px, 0.92vw, 16px);
line-height: 1.72;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: center;
font-weight: 500;
}
.lp-rd-hero__media {
border-top: 1px solid #dce1e9;
overflow: hidden;
min-height: 0;
height: 100%;
background: #dbdbdb;
}
.lp-rd-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: lp-rd-hero-drift 20s ease-in-out infinite alternate;
}
.lp-rd-stories-head {
margin-top: 72px;
}
.lp-rd-kicker {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #6c7786;
font-weight: 700;
}
.lp-rd-home .lp-stories-fixed {
margin-top: 10px;
margin-bottom: 36px;
}
.lp-rd-home .lp-story-item {
border-radius: 20px;
}
.lp-rd-categories {
margin-top: 30px;
margin-bottom: 30px;
}
.lp-rd-categories__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(20px, 4vw, 64px);
align-items: stretch;
}
.lp-rd-categories__list {
border-top: 1px solid #d6dce4;
}
.lp-rd-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: clamp(90px, 6.6vw, 118px);
border-bottom: 1px solid #d6dce4;
color: #151b23;
transition: color 0.22s ease, padding-left 0.22s ease;
}
.lp-rd-cat-row:hover {
color: #007bff;
padding-left: 14px;
}
.lp-rd-cat-row__title {
margin: 0;
font-size: clamp(23px, 2.7vw, 46px);
font-weight: 800;
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.lp-rd-cat-row__arrow {
font-size: clamp(26px, 2.2vw, 38px);
line-height: 1;
font-weight: 500;
color: currentColor;
}
.lp-rd-categories__side {
display: flex;
flex-direction: column;
min-height: 100%;
gap: 10px;
}
.lp-rd-categories__photo {
overflow: hidden;
border-radius: 18px;
border: 1px solid #d6dce4;
background: #dfe3ea;
height: clamp(100px, 9vw, 150px);
min-height: 0;
flex: 0 0 auto;
}
.lp-rd-categories__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lp-rd-categories__text {
display: flex;
align-items: flex-end;
margin-top: auto;
padding-top: 6px;
color: #4e5e70;
font-size: clamp(15px, 1.18vw, 22px);
line-height: 1.55;
}
.lp-rd-categories__text p {
margin: 0;
}
.lp-rd-marquee {
margin-top: 42px;
margin-bottom: 6px;
padding: 18px 0;
border-top: 1px solid #dee3eb;
border-bottom: 1px solid #dee3eb;
background: #fff;
overflow: hidden;
}
.lp-rd-marquee__track {
width: max-content;
display: flex;
gap: 34px;
animation: lp-rd-marquee 22s linear infinite;
}
.lp-rd-marquee__track span {
font-size: clamp(28px, 4.2vw, 66px);
font-weight: 800;
letter-spacing: -0.03em;
color: rgba(0, 123, 255, 0.26);
}
.lp-rd-marquee__track span:nth-child(2n) {
color: #1b1b1b;
}
.lp-rd-gallery {
margin-top: 56px;
padding-top: 22px;
}
.lp-rd-gallery__head {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 30px;
align-items: end;
margin-bottom: 18px;
}
.lp-rd-gallery__title {
margin: 0;
font-weight: 800;
text-transform: uppercase;
line-height: 0.88;
}
.lp-rd-gallery__title span {
display: block;
font-size: clamp(24px, 3.6vw, 56px);
}
.lp-rd-gallery__title span.is-accent {
color: #007bff;
}
.lp-rd-gallery__meta {
text-align: right;
}
.lp-rd-gallery__kicker {
margin: 0 0 8px;
font-size: 11px;
letter-spacing: 0.18em;
font-weight: 700;
text-transform: uppercase;
color: #4b596a;
}
.lp-rd-gallery__meta p {
margin: 0;
color: #586678;
line-height: 1.55;
}
.lp-rd-gallery__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(220px, 15vw, 290px);
gap: 14px;
}
.lp-rd-photo {
position: relative;
border-radius: 24px;
overflow: hidden;
border: 1px solid #dce1e8;
background: #e9edf4;
display: block;
transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.lp-rd-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.lp-rd-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 123, 255, 0.16), transparent 56%);
opacity: 0;
transition: opacity 0.35s ease;
}
.lp-rd-photo:hover {
box-shadow: 0 16px 28px rgba(25, 29, 27, 0.12);
}
.lp-rd-photo:hover img {
transform: scale(1.04);
}
.lp-rd-photo:hover::after {
opacity: 1;
}
.lp-rd-photo.is-large {
grid-column: span 2;
grid-row: span 2;
}
.lp-rd-photo.is-wide {
grid-column: span 2;
}
.lp-rd-gallery__cta {
margin-top: 18px;
display: flex;
justify-content: flex-end;
}
.lp-rd-benefits {
margin-top: 32px;
}
.lp-rd-benefits__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
background: #f7f8fa;
border: 1px solid #e1e5ec;
border-radius: 22px;
padding: clamp(18px, 2vw, 28px);
}
.lp-rd-benefits__text h3 {
margin: 0 0 14px;
font-size: clamp(24px, 2.8vw, 48px);
line-height: 1.02;
text-transform: uppercase;
}
.lp-rd-benefits__text p {
margin: 0;
color: #556273;
line-height: 1.6;
}
.lp-rd-benefits__text p + p {
margin-top: 10px;
}
.lp-rd-qa-item {
border-bottom: 1px solid #d9dfe7;
}
.lp-rd-qa-q {
width: 100%;
text-align: left;
background: none;
border: none;
color: #1f2a37;
font-size: clamp(14px, 1.1vw, 24px);
font-weight: 700;
display: flex;
gap: 10px;
align-items: center;
padding: 12px 2px;
}
.lp-rd-qa-q span {
width: 26px;
min-width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #cad3df;
color: #4f5d70;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.lp-rd-qa-a {
color: #5c6979;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 4px;
}
.lp-rd-qa-item.is-open .lp-rd-qa-a {
max-height: 180px;
padding: 0 4px 12px;
}
.lp-rd-inline-cta {
margin-top: 38px;
}
.lp-rd-inline-cta__inner {
background: linear-gradient(150deg, #ffffff 0%, #f4f8ff 52%, #eef4fd 100%);
border: 1px solid #d5deeb;
border-radius: 26px;
padding: clamp(20px, 2.2vw, 30px);
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 24px;
align-items: end;
box-shadow: 0 18px 34px rgba(25, 29, 27, 0.09);
position: relative;
overflow: hidden;
}
.lp-rd-inline-cta__inner::before {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -110px;
top: -130px;
background: radial-gradient(circle, rgba(0, 123, 255, 0.16), rgba(0, 123, 255, 0));
pointer-events: none;
}
.lp-rd-inline-cta__copy h3 {
margin: 0 0 12px;
font-size: clamp(22px, 2.1vw, 34px);
line-height: 1.02;
text-transform: uppercase;
}
.lp-rd-inline-cta__copy p {
margin: 0;
color: #5a6676;
line-height: 1.55;
}
.lp-rd-inline-cta__form {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: end;
position: relative;
z-index: 1;
}
.lp-rd-inline-cta__field label {
display: block;
font-size: 12px;
font-weight: 700;
color: #202d3c;
margin-bottom: 5px;
}
.lp-rd-inline-cta__field input {
width: 100%;
border: 1px solid #ccd6e2;
border-radius: 12px;
padding: 11px 12px;
background: #fff;
color: #182230;
font: inherit;
}
.lp-rd-inline-cta__field input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.13);
}
.lp-rd-inline-cta__checks {
grid-column: 1 / -1;
display: grid;
gap: 10px;
padding-top: 2px;
}
.lp-rd-inline-cta__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.lp-rd-inline-cta__actions .lp-rd-btn {
min-height: 46px;
padding: 0 20px;
}
.lp-rd-inline-cta__actions .lp-rd-btn--accent {
box-shadow: 0 8px 18px rgba(0, 123, 255, 0.28);
}
.lp-rd-logo-line {
margin-top: 54px;
font-size: clamp(56px, 11.5vw, 208px);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.04em;
color: rgba(0, 123, 255, 0.13);
text-align: center;
user-select: none;
pointer-events: none;
}
.lp-rd-contact {
margin-top: 42px;
padding-bottom: 12px;
}
.lp-rd-contact__title {
margin: 0 0 18px;
font-size: clamp(34px, 4.8vw, 74px);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.lp-rd-contact__grid {
display: grid;
grid-template-columns: 1fr 0.94fr;
gap: 20px;
}
.lp-rd-contact__copy {
padding: clamp(18px, 2vw, 28px);
border-radius: 24px;
background: #f7f7f6;
border: 1px solid #dde2ea;
}
.lp-rd-contact__copy p {
margin: 0;
color: #596676;
line-height: 1.6;
font-size: 18px;
}
.lp-rd-contact__copy p + p {
margin-top: 14px;
}
.lp-rd-contact__actions {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lp-rd-form-wrap {
background: #f7f7f6;
border: 1px solid #dbe1e9;
border-radius: 24px;
padding: clamp(18px, 2vw, 28px);
}
.lp-rd-form-wrap__title {
margin: 0;
font-size: 32px;
font-weight: 800;
line-height: 1.05;
}
.lp-rd-form-wrap__subtitle {
margin: 8px 0 18px;
font-size: 13px;
color: #5f5f5f;
}
.lp-rd-form {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
display: grid;
gap: 12px;
}
.lp-rd-form label {
font-size: 13px;
font-weight: 600;
color: #1e2a38;
margin-bottom: 6px;
display: block;
}
.lp-rd-form input:not([type="checkbox"]):not([type="radio"]),
.lp-rd-form textarea {
width: 100%;
border-radius: 12px;
border: 1px solid #ccd6e2;
background: #fff;
color: #182230;
padding: 12px 14px;
font: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-rd-form input:not([type="checkbox"]):not([type="radio"]):focus,
.lp-rd-form textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.13);
}
.lp-rd-form__check {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 0;
}
.lp-rd-form__check input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
margin: 1px 0 0;
padding: 0;
border-radius: 4px;
border: 1px solid #b8c3d2;
background: #fff;
accent-color: #007bff;
box-shadow: none;
cursor: pointer;
}
.lp-rd-form__checks {
display: grid;
gap: 9px;
}
.lp-rd-form__check span {
font-size: 13px;
color: #4f5d70;
line-height: 1.45;
}
.lp-rd-form__submit {
margin-top: 6px;
width: 100%;
}
@keyframes lp-rd-line-in {
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes lp-rd-hero-drift {
0% {
transform: scale(1.03) translateX(0);
}
100% {
transform: scale(1.12) translateX(-1.3%);
}
}
@keyframes lp-rd-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 1240px) {
.lp-rd-gallery__title span {
font-size: clamp(22px, 3vw, 44px);
}
.lp-rd-gallery__grid {
grid-auto-rows: clamp(180px, 18vw, 240px);
}
}
@media (max-width: 980px) {
.lp-rd-hero {
height: auto;
max-height: none;
grid-template-rows: auto auto;
}
.lp-rd-hero__top,
.lp-rd-contact__grid,
.lp-rd-benefits__grid,
.lp-rd-gallery__head {
grid-template-columns: 1fr;
}
.lp-rd-hero__desc {
justify-self: start;
text-align: left;
max-width: 100%;
font-size: 13px;
}
.lp-rd-hero__media {
height: clamp(180px, 32vh, 240px);
min-height: 180px;
}
.lp-rd-categories__grid {
grid-template-columns: 1fr;
}
.lp-rd-categories__text {
font-size: clamp(16px, 3.2vw, 24px);
line-height: 1.5;
padding: 6px 0 2px;
}
.lp-rd-cat-row__title {
font-size: clamp(20px, 5vw, 34px);
}
.lp-rd-categories__photo {
height: 140px;
}
.lp-rd-gallery__meta {
text-align: left;
}
.lp-rd-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 220px;
}
.lp-rd-photo.is-large,
.lp-rd-photo.is-wide {
grid-column: span 2;
}
.lp-rd-contact__copy p {
font-size: 16px;
}
.lp-rd-form-wrap__title {
font-size: 28px;
}
.lp-rd-inline-cta__inner {
grid-template-columns: 1fr;
}
.lp-rd-inline-cta__form {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.lp-rd-btn {
width: 100%;
}
.lp-rd-hero__actions,
.lp-rd-contact__actions {
flex-direction: column;
}
.lp-rd-gallery__grid {
grid-template-columns: 1fr;
grid-auto-rows: 250px;
}
.lp-rd-photo.is-large,
.lp-rd-photo.is-wide {
grid-column: span 1;
grid-row: span 1;
}
.lp-rd-inline-cta__form {
grid-template-columns: 1fr;
}
.lp-rd-inline-cta__actions {
flex-direction: column;
}
.lp-rd-logo-line {
margin-top: 20px;
}
} body.single-product .lp-product-page,
body.single-lempoint_product .lp-product-page {
padding-bottom: 8px;
}
body.single-product .lp-product,
body.single-lempoint_product .lp-product {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(16px, 2vw, 24px);
align-items: start;
}
body.single-product .lp-product .lp-card,
body.single-lempoint_product .lp-product .lp-card {
border-radius: 18px;
border: 1px solid #dfe7f2;
box-shadow: 0 10px 24px rgba(14, 31, 55, 0.08);
}
body.single-product .lp-product .lp-card:hover,
body.single-lempoint_product .lp-product .lp-card:hover {
transform: none;
box-shadow: 0 14px 28px rgba(14, 31, 55, 0.1);
}
body.single-product .lp-product__gallery,
body.single-lempoint_product .lp-product__gallery {
padding: 10px;
position: sticky;
top: 104px;
}
body.single-product .lp-product__main-image,
body.single-lempoint_product .lp-product__main-image {
aspect-ratio: 5 / 4;
border-radius: 14px;
border: 1px solid #e4ebf5;
background: #f2f6fb;
}
body.single-product .lp-thumbs,
body.single-lempoint_product .lp-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: 8px;
margin-top: 10px;
}
body.single-product .lp-thumbs img,
body.single-lempoint_product .lp-thumbs img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 10px;
border: 1px solid #dbe4f1;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.single-product .lp-thumbs img:hover,
body.single-lempoint_product .lp-thumbs img:hover {
transform: translateY(-1px);
}
body.single-product .lp-thumbs img.is-active,
body.single-lempoint_product .lp-thumbs img.is-active {
border-color: #1b86ff;
box-shadow: 0 0 0 2px rgba(27, 134, 255, 0.2);
}
body.single-product .lp-product__info,
body.single-lempoint_product .lp-product__info,
body.single-product .lp-product__info:hover,
body.single-lempoint_product .lp-product__info:hover {
transform: none !important;
}
body.single-product .lp-product__info .lp-card__body,
body.single-lempoint_product .lp-product__info .lp-card__body {
padding: clamp(16px, 1.9vw, 22px);
}
body.single-product .lp-product__description,
body.single-lempoint_product .lp-product__description {
margin-top: 0;
color: #3f4f64;
font-size: 15px;
line-height: 1.58;
}
body.single-product .lp-product__description p,
body.single-lempoint_product .lp-product__description p {
margin: 0 0 10px;
}
body.single-product .lp-product__description p:last-child,
body.single-lempoint_product .lp-product__description p:last-child {
margin-bottom: 0;
}
body.single-product .lp-product__price,
body.single-lempoint_product .lp-product__price {
margin: 14px 0 0;
display: inline-flex;
align-items: center;
gap: 8px;
background: #eef5ff;
border: 1px solid #d4e4fb;
color: #124a84;
border-radius: 999px;
padding: 7px 12px;
font-size: 14px;
font-weight: 700;
}
body.single-product .lp-product__specs-title,
body.single-lempoint_product .lp-product__specs-title {
margin-top: 16px;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #66758a;
font-weight: 700;
}
body.single-product .lp-spec-table,
body.single-lempoint_product .lp-spec-table {
margin-top: 10px;
border-top: none;
display: grid;
gap: 8px;
animation: none !important;
transition: none !important;
}
body.single-product .lp-spec-row,
body.single-lempoint_product .lp-spec-row {
padding: 10px 12px;
border: 1px solid #e0e8f3;
border-radius: 10px;
background: #f8fbff;
gap: 12px;
align-items: flex-start;
animation: none !important;
transition: none !important;
transform: none !important;
}
body.single-product .lp-spec-row strong,
body.single-lempoint_product .lp-spec-row strong {
font-size: 12px;
color: #607289;
font-weight: 700;
line-height: 1.35;
flex: 0 0 auto;
}
body.single-product .lp-spec-row span,
body.single-lempoint_product .lp-spec-row span {
margin-left: auto;
text-align: right;
color: #1c2d42;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
body.single-product .lp-actions,
body.single-lempoint_product .lp-actions {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.single-product .lp-actions .lp-btn,
body.single-lempoint_product .lp-actions .lp-btn {
min-height: 42px;
padding: 0 16px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.02em;
}
body.single-product .lp-contact--product,
body.single-lempoint_product .lp-contact--product {
padding: 0;
border: none;
background: transparent;
}
body.single-product .lp-product-lead,
body.single-lempoint_product .lp-product-lead {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 18px;
padding: 20px;
border-radius: 18px;
border: 1px solid #dce4f0;
background: linear-gradient(145deg, #ffffff, #f6f9ff);
box-shadow: 0 10px 22px rgba(14, 31, 55, 0.08);
}
body.single-product .lp-product-lead__copy,
body.single-lempoint_product .lp-product-lead__copy {
display: grid;
align-content: center;
gap: 10px;
}
body.single-product .lp-product-lead__kicker,
body.single-lempoint_product .lp-product-lead__kicker {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: #62758e;
text-transform: uppercase;
}
body.single-product .lp-product-lead__title,
body.single-lempoint_product .lp-product-lead__title {
margin: 0;
font-size: clamp(28px, 3vw, 44px);
line-height: 0.98;
}
body.single-product .lp-product-lead__title::before,
body.single-lempoint_product .lp-product-lead__title::before {
display: none;
}
body.single-product .lp-product-lead__text,
body.single-lempoint_product .lp-product-lead__text {
margin: 0;
color: #526379;
font-size: 15px;
line-height: 1.58;
}
body.single-product .lp-form-grid--product,
body.single-lempoint_product .lp-form-grid--product {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.single-product .lp-form-grid--product .lp-field,
body.single-lempoint_product .lp-form-grid--product .lp-field {
margin: 0;
display: grid;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #2a3a52;
}
body.single-product .lp-form-grid--product .lp-field--wide,
body.single-lempoint_product .lp-form-grid--product .lp-field--wide {
grid-column: 1 / -1;
}
body.single-product .lp-form-grid--product .lp-field input,
body.single-product .lp-form-grid--product .lp-field textarea,
body.single-lempoint_product .lp-form-grid--product .lp-field input,
body.single-lempoint_product .lp-form-grid--product .lp-field textarea {
border: 1px solid #d6e1f0;
border-radius: 12px;
padding: 12px 13px;
font-size: 14px;
color: #1f2f45;
background: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.single-product .lp-form-grid--product .lp-field textarea,
body.single-lempoint_product .lp-form-grid--product .lp-field textarea {
min-height: 110px;
resize: vertical;
}
body.single-product .lp-form-grid--product .lp-field input:focus,
body.single-product .lp-form-grid--product .lp-field textarea:focus,
body.single-lempoint_product .lp-form-grid--product .lp-field input:focus,
body.single-lempoint_product .lp-form-grid--product .lp-field textarea:focus {
outline: none;
border-color: #1485ff;
box-shadow: 0 0 0 3px rgba(20, 133, 255, 0.14);
}
body.single-product .lp-product-form__checks,
body.single-lempoint_product .lp-product-form__checks {
grid-column: 1 / -1;
margin-top: 2px;
}
body.single-product .lp-product-form__check,
body.single-lempoint_product .lp-product-form__check {
display: flex;
align-items: flex-start;
gap: 9px;
color: #526379;
font-size: 13px;
line-height: 1.45;
}
body.single-product .lp-product-form__check input,
body.single-lempoint_product .lp-product-form__check input {
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: #1485ff;
}
body.single-product .lp-product-form__actions,
body.single-lempoint_product .lp-product-form__actions {
grid-column: 1 / -1;
margin-top: 2px;
}
body.single-product .lp-product-form__actions .lp-btn,
body.single-lempoint_product .lp-product-form__actions .lp-btn {
min-width: 220px;
min-height: 46px;
border-radius: 999px;
}
@media (max-width: 1100px) {
body.single-product .lp-product,
body.single-lempoint_product .lp-product {
grid-template-columns: 1fr;
}
body.single-product .lp-product__gallery,
body.single-lempoint_product .lp-product__gallery {
position: static;
top: auto;
}
body.single-product .lp-product-lead,
body.single-lempoint_product .lp-product-lead {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
body.single-product .lp-form-grid--product,
body.single-lempoint_product .lp-form-grid--product {
grid-template-columns: 1fr;
}
body.single-product .lp-product-form__actions .lp-btn,
body.single-lempoint_product .lp-product-form__actions .lp-btn {
width: 100%;
min-width: 0;
}
body.single-product .lp-spec-row,
body.single-lempoint_product .lp-spec-row {
flex-direction: column;
gap: 4px;
}
body.single-product .lp-spec-row span,
body.single-lempoint_product .lp-spec-row span {
margin-left: 0;
text-align: left;
}
} .lp-contacts-v2 {
padding-bottom: 48px;
}
.lp-contacts-hero {
margin-top: clamp(22px, 3vw, 42px);
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
gap: clamp(18px, 3vw, 42px);
align-items: end;
padding-bottom: clamp(22px, 3vw, 34px);
border-bottom: 1px solid #e4e8ee;
position: relative;
overflow: hidden;
animation: lpContactsLift 0.8s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-hero::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 34%;
height: 2px;
background: #007bff;
transform-origin: left center;
animation: lpContactsLine 1.2s cubic-bezier(0.18, 0.82, 0.28, 1) 0.2s both;
}
.lp-contacts-eyebrow,
.lp-contacts-panel__kicker,
.lp-product-hardware__kicker {
margin: 0;
color: #66758a;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lp-contacts-title {
margin: 8px 0 0;
color: #17191d;
font-size: clamp(54px, 9vw, 132px);
line-height: 0.88;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
animation: lpContactsTitle 0.9s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-lead {
max-width: 720px;
margin: 22px 0 0;
color: #475466;
font-size: clamp(16px, 1.3vw, 21px);
line-height: 1.55;
animation: lpContactsFadeUp 0.8s cubic-bezier(0.18, 0.82, 0.28, 1) 0.12s both;
}
.lp-contacts-hero__actions {
display: grid;
gap: 10px;
}
.lp-contacts-action {
display: grid;
gap: 4px;
padding: 18px;
border: 1px solid #dce4f0;
border-radius: 16px;
background: #fff;
color: #1a2433;
box-shadow: 0 12px 26px rgba(14, 31, 55, 0.07);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
animation: lpContactsFadeUp 0.7s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-action--dark {
background: #17191d;
color: #fff;
border-color: #17191d;
}
.lp-contacts-action:nth-child(2) {
animation-delay: 0.08s;
}
.lp-contacts-action:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(14, 31, 55, 0.12);
}
.lp-contacts-action span {
color: inherit;
opacity: 0.68;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lp-contacts-action strong {
font-size: 18px;
line-height: 1.25;
}
.lp-contact-cards {
margin-top: clamp(22px, 3vw, 38px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.lp-contact-card {
min-height: 168px;
display: grid;
align-content: space-between;
gap: 14px;
padding: clamp(18px, 2vw, 24px);
border: 1px solid #e1e7f0;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(255, 255, 255, 0) 42%),
#fff;
color: #182435;
box-shadow: 0 12px 30px rgba(18, 38, 68, 0.06);
position: relative;
overflow: hidden;
transition: transform 0.38s ease, box-shadow 0.38s ease, border-color 0.38s ease;
animation: lpContactsCardIn 0.75s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contact-card:nth-child(2) {
animation-delay: 0.08s;
}
.lp-contact-card:nth-child(3) {
animation-delay: 0.16s;
}
.lp-contact-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 45%, transparent 72%);
transform: translateX(-120%);
opacity: 0;
transition: opacity 0.25s ease;
}
.lp-contact-card:hover {
transform: translateY(-6px);
border-color: #c7dbf5;
box-shadow: 0 22px 44px rgba(18, 38, 68, 0.12);
}
.lp-contact-card:hover::after {
opacity: 1;
animation: lpContactsSheen 0.9s ease both;
}
.lp-contact-card__label {
color: #627288;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lp-contact-card strong {
font-size: clamp(17px, 1.6vw, 23px);
line-height: 1.25;
}
.lp-contact-card small {
color: #637286;
font-size: 13px;
line-height: 1.45;
}
.lp-contacts-layout {
margin-top: clamp(18px, 3vw, 34px);
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 18px;
}
.lp-contacts-panel {
border: 1px solid #e0e7f1;
border-radius: 20px;
background: #fff;
padding: clamp(18px, 2.4vw, 30px);
box-shadow: 0 14px 34px rgba(18, 38, 68, 0.07);
animation: lpContactsFadeUp 0.8s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-panel--dark {
display: grid;
align-content: space-between;
gap: 26px;
background:
linear-gradient(145deg, rgba(0, 123, 255, 0.24), rgba(255, 255, 255, 0) 48%),
#17191d;
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
.lp-contacts-panel--dark::after {
content: "";
position: absolute;
inset: -40% auto auto -10%;
width: 62%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 123, 255, 0.35), rgba(0, 123, 255, 0) 66%);
filter: blur(10px);
z-index: -1;
animation: lpContactsGlow 7s ease-in-out infinite alternate;
}
.lp-contacts-panel--dark .lp-contacts-panel__kicker {
color: rgba(255, 255, 255, 0.68);
}
.lp-contacts-panel h2 {
margin: 8px 0 0;
font-size: clamp(25px, 2.7vw, 42px);
line-height: 1.02;
letter-spacing: 0;
text-transform: uppercase;
}
.lp-contacts-steps {
display: grid;
gap: 12px;
}
.lp-contacts-steps div {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
animation: lpContactsStepIn 0.65s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-steps div:nth-child(2) {
animation-delay: 0.08s;
}
.lp-contacts-steps div:nth-child(3) {
animation-delay: 0.16s;
}
.lp-contacts-steps span {
color: #49a1ff;
font-weight: 900;
}
.lp-contacts-steps p {
margin: 0;
color: rgba(255, 255, 255, 0.78);
line-height: 1.52;
}
.lp-contacts-messengers {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lp-contacts-messengers a {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 999px;
color: #fff;
font-size: 13px;
font-weight: 800;
}
.lp-contacts-form__head h2 {
margin: 0;
font-size: clamp(24px, 2.4vw, 36px);
line-height: 1;
text-transform: uppercase;
}
.lp-contacts-form__head p {
margin: 10px 0 8px;
color: #607086;
line-height: 1.55;
}
.lp-contacts-v2 .lp-contacts-form {
gap: 10px;
}
.lp-contacts-v2 .lp-contacts-form label {
color: #29394f;
font-size: 13px;
font-weight: 800;
}
.lp-contacts-v2 .lp-contacts-form input,
.lp-contacts-v2 .lp-contacts-form textarea {
margin: 0 0 2px;
border-color: #d7e0ed;
border-radius: 14px;
padding: 13px 14px;
background: #f9fbfe;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lp-contacts-v2 .lp-contacts-form input:focus,
.lp-contacts-v2 .lp-contacts-form textarea:focus {
outline: none;
border-color: #1485ff;
background: #fff;
box-shadow: 0 0 0 3px rgba(20, 133, 255, 0.14);
}
.lp-contacts-consent {
display: flex;
align-items: flex-start;
gap: 10px;
color: #5b6b80;
line-height: 1.4;
}
.lp-contacts-consent input {
width: 18px !important;
height: 18px;
margin-top: 1px !important;
accent-color: #1485ff;
}
.lp-contacts-map {
margin-top: 18px;
padding: 0;
}
.lp-contacts-map__placeholder {
min-height: 360px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
padding: clamp(20px, 3vw, 34px);
border: 1px solid #dfe6f0;
border-radius: 20px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(0, 123, 255, 0.16), rgba(255, 255, 255, 0) 46%),
repeating-linear-gradient(45deg, #f4f7fb 0, #f4f7fb 12px, #eef3f9 12px, #eef3f9 24px);
position: relative;
animation: lpContactsFadeUp 0.8s cubic-bezier(0.18, 0.82, 0.28, 1) both;
}
.lp-contacts-map__placeholder::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
transform: translateX(-100%);
animation: lpContactsMapScan 5.5s ease-in-out infinite;
pointer-events: none;
}
.lp-contacts-map__placeholder h2 {
margin: 8px 0 10px;
font-size: clamp(26px, 3vw, 44px);
line-height: 1;
text-transform: uppercase;
}
.lp-contacts-map__placeholder p {
max-width: 560px;
margin: 0;
color: #526176;
}
.lp-contacts-map__placeholder.is-loaded {
min-height: 420px;
display: block;
padding: 0;
background: #fff;
}
.lp-contacts-map__placeholder.is-loaded::before {
display: none;
}
@keyframes lpContactsLift {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lpContactsTitle {
from {
opacity: 0;
transform: translateY(22px);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes lpContactsFadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lpContactsCardIn {
from {
opacity: 0;
transform: translateY(18px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes lpContactsLine {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes lpContactsSheen {
from {
transform: translateX(-120%);
}
to {
transform: translateX(120%);
}
}
@keyframes lpContactsGlow {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(18%, 10%, 0) scale(1.18);
}
}
@keyframes lpContactsStepIn {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes lpContactsMapScan {
0%,
42% {
transform: translateX(-100%);
}
72%,
100% {
transform: translateX(100%);
}
} body.single-product .lp-product-hardware,
body.single-lempoint_product .lp-product-hardware {
margin-top: 22px;
padding: clamp(16px, 2vw, 22px);
border: 1px solid #dfe7f2;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 24px rgba(14, 31, 55, 0.07);
}
body.single-product .lp-product-hardware__head,
body.single-lempoint_product .lp-product-hardware__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
body.single-product .lp-product-hardware__head h2,
body.single-lempoint_product .lp-product-hardware__head h2 {
margin: 5px 0 0;
font-size: clamp(20px, 2.1vw, 30px);
line-height: 1.05;
text-transform: uppercase;
}
body.single-product .lp-product-hardware__head a,
body.single-lempoint_product .lp-product-hardware__head a {
flex: 0 0 auto;
color: #0d5fb5;
font-size: 13px;
font-weight: 800;
}
body.single-product .lp-product-hardware__rail,
body.single-lempoint_product .lp-product-hardware__rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, 185px);
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 12px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
body.single-product .lp-product-hardware-card,
body.single-lempoint_product .lp-product-hardware-card {
min-height: 214px;
display: grid;
grid-template-rows: auto 1fr;
gap: 9px;
padding: 9px;
border: 1px solid #e1e8f2;
border-radius: 14px;
background: #f8fbff;
color: #1c2d42;
scroll-snap-align: start;
}
body.single-product .lp-product-hardware-card img,
body.single-lempoint_product .lp-product-hardware-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
background: #eef3fa;
}
body.single-product .lp-product-hardware-card span,
body.single-lempoint_product .lp-product-hardware-card span {
font-size: 13px;
font-weight: 800;
line-height: 1.25;
}
body.single-product .lp-product-hardware-card strong,
body.single-lempoint_product .lp-product-hardware-card strong {
color: #0d5fb5;
font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
.lp-contacts-hero,
.lp-contacts-hero::after,
.lp-contacts-title,
.lp-contacts-lead,
.lp-contacts-action,
.lp-contact-card,
.lp-contact-card::after,
.lp-contacts-panel,
.lp-contacts-panel--dark::after,
.lp-contacts-steps div,
.lp-contacts-map__placeholder,
.lp-contacts-map__placeholder::before {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
}
}
@media (max-width: 980px) {
.lp-contacts-hero,
.lp-contacts-layout,
.lp-contact-cards {
grid-template-columns: 1fr;
}
.lp-contact-card {
min-height: 136px;
}
}
@media (max-width: 680px) {
.lp-contacts-title {
font-size: clamp(48px, 18vw, 72px);
}
.lp-contacts-map__placeholder {
min-height: 320px;
grid-template-columns: 1fr;
align-items: start;
}
body.single-product .lp-product-hardware__head,
body.single-lempoint_product .lp-product-hardware__head {
align-items: start;
flex-direction: column;
}
body.single-product .lp-product-hardware__rail,
body.single-lempoint_product .lp-product-hardware__rail {
grid-auto-columns: minmax(138px, 70vw);
}
} .lp-seo-landing {
padding: 18px 0 70px;
overflow: clip;
}
.lp-seo-hero {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
gap: clamp(22px, 4vw, 64px);
align-items: stretch;
min-height: min(680px, calc(100vh - 160px));
padding: clamp(24px, 4vw, 58px);
border: 1px solid rgba(12, 28, 48, 0.08);
border-radius: 28px;
background:
radial-gradient(circle at 18% 10%, rgba(0, 123, 255, 0.11), transparent 28%),
linear-gradient(135deg, #ffffff 0%, #f4f7fb 62%, #eaf1f9 100%);
box-shadow: 0 24px 70px rgba(18, 35, 56, 0.08);
}
.lp-seo-hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.lp-seo-hero h1 {
margin: 0;
max-width: 980px;
font-size: clamp(42px, 6.6vw, 112px);
line-height: 0.88;
letter-spacing: -0.065em;
text-transform: uppercase;
text-wrap: balance;
}
.lp-seo-hero__lead {
margin: 24px 0 0;
max-width: 660px;
color: #526173;
font-size: clamp(16px, 1.3vw, 21px);
line-height: 1.55;
}
.lp-seo-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.lp-seo-hero__media {
min-height: 420px;
border-radius: 24px;
overflow: hidden;
background: #dfe7f2;
box-shadow: 0 18px 48px rgba(10, 25, 45, 0.14);
}
.lp-seo-hero__media img,
.lp-seo-shot img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.lp-seo-facts {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.lp-seo-fact {
min-height: 118px;
padding: 18px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 20px;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 12px 34px rgba(15, 32, 54, 0.06);
}
.lp-seo-fact span {
display: block;
width: 28px;
height: 3px;
margin-bottom: 20px;
border-radius: 999px;
background: var(--lp-accent);
}
.lp-seo-fact strong {
display: block;
color: #1e2a3a;
font-size: clamp(15px, 1vw, 18px);
line-height: 1.24;
}
.lp-seo-content {
margin-top: 48px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: 22px;
align-items: stretch;
}
.lp-seo-content__text,
.lp-seo-content__card,
.lp-seo-faq__item,
.lp-seo-related__card,
.lp-seo-cta {
border: 1px solid rgba(17, 38, 64, 0.08);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 14px 40px rgba(15, 32, 54, 0.055);
}
.lp-seo-content__text,
.lp-seo-content__card {
padding: clamp(24px, 3vw, 44px);
border-radius: 24px;
}
.lp-seo-content h2,
.lp-seo-section-head h2,
.lp-seo-cta h2 {
margin: 0;
color: #1b2533;
font-size: clamp(28px, 3.2vw, 56px);
line-height: 1.02;
letter-spacing: -0.045em;
text-transform: uppercase;
}
.lp-seo-content p {
max-width: 900px;
margin: 18px 0 0;
color: #526173;
font-size: clamp(16px, 1.15vw, 20px);
line-height: 1.68;
}
.lp-seo-content__card {
background: #101820;
color: #fff;
}
.lp-seo-content__card h3 {
margin: 0 0 18px;
font-size: clamp(22px, 2vw, 34px);
line-height: 1.06;
}
.lp-seo-content__card ul {
margin: 0;
padding: 0;
list-style: none;
}
.lp-seo-content__card li {
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.82);
}
.lp-seo-gallery {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(210px, 18vw, 330px);
gap: 14px;
}
.lp-seo-shot {
margin: 0;
border-radius: 22px;
overflow: hidden;
background: #e6edf6;
box-shadow: 0 14px 34px rgba(15, 32, 54, 0.08);
}
.lp-seo-shot.is-large {
grid-column: span 2;
grid-row: span 2;
}
.lp-seo-faq,
.lp-seo-related,
.lp-seo-cta {
margin-top: 52px;
}
.lp-seo-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.lp-seo-faq__list {
display: grid;
gap: 10px;
}
.lp-seo-faq__item {
border-radius: 18px;
overflow: hidden;
}
.lp-seo-faq__item summary {
cursor: pointer;
padding: 20px 22px;
color: #1f2d41;
font-weight: 800;
list-style: none;
}
.lp-seo-faq__item summary::-webkit-details-marker {
display: none;
}
.lp-seo-faq__item summary::after {
content: "+";
float: right;
color: var(--lp-accent);
font-size: 22px;
line-height: 1;
}
.lp-seo-faq__item[open] summary::after {
content: "-";
}
.lp-seo-faq__item p {
margin: 0;
padding: 0 22px 22px;
color: #536274;
line-height: 1.6;
}
.lp-seo-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.lp-seo-related__card {
min-height: 170px;
padding: 22px;
border-radius: 20px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lp-seo-related__card:hover {
transform: translateY(-4px);
border-color: rgba(0, 123, 255, 0.34);
box-shadow: 0 18px 45px rgba(15, 32, 54, 0.12);
}
.lp-seo-related__card span,
.lp-seo-related__card em {
display: block;
color: #68778a;
font-size: 11px;
font-style: normal;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.lp-seo-related__card strong {
display: block;
margin: 18px 0 24px;
color: #1f2d41;
font-size: clamp(20px, 1.7vw, 30px);
line-height: 1.06;
text-transform: uppercase;
}
.lp-seo-related__card em {
color: var(--lp-accent);
letter-spacing: 0.04em;
}
.lp-seo-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: clamp(26px, 4vw, 52px);
border-radius: 28px;
background:
radial-gradient(circle at 86% 12%, rgba(0, 123, 255, 0.16), transparent 26%),
#ffffff;
}
.lp-seo-cta p:not(.lp-rd-kicker) {
max-width: 720px;
margin: 14px 0 0;
color: #556273;
font-size: 17px;
}
@media (max-width: 1180px) {
.lp-seo-hero,
.lp-seo-content {
grid-template-columns: 1fr;
}
.lp-seo-hero__media {
min-height: 360px;
}
.lp-seo-facts,
.lp-seo-gallery,
.lp-seo-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.lp-seo-landing {
padding-top: 6px;
}
.lp-seo-hero {
padding: 20px;
border-radius: 22px;
}
.lp-seo-hero h1 {
font-size: clamp(38px, 13vw, 68px);
}
.lp-seo-hero__media {
min-height: 260px;
border-radius: 18px;
}
.lp-seo-facts,
.lp-seo-gallery,
.lp-seo-related__grid {
grid-template-columns: 1fr;
}
.lp-seo-shot.is-large {
grid-column: auto;
grid-row: auto;
}
.lp-seo-section-head,
.lp-seo-cta {
align-items: flex-start;
flex-direction: column;
}
} .lp-seo-landing {
padding: 10px 0 76px;
}
.lp-seo-hero {
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
min-height: auto;
padding: clamp(22px, 3.1vw, 44px);
gap: clamp(18px, 3vw, 46px);
}
.lp-seo-hero h1 {
max-width: 820px;
font-size: clamp(36px, 4.6vw, 74px);
line-height: 0.94;
letter-spacing: -0.055em;
}
.lp-seo-hero__lead {
max-width: 700px;
margin-top: 18px;
font-size: clamp(15px, 1.05vw, 18px);
}
.lp-seo-hero__actions {
margin-top: 24px;
}
.lp-seo-hero__media {
min-height: 300px;
max-height: 430px;
}
.lp-seo-content {
margin-top: 34px;
grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.62fr);
}
.lp-seo-content__text,
.lp-seo-content__card {
padding: clamp(22px, 2.5vw, 38px);
}
.lp-seo-content h2,
.lp-seo-section-head h2,
.lp-seo-cta h2,
.lp-seo-longread h2 {
font-size: clamp(26px, 2.7vw, 46px);
letter-spacing: -0.04em;
}
.lp-seo-content p {
font-size: clamp(15px, 1vw, 18px);
line-height: 1.72;
}
.lp-seo-use,
.lp-seo-materials,
.lp-seo-longread,
.lp-seo-process {
margin-top: 48px;
}
.lp-seo-use__grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lp-seo-use__grid span {
display: inline-flex;
min-height: 46px;
align-items: center;
padding: 10px 16px;
border: 1px solid rgba(16, 34, 56, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: #26374c;
font-weight: 800;
box-shadow: 0 10px 26px rgba(15, 32, 54, 0.05);
}
.lp-seo-materials__grid,
.lp-seo-process__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.lp-seo-material,
.lp-seo-step {
min-height: 230px;
padding: 22px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 22px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 14px 38px rgba(15, 32, 54, 0.06);
}
.lp-seo-material h3,
.lp-seo-step h3 {
margin: 0;
color: #1e2a3a;
font-size: clamp(18px, 1.4vw, 24px);
line-height: 1.08;
}
.lp-seo-material p,
.lp-seo-step p,
.lp-seo-longread p {
margin: 14px 0 0;
color: #59687a;
line-height: 1.66;
}
.lp-seo-step span {
display: inline-flex;
margin-bottom: 28px;
color: #007bff;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.18em;
}
.lp-seo-gallery {
grid-auto-rows: clamp(180px, 14vw, 270px);
}
.lp-seo-gallery--duo {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: clamp(280px, 26vw, 430px);
}
.lp-seo-gallery--trio {
grid-template-columns: 1.25fr 0.85fr;
grid-auto-rows: clamp(190px, 17vw, 280px);
}
.lp-seo-gallery--trio .lp-seo-shot:first-child {
grid-row: span 2;
}
.lp-seo-gallery--quad {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(210px, 17vw, 300px);
}
.lp-seo-gallery--quad .lp-seo-shot:first-child,
.lp-seo-gallery--quad .lp-seo-shot:nth-child(4) {
grid-column: span 2;
}
.lp-seo-gallery--mosaic {
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-rows: clamp(170px, 12vw, 240px);
}
.lp-seo-gallery--mosaic .lp-seo-shot.is-large {
grid-column: span 2;
grid-row: span 2;
}
.lp-seo-gallery--mosaic .lp-seo-shot:nth-child(5),
.lp-seo-gallery--mosaic .lp-seo-shot:nth-child(8) {
grid-column: span 2;
}
.lp-seo-shot {
position: relative;
border-radius: 20px;
}
.lp-seo-shot::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 58%, rgba(10, 22, 36, 0.18));
pointer-events: none;
}
.lp-seo-longread {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 24px;
padding: clamp(26px, 4vw, 54px);
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 28px;
background:
radial-gradient(circle at 0 0, rgba(0, 123, 255, 0.13), transparent 24%),
rgba(255, 255, 255, 0.88);
box-shadow: 0 18px 48px rgba(15, 32, 54, 0.07);
}
.lp-seo-longread__marker {
width: 110px;
height: 110px;
display: grid;
place-items: center;
border-radius: 24px;
background: #101820;
color: #fff;
font-weight: 900;
letter-spacing: 0.18em;
}
.footer--seo .footer-content {
align-items: flex-start;
}
.footer-seo {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 22px;
width: min(var(--lp-view-width), 980px);
margin: 26px auto 0;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-seo__col strong {
display: block;
margin-bottom: 10px;
color: #fff;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-seo__col a {
display: block;
padding: 5px 0;
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
transition: color 0.2s ease, transform 0.2s ease;
}
.footer-seo__col a:hover {
color: #fff;
transform: translateX(3px);
}
@media (max-width: 1180px) {
.lp-seo-hero,
.lp-seo-content,
.lp-seo-longread {
grid-template-columns: 1fr;
}
.lp-seo-hero__media {
min-height: 280px;
}
.lp-seo-materials__grid,
.lp-seo-process__grid,
.lp-seo-gallery--mosaic,
.lp-seo-gallery--quad {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.lp-seo-hero h1 {
font-size: clamp(34px, 10vw, 52px);
}
.lp-seo-hero__media {
min-height: 220px;
}
.lp-seo-materials__grid,
.lp-seo-process__grid,
.lp-seo-gallery--duo,
.lp-seo-gallery--trio,
.lp-seo-gallery--quad,
.lp-seo-gallery--mosaic,
.footer-seo {
grid-template-columns: 1fr;
}
.lp-seo-gallery--trio .lp-seo-shot:first-child,
.lp-seo-gallery--mosaic .lp-seo-shot.is-large,
.lp-seo-gallery--mosaic .lp-seo-shot:nth-child(5),
.lp-seo-gallery--mosaic .lp-seo-shot:nth-child(8),
.lp-seo-gallery--quad .lp-seo-shot:first-child,
.lp-seo-gallery--quad .lp-seo-shot:nth-child(4) {
grid-column: auto;
grid-row: auto;
}
.lp-seo-longread__marker {
width: 78px;
height: 78px;
border-radius: 18px;
}
} .lp-seo-use {
padding: clamp(26px, 4vw, 56px);
border-radius: 30px;
background:
radial-gradient(circle at 12% 12%, rgba(0, 123, 255, 0.12), transparent 30%),
linear-gradient(135deg, #f7f9fc 0%, #ffffff 58%, #eef3f8 100%);
box-shadow: 0 20px 52px rgba(18, 35, 58, 0.07);
}
.lp-seo-use .lp-seo-section-head {
max-width: 760px;
}
.lp-seo-section-lead {
max-width: 820px;
margin: 12px 0 0;
color: #58687b;
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.66;
}
.lp-seo-use__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 22px;
}
.lp-seo-use-card {
min-height: 100%;
overflow: hidden;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 16px 42px rgba(18, 35, 58, 0.07);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.lp-seo-use-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 123, 255, 0.28);
box-shadow: 0 24px 58px rgba(18, 35, 58, 0.12);
}
.lp-seo-use-card__media {
height: clamp(150px, 12vw, 220px);
overflow: hidden;
background: #e8eef5;
}
.lp-seo-use-card__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.lp-seo-use-card:hover .lp-seo-use-card__media img {
transform: scale(1.04);
}
.lp-seo-use-card__body {
padding: 18px 18px 20px;
}
.lp-seo-use__grid .lp-seo-use-card__body span {
width: 36px;
min-height: 30px;
display: inline-grid;
place-items: center;
margin-bottom: 12px;
padding: 0;
border: 1px solid rgba(0, 123, 255, 0.18);
border-radius: 999px;
background: rgba(0, 123, 255, 0.08);
color: #007bff;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
}
.lp-seo-use-card h3 {
margin: 0;
color: #17202c;
font-size: clamp(18px, 1.35vw, 24px);
line-height: 1.12;
}
.lp-seo-use-card p {
margin: 12px 0 0;
color: #536172;
font-size: 15px;
line-height: 1.62;
}
.footer--seo {
width: 100%;
flex-direction: column;
align-items: center;
gap: 0;
padding: clamp(38px, 5vw, 70px) 20px 34px;
background:
radial-gradient(circle at 12% 0%, rgba(0, 123, 255, 0.28), transparent 34%),
linear-gradient(145deg, #0b1118 0%, #111b26 48%, #080d13 100%);
color: #f7fbff;
box-shadow: 0 -18px 60px rgba(9, 16, 24, 0.16);
}
.footer--seo .footer-content {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: clamp(22px, 4vw, 54px);
align-items: start;
max-width: min(var(--lp-view-width), var(--lp-view-max));
padding-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer--seo .footer-logo img {
width: 104px;
padding: 10px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.footer--seo .footer-info {
max-width: 680px;
text-align: left;
color: rgba(247, 251, 255, 0.74);
}
.footer--seo .footer-info p {
margin: 0 0 10px;
line-height: 1.65;
}
.footer--seo .footer-info strong {
color: #fff;
}
.footer--seo .footer-info a,
.footer--seo .footer-links a {
color: #fff;
text-decoration: none;
}
.footer--seo .footer-links {
min-width: 220px;
align-items: stretch;
gap: 10px;
text-align: left;
}
.footer--seo .footer-links a {
margin: 0;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.footer--seo .footer-links a:hover {
opacity: 1;
transform: translateY(-2px);
border-color: rgba(0, 123, 255, 0.42);
background: rgba(0, 123, 255, 0.18);
}
.footer-seo {
width: min(var(--lp-view-width), var(--lp-view-max));
margin-top: 24px;
padding-top: 0;
border-top: 0;
grid-template-columns: 1.25fr 1fr 0.9fr;
}
.footer-seo__col {
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
background: rgba(255, 255, 255, 0.055);
}
.footer-seo__col strong {
color: #fff;
}
.footer-seo__col a {
color: rgba(247, 251, 255, 0.76);
text-decoration: none;
}
.footer-seo__col a:hover {
color: #7dbbff;
}
@media (max-width: 1180px) {
.lp-seo-use__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer--seo .footer-content {
grid-template-columns: 110px minmax(0, 1fr);
}
.footer--seo .footer-links {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.lp-seo-use {
padding: 22px;
border-radius: 24px;
}
.lp-seo-use__grid,
.footer-seo,
.footer--seo .footer-content,
.footer--seo .footer-links {
grid-template-columns: 1fr;
}
.footer--seo .footer-content,
.footer--seo .footer-info,
.footer--seo .footer-links {
text-align: left;
}
} .lp-seo-facts {
margin-top: 18px;
padding: 18px 0;
border-top: 1px solid rgba(17, 38, 64, 0.12);
border-bottom: 1px solid rgba(17, 38, 64, 0.12);
gap: 0;
counter-reset: seoFact;
}
.lp-seo-fact {
min-height: auto;
padding: 14px 18px;
border: 0;
border-right: 1px solid rgba(17, 38, 64, 0.1);
border-radius: 0;
background: transparent;
box-shadow: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 14px;
counter-increment: seoFact;
}
.lp-seo-fact:last-child {
border-right: 0;
}
.lp-seo-fact span {
width: 34px;
height: 34px;
margin: 0;
border-radius: 50%;
background: #f0f6ff;
border: 1px solid rgba(0, 123, 255, 0.22);
display: grid;
place-items: center;
}
.lp-seo-fact span::before {
content: counter(seoFact, decimal-leading-zero);
color: #007bff;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
}
.lp-seo-fact strong {
font-size: clamp(14px, 0.9vw, 17px);
line-height: 1.18;
letter-spacing: -0.02em;
}
.lp-seo-use .lp-seo-section-head {
display: block;
max-width: 940px;
margin-bottom: 24px;
}
.lp-seo-use .lp-seo-section-head h2 {
max-width: 760px;
font-size: clamp(30px, 3vw, 50px);
line-height: 0.98;
}
.lp-seo-use .lp-seo-section-head h2::after {
content: "";
display: block;
width: min(360px, 52vw);
height: 2px;
margin-top: 16px;
background: linear-gradient(90deg, #111827, rgba(17, 24, 39, 0));
}
.lp-seo-longread {
grid-template-columns: 1fr;
padding: clamp(28px, 4vw, 58px);
border-radius: 30px;
border-left: 5px solid #007bff;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 253, 0.94)),
radial-gradient(circle at 100% 0, rgba(0, 123, 255, 0.12), transparent 28%);
}
.lp-seo-longread .lp-rd-kicker {
color: #007bff;
}
.lp-seo-longread h2 {
max-width: 920px;
}
.lp-seo-longread p {
max-width: 980px;
}
.footer--seo {
background: #fafafa;
color: #000;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
.footer--seo .footer-content {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: clamp(20px, 4vw, 44px);
align-items: start;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.footer--seo .footer-logo img {
width: 120px;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.footer--seo .footer-info {
color: #202733;
}
.footer--seo .footer-info strong,
.footer--seo .footer-info a,
.footer--seo .footer-links a,
.footer-seo__col strong,
.footer-seo__col a {
color: #000;
}
.footer--seo .footer-links a {
border-color: rgba(0, 0, 0, 0.1);
background: #fff;
}
.footer--seo .footer-links a:hover {
border-color: rgba(0, 123, 255, 0.32);
background: #f2f8ff;
color: #007bff;
}
.footer-seo {
border-top: 0;
}
.footer-seo__col {
border-color: rgba(0, 0, 0, 0.08);
background: #fff;
box-shadow: 0 12px 34px rgba(15, 32, 54, 0.05);
}
.footer-seo__col a {
color: #202733;
}
.footer-seo__col a:hover {
color: #007bff;
}
@media (max-width: 720px) {
.lp-seo-facts {
padding: 8px 0;
}
.lp-seo-fact {
border-right: 0;
border-bottom: 1px solid rgba(17, 38, 64, 0.1);
padding: 14px 0;
}
.lp-seo-fact:last-child {
border-bottom: 0;
}
} .lp-blog-hero,
.lp-article-hero {
margin-top: clamp(26px, 4vw, 54px);
padding: clamp(28px, 5vw, 72px);
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 32px;
background:
radial-gradient(circle at 8% 12%, rgba(0, 123, 255, 0.14), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #f5f8fc 100%);
box-shadow: 0 20px 52px rgba(18, 35, 58, 0.07);
}
.lp-blog-hero {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.42fr);
gap: clamp(24px, 4vw, 60px);
align-items: end;
}
.lp-blog-hero h1,
.lp-article-hero h1 {
margin: 0;
color: #111820;
font-size: clamp(44px, 6vw, 104px);
line-height: 0.9;
letter-spacing: -0.07em;
text-transform: uppercase;
}
.lp-blog-hero p,
.lp-article-hero__copy > p {
margin: 0;
color: #59687a;
font-size: clamp(16px, 1.25vw, 21px);
line-height: 1.62;
}
.lp-blog-list,
.lp-article-related {
margin-top: clamp(38px, 5vw, 76px);
}
.lp-blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.lp-blog-card {
overflow: hidden;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 26px;
background: #fff;
box-shadow: 0 16px 42px rgba(18, 35, 58, 0.07);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lp-blog-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 123, 255, 0.25);
box-shadow: 0 24px 58px rgba(18, 35, 58, 0.12);
}
.lp-blog-card__media {
display: block;
height: clamp(190px, 16vw, 280px);
overflow: hidden;
background: #e9eef5;
}
.lp-blog-card__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.45s ease;
}
.lp-blog-card:hover .lp-blog-card__media img {
transform: scale(1.04);
}
.lp-blog-card__body {
padding: 20px;
}
.lp-blog-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 14px;
color: #6b7788;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.lp-blog-meta span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 6px 10px;
border-radius: 999px;
background: #f2f6fb;
}
.lp-blog-card h2,
.lp-blog-card h3 {
margin: 0;
color: #161d28;
font-size: clamp(20px, 1.55vw, 29px);
line-height: 1.08;
letter-spacing: -0.04em;
}
.lp-blog-card h2 a,
.lp-blog-card h3 a {
color: inherit;
text-decoration: none;
}
.lp-blog-card p {
margin: 14px 0 0;
color: #59687a;
line-height: 1.62;
}
.lp-blog-card__link {
display: inline-flex;
margin-top: 18px;
color: #007bff;
font-weight: 900;
text-decoration: none;
}
.lp-blog-pagination {
margin-top: 34px;
}
.lp-blog-pagination ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
}
.lp-blog-pagination a,
.lp-blog-pagination span {
display: grid;
min-width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(17, 38, 64, 0.1);
border-radius: 999px;
color: #111820;
text-decoration: none;
background: #fff;
}
.lp-blog-pagination .current {
background: #111820;
color: #fff;
}
.lp-blog-empty {
padding: 40px;
border-radius: 28px;
background: #fff;
text-align: center;
}
.lp-article-hero {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.62fr);
gap: clamp(24px, 4vw, 62px);
align-items: center;
}
.lp-article-back {
display: inline-flex;
margin-bottom: 18px;
color: #007bff;
font-weight: 900;
text-decoration: none;
}
.lp-article-hero__media {
min-height: clamp(260px, 28vw, 520px);
overflow: hidden;
border-radius: 26px;
background: #e9eef5;
}
.lp-article-hero__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.lp-article-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 860px);
gap: clamp(24px, 4vw, 64px);
align-items: start;
margin-top: clamp(36px, 5vw, 80px);
}
.lp-article-side {
position: sticky;
top: 120px;
display: grid;
gap: 14px;
}
.lp-article-share,
.lp-article-note {
padding: 20px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 24px;
background: #fff;
box-shadow: 0 14px 36px rgba(18, 35, 58, 0.06);
}
.lp-article-share strong {
display: block;
margin-bottom: 12px;
color: #111820;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lp-article-share a {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 42px;
margin-top: 8px;
padding: 10px 14px;
border-radius: 999px;
color: #111820;
text-decoration: none;
background: #f2f6fb;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lp-article-share a::after {
content: '↗';
}
.lp-article-share a:hover {
transform: translateX(3px);
color: #007bff;
background: #eaf4ff;
}
.lp-article-note span {
display: inline-flex;
margin-bottom: 10px;
color: #007bff;
font-weight: 900;
}
.lp-article-note p {
margin: 0;
color: #657487;
line-height: 1.56;
}
.lp-article-content {
padding: clamp(26px, 4vw, 58px);
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 30px;
background: #fff;
box-shadow: 0 18px 48px rgba(18, 35, 58, 0.07);
}
.lp-article-content > *:first-child {
margin-top: 0;
}
.lp-article-content h2,
.lp-article-content h3,
.lp-article-content h4 {
margin: 1.55em 0 0.55em;
color: #111820;
line-height: 1.08;
letter-spacing: -0.04em;
}
.lp-article-content h2 {
font-size: clamp(30px, 2.7vw, 48px);
}
.lp-article-content h3 {
font-size: clamp(24px, 2vw, 34px);
}
.lp-article-content p,
.lp-article-content li {
color: #39485b;
font-size: clamp(16px, 1.05vw, 19px);
line-height: 1.78;
}
.lp-article-content a {
color: #007bff;
font-weight: 800;
}
.lp-article-content img {
max-width: 100%;
height: auto;
border-radius: 22px;
}
.lp-article-content blockquote {
margin: 28px 0;
padding: 24px;
border-left: 5px solid #007bff;
border-radius: 18px;
background: #f4f8fd;
color: #1e2a3a;
}
.lp-blog-grid--related .lp-blog-card__media {
height: clamp(170px, 13vw, 230px);
}
@media (max-width: 1180px) {
.lp-blog-hero,
.lp-article-hero,
.lp-article-layout {
grid-template-columns: 1fr;
}
.lp-article-side {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.lp-blog-hero,
.lp-article-hero,
.lp-article-content {
border-radius: 24px;
}
.lp-blog-grid,
.lp-article-side {
grid-template-columns: 1fr;
}
.lp-blog-hero h1,
.lp-article-hero h1 {
font-size: clamp(38px, 11vw, 58px);
}
} .lp-article {
background:
radial-gradient(circle at 8% 5%, rgba(0, 123, 255, 0.06), transparent 28%),
linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 42%, #fbfcfe 100%);
}
.lp-article-hero {
display: block;
max-width: min(var(--lp-view-width), 1180px);
padding: clamp(22px, 3.4vw, 48px);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 253, 0.94)),
radial-gradient(circle at 100% 0, rgba(0, 123, 255, 0.12), transparent 32%);
}
.lp-article-hero__copy {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px 28px;
align-items: start;
}
.lp-article-back {
grid-column: 1 / -1;
width: fit-content;
margin-bottom: 0;
padding: 9px 13px;
border-radius: 999px;
background: #eef5ff;
}
.lp-article-hero .lp-blog-meta {
grid-column: 1 / -1;
margin-bottom: 0;
}
.lp-article-hero h1 {
max-width: 920px;
margin: 0;
font-size: clamp(32px, 4.1vw, 68px);
line-height: 0.98;
letter-spacing: -0.055em;
text-transform: none;
}
.lp-article-hero__copy > p {
max-width: 560px;
align-self: end;
margin: 0;
padding-top: 8px;
color: #5b6878;
font-size: clamp(15px, 1.05vw, 18px);
line-height: 1.58;
}
.lp-article-hero__media {
margin-top: clamp(20px, 3vw, 34px);
min-height: 0;
height: clamp(240px, 31vw, 430px);
border-radius: 24px;
box-shadow: 0 18px 44px rgba(17, 38, 64, 0.12);
}
.lp-article-layout {
max-width: min(var(--lp-view-width), 1180px);
grid-template-columns: minmax(0, 820px) minmax(220px, 280px);
justify-content: center;
gap: clamp(22px, 3vw, 42px);
margin-top: clamp(30px, 4vw, 58px);
}
.lp-article-content {
order: 1;
padding: clamp(30px, 4vw, 62px);
border-radius: 28px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-left: 5px solid #007bff;
box-shadow: 0 18px 48px rgba(18, 35, 58, 0.06);
}
.lp-article-side {
order: 2;
top: 112px;
}
.lp-article-content > p:first-of-type {
margin-top: 0;
color: #1f2a38;
font-size: clamp(18px, 1.35vw, 23px);
line-height: 1.62;
}
.lp-article-content p {
margin: 1.05em 0 0;
}
.lp-article-content h2 {
position: relative;
margin-top: clamp(34px, 4vw, 58px);
padding-top: 24px;
font-size: clamp(25px, 2.05vw, 38px);
line-height: 1.12;
text-transform: none;
}
.lp-article-content h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: min(280px, 52vw);
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #111820, rgba(17, 24, 32, 0));
}
.lp-article-content h3 {
font-size: clamp(21px, 1.55vw, 29px);
}
.lp-article-content ul,
.lp-article-list {
display: grid;
gap: 10px;
margin: 22px 0 0;
padding: 18px;
border: 1px solid rgba(0, 123, 255, 0.12);
border-radius: 22px;
background: linear-gradient(135deg, #f5f9ff, #ffffff);
list-style: none;
}
.lp-article-content li {
position: relative;
padding-left: 28px;
}
.lp-article-content li::before {
content: "";
position: absolute;
left: 6px;
top: 0.8em;
width: 8px;
height: 8px;
border-radius: 50%;
background: #007bff;
box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.1);
}
.lp-article-share,
.lp-article-note {
border-radius: 22px;
}
.lp-article-share a {
background: #fff;
border: 1px solid rgba(17, 38, 64, 0.08);
}
.lp-article-related {
max-width: min(var(--lp-view-width), 1180px);
}
@media (max-width: 1180px) {
.lp-article-layout {
grid-template-columns: 1fr;
}
.lp-article-side {
order: 1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-article-content {
order: 2;
}
}
@media (max-width: 820px) {
.lp-article-hero__copy {
grid-template-columns: 1fr;
}
.lp-article-hero h1 {
font-size: clamp(30px, 9vw, 48px);
}
.lp-article-hero__media {
height: clamp(210px, 54vw, 340px);
}
}
@media (max-width: 720px) {
.lp-article-side {
grid-template-columns: 1fr;
}
.lp-article-content {
padding: 24px 20px;
border-left-width: 3px;
}
} .lp-article-hero {
max-width: min(var(--lp-view-width), 1040px);
margin-top: clamp(18px, 2.5vw, 34px);
padding: clamp(18px, 2.4vw, 34px);
border-radius: 24px;
}
.lp-article-hero__copy {
gap: 12px 22px;
}
.lp-article-back {
padding: 7px 11px;
font-size: 13px;
}
.lp-article-hero .lp-blog-meta {
gap: 6px;
}
.lp-article-hero .lp-blog-meta span {
min-height: 24px;
padding: 4px 9px;
font-size: 12px;
}
.lp-article-hero h1 {
max-width: 760px;
font-size: clamp(27px, 3.2vw, 48px);
line-height: 1.02;
letter-spacing: -0.045em;
}
.lp-article-hero__copy > p {
max-width: 440px;
font-size: clamp(14px, 0.95vw, 16px);
line-height: 1.5;
}
.lp-article-hero__media {
margin-top: clamp(14px, 2vw, 22px);
height: clamp(180px, 22vw, 300px);
border-radius: 20px;
box-shadow: 0 14px 34px rgba(17, 38, 64, 0.1);
}
.lp-article-layout {
margin-top: clamp(26px, 3vw, 44px);
}
.lp-article-related {
max-width: min(var(--lp-view-width), 1040px);
margin-top: clamp(32px, 4vw, 52px);
padding: clamp(18px, 2.4vw, 30px);
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 26px;
background: #fff;
box-shadow: 0 14px 38px rgba(18, 35, 58, 0.06);
}
.lp-article-related .lp-seo-section-head {
display: block;
margin-bottom: 18px;
}
.lp-article-related .lp-rd-kicker {
margin-bottom: 8px;
font-size: 11px;
}
.lp-article-related .lp-seo-section-head h2 {
font-size: clamp(24px, 2.1vw, 34px);
line-height: 1;
letter-spacing: -0.04em;
}
.lp-article-related .lp-seo-section-head h2::after {
width: 180px;
margin-top: 12px;
}
.lp-article-related .lp-blog-grid,
.lp-blog-grid--related {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.lp-article-related .lp-blog-card,
.lp-blog-card--small {
border-radius: 18px;
box-shadow: 0 10px 26px rgba(18, 35, 58, 0.055);
}
.lp-article-related .lp-blog-card:hover,
.lp-blog-card--small:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(18, 35, 58, 0.09);
}
.lp-article-related .lp-blog-card__media,
.lp-blog-grid--related .lp-blog-card__media {
height: clamp(110px, 9vw, 150px);
}
.lp-article-related .lp-blog-card__body,
.lp-blog-card--small .lp-blog-card__body {
padding: 13px;
}
.lp-article-related .lp-blog-meta {
margin-bottom: 8px;
font-size: 11px;
}
.lp-article-related .lp-blog-meta span {
min-height: 22px;
padding: 4px 8px;
}
.lp-article-related .lp-blog-card h3,
.lp-blog-card--small h3 {
font-size: clamp(15px, 1.1vw, 19px);
line-height: 1.16;
letter-spacing: -0.03em;
}
.lp-article-related .lp-blog-card__link,
.lp-blog-card--small .lp-blog-card__link {
margin-top: 12px;
font-size: 13px;
}
@media (max-width: 1180px) {
.lp-article-related .lp-blog-grid,
.lp-blog-grid--related {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.lp-article-hero h1 {
font-size: clamp(27px, 7.4vw, 40px);
}
.lp-article-hero__media {
height: clamp(170px, 42vw, 260px);
}
.lp-article-related .lp-blog-grid,
.lp-blog-grid--related {
grid-template-columns: 1fr;
}
.lp-article-related .lp-blog-card__media,
.lp-blog-grid--related .lp-blog-card__media {
height: 170px;
}
} .lp-article {
color: #17202b;
}
.lp-article-hero {
max-width: min(var(--lp-view-width), 980px);
padding: clamp(18px, 2.2vw, 30px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 253, 0.9)),
radial-gradient(circle at 12% 8%, rgba(0, 123, 255, 0.08), transparent 30%);
}
.lp-article-hero__copy {
grid-template-columns: 1fr;
max-width: 820px;
}
.lp-article-hero h1 {
max-width: 820px;
font-size: clamp(26px, 2.65vw, 42px);
line-height: 1.05;
letter-spacing: -0.04em;
}
.lp-article-hero__copy > p {
max-width: 680px;
color: #506073;
font-size: clamp(14px, 0.9vw, 16px);
line-height: 1.62;
}
.lp-article-hero__media {
height: clamp(165px, 19vw, 250px);
border: 1px solid rgba(17, 38, 64, 0.08);
}
.lp-article-layout {
max-width: min(var(--lp-view-width), 1060px);
grid-template-columns: minmax(0, 760px) minmax(210px, 250px);
align-items: start;
gap: clamp(18px, 3vw, 42px);
}
.lp-article-content {
padding: clamp(26px, 3.2vw, 46px);
border-radius: 26px;
background:
linear-gradient(180deg, #fff 0%, #fff 62%, #fbfdff 100%);
box-shadow: 0 18px 50px rgba(18, 35, 58, 0.055);
}
.lp-article-content > p:first-of-type {
padding: 18px 20px;
border: 1px solid rgba(0, 123, 255, 0.12);
border-left: 4px solid #007bff;
border-radius: 18px;
background: #f4f9ff;
font-size: clamp(17px, 1.1vw, 20px);
line-height: 1.62;
}
.lp-article-content p,
.lp-article-content li {
font-size: clamp(16px, 0.95vw, 18px);
line-height: 1.76;
}
.lp-article-content h2 {
margin-top: clamp(32px, 3.6vw, 50px);
padding-top: 18px;
font-size: clamp(24px, 1.75vw, 32px);
letter-spacing: -0.035em;
}
.lp-article-content h2::before {
width: min(210px, 52vw);
height: 2px;
background: linear-gradient(90deg, #111820 0%, rgba(17, 24, 32, 0.08) 100%);
}
.lp-article-content h3 {
margin-top: 1.35em;
font-size: clamp(20px, 1.35vw, 25px);
letter-spacing: -0.025em;
}
.lp-article-content ul,
.lp-article-list {
padding: 18px 18px 18px 20px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 20px;
background: #f8fafc;
}
.lp-article-content ol {
padding: 18px 18px 18px 34px;
border: 1px solid rgba(17, 38, 64, 0.08);
border-radius: 20px;
background: #f8fafc;
}
.lp-article-content li + li {
margin-top: 8px;
}
.lp-article-content blockquote {
border-left: 0;
border-radius: 22px;
background:
linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(255, 255, 255, 0.92));
box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.12);
}
.lp-article-content blockquote::before {
content: "";
display: block;
width: 42px;
height: 3px;
margin-bottom: 14px;
border-radius: 99px;
background: #007bff;
}
.lp-article-content img,
.lp-article-content figure {
border-radius: 22px;
}
.lp-article-content figure {
margin: 28px 0;
}
.lp-article-content figcaption {
margin-top: 10px;
color: #718094;
font-size: 14px;
line-height: 1.5;
}
.lp-article-content table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(17, 38, 64, 0.08);
}
.lp-article-content th,
.lp-article-content td {
padding: 13px 15px;
border-bottom: 1px solid rgba(17, 38, 64, 0.08);
text-align: left;
}
.lp-article-content th {
background: #f2f6fb;
color: #111820;
}
.lp-article-share,
.lp-article-note {
padding: 16px;
border-radius: 20px;
}
.lp-article-note p {
font-size: 14px;
}
.lp-article-related {
max-width: min(var(--lp-view-width), 1060px);
}
.lp-article-related .lp-blog-card__media,
.lp-blog-grid--related .lp-blog-card__media {
height: clamp(100px, 8vw, 132px);
}
.lp-article-related .lp-blog-card__body,
.lp-blog-card--small .lp-blog-card__body {
padding: 12px;
}
.lp-article-related .lp-blog-card h3,
.lp-blog-card--small h3 {
font-size: clamp(14px, 1vw, 17px);
}
@media (max-width: 980px) {
.lp-article-layout {
grid-template-columns: 1fr;
}
.lp-article-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
order: 1;
}
.lp-article-content {
order: 2;
}
}
@media (max-width: 720px) {
.lp-article-hero {
padding: 16px;
}
.lp-article-hero h1 {
font-size: clamp(25px, 8vw, 38px);
}
.lp-article-hero__media {
height: clamp(158px, 42vw, 230px);
}
.lp-article-content {
padding: 22px 18px;
}
.lp-article-content > p:first-of-type {
padding: 15px;
}
.lp-article-side {
grid-template-columns: 1fr;
}
}
.lp-article-content ol li {
padding-left: 0;
}
.lp-article-content ol li::before {
content: none;
}