:root{--v4-blue:#4f8dff;--v4-hue-foundation:var(--vd-cyan);--v4-hue-economy:var(--vd-violet);--v4-hue-crime:var(--vd-magenta);--v4-hue-law:var(--v4-blue);--v4-hue-event:var(--vd-magenta);--v4-hue:var(--vd-cyan);--v4-hue-14:color-mix(in srgb,var(--v4-hue) 14%,transparent);--v4-hue-30:color-mix(in srgb,var(--v4-hue) 30%,transparent);--v4-hue-55:color-mix(in srgb,var(--v4-hue) 55%,transparent);--v4-conic:conic-gradient(from var(--v4-angle,0deg),var(--vd-cyan-45),var(--vd-violet-40),var(--vd-magenta-40),transparent 55%,transparent 80%,var(--vd-cyan-45));--v4-grid:color-mix(in srgb,var(--vf-text) 4.5%,transparent);--mx:50%;--my:50%}@property --v4-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.vd-page-hub,[data-art=foundation],[data-art=free-tools]{--v4-hue:var(--v4-hue-foundation)}[data-art=economy],[data-art=pecon]{--v4-hue:var(--v4-hue-economy)}[data-art=crime]{--v4-hue:var(--v4-hue-crime)}[data-art=law]{--v4-hue:var(--v4-hue-law)}[data-art=event]{--v4-hue:var(--v4-hue-event)}.vd-page-pdp{--v4-hue:var(--vd-violet)}.vd-page-read{--v4-hue:var(--vd-cyan)}.v4-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--vf-bg)}.v4-field:before{content:"";position:absolute;inset:-20%;background:radial-gradient(38% 30% at 22% 18%,var(--vd-atmo-1),transparent 70%),radial-gradient(34% 28% at 78% 12%,var(--vd-atmo-2),transparent 70%),radial-gradient(40% 34% at 60% 88%,var(--vd-atmo-3),transparent 70%);filter:saturate(1.15);animation:v4-aurora 36s ease-in-out infinite alternate;will-change:transform}.v4-field:after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--v4-grid) 1px,transparent 1px),linear-gradient(90deg,var(--v4-grid) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 60% at 50% 30%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 20%,transparent 100%);transform:perspective(900px) rotateX(58deg) translateY(-12%);transform-origin:50% 0;opacity:.8}.v4-vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 0,transparent 40%,color-mix(in srgb,var(--vf-bg) 70%,black) 100%)}@keyframes v4-aurora{0%{transform:translateZ(0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,-2%,0) rotate(4deg) scale(1.06)}to{transform:translate3d(-3%,2%,0) rotate(-3deg) scale(1.03)}}.v4-pointer{position:fixed;left:0;top:0;z-index:0;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,var(--vd-cyan-14) 0,var(--vd-violet-14) 30%,transparent 62%);transform:translate3d(var(--px,-1000px),var(--py,-1000px),0);transition:opacity .4s var(--vf-ease);opacity:0;mix-blend-mode:screen}@media (hover:hover) and (pointer:fine){.v4-pointer{opacity:.55}}.v4-panel,.vd-card,.vd-surface{position:relative;isolation:isolate;background:radial-gradient(240px 160px at var(--mx) var(--my),var(--v4-hue-14),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--vf-surface) 92%,white),var(--vf-surface));border:1px solid transparent;border-radius:14px;box-shadow:var(--vf-shadow-1);transition:transform var(--vf-hover) var(--vf-ease-out),box-shadow var(--vf-hover) var(--vf-ease),background var(--vf-hover) var(--vf-ease)}.v4-panel:before,.vd-card:before,.vd-surface:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:var(--v4-conic);-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;opacity:.55;transition:opacity var(--vf-hover) var(--vf-ease)}@media (hover:hover) and (pointer:fine){.v4-panel:hover,.vd-card:hover,.vd-surface-lift:hover{transform:translateY(-4px);box-shadow:var(--vf-shadow-2),0 0 0 1px var(--v4-hue-30),0 24px 64px -24px var(--v4-hue-55)}.v4-panel:hover:before,.vd-card:hover:before,.vd-surface-lift:hover:before{opacity:1;animation:v4-spin 2.4s linear infinite}}@keyframes v4-spin{to{--v4-angle:360deg}}.vd-cover{border-radius:12px 12px 0 0;overflow:hidden}.vd-cover:after{content:"";position:absolute;inset:10px;pointer-events:none;background:linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 0 0 /14px 1px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 0 0 /1px 14px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 100% 0 /14px 1px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 100% 0 /1px 14px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 0 100% /14px 1px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 0 100% /1px 14px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 100% 100% /14px 1px no-repeat,linear-gradient(var(--v4-hue-55),var(--v4-hue-55)) 100% 100% /1px 14px no-repeat;opacity:.7;transition:inset var(--vf-hover) var(--vf-ease-out),opacity var(--vf-hover) var(--vf-ease)}.vd-card:hover .vd-cover:after{inset:6px;opacity:1}.vd-cover>.vd-cover-floor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,black 22%,transparent) 3px 4px);opacity:.35;pointer-events:none}.vd-cover-code{letter-spacing:.22em;text-shadow:0 0 12px var(--v4-hue-55)}.vd-pillar{background:color-mix(in srgb,var(--v4-hue) 18%,var(--vd-ink));border:1px solid var(--v4-hue-30);color:var(--vf-text);border-radius:999px;padding:4px 10px;font-family:var(--font-jbmono),ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}.vf-display-hero{background:linear-gradient(100deg,var(--vf-text) 0,var(--vf-text) 45%,var(--vd-cyan) 62%,var(--vd-violet) 80%,var(--vd-magenta) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v4-ink 9s ease-in-out infinite alternate;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--vd-cyan) 22%,transparent))}@keyframes v4-ink{0%{background-position:0 50%}to{background-position:100% 50%}}.vf-display-section{position:relative;background:linear-gradient(95deg,var(--vf-text),color-mix(in srgb,var(--vf-text) 72%,var(--v4-hue)));-webkit-background-clip:text;background-clip:text;color:transparent}[data-ledger]{position:relative}[data-ledger]:before{content:attr(data-ledger);position:absolute;right:-.05em;top:-.35em;z-index:-1;font-family:var(--font-inter),system-ui,sans-serif;font-weight:800;font-size:clamp(120px,22vw,320px);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--v4-hue-30);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.9;mask-image:linear-gradient(180deg,#000 30%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent)}.vf-kicker{position:relative}.vf-kicker:before{box-shadow:0 0 0 0 var(--v4-hue-55);animation:v4-pulse 2.6s ease-out infinite}@keyframes v4-pulse{0%{box-shadow:0 0 0 0 var(--v4-hue-55)}to{box-shadow:0 0 0 10px transparent}}.v4-ticker{position:relative;overflow:hidden;border-top:1px solid var(--vf-line);border-bottom:1px solid var(--vf-line);background:linear-gradient(90deg,var(--vf-bg),color-mix(in srgb,var(--vf-surface) 60%,var(--vf-bg)),var(--vf-bg));mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.v4-ticker__track{display:flex;width:-moz-max-content;width:max-content;gap:0;animation:v4-marquee 48s linear infinite;will-change:transform}.v4-ticker:hover .v4-ticker__track{animation-play-state:paused}.v4-ticker__item{display:inline-flex;align-items:center;gap:14px;padding:12px 22px;font-family:var(--font-jbmono),ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vf-text-2);white-space:nowrap}.v4-ticker__item b{color:var(--vf-text);font-weight:600}.v4-ticker__item i{width:6px;height:6px;border-radius:50%;background:var(--v4-hue);box-shadow:0 0 10px var(--v4-hue)}@keyframes v4-marquee{to{transform:translate3d(-50%,0,0)}}.btn-primary{background:var(--vd-gradient);background-size:200% 200%;animation:v4-ink 6s ease-in-out infinite alternate;box-shadow:0 0 0 1px var(--vd-cyan-24),0 10px 34px -10px color-mix(in srgb,var(--vd-violet) 55%,transparent)}@media (hover:hover) and (pointer:fine){.btn-primary:hover{transform:translateY(-2px) scale(1.02)}.btn-secondary:hover{background:color-mix(in srgb,var(--vf-surface) 80%,transparent);box-shadow:0 0 0 1px var(--v4-hue-55),0 12px 32px -14px var(--v4-hue-55);transform:translateY(-2px)}}.btn-secondary{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}.prose a:not(.btn-primary):not(.btn-secondary),.vd-inline,a.vd-footer-link{background-image:linear-gradient(90deg,var(--vd-cyan),var(--vd-magenta));background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size var(--vf-hover) var(--vf-ease-out),color var(--vf-hover) var(--vf-ease)}.prose a:not(.btn-primary):not(.btn-secondary):hover,.vd-inline:hover,a.vd-footer-link:hover{background-size:100% 1px}.vf-header[data-scrolled=true]{background:color-mix(in srgb,var(--vf-bg) 62%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}.vd-nav-link{position:relative;padding:8px 12px;border-radius:999px;transition:color var(--vf-hover) var(--vf-ease),background var(--vf-hover) var(--vf-ease)}.vd-nav-link:hover{background:color-mix(in srgb,var(--vf-text) 6%,transparent)}.vd-nav-link[aria-current=page]{color:var(--vf-text);background:color-mix(in srgb,var(--vd-cyan) 12%,transparent);box-shadow:inset 0 0 0 1px var(--vd-cyan-24)}.vf-wordmark .v{background:var(--vd-gradient);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v4-ink 5s ease-in-out infinite alternate}.vd-footer-mark{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--vf-text) 55%,transparent);background:var(--vd-gradient);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:v4-ink 12s ease-in-out infinite alternate;filter:drop-shadow(0 0 24px var(--vd-violet-14))}.vd-footer-mark .v{-webkit-text-stroke:0}.v4-stage{position:relative;overflow:clip}.v4-stage__canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.9;mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}.v4-stage__ghost{position:absolute;right:2vw;top:4vh;z-index:-1;font-family:var(--font-inter),system-ui,sans-serif;font-weight:800;font-size:clamp(160px,30vw,520px);line-height:.9;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--vd-cyan-24);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}.v4-stat{display:inline-flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--vf-surface) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--vf-line-strong)}.v4-stat b{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--vf-text)}.v4-stat span{font-family:var(--font-jbmono),ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--vf-text-2)}.vd-page{position:relative;isolation:isolate}.vd-page:before{content:"";position:absolute;inset:-72px 0 auto 0;height:60vh;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 18% 0,var(--v4-hue-30),transparent 70%),radial-gradient(40% 40% at 90% 10%,var(--vd-magenta-14),transparent 70%),linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--v4-hue) 6%,transparent) 50%,transparent 60%);mask-image:linear-gradient(180deg,#000 30%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent)}.vd-page h1.vf-display,.vd-page>h1.vf-display{background:linear-gradient(100deg,var(--vf-text) 0,var(--vf-text) 55%,var(--v4-hue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.v4-pdp-title,.v4-pillar__name,.v4-stage__ghost,.vd-footer-mark,.vf-display-hero,.vf-display-section,[data-ledger]:before{font-family:var(--font-display,var(--font-inter)),var(--font-inter),system-ui,sans-serif}.v4-pdp-title{letter-spacing:-.03em;line-height:1}.v4-stage__ghost--code{font-family:var(--font-jbmono),ui-monospace,monospace;font-weight:500;font-size:clamp(90px,16vw,260px);letter-spacing:-.04em;text-transform:uppercase;-webkit-text-stroke:1px var(--v4-hue-30);top:8vh}.vf-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--vd-gradient);transform-origin:0 50%;transform:scaleX(0);opacity:.9}@supports (animation-timeline:scroll()){.vf-header:after{animation:v4-progress linear both;animation-timeline:scroll(root)}}@keyframes v4-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@view-transition{navigation:auto}::view-transition-new(root),::view-transition-old(root){animation-duration:.22s}.v4-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.v4-pillar{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;min-height:168px;padding:18px 18px 16px;border-radius:14px;text-decoration:none;color:var(--vf-text);background:radial-gradient(120% 90% at 100% 0,var(--v4-hue-30),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--vf-surface) 92%,white),var(--vf-surface));box-shadow:inset 0 0 0 1px var(--vf-line-strong),var(--vf-shadow-1);overflow:hidden;transition:transform var(--vf-hover) var(--vf-ease-out),box-shadow var(--vf-hover) var(--vf-ease)}.v4-pillar:after{content:"";position:absolute;inset:auto -30% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--v4-hue-55),transparent 65%);filter:blur(6px);transition:transform var(--vf-hover) var(--vf-ease-out)}.v4-pillar__n{font-family:var(--font-jbmono),monospace;font-size:11px;letter-spacing:.2em;color:var(--v4-hue)}.v4-pillar__name{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}.v4-pillar__sub{font-size:12.5px;line-height:1.5;color:var(--vf-text-2)}.v4-pillar__count{margin-top:auto;font-family:var(--font-jbmono),monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vf-text-2)}@media (hover:hover) and (pointer:fine){.v4-pillar:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--v4-hue-55),0 24px 56px -24px var(--v4-hue-55)}.v4-pillar:hover:after{transform:scale(1.3)}}nav[aria-label$=filter] a{border-radius:999px!important;padding:8px 16px!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}nav[aria-label$=filter] a[aria-current]{background:color-mix(in srgb,var(--vd-cyan) 14%,transparent)!important;box-shadow:inset 0 0 0 1px var(--vd-cyan-45),0 0 18px -6px var(--vd-cyan-45);color:var(--vf-text)!important}.vd-card[data-free]:before{opacity:1;animation:v4-spin 6s linear infinite}.vd-card[data-free] .vd-cover-code:after{content:" · free";color:var(--vd-cyan)}.grid>:nth-child(2) .vd-card{transition-delay:60ms}.grid>:nth-child(3) .vd-card{transition-delay:.12s}.grid>:nth-child(4) .vd-card{transition-delay:.18s}.v4-mnav{display:none;position:relative}.v4-mnav__btn{list-style:none;cursor:pointer;padding:8px 14px;border-radius:999px;font-size:.875rem;font-weight:600;color:var(--vf-text);box-shadow:inset 0 0 0 1px var(--vf-line-strong);background:color-mix(in srgb,var(--vf-surface) 70%,transparent)}.v4-mnav__btn::-webkit-details-marker{display:none}.v4-mnav[open] .v4-mnav__btn{box-shadow:inset 0 0 0 1px var(--vd-cyan-45)}.v4-mnav__sheet{position:fixed;left:12px;right:12px;top:calc(72px + env(safe-area-inset-top, 0px));display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--vf-bg) 92%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--vf-line-strong),0 24px 60px -20px rgba(0,0,0,.8);z-index:60}.v4-mnav__link{padding:12px 14px;border-radius:10px;color:var(--vf-text-2);text-decoration:none;font-weight:600}.v4-mnav__link[aria-current=page]{color:var(--vf-text);background:color-mix(in srgb,var(--vd-cyan) 12%,transparent)}.v4-mnav__link:hover{color:var(--vf-text);background:color-mix(in srgb,var(--vf-text) 6%,transparent)}@media (max-width:899px){.v4-mnav{display:block}.vd-navstrip{display:none}}.vf-header{padding-top:env(safe-area-inset-top,0)}::-moz-selection{background:color-mix(in srgb,var(--vd-magenta) 40%,transparent);color:var(--vf-text)}::selection{background:color-mix(in srgb,var(--vd-magenta) 40%,transparent);color:var(--vf-text)}:focus-visible{outline:2px solid var(--vd-cyan);outline-offset:3px;border-radius:6px}@media (prefers-reduced-motion:reduce){.btn-primary,.v4-field:before,.v4-panel:hover:before,.v4-ticker__track,.vd-card:hover:before,.vd-footer-mark,.vd-surface-lift:hover:before,.vf-display-hero,.vf-kicker:before,.vf-wordmark .v{animation:none!important}.v4-pointer{display:none}.btn-primary:hover,.btn-secondary:hover,.v4-panel:hover,.vd-card:hover,.vd-surface-lift:hover{transform:none}.v4-ticker__track{transform:none;flex-wrap:wrap;width:auto}.v4-stage__canvas{display:none}.vf-header:after{animation:none;transform:none;opacity:0}.v4-pillar:hover,.v4-pillar:hover:after{transform:none}.vd-card[data-free]:before{animation:none}::view-transition-new(root),::view-transition-old(root){animation:none}}
/* product art inside the cover (ProductCard, 2026-09-24): the image replaces the pillar geometry
   (::before); the corner brackets (::after), badges and code chip stay on top of a
   slightly dimmed image so the mono labels keep their contrast on bright art. */
.vd-cover-img { object-fit: cover; z-index: 0; filter: brightness(.9); transition: transform 600ms var(--vf-ease-out); }
.vd-card:hover .vd-cover-img { transform: scale(1.035); }
.vd-cover[data-has-art]::before { display: none; }
.vd-cover[data-has-art] > :not(.vd-cover-img) { z-index: 1; }
.vd-cover[data-has-art]::after { z-index: 1; }
.vd-cover[data-has-art] .vd-cover-code { color: var(--vf-text); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce) { .vd-card:hover .vd-cover-img { transform: none; } }
/* FIX 2026-09-24 — the home wordmark rendered INVISIBLE. `background-clip: text` on the h1 does not
   paint through its glyphs, which are inline-blocks with their own transform + opacity animation
   (the WordmarkResolve assemble), and they inherited `color: transparent` — so only the accent "."
   showed. Each glyph now carries its own solid ink; the h1's cyan drop-shadow glow and the accent
   period are kept. */
.vf-display-hero:has(.vd-wm) {
  background: none;
  color: var(--vf-text);
  animation: none;
}
.vf-display-hero .vd-wm__f {
  color: var(--vf-text);
  -webkit-text-fill-color: currentColor;
}

/* ------------------------------------------------------------
   9 · CATALOGUE + STACK ART (2026-09-24, late)
   ------------------------------------------------------------ */
/* Display titles never lose letters. Syne 800 uppercase is far wider than Inter, and gradient ink
   (background-clip: text) only paints inside the element's box — so a single long word wider than
   its column ("PRODUCTS") rendered with its last letter invisible. The box now always fits the
   longest word, and the size is capped by viewport width so that word still fits the screen. */
.vd-page h1.vf-display, .vf-display-section, .vf-display-hero { min-width: min-content; }
.vf-display-section { font-size: min(var(--vd-fs-section), 11.5vw); }
.vf-display-hero { font-size: min(var(--vd-fs-hero), 13vw); }

/* the catalogue hero: copy left, a live mosaic of the catalogue's own key art right */
.v4-hub-hero {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 3rem;
}
@media (min-width: 1024px) { .v4-hub-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; } }
.v4-hub-hero::before {
  content: ""; position: absolute; inset: -4rem -10vw auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 78% 40%, color-mix(in srgb, var(--vd-cyan) 16%, transparent), transparent 70%),
    radial-gradient(35% 45% at 95% 80%, color-mix(in srgb, var(--vd-magenta) 12%, transparent), transparent 70%),
    radial-gradient(30% 40% at 60% 90%, color-mix(in srgb, var(--vd-violet) 12%, transparent), transparent 70%);
}
.v4-hub-title {
  font-family: var(--font-display, var(--font-inter)), var(--font-inter), system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 3.7rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.v4-hub-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.v4-hub-stats > div {
  display: flex; flex-direction: column-reverse;
  border: 1px solid var(--vf-line); border-radius: 12px; padding: 0.75rem 1rem; min-width: 8.5rem;
  background: color-mix(in srgb, var(--vf-surface) 70%, transparent);
}
.v4-hub-stats dd { font-family: var(--font-display, var(--font-inter)), var(--font-inter), sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--vf-text); }
.v4-hub-stats__text { font-size: 1.05rem !important; padding-top: 0.35rem; }
.v4-hub-stats dt { margin-top: 0.4rem; font-family: var(--font-jbmono), ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vf-text-2); }

