:root {
  --ink: #0b0c0b;
  --panel: #111311;
  --paper: #f4f2eb;
  --muted: #a7aaa3;
  --line: rgba(244, 242, 235, 0.16);
  --orange: #ff6600;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.ambient { position: fixed; pointer-events: none; filter: blur(110px); opacity: .32; border-radius: 50%; z-index: 0; }
.ambient-a { width: 40vw; height: 40vw; right: 1vw; top: -14vw; background: #6b664a; }
.ambient-b { width: 28vw; height: 28vw; left: 42vw; top: 58vh; background: #444934; opacity: .16; }

.site-header {
  width: min(1420px, calc(100% - 72px));
  height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 20;
}
.brand { font-weight: 800; font-size: 21px; letter-spacing: .08em; }
.brand span { color: var(--orange); }
.site-header nav { display: flex; gap: 44px; color: #c6c7c1; font-size: 14px; }
.site-header nav a { transition: color .2s ease; }
.site-header nav a:hover { color: var(--paper); }
.nav-cta { justify-self: end; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: .25s ease; }
.nav-cta:hover { background: var(--paper); color: var(--ink); }

main, footer { position: relative; z-index: 1; }
.hero {
  min-height: calc(100svh - 92px);
  width: min(1420px, calc(100% - 72px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 20px;
  position: relative;
  padding: 12px 0 112px;
}
.hero-copy { padding: 0 0 2vh 1.5vw; position: relative; z-index: 4; }
.eyebrow { margin: 0 0 28px; color: var(--orange); font-size: 12px; font-weight: 750; letter-spacing: .33em; display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 32px; height: 1px; background: currentColor; }
h1, h2, p { text-wrap: balance; }
h1 { margin: 0; font-size: clamp(58px, 6.2vw, 102px); line-height: .91; letter-spacing: -.065em; font-weight: 720; }
h1 em, .closing h2 em { color: var(--orange); font-style: normal; }
.lede { max-width: 490px; margin: 30px 0 0; color: var(--muted); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 34px; }
.primary-cta { border: 0; border-radius: 999px; background: var(--orange); color: #fff; padding: 17px 24px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 45px rgba(255,102,0,.16); transition: transform .25s ease, box-shadow .25s ease; }
.primary-cta span { margin-left: 22px; }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 55px rgba(255,102,0,.24); }
.text-link { padding: 12px 0 7px; border-bottom: 1px solid currentColor; color: #d8d8d3; }

.viewer-column { position: relative; height: min(72vh, 780px); min-height: 580px; display: grid; place-items: center; isolation: isolate; }
.viewer-shell { width: 100%; height: 100%; display: grid; place-items: center; position: relative; cursor: grab; touch-action: pan-y; outline: none; z-index: 4; }
.viewer-shell:active { cursor: grabbing; }
#productViewer { width: 100%; height: 100%; display: block; filter: drop-shadow(0 48px 35px rgba(0,0,0,.52)); }
.viewer-shell:focus-visible { outline: 1px solid var(--orange); outline-offset: -20px; border-radius: 40px; }
.orbit { position: absolute; left: 4%; right: 0; top: 48%; height: 34%; border: 1px solid rgba(213,205,177,.25); border-radius: 50%; transform: rotate(-8deg); z-index: 1; }
.orbit-one::after { content: ""; position: absolute; right: 9%; top: 12%; width: 8px; height: 8px; border-top: 1px solid var(--paper); border-right: 1px solid var(--paper); transform: rotate(42deg); }
.orbit-two { transform: rotate(13deg) scale(.72); opacity: .28; }
.drag-cue { position: absolute; right: 4%; bottom: 25%; color: #d9d9d2; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; z-index: 8; transition: opacity .35s ease, transform .35s ease; }
.drag-icon { width: 45px; height: 32px; border: 1px solid var(--line); border-radius: 999px; display: grid; place-items: center; font-size: 19px; color: var(--orange); }
.viewer-column.interacted .drag-cue { opacity: 0; transform: translateY(8px); }
.viewer-controls { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(12,13,12,.72); backdrop-filter: blur(10px); overflow: hidden; z-index: 9; opacity: .86; }
.viewer-controls button { min-width: 44px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.viewer-controls button:hover { background: rgba(255,255,255,.08); }
.viewer-controls button + button { border-left: 1px solid var(--line); }
.loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: var(--ink); z-index: 10; transition: opacity .45s ease, visibility .45s ease; }
.loading.is-ready { opacity: 0; visibility: hidden; }
.loading b { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.loading-bar { width: 160px; height: 2px; background: #31332e; }
.loading-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .15s ease; }
.scroll-note { position: absolute; bottom: 32px; left: 18px; color: #777a74; font-size: 9px; letter-spacing: .2em; display: flex; align-items: center; gap: 12px; }
.scroll-note span { width: 1px; height: 30px; background: linear-gradient(var(--orange), transparent); }

.spec-rail { width: min(1420px, calc(100% - 72px)); margin: -82px auto 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 112px; display: grid; grid-template-columns: repeat(3,1fr); position: relative; z-index: 5; }
.spec-rail article { display: flex; align-items: center; justify-content: center; gap: 20px; }
.spec-rail article + article { border-left: 1px solid var(--line); }
.spec-icon { color: var(--orange); font-size: 28px; font-weight: 800; letter-spacing: -.18em; }
.spec-icon.android { font-size: 22px; letter-spacing: 0; }
.spec-icon.printer { letter-spacing: 0; }
.spec-rail div { display: flex; flex-direction: column; gap: 6px; }
.spec-rail small { color: #72766f; font-size: 9px; letter-spacing: .17em; }
.spec-rail strong { font-size: 14px; font-weight: 560; }

.feature-story { height: 600vh; position: relative; margin-top: 110px; }
.feature-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; background: radial-gradient(circle at 30% 43%, rgba(120,56,12,.36) 0,rgba(31,24,17,.72) 28%,#0b0c0b 65%); }
.feature-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: linear-gradient(rgba(255,102,0,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,102,0,.13) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 28% 45%,#000,transparent 62%); }
.story-kicker { position: absolute; z-index: 7; top: 6.5vh; left: 4vw; margin: 0; display: flex; align-items: center; gap: 16px; font-size: 10px; font-weight: 700; letter-spacing: .28em; color: #d6d5cf; }
.story-kicker span { width: 36px; height: 1px; background: var(--orange); }
.story-product { --anchor-x: 50%; --anchor-y: 26%; position: absolute; z-index: 3; left: -6vw; top: 3vh; width: 68vw; height: 88vh; }
.story-product::after { content: ""; position: absolute; left: 16%; right: 4%; bottom: 2%; height: 6%; border-radius: 50%; background: rgba(0,0,0,.72); filter: blur(22px); z-index: -1; }
.story-product > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 28px rgba(0,0,0,.48)); transform: translateX(var(--image-shift,0px)); transition: opacity .28s ease,transform .62s cubic-bezier(.16,.84,.28,1); }
.story-product.switching > img { opacity: 0; transform: translateX(var(--image-shift,0px)) scale(.955) rotate(-1deg); }
.story-callout { position: absolute; z-index: 6; left: var(--anchor-x); top: var(--anchor-y); width: 66px; height: 66px; transform: translate(-50%,-50%) scale(0); border: 1px solid rgba(255,102,0,.88); border-radius: 50%; background: radial-gradient(circle,rgba(255,102,0,.22),rgba(255,102,0,.04) 48%,transparent 50%); box-shadow: 0 0 28px rgba(255,102,0,.22); animation: focusIn .56s .15s cubic-bezier(.16,1,.3,1) forwards; pointer-events: none; }
.story-callout::before,.story-callout::after,.focus-orbit { content: ""; position: absolute; border-radius: 50%; }
.story-callout::before { inset: 8px; border: 1px solid rgba(255,102,0,.55); }
.story-callout::after { inset: 27px; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.focus-orbit { inset: -12px; border: 1px solid rgba(255,102,0,.24); animation: focusPulse 2s .65s ease-out infinite; }
.story-callout i { position: absolute; inset: -4px; border-top: 1px solid #ff8c42; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid #ff8c42; border-radius: 50%; animation: focusSpin 4.2s linear infinite; }
.story-callout b { position: absolute; right: -22px; top: 23px; min-width: 26px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255,102,0,.7); border-radius: 10px; background: #11120f; color: var(--orange); font: 700 9px/1 sans-serif; }
.story-callout.replay,.story-callout.replay * { animation: none !important; }
.story-lens { position: absolute; z-index: 7; left: calc(var(--anchor-x) + 8%); top: calc(var(--anchor-y) - 7%); width: clamp(138px,13vw,196px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,102,0,.8); border-radius: 50%; background: #111; box-shadow: 0 24px 70px rgba(0,0,0,.48),0 0 0 8px rgba(255,102,0,.05); opacity: 0; transform: scale(.72) translateY(12px); transition: opacity .35s ease,transform .55s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.story-lens.visible { opacity: 1; transform: scale(1) translateY(0); }
.story-lens img { position: absolute; max-width: none; object-fit: contain; filter: contrast(1.06) brightness(1.08); }
.story-lens span { position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); padding: 5px 8px; background: rgba(9,10,9,.78); color: #d2d2cd; font-size: 7px; font-weight: 700; letter-spacing: .18em; white-space: nowrap; }
.story-copy { position: absolute; z-index: 6; left: 65vw; top: 47%; width: min(31vw,490px); transform: translateY(-50%); }
.story-copy.reveal { animation: storyCopy .7s .16s both cubic-bezier(.16,.84,.28,1); }
.story-count { margin: 0 0 28px; display: flex; align-items: baseline; gap: 12px; font-size: clamp(27px,2.65vw,42px); font-weight: 820; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.story-count strong { color: var(--orange); }
.story-count span { color: #5e615c; }
.story-copy h2 { margin: 0; max-width: 500px; font-size: clamp(44px,4.55vw,74px); line-height: .91; letter-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.story-copy > p:last-child { margin: 30px 0 0; max-width: 430px; color: #b2b4ae; font-size: clamp(16px,1.32vw,20px); line-height: 1.58; text-wrap: pretty; }
.story-progress { position: absolute; z-index: 8; left: 50%; bottom: 5.2vh; transform: translateX(-50%); width: min(700px,62vw); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,1fr); }
.story-progress::before { content: ""; position: absolute; left: 9%; right: 9%; top: 7px; height: 1px; background: #3d403b; }
.story-progress li { position: relative; display: grid; justify-items: center; gap: 13px; color: #777b75; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; outline: none; }
.story-progress li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #777b75; background: #10110f; transition: .4s cubic-bezier(.16,.84,.28,1); z-index: 1; }
.story-progress li span { opacity: .72; transition: .35s ease; white-space: nowrap; }
.story-progress li.active::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px rgba(255,102,0,.13),0 0 18px rgba(255,102,0,.45); }
.story-progress li.active span { opacity: 1; color: #f0efe9; }
.story-progress li:hover::before,.story-progress li:focus-within::before { border-color: var(--orange); transform: scale(1.18); }
.story-progress li:focus-within span { color: #fff; opacity: 1; }
.story-scroll { position: absolute; z-index: 7; right: 4vw; bottom: 5.1vh; margin: 0; display: flex; align-items: center; gap: 12px; color: #888b84; font-size: 8px; letter-spacing: .2em; }
.story-scroll b { color: var(--orange); font-size: 21px; font-weight: 300; animation: scrollNudge 1.5s ease-in-out infinite; }
@keyframes focusIn { to { transform: translate(-50%,-50%) scale(1); } }
@keyframes focusPulse { 0% { opacity: .75; transform: scale(.8); } 75%,100% { opacity: 0; transform: scale(1.55); } }
@keyframes focusSpin { to { transform: rotate(360deg); } }
@keyframes storyCopy { from { opacity: 0; filter: blur(10px); transform: translate(0,-42%); } to { opacity: 1; filter: blur(0); transform: translate(0,-50%); } }
@keyframes scrollNudge { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

.content-story { height: 600vh; position: relative; margin-top: 4px; }
.content-stage { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; background: #090a09; isolation: isolate; }
.content-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .22; pointer-events: none; background: linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.025) 42.1% 42.4%,transparent 42.5%),radial-gradient(circle at 50% 48%,rgba(255,102,0,.13),transparent 34%); }
.content-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 150px rgba(0,0,0,.76); }
.content-kicker { position: absolute; z-index: 20; top: 5.2vh; left: 4vw; margin: 0; display: flex; align-items: center; gap: 16px; color: #d4d4ce; font-size: 10px; font-weight: 700; letter-spacing: .28em; }
.content-kicker span { width: 36px; height: 1px; background: var(--orange); }
.content-slide { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease,visibility .32s ease; }
.content-slide.active { z-index: 3; opacity: 1; visibility: visible; pointer-events: auto; }
.content-slide em { color: var(--orange); font-style: normal; }
.content-count { margin: 0 0 13px; display: flex; align-items: baseline; gap: 10px; font-size: clamp(24px,2.2vw,35px); font-weight: 820; font-variant-numeric: tabular-nums; }
.content-count strong { color: var(--orange); }
.content-count span { color: #5e615c; }
.content-eyebrow { margin: 0 0 16px; color: #92958e; font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.content-slide h2 { margin: 0; font-size: clamp(43px,4.55vw,76px); line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.content-slide h2 + p { color: #aeb1aa; font-size: clamp(15px,1.16vw,18px); line-height: 1.6; }

.reveal-word { position: absolute; left: 3vw; top: 17vh; color: rgba(255,255,255,.027); font-size: clamp(110px,16vw,275px); font-weight: 850; line-height: .7; letter-spacing: -.09em; }
.reveal-copy { position: absolute; z-index: 7; left: 6vw; top: 31vh; width: min(45vw,720px); }
.reveal-copy h2 { max-width: 720px; }
.reveal-copy > p:last-child { max-width: 520px; margin-top: 27px; }
.reveal-device { position: absolute; z-index: 5; right: -3vw; top: 4vh; width: 58vw; height: 89vh; }
.reveal-device::after,.experience-device::after,.payments-device::after,.pos-device::after,.ready-device::after { content: ""; position: absolute; left: 18%; right: 9%; bottom: 1%; height: 5%; border-radius: 50%; background: rgba(0,0,0,.76); filter: blur(21px); z-index: -1; }
.reveal-device img,.experience-device img,.payments-device img,.pos-device img,.ready-device img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 38px 34px rgba(0,0,0,.58)); }
.light-sweep { position: absolute; z-index: 3; top: 12%; bottom: 8%; left: 35%; width: 8%; background: linear-gradient(90deg,transparent,rgba(255,170,97,.24),transparent); filter: blur(9px); transform: skewX(-12deg); }
.content-slide.active .reveal-device { animation: revealDevice 1.1s .08s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .light-sweep { animation: lightSweep 1.5s .25s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .reveal-copy { animation: copyRise .8s .22s both cubic-bezier(.16,.84,.28,1); }

.experience-heading { position: absolute; z-index: 7; right: 5vw; top: 14vh; width: min(45vw,720px); }
.experience-heading h2 { font-size: clamp(40px,4.1vw,68px); }
.experience-device { position: absolute; z-index: 4; left: -3vw; top: 5vh; width: 61vw; height: 88vh; transform: rotate(-2deg); }
.detail { position: absolute; z-index: 8; width: 210px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.21); display: grid; gap: 5px; }
.detail::before { content: ""; position: absolute; left: -6px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,102,0,.12); }
.detail b { font-size: 20px; color: #f5f3ed; }
.detail span { color: #8f928b; font-size: 11px; line-height: 1.4; }
.detail-screen { right: 10vw; top: 47vh; }
.detail-printer { left: 7vw; top: 21vh; }
.detail-weight { right: 16vw; top: 69vh; }
.content-slide.active .experience-device { animation: experienceDevice .9s .08s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .experience-heading,.content-slide.active .detail { animation: copyRise .72s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .detail-screen { animation-delay: .28s; }.content-slide.active .detail-printer { animation-delay: .42s; }.content-slide.active .detail-weight { animation-delay: .56s; }

.payments-copy { position: absolute; z-index: 9; left: 5vw; top: 13vh; width: min(47vw,760px); }
.payments-copy h2 { font-size: clamp(37px,3.8vw,64px); }
.payments-device { position: absolute; z-index: 5; right: 16vw; top: 15vh; width: 40vw; height: 68vh; }
.payment-orbit { position: absolute; z-index: 7; display: grid; place-items: center; color: #fff; font-weight: 780; letter-spacing: .08em; box-shadow: 0 24px 55px rgba(0,0,0,.38); }
.orbit-card { right: 8vw; top: 22vh; width: 180px; height: 112px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: linear-gradient(135deg,#2e302d,#111); transform: rotate(12deg); }
.orbit-card::after { content: ""; position: absolute; left: 18px; top: 23px; width: 31px; height: 23px; border-radius: 5px; background: linear-gradient(135deg,#d6be7b,#806f38); }
.orbit-phone { right: 49vw; top: 53vh; width: 92px; height: 165px; border: 1px solid rgba(255,255,255,.27); border-radius: 22px; background: linear-gradient(160deg,#272a27,#0c0d0c); transform: rotate(-14deg); }
.nfc-wave { position: absolute; z-index: 8; right: 12%; top: 12%; width: 100px; height: 100px; border: 1px solid rgba(255,102,0,.6); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,102,0,.09),0 0 0 40px rgba(255,102,0,.04); animation: nfcPulse 2s ease-out infinite; }
.payment-ribbon { position: absolute; z-index: 10; left: 5vw; right: 5vw; bottom: 12vh; min-height: 62px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #c8cac4; font-size: 12px; font-weight: 680; }
.payment-ribbon span:first-child { font-size: 19px; font-style: italic; color: #fff; }
.content-slide.active .payments-device { animation: revealDevice .92s .12s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .payments-copy { animation: copyRise .7s .2s both; }
.content-slide.active .orbit-card { animation: cardOrbit .9s .34s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .orbit-phone { animation: phoneOrbit .9s .45s both cubic-bezier(.16,.84,.28,1); }

.pos-device { position: absolute; z-index: 5; left: -4vw; top: 7vh; width: 55vw; height: 84vh; }
.pos-copy { position: absolute; z-index: 8; left: 47vw; top: 12vh; width: min(47vw,760px); }
.pos-copy h2 { font-size: clamp(38px,3.9vw,65px); }
.pos-copy > p:last-child { max-width: 570px; margin-top: 20px; }
.pos-panels { position: absolute; z-index: 9; left: 48vw; right: 5vw; top: 56vh; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.17); }
.pos-panels div { min-height: 90px; padding: 16px 14px 14px 0; display: grid; grid-template-columns: 24px 1fr; column-gap: 9px; align-content: start; }
.pos-panels div:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.14); }
.pos-panels div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
.pos-panels i { grid-row: 1 / 3; color: var(--orange); font: normal 700 9px/1.4 sans-serif; }
.pos-panels b { font-size: 13px; }.pos-panels span { color: #858981; font-size: 10px; margin-top: 5px; }
.content-slide.active .pos-device { animation: experienceDevice .9s .08s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .pos-copy { animation: copyRise .72s .17s both; }
.content-slide.active .pos-panels div { animation: panelIn .55s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .pos-panels div:nth-child(1) { animation-delay: .3s; }.content-slide.active .pos-panels div:nth-child(2) { animation-delay: .42s; }.content-slide.active .pos-panels div:nth-child(3) { animation-delay: .54s; }.content-slide.active .pos-panels div:nth-child(4) { animation-delay: .66s; }

.ready-scenes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); opacity: .5; }
.ready-scenes span { padding: 18vh 22px 0; border-right: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.18); font-size: clamp(22px,2.3vw,39px); font-weight: 800; letter-spacing: -.04em; writing-mode: vertical-rl; }
.ready-scenes span:nth-child(1) { background: radial-gradient(circle at 50% 50%,rgba(255,102,0,.14),transparent 60%); }
.ready-scenes span:nth-child(2) { background: radial-gradient(circle at 50% 35%,rgba(255,255,255,.06),transparent 55%); }
.ready-scenes span:nth-child(3) { background: radial-gradient(circle at 50% 65%,rgba(255,102,0,.1),transparent 55%); }
.ready-device { position: absolute; z-index: 5; left: 29vw; top: 6vh; width: 45vw; height: 80vh; }
.ready-copy { position: absolute; z-index: 9; left: 5vw; top: 16vh; width: min(42vw,670px); }
.ready-copy h2 { font-size: clamp(39px,4vw,66px); }.ready-copy h2 + p { max-width: 540px; margin-top: 23px; }.ready-copy .primary-cta { margin-top: 23px; }
.ready-signoff { position: absolute; z-index: 9; right: 5vw; top: 25vh; width: 24vw; color: #f1efe8; font-size: clamp(24px,2.3vw,38px); font-weight: 720; line-height: 1.05; letter-spacing: -.04em; }
.content-slide.active .ready-device { animation: revealDevice 1s .1s both cubic-bezier(.16,.84,.28,1); }
.content-slide.active .ready-copy { animation: copyRise .75s .2s both; }.content-slide.active .ready-signoff { animation: copyRise .75s .38s both; }
.content-progress { position: absolute; z-index: 12; left: 50%; bottom: 4.6vh; transform: translateX(-50%); width: min(700px,62vw); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,1fr); }
.content-progress::before { content: ""; position: absolute; left: 9%; right: 9%; top: 7px; height: 1px; background: #3d403b; }
.content-progress li { position: relative; display: grid; justify-items: center; gap: 12px; color: #777b75; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; outline: none; }
.content-progress li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #777b75; background: #10110f; transition: .4s cubic-bezier(.16,.84,.28,1); z-index: 1; }
.content-progress li span { opacity: .7; transition: .35s ease; }
.content-progress li.active::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px rgba(255,102,0,.13),0 0 18px rgba(255,102,0,.45); }
.content-progress li.active span { opacity: 1; color: #f0efe9; }
.content-progress li:hover::before,.content-progress li:focus-within::before { border-color: var(--orange); transform: scale(1.18); }
.content-progress li:focus-within span { color: #fff; opacity: 1; }
.story-progress li > button,.content-progress li > button { position: absolute; z-index: 3; inset: -12px -18px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-progress li > button:focus-visible,.content-progress li > button:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }
.content-scroll { position: absolute; z-index: 12; right: 3vw; bottom: 4.5vh; margin: 0; display: flex; align-items: center; gap: 11px; color: #888b84; font-size: 8px; letter-spacing: .18em; }
.content-scroll b { color: var(--orange); font-size: 20px; font-weight: 300; animation: scrollNudge 1.5s ease-in-out infinite; }
@keyframes revealDevice { from { opacity: 0; filter: blur(12px); transform: translateX(55px) scale(.94) rotate(2deg); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes experienceDevice { from { opacity: 0; filter: blur(10px); transform: translateX(-48px) scale(.95) rotate(-5deg); } to { opacity: 1; filter: blur(0); transform: rotate(-2deg); } }
@keyframes copyRise { from { opacity: 0; filter: blur(8px); transform: translateY(28px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes lightSweep { from { opacity: 0; transform: translateX(-260%) skewX(-12deg); } 30% { opacity: 1; } to { opacity: 0; transform: translateX(550%) skewX(-12deg); } }
@keyframes nfcPulse { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: .8; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes cardOrbit { from { opacity: 0; transform: translate(60px,-35px) rotate(26deg) scale(.7); } to { opacity: 1; transform: rotate(12deg); } }
@keyframes phoneOrbit { from { opacity: 0; transform: translate(-55px,40px) rotate(-28deg) scale(.7); } to { opacity: 1; transform: rotate(-14deg); } }
@keyframes panelIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.closing { min-height: 70vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 120px 30px; background: radial-gradient(circle at 50% 46%, #272a22 0, #101210 45%, #0b0c0b 72%); }
.closing > p { margin: 0 0 28px; color: var(--orange); letter-spacing: .3em; font-size: 11px; }
.closing h2 { margin: 0 0 42px; font-size: clamp(54px, 7.5vw, 110px); line-height: .9; letter-spacing: -.06em; }
footer { min-height: 90px; width: min(1420px, calc(100% - 72px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #6f736d; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1000px) {
  .site-header { width: calc(100% - 36px); height: 74px; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { width: calc(100% - 36px); grid-template-columns: 1fr; padding-top: 56px; min-height: auto; }
  .hero-copy { padding: 0; text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  h1 { font-size: clamp(52px, 11vw, 84px); }
  .lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .viewer-column { min-height: 620px; height: 72svh; }
  .scroll-note { display: none; }
  .spec-rail { width: calc(100% - 36px); margin-top: -60px; }
  .feature-story { margin-top: 80px; }
  .story-product { left: -8vw; top: 7vh; width: 70vw; height: 84vh; }
  .story-copy { left: 61vw; width: 34vw; }
  .story-copy h2 { font-size: clamp(36px,5vw,56px); }
  .story-progress { width: 70vw; }
  .story-scroll { left: auto; right: 3vw; }
  .content-product { left: -6vw; width: 51vw; }
  .content-copy { left: 47vw; width: 49vw; }
  .content-copy h2 { font-size: clamp(34px,4.5vw,52px); }
  .content-progress { width: 70vw; }
  .content-scroll { display: none; }
}

@media (max-width: 640px) {
  .site-header { height: 68px; }
  .brand { font-size: 17px; }
  .nav-cta { font-size: 12px; padding: 10px 13px; }
  .hero { padding-top: 42px; }
  .eyebrow { margin-bottom: 18px; }
  h1 { font-size: clamp(47px, 15vw, 68px); }
  .lede { margin-top: 22px; font-size: 16px; }
  .hero-actions { gap: 22px; margin-top: 28px; }
  .primary-cta { padding: 15px 18px; font-size: 14px; }
  .primary-cta span { margin-left: 9px; }
  .text-link { font-size: 13px; }
  .viewer-column { min-height: 470px; height: 60svh; }
  .orbit { left: -12%; right: -12%; top: 45%; }
  .drag-cue { right: 0; bottom: 27%; }
  .viewer-controls { bottom: 2%; }
  .spec-rail { grid-template-columns: 1fr; margin-top: -45px; padding: 5px 0; }
  .spec-rail article { justify-content: flex-start; padding: 18px 24px; }
  .spec-rail article + article { border-left: 0; border-top: 1px solid var(--line); }
  .feature-story { height: 600svh; margin-top: 65px; }
  .feature-stage { min-height: 620px; }
  .story-kicker { top: 26px; left: 22px; font-size: 9px; }
  .story-product { top: 6vh; left: -8vw; width: 112vw; height: 54vh; }
  .story-callout { width: 52px; height: 52px; }
  .story-callout::after { inset: 21px; }
  .story-callout b { right: -20px; top: 16px; }
  .story-lens { width: 112px; left: calc(var(--anchor-x) + 4%); top: calc(var(--anchor-y) - 4%); }
  .story-copy { left: 24px; right: 24px; top: 64vh; width: auto; transform: none; }
  .story-copy h2 { font-size: clamp(34px,10vw,46px); }
  .story-copy > p:last-child { margin-top: 14px; font-size: 15px; }
  .story-count { margin-bottom: 10px; font-size: 22px; }
  .story-progress { left: 50%; right: auto; top: auto; bottom: 18px; width: calc(100% - 34px); transform: translateX(-50%); }
  .story-progress li { font-size: 7px; gap: 8px; letter-spacing: .05em; }
  .story-progress li span { display: block; }
  .story-scroll { display: none; }
  .content-story { height: 600svh; }
  .content-stage { min-height: 680px; }
  .content-kicker { top: 22px; left: 22px; font-size: 8px; }
  .content-product,.content-product--angle,.content-product--payment,.content-product--integration,.content-product--benefits { left: -8vw; top: 4vh; width: 112vw; height: 35vh; transform: none; }
  .content-copy,.content-copy--specs { left: 20px; right: 20px; top: 38vh; width: auto; }
  .content-count { margin-bottom: 6px; font-size: 19px; }
  .content-eyebrow { margin-bottom: 8px; font-size: 7px; }
  .content-copy h2 { font-size: clamp(29px,8.8vw,39px); line-height: .94; }
  .content-lede { margin-top: 10px; font-size: 12px; line-height: 1.42; }
  .content-feature-grid { margin-top: 12px; column-gap: 16px; }
  .content-feature-grid li { min-height: 54px; padding: 8px 0 7px; }
  .content-feature-grid b,.integration-points b,.benefit-list b { font-size: 11px; }
  .content-feature-grid span,.integration-points span,.benefit-list span { font-size: 9px; }
  .spec-list { margin-top: 11px; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 15px; }
  .spec-list div { min-height: 38px; padding: 5px 0; grid-template-columns: 1fr; align-content: center; gap: 2px; }
  .spec-list dt { font-size: 7px; }
  .spec-list dd { font-size: 10px; }
  .payment-cloud { margin-top: 14px; gap: 5px; }
  .payment-cloud span { min-height: 28px; padding: 0 8px; font-size: 9px; }
  .payment-cloud .brand-visa { font-size: 13px; }
  .integration-points { margin-top: 14px; }
  .integration-points div { min-height: 90px; padding: 10px 8px 8px 0; }
  .integration-points div + div { padding-left: 8px; }
  .benefit-list { margin-top: 12px; gap: 0 14px; }
  .benefit-list li { min-height: 65px; padding: 8px 0; grid-template-columns: 22px 1fr; }
  .content-progress { bottom: 15px; width: calc(100% - 32px); }
  .content-progress li { gap: 7px; font-size: 7px; letter-spacing: .04em; }
  .content-stage { min-height: 680px; }
  .content-kicker { max-width: calc(100% - 44px); letter-spacing: .16em; }
  .content-slide h2 { font-size: clamp(31px,9vw,43px); }
  .reveal-word { left: -4vw; top: 21vh; font-size: 31vw; }
  .reveal-copy,.experience-heading,.payments-copy,.pos-copy,.ready-copy { left: 22px; right: 22px; top: 12vh; width: auto; }
  .reveal-copy > p:last-child,.pos-copy > p:last-child,.ready-copy h2 + p { margin-top: 13px; font-size: 12px; line-height: 1.45; }
  .reveal-device { right: -20vw; top: 29vh; width: 125vw; height: 55vh; }
  .experience-heading { top: 10vh; }
  .experience-device { left: -24vw; top: 25vh; width: 125vw; height: 55vh; }
  .detail { width: 145px; padding-top: 8px; }
  .detail b { font-size: 14px; }.detail span { font-size: 8px; }
  .detail-printer { left: 28px; top: 39vh; }.detail-screen { right: 22px; top: 49vh; }.detail-weight { right: 24px; top: 68vh; }
  .payments-copy { top: 10vh; }
  .payments-device { right: -12vw; top: 29vh; width: 106vw; height: 49vh; }
  .orbit-card { right: 8px; top: 34vh; width: 115px; height: 72px; font-size: 11px; }
  .orbit-phone { left: 18px; right: auto; top: 52vh; width: 58px; height: 105px; font-size: 10px; }
  .payment-ribbon { left: 18px; right: 18px; bottom: 55px; min-height: 42px; gap: 10px; overflow: hidden; justify-content: flex-start; font-size: 8px; white-space: nowrap; }
  .payment-ribbon span:nth-child(n+6) { display: none; }
  .pos-copy { top: 9vh; }
  .pos-device { left: -25vw; top: 31vh; width: 100vw; height: 45vh; opacity: .7; }
  .pos-panels { left: 42vw; right: 15px; top: 38vh; grid-template-columns: 1fr; }
  .pos-panels div { min-height: 58px; padding: 9px 5px; }
  .pos-panels div:nth-child(even) { padding-left: 5px; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .pos-panels b { font-size: 10px; }.pos-panels span { font-size: 8px; }
  .ready-scenes { opacity: .34; }.ready-scenes span { padding: 14vh 8px 0; font-size: 17px; }
  .ready-copy { top: 9vh; width: 73vw; right: auto; }
  .ready-copy .primary-cta { margin-top: 13px; padding: 12px 15px; font-size: 11px; }
  .ready-device { left: 21vw; top: 30vh; width: 94vw; height: 49vh; }
  .ready-signoff { right: 17px; top: 54vh; width: 35vw; font-size: 18px; }
  @keyframes storyCopy { from { opacity: 0; filter: blur(8px); transform: translateY(24px); } to { opacity: 1; filter: blur(0); transform: none; } }
  footer { width: calc(100% - 36px); flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}