/* ============================================================
   home-deco.css — per-section background infographics/illustrations
   Decorative SVG/CSS motifs that fade + parallax in 3D on scroll.
   Positioned behind section content (z-index 0); content sits above.
   Motion is driven by the inline [data-deco] module in Index.cshtml
   (unconditional). Purely decorative → aria-hidden, pointer-events:none.
   ============================================================ */

/* section must be a positioning context; content rides above the deco */
.od-sec--deco { position: relative; }
.od-sec--deco > .dm-container { position: relative; z-index: 1; }
.od-spec2 { position: relative; }
.od-spec2 > .dm-container { position: relative; z-index: 1; }

.od-deco {
	position: absolute; inset: 0; z-index: 0; overflow: hidden;
	pointer-events: none; perspective: 900px;
}
.od-deco__item {
	position: absolute; opacity: 0; will-change: transform, opacity;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	transform-style: preserve-3d;
}

/* ---- motifs (purple on light sections) ---- */
.dc-ring   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%235900C0' stroke-opacity='.45'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E"); }
.dc-arc    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='56' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='2' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dc-plus   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%235900C0' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dc-pulse  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 44'%3E%3Cpath d='M0 22h44l9-16 11 30 9-16h28l7-9 7 18 6-9h84' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dc-cross  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='18' y='6' width='12' height='36' rx='3' fill='%235900C0' fill-opacity='.5'/%3E%3Crect x='6' y='18' width='36' height='12' rx='3' fill='%235900C0' fill-opacity='.5'/%3E%3C/svg%3E"); }
.dc-house  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30 32 10l24 20M14 27v25h36V27M26 52V38h12v14' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dc-dots   { background-image: radial-gradient(color-mix(in srgb, var(--dm-terracotta) 50%, transparent) 2px, transparent 2.6px); background-size: 18px 18px; background-position: 0 0; }
.dc-blob   { background-image: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--dm-terracotta) 16%, transparent), transparent 70%); border-radius: 50%; }
.dc-hex    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 92,27 92,73 50,96 8,73 8,27' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dc-tri    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 92,86 8,86' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dc-diamond{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='26' y='26' width='48' height='48' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='3' transform='rotate(45 50 50)'/%3E%3C/svg%3E"); }
.dc-wave   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 2 50 20 T100 20 T150 20 T200 20' fill='none' stroke='%235900C0' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---- true 3D elements (rotate/parallax on scroll via [data-deco]) ---- */
.od-sphere {
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #b795f2 0%, var(--dm-accent-mid) 44%, var(--dm-terracotta-deep) 100%);
	box-shadow: 0 26px 42px -16px color-mix(in srgb, var(--dm-terracotta-deep) 55%, transparent),
	            inset -7px -9px 18px rgba(0,0,0,.28),
	            inset 7px 9px 16px rgba(255,255,255,.28);
}
.od-cube3d { transform-style: preserve-3d; width: 78px; height: 78px; }
.od-cube3d__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(32deg); }
.od-cube3d .cf {
	position: absolute; inset: 0;
	border: 1.6px solid color-mix(in srgb, var(--dm-terracotta) 55%, transparent);
	background: rgba(124,58,237,.10);
}
.od-cube3d .cf1 { transform: translateZ(39px); }
.od-cube3d .cf2 { transform: rotateY(180deg) translateZ(39px); }
.od-cube3d .cf3 { transform: rotateY(90deg) translateZ(39px); }
.od-cube3d .cf4 { transform: rotateY(-90deg) translateZ(39px); }
.od-cube3d .cf5 { transform: rotateX(90deg) translateZ(39px); }
.od-cube3d .cf6 { transform: rotateX(-90deg) translateZ(39px); }

.od-deco--light .od-sphere { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #dcccf7 46%, #a888e8 100%);
	box-shadow: 0 22px 36px -16px rgba(0,0,0,.4), inset -6px -8px 16px rgba(0,0,0,.14), inset 6px 8px 14px rgba(255,255,255,.55); }
.od-deco--light .od-cube3d .cf { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.10); }

