/* HeroV5 — full-width marketing hero for the demo.salvo.axveer.com landing
* page. Ported from the SALVO app's HeroV5 React component to static HTML/CSS
* (this landing page is plain static HTML on Cloud Run, not Next.js).
*
* Owns: the stage/header/layout, the unified frosted-glass surfaces (the
* `.hv5-glass*` utilities replace the React component's inline glass tokens),
* hover, selection, and responsive behavior. Card internals stay inline in the
* markup. Fonts: IBM Plex Sans (loaded by the page's Google Fonts ).
*/
.hero-v5-stage {
--hv5-max: 1320px;
--hv5-pad: clamp(20px, 4vw, 48px);
position: relative;
width: 100%;
background: #dee0ec;
color: #050505;
font-family: "IBM Plex Sans", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overflow: hidden;
padding-bottom: 20px;
}
.hero-v5-stage ::selection {
background: #bfe4fa;
}
/* ── Unified frosted-glass surface (was GLASS_* inline tokens) ──────────────
* One translucent tone, blur, border, and shadow across every card so they
* read as one surface system — softly blended into the page, not boxed. */
.hv5-glass {
background: linear-gradient(142deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: 0 26px 62px -34px rgba(28, 38, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Feature ("Remove the risk") card: same frosted family, but tinted to the
* EXACT lavender of the illustration's baked background (~#dee0ec). The
* illustration's flat field then merges into the card surface — one continuous
* tone, no inner image-box seam — without touching the artwork. Near-opaque so
* the faint glow behind can't reintroduce a tonal step under the illustration. */
.hv5-glass-feature {
background: rgba(220, 222, 235, 0.86);
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: 0 26px 62px -34px rgba(28, 38, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* ── Header: logo left, nav centered, CTA right ────────────────────────────
* The third grid cell carries the "Book a live demo" CTA (the landing page's
* lead-gen action); cells 1 and 3 are both 1fr so the nav stays optically
* centered between the logo and the CTA. */
.hero-v5-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: clamp(24px, 3vw, 38px) clamp(32px, 4vw, 56px) 0;
}
.hero-v5-logo {
justify-self: start;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.hero-v5-logo img {
height: 26px;
width: auto;
display: block;
}
.hero-v5-nav {
justify-self: center;
display: flex;
gap: clamp(28px, 3vw, 52px);
font-size: 17px;
font-weight: 500;
color: #2b2f3c;
}
.hero-v5-navlink {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.hero-v5-navlink:hover {
color: #36aeef;
}
/* `.hero-v5-stage` prefix raises specificity above the landing page's global
* `.salvo2 a { color: inherit }` (0,1,1), which would otherwise force the CTA
* text to the inherited dark color instead of white-on-dark. */
.hero-v5-stage .hero-v5-cta {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 600;
color: #fff;
background: #1b2030;
padding: 11px 19px;
border-radius: 999px;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 12px 26px -12px rgba(27, 32, 48, 0.6);
transition: background 0.18s, transform 0.18s;
}
.hero-v5-stage .hero-v5-cta:hover {
background: #2a3146;
transform: translateY(-1px);
}
/* ── Hero content (max-width container) ────────────────────────────────── */
.hero-v5-main {
position: relative;
max-width: var(--hv5-max);
margin: 0 auto;
/* min-height contains the absolutely-positioned balloon so it never bleeds
* past the hero into the section below. */
min-height: 652px;
padding: clamp(34px, 3.6vw, 56px) var(--hv5-pad) 0;
}
/* Brand illustration — a balloon hovering over an island. Two transparent
* layers stacked + centered: the island sits at the bottom, the balloon floats
* centered above it (slow up/down loop = a hovering motion). */
.hero-v5-balloon {
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-46%);
width: 460px;
max-width: 47%;
z-index: 0;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-v5-island {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.hero-v5-airballoon {
display: block;
/* Narrower than the island so it reads as floating above it, centered. */
width: 54%;
height: auto;
position: relative;
z-index: 2;
/* Small resting gap above the island; the float widens/narrows it. */
margin-bottom: 1%;
/* Very slow hover — long duration, gentle ease, small travel. */
animation: hv5-float 8.5s ease-in-out infinite;
will-change: transform;
}
@keyframes hv5-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-v5-airballoon { animation: none; }
}
/* Atmospheric light layer behind the glass cards. Soft white + faint blue
* radial glows ONLY behind the LEFT cards, which sit over flat lavender and
* need something for the frosted surfaces to diffuse. The right cards float
* over the balloon (their own see-through), so no glow there. Decorative. */
.hero-v5-glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(42% 38% at 24% 54%, rgba(255, 255, 255, 0.3), transparent 75%),
radial-gradient(40% 44% at 26% 74%, rgba(122, 176, 240, 0.06), transparent 80%);
}
.hero-v5-cols {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
}
/* Left column: headline + metrics */
.hero-v5-left {
flex: 0 1 520px;
min-width: 0;
max-width: 520px;
}
.hero-v5-stage .hero-v5-headline {
margin: 0;
font-family: inherit;
/* Compact marketing headline — bold but not a full-viewport poster. */
font-size: clamp(27px, 2.6vw, 36px);
line-height: 1.04;
letter-spacing: -0.014em;
font-weight: 600;
text-transform: uppercase;
max-width: 470px;
}
.hero-v5-stage .hero-v5-headline span {
display: block;
}
.hero-v5-stage .hero-v5-lower-title {
font-family: inherit;
}
.hero-v5-metrics {
margin-top: 26px;
display: flex;
align-items: center;
max-width: 480px;
}
.hero-v5-metric {
position: relative;
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 15px 16px;
min-width: 0;
}
.hero-v5-metric-divider {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 44px;
background: rgba(120, 128, 155, 0.25);
}
/* Right column: narrow glass cards. `margin-right` pulls them inward from the
* container edge so they float over the balloon's right side (layered hero). */
.hero-v5-right {
flex: 0 0 412px;
width: 412px;
margin-right: 40px;
display: flex;
flex-direction: column;
gap: 26px;
margin-top: 2px;
}
/* ── Lower "Remove the risk" — feature glass card: title on top, a LARGE
* illustration in the middle, supporting paragraph below. ───────────────── */
.hero-v5-lower {
margin-top: 22px;
/* Match the KPI/metrics card width above it so the left column aligns. */
max-width: 480px;
}
.hero-v5-lower-img {
/* Large illustration between the title and the paragraph; slight bleed. */
margin: 12px -6px 8px;
}
.hero-v5-lower-img img {
display: block;
width: 100%;
height: auto;
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-v5-cols {
flex-direction: column;
gap: 32px;
}
.hero-v5-left,
.hero-v5-right {
flex: none;
width: 100%;
max-width: 560px;
}
.hero-v5-right {
margin-right: 0;
}
.hero-v5-balloon {
top: -6px;
left: auto;
right: -3%;
transform: none;
width: 340px;
max-width: 42%;
opacity: 0.85;
}
.hero-v5-lower {
margin-top: 28px;
}
}
@media (max-width: 640px) {
.hero-v5-header {
grid-template-columns: 1fr auto;
padding-top: 22px;
}
.hero-v5-nav {
display: none;
}
.hero-v5-balloon {
opacity: 0.5;
width: 280px;
right: -10%;
}
.hero-v5-metrics {
flex-direction: column;
align-items: stretch;
}
.hero-v5-metric {
padding: 12px 6px;
}
.hero-v5-metric-divider {
left: 6px;
right: 6px;
top: 0;
transform: none;
width: auto;
height: 1px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
"Get your paid media workflow score" band — sits directly under the hero.
Three zones (copy · forest illustration · frosted glass spend-tier card) on
the shared lavender ground. Static/presentational; tiles are selectable and
the CTA leads to the demo lead form. Stacks vertically below ~900px.
═══════════════════════════════════════════════════════════════════════════ */
.wfs-section {
position: relative;
width: 100%;
background: #dee0ec;
overflow: hidden;
padding: 0 0 clamp(20px, 4vw, 40px);
font-family: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
color: #050505;
-webkit-font-smoothing: antialiased;
}
/* Mirror the hero's container exactly (same max-width + horizontal padding) so
* the copy's left edge lines up with the hero headline and the card lines up
* with the hero's right-column cards. */
.wfs-main {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
/* Mirror .hero-v5-cols: left copy column + right card, balloon-like centered art. */
.wfs-cols {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.wfs-copy { flex: 0 1 520px; max-width: 520px; min-width: 0; z-index: 1; }
.wfs-h2 {
margin: 0;
font-family: inherit;
font-size: 33px;
line-height: 1.12;
letter-spacing: -0.013em;
font-weight: 600;
text-transform: none; /* sentence case — NOT uppercase */
}
.wfs-sub { margin: 15px 0 0; max-width: 300px; font-size: 14px; line-height: 1.5; color: #4f5665; }
/* Forest centered (absolute → out of the flex flow) behind the columns, so it
* lines up with the hero's centered balloon/island. Becomes an in-flow middle
* item (copy → trees → card) when the columns stack on mobile. */
.wfs-trees {
position: absolute;
left: 50%;
top: 50%;
/* +18px matches the hero balloon's optical center (its translateX(-46%)
* offset), so the forest lines up with the balloon/island above it. */
transform: translate(calc(-50% + 18px), -50%);
width: 360px;
height: auto;
object-fit: contain;
z-index: 0;
pointer-events: none;
}
/* Same width + placement as the hero's right-column card AND the same frosted-
* glass recipe (translucent sheen + blur) as "Schedule a SALVO walkthrough". */
.wfs-card {
flex: 0 0 412px;
width: 412px;
margin-right: 40px;
z-index: 2;
border-radius: 22px;
background: linear-gradient(142deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: 0 26px 62px -34px rgba(28, 38, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 20px 22px 18px;
}
.wfs-q { font-size: 18px; font-weight: 600; letter-spacing: -0.008em; line-height: 1.3; color: #0a0c12; }
.wfs-tiers { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wfs-tier {
border-radius: 13px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.55);
padding: 11px 4px 9px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 7px;
cursor: pointer;
transition: background 0.18s cubic-bezier(0.2, 0, 0, 1), border-color 0.18s, transform 0.18s;
}
.wfs-tier:hover {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(54, 174, 239, 0.45);
transform: translateY(-2px);
}
.wfs-tier.is-selected {
background: rgba(54, 174, 239, 0.14);
border-color: rgba(54, 174, 239, 0.7);
}
.wfs-tier span { font-size: 11px; font-weight: 600; color: #3d4250; line-height: 1.25; }
.wfs-cta {
margin-top: 14px;
height: 48px;
border-radius: 14px;
background: #161b2e;
box-shadow: 0 14px 28px -16px rgba(20, 26, 48, 0.6);
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
text-decoration: none;
cursor: pointer;
transition: background 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s, transform 0.18s;
}
.wfs-cta:hover {
background: #10162a;
box-shadow: 0 18px 34px -16px rgba(20, 26, 48, 0.7);
transform: translateY(-1px);
}
.wfs-cta:hover .wfs-arr { transform: translateX(4px); }
.wfs-arr { transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1); }
.wfs-reassure { margin-top: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; }
/* Stack the three zones vertically on narrow viewports: copy → trees → card. */
@media (max-width: 900px) {
.wfs-cols { flex-direction: column; align-items: center; gap: 18px; }
.wfs-copy { flex: none; width: 100%; max-width: 472px; }
.wfs-sub { max-width: none; }
.wfs-trees { position: static; transform: none; width: 240px; }
.wfs-card { flex: none; width: 100%; max-width: 472px; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wfs-tier, .wfs-cta, .wfs-arr { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
"Product" section — design handoff "SALVO Product". A composed 3D scene
(plant vases · glowing stage · two presenters) beside a pure-CSS floating
whiteboard that holds an AI-drafted campaign dashboard, with a left copy
column. Soft-white ground (intentionally lighter than the lavender sections).
Fixed 1140×560 design canvas; scaled to fit narrower viewports (the absolute
scene layout is preserved exactly — only the whole canvas shrinks). The scene
element offsets + z-order live inline (back→front: plants z1 · stage z2 ·
board z3 · figures z4) — the green vase's pot hides behind the stage purely
via z-order + overlap. */
.prod-section {
position: relative;
width: 100%;
background: #f6f8fc;
overflow: hidden;
padding: clamp(20px, 4vw, 40px) 0;
font-family: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
color: #0a0c12;
-webkit-font-smoothing: antialiased;
}
/* Mirror the hero's container + columns: copy is a left flex column (left edge
* aligns with the hero headline), the scene is a right block whose right edge
* aligns with the hero's right-column cards (margin-right 40, like the hero).
* The scene is scaled up (×1.08) to fill the wider grid — the .prod-stage box
* reserves the SCALED size so flex lays it out; the inner .prod-scene keeps its
* 700×470 absolute composition (PNGs unchanged) and scales from bottom-right. */
.prod-main {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(12px, 1.5vw, 24px);
}
.prod-copy { flex: 0 1 430px; min-width: 0; position: relative; z-index: 6; }
.prod-stage { flex: 0 0 756px; position: relative; height: 508px; margin-right: 40px; }
.prod-scene {
position: absolute;
right: 0;
bottom: 0;
width: 700px;
height: 470px;
transform: scale(1.08);
transform-origin: bottom right;
}
@media (max-width: 1180px) { .prod-stage { flex-basis: 700px; height: 470px; } .prod-scene { transform: scale(1); } }
@media (max-width: 920px) {
.prod-main { flex-direction: column; align-items: center; gap: 16px; }
.prod-copy { flex: none; width: 100%; max-width: 520px; }
.prod-stage { flex: none; width: 540px; height: 363px; margin-right: 0; }
.prod-scene { transform: scale(0.77); }
}
@media (max-width: 600px) {
.prod-stage { width: 360px; height: 242px; }
.prod-scene { transform: scale(0.51); }
}
/* Small phones: shrink the product scene so the stage fits the available
content width (`.prod-main` keeps side padding and the section clips
overflow), instead of being cut off at a fixed 360px. */
@media (max-width: 420px) {
.prod-stage { width: 300px; height: 202px; }
.prod-scene { transform: scale(0.426); }
}
@media (max-width: 360px) {
.prod-stage { width: 268px; height: 180px; }
.prod-scene { transform: scale(0.382); }
}
/* ═══════════════════════════════════════════════════════════════════════════
"Capabilities" section — design handoff "SALVO Capabilities". A left copy
column beside four browser-window cards (Draft → Approval → Launch → Audit)
connected by indigo arrows, with 3D tree/cloud props. The Audit card is
intentionally tilted + dropped; each 3D icon carries a per-icon scale() (in
the markup) so the different transparent paddings render at one visual size.
Fixed 1360×392 canvas scaled to fit narrower viewports. */
.caps-section {
position: relative;
width: 100%;
background: #f4f5fb;
overflow: hidden;
padding: clamp(20px, 4vw, 40px) 0 6px; /* tight bottom — sits right above How-it-works */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
color: #10121c;
-webkit-font-smoothing: antialiased;
}
.caps-fit { display: flex; justify-content: center; height: 392px; }
.caps { flex: none; position: relative; width: 1360px; height: 392px; transform-origin: top center; }
.caps .card {
transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
min-height: 214px;
}
.caps .card:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -28px rgba(40, 44, 90, 0.4); }
.caps .card.audit-card { transform: translateY(24px) rotate(5deg); }
.caps .card.audit-card:hover { transform: translateY(19px) rotate(5deg); }
.caps .card.launch-card { transform: translateY(0px) rotate(0deg); }
.caps .card.launch-card:hover { transform: translateY(-5px) rotate(0deg); }
.caps .card span { white-space: nowrap; }
@media (max-width: 1400px) { .caps-fit { height: 361px; } .caps { transform: scale(0.92); } }
@media (max-width: 1200px) { .caps-fit { height: 314px; } .caps { transform: scale(0.80); } }
@media (max-width: 1000px) { .caps-fit { height: 259px; } .caps { transform: scale(0.66); } }
@media (max-width: 820px) { .caps-fit { height: 212px; } .caps { transform: scale(0.54); } }
@media (max-width: 640px) { .caps-fit { height: 165px; } .caps { transform: scale(0.42); } }
@media (max-width: 480px) { .caps-fit { height: 129px; } .caps { transform: scale(0.33); } }
/* Small phones: keep stepping the scale down so the fixed 1360px canvas always
fits inside the viewport (the section clips overflow), down to ~306px wide. */
@media (max-width: 440px) { .caps-fit { height: 114px; } .caps { transform: scale(0.29); } }
@media (max-width: 400px) { .caps-fit { height: 102px; } .caps { transform: scale(0.26); } }
@media (max-width: 360px) { .caps-fit { height: 94px; } .caps { transform: scale(0.24); } }
@media (max-width: 330px) { .caps-fit { height: 88px; } .caps { transform: scale(0.225); } }
/* Decorative cloud drifts slowly side to side (it sits near the right edge, so
* it drifts left and back to stay in view). Gentle ease for a soft float. */
@keyframes capsCloudDrift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-46px); }
}
.caps-cloud { animation: capsCloudDrift 16s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.caps .card { transition: none !important; }
.caps-cloud { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
"How it works" — 6-feature grid (design handoff "SALVO How It Works"). Each
card pairs a left text column (3D icon + title + desc + example) with a mock
UI panel; a full-width workflow strip sits below. Fluid 3-col grid (→2→1),
so no fixed-canvas scaling needed. Per-icon scale() (area-equalized) stays in
the markup. Soft cool-grey ground. */
.hiw-section {
position: relative;
z-index: 10; /* paint the grid ABOVE the Capabilities trees (their img z-index is 5 in the root stacking context), so the rising How-it-works covers them */
width: 100%;
background: #f4f5fa;
overflow: hidden;
margin-top: -90px; /* pull the How-it-works grid up onto the Capabilities canvas's empty band — close enough to overlap the single tree's podium, but low enough that the double tree under the Audit card stays visible; responsive values below track the Capabilities scale */
padding: 4px 0 clamp(28px, 4vw, 44px);
font-family: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
color: #14161f;
-webkit-font-smoothing: antialiased;
}
.hiw { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
/* Equal columns: minmax(0,1fr) (not bare 1fr = minmax(auto,1fr)) so a track
* never grows to its content — every card is the same width. 3 across by
* default with a smaller left text column and a scaled-down mock panel so the
* dense UIs stay inside their boxes. */
.hiw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hiw .feat {
min-width: 0;
box-shadow: 0 14px 34px -22px rgba(40, 44, 90, 0.22);
transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.hiw .feat:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(40, 44, 90, 0.3); }
/* Shrink the mock-UI panel (right column) so its content fits the narrower box. */
.hiw .feat > div:last-child { zoom: 0.82; }
.hiw-strip-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) { .hiw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .hiw-grid { grid-template-columns: 1fr; } }
/* Negative-margin pull-up tracks the Capabilities canvas scale so the grid keeps
* covering the trees by the same proportion at every width (the grid still paints
* above them via z-index). */
@media (max-width: 1400px) { .hiw-section { margin-top: -83px; } }
@media (max-width: 1200px) { .hiw-section { margin-top: -72px; } }
@media (max-width: 1000px) { .hiw-section { margin-top: -59px; } }
@media (max-width: 820px) { .hiw-section { margin-top: -49px; } }
@media (max-width: 640px) { .hiw-section { margin-top: -38px; } }
@media (max-width: 480px) { .hiw-section { margin-top: -24px; } }
@media (max-width: 520px) {
.hiw .feat { flex-direction: column; gap: 14px; }
.hiw .feat > div:first-child { flex: none !important; }
.hiw .feat > div:last-child { zoom: 1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hiw .feat { transition: none !important; } }
/* ═══════════════════════════════════════════════════════════════════════════
Hero animation band — "AI ad orchestration" canvas scene (replaces the old
workflow-pipeline + who-it's-for sections). A fixed 1360×720 stage holds a