/* Authored website foundation. Opt in with .b-visual; never generated from SCSS. */
.b-site {
    --b-visual-dark-surface: var(--b-site-dark-surface);
    --b-visual-dark-hero-background: var(--b-site-hero-background);
}
/* Match navigation to any opted-in dark hero, including the homepage.
   ThemeService still controls the page and dropdown menu theme. */
.b-site:has(#home-content, .b-marketing-header--dark) .b-top-bar {
    --b-link-text-color: #d0cbd5;
    --bs-navbar-color: #d0cbd5;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #dfa8ff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: #706976;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d0cbd5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    height: auto !important;
    min-height: 4rem;
    color: #d0cbd5;
    background: var(--b-visual-dark-hero-background) !important;
    border-bottom-color: var(--b-site-dark-border);
}
.b-site:has(#home-content, .b-marketing-header--dark) .b-top-bar .navbar-brand .nav-link { color: #fff; }
.b-site:has(#home-content, .b-marketing-header--dark) .b-top-bar .navbar-nav .nav-link:is(:hover, :focus-visible, .active, .show) {
    color: #dfa8ff;
    background-color: #302737;
}
.b-site:has(#home-content, .b-marketing-header--dark) .b-top-bar :is(.nav-link, .navbar-brand, .navbar-toggler):focus-visible {
    outline: 2px solid #dfa8ff;
    outline-offset: 2px;
}
.b-site:has(#home-content, .b-marketing-header--dark) .b-top-bar .navbar-collapse { min-width: 0; flex-wrap: wrap; }
.b-visual {
    --b-visual-violet: #9317e1;
    --b-visual-pink: #e03d76;
    --b-visual-lilac: #bb61f6;
    --b-visual-ink: #17151c;
    --b-visual-paper: #faf9f6;
    --b-visual-panel: var(--bs-body-bg);
    --b-visual-muted: #625f6b;
    --b-visual-line: #dedbe3;
    --b-visual-space: .25rem;
    --b-visual-gutter: clamp(1.25rem, 4vw, 3rem);
    --b-visual-section: clamp(3.5rem, 7vw, 6.5rem);
    --b-visual-hero-min-height: 35.5rem;
    --b-visual-hero-padding-top: clamp(3.5rem, 6vw, 5.5rem);
    --b-visual-hero-padding-bottom: 2rem;
    --b-visual-container: 78rem;
    --b-visual-display: clamp(2.65rem, 4.9vw, 4.75rem);
    --b-visual-heading: clamp(2rem, 3.4vw, 3.25rem);
    --b-visual-body: clamp(1rem, 1.3vw, 1.125rem);
    --b-visual-radius: .625rem;
    color: var(--b-visual-ink);
    background: var(--b-visual-paper);
    font-family: Inter, Arial, sans-serif;
    font-size: var(--b-visual-body);
    line-height: 1.65;
    letter-spacing: -.015em;
}

.b-visual-container,
.b-visual-section > .container {
    width: 100%;
    max-width: var(--b-visual-container);
    margin-inline: auto;
    padding-inline: var(--b-visual-gutter);
}

.b-visual-section { padding-block: var(--b-visual-section); }
.b-visual-section > .container { padding-block: 0 !important; }
.b-visual h1, .b-visual h2, .b-visual h3 { color: inherit; text-wrap: balance; }
.b-visual h2 { font-size: var(--b-visual-heading); line-height: 1.12; letter-spacing: -.045em; }
.b-visual h3 { letter-spacing: -.025em; }
.b-visual .lead { font-size: var(--b-visual-body); line-height: 1.7; }
.b-visual .text-muted { color: var(--b-visual-muted) !important; }
.b-visual-section > .container > .text-center:first-child { max-width: 48rem; margin-inline: auto; margin-bottom: 2.5rem !important; }
.b-visual a:not(.btn):not(.b-visual-button) { text-underline-offset: .22em; }
/* Native form controls keep their provider's focus border and shadow. */
.b-visual :focus-visible:not(input):not(textarea):not(select) { outline: 3px solid #b551ee !important; outline-offset: 5px; }
@media (forced-colors: active) {
    .b-visual :is(input, textarea, select):focus-visible { outline: 2px solid Highlight !important; outline-offset: 0; }
}
.b-visual .card { border-color: var(--b-visual-line); }
.b-visual-section:not(.b-visual-showcase):not(.b-visual-utility) .card {
    border-radius: var(--b-visual-radius) !important;
    box-shadow: none !important;
    background: var(--b-visual-panel);
}
.b-visual-section:not(.b-visual-showcase) .card-body { padding: 1.75rem; }
.b-visual .btn { border-radius: .375rem; font-weight: 600; }
.b-visual-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 3.25rem;
    padding: .85rem 1.4rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease;
}
.b-visual-button--primary { background: #a22bed; color: #fff !important; }
.b-visual-button--primary:hover { background: #8f1ed9; }
.b-visual-button--outline { border-color: #706976; color: #fff !important; background: transparent; }
.b-visual-button--outline:hover { background: #302737; }
.b-visual-button--light { color: #23102f !important; background: #fff; }
.b-visual-button--light:hover { background: #f0defa; }
.b-visual-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; line-height: 1.6; }
.b-visual-hero { position: relative; overflow: hidden; background: var(--b-visual-dark-hero-background); color: #fff; }
.b-visual-hero__grid { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; }
/* Shared hero dimensions reserve space without clipping longer or enlarged copy. */
.b-visual-hero__grid { min-height: var(--b-visual-hero-min-height); align-items: start; padding-block: var(--b-visual-hero-padding-top) var(--b-visual-hero-padding-bottom); }
.b-visual .b-visual-hero__copy > .b-visual-eyebrow { margin: 0 0 1.5rem; line-height: 1.6; }
.b-visual-hero h1 { font-size: var(--b-visual-display); line-height: 1.04; font-weight: 700; letter-spacing: -.065em; margin: 0; text-wrap: initial; }
.b-visual-hero h1 span { color: #dda8ff; }
.b-visual-hero .b-visual-eyebrow { color: #e3c4f6; }
.b-visual-hero__description { max-width: 35rem; color: #d0cbd5; margin-block: 1.75rem; font-size: 1.125rem; }
.b-visual-hero__note { margin: 1.25rem 0 0; color: #bcb5c5; font-size: .8rem; }
.b-visual-hero__copy { position: relative; z-index: 1; }
/* Break artwork out of the centered content grid to meet both viewport edges. */
.b-visual-hero__art { position: absolute; inset: 0 calc((100% - 100vw) / 2); pointer-events: none; }
.b-visual-hero__flow { position: absolute; inset: 0 0 -320px; -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 70%); mask-image: linear-gradient(90deg, transparent 42%, #000 70%); }
.b-visual-hero__flow svg { display: block; width: 100%; height: 100%; }
.b-visual-art-label { position: absolute; color: #bdb2c9; font: .6rem ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.b-visual-art-label--top { top: 2rem; left: calc(50% + 4rem); }
.b-visual-art-label--bottom { bottom: 1.5rem; right: 15%; color: #fff; }
.b-visual-facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 2rem; align-items: center; border-top: 1px solid #423a49; padding-block: 2rem; }
.b-visual-facts > div { display: flex; gap: .4rem; flex-direction: column; }
.b-visual-facts strong { font-size: 1.65rem; letter-spacing: -.045em; line-height: 1.2; }
.b-visual-facts span { color: #bcb5c5; font-size: .8rem; }
.b-visual-facts a { color: #e1b4fa; font-size: .9rem; }
.b-visual-product { position: relative; z-index: 1; margin: 0 0 3rem; padding: .75rem; border: 1px solid #726078; border-radius: .75rem; background: linear-gradient(115deg, #9317e1, #e03d76); }
.b-visual-product__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .6rem; padding: .65rem .75rem; border-radius: .25rem; color: #fff; background: #23102f; font: .65rem ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.b-visual-product__header h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.b-visual-trust { background: #fff; padding-block: 2.75rem; border-bottom: 1px solid var(--b-visual-line); }
.b-visual-trust h2 { font-size: 1rem; letter-spacing: -.01em; }
.b-visual-trust .lead { font-size: .85rem; margin-bottom: 2rem; }
.b-visual-trust .container > .row:last-child { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); align-items: center; gap: 1.5rem; margin: 0; }
.b-visual-trust .container > .row:last-child > div { width: auto; padding: 0; }
.b-visual-trust img { width: 100%; max-width: 100px; height: 35px; object-fit: contain; }
.b-visual-showcase { color: var(--bs-body-color); background: #efeaf5; border-radius: .3rem; --b-visual-muted: var(--bs-secondary-color); }
.b-visual-showcase .b-site-demo { padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid #d1c8dc; border-radius: 1rem; background: #f7f5fb; }
.b-visual-showcase .card { color: var(--bs-body-color); background: var(--bs-body-bg); }
.b-visual-showcase h3 { font-size: 1rem; }
.b-visual-showcase .b-site-demo { --b-visual-muted: var(--bs-secondary-color); }
.b-visual-showcase__more { border-top: 1px solid var(--b-visual-line); }
.b-visual-showcase__more > summary { padding: 1rem .25rem; color: var(--bs-body-color); font-size: 1rem; font-weight: 600; cursor: pointer; }
.b-visual-showcase__more > summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.b-visual-building-blocks .card { border-top: 3px solid var(--b-visual-violet); }
.b-visual-building-blocks .row > div:nth-child(2n) .card { border-top-color: var(--b-visual-pink); }
.b-visual-building-blocks .card h3 { font-size: 1.35rem; }
.b-visual-building-blocks .card a { font-weight: 600; }
.b-visual-frameworks { background: var(--b-visual-dark-surface); color: #fff; --b-visual-muted: #c2b9cc; --b-visual-line: #53465e; }
.b-visual-frameworks .card { background: #292330 !important; color: #fff; }
.b-visual-frameworks .card-body { padding: 1.5rem !important; }
.b-visual-frameworks .card-body > div:last-child { flex-wrap: wrap; }
.b-visual-frameworks a:not(.btn) { color: #e1b4fa; }
.b-visual-frameworks .btn { color: #ecd3fa; border-color: #a482b7; }
.b-visual-frameworks .btn:hover { color: #fff; background: #692c92; border-color: #c6a3db; }
.b-visual-frameworks img { flex-shrink: 0; box-sizing: content-box; padding: .25rem; border-radius: .375rem; background: #fff; }
.b-visual-utility { background: #ede7f5; }
.b-visual-utility .card { overflow: hidden; }
.b-utility-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
.b-utility-copy { min-width: 0; }
.b-utility-copy h2 { margin-top: 0; }
.b-utility-example { order: -1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--b-visual-line); border-radius: .75rem; overflow: hidden; background: var(--b-visual-panel); color: var(--bs-body-color); }
.b-utility-example__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--b-visual-line); font-size: .8rem; }
.b-utility-example__header span { color: var(--bs-secondary-color); }
.b-utility-example__code { padding: 1.25rem; }
.b-utility-example__code .blazorise-codeblock, .b-utility-example__code pre { height: auto; max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; }
.b-utility-example__code pre { font-size: .75rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.b-utility-example__preview { margin-top: auto; padding: 1.25rem; border-top: 1px solid var(--b-visual-line); background: var(--b-visual-paper); }
.b-utility-example__preview .b-visual-eyebrow { margin-bottom: .75rem; color: var(--b-visual-muted); }
.b-utility-example__preview .card { font-size: 1rem; }
@media (max-width: 991.98px) {
    .b-utility-grid { grid-template-columns: minmax(0, 1fr); }
    .b-utility-example { order: 0; }
}
.b-visual-testimonials .card { border: none; background: transparent !important; border-left: 1px solid var(--b-visual-line) !important; border-radius: 0 !important; }
.b-visual-testimonials blockquote { padding: 0; margin-top: 1rem; color: inherit; background: transparent; border: 0; font-size: 1.1rem; }
.b-visual-promo { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--b-visual-section); background: #49147b; color: #fff; }
.b-visual-promo > .b-brand-backdrop { z-index: -1; opacity: .15; left: 45%; transform: rotate(-15deg) scale(1.4); }
.b-visual-promo__content { display: grid; grid-template-columns: 1.7fr 1fr; align-items: center; gap: 4rem; }
.b-visual-promo h2 { margin-block: 1.25rem; }
.b-visual-promo p:not(.b-visual-eyebrow) { max-width: 40rem; color: #ecdff8; }
.b-visual-promo__link { color: #fff !important; text-align: center; font-size: .9rem; }
.b-visual-resources .card { background: #f0ebf6 !important; }
.b-visual-community { border-top: 1px solid var(--b-visual-line); }
.b-visual-newsletter { padding-top: 0; }
#framework-demos { scroll-margin-top: 2rem; }

/* Put the glow outside its surface so clipped artwork can keep its existing bounds.
   The host deliberately has no isolation or z-index: neighbors share the page layers. */
.b-background-glow-host { position: relative; overflow: visible; }
.b-background-glow-host > :not(.b-background-glow) { position: relative; z-index: 2; }
.b-background-glow {
    position: absolute;
    z-index: 1;
    left: var(--b-glow-x);
    top: var(--b-glow-y);
    width: calc(var(--b-glow-width) + var(--b-glow-spread) * 2);
    height: calc(var(--b-glow-height) + var(--b-glow-spread) * 2);
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse 35% 50% at 35% 50%, var(--b-glow-primary), transparent),
        radial-gradient(ellipse 35% 50% at 65% 50%, var(--b-glow-secondary), transparent);
    opacity: var(--b-glow-intensity);
    pointer-events: none;
    user-select: none;
}
/* Linear washes fade independently on both axes, avoiding a rectangular cutoff. */
.b-background-glow[data-variant="halo"],
.b-background-glow[data-variant="band"],
.b-background-glow[data-variant="diagonal"] {
    background: linear-gradient(90deg, var(--b-glow-primary), var(--b-glow-secondary));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.b-background-glow[data-variant="band"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 45%, #000 55%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 45%, #000 55%, transparent);
}
.b-background-glow[data-variant="diagonal"] {
    background: linear-gradient(125deg, transparent 10%, var(--b-glow-primary) 35%, var(--b-glow-secondary) 65%, transparent 90%);
}
.b-background-glow[data-variant="cloud"] {
    background:
        radial-gradient(ellipse 32% 42% at 32% 42%, var(--b-glow-primary), transparent),
        radial-gradient(ellipse 30% 38% at 55% 38%, var(--b-glow-secondary), transparent),
        radial-gradient(ellipse 28% 40% at 72% 60%, var(--b-glow-primary), transparent),
        radial-gradient(ellipse 32% 35% at 42% 65%, var(--b-glow-secondary), transparent);
}
[data-bs-theme="dark"] .b-background-glow { opacity: var(--b-glow-dark-intensity); }

/* Section artwork shares a page-level layer so neighboring backgrounds cannot cut it off.
   Keep decorated sections full width; containers belong inside them. */
.b-decorated-page { position: relative; isolation: isolate; overflow: clip; }
.b-decorated-page > .b-decorated-section { position: relative; isolation: auto; overflow: visible; }
.b-decorated-page > .b-visual-section > .container,
.b-decorated-page > .b-visual-section > .b-visual-container { position: relative; z-index: 2; }
.b-section-decoration-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.b-section-decoration-layer[data-clip="true"] { overflow: clip; }
/* Blend the whole artwork layer with section surfaces, below the content layer. */
.b-section-decoration-layer[data-blend="softlight"] { mix-blend-mode: soft-light; }
.b-section-decoration {
    --b-decoration-size: clamp(280px, 28vw, 480px);
    position: absolute;
    z-index: 1;
    top: calc(50% + var(--b-decoration-offset));
    width: var(--b-decoration-size);
    aspect-ratio: 5 / 6;
    transform: translateY(-50%);
    opacity: var(--b-decoration-opacity);
    pointer-events: none;
    user-select: none;
}
.b-section-decoration[data-fade="true"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.b-section-decoration--right { right: calc(var(--b-decoration-size) * -.48); }
.b-section-decoration--left { left: calc(var(--b-decoration-size) * -.48); transform: translateY(-50%) scaleX(-1); }
.b-section-decoration[data-size="small"] { --b-decoration-size: clamp(200px, 20vw, 336px); }
.b-section-decoration[data-size="large"] { --b-decoration-size: clamp(336px, 36vw, 640px); }
.b-section-decoration[data-placement="top"] { top: var(--b-decoration-offset); }
.b-section-decoration[data-placement="bottom"] { top: calc(100% + var(--b-decoration-offset)); }
.b-section-decoration__art { position: absolute; inset: 0; transform: rotate(var(--b-decoration-rotation)); }
.b-section-decoration .b-brand-backdrop,
.b-section-decoration .b-brand-backdrop svg { overflow: visible; }
@media (max-width: 1199.98px) {
    .b-section-decoration { opacity: calc(var(--b-decoration-opacity) * .35); }
}
@media (max-width: 767.98px) {
    .b-section-decoration[data-size] { --b-decoration-size: 192px; opacity: calc(var(--b-decoration-opacity) * .2); }
}

/* Reusable decorative primitives. Fixed geometry is identical across prerender/hydration. */
.b-brand-backdrop {
    --b-art-step: 32px;
    --b-art-ink: #17151c;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.b-brand-backdrop[data-tone="dark"] { --b-art-ink: #fff; }
.b-brand-backdrop[data-density="low"] { --b-art-step: 56px; }
.b-brand-backdrop[data-density="high"] { --b-art-step: 18px; }
.b-brand-backdrop svg { width: 100%; height: 100%; display: block; }
.b-brand-backdrop--gradientmesh { background: radial-gradient(ellipse at 15% 30%, var(--b-art-primary), transparent 65%), radial-gradient(ellipse at 90% 75%, var(--b-art-secondary), transparent 65%), var(--b-art-accent); }
.b-brand-backdrop--pixelgrid { background-image: linear-gradient(var(--b-art-primary) 1px, transparent 1px), linear-gradient(90deg, var(--b-art-primary) 1px, transparent 1px); background-size: var(--b-art-step) var(--b-art-step); }
.b-brand-backdrop--dotfield { background-image: radial-gradient(var(--b-art-primary) 1.5px, transparent 1.5px); background-size: var(--b-art-step) var(--b-art-step); }
.b-brand-backdrop--layeredlines { background: repeating-linear-gradient(125deg, transparent 0, transparent calc(var(--b-art-step) - 2px), var(--b-art-primary) calc(var(--b-art-step) - 2px), var(--b-art-primary) var(--b-art-step)); }
.b-brand-backdrop--colorblocks { background: conic-gradient(from 90deg, var(--b-art-primary) 25%, var(--b-art-accent) 0 50%, transparent 0 75%, var(--b-art-secondary) 0); background-size: calc(var(--b-art-step) * 5) calc(var(--b-art-step) * 5); }
.b-brand-backdrop--gradientmesh::after { content: ""; position: absolute; inset: 0; opacity: .08; background: repeating-radial-gradient(circle at 17% 32%, var(--b-art-ink) 0 1px, transparent 1px 3px); }
.b-brand-backdrop--geometricstack[data-density="low"] svg { transform: scale(.8); }
.b-brand-backdrop--geometricstack[data-density="high"] svg { transform: scale(1.15); }
.b-brand-backdrop--circuit[data-density="low"] svg { transform: scale(1.5); }
.b-brand-backdrop--circuit[data-density="high"] svg { transform: scale(.8); }
.b-brand-backdrop--gradientmesh[data-density="low"]::after { opacity: .03; }
.b-brand-backdrop--gradientmesh[data-density="high"]::after { opacity: .15; }

@media (prefers-reduced-motion: no-preference) {
    .b-brand-backdrop[data-animated="true"] { animation: b-visual-drift 8s ease-in-out infinite alternate; }
    .b-visual-button:hover { transform: translateY(-2px); }
    @keyframes b-visual-drift { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
}
@media (prefers-reduced-motion: reduce) {
    .b-visual *, .b-visual *::before, .b-visual *::after, .b-brand-backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Theme preference remains owned by the existing website ThemeService. */
[data-bs-theme="dark"] .b-visual {
    --b-visual-paper: var(--b-site-dark-surface);
    --b-visual-panel: var(--b-site-dark-raised);
    --b-visual-ink: #f4eff8;
    --b-visual-muted: #c2b9cc;
    --b-visual-line: var(--b-site-dark-border);
}
[data-bs-theme="dark"] .b-visual-trust { background: #eee9f4; color: #211a2a; --b-visual-muted: #62566e; }
[data-bs-theme="dark"] .b-visual-showcase,
[data-bs-theme="dark"] .b-visual-utility { background: var(--b-site-dark-raised); }
[data-bs-theme="dark"] .b-visual-showcase .b-site-demo { background: var(--b-site-dark-surface); border-color: var(--b-site-dark-border); }
[data-bs-theme="dark"] .b-visual-resources .card,
[data-bs-theme="dark"] .b-visual-frameworks .card { background: var(--b-visual-panel) !important; }

@media (max-width: 1199.98px) {
    .b-visual-facts { grid-template-columns: repeat(3, 1fr); }
    .b-visual-facts > a { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    .b-visual { --b-visual-hero-min-height: 0; --b-visual-hero-padding-top: 3.5rem; --b-visual-hero-padding-bottom: 3.5rem; }
    .b-visual-hero__grid { grid-template-columns: 1fr; }
    .b-visual-hero__copy { max-width: 42rem; }
    .b-visual-hero h1 { font-size: clamp(2.65rem, 7vw, 4.75rem); }
    .b-visual-hero__art { opacity: .12; }
    .b-visual-hero__flow { bottom: -160px; }
    .b-visual-hero__copy { position: relative; z-index: 1; }
    .b-visual-art-label { display: none; }
    .b-visual-facts { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .b-visual-facts > a { grid-column: 1 / -1; }
    .b-visual-trust .container > .row:last-child { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .b-visual-promo__content { grid-template-columns: 1fr; gap: 1.5rem; }
    .b-visual-promo__content > div:last-child { align-items: flex-start; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .b-visual-frameworks .row > div,
    .b-visual-building-blocks .row > div { width: 50%; }
}
@media (max-width: 575.98px) {
    .b-visual-hero h1 { max-width: 7.5em; min-height: 4.16em; }
    .b-visual-facts strong { font-size: 1.25rem; }
    .b-visual-facts span { font-size: .7rem; }
    .b-visual-trust .container > .row:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .b-visual-hero__description { font-size: 1rem; }
    .b-visual-actions { flex-direction: column; }
    .b-visual-button { justify-content: space-between; }
    .b-visual-section > .container > .text-center:first-child { text-align: left !important; }
    .b-visual .b-site-demo .card-body { padding: 1rem !important; }
    .b-visual-showcase .b-site-demo { padding: .5rem; }
}

/* Landscape accents occupy their own lower edge, clear of text and controls. */
.b-visual-landscape { --b-landscape-height: clamp(5rem, 9vw, 9rem); position: relative; isolation: isolate; overflow: hidden; padding-bottom: calc(var(--b-visual-section) + var(--b-landscape-height)); }
.b-visual-landscape__art { position: absolute; inset: auto 0 0; height: var(--b-landscape-height); z-index: -1; pointer-events: none; }
.b-visual-landscape__art .b-brand-backdrop { inset: -35% 0 0; }
@media (max-width: 575.98px) {
    .b-visual-landscape { --b-landscape-height: 4rem; }
}

/* Compact homepage callout: deeper waves may sit beneath copy in dark brand tones. */
.b-visual-promo.b-visual-landscape { padding-block: clamp(2rem, 3vw, 3rem) clamp(6rem, 8vw, 7.5rem); }
.b-visual-promo .b-visual-landscape__art { height: clamp(12rem, 20vw, 22rem); }
.b-visual-promo .b-visual-landscape__art .b-brand-backdrop { inset: 0; }
.b-visual-promo h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-block: 1rem; }
.b-visual-promo__content p:last-child { margin-bottom: 0; }