/* Web application development — "the drafting room" (prefix: wap-) */

.cinema-page--service-web-application-development { --wap-ink: #9ee6ee; --wap-ink-rgb: 143, 214, 222; --wap-paper: #0a1314; }

/* ---------- Hero: technical drawing under inspection ---------- */
.cx-hero--wap_draft .cx-hero__visual { width: min(100%, 590px); }
.wap-hero { position: relative; }
.js .wap-hero { opacity: 0; transform: translateY(26px); }
.is-ready .wap-hero { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.wap-sheet { position: relative; border-radius: 14px; border: 1px solid rgba(var(--wap-ink-rgb), .26);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .07) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .07) 1px, transparent 1px) 0 0 / 100px 100px,
		linear-gradient(rgba(var(--wap-ink-rgb), .03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .03) 1px, transparent 1px) 0 0 / 20px 20px,
		radial-gradient(90% 70% at 50% 40%, rgba(90, 167, 178, .12), transparent 70%), var(--wap-paper);
	box-shadow: 0 0 0 6px rgba(var(--wap-ink-rgb), .03), 0 80px 120px -50px rgba(90, 167, 178, .5), 0 40px 60px -30px rgba(0, 0, 0, .9); }
.wap-sheet__bar { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(var(--wap-ink-rgb), .18); font-size: 10px; letter-spacing: .2em; color: #8fd6de; direction: ltr; }
.wap-sheet__bar span { display: inline-flex; align-items: center; gap: 8px; }
.wap-sheet__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 8px var(--gold-l); animation: wapPulse 2.4s ease-in-out infinite; }
@keyframes wapPulse { 50% { opacity: .25; } }
.wap-sheet__art { position: relative; margin: 20px 22px 10px; }
.wap-sheet__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.wap-ln { fill: none; stroke: var(--wap-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.wap-ln--soft { opacity: .35; }
.js .wap-ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-ready .wap-ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out) calc(var(--o) * 60ms + .55s); }
.wap-dim path { fill: none; stroke: rgba(243, 194, 122, .55); stroke-width: 1; }
.wap-dimlbl { position: absolute; padding: 0 6px; background: var(--wap-paper); font-size: 9px; letter-spacing: .14em; color: var(--gold-l); }
.wap-dimlbl--w { top: 2.3%; left: 50%; transform: translate(-50%, -50%); }
.wap-dimlbl--h { top: 52%; left: 2.15%; transform: translate(-50%, -50%) rotate(-90deg); }
.wap-zone { fill: rgba(90, 167, 178, 0); stroke: rgba(243, 194, 122, 0); stroke-width: 1.2; stroke-dasharray: 4 4; animation: wapZone 12s var(--ease-out) calc(var(--z) * 3s) infinite both; }
@keyframes wapZone { 0% { fill: rgba(90, 167, 178, 0); stroke: rgba(243, 194, 122, 0); } 4%, 21% { fill: rgba(90, 167, 178, .16); stroke: rgba(243, 194, 122, .8); } 27%, 100% { fill: rgba(90, 167, 178, 0); stroke: rgba(243, 194, 122, 0); } }
.wap-call { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); direction: ltr; }
.wap-call b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(243, 194, 122, .7); background: var(--wap-paper); font-size: 12px; font-weight: 800; color: var(--gold-l); animation: wapCall 12s var(--ease-out) calc(var(--z) * 3s) infinite both; }
.wap-call small { padding: 2px 6px; border-radius: 4px; background: rgba(10, 19, 20, .9); font-size: 8.5px; letter-spacing: .2em; color: #8fd6de; }
@keyframes wapCall { 0% { background: var(--wap-paper); color: var(--gold-l); transform: none; } 4%, 21% { background: var(--gold-l); color: #1a1008; transform: scale(1.14); box-shadow: 0 0 0 6px rgba(243, 194, 122, .14), 0 0 18px rgba(243, 194, 122, .6); } 27%, 100% { background: var(--wap-paper); color: var(--gold-l); transform: none; } }
.wap-cross { position: absolute; z-index: 1; left: 14.1%; top: 56%; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; animation: wapCross 12s var(--ease-cine) infinite; }
.wap-cross::before, .wap-cross::after { content: ""; position: absolute; background: rgba(243, 194, 122, .8); }
.wap-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.wap-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.wap-cross i { position: absolute; inset: 13px; border-radius: 50%; border: 1px solid #f3c27a; box-shadow: 0 0 12px rgba(243, 194, 122, .6); }
@keyframes wapCross { 0%, 20% { left: 14.1%; top: 56%; } 25%, 45% { left: 58.8%; top: 37.6%; } 50%, 70% { left: 47.3%; top: 71.7%; } 75%, 95% { left: 81.3%; top: 71.7%; } 100% { left: 14.1%; top: 56%; } }
.wap-sheet__tb { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(var(--wap-ink-rgb), .2); direction: ltr; }
.wap-sheet__tb span { display: grid; gap: 3px; padding: 9px 14px 10px; border-left: 1px solid rgba(var(--wap-ink-rgb), .16); }
.wap-sheet__tb span:first-child { border-left: 0; }
.wap-sheet__tb small { font-size: 8px; letter-spacing: .2em; color: var(--muted); }
.wap-sheet__tb b { font-size: 11.5px; letter-spacing: .08em; color: #d9f3f5; }
.wap-hero__cap { margin-top: 16px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); }

/* ---------- Drawing-sheet cards ---------- */
.wap-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.wap-shc__paper { position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px 26px 0; border-radius: 6px; border: 1px solid rgba(var(--wap-ink-rgb), .22);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .045) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .045) 1px, transparent 1px) 0 0 / 16px 16px, #0b1415;
	box-shadow: inset 0 0 0 7px #0b1415, inset 0 0 0 8px rgba(var(--wap-ink-rgb), .14), 0 40px 70px -40px rgba(0, 0, 0, .9); transition: transform .5s var(--ease-out), border-color .5s; }
.wap-shc:hover .wap-shc__paper { transform: translateY(-5px); border-color: rgba(var(--wap-ink-rgb), .45); }
.wap-shc__ticks { position: absolute; top: 0; inset-inline: 22px; height: 7px; background: repeating-linear-gradient(90deg, rgba(var(--wap-ink-rgb), .4) 0 1px, transparent 1px 12px); }
.wap-shc__fig { position: relative; display: grid; place-items: center; height: 108px; border-radius: 4px; border: 1px dashed rgba(var(--wap-ink-rgb), .22); background: radial-gradient(60% 70% at 50% 50%, rgba(90, 167, 178, .12), transparent 70%); }
.wap-shc__fig svg { width: 100px; height: 75px; }
.wap-shc__fig .mono { position: absolute; bottom: 6px; left: 8px; font-size: 8.5px; letter-spacing: .18em; color: rgba(var(--wap-ink-rgb), .6); direction: ltr; }
.wap-pic { fill: none; stroke: var(--wap-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.js [data-reveal] .wap-pic > * { stroke-dasharray: 230; stroke-dashoffset: 230; }
.js [data-reveal].is-in .wap-pic > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out) calc(var(--d, 0) * 110ms + .35s); }
.reveal-all .wap-pic > *, html:not(.js) .wap-pic > * { stroke-dashoffset: 0 !important; }
.wap-shc h3 { margin-top: 20px; font-size: 19px; font-weight: 900; line-height: 1.5; }
.wap-shc p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 2; }
.wap-shc__tb { display: grid; grid-template-columns: 1fr auto auto; margin: auto -26px 0; margin-top: 22px; border-top: 1px solid rgba(var(--wap-ink-rgb), .18); font-size: 9.5px; letter-spacing: .16em; color: #8fd6de; direction: ltr; }
.wap-shc__tb span { padding: 10px 14px; border-left: 1px solid rgba(var(--wap-ink-rgb), .16); }
.wap-shc__tb span:first-child { border-left: 0; color: var(--gold-l); }

/* ---------- Parts catalogue ---------- */
.wap-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.wap-part { position: relative; padding: 14px 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(90, 167, 178, .06), transparent 45%), var(--panel); transition: border-color .4s, transform .5s var(--ease-out); }
.wap-part:hover { border-color: rgba(var(--wap-ink-rgb), .45); transform: translateY(-4px); }
.wap-part__fig { position: relative; display: grid; place-items: center; height: 112px; border-radius: 10px; border: 1px solid rgba(var(--wap-ink-rgb), .14);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .06) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .06) 1px, transparent 1px) 0 0 / 12px 12px, var(--wap-paper); overflow: hidden; }
.wap-part__fig::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(var(--wap-ink-rgb), .12), transparent); opacity: 0; transition: none; }
.wap-part:hover .wap-part__fig::after { opacity: 1; left: 110%; transition: left 1.1s var(--ease-out), opacity .2s; }
.wap-part__fig svg { width: 88px; height: 66px; }
.wap-part__no { position: absolute; top: 7px; left: 9px; font-size: 9px; letter-spacing: .16em; color: rgba(var(--wap-ink-rgb), .7); direction: ltr; }
.wap-part h3 { margin-top: 14px; padding-inline: 4px; font-size: 16px; font-weight: 900; line-height: 1.7; }
.wap-part__rule { display: block; height: 2px; margin: 12px 4px 0; border-radius: 2px; background: rgba(255, 236, 214, .07); overflow: hidden; }
.wap-part__rule i { display: block; width: 28%; height: 100%; background: linear-gradient(90deg, var(--terra-l), var(--gold-l)); transition: width .6s var(--ease-out); }
.wap-part:hover .wap-part__rule i { width: 100%; }

