/* Showcase scenes: looping CSS/SVG animations that behave like GIFs.
   One 8s clock (--loop) per scene. Elements enter on a stage (.s1 … .s6) and
   every stage hides together at 93%, so the loop resets cleanly.
   Each scene reads --accent from the page. Reduced motion = final frame, no movement. */

:root { --loop: 8s; }

/* ── Stage keyframes (opacity + transform) ──────────────── */
.s1, .s2, .s3, .s4, .s5, .s6 {
	opacity: 0;
	animation-duration: var(--loop);
	animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.s1 { animation-name: stage-1; } .s2 { animation-name: stage-2; } .s3 { animation-name: stage-3; }
.s4 { animation-name: stage-4; } .s5 { animation-name: stage-5; } .s6 { animation-name: stage-6; }
@keyframes stage-1 { 0%, 4%  { opacity: 0; transform: translateY(8px); } 9%,  93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes stage-2 { 0%, 16% { opacity: 0; transform: translateY(8px); } 21%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes stage-3 { 0%, 28% { opacity: 0; transform: translateY(8px); } 33%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes stage-4 { 0%, 40% { opacity: 0; transform: translateY(8px); } 45%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes stage-5 { 0%, 52% { opacity: 0; transform: translateY(8px); } 57%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes stage-6 { 0%, 64% { opacity: 0; transform: translateY(8px); } 69%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* Typing variant: clip-path reveal in steps */
.t1, .t2, .t3, .t4 {
	clip-path: inset(0 100% 0 0);
	animation-duration: var(--loop);
	animation-timing-function: steps(26, end);
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.t1 { animation-name: type-1; } .t2 { animation-name: type-2; } .t3 { animation-name: type-3; } .t4 { animation-name: type-4; }
@keyframes type-1 { 0%, 3%  { clip-path: inset(0 100% 0 0); opacity: 1; } 12%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes type-2 { 0%, 17% { clip-path: inset(0 100% 0 0); opacity: 1; } 26%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes type-3 { 0%, 31% { clip-path: inset(0 100% 0 0); opacity: 1; } 40%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes type-4 { 0%, 45% { clip-path: inset(0 100% 0 0); opacity: 1; } 54%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

/* Three values crossfading on one 8s clock (thirds tile exactly) */
.cycle { position: relative; display: inline-block; height: 1.25em; min-width: var(--w, 9ch); vertical-align: bottom; }
.cycle span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: live-cycle var(--loop) cubic-bezier(0.4,0,0.2,1) infinite; }
.cycle span:nth-child(2) { animation-delay: calc(var(--loop) / 3); }
.cycle span:nth-child(3) { animation-delay: calc(var(--loop) / 3 * 2); }
@keyframes live-cycle {
	0% { opacity: 0; transform: translateY(5px); }
	4%, 31% { opacity: 1; transform: translateY(0); }
	35%, 100% { opacity: 0; transform: translateY(-5px); }
}

/* ── Shared frame ───────────────────────────────────────── */
.scene {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
		linear-gradient(165deg, #121a2a, #0a0f18);
	border: 1px solid rgba(255,255,255,0.08);
	font-family: 'Montserrat', sans-serif;
	color: rgba(255,255,255,0.86);
	isolation: isolate;
}
.sec-light .scene, .sec-grey .scene {
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
		linear-gradient(165deg, #ffffff, #f2f5f9);
	border-color: rgba(11,18,32,0.08);
	color: #0b1220;
	box-shadow: 0 24px 60px -30px rgba(11,18,32,0.25);
}
.scene-bar {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sec-light .scene-bar, .sec-grey .scene-bar { border-bottom-color: rgba(11,18,32,0.06); }
.scene-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.sec-light .scene-dot, .sec-grey .scene-dot { background: rgba(11,18,32,0.14); }
.scene-title {
	margin-left: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: rgba(255,255,255,0.4); font-weight: 600;
}
.sec-light .scene-title, .sec-grey .scene-title { color: rgba(11,18,32,0.4); }
.scene-body { position: absolute; inset: 38px 0 0 0; padding: 18px; }

/* Live pill */
.live-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px 8px 10px; border-radius: 999px;
	background: rgba(10,15,24,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1);
	font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #fff;
	white-space: nowrap;
}
.live-pill .live-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
	animation: live-ping 2s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes live-ping {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
	70% { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── 1. Digital marketing: content calendar fills, posts go live ── */
.scene-dm .cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; gap: 6px; height: 100%; }
.scene-dm .day {
	border-radius: 10px; background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; min-height: 0;
}
.sec-light .scene-dm .day, .sec-grey .scene-dm .day { background: rgba(11,18,32,0.03); border-color: rgba(11,18,32,0.06); }
.scene-dm .day::before {
	content: attr(data-d); position: absolute; top: 6px; left: 7px;
	font-size: 9px; font-weight: 600; opacity: 0.35;
}
.scene-dm .post {
	position: absolute; left: 6px; right: 6px; bottom: 6px; height: 48%;
	border-radius: 7px; background: var(--c, var(--accent));
}
.scene-dm .post::after {
	content: ''; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px;
	border-radius: 50%; background: rgba(255,255,255,0.9);
}

/* ── 2. Paid media: channel flow (nodes positioned by %, SVG draws edges) ── */
.flow { position: relative; width: 100%; aspect-ratio: 1000 / 560; font-family: 'Montserrat', sans-serif; }
.flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow .edge-base { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1.5; }
.sec-light .flow .edge-base, .sec-grey .flow .edge-base { stroke: rgba(11,18,32,0.1); }
.flow .edge {
	fill: none; stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 1.5;
	stroke-dasharray: 4 10; stroke-linecap: round;
	animation: flow-dash 2.4s linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -28; } }
.flow .node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow .node.row { flex-direction: row; gap: 10px; }
.flow .disc {
	width: 44px; height: 44px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	box-shadow: 0 10px 26px -10px rgba(0,0,0,0.5);
	border: 1px solid rgba(0,0,0,0.06);
}
.flow .disc img { width: 48%; height: 48%; object-fit: contain; }
.flow .disc.fill img { width: 100%; height: 100%; object-fit: cover; }
.flow .disc i { color: var(--accent); font-size: 17px; }
.flow .lbl { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.55); white-space: nowrap; }
.sec-light .flow .lbl, .sec-grey .flow .lbl { color: rgba(11,18,32,0.55); }
.flow .centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.flow .centre .glow {
	position: absolute; width: 240px; height: 240px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%);
	filter: blur(14px);
}
.flow .centre .ring {
	position: absolute; width: 150px; height: 150px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	animation: ring-pulse 2.6s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes ring-pulse { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.45); opacity: 0; } }
.flow .centre .mark {
	position: relative; width: 84px; height: 84px; border-radius: 24px;
	background: #0b1220; border: 1px solid rgba(255,255,255,0.12);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--accent) 60%, transparent);
}
.flow .centre .mark img { width: 52px; height: 52px; object-fit: contain; }
@media (max-width: 760px) {
	.flow { aspect-ratio: 1000 / 760; }
	.flow .disc { width: 32px; height: 32px; }
	.flow .lbl { font-size: 8.5px; }
	.flow .centre .mark { width: 60px; height: 60px; border-radius: 18px; }
	.flow .centre .mark img { width: 38px; height: 38px; }
	.flow .centre .ring { width: 104px; height: 104px; }
	.flow .centre .glow { width: 160px; height: 160px; }
}

/* ── 2b. Paid media: budget lines pace against plan ── */
.scene-pace .lines { display: flex; flex-direction: column; justify-content: space-around; height: calc(100% - 64px); }
.scene-pace .line { display: grid; grid-template-columns: 92px 1fr 62px; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; }
.scene-pace .line .nm { display: flex; align-items: center; gap: 7px; opacity: 0.8; white-space: nowrap; overflow: hidden; }
.scene-pace .line .nm img { width: 14px; height: 14px; object-fit: contain; }
.scene-pace .line .nm i { color: var(--accent); font-size: 12px; width: 14px; text-align: center; }
.scene-pace .track { display: block; height: 9px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.sec-light .scene-pace .track, .sec-grey .scene-pace .track { background: rgba(11,18,32,0.07); }
.scene-pace .fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); width: var(--p); transform-origin: left; animation: pace-grow var(--loop) cubic-bezier(0.22,1,0.36,1) infinite; }
.scene-pace .line .val { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.7; }
@keyframes pace-grow { 0%, 6% { transform: scaleX(0); } 60%, 93% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
.scene-pace .sum {
	position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; align-items: center;
	padding: 10px 12px; border-radius: 11px; font-size: 11px; font-weight: 600;
	background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.scene-pace .sum b { font-size: 14px; font-family: 'Poppins', sans-serif; font-variant-numeric: tabular-nums; }
.scene-pace .sum .cycle { --w: 12ch; }

/* ── 3. SaaS: kanban card travels To do → Doing → Done ── */
.scene-saas .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; }
.scene-saas .col {
	border-radius: 12px; background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06); padding: 10px; position: relative;
}
.sec-light .scene-saas .col, .sec-grey .scene-saas .col { background: rgba(11,18,32,0.03); border-color: rgba(11,18,32,0.06); }
.scene-saas .col h6 { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; opacity: 0.45; }
.scene-saas .card, .scene-saas .mover {
	border-radius: 9px; padding: 9px 10px; margin-bottom: 8px;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.sec-light .scene-saas .card, .sec-grey .scene-saas .card,
.sec-light .scene-saas .mover, .sec-grey .scene-saas .mover { background: #fff; border-color: rgba(11,18,32,0.08); }
.scene-saas .ln { height: 6px; border-radius: 3px; background: currentColor; opacity: 0.18; margin-bottom: 6px; }
.scene-saas .ln.s { width: 55%; margin-bottom: 0; }
.scene-saas .mover {
	position: absolute; left: 10px; width: calc(100% - 20px); top: 32px; z-index: 2;
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent);
	animation: saas-move var(--loop) cubic-bezier(0.34,1.3,0.64,1) infinite;
}
.scene-saas .mover .ln:first-child { background: var(--accent); opacity: 0.9; width: 70%; }
.scene-saas .mover .tag {
	display: inline-block; margin-top: 8px; font-size: 9px; font-weight: 700;
	padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--accent); line-height: 1.3;
}
.scene-saas .mover .tag .cycle { --w: 5ch; height: 1.3em; }
@keyframes saas-move {
	0%, 28% { transform: translateX(0); opacity: 1; }
	36%, 62% { transform: translateX(calc(100% + 10px)); opacity: 1; }
	70%, 93% { transform: translateX(calc(200% + 20px)); opacity: 1; }
	97% { transform: translateX(calc(200% + 20px)) scale(0.96); opacity: 0; }
	98%, 100% { transform: translateX(0); opacity: 0; }
}

/* ── 4. Development & PaaS: terminal types, pipeline lights up ── */
.scene-dev .term {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 2;
	color: rgba(255,255,255,0.78);
}
.sec-light .scene-dev .term, .sec-grey .scene-dev .term { color: rgba(11,18,32,0.78); }
.scene-dev .term .l { white-space: nowrap; overflow: hidden; }
.scene-dev .term .l b { color: var(--accent); font-weight: 600; }
.scene-dev .term .l .ok { color: #22c55e; }
.scene-dev .term .l .dim { opacity: 0.45; }
.scene-dev .pipe { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 6px; }
.scene-dev .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.scene-dev .step .box {
	width: 100%; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
	font-size: 12px; color: rgba(255,255,255,0.4); position: relative; overflow: hidden;
}
.sec-light .scene-dev .step .box, .sec-grey .scene-dev .step .box { background: rgba(11,18,32,0.03); border-color: rgba(11,18,32,0.08); color: rgba(11,18,32,0.4); }
.scene-dev .step .box .lit {
	position: absolute; inset: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
	color: var(--accent);
}
.scene-dev .step small { font-size: 9.5px; font-weight: 600; opacity: 0.55; }
.scene-dev .link { width: 14px; height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 18px; flex-shrink: 0; }
.sec-light .scene-dev .link, .sec-grey .scene-dev .link { background: rgba(11,18,32,0.14); }

/* ── 5. Agentic: inbox rows get scanned, labelled, filed ── */
.scene-agent .rows { display: flex; flex-direction: column; gap: 8px; }
.scene-agent .row {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
	position: relative; overflow: hidden;
}
.sec-light .scene-agent .row, .sec-grey .scene-agent .row { background: rgba(11,18,32,0.03); border-color: rgba(11,18,32,0.06); }
.scene-agent .row .scan {
	position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; pointer-events: none;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
	animation-duration: var(--loop); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4,0,0.2,1);
}
.scene-agent .row:nth-child(1) .scan { animation-name: scan-1; }
.scene-agent .row:nth-child(2) .scan { animation-name: scan-2; }
.scene-agent .row:nth-child(3) .scan { animation-name: scan-3; }
.scene-agent .row:nth-child(4) .scan { animation-name: scan-4; }
@keyframes scan-1 { 0%        { left: -45%; } 8%,  100% { left: 110%; } }
@keyframes scan-2 { 0%, 10%   { left: -45%; } 20%, 100% { left: 110%; } }
@keyframes scan-3 { 0%, 22%   { left: -45%; } 32%, 100% { left: 110%; } }
@keyframes scan-4 { 0%, 34%   { left: -45%; } 44%, 100% { left: 110%; } }
.scene-agent .av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.sec-light .scene-agent .av, .sec-grey .scene-agent .av { background: rgba(11,18,32,0.1); }
.scene-agent .txt { flex: 1; min-width: 0; }
.scene-agent .ln { height: 6px; border-radius: 3px; background: currentColor; opacity: 0.2; margin-bottom: 5px; }
.scene-agent .ln.s { width: 45%; margin-bottom: 0; opacity: 0.12; }
.scene-agent .chip {
	font-size: 9.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
	color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.scene-agent .done {
	position: absolute; left: 18px; right: 18px; bottom: 18px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px; border-radius: 11px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	font-size: 11px; font-weight: 600;
}
.scene-agent .done b { font-size: 14px; font-variant-numeric: tabular-nums; font-family: 'Poppins', sans-serif; }
.scene-agent .done .cycle { --w: 7ch; }

/* ── 6. WhatsApp: bubbles arrive, typing dots in between ── */
.scene-wa { background: radial-gradient(120% 90% at 100% 0%, rgba(37,211,102,0.14), transparent 60%), linear-gradient(165deg, #0f1a16, #0a1210); }
.scene-wa .chat { display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: flex-end; padding-bottom: 4px; }
.scene-wa .b {
	max-width: 74%; padding: 9px 12px; border-radius: 14px; font-size: 12px; line-height: 1.45;
	font-family: 'Poppins', sans-serif;
}
.scene-wa .b.in { align-self: flex-start; background: rgba(255,255,255,0.08); border-bottom-left-radius: 4px; }
.scene-wa .b.out { align-self: flex-end; background: #005c4b; border-bottom-right-radius: 4px; }
.scene-wa .b small { display: block; text-align: right; font-size: 9px; opacity: 0.5; margin-top: 3px; }
.scene-wa .b.out small { color: #8be0c6; opacity: 0.9; }
.scene-wa .typing {
	position: absolute; left: 18px; bottom: 18px; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px;
	background: rgba(255,255,255,0.08); opacity: 0;
	animation: wa-typing var(--loop) ease infinite;
}
.scene-wa .typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: wa-dot 1s ease-in-out infinite; }
.scene-wa .typing i:nth-child(2) { animation-delay: .15s; }
.scene-wa .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-typing { 0%, 11% { opacity: 0; } 13%, 19% { opacity: 1; } 21%, 35% { opacity: 0; } 37%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes wa-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ── Hero photo frame with floating UI ── */
.photo-frame {
	position: relative; border-radius: 24px; overflow: hidden;
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
	aspect-ratio: 16 / 11; background: #0b1220;
}
.photo-frame img.ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5,7,13,0.55)); }
.photo-frame .float {
	position: absolute; z-index: 2;
	background: rgba(10,15,24,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
	padding: 10px 14px; color: #fff;
}
.photo-frame .float .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-family: 'Montserrat', sans-serif; }
.photo-frame .float .v { font-size: 17px; font-weight: 800; font-family: 'Poppins', sans-serif; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.photo-frame .float .v .cycle { --w: 11ch; }
.photo-frame .float.bl { left: 16px; bottom: 16px; }
.photo-frame .float.tr {
	right: 16px; top: 16px; width: 44px; height: 44px; padding: 0; border-radius: 14px;
	display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 17px;
}
.photo-frame .float { animation: float-y 6s ease-in-out infinite; }
.photo-frame .float.tr { animation-delay: -2.5s; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Service cards on the showcase index ── */
.svc-card {
	display: block; border-radius: 24px; overflow: hidden; background: #0b1220;
	border: 1px solid rgba(255,255,255,0.07); position: relative; text-decoration: none; color: #fff;
	transition: border-color .35s ease, transform .5s cubic-bezier(0.34,1.4,0.64,1), box-shadow .4s ease;
}
.svc-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.svc-card .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.svc-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover .media img { transform: scale(1.08); }
.svc-card .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #0b1220 100%); }
.svc-card .media .live-pill { position: absolute; left: 16px; bottom: 14px; z-index: 2; }
.svc-card .media .badge {
	position: absolute; top: 14px; left: 16px; z-index: 2;
	font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
	font-family: 'Montserrat', sans-serif; color: #fff;
	padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 80%, #000);
}
.svc-card .body { padding: 22px 24px 26px; }
.svc-card .arrow {
	position: absolute; right: 16px; top: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
	background: rgba(10,15,24,0.7); border: 1px solid rgba(255,255,255,0.12);
	display: flex; align-items: center; justify-content: center; color: #fff;
	transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.svc-card:hover .arrow { background: var(--accent); border-color: var(--accent); transform: translate(2px, -2px); }
.mini-card {
	display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #fff; text-decoration: none;
	transition: border-color .3s ease, background .3s ease;
}
.mini-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(255,255,255,0.05); }
.mini-card .ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.mini-card .ico img { width: 26px; height: 26px; object-fit: contain; }

/* Brand wall */
.brand-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .brand-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .brand-wall { grid-template-columns: repeat(5, 1fr); } }
.brand-wall .cell {
	aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid rgba(11,18,32,0.06); border-radius: 14px; padding: 16px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.brand-wall .cell img { max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.brand-wall .cell:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(11,18,32,0.35); }
.brand-wall .cell:hover img { filter: none; opacity: 1; }

/* Channel tiles (paid media) */
.chan-tile { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); aspect-ratio: 4 / 3; background: #0b1220; }
.chan-tile img.ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(0.22,1,0.36,1); }
.chan-tile:hover img.ph { transform: scale(1.05); }
.chan-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,7,13,0.88)); }
.chan-tile .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.chan-tile .cap .k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); font-family: 'Montserrat', sans-serif; }
.chan-tile .cap h3 { margin: 8px 0 0; font-size: 19px; line-height: 1.2; font-weight: 800; font-family: 'Poppins', sans-serif; letter-spacing: -0.01em; color: #fff; }
.chan-tile .cap p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.65); font-family: 'Montserrat', sans-serif; }
.chan-tile .marks { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; }
.chan-tile .marks span { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #0b1220; margin-left: -8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chan-tile .marks span:first-child { margin-left: 0; }
.chan-tile .marks img { width: 55%; height: 55%; object-fit: contain; }
.chan-tile .marks img.fill { width: 100%; height: 100%; object-fit: cover; }
.chan-tile .marks i { color: var(--accent); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	.s1, .s2, .s3, .s4, .s5, .s6, .t1, .t2, .t3, .t4, .cycle span, .live-pill .live-dot, .scene-saas .mover,
	.scene-agent .row .scan, .scene-wa .typing, .scene-wa .typing i, .flow .edge, .flow .centre .ring,
	.scene-pace .fill, .photo-frame .float, .svc-card .media img, .chan-tile img.ph {
		animation: none !important; transition: none !important;
	}
	.s1, .s2, .s3, .s4, .s5, .s6 { opacity: 1; }
	.t1, .t2, .t3, .t4 { clip-path: none; }
	.cycle span:first-child { opacity: 1; }
	.scene-saas .mover { transform: translateX(calc(200% + 20px)); }
	.scene-agent .row .scan, .scene-wa .typing, .flow .centre .ring { display: none; }
}