/* Soliferum Scroll Hero — sizes are calc(var(--u) * n), n = design px
 * Always 16:9. One design px = 1/1600 of the block's own width (container query units),
 * so the whole hero scales as one picture inside any group, column or cover.
 */
.wp-block-soliferum-scroll-hero {
	container-type: inline-size;
	container-name: sh;
	/* width stays auto so wide/full alignment (negative margins) can stretch it */
	max-width: 100%;
	overflow: hidden;
	overflow: clip;
	contain: paint; /* nothing inside can ever widen the page */
	border-radius: var(--wp--custom--radius--panel, var(--wp--custom--border-radius, var(--wp--custom--radius--large, 20px)));
	isolation: isolate;
}
.wp-block-soliferum-scroll-hero.alignfull { max-width: none; }

.sh-preview { width: 100%; border-radius: inherit; overflow: hidden; }

.sh {
	--u: calc(100cqi / 1600);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	--sh-blob: 1;
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 16 / 9;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	border-radius: inherit;
	background: var(--sh-bg);
	color: var(--sh-ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: calc(var(--u) * 16);
	line-height: 1.4;
	text-align: left;
	padding: calc(var(--u) * 48) calc(var(--u) * 96) calc(var(--u) * 44);
}
@supports not (container-type: inline-size) {
	.sh { --u: calc(100vw / 1600); }
}

/* tones */
.sh--dark {
	--sh-bg: #07070A; --sh-ink: #F4F4F6; --sh-muted: #B8B8C4; --sh-dim: #8E8E9C; --sh-label: #A9A9B6;
	--sh-line: rgba(255,255,255,.10); --sh-line2: rgba(255,255,255,.20); --sh-soft: rgba(255,255,255,.04);
	--sh-sk: rgba(255,255,255,.08); --sh-sk2: rgba(255,255,255,.16);
	--sh-card: rgba(22,22,30,.92); --sh-panel: #121219; --sh-grid: rgba(255,255,255,.035);
	--sh-cta-bg: #F4F4F6; --sh-cta-ink: #0A0A0E; --sh-shadow: rgba(0,0,0,.55); --sh-chipdot: #3A3A44;
	--sh-ok: #4ADE80; --sh-ok-bg: rgba(74,222,128,.12); --sh-frame: #1C1C24;
}
.sh--light {
	--sh-bg: #F1F0F4; --sh-ink: #15151C; --sh-muted: #4F4F63; --sh-dim: #66667A; --sh-label: #66667A;
	--sh-line: rgba(20,20,40,.09); --sh-line2: rgba(20,20,40,.20); --sh-soft: rgba(255,255,255,.75);
	--sh-sk: rgba(20,20,40,.06); --sh-sk2: rgba(20,20,40,.13);
	--sh-card: rgba(255,255,255,.96); --sh-panel: #FFFFFF; --sh-grid: rgba(20,20,60,.045);
	--sh-cta-bg: #15151C; --sh-cta-ink: #FFFFFF; --sh-shadow: rgba(50,40,90,.16); --sh-chipdot: #D6D5DE;
	--sh-ok: #15803D; --sh-ok-bg: rgba(34,197,94,.14); --sh-frame: #15151C;
	--sh-blob: .38;
}

.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh :where(p, h2, ul, li, b, strong, em, s) { margin: 0; padding: 0; border: 0; color: inherit; text-transform: none; letter-spacing: normal; font-style: normal; text-decoration: none; }
.sh svg { display: block; max-width: none; height: auto; overflow: visible; }

/* background */
.sh__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sh__blob { position: absolute; border-radius: 50%; filter: blur(calc(var(--u) * 90)); opacity: calc(var(--o, .5) * var(--sh-blob)); }
.sh__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--sh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px); background-size: calc(var(--u) * 80) calc(var(--u) * 80); }

/* header */
.sh__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 16); }
.sh__brand { display: flex; align-items: center; gap: calc(var(--u) * 14); font-family: Poppins, sans-serif; font-weight: 600; font-size: calc(var(--u) * 22); letter-spacing: -.02em; }
.sh__logo { width: calc(var(--u) * 32); }
.sh__label { display: flex; align-items: center; gap: calc(var(--u) * 12); font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 13); color: var(--sh-label); letter-spacing: .04em; }
.sh__label i { width: calc(var(--u) * 32); height: 1px; background: var(--sh-line2); display: block; }
.sh__label b { color: var(--sh-ink); font-weight: 400; }