/* ---- light motifs for dark/purple sections ---- */
.od-deco--light .dc-ring  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.4'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E"); }
.od-deco--light .dc-arc   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='56' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='2' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E"); }
.od-deco--light .dc-plus  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23FFFFFF' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.od-deco--light .dc-dots  { background-image: radial-gradient(rgba(255,255,255,.45) 2px, transparent 2.6px); }
.od-deco--light .dc-blob  { background-image: radial-gradient(circle at 35% 35%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); }

/* ---- Yellow-green (lime) accent motifs — used sparingly for a complementary pop.
   Purple stays the primary; add one of these per page, not a whole cluster. ---- */
.dc-lime-dots { background-image: radial-gradient(#A8CF45 3px, transparent 3.5px); background-size: 18px 18px; opacity: .85; }
.dc-lime-blob { border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(168,207,69,.5), rgba(168,207,69,0) 70%); }
.dc-lime-ring { border-radius: 50%; border: 7px solid rgba(168,207,69,.4); }
.od-sphere--lime { background: radial-gradient(circle at 32% 28%, #e6f4b8 0%, #A8CF45 46%, #6f9a26 100%);
	box-shadow: 0 24px 40px -16px rgba(111,154,38,.5), inset -7px -9px 18px rgba(0,0,0,.2), inset 7px 9px 16px rgba(255,255,255,.4); }
.od-deco--light .od-sphere--lime { background: radial-gradient(circle at 32% 28%, #f2f9d8 0%, #bcdf5f 46%, #8bb63a 100%); }

/* ============================================================
   Layout-21 signature line-art (themeable via CSS mask — the colour
   comes from background-color, so these adopt the active theme's vars
   instead of a baked-in hex). Used where placed in the odhomz21 partial.
   ============================================================ */
.dc-squiggle, .dc-spiral, .dc-triline {
	background-image: none;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
/* squiggle / hand-drawn wave */
.dc-squiggle {
	background-color: var(--dm-accent-mid);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 22'%3E%3Cpath d='M2 12 C8 2 14 2 20 12 S32 22 38 12 S50 2 56 12 S68 22 70 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 22'%3E%3Cpath d='M2 12 C8 2 14 2 20 12 S32 22 38 12 S50 2 56 12 S68 22 70 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* spiral swirl */
.dc-spiral {
	background-color: color-mix(in srgb, var(--dm-terracotta) 42%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 C50 47 53 47 53 50 C53 55 46 55 46 50 C46 43 57 43 57 50 C57 60 40 60 40 50 C40 37 63 37 63 50 C63 65 34 65 34 50 C34 31 69 31 69 50 C69 69 31 69 31 50' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 C50 47 53 47 53 50 C53 55 46 55 46 50 C46 43 57 43 57 50 C57 60 40 60 40 50 C40 37 63 37 63 50 C63 65 34 65 34 50 C34 31 69 31 69 50 C69 69 31 69 31 50' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* outline triangle */
.dc-triline {
	background-color: color-mix(in srgb, var(--dm-terracotta) 52%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 92,86 8,86' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 92,86 8,86' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Non-default THEMES (any page: homepage, detail, listing, static):
   recolour the baked-purple SVG line-motifs to the ACTIVE theme via CSS mask
   (the colour comes from background-color, so it tracks --dm-terracotta).
   The DEFAULT theme keeps its original purple SVGs, pixel-identical. ---- */
body[data-theme]:not([data-theme="default"]) .dc-ring,
body[data-theme]:not([data-theme="default"]) .dc-arc,
body[data-theme]:not([data-theme="default"]) .dc-plus,
body[data-theme]:not([data-theme="default"]) .dc-pulse,
body[data-theme]:not([data-theme="default"]) .dc-cross,
body[data-theme]:not([data-theme="default"]) .dc-house,
body[data-theme]:not([data-theme="default"]) .dc-hex,
body[data-theme]:not([data-theme="default"]) .dc-tri,
body[data-theme]:not([data-theme="default"]) .dc-diamond,
body[data-theme]:not([data-theme="default"]) .dc-wave {
	background-image: none;
	background-color: color-mix(in srgb, var(--dm-terracotta) 55%, transparent);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
/* On dark/coloured bands (.od-deco--light) keep the motifs light for contrast */
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-ring,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-arc,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-plus,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-pulse,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-cross,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-house,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-hex,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-tri,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-diamond,
body[data-theme]:not([data-theme="default"]) .od-deco--light .dc-wave {
	background-color: rgba(255, 255, 255, .4);
}
body[data-theme]:not([data-theme="default"]) .dc-ring { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-arc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='56' fill='none' stroke='%23000' stroke-width='2.5' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='56' fill='none' stroke='%23000' stroke-width='2.5' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-pulse { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 44'%3E%3Cpath d='M0 22h44l9-16 11 30 9-16h28l7-9 7 18 6-9h84' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 44'%3E%3Cpath d='M0 22h44l9-16 11 30 9-16h28l7-9 7 18 6-9h84' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-cross { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='18' y='6' width='12' height='36' rx='3' fill='%23000'/%3E%3Crect x='6' y='18' width='36' height='12' rx='3' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='18' y='6' width='12' height='36' rx='3' fill='%23000'/%3E%3Crect x='6' y='18' width='36' height='12' rx='3' fill='%23000'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-house { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30 32 10l24 20M14 27v25h36V27M26 52V38h12v14' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30 32 10l24 20M14 27v25h36V27M26 52V38h12v14' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-hex { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 92,27 92,73 50,96 8,73 8,27' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 92,27 92,73 50,96 8,73 8,27' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-tri { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 92,86 8,86' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 92,86 8,86' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-diamond { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='26' y='26' width='48' height='48' fill='none' stroke='%23000' stroke-width='3' transform='rotate(45 50 50)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='26' y='26' width='48' height='48' fill='none' stroke='%23000' stroke-width='3' transform='rotate(45 50 50)'/%3E%3C/svg%3E"); }
body[data-theme]:not([data-theme="default"]) .dc-wave { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 2 50 20 T100 20 T150 20 T200 20' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 2 50 20 T100 20 T150 20 T200 20' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Two-tone infographics: a subset of motifs use the SECONDARY colour
   (--dm-accent-mid) so shapes read as primary + secondary, not one flat hue.
   The .od-deco--light override above still wins on dark bands (keeps them light). */
body[data-theme]:not([data-theme="default"]) .dc-plus,
body[data-theme]:not([data-theme="default"]) .dc-diamond,
body[data-theme]:not([data-theme="default"]) .dc-cross,
body[data-theme]:not([data-theme="default"]) .dc-wave {
	background-color: color-mix(in srgb, var(--dm-accent-mid) 62%, transparent);
}
/* Lime accent motifs -> theme SECONDARY (were hardcoded #A8CF45 green) */
body[data-theme]:not([data-theme="default"]) .dc-lime-dots {
	background-image: radial-gradient(var(--dm-accent-mid) 3px, transparent 3.5px);
}
body[data-theme]:not([data-theme="default"]) .dc-lime-blob {
	background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--dm-accent-mid) 50%, transparent), transparent 70%);
}
body[data-theme]:not([data-theme="default"]) .dc-lime-ring {
	border-color: color-mix(in srgb, var(--dm-accent-mid) 45%, transparent);
}
/* 3D cube faces: faint secondary fill instead of the hardcoded #7c3aed purple
   (border stays themed via base / white via .od-deco--light) */
body[data-theme]:not([data-theme="default"]) .od-cube3d .cf {
	background: color-mix(in srgb, var(--dm-accent-mid) 10%, transparent);
}
/* 3D sphere: white highlight instead of the purple #b795f2 (non-default only) */
body[data-theme]:not([data-theme="default"]) .od-sphere {
	background: radial-gradient(circle at 32% 28%, #fff 0%, var(--dm-accent-mid) 44%, var(--dm-terracotta-deep) 100%);
}
/* od-sphere--lime -> secondary-tinted ball on non-default themes */
body[data-theme]:not([data-theme="default"]) .od-sphere--lime {
	background: radial-gradient(circle at 32% 28%, #fff 0%, var(--dm-accent-mid) 46%, var(--dm-indigo) 100%);
}

@media (max-width: 720px) {
	/* keep only the lightest motifs on small screens for clarity/perf */
	.od-deco__item.dc-hide-sm { display: none; }
	.od-deco__item { opacity: 0; }
}