/* ==========================================================================
   SINKASURU system visuals
   --------------------------------------------------------------------------
   Two independent animated diagrams:
     .brand-system-visual  → homepage hero right side, brand + logo fused into
                             one running system (the site's own operating map)
     .gov-system-visual    → /governance only: GovernanceOS record-keeping chain
   Rules that keep these alive:
     1. Every animated element must be reachable by CSS animation-name or SMIL;
        verify with getComputedStyle(el).animationName, not by eye.
     2. Assets under /assets/*.css must be served as text/css (nosniff blocks
        octet-stream stylesheets entirely — the whole sheet silently drops).
     3. transform-box: fill-box so SVG scale/rotate pivots on the element.
   ========================================================================== */

/* ---------------------------------------------------------------- homepage */
.brand-system-visual{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,#12343038,transparent 62%),
    linear-gradient(140deg,#0f1413,#17282a 48%,#0e1211);
}
.brand-system-visual svg{width:min(100%,760px);height:auto;max-height:100%;overflow:visible;display:block}

.brand-orbit circle{fill:none;stroke:#8ed2d033;stroke-width:1}
.brand-orbit circle:nth-child(2){stroke:#8ed2d055;stroke-dasharray:3 9;transform-box:view-box;transform-origin:350px 310px;animation:brand-spin 46s linear infinite}
.brand-orbit circle:nth-child(3){stroke:#efaa7255;stroke-dasharray:2 14;transform-box:view-box;transform-origin:350px 310px;animation:brand-spin-rev 34s linear infinite}

.brand-radar path{fill:url(#brandSweep);transform-box:view-box;transform-origin:350px 310px;animation:brand-spin 14s linear infinite}

.brand-links use{fill:none;stroke:url(#brandLine);stroke-width:1.1;stroke-opacity:.5;stroke-dasharray:6 12;animation:brand-flow 3.6s linear infinite}
.brand-links use:nth-child(2n){animation-duration:4.4s}
.brand-links use:nth-child(3n){animation-duration:2.9s}

.brand-particle{fill:#f4f1e6;filter:url(#brandGlow)}
.brand-particle.alt{fill:#8ed2d0}

.brand-nodes circle{fill:#0f1a18;stroke:#8ed2d0aa;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:brand-pulse 3.4s ease-in-out infinite}
.brand-nodes g:nth-child(2) circle{animation-delay:.42s;stroke:#eee7d8aa}
.brand-nodes g:nth-child(3) circle{animation-delay:.84s;stroke:#efaa72aa}
.brand-nodes g:nth-child(4) circle{animation-delay:1.26s}
.brand-nodes g:nth-child(5) circle{animation-delay:1.68s;stroke:#eee7d8aa}
.brand-nodes g:nth-child(6) circle{animation-delay:2.1s;stroke:#efaa72aa}
.brand-nodes g:nth-child(7) circle{animation-delay:2.52s}
.brand-nodes g:nth-child(8) circle{animation-delay:2.94s;stroke:#eee7d8aa}
.brand-node-dot{fill:#8ed2d0;filter:url(#brandGlow);transform-box:fill-box;transform-origin:center;animation:brand-blink 4.2s ease-in-out infinite}
.brand-nodes g:nth-child(2) .brand-node-dot{animation-delay:.4s}
.brand-nodes g:nth-child(3) .brand-node-dot{animation-delay:.8s;fill:#efaa72}
.brand-nodes g:nth-child(4) .brand-node-dot{animation-delay:1.2s}
.brand-nodes g:nth-child(5) .brand-node-dot{animation-delay:1.6s;fill:#eee7d8}
.brand-nodes g:nth-child(6) .brand-node-dot{animation-delay:2s;fill:#efaa72}
.brand-nodes g:nth-child(7) .brand-node-dot{animation-delay:2.4s}
.brand-nodes g:nth-child(8) .brand-node-dot{animation-delay:2.8s;fill:#eee7d8}
.brand-node-index{fill:#9ec2ba;font:700 9.5px/1 ui-monospace,monospace;letter-spacing:.14em}
.brand-node-label{fill:#e8f6f1;font:700 11px/1 ui-monospace,monospace;letter-spacing:.16em;text-anchor:middle}

.brand-core-disc{fill:#0b1312;stroke:#d9f0e9aa;stroke-width:1}
.brand-core-ring{fill:none;stroke:#8ed2d0aa;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:brand-breathe 5s ease-in-out infinite}
.brand-core-ring.outer{stroke:#efaa7299;animation-delay:1.4s;animation-duration:6.4s}
.brand-core-logo{transform-box:fill-box;transform-origin:center;animation:brand-logo-float 7s ease-in-out infinite;filter:drop-shadow(0 0 18px #8ed2d099)}

.brand-caption{fill:#a9cfc7;font:700 9.5px/1 ui-monospace,monospace;letter-spacing:.22em;text-anchor:middle}

/* --------------------------------------------------------------- governance */
.gov-system-visual{position:relative;margin:0 0 45px;background:#0e1514;border:1px solid #2c4a44;overflow:hidden}
.gov-system-visual svg{display:block;width:100%;height:auto}

.gov-box{fill:#132320;stroke:#3d6b62;stroke-width:1;animation:gov-box-pulse 6s ease-in-out infinite}
.gov-box-hd{fill:#1a2f2b}
.gov-stage:nth-child(2) .gov-box{animation-delay:1.5s}
.gov-stage:nth-child(3) .gov-box{animation-delay:3s}
.gov-stage:nth-child(4) .gov-box{animation-delay:4.5s}
.gov-stage-index{fill:#efaa72;font:700 11px/1 ui-monospace,monospace;letter-spacing:.16em}
.gov-stage-title{fill:#eafaf5;font:700 19px/1 ui-monospace,monospace;letter-spacing:.12em}
.gov-stage-note{fill:#93bdb4;font:500 11.5px/1 ui-monospace,monospace;letter-spacing:.06em}
.gov-stage-meter{fill:#1f3a35}
.gov-stage-fill{fill:url(#govLine);transform-box:fill-box;transform-origin:left center;animation:gov-meter 5.2s ease-in-out infinite}
.gov-stage:nth-child(2) .gov-stage-fill{animation-delay:1.3s}
.gov-stage:nth-child(3) .gov-stage-fill{animation-delay:2.6s}
.gov-stage:nth-child(4) .gov-stage-fill{animation-delay:3.9s}

.gov-chain use{fill:none;stroke:url(#govLine);stroke-width:1.4;stroke-opacity:.75;stroke-dasharray:5 11;animation:brand-flow 2.6s linear infinite}
.gov-return use{fill:none;stroke:#efaa7299;stroke-width:1.2;stroke-dasharray:3 13;animation:brand-flow 5.4s linear infinite}
.gov-flow{fill:#f6f2e7;filter:url(#govGlow)}
.gov-flow.warm{fill:#efaa72}
.gov-tick{fill:#7fa8a0;font:700 9.5px/1 ui-monospace,monospace;letter-spacing:.2em;text-anchor:middle}
.gov-scan{fill:#8ed2d0;opacity:.5;animation:gov-scan 7.5s linear infinite}
.gov-scanline{stroke:#8ed2d055;stroke-width:1;stroke-dasharray:4 6;opacity:.7}

/* -------------------------------------------------------------- keyframes */
@keyframes brand-flow{to{stroke-dashoffset:-720}}
@keyframes brand-spin{to{transform:rotate(360deg)}}
@keyframes brand-spin-rev{to{transform:rotate(-360deg)}}
@keyframes brand-pulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes brand-breathe{0%,100%{transform:scale(.94);opacity:.4}50%{transform:scale(1.06);opacity:1}}
@keyframes brand-blink{0%,86%,100%{opacity:.35;transform:scale(.8)}14%{opacity:1;transform:scale(1.25)}}
@keyframes brand-logo-float{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.035) translateY(-3px)}}
@keyframes gov-box-pulse{0%,100%{stroke:#3d6b62}50%{stroke:#8ed2d0}}
@keyframes gov-meter{0%{transform:scaleX(.35)}55%{transform:scaleX(1)}100%{transform:scaleX(.35)}}
@keyframes gov-scan{0%{transform:translateX(-4px)}100%{transform:translateX(1204px)}}

/* Accessibility: keep the diagrams legible and alive, but stop large-scale
   motion (rotation, travelling particles, sweeps) when the OS asks for less. */
@media(prefers-reduced-motion:reduce){
  .brand-orbit circle,.brand-radar path,.gov-scan{animation:none}
  .brand-particles,.gov-flows{display:none}
  .brand-links use,.gov-chain use,.gov-return use{animation-duration:18s}
  .brand-nodes circle,.brand-node-dot,.brand-core-ring,.brand-core-logo,.gov-box,.gov-stage-fill{animation-duration:9s}
}

@media(max-width:900px){
  .brand-system-visual svg{width:100%}
  .gov-system-visual{margin-bottom:30px}
  .gov-stage-title{font-size:16px}
  .gov-stage-note{font-size:10px}
}

/* --------------------------------------------------------------------------
   Narrow-viewport variants. A wide map scaled to phone width renders its labels
   at ~5px, so <=760px swaps in a purpose-built vertical diagram rendered ~1:1.
   -------------------------------------------------------------------------- */
/* Specificity must beat the `.gov-system-visual svg{display:block}` rule above. */
.brand-system-visual .sz-v,.gov-system-visual .sz-v{display:none}
.mv-num{fill:#eafaf5;font:700 10px/1 ui-monospace,monospace;text-anchor:middle}
.mv-label{fill:#dff2ec;font:700 12.5px/1 ui-monospace,monospace;letter-spacing:.08em}
.mg-num{fill:#efaa72;font:700 15px/1 ui-monospace,monospace}
.mg-title{fill:#eafaf5;font:700 15px/1 ui-monospace,monospace;letter-spacing:.1em}
.mg-note{fill:#93bdb4;font:500 10.5px/1 ui-monospace,monospace;letter-spacing:.04em}
.mg-stage-idx{fill:#6f9a92;font:500 9.5px/1 ui-monospace,monospace;letter-spacing:.08em}
.mg-caption{fill:#8fb8b0;font:600 9.5px/1 ui-monospace,monospace;letter-spacing:.1em;text-anchor:middle}
.mg-feedback{fill:#efaa72;font:600 9.5px/1 ui-monospace,monospace;letter-spacing:.14em;text-anchor:middle}
@keyframes mv-scan{0%{transform:translateY(18px);opacity:0}12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(330px);opacity:0}}
.gov-scan-v{fill:url(#govLine);transform-box:fill-box;animation:mv-scan 4.2s linear infinite}
/* The homepage map lives in a fixed-height hero band, so below 1024px it drops to
   the compact variant; the governance map is in normal flow and only needs it on
   true phone widths. */
@media(max-width:1024px){
  /* The wide drawing is hidden on narrow viewports; it now lives one level deeper
     (inside its own `.sz-fit`), so this must not be a child combinator — with `>`
     it stopped matching, the wide map stayed visible and occluded the compact one. */
  .brand-system-visual svg:not(.sz-v){display:none}
  /* Fill the band exactly and let preserveAspectRatio="xMidYMid meet" letterbox the
     drawing inside it — percentage-height alone did not resolve on this replaced
     element, so pin the box with absolute inset. */
  .brand-system-visual .sz-v{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0}
}
@media(max-width:760px){
  .gov-system-visual>svg:not(.sz-v){display:none}
  .gov-system-visual .sz-v{display:block;width:100%;height:auto;max-height:100%;margin:auto}
  .gov-system-visual{padding:12px 0 2px}
}
@media(prefers-reduced-motion:reduce){
  .gov-scan-v{animation:mv-scan 26s linear infinite}
}

/* --- narrow-viewport variant overrides (core sits at 112,138 not 350,310) --- */
.sz-v .brand-orbit circle:nth-child(2){transform-box:view-box;transform-origin:112px 138px;animation:brand-spin 30s linear infinite}
.sz-v .brand-orbit circle:nth-child(3){transform-box:view-box;transform-origin:112px 138px;animation:brand-spin-rev 22s linear infinite}
.sz-v .brand-radar path{transform-box:view-box;transform-origin:112px 138px;animation:brand-spin 11s linear infinite}
.sz-v .brand-core-ring{animation:brand-breathe 4.6s ease-in-out infinite}
.sz-v .brand-core-ring.outer{animation-delay:1.2s;animation-duration:5.8s}
.mv-num{fill:#eafaf5;font:700 11px/1 ui-monospace,monospace;text-anchor:middle}
.mv-label{fill:#dff2ec;font:700 14px/1 ui-monospace,monospace;letter-spacing:.06em}
.brand-spine{fill:none;stroke:#8ed2d0;stroke-opacity:.5;stroke-width:1.1;stroke-dasharray:2 9;animation:brand-flow 6s linear infinite}
.gov-back{fill:none;stroke:#efaa72;stroke-opacity:.55;stroke-width:1.1;stroke-dasharray:4 7;animation:brand-flow 7s linear infinite}
.mg-num{fill:#efaa72;font:700 15px/1 ui-monospace,monospace}
.mg-title{fill:#eafaf5;font:700 15px/1 ui-monospace,monospace;letter-spacing:.08em}
.mg-note{fill:#93bdb4;font:500 10.5px/1 ui-monospace,monospace;letter-spacing:.03em}
.mg-stage-idx{fill:#6f9a92;font:500 9.5px/1 ui-monospace,monospace;letter-spacing:.1em}
.mg-caption{fill:#8fb8b0;font:600 9.5px/1 ui-monospace,monospace;letter-spacing:.1em;text-anchor:middle}
.gov-scan-v{fill:url(#mgLine);transform-box:fill-box;animation:mv-scan 4.2s linear infinite}
@keyframes mv-scan{0%{transform:translateY(18px);opacity:0}12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(336px);opacity:0}}
.sz-v .gov-stage-meter{fill:#1b2a28}

/* ==========================================================================
   ROUND3 / nav-safe clearance, systematic node labels, governance slogan
   ========================================================================== */
/* Node labels read outward from the ring instead of scattering above/below it. */
.brand-node-label.l-start{text-anchor:start}
.brand-node-label.l-end{text-anchor:end}

/* The home map sits under an opaque nav bar and above the hero-signal strip, so
   the drawing keeps its own clearance rather than colliding with the bar. */
.brand-system-visual{padding:82px 22px 96px}

/* Governance slogan: authored inside this page's own diagram with its own motion
   (breathing glow + sweeping rule) and localised like every other map label. */
.gov-slogan{fill:#f6f1e4;font:700 22px/1 ui-monospace,monospace;letter-spacing:.24em;text-anchor:middle;animation:gov-slogan-glow 6.4s ease-in-out infinite}
.mg-slogan{fill:#f6f1e4;font:700 13.5px/1 ui-monospace,monospace;letter-spacing:.14em;text-anchor:middle;animation:gov-slogan-glow 6.4s ease-in-out infinite}
/* The English slogan is ~40 characters against a 390-unit compact viewBox: at the
   Chinese-tuned 13.5px/.14em it measures 410 units, spills past both edges of the
   SVG and gets cut by the band's overflow:hidden. Scoped to the English document so
   the Chinese line keeps its authored size. */
html[lang="en"] .mg-slogan{font-size:12px;letter-spacing:.06em}
.gov-slogan-rule{fill:url(#govLine);transform-box:fill-box;transform-origin:center;animation:gov-slogan-rule 6.4s ease-in-out infinite}
.mg-rule{fill:url(#mgLine)}
@keyframes gov-slogan-glow{0%,100%{opacity:.66}50%{opacity:1}}
@keyframes gov-slogan-rule{0%,100%{transform:scaleX(.18);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* Every drawing needs a definite box. An absolutely positioned *replaced* element
   that only gets top/bottom/left/right falls back to its intrinsic size, and on a
   grid item `height:auto` + `max-height:100%` does not resolve either — so a
   wide-but-short window sized the wide map by width alone (648-673px tall), it
   overflowed the band, and its bottom node row (04/05) landed on the hero-signal
   rule with the labels clipped below the band. The generator therefore wraps BOTH
   variants in a plain div (`.sz-fit`) whose box the SVG fills and letterboxes
   inside via preserveAspectRatio; the insets keep it clear of the nav bar (82) and
   of the strip (96). Declared last on purpose, and the <=1024 block below
   re-insets the same box for the compact variant. */
.sz-fit{display:block}
.brand-system-visual > .sz-fit{position:absolute;inset:82px 22px 96px;display:flex;align-items:center;justify-content:center}
.brand-system-visual > .sz-fit > svg{position:static;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;margin:0}
/* Between the single-column breakpoint (1050) and the compact variant (1024) the band
   matched no min-height rule and collapsed to ~48px, so the map vanished entirely.
   The nav sits above the artwork there (not over it), so the box drops the 82px top
   inset and takes the compact variant's tighter clearance instead. */
@media(min-width:1025px) and (max-width:1050px){
  .byoc-hero-art{min-height:clamp(430px,54svh,600px)}
  .brand-system-visual > .sz-fit{inset:22px 16px 78px}
}

/* The map belongs to the paper hero, not a separate dark card. Keep the artwork
   readable with a quiet warm veil, while letting the page's cream/paper surface
   continue uninterrupted across the copy and visual columns. */
.byoc-hero-art{background:var(--cream)!important}
.brand-system-visual{background:transparent;border-color:transparent}
.brand-system-visual:before{background:radial-gradient(circle at 50% 45%,#8b9b9240,transparent 58%);mix-blend-mode:multiply}
.byoc-hero-art:after{background:linear-gradient(90deg,#e9e2d622,transparent 52%),radial-gradient(circle at 55% 42%,#8eb8ad22,transparent 35%)}

/* The moving route particles are ornamental points, not content. They were
   escaping the artwork's visual field and blinking in the upper-left of the hero;
   keep the orbit/radar/node motion, remove only these stray sparks. */
.brand-system-visual .brand-particles{display:none}

/* Restore visual weight after removing the dark card: use more of the hero band,
   but preserve a clear gap above the signal rule. */
.brand-system-visual > .sz-fit{inset:45px 10px 72px}
@media(min-width:1025px) and (max-width:1050px){
  .brand-system-visual > .sz-fit{inset:22px 10px 72px}
}
@media(max-width:1024px){
  .brand-system-visual .sz-fit{inset:20px 10px 62px}
}
@media(max-width:1024px){
  .brand-system-visual{padding:0}
  .brand-system-visual .sz-fit{position:absolute;inset:20px 16px 78px;display:flex;align-items:center;justify-content:center}
  .brand-system-visual .sz-fit svg.sz-v{position:static;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;margin:0}
}
/* The band itself must be tall enough that the letterboxed map keeps its labels
   readable (a shorter band shrinks them under 9px instead of clipping them). */
@media(max-width:1024px){
  .byoc-hero-art{min-height:clamp(330px,44svh,400px)}
}
@media(max-width:700px){
  .byoc-hero-art{min-height:clamp(360px,48svh,430px)}
}
@media(prefers-reduced-motion:reduce){
  .gov-slogan,.mg-slogan,.gov-slogan-rule{animation-duration:13s}
}

/* Round 4: animated surfaces use a quiet charcoal, never the pale cyan/green wash. */
.brand-system-visual,.gov-system-visual{background:#242827;border-color:#4d5550}
.brand-system-visual:before,.gov-system-visual:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#56605a44,transparent 58%);mix-blend-mode:screen}
.brand-system-visual svg,.gov-system-visual svg{position:relative;z-index:1}
.gov-system-visual{margin-bottom:45px}
.gov-visual-action{position:absolute;z-index:4;right:24px;bottom:20px}
.gov-visual-action .byoc-button{background:#ede8dd;color:#171714;border:1px solid #ede8dd;padding:12px 18px;font-size:11px}
.gov-visual-action .byoc-button:hover{background:#d8d0c2}
.field-note{font-family:Georgia,'Noto Serif SC',serif!important;font-size:18px!important;line-height:1.95!important;max-width:760px!important;border-left:2px solid var(--orange);padding-left:22px;letter-spacing:.015em}
main[data-fold="governance"] .byoc-pagehero,main[data-fold="governance"] .byoc-content{background:var(--paper)}
main[data-fold="governance"] .byoc-content{color:var(--ink)}
main[data-fold="governance"] .byoc-record{background:#f8f4ed}
.thinking-pulse{position:absolute;inset:0;background:#242827;display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden}
.thinking-pulse:before{content:' ';position:absolute;width:64%;height:1px;background:linear-gradient(90deg,transparent,#d8d0c2,transparent);animation:thought-scan 3.2s ease-in-out infinite}
.thinking-pulse i{display:block;width:3px;height:clamp(28px,12vw,78px);background:#d8d0c2;opacity:.3;transform-origin:center;animation:thought-wave 1.8s ease-in-out infinite}
.thinking-pulse i:nth-child(2){animation-delay:.14s}.thinking-pulse i:nth-child(3){animation-delay:.28s}.thinking-pulse i:nth-child(4){animation-delay:.42s}.thinking-pulse i:nth-child(5){animation-delay:.56s}
.thinking-pulse span{position:absolute;left:22px;bottom:18px;color:#d8d0c2;font:700 9px monospace;letter-spacing:.16em}
@keyframes thought-wave{0%,100%{height:24px;opacity:.25}50%{height:96px;opacity:.9}}
@keyframes thought-scan{0%,100%{transform:translateX(-30%);opacity:.2}50%{transform:translateX(30%);opacity:.8}}
/* Theme system: light is default; dark is explicit and remembered. */
:root[data-theme="dark"]{--cream:#151817;--paper:#1d2220;--ink:#eee9df;--muted:#b8b7ae;--line:#414944;--night:#101312;--night2:#1c2220;--cyan:#b4d8d1;--orange:#e0a071}
:root[data-theme="dark"] body,:root[data-theme="dark"] .byoc-hero{background:var(--cream);color:var(--ink)}
:root[data-theme="dark"] .byoc-nav{background:#1b201e;color:var(--ink);border-color:#4b514c}
:root[data-theme="dark"] .byoc-nav .byoc-wordmark small{color:#b8b7ae}
:root[data-theme="dark"] .byoc-section,:root[data-theme="dark"] .stat-band,:root[data-theme="dark"] .lens-band,:root[data-theme="dark"] .byoc-content{background:var(--paper);color:var(--ink)}
:root[data-theme="dark"] .byoc-record,:root[data-theme="dark"] .byoc-note{background:#252b28;border-color:#4b544e;color:var(--ink)}
:root[data-theme="dark"] .byoc-record p,:root[data-theme="dark"] .byoc-note p{color:#c0c2ba}
:root[data-theme="dark"] .byoc-pagehero{background:#202522;color:var(--ink)}
:root[data-theme="dark"] .byoc-hero-art,.brand-system-visual,.gov-system-visual,.scene-reel,.byoc-media-band{background:#242827}
:root[data-theme="dark"] .byoc-theme{color:var(--ink);border-color:#bbb5aa}
.byoc-theme{border:1px solid #222;background:transparent;border-radius:99px;padding:9px 11px;font-size:13px;line-height:1;cursor:pointer;min-width:34px}
@media(max-width:700px){.gov-visual-action{position:relative;right:auto;bottom:auto;padding:0 18px 18px;text-align:right}.field-note{font-size:16px!important;padding-left:16px}.thinking-pulse span{font-size:8px}}

/* Homepage hero final treatment: the map is part of the page surface, not a card.
   Keep these declarations last so the legacy charcoal surface rules above cannot
   reintroduce the isolated block. */
.byoc-hero-art{background:var(--cream)!important}
.brand-system-visual{background:transparent!important;border-color:transparent!important}
.brand-system-visual:before{background:radial-gradient(circle at 50% 45%,#8b9b9240,transparent 58%)!important;mix-blend-mode:multiply}
.byoc-hero-art:after{background:linear-gradient(90deg,#e9e2d622,transparent 52%),radial-gradient(circle at 55% 42%,#8eb8ad22,transparent 35%)!important}
.brand-system-visual .brand-particles{display:none!important}
.brand-system-visual > .sz-fit{inset:45px 10px 72px}
@media(min-width:1025px) and (max-width:1050px){.brand-system-visual > .sz-fit{inset:22px 10px 72px}}
@media(max-width:1024px){.brand-system-visual .sz-fit{inset:20px 10px 62px}}