.primeview-how {
--pv-how-green: #22c55e;
--pv-how-text: #0f172a;
--pv-how-muted: #64748b;
--pv-how-line-track: rgba(34, 197, 94, 0.14);
--pv-how-icon-bg: #f0fdf4;
--pv-how-bg: #f7fcf8;
--pv-how-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 28px rgba(15, 23, 42, 0.05);
--pv-how-line-progress: 0;
position: relative;
width: 100%;
background: var(--pv-how-bg);
color: var(--pv-how-text); padding: 80px 48px 96px;
}
.primeview-how__inner {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
.primeview-how__header {
max-width: 720px;
margin: 0 auto 64px;
text-align: center;
}
.primeview-how__eyebrow {
margin: 0 0 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.3;
text-transform: uppercase;
color: var(--pv-how-green);
}
.primeview-how__headline {
margin: 0;
padding: 0;
border: 0;
font-size: clamp(2rem, 3.6vw, 3.15rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--pv-how-text);
text-wrap: balance;
}
.primeview-how__steps {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px 24px;
margin: 0;
padding: 0;
list-style: none;
} .primeview-how__steps::before,
.primeview-how__steps::after {
content: '';
position: absolute;
top: 19px;
left: 12.5%;
right: 12.5%;
height: 2px;
pointer-events: none;
z-index: 0;
border-radius: 999px;
}
.primeview-how__steps::before {
background: var(--pv-how-line-track);
}
.primeview-how__steps::after {
background: linear-gradient(
90deg,
rgba(134, 239, 172, 0.35) 0%,
#22c55e 45%,
#4ade80 100%
);
transform: scaleX(var(--pv-how-line-progress));
transform-origin: left center;
transition: transform 0.15s linear;
}
.primeview-how__step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--pv-how-delay, 0ms);
}
.primeview-how__step.is-inview {
opacity: 1;
transform: translateY(0);
}
.primeview-how__rail {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.primeview-how__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--pv-how-green);
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
box-shadow:
0 0 0 5px rgba(34, 197, 94, 0.12),
0 8px 20px rgba(34, 197, 94, 0.28);
}
.primeview-how__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding: 22px 18px 20px;
border-radius: 20px;
background: #ffffff;
box-shadow: var(--pv-how-card-shadow);
}
.primeview-how__icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 18px;
border-radius: 50%;
background: var(--pv-how-icon-bg);
}
.primeview-how__icon {
display: block;
width: 31px;
height: 31px;
background-color: var(--pv-how-green);
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.primeview-how__icon--calendar {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-how__icon--camera {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6h2.1l1.2-1.8A1.5 1.5 0 0 1 11 3.5h2a1.5 1.5 0 0 1 1.2.7L15.4 6h2.1A2.5 2.5 0 0 1 20 8.5v9A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-9Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.2' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6h2.1l1.2-1.8A1.5 1.5 0 0 1 11 3.5h2a1.5 1.5 0 0 1 1.2.7L15.4 6h2.1A2.5 2.5 0 0 1 20 8.5v9A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-9Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.2' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.primeview-how__icon--cube {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.5 20 8v8l-8 4.5L4 16V8l8-4.5Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 12.5 20 8M12 12.5 4 8M12 12.5V20.5' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.5 20 8v8l-8 4.5L4 16V8l8-4.5Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 12.5 20 8M12 12.5 4 8M12 12.5V20.5' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.primeview-how__icon--share {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='18' cy='5' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='6' cy='12' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='19' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.4 10.8 15.6 6.7M8.4 13.2l7.2 4.1' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='18' cy='5' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='6' cy='12' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='19' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.4 10.8 15.6 6.7M8.4 13.2l7.2 4.1' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-how__title {
margin: 0 0 6px;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
color: var(--pv-how-text);
}
.primeview-how__text {
margin: 0;
max-width: 240px;
font-size: 15px;
font-weight: 400;
line-height: 1.55;
color: var(--pv-how-muted);
}
@media (max-width: 1199.98px) {
.primeview-how {
padding-left: 32px;
padding-right: 32px;
}
.primeview-how__steps {
gap: 28px 18px;
}
}
@media (max-width: 900px) {
.primeview-how {
padding: 68px 24px 80px;
}
.primeview-how__header {
margin-bottom: 48px;
}
.primeview-how__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 28px;
}
.primeview-how__steps::before,
.primeview-how__steps::after {
display: none;
}
}
@media (max-width: 639.98px) {
.primeview-how {
padding: 56px 20px 72px;
}
.primeview-how__header {
margin-bottom: 40px;
}
.primeview-how__steps {
grid-template-columns: 1fr;
gap: 0;
padding-left: 28px;
} .primeview-how__steps::before,
.primeview-how__steps::after {
display: block;
top: 19px;
bottom: 19px;
left: 18px;
right: auto;
width: 2px;
height: auto;
transform: none;
}
.primeview-how__steps::before {
background: var(--pv-how-line-track);
}
.primeview-how__steps::after {
bottom: auto;
height: calc((100% - 38px) * var(--pv-how-line-progress));
max-height: calc(100% - 38px);
background: linear-gradient(
180deg,
rgba(134, 239, 172, 0.35) 0%,
#22c55e 45%,
#4ade80 100%
);
transform: none;
transition: height 0.15s linear;
}
.primeview-how__step {
align-items: flex-start;
text-align: left;
padding: 0 0 28px 36px;
}
.primeview-how__step:last-child {
padding-bottom: 0;
}
.primeview-how__rail {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.primeview-how__card {
align-items: flex-start;
text-align: left;
padding: 18px 18px 16px;
}
.primeview-how__icon-wrap {
margin-bottom: 14px;
}
.primeview-how__text {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.primeview-how {
--pv-how-line-progress: 1;
}
.primeview-how__step {
opacity: 1;
transform: none;
transition: none;
}
.primeview-how__steps::after {
transition: none;
}
} .primeview-how.primeview-how--quiet {
--pv-how-bg: #fbfcfd;
--pv-how-icon-bg: #ffffff;
--pv-how-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 16px 40px rgba(15, 23, 42, 0.06);
padding: 88px 48px 100px;
border-top: 1px solid rgba(15, 23, 42, 0.04);
border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
.primeview-how.primeview-how--quiet .primeview-how__headline {
font-size: clamp(1.85rem, 3vw, 2.55rem);
}
.primeview-how.primeview-how--quiet .primeview-how__card {
border: 1px solid rgba(15, 23, 42, 0.06);
}
.primeview-how[data-how-steps='3'] .primeview-how__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.primeview-how[data-how-steps='3'] .primeview-how__steps::before,
.primeview-how[data-how-steps='3'] .primeview-how__steps::after {
left: 16.666%;
right: 16.666%;
}
.primeview-how__icon--search {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M16.2 16.2L20 20' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M16.2 16.2L20 20' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-how__icon--compass {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M14.8 9.2l-1.6 4.4-4.4 1.6 1.6-4.4 4.4-1.6Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M14.8 9.2l-1.6 4.4-4.4 1.6 1.6-4.4 4.4-1.6Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.primeview-how__icon--check {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 12.2l2.3 2.3 4.7-4.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.5 12.2l2.3 2.3 4.7-4.8' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 899.98px) {
.primeview-how[data-how-steps='3'] .primeview-how__steps {
grid-template-columns: 1fr;
}
.primeview-how[data-how-steps='3'] .primeview-how__steps::before,
.primeview-how[data-how-steps='3'] .primeview-how__steps::after {
left: 19px;
right: auto;
width: 2px;
top: 24px;
bottom: 24px;
height: auto;
}
}