/* =========================================================
VP+ — Design System
========================================================= */
:root {
--bg: hsl(240 20% 4%);
--bg-elev: hsl(240 15% 6%);
--card: hsl(240 15% 8%);
--card-2: hsl(240 15% 10%);
--border: hsl(240 10% 15%);
--border-soft: hsl(240 10% 12%);
--fg: hsl(0 0% 100%);
--fg-muted: hsl(240 5% 70%);
--fg-dim: hsl(240 5% 55%);
--primary: hsl(180 74% 63%); /* cyan */
--primary-2: hsl(180 74% 73%);
--mint: hsl(160 76% 56%);
--coral: hsl(0 72% 71%);
--radius-sm: .5rem;
--radius: .75rem;
--radius-lg: 1.25rem;
--radius-xl: 1.5rem;
--shadow-card: 0 1px 0 hsl(0 0% 100% / .03) inset, 0 30px 60px -30px hsl(0 0% 0% / .8);
--shadow-glow: 0 0 0 1px hsl(180 74% 63% / .35), 0 10px 40px -10px hsl(180 74% 63% / .35);
--container: 1200px;
--font-sans: 'Lufga', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* =========================================================
Reset + Base
========================================================= */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: hsl(180 74% 63% / .25); color: var(--fg); }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container { padding-inline: 2rem; } }
.plus { color: var(--primary); font-weight: 700; }
.grad {
background: linear-gradient(90deg, hsl(180 74% 63%), hsl(160 76% 56%) 60%, hsl(180 74% 73%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =========================================================
Buttons
========================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 1.1rem;
border-radius: var(--radius);
font-weight: 600;
font-size: .9rem;
letter-spacing: .01em;
border: 1px solid transparent;
transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
background: var(--primary);
color: hsl(240 20% 4%);
box-shadow: 0 0 0 1px hsl(180 74% 73% / .4) inset, 0 10px 30px -10px hsl(180 74% 63% / .55);
}
.btn--primary:hover {
background: var(--primary-2);
box-shadow: 0 0 0 1px hsl(180 74% 80%) inset, 0 16px 40px -10px hsl(180 74% 63% / .7);
}
.btn--ghost {
background: hsl(0 0% 100% / .03);
color: var(--fg);
border-color: var(--border);
}
.btn--ghost:hover {
background: hsl(0 0% 100% / .06);
border-color: hsl(240 10% 25%);
}
.btn--sm { padding: .5rem .8rem; font-size: .8rem; border-radius: .55rem; }
.btn--lg { padding: .95rem 1.4rem; font-size: 1rem; }
.btn--xl { padding: 1.15rem 1.8rem; font-size: 1.1rem; border-radius: var(--radius-lg); }
/* =========================================================
Nav — floating SaaS pill, transparent
========================================================= */
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: transparent;
}
.nav__inner {
display: flex;
align-items: center;
gap: 1rem;
height: 80px;
position: relative;
}
.nav__brand {
display: inline-flex;
align-items: center;
z-index: 2;
}
.nav__logo {
height: 26px;
width: auto;
display: block;
}
.nav__pill {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
align-items: center;
gap: .35rem;
padding: .45rem .55rem;
border-radius: 999px;
border: 1px solid hsl(0 0% 100% / .08);
background: hsl(240 15% 8% / .55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 0 0 1px hsl(0 0% 100% / .02) inset, 0 12px 30px -16px hsl(0 0% 0% / .8);
}
.nav__pill a {
padding: .45rem .85rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 500;
color: var(--fg-muted);
transition: color .2s ease, background .2s ease;
}
.nav__pill a:hover {
color: var(--fg);
background: hsl(0 0% 100% / .04);
}
@media (min-width: 980px) { .nav__pill { display: inline-flex; } }
.nav__right {
display: none;
margin-left: auto;
align-items: center;
gap: 1rem;
z-index: 2;
}
@media (min-width: 640px) { .nav__right { display: inline-flex; } }
.nav__cta {
display: inline-flex;
padding: .65rem 1.15rem;
font-size: .88rem;
}
.nav__menu {
display: inline-flex;
flex-direction: column;
gap: 4px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 9px;
margin-left: auto;
}
.nav__menu span {
width: 18px; height: 2px;
background: var(--fg-muted);
border-radius: 2px;
}
@media (min-width: 980px) { .nav__menu { display: none; } }
/* Mobile menu open */
.nav.is-open .nav__pill {
display: flex;
position: absolute;
inset: 68px 0 auto 0;
flex-direction: column;
padding: 1rem 1.25rem 1.25rem;
background: hsl(240 15% 6%);
border-radius: 0;
transform: none;
left: 0;
border-top: 1px solid var(--border);
}
/* =========================================================
Hero — viewport-locked, centered, with job card fan
========================================================= */
.hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
/* Lock hero to full viewport; nav now overlays so we pad to clear it. */
min-height: 100svh;
padding: clamp(5.5rem, 12vh, 7.5rem) 0 0;
}
/* Aurora light beam streaming down from the top */
.hero__beam {
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%) rotate(8deg);
width: 56vw;
max-width: 720px;
height: 110%;
background:
radial-gradient(ellipse at top, hsl(180 74% 63% / .55), transparent 60%),
radial-gradient(ellipse at center, hsl(160 76% 56% / .35), transparent 65%);
filter: blur(80px);
opacity: .55;
pointer-events: none;
z-index: 0;
}
.hero__bg {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
.hero__glow {
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
filter: blur(140px);
opacity: .25;
}
.hero__glow--1 {
background: radial-gradient(circle, hsl(180 74% 63% / .55), transparent 60%);
top: -240px; left: -200px;
}
.hero__glow--2 {
background: radial-gradient(circle, hsl(160 76% 56% / .5), transparent 60%);
bottom: -260px; right: -200px;
}
.hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(hsl(240 10% 22% / .8) 1px, transparent 1px),
linear-gradient(90deg, hsl(240 10% 22% / .8) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at 50% 35%, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 50% 35%, black 0%, transparent 75%);
opacity: .55;
}
.hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex: 1;
}
.hero__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(.6rem, 1.3vh, 1rem);
max-width: 1000px;
margin: 0 auto;
}
/* Trusted-by pill (replaces eyebrow) */
.trusted-pill {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .35rem .85rem .35rem .55rem;
border-radius: 999px;
border: 1px solid hsl(0 0% 100% / .08);
background: hsl(240 15% 8% / .55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: .8rem;
color: var(--fg-muted);
}
.trusted-pill strong { color: var(--fg); font-weight: 600; }
.trusted-pill .avatars { padding-left: 10px; }
.trusted-pill .avatar {
width: 24px; height: 24px;
border: 2px solid hsl(240 20% 4%);
margin-left: -10px;
border-radius: 50%;
overflow: hidden;
background: var(--card);
display: inline-block;
}
.trusted-pill .avatar:first-child { margin-left: 0; }
.trusted-pill .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__title {
margin: 0;
font-size: clamp(2.1rem, 5.4vw, 4.5rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.04;
text-wrap: balance;
color: hsl(0 0% 96%);
}
/* Glow on the gradient text — drop-shadow works through background-clip */
.grad--glow {
filter:
drop-shadow(0 0 22px hsl(180 74% 63% / .65))
drop-shadow(0 0 50px hsl(160 76% 56% / .4));
animation: glowBreathe 3.6s ease-in-out infinite;
}
@keyframes glowBreathe {
0%,100% {
filter:
drop-shadow(0 0 22px hsl(180 74% 63% / .65))
drop-shadow(0 0 50px hsl(160 76% 56% / .4));
}
50% {
filter:
drop-shadow(0 0 32px hsl(180 74% 73% / .85))
drop-shadow(0 0 70px hsl(160 76% 56% / .6));
}
}
.hero__lede {
margin: 0;
max-width: 620px;
color: var(--fg-muted);
font-size: clamp(.95rem, 1.15vw, 1.1rem);
line-height: 1.55;
}
.hero__lede strong { color: var(--fg); font-weight: 600; }
.hero__cta {
margin-top: clamp(.4rem, 1vh, .9rem);
position: relative;
}
/* Glossy gradient pill with neon halo + sheen — works at any size.
Sizing comes from .btn / .btn--xl / .nav__cta separately. */
.btn--glow {
position: relative;
isolation: isolate;
border-radius: 999px;
font-weight: 700;
letter-spacing: -.005em;
color: hsl(240 25% 6%);
background:
linear-gradient(180deg, hsl(180 80% 80%) 0%, hsl(180 74% 63%) 45%, hsl(160 76% 56%) 100%);
border: 1px solid hsl(180 74% 80% / .9);
box-shadow:
/* top inner glossy highlight */
inset 0 1px 0 hsl(0 0% 100% / .55),
/* outer halo */
0 0 0 4px hsl(180 74% 63% / .14),
0 0 38px -8px hsl(180 74% 63% / .85),
0 14px 40px -10px hsl(180 74% 63% / .55);
transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.btn--glow svg { width: 18px; height: 18px; }
/* Glossy sheen overlay */
.btn--glow::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background:
linear-gradient(180deg, hsl(0 0% 100% / .35) 0%, transparent 45%);
pointer-events: none;
z-index: -1;
}
/* Outer bloom */
.btn--glow::after {
content: "";
position: absolute;
inset: -55%;
border-radius: inherit;
background:
radial-gradient(ellipse at center, hsl(180 74% 63% / .5), transparent 55%);
filter: blur(30px);
z-index: -2;
pointer-events: none;
opacity: .9;
}
.btn--glow:hover {
transform: translateY(-1px);
filter: brightness(1.06) saturate(1.05);
}
/* Larger halo & padding for the hero-scale CTA */
.btn--glow.btn--xl {
padding: 1.15rem 2rem;
font-size: 1.05rem;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .55),
0 0 0 6px hsl(180 74% 63% / .12),
0 0 60px -10px hsl(180 74% 63% / .9),
0 22px 60px -10px hsl(180 74% 63% / .65);
}
.btn--glow.btn--xl:hover {
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .65),
0 0 0 8px hsl(180 74% 63% / .18),
0 0 80px -10px hsl(180 74% 63% / 1),
0 26px 70px -10px hsl(180 74% 63% / .8);
}
/* =========================================================
Job card fan (decorative, non-interactive)
========================================================= */
.hero__cards {
--card-w: 300px;
--card-h: 290px;
--offset-near: 195px;
--offset-far: 390px;
--rot-near: 6deg;
--rot-far: 12deg;
position: relative;
width: 100%;
height: clamp(220px, 30vh, 280px);
margin-top: clamp(2rem, 5vh, 3.5rem);
pointer-events: none;
}
.job-card {
position: absolute;
top: 0;
left: 50%;
width: var(--card-w);
height: var(--card-h);
margin: 0;
padding: 1.1rem 1.15rem 1rem;
display: flex;
flex-direction: column;
gap: .65rem;
border-radius: 1.1rem;
background:
radial-gradient(ellipse at top, hsl(180 74% 63% / .05), transparent 70%),
linear-gradient(180deg, hsl(240 15% 10%), hsl(240 15% 7%));
border: 1px solid hsl(240 10% 18%);
box-shadow:
0 0 0 1px hsl(0 0% 100% / .02) inset,
0 30px 60px -20px hsl(0 0% 0% / .8);
font-size: .78rem;
color: var(--fg-muted);
user-select: none;
will-change: transform;
}
/* Fan positions — anchored to top of container, fanning down + outward.
Each card has its own keyframe baking in rotation + position + a subtle
vertical float, so transforms compose cleanly without wrappers. */
.job-card--pos1 { animation: floatPos1 7s ease-in-out infinite; z-index: 1; opacity: .85; }
.job-card--pos2 { animation: floatPos2 6s ease-in-out infinite -1s; z-index: 2; opacity: .95; }
.job-card--pos3 { animation: floatPos3 5s ease-in-out infinite -2s; z-index: 5; }
.job-card--pos4 { animation: floatPos4 6s ease-in-out infinite -.5s; z-index: 2; opacity: .95; }
.job-card--pos5 { animation: floatPos5 7s ease-in-out infinite -1.5s; z-index: 1; opacity: .85; }
@keyframes floatPos1 {
0%,100% { transform: translate(-50%, 56px) translateX(calc(-1 * var(--offset-far))) rotate(calc(-1 * var(--rot-far))); }
50% { transform: translate(-50%, 48px) translateX(calc(-1 * var(--offset-far))) rotate(calc(-1 * var(--rot-far))); }
}
@keyframes floatPos2 {
0%,100% { transform: translate(-50%, 28px) translateX(calc(-1 * var(--offset-near))) rotate(calc(-1 * var(--rot-near))); }
50% { transform: translate(-50%, 20px) translateX(calc(-1 * var(--offset-near))) rotate(calc(-1 * var(--rot-near))); }
}
@keyframes floatPos3 {
0%,100% { transform: translate(-50%, -4px); }
50% { transform: translate(-50%, -12px); }
}
@keyframes floatPos4 {
0%,100% { transform: translate(-50%, 28px) translateX(var(--offset-near)) rotate(var(--rot-near)); }
50% { transform: translate(-50%, 20px) translateX(var(--offset-near)) rotate(var(--rot-near)); }
}
@keyframes floatPos5 {
0%,100% { transform: translate(-50%, 56px) translateX(var(--offset-far)) rotate(var(--rot-far)); }
50% { transform: translate(-50%, 48px) translateX(var(--offset-far)) rotate(var(--rot-far)); }
}
.job-card--featured {
border-color: hsl(180 74% 63% / .35);
background:
radial-gradient(ellipse at top, hsl(180 74% 63% / .14), transparent 65%),
linear-gradient(180deg, hsl(240 15% 11%), hsl(240 15% 7%));
box-shadow:
0 0 0 1px hsl(180 74% 63% / .15) inset,
0 0 60px -10px hsl(180 74% 63% / .35),
0 40px 80px -20px hsl(0 0% 0% / .8);
}
@media (prefers-reduced-motion: reduce) {
.job-card { animation: none !important; }
.job-card--pos1 { transform: translate(-50%, 56px) translateX(calc(-1 * var(--offset-far))) rotate(calc(-1 * var(--rot-far))); }
.job-card--pos2 { transform: translate(-50%, 28px) translateX(calc(-1 * var(--offset-near))) rotate(calc(-1 * var(--rot-near))); }
.job-card--pos3 { transform: translate(-50%, -4px); }
.job-card--pos4 { transform: translate(-50%, 28px) translateX(var(--offset-near)) rotate(var(--rot-near)); }
.job-card--pos5 { transform: translate(-50%, 56px) translateX(var(--offset-far)) rotate(var(--rot-far)); }
}
/* Card internals */
.job-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
}
.job-card__title-block { min-width: 0; flex: 1; }
.job-card__title {
margin: 0 0 .35rem;
font-size: 1rem;
font-weight: 700;
color: var(--fg);
letter-spacing: -.01em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.job-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem;
font-size: .72rem;
color: var(--fg-dim);
}
.job-card__avatar {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--av, var(--primary));
color: hsl(0 0% 100%);
font-size: .65rem;
font-weight: 700;
display: grid;
place-items: center;
flex-shrink: 0;
}
.job-card__dot { color: hsl(240 5% 30%); }
.job-card__bookmark {
background: transparent;
border: 0;
padding: 2px;
color: var(--fg-dim);
cursor: default;
}
.job-card__bookmark svg { width: 16px; height: 16px; }
.job-card__price-row {
display: flex;
align-items: center;
gap: .55rem;
}
.job-card__price {
color: var(--mint);
font-weight: 700;
font-size: .92rem;
letter-spacing: -.005em;
}
.job-card__price-unit {
color: var(--fg-dim);
font-weight: 500;
font-size: .8rem;
}
.chip {
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: .25rem .55rem;
border-radius: .4rem;
border: 1px solid;
}
.chip--well-paid {
color: var(--primary);
background: hsl(180 74% 63% / .1);
border-color: hsl(180 74% 63% / .4);
}
.chip--competitive {
color: hsl(280 70% 78%);
background: hsl(280 60% 60% / .12);
border-color: hsl(280 60% 60% / .4);
}
.job-card__tags {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
.tag {
font-size: .62rem;
font-weight: 700;
letter-spacing: .04em;
padding: .2rem .5rem;
border-radius: .35rem;
border: 1px solid;
white-space: nowrap;
}
.tag--cyan {
color: var(--primary);
border-color: hsl(180 74% 63% / .4);
background: hsl(180 74% 63% / .06);
text-transform: uppercase;
}
.tag--violet {
color: hsl(280 70% 78%);
border-color: hsl(280 60% 60% / .35);
background: hsl(280 60% 60% / .08);
letter-spacing: .02em;
text-transform: none;
font-weight: 600;
}
.tag--neutral {
color: var(--fg-dim);
border-color: var(--border);
background: hsl(0 0% 100% / .03);
text-transform: none;
font-weight: 500;
}
.job-card__desc {
margin: 0;
color: var(--fg-dim);
font-size: .78rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.job-card__actions {
margin-top: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: .45rem;
}
.btn--apply {
background: linear-gradient(135deg, hsl(180 74% 63%), hsl(190 80% 70%));
color: hsl(240 20% 4%);
border: 0;
font-weight: 700;
box-shadow: 0 8px 20px -8px hsl(180 74% 63% / .6);
}
.btn--apply:hover { filter: brightness(1.06); }
/* =========================================================
Hero responsive
========================================================= */
@media (max-width: 1280px) {
.hero__cards {
--card-w: 280px;
--card-h: 280px;
--offset-near: 175px;
--offset-far: 345px;
}
}
@media (max-width: 1024px) {
.hero__cards {
--card-w: 270px;
--card-h: 270px;
--offset-near: 155px;
--offset-far: 305px;
}
}
@media (max-width: 900px) {
/* Tablet — keep all 5 cards in the fan, just tighter spread
and slightly gentler tilt so they don't punch outside the
container. */
.hero__cards {
--card-w: 230px;
--card-h: 270px;
--offset-near: 95px;
--offset-far: 175px;
--rot-near: 5deg;
--rot-far: 10deg;
}
}
@media (max-width: 640px) {
/* Hero padding-top: 2rem cleared no space for the 68px sticky
nav, so the translucent nav was overlapping the trusted-pill.
Bump the top padding to a full nav-height + breathing room. */
.hero { min-height: 0; padding: 5.5rem 0 1.5rem; }
/* Phones — keep all 5 cards, tight overlapping fan that wraps
around the centre card. Far cards intentionally extend past
the viewport edge so the silhouette reads as "more cards in
the deck", not "missing assets". */
.hero__cards {
--card-w: 200px;
--card-h: 248px;
--offset-near: 56px;
--offset-far: 116px;
--rot-near: 6deg;
--rot-far: 12deg;
height: 320px;
margin-top: 1.5rem;
}
/* Make the in-card text scale down so the smaller card still
looks like a real job card, not a squished thumbnail. */
.job-card { padding: .9rem .95rem .85rem; gap: .5rem; font-size: .7rem; }
.job-card__title { font-size: .82rem; }
.job-card__meta { font-size: .62rem; }
.job-card__price { font-size: .8rem; }
.job-card__price-unit { font-size: .68rem; }
.job-card__desc { font-size: .68rem; -webkit-line-clamp: 2; }
.tag, .chip { font-size: .54rem; padding: .15rem .4rem; letter-spacing: .03em; }
.btn--apply, .job-card__actions .btn { font-size: .65rem; padding: .35rem .6rem; }
/* Trusted-by pill — was wrapping to 2 lines because 6 avatars +
the text didn't fit. Tighten the chrome, shrink the avatars,
and hide the last two so the pill reads as a single-line
trust signal on phones. */
.trusted-pill {
font-size: .72rem;
padding: .3rem .7rem .3rem .45rem;
gap: .55rem;
max-width: calc(100vw - 2rem);
}
.trusted-pill .avatars { padding-left: 8px; }
.trusted-pill .avatar {
width: 22px;
height: 22px;
border-width: 1.5px;
margin-left: -8px;
}
/* All 6 avatars stay visible on mobile — tightened sizing
above means they fit on one line at 320px+. */
/* Title — was wrapping the second sentence ("We Bring Clients
To You.") onto a third line. Aggressive size cap so the full
sentence stays on one line at every common phone width
(320px / 375px / 390px / 414px). */
.hero__title {
font-size: clamp(1.3rem, 5.8vw, 1.75rem);
line-height: 1.08;
letter-spacing: -.03em;
}
/* Lede sits cleaner at a slightly smaller body size on phones. */
.hero__lede { font-size: .92rem; max-width: 92vw; }
/* CTA halo — desktop's wide cyan bloom (`::after { inset: -55% }`)
overshoots the viewport on phones. Pull the bloom in tight,
drop the outer ring spread, and slim the button padding. */
.btn--glow.btn--xl {
padding: .95rem 1.6rem;
font-size: .98rem;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .55),
0 0 0 4px hsl(180 74% 63% / .12),
0 0 40px -8px hsl(180 74% 63% / .85),
0 14px 36px -10px hsl(180 74% 63% / .55);
}
.btn--glow.btn--xl::after {
inset: -25%;
opacity: .7;
filter: blur(22px);
}
}
/* =========================================================
Setup Profile section — hero-echo composition with a row of
5 editor profile cards, each floating with stagger. Adds a
glowing earnings pill above the title and floating earnings
badges on three of the cards as the section's unique flare.
========================================================= */
.profile-setup {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(5rem, 10vh, 7.5rem);
background: linear-gradient(
180deg,
hsl(240 20% 4%) 0%,
hsl(240 18% 5%) 50%,
hsl(240 20% 4%) 100%
);
}
/* Bottom seam — soft teal hairline so the section ends on a clean
gradient line into whatever comes next (same treatment as the
marketplace showcase). */
.profile-setup::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(180 74% 63% / .35) 50%, transparent);
opacity: .6;
z-index: 3;
}
.profile-setup__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.profile-setup__beam {
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%) rotate(-5deg);
width: 48vw;
max-width: 640px;
height: 90%;
background:
radial-gradient(ellipse at top, hsl(160 76% 56% / .55), transparent 60%),
radial-gradient(ellipse at center, hsl(180 74% 63% / .35), transparent 65%);
filter: blur(90px);
opacity: .5;
}
.profile-setup__glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
filter: blur(130px);
opacity: .22;
}
.profile-setup__glow--1 {
background: radial-gradient(circle, hsl(180 74% 63% / .55), transparent 60%);
top: 8%;
left: -200px;
}
.profile-setup__glow--2 {
background: radial-gradient(circle, hsl(160 76% 56% / .5), transparent 60%);
bottom: -180px;
right: -180px;
}
.profile-setup__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(hsl(240 10% 22% / .7) 1px, transparent 1px),
linear-gradient(90deg, hsl(240 10% 22% / .7) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
opacity: .4;
}
.profile-setup__spark {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: .65;
}
.profile-setup__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.profile-setup__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
max-width: 880px;
margin: 0 auto 3.5rem;
}
/* Earnings pill — green-leaning to read as "money" without
stealing the title's cyan glow */
.profile-setup__pill {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .42rem .9rem;
border-radius: 999px;
border: 1px solid hsl(160 70% 60% / .3);
background: hsl(160 60% 30% / .12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: .8rem;
color: var(--fg-muted);
letter-spacing: .01em;
}
.profile-setup__pill strong { color: var(--fg); font-weight: 700; }
.profile-setup__pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: hsl(160 76% 56%);
box-shadow:
0 0 12px hsl(160 76% 56% / .9),
0 0 0 4px hsl(160 76% 56% / .15);
animation: profilePillPulse 2.4s ease-in-out infinite;
}
@keyframes profilePillPulse {
0%, 100% { box-shadow: 0 0 12px hsl(160 76% 56% / .9), 0 0 0 4px hsl(160 76% 56% / .15); }
50% { box-shadow: 0 0 18px hsl(160 76% 56% / 1), 0 0 0 6px hsl(160 76% 56% / .25); }
}
.profile-setup__title {
margin: 0;
font-size: clamp(2rem, 4.6vw, 3.8rem);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.04;
text-wrap: balance;
color: hsl(0 0% 96%);
}
.profile-setup__lede {
margin: 0;
max-width: 600px;
color: var(--fg-muted);
font-size: clamp(.95rem, 1.1vw, 1.05rem);
line-height: 1.55;
}
.profile-setup__lede em { color: var(--fg); font-style: normal; font-weight: 600; }
.profile-setup__cta {
margin-top: .6rem;
}
/* Five-card fan, same pattern as the hero job-card fan: each card
absolutely positioned at top:0 left:50%, with a per-position
keyframe that bakes in translateX (left/right offset from center),
vertical Y offset, and rotation — so a single transform composes
cleanly without wrappers. Center is frontmost (Profile_1), the
pair next to it ride near, and the outer pair sit far + faded. */
.profile-setup__cards {
--pcard-w: clamp(150px, 17vw, 220px);
--pnear-x: clamp(110px, 13vw, 175px);
--pfar-x: clamp(215px, 26vw, 345px);
--pnear-rot: 6deg;
--pfar-rot: 12deg;
position: relative;
width: 100%;
height: clamp(320px, 38vh, 400px);
max-width: 1180px;
margin: 0 auto;
pointer-events: none;
}
.profile-pic {
position: absolute;
top: 0;
left: 50%;
width: var(--pcard-w);
margin: 0;
border-radius: 1.1rem;
border: 1px solid hsl(180 60% 70% / .18);
box-shadow:
0 30px 80px -20px hsl(0 0% 0% / .7),
0 0 60px -10px hsl(180 70% 50% / .25),
inset 0 1px 0 hsl(180 80% 90% / .18);
will-change: transform;
}
.profile-pic img {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
}
/* Per-card animation + z-index + opacity. Outer cards step back. */
.profile-pic--pos1 { animation: profileFloatPos1 7s ease-in-out infinite; z-index: 1; opacity: .82; }
.profile-pic--pos2 { animation: profileFloatPos2 6s ease-in-out infinite -1s; z-index: 2; opacity: .94; }
.profile-pic--pos3 { animation: profileFloatPos3 5.5s ease-in-out infinite -2s; z-index: 5; }
.profile-pic--pos4 { animation: profileFloatPos4 6s ease-in-out infinite -.5s; z-index: 2; opacity: .94; }
.profile-pic--pos5 { animation: profileFloatPos5 7s ease-in-out infinite -1.5s; z-index: 1; opacity: .82; }
@keyframes profileFloatPos1 {
0%,100% { transform: translate(-50%, -6px) translateX(calc(-1 * var(--pfar-x))) rotate(calc(-1 * var(--pfar-rot))); }
50% { transform: translate(-50%, -14px) translateX(calc(-1 * var(--pfar-x))) rotate(calc(-1 * var(--pfar-rot))); }
}
@keyframes profileFloatPos2 {
0%,100% { transform: translate(-50%, 30px) translateX(calc(-1 * var(--pnear-x))) rotate(calc(-1 * var(--pnear-rot))); }
50% { transform: translate(-50%, 22px) translateX(calc(-1 * var(--pnear-x))) rotate(calc(-1 * var(--pnear-rot))); }
}
@keyframes profileFloatPos3 {
0%,100% { transform: translate(-50%, 60px); }
50% { transform: translate(-50%, 50px); }
}
@keyframes profileFloatPos4 {
0%,100% { transform: translate(-50%, 30px) translateX(var(--pnear-x)) rotate(var(--pnear-rot)); }
50% { transform: translate(-50%, 22px) translateX(var(--pnear-x)) rotate(var(--pnear-rot)); }
}
@keyframes profileFloatPos5 {
0%,100% { transform: translate(-50%, -6px) translateX(var(--pfar-x)) rotate(var(--pfar-rot)); }
50% { transform: translate(-50%, -14px) translateX(var(--pfar-x)) rotate(var(--pfar-rot)); }
}
/* Featured center card — extra glow to draw the eye, matching the
hero's job-card--featured treatment. */
.profile-pic--featured {
border-color: hsl(180 74% 63% / .4);
box-shadow:
0 40px 100px -20px hsl(0 0% 0% / .8),
0 0 80px -10px hsl(180 80% 55% / .5),
0 0 120px -20px hsl(180 70% 50% / .3),
inset 0 1px 0 hsl(180 90% 95% / .22);
}
/* Floating earnings badge — the section's unique flare. Picks up
the same glossy gradient as .btn--glow but at pill scale. */
@media (prefers-reduced-motion: reduce) {
.profile-pic,
.profile-setup__pill-dot { animation: none !important; }
/* Lock cards to their resting frame so they don't snap to top:0/left:50% */
.profile-pic--pos1 { transform: translate(-50%, -6px) translateX(calc(-1 * var(--pfar-x))) rotate(calc(-1 * var(--pfar-rot))); }
.profile-pic--pos2 { transform: translate(-50%, 30px) translateX(calc(-1 * var(--pnear-x))) rotate(calc(-1 * var(--pnear-rot))); }
.profile-pic--pos3 { transform: translate(-50%, 60px); }
.profile-pic--pos4 { transform: translate(-50%, 30px) translateX(var(--pnear-x)) rotate(var(--pnear-rot)); }
.profile-pic--pos5 { transform: translate(-50%, -6px) translateX(var(--pfar-x)) rotate(var(--pfar-rot)); }
}
/* Tablet — shrink the fan's spread + tilt so 5 cards still fit. */
@media (max-width: 960px) {
.profile-setup__cards {
--pnear-x: 110px;
--pfar-x: 215px;
--pnear-rot: 4deg;
--pfar-rot: 8deg;
height: clamp(280px, 34vh, 340px);
}
}
/* Mobile — keep the fan, just compress the spread + rotation so
all 5 cards live inside the viewport. Far cards intentionally
extend a few px past the safe area for that "more cards behind"
silhouette (same trick as the hero job-card fan on phones). */
@media (max-width: 640px) {
.profile-setup__content { margin-bottom: 1.75rem; }
.profile-setup__cards {
--pcard-w: clamp(120px, 36vw, 150px);
--pnear-x: 50px;
--pfar-x: 105px;
--pnear-rot: 6deg;
--pfar-rot: 11deg;
height: clamp(240px, 50vh, 290px);
}
}
/* =========================================================
Marketplace showcase — screenshot under a soft cyan spotlight
Pure radial gradients (no linear strips) so edges feather
naturally; one crisp hairline on top.
========================================================= */
.showcase {
padding-top: clamp(4rem, 8vh, 6rem);
overflow: hidden;
position: relative;
isolation: isolate;
}
/* Bottom divider — matches the .stats section's gradient hairline so the
atmospheric beam ends on a clean section seam instead of a hard cut. */
.showcase::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(180 74% 63% / .35) 50%, transparent);
opacity: .6;
z-index: 1;
}
.showcase__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.showcase .section__title { text-transform: none; letter-spacing: -.025em; }
/* Atmosphere: one diagonal teal light leak + sparse dust particles, both
behind everything in the section. isolation:isolate on .showcase keeps
the negative z-index from escaping the stacking context. */
.showcase__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.showcase__beam {
position: absolute;
top: 38%;
left: 58%;
width: 280px;
height: 1500px;
transform: translate(-50%, -50%) rotate(-17deg);
background: linear-gradient(to bottom,
transparent 0%,
hsl(180 74% 63% / .18) 50%,
transparent 100%);
filter: blur(80px);
z-index: -2;
}
.showcase__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase__frame {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.showcase__img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
border-radius: clamp(.75rem, 1.2vw, 1.1rem);
/* Subtle card edge — just enough to define the panel against the
atmosphere, not a glow line. */
border: 1px solid hsl(180 74% 63% / .15);
border-top-color: hsl(0 0% 100% / .06);
box-shadow:
0 50px 100px -20px hsl(0 0% 0% / .9);
}
/* Floating decorative cards over the marketplace screenshot — small
status card at the top-left, version history at the bottom-right,
each extending slightly past the screenshot for an off-the-page
feel. Subtle independent float keeps the composition alive without
pulling focus from the main screenshot. */
.showcase__card {
position: absolute;
display: block;
width: 26%;
max-width: 320px;
height: auto;
border-radius: 1rem;
border: 1px solid hsl(180 60% 70% / .18);
box-shadow:
0 30px 70px -18px hsl(0 0% 0% / .75),
0 0 60px -12px hsl(180 80% 55% / .35),
inset 0 1px 0 hsl(180 90% 95% / .2),
inset 0 22px 26px -20px hsl(180 75% 65% / .14),
inset 0 -22px 26px -20px hsl(180 70% 60% / .08);
z-index: 2;
pointer-events: none;
}
.showcase__card--left {
top: -14%;
left: -3%;
width: 31.2%;
max-width: 384px;
transform: rotate(-5deg);
transform-origin: bottom right;
animation: showcaseCardLeftFloat 7s ease-in-out infinite;
}
.showcase__card--right {
bottom: -8%;
right: -3%;
transform: rotate(5deg);
transform-origin: top left;
animation: showcaseCardRightFloat 7s ease-in-out infinite -2.5s;
}
@keyframes showcaseCardLeftFloat {
0%, 100% { transform: translateY(0) rotate(-5deg); }
50% { transform: translateY(-8px) rotate(-5deg); }
}
@keyframes showcaseCardRightFloat {
0%, 100% { transform: translateY(0) rotate(5deg); }
50% { transform: translateY(8px) rotate(5deg); }
}
@media (max-width: 880px) {
.showcase__card { width: 30%; }
.showcase__card--left { top: -11%; left: -2%; width: 36%; }
.showcase__card--right { bottom: -6%; right: -2%; }
}
@media (max-width: 560px) {
/* Phones — keep the floating side cards (they're a big part of
the desktop wow factor), just at a tighter scale and tucked
so they don't hide critical screenshot content. */
.showcase__card { width: 26%; }
.showcase__card--left { top: -8%; left: -5%; width: 30%; }
.showcase__card--right { bottom: -5%; right: -4%; }
}
@media (prefers-reduced-motion: reduce) {
.showcase__card { animation: none !important; }
}
/* Standalone VSL section (was inline in hero) */
/* VSL section — "stage spotlight" composition. Light descends from
the top of the section in a soft cone, pools beneath the video,
and the video sits in the brightest part of the lit area. Pure
atmospheric layers + tighter video frame glow. */
.section.vsl-section {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(5rem, 9vh, 7rem) 0 clamp(6rem, 11vh, 8rem);
background: radial-gradient(ellipse 80% 100% at 50% 100%,
hsl(240 22% 5%) 0%,
hsl(240 22% 4%) 60%,
hsl(240 20% 3%) 100%);
}
.vsl-section__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* Whisper-faint hex pattern behind everything else — adds the
blueprint / tech texture detail without competing with the
lights. Masked centre-out so it fades to nothing at the edges. */
.vsl-section__hex {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 56px 97px;
background-repeat: repeat;
opacity: .06;
mask-image: radial-gradient(ellipse 70% 80% at 50% 55%,
black 0%,
rgba(0,0,0,.5) 45%,
transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 55%,
black 0%,
rgba(0,0,0,.5) 45%,
transparent 80%);
}
/* Two near-vertical columns of light rising from below the section.
The previous 20° splay read as showroom theatrics; pulling the
angle to 8° and the origin off-screen below the frame is closer
to the "architectural uplight" feel of the Plan & Pricing
reference. Each column = wide diffuse beam + tighter inner core,
with a visible bright "source" glow at its base (see
.vsl-section__source--left/--right below) to anchor where the
light is coming from — that's the detail that turns it from
gradient wash into a defined fixture. */
.vsl-section__ray {
position: absolute;
bottom: -18%;
width: clamp(300px, 36vw, 560px);
height: 140%;
transform-origin: bottom center;
pointer-events: none;
background: linear-gradient(to top,
hsl(180 80% 55% / .22) 0%,
hsl(180 75% 50% / .12) 25%,
hsl(180 70% 45% / .05) 50%,
hsl(180 65% 42% / .02) 70%,
transparent 88%);
filter: blur(85px);
}
.vsl-section__ray--left { left: -8%; transform: rotate(8deg); }
.vsl-section__ray--right { right: -8%; transform: rotate(-8deg); }
/* Inner core — narrower, slightly brighter; no blend-mode so it
doesn't wash on top of the wide beam. */
.vsl-section__ray--left-core,
.vsl-section__ray--right-core {
width: clamp(130px, 15vw, 260px);
height: 140%;
background: linear-gradient(to top,
hsl(180 90% 70% / .32) 0%,
hsl(180 85% 60% / .16) 22%,
hsl(180 80% 55% / .06) 48%,
transparent 78%);
filter: blur(40px);
}
.vsl-section__ray--left-core { left: 6%; transform: rotate(8deg); }
.vsl-section__ray--right-core { right: 6%; transform: rotate(-8deg); }
/* Source — small bright origin glow at the base of each ray
column so the light reads as coming from a defined fixture
below the section, the way reference 2's spotlight has a
visible bulb point. */
.vsl-section__source {
position: absolute;
bottom: -3%;
width: clamp(160px, 18vw, 300px);
height: clamp(80px, 9vh, 160px);
pointer-events: none;
background: radial-gradient(ellipse 80% 100% at 50% 100%,
hsl(180 100% 82% / .45) 0%,
hsl(180 90% 65% / .2) 25%,
hsl(180 80% 55% / .08) 55%,
transparent 85%);
filter: blur(35px);
}
.vsl-section__source--left { left: 10%; }
.vsl-section__source--right { right: 10%; }
/* Floor pool — soft connective haze between the two source glows,
keeping the centre under the video lit without competing with
the bright source points. */
.vsl-section__pool {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: clamp(700px, 75vw, 1200px);
height: 35%;
background: radial-gradient(ellipse 65% 100% at 50% 100%,
hsl(180 85% 60% / .16) 0%,
hsl(180 75% 50% / .07) 35%,
hsl(180 70% 45% / .02) 60%,
transparent 85%);
filter: blur(60px);
}
/* Bottom seam — big glowing separator into the next section
(same treatment as the .platform bottom seam). */
.vsl-section::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
hsl(180 80% 70% / .35) 18%,
hsl(180 88% 78% / .85) 50%,
hsl(180 80% 70% / .35) 82%,
transparent 100%);
box-shadow:
0 0 24px hsl(180 80% 65% / .5),
0 0 60px hsl(180 70% 55% / .28),
0 0 120px hsl(180 60% 50% / .15);
z-index: 10;
pointer-events: none;
}
/* Dust particles drifting in the beam. */
.vsl-section__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Title in title case (override global section__title uppercase)
for a more "founder talking to you" tone than a shouted header. */
.vsl-section__head {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 880px;
margin: 0 auto clamp(2.75rem, 5vh, 4rem);
}
.vsl-section .section__title {
text-transform: none;
letter-spacing: -.025em;
font-weight: 700;
}
.vsl-section .section__lede { max-width: 600px; margin-top: .25rem; }
/* Video frame — sits in the brightest part of the spotlight, gets
the wow-factor glow. Stronger teal border, glassy top hairline,
deep drop, layered cyan halos. */
.vsl-section .vsl {
max-width: 880px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* CTA centred under the video frame. */
.vsl__cta {
position: relative;
z-index: 2;
margin-top: clamp(2rem, 4vh, 2.75rem);
display: flex;
justify-content: center;
}
.vsl {
position: relative;
border-radius: var(--radius-lg);
border: 1px solid hsl(180 74% 63% / .4);
background: linear-gradient(180deg, hsl(180 74% 63% / .08), hsl(240 15% 8% / .7));
box-shadow:
inset 0 1px 0 hsl(180 90% 90% / .18),
inset 0 0 0 1px hsl(180 74% 63% / .14),
0 40px 100px -25px hsl(0 0% 0% / .85),
0 0 80px -10px hsl(180 75% 55% / .4),
0 0 180px -30px hsl(180 70% 50% / .3);
overflow: hidden;
}
.vsl__header {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .85rem 1rem;
color: var(--primary);
font-weight: 700;
font-size: clamp(.8rem, 1vw, .95rem);
letter-spacing: .14em;
text-transform: uppercase;
background: linear-gradient(180deg, hsl(180 74% 63% / .12), transparent);
border-bottom: 1px solid hsl(180 74% 63% / .15);
}
.vsl__header svg { width: 18px; height: 18px; }
.vsl__frame {
position: relative;
aspect-ratio: 16 / 9;
background: hsl(240 20% 3%);
}
.vsl__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================================
Stats strip — solid, borderless, flows out of the hero
========================================================= */
.stats {
position: relative;
padding: clamp(2.5rem, 7vh, 4.5rem) 0;
background-color: var(--bg);
/* faint cyan halo bleeding down from the hero edge */
background-image:
radial-gradient(ellipse 80% 110% at 50% -20%, hsl(180 74% 63% / .14), transparent 60%);
overflow: hidden;
}
.stats::before,
.stats::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(180 74% 63% / .35) 50%, transparent);
opacity: .6;
}
.stats::before { top: 0; }
.stats::after { bottom: 0; }
/* Soft beam that continues the hero's aurora into this strip */
.stats__beam {
position: absolute;
top: -40%;
left: 50%;
width: 70%;
height: 200%;
transform: translateX(-50%);
background:
radial-gradient(ellipse at top, hsl(160 76% 56% / .18), transparent 55%),
radial-gradient(ellipse at top, hsl(180 74% 63% / .22), transparent 50%);
filter: blur(60px);
pointer-events: none;
opacity: .8;
}
.stats__grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem 0;
align-items: center;
}
@media (min-width: 768px) {
.stats__grid { grid-template-columns: repeat(3, 1fr); }
}
.stat {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: .5rem 1.25rem;
border: 0;
background: none;
box-shadow: none;
}
/* Hairline vertical dividers between stats — fade to transparent at ends */
@media (min-width: 768px) {
.stat + .stat::before {
content: "";
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent, hsl(180 74% 63% / .35) 50%, transparent);
}
}
.stat__icon {
flex-shrink: 0;
display: inline-grid;
place-items: center;
width: 38px; height: 38px;
color: hsl(180 74% 73%);
filter: drop-shadow(0 0 18px hsl(180 74% 63% / .55));
}
.stat__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.stat__body {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1.1;
}
.stat__num {
font-size: clamp(1.7rem, 3.2vw, 2.6rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.02;
background: linear-gradient(180deg, hsl(180 80% 88%) 0%, hsl(160 76% 56%) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 24px hsl(180 74% 63% / .35));
}
.stat__num .plus {
background: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
}
.stat__label {
margin-top: .25rem;
color: var(--fg-dim);
font-size: .82rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
/* =========================================================
Section primitives
========================================================= */
.section { padding: 5rem 0; }
@media (min-width: 768px) { .section { padding: 7rem 0; } }
@media (max-width: 640px) {
/* Tighter vertical rhythm on phones so the page doesn't feel
like a stack of disconnected blocks. */
.section { padding: 3.5rem 0; }
}
/* Stats — tight stacked layout with hairline dividers between
each stat, so 3 numbers don't sprawl across a full screen
height on phones. */
@media (max-width: 640px) {
.stats { padding: 2.25rem 0 2.75rem; }
.stats__grid {
gap: 0;
max-width: 360px;
margin: 0 auto;
}
.stat {
padding: 1rem .75rem;
gap: .9rem;
position: relative;
}
/* Horizontal cyan hairline between stats — fades at the ends so
it sits in the section atmosphere, not as a hard rule. */
.stat + .stat::before {
content: "";
position: absolute;
top: 0;
left: 18%;
right: 18%;
height: 1px;
background: linear-gradient(90deg,
transparent,
hsl(180 74% 63% / .35) 50%,
transparent);
}
.stat__icon {
width: 32px;
height: 32px;
}
.stat__num {
font-size: 1.6rem;
letter-spacing: -.035em;
}
.stat__label {
font-size: .78rem;
margin-top: .08rem;
}
}
.section__head {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
display: flex;
flex-direction: column;
gap: .9rem;
}
.kicker {
align-self: center;
font-size: .75rem;
font-weight: 700;
letter-spacing: .22em;
color: var(--primary);
text-transform: uppercase;
padding: .35rem .7rem;
border: 1px solid hsl(180 74% 63% / .35);
background: hsl(180 74% 63% / .08);
border-radius: 999px;
}
.section__title {
margin: 0;
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.05;
text-transform: uppercase;
}
.section__lede {
margin: 0;
color: var(--fg-muted);
font-size: 1.05rem;
}
.card {
position: relative;
background: linear-gradient(180deg, var(--card-2), var(--card));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.badge {
display: inline-block;
padding: .3rem .7rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.badge--coral { background: hsl(0 72% 71% / .12); color: var(--coral); border: 1px solid hsl(0 72% 71% / .35); }
.badge--mint { background: hsl(160 76% 56% / .12); color: var(--mint); border: 1px solid hsl(160 76% 56% / .35); }
/* =========================================================
Success Stories — testimonial carousel
========================================================= */
.stories {
position: relative;
isolation: isolate;
overflow: hidden;
/* Trim bottom padding — the carousel ends ~halfway through the
section's default .section padding, so the prev/next nav was
sitting in a sea of black before the next section started. */
padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
.stories { padding-bottom: 4rem; }
}
/* Avatar strip */
.stories__avatars {
display: flex;
justify-content: center;
align-items: center;
gap: .85rem;
margin: clamp(1.25rem, 3vh, 2rem) 0 clamp(2rem, 5vh, 3rem);
flex-wrap: nowrap;
}
.stories__avatar {
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid hsl(0 0% 100% / .08);
border-radius: 50%;
background: transparent;
cursor: pointer;
opacity: .35;
filter: grayscale(.4);
overflow: hidden;
flex-shrink: 0;
transition: width .4s ease, height .4s ease, opacity .4s ease,
border-color .4s ease, box-shadow .4s ease, filter .4s ease;
}
.stories__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stories__avatar[data-pos="active"] {
width: 84px; height: 84px;
opacity: 1;
filter: none;
border-color: hsl(180 74% 63% / .85);
box-shadow: 0 0 0 4px hsl(180 74% 63% / .12), 0 0 28px hsl(180 74% 63% / .35);
}
.stories__avatar[data-pos="near"] {
width: 58px; height: 58px;
opacity: .85;
filter: grayscale(.15);
}
.stories__avatar[data-pos="mid"] {
width: 50px; height: 50px;
opacity: .55;
}
/* Carousel */
.stories__carousel {
position: relative;
height: clamp(340px, 42vh, 400px);
margin-bottom: clamp(.75rem, 1.5vh, 1.25rem);
perspective: 1400px;
}
.stories__card {
position: absolute;
top: 0;
left: 50%;
width: min(640px, 92%);
padding: clamp(1.5rem, 2.5vw, 2rem);
border: 1px solid hsl(0 0% 100% / .08);
border-radius: clamp(1rem, 1.4vw, 1.4rem);
background: linear-gradient(180deg, hsl(240 18% 11% / .9), hsl(240 20% 7% / .92));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform: translateX(-50%) scale(.78);
opacity: 0;
pointer-events: none;
transition: transform .55s cubic-bezier(.2,.7,.2,1),
opacity .45s ease,
border-color .45s ease,
box-shadow .45s ease;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.stories__card[data-pos="active"] {
transform: translateX(calc(-50% + var(--drag, 0px))) scale(1);
opacity: 1;
pointer-events: auto;
z-index: 3;
border-color: hsl(180 74% 63% / .55);
box-shadow:
0 0 0 1px hsl(180 74% 63% / .25),
0 30px 70px -20px hsl(0 0% 0% / .8),
0 0 80px -20px hsl(180 74% 63% / .35);
}
.stories__card[data-pos="prev"] {
transform: translateX(calc(-50% - clamp(290px, 30vw, 360px) + var(--drag, 0px))) scale(.86);
opacity: .35;
z-index: 2;
}
.stories__card[data-pos="next"] {
transform: translateX(calc(-50% + clamp(290px, 30vw, 360px) + var(--drag, 0px))) scale(.86);
opacity: .35;
z-index: 2;
}
/* While the user is actively dragging, kill the card transition so
the rail tracks the finger 1:1. The transition pops back on release
so the snap glide looks intentional. */
.stories__carousel.is-dragging .stories__card { transition: none; }
.stories__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.stories__chip {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .4rem .8rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-muted);
background: hsl(240 18% 10% / .8);
border: 1px solid hsl(0 0% 100% / .08);
}
.stories__chip svg { width: 12px; height: 12px; opacity: .8; }
.stories__person { display: flex; align-items: center; gap: .7rem; }
.stories__person-avatar {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid hsl(0 0% 100% / .12);
}
.stories__person-name { margin: 0; font-weight: 700; font-size: .98rem; letter-spacing: -.005em; }
.stories__person-title { margin: 0; font-size: .82rem; color: var(--fg-muted); }
.stories__rating { display: flex; align-items: center; gap: .55rem; }
.stories__stars {
font-size: 1.05rem;
letter-spacing: .15em;
background: linear-gradient(180deg, hsl(180 90% 80%), hsl(180 74% 55%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 14px hsl(180 74% 63% / .35);
}
.stories__rating-num { font-weight: 700; color: var(--fg); }
.stories__quote {
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.08rem);
line-height: 1.55;
color: var(--fg);
font-weight: 500;
}
.stories__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.stories__tag {
padding: .4rem .75rem;
border-radius: 999px;
font-size: .8rem;
color: var(--fg-muted);
background: hsl(240 18% 10% / .7);
border: 1px solid hsl(0 0% 100% / .07);
}
/* Nav buttons */
.stories__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.stories__nav-btn {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid hsl(0 0% 100% / .12);
background: hsl(240 18% 9% / .8);
color: var(--fg);
cursor: pointer;
display: grid;
place-items: center;
transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.stories__nav-btn:hover {
border-color: hsl(180 74% 63% / .5);
background: hsl(180 74% 63% / .08);
color: hsl(180 74% 80%);
box-shadow: 0 0 24px -6px hsl(180 74% 63% / .4);
}
.stories__nav-btn:active { transform: scale(.96); }
.stories__nav-btn svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
.stories__card, .stories__avatar, .stories__nav-btn { transition: none; }
}
/* =========================================================
Pricing — rising celestial sphere + god-rays + glass cards
========================================================= */
.pricing {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: 4rem;
padding-bottom: 8rem;
}
/* Bottom seam — paired with the .showcase hairline so every section
ends on a horizon line. The sphere's halo would swallow a plain
1px line, so this is two parts:
::before — a tall fade band that drops the sphere's bottom glow
into near-pure-black, giving the sphere a horizon to
set into instead of clipping mid-glow.
::after — a brighter, thicker gradient hairline with a soft
glow so it reads against the now-darkened backdrop. */
.pricing::before {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 220px;
background: linear-gradient(180deg,
transparent 0%,
hsl(240 30% 5% / .35) 35%,
hsl(240 30% 5% / .85) 75%,
hsl(240 30% 5%) 100%);
pointer-events: none;
z-index: 0;
}
.pricing::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
hsl(180 80% 70% / .7) 50%,
transparent);
box-shadow: 0 0 16px hsl(180 80% 70% / .4);
z-index: 3;
}
.pricing__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* The Sphere — large glowing teal planet rising from behind/below the
cards, only the top ~500px peeks up between/behind them. */
.pricing__sphere {
position: absolute;
bottom: -900px;
left: 50%;
transform: translateX(-50%);
width: 1400px;
height: 1400px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
hsl(180 95% 88%) 0%,
hsl(180 90% 75%) 8%,
hsl(180 85% 55% / .85) 18%,
hsl(180 80% 40% / .5) 35%,
hsl(180 70% 25% / .15) 60%,
transparent 75%);
filter: blur(2px);
box-shadow:
0 0 80px 10px hsl(180 95% 80% / .4),
0 0 160px 30px hsl(180 85% 60% / .25),
inset 0 8px 40px hsl(180 100% 95% / .6);
}
/* The Light Rays — 6 soft, irregularly-spaced beams as stacked radials. */
.pricing__rays {
position: absolute;
bottom: 380px;
left: 50%;
transform: translateX(-50%);
width: 1400px;
height: 800px;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 60px 600px at 20% 100%, hsl(180 90% 80% / .18) 0%, transparent 70%),
radial-gradient(ellipse 40px 500px at 32% 100%, hsl(180 85% 75% / .12) 0%, transparent 70%),
radial-gradient(ellipse 80px 700px at 45% 100%, hsl(180 90% 80% / .22) 0%, transparent 70%),
radial-gradient(ellipse 50px 550px at 58% 100%, hsl(180 85% 75% / .14) 0%, transparent 70%),
radial-gradient(ellipse 70px 650px at 72% 100%, hsl(180 90% 80% / .2) 0%, transparent 70%),
radial-gradient(ellipse 45px 500px at 84% 100%, hsl(180 85% 75% / .12) 0%, transparent 70%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 80%, transparent 100%);
filter: blur(8px);
mix-blend-mode: screen;
opacity: .85;
}
.pricing__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.pricing__plans {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
padding-top: 2rem;
align-items: start;
}
@media (min-width: 820px) {
.pricing__plans {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
.pricing__plan {
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 1.85rem 1.85rem;
border-radius: 1.5rem;
border: 1px solid hsl(180 30% 70% / .12);
background: linear-gradient(180deg,
hsl(240 25% 10% / .55) 0%,
hsl(240 30% 5% / .75) 100%);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow:
0 1px 0 hsl(180 60% 90% / .08) inset,
0 20px 60px -20px hsl(0 0% 0% / .6),
0 0 0 1px hsl(0 0% 0% / .3);
}
/* Inner top glow on every card. Clipped to the card's rounded corners. */
.pricing__plan::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 220px;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
background: radial-gradient(ellipse at 50% 0%,
hsl(180 85% 70% / .12) 0%,
transparent 70%);
pointer-events: none;
}
.pricing__plan > * { position: relative; z-index: 1; }
/* Featured card — lifted, stronger glow, gradient border. */
.pricing__plan--featured {
transform: translateY(-12px);
box-shadow:
0 1px 0 hsl(180 80% 90% / .15) inset,
0 30px 80px -20px hsl(180 80% 50% / .35),
0 0 60px -10px hsl(180 70% 50% / .25),
0 0 0 1px hsl(0 0% 0% / .3);
}
.pricing__plan--featured::before {
background: radial-gradient(ellipse at 70% 0%,
hsl(180 90% 75% / .28) 0%,
hsl(180 80% 60% / .1) 40%,
transparent 70%);
}
.pricing__plan--featured::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(180deg,
hsl(180 100% 88%) 0%,
hsl(180 90% 70% / .8) 20%,
hsl(180 70% 50% / .4) 60%,
hsl(180 50% 35% / .2) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (max-width: 819px) {
.pricing__plan--featured { transform: none; }
}
.pricing__badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
padding: .4rem 1rem;
border-radius: 999px;
background: linear-gradient(180deg, hsl(180 92% 78%), hsl(180 78% 52%));
color: hsl(240 28% 8%);
font-weight: 900;
font-size: .68rem;
letter-spacing: .2em;
white-space: nowrap;
z-index: 3;
box-shadow:
0 6px 18px hsl(180 74% 63% / .45),
0 0 0 4px hsl(240 30% 5%);
}
.pricing__head { display: flex; flex-direction: column; gap: .35rem; }
.pricing__name {
margin: 0;
font-size: .82rem;
font-weight: 800;
letter-spacing: .22em;
color: var(--fg-muted);
}
.pricing__price {
display: flex;
align-items: baseline;
gap: .5rem;
flex-wrap: wrap;
margin-top: .15rem;
}
.pricing__price-old {
font-size: 1.2rem;
font-weight: 700;
color: hsl(0 0% 42%);
text-decoration: line-through;
text-decoration-thickness: 2.5px;
}
.pricing__save {
display: inline-block;
vertical-align: middle;
margin-left: .5rem;
padding: .25rem .55rem;
border-radius: 999px;
background: hsl(180 74% 63% / .18);
color: var(--primary);
border: 1px solid hsl(180 74% 63% / .4);
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.pricing__price-new {
font-size: clamp(2.8rem, 5vw, 3.4rem);
font-weight: 900;
letter-spacing: -.025em;
line-height: 1;
color: hsl(0 0% 98%);
}
.pricing__plan--featured .pricing__price-new {
background: linear-gradient(135deg,
hsl(180 100% 95%) 0%,
hsl(180 90% 75%) 50%,
hsl(180 78% 50%) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pricing__price-period { font-size: .9rem; color: var(--fg-muted); }
.pricing__billing { margin: 0; font-size: .85rem; color: var(--fg-muted); }
/* Deal pill — monthly outlined to match its outlined CTA; yearly filled
with the hero-grade gradient + glow to match its filled CTA. */
.pricing__deal {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .65rem .9rem;
border-radius: 999px;
font-weight: 800;
font-size: .78rem;
letter-spacing: .04em;
/* Monthly = outlined teal, matches monthly CTA */
color: hsl(180 90% 75%);
background: hsl(180 60% 20% / .15);
border: 1.5px solid hsl(180 74% 63% / .6);
box-shadow: 0 0 30px -10px hsl(180 80% 55% / .3);
}
.pricing__plan--featured .pricing__deal {
/* Yearly = filled gradient + outer halo, mirrors the featured CTA */
color: hsl(240 30% 8%);
font-weight: 900;
background: linear-gradient(135deg,
hsl(180 95% 75%) 0%,
hsl(180 85% 58%) 50%,
hsl(180 80% 48%) 100%);
border: none;
text-shadow: 0 1px 0 hsl(180 100% 95% / .3);
box-shadow:
0 0 0 1px hsl(180 100% 92% / .5) inset,
0 0 30px -4px hsl(180 85% 60% / .55),
0 0 60px -8px hsl(180 80% 55% / .35),
0 8px 24px -8px hsl(180 80% 45% / .5);
}
.pricing__deal-icon { font-size: .95rem; line-height: 1; }
/* "WHAT'S INCLUDED" divider — thin lines either side of small label. */
.pricing__divider {
display: flex;
align-items: center;
gap: .85rem;
color: hsl(0 0% 55%);
font-size: .66rem;
font-weight: 800;
letter-spacing: .22em;
margin-top: .2rem;
}
.pricing__divider::before,
.pricing__divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .14), transparent);
}
.pricing__includes {
margin: -.25rem 0 -.25rem;
color: var(--primary);
font-weight: 700;
font-size: .88rem;
text-align: center;
letter-spacing: -.005em;
}
.pricing__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .8rem;
}
.pricing__features li {
display: flex;
gap: .7rem;
align-items: flex-start;
}
.pricing__check,
.pricing__plus {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-grid;
place-items: center;
margin-top: 1px;
background: hsl(180 74% 63% / .12);
border: 1px solid hsl(180 74% 63% / .35);
color: var(--primary);
}
.pricing__check svg,
.pricing__plus svg { width: 10px; height: 10px; }
.pricing__feature-title {
margin: 0;
font-weight: 700;
font-size: .9rem;
color: var(--fg);
}
.pricing__feature-desc {
margin: .1rem 0 0;
color: var(--fg-muted);
font-size: .8rem;
line-height: 1.5;
}
.pricing__cta {
display: block;
margin-top: .35rem;
padding: .85rem 1.25rem;
border-radius: 999px;
font-weight: 900;
font-size: .88rem;
letter-spacing: .1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: transform .25s ease, box-shadow .25s ease,
background .25s ease, border-color .25s ease;
/* Monthly = outlined teal with subtle tint + halo */
color: hsl(180 90% 75%);
background: hsl(180 60% 20% / .15);
border: 1.5px solid hsl(180 74% 63% / .6);
box-shadow: 0 0 30px -10px hsl(180 80% 55% / .3);
}
.pricing__cta:hover {
background: hsl(180 70% 30% / .25);
border-color: hsl(180 80% 70% / .85);
box-shadow: 0 0 40px -8px hsl(180 80% 55% / .5);
}
.pricing__cta--featured {
/* Yearly = same hero-grade gradient + glow as the yearly deal pill */
color: hsl(240 30% 8%);
background: linear-gradient(135deg,
hsl(180 95% 75%) 0%,
hsl(180 85% 58%) 50%,
hsl(180 80% 48%) 100%);
border: none;
text-shadow: 0 1px 0 hsl(180 100% 95% / .3);
box-shadow:
0 0 0 1px hsl(180 100% 92% / .5) inset,
0 0 30px -4px hsl(180 85% 60% / .55),
0 0 60px -8px hsl(180 80% 55% / .35),
0 8px 24px -8px hsl(180 80% 45% / .5);
}
.pricing__cta--featured:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 1px hsl(180 100% 92% / .65) inset,
0 0 50px -4px hsl(180 85% 60% / .7),
0 0 60px -8px hsl(180 80% 55% / .45),
0 12px 30px -8px hsl(180 80% 45% / .6);
}
.pricing__cta:active { transform: translateY(0); }
@media (max-width: 819px) {
.pricing__sphere {
width: 900px;
height: 900px;
bottom: -650px;
}
.pricing__rays { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pricing__cta { transition: none; }
.pricing__cta:hover,
.pricing__cta--featured:hover { transform: none; }
}
/* =========================================================
Proof — video testimonial carousel
========================================================= */
.proof {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Atmosphere — soft teal pool centered behind the carousel + sparse
dust particles fill the dead space so the section isn't flat black. */
.proof__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.proof__beam {
position: absolute;
top: 60%;
left: 50%;
width: min(1300px, 100vw);
height: 620px;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
hsl(180 80% 65% / .22) 0%,
hsl(180 74% 63% / .10) 30%,
hsl(180 74% 63% / .03) 55%,
transparent 75%);
filter: blur(70px);
}
.proof__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.proof__carousel {
position: relative;
margin: clamp(1.5rem, 3vh, 2.5rem) 0 1.5rem;
/* Bleed the carousel out to BOTH viewport edges via negative margins
only. The track itself uses padding to align cards back inside the
container, while the mask on the track creates the smooth fade-in /
fade-out at each viewport edge. */
margin-left: calc(-1 * max(0px, calc((100vw - 1180px) / 2)));
margin-right: calc(-1 * max(0px, calc((100vw - 1180px) / 2)));
}
/* Horizontal scroll track with snap.
Vertical padding is generous so the playing card's halo box-shadow
can extend freely without being clipped. No mask-image — both
horizontal edges are handled by the carousel's ::before / ::after
backdrop-blur overlays so the fade effect is identical on both sides. */
.proof__track {
display: flex;
gap: 1.1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: clamp(1rem, calc((100vw - 1180px) / 2 + 1rem), 50vw);
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4.5rem clamp(1rem, calc((100vw - 1180px) / 2 + 1rem), 50vw) 5rem;
}
.proof__track::-webkit-scrollbar { display: none; }
/* Edge blur teases — mirrored backdrop-filter overlays on both sides
of the carousel. Anything passing through these zones gets the same
premium blur + darken treatment, so cards fade out as they scroll
off in either direction. Vertical extent covers the full carousel
so a lifted (hover/playing) card can't escape the blur zone above
or below. */
.proof__carousel::before,
.proof__carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: clamp(160px, 18vw, 280px);
z-index: 4;
pointer-events: none;
-webkit-backdrop-filter: blur(6px) saturate(.92);
backdrop-filter: blur(6px) saturate(.92);
}
.proof__carousel::before {
left: 0;
background: linear-gradient(90deg,
hsl(240 30% 2% / .9) 0%,
hsl(240 28% 3% / .65) 25%,
hsl(240 25% 4% / .22) 65%,
transparent 100%);
/* Smoother bell-curve falloff: more stops in the transition zone so
the boundary between blurred and clear reads as a ramp, not a seam. */
-webkit-mask-image: linear-gradient(90deg,
#000 0%,
hsl(0 0% 0% / .98) 28%,
hsl(0 0% 0% / .8) 50%,
hsl(0 0% 0% / .42) 72%,
hsl(0 0% 0% / .12) 88%,
transparent 100%);
mask-image: linear-gradient(90deg,
#000 0%,
hsl(0 0% 0% / .98) 28%,
hsl(0 0% 0% / .8) 50%,
hsl(0 0% 0% / .42) 72%,
hsl(0 0% 0% / .12) 88%,
transparent 100%);
}
.proof__carousel::after {
right: 0;
background: linear-gradient(90deg,
transparent 0%,
hsl(240 25% 4% / .22) 35%,
hsl(240 28% 3% / .65) 75%,
hsl(240 30% 2% / .9) 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
hsl(0 0% 0% / .12) 12%,
hsl(0 0% 0% / .42) 28%,
hsl(0 0% 0% / .8) 50%,
hsl(0 0% 0% / .98) 72%,
#000 100%);
mask-image: linear-gradient(90deg,
transparent 0%,
hsl(0 0% 0% / .12) 12%,
hsl(0 0% 0% / .42) 28%,
hsl(0 0% 0% / .8) 50%,
hsl(0 0% 0% / .98) 72%,
#000 100%);
}
/* Each card — vertical 9:16 video with bottom info bar.
Asymmetric border + inset top highlight reads as light from above,
gives the cards a glassy/sculpted feel rather than a flat rectangle. */
.proof__card {
position: relative;
flex: 0 0 clamp(230px, 22vw, 290px);
scroll-snap-align: start;
border-radius: 1.15rem;
overflow: hidden;
background: linear-gradient(180deg, hsl(240 20% 9%), hsl(240 22% 5%));
border: 1px solid hsl(0 0% 100% / .06);
border-top-color: hsl(180 40% 80% / .14);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .08),
0 18px 40px -20px hsl(0 0% 0% / .7);
cursor: pointer;
transition: transform .4s cubic-bezier(.2,.7,.2,1),
border-color .4s ease,
box-shadow .4s ease;
}
.proof__card:hover {
transform: translateY(-6px) scale(1.012);
border-color: hsl(180 74% 63% / .45);
border-top-color: hsl(180 80% 80% / .35);
box-shadow:
inset 0 1px 0 hsl(180 80% 90% / .15),
0 24px 50px -22px hsl(0 0% 0% / .8),
0 0 40px -12px hsl(180 74% 63% / .4);
/* Stays UNDER the carousel edge blur overlays (z:4) so cards near
the edges remain within the blur zone even when lifted. The
overlays themselves now span the carousel's full height so a
translateY(-6px) lift can't escape vertically either. */
z-index: 2;
}
.proof__card.is-playing {
transform: translateY(-4px) scale(1.02);
border-color: hsl(180 90% 70% / .85);
border-top-color: hsl(180 100% 90% / .8);
box-shadow:
inset 0 1px 0 hsl(180 100% 95% / .35),
inset 0 0 0 1px hsl(180 90% 70% / .55),
0 25px 55px -20px hsl(0 0% 0% / .85),
0 0 60px -8px hsl(180 90% 60% / .8),
0 0 100px -16px hsl(180 85% 60% / .5);
z-index: 3;
}
.proof__video-wrap {
position: relative;
aspect-ratio: 9 / 16;
background: #000;
overflow: hidden;
}
.proof__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Centered play button overlay — glassy SaaS treatment: translucent
teal tint, frosted backdrop blur, soft inset highlight + outer halo. */
.proof__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 68px;
border-radius: 50%;
border: 1px solid hsl(180 100% 90% / .7);
background: linear-gradient(160deg,
hsl(180 100% 88%) 0%,
hsl(180 90% 70%) 45%,
hsl(180 85% 55%) 100%);
color: hsl(240 40% 10%);
display: grid;
place-items: center;
cursor: pointer;
transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease,
background .3s ease;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .7),
inset 0 -1px 0 hsl(180 80% 25% / .3),
0 0 0 1px hsl(180 100% 95% / .2) inset,
0 0 36px -2px hsl(180 90% 60% / .75),
0 0 70px -8px hsl(180 85% 60% / .5),
0 12px 26px -10px hsl(180 85% 35% / .65);
}
.proof__play svg { width: 24px; height: 24px; margin-left: 3px; position: relative; z-index: 1; }
/* Pulse ring around the play button — only animates on hover so 10
simultaneous pulses don't overwhelm the section. */
.proof__play::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid hsl(180 92% 78% / .55);
opacity: 0;
pointer-events: none;
}
.proof__card:hover .proof__play::before {
animation: proof-pulse 1.6s ease-out infinite;
}
@keyframes proof-pulse {
0% { transform: scale(.95); opacity: .85; }
70% { opacity: .15; }
100% { transform: scale(1.65); opacity: 0; }
}
.proof__card:hover .proof__play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .8),
0 0 0 1px hsl(180 100% 92% / .7) inset,
0 0 60px -2px hsl(180 95% 65% / 1),
0 0 100px -8px hsl(180 90% 60% / .6),
0 16px 32px -8px hsl(180 85% 40% / .85);
}
.proof__card.is-playing .proof__play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.6); }
/* Duration pill — top-right of the video, glassy dark with backdrop blur. */
.proof__duration {
position: absolute;
top: .55rem;
right: .55rem;
padding: .22rem .55rem;
border-radius: 999px;
background: hsl(240 30% 5% / .7);
border: 1px solid hsl(0 0% 100% / .12);
color: hsl(0 0% 96%);
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
z-index: 2;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.proof__duration:empty { display: none; }
/* "● PLAYING" indicator — glassy SaaS pill matching the play button.
Frosted backdrop blur, translucent teal tint, soft highlight. */
.proof__live {
position: absolute;
top: .6rem;
left: .6rem;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .65rem .3rem .55rem;
border-radius: 999px;
background: linear-gradient(160deg,
hsl(180 100% 85%) 0%,
hsl(180 90% 62%) 100%);
color: hsl(240 45% 8%);
font-size: .65rem;
font-weight: 900;
letter-spacing: .16em;
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
border: 1px solid hsl(180 100% 90% / .7);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / .65),
inset 0 -1px 0 hsl(180 80% 25% / .3),
0 8px 20px -6px hsl(180 90% 50% / .7),
0 0 32px -4px hsl(180 90% 60% / .55);
}
.proof__live::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: hsl(0 80% 52%);
box-shadow: 0 0 8px hsl(0 80% 55% / .9), inset 0 0 2px hsl(0 100% 80% / .6);
animation: proof-blink 1.1s ease-in-out infinite;
}
.proof__card.is-playing .proof__live {
opacity: 1;
transform: translateY(0);
}
@keyframes proof-blink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
/* Bottom info bar — luxe gradient + subtle backdrop blur so text rests
on a softly defocused video instead of a hard scrim. */
.proof__info {
position: absolute;
inset: auto 0 0 0;
padding: 1rem 1.05rem 1.05rem;
background: linear-gradient(180deg,
transparent 0%,
hsl(240 30% 3% / .15) 18%,
hsl(240 30% 3% / .65) 55%,
hsl(240 32% 2% / .94) 100%);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
color: var(--fg);
pointer-events: none;
transition: opacity .35s ease;
}
.proof__card.is-playing .proof__info { opacity: .5; }
.proof__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: .55rem;
margin-bottom: .3rem;
}
.proof__name {
margin: 0;
font-weight: 800;
font-size: 1rem;
letter-spacing: -.012em;
color: hsl(0 0% 98%);
}
.proof__stars {
font-size: .85rem;
letter-spacing: .14em;
background: linear-gradient(180deg, hsl(180 95% 85%), hsl(180 74% 52%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 12px hsl(180 74% 63% / .35);
}
.proof__quote {
margin: 0;
font-size: .82rem;
color: hsl(0 0% 72%);
line-height: 1.45;
letter-spacing: -.002em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Controls row — nav arrows on the left, dots on the right. */
.proof__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-top: .25rem;
}
.proof__nav-group {
display: flex;
align-items: center;
gap: .75rem;
}
.proof__nav {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid hsl(0 0% 100% / .14);
background: hsl(240 20% 9% / .85);
color: var(--fg);
cursor: pointer;
display: grid;
place-items: center;
transition: transform .25s ease, border-color .25s ease,
background .25s ease, color .25s ease, box-shadow .25s ease;
}
.proof__nav:hover {
border-color: hsl(180 74% 63% / .55);
background: hsl(180 74% 63% / .1);
color: hsl(180 90% 80%);
box-shadow: 0 0 22px -6px hsl(180 80% 55% / .5);
}
.proof__nav:active { transform: scale(.96); }
.proof__nav svg { width: 18px; height: 18px; }
.proof__dots {
display: flex;
align-items: center;
gap: .45rem;
padding: .5rem .75rem;
border-radius: 999px;
background: hsl(240 20% 9% / .5);
border: 1px solid hsl(0 0% 100% / .07);
}
.proof__dot {
width: 7px;
height: 7px;
border-radius: 999px;
border: 0;
padding: 0;
background: hsl(0 0% 100% / .2);
cursor: pointer;
transition: width .3s ease, background .3s ease;
}
.proof__dot:hover { background: hsl(180 74% 63% / .55); }
.proof__dot.is-active {
width: 22px;
background: linear-gradient(90deg, hsl(180 90% 75%), hsl(180 78% 52%));
box-shadow: 0 0 12px -2px hsl(180 80% 60% / .6);
}
@media (prefers-reduced-motion: reduce) {
.proof__card,
.proof__play,
.proof__nav,
.proof__dot,
.proof__info,
.proof__live { transition: none; }
.proof__card:hover { transform: none; }
.proof__card:hover .proof__play::before,
.proof__live::before { animation: none; }
}
/* =========================================================
Platform — fanned-card showcase lit from behind by a teal column.
Whole section (header + cards) sized to fit a 1440x900 laptop fold.
========================================================= */
.platform {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 2rem 0 1.5rem;
min-height: 100vh;
max-height: 1100px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Top hairline — thin gradient seam matching the .stats / .showcase
section dividers. Sits flush with the section's top edge. */
.platform::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(180 74% 63% / .35) 50%, transparent);
opacity: .6;
z-index: 10;
pointer-events: none;
}
/* Bottom seam — thicker glowing line because the section's atmospheric
light needs a substantial transition into the next section. Wider
gradient stop range + dual-radius box-shadow halo. */
.platform::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
hsl(180 80% 70% / .35) 18%,
hsl(180 88% 78% / .85) 50%,
hsl(180 80% 70% / .35) 82%,
transparent 100%);
box-shadow:
0 0 24px hsl(180 80% 65% / .5),
0 0 60px hsl(180 70% 55% / .28),
0 0 120px hsl(180 60% 50% / .15);
z-index: 10;
pointer-events: none;
}
.platform > .container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* The atmosphere wrapper itself has a horizontal vignette mask so
none of its children can light up the outer 15% of the section on
either side — section edges stay deliberately dark. */
.platform__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%);
}
/* Soft top-section glow — diffuses light into the upper area behind
the title without being a defined light source itself. */
.platform__top-glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(1000px, 90vw);
height: 500px;
background: radial-gradient(ellipse at center top,
hsl(180 70% 50% / .15) 0%,
hsl(180 65% 45% / .05) 40%,
transparent 70%);
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
/* Tighter central halo behind the cards — softer and narrower than
before so it doesn't read as a uniform bloom. */
.platform__halo {
position: absolute;
top: 35%;
left: 50%;
transform: translateX(-50%);
width: min(1100px, 100vw);
height: 800px;
background: radial-gradient(ellipse 50% 70% at center,
hsl(180 75% 50% / .15) 0%,
hsl(180 70% 45% / .06) 40%,
transparent 70%);
filter: blur(110px);
z-index: 0;
}
/* Narrow vertical column — anchors the brightest point of the scene
over the VP+ Marketplace card (left column of the .vs grid), not
the section center. Calc offsets it ~280px left of viewport center
so it lands on the VP+ card's vertical axis at the 1080px grid
max-width; the breakpoint below recenters it once the grid stacks. */
.platform__light-column {
position: absolute;
top: 5%;
left: calc(50% - 280px);
transform: translateX(-50%);
width: 500px;
height: 1200px;
background: radial-gradient(ellipse 40% 60% at 50% 30%,
hsl(180 90% 75% / .55) 0%,
hsl(180 85% 60% / .3) 30%,
hsl(180 75% 45% / .1) 60%,
transparent 85%);
filter: blur(90px);
mix-blend-mode: screen;
z-index: 1;
}
/* Directional vertical streaks — 7 soft beams of irregular width
stacked across the central column. This is the textural detail
that turns the atmosphere from a uniform bloom into "light
streaming down through fog." Vertical mask makes streaks fade in
at the top and out at the bottom. */
.platform__streaks {
position: absolute;
top: 0;
left: calc(50% - 280px);
transform: translateX(-50%);
width: min(800px, 70vw);
height: 100%;
pointer-events: none;
z-index: 1;
opacity: .7;
background:
radial-gradient(ellipse 30px 90% at 15% 50%, hsl(180 85% 70% / .12) 0%, transparent 70%),
radial-gradient(ellipse 50px 95% at 28% 50%, hsl(180 90% 75% / .18) 0%, transparent 65%),
radial-gradient(ellipse 40px 90% at 42% 50%, hsl(180 85% 70% / .15) 0%, transparent 70%),
radial-gradient(ellipse 70px 100% at 50% 50%, hsl(180 95% 80% / .28) 0%, transparent 60%),
radial-gradient(ellipse 40px 90% at 58% 50%, hsl(180 85% 70% / .15) 0%, transparent 70%),
radial-gradient(ellipse 50px 95% at 72% 50%, hsl(180 90% 75% / .18) 0%, transparent 65%),
radial-gradient(ellipse 30px 90% at 85% 50%, hsl(180 85% 70% / .12) 0%, transparent 70%);
-webkit-mask-image: linear-gradient(180deg,
transparent 0%,
#000 15%,
#000 75%,
transparent 100%);
mask-image: linear-gradient(180deg,
transparent 0%,
#000 15%,
#000 75%,
transparent 100%);
filter: blur(12px);
mix-blend-mode: screen;
}
.platform__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Header sizing tuned specifically for this section so the full
composition (kicker → title → lede → CTAs → 3-card stage) fits
inside a 1440x900 laptop viewport without scrolling. */
.platform .section__head {
max-width: 1000px;
margin-bottom: 0;
}
.platform .section__title {
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.05;
}
.platform .section__lede { margin-top: .75rem; }
.platform__cta-row {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1.5rem;
margin-bottom: clamp(2rem, 4vh, 3rem);
flex-wrap: wrap;
}
@media (max-width: 1023px) {
.platform { min-height: auto; max-height: none; }
}
/* Below the .vs grid breakpoint, the VP+ card stacks above the
Old Way card, so the off-center beams no longer track anything —
recenter them. */
@media (max-width: 800px) {
.platform__light-column,
.platform__streaks { left: 50%; }
}
@media (max-width: 767px) {
.platform { padding: 3rem 0 4rem; }
.platform__light-column { width: 90vw; height: 700px; }
}
/* =========================================================
Testimonials — premium marquee section. One luminous frame
container holds a centered header + two horizontally-
scrolling rows. Top-left of the frame has a faded grid +
scattered sparkle cluster (the "lit corner"); the rows are
masked at the horizontal edges so cards fade in/out, and
each row's track contains the card set duplicated once so
the translateX(0 -> -50%) keyframe loops seamlessly.
Hovering a row pauses its scroll for readability.
========================================================= */
/* Outer section is just a flow wrapper — zero padding so the frame
below can bleed its atmospheric layers (corner-glow, grid, sparkles)
to the section's top + bottom edges. The frame's own padding
handles internal breathing room. */
.section.testimonials { padding: 0; }
/* No literal bordered box — the "framed" feel comes from the grid
mask + sparkles cluster + marquee edge fade. .testimonials__frame
just provides a positioning context for the atmospheric layers
and lets the marquee bleed edge-to-edge. */
.testimonials__frame {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(3rem, 7vh, 4rem) 0;
background: transparent;
}
/* Ambient teal wash bleeding in from the top-left. Wider + softer
than before so it pairs with the new grid gradient instead of
reading as a contained spotlight. */
.testimonials__corner-glow {
position: absolute;
top: 0;
left: 0;
width: 75%;
height: 95%;
background: radial-gradient(ellipse 70% 75% at 12% 12%,
hsl(180 80% 50% / .22) 0%,
hsl(180 75% 48% / .16) 18%,
hsl(180 70% 45% / .1) 35%,
hsl(180 65% 42% / .05) 55%,
transparent 85%);
filter: blur(70px);
z-index: 0;
pointer-events: none;
}
/* Grid pattern weighted to the top-left with a smoother, longer
falloff so the lit area gradients into the dark instead of
ending in a hard ellipse. Five-stop mask + ellipse anchored
slightly higher and biased toward the wider gradient feel. */
.testimonials__grid-bg {
position: absolute;
inset: 0;
z-index: 1;
background-image:
linear-gradient(hsl(180 60% 65% / .09) 1px, transparent 1px),
linear-gradient(90deg, hsl(180 60% 65% / .09) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 90% 90% at 15% 12%,
hsl(0 0% 0% / 1) 0%,
hsl(0 0% 0% / .85) 15%,
hsl(0 0% 0% / .55) 35%,
hsl(0 0% 0% / .25) 60%,
hsl(0 0% 0% / .08) 80%,
transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 15% 12%,
hsl(0 0% 0% / 1) 0%,
hsl(0 0% 0% / .85) 15%,
hsl(0 0% 0% / .55) 35%,
hsl(0 0% 0% / .25) 60%,
hsl(0 0% 0% / .08) 80%,
transparent 100%);
pointer-events: none;
}
/* Sparkle cluster — now in section coordinates, anchored to the
top-left of the full-bleed frame. Tighter (35% x 50%) since the
frame spans the viewport now and we want the cluster to feel
focused, not spread thin. */
.testimonials__sparkles {
position: absolute;
top: 0;
left: 0;
width: 35%;
height: 50%;
z-index: 1;
pointer-events: none;
}
/* Header sits centered above the marquee */
.testimonials__head {
position: relative;
z-index: 2;
text-align: center;
padding: 0 clamp(1.25rem, 3vw, 2rem);
margin: 0 auto clamp(2.5rem, 5vh, 3.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 880px;
}
/* Title overrides the global section__title uppercase so the
header reads in clean title case like the reference. */
.testimonials .section__title {
text-transform: none;
letter-spacing: -.025em;
font-weight: 700;
}
.testimonials .section__lede { max-width: 620px; margin-top: .25rem; }
/* Kicker pill picks up the luminous treatment to match the frame */
.testimonials__head .kicker {
display: inline-flex;
align-items: center;
gap: .5rem;
background:
linear-gradient(180deg, hsl(180 70% 50% / .18), hsl(180 70% 50% / .06));
border: 1px solid hsl(180 70% 60% / .4);
color: hsl(180 90% 80%);
box-shadow:
inset 0 1px 0 hsl(180 80% 85% / .15),
0 0 20px -2px hsl(180 70% 50% / .3);
}
.testimonials__head .kicker svg { width: 14px; height: 14px; }
/* Marquee — two rows */
.testimonials__marquee {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
/* Wider edge fade so cards drift in/out gradually instead of
hard-cutting near the viewport edge. 15% mask zone each side. */
mask-image: linear-gradient(90deg,
transparent 0%,
black 15%,
black 85%,
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
black 15%,
black 85%,
transparent 100%);
}
.testimonials__row { overflow: hidden; }
.testimonials__track {
display: flex;
gap: 1.5rem;
width: max-content;
will-change: transform;
}
.testimonials__row--ltr .testimonials__track {
animation: testimonialsMarqueeLtr 75s linear infinite;
}
.testimonials__row--rtl .testimonials__track {
animation: testimonialsMarqueeRtl 75s linear infinite;
}
/* Cards are decorative — no hover behaviour (no row pause, no
card lift). The marquee just runs. */
@keyframes testimonialsMarqueeLtr {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes testimonialsMarqueeRtl {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* Vertical-proportion glass card with a clearly lit top 25%
fading into the dark body. The first gradient stop is bright
enough to read as "ambient light catching the top of the
glass" — pairs with the inset top-glow shadow inside for the
same effect at the corner-radius transition. */
.testimonials__card {
flex-shrink: 0;
width: 460px;
min-height: 180px;
max-height: 216px;
padding: 1.25rem 1.75rem;
border-radius: 1.25rem;
border: 1px solid hsl(180 50% 60% / .22);
background: linear-gradient(180deg,
hsl(180 40% 18% / .5) 0%,
hsl(240 30% 10% / .85) 25%,
hsl(240 28% 7% / .92) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
/* outer drop */
0 20px 40px -15px hsl(0 0% 0% / .6),
/* teal halo */
0 0 40px -5px hsl(180 70% 50% / .15),
/* glass top edge */
inset 0 1px 0 hsl(180 80% 85% / .18),
/* inner top-glow simulating ambient light catching the top */
inset 0 20px 40px -20px hsl(180 60% 50% / .12);
display: flex;
flex-direction: column;
gap: .85rem;
}
.testimonials__card-head {
display: flex;
align-items: center;
gap: 1rem;
}
.testimonials__card-info {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
flex: 1;
}
.testimonials__name {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: hsl(0 0% 98%);
line-height: 1.2;
letter-spacing: -.01em;
}
.testimonials__role {
margin: 0;
font-size: .85rem;
color: hsl(180 30% 70%);
font-weight: 500;
}
.testimonials__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid hsl(180 75% 65% / .6);
flex-shrink: 0;
box-shadow:
0 0 0 1px hsl(180 80% 70% / .25),
0 0 20px -2px hsl(180 75% 55% / .45),
inset 0 0 8px hsl(0 0% 0% / .3);
}
.testimonials__quote {
margin: .25rem 0 0;
font-size: .95rem;
line-height: 1.55;
color: hsl(0 0% 85%);
}
/* Responsive — preserve landscape proportion at every breakpoint. */
@media (max-width: 1100px) {
.testimonials__card { width: 420px; }
}
@media (max-width: 900px) {
.testimonials__card { width: 380px; padding: 1.15rem 1.5rem; }
.testimonials__avatar { width: 52px; height: 52px; }
}
@media (max-width: 767px) {
.testimonials__frame { padding: 3rem 0; }
.testimonials__card { width: 320px; min-height: 170px; padding: 1rem 1.4rem; }
.testimonials__avatar { width: 48px; height: 48px; }
.testimonials__row--ltr .testimonials__track,
.testimonials__row--rtl .testimonials__track { animation-duration: 100s; }
}
@media (prefers-reduced-motion: reduce) {
.testimonials__row--ltr .testimonials__track,
.testimonials__row--rtl .testimonials__track { animation: none; }
.testimonials__marquee {
-webkit-mask-image: none;
mask-image: none;
}
.testimonials__row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* =========================================================
VS — VP+ Marketplace as the lifted card, Old Way as faded ghost
========================================================= */
.vs {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1080px;
margin: 0 auto;
align-items: center;
}
@media (min-width: 800px) {
.vs {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
}
}
/* The hero card — VP+ side. Lives inside the platform section now,
so it gets the same "sick glow" treatment as the dashboard card
used to: thicker teal halo, brighter inset top hairline, soft
bottom tint. The faded Old Way column stays plain so the contrast
reads instantly. */
.vs__card {
position: relative;
padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
border-radius: clamp(1rem, 1.4vw, 1.4rem);
border: 1px solid hsl(180 74% 63% / .45);
background: linear-gradient(180deg, hsl(240 18% 12%), hsl(240 20% 7%));
box-shadow:
inset 0 1px 0 hsl(180 90% 95% / .22),
inset 0 0 0 1px hsl(180 74% 63% / .15),
inset 0 30px 60px -30px hsl(180 75% 65% / .14),
0 40px 100px -20px hsl(0 0% 0% / .85),
0 0 80px -10px hsl(180 80% 55% / .5),
0 0 140px -20px hsl(180 70% 50% / .35);
transition: transform .4s ease, box-shadow .4s ease;
}
@media (min-width: 800px) {
.vs__card { transform: translateY(-6px); }
.vs__card:hover {
transform: translateY(-10px);
box-shadow:
inset 0 1px 0 hsl(180 90% 95% / .28),
inset 0 0 0 1px hsl(180 74% 63% / .22),
inset 0 30px 60px -30px hsl(180 75% 65% / .18),
0 50px 120px -20px hsl(0 0% 0% / .9),
0 0 100px -10px hsl(180 80% 55% / .6),
0 0 180px -20px hsl(180 70% 50% / .45);
}
}
@media (prefers-reduced-motion: reduce) {
.vs__card,
.vs__card:hover { transform: none; transition: none; }
}
.vs__card-title {
margin: 0 0 1.25rem;
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 700;
letter-spacing: -.015em;
text-align: center;
background: linear-gradient(180deg, #fff 0%, hsl(180 60% 80%) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* The faded side — no card, just dim text */
.vs__faded {
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(.75rem, 1.5vw, 1.5rem);
opacity: .75;
}
.vs__faded-title {
margin: 0 0 1.25rem;
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 500;
letter-spacing: -.005em;
text-align: center;
color: var(--fg-muted);
}
/* Shared bullet list */
.vs__bullets {
list-style: none;
margin: 0;
padding: 1.25rem 0 0;
border-top: 1px solid hsl(180 30% 50% / .15);
display: flex;
flex-direction: column;
gap: 1.05rem;
}
.vs__bullets--faded {
border-top-color: hsl(0 0% 40% / .18);
}
.vs__bullets li {
display: flex;
align-items: flex-start;
gap: .8rem;
font-size: 1rem;
line-height: 1.5;
color: var(--fg);
}
.vs__bullets--faded li {
color: var(--fg-muted);
}
.vs__check, .vs__cross {
flex-shrink: 0;
width: 18px;
display: inline-block;
margin-top: 1px;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.4;
text-align: center;
}
.vs__check { color: var(--primary); }
.vs__cross {
color: hsl(0 30% 60%);
font-weight: 500;
opacity: .7;
}
/* =========================================================
FAQ — two-column premium rebuild. Atmosphere layer biased to
the top-right (mirrors the right-column visual), grid + sparkle
cluster anchored there. Left column stacks the social-proof
pill above the accordion; right column shows the marketplace
card under a teal-edged glass frame.
========================================================= */
.section.faq {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(4rem, 8vh, 6rem) 0 clamp(5rem, 10vh, 7rem);
}
.faq__atmosphere {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.faq__grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(hsl(180 60% 65% / .06) 1px, transparent 1px),
linear-gradient(90deg, hsl(180 60% 65% / .06) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 90% 90% at 85% 18%,
hsl(0 0% 0% / 1) 0%,
hsl(0 0% 0% / .85) 15%,
hsl(0 0% 0% / .55) 35%,
hsl(0 0% 0% / .25) 60%,
hsl(0 0% 0% / .08) 80%,
transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 85% 18%,
hsl(0 0% 0% / 1) 0%,
hsl(0 0% 0% / .85) 15%,
hsl(0 0% 0% / .55) 35%,
hsl(0 0% 0% / .25) 60%,
hsl(0 0% 0% / .08) 80%,
transparent 100%);
}
.faq__corner-glow {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 80%;
background: radial-gradient(ellipse 70% 75% at 88% 15%,
hsl(180 80% 50% / .2) 0%,
hsl(180 75% 48% / .14) 18%,
hsl(180 70% 45% / .08) 35%,
hsl(180 65% 42% / .04) 55%,
transparent 85%);
filter: blur(70px);
}
.faq__sparkles {
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 55%;
pointer-events: none;
}
/* Header */
.faq__head {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 880px;
margin: 0 auto clamp(2.5rem, 5vh, 4rem);
}
.faq .section__title {
text-transform: none;
letter-spacing: -.025em;
font-weight: 700;
}
.faq .section__lede { max-width: 600px; margin-top: .25rem; }
/* Kicker pill — same luminous treatment as Testimonials */
.faq__head .kicker {
display: inline-flex;
align-items: center;
gap: .5rem;
background:
linear-gradient(180deg, hsl(180 70% 50% / .18), hsl(180 70% 50% / .06));
border: 1px solid hsl(180 70% 60% / .4);
color: hsl(180 90% 80%);
box-shadow:
inset 0 1px 0 hsl(180 80% 85% / .15),
0 0 20px -2px hsl(180 70% 50% / .3);
}
.faq__head .kicker svg { width: 14px; height: 14px; }
/* Two-column layout */
.faq__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.faq__left {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/* Social proof pill */
.faq__social-proof {
display: inline-flex;
align-items: center;
gap: 1.1rem;
padding: .7rem 1.1rem .7rem .8rem;
background: linear-gradient(180deg,
hsl(180 40% 15% / .4) 0%,
hsl(240 25% 8% / .6) 100%);
border: 1px solid hsl(180 50% 60% / .22);
border-radius: 999px;
box-shadow:
0 10px 30px -10px hsl(0 0% 0% / .5),
inset 0 1px 0 hsl(180 80% 85% / .12);
width: fit-content;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.faq__avatars { display: flex; align-items: center; }
.faq__avatar {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid hsl(240 25% 6%);
object-fit: cover;
margin-left: -10px;
background: var(--card);
}
.faq__avatar:first-child { margin-left: 0; }
.faq__avatar-count {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, hsl(180 90% 70%), hsl(180 75% 50%));
color: hsl(240 30% 8%);
font-weight: 800;
font-size: .72rem;
letter-spacing: -.005em;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid hsl(240 25% 6%);
margin-left: -10px;
box-shadow: 0 0 14px -2px hsl(180 75% 55% / .5);
}
.faq__rating {
display: flex;
flex-direction: column;
gap: .1rem;
}
.faq__stars {
display: inline-flex;
gap: 2px;
color: hsl(180 95% 75%);
}
.faq__stars svg {
width: 13px;
height: 13px;
filter: drop-shadow(0 0 4px hsl(180 80% 60% / .55));
}
.faq__rating-text {
font-size: .78rem;
color: hsl(0 0% 75%);
letter-spacing: .005em;
}
.faq__rating-text strong { color: hsl(180 90% 88%); font-weight: 700; }
/* Accordion */
.faq__accordion {
display: flex;
flex-direction: column;
gap: .65rem;
}
.faq__item {
border: 1px solid hsl(180 40% 60% / .18);
border-radius: 1rem;
background: linear-gradient(180deg,
hsl(180 30% 14% / .3) 0%,
hsl(240 25% 9% / .7) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
transition: all .3s cubic-bezier(.22, 1, .36, 1);
box-shadow:
0 8px 20px -10px hsl(0 0% 0% / .4),
inset 0 1px 0 hsl(180 70% 80% / .08);
}
.faq__item:hover:not([open]) {
border-color: hsl(180 60% 60% / .3);
}
.faq__item[open] {
border-color: hsl(180 75% 65% / .4);
background: linear-gradient(180deg,
hsl(180 40% 18% / .5) 0%,
hsl(240 25% 9% / .85) 100%);
box-shadow:
0 15px 40px -10px hsl(0 0% 0% / .5),
0 0 40px -5px hsl(180 70% 50% / .25),
inset 0 1px 0 hsl(180 80% 85% / .18);
}
.faq__item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.15rem 1.4rem;
font-weight: 600;
font-size: 1rem;
color: hsl(0 0% 95%);
line-height: 1.4;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { display: none; }
.faq__q-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: hsl(180 70% 25% / .5);
border: 1px solid hsl(180 75% 60% / .4);
color: hsl(180 95% 85%);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 12px -2px hsl(180 75% 55% / .4),
inset 0 1px 0 hsl(180 90% 85% / .15);
}
.faq__q-icon svg { width: 14px; height: 14px; }
.faq__q-text { flex: 1; }
.faq__toggle {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: hsl(180 70% 70%);
transition: transform .3s ease, color .3s ease;
}
.faq__toggle svg { width: 16px; height: 16px; }
.faq__item[open] .faq__toggle {
transform: rotate(45deg);
color: hsl(180 95% 80%);
}
.faq__answer {
padding: 0 1.4rem 1.2rem 4rem;
color: hsl(0 0% 78%);
font-size: .92rem;
line-height: 1.6;
animation: faqFadeIn .35s ease-out;
}
.faq__answer p { margin: 0; }
.faq__answer p + p { margin-top: .65rem; }
.faq__answer ul.faq__list {
margin: .75rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: .45rem;
}
.faq__answer ul.faq__list li {
position: relative;
padding-left: 1.1rem;
color: hsl(0 0% 80%);
}
.faq__answer ul.faq__list li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: hsl(180 85% 65%);
box-shadow: 0 0 6px hsl(180 80% 60% / .8);
}
.faq__answer ul.faq__list + p { margin-top: .9rem; }
@keyframes faqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Right-column visual */
.faq__right { position: relative; }
.faq__visual {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
border: 1px solid hsl(180 50% 60% / .22);
box-shadow:
0 30px 70px -20px hsl(0 0% 0% / .7),
0 0 60px -10px hsl(180 70% 50% / .25),
inset 0 1px 0 hsl(180 80% 85% / .15);
}
.faq__visual img {
display: block;
width: 100%;
height: auto;
}
.faq__visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
hsl(180 70% 60% / .06) 0%,
transparent 30%,
transparent 70%,
hsl(180 70% 60% / .04) 100%);
pointer-events: none;
}
/* Tablet: stack to one column; visual goes ABOVE the FAQ */
@media (max-width: 1023px) {
.faq__layout { grid-template-columns: 1fr; gap: 2.5rem; }
.faq__right { order: -1; max-width: 640px; margin: 0 auto; }
.faq__visual { max-height: 420px; }
.faq__visual img { object-fit: cover; object-position: top; }
.faq__social-proof { margin: 0 auto; }
}
@media (max-width: 767px) {
.section.faq { padding: 3.5rem 0 4.5rem; }
.faq__visual { max-height: 280px; }
.faq__item summary { padding: 1rem 1.15rem; gap: .8rem; font-size: .92rem; }
.faq__q-icon { width: 26px; height: 26px; }
.faq__answer { padding: 0 1.15rem 1.1rem 3.4rem; font-size: .88rem; }
}
/* =========================================================
Final CTA — single luminous card. Layered atmosphere inside
the card itself (hex texture + top/bottom radial glows +
sparkle dots), plus a stronger border, glassy top hairline,
and a wide cyan halo around the outside so the whole thing
reads as the climactic "press this" moment of the page.
========================================================= */
.cta__inner {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: clamp(1.25rem, 2vw, 2rem);
padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 3rem);
text-align: center;
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: center;
border: 1px solid hsl(180 60% 60% / .3);
background:
/* top luminance */
radial-gradient(ellipse 80% 50% at 50% 0%,
hsl(180 80% 50% / .14) 0%,
transparent 70%),
/* bottom luminance */
radial-gradient(ellipse 60% 40% at 50% 100%,
hsl(180 80% 50% / .1) 0%,
transparent 70%),
/* base depth */
linear-gradient(180deg,
hsl(240 25% 8%) 0%,
hsl(240 22% 5%) 50%,
hsl(240 25% 8%) 100%);
box-shadow:
inset 0 1px 0 hsl(180 90% 90% / .18),
inset 0 0 0 1px hsl(180 60% 60% / .08),
0 30px 80px -20px hsl(0 0% 0% / .7),
0 0 80px -10px hsl(180 70% 50% / .25),
0 0 180px -30px hsl(180 70% 50% / .2);
}
/* Thin glowing hairline at the very top of the card — pulls
light to the top edge like a glass lip catching ambient light. */
.cta__inner::before {
content: "";
position: absolute;
top: 0;
left: 18%;
right: 18%;
height: 1px;
background: linear-gradient(90deg,
transparent,
hsl(180 90% 75% / .8) 30%,
hsl(180 95% 85% / 1) 50%,
hsl(180 90% 75% / .8) 70%,
transparent);
z-index: 2;
pointer-events: none;
}
/* Atmosphere container — every decorative layer lives here, all
on z-index 0 so the content stack sits on top via .cta__inner
> :not(.cta__atmosphere) { z-index: 1 }. */
.cta__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.cta__inner > :not(.cta__atmosphere)::before,
.cta__inner > :not(.cta__atmosphere) {
position: relative;
z-index: 1;
}
/* Whisper-faint hex texture (same pattern as the VSL section
for visual continuity); masked centre-out so it never
competes with the headline. */
.cta__hex {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 56px 97px;
background-repeat: repeat;
opacity: .05;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
black 0%, rgba(0,0,0,.5) 50%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
black 0%, rgba(0,0,0,.5) 50%, transparent 85%);
}
/* Soft inner glows — top fades the title into light, bottom
pools warmth under the CTA button. */
.cta__glow {
position: absolute;
pointer-events: none;
}
.cta__glow--top {
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 70%;
background: radial-gradient(ellipse 70% 70% at 50% 0%,
hsl(180 90% 65% / .22) 0%,
hsl(180 80% 55% / .1) 35%,
transparent 70%);
filter: blur(40px);
}
.cta__glow--bottom {
bottom: -20%;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 60%;
background: radial-gradient(ellipse 70% 70% at 50% 100%,
hsl(180 85% 60% / .18) 0%,
hsl(180 75% 50% / .08) 40%,
transparent 75%);
filter: blur(45px);
}
.cta__sparkles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Kicker pill — luminous treatment matching VSL/FAQ/Testimonials. */
.cta .kicker {
display: inline-flex;
align-items: center;
gap: .5rem;
background:
linear-gradient(180deg, hsl(180 70% 50% / .18), hsl(180 70% 50% / .06));
border: 1px solid hsl(180 70% 60% / .4);
color: hsl(180 90% 80%);
box-shadow:
inset 0 1px 0 hsl(180 80% 85% / .15),
0 0 20px -2px hsl(180 70% 50% / .3);
}
.cta .kicker svg { width: 14px; height: 14px; }
/* Title in title case — the new headline is long and reads
much cleaner without all-caps shouting. */
.cta__title {
margin: 0;
font-size: clamp(1.65rem, 3.4vw, 2.6rem);
font-weight: 700;
letter-spacing: -.022em;
line-height: 1.15;
max-width: 880px;
text-wrap: balance;
}
.cta__lede {
margin: 0;
max-width: 560px;
color: var(--fg-muted);
font-size: 1.05rem;
}
.cta__inner .btn--glow { margin-top: .35rem; }
.cta__fineprint { margin: 0; color: var(--fg-dim); font-size: .82rem; letter-spacing: .005em; }
/* =========================================================
Footer
========================================================= */
.footer {
position: relative;
border-top: 1px solid var(--border-soft);
background: var(--bg);
padding: 4.5rem 0 0;
}
.footer__inner {
display: grid;
gap: 2.75rem;
grid-template-columns: 1fr;
padding-bottom: 3.5rem;
}
@media (min-width: 640px) {
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.footer__inner {
grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
gap: 3.5rem;
align-items: start;
}
}
.footer__brand { max-width: 360px; }
@media (min-width: 640px) and (max-width: 959px) {
.footer__brand { grid-column: 1 / -1; max-width: 460px; }
}
.footer__logo { display: inline-block; }
.footer__logo img { height: 28px; width: auto; display: block; }
.footer__tagline {
margin: 1.1rem 0 1.5rem;
color: var(--fg-dim);
font-size: .95rem;
line-height: 1.55;
}
.footer__socials {
display: flex;
gap: .55rem;
}
.footer__social {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 999px;
color: var(--fg-dim);
transition: color .2s ease;
}
.footer__social svg { width: 16px; height: 16px; }
.footer__social:hover { color: var(--fg); }
.footer__col { min-width: 0; }
.footer__heading {
margin: 0 0 1.1rem;
font-size: .72rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-dim);
}
.footer__nav {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .7rem;
}
.footer__nav a {
color: var(--fg-muted);
font-size: .92rem;
transition: color .2s ease;
}
.footer__nav a:hover { color: var(--fg); }
.footer__cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
@media (min-width: 640px) and (max-width: 959px) {
.footer__cta { grid-column: 1 / -1; }
}
.footer__cta-eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--fg-dim);
font-size: .78rem;
letter-spacing: .01em;
}
.footer__cta-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--primary);
}
.footer__cta-title {
margin: 0;
font-size: clamp(1.15rem, 1.3vw, 1.35rem);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.2;
color: var(--fg);
}
.footer__cta-btn {
padding: .85rem 1.35rem;
font-size: .95rem;
}
.footer__bottom {
border-top: 1px solid var(--border-soft);
padding: 1.25rem 0;
}
.footer__bottom-inner {
display: flex;
flex-direction: column;
gap: .75rem;
align-items: center;
justify-content: space-between;
color: var(--fg-dim);
font-size: .8rem;
text-align: center;
}
@media (min-width: 640px) {
.footer__bottom-inner { flex-direction: row; text-align: left; }
}
.footer__legal-links {
display: flex;
gap: 1.25rem;
}
.footer__legal-links a {
color: var(--fg-dim);
transition: color .2s ease;
}
.footer__legal-links a:hover { color: var(--fg); }
@media (max-width: 640px) {
.footer { padding-top: 3.25rem; }
.footer__inner { padding-bottom: 2.5rem; gap: 2.25rem; }
}
/* =========================================================
Mobile polish — pass 2. Covers the sections below the hero:
Platform, Video testimonials, Profile setup, Testimonials
marquee, and the global section title scale + section heads.
Lives at the end of the stylesheet so it overrides every
section-specific font-size set above.
========================================================= */
@media (max-width: 640px) {
/* Section titles (uppercase ones especially) were rendering at
32px / 800 weight on phones — that's chunky enough to break
short sentences into 4-line stacks. Drop the floor + scale
with viewport so they read as headlines, not banners. */
.section__title {
font-size: clamp(1.65rem, 7.5vw, 2.05rem);
line-height: 1.08;
letter-spacing: -.02em;
}
/* Sections with their own font-size overrides still need pulling
in; target the named ones explicitly so the cascade wins. */
.platform .section__title,
.vsl-section .section__title,
.testimonials .section__title,
.faq .section__title,
.showcase .section__title {
font-size: clamp(1.55rem, 7vw, 1.95rem);
}
/* Section heads breathe less — was 3rem bottom which adds up to
real scroll across the page. */
.section__head { margin: 0 auto 2rem; }
/* Testimonials marquee — card width was 320px which left almost
no headroom after the 15% edge fade; the result was content
getting clipped mid-sentence. Shrink the cards a touch and
narrow the fade zone so the visible card dominates. */
.testimonials__card {
width: 250px;
min-height: 155px;
max-height: 200px;
padding: .9rem 1.1rem;
}
.testimonials__avatar { width: 40px; height: 40px; }
.testimonials__name { font-size: .95rem; }
.testimonials__role { font-size: .74rem; }
.testimonials__quote { font-size: .84rem; line-height: 1.5; }
/* Auto-scroll marquee preserved on mobile — auto-scroll is the
intended behavior for this section. Just narrow the edge mask
so the cards stay readable through more of the scroll path. */
.testimonials__marquee {
-webkit-mask-image: linear-gradient(90deg,
transparent 0%, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%, black 6%, black 94%, transparent 100%);
}
/* Slow the loop on phones so a single screen of cards lingers
enough to be read. */
.testimonials__row--ltr .testimonials__track,
.testimonials__row--rtl .testimonials__track { animation-duration: 90s; }
/* Pricing — tighter cards + CTAs so the section reads as a
pair of decision blocks, not full-screen blocks. */
.pricing__plan { padding: 1.5rem 1.25rem 1.5rem; border-radius: 1.25rem; }
.pricing__cta { padding: .75rem 1.1rem; font-size: .84rem; }
.pricing__features { gap: .85rem; }
.pricing__price-new { font-size: 2.4rem; }
.pricing__price-period { font-size: .85rem; }
/* VSL — source glows scale tighter on phones so the bright
dots don't dominate the bottom of the section. */
.vsl-section__source { width: 130px; height: 70px; }
.vsl-section__source--left { left: 6%; }
.vsl-section__source--right { right: 6%; }
/* Tighter side rays so the cone reads at narrow widths. */
.vsl-section__ray--left,
.vsl-section__ray--left-core { transform: rotate(12deg); }
.vsl-section__ray--right,
.vsl-section__ray--right-core { transform: rotate(-12deg); }
/* Final CTA card — keep the wow but trim the horizontal
padding so the title doesn't get squeezed. */
.cta__inner { padding: 2.5rem 1rem; gap: 1rem; }
.cta__title { font-size: clamp(1.45rem, 6.5vw, 1.8rem); }
.cta__lede { font-size: .92rem; }
.cta__fineprint { font-size: .76rem; }
/* FAQ — visual sits above the accordion on mobile; cap height
so it doesn't dominate, and tighten accordion padding. */
.faq__visual { max-height: 240px; border-radius: 1.1rem; }
.faq__social-proof { padding: .55rem .9rem .55rem .7rem; }
.faq__avatar, .faq__avatar-count { width: 30px; height: 30px; }
.faq__avatar-count { font-size: .68rem; }
.faq__stars svg { width: 12px; height: 12px; }
.faq__rating-text { font-size: .74rem; }
/* Stories carousel — much narrower active card so prev/next
cards have real visible width on either side (was 92% with
prev/next pushed 290px off-centre, putting both side cards
fully off-screen). */
.stories__avatars { gap: .35rem; padding-bottom: .75rem; }
/* Carousel was holding a fixed clamp(380, 50vh, 440px) height
— which on a 390px viewport leaves ~150px of dead space
below the card. Shrink to fit the active card content. */
.stories__carousel {
height: auto;
min-height: 340px;
margin-bottom: 1rem;
}
.stories__nav { margin-top: 0; }
.stories__card {
width: 68%;
padding: 1rem 1rem 1.15rem;
gap: .8rem;
}
.stories__card[data-pos="prev"] { transform: translateX(calc(-50% - 58% + var(--drag, 0px))) scale(.82); }
.stories__card[data-pos="next"] { transform: translateX(calc(-50% + 58% + var(--drag, 0px))) scale(.82); }
.stories__card[data-pos="far"] { display: none; }
.stories__person-avatar { width: 34px; height: 34px; }
.stories__person-name { font-size: .9rem; }
.stories__person-title { font-size: .7rem; }
.stories__quote { font-size: .88rem; line-height: 1.55; }
.stories__tags { gap: .4rem; }
.stories__tag { font-size: .65rem; padding: .25rem .55rem; }
.stories__chip { font-size: .62rem; padding: .25rem .5rem; }
/* Video testimonials carousel — proof cards smaller + much
thinner side fade overlays so the focused card stands out
without the neighbours getting dissolved completely. */
.proof__card { flex: 0 0 175px; }
.proof__carousel::before,
.proof__carousel::after { width: 50px; }
.proof__track {
gap: .85rem;
padding: 3rem clamp(1rem, calc(50vw - 87px), 3.5rem) 3.5rem;
scroll-padding-left: clamp(1rem, calc(50vw - 87px), 3.5rem);
}
.proof__name { font-size: .9rem; }
.proof__quote { font-size: .8rem; }
.proof__play { width: 56px; height: 56px; }
}
/* =========================================================
Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}