.hero { position: relative; overflow: hidden; padding: 105px 0 95px; }
.site-header--transparent ~ .site-main .hero { padding-top: 155px; }
.hero--gradient { background: linear-gradient(135deg, var(--avp-hero-start), var(--avp-hero-end)); }
.hero--shape { background: #f7fbff; }
.hero--shape::after { position: absolute; z-index: 0; top: -35%; right: -15%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #1769e0, #45c3ff); content: ""; opacity: .13; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: 70px; }
.hero--left .hero__content { order: 2; }
.hero--left .hero__visual { order: 1; }
.hero--none .hero__grid { display: block; max-width: 850px; text-align: center; }
.hero__content h1 span { color: var(--avp-color-primary); }
.hero:is(.hero--gradient, .hero--has-background-image) .hero__content h1 { color: var(--avp-hero-title-color, var(--avp-h1-color)); }
.hero:is(.hero--gradient, .hero--has-background-image) .hero__content h1 span { color: var(--avp-hero-highlight-color, var(--avp-color-primary)); }
.hero__lead { max-width: 650px; color: var(--avp-color-muted); font-size: clamp(1.08rem, 2vw, 1.25rem); }
.hero:is(.hero--gradient, .hero--has-background-image) .hero__lead { color: var(--avp-hero-text-color, var(--avp-color-muted)); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 24px; }
.hero__trust { color: var(--avp-color-muted); font-size: .92rem; font-weight: 650; }
.hero:is(.hero--gradient, .hero--has-background-image) .hero__trust { color: var(--avp-hero-text-color, var(--avp-color-muted)); }
.hero__trust span { color: var(--avp-color-primary); }
.hero:is(.hero--gradient, .hero--has-background-image) .hero__trust span { color: var(--avp-hero-trust-icon-color, var(--avp-color-primary)); }
.hero:is(.hero--gradient, .hero--has-background-image) .eyebrow { color: var(--avp-hero-eyebrow-color, var(--avp-color-primary)); }
.hero:is(.hero--gradient, .hero--has-background-image) .button--outline { border-color: rgba(255,255,255,.68); color: var(--avp-hero-title-color, #ffffff); background: transparent; }
.hero:is(.hero--gradient, .hero--has-background-image) .button--outline:hover { border-color: #ffffff; color: var(--avp-color-secondary); background: #ffffff; }
.hero__visual { perspective: 1000px; }
.laptop { position: relative; transform: rotateY(-4deg) rotateX(2deg); }
.hero--left .laptop { transform: rotateY(4deg) rotateX(2deg); }
.laptop__screen { position: relative; overflow: hidden; aspect-ratio: 16/10; padding: 13px; border: 12px solid #10243e; border-bottom-width: 18px; border-radius: 22px 22px 10px 10px; background: #fff; box-shadow: 0 35px 70px rgba(11,31,58,.25); }
.laptop__screen > img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.laptop__copy { position: absolute; inset: auto 11% 13%; display: flex; flex-direction: column; padding: 20px; border-radius: 14px; color: #fff; background: rgba(7,26,51,.9); }
.laptop__copy strong { color: #76d0ff; font-size: 1.4rem; }
.laptop__copy small { margin-top: 7px; color: #bfe9ff; font-size: .72rem; }
.laptop__base { width: 112%; height: 18px; margin-left: -6%; border-radius: 3px 3px 18px 18px; background: linear-gradient(#dce3eb, #8795a6); box-shadow: 0 10px 20px rgba(11,31,58,.18); }

.hero--has-background-image { background-image: linear-gradient(105deg, var(--avp-hero-image-overlay-start, rgba(244,249,255,.78)), var(--avp-hero-image-overlay-end, rgba(234,244,255,.78))), var(--avp-hero-background-image); background-position: center; background-size: cover; }