.flexyvo-homepage-benefits {
padding: 56px 24px;
background: #ffffff;
overflow-x: clip;
}
.flexyvo-homepage-benefits *,
.flexyvo-homepage-benefits *::before,
.flexyvo-homepage-benefits *::after {
box-sizing: border-box;
}
.flexyvo-homepage-benefits__container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
min-width: 0;
}
.flexyvo-homepage-benefits__header {
text-align: center;
max-width: 720px;
margin: 0 auto 36px;
}
.flexyvo-homepage-benefits__label {
display: inline-block;
padding: 6px 16px;
margin-bottom: 20px;
border-radius: 100px;
background: #f3edff;
color: #774bf7;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.flexyvo-homepage-benefits__title {
margin: 0 0 16px;
color: #101113;
font-size: 42px;
font-weight: 800;
line-height: 1.15;
}
.flexyvo-homepage-benefits__title-accent {
color: #774bf7;
}
.flexyvo-homepage-benefits__intro {
margin: 0;
color: #5c5f66;
font-size: 18px;
line-height: 1.6;
}
.flexyvo-homepage-benefits__layout {
display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 32px;
align-items: stretch;
min-width: 0;
}
.flexyvo-homepage-benefits__rail {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.flexyvo-homepage-benefits__card {
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 24px;
align-items: center;
gap: 18px;
width: 100%;
max-width: 100%;
min-width: 0; flex: 1 1 0;
min-height: 72px;
padding: 15px 22px;
border: 1px solid #e7e2f5;
border-radius: 22px;
appearance: none;
background: #ffffff;
color: #101113;
cursor: pointer;
font: inherit;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.flexyvo-homepage-benefits__card:hover {
transform: translateY(-2px);
border-color: #cbb8ff;
box-shadow: 0 14px 28px rgba(19, 24, 34, 0.08);
}
.flexyvo-homepage-benefits__card.is-selected {
border-color: #6f49f6;
background: linear-gradient(135deg, #2a115f 0%, #6f49f6 100%);
box-shadow: 0 18px 36px rgba(71, 35, 153, 0.22);
}
.flexyvo-homepage-benefits__card:focus-visible {
outline: 3px solid rgba(119, 75, 247, 0.35);
outline-offset: 4px;
}
.flexyvo-homepage-benefits__card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: #f3edff;
display: flex;
align-items: center;
justify-content: center;
}
.flexyvo-homepage-benefits__card-icon svg,
.flexyvo-homepage-benefits__panel-icon svg {
width: 28px;
height: 28px;
}
.flexyvo-homepage-benefits__card-title {
min-width: 0;
margin: 0;
color: #101113;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
overflow-wrap: break-word;
}
.flexyvo-homepage-benefits__arrow {
color: #774bf7;
display: flex;
align-items: center;
justify-content: center;
}
.flexyvo-homepage-benefits__arrow svg {
width: 16px;
height: 16px;
}
.flexyvo-homepage-benefits__card.is-selected .flexyvo-homepage-benefits__card-icon {
background: rgba(255, 255, 255, 0.14);
}
.flexyvo-homepage-benefits__card.is-selected .flexyvo-homepage-benefits__card-title,
.flexyvo-homepage-benefits__card.is-selected .flexyvo-homepage-benefits__arrow {
color: #ffffff;
}
.flexyvo-homepage-benefits__card.is-selected .flexyvo-homepage-benefits__card-icon svg {
stroke: #ffffff;
}
.flexyvo-homepage-benefits__panel {
min-height: 100%;
min-width: 0;
}
.flexyvo-homepage-benefits__panel-inner {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 28px;
align-items: stretch;
min-height: 100%;
padding: 28px;
border: 1px solid rgba(122, 79, 247, 0.28);
border-radius: 28px;
background:
radial-gradient(circle at 90% 10%, rgba(122, 79, 247, 0.16), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
box-shadow: 0 24px 70px rgba(24, 17, 64, 0.1);
min-width: 0;
}
.flexyvo-homepage-benefits__panel-copy {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 18px;
align-items: flex-start;
min-width: 0;
}
.flexyvo-homepage-benefits__panel-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: #f3edff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.flexyvo-homepage-benefits__panel-icon svg {
stroke: #774bf7;
}
.flexyvo-homepage-benefits__panel-content {
min-width: 0;
}
.flexyvo-homepage-benefits__panel-media {
position: relative;
isolation: isolate;
width: 100%; order: -1;
max-width: 100%;
min-width: 0;
aspect-ratio: 2 / 1;
max-height: 340px;
align-self: stretch;
justify-self: stretch;
overflow: hidden;
border-radius: 20px;
background: transparent;
border: 0;
transform: none;
} .flexyvo-homepage-benefits__panel-media-overlay {
position: absolute;
z-index: 4;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 16px;
padding: 40px 20px 18px;
background: linear-gradient(to top, rgba(16, 17, 19, 0.82) 0%, rgba(16, 17, 19, 0.32) 55%, rgba(16, 17, 19, 0) 100%);
pointer-events: none;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.flexyvo-homepage-benefits__panel-media-overlay > * {
pointer-events: auto;
}
.flexyvo-homepage-benefits__panel-image {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid rgba(122, 79, 247, 0.22);
border-radius: inherit;
box-shadow: 0 26px 60px rgba(54, 32, 120, 0.2);
background: linear-gradient(135deg, #f5efff 0%, #ffffff 100%);
}
.flexyvo-homepage-benefits__panel-orbit { display: none;
position: absolute;
z-index: 1;
top: -34px;
right: -42px;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle, rgba(119, 75, 247, 0.38) 0%, rgba(111, 73, 246, 0.18) 42%, rgba(119, 75, 247, 0) 72%);
filter: blur(18px);
opacity: 0.9;
pointer-events: none;
animation: flexyvo-benefits-orbit-pulse 7s ease-in-out infinite;
}
.flexyvo-homepage-benefits__panel-caption {
position: absolute;
z-index: 3; left: 18px;
top: 18px;
bottom: auto;
max-width: min(82%, 280px);
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(16, 17, 19, 0.78);
color: #ffffff;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.02em;
box-shadow: 0 14px 30px rgba(16, 17, 19, 0.18);
backdrop-filter: blur(12px);
} .flexyvo-homepage-benefits__panel-float {
display: none;
}
.flexyvo-homepage-benefits__panel-float-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 38% 50%;
filter: saturate(1.04) contrast(1.02);
}
.flexyvo-homepage-benefits__panel-badge {
position: absolute;
z-index: 5; top: 16px;
right: 16px;
display: grid;
min-width: 128px;
padding: 14px 16px;
border: 1px solid rgba(122, 79, 247, 0.16);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 20px 44px rgba(43, 26, 90, 0.2);
}
.flexyvo-homepage-benefits__panel-badge-number {
color: #774bf7;
font-size: 30px;
font-weight: 900;
line-height: 1;
}
.flexyvo-homepage-benefits__panel-badge-label {
margin-top: 4px;
color: #5c5f66;
font-size: 12px;
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.flexyvo-homepage-benefits__panel-eyebrow {
display: inline-block;
margin: 0 0 10px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(122, 79, 247, 0.1);
color: #5b34d6;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.flexyvo-homepage-benefits__panel-eyebrow[hidden] {
display: none;
}
.flexyvo-homepage-benefits__panel-title {
min-width: 0;
margin: 0 0 12px;
color: #101113;
font-size: 30px;
font-weight: 800;
line-height: 1.2;
overflow-wrap: break-word;
} .flexyvo-homepage-benefits__panel-metrics {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 22px;
padding: 0;
}
.flexyvo-homepage-benefits__panel-metrics[hidden] {
display: none;
}
.flexyvo-homepage-benefits__panel-metrics li {
padding: 6px 12px;
border: 1px solid rgba(122, 79, 247, 0.22);
border-radius: 999px;
background: #fbfaff;
color: #32156f;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.flexyvo-homepage-benefits__panel-description {
min-width: 0;
margin: 0 0 24px;
color: #5c5f66;
font-size: 16px;
line-height: 1.65;
overflow-wrap: break-word;
}
.flexyvo-homepage-benefits__panel-list {
list-style: none; display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 28px;
margin: 0;
padding: 0;
}
.flexyvo-homepage-benefits__panel-list li {
position: relative;
padding-left: 28px;
color: #2a2f3a;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
}
.flexyvo-homepage-benefits__panel-list li::before {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 16px;
height: 16px;
border: 2px solid rgba(122, 79, 247, 0.3);
border-radius: 50%;
background: rgba(122, 79, 247, 0.08);
} .flexyvo-homepage-benefits__panel-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 13px 26px;
border-radius: 999px;
background: linear-gradient(135deg, #32156f 0%, #6f46f5 100%);
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 14px 30px rgba(86, 54, 210, 0.24);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.flexyvo-homepage-benefits__panel-cta[hidden] {
display: none;
}
.flexyvo-homepage-benefits__panel-cta:hover,
.flexyvo-homepage-benefits__panel-cta:focus-visible {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(86, 54, 210, 0.3);
color: #ffffff;
} .flexyvo-homepage-benefits__panel-media-overlay .flexyvo-homepage-benefits__panel-metrics {
margin: 0;
gap: 8px;
flex: 1 1 auto;
}
.flexyvo-homepage-benefits__panel-media-overlay .flexyvo-homepage-benefits__panel-metrics li {
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.92);
color: #2a115f;
font-weight: 700;
box-shadow: 0 6px 16px rgba(16, 17, 19, 0.18);
backdrop-filter: blur(6px);
}
.flexyvo-homepage-benefits__panel-media-overlay .flexyvo-homepage-benefits__panel-cta {
margin-top: 0;
flex: 0 0 auto;
padding: 12px 22px;
font-size: 14px;
}
.flexyvo-homepage-benefits__cta {
margin-top: 32px;
text-align: center;
}
.flexyvo-homepage-benefits__cta-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
border-radius: 100px;
background: linear-gradient(180deg, #7a4ff7 0%, #632ef4 100%);
box-shadow: 0 4px 20px rgba(122, 79, 247, 0.35);
color: #ffffff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flexyvo-homepage-benefits__cta-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(122, 79, 247, 0.45);
}
@keyframes flexyvo-benefits-orbit-pulse {
0%,
100% {
transform: scale(1);
opacity: 0.82;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
@keyframes flexyvo-benefits-float {
0%,
100% {
transform: rotate(3.2deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(1.8deg) translate3d(0, -8px, 0);
}
}
@media (max-width: 1100px) {
.flexyvo-homepage-benefits__layout {
grid-template-columns: 1fr;
gap: 24px;
} .flexyvo-homepage-benefits__panel-inner {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.flexyvo-homepage-benefits__panel-media {
max-width: 100%;
min-height: 0;
aspect-ratio: 16 / 7;
max-height: 240px;
transform: none;
}
.flexyvo-homepage-benefits__panel-badge {
top: 12px;
right: 12px;
min-width: 116px;
padding: 12px 14px;
}
.flexyvo-homepage-benefits__panel-float {
left: -14px;
bottom: 50px;
min-width: 116px;
max-width: 158px;
border-width: 6px;
border-radius: 18px;
animation-name: flexyvo-benefits-float-tablet;
}
.flexyvo-homepage-benefits__panel-badge-number {
font-size: 26px;
}
}
@keyframes flexyvo-benefits-float-tablet {
0%,
100% {
transform: rotate(2deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(0.8deg) translate3d(0, -6px, 0);
}
}
@media (max-width: 768px) {
.flexyvo-homepage-benefits {
padding: 56px 16px;
}
.flexyvo-homepage-benefits__layout,
.flexyvo-homepage-benefits__rail,
.flexyvo-homepage-benefits__panel,
.flexyvo-homepage-benefits__panel-inner {
width: 100%;
max-width: 100%;
}
.flexyvo-homepage-benefits__header {
margin-bottom: 40px;
}
.flexyvo-homepage-benefits__title {
font-size: 30px;
}
.flexyvo-homepage-benefits__intro {
font-size: 16px;
}
.flexyvo-homepage-benefits__card {
grid-template-columns: 56px minmax(0, 1fr) 18px;
gap: 16px;
min-height: 96px;
padding: 22px 20px;
} .flexyvo-homepage-benefits__panel-inner {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding: 22px 18px;
}
.flexyvo-homepage-benefits__panel-copy {
grid-template-columns: 56px minmax(0, 1fr);
gap: 16px;
}
.flexyvo-homepage-benefits__panel-title {
font-size: 24px;
}
.flexyvo-homepage-benefits__panel-list {
grid-template-columns: 1fr;
}
.flexyvo-homepage-benefits__panel-cta {
width: 100%;
justify-content: center;
}
.flexyvo-homepage-benefits__panel-media {
max-width: 100%;
justify-self: stretch;
min-height: 0;
aspect-ratio: 16 / 8;
max-height: 220px;
transform: none;
}
.flexyvo-homepage-benefits__panel-image {
min-height: 0;
}
.flexyvo-homepage-benefits__panel-orbit {
top: -18px;
right: 0;
width: 58%;
filter: blur(14px);
opacity: 0.72;
}
.flexyvo-homepage-benefits__panel-caption { left: 14px;
top: 14px;
right: auto;
bottom: auto;
width: auto;
max-width: calc(100% - 110px);
font-size: 12px;
}
.flexyvo-homepage-benefits__panel-float {
left: 14px;
bottom: 18px;
width: 45%;
min-width: 112px;
max-width: 168px;
border-width: 5px;
border-radius: 16px;
animation-name: flexyvo-benefits-float-mobile;
}
.flexyvo-homepage-benefits__panel-badge {
top: 14px;
right: 12px;
min-width: 104px;
padding: 10px 12px;
border-radius: 14px;
}
.flexyvo-homepage-benefits__panel-badge-number {
font-size: 22px;
}
.flexyvo-homepage-benefits__panel-badge-label {
font-size: 10px;
}
}
@keyframes flexyvo-benefits-float-mobile {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -5px, 0);
}
} @media (max-width: 560px) {
.flexyvo-homepage-benefits__panel-inner {
grid-template-columns: 1fr;
}
.flexyvo-homepage-benefits__panel-media {
max-width: 100%;
aspect-ratio: 16 / 9;
max-height: 200px;
min-height: 0;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.flexyvo-homepage-benefits__card,
.flexyvo-homepage-benefits__cta-link {
transition: none;
}
.flexyvo-homepage-benefits__panel-orbit,
.flexyvo-homepage-benefits__panel-float {
animation: none;
}
}