.primeview-hero,
.primeview-hero *,
.primeview-hero *::before,
.primeview-hero *::after {
box-sizing: border-box;
}
.primeview-hero {
--pv-header: var(--primeview-header-height, 96px);
--pv-green: #22c55e;
--pv-green-deep: #16a34a;
--pv-green-soft: rgba(34, 197, 94, 0.18);
--pv-purple: #a78bfa;
--pv-blue: #60a5fa;
--pv-gold: #fbbf24;
--pv-orange: #fb923c;
--pv-text: #ffffff;
--pv-muted: rgba(255, 255, 255, 0.88);
--pv-glass-dark: rgba(15, 23, 42, 0.42);
--pv-glass-border: rgba(255, 255, 255, 0.22);
--pv-radius-pill: 999px;
--pv-radius-card: 22px;
--pv-radius-bar: 28px;
--pv-shadow-soft: 0 24px 64px rgba(15, 23, 42, 0.16);
--pv-shadow-phone:
0 56px 90px rgba(15, 23, 42, 0.42),
0 24px 40px rgba(15, 23, 42, 0.28),
0 8px 16px rgba(15, 23, 42, 0.16);
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: 100vh;
min-height: 100svh;
margin-top: calc(var(--pv-header) * -1); overflow: visible;
color: var(--pv-text);
font-family: inherit;
isolation: isolate;
float: none !important;
clear: both;
} .primeview-hero__background {
position: absolute !important;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.primeview-hero__background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% center;
}
.primeview-hero__background::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
105deg,
rgba(15, 23, 42, 0.22) 0%,
rgba(15, 23, 42, 0.07) 34%,
rgba(15, 23, 42, 0.015) 52%,
rgba(15, 23, 42, 0.05) 100%
),
linear-gradient(
180deg,
rgba(15, 23, 42, 0.1) 0%,
transparent 26%,
transparent 68%,
rgba(15, 23, 42, 0.12) 100%
);
}
.primeview-hero__panorama-slot {
display: none;
} .primeview-hero .primeview-hero__frame {
position: relative !important;
z-index: 1;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: stretch;
width: 100% !important;
max-width: 1440px;
min-height: 100vh;
min-height: 100svh;
margin: 0 auto; padding:
calc(var(--pv-header) + clamp(18px, 2.2vh, 28px))
clamp(24px, 3vw, 40px)
clamp(28px, 3.5vh, 40px)
clamp(20px, 2.2vw, 28px);
float: none !important;
}
@media (min-width: 992px) { body.primeview-has-hero .primeview-hero .primeview-hero__frame,
.primeview-hero .primeview-hero__frame { padding-top: calc(var(--primeview-header-height, 96px) * 2 - 14px) !important;
}
.primeview-hero__eyebrow {
margin-top: 0 !important;
position: relative;
z-index: 0;
} .primeview-hero .primeview-hero__stage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
gap: clamp(12px, 1.6vw, 28px) !important;
}
.primeview-hero .primeview-hero__content {
padding-right: 0;
max-width: min(100%, 520px);
}
.primeview-hero .primeview-hero__visual {
justify-content: flex-end;
padding-top: 0;
padding-right: clamp(4px, 1vw, 16px);
padding-left: 0;
} .primeview-hero .primeview-hero__phone-cluster {
width: min(100%, clamp(360px, 30vw, 480px)) !important;
padding: 28px 52px;
}
.primeview-hero .primeview-hero__phone-cluster::before { inset: 16% 18%;
transform: scaleX(1.45);
transform-origin: center center;
}
.primeview-hero .primeview-hero__phone {
width: min(68%, clamp(210px, 15.5vw, 246px));
}
} .primeview-hero .primeview-hero__stage {
display: grid !important;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr) !important;
grid-template-rows: auto !important;
align-items: start !important;
gap: clamp(32px, 4vw, 64px) !important;
width: 100% !important;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
float: none !important;
padding-top: 4px;
}
.primeview-hero .primeview-hero__stage > * {
min-width: 0;
max-width: 100%;
float: none !important;
}
.primeview-hero .primeview-hero__content {
max-width: min(100%, 560px);
width: 100%;
grid-column: 1;
grid-row: 1;
margin-top: 0;
padding-right: clamp(0px, 1.5vw, 16px);
align-self: start;
}
.primeview-hero .primeview-hero__visual {
display: flex !important;
justify-content: center;
align-items: flex-start;
min-width: 0;
width: 100%;
grid-column: 2;
grid-row: 1;
overflow: visible !important;
position: relative;
z-index: 2;
align-self: start; padding-top: clamp(8px, 1.5vh, 20px);
padding-right: clamp(8px, 2vw, 28px);
padding-left: clamp(8px, 1.5vw, 20px);
} .primeview-hero__eyebrow {
display: block;
margin: 0 0 clamp(10px, 1.1vw, 14px);
font-size: clamp(12px, 0.85vw, 13px);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
color: var(--pv-green);
text-shadow: 0 1px 12px rgba(15, 23, 42, 0.2);
}
.primeview-hero__headline {
margin: 0 0 clamp(22px, 2vw, 28px);
padding: 0;
border: 0; font-size: clamp(2.05rem, 3.85vw, 3.35rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -0.035em;
color: #ffffff;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(15, 23, 42, 0.28);
}
.primeview-hero__headline-accent {
color: var(--pv-green);
text-shadow: 0 2px 18px rgba(34, 197, 94, 0.25);
} .primeview-hero__headline-break {
display: none;
}
.primeview-hero__supporting {
margin: 0 0 22px;
max-width: 34ch;
font-size: clamp(0.95rem, 1.15vw, 1.05rem);
font-weight: 450;
line-height: 1.55;
letter-spacing: -0.01em;
color: var(--pv-muted);
text-shadow: 0 1px 14px rgba(15, 23, 42, 0.25);
} .primeview-hero__actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 12px;
margin: 0 0 36px;
width: 100%;
max-width: 100%;
}
.primeview-hero a.primeview-hero__cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1 1 0;
width: auto !important;
max-width: none !important;
min-width: 0;
min-height: 50px;
padding: 0 16px !important;
font-size: 13.5px !important;
font-weight: 650 !important;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
border-radius: var(--pv-radius-pill) !important;
box-shadow: none;
}
.primeview-hero a.primeview-hero__cta--primary {
color: #ffffff;
background: linear-gradient(180deg, #2dd469 0%, var(--pv-green) 55%, var(--pv-green-deep) 100%);
border: 0;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 18px 42px rgba(34, 197, 94, 0.4),
0 8px 18px rgba(22, 163, 74, 0.22);
}
.primeview-hero a.primeview-hero__cta--secondary {
color: #ffffff;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px) saturate(1.35);
-webkit-backdrop-filter: blur(20px) saturate(1.35);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}
.primeview-hero__cta-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
border-radius: 50%;
background: #ffffff;
position: relative;
}
.primeview-hero__cta-icon::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid var(--pv-green);
border-top: 2px solid var(--pv-green);
transform: rotate(45deg);
margin-left: -2px;
}
.primeview-hero__cta-icon--calendar {
background: transparent;
border: 0;
width: 18px;
height: 18px;
}
.primeview-hero__cta-icon--calendar::after {
width: 16px;
height: 14px;
margin: 0;
border: 1.5px solid rgba(255, 255, 255, 0.95);
border-radius: 3px;
transform: none;
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.95);
background:
linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) 4px 1px / 1.5px 3px no-repeat,
linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) 10px 1px / 1.5px 3px no-repeat;
} .primeview-hero .primeview-hero__categories {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 14px;
} .primeview-hero button.primeview-hero__category,
.primeview-hero a.primeview-hero__category,
.primeview-hero .primeview-hero__category {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
gap: 7px;
min-height: 41px;
margin: 0 !important;
padding: 9px 18px 9px 13px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
line-height: 1 !important;
text-align: left;
text-decoration: none !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.94) !important;
background: var(--pv-glass-dark) !important;
background-image: none !important;
border: 1px solid var(--pv-glass-border) !important;
border-radius: var(--pv-radius-pill) !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
backdrop-filter: blur(16px) saturate(1.25);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
cursor: pointer;
-webkit-appearance: none !important;
appearance: none !important;
outline: none;
}
.primeview-hero button.primeview-hero__category.is-active,
.primeview-hero .primeview-hero__category.is-active {
border-color: rgba(34, 197, 94, 0.55) !important;
box-shadow:
0 0 0 1px rgba(34, 197, 94, 0.2),
0 10px 28px rgba(15, 23, 42, 0.18) !important;
}
.primeview-hero .primeview-hero__category-icon {
display: inline-flex !important;
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.primeview-hero .primeview-hero__category-label {
display: inline-block;
color: inherit !important;
}
.primeview-hero .primeview-hero__category:nth-child(1) .primeview-hero__category-icon {
color: var(--pv-green);
-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 10.5L12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' 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='M4 10.5L12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.primeview-hero .primeview-hero__category:nth-child(2) .primeview-hero__category-icon {
color: var(--pv-purple);
-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='M3 12h18v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5 12V9a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 14h18' 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='M3 12h18v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5 12V9a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 14h18' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.primeview-hero .primeview-hero__category:nth-child(3) .primeview-hero__category-icon {
color: var(--pv-blue);
-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 20V6h16v14' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 9h2M14 9h2M8 13h2M14 13h2M8 17h2M14 17h2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M3 20h18' 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%3Cpath d='M4 20V6h16v14' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 9h2M14 9h2M8 13h2M14 13h2M8 17h2M14 17h2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M3 20h18' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-hero .primeview-hero__category:nth-child(4) .primeview-hero__category-icon {
color: var(--pv-orange);
-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='M7 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4 8h16l-1.2 11.2A2 2 0 0 1 16.82 21H7.18a2 2 0 0 1-1.98-1.8L4 8Z' 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='M7 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4 8h16l-1.2 11.2A2 2 0 0 1 16.82 21H7.18a2 2 0 0 1-1.98-1.8L4 8Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
} .primeview-hero .primeview-hero__phone-cluster {
position: relative !important;
z-index: 2;
width: min(100%, clamp(300px, 24vw, 380px)) !important;
aspect-ratio: 4 / 5;
min-height: clamp(300px, 36vh, 400px);
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 auto; padding: 22px 30px;
overflow: visible !important;
} .primeview-hero .primeview-hero__phone-cluster::before {
content: '';
position: absolute;
inset: 14% 12%;
z-index: 1;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 0 6px rgba(255, 255, 255, 0.18),
0 0 14px rgba(34, 197, 94, 0.16),
inset 0 0 8px rgba(255, 255, 255, 0.05);
pointer-events: none;
animation: pv-orbit-glow 5.2s ease-in-out infinite;
}
.primeview-hero .primeview-hero__phone {
position: relative !important;
z-index: 2; width: min(64%, clamp(200px, 15vw, 236px));
line-height: 0;
filter: drop-shadow(var(--pv-shadow-phone)); transform:
perspective(1100px)
rotateY(-8deg)
rotateX(2.5deg)
rotateZ(-1deg);
transform-origin: 50% 50%;
float: none !important;
}
.primeview-hero .primeview-hero__phone-image {
position: relative;
z-index: 3;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain;
object-position: center;
pointer-events: none; clip-path: none;
-webkit-mask-image: none;
mask-image: none;
isolation: isolate;
}
.primeview-hero__phone-overlay {
position: absolute;
inset: 8% 10% 10%;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18%;
pointer-events: none;
} .primeview-hero__phone[data-primeview-tour] .primeview-hero__phone-overlay {
display: none;
} .primeview-hero .primeview-hero__phone[data-primeview-tour] {
overflow: visible;
} .primeview-hero__tour { --pv-screen-top: 3.9%;
--pv-screen-right: 6.5%;
--pv-screen-bottom: 5.5%;
--pv-screen-left: 32.5%;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
isolation: isolate;
background: transparent;
}
.primeview-hero__tour-viewport {
position: absolute;
top: var(--pv-screen-top);
right: var(--pv-screen-right);
bottom: var(--pv-screen-bottom);
left: var(--pv-screen-left);
overflow: hidden;
background: #0b1220; border-radius: 12% / 5.2%;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.18),
inset 0 1px 2px rgba(0, 0, 0, 0.22),
inset 0 0 12px rgba(0, 0, 0, 0.28);
} .primeview-hero__tour::after {
content: '';
position: absolute;
top: var(--pv-screen-top);
right: var(--pv-screen-right);
bottom: var(--pv-screen-bottom);
left: var(--pv-screen-left);
z-index: 1;
border-radius: 12% / 5.2%;
pointer-events: none;
background:
linear-gradient(
155deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 22%,
rgba(255, 255, 255, 0) 44%
),
rgba(8, 12, 20, 0.08);
box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.14);
}
.primeview-hero__tour-scene {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: scale(1);
transition: opacity 480ms ease, visibility 480ms ease, transform 480ms ease;
will-change: opacity;
}
.primeview-hero__tour-scene.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
transform: scale(1);
}
.primeview-hero__tour-scene.is-exiting {
opacity: 0;
visibility: visible;
z-index: 2; transform: scale(1.045);
transition: opacity 520ms ease, visibility 520ms ease, transform 520ms ease;
}
.primeview-hero__tour-pan {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 235%;
background-color: #1a2234;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
}
.primeview-hero__tour-scene.is-active.is-panning .primeview-hero__tour-pan {
animation: pv-tour-pan-right 4.8s cubic-bezier(0.33, 0.08, 0.25, 1) forwards;
}
.primeview-hero__tour-scene.is-active.is-panning[data-tour-pan='left'] .primeview-hero__tour-pan {
animation-name: pv-tour-pan-left;
}
.primeview-hero__tour-scene[data-tour-pan='left'] .primeview-hero__tour-pan {
transform: translate3d(-57%, 0, 0);
}
@keyframes pv-tour-pan-right {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-57%, 0, 0);
}
}
@keyframes pv-tour-pan-left {
from {
transform: translate3d(-57%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.primeview-hero__tour-hotspot {
position: absolute;
z-index: 3;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 280ms ease;
}
.primeview-hero__tour-scene.is-active .primeview-hero__tour-hotspot {
opacity: 1;
}
.primeview-hero__tour-hotspot-dot {
position: absolute;
inset: 5px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.85), 0 2px 6px rgba(15, 23, 42, 0.35);
}
.primeview-hero__tour-hotspot-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.85);
opacity: 0.5;
transform: scale(0.7);
}
.primeview-hero__tour-scene.is-active .primeview-hero__tour-hotspot-ring {
animation: pv-hotspot-pulse 1.6s ease-out infinite;
}
.primeview-hero__tour-scene.is-hotspot-active .primeview-hero__tour-hotspot-dot {
background: var(--pv-green);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35), 0 0 14px rgba(34, 197, 94, 0.5);
transform: scale(1.12);
transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.primeview-hero__tour-scene.is-hotspot-active .primeview-hero__tour-hotspot-ring {
animation: pv-hotspot-activate 520ms ease-out forwards;
}
@keyframes pv-hotspot-pulse {
0% {
transform: scale(0.75);
opacity: 0.7;
}
70% {
transform: scale(1.55);
opacity: 0;
}
100% {
transform: scale(1.55);
opacity: 0;
}
}
@keyframes pv-hotspot-activate {
0% {
transform: scale(0.9);
opacity: 0.9;
}
100% {
transform: scale(2.2);
opacity: 0;
}
} .primeview-hero__tour-chrome {
position: absolute;
top: var(--pv-screen-top);
right: var(--pv-screen-right);
bottom: var(--pv-screen-bottom);
left: var(--pv-screen-left); z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between; padding: 10% 6% 5.5%;
border-radius: 12% / 5.2%;
pointer-events: none;
opacity: 0;
transition: opacity 420ms ease;
}
.primeview-hero__tour-chrome.is-ui-visible {
opacity: 1;
}
.primeview-hero__tour-chrome-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.primeview-hero__tour-chrome-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
} .primeview-hero__tour-badge {
display: none;
}
.primeview-hero__tour-room {
max-width: 86%;
padding: 3px 7px;
border-radius: 999px;
font-size: 8px;
font-weight: 650;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.96);
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(255, 255, 255, 0.16);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transform: translateY(-3px);
transition: opacity 380ms ease, transform 380ms ease;
}
.primeview-hero__tour-chrome.is-ui-visible .primeview-hero__tour-room {
opacity: 1;
transform: translateY(0);
}
.primeview-hero__tour-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.primeview-hero__tour-ctrl {
width: 16px;
height: 16px;
border-radius: 5px;
background: rgba(15, 23, 42, 0.48);
border: 1px solid rgba(255, 255, 255, 0.18);
position: relative;
}
.primeview-hero__tour-ctrl--view::before {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.primeview-hero__tour-ctrl--hotspot::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 50%;
background: var(--pv-green);
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
}
.primeview-hero__tour-ctrl--full::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 2px;
}
.primeview-hero__tour-hint {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0 auto;
padding: 4px 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
color: #ffffff; background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: none;
filter: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
opacity: 0;
transform: none;
transition: opacity 320ms ease;
}
.primeview-hero__tour-hint::before {
content: '';
width: 8px;
height: 8px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 2px 1px 0 -0.5px rgba(255, 255, 255, 0.5);
flex-shrink: 0;
}
.primeview-hero__tour-chrome.is-ui-visible .primeview-hero__tour-hint {
opacity: 1;
}
.primeview-hero__tour-chrome.is-ui-dim .primeview-hero__tour-room,
.primeview-hero__tour-chrome.is-ui-dim .primeview-hero__tour-controls {
opacity: 0.28;
transition: opacity 320ms ease;
} .primeview-hero__tour-chrome.is-ui-dim .primeview-hero__tour-hint {
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
.primeview-hero__tour-pan,
.primeview-hero__tour-hotspot-ring {
animation: none !important;
}
}
.primeview-hero__phone-360 {
width: 75px;
height: 75px;
border: 0;
border-radius: 0;
box-shadow: none;
background:
url(//primeview.ng/wp-content/themes/houzez-child/assets/images/badge-360.svg) center / contain no-repeat;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.primeview-hero__phone-360::before,
.primeview-hero__phone-360::after {
content: none;
display: none;
}
.primeview-hero__phone-hint {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--pv-radius-pill);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.primeview-hero__phone-hint::before {
content: '';
width: 14px;
height: 14px;
border-radius: 3px;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 4px 2px 0 -1px rgba(255, 255, 255, 0.55);
} .primeview-hero .primeview-hero__float-card {
position: absolute !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
gap: 10px;
max-width: 200px;
width: max-content;
padding: 11.5px 12.5px !important;
margin: 0 !important; background: rgba(30, 41, 59, 0.88) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 18px !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: var(--pv-shadow-soft);
float: none !important;
visibility: visible !important; opacity: 1 !important;
will-change: transform;
text-decoration: none !important;
color: inherit;
cursor: default;
}
.primeview-hero a.primeview-hero__float-card {
cursor: pointer;
} .primeview-hero .primeview-hero__float-card--tl {
top: 4% !important;
left: -4% !important;
right: auto !important;
bottom: auto !important;
animation: pv-float-tl 5.6s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--tr {
top: 8% !important;
right: -4% !important;
left: auto !important;
bottom: auto !important;
animation: pv-float-tr 6.2s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--bl {
bottom: 10% !important;
left: -6% !important;
right: auto !important;
top: auto !important;
animation: pv-float-bl 6.8s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--br {
bottom: 6% !important;
right: -6% !important;
left: auto !important;
top: auto !important;
animation: pv-float-br 5.9s ease-in-out infinite;
} @media (min-width: 992px) {
.primeview-hero .primeview-hero__float-card--tl {
top: 6% !important;
left: -8% !important;
}
.primeview-hero .primeview-hero__float-card--tr {
top: 10% !important;
right: -8% !important;
}
.primeview-hero .primeview-hero__float-card--bl {
bottom: 12% !important;
left: -10% !important;
}
.primeview-hero .primeview-hero__float-card--br {
bottom: 8% !important;
right: -10% !important;
}
}
.primeview-hero__float-card-icon {
display: inline-flex;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.16);
position: relative;
}
.primeview-hero__float-card-icon::after {
content: '';
position: absolute;
inset: 7px;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.primeview-hero__float-card--tl .primeview-hero__float-card-icon {
color: var(--pv-green);
}
.primeview-hero__float-card--tl .primeview-hero__float-card-icon::after {
-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 10.5L12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' 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='M4 10.5L12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.primeview-hero__float-card--bl .primeview-hero__float-card-icon {
color: var(--pv-purple);
}
.primeview-hero__float-card--bl .primeview-hero__float-card-icon::after {
-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='M3 12h18v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5 12V9a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v3' 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='M3 12h18v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Z' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5 12V9a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v3' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.primeview-hero__float-card--tr .primeview-hero__float-card-icon {
color: var(--pv-blue);
}
.primeview-hero__float-card--tr .primeview-hero__float-card-icon::after {
-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 20V6h16v14' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 20h18' 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 20V6h16v14' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3 20h18' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.primeview-hero__float-card--br .primeview-hero__float-card-icon {
color: var(--pv-gold);
}
.primeview-hero__float-card--br .primeview-hero__float-card-icon::after {
-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='M7 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4 8h16l-1.2 11.2A2 2 0 0 1 16.82 21H7.18a2 2 0 0 1-1.98-1.8L4 8Z' 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='M7 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4 8h16l-1.2 11.2A2 2 0 0 1 16.82 21H7.18a2 2 0 0 1-1.98-1.8L4 8Z' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.primeview-hero__float-card-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.primeview-hero__float-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: -0.01em;
color: #ffffff;
line-height: 1.2;
}
.primeview-hero__float-card-subtitle {
font-size: 10px;
font-weight: 500;
line-height: 1.3;
color: rgba(255, 255, 255, 0.78);
}
.primeview-hero__float-card--tl .primeview-hero__float-card-subtitle {
color: #86efac;
}
.primeview-hero__float-card--bl .primeview-hero__float-card-subtitle {
color: #c4b5fd;
}
.primeview-hero__float-card--tr .primeview-hero__float-card-subtitle {
color: #93c5fd;
}
.primeview-hero__float-card--br .primeview-hero__float-card-subtitle {
color: #fcd34d;
} .primeview-hero .primeview-hero__dock {
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: 0;
width: 100% !important;
margin-top: 48px;
flex: 0 0 auto;
}
.primeview-hero .primeview-hero__features {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: rgba(255, 255, 255, 0.96) !important;
border-radius: var(--pv-radius-bar);
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.primeview-hero .primeview-hero__feature {
display: flex !important;
align-items: flex-start;
gap: 10px;
padding: 24px 22px;
position: relative;
}
.primeview-hero__feature + .primeview-hero__feature::before {
content: '';
position: absolute;
left: 0;
top: 24px;
bottom: 24px;
width: 1px;
background: rgba(15, 23, 42, 0.08);
}
.primeview-hero__feature-icon {
display: inline-flex;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 12px;
background: rgba(34, 197, 94, 0.12);
position: relative;
}
.primeview-hero__feature-icon::after {
content: '';
position: absolute;
inset: 7px;
background-color: var(--pv-green);
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.primeview-hero__feature:nth-child(1) .primeview-hero__feature-icon::after {
-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 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6l7-3Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' 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%3Cpath d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6l7-3Z' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.primeview-hero__feature:nth-child(2) .primeview-hero__feature-icon::after {
-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='M12 8v4l3 2' 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='12' cy='12' r='8' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 8v4l3 2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-hero__feature:nth-child(3) .primeview-hero__feature-icon::after {
-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='9' cy='9' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='10' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3.5 19c1.2-3 3.4-4.5 5.5-4.5S13.3 16 14.5 19' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M14 14.5c1.4-.4 2.8-.2 4.5 1.2.8.7 1.4 1.8 1.8 3.3' 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='9' cy='9' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='10' r='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3.5 19c1.2-3 3.4-4.5 5.5-4.5S13.3 16 14.5 19' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M14 14.5c1.4-.4 2.8-.2 4.5 1.2.8.7 1.4 1.8 1.8 3.3' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-hero__feature-copy {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.primeview-hero__feature-title {
font-size: 11px;
font-weight: 700;
letter-spacing: -0.015em;
color: #0f172a;
line-height: 1.25;
}
.primeview-hero__feature-text {
font-size: 10px;
font-weight: 450;
line-height: 1.45;
color: #64748b;
}  @media (min-width: 901px) {
.primeview-hero .primeview-hero__content {
max-width: min(100%, 560px);
}
.primeview-hero .primeview-hero__actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 12px !important;
margin-bottom: 28px;
width: 100%;
}
.primeview-hero a.primeview-hero__cta {
display: inline-flex !important;
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
padding: 0 14px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
.primeview-hero__cta-icon {
width: 26px;
height: 26px;
}
.primeview-hero .primeview-hero__float-card {
max-width: min(168px, 15vw);
padding: 9px 10px !important;
gap: 8px;
border-radius: 14px !important;
}
.primeview-hero .primeview-hero__categories {
margin-top: 0;
flex-wrap: nowrap;
}
}
@media (min-width: 1280px) and (max-width: 1365.98px) {
.primeview-hero .primeview-hero__stage {
gap: 28px !important;
}
.primeview-hero .primeview-hero__content {
max-width: min(100%, 520px);
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(100%, 320px) !important;
padding: 28px 44px;
}
.primeview-hero a.primeview-hero__cta {
padding: 0 12px !important;
font-size: 12.5px !important;
}
}
@media (min-width: 1366px) and (max-width: 1439.98px) {
.primeview-hero .primeview-hero__content {
max-width: min(100%, 540px);
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(100%, 340px) !important;
}
}
@media (min-width: 1440px) and (max-width: 1599.98px) {
.primeview-hero .primeview-hero__content {
max-width: min(100%, 560px);
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(100%, 360px) !important;
}
}
@media (min-width: 1600px) {
.primeview-hero .primeview-hero__frame {
max-width: min(1440px, 92vw);
}
.primeview-hero .primeview-hero__content {
max-width: min(100%, 560px);
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(100%, 380px) !important;
}
}
@media (min-width: 1920px) {
.primeview-hero .primeview-hero__visual {
padding-right: 36px;
padding-top: 12px;
}
}
@media (max-width: 1100px) {
.primeview-hero .primeview-hero__frame {
padding-left: 20px;
padding-right: 28px;
}
.primeview-hero .primeview-hero__stage {
gap: 48px !important;
}
} @media (max-width: 900px) and (min-width: 768px) {
.primeview-hero .primeview-hero__stage {
grid-template-columns: 1fr !important;
gap: 40px !important;
justify-items: center;
align-items: center !important;
}
.primeview-hero .primeview-hero__content,
.primeview-hero .primeview-hero__visual {
grid-column: 1 !important;
grid-row: auto !important;
}
.primeview-hero .primeview-hero__content {
max-width: 560px;
margin-top: 0;
text-align: center;
}
.primeview-hero .primeview-hero__actions {
justify-content: center;
flex-wrap: wrap;
}
.primeview-hero .primeview-hero__categories {
justify-content: center;
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(100%, 320px) !important;
min-height: 320px;
margin: 0 auto;
padding: 8px 20px 16px 8px;
}
.primeview-hero .primeview-hero__phone {
transform:
perspective(1100px)
rotateY(-7deg)
rotateX(2.5deg)
rotateZ(-1deg)
translate(calc(3% + 16px), calc(2% + 8px));
}
.primeview-hero .primeview-hero__features {
grid-template-columns: 1fr;
}
.primeview-hero .primeview-hero__feature + .primeview-hero__feature::before {
left: 24px;
right: 24px;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
} @media (max-width: 767.98px) {
.primeview-hero {
min-height: 0;
max-width: 100%; overflow: visible !important;
} .primeview-hero__background {
background-color: #120e18;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
inset: 0;
left: 0;
right: 0;
}
.primeview-hero__background-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: 0% 74%;
transform: scale(1.22);
transform-origin: 0% 74%;
} .primeview-hero__background::after {
background:
radial-gradient(
ellipse 48% 36% at 50% 52%,
rgba(255, 214, 168, 0.1) 0%,
rgba(255, 190, 135, 0.03) 34%,
transparent 62%
),
radial-gradient(
ellipse 78% 64% at 50% 52%,
transparent 0%,
transparent 20%,
rgba(18, 12, 26, 0.28) 48%,
rgba(12, 8, 20, 0.55) 72%,
rgba(8, 6, 14, 0.72) 100%
),
linear-gradient(
180deg,
rgba(12, 8, 18, 0.58) 0%,
rgba(16, 10, 22, 0.22) 18%,
transparent 40%,
transparent 58%,
rgba(14, 10, 20, 0.38) 80%,
rgba(8, 6, 14, 0.62) 100%
);
}
.primeview-hero .primeview-hero__frame {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start;
align-items: center;
min-height: 0;
overflow: visible !important; padding:
calc(var(--pv-header) + 40px)
14px
0;
gap: 0;
}
.primeview-hero .primeview-hero__stage {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
flex: 0 1 auto;
width: 100% !important;
max-width: none;
overflow: visible !important;
} .primeview-hero .primeview-hero__content {
display: contents !important;
}
.primeview-hero .primeview-hero__visual {
display: flex !important;
order: 4;
position: relative;
z-index: 5;
width: 100%;
justify-content: center;
align-items: center; margin-top: -32px;
padding: 32px 0 0;
overflow: visible !important; float: none !important;
transform: none;
filter: none;
contain: none;
}
.primeview-hero__eyebrow {
order: 1;
display: block;
margin: 0 0 12px;
text-align: center;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.3;
}
.primeview-hero__headline {
order: 2;
margin: 9px auto 8px;
width: 100%;
max-width: none;
text-align: center; font-size: 25px;
font-weight: 750;
line-height: 1.14;
letter-spacing: -0.04em;
text-wrap: wrap;
}
.primeview-hero__headline-break {
display: none;
}
.primeview-hero__headline-accent {
font-weight: 750;
}
.primeview-hero__supporting {
order: 3;
margin: 0 auto 0;
width: 100%;
max-width: 292px;
text-align: center;
font-size: 13px;
font-weight: 450;
line-height: 1.48;
color: rgba(255, 255, 255, 0.88);
} .primeview-hero .primeview-hero__phone-cluster {
position: relative !important;
z-index: 5;
display: flex !important;
align-items: center;
justify-content: center;
width: min(322px, calc(100vw - 28px)) !important;
max-width: 100%;
height: 269px;
min-height: 269px;
aspect-ratio: auto;
margin: 0 auto; padding: 28px 52px;
box-sizing: border-box;
overflow: visible !important;
isolation: auto;
contain: none;
transform: none;
filter: none;
clip-path: none;
-webkit-mask-image: none;
mask-image: none;
}
.primeview-hero .primeview-hero__phone-cluster::before {
content: '';
position: absolute;
inset: 10% 8%;
z-index: 1;
border-radius: 50%;
border: 1px solid rgba(34, 197, 94, 0.35);
box-shadow:
0 0 18px rgba(34, 197, 94, 0.16),
inset 0 0 14px rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.primeview-hero .primeview-hero__phone {
position: relative !important;
z-index: 2;
width: 177px;
max-width: 56%; border-radius: 0;
overflow: visible;
transform:
perspective(1000px)
rotateY(-5deg)
rotateX(1.8deg)
rotateZ(-0.6deg);
transform-origin: 50% 50%; filter: none;
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.38);
} .primeview-hero .primeview-hero__float-card,
.primeview-hero .primeview-hero__float-card--tl,
.primeview-hero .primeview-hero__float-card--tr,
.primeview-hero .primeview-hero__float-card--bl,
.primeview-hero .primeview-hero__float-card--br {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto;
}
.primeview-hero .primeview-hero__float-card {
position: absolute !important;
z-index: 10 !important;
width: max-content !important;
max-width: 132px;
padding: 5px 7px !important;
gap: 5px !important;
border-radius: 11px !important;
background: rgba(30, 41, 59, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
float: none !important;
will-change: transform;
}
.primeview-hero .primeview-hero__float-card--br {
max-width: 148px;
}
.primeview-hero__float-card-title,
.primeview-hero__float-card-subtitle {
white-space: nowrap;
}
.primeview-hero .primeview-hero__float-card--tl {
top: 8px !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
animation: pv-float-tl 5.6s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--tr {
top: 20px !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
animation: pv-float-tr 6.2s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--bl {
bottom: 28px !important;
left: 0 !important;
right: auto !important;
top: auto !important;
animation: pv-float-bl 6.8s ease-in-out infinite;
}
.primeview-hero .primeview-hero__float-card--br {
bottom: 16px !important;
right: 0 !important;
left: auto !important;
top: auto !important;
animation: pv-float-br 5.9s ease-in-out infinite;
}
.primeview-hero__float-card-title {
font-size: 9px;
line-height: 1.15;
color: #ffffff;
}
.primeview-hero__float-card-subtitle {
font-size: 8px;
line-height: 1.2;
}
.primeview-hero__float-card-icon {
width: 16px;
height: 16px;
border-radius: 6px;
flex-shrink: 0;
}
.primeview-hero__float-card-icon::after {
inset: 3px;
}
.primeview-hero__phone-360 {
width: 48px;
height: 48px;
}
.primeview-hero__phone-hint {
font-size: 8.5px;
padding: 3px 7px;
}
.primeview-hero__actions {
order: 5;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
max-width: 100%; margin: 9px auto 8px;
}
.primeview-hero a.primeview-hero__cta {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 56px;
height: 56px;
max-height: none !important;
padding: 0 20px !important;
justify-content: center;
align-items: center;
font-size: 15px !important;
white-space: normal;
border-radius: 999px !important; transform: none;
filter: none;
translate: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
.primeview-hero a.primeview-hero__cta--primary {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 6px 14px rgba(34, 197, 94, 0.32);
}
.primeview-hero a.primeview-hero__cta--primary .primeview-hero__cta-label {
text-shadow: none;
} .primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__actions,
.primeview-hero.is-hero-ready .primeview-hero__actions {
translate: none !important;
transform: none !important;
}
.primeview-hero .primeview-hero__categories {
order: 6;
display: flex !important;
flex-wrap: nowrap;
justify-content: stretch;
align-items: stretch;
gap: 5px;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-inline: 0;
box-sizing: border-box;
overflow: visible;
}
.primeview-hero button.primeview-hero__category,
.primeview-hero .primeview-hero__category {
flex: 1 1 0;
min-width: 0;
width: auto;
justify-content: center;
min-height: 34px;
padding: 6px 4px !important;
gap: 3px !important;
overflow: hidden;
border-radius: 999px !important;
}
.primeview-hero .primeview-hero__category-label {
font-size: clamp(8.5px, 2.45vw, 10px);
font-weight: 650 !important;
letter-spacing: -0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.primeview-hero .primeview-hero__category-icon {
width: 11px;
height: 11px;
flex-shrink: 0;
}
.primeview-hero .primeview-hero__dock {
width: 94%;
max-width: 94%;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
}
.primeview-hero .primeview-hero__features {
grid-template-columns: 1fr !important;
width: 100%;
border-radius: 22px !important;
}
.primeview-hero .primeview-hero__feature {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) 12px;
column-gap: 12px;
align-items: center;
padding: 10px 20px;
text-align: left;
}
.primeview-hero .primeview-hero__feature + .primeview-hero__feature::before {
content: '';
display: block;
left: 20px;
right: 20px;
top: 0;
bottom: auto;
width: auto;
height: 1px;
background: rgba(15, 23, 42, 0.07);
}
.primeview-hero .primeview-hero__feature::after {
content: '';
grid-column: 3;
justify-self: end;
align-self: center;
width: 7px;
height: 7px;
margin: 0;
border-right: 1.5px solid #14b8a6;
border-top: 1.5px solid #14b8a6;
transform: rotate(45deg);
opacity: 0.75;
}
.primeview-hero__feature-icon {
grid-column: 1;
width: 28px;
height: 28px;
border-radius: 999px;
margin-top: 0;
background: rgba(34, 197, 94, 0.1);
}
.primeview-hero__feature-icon::after {
inset: 6px;
}
.primeview-hero__feature-copy {
grid-column: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
}
.primeview-hero__feature-title {
font-size: 13px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.primeview-hero__feature-text {
font-size: 11px;
line-height: 1.3;
margin-top: 0;
color: #64748b;
} .primeview-hero.is-hero-animate .primeview-hero__float-card,
.primeview-hero.is-hero-ready .primeview-hero__float-card,
.primeview-hero .primeview-hero__float-card {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
} @supports (-webkit-touch-callout: none) {
.primeview-hero__eyebrow {
margin-bottom: 14px;
}
.primeview-hero__headline {
margin-bottom: 12px;
}
.primeview-hero__supporting {
margin-bottom: 4px;
}
.primeview-hero .primeview-hero__visual {
margin-top: -28px;
padding-top: 36px;
}
.primeview-hero__actions {
margin-top: 12px;
margin-bottom: 12px;
}
.primeview-hero .primeview-hero__categories {
margin-top: 2px;
}
}
}
@keyframes pv-orbit-glow {
0%,
100% {
opacity: 0.82;
box-shadow:
0 0 6px rgba(255, 255, 255, 0.16),
0 0 12px rgba(34, 197, 94, 0.14),
inset 0 0 6px rgba(255, 255, 255, 0.04);
}
50% {
opacity: 0.95;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.22),
0 0 16px rgba(34, 197, 94, 0.2),
inset 0 0 8px rgba(255, 255, 255, 0.06);
}
}
@keyframes pv-float-tl {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -5px, 0);
}
}
@keyframes pv-float-tr {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -7px, 0);
}
}
@keyframes pv-float-bl {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -4px, 0);
}
}
@keyframes pv-float-br {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -6px, 0);
}
} @media (max-width: 767.98px) {
html:has(body.home),
html:has(body.primeview-has-hero),
body.home,
body.primeview-has-hero {
overflow-x: clip;
}
} @media (max-width: 359.98px) {
.primeview-hero .primeview-hero__frame {
padding-left: 16px;
padding-right: 16px;
}
.primeview-hero .primeview-hero__phone-cluster {
width: min(298px, calc(100vw - 24px)) !important;
height: 249px;
min-height: 249px;
padding: 22px 44px;
margin: 0 auto;
}
.primeview-hero .primeview-hero__phone {
width: 164px;
max-width: 56%;
}
.primeview-hero .primeview-hero__float-card {
max-width: 92px;
padding: 4px 5px !important;
}
.primeview-hero__headline {
font-size: 23px;
width: 100%;
max-width: none;
}
.primeview-hero__supporting {
font-size: 12.5px;
max-width: 300px;
line-height: 1.48;
}
.primeview-hero a.primeview-hero__cta {
min-height: 52px;
height: 52px;
font-size: 14px !important;
}
.primeview-hero .primeview-hero__category-label {
font-size: clamp(8.25px, 2.5vw, 9.5px);
}
.primeview-hero button.primeview-hero__category,
.primeview-hero .primeview-hero__category {
padding: 6px 3px !important;
gap: 2px !important;
} .primeview-hero .primeview-hero__category-icon {
display: none !important;
}
.primeview-hero .primeview-hero__feature {
padding: 8px 16px;
}
} .primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__eyebrow,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__headline,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__supporting,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__actions,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__categories,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__phone {
opacity: 0;
translate: 0 18px;
}
.primeview-hero.is-hero-ready .primeview-hero__eyebrow,
.primeview-hero.is-hero-ready .primeview-hero__headline,
.primeview-hero.is-hero-ready .primeview-hero__supporting,
.primeview-hero.is-hero-ready .primeview-hero__actions,
.primeview-hero.is-hero-ready .primeview-hero__categories,
.primeview-hero.is-hero-ready .primeview-hero__phone {
opacity: 1;
translate: 0 0;
transition:
opacity 600ms ease-out,
translate 600ms ease-out;
}
.primeview-hero.is-hero-ready .primeview-hero__eyebrow {
transition-delay: 0ms;
}
.primeview-hero.is-hero-ready .primeview-hero__headline {
transition-delay: 110ms;
}
.primeview-hero.is-hero-ready .primeview-hero__supporting {
transition-delay: 220ms;
}
.primeview-hero.is-hero-ready .primeview-hero__actions {
transition-delay: 330ms;
}
.primeview-hero.is-hero-ready .primeview-hero__categories {
transition-delay: 440ms;
}
.primeview-hero.is-hero-ready .primeview-hero__phone {
transition-delay: 550ms;
}
@media (prefers-reduced-motion: reduce) {
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__eyebrow,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__headline,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__supporting,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__actions,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__categories,
.primeview-hero.is-hero-animate:not(.is-hero-ready) .primeview-hero__phone,
.primeview-hero.is-hero-ready .primeview-hero__eyebrow,
.primeview-hero.is-hero-ready .primeview-hero__headline,
.primeview-hero.is-hero-ready .primeview-hero__supporting,
.primeview-hero.is-hero-ready .primeview-hero__actions,
.primeview-hero.is-hero-ready .primeview-hero__categories,
.primeview-hero.is-hero-ready .primeview-hero__phone {
opacity: 1;
translate: none;
transition: none;
transition-delay: 0ms;
}
.primeview-hero .primeview-hero__float-card--tl,
.primeview-hero .primeview-hero__float-card--tr,
.primeview-hero .primeview-hero__float-card--bl,
.primeview-hero .primeview-hero__float-card--br,
.primeview-hero .primeview-hero__phone-cluster::before {
animation: none !important;
}
}