/* Octzen Showcase: custom plugin CTA */
.ocs-cpx {
	--cpx-max: 1200px;
	--cpx-pad: clamp(48px, 8vw, 110px);
	position: relative;
	padding: var(--cpx-pad) var(--ocs-gutter);
	overflow: hidden;
	background: var(--ocs-bg);
	isolation: isolate;
}

.ocs-cpx::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(50% 45% at 20% 40%, color-mix(in srgb, var(--ocs-cool) 16%, transparent), transparent 70%),
		radial-gradient(45% 40% at 85% 70%, color-mix(in srgb, var(--ocs-accent) 9%, transparent), transparent 70%);
}

.ocs-cpx .ocs-cpx__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(32px, 6vw, 90px);
	align-items: center;
	max-width: var(--cpx-max);
	margin: 0 auto;
}

.ocs-cpx.visual-right .ocs-cpx__visual { order: 2; }

/* ---------------------------------------------------------------- stage
   One small custom plugin plugs in, the rented plugins get wiped out, power flows
   through the features. Sizes use the stage width (cqw) so it scales as one picture. */
.ocs-cpx .ocs-cpx__stage {
	--bad: #ff7d6b;
	--ok: #3ddc84;
	position: relative;
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
	aspect-ratio: 1 / 1.04;
	overflow: hidden;
	border: 1px solid var(--ocs-line-strong);
	border-radius: 30px;
	background:
		radial-gradient(70% 45% at 38% 66%, color-mix(in srgb, var(--ocs-accent) 9%, transparent), transparent 75%),
		radial-gradient(60% 40% at 20% 8%, color-mix(in srgb, var(--bad) 7%, transparent), transparent 70%),
		linear-gradient(165deg, #131826, #090c13);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}

.cpx-scene { position: absolute; inset: 0; container-type: inline-size; line-height: 1.2; }
.cpx-old, .cpx-rig, .cpx-stats { font-size: max(10px, 2.5cqw); }

/* ---- the rented plugins */
.cpx-old { position: absolute; top: 4.2cqw; right: 4cqw; left: 4cqw; z-index: 2; }

.cpx-old__label {
	margin: 0 0 2cqw;
	font-weight: 700; font-size: 0.86em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ocs-muted);
	transition: opacity 0.4s;
}

.cpx-old__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw; }

.cpx-old__c {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 1.6cqw;
	align-items: center;
	padding: 1.7cqw 2cqw;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2.2cqw;
	background: linear-gradient(160deg, #1a1f2c, #11151f);
	box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.45);
	transform-origin: 50% 60%;
}

