body.main-page {
background-color: #0a0d1a;
width: 100%;
overflow-x: hidden;
}
body.main-page::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(79, 70, 229, 0.12), transparent 60%),
radial-gradient(ellipse 50% 40% at 85% 60%, rgba(249, 168, 212, 0.06), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hidden {
display: none !important;
}
.landing__page {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 100px;
background: transparent;
z-index: 1;
}
.main__container {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
padding: 0px 120px;
margin: 0 auto;
}
/* <================================HERO================================> */
.main__hero {
--hero-text-1: rgb(225, 241, 255);
--hero-text-2: rgba(225, 241, 255, 0.7);
--hero-text-3: rgba(225, 241, 255, 0.45);
--hero-gradient-12: linear-gradient(90deg, rgba(79, 70, 229, 0.12) 0%, rgba(40, 148, 236, 0.12) 100%);
--hero-gradient-full: linear-gradient(90deg, rgba(79, 70, 229, 1) 0%, rgba(40, 148, 236, 1) 100%);
--hero-edge: 20px; /* paddings шапки */
--hero-header-h: 96px;
position: relative;
width: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 0;
padding: calc(var(--hero-edge) + var(--hero-header-h)) var(--hero-edge) 0;
font-family: 'Roboto', sans-serif;
}
.main__hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 50% 0%, rgba(40, 148, 236, 0.16), transparent 70%),
radial-gradient(80% 60% at 50% 100%, rgba(79, 70, 229, 0.20), transparent 70%),
linear-gradient(to bottom, rgba(8, 10, 22, 0.78) 0%, rgba(8, 10, 22, 0.86) 55%, rgba(13, 17, 23, 0.98) 100%);
z-index: 1;
pointer-events: none;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Контентный фрейм */
.main-hero__banner {
position: relative;
z-index: 3;
width: 100%;
max-width: 1600px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 48px 40px;
color: var(--hero-text-1);
background: var(--hero-gradient-12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(225, 241, 255, 0.08);
border-radius: 20px;
box-shadow: 0 24px 80px -32px rgba(8, 10, 22, 0.7);
}
/* Pill-плашка */
.hero-banner__pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(225, 241, 255, 0.04);
border: 1px solid rgba(225, 241, 255, 0.12);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hero-text-2);
}
.hero-banner__pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hero-gradient-full);
box-shadow: 0 0 0 3px rgba(40, 148, 236, 0.15);
animation: heroPillPulse 2.4s ease-in-out infinite;
}
@keyframes heroPillPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(40, 148, 236, 0.15); }
50% { box-shadow: 0 0 0 6px rgba(40, 148, 236, 0.05); }
}
/* Заголовок */
.hero-banner__title {
width: 100%;
max-width: 78rem;
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--hero-text-1);
}
.hero-banner__title-neon {
--neon-interval: 1s;
display: inline;
font-family: 'LIBRARY 3 AM soft', 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
color: rgb(225, 241, 255);
text-shadow:
0 0 2px rgb(194, 228, 255),
0 0 12px rgb(40, 148, 236),
0 0 28px rgb(68, 91, 231),
0 0 60px rgba(79, 70, 229, 0.85);
filter: saturate(40%);
will-change: filter, color;
animation: heroNeonFlicker steps(100) var(--neon-interval) 0.5s infinite;
}
@keyframes heroNeonFlicker {
50% {
color: rgb(225, 241, 255);
filter: saturate(150%) hue-rotate(10deg);
}
}
/* Подзаголовок */
.hero-banner__subtitle {
width: 100%;
max-width: 50rem;
margin: 0;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 400;
line-height: 1.55;
color: var(--hero-text-2);
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-banner__subtitle-line {
display: block;
}
/* CTA-блок */
.hero-banner__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: stretch;
margin-top: 8px;
}
.hero-banner__cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
white-space: nowrap;
}
.hero-banner__cta--primary {
color: #FFFFFF;
background: var(--hero-gradient-full);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 32px -12px rgba(79, 70, 229, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.hero-banner__cta--primary:hover {
transform: translateY(-1px);
box-shadow: 0 18px 42px -12px rgba(79, 70, 229, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hero-banner__cta-arrow {
transition: transform 0.2s ease;
}
.hero-banner__cta--primary:hover .hero-banner__cta-arrow {
transform: translateX(2px);
}
.hero-banner__cta--secondary {
color: var(--hero-text-1);
background: rgba(225, 241, 255, 0.04);
border: 1px solid rgba(225, 241, 255, 0.16);
}
.hero-banner__cta--secondary:hover {
background: rgba(225, 241, 255, 0.08);
border-color: rgba(225, 241, 255, 0.28);
}
.hero-banner__trust {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 22px;
font-size: 13px;
line-height: 1.3;
color: rgba(225, 241, 255, 0.65);
}
.hero-banner__trust-item {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.hero-banner__trust-check {
color: #2894EC;
flex-shrink: 0;
}
@media (max-width: 480px) {
.hero-banner__trust {
flex-direction: column;
gap: 6px;
font-size: 12px;
}
.hero-banner__trust-item {
white-space: normal;
}
}
/* Видео-фон и тёмный overlay скрываем на планшетах и мобайле */
@media (max-width: 768px) {
.hero__video,
.main__hero::after {
display: none;
}
.main__hero {
padding-top: calc(var(--hero-edge) * 2 + var(--hero-header-h));
padding-bottom: var(--hero-edge);
}
.main-hero__banner {
min-height: calc(100svh - var(--hero-edge) * 3 - var(--hero-header-h));
}
}
/* На мобайле убираем точку, шрифт оставляем JetBrains Mono uppercase */
@media (max-width: 540px) {
.hero-banner__pill-dot {
display: none;
}
.hero-banner__pill {
gap: 0;
font-size: 10px;
letter-spacing: 0.06em;
padding: 6px 10px;
}
}
/* <================================AUDIENCE / Для кого это================================> */
.audience {
--aud-text-1: rgb(225, 241, 255);
--aud-text-2: rgba(225, 241, 255, 0.7);
--aud-text-3: rgba(225, 241, 255, 0.45);
--aud-surface: rgba(225, 241, 255, 0.04);
--aud-border: rgba(225, 241, 255, 0.1);
--aud-gradient-12: linear-gradient(90deg, rgba(79, 70, 229, 0.12) 0%, rgba(40, 148, 236, 0.12) 100%);
--aud-gradient-full: linear-gradient(90deg, rgba(79, 70, 229, 1) 0%, rgba(40, 148, 236, 1) 100%);
width: 100%;
max-width: 1600px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 80px 20px 40px;
font-family: 'Roboto', sans-serif;
color: var(--aud-text-1);
}
.audience__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.audience__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aud-text-2);
padding: 6px 14px;
border-radius: 999px;
background: var(--aud-surface);
border: 1px solid var(--aud-border);
}
.audience__title {
margin: 0;
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--aud-text-1);
}
.audience__tabs-wrap {
width: 100%;
display: flex;
flex-direction: column;
}
.audience__tabs {
display: flex;
width: 100%;
gap: 4px;
align-items: stretch;
position: relative;
z-index: 2;
}
.audience__tab {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1 1 0;
min-width: 0;
padding: 14px 22px;
background: #0d1019;
border: 1px solid rgba(225, 241, 255, 0.08);
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(225, 241, 255, 0.4);
cursor: pointer;
transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
position: relative;
user-select: none;
margin-bottom: -1px;
}
.audience__tab:hover {
color: rgba(225, 241, 255, 0.65);
background: #11141f;
}
.audience__tab.is-active {
background: #11141f;
border-color: rgba(79, 70, 229, 0.4);
color: var(--aud-text-1);
z-index: 3;
}
.audience__tab.is-active::before {
content: '';
position: absolute;
top: -1px;
left: 16px;
right: 16px;
height: 1px;
background: linear-gradient(90deg, transparent, #4F46E5, transparent);
box-shadow: 0 0 8px rgba(79, 70, 229, 0.18);
}
.audience__tab-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: rgba(225, 241, 255, 0.4);
transition: color 0.25s ease;
flex-shrink: 0;
}
.audience__tab.is-active .audience__tab-icon {
color: #2894EC;
}
.audience__tab:focus-visible {
outline: 2px solid var(--aud-text-1);
outline-offset: -2px;
}
.audience__panel {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
padding: 40px;
background: #11141f;
border: 1px solid rgba(79, 70, 229, 0.4);
border-radius: 16px;
border-top-left-radius: 0;
box-shadow:
inset 0 0 0 1px rgba(79, 70, 229, 0.1),
0 0 32px rgba(79, 70, 229, 0.12);
position: relative;
}
.audience__panel[hidden] {
display: none;
}
.audience__panel.is-active {
animation: audienceFadeIn 0.35s ease;
}
@keyframes audienceFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.audience__pains {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.audience__pain {
flex: 1;
display: flex;
align-items: center;
position: relative;
margin: 0;
padding: 24px 24px 24px 56px;
background: #161a28;
border: 1px solid rgba(225, 241, 255, 0.08);
border-radius: 12px;
font-size: 17px;
font-weight: 400;
line-height: 1.45;
color: var(--aud-text-1);
font-style: normal;
}
.audience__pain::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 22px;
width: 22px;
height: 18px;
background-color: var(--aud-text-3);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.audience__benefits {
display: flex;
flex-direction: column;
gap: 18px;
padding: 28px;
background: #161a28;
border: 1px solid rgba(79, 70, 229, 0.25);
border-radius: 12px;
background-image: var(--aud-gradient-12);
background-blend-mode: overlay;
}
.audience__benefits-label {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(225, 241, 255, 0.4);
}
.audience__benefits-label::before {
content: '';
width: 20px;
height: 1px;
background: rgba(79, 70, 229, 0.4);
}
.audience__benefits-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.audience__benefit {
position: relative;
padding-left: 28px;
font-size: 17px;
line-height: 1.4;
color: var(--aud-text-1);
}
.audience__benefit::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #F9A8D4;
box-shadow: 0 0 8px rgba(249, 168, 212, 0.45);
animation: audiencePulse 2s ease-in-out infinite;
}
@keyframes audiencePulse {
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}
.audience__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
align-self: flex-start;
padding: 12px 22px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
color: var(--aud-text-1);
background: rgba(225, 241, 255, 0.06);
border: 1px solid rgba(225, 241, 255, 0.18);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.audience__cta:hover {
background: rgba(225, 241, 255, 0.12);
border-color: rgba(225, 241, 255, 0.32);
}
.audience__cta:hover svg {
transform: translateX(2px);
}
.audience__cta svg {
transition: transform 0.2s ease;
}
@media (max-width: 900px) {
.audience__panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.audience__panel {
padding: 24px;
}
}
@media (max-width: 540px) {
.audience {
gap: 20px;
}
.audience__tab {
padding: 10px 8px;
font-size: 9px;
letter-spacing: 0.08em;
gap: 4px;
}
.audience__panel {
padding: 20px;
gap: 16px;
}
.audience__pain {
padding: 18px 18px 18px 46px;
font-size: 15px;
}
.audience__pain::before {
top: 18px;
left: 16px;
width: 18px;
height: 14px;
}
.audience__benefits {
padding: 20px;
}
.audience__benefit {
font-size: 15px;
}
}
/* <================================PRODUCT / Что внутри продукта================================> */
.product {
--p-text-1: rgb(225, 241, 255);
--p-text-2: rgba(225, 241, 255, 0.65);
--p-text-3: rgba(225, 241, 255, 0.4);
--p-accent: #4F46E5;
--p-accent-2: #2894EC;
--p-cyan: #54B2FF;
width: 100%;
max-width: 1600px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 60px 20px 40px;
font-family: 'Roboto', sans-serif;
color: var(--p-text-1);
}
.product__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.product__heading .product__start-line { margin-top: 4px; }
.product__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-2);
padding: 6px 14px;
border-radius: 999px;
background: rgba(225, 241, 255, 0.04);
border: 1px solid rgba(225, 241, 255, 0.1);
}
.product__title {
margin: 0;
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.product__flow {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.product__start-line {
width: 240px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent 0%, #4F46E5 30%, #2894EC 70%, transparent 100%);
box-shadow: 0 0 14px rgba(79, 70, 229, 0.55);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.9s cubic-bezier(.2, .8, .2, 1);
}
.product.is-flow-visible .product__start-line {
transform: scaleX(1);
}
.product__wire {
width: 100%;
height: clamp(110px, 14vw, 160px);
display: block;
overflow: visible;
flex-shrink: 0;
}
.product__wire-bg {
fill: none;
stroke: rgba(225, 241, 255, 0.18);
stroke-width: 1.4;
stroke-dasharray: 6 6;
stroke-linecap: round;
}
.product__wire-fg {
fill: none;
stroke: url(#wireGradient);
stroke-width: 2.2;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(79, 70, 229, 0.5));
}
.product__block {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.product__block--side-left .product__block-head {
align-self: flex-start;
align-items: flex-start;
text-align: left;
padding-left: 80px;
max-width: fit-content;
}
.product__block--side-right .product__block-head {
align-self: flex-end;
align-items: flex-end;
text-align: right;
padding-right: 80px;
max-width: fit-content;
}
.product__trust {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: 13px;
line-height: 1.3;
color: rgba(225, 241, 255, 0.65);
}
.product__block--side-left .product__trust { justify-content: flex-start; }
.product__block--side-right .product__trust { justify-content: flex-end; }
@media (max-width: 1024px) {
.product__block--side-left .product__trust,
.product__block--side-right .product__trust {
justify-content: center;
}
}
.product__trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.product__trust-check {
color: #2894EC;
flex-shrink: 0;
}
.product__wire-mobile { visibility: hidden; }
@media (max-width: 1024px) {
.product__wire { height: clamp(80px, 12vw, 110px); }
.product__wire-desktop { visibility: hidden; }
.product__wire-mobile { visibility: visible; }
.product__block--side-left .product__block-head,
.product__block--side-right .product__block-head {
align-self: center !important;
align-items: center !important;
text-align: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 640px;
}
.product__block--side-right .product__sublabel,
.product__block--side-left .product__sublabel { align-self: center !important; }
.product__start-line { width: 180px; }
}
.product__block-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 640px;
text-align: center;
}
.product__sublabel {
display: inline-flex;
align-items: center;
padding: 8px 18px;
background: rgba(79, 70, 229, 0.18);
border: 1px solid rgba(79, 70, 229, 0.45);
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-cyan);
align-self: flex-start;
transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.product__block--side-right .product__sublabel { align-self: flex-end; }
.product__block:not(.product__block--side-left):not(.product__block--side-right) .product__sublabel { align-self: center; }
.product__block.is-active .product__sublabel {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.55), rgba(40, 148, 236, 0.55));
border-color: rgba(225, 241, 255, 0.95);
color: white;
box-shadow:
inset 0 0 6px rgba(40, 148, 236, 0.5),
0 0 18px rgba(79, 70, 229, 0.55),
0 0 38px rgba(79, 70, 229, 0.3);
}
.product__subtitle {
margin: 0;
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
.product__subdesc {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--p-text-2);
}
/* === ПОЛИГОН (стиль workspace) === */
.polygon {
position: relative;
width: 100%;
aspect-ratio: 760 / 360;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(79, 70, 229, 0.08), transparent 70%),
#0d1117;
border: 1px solid rgba(225, 241, 255, 0.06);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.polygon__edges {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.polygon__edge {
fill: none;
stroke: #64748b;
stroke-width: 1.2;
stroke-dasharray: 6 6;
stroke-linecap: round;
animation: polygonDash 1.6s linear infinite;
}
@keyframes polygonDash {
to { stroke-dashoffset: -24; }
}
.polygon__node {
--node-w: 110;
--node-h: 72;
position: absolute;
left: calc(100% * var(--x) / 760);
top: calc(100% * var(--y) / 360);
width: calc(100% * var(--node-w) / 760);
height: calc(100% * var(--node-h) / 360);
padding: 10px 8px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(to right, rgba(79, 70, 229, 0.2), rgba(40, 148, 236, 0.2));
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
color: white;
z-index: 2;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.polygon__node-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
}
.polygon__node-icon {
width: clamp(26px, 3vw, 36px);
height: clamp(26px, 3vw, 36px);
flex-shrink: 0;
display: block;
pointer-events: none;
}
.polygon__caption {
position: absolute;
left: calc(100% * var(--x) / 760);
top: calc(100% * var(--y) / 360);
width: calc(100% * 110 / 760);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(9px, 0.85vw, 11px);
letter-spacing: 0.04em;
line-height: 1.3;
color: rgba(225, 241, 255, 0.42);
text-align: center;
z-index: 2;
pointer-events: none;
}
.polygon__node--trigger {
background: linear-gradient(to right, rgba(79, 70, 229, 1), rgba(40, 148, 236, 1));
}
.polygon__node--if {
background: rgba(13, 17, 23, 0.6);
border-color: rgba(255, 255, 255, 0.5);
}
.polygon__node.is-active {
border-color: rgba(225, 241, 255, 1);
box-shadow:
inset 0 0 4px 0 rgba(40, 148, 236, 0.5),
0 0 4px 0 rgba(40, 148, 236, 0.5),
inset 0 0 10px rgba(79, 70, 229, 0.8),
0 0 10px rgba(79, 70, 229, 0.8),
inset 0 0 20px rgba(79, 70, 229, 0.5),
0 0 20px rgba(79, 70, 229, 0.5);
z-index: 4;
animation: polygonGlow 2.6s ease-in-out infinite;
}
@keyframes polygonGlow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.12); }
}
.polygon__node-title {
font-size: clamp(11px, 1vw, 13px);
font-weight: 500;
line-height: 1.2;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.polygon__handle {
position: absolute;
width: 8px;
height: 8px;
background: #1a192b;
border: 1px solid white;
border-radius: 50%;
z-index: 3;
}
.polygon__handle--in { left: 50%; top: -4px; transform: translateX(-50%); }
.polygon__handle--out { left: 50%; bottom: -4px; transform: translateX(-50%); }
.polygon__handle--out-true { left: 30%; bottom: -4px; top: auto; transform: translateX(-50%); }
.polygon__handle--out-false { left: 70%; bottom: -4px; top: auto; transform: translateX(-50%); }
/* === НАСТРОЙКА УЗЛОВ (статичный jsonEditor) === */
.json-editors {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.json-editor {
background: linear-gradient(to right, rgba(79, 70, 229, 0.2), rgba(40, 148, 236, 0.2));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(225, 241, 255, 0.5);
border-radius: 10px;
box-shadow:
inset 0 0 4px rgba(40, 148, 236, 0.5),
0 0 8px rgba(79, 70, 229, 0.35),
0 0 24px rgba(79, 70, 229, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
color: white;
}
.json-editor__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
}
.json-editor__title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.json-editor__close {
font-size: 22px;
font-weight: 300;
color: rgba(225, 241, 255, 0.55);
line-height: 1;
flex-shrink: 0;
}
.json-editor__body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 20px 18px;
flex: 1;
}
.json-editor__row {
display: flex;
flex-direction: column;
gap: 8px;
}
.json-editor__label {
font-size: 14px;
color: rgba(225, 241, 255, 0.92);
letter-spacing: 0;
line-height: 1.35;
}
.json-editor__input,
.json-editor__textarea {
background: transparent;
border: 1px solid rgba(225, 241, 255, 0.5);
border-radius: 8px;
padding: 11px 14px;
font-family: 'Roboto', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.json-editor__textarea {
min-height: 92px;
white-space: pre-wrap;
word-break: break-word;
}
.json-editor__textarea--code {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
white-space: pre;
overflow-x: auto;
min-height: 0;
}
.json-editor__select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
background: transparent;
border: 1px solid rgba(225, 241, 255, 0.5);
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.json-editor__select svg {
color: rgba(225, 241, 255, 0.55);
flex-shrink: 0;
}
.json-editor__var {
display: inline-block;
padding: 1px 6px;
margin: 0 1px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: white;
background: rgba(79, 70, 229, 0.45);
border: 1px solid rgba(40, 148, 236, 0.6);
border-radius: 4px;
line-height: 1.4;
}
.json-editor__btn-rows {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.json-editor__btn-row {
display: flex;
align-items: stretch;
gap: 8px;
width: 100%;
}
.json-editor__btn-row .json-editor__input {
flex: 1;
min-width: 0;
}
.json-editor__input--placeholder {
color: rgba(225, 241, 255, 0.55);
}
.json-editor__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid rgba(225, 241, 255, 0.45);
border-radius: 8px;
color: rgba(225, 241, 255, 0.7);
font-size: 18px;
font-weight: 300;
line-height: 1;
flex-shrink: 0;
}
.json-editor__btn-actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.json-editor__add-btn {
align-self: flex-start;
padding: 9px 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(225, 241, 255, 0.4);
border-radius: 8px;
font-size: 13px;
color: white;
}
.json-editor__footer {
display: flex;
justify-content: flex-end;
margin-top: auto;
padding-top: 4px;
}
.json-editor__save {
padding: 10px 22px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(225, 241, 255, 0.4);
border-radius: 8px;
color: white;
font-size: 14px;
font-weight: 500;
}
.json-editors__dots {
display: none;
justify-content: center;
gap: 10px;
margin-top: 18px;
}
.json-editors__dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
background: rgba(225, 241, 255, 0.2);
border-radius: 50%;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.json-editors__dot.is-active {
background: linear-gradient(90deg, #4F46E5, #2894EC);
width: 24px;
border-radius: 999px;
box-shadow: 0 0 10px rgba(79, 70, 229, 0.45);
}
@media (max-width: 1100px) {
.json-editors {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 44%;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0 4px 14px;
margin: 0 -4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.json-editor { scroll-snap-align: start; scroll-snap-stop: always; }
.json-editors::-webkit-scrollbar { display: none; }
}
@media (max-width: 780px) {
.json-editors {
grid-auto-columns: 86%;
}
.json-editor { scroll-snap-align: center; }
.json-editors__dots { display: flex; }
}
/* === АНАЛИТИКА (интерактив) === */
.analytics {
margin: 0;
width: 100%;
background: #0d1117;
border: 1px solid rgba(225, 241, 255, 0.08);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
}
.analytics__chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: #11141f;
border-bottom: 1px solid rgba(225, 241, 255, 0.08);
}
.analytics__tabs {
display: flex;
gap: 4px;
background: rgba(225, 241, 255, 0.04);
border: 1px solid rgba(225, 241, 255, 0.08);
border-radius: 10px;
padding: 4px;
}
.analytics__tab {
appearance: none;
background: transparent;
border: none;
padding: 8px 16px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(225, 241, 255, 0.55);
border-radius: 6px;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.analytics__tab:hover {
color: rgba(225, 241, 255, 0.85);
}
.analytics__tab.is-active {
background: linear-gradient(90deg, var(--p-accent), var(--p-accent-2));
color: white;
box-shadow: 0 0 12px rgba(79, 70, 229, 0.45);
}
.analytics__random {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(225, 241, 255, 0.06);
border: 1px solid rgba(225, 241, 255, 0.12);
border-radius: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(225, 241, 255, 0.85);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.analytics__random:hover {
background: rgba(79, 70, 229, 0.18);
border-color: rgba(79, 70, 229, 0.5);
color: white;
}
.analytics__random:active { transform: translateY(1px); }
.analytics__body {
position: relative;
width: 100%;
aspect-ratio: 720 / 360;
background: #0d1117;
}
.analytics__chart {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
user-select: none;
}
.analytics__grid line {
stroke: rgba(225, 241, 255, 0.08);
stroke-width: 1;
}
.analytics__axis .axis-label {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0;
fill: rgba(225, 241, 255, 0.45);
}
.analytics__chart .line-path {
fill: none;
stroke: url(#chartStroke);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.35));
}
.analytics__chart .line-fill {
fill: url(#chartFill);
}
.analytics__chart .bar {
fill: url(#chartBar);
rx: 4;
filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.25));
}
.analytics__chart .funnel-bar {
fill: url(#chartStroke);
rx: 4;
filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.25));
}
.analytics__chart .hover-line {
stroke: rgba(225, 241, 255, 0.45);
stroke-width: 1;
stroke-dasharray: 3 3;
pointer-events: none;
}
.analytics__chart .hover-dot-outer {
fill: rgba(79, 70, 229, 0.18);
pointer-events: none;
}
.analytics__chart .hover-dot {
fill: white;
stroke: var(--p-accent);
stroke-width: 2;
pointer-events: none;
}
.analytics__chart .hover-bar-overlay {
fill: rgba(255, 255, 255, 0.06);
rx: 4;
pointer-events: none;
}
.analytics__tooltip {
position: absolute;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
min-width: 140px;
background: rgba(13, 17, 23, 0.95);
border: 1px solid rgba(225, 241, 255, 0.12);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
font-family: 'Roboto', sans-serif;
opacity: 0;
transform: translateY(2px);
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 10;
}
.analytics__tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
.analytics__tooltip .tt__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(225, 241, 255, 0.55);
}
.analytics__tooltip .tt__value {
font-size: 14px;
color: white;
}
.analytics__tooltip .tt__value strong {
font-size: 17px;
font-weight: 600;
margin-right: 4px;
}
.analytics__tooltip .tt__meta {
font-size: 11px;
color: var(--p-cyan);
}
.analytics__hint {
padding: 10px 18px;
background: #11141f;
border-top: 1px solid rgba(225, 241, 255, 0.06);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(225, 241, 255, 0.4);
text-align: center;
}
@media (max-width: 768px) {
.product { gap: 64px; }
.polygon__node-title { font-size: 12px; }
.polygon__node-kind { font-size: 8px; }
.analytics__chrome { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
.analytics__tabs { width: 100%; justify-content: space-between; }
.analytics__tab { flex: 1; padding: 8px 4px; font-size: 9px; letter-spacing: 0.08em; }
.analytics__random { justify-content: center; }
}
@media (max-width: 780px) {
.polygon {
aspect-ratio: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
padding: 22px 16px;
}
.polygon__edges { display: none; }
.polygon__node {
position: relative;
left: auto;
top: auto;
width: 170px !important;
height: 100px !important;
flex: 0 0 auto;
padding: 12px 10px 10px;
}
.polygon__node-icon {
width: 36px;
height: 36px;
}
.polygon__node-title { font-size: 13px; white-space: normal; }
.polygon__caption {
position: relative;
left: auto;
top: auto;
width: auto;
text-align: center;
margin: 0;
}
.polygon__node--if { display: none; }
.polygon__node:nth-of-type(1) { order: 2; }
.polygon__caption:nth-of-type(1) { order: 1; }
.polygon__node:nth-of-type(2) { order: 4; }
.polygon__caption:nth-of-type(2) { order: 3; }
.polygon__node:nth-of-type(3) { order: 6; }
.polygon__caption:nth-of-type(3) { order: 5; }
.polygon__node:nth-of-type(4) { order: 0; }
.polygon__caption:nth-of-type(4) { order: 0; display: none; }
.polygon__node:nth-of-type(5) { order: 8; }
.polygon__caption:nth-of-type(5) { order: 7; }
.polygon__node:nth-of-type(6) { order: 10; }
.polygon__caption:nth-of-type(6) { order: 9; }
.polygon__handle--in {
left: 50%;
top: -4px;
right: auto;
transform: translateX(-50%);
}
.polygon__handle--out,
.polygon__handle--out-true,
.polygon__handle--out-false {
left: 50%;
right: auto;
top: auto;
bottom: -4px;
transform: translateX(-50%);
}
.polygon__handle--out-true { left: 38%; }
.polygon__handle--out-false { left: 62%; }
.polygon__node:not(:first-of-type)::before {
content: '';
position: absolute;
left: 50%;
top: -64px;
width: 0;
height: 60px;
border-left: 1.4px dashed #64748b;
transform: translateX(-50%);
z-index: 0;
}
.polygon__caption { z-index: 1; }
}
/* <================================ADVANTAGES================================> */
.main__advantages {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: end;
width: 100%;
min-height: 80svh;
max-width: 1600px;
gap: 20px;
margin-top: 0;
transition: margin-top .6s ease;
}
.main-advantages__title {
position: relative;
z-index: 4;
}
.main-advantages__content {
display: flex;
gap: 20px;
align-items: stretch;
justify-content: center;
width: 100%;
}
.main-advantages__textblock {
display: flex;
flex-direction: column;
gap: 20px;
width: calc(50% - 20px);
flex: 1 1 auto;
}
.main-advantages__block {
display: flex;
flex-direction: column;
gap: 36px;
padding: 40px 40px;
border-radius: 10px;
width: 100%;
min-width: 400px;
flex-shrink: 0;
}
.main-advantages-block__title {
font-weight: 700;
}
.main-advantages-block__features {
display: flex;
flex-direction: column;
gap: 16px;
list-style-type: none;
padding: 0;
margin: 0;
}
.main-advantages-block__features li::before {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(to right, rgba(79, 70, 229, 1) 0%, rgba(40, 148, 236, 1) 100%);
margin-top: 5px;
}
.main-advantages-block__features li {
display: grid;
grid-template-columns: 16px 1fr;
gap: 8px;
align-items: start;
}
.main-advantages-block__button-div {
width: 100%;
display: flex;
justify-content: center;
}
.main-advantages-block__button {
display: flex;
align-items: center;
}
.main-advantages__images {
width: calc(50% - 20px);
flex: 1 1 auto;
position: relative;
display: block;
}
.advantages-images-div-top,
.advantages-images-div-bottom {
position: absolute;
width: 440px;
height: 340px;
display: block;
border-radius: 10px;
box-shadow: 12px 12px 24px 4px rgba(19, 19, 23, 0.5);
}
.advantages_nav {
display: none;
}
.advantages-images-div-top {
animation: cardTop 4s ease-in-out infinite;
}
.advantages-images-div-bottom {
animation: cardBottom 4s ease-in-out infinite;
}
.main-advantages-text-image {
position: absolute;
z-index: 1;
width: fit-content;
background-color: white;
padding: 8px 16px;
margin: 12px;
border-radius: 8px;
font-weight: 700;
font-style: italic;
height: fit-content;
color: #2894EC;
}
.text-image__bottom {
right: 0;
bottom: 0;
}
.advantages-images {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
@keyframes cardTop {
0%,
100% {
z-index: 2;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
}
10% {
transform: translate(-50%, -120%);
}
20% {
z-index: 0;
top: 55%;
left: 55%;
transform: translate(-50%, -50%);
}
50% {
z-index: 0;
top: 55%;
left: 55%;
transform: translate(-50%, -50%);
}
60% {
transform: translate(-50%, 10%);
}
70% {
z-index: 2;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
}
}
@keyframes cardBottom {
0%,
100% {
z-index: 0;
top: 55%;
left: 55%;
transform: translate(-50%, -50%);
}
10% {
transform: translate(-50%, 10%);
}
20% {
z-index: 2;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
}
50% {
z-index: 2;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
}
60% {
transform: translate(-50%, -120%);
}
70% {
z-index: 0;
top: 55%;
left: 55%;
transform: translate(-50%, -50%);
}
}
/* <================================DEMO================================> */
.main__demo {
display: flex;
align-items: stretch;
width: 100%;
height: auto;
max-width: 1600px;
gap: 40px;
transition: height 0.3s ease;
}
.main-demo__image {
width: calc(50% - 20px);
flex: 1 1 auto;
border-radius: 10px;
object-fit: cover;
transition: transform 0.3s ease;
}
.demo__container-for-cards {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 40px;
gap: 20px;
transform: scale(0);
border-radius: 10px;
visibility: hidden;
overflow: hidden;
z-index: -1;
transition: transform 0.3s ease;
will-change: transform, visability;
}
.demo__container-for-cards.active {
visibility: visible;
transform: scale(1);
}
.demo__text-cards {
text-align: center;
}
.main-demo__content {
display: flex;
flex-direction: column;
width: calc(50% - 20px) !important;
flex: 1 1 auto;
gap: 40px;
align-items: flex-start;
}
.main-demo__block {
width: 100%;
justify-content: space-evenly;
}
#demoButton {
display: none;
}
.main-demo__cards {
position: relative;
width: calc(50% - 20px);
display: none;
will-change: display;
}
.main-demo__cards.active {
display: flex;
}
.demo-cards__card {
position: absolute;
width: 240px;
height: 340px;
object-fit: cover;
border-radius: 10px;
transform: rotateY(180deg);
transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
will-change: transform, top, left;
}
/* <================================INTEGRATIONS================================> */
.main__integrations {
display: flex;
width: 100%;
flex-direction: column;
padding: 50px 20px;
gap: 60px;
border-radius: 20px;
align-items: center;
max-width: 1600px;
position: relative;
/* background-image: url(/static/img/main/integrations.png); */
}
.main-integrations__title {
text-align: center;
z-index: 3;
}
.main-integrations__title-highlight {
font-weight: 700;
font-size: 64px;
}
.main-integrations__row-wrapper {
display: flex;
flex-direction: column;
width: 100%;
overflow-x: hidden;
overflow-y: visible;
position: relative;
gap: 40px;
margin-left: -20px;
margin-right: -20px;
}
/* Add blurred end caps */
.main__integrations::after {
content: "";
position: absolute;
height: 100%;
top: 0px;
right: 0;
width: 60%;
background: linear-gradient(to left, rgba(24, 44, 65, 1) 10%, rgba(31, 30, 64, 0) 100%);
z-index: 2;
pointer-events: none;
border-radius: 20px;
}
.main__integrations::before {
content: "";
position: absolute;
top: 0px;
left: 0;
height: 100%;
width: 60%;
background: linear-gradient(to right, rgba(31, 30, 64, 1) 10%, rgba(24, 44, 65, 0) 100%);
z-index: 2;
pointer-events: none;
border-radius: 20px;
}
.main-integrations__row-wrapper::before {
left: 0;
}
.main-integrations__row-wrapper::after {
right: 0;
}
.main-integrations__button {
display: flex;
align-items: center;
z-index: 3;
}
.integrations__scroller {
overflow: hidden;
position: relative;
width: 100%;
}
.integrations__scroller:hover .scroller__track {
animation-play-state: paused !important;
}
.scroller__track {
display: flex;
will-change: transform;
transform: translate3d(0, 0, 0);
animation-duration: var(--marquee-duration, 20s);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
/* Direction binds animation-name */
.integrations__scroller[data-direction="left"] .scroller__track {
animation-name: marquee-left;
}
.integrations__scroller[data-direction="right"] .scroller__track {
animation-name: marquee-right;
}
/* Panels — seam padding equals gap, seam becomes invisible */
.scroller__panel {
display: flex;
align-items: stretch;
gap: 20px;
margin-right: 20px;
height: fit-content;
padding: 8px 0;
}
.integration {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
width: 56px;
padding: 12px;
border-radius: 10px;
flex: 0 0 auto;
border: 1px solid rgb(225, 241, 255);
}
.integration__img {
width: 100%;
height: 100%;
}
@keyframes marquee-left {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-1 * var(--panel-width, 0px)));
}
}
@keyframes marquee-right {
from {
transform: translateX(calc(-1 * var(--panel-width, 0px)));
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.scroller__track {
animation-play-state: paused !important;
}
}
/* used by integrations slider on /integrations */
.reviews__nav-line {
width: 100px !important;
position: absolute !important;
}
/* <================================PARTNERS================================> */
.main__partners {
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
gap: 60px;
max-width: 1600px;
}
.main-partners {
display: flex;
gap: 20px;
animation: scroll-left 10s linear infinite;
overflow: hidden;
}
/* <================================CONTACT-US================================> */
.main__contact-us {
display: flex;
margin: 0 auto;
justify-content: space-between;
width: 100%;
max-width: 1600px;
}
.contact-us__content {
flex: 1;
max-width: 400px;
}
.contact-us__title {
font-weight: bold;
margin-bottom: 20px;
}
.contact-us__description {
line-height: 1.5;
margin-bottom: 30px;
}
.contact-us__info {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-us__info-item {
display: flex;
align-items: center;
gap: 10px;
}
.contact-us__info-icon {
width: 20px;
height: 20px;
background-size: contain;
}
.contact-us__info-icon--email {
background-image: url("path-to-email-icon.png");
}
.contact-us__info-icon--phone {
background-image: url("path-to-phone-icon.png");
}
.contact-us__info-icon--location {
background-image: url("path-to-location-icon.png");
}
.contact-us__info-text {
font-size: 14px;
}
.contact-us__form {
flex: 1;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-us__form-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.contact-us__label {
font-size: 14px;
color: #ccc;
}
.contact-us__textarea {
height: 120px;
resize: none;
}
.contact-us__checkbox-group {
display: flex;
align-items: center;
gap: 10px;
}
.contact-us__checkbox {
width: 16px;
height: 16px;
}
.contact-us__checkbox-label {
font-size: 14px;
color: #ccc;
}
.contact-us__link {
font-size: 14px;
text-decoration: underline;
}
.contact-us__button {
align-self: flex-start;
}
.contact-us__button:hover {
background-color: #0056b3;
}
@media (max-width: 1210px) {
.shadow-block {
border-radius: 60px;
}
/* <================================ADVANTAGES================================> */
.main-advantage-textblock__title {
font-size: 56px !important;
}
.advantages-images-div-top,
.advantages-images-div-bottom {
width: 340px;
}
}
@media(max-width: 1024px) {
.shadow-block {
display: none;
}
.main__container {
padding: 0 80px;
}
/* <================================HERO================================> */
.main-hero__banner {
padding: 40px 32px;
}
/* <================================ADVANTAGES================================> */
.main__advantages {
justify-content: space-between;
flex-direction: column;
gap: 48px;
}
.main-advantages__title {
text-align: center;
width: 100%;
}
.main-advantages__content {
flex-direction: column;
gap: 94px;
}
.main-advantages__textblock {
width: 100%;
}
.main-advantages__block {
padding: 36px 36px;
}
.main-advantages__images {
width: 100%;
height: 248px;
}
.advantages-images-div-top,
.advantages-images-div-bottom {
width: 50%;
height: 100%;
/* animation: none; */
}
.advantages-images-div-top {
box-shadow: -12px 12px 24px 4px rgba(19, 19, 23, 0.5);
animation: cardTopTablet 5s ease-in-out infinite;
}
.advantages-images-div-bottom {
box-shadow: -12px -12px 24px 4px rgba(19, 19, 23, 0.5);
animation: cardBottomTablet 5s ease-in-out infinite;
}
@keyframes cardTopTablet {
0%,
100% {
transform: translate(-50%, -50%);
left: 55%;
top: 45%;
z-index: 1;
}
10% {
transform: translate(0, -50%);
top: 90%;
left: 55%;
}
20% {
transform: translate(-50%, -50%);
top: 45%;
left: 45%;
z-index: 0;
}
50% {
transform: translate(-50%, -50%);
top: 45%;
left: 45%;
z-index: 0;
}
60% {
transform: translate(-100%, -50%);
top: 90%;
left: 45%;
}
70% {
transform: translate(-50%, -50%);
left: 55%;
top: 45%;
z-index: 1;
}
}
@keyframes cardBottomTablet {
0%,
100% {
transform: translate(-50%, -50%);
top: 55%;
left: 45%;
z-index: 0;
}
10% {
transform: translate(-100%, -50%);
top: 10%;
left: 45%;
}
20% {
transform: translate(-50%, -50%);
top: 55%;
left: 55%;
z-index: 1;
}
50% {
transform: translate(-50%, -50%);
top: 55%;
left: 55%;
z-index: 1;
}
60% {
transform: translate(0, -50%);
top: 10%;
left: 55%;
}
70% {
transform: translate(-50%, -50%);
top: 55%;
left: 45%;
z-index: 0;
}
}
/* <================================DEMO================================> */
.main__demo {
align-items: center;
flex-direction: column-reverse;
}
.main-demo__content {
flex-direction: column;
align-items: center;
width: 100% !important;
max-width: 600px;
}
.main-demo__image {
display: none;
}
.main-demo__block {
width: 100% !important;
flex: none;
}
.main-demo__cards {
position: relative;
width: 100%;
display: flex;
height: fit-content;
}
.demo__container-for-cards {
display: none;
}
.demo__scroller-track {
display: flex;
height: fit-content;
}
.demo__scroller-panel {
display: flex;
gap: 40px;
}
.demo__scroller-panel--B {
display: none !important;
}
.demo__scroller-item {
width: 30%;
}
.demo-cards__card {
position: relative;
width: 100%;
transform: none;
margin: 0;
}
#demoButtonSpread {
display: none;
}
#demoButton {
display: block;
}
/* <================================PARTNERS================================> */
.main-partners {
width: 860px;
}
/* <================================CONTACT-US================================> */
.contact-us__form {
max-width: 400px;
}
}
@media(max-width: 768px) {
.main__container {
padding: 0 60px;
}
/* <================================HERO================================> */
.main-hero__banner {
padding: 36px 28px;
gap: 18px;
border-radius: 16px;
}
.hero-banner__ctas {
width: 100%;
}
.hero-banner__cta {
flex: 1 1 200px;
}
/* <================================ADVANTAGES================================> */
.main__advantages {
margin-top: 40px;
}
f .main-advantage-textblock__title {
text-align: center;
}
/* <================================DEMO================================> */
.main__demo {
gap: 40px;
}
.main-demo__cards {
overflow: hidden;
}
.main-demo__cards::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
background: linear-gradient(to right, rgba(19, 19, 23, 1) 10%, rgba(19, 19, 23, 0) 100%);
}
.main-demo__cards::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: linear-gradient(to left, rgba(19, 19, 23, 1) 10%, rgba(19, 19, 23, 0) 100%);
z-index: 2;
}
.main-demo__cards .demo__scroller-track {
animation-name: marquee-demo;
}
.demo__scroller-track {
will-change: transform;
transform: translate3d(0, 0, 0);
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
.demo__scroller-panel {
margin-right: 40px;
}
.demo__scroller-panel--B {
display: flex !important;
}
.demo__scroller-item {
width: 240px;
}
.demo-cards__card {
border: 1px solid rgba(255, 255, 255, 0.5);
}
@keyframes marquee-demo {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-1 * var(--panel-width, 0px)));
}
}
/* <================================PARTNERS================================> */
.main-partners {
max-width: 645px;
}
/* <================================CONTACT-US================================> */
.contact-us__form {
max-width: 300px;
}
.contact-us__content {
max-width: 310px;
}
/* used by integrations slider on /integrations */
.reviews__nav-line {
width: 200px !important;
position: relative !important;
}
}
@media(max-width: 540px) {
.main__container {
padding: 0 30px;
}
/* <================================HERO================================> */
.main-hero__banner {
padding: 32px 24px;
gap: 16px;
}
.hero-banner__ctas {
flex-direction: column;
width: 100%;
}
.hero-banner__cta {
flex: 0 0 auto;
width: 100%;
}
/* <================================ADVANTAGES================================> */
.main__advantages {
gap: 40px;
}
.main-advantage-textblock__title {
font-size: 40px !important;
}
.main-advantages__content {
gap: 48px;
}
.main-advantages__block {
padding: 20px 20px;
min-width: auto;
}
.main-advantages-block__button {
width: 100% !important;
}
.main-advantages-block__features li::before {
width: 8px;
height: 8px;
margin-top: 8px;
}
.main-advantages__images {
height: 340px;
display: flex;
gap: 20px;
overflow: hidden;
padding: 12px 0;
}
.advantages-images-div-top,
.advantages-images-div-bottom {
min-width: 270px;
height: 100%;
box-shadow: none;
animation: none;
position: relative;
}
.advantages_nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* <================================DEMO================================> */
/* .main-demo__image {
width: 100%;
} */
/* <================================PARTNERS================================> */
.main-partners {
max-width: 360px;
}
/* <================================CONTACT-US================================> */
.main__contact-us {
max-width: 365px;
align-items: center;
flex-direction: column;
gap: 60px;
}
.contact-us__form {
max-width: 300px;
align-self: center;
width: 100%;
}
.contact-us__content {
max-width: 310px;
}
/* <================================INTEGRATIONS================================> */
.main-integrations__button {
min-width: 220px !important;
}
}
@media(max-width: 420px) {
.main__container {
padding: 0 20px;
}
/* <================================HERO================================> */
.main-hero__banner {
padding: 28px 20px;
}
.hero-banner__pill {
font-size: 11px;
padding: 6px 12px;
}
/* <================================ADVANTAGES================================> */
.main__advantages__block {
padding: 20px 20px;
}
.main-advantages-block__features li::before {
width: 6px;
height: 6px;
margin-top: 7px;
}
/* <================================DEMO================================> */
/* <================================PARTNERS================================> */
.main-partners {
max-width: 280px;
}
/* <================================CONTACT-US================================> */
.main__contact-us {
max-width: 365px;
align-items: center;
flex-direction: column;
gap: 60px;
}
.contact-us__form {
max-width: 300px;
align-self: center;
width: 100%;
}
.contact-us__content {
max-width: 310px;
}
/* <================================INTEGRATIONS================================> */
.main-integrations__button {
min-width: 220px !important;
}
}
@media(max-width: 352px) {
.main__container {
padding: 0 10px;
}
/* <================================HERO================================> */
.main-hero__banner {
padding: 24px 16px;
}
}
@media(max-width: 320px) {
/* <================================HERO================================> */
/* <================================ADVANTAGES================================> */
/* <================================DEMO================================> */
/* <================================PARTNERS================================> */
.main-partners {
max-width: 280px;
}
/* <================================CONTACT-US================================> */
.main__contact-us {
max-width: 365px;
align-items: center;
flex-direction: column;
gap: 60px;
}
.contact-us__form {
max-width: 300px;
align-self: center;
width: 100%;
}
.contact-us__content {
max-width: 310px;
}
/* <================================INTEGRATIONS================================> */
.main-integrations__button {
min-width: 220px !important;
}
}
/* <================================COMPARE (секция 5)================================> */
.compare {
--c-text-1: rgb(225, 241, 255);
--c-text-2: rgba(225, 241, 255, 0.65);
--c-text-3: rgba(225, 241, 255, 0.4);
--c-accent: #4F46E5;
--c-accent-2: #2894EC;
--c-surface: rgba(225, 241, 255, 0.04);
--c-border: rgba(225, 241, 255, 0.1);
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 60px 20px 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
font-family: 'Roboto', sans-serif;
color: var(--c-text-1);
scroll-margin-top: 120px;
}
.compare__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
max-width: 760px;
}
.compare__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-2);
padding: 6px 14px;
border-radius: 999px;
background: var(--c-surface);
border: 1px solid var(--c-border);
}
.compare__title {
margin: 0;
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.compare__subtitle {
margin: 0;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.5;
color: var(--c-text-2);
}
/* === Десктоп: график === */
.compare__chart {
position: relative;
width: 100%;
max-width: 1000px;
aspect-ratio: 1000 / 600;
}
.compare__axes {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.compare__axis-line {
stroke: var(--c-text-3);
stroke-width: 1.4;
fill: none;
}
.compare__dot {
transition: opacity 0.5s ease;
opacity: 0;
}
.compare__dot--cat {
fill: rgba(225, 241, 255, 0.7);
}
.compare.is-visible .compare__dot--cat[data-dot="1"] { opacity: 1; transition-delay: 0.1s; }
.compare.is-visible .compare__dot--cat[data-dot="2"] { opacity: 1; transition-delay: 0.2s; }
.compare.is-visible .compare__dot--cat[data-dot="3"] { opacity: 1; transition-delay: 0.3s; }
/* Подписи осей */
.compare__axis-label {
position: absolute;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-2);
line-height: 1.4;
text-align: center;
pointer-events: none;
}
.compare__axis-label small {
font-size: 10px;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
color: var(--c-text-3);
}
.compare__axis-label--y-top { top: 0; left: 50%; transform: translateX(-50%); }
.compare__axis-label--y-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.compare__axis-label--x-left { top: 50%; left: 0; transform: translateY(-50%); text-align: left; max-width: 90px; }
.compare__axis-label--x-right { top: 50%; right: 0; transform: translateY(-50%); text-align: right; max-width: 110px; }
/* Подписи у точек */
.compare__pin {
position: absolute;
display: flex;
flex-direction: column;
gap: 6px;
max-width: 240px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.compare.is-visible .compare__pin--bottom-left { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.compare.is-visible .compare__pin--bottom-right { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.compare.is-visible .compare__pin--top-left { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.compare.is-visible .compare__pin--top-right { opacity: 1; transform: translateY(0); transition-delay: 0.85s; }
.compare__pin--top-left {
top: 16%;
left: 14%;
text-align: left;
}
.compare__pin--bottom-left {
top: 60%;
left: 14%;
text-align: left;
}
.compare__pin--bottom-right {
top: 60%;
right: 14%;
text-align: right;
align-items: flex-end;
}
.compare__pin--top-right {
top: 6%;
right: 10%;
text-align: left;
max-width: 280px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(40, 148, 236, 0.10));
border: 1px solid rgba(124, 106, 255, 0.35);
border-radius: 14px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 12px 32px rgba(79, 70, 229, 0.18);
}
.compare__pin--top-right::before {
content: "";
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, #9D90FF 0%, #4F46E5 60%, #2894EC 100%);
box-shadow: 0 0 0 3px rgba(10, 13, 26, 0.9), 0 0 18px rgba(124, 106, 255, 0.6);
}
.compare__pin-name {
font-size: 14px;
font-weight: 600;
color: var(--c-text-1);
letter-spacing: -0.01em;
}
.compare__pin--cat .compare__pin-name {
font-size: 13px;
}
.compare__pin-pain {
font-size: 13px;
line-height: 1.4;
color: var(--c-text-2);
}
.compare__pin-list {
margin: 6px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.compare__pin-list li {
position: relative;
padding-left: 14px;
font-size: 13px;
line-height: 1.45;
color: var(--c-text-1);
}
.compare__pin-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 999px;
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
}
/* Слайдер на мобиле — скрыт на десктопе */
.compare__slider,
.compare__dots {
display: none;
}
@media (max-width: 1024px) {
.compare {
padding: 56px 0;
gap: 32px;
}
.compare__heading {
padding: 0 20px;
}
.compare__chart {
display: none;
}
.compare__slider {
display: flex;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 16px;
padding: 4px 20px 8px;
}
.compare__slider::-webkit-scrollbar {
display: none;
}
.compare__card {
flex: 0 0 calc(100% - 40px);
max-width: 420px;
scroll-snap-align: center;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px 22px;
border-radius: 16px;
background: var(--c-surface);
border: 1px solid var(--c-border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.compare__card-list--pains {
gap: 14px;
}
.compare__card-list--pains li {
padding-left: 16px;
}
.compare__card-list--pains li::before {
background: rgba(225, 241, 255, 0.45);
}
.compare__card-list--pains li strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--c-text-1);
margin-bottom: 2px;
}
.compare__card-list--pains li span {
display: block;
font-size: 13px;
line-height: 1.45;
color: var(--c-text-2);
}
.compare__card--tq {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.20), rgba(40, 148, 236, 0.10));
border-color: rgba(124, 106, 255, 0.4);
box-shadow: 0 12px 32px rgba(79, 70, 229, 0.18);
}
.compare__card-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(225, 241, 255, 0.06);
color: var(--c-text-2);
}
.compare__card-icon svg,
.compare__card-icon img {
width: 22px;
height: 22px;
object-fit: contain;
}
.compare__card--tq .compare__card-icon {
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
color: #fff;
}
.compare__card-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--c-text-1);
letter-spacing: -0.01em;
}
.compare__card-pain {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--c-text-2);
}
.compare__card-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.compare__card-list li {
position: relative;
padding-left: 16px;
font-size: 14px;
line-height: 1.45;
color: var(--c-text-1);
}
.compare__card-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 999px;
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
}
.compare__dots {
display: flex;
justify-content: center;
gap: 8px;
}
.compare__dots-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(225, 241, 255, 0.2);
cursor: pointer;
transition: background 0.25s ease, width 0.25s ease;
}
.compare__dots-dot.is-active {
width: 22px;
background: linear-gradient(90deg, #7C6AFF, #54B2FF);
}
}
/* <================================CPRICING (секция 7 — короткий pricing)================================> */
.cpricing {
--cp-text-1: rgb(225, 241, 255);
--cp-text-2: rgba(225, 241, 255, 0.65);
--cp-text-3: rgba(225, 241, 255, 0.4);
--cp-accent: #4F46E5;
--cp-accent-2: #2894EC;
--cp-surface: rgba(225, 241, 255, 0.04);
--cp-border: rgba(225, 241, 255, 0.1);
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 60px 20px 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
font-family: 'Roboto', sans-serif;
color: var(--cp-text-1);
scroll-margin-top: 120px;
}
.cpricing__heading {
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
text-align: left;
}
.cpricing__heading-text {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 720px;
}
.cpricing__title {
margin: 0;
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.cpricing__subtitle {
margin: 0;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.5;
color: var(--cp-text-2);
}
.cpricing__grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.cpricing__card {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 28px 24px;
border-radius: 18px;
background: var(--cp-surface);
border: 1px solid var(--cp-border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (min-width: 1025px) {
.cpricing__card:hover {
transform: translateY(-10px);
border-color: rgba(225, 241, 255, 0.22);
background: rgba(225, 241, 255, 0.06);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32);
}
.cpricing__card--featured:hover {
transform: translateY(-16px);
border-color: rgba(124, 106, 255, 0.6);
box-shadow: 0 26px 52px rgba(79, 70, 229, 0.28);
}
}
.cpricing__card--featured {
background: linear-gradient(160deg, rgba(79, 70, 229, 0.18), rgba(40, 148, 236, 0.08));
border-color: rgba(124, 106, 255, 0.4);
box-shadow: 0 18px 40px rgba(79, 70, 229, 0.18);
transform: translateY(-6px);
}
.cpricing__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 5px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #7C6AFF, #54B2FF);
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(124, 106, 255, 0.4);
}
.cpricing__name {
margin: 0;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--cp-text-1);
}
.cpricing__price-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.cpricing__price {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(28px, 2.6vw, 36px);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--cp-text-1);
}
.cpricing__period {
font-size: 14px;
color: var(--cp-text-2);
}
.cpricing__desc {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--cp-text-2);
min-height: 38px;
}
.cpricing__limits {
margin: 0;
padding: 16px 0 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--cp-border);
}
.cpricing__limits li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.cpricing__limit-val {
font-weight: 600;
font-size: 14px;
color: var(--cp-text-1);
text-align: right;
flex-shrink: 0;
}
.cpricing__limit-name {
font-size: 13px;
color: var(--cp-text-2);
line-height: 1.3;
}
.cpricing__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 20px;
border-radius: 12px;
background: rgba(225, 241, 255, 0.06);
border: 1px solid var(--cp-border);
color: var(--cp-text-1);
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cpricing__cta:hover {
background: rgba(225, 241, 255, 0.1);
border-color: rgba(225, 241, 255, 0.2);
}
.cpricing__cta--primary {
background: linear-gradient(90deg, #4F46E5, #2894EC);
border-color: transparent;
color: #fff;
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}
.cpricing__cta--primary:hover {
background: linear-gradient(90deg, #6259EB, #3DA1F0);
border-color: transparent;
}
.cpricing__custom-row {
margin: 0;
font-size: 14px;
color: var(--cp-text-2);
text-align: center;
}
.cpricing__custom-link {
color: var(--cp-text-1);
text-decoration: none;
border-bottom: 1px dashed rgba(225, 241, 255, 0.3);
padding-bottom: 1px;
margin-left: 6px;
transition: border-color 0.2s ease, color 0.2s ease;
}
.cpricing__custom-link:hover {
color: #54B2FF;
border-bottom-color: rgba(84, 178, 255, 0.6);
}
.cpricing__all {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 28px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(225, 241, 255, 0.18);
color: var(--cp-text-1);
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.cpricing__all:hover {
background: rgba(225, 241, 255, 0.05);
border-color: rgba(225, 241, 255, 0.3);
}
@media (max-width: 1024px) {
.cpricing {
padding: 56px 20px;
gap: 32px;
}
.cpricing__heading {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.cpricing__heading-text {
align-items: center;
}
.cpricing__grid {
grid-template-columns: 1fr;
gap: 16px;
max-width: 460px;
margin: 0 auto;
}
.cpricing__card {
padding: 24px 20px;
}
.cpricing__card--featured {
transform: none;
}
}
/* <================================FINAL CTA + STEPS + VIDEOS (секция 8)================================> */
.final {
--fn-text-1: rgb(225, 241, 255);
--fn-text-2: rgba(225, 241, 255, 0.65);
--fn-text-3: rgba(225, 241, 255, 0.4);
--fn-accent: #4F46E5;
--fn-accent-2: #2894EC;
--fn-accent-3: #7C6AFF;
--fn-surface: rgba(225, 241, 255, 0.04);
--fn-surface-2: rgba(225, 241, 255, 0.06);
--fn-border: rgba(225, 241, 255, 0.1);
--fn-border-2: rgba(225, 241, 255, 0.18);
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 60px 20px 60px;
display: flex;
flex-direction: column;
gap: 40px;
font-family: 'Roboto', sans-serif;
color: var(--fn-text-1);
scroll-margin-top: 120px;
}
.final__cta {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding: 64px 48px 56px;
border-radius: 24px;
border: 1px solid var(--fn-border-2);
background:
radial-gradient(120% 140% at 50% 0%, rgba(124, 106, 255, 0.25) 0%, rgba(40, 148, 236, 0.06) 35%, rgba(225, 241, 255, 0.02) 65%),
linear-gradient(180deg, rgba(225, 241, 255, 0.04) 0%, rgba(225, 241, 255, 0.02) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
text-align: center;
}
.final__cta::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(225, 241, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(225, 241, 255, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
background-position: center;
mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
.final__cta::after {
content: '';
position: absolute;
top: -160px;
left: 50%;
transform: translateX(-50%);
width: 520px;
height: 320px;
background: radial-gradient(50% 50% at 50% 50%, rgba(124, 106, 255, 0.4) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
.final__pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 16px 7px 12px;
border-radius: 999px;
border: 1px solid rgba(124, 106, 255, 0.4);
background: rgba(124, 106, 255, 0.12);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fn-text-1);
}
.final__pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
box-shadow: 0 0 10px rgba(124, 106, 255, 0.8);
}
.final__title {
margin: 0;
max-width: 800px;
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.025em;
}
.final__title-neon {
background: linear-gradient(90deg, #7C6AFF 0%, #54B2FF 60%, #2894EC 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.final__subtitle {
margin: 0;
max-width: 540px;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.5;
color: var(--fn-text-2);
}
.final__steps {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
align-items: stretch;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.final__step {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-radius: 14px;
border: 1px solid var(--fn-border);
background: rgba(225, 241, 255, 0.03);
text-align: left;
min-width: 0;
}
.final__step-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(124, 106, 255, 0.25), rgba(40, 148, 236, 0.18));
border: 1px solid rgba(124, 106, 255, 0.4);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: #C8BBFF;
}
.final__step-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.final__step-title {
font-size: 15px;
font-weight: 500;
color: var(--fn-text-1);
white-space: nowrap;
}
.final__step-desc {
font-size: 12.5px;
line-height: 1.35;
color: var(--fn-text-3);
}
.final__step-arrow {
list-style: none;
display: inline-flex;
align-items: center;
color: var(--fn-text-3);
}
.final__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-top: 4px;
}
.final__cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.final__cta-btn--primary {
background: linear-gradient(90deg, #4F46E5, #2894EC);
color: #fff;
border: 1px solid rgba(124, 106, 255, 0.5);
box-shadow: 0 12px 28px rgba(79, 70, 229, 0.32);
}
.final__cta-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(79, 70, 229, 0.42);
}
.final__cta-btn--primary:hover .final__cta-arrow {
transform: translateX(3px);
}
.final__cta-arrow {
transition: transform 0.2s ease;
}
.final__cta-btn--secondary {
background: rgba(225, 241, 255, 0.04);
color: var(--fn-text-1);
border: 1px solid var(--fn-border-2);
}
.final__cta-btn--secondary:hover {
background: rgba(225, 241, 255, 0.08);
border-color: rgba(225, 241, 255, 0.3);
}
/* === VIDEOS BLOCK === */
.final__videos {
display: flex;
flex-direction: column;
gap: 28px;
padding: 40px 36px;
border-radius: 20px;
border: 1px solid var(--fn-border);
background: var(--fn-surface);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.final__videos-head {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 720px;
}
.final__videos-label {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 5px 12px 5px 10px;
border-radius: 999px;
border: 1px solid rgba(225, 241, 255, 0.16);
background: rgba(225, 241, 255, 0.05);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fn-text-2);
}
.final__videos-label-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #7C6AFF;
box-shadow: 0 0 0 3px rgba(124, 106, 255, 0.18);
animation: finalPulse 2.4s ease-in-out infinite;
}
@keyframes finalPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(124, 106, 255, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(124, 106, 255, 0.06); }
}
.final__videos-title {
margin: 0;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
}
.final__videos-subtitle {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--fn-text-2);
}
.final__videos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.final__video {
display: flex;
flex-direction: column;
gap: 14px;
padding: 0;
border-radius: 16px;
background: transparent;
}
.final__video-thumb {
position: relative;
aspect-ratio: 16 / 10;
border-radius: 14px;
border: 1px solid var(--fn-border);
background:
radial-gradient(80% 100% at 50% 100%, rgba(40, 148, 236, 0.18) 0%, transparent 60%),
linear-gradient(135deg, rgba(124, 106, 255, 0.14), rgba(40, 148, 236, 0.08) 60%, rgba(225, 241, 255, 0.02));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.final__video-thumb::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(225, 241, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(225, 241, 255, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 0%, transparent 100%);
pointer-events: none;
}
.final__video-play {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(124, 106, 255, 0.9), rgba(40, 148, 236, 0.9));
color: #fff;
box-shadow: 0 14px 30px rgba(79, 70, 229, 0.4);
z-index: 1;
}
.final__video-play svg {
margin-left: 3px;
}
.final__video-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(225, 241, 255, 0.16);
background: rgba(13, 17, 23, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fn-text-2);
}
.final__video-name {
font-size: 15px;
font-weight: 500;
line-height: 1.4;
color: var(--fn-text-1);
padding: 0 4px;
}
@media (max-width: 1024px) {
.final {
padding: 72px 16px 56px;
gap: 28px;
}
.final__cta {
padding: 48px 24px 40px;
gap: 22px;
}
.final__cta::after {
width: 360px;
height: 220px;
top: -100px;
}
.final__steps {
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
max-width: 360px;
}
.final__step {
width: 100%;
}
.final__step-arrow {
align-self: center;
transform: rotate(90deg);
}
.final__ctas {
width: 100%;
flex-direction: column;
align-items: stretch;
max-width: 320px;
}
.final__cta-btn {
justify-content: center;
}
.final__videos {
padding: 32px 20px;
gap: 22px;
}
.final__videos-grid {
grid-template-columns: 1fr;
gap: 14px;
max-width: 420px;
margin: 0 auto;
width: 100%;
}
}
@media (max-width: 480px) {
.final {
padding: 56px 14px 40px;
}
.final__cta {
padding: 36px 18px 32px;
}
.final__title {
font-size: clamp(26px, 8vw, 36px);
}
}
/* <================================PRICING PAGE (страница /pricing)================================> */
.pricing-page-main {
--pp-text-1: rgb(225, 241, 255);
--pp-text-2: rgba(225, 241, 255, 0.65);
--pp-text-3: rgba(225, 241, 255, 0.4);
--pp-accent: #4F46E5;
--pp-accent-2: #2894EC;
--pp-surface: rgba(225, 241, 255, 0.04);
--pp-surface-2: rgba(225, 241, 255, 0.06);
--pp-border: rgba(225, 241, 255, 0.1);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 8.75rem 1.25rem 5rem;
gap: 56px;
font-family: 'Roboto', sans-serif;
color: var(--pp-text-1);
}
.pricing-page-main > section {
width: 100%;
max-width: 1600px;
}
/* === HERO === */
.ppage__hero {
text-align: center;
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.ppage__hero-title {
margin: 0;
font-size: clamp(32px, 4vw, 56px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
}
.ppage__hero-subtitle {
margin: 0;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.5;
color: var(--pp-text-2);
max-width: 640px;
}
/* === PERIOD TOGGLE === */
.ppage__period {
display: flex;
justify-content: center;
}
.period-toggle {
display: inline-flex;
padding: 4px;
background: var(--pp-surface);
border: 1px solid var(--pp-border);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.period-toggle__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--pp-text-2);
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.period-toggle__btn:hover {
color: var(--pp-text-1);
}
.period-toggle__btn.is-active {
background: linear-gradient(90deg, #4F46E5, #2894EC);
color: #fff;
box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
}
.period-toggle__badge {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
}
/* === TARIFF CARDS === */
.ppage__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: stretch;
}
.ppage-card {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px 22px;
border-radius: 18px;
background: var(--pp-surface);
border: 1px solid var(--pp-border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (min-width: 1025px) {
.ppage-card:hover {
transform: translateY(-8px);
border-color: rgba(225, 241, 255, 0.22);
background: var(--pp-surface-2);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3);
}
.ppage-card--featured:hover {
transform: translateY(-14px);
}
}
.ppage-card--featured {
background: linear-gradient(160deg, rgba(79, 70, 229, 0.16), rgba(40, 148, 236, 0.08));
border-color: rgba(124, 106, 255, 0.4);
box-shadow: 0 18px 38px rgba(79, 70, 229, 0.18);
transform: translateY(-6px);
}
.ppage-card.is-recommended {
border-color: #54B2FF;
box-shadow: 0 0 0 2px rgba(84, 178, 255, 0.35), 0 22px 50px rgba(40, 148, 236, 0.25);
}
.ppage-card--custom {
background: linear-gradient(160deg, rgba(225, 241, 255, 0.05), rgba(225, 241, 255, 0.02));
border-style: dashed;
}
.ppage-card__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 5px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #7C6AFF, #54B2FF);
color: #fff;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(124, 106, 255, 0.4);
}
.ppage-card__name {
margin: 0;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
}
.ppage-card__price-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.ppage-card__price {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 600;
letter-spacing: -0.02em;
}
.ppage-card__period {
font-size: 13px;
color: var(--pp-text-2);
}
.ppage-card__desc {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--pp-text-2);
min-height: 38px;
}
.ppage-card__limits {
margin: 0;
padding: 14px 0 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--pp-border);
}
.ppage-card__limits li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.ppage-card__limit-val {
font-weight: 600;
font-size: 14px;
color: var(--pp-text-1);
text-align: right;
flex-shrink: 0;
}
.ppage-card__limit-name {
font-size: 13px;
color: var(--pp-text-2);
line-height: 1.3;
}
.ppage-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 18px;
border-radius: 12px;
background: rgba(225, 241, 255, 0.06);
border: 1px solid var(--pp-border);
color: var(--pp-text-1);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.ppage-card__cta:hover {
background: rgba(225, 241, 255, 0.1);
border-color: rgba(225, 241, 255, 0.2);
}
.ppage-card__cta--primary {
background: linear-gradient(90deg, #4F46E5, #2894EC);
border-color: transparent;
color: #fff;
box-shadow: 0 8px 22px rgba(79, 70, 229, 0.32);
}
.ppage-card__cta--primary:hover {
background: linear-gradient(90deg, #6259EB, #3DA1F0);
border-color: transparent;
}
/* === CONFIGURATOR === */
.ppage__configurator {
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px 36px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(79, 70, 229, 0.06), rgba(40, 148, 236, 0.03));
border: 1px solid var(--pp-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.configurator__heading {
display: flex;
flex-direction: column;
gap: 10px;
}
.configurator__title {
margin: 0;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 600;
letter-spacing: -0.02em;
}
.configurator__subtitle {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--pp-text-2);
}
.configurator__layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 36px;
align-items: start;
}
.configurator__form {
display: flex;
flex-direction: column;
gap: 28px;
}
.configurator__field {
border: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.configurator__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pp-text-2);
padding: 0;
}
.configurator__slider-row {
display: flex;
align-items: center;
gap: 16px;
}
.configurator__slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: rgba(225, 241, 255, 0.1);
outline: none;
cursor: pointer;
}
.configurator__slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
border: 3px solid #0a0d1a;
box-shadow: 0 0 0 1px rgba(124, 106, 255, 0.5), 0 4px 14px rgba(79, 70, 229, 0.5);
cursor: pointer;
transition: transform 0.15s ease;
}
.configurator__slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.configurator__slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #7C6AFF, #54B2FF);
border: 3px solid #0a0d1a;
box-shadow: 0 0 0 1px rgba(124, 106, 255, 0.5), 0 4px 14px rgba(79, 70, 229, 0.5);
cursor: pointer;
}
.configurator__output {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 18px;
font-weight: 600;
color: var(--pp-text-1);
min-width: 90px;
text-align: right;
}
.configurator__hint {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--pp-text-3);
}
.configurator__radios {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.configurator__radio {
flex: 1;
min-width: 90px;
cursor: pointer;
}
.configurator__radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.configurator__radio span {
display: block;
text-align: center;
padding: 12px 14px;
border-radius: 12px;
background: var(--pp-surface);
border: 1px solid var(--pp-border);
font-size: 14px;
color: var(--pp-text-2);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.configurator__radio:hover span {
border-color: rgba(225, 241, 255, 0.22);
color: var(--pp-text-1);
}
.configurator__radio input:checked + span {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(40, 148, 236, 0.15));
border-color: rgba(124, 106, 255, 0.55);
color: var(--pp-text-1);
font-weight: 600;
}
/* === CONFIGURATOR RESULT === */
.configurator__result {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px 26px;
border-radius: 18px;
background: rgba(10, 13, 26, 0.6);
border: 1px solid rgba(124, 106, 255, 0.3);
position: sticky;
top: 110px;
}
.result__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pp-text-2);
}
.result__plan-name {
margin: 0;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #9D90FF, #54B2FF);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.result__breakdown {
margin: 0;
padding: 14px 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--pp-border);
border-bottom: 1px solid var(--pp-border);
}
.result__breakdown li {
font-size: 13px;
line-height: 1.5;
color: var(--pp-text-2);
}
.result__total {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: var(--pp-text-2);
}
.result__total strong {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 22px;
font-weight: 600;
color: var(--pp-text-1);
}
.result__trial {
display: none;
margin-top: 4px;
text-align: right;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 18px;
font-weight: 600;
color: #2894EC;
}
.configurator__result[data-plan="business"] .result__trial {
display: block;
}
.configurator__result[data-plan="business"] #resultTotal {
text-decoration: line-through;
text-decoration-thickness: 2px;
color: var(--pp-text-2);
}
.result__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 22px;
border-radius: 12px;
background: linear-gradient(90deg, #4F46E5, #2894EC);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: filter 0.2s ease;
margin-top: 4px;
}
.result__cta:hover {
filter: brightness(1.1);
}
/* === COMPARE TABLE === */
.ppage__compare {
display: flex;
flex-direction: column;
gap: 24px;
}
.compare-title {
margin: 0;
text-align: center;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 600;
letter-spacing: -0.02em;
}
.compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--pp-surface);
border: 1px solid var(--pp-border);
border-radius: 18px;
overflow: hidden;
font-size: 14px;
}
.compare-table thead th {
padding: 18px 20px;
text-align: center;
font-weight: 600;
font-size: 15px;
background: rgba(225, 241, 255, 0.04);
border-bottom: 1px solid var(--pp-border);
}
.compare-table thead th:first-child {
text-align: left;
}
.compare-table__head--featured {
background: linear-gradient(180deg, rgba(124, 106, 255, 0.18), rgba(40, 148, 236, 0.08)) !important;
color: #fff;
}
.compare-table__group-row th {
padding: 14px 20px;
text-align: left;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pp-text-3);
background: rgba(225, 241, 255, 0.02);
border-top: 1px solid var(--pp-border);
}
.compare-table tbody tr:not(.compare-table__group-row) {
border-top: 1px solid var(--pp-border);
}
.compare-table tbody td,
.compare-table__row-head {
padding: 14px 20px;
vertical-align: top;
}
.compare-table__row-head {
text-align: left;
font-weight: 500;
color: var(--pp-text-1);
display: flex;
flex-direction: column;
gap: 2px;
}
.compare-table tbody td {
text-align: center;
color: var(--pp-text-2);
}
.compare-table__addon-price {
font-size: 12px;
color: var(--pp-text-3);
font-weight: 400;
}
/* === ACCORDION (mobile) === */
.compare-accordion {
display: none;
flex-direction: column;
gap: 12px;
}
.compare-accordion__item {
background: var(--pp-surface);
border: 1px solid var(--pp-border);
border-radius: 14px;
overflow: hidden;
}
.compare-accordion__item[open] {
border-color: rgba(124, 106, 255, 0.4);
}
.compare-accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
cursor: pointer;
list-style: none;
font-weight: 600;
}
.compare-accordion__summary::-webkit-details-marker { display: none; }
.compare-accordion__name {
font-size: 17px;
}
.compare-accordion__price {
margin-left: auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
color: var(--pp-text-2);
}
.compare-accordion__chevron {
font-size: 14px;
color: var(--pp-text-3);
transition: transform 0.2s ease;
}
.compare-accordion__item[open] .compare-accordion__chevron {
transform: rotate(180deg);
}
.compare-accordion__content {
padding: 8px 20px 20px;
border-top: 1px solid var(--pp-border);
}
.compare-accordion__content dl {
margin: 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
font-size: 14px;
}
.compare-accordion__content dt {
color: var(--pp-text-2);
}
.compare-accordion__content dd {
margin: 0;
font-weight: 500;
text-align: right;
color: var(--pp-text-1);
}
/* === CUSTOM CTA === */
.ppage__custom-cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 56px 32px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(124, 106, 255, 0.1), rgba(40, 148, 236, 0.04));
border: 1px dashed rgba(124, 106, 255, 0.3);
}
.ppage__custom-cta h2 {
margin: 0;
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
letter-spacing: -0.02em;
}
.ppage__custom-cta p {
margin: 0;
color: var(--pp-text-2);
font-size: 15px;
line-height: 1.5;
max-width: 520px;
}
.ppage__custom-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 28px;
border-radius: 999px;
background: linear-gradient(90deg, #4F46E5, #2894EC);
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
margin-top: 6px;
transition: filter 0.2s ease;
}
.ppage__custom-cta-btn:hover {
filter: brightness(1.1);
}
.ppage-contact-form {
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 8px;
text-align: left;
}
.ppage-contact-form .field {
width: 100%;
}
.ppage-contact-form .form-submit {
align-self: stretch;
}
/* === ADAPTIVE === */
@media (max-width: 1200px) {
.ppage__cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.pricing-page-main {
padding: 8.75rem 1rem 60px;
gap: 40px;
}
.ppage__cards {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.ppage-card--featured {
transform: none;
}
.ppage__configurator {
padding: 32px 22px;
}
.configurator__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.configurator__result {
position: static;
}
.compare-table {
display: none;
}
.compare-accordion {
display: flex;
}
}
@media (max-width: 480px) {
.pricing-page-main {
padding: 8.75rem 0.75rem 40px;
}
.ppage__configurator {
padding: 24px 16px;
}
.configurator__radios {
flex-direction: column;
}
}