/* Iurans landing v4 — the v2 cinematic engine (landing-v2.css/js) plus the product scenes.
 * Every scene reads the chapter's scroll progress --p (0 → 1, 1 when static) so it ends in its finished state. */
.iu4 .iu2-copy h2 { font-size: clamp(30px, 4.6vw, 58px); }
.iu4-k { --s: clamp(0, calc((var(--p) - .12 - var(--k, 0) * .12) * 4), 1); }

/* Shared glass panel */
.iu4-pos, .iu4-tv__screen, .iu4-vote, .iu4-ppob, .iu4-feed__card { background: linear-gradient(160deg, rgba(20, 184, 166, .16), rgba(3, 13, 12, .88)); border: 1px solid rgba(94, 234, 212, .32); border-radius: 22px; box-shadow: 0 40px 90px -40px rgba(20, 184, 166, .7), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- Cashier ---------- */
.iu4-pos { --rx: 0deg; --ry: 0deg; position: relative; width: min(380px, 100%); justify-self: center; padding: 20px; display: grid; gap: 14px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.iu4-pos__head { display: grid; }
.iu4-pos__head small { color: var(--iu2-muted); font: 600 11.5px var(--iu2-mono); letter-spacing: .06em; }
.iu4-pos__cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iu4-pos__cart li { --s: clamp(0, calc((var(--p) - .05 - var(--k) * .1) * 5), 1); display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(3, 13, 12, .55); border: 1px solid var(--iu2-line); font-size: 14px; opacity: var(--s); transform: translateX(calc((1 - var(--s)) * 40px)); }
.iu4-pos__cart em { font-style: normal; color: var(--iu2-muted); font-family: var(--iu2-mono); }
.iu4-pos__cart b { font-family: var(--iu2-mono); color: var(--iu2-cyan); }
.iu4-pos__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px dashed var(--iu2-line); }
.iu4-pos__total span { color: var(--iu2-muted); }
.iu4-pos__total b { font-size: 26px; letter-spacing: -.02em; }
.iu4-pos__pay { display: flex; align-items: center; gap: 14px; }
.iu4-mini-qr { display: grid; grid-template-columns: repeat(21, 1fr); width: 92px; aspect-ratio: 1; padding: 6px; border-radius: 10px; background: #e8fffb; flex: none; }
.iu4-mini-qr i { background: #04110f; }
.iu4-mini-qr b { background: transparent; }
.iu4-pos__stamp { --s: clamp(0, calc((var(--p) - .55) * 6), 1); display: grid; font: 800 22px var(--iu2-font); color: #4ade80; letter-spacing: .04em; opacity: var(--s); transform: scale(calc(1.6 - var(--s) * .6)) rotate(-6deg); text-shadow: 0 0 24px rgba(74, 222, 128, .6); }
.iu4-pos__stamp small { font: 600 11px var(--iu2-mono); color: var(--iu2-muted); letter-spacing: .08em; }
.iu4-receipt { --s: clamp(0, calc((var(--p) - .68) * 4), 1); position: absolute; right: -150px; bottom: -60px; width: 200px; display: grid; gap: 2px; padding: 14px 14px 18px; background: #f4f1e8; color: #1c1c1c; font: 500 11px/1.5 var(--iu2-mono); border-radius: 4px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); transform: translateY(calc((1 - var(--s)) * 90px)) rotate(4deg); opacity: var(--s); clip-path: polygon(0 0, 100% 0, 100% 100%, 93% 96%, 86% 100%, 79% 96%, 72% 100%, 65% 96%, 58% 100%, 51% 96%, 44% 100%, 37% 96%, 30% 100%, 23% 96%, 16% 100%, 9% 96%, 0 100%); }
.iu4-receipt b { text-align: center; letter-spacing: .3em; }
.iu4-receipt span:nth-of-type(1) { text-align: center; margin-bottom: 4px; }
.iu4-receipt strong { border-top: 1px dashed #777; margin-top: 4px; padding-top: 4px; }

/* ---------- Infaq TV ---------- */
.iu4-tv { --rx: 0deg; --ry: 0deg; justify-self: center; width: min(520px, 100%); display: grid; justify-items: center; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
.iu4-tv__screen { width: 100%; padding: 22px 24px; border: 10px solid #0b1514; border-radius: 18px; outline: 1px solid rgba(94, 234, 212, .25); display: grid; gap: 10px; }
.iu4-tv__title { margin: 0; font: 700 12px var(--iu2-mono); letter-spacing: .14em; color: var(--iu2-amber); }
.iu4-tv__total { margin: 0; font-size: clamp(34px, 5.4vw, 52px); font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg, #e8fffb, var(--iu2-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.iu4-tv__bar { height: 10px; border-radius: 99px; background: rgba(94, 234, 212, .12); overflow: hidden; }
.iu4-tv__bar i { display: block; height: 100%; width: calc(var(--p) * 78%); border-radius: inherit; background: linear-gradient(90deg, var(--iu2-teal), var(--iu2-amber)); box-shadow: 0 0 16px rgba(251, 191, 36, .6); }
.iu4-tv__goal { display: flex; justify-content: space-between; margin: 0; font: 600 11.5px var(--iu2-mono); color: var(--iu2-muted); }
.iu4-tv__donors { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.iu4-tv__donors li { --s: clamp(0, calc((var(--p) - .25 - var(--k) * .15) * 5), 1); display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgba(3, 13, 12, .55); border: 1px solid var(--iu2-line); font-size: 14px; opacity: var(--s); transform: translateY(calc((1 - var(--s)) * 16px)); }
.iu4-tv__donors span { font-family: var(--iu2-mono); color: #4ade80; }
.iu4-tv__stand { width: 120px; height: 18px; margin-top: -2px; border-radius: 0 0 14px 14px; background: linear-gradient(#0b1514, #051010); }

/* ---------- Voting ---------- */
.iu4-vote { --rx: 0deg; --ry: 0deg; justify-self: center; width: min(500px, 100%); padding: 22px; display: grid; gap: 12px; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
.iu4-vote__title { margin: 0 0 4px; font: 700 12px var(--iu2-mono); letter-spacing: .12em; color: var(--iu2-amber); }
.iu4-vote__row { display: grid; grid-template-columns: 28px minmax(96px, auto) 1fr 44px; align-items: center; gap: 10px; font-size: 14px; }
.iu4-vote__medal { text-align: center; font: 700 15px var(--iu2-mono); color: var(--iu2-muted); }
.iu4-vote__bar { height: 12px; border-radius: 99px; background: rgba(94, 234, 212, .1); overflow: hidden; }
.iu4-vote__bar i { display: block; height: 100%; width: calc(clamp(0, calc((var(--p) - var(--k) * .05) * 1.4), 1) * var(--w) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--iu2-teal), var(--iu2-cyan)); }
.iu4-vote__row:first-of-type .iu4-vote__bar i { background: linear-gradient(90deg, #f59e0b, var(--iu2-amber)); box-shadow: 0 0 14px rgba(251, 191, 36, .6); }
.iu4-vote__row b { text-align: right; font-family: var(--iu2-mono); }
.iu4-vote__foot { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--iu2-mono); letter-spacing: .08em; color: var(--iu2-muted); }

/* ---------- Pulsa & tagihan ---------- */
.iu4-ppob { justify-self: center; width: min(420px, 100%); padding: 20px; display: grid; gap: 14px; }
.iu4-ppob__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.iu4-ppob__grid span { --s: clamp(0, calc((var(--p) - .04 - var(--k) * .05) * 5), 1); display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; background: rgba(3, 13, 12, .55); border: 1px solid rgba(94, 234, 212, calc(.12 + var(--s) * .3)); font-size: 11.5px; font-weight: 700; opacity: calc(.25 + var(--s) * .75); transform: scale(calc(.85 + var(--s) * .15)); }
.iu4-ppob__grid i { font-style: normal; font-size: 22px; }
.iu4-ppob__token { --s: clamp(0, calc((var(--p) - .5) * 5), 1); display: grid; gap: 4px; padding: 14px; border-radius: 14px; text-align: center; border: 1.5px dashed rgba(94, 234, 212, .5); background: rgba(20, 184, 166, .1); opacity: var(--s); transform: translateY(calc((1 - var(--s)) * 20px)); }
.iu4-ppob__token small { font: 700 11px var(--iu2-mono); letter-spacing: .12em; color: #4ade80; }
.iu4-ppob__token b { font: 800 clamp(15px, 2.2vw, 19px) var(--iu2-mono); letter-spacing: .02em; color: var(--iu2-cyan); }
.iu4-ppob__commission { --s: clamp(0, calc((var(--p) - .72) * 6), 1); justify-self: center; padding: 8px 16px; border-radius: 999px; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .5); color: var(--iu2-amber); font-weight: 700; font-size: 14px; opacity: var(--s); transform: scale(calc(.8 + var(--s) * .2)); }

/* ---------- Community feed ---------- */
.iu4-feed { position: relative; justify-self: center; width: min(420px, 100%); display: grid; gap: 12px; }
.iu4-feed__card { --s: clamp(0, calc((var(--p) - .05 - var(--k) * .16) * 4), 1); padding: 16px 18px; display: grid; gap: 6px; opacity: var(--s); transform: perspective(900px) translateY(calc((1 - var(--s)) * 40px)) rotateX(calc((1 - var(--s)) * 25deg)); }
.iu4-feed__card small { font: 700 11px var(--iu2-mono); letter-spacing: .12em; color: var(--iu2-amber); }
.iu4-feed__card b { font-size: 16px; }
.iu4-feed__card > span { color: var(--iu2-muted); font-size: 13.5px; }
.iu4-feed__poll { position: relative; display: block; height: 26px; border-radius: 8px; background: rgba(94, 234, 212, .08); overflow: hidden; }
.iu4-feed__poll i { position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * var(--w) * 1%); background: rgba(20, 184, 166, .45); }
.iu4-feed__poll em { position: relative; padding-left: 10px; line-height: 26px; font-style: normal; font-size: 12.5px; color: var(--iu2-ink); }
.iu4-feed__roles { --s: clamp(0, calc((var(--p) - .62) * 5), 1); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; opacity: var(--s); }
.iu4-feed__roles span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--iu2-line); background: rgba(3, 13, 12, .6); font-size: 13px; font-weight: 700; }

/* ---------- Features & pricing ---------- */
.iu4-features { display: grid; gap: 16px; }
.iu4-features h3 { color: var(--iu2-cyan); }
.iu4-fees { width: 100%; border-collapse: collapse; font-size: 14px; }
.iu4-fees td { padding: 8px 0; border-top: 1px solid var(--iu2-line); color: var(--iu2-ink); }
.iu4-fees td:last-child { text-align: right; font-family: var(--iu2-mono); color: var(--iu2-cyan); }
.iu4-final__cta { justify-content: center; }
.iu2-foot a { color: var(--iu2-cyan); }

@media (min-width: 700px) {
	.iu4-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.iu4-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1199px) {
	.iu4-receipt { right: -40px; bottom: -90px; }
}
@media (max-width: 959px) {
	.iu4 .iu2-scrollcue { display: none; }
	.iu4 .iu2-copy p { font-size: 15px; }
	.iu4-pos { width: min(320px, 86vw); padding: 14px; gap: 10px; }
	.iu4-pos__cart li { padding: 7px 10px; font-size: 13px; }
	.iu4-receipt { display: none; }
	.iu4-mini-qr { width: 70px; }
	.iu4-tv__screen { padding: 14px 16px; gap: 8px; }
	.iu4-tv__donors li:nth-child(n+3) { display: none; }
	.iu4-vote { padding: 16px; gap: 9px; }
	.iu4-vote__row { grid-template-columns: 24px minmax(84px, auto) 1fr 38px; font-size: 13px; }
	.iu4-vote__row:nth-of-type(n+5) { display: none; }
	.iu4-ppob { padding: 14px; gap: 10px; }
	.iu4-feed__card { padding: 12px 14px; }
	.iu4-feed__card:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.iu4 [style*="--k"], .iu4-pos__stamp, .iu4-receipt, .iu4-ppob__token, .iu4-ppob__commission, .iu4-feed__roles { opacity: 1 !important; transform: none !important; }
}