.v4-mosaic {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  transform: perspective(1600px) rotateY(-12deg) rotateX(5deg);
  transform-style: preserve-3d;
}
@media (max-width: 1023px) { .v4-mosaic { transform: none; } }
.v4-mosaic__tile {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--vf-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: transform 420ms var(--vf-ease-out), box-shadow 420ms var(--vf-ease), border-color 300ms var(--vf-ease);
}
.v4-mosaic__tile:nth-child(3n + 2) { transform: translateY(18px); }
.v4-mosaic__tile img { transition: transform 700ms var(--vf-ease-out), filter 300ms var(--vf-ease); filter: brightness(0.92); }
.v4-mosaic__tile:hover, .v4-mosaic__tile:focus-visible {
  transform: translateY(-6px) scale(1.03);
  border-color: color-mix(in srgb, var(--vd-cyan) 55%, transparent);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 36px color-mix(in srgb, var(--vd-cyan) 22%, transparent);
}
.v4-mosaic__tile:nth-child(3n + 2):hover, .v4-mosaic__tile:nth-child(3n + 2):focus-visible { transform: translateY(12px) scale(1.03); }
.v4-mosaic__tile:hover img { transform: scale(1.06); filter: brightness(1.05); }
.v4-mosaic__label {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-jbmono), ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em;
  color: var(--vf-text); background: rgba(7, 10, 15, 0.72); border: 1px solid var(--vf-line);
}
.v4-mosaic__tile[data-free]::after {
  content: "FREE"; position: absolute; right: 8px; top: 8px; z-index: 1;
  padding: 2px 7px; border-radius: 999px; font: 600 10px/1.4 var(--font-jbmono), monospace; letter-spacing: 0.12em;
  color: #070a0f; background: var(--vd-cyan);
}

