.page-breadcrumbs {
padding: 16px 0;
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.breadcrumbs__item {
position: relative;
display: flex;
align-items: center;
}
.breadcrumbs__item:not(:last-child)::after {
content: "/";
color: var(--c-gray-2);
display: block;
padding: 0 7px;
}
.breadcrumbs__link {
color: var(--c-deepblue);
}
.breadcrumbs__link:hover {
color: var(--c-orange);
}
.breadcrumbs__current {
color: var(--c-text);
} .product-hero {
padding: 80px 0;
}
.product-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 588px;
gap: 24px;
align-items: start;
}
.product-hero__media {
min-width: 0;
}
.product-hero__content {
min-width: 0;
}
.product-hero__header {
margin-bottom: 16px;
}
.product-hero__specs {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.product-hero__spec {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
gap: 8px;
}
.product-hero__spec-label,
.product-hero__spec-value {
display: flex;
align-items: center;
min-height: 28px;
padding: 2px 8px;
}
.product-hero__spec:nth-child(odd) .product-hero__spec-label,
.product-hero__spec:nth-child(odd) .product-hero__spec-value {
background-color: var(--c-lightblue);
}
.product-hero__spec-value {
color: var(--c-deepblue);
line-height: 1.5;
font-weight: 700;
}
.product-hero__purchase {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 16px;
padding: 16px;
border-radius: 16px;
background-color: var(--c-lightorange);
}
.product-hero__text{
width: 100%;
}
.product-hero__text p{
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0px;
margin-bottom: 0;
}
.product-hero__price-label {
margin-bottom: 6px;
}
.product-hero__price {
margin-bottom: 0;
color: var(--c-deepblue);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
}
.product-hero__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 12px 24px;
border-radius: 30px;
background-color: var(--c-orange);
color: var(--c-white);
font-size: var(--fs-p);
line-height: var(--lh-p);
font-weight: 600;
text-align: center;
transition: 0.3s;
}
.product-hero__button:hover {
box-shadow: 0px 4px 4px 0px #58001B33;
}
.product-hero__button:active {
transform: translateY(2px);
}
.product-files__title {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--c-gray-2);
font-size: 20px;
line-height: 1.4;
font-weight: 700;
color: var(--c-deepblue);
}
.product-files__list {
display: grid;
}
.product-files__item {
border-bottom: 1px solid var(--c-gray-2);
}
.product-files__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 8px 16px 0;
transition: color 0.3s ease;
}
.product-files__meta {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.product-files__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 14px;
background-color: var(--c-orange-bg);
color: var(--c-orange);
}
.product-files__icon-svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.product-files__name {
margin-bottom: 0;
color: var(--c-deepblue);
font-size: 16px;
line-height: 1.4;
font-weight: 400;
}
.product-files__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 185px;
min-height: 48px;
padding: 10px 22px;
border-radius: 30px;
background-color: var(--c-lightblue);
color: var(--c-deepblue);
transition: 0.3s;
position: relative;
}
.product-files__action-text {
font-size: 16px;
line-height: 1.25;
font-weight: 600;
white-space: nowrap;
}
.product-files__action::after {
content: url(//pbt.com.ua/wp-content/themes/blankslate/assets/icons/download.svg);
display: block;
width: 24px;
height: 24px;
flex: 0 0 24px;
fill: none;
stroke: var(--c-orange);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.product-files__link:hover .product-files__name {
color: var(--c-orange);
}
.product-files__link:hover .product-files__action {
background-color: #dcecf5;
} .product-gallery {
--gallery-gap: 29px;
--thumb-size: 95px;
--thumb-gap: 29px;
--thumb-radius: 10px;
--frame-radius: 20px;
--thumb-active-shadow: #0000001A;
}
.product-gallery__layout {
display: grid;
grid-template-columns: var(--thumb-size) minmax(0, 1fr);
gap: var(--gallery-gap);
align-items: start;
}
.product-gallery__lightbox {
cursor: zoom-in;
text-decoration: none;
}
.product-gallery__lightbox:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 4px;
}
.product-gallery__main {
order: 2;
min-width: 0;
max-width: 465px;
max-height: 465px;
border: 1px solid var(--c-gray-2);
border-radius: var(--frame-radius);
}
.product-gallery__thumbs {
order: 1;
min-width: 0;
max-width: var(--thumb-size);
height: calc((var(--thumb-size) * 4) + (var(--thumb-gap) * 3));
overflow: hidden;
}
.product-gallery__frame {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--frame-radius);
overflow: hidden;
}
.product-gallery__frame img,
.product-gallery__video {
display: block;
max-width: 100%;
max-height: 100%;
width: 465px;
height: 465px;
}
.product-gallery__frame img {
object-fit: contain;
}
.product-gallery__frame--video {
background: #000;
}
.product-gallery__frame--video iframe{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
.product-gallery__video {
object-fit: cover;
}
.product-gallery__thumbs .swiper-slide {
height: auto;
padding: 5px;
}
.product-gallery__thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 1px solid var(--c-gray-2);
border-radius: var(--thumb-radius);
overflow: hidden;
background-color: #fff;
cursor: pointer;
appearance: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
.product-gallery__thumb:hover {
transform: translateY(-1px);
}
.product-gallery__thumb:focus-visible {
outline: 0;
border-color: var(--c-orange);
box-shadow: 0 0 0 3px var(--thumb-active-shadow);
}
.product-gallery__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-gallery__thumbs .swiper-slide-thumb-active .product-gallery__thumb {
border-color: var(--c-orange);
box-shadow: 0 0 0 2px var(--thumb-active-shadow);
}
.product-gallery__play-badge {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
border-radius: 50%;
background: var(--c-orange);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.product-gallery__play-badge::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -40% -50%;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #fff;
}
@media (max-width: 1300px) {
.product-hero__inner{
grid-template-columns: minmax(0, 1fr) 550px;
}
}
@media (max-width: 1200px) {
.product-gallery__layout {
grid-template-columns: 1fr;
}
.product-hero {
padding: 60px 0;
}
.product-hero__inner {
grid-template-columns: 1fr;
}
.product-gallery__thumbs {
order: 2;
max-width: 463px;
width: 100%;
height: 100px;
}
}
@media (max-width: 992px) {
.product-hero__header p {
max-width: none;
}
.product-gallery {
--gallery-gap: 12px;
--thumb-gap: 8px;
--frame-radius: 16px;
}
.product-gallery__main {
order: 1;
}
.product-gallery__play-badge::before {
border-top-width: 8px;
border-bottom-width: 8px;
border-left-width: 14px;
}
}
@media (max-width: 576px) {
.product-hero {
padding: 24px 0 56px;
}
.product-gallery__main {
max-width: 100%;
max-height: 100%;
}
.product-hero__inner {
gap: 28px;
}
.product-hero__header {
margin-bottom: 20px;
}
.product-hero__specs {
gap: 8px;
margin-bottom: 20px;
}
.product-hero__spec {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
}
.product-hero__purchase {
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-bottom: 16px;
padding: 16px;
border-radius: 16px;
}
.product-files__title {
padding-bottom: 8px;
font-size: 18px;
line-height: 1.35;
}
.product-files__link {
padding: 16px 0;
gap: 12px;
}
.product-files__meta {
gap: 12px;
}
.product-files__icon {
flex-basis: 52px;
width: 52px;
height: 52px;
border-radius: 12px;
}
.product-files__icon-svg {
width: 26px;
height: 26px;
}
.product-files__action {
min-width: 40px;
width: 40px;
height: 40px;
min-height:40px;
padding: 0;
border-radius: 50%;
font-size: 0;
line-height: 0;
}
.product-files__action::after {
position: absolute;
}
.product-files__action-text {
display: none;
}
.product-files__action-icon {
width: 24px;
height: 24px;
}
} .problems {
padding: 80px 0;
}
.problems__header {
margin-bottom: 24px;
}
.problems__features {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.problems__feature {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.problems__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 8px;
background-color: var(--c-orange-bg);
color: var(--c-orange);
}
.problems__feature-icon::after {
content: url(//pbt.com.ua/wp-content/themes/blankslate/assets/icons/material-symbols_check-box-outline.svg);
width: 24px;
height: 24px;
display: block;
}
.problems__feature-text,
.problems__feature-text p {
margin-bottom: 0;
color: var(--c-deepblue);
font-size: 18px;
line-height: 28px;
font-weight: 600;
}
.problems__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.problems__stat {
padding: 16px;
border-radius: 16px;
background-color: var(--c-blue-bg);
}
.problems__stat-value {
margin-bottom: 16px;
color: var(--c-orange);
font-size: 48px;
line-height: 60px;
font-weight: 600;
}
@media (max-width: 1200px) {
.problems {
padding: 60px 0;
}
.problems__header {
margin-bottom: 44px;
}
.problems__features {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 24px;
}
.problems__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.problems {
padding: 56px 0;
}
.problems__header {
margin-bottom: 36px;
}
.problems__header h2 {
max-width: 260px;
}
.problems__header p {
max-width: none;
}
.problems__features {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 24px;
}
.problems__stats {
grid-template-columns: 1fr;
}
} .addons {
padding: 80px 0;
background-color: var(--c-blue-bg);
}
.addons__inner {
display: grid;
grid-template-columns: 1fr 716px;
gap: 24px;
align-items: start;
}
.addons__list {
display: grid;
gap: 24px;
}
.addons-card {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 16px;
padding: 16px;
border-radius: 16px;
background-color: var(--c-white);
}
.addons-card__image {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 160px;
overflow: hidden;
border-radius: 8px;
background-color: var(--c-lightblue);
}
.addons-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.addons-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.addons-card__title {
margin-bottom: 8px;
color: var(--c-deepblue);
font-size: 18px;
line-height: 28px;
font-weight: 600;
}
.addons-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: auto;
min-height: 40px;
padding: 8px 16px;
border-radius: 30px;
background-color: var(--c-orange);
color: var(--c-white);
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: center;
transition: 0.3s;
}
.addons-card__link:hover {
box-shadow: 0px 4px 4px 0px #58001B33;
}
.addons-card__link:active {
transform: translateY(2px);
}
@media (max-width: 1200px) {
.addons {
padding: 60px 0;
}
.addons__inner {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media (max-width: 576px) {
.addons {
padding: 56px 0;
}
.addons__inner {
gap: 24px;
}
.addons__list {
gap: 16px;
}
.addons-card {
grid-template-columns: 1fr;
gap: 16px;
}
.addons-card__image {
min-height: 260px;
}
.addons-card__title {
margin-bottom: 8px;
font-size: 18px;
line-height: 28px;
}
.addons-card__link {
width: 100%;
min-height: 40px;
padding: 8px 16px;
}
} .integration {
padding: 80px 0;
}
.integration__header {
margin-bottom: 48px;
}
.integration__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
counter-reset: integration-step;
}
.integration__item {
min-width: 0;
}
.integration-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
padding: 24px;
border-radius: 8px;
background-color: var(--c-blue-bg);
height: 100%;
}
.integration-card__step {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 24px;
color: var(--c-deepblue);
font-size: 32px;
line-height: 48px;
font-weight: 400;
}
.integration-card__step-number {
color: var(--c-text);
}
@media (max-width: 1200px) {
.integration {
padding: 60px 0;
}
.integration__header {
margin-bottom: 32px;
}
.integration__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.integration {
padding: 32px 0;
}
.integration__header {
margin-bottom: 24px;
}
.integration__list {
grid-template-columns: 1fr;
}
} .scenarios {
padding: 80px 0;
}
.scenarios h2 {
text-align: center;
margin-bottom: 40px;
}
.scenarios__list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
}
.scenarios__item {
min-width: 0;
}
.scenario-card {
display: flex;
flex-direction: column;
height: 100%;
}
.scenario-card__image {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 16px;
margin-bottom: 16px;
}
.scenario-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scenario-card__content {
text-align: center;
}
.scenario-card__text p{
margin-bottom: 0;
}
@media (max-width: 1200px) {
.scenarios {
padding: 60px 0;
}
.scenarios__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.scenarios {
padding: 56px 0;
}
.scenarios h2 {
margin-bottom: 24px;
}
.scenarios__list {
grid-template-columns: 1fr;
gap: 24px;
}
.scenario-card__image {
margin-bottom: 16px;
}
} .platform-features {
padding: 80px 0;
background-color: var(--c-blue-bg);
}
.platform-features__header {
max-width: 820px;
margin: 0 auto 64px;
text-align: center;
}
.platform-features__title {
margin-bottom: 16px;
}
.platform-features__intro {
max-width: 680px;
margin: 0 auto;
}
.platform-features__list {
display: grid;
gap: 72px;
}
.platform-feature {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
gap: 64px;
align-items: center;
}
.platform-feature--reverse .platform-feature__content {
order: 2;
}
.platform-feature--reverse .platform-feature__media {
order: 1;
}
.platform-feature__title {
margin-bottom: 16px;
font-size: 1.5rem;
line-height: 1.4;
}
.platform-feature__text {
margin-bottom: 0;
}
.platform-feature__checks {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.platform-feature__checks li {
position: relative;
padding-left: 26px;
color: var(--c-text);
}
.platform-feature__checks li::before {
content: "";
position: absolute;
top: 7px;
left: 0;
width: 14px;
height: 14px;
border-radius: 3px;
background-color: var(--c-orange);
}
.platform-feature__checks li::after {
content: "";
position: absolute;
top: 10px;
left: 4px;
width: 6px;
height: 3px;
border-left: 2px solid var(--c-white);
border-bottom: 2px solid var(--c-white);
transform: rotate(-45deg);
}
.platform-feature__checks strong {
display: block;
margin-bottom: 4px;
color: var(--c-deepblue);
font-weight: 700;
}
.platform-feature__checks span {
display: block;
}
.platform-feature__media {
margin: 0;
}
.platform-feature__media img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
@media (max-width: 1200px) {
.platform-features {
padding: 64px 0;
}
.platform-feature {
gap: 40px;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}
}
@media (max-width: 768px) {
.platform-features {
padding: 48px 0;
}
.platform-features__header {
margin-bottom: 40px;
text-align: left;
}
.platform-features__list {
gap: 48px;
}
.platform-feature {
grid-template-columns: 1fr;
gap: 24px;
}
.platform-feature--reverse .platform-feature__content,
.platform-feature--reverse .platform-feature__media {
order: initial;
}
.platform-feature__title {
font-size: 1.25rem;
}
} .platform-start{
margin: 80px 0;
}
.platform-start__inner {
display: grid;
grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.platform-start__title {
margin-bottom: 32px;
}
.platform-start__text {
max-width: 520px;
margin-bottom: 16px;
}
.platform-start__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
.platform-start__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 14px 28px;
border-radius: 999px;
border: 0;
font: inherit;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.platform-start__button--primary {
min-width: 112px;
background-color: var(--c-orange);
color: var(--c-white);
}
.platform-start__button--secondary {
min-width: 260px;
background-color: var(--c-blue-bg);
color: var(--c-deepblue);
}
.platform-start__button:hover {
transform: translateY(-1px);
}
.platform-start__button--primary:hover {
background-color: var(--c-orange-h);
}
.platform-start__button--secondary:hover {
background-color: #e6eef4;
}
.platform-start__button:active {
transform: translateY(0);
}
.platform-start__steps {
display: grid;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: platform-step;
}
.platform-step {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 28px;
align-items: center;
min-height: 112px;
padding: 24px 32px;
border-radius: 20px;
background-color: var(--c-blue-bg);
}
.platform-step__number {
color: var(--c-blue);
font-size: 6rem;
line-height: 0.9;
font-weight: 600;
}
.platform-step__title {
margin-bottom: 8px;
font-size: 1.25rem;
line-height: 1.4;
}
.platform-step__text {
margin-bottom: 0;
}
@media (max-width: 1200px) {
.platform-start__inner {
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: 48px;
}
.platform-step {
grid-template-columns: 96px minmax(0, 1fr);
padding: 22px 28px;
}
.platform-step__number {
font-size: 5rem;
}
}
@media (max-width: 991px) {
.platform-start{
margin: 32px 0;
}
.platform-start__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.platform-start__content {
max-width: 640px;
}
}
@media (max-width: 576px) {
.platform-start__title {
margin-bottom: 24px;
}
.platform-start__actions {
gap: 14px;
margin-top: 28px;
}
.platform-start__button {
width: 100%;
min-height: 64px;
}
.platform-start__steps {
gap: 20px;
}
.platform-step {
grid-template-columns: 96px minmax(0, 1fr);
gap: 20px;
min-height: 0;
padding: 28px 24px;
border-radius: 18px;
}
.platform-step__number {
font-size: 5.5rem;
}
.platform-step__title {
font-size: 1.25rem;
}
}
.training-videos {
padding: 88px 0;
background-color: var(--c-blue-bg);
}
.training-videos__header {
max-width: 760px;
margin: 0 auto 72px;
text-align: center;
}
.training-videos__title {
margin-bottom: 24px;
}
.training-videos__text {
margin: 0 auto;
}
.training-videos__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.video-card,
.video-playlist-card {
min-width: 0;
}
.video-card__link,
.video-playlist-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px;
border-radius: 24px;
background-color: var(--c-white);
text-decoration: none;
}
.video-card__link {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card__link:hover,
.video-card__link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 38, 57, 0.08);
}
.video-card__link:focus-visible,
.video-playlist-card__button:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 3px;
}
.video-card__media {
position: relative;
overflow: hidden;
margin-bottom: 24px;
border-radius: 12px;
background-color: var(--c-deepblue);
}
.video-card__media::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(11, 38, 57, 0.42);
}
.video-card__image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
}
.video-card__frame {
overflow: hidden;
margin-bottom: 24px;
border-radius: 12px;
background-color: var(--c-deepblue);
aspect-ratio: 16 / 9;
}
.video-card__frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.video-card__play {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: var(--c-orange);
transform: translate(-50%, -50%);
}
.video-card__play::before {
content: "";
position: absolute;
top: 50%;
left: 53%;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 22px solid var(--c-white);
transform: translate(-50%, -50%);
}
.video-card__title {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--c-deepblue);
font-size: 1.25rem;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.video-playlist-card {
justify-content: center;
align-items: flex-start;
}
.video-playlist-card__icon {
width: 52px;
height: 36px;
margin-bottom: 36px;
border-radius: 9px;
background-color: #ff0000;
position: relative;
}
.video-playlist-card__icon::before {
content: "";
position: absolute;
top: 50%;
left: 54%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 13px solid var(--c-white);
transform: translate(-50%, -50%);
}
.video-playlist-card__title {
margin-bottom: 24px;
color: var(--c-deepblue);
}
.video-playlist-card__text {
margin-bottom: 40px;
}
.video-playlist-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 14px 32px;
border-radius: 999px;
background-color: var(--c-orange);
color: var(--c-white);
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease;
}
.video-playlist-card__button:hover {
background-color: var(--c-orange-h);
}
@media (max-width: 1200px) {
.training-videos {
padding: 72px 0;
}
.training-videos__grid {
gap: 24px;
}
.video-card__link,
.video-playlist-card {
padding: 20px;
}
}
@media (max-width: 991px) {
.training-videos__grid {
grid-template-columns: 1fr;
}
.training-videos__header {
margin-bottom: 48px;
}
.video-card__title {
-webkit-line-clamp: 2;
}
}
@media (max-width: 576px) {
.training-videos {
padding: 56px 0;
}
.training-videos__header {
margin-bottom: 40px;
}
.video-card__link,
.video-playlist-card {
padding: 16px;
border-radius: 20px;
}
.video-card__media {
margin-bottom: 24px;
}
.video-card__play {
width: 88px;
height: 88px;
}
.video-playlist-card {
padding: 32px 24px;
}
.video-playlist-card__button {
width: 100%;
}
} .company-about{
margin: 80px 0;
}
.company-about__header {
margin-bottom: 20px;
}
.company-about__eyebrow {
margin-bottom: 28px;
color: var(--c-orange);
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.company-about__inner {
display: grid;
grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
.company-about__visual {
min-width: 0;
}
.company-about__images {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.company-about__image-wrap {
margin: 0;
overflow: hidden;
border-radius: 20px;
background-color: var(--c-blue-bg);
}
.company-about__image {
display: block;
width: 100%;
aspect-ratio: 1 / 1.24;
height: auto;
object-fit: cover;
}
.company-about__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.company-about__stat-value {
display: block;
margin-bottom: 18px;
color: var(--c-orange);
font-size: 3.5rem;
line-height: 1;
font-weight: 500;
}
.company-about__stat-label {
display: block;
color: var(--c-text);
}
.company-about__content {
max-width: 680px;
padding-top: 8px;
}
.company-about__content p {
margin-bottom: 24px;
}
.company-about__content p:last-child {
margin-bottom: 0;
}
.company-about__accent {
margin-bottom: 16px;
padding: 8px 16px;
border-left: 2px solid var(--c-orange);
border-radius: 8px;
background-color: var(--c-blue-bg);
color: var(--c-deepblue);
font-size: 1rem;
line-height: 1.25;
font-weight: 700;
}
@media (max-width: 1200px) {
.company-about__inner {
grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
gap: 40px;
}
.company-about__images {
gap: 20px;
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.company-about{
margin: 32px 0;
}
.company-about__inner {
grid-template-columns: 1fr;
gap: 48px;
}
.company-about__content {
max-width: none;
}
}
@media (max-width: 576px) {
.company-about__header {
margin-bottom: 10px;
}
.company-about__eyebrow {
margin-bottom: 20px;
font-size: 0.875rem;
}
.company-about__images {
gap: 24px;
margin-bottom: 40px;
}
.company-about__image-wrap {
border-radius: 18px;
}
.company-about__stats {
gap: 32px;
}
.company-about__stat-value {
font-size: 4rem;
}
.company-about__stat-label {
font-size: 1rem;
line-height: 1.5;
}
.company-about__content p {
margin-bottom: 24px;
}
.company-about__accent {
padding: 20px 24px;
font-size: 1.125rem;
}
}
@media (max-width: 420px) {
.company-about__images,
.company-about__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.company-about__stat-value {
font-size: 3.5rem;
}
} .ecosystem-tabs{
margin: 80px 0;
}
.ecosystem-tabs__header {
max-width: 1120px;
margin-bottom: 64px;
}
.ecosystem-tabs__title {
margin-bottom: 24px;
}
.ecosystem-tabs__intro {
max-width: 1080px;
margin-bottom: 0;
}
.ecosystem-tabs__items {
display: flex;
gap: 8px;
align-items: stretch;
}
.ecosystem-item {
position: relative;
flex: 0 0 96px;
min-width: 0;
min-height: 526px;
border-radius: 14px;
transition:
flex-basis 0.45s ease,
flex-grow 0.45s ease;
}
.ecosystem-item.is-active {
flex: 1 1 auto;
} .ecosystem-tab {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 24px 16px;
border: 0;
border-radius: 14px;
background-color: var(--c-blue);
color: var(--c-deepblue);
cursor: pointer;
font: inherit;
text-align: center;
opacity: 1;
visibility: visible;
transition:
opacity 0.25s ease,
visibility 0.25s ease,
background-color 0.2s ease;
}
.ecosystem-tab:hover {
background-color: #9fc6d8;
}
.ecosystem-tab:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 3px;
}
.ecosystem-item.is-active .ecosystem-tab {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ecosystem-tab__number {
color: var(--c-white);
font-size: 2.5rem;
line-height: 1;
font-weight: 500;
}
.ecosystem-tab__title {
writing-mode: vertical-rl;
transform: rotate(180deg);
color: var(--c-deepblue);
font-size: 1.5rem;
line-height: 1.5;
font-weight: 600;
text-align: left;
} .ecosystem-panel {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: minmax(320px, 500px) minmax(0, 1fr);
gap: 32px;
align-items: center;
min-height: 526px;
padding: 32px;
border-radius: 14px;
background-color: var(--c-blue-bg);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(24px);
transition:
opacity 0.5s ease 0.2s,
visibility 0.5s ease 0.2s,
transform 0.6s ease 0.3s;
}
.ecosystem-item.is-active .ecosystem-panel {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.ecosystem-panel__content {
position: relative;
z-index: 1;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ecosystem-panel__number {
display: block;
margin-bottom: auto;
color: var(--c-orange);
font-size: 3rem;
line-height: 1;
font-weight: 500;
}
.ecosystem-panel__title {
margin-bottom: 20px;
font-size: 1.5rem;
line-height: 1.4;
}
.ecosystem-panel__text {
max-width: 560px;
margin-bottom: 28px;
}
.ecosystem-panel__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 14px 28px;
border-radius: 999px;
background-color: var(--c-orange);
color: var(--c-white);
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease;
}
.ecosystem-panel__button:hover {
background-color: var(--c-orange-h);
}
.ecosystem-panel__button:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 3px;
}
.ecosystem-panel__media {
position: relative;
min-height: 340px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ecosystem-panel__media::before {
content: "";
position: absolute;
right: 8%;
bottom: 8%;
width: 420px;
max-width: 70%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: var(--c-orange);
}
.ecosystem-panel__image {
position: relative;
z-index: 1;
display: block;
max-width: 100%;
max-height: 390px;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 1200px) {
.ecosystem-tabs__header {
margin-bottom: 48px;
}
.ecosystem-item {
flex-basis: 82px;
min-height: 400px;
}
.ecosystem-panel {
min-height: 400px;
grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
}
.ecosystem-panel__media::before {
width: 360px;
}
}
@media (max-width: 991px) {
.ecosystem-tabs{
margin: 32px 0;
}
.ecosystem-tabs__items {
display: grid;
gap: 16px;
}
.ecosystem-item,
.ecosystem-item.is-active {
flex: none;
min-height: 0;
}
.ecosystem-tab {
position: relative;
min-height: 156px;
padding: 28px 32px;
align-items: flex-start;
border-radius: 20px;
text-align: left;
}
.ecosystem-item.is-active .ecosystem-tab {
position: absolute;
}
.ecosystem-tab__number {
margin-bottom: 36px;
font-size: 2.75rem;
}
.ecosystem-tab__title {
writing-mode: initial;
transform: none;
font-size: 1.5rem;
}
.ecosystem-panel {
grid-template-columns: 1fr;
min-height: 0;
padding: 32px;
border-radius: 20px;
transform: translateY(16px);
}
.ecosystem-item.is-active .ecosystem-panel {
transform: translateY(0);
}
.ecosystem-panel__content {
display: block;
}
.ecosystem-panel__number {
margin-bottom: 48px;
}
.ecosystem-panel__media {
margin-top: 32px;
}
}
@media (max-width: 576px) {
.ecosystem-tabs__header {
margin-bottom: 32px;
}
.ecosystem-panel {
padding: 28px 24px;
}
.ecosystem-panel__media {
display: none;
}
.ecosystem-panel__button {
width: 100%;
min-height: 64px;
}
} .partners-section {
padding: 80px 0;
background-color: var(--c-blue-bg);
}
.partners-section__header {
margin-bottom: 56px;
text-align: center;
}
.partners-section__title {
margin-bottom: 0;
}
.partners-section__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.partner-card {
min-width: 0;
}
.partner-card__link,
.partner-card__inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
height: 100%;
padding: 32px;
border-radius: 20px;
background-color: var(--c-white);
}
.partner-card__link {
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.partner-card__link:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(11, 38, 57, 0.08);
}
.partner-card__link:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 3px;
}
.partner-card__image {
display: block;
max-width: 100%;
max-height: 88px;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 1200px) {
.partners-section__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.partners-section {
padding: 34px 0;
}
.partners-section__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partner-card__link,
.partner-card__inner {
min-height: 150px;
padding: 28px;
}
}
@media (max-width: 576px) {
.partners-section {
padding: 56px 0;
}
.partners-section__header {
margin-bottom: 32px;
}
.partners-section__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.partner-card__link,
.partner-card__inner {
min-height: 170px;
padding: 32px 24px;
border-radius: 18px;
}
.partner-card__image {
max-height: 96px;
}
} .team-section {
padding: 80px 0;
}
.team-section__header {
max-width: 1180px;
margin: 0 auto 56px;
text-align: center;
}
.team-section__title {
margin-bottom: 24px;
}
.team-section__description {
max-width: 1220px;
margin: 0 auto;
}
.team-section__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
.team-card {
min-width: 0;
}
.team-card__media {
margin: 0 0 24px;
overflow: hidden;
border-radius: 28px;
background-color: var(--c-white);
}
.team-card__image {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
}
.team-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.team-card__name {
margin-bottom: 8px;
font-size: 1.25rem;
line-height: 1.35;
color: var(--c-deepblue);
}
@media (max-width: 1200px) {
.team-section {
padding: 32px 0;
}
.team-section__header {
margin-bottom: 48px;
}
.team-section__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
}
@media (max-width: 576px) {
.team-section__header {
margin-bottom: 32px;
}
.team-section__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.team-card__media {
margin-bottom: 20px;
border-radius: 24px;
}
.team-card__name {
font-size: 1.125rem;
}
} .quality-guarantee{
padding: 80px 0;
}
.quality-guarantee__header {
max-width: 980px;
margin: 0 auto 56px;
text-align: center;
}
.quality-guarantee__title {
margin-bottom: 24px;
}
.quality-guarantee__list {
border-top: 1px solid rgba(106, 122, 137, 0.22);
}
.quality-item {
border-bottom: 1px solid rgba(106, 122, 137, 0.22);
}
.quality-item__link,
.quality-item__inner {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) 88px;
gap: 36px;
align-items: center;
min-height: 142px;
padding: 16px 0;
}
.quality-item__link {
color: inherit;
text-decoration: none;
transition: background-color 0.2s ease;
}
.quality-item__link:hover .quality-item__title {
color: var(--c-orange);
}
.quality-item__link:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 4px;
}
.quality-item__image-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
}
.quality-item__image {
display: block;
width: 88px;
height: 112px;
object-fit: contain;
}
.quality-item__title {
margin-bottom: 0;
color: var(--c-deepblue);
font-size: 1.5rem;
line-height: 1.4;
font-weight: 500;
transition: color 0.2s ease;
}
.quality-item__year {
justify-self: end;
color: var(--c-text);
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
}
@media (max-width: 1200px) {
.quality-guarantee{
padding: 32px 0;
}
.quality-guarantee__header {
margin-bottom: 44px;
}
.quality-item__link,
.quality-item__inner {
grid-template-columns: 84px minmax(0, 1fr) 72px;
gap: 28px;
min-height: 132px;
}
.quality-item__image {
width: 84px;
height: 104px;
}
.quality-item__title {
font-size: 1.375rem;
}
}
@media (max-width: 576px) {
.quality-guarantee__header {
margin-bottom: 32px;
}
.quality-item__link,
.quality-item__inner {
grid-template-columns: 96px minmax(0, 1fr) 64px;
gap: 18px;
min-height: 0;
padding: 20px 0;
}
.quality-item__image {
width: 84px;
height: 104px;
}
.quality-item__title {
font-size: 1.125rem;
line-height: 1.45;
}
.quality-item__year {
font-size: 0.9375rem;
}
} .plans-comparison{
padding: 80px 0;
}
.plans-comparison__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.plans-table {
width: 100%;
min-width: 1080px;
border-collapse: collapse;
table-layout: fixed;
color: var(--c-deepblue);
}
.plans-table__col-feature {
width: 46%;
}
.plans-table__col-plan {
width: 13.5%;
}
.plans-table__head-cell {
padding: 18px 14px;
background-color: var(--c-blue-bg);
font-size: 1rem;
line-height: 1.4;
font-weight: 700;
text-align: center;
}
.plans-table__head-cell--feature {
text-align: left;
border-top-left-radius: 8px;
}
.plans-table__head-cell:last-child {
border-top-right-radius: 8px;
}
.plans-table__section-row th,
.plans-table__inner th,
.plans-table__inner td{
border-bottom: 1px solid rgba(106, 122, 137, 0.18);
}
.plans-table__section-cell {
padding: 0;
}
.plans-table__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 18px 14px;
border: 0;
background: transparent;
color: var(--c-orange);
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.plans-table__toggle:hover .plans-table__section-title {
color: var(--c-orange-h);
}
.plans-table__toggle:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: -2px;
}
.plans-table__section-title {
transition: color 0.2s ease;
}
.plans-table__section-note {
color: var(--c-text);
font-size: 0.875rem;
font-weight: 400;
}
.plans-table__chevron {
position: relative;
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.plans-table__chevron::before,
.plans-table__chevron::after {
content: "";
position: absolute;
top: 8px;
width: 10px;
height: 2px;
background-color: var(--c-deepblue);
transition: transform 0.25s ease;
}
.plans-table__chevron::before {
left: 1px;
transform: rotate(-45deg);
}
.plans-table__chevron::after {
right: 1px;
transform: rotate(45deg);
}
.plans-table__toggle[aria-expanded="false"] .plans-table__chevron::before {
transform: rotate(45deg);
}
.plans-table__toggle[aria-expanded="false"] .plans-table__chevron::after {
transform: rotate(-45deg);
}
.plans-table__panel {
overflow: hidden;
height: auto;
opacity: 1;
transition:
height 0.38s ease,
opacity 0.25s ease;
}
.plans-table__panel[aria-hidden="true"] {
opacity: 0;
}
.plans-table__inner {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.plans-table__inner th,
.plans-table__inner td {
padding: 18px 14px;
font-size: 1rem;
line-height: 1.5;
vertical-align: middle;
}
.plans-table__inner td {
text-align: center;
}
.plans-table__feature {
font-weight: 400;
text-align: left;
}
.plans-table__dot {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #8ab3c8;
border-radius: 50%;
background: radial-gradient(circle, var(--c-orange) 0 45%, transparent 46%);
}
.plans-table__dot--off {
border-color: #d9e2e8;
background: none;
}
@media (max-width: 576px) {
.plans-comparison{
padding: 34px 0;
}
.plans-table {
min-width: 780px;
}
.plans-table__head-cell,
.plans-table__toggle,
.plans-table__inner th,
.plans-table__inner td {
padding: 16px 12px;
}
.plans-table th,
.plans-table td {
max-width: 110px;
}
.plans-table__section-note {
display: block;
margin-top: 4px;
}
} .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
} .partners-cta-hero{
padding: 80px 0;
}
.partners-cta-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.97fr);
gap: 32px;
align-items: start;
}
.partners-cta-hero__content {
max-width: 760px;
}
.partners-cta-hero__text {
max-width: 760px;
margin-bottom: 16px;
}
.partners-cta-hero__text p:last-child {
margin-bottom: 0;
}
.partners-cta-hero__list {
display: grid;
gap: 8px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.partners-cta-hero__item {
position: relative;
min-height: 24px;
padding-left: 48px;
color: var(--c-text);
}
.partners-cta-hero__item::before {
content: "";
position: absolute;
top: 6px;
left: 8px;
width: 16px;
height: 16px;
border: 2px solid var(--c-white);
border-radius: 5px;
background-color: var(--c-orange);
box-shadow: 0 0 0 1px rgba(11, 38, 57, 0.08);
}
.partners-cta-hero__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.partners-cta-hero-stat {
min-height: 132px;
padding: 16px;
border-radius: 24px;
background-color: var(--c-blue-bg);
}
.partners-cta-hero-stat__value {
display: block;
margin-bottom: 22px;
color: var(--c-orange);
font-size: 4rem;
line-height: 1;
font-weight: 500;
}
.partners-cta-hero-stat__label {
margin-bottom: 0;
color: var(--c-text);
}
.partners-cta-hero__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 56px;
padding: 16px 24px;
border: 0;
border-radius: 999px;
background-color: var(--c-orange);
color: var(--c-white);
font: inherit;
font-weight: 700;
text-align: center;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.partners-cta-hero__button:hover {
background-color: var(--c-orange-h);
}
.partners-cta-hero__button:active {
transform: translateY(1px);
}
.partners-cta-hero__media {
margin: 0;
overflow: hidden;
border-radius: 32px;
background-color: var(--c-gray);
}
.partners-cta-hero__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 760 / 700;
object-fit: cover;
}
@media (max-width: 1200px) {
.partners-cta-hero__inner {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.partners-cta-hero-stat {
min-height: 148px;
padding: 24px;
}
.partners-cta-hero-stat__value {
font-size: 3.5rem;
margin-bottom: 18px;
}
}
@media (max-width: 991px) {
.partners-cta-hero{
padding: 34px 0;
}
.partners-cta-hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.partners-cta-hero__content {
max-width: none;
}
.partners-cta-hero__media {
order: 2;
}
}
@media (max-width: 576px) {
.partners-cta-hero__text {
margin-bottom: 24px;
}
.partners-cta-hero__list {
gap: 16px;
margin-bottom: 28px;
}
.partners-cta-hero__item {
padding-left: 42px;
}
.partners-cta-hero__item::before {
left: 0;
}
.partners-cta-hero__stats {
gap: 16px;
margin-bottom: 28px;
}
.partners-cta-hero-stat {
min-height: 160px;
padding: 16px;
border-radius: 22px;
}
.partners-cta-hero-stat__value {
font-size: 3.75rem;
margin-bottom: 18px;
}
.partners-cta-hero__button {
width: 100%;
min-height: 72px;
}
.partners-cta-hero__media {
border-radius: 28px;
}
} .cooperation-terms{
padding: 80px 0;
background-color: var(--c-blue-bg);
}
.cooperation-terms__header {
max-width: 1180px;
margin-bottom: 48px;
}
.cooperation-terms__title {
margin-bottom: 24px;
}
.cooperation-terms__description {
max-width: 1120px;
margin-bottom: 0;
}
.cooperation-terms__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.cooperation-term-card {
display: flex;
flex-direction: column;
min-height: 282px;
padding: 36px 32px;
border-radius: 28px;
background-color: var(--c-white);
}
.cooperation-term-card__title {
margin-bottom: auto;
color: var(--c-orange);
}
.cooperation-term-card__text {
max-width: 260px;
margin-top: 48px;
margin-bottom: 0;
color: var(--c-text);
}
@media (max-width: 1200px) {
.cooperation-terms{
padding: 32px 0;
}
.cooperation-terms__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cooperation-term-card {
min-height: 320px;
padding: 32px 24px;
border-radius: 24px;
}
.cooperation-term-card__text {
max-width: none;
margin-top: 40px;
}
}
@media (max-width: 576px) {
.cooperation-terms__header {
margin-bottom: 32px;
}
.cooperation-terms__title {
margin-bottom: 20px;
}
.cooperation-terms__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.cooperation-term-card {
min-height: 0;
padding: 32px 24px;
border-radius: 24px;
}
.cooperation-term-card__text {
margin-top: 56px;
}
} .partnership-advantages {
padding: 80px 0;
}
.partnership-advantages__header {
max-width: 1180px;
margin: 0 auto 72px;
text-align: center;
}
.partnership-advantages__title {
margin-bottom: 24px;
}
.partnership-advantages__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.partnership-advantages-card {
position: relative;
min-width: 0;
padding-top: 36px;
}
.partnership-advantages-card__icon {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
padding: 14px;
border-radius: 16px;
background-color: #fff0eb;
transform: translateX(-50%);
}
.partnership-advantages-card__icon img {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
}
.partnership-advantages-card__content {
display: flex;
flex-direction: column;
min-height: 196px;
padding: 48px 16px 24px;
border: 1px solid rgba(106, 122, 137, 0.22);
border-radius: 24px;
background-color: var(--c-white);
text-align: center;
}
.partnership-advantages-card__title {
margin-bottom: 14px;
font-size: 1.125rem;
line-height: 1.45;
color: var(--c-deepblue);
}
@media (max-width: 1200px) {
.partnership-advantages__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px 24px;
}
}
@media (max-width: 991px) {
.partnership-advantages {
padding: 32px 0;
}
.partnership-advantages__header {
margin-bottom: 48px;
}
.partnership-advantages__grid {
grid-template-columns: 1fr;
gap: 52px;
}
}
@media (max-width: 576px) {
.partnership-advantages__header {
margin-bottom: 40px;
}
.partnership-advantages__title {
margin-bottom: 20px;
}
.partnership-advantages-card__icon {
width: 64px;
height: 64px;
padding: 12px;
border-radius: 14px;
}
.partnership-advantages-card__icon img {
width: 40px;
height: 40px;
}
.partnership-advantages-card__content {
min-height: 0;
padding: 72px 18px 20px;
border-radius: 22px;
}
.partnership-advantages-card__title {
margin-bottom: 12px;
}
} .results-metrics {
padding: 80px 0;
}
.results-metrics__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
margin-bottom: 72px;
}
.results-metric-card {
min-width: 0;
min-height: 286px;
padding: 32px 24px 28px;
border-radius: 24px;
background-color: var(--c-blue-bg);
}
.results-metric-card__value {
margin-bottom: 28px;
color: var(--c-orange);
font-size: 4rem;
line-height: 1;
font-weight: 500;
}
.results-metric-card__text {
max-width: 360px;
margin-bottom: 0;
color: var(--c-text);
}
.results-metrics__note {
margin-bottom: 0;
color: var(--c-orange);
} .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 1200px) {
.results-metrics__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.results-metric-card {
min-height: 240px;
}
}
@media (max-width: 991px) {
.results-metrics {
padding: 32px 0;
}
}
@media (max-width: 576px) {
.results-metrics__grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 32px;
}
.results-metric-card {
min-height: 0;
padding: 28px 20px 24px;
border-radius: 22px;
}
.results-metric-card__value {
margin-bottom: 20px;
font-size: 3.75rem;
}
} .usage-spheres {
padding: 80px 0;
background-color: var(--c-blue-bg);
}
.usage-spheres__header {
margin-bottom: 56px;
}
.usage-spheres__title {
margin-bottom: 0;
}
.usage-spheres__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 24px;
}
.usage-sphere-card {
position: relative;
min-width: 0;
padding-top: 30px;
}
.usage-sphere-card__icon {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
padding: 8px;
border-radius: 8px;
background-color: #FFEDE9;
transform: translateX(-50%);
}
.usage-sphere-card__icon img {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
}
.usage-sphere-card__content {
display: flex;
flex-direction: column;
min-height: 140px;
padding: 48px 16px 16px;
border: 1px solid rgba(106, 122, 137, 0.22);
border-radius: 24px;
background-color: var(--c-white);
text-align: center;
}
.usage-sphere-card__title {
margin-bottom: auto;
font-size: 1.125rem;
line-height: 1.45;
color: var(--c-deepblue);
}
.usage-sphere-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
margin-top: 32px;
padding: 8px 24px;
border-radius: 999px;
background-color: #dfe8ef;
color: var(--c-deepblue);
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
text-align: center;
text-decoration: none;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.usage-sphere-card__button:hover {
background-color: #d2dde6;
transform: translateY(-1px);
}
.usage-sphere-card__button:active {
transform: translateY(0);
}
.usage-sphere-card__button:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 2px;
}
@media (max-width: 1400px) {
.usage-spheres__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.usage-spheres {
padding: 32px 0;
}
.usage-spheres__header {
margin-bottom: 40px;
}
.usage-spheres__grid {
grid-template-columns: 1fr;
gap: 28px;
}
.usage-sphere-card__content {
min-height: 0;
}
}
@media (max-width: 576px) {
.usage-sphere-card__icon {
width: 84px;
height: 84px;
padding: 16px;
}
.usage-sphere-card__icon img {
width: 52px;
height: 52px;
}
.usage-sphere-card__content {
padding: 72px 20px 20px;
border-radius: 22px;
}
.usage-sphere-card__title {
font-size: 1rem;
}
.usage-sphere-card__button {
min-height: 52px;
margin-top: 24px;
}
} .system-addons {
padding: 80px 0;
}
.system-addons__header {
margin-bottom: 48px;
}
.system-addons__title {
margin-bottom: 0;
}
.system-addons__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
.system-addon-card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px;
border: 1px solid rgba(106, 122, 137, 0.22);
border-radius: 24px;
background-color: var(--c-white);
}
.system-addon-card__media {
position: relative;
overflow: hidden;
margin-bottom: 20px;
border-radius: 16px;
background-color: #eef3f7;
aspect-ratio: 1 / 1;
display: flex;
align-items: flex-end;
justify-content: center;
}
.system-addon-card__media::before {
content: "";
position: absolute;
left: 50%;
bottom: -26%;
width: 120%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: #b7d8e9;
transform: translateX(-50%);
}
.system-addon-card__image {
position: relative;
z-index: 1;
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.system-addon-card__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.system-addon-card__title {
margin-bottom: 24px;
font-size: 1.125rem;
line-height: 1.45;
color: var(--c-deepblue);
}
.system-addon-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin-top: auto;
padding: 12px 24px;
border-radius: 999px;
background-color: var(--c-orange);
color: var(--c-white);
font-size: 1rem;
line-height: 1.5;
font-weight: 700;
text-align: center;
text-decoration: none;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.system-addon-card__button:hover {
background-color: var(--c-orange-h);
transform: translateY(-1px);
}
.system-addon-card__button:active {
transform: translateY(0);
}
.system-addon-card__button:focus-visible {
outline: 2px solid var(--c-orange);
outline-offset: 2px;
}
@media (max-width: 1200px) {
.system-addons__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
}
@media (max-width: 991px) {
.system-addons {
padding: 32px 0;
}
.system-addons__header {
margin-bottom: 32px;
}
.system-addons__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 576px) {
.system-addon-card {
padding: 14px;
border-radius: 20px;
}
.system-addon-card__media {
margin-bottom: 16px;
border-radius: 14px;
}
.system-addon-card__title {
margin-bottom: 20px;
font-size: 1rem;
}
} .error-404-page {
padding: 80px 0;
}
.error-404-page__section {
position: relative;
}
.error-404-page__inner {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: 64px 32px;
border-radius: 40px;
background-color: var(--c-blue-bg);
text-align: center;
overflow: hidden;
}
.error-404-page__inner::before,
.error-404-page__inner::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 180px;
pointer-events: none;
opacity: 0.18;
background-image: url(//pbt.com.ua/wp-content/uploads/2026/03/frame-102.png);
background-repeat: repeat-y;
background-size: 140px auto;
}
.error-404-page__inner::before {
left: 0;
background-position: left top;
}
.error-404-page__inner::after {
right: 0;
background-position: right top;
transform: scaleX(-1);
}
.error-404-page__code,
.error-404-page__title,
.error-404-page__text,
.error-404-page__actions {
position: relative;
z-index: 1;
}
.error-404-page__code {
margin: 0 0 16px;
color: var(--c-orange);
font-size: clamp(4rem, 10vw, 7rem);
line-height: 1;
font-weight: 700;
}
.error-404-page__title {
margin-bottom: 20px;
color: var(--c-deepblue);
}
.error-404-page__text {
max-width: 640px;
margin: 0 auto 32px;
color: var(--c-text);
}
.error-404-page__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 28px;
}
.error-404-page__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 64px;
padding: 16px 28px;
border: 0;
border-radius: 999px;
font: inherit;
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.2s ease,
color 0.2s ease;
}
.error-404-page__button:hover {
transform: translateY(-1px);
}
.error-404-page__button:active {
transform: translateY(0);
}
.error-404-page__button--primary {
background-color: var(--c-orange);
color: var(--c-white);
}
.error-404-page__button--primary:hover {
background-color: var(--c-orange-h);
}
.error-404-page__button--secondary {
background-color: #e7eff4;
color: var(--c-deepblue);
}
.error-404-page__button--secondary:hover {
background-color: #d9e4eb;
}
.error-404-page__button:focus-visible{
outline: 2px solid var(--c-orange);
outline-offset: 3px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 991px) {
.error-404-page {
padding: 32px 0;
}
.error-404-page__inner {
padding: 48px 20px;
border-radius: 28px;
}
.error-404-page__inner::before,
.error-404-page__inner::after {
width: 120px;
background-size: 100px auto;
}
.error-404-page__button{
width: 100%;
}
}