/* ---------- Build pipeline ---------- */
.wap-pipe { position: relative; }
.wap-pipe__rail { position: absolute; top: 15px; right: calc(100% / (var(--n) * 2)); left: calc(100% / (var(--n) * 2)); height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--wap-ink-rgb), .4) 0 6px, transparent 6px 12px); }
.wap-pipe__packet { position: absolute; top: -5px; right: 0; width: 30px; height: 12px; margin-right: -15px; border-radius: 6px; background: var(--grad-fire); box-shadow: 0 0 18px rgba(243, 194, 122, .75); animation: wapPacket 10s var(--ease-cine) infinite; }
@keyframes wapPacket { 0% { right: 0; opacity: 0; } 4% { opacity: 1; } 24%, 30% { right: 33.333%; } 54%, 60% { right: 66.666%; } 84% { right: 100%; opacity: 1; } 92%, 100% { right: 100%; opacity: 0; } }
.wap-pipe__stages { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.wap-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.wap-stage__gate { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(var(--wap-ink-rgb), .45); background: #0d0b0a; }
.wap-stage__gate i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--wap-ink-rgb), .35); animation: wapGate 10s ease-out calc(var(--s) * 3s) infinite both; }
@keyframes wapGate { 0% { background: rgba(var(--wap-ink-rgb), .35); box-shadow: none; } 3%, 22% { background: var(--gold-l); box-shadow: 0 0 0 6px rgba(243, 194, 122, .18), 0 0 14px rgba(243, 194, 122, .8); } 32%, 100% { background: rgba(var(--wap-ink-rgb), .35); box-shadow: none; } }
.wap-stage__card { display: flex; flex-direction: column; width: 100%; height: 100%; margin-top: 18px; padding: 20px 20px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(90, 167, 178, .07), transparent 50%), var(--panel); }
.wap-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wap-stage__tag { padding: 3px 10px; border-radius: 999px; background: rgba(224, 169, 95, .14); color: var(--gold-l); font-size: 12.5px; font-weight: 900; }
.wap-stage__job { font-size: 8.5px; letter-spacing: .16em; color: #8fd6de; direction: ltr; }
.wap-stage h3 { margin-top: 14px; font-size: 18px; font-weight: 900; line-height: 1.55; }
.wap-stage p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.wap-stage__bar { display: block; height: 3px; margin-top: auto; padding-top: 0; border-radius: 3px; background: rgba(255, 236, 214, .07); overflow: hidden; }
.wap-stage p + .wap-stage__bar { margin-top: 18px; }
.wap-stage__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--terra-l), var(--gold-l)); transform-origin: 100% 50%; animation: wapBar 10s var(--ease-out) calc(var(--s) * 3s) infinite both; }
@keyframes wapBar { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(1); opacity: 0; } }
.wap-pipe__loop { position: relative; height: 64px; }
.wap-pipe__loop svg { display: block; width: 100%; height: 56px; overflow: visible; }
.wap-pipe__loop path { fill: none; stroke: rgba(var(--wap-ink-rgb), .45); stroke-width: 1.5; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: wapFlow 1.6s linear infinite; }
@keyframes wapFlow { to { stroke-dashoffset: -14; } }
.wap-pipe__head { position: absolute; top: -2px; right: calc(12.5% - 6px); width: 12px; height: 12px; border-top: 1.5px solid #8fd6de; border-left: 1.5px solid #8fd6de; transform: rotate(45deg); }
.wap-pipe__loop .mono { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(var(--wap-ink-rgb), .3); background: #0e0b09; font-size: 9.5px; letter-spacing: .2em; color: #8fd6de; white-space: nowrap; direction: ltr; }

/* ---------- Sequence diagram ---------- */
.wap-seq { width: min(100%, 540px); margin-inline: auto; padding: 14px 16px 20px; border-radius: 18px; border: 1px solid rgba(var(--wap-ink-rgb), .24);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .04) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .04) 1px, transparent 1px) 0 0 / 18px 18px, var(--wap-paper);
	box-shadow: 0 70px 110px -50px rgba(0, 0, 0, .95), 0 0 0 6px rgba(var(--wap-ink-rgb), .03); }