/* copy column */
.sh__main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(var(--u) * 72); align-items: center; margin-top: calc(var(--u) * 24); }
.sh .sh__title { font-family: Poppins, sans-serif; font-weight: 700; font-size: calc(var(--u) * 108); line-height: .98; letter-spacing: -.045em; color: var(--sh-ink); margin: 0; }
.sh__mask { display: block; overflow: hidden; padding-bottom: .05em; }
.sh__mask:last-child { padding-bottom: .14em; }
.sh__dot--accent { color: var(--sh-accent); }
.sh .sh__lede { margin-top: calc(var(--u) * 22); max-width: calc(var(--u) * 540); font-size: calc(var(--u) * 19); line-height: 1.55; color: var(--sh-muted); text-wrap: pretty; }
.sh .sh__pills { margin-top: calc(var(--u) * 22); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); list-style: none; }
.sh .sh__pills li { padding: calc(var(--u) * 8) calc(var(--u) * 15); border: 1px solid var(--sh-line2); border-radius: 999px; font-size: calc(var(--u) * 14); background: var(--sh-soft); }
.sh .sh__cta { margin-top: calc(var(--u) * 28); display: inline-flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 24); border-radius: 999px; background: var(--sh-cta-bg); color: var(--sh-cta-ink); text-decoration: none; font-weight: 600; font-size: calc(var(--u) * 16); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.sh .sh__cta:hover, .sh .sh__cta:focus-visible { color: var(--sh-cta-ink); transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--sh-accent) 40%, transparent); }
.sh .sh__cta:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 3px; }
.sh__arrow { width: calc(var(--u) * 18); }

/* rail */
.sh__rail { flex: none; margin-top: calc(var(--u) * 24); }
.sh__stops { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 13); color: var(--sh-dim); letter-spacing: .05em; }
.sh__track2 { position: relative; margin-top: calc(var(--u) * 16); height: max(1px, calc(var(--u) * 2)); background: var(--sh-line); }
.sh__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, #3B5BFF, #8B5CFF, var(--sh-accent), #FF7A45); }
.sh__knob { position: absolute; top: 50%; left: 0; width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin: calc(var(--u) * -7) 0 0 calc(var(--u) * -7); border-radius: 50%; background: var(--sh-ink); box-shadow: 0 0 0 calc(var(--u) * 6) var(--sh-sk); }
.sh__foot { flex: none; margin-top: calc(var(--u) * 14); display: flex; justify-content: space-between; gap: calc(var(--u) * 16); font-size: calc(var(--u) * 14); color: var(--sh-dim); }
.sh__foot b { color: var(--sh-ink); font-weight: 400; opacity: .85; }

/* shared stage pieces */
.sh__stage { position: relative; height: calc(var(--u) * 580); }
.sh__card { position: absolute; z-index: 3; padding: calc(var(--u) * 18) calc(var(--u) * 20); border-radius: calc(var(--u) * 18); background: var(--sh-card); border: 1px solid var(--sh-line); box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) var(--sh-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sh__cardHead { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 8); }
.sh__cardHead span { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.sh__mono { font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 12); color: var(--sh-label); }
.sh__big { display: flex; align-items: baseline; gap: calc(var(--u) * 8); font-family: Poppins, sans-serif; }
.sh__big strong { font-weight: 700; font-size: calc(var(--u) * 40); line-height: 1; letter-spacing: -.03em; }
.sh__big span { font-weight: 600; font-size: calc(var(--u) * 20); }
.sh__live { display: block; margin-left: auto; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--sh-accent); flex: none; }
.sh__ok { display: block; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #22C55E; flex: none; }
.sh__note { margin-top: calc(var(--u) * 10); white-space: nowrap; }
.sh__chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 18); border-radius: calc(var(--u) * 14); background: var(--sh-card); border: 1px solid var(--sh-line); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 44) var(--sh-shadow); font-size: calc(var(--u) * 15); white-space: nowrap; }
.sh__chip .sh__live { margin: 0; }
.sh__win { position: relative; border-radius: calc(var(--u) * 22); background: var(--sh-panel); border: 1px solid var(--sh-line); box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 120) var(--sh-shadow); overflow: hidden; }
.sh__chrome { height: calc(var(--u) * 46); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 18); border-bottom: 1px solid var(--sh-line); }
.sh__chrome > span { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: var(--sh-chipdot); flex: none; }
.sh__url { margin-left: calc(var(--u) * 14); flex: 1; height: calc(var(--u) * 26); border-radius: calc(var(--u) * 8); background: var(--sh-sk); display: flex; align-items: center; padding: 0 calc(var(--u) * 12); font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 12); color: var(--sh-label); white-space: nowrap; overflow: hidden; }
.sh__notch { position: absolute; z-index: 2; top: calc(var(--u) * 16); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--u) * 16); border-radius: 999px; background: var(--sh-frame); }

