/* Closing banner above the footer (all pages): bronze background, machine timelines drifting, idle gaps filling with orange.
   Pure CSS. Only transform and opacity animate (idle fill = scaleX, drift = translate3d). */
.cbn { position: relative; overflow: hidden; color: var(--pearl, #fafaf8); background: linear-gradient(135deg, #5c2f06 0%, #7a3f08 52%, #4a2606 100%); padding: clamp(64px, 9vw, 128px) 0; font-family: "Instrument Sans", Inter, system-ui, sans-serif; }
.cbn-in { position: relative; width: 100%; max-width: 1450px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .cbn-in { padding-inline: 2rem; } }
@media (min-width: 1280px) { .cbn-in { padding-inline: 2.5rem; } }
.cbn h2 { margin: 0; max-width: 56rem; font-size: clamp(2.125rem, 1rem + 3.7vw, 3.375rem); line-height: 1.04; font-weight: 500; letter-spacing: -.04em; color: #fafaf8; }
.cbn h2 em { font-style: normal; color: #f69320; }
.cbn-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.cbn-pill { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 26px; border-radius: 999px; font: 600 15px "Instrument Sans", Inter, sans-serif; text-decoration: none; transition: transform .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)), box-shadow .35s; }
.cbn-pill:hover { transform: translateY(-2px); }
.cbn-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cbn-pill.p { background: #f69320; color: #fff; box-shadow: 0 14px 30px -12px rgba(246,147,32,.7); text-shadow: 0 1px 1px rgba(120,60,0,.28); }
.cbn-pill.l { background: #fafaf8; color: #101010; }
.cbn-pill i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-size: 17px; transition: transform .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); }
.cbn-pill.p i { background: #101010; color: #f69320; } .cbn-pill.l i { background: #29343a; color: #fafaf8; }
.cbn-pill:hover i { transform: translateX(4px); }
.cbn-ct { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 24px; color: rgba(250,250,248,.82); }
.cbn-ct a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); }
.cbn-ct a:hover, .cbn-ct a:focus-visible { background-size: 100% 1px; }
.cbn-ct span { color: rgba(250,250,248,.75); }
@media (min-width: 1024px) { .cbn h2 { max-width: min(46rem, 45vw); } }
@media (max-width: 1023px) { .cbn { padding-bottom: 16rem; } }
@media (max-width: 560px) { .cbn-pill { padding-left: 20px; font-size: 14px; } .cbn-btns { gap: 10px; } }

/* animated background */
.cap-wrap { position: absolute; inset: auto 0 0 0; height: 230px; overflow: hidden; pointer-events: none; opacity: .95; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%); mask-image: linear-gradient(to bottom, transparent 0, #000 42%); }
@media (min-width: 1024px) { .cap-wrap { inset: 0 0 0 48%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); } }
.cap-grid { position: absolute; inset: 0; opacity: .7; }
.cap-rows { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 0; }
.cap-clip { overflow: hidden; }
@keyframes cap-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.cap-row { display: flex; width: 200%; will-change: transform; animation: cap-drift var(--t, 60s) linear infinite; }
.cap-tile { display: flex; gap: 6px; width: 50%; padding-right: 6px; }
.cap-seg { position: relative; flex: 1 1 0; height: 16px; border-radius: 5px; }
.cap-run { background: linear-gradient(90deg, rgb(255 184 103 / .95), rgb(246 147 32 / .8)); box-shadow: 0 0 18px -6px rgb(255 184 103 / .55); }
.cap-down { background: rgb(250 250 248 / .2); }
.cap-idle { border: 1px dashed rgb(250 250 248 / .45); background: rgb(250 250 248 / .06); }
@keyframes cap-fill { 0%, 8% { transform: scaleX(0); } 34%, 74% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.cap-idle::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(90deg, rgb(255 220 170 / .98), rgb(255 184 103 / .9)); transform-origin: left; transform: scaleX(0); animation: cap-fill 12s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)) infinite; animation-delay: var(--d, 0s); }
@keyframes cap-scan { from { left: -12%; } to { left: 112%; } }
.cap-scan { position: absolute; top: 0; bottom: 0; width: 110px; left: -12%; background: linear-gradient(90deg, transparent, rgb(246 147 32 / .22), transparent); animation: cap-scan 10s linear infinite; }
.cap-key { position: absolute; bottom: 16px; right: 24px; display: flex; align-items: center; gap: 16px; margin: 0; font-size: 11px; line-height: 16px; color: rgba(250,250,248,.75); }
.cap-key span { display: flex; align-items: center; gap: 6px; }
.cap-key i { display: inline-block; width: 20px; height: 10px; border-radius: 3px; }
.cap-key .k-i { border: 1px dashed rgba(250,250,248,.5); } .cap-key .k-r { background: #f69320; }
@media (prefers-reduced-motion: reduce) { .cap-row { animation: none; } .cap-scan { display: none; } .cap-idle::after { animation: none; transform: scaleX(1); } .cbn-pill, .cbn-pill i { transition: none; } }
.cbn-k { margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffb867; }