/* Homepage hero, first slide: the device stack builds itself, silicon at the bottom to the cloud on top
   (assets/js/hero-stack.js). An isometric pile of rounded plates; each drops into its slot in turn, with a
   flat label tag off its right corner that faces the reader. Transform and opacity only. */
.hst { --lift: 54px; --size: 200px; --ease: cubic-bezier(0.23, 1, 0.32, 1); position: relative; flex: 1 1 400px; display: grid; place-items: center; min-height: 460px; perspective: 1400px; perspective-origin: 50% 35%; pointer-events: none; }
.hst-iso { position: relative; width: var(--size); height: var(--size); margin: 230px 200px 0 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); }

.hst-slot { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; transform: translateZ(calc(var(--k) * var(--lift) + 150px)); transition: transform 620ms var(--ease), opacity 280ms var(--ease); }
.hst-slot.placed { opacity: 1; transform: translateZ(calc(var(--k) * var(--lift))); }
.hst-slot.placed:has(.hst-cloud) { transform: translateZ(calc(var(--k) * var(--lift) + var(--lift) * 0.6)); } /* the cloud floats above the pile */

.hst-slab {
	position: absolute; inset: 0; border-radius: 14px; transform-style: preserve-3d;
	--face: linear-gradient(135deg, #1a3d66, #102d4f 70%); --edge: rgba(255, 255, 255, 0.22); --side: #0b1f36; --ink: #e7f3fb;
	border: 1px solid var(--edge); background: var(--face);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.hst-slab::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--side); border: 1px solid var(--edge); transform: translateZ(-12px); } /* plate thickness */
.hst-hw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px); }
.hst-os { --face: linear-gradient(135deg, #0d4a86, #0a3566 70%); --edge: rgba(0, 175, 240, 0.55); --side: #072745; }
.hst-net { --face: linear-gradient(135deg, #1fbaf5, #0098d6 70%); --edge: #8fdcfa; --side: #0a5a86; --ink: #ffffff; }
.hst-sec { --face: linear-gradient(135deg, #0a84ff, #0062cc 70%); --edge: #7cc0ff; --side: #003f85; --ink: #ffffff; }
.hst-app { --face: linear-gradient(135deg, #ffffff, #e3edf5 70%); --edge: #c9d5e2; --side: #9fb3c6; --ink: #102d4f; }
.hst-cloud { --face: linear-gradient(135deg, rgba(0, 194, 255, 0.28), rgba(10, 132, 255, 0.14)); --edge: #7fd6ff; --ink: #ffffff; border: 1.5px dashed var(--edge); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 44px rgba(0, 175, 240, 0.45); }
.hst-cloud::before { display: none; }

/* Icon on the plate's face, turned back so it reads upright. */
.hst-face { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: var(--ink); opacity: 0.6; transform: rotateZ(40deg); }
.hst-face svg, .hst-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Labels: laid out flat in a column beside the pile (positions set by hero-stack.js from each plate's corner,
   spaced so they never overlap), each with a short leader line back to its plate. */
.hst-anchor { position: absolute; left: 100%; top: 100%; width: 0; height: 0; }
.hst-measure .hst-slot { transition: none !important; transform: translateZ(calc(var(--k) * var(--lift))) !important; }
.hst-measure .hst-slot:has(.hst-cloud) { transform: translateZ(calc(var(--k) * var(--lift) + var(--lift) * 0.6)) !important; }
.hst-labels { position: absolute; inset: 0; pointer-events: none; }
.hst-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hst-lines path { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; opacity: 0; transition: opacity 360ms var(--ease) 240ms; }
.hst-lines circle { fill: #5ac8ff; opacity: 0; transition: opacity 360ms var(--ease) 240ms; }
.hst-lines .on { opacity: 1; }
.hst-tag {
	position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 9px;
	border-radius: 9px; background: rgba(8, 16, 28, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
	color: #fff; font-size: 0.8125rem; white-space: nowrap;
	opacity: 0; transition: opacity 360ms var(--ease) 240ms, translate 360ms var(--ease) 240ms; translate: -6px 0;
}
.hst-tag b { font-weight: 600; }
.hst-tag > span:last-child { color: #9fb3c8; font-weight: 500; }
.hst-ico { display: inline-grid; width: 15px; height: 15px; color: #5ac8ff; flex: none; }
.hst-tag.on { opacity: 1; translate: 0 0; }


@media (max-width: 1100px) { .hst { --lift: 46px; --size: 170px; } .hst-iso { margin: 200px 190px 0 0; } }
@media (max-width: 760px) {
	.hst { --lift: 34px; --size: 120px; min-height: 320px; flex-basis: 100%; }
	.hst-iso { margin: 150px 150px 0 0; }
	.hst-face { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.hst-tag { height: 26px; font-size: 0.75rem; }
	.hst-tag > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hst-slot { transition: opacity 300ms linear; transform: translateZ(calc(var(--k) * var(--lift))); }
	.hst-tag { transition: opacity 300ms linear; }
}

/* Solid tiles (#2513): four real side walls give each plate a visible thickness in the same colour family as its face,
   instead of a flat plane with a ghost copy below it. */
.hst { --t: 16px; }
.hst-slab { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.hst-slab::before { display: none; }
.hst-wall { position: absolute; background: var(--side); }
.hst-wn, .hst-ws { left: 0; width: 100%; height: var(--t); }
.hst-we, .hst-ww { top: 0; height: 100%; width: var(--t); }
.hst-ws { top: 100%; transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(180deg, color-mix(in srgb, var(--side) 70%, #fff 0%), color-mix(in srgb, var(--side) 75%, #000)); }
.hst-wn { bottom: 100%; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.hst-we { left: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, var(--side), color-mix(in srgb, var(--side) 60%, #000)); }
.hst-ww { right: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); }
.hst-hw { --side: #0d2a4a; }
.hst-os { --side: #082f57; }
.hst-net { --side: #0779ad; }
.hst-sec { --side: #0050a8; }
.hst-app { --side: #b4c5d6; }
@media (max-width: 760px) { .hst { --t: 10px; } }