.wap-seq__bar { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(var(--wap-ink-rgb), .16); font-size: 9.5px; letter-spacing: .18em; color: #8fd6de; direction: ltr; }
.wap-seq__bar span:last-child { color: var(--muted); }
.wap-seq__roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wap-seq__role { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid rgba(var(--wap-ink-rgb), .22); background: rgba(10, 19, 20, .9); }
.wap-seq__role .ico { width: 20px; height: 20px; color: var(--gold-l); }
.wap-seq__role b { font-size: 13.5px; font-weight: 900; }
.wap-seq__body { position: relative; padding: 6px 0 4px; }
.wap-seq__life { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--c) * (100% + 10px) / 3 + (100% - 20px) / 6); border-inline-start: 1.5px dashed rgba(var(--wap-ink-rgb), .35); }
.wap-seq__msgs { position: relative; display: grid; gap: 6px; }
.wap-seq__msg { --col: calc((100% + 10px) / 3); --mid: calc((100% - 20px) / 6); position: relative; height: 50px; }
.wap-seq__arrow, .wap-seq__msg small { position: absolute; }
.wap-seq__msg:not(.wap-seq__msg--self) .wap-seq__arrow { bottom: 12px; inset-inline-start: calc(var(--a) * var(--col) + var(--mid)); width: calc((var(--b) - var(--a)) * var(--col)); height: 2px; background: var(--gold-l); box-shadow: 0 0 10px rgba(243, 194, 122, .5); }
.wap-seq__arrow::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--gold-l); }
.wap-seq__msg--rtl .wap-seq__arrow::after { left: 0; border-left: 2px solid var(--gold-l); transform: rotate(-45deg); }
.wap-seq__msg--ltr .wap-seq__arrow::after { right: 0; border-right: 2px solid var(--gold-l); transform: rotate(45deg); }
.wap-seq__msg--rtl .wap-seq__arrow { transform-origin: 100% 50%; }
.wap-seq__msg--ltr .wap-seq__arrow { transform-origin: 0 50%; }
.wap-seq__msg:not(.wap-seq__msg--self) small { bottom: 20px; inset-inline-start: calc(var(--a) * var(--col) + var(--mid)); width: calc((var(--b) - var(--a)) * var(--col)); text-align: center; font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.wap-seq__msg--self .wap-seq__arrow { top: 6px; height: 34px; width: 46px; inset-inline-start: calc(var(--a) * var(--col) + var(--mid)); border: 2px solid var(--gold-l); border-right: 0; border-radius: 12px 0 0 12px; transform-origin: 100% 50%; }
.wap-seq__msg--self .wap-seq__arrow::after { bottom: -5px; top: auto; right: 1px; left: auto; margin: 0; border-right: 2px solid var(--gold-l); transform: rotate(45deg); width: 7px; height: 7px; }
.wap-seq__msg--self small { top: 14px; inset-inline-start: calc(var(--a) * var(--col) + var(--mid) + 54px); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.wap-seq__msg > * { animation: wapMsg0 10s var(--ease-out) infinite both; }
.wap-seq__msg:nth-child(2) > * { animation-name: wapMsg1; }
.wap-seq__msg:nth-child(3) > * { animation-name: wapMsg2; }
.wap-seq__msg:nth-child(n+4) > * { animation-name: wapMsg3; }
@keyframes wapMsg0 { 0% { opacity: 0; transform: scaleX(0); } 6%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes wapMsg1 { 0%, 14% { opacity: 0; transform: scaleX(0); } 20%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes wapMsg2 { 0%, 28% { opacity: 0; transform: scaleX(0); } 34%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes wapMsg3 { 0%, 42% { opacity: 0; transform: scaleX(0); } 48%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.wap-seq__msg small { transform-origin: 50% 50%; }

/* ---------- Caution placard ---------- */
.wap-caution { padding: 8px; border-radius: 19px; background: repeating-linear-gradient(-45deg, #e0a95f 0 12px, #16110d 12px 24px) 0 0 / 200% 100%; animation: wapTape 24s linear infinite; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
@keyframes wapTape { to { background-position: -339.4px 0; } }
.wap-caution__in { position: relative; padding: 22px 24px 20px; border-radius: 13px; background: linear-gradient(180deg, rgba(224, 169, 95, .07), transparent 50%), #130f0c; }
.wap-caution__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 900; color: var(--gold-l); }
.wap-caution__sign { display: grid; place-items: end center; width: 26px; height: 23px; padding-bottom: 1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--gold-l); color: #1a1008; font-size: 13px; font-weight: 900; line-height: 1; }
.wap-caution h3 { margin-top: 10px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 900; line-height: 1.5; }
.wap-caution p:not(.wap-caution__tag) { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 2; }
.wap-caution__code { position: absolute; top: 18px; left: 20px; font-size: 8.5px; letter-spacing: .18em; color: var(--muted); direction: ltr; }

/* ---------- Bill of materials ---------- */
.wap-bom { width: min(100%, 580px); margin-inline: auto; overflow: hidden; border-radius: 10px; border: 1px solid rgba(var(--wap-ink-rgb), .26);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .035) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .035) 1px, transparent 1px) 0 0 / 18px 18px, var(--wap-paper);
	box-shadow: 0 0 0 6px rgba(var(--wap-ink-rgb), .03), 0 70px 110px -50px rgba(0, 0, 0, .95); }
.wap-bom__bar { display: flex; justify-content: space-between; padding: 12px 16px; background: rgba(var(--wap-ink-rgb), .08); border-bottom: 1px solid rgba(var(--wap-ink-rgb), .2); font-size: 10px; letter-spacing: .2em; color: #8fd6de; direction: ltr; }
.wap-bom__head, .wap-bom__row { display: grid; grid-template-columns: 44px 82px minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding-inline: 16px; }
.wap-bom__head { padding-block: 9px; font-size: 8.5px; letter-spacing: .2em; color: var(--muted); border-bottom: 1px solid rgba(var(--wap-ink-rgb), .16); }
.wap-bom__head span { direction: ltr; text-align: right; }
.wap-bom__row { padding-block: 13px; border-bottom: 1px dashed rgba(var(--wap-ink-rgb), .13); }
.wap-bom__item { font-size: 12px; color: #8fd6de; direction: ltr; text-align: right; }
.wap-bom__part { font-size: 9.5px; letter-spacing: .1em; color: var(--gold); direction: ltr; text-align: right; }
.wap-bom__name { font-size: 15.5px; font-weight: 800; line-height: 1.6; }
.wap-bom__ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(143, 207, 154, .14); color: #9fe0a9; }
.wap-bom__ok .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.js .wap-bom[data-reveal] .wap-bom__ok { opacity: 0; transform: scale(.4); }
.js .wap-bom[data-reveal].is-in .wap-bom__ok { opacity: 1; transform: none; transition: opacity .3s, transform .5s var(--ease-snap); transition-delay: calc(var(--r) * 160ms + .6s); }
.wap-bom__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; direction: ltr; }
.wap-bom__foot > .mono:first-child { font-size: 9px; letter-spacing: .18em; color: var(--muted); }
.wap-bom__stamp { padding: 5px 12px; border: 2px solid #e07a5c; border-radius: 6px; color: #e07a5c; font-size: 12px; font-weight: 800; letter-spacing: .24em; transform: rotate(-6deg); box-shadow: inset 0 0 0 2px rgba(224, 122, 92, .2); }
.js .wap-bom[data-reveal] .wap-bom__stamp { opacity: 0; transform: rotate(-6deg) scale(1.8); }
.js .wap-bom[data-reveal].is-in .wap-bom__stamp { opacity: 1; transform: rotate(-6deg); transition: opacity .25s 1.7s, transform .5s var(--ease-snap) 1.7s; }

/* ---------- Endpoint cards (related) ---------- */
.wap-eps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.wap-ep a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(90, 167, 178, .05), transparent 40%), #0e0c0b; transition: border-color .4s, transform .5s var(--ease-out); }
.wap-ep__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(var(--wap-ink-rgb), .14); background: #0b1213; direction: ltr; }
.wap-ep__bar b { padding: 2px 7px; border-radius: 4px; background: rgba(90, 167, 178, .2); font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #9ee6ee; }
.wap-ep__bar code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-2); }
.wap-ep__bar i { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .1em; color: #9fe0a9; }
.wap-ep__body { display: grid; gap: 8px; padding: 18px 20px 8px; }
.wap-ep__body strong { font-size: 18px; font-weight: 900; }
.wap-ep__body small { color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.wap-ep__go { display: grid; place-items: center; width: 36px; height: 36px; margin: auto 20px 18px auto; margin-top: auto; border-radius: 50%; border: 1px solid var(--line-2); color: var(--gold-l); transition: transform .4s var(--ease-out), background .4s; }
.wap-ep a:hover, .wap-ep a:focus-visible { border-color: rgba(var(--wap-ink-rgb), .5); transform: translateY(-4px); }
.wap-ep a:hover .wap-ep__go, .wap-ep a:focus-visible .wap-ep__go { transform: translateX(-4px); background: rgba(243, 194, 122, .12); }

/* ---------- Stamped v1 blueprint (final CTA) ---------- */
.cta__visual--wap_v1 { justify-items: center; }
.wap-v1 { position: relative; width: min(100%, 380px); rotate: 2.5deg; animation: wapFloat 8s ease-in-out infinite; }
@keyframes wapFloat { 50% { transform: translateY(-9px); } }
.wap-v1__sheet { padding: 14px 16px 20px; border-radius: 8px; border: 1px solid rgba(var(--wap-ink-rgb), .35);
	background: linear-gradient(rgba(var(--wap-ink-rgb), .05) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(var(--wap-ink-rgb), .05) 1px, transparent 1px) 0 0 / 16px 16px, var(--wap-paper);
	box-shadow: inset 0 0 0 5px var(--wap-paper), inset 0 0 0 6px rgba(var(--wap-ink-rgb), .16), 0 60px 100px -40px rgba(0, 0, 0, .95), 0 30px 70px -30px rgba(90, 167, 178, .35); }
.wap-v1__bar { display: flex; justify-content: space-between; padding: 4px 4px 10px; border-bottom: 1px solid rgba(var(--wap-ink-rgb), .2); font-size: 9.5px; letter-spacing: .2em; color: #8fd6de; direction: ltr; }
.wap-v1__wire { display: block; width: 100%; height: auto; margin-top: 12px; fill: none; stroke: var(--wap-ink); stroke-width: 1.3; opacity: .75; }
.wap-v1__title { margin-top: 12px; font-size: 16px; font-weight: 900; }
.wap-v1__rows { display: grid; gap: 9px; margin-top: 10px; }
.wap-v1__rows li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; }
.wap-v1__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid rgba(var(--wap-ink-rgb), .5); color: #0a1314; animation: wapTick 8s var(--ease-out) calc(var(--r) * .7s + .4s) infinite both; }
.wap-v1__box .ico { width: 13px; height: 13px; stroke-width: 2.6; }
@keyframes wapTick { 0% { background: transparent; border-color: rgba(var(--wap-ink-rgb), .5); color: transparent; } 6%, 80% { background: #9fe0a9; border-color: #9fe0a9; color: #0a1314; } 90%, 100% { background: transparent; border-color: rgba(var(--wap-ink-rgb), .5); color: transparent; } }
.wap-v1__rows small { font-size: 13px; font-weight: 800; color: #d9f3f5; }
.wap-v1__rows i { border-bottom: 1px dashed rgba(var(--wap-ink-rgb), .3); }
.wap-v1__stamp { position: absolute; left: -22px; bottom: -26px; display: grid; justify-items: center; padding: 8px 16px 7px; border: 3px double #e07a5c; border-radius: 10px; background: rgba(14, 11, 9, .55); color: #ff9b78; transform: rotate(-14deg); animation: wapStamp 8s var(--ease-snap) infinite both; }
.wap-v1__stamp b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: .06em; }
.wap-v1__stamp small { margin-top: 4px; font-size: 8.5px; letter-spacing: .2em; }
@keyframes wapStamp { 0%, 24% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 30% { opacity: 1; transform: rotate(-14deg) scale(.95); } 33%, 90% { opacity: 1; transform: rotate(-14deg); } 96%, 100% { opacity: 0; transform: rotate(-14deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.cx-hero--wap_draft .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 560px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.wap-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wap-pipe__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.wap-pipe__rail, .wap-pipe__loop { display: none; }
}
@media (max-width: 860px) {
	.wap-sheets, .wap-eps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cx-hero--wap_draft .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.wap-sheet__art { margin: 16px 12px 8px; }
	.wap-sheet__bar { font-size: 8.5px; padding: 9px 12px; }
	.wap-call b { width: 22px; height: 22px; font-size: 10px; }
	.wap-call small { display: none; }
	.wap-sheet__tb span { padding: 7px 8px; }
	.wap-sheet__tb b { font-size: 10px; }
	.wap-parts { gap: 10px; }
	.wap-part { padding: 10px 10px 14px; }
	.wap-part__fig { height: 92px; }
	.wap-part__fig svg { width: 72px; height: 54px; }
	.wap-part h3 { font-size: 14.5px; }
	.wap-pipe__stages { grid-template-columns: 1fr; }
	.wap-stage { flex-direction: row; align-items: stretch; gap: 12px; }
	.wap-stage__gate { flex: none; margin-top: 18px; }
	.wap-stage__card { margin-top: 0; }
	.wap-seq { padding: 12px 10px 16px; }
	.wap-seq__role b { font-size: 12px; }
	.wap-seq__msg small, .wap-seq__msg--self small { font-size: 11px; }
	.wap-caution__code { display: none; }
	.wap-bom__head, .wap-bom__row { grid-template-columns: 30px minmax(0, 1fr) 30px; padding-inline: 12px; }
	.wap-bom__head span:nth-child(2), .wap-bom__part { display: none; }
	.wap-bom__name { font-size: 14.5px; }
	.wap-v1 { rotate: 0deg; }
	.wap-v1__stamp { left: -6px; }
}
@media (prefers-reduced-motion: reduce) {
	.wap-sheet__bar i, .wap-zone, .wap-call b, .wap-cross, .wap-pipe__packet, .wap-stage__gate i, .wap-stage__bar i, .wap-pipe__loop path, .wap-seq__msg > *, .wap-caution, .wap-v1, .wap-v1__box, .wap-v1__stamp { animation: none; }
	.wap-cross, .wap-pipe__packet { display: none; }
	.wap-v1__stamp { opacity: 1; }
	.wap-v1__box { background: #9fe0a9; border-color: #9fe0a9; }
	.is-ready .wap-ln { transition: none; }
}