/* stack art — a bundle dealt out as a fanned hand of its members' key art */
.v4-fan { position: relative; width: 100%; aspect-ratio: 16 / 9; isolation: isolate; }
.v4-fan--hero { aspect-ratio: 4 / 3; }
.v4-fan__card {
  position: absolute; top: 50%; left: 50%; width: 52%; aspect-ratio: 3 / 2;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--vf-line-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 17%)) translateY(calc(var(--i) * var(--i) * 3%)) rotate(calc(var(--i) * 6deg));
  z-index: calc(10 - var(--i) * var(--i));
  transition: transform 460ms var(--vf-ease-out);
}
.v4-fan--hero .v4-fan__card { width: 62%; }
.v4-fan__glow {
  position: absolute; inset: 18% 10%; z-index: -1; border-radius: 50%; filter: blur(40px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vd-cyan) 28%, transparent), color-mix(in srgb, var(--vd-magenta) 14%, transparent), transparent);
}
.v4-fan:hover .v4-fan__card, .v4-stack-card:hover .v4-fan__card {
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 24%)) translateY(calc(var(--i) * var(--i) * 4% - 3%)) rotate(calc(var(--i) * 8deg));
}
.v4-stack-card .v4-fan { margin: -0.5rem -0.5rem 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .v4-mosaic__tile, .v4-mosaic__tile img, .v4-fan__card { transition: none; }
  .v4-mosaic__tile:hover, .v4-mosaic__tile:focus-visible { transform: none; }
  .v4-mosaic__tile:nth-child(3n + 2):hover, .v4-mosaic__tile:nth-child(3n + 2):focus-visible { transform: translateY(18px); }
  .v4-mosaic__tile:hover img { transform: none; }
  .v4-fan:hover .v4-fan__card, .v4-stack-card:hover .v4-fan__card {
    transform: translate(-50%, -50%) translateX(calc(var(--i) * 17%)) translateY(calc(var(--i) * var(--i) * 3%)) rotate(calc(var(--i) * 6deg));
  }

/* rail: only where it clears the 75rem column; wider so labels don't clip */
.vd-rail{width:176px;display:none}
@media (min-width:1600px){.vd-rail{display:block}}
html{overflow-x:clip}
/* bundle detail hero + featured grid (artifact build helpers) */
.v4-bundle-hero{display:grid;gap:2.5rem;align-items:center}
@media (min-width:768px){.v4-bundle-hero{grid-template-columns:minmax(0,1fr) minmax(0,420px)}.v4-featured-grid{grid-template-columns:1fr 400px!important}}
.v4-teaser-art{width:100%;max-width:260px;flex-shrink:0}
.v4-hero-art{position:relative;margin-top:1.75rem;aspect-ratio:21/9;max-width:48rem;overflow:hidden;border-radius:.25rem;border:1px solid var(--vf-line)}
.v4-hero-art img,.vd-cover-img,.v4-mosaic__tile img,.v4-fan__card img,.v4-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v4-card-art{position:relative;margin:-1.5rem -1.5rem 1.25rem;aspect-ratio:16/9;overflow:hidden;border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px solid var(--vf-line)}
.v4-card-art img{transition:transform .3s ease}.group:hover .v4-card-art img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.v4-card-art img{transition:none}.group:hover .v4-card-art img{transform:none}}