/* ---------- scroll ---------- */
.sh__stage--scroll { height: auto; padding: calc(var(--u) * 30) 0 calc(var(--u) * 36); }
.sh__view { position: relative; height: calc(var(--u) * 430); overflow: hidden; }
.sh__track { padding: calc(var(--u) * 22) calc(var(--u) * 34) calc(var(--u) * 22) calc(var(--u) * 22); display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.sh__hero { position: relative; height: calc(var(--u) * 230); border-radius: calc(var(--u) * 14); overflow: hidden; background: #0B0B12; color: #F4F4F6; }
.sh__hero .sh__blob { filter: blur(calc(var(--u) * 50)); opacity: .8; }
.sh__heroTag { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 24); font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 12); color: #D0D0DA; letter-spacing: .06em; }
.sh__heroTitle { position: absolute; left: calc(var(--u) * 26); bottom: calc(var(--u) * 24); font-family: Poppins, sans-serif; font-weight: 700; font-size: calc(var(--u) * 40); line-height: 1; letter-spacing: -.03em; }
.sh__row { display: grid; gap: calc(var(--u) * 16); }
.sh__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh__tile { border-radius: calc(var(--u) * 14); border: 1px solid var(--sh-line); }
.sh__tile--a { height: calc(var(--u) * 150); }
.sh__tile--b { height: calc(var(--u) * 170); }
.sh__line { height: calc(var(--u) * 14); border-radius: calc(var(--u) * 6); background: var(--sh-sk); }
.sh__line--h { height: calc(var(--u) * 22); background: var(--sh-sk2); }
.sh__bar { position: absolute; right: calc(var(--u) * 10); top: calc(var(--u) * 14); bottom: calc(var(--u) * 14); width: calc(var(--u) * 4); border-radius: 4px; background: var(--sh-sk); }
.sh__thumb { width: 100%; height: 25%; border-radius: 4px; background: var(--sh-accent); }
.sh__fps { right: calc(var(--u) * -24); top: 0; width: calc(var(--u) * 210); }
.sh__bars { position: relative; margin-top: calc(var(--u) * 14); height: calc(var(--u) * 44); display: flex; align-items: flex-end; gap: calc(var(--u) * 4); }
.sh__bars::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * 6); border-top: 1px dashed var(--sh-line2); }
.sh__bars span { flex: 1; height: calc(var(--u) * var(--h)); border-radius: 2px; background: var(--sh-muted); opacity: .7; transform-origin: bottom; }
.sh__bars span:last-child { background: var(--sh-accent); opacity: 1; }
.sh__ease { left: calc(var(--u) * -80); bottom: 0; width: calc(var(--u) * 280); }
.sh__curve { width: 100%; margin-top: calc(var(--u) * 12); color: var(--sh-ink); }

