/* Investace hero system — one screen, every device. Markup:
(optional decorative layer)

…

Line one,
line two.

One or two short sentences.

…two buttons…
Scroll
…the product visual, rising in on scroll…
*/ .xhero { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 560px; display: grid; place-items: center; padding: 72px clamp(20px, 4vw, 56px) 64px; overflow: hidden; text-align: center; } .xhero__in { position: relative; z-index: 2; width: min(1200px, 100%); display: flex; flex-direction: column; align-items: center; } .xhero .chip { margin-inline: auto; } /* headline scales with BOTH width and height, so it owns the frame on any screen */ .xhero__h { margin-top: clamp(14px, 2.4vh, 26px); font-family: var(--f-display, inherit); font-weight: 600; font-size: clamp(44px, min(10.4vw, 15.5vh), 168px); line-height: .94; letter-spacing: -.055em; color: var(--text); text-wrap: balance; } .xhero__h .soft { color: rgba(var(--on, 255,255,255), .4); font-weight: 400; } .xhero__sub { margin-top: clamp(14px, 2.8vh, 28px); max-width: 46ch; font-size: clamp(16px, min(1.35vw, 2.3vh), 22px); line-height: 1.5; letter-spacing: -.012em; color: rgba(var(--on, 255,255,255), .72); text-wrap: pretty; } .xhero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(20px, 3.6vh, 36px); } .xhero__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: clamp(14px, 2.4vh, 24px); font-size: 14.5px; color: rgba(var(--on, 255,255,255), .66); } .xhero__facts li { display: inline-flex; align-items: center; gap: 8px; } .xhero__facts li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--on, 255,255,255), .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } html[data-theme="light"] .xhero__facts li::before { filter: invert(1); } .xhero__cue { position: absolute; z-index: 2; left: 50%; bottom: clamp(14px, 3vh, 28px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--on, 255,255,255), .5); text-decoration: none; } .xhero__cue i { position: relative; width: 22px; height: 36px; border-radius: 12px; border: 1.5px solid rgba(var(--on, 255,255,255), .35); } .xhero__cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: rgba(var(--on, 255,255,255), .8); animation: xcue 1.8s cubic-bezier(.6,0,.2,1) infinite; } @keyframes xcue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } } /* the product visual that follows the hero */ .xshow { position: relative; padding: clamp(40px, 8vh, 96px) clamp(20px, 4vw, 56px) clamp(64px, 10vh, 120px); } .xshow__in { width: min(1240px, 100%); margin-inline: auto; transform-origin: 50% 20%; will-change: transform; } /* short laptop screens: keep everything inside one frame */ @media (max-height: 760px) and (min-width: 761px) { .xhero__facts { display: none; } } @media (max-width: 760px) { .xhero { padding: 62px 20px 72px; min-height: 520px; } .xhero__h { font-size: clamp(40px, min(12.6vw, 8.6vh), 64px); letter-spacing: -.05em; } .xhero__sub { font-size: 16px; } .xhero__btns { width: 100%; flex-direction: column; } .xhero__btns > * { width: 100%; justify-content: center; } .xhero__facts { font-size: 13px; gap: 6px 14px; } } @media (max-width: 760px) and (max-height: 700px) { .xhero__facts { display: none; } } @media (prefers-reduced-motion: reduce) { .xhero__cue i::after { animation: none; } } /* upright tablets: lots of height, so let the headline and copy grow into it */ @media (min-width: 761px) and (max-aspect-ratio: 4/5) { .xhero__h { font-size: clamp(60px, 11.2vw, 140px); } .xhero__sub { font-size: clamp(18px, 2.5vw, 24px); } .xhero__facts { font-size: 16px; } } /* phones: the copy fills the screen, so the cue would collide — the content itself is the cue */ @media (max-width: 760px) { .xhero__cue { display: none; } } /* cursor light: a soft white pool that follows the pointer over a fine dot grid (same feel as the homepage) */ .xhero__light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(30% 34% at var(--lx, 50%) var(--ly, 40%), rgba(255,255,255,.11), rgba(255,255,255,.035) 45%, transparent 72%); } .xhero__dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.085) 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(26% 30% at var(--lx, 50%) var(--ly, 40%), #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.12) 100%); mask-image: radial-gradient(26% 30% at var(--lx, 50%) var(--ly, 40%), #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.12) 100%); } html[data-theme="light"] .xhero__light { background: radial-gradient(30% 34% at var(--lx, 50%) var(--ly, 40%), rgba(14,12,10,.07), transparent 70%); } html[data-theme="light"] .xhero__dots { background-image: radial-gradient(circle, rgba(14,12,10,.12) 1px, transparent 1.5px); } /* one hero background for every product page (the AlphaLeap look): black + the shared cursor light and dot grid only. Page-specific decorative layers are switched off. */ .xhero > .xhero__bg { display: none !important; } .xhero { background: var(--bg, #08080A); } /* ── product heroes in the homepage family (Oct 2026) ── Same headline scale, spacing and short-screen behaviour as the homepage hero (home.css .hero2 keeps its own, more specific rules). Measured reasons: at the old 140px cap the Research headline wrapped to three lines and the hero filled a 1280×600 screen with its trust line hidden; the 13px phone trust line was the smallest text in any hero. Body/paragraph sizes are unchanged. */ .xhero { height: auto; min-height: 100vh; min-height: 100svh; } .xhero__h { font-size: clamp(42px, min(7.4vw, 12.5vh), 128px); line-height: .98; } .xhero__sub { margin-top: clamp(20px, 3.4vh, 34px); } .xhero__btns { margin-top: clamp(24px, 4.2vh, 42px); } .xhero__facts { margin-top: clamp(16px, 2.8vh, 28px); font-size: 15.5px; } @media (max-height: 760px) and (min-width: 761px) { .xhero__facts { display: flex; } } @media (max-width: 760px) { .xhero__h { font-size: clamp(38px, min(11.4vw, 8vh), 60px); line-height: 1; } .xhero__facts { font-size: 15.5px; flex-direction: column; align-items: center; gap: 8px; display: flex; } .xhero__facts li { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 8px; text-align: left; } .xhero__facts li::before { margin-top: .25em; } } @media (min-width: 761px) and (max-aspect-ratio: 4/5) { .xhero__h { font-size: clamp(56px, 9.4vw, 112px); } } /* product name above the headline: a quiet label, not a boxed badge (registration details live in the footer) */ .xhero__kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--on, 255,255,255), .6); } /* Hero facts: no tick marks. Plain facts divided by thin hairlines, like a spec line. */ html body .xhero__facts { gap: 8px 0; } html body .xhero__facts li { display: inline-flex; align-items: center; gap: 0; padding: 0 clamp(14px, 1.6vw, 22px); letter-spacing: .005em; } html body .xhero__facts li + li { border-left: 1px solid rgba(var(--on, 255,255,255), .2); } html body .xhero__facts li::before { content: none; display: none; } @media (max-width: 760px) { html body .xhero__facts { gap: 0; } html body .xhero__facts li { display: block; padding: 7px 0; text-align: center; } html body .xhero__facts li + li { border-left: 0; border-top: 1px solid rgba(var(--on, 255,255,255), .14); min-width: 12ch; } }