/* =====================================================================
   HOME · O NAMA v2 — the O nama page's hero board, shortened (2026-09-08).
   Values lifted from novamira-sandbox/assets/about-page/about-page.css:
   paper #f5f7f9 with the 8vw grid, the 22 px board, the glass summary,
   the prism line, the metrics row. Scoped to .pzo2.
   ===================================================================== */
.pzo2 {
	--pza-ink: #0b0e13; --pza-ink-soft: #1c2533; --pza-line: rgba(21, 31, 43, .18); --pza-muted: #5f6b78;
	--pza-prism: linear-gradient(90deg, #13b5ea 0%, #7f7cff 28%, #ed4da6 58%, #f2b84b 82%, #78c56f 100%);
	--pza-ease: cubic-bezier(.16, 1, .3, 1);
	padding: clamp(56px, 6vw, 96px) 0;
	background:
		linear-gradient(90deg, rgba(21, 31, 43, .045) 1px, transparent 1px),
		linear-gradient(rgba(21, 31, 43, .035) 1px, transparent 1px),
		radial-gradient(circle at 82% 6%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 42%),
		#edf1f4;
	background-size: 8vw 8vw, 8vw 8vw, auto, auto;
	color: var(--pza-ink);
}
.pzo2-board {
	display: grid;
	grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr);
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-areas: "media summary" "media metrics";
	min-height: 560px;
	border: 1px solid rgba(32, 43, 55, .26);
	border-radius: 22px;
	background: rgba(255, 255, 255, .5);
	box-shadow: 0 34px 80px rgba(46, 61, 75, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
	overflow: hidden;
	isolation: isolate;
}
.pzo2-media { grid-area: media; position: relative; margin: 0; min-height: 440px; background: #0a0c10; overflow: hidden; }
.pzo2-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transform: scale(1.035); transition: transform 1.8s var(--pza-ease); }
.pzo2-board:hover .pzo2-media > img { transform: scale(1); }
.pzo2-media__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 6, 10, .12), rgba(3, 6, 10, .07) 42%, rgba(3, 6, 10, .72)), linear-gradient(90deg, rgba(3, 6, 10, .25), transparent 54%); }
.pzo2-identity { position: absolute; inset: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; z-index: 1; }
.pzo2-identity__poz { width: min(240px, 58%); height: auto; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22)); }
.pzo2-identity > div { width: min(340px, 86%); display: flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .33); border-radius: 12px; background: rgba(8, 12, 18, .46); box-shadow: 0 18px 54px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); }
.pzo2-identity span { font: 400 9px/1.35 var(--poz-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.pzo2-identity > div img { width: 118px; max-height: 28px; object-fit: contain; }
.pzo2-summary { grid-area: summary; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(18px, 2vw, 28px); padding: clamp(36px, 4.6vw, 72px); background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(239, 243, 246, .72)); backdrop-filter: blur(28px) saturate(1.12); -webkit-backdrop-filter: blur(28px) saturate(1.12); }
.pzo2-prism { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--pza-prism); }
.pzo2-kicker { font: 500 10.5px/1 var(--poz-font-body, Sora, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--pza-muted); }
.pzo2-summary h2 { margin: 0; max-width: 17ch; font: 400 clamp(26px, 2.9vw, 44px)/1.08 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.02em; color: var(--pza-ink); text-wrap: balance; }
.pzo2-summary p { margin: 0; max-width: 58ch; font: 400 clamp(14.5px, 1.05vw, 17px)/1.64 var(--poz-font-body, Sora, sans-serif); color: #52606e; }
.pzo2-cta { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; padding: 0 18px; border: 1px solid rgba(20, 30, 42, .22); border-radius: 999px; background: rgba(255, 255, 255, .62); font: 400 10px/1.3 var(--poz-font-display, Michroma, sans-serif); letter-spacing: .02em; color: var(--pza-ink); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); transition: transform .35s var(--pza-ease), background .35s ease; }
.pzo2-cta span { font-size: 18px; transition: transform .35s var(--pza-ease); }
.pzo2-cta:hover { background: #fff; transform: translateY(-1px); }
.pzo2-cta:hover span { transform: translateX(4px); }
.pzo2-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pza-line); background: rgba(250, 252, 253, .82); }
.pzo2-metrics > div { min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px clamp(16px, 1.8vw, 28px); border-right: 1px solid var(--pza-line); }
.pzo2-metrics > div:last-child { border-right: 0; }
.pzo2-metrics strong { font: 400 clamp(28px, 2.5vw, 42px)/1 var(--poz-font-display, Michroma, sans-serif); letter-spacing: -.05em; color: var(--pza-ink-soft); white-space: nowrap; }
.pzo2-metrics span { max-width: 18ch; font: 400 13px/1.35 var(--poz-font-body, Sora, sans-serif); color: var(--pza-muted); }
@media (max-width: 980px) {
	.pzo2-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "media" "summary" "metrics"; }
	.pzo2-media { min-height: 320px; }
	.pzo2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pzo2-metrics > div:nth-child(2n) { border-right: 0; }
	.pzo2-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--pza-line); }
}
@media (prefers-reduced-motion: reduce) {
	.pzo2-media > img, .pzo2-cta, .pzo2-cta span { transition-duration: .01ms !important; transform: none !important; }
}