/* ---------- web design & build ---------- */
.sh__webwin { position: absolute; left: 0; top: calc(var(--u) * 40); width: calc(var(--u) * 560); }
.sh__mode { position: relative; margin-left: calc(var(--u) * 6); width: calc(var(--u) * 92); height: calc(var(--u) * 26); font-size: calc(var(--u) * 11); letter-spacing: .06em; }
.sh__mode b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 8); font-weight: 500; }
.sh__modeA { border: 1px dashed var(--sh-line2); color: var(--sh-label); }
.sh__modeB { background: color-mix(in srgb, var(--sh-accent) 16%, transparent); color: var(--sh-accent); }
.sh__site { padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 20); }
.sh__siteNav { display: flex; justify-content: space-between; align-items: center; }
.sh__siteLinks { display: flex; gap: calc(var(--u) * 12); align-items: center; }
.sh__siteHero { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--u) * 22); align-items: center; }
.sh__siteCopy { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.sh__siteBtns { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.sh__siteCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.sh__wf { position: relative; flex: none; border: 1px dashed var(--sh-line2); border-radius: calc(var(--u) * 4); }
.sh__wf::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--f); }
.sh__phone { position: absolute; z-index: 2; right: 0; top: calc(var(--u) * 150); width: calc(var(--u) * 188); height: calc(var(--u) * 392); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 32); background: var(--sh-frame); box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 80) var(--sh-shadow); }
.sh__pscreen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 25); background: var(--sh-panel); padding: calc(var(--u) * 40) calc(var(--u) * 12) calc(var(--u) * 12); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.sh__lh { left: calc(var(--u) * -64); bottom: 0; width: calc(var(--u) * 330); }
.sh__rings { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 14); }
.sh__ringItem { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.sh__ring { position: relative; width: calc(var(--u) * 58); height: calc(var(--u) * 58); color: var(--sh-ink); }
.sh__ring svg { width: 100%; transform: rotate(-90deg); }
.sh__ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Poppins, sans-serif; font-weight: 600; font-size: calc(var(--u) * 16); }
.sh__ringArc { stroke: #22C55E; stroke-dasharray: 100px; stroke-dashoffset: calc(var(--off) * 1px); }
.sh__stage--web .sh__chip { right: calc(var(--u) * -8); top: calc(var(--u) * 0); }

/* ---------- email campaigns ---------- */
.sh__ephone { position: absolute; z-index: 2; left: calc(var(--u) * 196); top: 0; width: calc(var(--u) * 284); height: calc(var(--u) * 580); padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 46); background: var(--sh-frame); box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 100) var(--sh-shadow); }
.sh__escreen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 36); background: var(--sh-panel); padding: calc(var(--u) * 44) calc(var(--u) * 18) calc(var(--u) * 16); }
.sh__ebar { display: flex; justify-content: space-between; font-size: calc(var(--u) * 11); }
.sh__toast { position: absolute; z-index: 3; top: calc(var(--u) * 40); left: calc(var(--u) * 10); right: calc(var(--u) * 10); display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 16); background: var(--sh-card); border: 1px solid var(--sh-line); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) var(--sh-shadow); }
.sh__toastIcon { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); background: linear-gradient(135deg, #3B4BFF, var(--sh-accent)); }
.sh__toast div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sh__toast b { font-weight: 600; font-size: calc(var(--u) * 11); }
.sh__toast div span { font-size: calc(var(--u) * 11); color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh__toast em { font-size: calc(var(--u) * 10); align-self: flex-start; }
.sh__email { margin-top: calc(var(--u) * 14); }
.sh__ebanner { position: relative; height: calc(var(--u) * 176); border-radius: calc(var(--u) * 16); background: linear-gradient(135deg, #3B4BFF 0%, #8B3CF0 42%, var(--sh-accent) 76%, #FF5A3D 100%); overflow: hidden; }
.sh__ebanner span { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 18); color: #fff; font-family: Poppins, sans-serif; font-weight: 700; font-size: calc(var(--u) * 26); line-height: 1.05; letter-spacing: -.02em; }
.sh .sh__ecopy { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 12); line-height: 1.55; color: var(--sh-muted); }
.sh__ebtn { margin-top: calc(var(--u) * 14); height: calc(var(--u) * 40); border-radius: 999px; background: var(--sh-accent); color: #fff; font-weight: 600; font-size: calc(var(--u) * 12.5); display: flex; align-items: center; justify-content: center; }
.sh__eprod { margin-top: calc(var(--u) * 14); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.sh__eprod div { height: calc(var(--u) * 112); border-radius: calc(var(--u) * 12); background: var(--sh-sk); }
.sh__eprod div:last-child { background: color-mix(in srgb, var(--sh-accent) 9%, transparent); }
.sh__stat { padding: calc(var(--u) * 16) calc(var(--u) * 20); }
.sh__stat--a { left: 0; top: calc(var(--u) * 84); width: calc(var(--u) * 176); }
.sh__stat--b { right: 0; top: calc(var(--u) * 258); width: calc(var(--u) * 192); }
.sh__statLabel { margin-top: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 15); }
.sh__statLabel i { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; }
.sh__spark { margin-top: calc(var(--u) * 12); height: calc(var(--u) * 34); display: flex; align-items: flex-end; gap: calc(var(--u) * 5); }
.sh__spark span { flex: 1; height: calc(var(--u) * var(--h) * .45); border-radius: 2px; background: var(--sh-accent); opacity: .85; transform-origin: bottom; }
.sh__flow { left: calc(var(--u) * -36); bottom: calc(var(--u) * 36); width: calc(var(--u) * 392); }
.sh__flowRow { position: relative; margin-top: calc(var(--u) * 18); display: flex; justify-content: space-between; }
.sh__flowLine { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 7); height: max(1px, calc(var(--u) * 2)); background: var(--sh-line2); }
.sh__flowDot { position: absolute; top: 50%; left: 0; width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin: calc(var(--u) * -5) 0 0 calc(var(--u) * -5); border-radius: 50%; background: var(--sh-accent); box-shadow: 0 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--sh-accent) 22%, transparent); }
.sh__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); width: calc(var(--u) * 52); }
.sh__node b { display: block; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; border: calc(var(--u) * 2) solid var(--sh-accent); background: var(--sh-panel); }
.sh__node span { font-family: "JetBrains Mono", monospace; font-size: calc(var(--u) * 11); color: var(--sh-label); white-space: nowrap; }

