@font-face {
font-family: Roboto;
src: url(../fonts/Roboto-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(../fonts/Roboto-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto;
src: url(../fonts/Roboto-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
--pl-ink: #434343;
--pl-ink-black: #070707;
--pl-gray: #5C5C5C;
--pl-gray-mid: #939393;
--pl-bg: #FFFFFF;
--pl-bg-soft: #F8F8F8;
--pl-line: #E9E9E9;
--pl-line-soft: #F4F4F4;
--pl-shadow: 0 0 4px rgba(0, 0, 0, .25);
--pl-accent: #FF7F00;
--pl-accent-dark: #FF6600;
--pl-accent-soft: #FFF1E4;
--pl-alert: #FF2D2D;
--pl-blue: #0098FF;
--pl-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--pl-container: 1120px;
--pl-gutter: 20px;
--pl-radius: 20px;
--pl-radius-sm: 10px;
--pl-radius-pill: 26px;
--pl-btn-h: 52px;
--pl-top: 40px;
--pl-section-gap: 120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pl-page {
margin: 0;
font-family: var(--pl-font);
font-size: 16px;
line-height: 1.5;
color: var(--pl-ink);
background: var(--pl-bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.pl-page :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.pl-page :where(ul, ol) { padding: 0; list-style: none; }
.pl-page :where(img, svg) { display: block; max-width: 100%; height: auto; }
.pl-page :where(a) { color: inherit; text-decoration: none; }
.pl-page :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pl-page * { -webkit-tap-highlight-color: transparent; }
.pl-sr {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.pl-skip {
position: absolute; left: -9999px; top: 0;
z-index: 200;
padding: 10px 18px;
background: var(--pl-accent);
color: #fff;
border-radius: 0 0 10px 0;
}
.pl-skip:focus { left: 0; }
.pl-page a:focus-visible,
.pl-page button:focus-visible,
.pl-page summary:focus-visible {
outline: 2px solid var(--pl-accent);
outline-offset: 2px;
border-radius: 6px;
}
.pl-container {
width: 100%;
max-width: calc(var(--pl-container) + var(--pl-gutter) * 2);
margin: 0 auto;
padding: 0 var(--pl-gutter);
}
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 24px;
border-radius: var(--pl-radius-pill);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
text-align: center;
transition: background-color .2s, color .2s, border-color .2s, transform .1s;
}
.pl-btn:active { transform: translateY(1px); }
.pl-btn--lg { min-height: var(--pl-btn-h); padding: 14px 32px; font-size: 17px; font-weight: 600; }
.pl-btn--accent { background: var(--pl-accent); color: #fff; }
@media (hover: hover) { .pl-btn--accent:hover { background: var(--pl-accent-dark); } }
.pl-btn--accent:active { background: var(--pl-accent-dark); }
.pl-btn--accent:focus-visible { outline-color: var(--pl-ink-black); }
.pl-section { padding-top: var(--pl-section-gap); }
.pl-hero + .pl-section { padding-top: calc(var(--pl-section-gap) - 40px); }
.pl-section__title {
margin-top: 20px;
font-size: 42px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--pl-ink-black);
}
.pl-section__head { margin-top: 20px; }
.pl-section__head .pl-section__title { margin-top: 0; }
.pl-skeleton {
position: fixed;
inset: 0;
z-index: 300;
padding-top: var(--pl-top);
background: var(--pl-bg);
transition: opacity .4s ease;
animation: pl-skeleton-fallback .4s ease 4s forwards;
}
.pl-skeleton--hide { opacity: 0; pointer-events: none; }
@keyframes pl-skeleton-fallback {
to { opacity: 0; visibility: hidden; }
}
.pl-skeleton__lines { margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
.pl-skeleton__line { display: block; height: 20px; border-radius: 8px; background: var(--pl-line-soft); }
.pl-skeleton__line--lg { height: 44px; max-width: 620px; }
.pl-skeleton__line--md { max-width: 480px; }
.pl-skeleton__line--sm { max-width: 320px; }
.pl-hero {
position: relative;
overflow: hidden;
padding: var(--pl-top) 0 40px;
background: var(--pl-bg);
color: var(--pl-ink);
}
.pl-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
align-items: center;
}
.pl-hero__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; color: var(--pl-ink-black); }
.pl-hero__brand-img { width: 35px; height: 28px; object-fit: cover; object-position: left center; border-radius: 6px; }
.pl-hero__brand-name { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; white-space: nowrap; }
.pl-hero__title {
margin-top: 22px;
max-width: 720px;
font-size: 46px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02em;
color: var(--pl-ink-black);
}
.pl-hero__title-line { white-space: nowrap; }
.pl-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.pl-hero__phone { position: relative; justify-self: center; }
.pl-phone {
width: 300px;
padding: 12px;
border-radius: 34px;
background: #1D1D1D;
box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.pl-phone__screen {
padding: 16px 14px 20px;
border-radius: 24px;
background: var(--pl-bg-soft);
color: var(--pl-ink);
}
.pl-phone__top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.pl-phone__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-accent); }
.pl-phone__top-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pl-phone__card {
margin-top: 10px;
padding: 12px;
border-radius: var(--pl-radius-sm);
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.pl-phone__card--new { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); border: 1px solid rgba(255, 45, 45, .35); }
.pl-phone__card--muted { opacity: .6; }
.pl-phone__card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-phone__badge {
padding: 3px 9px;
border-radius: 999px;
background: var(--pl-alert);
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.45;
}
.pl-phone__badge--work { background: #0098FF; }
.pl-phone__badge--done { background: var(--pl-line); color: var(--pl-gray); }
.pl-phone__num { font-size: 12px; line-height: 1.5; color: var(--pl-gray-mid); }
.pl-phone__line { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--pl-line-soft); }
.pl-phone__line--w80 { width: 80%; }
.pl-phone__line--w70 { width: 70%; }
.pl-phone__line--w60 { width: 60%; }
.pl-phone__line--w50 { width: 50%; }
.pl-phone__line--w40 { width: 40%; }
.pl-phone__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pl-phone__sum { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pl-phone__accept {
padding: 6px 14px;
border-radius: 10px;
background: var(--pl-accent);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
}
.pl-reasons { padding-bottom: var(--pl-section-gap); }
.pl-reasons .pl-section__head--center { text-align: center; }
.pl-reasons__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 24px;
margin-top: 48px;
}
.pl-reason {
flex: 0 1 240px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pl-reason__sticker {
display: block;
width: 140px;
height: 140px;
object-fit: contain;
}
.pl-reason__sticker--empty {
border-radius: var(--pl-radius);
background: var(--pl-bg-soft);
border: 1px dashed var(--pl-line);
}
.pl-reason__title {
margin-top: 18px;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--pl-ink-black);
}
.pl-reason__text {
margin-top: 8px;
max-width: 240px;
font-size: 15px;
line-height: 1.55;
color: var(--pl-gray);
}
.pl-reason__text b { font-weight: 700; color: var(--pl-ink); }
.pl-footer {
padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
border-top: 1px solid var(--pl-line);
background: var(--pl-bg);
}
.pl-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pl-footer__logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.pl-footer__logo img { height: 28px; width: auto; border-radius: 6px; }
.pl-footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pl-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.5; color: var(--pl-gray); transition: color .2s; }
@media (hover: hover) { .pl-footer__links a:hover { color: var(--pl-ink); } }
.pl-footer__copy { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--pl-gray-mid); }
html.pl-js [data-pl-animate] > li {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s ease, transform .6s ease;
}
html.pl-js [data-pl-animate].is-visible > li { opacity: 1; transform: none; }
[data-pl-animate].is-visible > li:nth-child(2) { transition-delay: .09s; }
[data-pl-animate].is-visible > li:nth-child(3) { transition-delay: .18s; }
[data-pl-animate].is-visible > li:nth-child(4) { transition-delay: .27s; }
[data-pl-animate].is-visible > li:nth-child(5) { transition-delay: .36s; }
[data-pl-animate].is-visible > li:nth-child(6) { transition-delay: .45s; }
[data-pl-animate].is-visible > li:nth-child(7) { transition-delay: .54s; }
@keyframes pl-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
50% { box-shadow: 0 6px 22px rgba(255, 45, 45, .28); }
}
[data-pl-pulse] { animation: pl-pulse 2.4s ease-in-out infinite; }
@media (max-width: 1180px) {
:root { --pl-section-gap: 96px; }
.pl-section__title { font-size: 36px; }
.pl-hero__title { font-size: 38px; }
.pl-hero__inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
.pl-phone { width: 268px; }
}
@media (max-width: 959px) {
:root {
--pl-gutter: 16px;
--pl-section-gap: 72px;
--pl-top: 24px;
}
.pl-section__title { font-size: 30px; }
.pl-hero { padding-bottom: 24px; }
.pl-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.pl-hero__title { font-size: 32px; }
.pl-hero__actions .pl-btn { flex: 1 1 220px; }
.pl-reasons__list { gap: 32px 20px; }
.pl-reason { flex-basis: calc(50% - 20px); }
.pl-footer__top { flex-direction: column; align-items: flex-start; gap: 16px; }
.pl-footer__links { flex-direction: column; gap: 0; }
}
@media (max-width: 599px) {
.pl-section__title { font-size: 26px; }
.pl-hero__title { font-size: clamp(18px, calc((100vw - 32px) / 15.2), 28px); }
.pl-phone { width: 250px; padding: 10px; }
.pl-reasons__list { gap: 28px; }
.pl-reason { flex-basis: 100%; }
.pl-reason__sticker { width: 120px; height: 120px; }
.pl-hero__actions .pl-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.pl-js [data-pl-animate] > li { transform: none; transition: opacity .5s ease; }
[data-pl-pulse] { animation: none; }
}