.cpx-old__ico {
	display: grid;
	grid-row: 1 / 3;
	place-items: center;
	width: 5.2cqw; height: 5.2cqw;
	border-radius: 1.4cqw;
	background: linear-gradient(150deg, #3a4153, #262c3a);
	font-weight: 800; font-size: 0.95em;
	color: #aab2c5;
}

.cpx-old__name { overflow: hidden; font-weight: 650; font-size: 0.86em; text-overflow: ellipsis; white-space: nowrap; color: #c9d0e0; }
.cpx-old__price { position: relative; justify-self: start; font-weight: 700; font-size: 0.86em; color: var(--bad); }

/* the red "update me" dot, a small sign of upkeep */
.cpx-old__upd { position: absolute; top: 1.2cqw; right: 1.4cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0.5cqw color-mix(in srgb, var(--bad) 25%, transparent); font-style: normal; }

.cpx-old__clear {
	position: absolute;
	top: 50%;
	right: 0; left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2cqw;
	margin: 0;
	font-weight: 650; font-size: 1.12em;
	color: var(--ocs-text);
	opacity: 0;
	transform: translateY(-30%) scale(0.96);
	pointer-events: none;
	transition: opacity 0.6s, transform 0.7s var(--ocs-ease);
}

.cpx-old__clear span { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--ok); color: #05210f; }

/* ---- energy bolt: fired upward from the main tile of the website card (it leaves the tile at 72cqw, clear of the
   window title; tile top = rig top + 8.6cqw) through the old plugins */
.cpx-bolt {
	position: absolute;
	top: 6cqw; left: 72cqw;
	z-index: 4;
	width: 0.5cqw; height: calc(var(--rig-top, 36.2cqw) + 2.6cqw);
	margin-left: -0.25cqw;
	border-radius: 1cqw;
	background: linear-gradient(to top, #fff, var(--ocs-accent) 30%, transparent);
	box-shadow: 0 0 2.4cqw var(--ocs-accent), 0 0 6cqw color-mix(in srgb, var(--ocs-accent) 60%, transparent);
	opacity: 0;
	transform: scaleY(0);
	transform-origin: 50% 100%;
}

/* ---- the rig: plug on the left, website on the right */
.cpx-rig { position: absolute; top: var(--rig-top, 36.2cqw); right: 0; left: 0; z-index: 3; }

.cpx-site {
	position: relative;
	box-sizing: border-box;
	/* every part of the card is placed from fixed numbers, so no theme rule can open gaps in it:
	   bar 6.4 + gap 2.2 + main tile 8.6 + gap 1.6 + rows of 7 with 1.4 between + bottom 2.2 */
	height: calc(19.6cqw + var(--rows, 3) * 8.4cqw + 2px);
	margin: 0 4cqw 0 40cqw;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2.8cqw;
	background: linear-gradient(170deg, #161c2a, #0c1019);
	box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.5);
	transition: border-color 0.6s, box-shadow 0.8s;
}

.cpx-site__bar { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; gap: 1cqw; box-sizing: border-box; height: 6.4cqw; margin: 0 !important; padding: 0 2.4cqw; border-bottom: 1px solid var(--ocs-line); }
.cpx-site__bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.cpx-site__bar span { margin-left: 1.2cqw; font-weight: 650; font-size: 0.85em; letter-spacing: 0.04em; color: var(--ocs-muted); }

/* Vertical layout inside the card (cqw): bar 0 to 6.4, gap 2.2, main tile 8.6 to 17.2, then the
   feature tiles. The wires below are placed from these numbers. */

/* ---- the main tile: "your desired functions, built". Power enters here and flows out from it. */
.cpx-core {
	position: absolute;
	top: 8.6cqw; right: 2.2cqw; left: 2.2cqw;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2cqw;
	box-sizing: border-box;
	height: 8.6cqw;
	margin: 0 !important;
	padding: 0 2.4cqw 0 2cqw;
	overflow: hidden;
	isolation: isolate;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 2.2cqw;
	background: rgba(255, 255, 255, 0.02);
	color: #6c7489;
	transition: color 0.5s, border-color 0.5s, box-shadow 0.8s, transform 0.5s var(--ocs-ease);
}

.cpx-core::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0; background: linear-gradient(115deg, var(--ocs-accent) 0%, #ff8a5c 52%, #ff5d8f 100%); transition: opacity 0.7s; }
.cpx-core::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%); transform: translateX(-120%); }

.cpx-core__ico { display: grid; flex: 0 0 auto; place-items: center; width: 5.2cqw; height: 5.2cqw; border-radius: 1.5cqw; background: rgba(255, 255, 255, 0.07); transition: background 0.5s; }
.cpx-core__ico svg { width: 58%; height: 58%; fill: currentColor; }
.cpx-core__txt { display: -webkit-box; min-width: 0; overflow: hidden; font-weight: 750; font-size: 0.98em; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.cpx-core__live { display: inline-flex; flex: 0 0 auto; align-items: center; margin-left: auto; opacity: 0; transform: translateX(1cqw); transition: opacity 0.4s, transform 0.5s var(--ocs-ease); }
.cpx-core__live i { display: block; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0.5cqw rgba(26, 16, 0, 0.18); }

/* ---- wires. Everything is a plain track; the "is-power" state fills it and sends light along it. */
.cpx-feed { position: absolute; z-index: 0; top: 12.7cqw; bottom: 50%; left: 0.9cqw; width: 0.4cqw; pointer-events: none; }
.cpx-feed::before, .cpx-feed b { content: ""; position: absolute; inset: 0; border-radius: 1cqw; }
.cpx-feed::before { background: #202636; transition: background 0.4s; }
.cpx-feed::after { content: ""; position: absolute; top: 0; left: 0; width: 1.5cqw; height: 0.4cqw; border-radius: 1cqw; background: #202636; transition: background 0.4s 0.3s; }
.cpx-feed b { overflow: hidden; }
.cpx-feed b::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 55%; border-radius: 1cqw; background: linear-gradient(to top, transparent, var(--ocs-accent), #fff); opacity: 0; transform: translateY(100%); }

.cpx-trunk { position: absolute; z-index: 0; top: 17.2cqw; bottom: 2.2cqw; left: 50%; width: 0.4cqw; margin-left: -0.2cqw; overflow: hidden; border-radius: 1cqw; background: #202636; transition: background 0.4s; }
.cpx-trunk::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--ocs-accent), #fff); opacity: 0; transform: translateY(-110%); }

/* Plain divs placed with fixed numbers, not a list in the normal flow: themes add margins, padding
   and spacing to every ul and li, which showed up as empty bands above, between and below the
   tiles. Row r starts at 18.8 + r * 8.4 and each tile is 7 tall. */
.ocs-cpx .cpx-site .cpx-site__feats { position: absolute; inset: 0; z-index: 1; margin: 0 !important; padding: 0 !important; pointer-events: none; }
.ocs-cpx .cpx-site .cpx-site__feats::before, .ocs-cpx .cpx-site .cpx-site__feats::after { content: none !important; display: none !important; }

.cpx-feat {
	position: absolute;
	top: calc(18.8cqw + var(--r, 0) * 8.4cqw);
	left: calc(2.2cqw + var(--c, 0) * ((100% - 5.8cqw) / 2 + 1.4cqw));
	display: flex;
	align-items: center;
	gap: 1.3cqw;
	box-sizing: border-box;
	width: calc((100% - 5.8cqw) / 2);
	height: 7cqw;
	min-width: 0;
	margin: 0 !important;
	padding: 0 1.8cqw;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 1.8cqw;
	background: rgba(255, 255, 255, 0.02);
	color: #6c7489;
	transition: color 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.5s, transform 0.5s var(--ocs-ease);
}

.cpx-feat__ico { display: grid; flex: 0 0 auto; place-items: center; font-size: 1.35em; }
.cpx-feat__ico svg { width: 1em; height: 1em; fill: currentColor; }
.cpx-feat__txt { overflow: hidden; font-weight: 650; font-size: 0.9em; text-overflow: ellipsis; white-space: nowrap; }
.cpx-feat__tick { display: grid; flex: 0 0 auto; place-items: center; width: 2.6cqw; height: 2.6cqw; margin-left: auto; border-radius: 50%; background: var(--ok); color: #05210f; opacity: 0; transform: scale(0.3); transition: opacity 0.3s, transform 0.5s var(--ocs-ease); }
.cpx-feat__tick svg { width: 62%; height: 62%; }

/* a band of light that crosses the website when power arrives */
.cpx-sweep { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ocs-accent) 22%, transparent) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }

/* ---- socket on the left edge of the website
   Geometry (all in cqw, measured from the stage's left edge):
   site starts at 40; socket is 5.4 wide, centred on that edge, so it spans 37.3 to 42.7;
   its two holes are 3.4 long and centred, so they run 38.3 to 41.7. */
.cpx-socket {
	position: absolute;
	top: 50%; left: 40cqw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4cqw;
	width: 5.4cqw; height: 9.4cqw;
	margin: -4.7cqw 0 0 -2.7cqw;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 1.8cqw;
	background: #0a0d14;
	box-shadow: inset 0 0.4cqw 1cqw rgba(0, 0, 0, 0.8);
	transition: border-color 0.4s, box-shadow 0.6s;
	z-index: 2;
}

.cpx-socket i { width: 3.4cqw; height: 0.9cqw; border-radius: 0.45cqw; background: #272d3b; transition: background 0.3s, box-shadow 0.5s; }

.cpx-ring { position: absolute; top: 50%; left: 40cqw; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border: 2px solid var(--ocs-accent); border-radius: 50%; opacity: 0; pointer-events: none; }

/* ---- the plug (it is tiny on purpose)
   The box is exactly body (13) + prongs (4.4) wide and its right edge sits at 41.7, the end of
   the socket holes. So when it is home the body touches the socket face and the prong tips stop
   at the end of the holes, never past the socket. Nothing inside may be wider than the box. */
.cpx-plugwrap {
	position: absolute;
	top: 50%; left: 24.3cqw;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: end;
	width: 17.4cqw;
	transform: translate3d(-9cqw, -6.5cqw, 0);
	transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1);
}

.cpx-plug { display: flex; align-items: center; justify-content: flex-end; width: 100%; }

.cpx-plug__body {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 13cqw; height: 13cqw;
	border-radius: 3.4cqw;
	background: linear-gradient(150deg, color-mix(in srgb, var(--ocs-accent) 94%, #fff), color-mix(in srgb, var(--ocs-accent) 78%, #7a3b00));
	box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, 0.5), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.5);
	color: var(--ocs-accent-ink);
	transition: box-shadow 0.6s;
}

.cpx-plug__body svg { width: 56%; height: 56%; }
.cpx-plug__prongs { display: flex; flex: 0 0 auto; flex-direction: column; gap: 1.4cqw; width: 4.4cqw; }
.cpx-plug__prongs i { width: 100%; height: 0.9cqw; border-radius: 0 0.45cqw 0.45cqw 0; background: linear-gradient(#d9dde8, #8e96a8); }

/* The label is centred under the plug body (not under body + prongs) and wraps onto two lines,
   so it never reaches the website card or the socket. */
.cpx-plug__name, .cpx-plug__tag {
	justify-self: end;
	width: 16cqw;
	margin-right: 2.9cqw;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.cpx-plug__name { margin-top: 1.8cqw; font-weight: 700; font-size: 0.86em; line-height: 1.25; letter-spacing: 0.02em; color: var(--ocs-text); }
.cpx-plug__tag { margin-top: 0.5cqw; font-size: 0.74em; line-height: 1.3; color: var(--ocs-muted); }

/* the cable runs off to the left edge; light travels along it when powered */
.cpx-cable { position: absolute; z-index: -1; top: 6.1cqw; right: 100%; width: 60cqw; height: 0.9cqw; margin-right: -6.5cqw; border-radius: 1cqw; background: #202636; overflow: hidden; }
.cpx-cable::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ocs-accent), #fff, var(--ocs-accent), transparent) 0 0 / 40% 100% no-repeat; transform: translateX(-120%); }

/* ---- numbers */
.cpx-stats { position: absolute; right: 4cqw; bottom: 4cqw; left: 4cqw; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.cpx-stat { display: grid; gap: 0.6cqw; padding: 1.8cqw 2cqw; border: 1px solid var(--ocs-line); border-radius: 2cqw; background: rgba(255, 255, 255, 0.03); }
.cpx-stat small { font-weight: 600; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocs-muted); }
.cpx-stat__v { position: relative; display: block; height: 1.25em; overflow: hidden; font-size: 1.28em; }
.cpx-stat__v b { position: absolute; top: 0; left: 0; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; transition: transform 0.6s var(--ocs-ease), opacity 0.4s; }
.cpx-stat__a { color: var(--bad); }
.cpx-stat__b { color: var(--ok); transform: translateY(110%); opacity: 0; }

/* ================================================================ states
   (default = the "before" picture; the classes below are added by script, in order) */

/* 1. plug slides home */
.is-plug .cpx-plugwrap { transform: translate3d(0, -6.5cqw, 0); }
.is-plug .cpx-socket { border-color: color-mix(in srgb, var(--ocs-accent) 70%, transparent); }

/* 2. power: rings, glow, cable energy, features light one by one */
.is-power .cpx-socket i { background: var(--ocs-accent); box-shadow: 0 0 1.6cqw var(--ocs-accent); }
.is-power .cpx-plug__body { box-shadow: 0 0 5cqw color-mix(in srgb, var(--ocs-accent) 65%, transparent), 0 1.6cqw 4cqw rgba(0, 0, 0, 0.5), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.5); }
.is-power .cpx-site { border-color: color-mix(in srgb, var(--ocs-accent) 45%, transparent); box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.5), 0 0 9cqw color-mix(in srgb, var(--ocs-accent) 20%, transparent); }
.is-power .cpx-ring { animation: cpx-ring 1.3s ease-out 1; }
.is-power .cpx-ring--2 { animation-delay: 0.25s; }
.is-power .cpx-bolt { animation: cpx-bolt 1.1s ease-out 0.55s 1 forwards; }
.is-power .cpx-sweep { animation: cpx-sweep 1.6s ease-in-out 0.6s 1 forwards; }

/* power path: socket -> up the left wire -> main tile lights -> down the middle wire -> features */
.is-power .cpx-feed::before, .is-power .cpx-feed::after { background: color-mix(in srgb, var(--ocs-accent) 65%, #202636); }
.is-power .cpx-feed::before { transition-delay: 0s; }
.is-power .cpx-feed b::before { animation: cpx-up 0.6s ease-in 0.05s 1 forwards; }
.is-power .cpx-core { border-style: solid; border-color: transparent; color: var(--ocs-accent-ink); box-shadow: 0 0 6cqw color-mix(in srgb, var(--ocs-accent) 50%, transparent), 0 1cqw 3cqw rgba(0, 0, 0, 0.35); transition-delay: 0.5s; animation: cpx-core-pop 0.8s var(--ocs-ease) 0.5s 1 both; }
.is-power .cpx-core::before { opacity: 1; transition-delay: 0.5s; }
.is-power .cpx-core::after { animation: cpx-sweep 1.1s ease-in-out 0.75s 1 forwards; }
.is-power .cpx-core__ico { background: rgba(26, 16, 0, 0.16); transition-delay: 0.5s; }
.is-power .cpx-core__live { opacity: 1; transform: none; transition-delay: 0.85s; }
.is-power .cpx-core__live i { animation: cpx-blink 1.4s ease-in-out 1.2s infinite; }
.is-power .cpx-trunk { background: color-mix(in srgb, var(--ocs-accent) 45%, #202636); transition-delay: 0.7s; }
.is-power .cpx-trunk::before { animation: cpx-down 1s ease-in-out 0.7s 1 forwards; }
.is-power .cpx-cable::before { animation: cpx-flow 1.1s linear infinite; }
.is-power .cpx-feat {
	border-style: solid;
	border-color: color-mix(in srgb, var(--ocs-accent) 55%, transparent);
	background: color-mix(in srgb, var(--ocs-accent) 11%, rgba(255, 255, 255, 0.02));
	box-shadow: 0 0 3.4cqw color-mix(in srgb, var(--ocs-accent) 20%, transparent);
	color: var(--ocs-text);
	transition-delay: calc(0.95s + var(--k) * 0.16s);
}
.is-power .cpx-feat__ico { color: var(--ocs-accent); }
.is-power .cpx-feat__tick { opacity: 1; transform: none; transition-delay: calc(1.1s + var(--k) * 0.16s); }

/* 3. the rented plugins get wiped out, nearest to the bolt first */
.is-wipe .cpx-old__c { animation: cpx-zap 1s ease-in calc(var(--w) * 1ms) 1 forwards; }
.is-wipe .cpx-old__price::after { content: ""; position: absolute; top: 52%; right: -2px; left: -2px; height: 2px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; animation: cpx-strike 0.4s ease-out calc(var(--w) * 1ms + 120ms) 1 forwards; }
.is-wipe .cpx-old__label { opacity: 0; transition-delay: 0.9s; }
.is-wipe .cpx-old__clear { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: 1.15s; }

/* 4. the numbers flip */
.is-done .cpx-stat__a { transform: translateY(-110%); opacity: 0; }
.is-done .cpx-stat__b { transform: none; opacity: 1; }
.is-done .cpx-stat:nth-child(2) .cpx-stat__a, .is-done .cpx-stat:nth-child(2) .cpx-stat__b { transition-delay: 0.12s; }
.is-done .cpx-stat:nth-child(3) .cpx-stat__a, .is-done .cpx-stat:nth-child(3) .cpx-stat__b { transition-delay: 0.24s; }

/* back to the start: the old plugins return one by one */
.is-reset .cpx-old__c { animation: cpx-back 0.6s var(--ocs-ease) calc(var(--w) * 0.5ms) 1 both; }
.is-reset .cpx-feat, .is-reset .cpx-feat__tick, .is-reset .cpx-core, .is-reset .cpx-core::before, .is-reset .cpx-core__ico, .is-reset .cpx-core__live, .is-reset .cpx-trunk, .is-reset .cpx-feed::before, .is-reset .cpx-feed::after { transition-delay: 0s; }
.is-reset .cpx-core { animation: none; }

/* no script, or reduced motion: show the finished picture, still */
.is-static, .is-static * { animation: none !important; transition: none !important; }
.is-static .cpx-old__c { opacity: 0; }
.is-static .cpx-bolt { opacity: 0; }
.is-static .cpx-sweep, .is-static .cpx-core::after { opacity: 0; }
.is-static .cpx-feed b, .is-static .cpx-trunk::before { opacity: 0; }

@keyframes cpx-ring { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(3.6); } }
@keyframes cpx-bolt { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cpx-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes cpx-up { 0% { opacity: 1; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(-182%); } }
@keyframes cpx-down { 0% { opacity: 1; transform: translateY(-110%); } 100% { opacity: 1; transform: translateY(340%); } }
@keyframes cpx-core-pop { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes cpx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes cpx-flow { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes cpx-strike { to { transform: scaleX(1); } }
@keyframes cpx-zap {
	0% { opacity: 1; transform: none; filter: none; }
	16% { opacity: 1; transform: translateX(-0.5cqw) scale(1.03); border-color: #fff; background: color-mix(in srgb, var(--ocs-accent) 55%, #1a1f2c); }
	28% { opacity: 1; transform: translateX(0.5cqw) scale(1.03); border-color: var(--ocs-accent); }
	55% { opacity: 0.9; transform: scale(0.98); border-color: var(--bad); background: #231517; }
	100% { opacity: 0; transform: translateY(-2cqw) scale(0.55) rotate(-3deg); border-color: transparent; }
}
@keyframes cpx-back { from { opacity: 0; transform: translateY(2cqw) scale(0.9); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- copy */
.ocs-cpx .ocs-cpx__copy { min-width: 0; }

.ocs-cpx .ocs-cpx__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-weight: 600; font-size: 0.78rem; line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ocs-accent);
}

.ocs-cpx .ocs-cpx__eyebrow i { width: 9px; height: 10px; background: var(--ocs-accent); clip-path: var(--ocs-hex); }

.ocs-cpx .ocs-cpx__title {
	max-width: 17ch;
	font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
	color: var(--ocs-text);
}

.ocs-cpx .ocs-hl { color: var(--ocs-accent); }

.ocs-cpx .ocs-cpx__text {
	max-width: 50ch;
	margin-top: clamp(16px, 2vw, 24px);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.65;
	color: var(--ocs-muted);
}

.ocs-cpx .ocs-cpx__points { display: grid; gap: 14px; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; }

.ocs-cpx .ocs-cpx__points li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-weight: 500; font-size: 1rem; line-height: 1.4;
	color: var(--ocs-text);
}

.ocs-cpx .ocs-cpx__check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ocs-accent) 16%, transparent);
	color: var(--ocs-accent);
}

.ocs-cpx .ocs-cpx__price { margin: clamp(22px, 3vw, 30px) 0 0; font-size: 0.95rem; color: var(--ocs-muted); }
.ocs-cpx .ocs-cpx__price b { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ocs-text); }

.ocs-cpx .ocs-cpx__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ocs-cpx .ocs-cpx__actions .ocs-btn svg { transition: transform 0.35s var(--ocs-ease); }
.ocs-cpx .ocs-cpx__actions .ocs-btn:hover svg { transform: translateX(4px); }
.ocs-cpx .ocs-cpx__note { margin: 16px 0 0; font-size: 0.85rem; color: var(--ocs-muted); }

/* entrance */
.ocs-cpx.is-ready .ocs-cpx__copy > *,
.ocs-cpx.is-ready .ocs-cpx__stage { animation: ocs-cpx-in 0.9s var(--ocs-ease) both; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(2) { animation-delay: 80ms; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(3) { animation-delay: 160ms; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(4) { animation-delay: 240ms; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(5) { animation-delay: 320ms; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(6) { animation-delay: 400ms; }
.ocs-cpx.is-ready .ocs-cpx__copy > :nth-child(7) { animation-delay: 480ms; }
@keyframes ocs-cpx-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* ---------------------------------------------------------------- strip */
.ocs-cpx .ocs-cpx__strip { max-width: 1400px; margin: clamp(48px, 7vw, 88px) auto 0; }

.ocs-cpx .ocs-cpx__striptitle {
	margin: 0 0 22px;
	text-align: center;
	font-weight: 600; font-size: 0.78rem; line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ocs-muted);
}

.ocs-cpx .ocs-cpx__marq {
	overflow: hidden;
	margin-top: 12px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.ocs-cpx .ocs-cpx__track { display: flex; width: max-content; animation: ocs-cpx-marq 55s linear infinite; }
.ocs-cpx .ocs-cpx__marq--1 .ocs-cpx__track { animation-direction: reverse; animation-duration: 65s; }
.ocs-cpx .ocs-cpx__track ul { display: flex; flex-shrink: 0; gap: 12px; margin: 0; padding: 0 6px; }

.ocs-cpx .ocs-cpx__track li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--ocs-line-strong);
	border-radius: 14px;
	background: color-mix(in srgb, var(--ocs-surface) 80%, transparent);
	font-weight: 500; font-size: 0.92rem; line-height: 1;
	white-space: nowrap;
	color: var(--ocs-text);
}

.ocs-cpx .ocs-cpx__track li i { width: 7px; height: 8px; background: var(--ocs-accent); clip-path: var(--ocs-hex); }

@keyframes ocs-cpx-marq { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- small */
@media (max-width: 900px) {
	.ocs-cpx .ocs-cpx__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ocs-cpx.visual-right .ocs-cpx__visual { order: 0; }
	.ocs-cpx .ocs-cpx__copy { text-align: center; }
	.ocs-cpx .ocs-cpx__title, .ocs-cpx .ocs-cpx__text { margin-right: auto; margin-left: auto; }
	.ocs-cpx .ocs-cpx__points { justify-items: center; }
	.ocs-cpx .ocs-cpx__actions { flex-direction: column; align-items: center; justify-content: center; }
	.ocs-cpx .ocs-cpx__actions .ocs-btn { flex: 0 0 auto; width: auto; max-width: 100%; }
}

@media (max-width: 767px) {
	.ocs-cpx .ocs-cpx__stage { border-radius: 24px; }
	.ocs-cpx .ocs-cpx__points li { text-align: left; }
	.ocs-cpx .ocs-cpx__track { animation-duration: 40s; }
}

@media (prefers-reduced-motion: reduce) {
	.ocs-cpx .ocs-cpx__track { animation: none; }
	.ocs-cpx.is-ready .ocs-cpx__copy > *, .ocs-cpx.is-ready .ocs-cpx__stage { animation: none; }
}