/* ---------- hosting ---------- */
.sh__dash { position: absolute; z-index: 1; left: 0; top: calc(var(--u) * 34); width: calc(var(--u) * 640); padding: calc(var(--u) * 28); border-radius: calc(var(--u) * 26); background: var(--sh-panel); border: 1px solid var(--sh-line); box-shadow: 0 calc(var(--u) * 40) calc(var(--u) * 110) var(--sh-shadow); }
.sh__dashHead { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 12); }
.sh__domain { font-size: calc(var(--u) * 26); letter-spacing: -.01em; }
.sh__status { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 7) calc(var(--u) * 14); border-radius: 999px; background: var(--sh-ok-bg); color: var(--sh-ok); font-size: calc(var(--u) * 14); font-weight: 500; }
.sh__status i { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: currentColor; }
.sh__chartMeta { margin-top: calc(var(--u) * 20); display: flex; justify-content: space-between; font-size: calc(var(--u) * 11); letter-spacing: .04em; }
.sh__chart { width: 100%; margin-top: calc(var(--u) * 10); color: var(--sh-ink); }
.sh__lineDraw { stroke-dasharray: 1px; stroke-dashoffset: 0; }
.sh__tiles { margin-top: calc(var(--u) * 16); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14); }
.sh__tileStat { padding: calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 16); background: var(--sh-sk); border: 1px solid var(--sh-line); }
.sh__tileStat strong { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: calc(var(--u) * 30); line-height: 1.1; letter-spacing: -.02em; }
.sh__tileStat span { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 13); color: var(--sh-muted); }
.sh__stage--hosting .sh__chip { right: calc(var(--u) * -24); top: 0; }
.sh__log { right: calc(var(--u) * -30); bottom: calc(var(--u) * -56); width: calc(var(--u) * 262); padding: calc(var(--u) * 14) calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.sh__logRow { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.sh__logRow div { display: flex; flex-direction: column; }
.sh__logRow b { font-weight: 600; font-size: calc(var(--u) * 13); }
.sh__logRow .sh__mono { font-size: calc(var(--u) * 10.5); }
.sh__check { flex: none; display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--sh-ok-bg); color: var(--sh-ok); }
.sh__check svg { width: calc(var(--u) * 13); }

/* ---------- motion ---------- */
@keyframes sh-d1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(calc(var(--u) * 60), calc(var(--u) * -40)) scale(1.12); } }
@keyframes sh-d2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(calc(var(--u) * -70), calc(var(--u) * 30)) scale(.92); } }
@keyframes sh-d3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(calc(var(--u) * 40), calc(var(--u) * 50)); } }
@keyframes sh-up { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes sh-fade { from { opacity: 0; transform: translateY(calc(var(--u) * 18)); } to { opacity: 1; transform: translateY(0); } }
@keyframes sh-track { 0%,8% { transform: translateY(0); } 46%,58% { transform: translateY(calc(var(--u) * -210)); } 92%,100% { transform: translateY(0); } }
@keyframes sh-thumb { 0%,8% { transform: translateY(0); } 46%,58% { transform: translateY(300%); } 92%,100% { transform: translateY(0); } }
@keyframes sh-reveal { 0%,14% { opacity: .08; transform: translateY(calc(var(--u) * 36)) scale(.97); } 40%,64% { opacity: 1; transform: none; } 90%,100% { opacity: .08; transform: translateY(calc(var(--u) * 36)) scale(.97); } }
@keyframes sh-knob { 0%,8% { left: 0%; } 46%,58% { left: 100%; } 92%,100% { left: 0%; } }
@keyframes sh-fill { 0%,8% { width: 0%; } 46%,58% { width: 100%; } 92%,100% { width: 0%; } }
@keyframes sh-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sh-bar { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }
@keyframes sh-build { 0%,10% { opacity: 0; transform: scale(.94); } 28%,80% { opacity: 1; transform: none; } 92%,100% { opacity: 0; transform: scale(.94); } }
@keyframes sh-modeA { 0%,18% { opacity: 1; } 26%,84% { opacity: 0; } 92%,100% { opacity: 1; } }
@keyframes sh-modeB { 0%,18% { opacity: 0; } 26%,84% { opacity: 1; } 92%,100% { opacity: 0; } }
@keyframes sh-ring { 0%,8% { stroke-dashoffset: 100px; } 40%,86% { stroke-dashoffset: calc(var(--off) * 1px); } 98%,100% { stroke-dashoffset: 100px; } }
@keyframes sh-toast { 0% { transform: translateY(calc(var(--u) * -90)); opacity: 0; } 8%,26% { transform: none; opacity: 1; } 34%,100% { transform: translateY(calc(var(--u) * -90)); opacity: 0; } }
@keyframes sh-open { 0%,26% { opacity: .0; transform: translateY(calc(var(--u) * 40)); } 40%,92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(var(--u) * 40)); } }
@keyframes sh-flow { 0% { left: 0%; } 15% { left: 0%; } 35% { left: 33.33%; } 55% { left: 66.66%; } 75%,100% { left: 100%; } }
@keyframes sh-draw { 0%,4% { stroke-dashoffset: 1px; opacity: 1; } 46%,88% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1px; opacity: 0; } }
@keyframes sh-area { 0%,24% { opacity: 0; } 50%,88% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes sh-log { 0%,6% { opacity: 0; transform: translateX(calc(var(--u) * -14)); } 16%,86% { opacity: 1; transform: none; } 96%,100% { opacity: 0; transform: translateX(calc(var(--u) * -14)); } }

.sh .a1 { animation: sh-d1 16s ease-in-out infinite; }
.sh .a2 { animation: sh-d2 19s ease-in-out infinite; }
.sh .a3 { animation: sh-d3 14s ease-in-out infinite; }
.sh .sh__in { display: block; animation: sh-up 1.1s cubic-bezier(.22,1,.36,1) both; }
.sh .sh__fu { animation: sh-fade .9s cubic-bezier(.22,1,.36,1) both; }
.sh .sh__track { animation: sh-track 7s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__thumb { animation: sh-thumb 7s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__rv { animation: sh-reveal 7s cubic-bezier(.22,1,.36,1) infinite; }
.sh .sh__knob { animation: sh-knob 7s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__fill { animation: sh-fill 7s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__live { animation: sh-pulse 1.6s ease-in-out infinite; }
.sh .sh__status i { animation: sh-pulse 1.6s ease-in-out infinite; }
.sh .sh__bars span, .sh .sh__spark span { animation: sh-bar 1.2s ease-in-out infinite; }
.sh .sh__wf::after { animation: sh-build 8s cubic-bezier(.22,1,.36,1) infinite; animation-delay: var(--d, 0s); }
.sh .sh__modeA { animation: sh-modeA 8s ease infinite; }
.sh .sh__modeB { animation: sh-modeB 8s ease infinite; }
.sh .sh__ringArc { animation: sh-ring 8s cubic-bezier(.22,1,.36,1) infinite; }
.sh .sh__toast { animation: sh-toast 8s cubic-bezier(.22,1,.36,1) infinite; }
.sh .sh__email { animation: sh-open 8s cubic-bezier(.22,1,.36,1) infinite; }
.sh .sh__flowDot { animation: sh-flow 8s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__lineDraw { animation: sh-draw 8s cubic-bezier(.65,0,.35,1) infinite; }
.sh .sh__area { animation: sh-area 8s ease infinite; }
.sh .sh__logRow { animation: sh-log 8s cubic-bezier(.22,1,.36,1) infinite; }
.sh .sh__logRow:nth-child(2) { animation-delay: .5s; }
.sh .sh__logRow:nth-child(3) { animation-delay: 1s; }

/* intro waits until the block is on screen (.is-js is added by view.js); loops pause off-screen */
.sh.is-js:not(.is-in) .sh__in, .sh.is-js:not(.is-in) .sh__fu { animation-play-state: paused; }
.sh.is-off *, .sh.is-off *::after, .sh.is-off *::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.sh *, .sh *::after, .sh *::before { animation: none !important; transition: none !important; }
	.sh__toast { display: none; }
}