/* Nie rób tego — site styles. Sections: tokens · base · buttons · scene · bio · wspolpraca · features · motion */

/* ---------- fonts (Onest, OFL; Polish subset built by build_site.py) ---------- */
@font-face {
	font-family: "Onest";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("onest-400.woff2") format("woff2");
}
@font-face {
	font-family: "Onest";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("onest-700.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
	--bg: #0b1020;
	--bg2: #111a2e;
	--card: #151d31;
	--line: #25304a;
	--ink: #ffffff;
	--soft: #cbd5e1;
	--dim: #94a3b8;
	--acc: #ff9f1c;
	--acc2: #e07b00;
	--lamp: #ffc861;
	--lamp2: #ffd98a;
	--snow: #c3cee0;
	--sh: 100vh;
	color-scheme: dark;
}

/* ---------- base ---------- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	background: var(--bg);
}
body {
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}
a {
	color: var(--acc);
}
img {
	display: block;
	max-width: 100%;
}
.wrap {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px));
}
.small {
	color: var(--dim);
	font-size: 14px;
}
.center {
	text-align: center;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
footer {
	margin-top: 48px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--dim);
	font-size: 13px;
	text-align: center;
}
footer p + p {
	margin-top: 4px;
}
footer a {
	color: var(--soft);
}

/* ---------- buttons: dark windows that light up ---------- */
.stack {
	display: grid;
	gap: 12px;
}
.btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 14px 18px;
	border-radius: 16px;
	font-weight: 750;
	font-size: 17px;
	text-decoration: none;
	color: var(--ink);
	background: rgba(21, 29, 49, 0.92);
	border: 1px solid var(--line);
	transition: transform 0.12s ease, background-color 0.25s, box-shadow 0.25s, color 0.25s;
	user-select: none;
	cursor: pointer;
}
.btn .ic {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 19px;
}
.btn .go {
	margin-left: auto;
	opacity: 0.55;
	transition: transform 0.2s;
}
.btn:hover .go {
	transform: translateX(3px);
}
.btn:hover,
.btn:focus-visible {
	border-color: rgba(255, 200, 97, 0.55);
	box-shadow: 0 0 0 1px rgba(255, 200, 97, 0.25), 0 0 26px rgba(255, 200, 97, 0.18);
}
.btn:active,
.btn.press {
	transform: scale(0.97);
	background: var(--lamp);
	color: var(--bg);
	box-shadow: 0 0 34px rgba(255, 200, 97, 0.55);
}
.btn-main {
	background: linear-gradient(180deg, #ffb340, var(--acc));
	color: var(--bg);
	border-color: transparent;
	box-shadow: 0 8px 30px rgba(255, 159, 28, 0.28);
}
.btn-main .ic {
	background: rgba(11, 16, 32, 0.12);
}
.btn-main .go {
	opacity: 0.8;
}
.btn-main:hover {
	box-shadow: 0 8px 40px rgba(255, 159, 28, 0.45);
}
:focus-visible {
	outline: 2px solid var(--lamp);
	outline-offset: 3px;
}

/* ---------- scene: living night blok ---------- */
.scene {
	position: relative;
	min-height: var(--sh);
	overflow: hidden;
	background: linear-gradient(180deg, #02040a 0%, #0a1226 55%, #16213b 100%);
	isolation: isolate;
	view-transition-name: scene;
	--st: var(--sh);
}
.scene .bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.scene .layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.stars {
	position: absolute;
	inset: 0 0 30% 0;
	background-size: 300px;
	background-repeat: repeat;
	opacity: 0.85;
}
.stars.s2 {
	background-size: 260px;
	opacity: 0.4;
}
.moon {
	position: absolute;
	width: calc(var(--st) * 0.22);
	height: auto;
	max-width: none;
	right: calc(12vw - var(--st) * 0.11);
	top: calc(var(--st) * 0.13 - var(--st) * 0.11);
	pointer-events: none;
}
.moonglow {
	position: absolute;
	width: calc(var(--st) * 0.6);
	height: calc(var(--st) * 0.6);
	right: calc(12vw - var(--st) * 0.3);
	top: calc(var(--st) * 0.13 - var(--st) * 0.3);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(207, 224, 255, 0.22), rgba(207, 224, 255, 0.06) 55%, transparent);
}
.skyline {
	position: absolute;
	left: -10%;
	right: -10%;
	top: calc(var(--st) * 0.4891);
	height: calc(var(--st) * 0.385);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 100%;
	opacity: 0.95;
}
.ground {
	position: absolute;
	left: -10%;
	right: -10%;
	top: calc(var(--st) * 0.8741);
	bottom: -30%;
	background: linear-gradient(180deg, var(--snow) 0, var(--snow) 1.2%, #8394b3 1.2%, #5d6b89 40%, #2a3550 100%);
}
.stage {
	position: absolute;
	top: 0;
	left: 50%;
	height: var(--st);
	width: calc(var(--st) * 0.8);
	margin-left: calc(var(--st) * -0.4);
}
.stage > * {
	position: absolute;
}
.blok {
	inset: 0;
	width: 100%;
	height: 100%;
}
.win {
	border-radius: 2px;
	opacity: 0;
	background:
		linear-gradient(#0d121e, #0d121e) 50% 0 / 6% 100% no-repeat,
		linear-gradient(#0d121e, #0d121e) 0 38% / 100% 7% no-repeat,
		linear-gradient(180deg, #ffe2a3, var(--lamp) 60%, #e9a94a);
	box-shadow: 0 0 calc(var(--st) * 0.012) calc(var(--st) * 0.004) rgba(255, 200, 97, 0.45);
}
.win.tv {
	background:
		linear-gradient(#0d121e, #0d121e) 50% 0 / 6% 100% no-repeat,
		linear-gradient(#0d121e, #0d121e) 0 38% / 100% 7% no-repeat,
		linear-gradient(180deg, #c5ecff, #8fd3ff);
	box-shadow: 0 0 calc(var(--st) * 0.012) rgba(143, 211, 255, 0.5);
}
.kuba {
	transform-origin: 50% 94%;
}
.kuba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.kuba .eye {
	position: absolute;
	border-radius: 50%;
	background: #1f2937;
	transform: translate(calc(var(--ex, 0) * 45%), calc(var(--ey, 0) * 35%));
	transition: transform 0.18s ease-out;
}
.kuba.wide .eye {
	transform: translate(calc(var(--ex, 0) * 45%), calc(var(--ey, 0) * 35%)) scale(1.45);
}
.kuba.flinch {
	animation: flinch 0.45s ease-out !important;
}
.wins {
	position: absolute;
	inset: 0;
	transition: opacity 1.4s ease;
}
.wins > .win {
	position: absolute;
}
.kwin {
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 0 calc(var(--st) * 0.01) rgba(255, 230, 160, 0.35);
}
.kwin img {
	width: 100%;
	height: 100%;
}
/* sign windows = the three bio buttons */
.bwin {
	display: block;
	border-radius: 2px;
	background:
		linear-gradient(#0d121e, #0d121e) 50% 0 / 6% 100% no-repeat,
		linear-gradient(#0d121e, #0d121e) 0 38% / 100% 7% no-repeat,
		linear-gradient(180deg, #ffd27a, var(--acc) 70%, var(--acc2));
	box-shadow: 0 0 calc(var(--st) * 0.03) calc(var(--st) * 0.006) rgba(255, 159, 28, 0.55);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.sign {
	position: absolute;
	top: 50%;
	padding: 0.25em 0.5em 0.2em;
	border-radius: 3px;
	background: #11182a;
	border: 1px solid var(--acc);
	color: var(--acc);
	font: 700 calc(var(--st) * 0.022)/1 "Onest", system-ui, sans-serif;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transform: translateY(-50%);
	text-shadow: 0 0 6px rgba(255, 159, 28, 0.9);
	box-shadow: 0 0 10px rgba(255, 159, 28, 0.35);
}
.sign.r {
	left: calc(100% + 6%);
}
.sign.l {
	right: calc(100% + 6%);
}
.bwin.flash {
	animation: winFlash 0.5s ease-out !important;
}
.scene.zoom .stage {
	transition: transform 0.42s cubic-bezier(0.6, 0, 0.8, 0.4), opacity 0.42s;
	transform: scale(5);
	opacity: 0;
}
body.idle .wins {
	opacity: 0.12;
	transition-duration: 2.4s;
}
.lampglow {
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 170, 60, 0.38), rgba(255, 159, 28, 0.1) 60%, transparent);
}
.beacon {
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 80, 80, 0.95), rgba(239, 68, 68, 0.35) 40%, transparent);
}
.snow {
	position: absolute;
	left: 0;
	right: 0;
	top: -256px;
	bottom: 0;
	background-repeat: repeat;
	background-size: 256px;
	pointer-events: none;
}
.snow.sb {
	top: -180px;
	background-size: 180px;
	opacity: 0.7;
}
.scene .fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 38%;
	background: linear-gradient(180deg, rgba(11, 16, 32, 0), rgba(11, 16, 32, 0.75) 60%, var(--bg));
	pointer-events: none;
}

/* ---------- bio page ---------- */
.bio .scene {
	--sh: 50vh;
	--sh: clamp(300px, 50svh, 600px);
}
.bio .snd,
.wsp .snd {
	top: calc(14px + env(safe-area-inset-top, 0px));
	bottom: auto;
}
.bio .snd {
	right: auto;
	left: 14px;
}
.wsp .snd {
	right: 68px;
}
.wsp .sign {
	display: none;
}
.hero .moon {
	top: calc(var(--st) * 0.25 - var(--st) * 0.11);
}
.hero .moonglow {
	top: calc(var(--st) * 0.25 - var(--st) * 0.3);
}
.bio-main {
	margin-top: -48px;
	z-index: 2;
}
.avatar {
	width: 84px;
	height: 84px;
	margin: 0 auto 12px;
	border-radius: 50%;
	border: 3px solid var(--acc);
	background: var(--card);
	box-shadow: 0 0 0 6px rgba(11, 16, 32, 0.9), 0 0 40px rgba(255, 159, 28, 0.35);
	view-transition-name: kuba-avatar;
}
.bio h1 {
	font-size: 25px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
}
.bio .handle {
	color: var(--acc);
	font-weight: 700;
	text-align: center;
	margin-top: 2px;
}
.bio .line {
	color: var(--soft);
	text-align: center;
	margin: 6px auto 18px;
	max-width: 330px;
}
.bio .mail {
	margin-top: 20px;
	text-align: center;
	color: var(--dim);
	font-size: 14px;
	word-break: break-all;
}

/* ---------- wspolpraca ---------- */
.hero {
	--sh: 100vh;
	--sh: max(600px, 100svh);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.hero {
	--st: min(calc(var(--sh) * 0.56), 560px);
}
.hero .fade {
	top: calc(var(--st) * 0.6);
	height: auto;
}
.topbar {
	position: absolute;
	z-index: 5;
	top: calc(14px + env(safe-area-inset-top, 0px));
	left: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	background: rgba(11, 16, 32, 0.7);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}
.topbar img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--acc);
	view-transition-name: kuba-avatar;
}
.hero-copy {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: calc(var(--st) * 0.84) 16px 28px;
}
.pill {
	display: inline-block;
	background: var(--acc);
	color: var(--bg);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 5px 12px;
	border-radius: 999px;
	text-transform: uppercase;
}
.proof {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 4px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #120b02;
	border: 1px solid rgba(255, 159, 28, 0.45);
	color: var(--acc);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 700;
	text-shadow: 0 0 10px rgba(255, 159, 28, 0.5);
}
.more {
	margin-top: 28px;
}
.hero h1 {
	font-size: clamp(32px, 9.4vw, 46px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 12px 0 10px;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hero h1 span {
	color: var(--acc);
}
.hero p {
	color: var(--soft);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.cta {
	margin: 20px 0 0;
}
.floor {
	scroll-margin-top: 12px;
	padding-top: 44px;
}
.floor-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--acc);
	font: 700 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.floor-tag::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--acc);
}
h2 {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 8px 0 16px;
}
.note {
	color: var(--dim);
	font-size: 13px;
	margin-top: 10px;
}

/* stats = windows of the blok */
.stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 14px;
	border-radius: 18px;
	background: linear-gradient(180deg, #263046, #1f283c);
	border: 1px solid #303b55;
}
.stat {
	position: relative;
	min-height: 118px;
	padding: 14px 12px;
	border-radius: 6px;
	border: 3px solid #0d121e;
	background: linear-gradient(180deg, #ffe2a3, var(--lamp) 55%, #e9a94a);
	color: var(--bg);
	box-shadow: 0 0 26px rgba(255, 200, 97, 0.35);
	transition: background 0.3s, box-shadow 0.4s, color 0.3s;
}
.stat b {
	display: block;
	font-size: clamp(21px, 6vw, 28px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.stat span {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	margin-top: 6px;
	font-weight: 600;
	opacity: 0.85;
}
html.js .stat:not(.on) {
	background: #141a28;
	color: rgba(203, 213, 225, 0.25);
	box-shadow: none;
}

/* showreel phone */
.reel-wrap {
	display: grid;
	justify-items: center;
}
.phone {
	position: relative;
	width: min(270px, 72vw);
	aspect-ratio: 9 / 19;
	padding: 10px;
	border-radius: 38px;
	background: linear-gradient(145deg, #2a3348, #10151f);
	box-shadow: 0 0 0 2px #303b55, 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 159, 28, 0.12);
}
.phone::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 18px;
	left: 50%;
	width: 70px;
	height: 18px;
	margin-left: -35px;
	border-radius: 10px;
	background: #05070c;
}
.phone video {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 29px;
	object-fit: cover;
	background: #000;
}
.reel-btn {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(11, 16, 32, 0.82);
	color: var(--ink);
	font: 700 14px/1 inherit;
	font-family: inherit;
	white-space: nowrap;
	box-shadow: 0 0 0 1px rgba(255, 200, 97, 0.5);
	cursor: pointer;
}
.reel-btn[hidden] {
	display: none;
}
.covers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 26px;
}
.covers figure {
	margin: 0;
}
.covers img {
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--card);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.covers figure:nth-child(1) img {
	transform: rotate(-2.5deg);
}
.covers figure:nth-child(3) img {
	transform: rotate(2.5deg);
}
.covers figcaption {
	color: var(--dim);
	font-size: 12px;
	line-height: 1.3;
	margin-top: 8px;
	text-align: center;
}

/* services */
.svc {
	list-style: none;
	display: grid;
	gap: 10px;
}
.svc li {
	display: flex;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 14px 16px;
}
.svc .n {
	flex: none;
	color: var(--acc);
	font: 700 13px/1.6 ui-monospace, Consolas, monospace;
}
.svc b {
	display: block;
	font-size: 16px;
	line-height: 1.3;
}
.svc span {
	display: block;
	color: var(--soft);
	font-size: 14px;
	margin-top: 3px;
}
.svc li.other {
	border-color: var(--acc);
	background: linear-gradient(180deg, rgba(255, 159, 28, 0.12), var(--card));
}
.price {
	background: var(--card);
	border: 1px dashed var(--acc);
	border-radius: 16px;
	padding: 18px;
	color: var(--soft);
}
.price b {
	color: var(--ink);
}
.dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.dl .btn {
	font-size: 15px;
	min-height: 56px;
	padding: 12px;
}
.mailtxt {
	margin-top: 12px;
	text-align: center;
	color: var(--dim);
	font-size: 14px;
	word-break: break-all;
}

/* ---------- features ---------- */

/* elevator floor indicator */
.lift {
	position: fixed;
	z-index: 20;
	top: calc(14px + env(safe-area-inset-top, 0px));
	right: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid #303b55;
	background: rgba(6, 9, 18, 0.88);
	color: var(--acc);
	font: 700 22px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
	text-shadow: 0 0 10px rgba(255, 159, 28, 0.8);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
	cursor: pointer;
}
.lift .ar {
	font-size: 12px;
	opacity: 0.4;
	transition: opacity 0.2s, transform 0.2s;
}
.lift.up .ar {
	opacity: 1;
}
.lift.down .ar {
	opacity: 1;
	transform: rotate(180deg);
}
.lift .fl {
	display: inline-block;
	min-width: 14px;
	text-align: center;
}
.lift .fl.tick {
	animation: tick 0.35s ease;
}

/* flashlight */
.torch {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}
.torch .dark {
	display: none;
}
html.js .torch:not(.lit) .dark {
	display: block;
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	pointer-events: none;
	will-change: transform;
}
.torch .hint {
	display: none;
	pointer-events: none;
}
html.js .torch:not(.lit) .hint {
	display: flex;
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 200, 97, 0.95);
	color: var(--bg);
	font: 750 14px/1.2 inherit;
	font-family: inherit;
	white-space: nowrap;
	box-shadow: 0 0 30px rgba(255, 200, 97, 0.5);
	cursor: pointer;
}
.torch.flick .dark {
	display: block !important;
	animation: tube 0.9s steps(1) forwards;
}
.torch-in {
	padding: 0 2px 70px;
}
.torch.lit .torch-in {
	padding-bottom: 4px;
}

/* sound toggle */
.snd {
	position: fixed;
	z-index: 20;
	right: 14px;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #303b55;
	background: rgba(6, 9, 18, 0.85);
	color: var(--soft);
	cursor: pointer;
}
.snd svg {
	width: 20px;
	height: 20px;
}
.snd .on {
	display: none;
}
.snd[aria-pressed="true"] {
	color: var(--acc);
	box-shadow: 0 0 18px rgba(255, 159, 28, 0.4);
}
.snd[aria-pressed="true"] .on {
	display: block;
}
.snd[aria-pressed="true"] .off {
	display: none;
}
/* phone reminder shown once when the sound starts */
.snd-tip {
	position: fixed;
	z-index: 30;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(6, 9, 18, 0.92);
	border: 1px solid var(--acc);
	color: var(--text, #fff);
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
	transform: translate(-50%, 20px);
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}
.snd-tip.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* sound is wanted but the browser waits for the first tap */
.snd.wait {
	color: var(--acc);
	border-color: var(--acc);
}
.snd.wait::after {
	content: "Dotknij — będzie dźwięk";
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(6, 9, 18, 0.85);
	border: 1px solid #303b55;
	color: var(--soft);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.snd.wait {
		animation: snd-pulse 1.6s ease-in-out infinite;
	}
}
@keyframes snd-pulse {
	50% {
		box-shadow: 0 0 0 8px rgba(255, 159, 28, 0);
	}
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(255, 159, 28, 0.55);
	}
}

/* floor panel (opens from the lift indicator) */
.floors {
	position: fixed;
	z-index: 21;
	top: calc(64px + env(safe-area-inset-top, 0px));
	right: 14px;
	display: grid;
	gap: 8px;
	padding: 12px;
	border-radius: 16px;
	background: linear-gradient(160deg, #3a4560, #1b2234);
	border: 1px solid #4a5672;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.floors[hidden] {
	display: none;
}
.pbtn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	color: var(--soft);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}
.pbtn span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #59647e, #262f44);
	border: 2px solid #6b7690;
	color: var(--ink);
	font: 700 14px/1 ui-monospace, Consolas, monospace;
}
.pbtn.cur span,
.pbtn:active span {
	border-color: var(--acc);
	color: var(--acc);
	box-shadow: 0 0 12px rgba(255, 159, 28, 0.7);
}
.lift.flash {
	animation: liftFlash 0.5s ease-out;
}

/* light switch of the flashlight section */
.switch {
	position: relative;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	border: 1px solid #4a5672;
	background: #1b2234;
	color: var(--ink);
	font: 700 14px/1 inherit;
	font-family: inherit;
	cursor: pointer;
}
.switch .knob {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: #0a0e18;
	border: 1px solid #303b55;
}
.switch .knob::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #6b7690;
	transition: transform 0.2s, background-color 0.2s;
}
.torch.lit .switch .knob::after {
	transform: translateX(16px);
	background: var(--lamp);
	box-shadow: 0 0 10px var(--lamp);
}

/* showreel behind lift doors */
.lift-frame {
	position: relative;
	padding: 34px 16px 16px;
	border-radius: 18px 18px 6px 6px;
	background: linear-gradient(180deg, #4a5672, #2a3348);
	box-shadow: inset 0 0 0 2px #5d6984, 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lift-display {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 10px;
	border-radius: 4px;
	background: #05070c;
	color: var(--acc);
	font: 700 13px/1.3 ui-monospace, Consolas, monospace;
	text-shadow: 0 0 8px rgba(255, 159, 28, 0.8);
}
.doors {
	position: absolute;
	inset: 34px 16px 16px;
	display: flex;
	overflow: hidden;
	border-radius: 30px;
	pointer-events: none;
}
.door {
	flex: 1;
	background: repeating-linear-gradient(90deg, #aab4c6 0, #c9d1de 3px, #9aa5b9 6px);
	box-shadow: inset 0 0 0 1px #6b7690;
	transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.door.l {
	border-right: 1px solid #5d6984;
}
.door.r {
	border-left: 1px solid #5d6984;
}
.lift-frame.open .door.l {
	transform: translateX(-102%);
}
.lift-frame.open .door.r {
	transform: translateX(102%);
}
.reel-wrap .phone {
	width: min(250px, 66vw);
}

/* 404 — domofon */
.domofon-page {
	padding-top: calc(28px + env(safe-area-inset-top, 0px));
}
.domofon-page h1 {
	font-size: 26px;
	line-height: 1.15;
	text-align: center;
	margin-top: 26px;
}
.domofon {
	width: min(280px, 80vw);
	margin: 0 auto;
	padding: 18px 18px 14px;
	border-radius: 18px;
	background: linear-gradient(160deg, #c5ccd8, #8c95a6);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 20px 50px rgba(0, 0, 0, 0.55);
}
.lcd {
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: #1b2a1b;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
	color: #9ef08a;
	font: 700 30px/1 ui-monospace, Consolas, monospace;
	letter-spacing: 0.12em;
	text-shadow: 0 0 8px rgba(158, 240, 138, 0.7);
}
.grill {
	height: 34px;
	margin: 12px 30px;
	background: radial-gradient(circle, #3a4252 2.2px, transparent 2.6px) 0 0 / 11px 11px;
}
.keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.key {
	height: 42px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #eef1f5, #b9c1ce);
	box-shadow: 0 3px 0 #7c8597;
	color: #1f2937;
	font: 700 17px/1 inherit;
	font-family: inherit;
	cursor: pointer;
}
.key:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #7c8597;
}
.key.bell {
	background: linear-gradient(180deg, #ffc861, var(--acc));
}
.plate {
	margin-top: 12px;
	text-align: center;
	color: #2a3348;
	font: 700 11px/1 ui-monospace, Consolas, monospace;
	letter-spacing: 0.1em;
}

/* e-mail line with copy button */
.mailbox {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 18px;
	color: var(--soft);
	font-size: 15px;
}
.mailbox a {
	color: var(--soft);
	word-break: break-all;
}
.copy {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 200, 97, 0.55);
	background: transparent;
	color: var(--lamp);
	font: 700 13px/1 inherit;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.copy.done {
	background: var(--lamp);
	color: var(--bg);
}

/* hint for TikTok/Instagram in-app browsers */
.iab {
	position: fixed;
	z-index: 30;
	left: 12px;
	right: 12px;
	bottom: calc(70px + env(safe-area-inset-bottom, 0px));
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 480px;
	margin: 0 auto;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff4dc;
	color: var(--bg);
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.iab[hidden] {
	display: none;
}
.iab button {
	flex: none;
	margin-left: auto;
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: var(--bg);
	cursor: pointer;
}
.pdfs {
	margin-top: 12px;
	text-align: center;
	color: var(--dim);
	font-size: 14px;
}
.pdfs a {
	color: var(--soft);
}

/* simple text pages: mediakit, privacy, diag */
.page-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(16px + env(safe-area-inset-top, 0px)) 0 8px;
}
.page-top a {
	color: var(--soft);
	text-decoration: none;
	font-weight: 700;
}
.mk-head {
	display: flex;
	gap: 16px;
	align-items: center;
	margin: 18px 0 8px;
}
.mk-head img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 3px solid var(--acc);
}
.mk-head h1 {
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.mk-head p {
	color: var(--acc);
	font-weight: 700;
}
.lead {
	color: var(--soft);
	margin: 10px 0 0;
}
.cards {
	display: grid;
	gap: 10px;
}
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px;
}
.card b {
	display: block;
	font-size: 17px;
}
.card p {
	color: var(--soft);
	font-size: 14px;
	margin-top: 4px;
}
.tag {
	display: inline-block;
	margin-top: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid var(--acc);
	color: var(--acc);
	font-size: 12px;
	font-weight: 700;
}
.bullets {
	padding-left: 20px;
	color: var(--soft);
}
.bullets li + li {
	margin-top: 4px;
}
.text h1 {
	font-size: 28px;
	line-height: 1.15;
	margin: 18px 0 6px;
}
.text h2 {
	font-size: 19px;
	margin: 26px 0 8px;
}
.text p,
.text li {
	color: var(--soft);
	font-size: 15px;
}
.text p + p {
	margin-top: 8px;
}
.text ul {
	padding-left: 20px;
}
.diag {
	width: 100%;
	border-collapse: collapse;
	font: 13px/1.4 ui-monospace, Consolas, monospace;
}
.diag td {
	padding: 6px 4px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	word-break: break-all;
}
.diag td:first-child {
	color: var(--dim);
	width: 42%;
}

/* ---------- motion (only when the user allows it) ---------- */
@keyframes fallA {
	to {
		transform: translate3d(0, 256px, 0);
	}
}
@keyframes fallB {
	to {
		transform: translate3d(0, 180px, 0);
	}
}
@keyframes twinkle {
	from {
		opacity: 0.25;
	}
	to {
		opacity: 0.9;
	}
}
@keyframes winOn {
	0% { opacity: 0; }
	30% { opacity: 0.8; }
	38% { opacity: 0.1; }
	55% { opacity: 1; }
	62% { opacity: 0.4; }
	100% { opacity: 1; }
}
@keyframes life {
	0% { opacity: 0; }
	4% { opacity: 1; }
	5% { opacity: 0.3; }
	7% { opacity: 1; }
	70% { opacity: 1; }
	71% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes breathe {
	0%, 100% { transform: translateY(0) scaleY(1); }
	50% { transform: translateY(-0.4%) scaleY(1.012); }
}
@keyframes blinkEye {
	0%, 95%, 100% { scale: 1 1; }
	96.5%, 98% { scale: 1 0.12; }
}
@keyframes lamp {
	0%, 88%, 100% { opacity: 1; }
	89% { opacity: 0.35; }
	90% { opacity: 1; }
	92% { opacity: 0.5; }
	93% { opacity: 1; }
}
@keyframes beacon {
	0%, 45% { opacity: 1; }
	50%, 95% { opacity: 0.15; }
}
@keyframes tick {
	from { transform: translateY(-60%); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@keyframes tube {
	0% { opacity: 1; }
	15% { opacity: 0.2; }
	25% { opacity: 1; }
	40% { opacity: 0.1; }
	48% { opacity: 0.8; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes statOn {
	0% { filter: brightness(0.3); }
	20% { filter: brightness(1.1); }
	30% { filter: brightness(0.4); }
	50%, 100% { filter: none; }
}
@keyframes winFlash {
	0% { filter: brightness(1); }
	25% { filter: brightness(2.2); box-shadow: 0 0 calc(var(--st) * 0.08) calc(var(--st) * 0.02) rgba(255, 210, 120, 0.9); }
	100% { filter: brightness(1); }
}
@keyframes flinch {
	0% { transform: none; }
	20% { transform: translateY(1.5%) scale(0.97, 1.03) rotate(-2deg); }
	45% { transform: translateY(-1%) rotate(1.5deg); }
	100% { transform: none; }
}
@keyframes liftFlash {
	0% { box-shadow: 0 0 0 rgba(255, 159, 28, 0); }
	30% { box-shadow: 0 0 26px rgba(255, 159, 28, 0.85); }
	100% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8); }
}
@keyframes torchFlicker {
	0%, 40%, 49%, 85%, 100% { opacity: 1; }
	42% { opacity: 0.25; }
	44% { opacity: 0.95; }
	46% { opacity: 0.3; }
	75% { opacity: 0.85; }
	77%, 83% { opacity: 0; }
}
@keyframes blackout {
	0% { opacity: 1; }
	10% { opacity: 0.2; }
	16% { opacity: 0.9; }
	24% { opacity: 0.1; }
	100% { opacity: 0.12; }
}
@keyframes signPulse {
	0%, 100% { box-shadow: 0 0 calc(var(--st) * 0.03) calc(var(--st) * 0.006) rgba(255, 159, 28, 0.55); }
	50% { box-shadow: 0 0 calc(var(--st) * 0.06) calc(var(--st) * 0.014) rgba(255, 159, 28, 0.85); }
}
@keyframes rv {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@keyframes mainGlow {
	0%, 100% { box-shadow: 0 8px 30px rgba(255, 159, 28, 0.28); }
	50% { box-shadow: 0 8px 44px rgba(255, 159, 28, 0.5); }
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
	}
	::view-transition-group(scene),
	::view-transition-group(kuba-avatar) {
		animation-duration: 0.55s;
		animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.snow.sa {
		animation: fallA 9s linear infinite;
	}
	.snow.sb {
		animation: fallB 13s linear infinite;
	}
	.stars.s1 {
		animation: twinkle 3.2s ease-in-out infinite alternate;
	}
	.stars.s2 {
		animation: twinkle 4.4s ease-in-out -2s infinite alternate-reverse;
	}
	.win {
		animation: winOn 0.7s var(--d, 0s) both;
	}
	.win.cyc {
		animation: life var(--l, 19s) var(--d, 0s) infinite;
	}
	.kuba {
		animation: breathe 3.4s ease-in-out infinite;
	}
	.kuba .eye {
		animation: blinkEye 4.2s linear 1.2s infinite;
	}
	.kwin img {
		animation: torchFlicker 5.5s linear 1.5s infinite;
	}
	.bwin {
		animation: winOn 0.7s var(--d, 0s) both;
	}
	body.idle .bwin {
		animation: signPulse 2.4s ease-in-out infinite;
	}
	body.idle .wins {
		animation: blackout 2.4s ease-out forwards;
	}
	.lampglow {
		animation: lamp 7s linear infinite;
	}
	.beacon {
		animation: beacon 2.2s linear infinite;
	}
	.btn-main {
		animation: mainGlow 3.6s ease-in-out infinite;
	}
	.btn-main:active {
		animation: none;
	}
	.stat.on {
		animation: statOn 0.8s steps(1) both;
	}
	.scene.off *,
	.scene.off {
		animation-play-state: paused !important;
	}

	/* scroll-driven reveal; browsers without view timelines get .io + IntersectionObserver */
	@supports (animation-timeline: view()) {
		.rv {
			animation: rv linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
	html.io .rv {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	html.io .rv.in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snow {
		display: none;
	}
	.win:nth-of-type(odd) {
		opacity: 1;
	}
	html.js .stat:not(.on) {
		background: linear-gradient(180deg, #ffe2a3, var(--lamp) 55%, #e9a94a);
		color: var(--bg);
	}
}

@media (min-width: 900px) {
	.bio .scene {
		--sh: clamp(320px, 52vh, 600px);
	}
	.hero h1 {
		font-size: 52px;
	}
}

/* =====================================================================
   v2 polish pass — overrides above rules (same specificity, later wins)
   ===================================================================== */

/* ---------- / : compact first screen (3 buttons above the fold at 375×667) ---------- */
.bio .scene {
	--sh: 42vh;
	--sh: clamp(250px, 42svh, 520px);
}
.bio-main {
	margin-top: -26px;
}
.bio-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.bio-head .avatar {
	flex: none;
	width: 48px;
	height: 48px;
	margin: 0;
	border-width: 2px;
	box-shadow: 0 0 0 4px rgba(11, 16, 32, 0.9), 0 0 24px rgba(255, 159, 28, 0.35);
}
.bio h1 {
	font-size: 21px;
	text-align: left;
}
.bio .handle {
	text-align: left;
	margin-top: 0;
	font-size: 15px;
}
.bio .line {
	margin: 10px auto 14px;
	font-size: 15px;
	line-height: 1.4;
}
.bio .btn {
	min-height: 56px;
	padding: 10px 16px;
}
.bio .stack {
	gap: 10px;
}
@media (min-width: 900px) {
	.bio .scene {
		--sh: clamp(300px, 46vh, 560px);
	}
}

/* readable window signs + 44px tap area */
.sign {
	font-size: max(11px, calc(var(--st) * 0.03));
}
.bwin {
	position: absolute;
}
a.bwin::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.sign {
	pointer-events: auto;
}

/* stairwell light (automat schodowy) */
.stairs {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.stair {
	position: absolute;
	border-radius: 1px;
	background: linear-gradient(180deg, #fff3c4, #ffd27a);
	box-shadow: 0 0 calc(var(--st) * 0.018) calc(var(--st) * 0.004) rgba(255, 220, 140, 0.6);
	opacity: 0;
	transition: opacity 0.12s;
}
.stair.on {
	opacity: 1;
}
.stairs.click .stair {
	transition: opacity 0.05s;
}

/* the wrong window: a pair of eyes for a moment */
.peek {
	position: absolute;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.peek::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.peek i {
	position: absolute;
	top: 42%;
	width: 11%;
	height: 13%;
	border-radius: 50%;
	background: #fff6d8;
	box-shadow: 0 0 4px 1px rgba(255, 240, 190, 0.9);
	opacity: 0;
	transition: opacity 0.18s;
}
.peek i:first-child {
	left: 34%;
}
.peek i:last-child {
	left: 55%;
}
.peek.show i {
	opacity: 1;
}
.stage.blackout .wins,
.stage.blackout .bwin,
.stage.blackout .kwin,
.stage.blackout .stairs,
.stage.blackout .lampglow {
	opacity: 0.04 !important;
	transition: opacity 0.05s;
}

/* ---------- floor 1: four compact service rows ---------- */
.svc2 {
	display: grid;
	gap: 8px;
}
.svc-row {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
}
.svc-row summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 8px 14px;
	list-style: none;
	cursor: pointer;
}
.svc-row summary::-webkit-details-marker {
	display: none;
}
.svc-row .si {
	flex: none;
	width: 28px;
	font-size: 22px;
	text-align: center;
}
.svc-row .st {
	min-width: 0;
	flex: 1;
}
.svc-row .st b {
	display: block;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svc-row .st span {
	display: block;
	color: var(--dim);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svc-row .chev {
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--dim);
	border-bottom: 2px solid var(--dim);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s;
}
.svc-row[open] .chev {
	transform: rotate(-135deg);
}
.svc-row[open] {
	border-color: rgba(255, 159, 28, 0.6);
}
.svc-row p {
	padding: 0 14px 14px 54px;
	color: var(--soft);
	font-size: 14px;
}
.also {
	margin-top: 10px;
	color: var(--dim);
	font-size: 13px;
	line-height: 1.45;
}
.torch-in,
.torch.lit .torch-in {
	padding: 0 0 4px;
}
.torch {
	padding-top: 2px;
}

/* Polish stairwell light switch: white square key with an orange dot */
.switch {
	position: relative;
	z-index: 5;
	flex: none;
	margin: 0;
	padding: 0 4px 0 0;
	gap: 8px;
	border: 0;
	background: none;
	color: var(--dim);
	font-size: 13px;
}
.switch .key {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: linear-gradient(160deg, #ffffff, #dfe3ea);
	box-shadow: inset 0 -3px 0 #c3c9d4, 0 2px 8px rgba(0, 0, 0, 0.45);
	transition: transform 0.1s, box-shadow 0.1s;
}
.switch .key i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--acc);
	box-shadow: 0 0 8px 2px rgba(255, 159, 28, 0.85);
}
.switch:active .key {
	transform: scale(0.94);
	box-shadow: inset 0 -1px 0 #c3c9d4, 0 1px 4px rgba(0, 0, 0, 0.45);
}
.torch.lit .switch .key i {
	background: #cfd5df;
	box-shadow: none;
}
.torch.lit .switch .lbl {
	color: var(--soft);
}
.torch-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.torch-head h2 {
	margin-bottom: 12px;
}

/* ---------- floor 2: growth story on a lift segment display ---------- */
.lcdbig {
	position: relative;
	padding: 16px 16px 14px;
	border-radius: 16px;
	background: linear-gradient(180deg, #05070c, #0b0f19);
	border: 3px solid #4a5672;
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), 0 0 0 1px #2a3348, 0 16px 40px rgba(0, 0, 0, 0.45);
	color: var(--acc);
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	text-align: center;
	overflow: hidden;
}
.lcdbig::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px);
	pointer-events: none;
}
.lcd-top {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
}
.lcd-top .up {
	margin-right: 8px;
}
.lcd-num {
	margin: 4px 0 2px;
	font-size: clamp(34px, 13.5vw, 72px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 12px rgba(255, 159, 28, 0.85), 0 0 30px rgba(255, 159, 28, 0.35);
}
.lcd-sub {
	color: var(--lamp2);
	font-size: 13px;
	opacity: 0.85;
}
.lcdbig.ding {
	animation: lcdDing 0.9s ease-out;
}
.minis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 10px;
}
.mini {
	padding: 12px 8px;
	border-radius: 12px;
	background: var(--card);
	border: 1px solid var(--line);
	text-align: center;
}
.mini b {
	display: block;
	color: var(--lamp);
	font-size: 17px;
	line-height: 1.15;
}
.mini span {
	display: block;
	margin-top: 4px;
	color: var(--soft);
	font-size: 12px;
	line-height: 1.25;
}
.growth {
	margin: 14px 0 0;
	padding: 12px;
	border-radius: 14px;
	background: #f4efe2;
	color: #1f2937;
	transform: rotate(-0.6deg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.growth svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.growth .grid {
	stroke: #c9c2b0;
	stroke-width: 1.5;
	stroke-dasharray: 4 5;
	fill: none;
}
.growth .line {
	fill: none;
	stroke: var(--acc2);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.growth .ghost {
	stroke: #1f2937;
	stroke-width: 1.4;
	opacity: 0.55;
}
.growth circle {
	fill: var(--acc);
	stroke: #1f2937;
	stroke-width: 2;
}
.growth text {
	fill: #4b5563;
	font: 600 11px/1 "Onest", system-ui, sans-serif;
}
.growth text.val {
	fill: #1f2937;
	font-size: 14px;
	font-weight: 700;
}
.growth figcaption {
	margin-top: 4px;
	color: #4b5563;
	font-size: 12px;
	text-align: center;
}
html.js .growth .line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.6s cubic-bezier(0.5, 0, 0.2, 1);
}
html.js .growth.in .line {
	stroke-dashoffset: 0;
}

/* ---------- floor 3: one metaphor — video straight in the lift doorway ---------- */
.reel-wrap .phone {
	width: min(250px, 66vw);
	aspect-ratio: 9 / 16;
	padding: 0;
	border-radius: 8px;
	background: #000;
	box-shadow: 0 0 0 2px #303b55;
}
.phone::before {
	display: none;
}
.phone video {
	border-radius: 8px;
}
.doors {
	border-radius: 8px;
}

/* ---------- floor 4: trust line ---------- */
.trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	color: var(--soft);
	font-size: 14px;
	line-height: 1.35;
}
.trust img {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--acc);
}
.trust b {
	color: var(--ink);
}

@keyframes lcdDing {
	0% { box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), 0 0 0 1px #2a3348; border-color: #4a5672; }
	20% { box-shadow: inset 0 0 30px rgba(255, 159, 28, 0.35), 0 0 40px rgba(255, 159, 28, 0.6); border-color: var(--acc); }
	100% { box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9), 0 0 0 1px #2a3348; border-color: #4a5672; }
}
@media (prefers-reduced-motion: reduce) {
	html.js .growth .line {
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* minis as compact rows (figures never break) */
.minis {
	grid-template-columns: 1fr;
	gap: 6px;
}
.mini {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	text-align: left;
}
.mini b {
	font-size: 18px;
	white-space: nowrap;
}
.mini span {
	margin-top: 0;
	font-size: 13px;
	text-align: right;
}