/* ==========================================================================
   JP Media concept builds — four tiny, fully animated website demos.
   Each one is drawn on an 800 x 500 canvas, scaled to fit its frame by
   site.js, and plays a loop: the page scrolls and a cursor interacts with it.
   Reusable for client pitches: copy one block and swap the brand.
   ========================================================================== */

.cx-view { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.cx-page *, .cx-page *::before, .cx-page *::after { box-sizing: border-box; }
.cx-page { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 800px; height: 500px; overflow: hidden; transform: scale(var(--s, 1)); transform-origin: 0 0; font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.cx-scroll { position: absolute; left: 0; top: 0; width: 800px; }
.cx-nav { position: absolute; left: 0; top: 0; width: 800px; height: 64px; z-index: 10; display: flex; align-items: center; gap: 26px; padding: 0 30px; font-size: 13px; }
.cx-nav .sp { flex: 1; }
.cx-abs { position: absolute; }
.cx-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; will-change: transform; }
.cx-cursor svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cx-cursor i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.cx-toast { position: absolute; left: 50%; bottom: 22px; z-index: 25; translate: -50% 0; white-space: nowrap; padding: 12px 18px; font-size: 13px; font-weight: 600; opacity: 0; }
.cx-swap { position: relative; display: inline-grid; }
.cx-swap > * { grid-area: 1 / 1; }

/* =========================== 1. SALTLINE COFFEE ===========================
   Trend: grain and texture, custom illustration, floating objects. */
.co { --T: 16s; background: #efe4d2; color: #2a1c13; }
.co .grain { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.co .cx-nav { background: rgba(239,228,210,.92); border-bottom: 1.5px solid #2a1c13; }
.co .logo { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; letter-spacing: -.01em; }
.co .navbtn { width: 128px; height: 36px; border-radius: 99px; background: #2a1c13; color: #fbf6ec; display: grid; place-items: center; font-weight: 600; animation: co-press var(--T) infinite; }
.co .cx-scroll { animation: co-scroll var(--T) infinite cubic-bezier(.65,0,.3,1); }
.co .hero { position: absolute; left: 0; top: 64px; width: 800px; height: 436px; }
.co h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; letter-spacing: -.02em; }
.co .hero h3 { position: absolute; left: 40px; top: 56px; width: 430px; font-size: 76px; line-height: .9; }
.co .hero h3 i { color: #6d8a3e; }
.co .hero p { position: absolute; left: 42px; top: 300px; width: 360px; font-size: 15px; line-height: 1.5; color: #5a4636; }
.co .hero .btns { position: absolute; left: 40px; top: 366px; display: flex; gap: 10px; }
.co .btn-a { padding: 11px 20px; border-radius: 99px; background: #6d8a3e; color: #fbf6ec; font-weight: 600; font-size: 13px; }
.co .btn-b { padding: 11px 20px; border-radius: 99px; border: 1.5px solid #2a1c13; font-weight: 600; font-size: 13px; }
.co .sun { position: absolute; left: 470px; top: 46px; width: 300px; height: 300px; border-radius: 50%; background: #f3c853; }
.co .cup { position: absolute; left: 505px; top: 96px; width: 240px; height: 260px; }
.co .steam path { animation: co-steam 3s ease-in-out infinite; }
.co .steam path:nth-child(2) { animation-delay: -1s; }
.co .steam path:nth-child(3) { animation-delay: -2s; }
.co .bean { position: absolute; width: 26px; height: 34px; border-radius: 50%; background: #4a2e1f; animation: co-float 6s ease-in-out infinite alternate; }
.co .bean::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: #2a1c13; transform: rotate(14deg); }
.co .menu { position: absolute; left: 0; top: 500px; width: 800px; height: 480px; background: #fbf6ec; border-top: 1.5px solid #2a1c13; }
.co .menu h3 { position: absolute; left: 40px; top: 36px; font-size: 50px; }
.co .menu .aside { position: absolute; right: 40px; top: 58px; font-size: 13px; color: #5a4636; }
.co .card { position: absolute; top: 120px; width: 230px; height: 300px; border: 1.5px solid #2a1c13; border-radius: 18px; background: #fff; overflow: hidden; }
.co .card .art { height: 160px; display: grid; place-items: center; }
.co .card .art b { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, #fbf6ec 0 22%, #c9a27a 23% 34%, #fbf6ec 35% 44%, #8b5a3c 45%); box-shadow: 0 0 0 10px #fff, 0 0 0 11.5px #2a1c13; }
.co .card .nm { position: absolute; left: 18px; top: 178px; font-family: "Instrument Serif", Georgia, serif; font-size: 28px; }
.co .card .pr { position: absolute; left: 18px; top: 218px; font-size: 13px; color: #5a4636; }
.co .plus { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: #2a1c13; color: #fbf6ec; display: grid; place-items: center; font-size: 20px; font-weight: 600; }
.co .plus.hit { animation: co-plus var(--T) infinite; }
.co .plus.hit .a { animation: co-out var(--T) infinite; }
.co .plus.hit .b { opacity: 0; animation: co-in var(--T) infinite; }
.co .visit { position: absolute; left: 0; top: 980px; width: 800px; height: 460px; background: #4a2e1f; color: #fbf6ec; }
.co .visit h3 { position: absolute; left: 40px; top: 50px; font-size: 64px; }
.co .hours { position: absolute; left: 42px; top: 150px; width: 300px; display: grid; gap: 10px; font-size: 14px; }
.co .hours div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(251,246,236,.35); padding-bottom: 8px; }
.co .map { position: absolute; left: 420px; top: 50px; width: 340px; height: 300px; border-radius: 20px; background: #6d8a3e; overflow: hidden; }
.co .map i { position: absolute; background: #f3e6c9; }
.co .pin { position: absolute; left: 180px; top: 110px; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: #f3c853; border: 2px solid #2a1c13; transform: rotate(-45deg); animation: co-pin 1.6s ease-in-out infinite; }
.co .cx-cursor { color: #2a1c13; animation: co-cur var(--T) infinite cubic-bezier(.5,0,.3,1); }
.co .cx-cursor i { animation: co-click var(--T) infinite; }
.co .cx-toast { background: #2a1c13; color: #fbf6ec; border-radius: 99px; animation: co-toast var(--T) infinite; }

@keyframes co-scroll { 0%, 14% { transform: translateY(0); } 24%, 56% { transform: translateY(-480px); } 64%, 84% { transform: translateY(-940px); } 93%, 100% { transform: translateY(0); } }
@keyframes co-cur {
  0% { transform: translate(560px, 430px); } 6%, 14% { transform: translate(704px, 33px); } 22% { transform: translate(420px, 300px); }
  30%, 40% { transform: translate(234px, 404px); } 48%, 62% { transform: translate(520px, 250px); } 72% { transform: translate(300px, 300px); }
  84% { transform: translate(620px, 260px); } 95%, 100% { transform: translate(560px, 430px); } }
@keyframes co-click { 0%, 9.5% { opacity: 0; transform: scale(.3); } 10% { opacity: .9; transform: scale(.5); } 13%, 32.5% { opacity: 0; transform: scale(1.6); } 33% { opacity: .9; transform: scale(.5); } 36%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes co-press { 0%, 9.6% { transform: scale(1); } 10.2% { transform: scale(.93); } 11%, 100% { transform: scale(1); } }
@keyframes co-plus { 0%, 32.9% { background: #2a1c13; } 33%, 62% { background: #6d8a3e; } 66%, 100% { background: #2a1c13; } }
@keyframes co-out { 0%, 32.9% { opacity: 1; } 33%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes co-in { 0%, 32.9% { opacity: 0; } 33%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes co-toast { 0%, 33.5% { opacity: 0; transform: translateY(16px); } 36%, 52% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes co-steam { 0% { transform: translateY(8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes co-float { from { transform: translateY(-8px) rotate(-12deg); } to { transform: translateY(10px) rotate(18deg); } }
@keyframes co-pin { 50% { translate: 0 -8px; } }

/* =========================== 2. SUDSY PAWS ===========================
   Trend: playful nostalgia, sticker shapes, bouncy micro-interactions. */
.pg { --T: 18s; background: #cfeeff; color: #23204a; font-family: "Bricolage Grotesque", "Inter", sans-serif; }
.pg .cx-nav { background: #cfeeff; font-weight: 600; }
.pg .logo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.pg .logo b { width: 28px; height: 28px; border-radius: 50%; background: #ff6fae; border: 2.5px solid #23204a; }
.pg .navbtn { width: 140px; height: 40px; border-radius: 12px; background: #ffd43b; border: 2.5px solid #23204a; box-shadow: 4px 4px 0 #23204a; display: grid; place-items: center; font-weight: 800; animation: pg-press var(--T) infinite; }
.pg .cx-scroll { animation: pg-scroll var(--T) infinite cubic-bezier(.65,0,.3,1); }
.pg .hero { position: absolute; left: 0; top: 64px; width: 800px; height: 436px; overflow: hidden; }
.pg h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: .96; }
.pg .hero h3 { position: absolute; left: 40px; top: 44px; width: 430px; font-size: 50px; }
.pg .hero h3 span { background: #ff6fae; color: #fff; padding: 0 10px; border-radius: 14px; border: 2.5px solid #23204a; display: inline-block; transform: rotate(-2deg); }
.pg .hero p { position: absolute; left: 42px; top: 212px; width: 360px; font-size: 16px; line-height: 1.45; font-family: "Inter", sans-serif; }
.pg .hero .btns { position: absolute; left: 40px; top: 284px; display: flex; gap: 12px; }
.pg .chunky { padding: 12px 20px; border-radius: 14px; border: 2.5px solid #23204a; box-shadow: 4px 4px 0 #23204a; font-weight: 800; font-size: 14px; background: #fff; }
.pg .chunky.pink { background: #ff6fae; color: #fff; }
.pg .road { position: absolute; left: 0; right: 0; top: 372px; height: 64px; background: #9fd8a8; border-top: 2.5px solid #23204a; }
.pg .road::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 4px; background: repeating-linear-gradient(90deg, #23204a 0 26px, transparent 26px 50px); animation: pg-road 1.2s linear infinite; }
.pg .van { position: absolute; left: 470px; top: 212px; width: 290px; height: 170px; animation: pg-bob .6s ease-in-out infinite alternate; }
.pg .van .body { position: absolute; left: 0; top: 20px; width: 290px; height: 120px; background: #fff; border: 3px solid #23204a; border-radius: 28px 60px 18px 18px; }
.pg .van .stripe { position: absolute; left: 0; top: 76px; width: 290px; height: 22px; background: #ff6fae; border-block: 3px solid #23204a; }
.pg .van .win { position: absolute; left: 196px; top: 34px; width: 70px; height: 40px; background: #cfeeff; border: 3px solid #23204a; border-radius: 10px 36px 8px 8px; }
.pg .van .name { position: absolute; left: 22px; top: 36px; font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.pg .wheel { position: absolute; top: 118px; width: 52px; height: 52px; border-radius: 50%; background: #23204a; border: 9px solid #23204a; box-shadow: inset 0 0 0 7px #ffd43b; animation: pg-spin .7s linear infinite; }
.pg .wheel::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #ffd43b; }
.pg .bubble { position: absolute; border-radius: 50%; border: 2.5px solid #fff; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 12%, rgba(255,255,255,.15) 13%); animation: pg-rise 5s linear infinite; }
.pg .sticker { position: absolute; left: 660px; top: 92px; width: 110px; height: 110px; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 13px; line-height: 1.05; background: #ffd43b; border: 2.5px solid #23204a; clip-path: polygon(50% 0,61% 12%,76% 6%,80% 22%,95% 25%,90% 40%,100% 50%,90% 60%,95% 75%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,5% 75%,10% 60%,0 50%,10% 40%,5% 25%,20% 22%,24% 6%,39% 12%); animation: pg-wobble 3s ease-in-out infinite; }
.pg .pk { position: absolute; left: 0; top: 500px; width: 800px; height: 500px; background: #fff8ec; border-top: 2.5px solid #23204a; }
.pg .pk h3 { position: absolute; left: 40px; top: 80px; font-size: 44px; }
.pg .bk h3 { position: absolute; left: 40px; top: 66px; font-size: 34px; }
.pg .pcard { position: absolute; top: 160px; width: 228px; height: 290px; border: 2.5px solid #23204a; border-radius: 22px; box-shadow: 6px 6px 0 #23204a; background: #fff; padding: 22px; }
.pg .pcard .tag { display: inline-block; padding: 4px 10px; border-radius: 99px; border: 2px solid #23204a; font-weight: 800; font-size: 12px; }
.pg .pcard .nm { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 16px; }
.pg .pcard .pr { font-size: 48px; font-weight: 800; letter-spacing: -.04em; margin-top: 4px; }
.pg .pcard ul { margin: 10px 0 0; padding: 0; list-style: none; font-family: "Inter", sans-serif; font-size: 13px; display: grid; gap: 6px; }
.pg .pcard ul li::before { content: "✦ "; color: #ff6fae; }
.pg .bk { position: absolute; left: 0; top: 1000px; width: 800px; height: 500px; background: #ffe1ef; border-top: 2.5px solid #23204a; }
.pg .chip, .pg .slot { position: absolute; display: grid; place-items: center; border: 2.5px solid #23204a; border-radius: 14px; background: #fff; font-weight: 800; font-size: 15px; }
.pg .chip { top: 110px; width: 96px; height: 44px; }
.pg .slot { top: 200px; width: 160px; height: 52px; font-size: 16px; }
.pg .chip.hit { animation: pg-sel-a var(--T) infinite; }
.pg .slot.hit { animation: pg-sel-b var(--T) infinite; }
.pg .confirm { position: absolute; left: 40px; top: 300px; width: 260px; height: 56px; border-radius: 16px; background: #23204a; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; box-shadow: 5px 5px 0 #ff6fae; animation: pg-press2 var(--T) infinite; }
.pg .summary { position: absolute; left: 480px; top: 290px; width: 280px; padding: 16px 18px; border-radius: 18px; border: 2.5px dashed #23204a; font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.5; background: #fff8ec; }
.pg .summary b { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; display: block; }
.pg .confetti { position: absolute; left: 170px; top: 328px; z-index: 26; width: 0; height: 0; }
.pg .confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: pg-conf var(--T) infinite; }
.pg .cx-cursor { color: #23204a; animation: pg-cur var(--T) infinite cubic-bezier(.5,0,.3,1); }
.pg .cx-cursor i { animation: pg-click var(--T) infinite; }
.pg .cx-toast { background: #fff; border: 2.5px solid #23204a; box-shadow: 4px 4px 0 #23204a; border-radius: 14px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 15px; animation: pg-toast var(--T) infinite; }

@keyframes pg-scroll { 0%, 16% { transform: translateY(0); } 24%, 38% { transform: translateY(-500px); } 46%, 90% { transform: translateY(-1000px); } 97%, 100% { transform: translateY(0); } }
@keyframes pg-cur {
  0% { transform: translate(600px, 420px); } 8%, 14% { transform: translate(700px, 33px); } 20% { transform: translate(420px, 300px); }
  30% { transform: translate(400px, 260px); } 40% { transform: translate(420px, 200px); } 48%, 54% { transform: translate(418px, 132px); }
  58%, 64% { transform: translate(300px, 226px); } 68%, 78% { transform: translate(170px, 328px); } 88% { transform: translate(560px, 380px); } 96%, 100% { transform: translate(600px, 420px); } }
@keyframes pg-click { 0%, 9.5% { opacity: 0; transform: scale(.3); } 10% { opacity: .9; transform: scale(.5); } 13%, 49.5% { opacity: 0; transform: scale(1.7); } 50% { opacity: .9; transform: scale(.5); } 53%, 59.5% { opacity: 0; transform: scale(1.7); } 60% { opacity: .9; transform: scale(.5); } 63%, 69.5% { opacity: 0; transform: scale(1.7); } 70% { opacity: .9; transform: scale(.5); } 73%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes pg-press { 0%, 9.6% { transform: translate(0,0); box-shadow: 4px 4px 0 #23204a; } 10.2% { transform: translate(4px,4px); box-shadow: 0 0 0 #23204a; } 11%, 100% { transform: translate(0,0); box-shadow: 4px 4px 0 #23204a; } }
@keyframes pg-press2 { 0%, 69.6% { transform: translate(0,0); box-shadow: 5px 5px 0 #ff6fae; } 70.2% { transform: translate(5px,5px); box-shadow: 0 0 0 #ff6fae; } 71%, 100% { transform: translate(0,0); box-shadow: 5px 5px 0 #ff6fae; } }
@keyframes pg-sel-a { 0%, 49.9% { background: #fff; transform: none; box-shadow: none; } 50%, 94% { background: #ffd43b; transform: rotate(-3deg) scale(1.06); box-shadow: 3px 3px 0 #23204a; } 96%, 100% { background: #fff; transform: none; box-shadow: none; } }
@keyframes pg-sel-b { 0%, 59.9% { background: #fff; color: #23204a; transform: none; } 60%, 94% { background: #ff6fae; color: #fff; transform: rotate(2deg) scale(1.05); } 96%, 100% { background: #fff; color: #23204a; transform: none; } }
@keyframes pg-toast { 0%, 70.5% { opacity: 0; transform: translateY(16px) rotate(0); } 73%, 88% { opacity: 1; transform: rotate(-1.5deg); } 91%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes pg-conf { 0%, 70% { opacity: 0; transform: translate(0,0) rotate(0); } 71% { opacity: 1; } 80% { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(260deg); } 84%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 40px)) rotate(400deg); } }
@keyframes pg-road { to { background-position: -50px 0; } }
@keyframes pg-bob { to { transform: translateY(-4px); } }
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px) scale(1.1); opacity: 0; } }
@keyframes pg-wobble { 50% { transform: rotate(10deg) scale(1.04); } }

/* =========================== 3. BRIGHTSIDE ===========================
   Trend: interactive before/after, bold condensed type, live pricing. */
.bs { --T: 18s; background: #fff; color: #0b2545; font-family: "Archivo", "Inter", sans-serif; }
.bs .cx-nav { background: #fff; border-bottom: 1px solid #dfe7ee; font-weight: 600; }
.bs .logo { font-size: 21px; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; display: flex; gap: 8px; align-items: center; }
.bs .logo b { width: 24px; height: 24px; border-radius: 50%; background: #ffb703; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #ffb703; }
.bs .navbtn { padding: 11px 18px; border-radius: 8px; background: #13c4e3; color: #0b2545; font-weight: 800; }
.bs .cx-scroll { animation: bs-scroll var(--T) infinite cubic-bezier(.65,0,.3,1); }
.bs .ba { position: absolute; left: 0; top: 64px; width: 800px; height: 436px; overflow: hidden; }
.bs .ba .lay { position: absolute; inset: 0; }
.bs .ba .before { background:
  radial-gradient(ellipse 120px 60px at 18% 70%, rgba(40,48,26,.75), transparent 70%),
  radial-gradient(ellipse 160px 80px at 60% 40%, rgba(55,62,35,.6), transparent 70%),
  radial-gradient(ellipse 90px 50px at 82% 80%, rgba(20,22,15,.6), transparent 70%),
  repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.35) 46px 49px),
  repeating-linear-gradient(90deg, transparent 0 92px, rgba(0,0,0,.35) 92px 95px),
  #77786a; }
.bs .ba .after { background:
  radial-gradient(circle at 70% 30%, rgba(255,255,255,.7) 0 2px, transparent 3px),
  radial-gradient(circle at 30% 60%, rgba(255,255,255,.8) 0 2px, transparent 3px),
  repeating-linear-gradient(0deg, transparent 0 46px, rgba(11,37,69,.14) 46px 49px),
  repeating-linear-gradient(90deg, transparent 0 92px, rgba(11,37,69,.14) 92px 95px),
  linear-gradient(160deg, #f3f5f4, #dfe4e6);
  animation: bs-wipe var(--T) infinite cubic-bezier(.5,0,.3,1); }
.bs .handle { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px rgba(11,37,69,.3); animation: bs-handle var(--T) infinite cubic-bezier(.5,0,.3,1); z-index: 3; }
.bs .handle::after { content: "‹ ›"; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: #0b2545; display: grid; place-items: center; font-weight: 800; font-size: 16px; box-shadow: 0 6px 16px rgba(11,37,69,.3); }
.bs .lbl { position: absolute; top: 18px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 800; z-index: 4; }
.bs .hcard { position: absolute; left: 30px; bottom: 26px; width: 390px; padding: 20px 22px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(11,37,69,.3); z-index: 5; }
.bs h3 { margin: 0; font-weight: 800; font-stretch: 85%; letter-spacing: -.02em; line-height: .98; text-transform: none; }
.bs .hcard h3 { font-size: 36px; }
.bs .hcard p { font-family: "Inter", sans-serif; font-size: 13px; color: #4a5d75; margin-top: 8px; }
.bs .svc { position: absolute; left: 0; top: 500px; width: 800px; height: 500px; background: #eef3f7; }
.bs .svc h3, .bs .q h3 { position: absolute; left: 40px; top: 44px; font-size: 52px; }
.bs .tile { position: absolute; top: 150px; width: 170px; height: 220px; background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 1px 0 #dfe7ee; }
.bs .tile .ic { width: 52px; height: 52px; border-radius: 12px; background: #0b2545; position: relative; overflow: hidden; }
.bs .tile .ic::after { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 12px; background: #13c4e3; transform: rotate(-30deg); }
.bs .tile .nm { margin-top: 18px; font-size: 21px; font-weight: 800; font-stretch: 90%; }
.bs .tile .pr { margin-top: 6px; font-family: "Inter", sans-serif; font-size: 13px; color: #4a5d75; }
.bs .q { position: absolute; left: 0; top: 1000px; width: 800px; height: 500px; background: #0b2545; }
.bs .q h3 { color: #fff; font-size: 26px; top: 68px; }
.bs .qcard { position: absolute; left: 40px; top: 100px; width: 720px; height: 360px; background: #fff; border-radius: 18px; }
.bs .qchip { position: absolute; top: 28px; padding: 9px 16px; border-radius: 99px; border: 1.5px solid #c9d6e2; font-weight: 700; font-size: 13px; }
.bs .qchip.on { background: #0b2545; color: #fff; border-color: #0b2545; }
.bs .track { position: absolute; left: 40px; top: 134px; width: 440px; height: 8px; border-radius: 8px; background: #e3ebf2; }
.bs .fill { position: absolute; left: 0; top: 0; height: 8px; border-radius: 8px; background: #13c4e3; animation: bs-fill var(--T) infinite cubic-bezier(.5,0,.3,1); }
.bs .knob { position: absolute; top: -11px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; border: 3px solid #13c4e3; box-shadow: 0 4px 10px rgba(11,37,69,.25); animation: bs-knob var(--T) infinite cubic-bezier(.5,0,.3,1); }
.bs .sq { position: absolute; left: 40px; top: 90px; font-family: "Inter", sans-serif; font-size: 13px; color: #4a5d75; }
.bs .sq b { color: #0b2545; font-size: 15px; }
.bs .price { position: absolute; left: 540px; top: 70px; text-align: left; }
.bs .price small { display: block; font-family: "Inter", sans-serif; font-size: 12px; color: #4a5d75; }
.bs .price .v { font-size: 72px; font-weight: 800; font-stretch: 85%; letter-spacing: -.03em; line-height: 1; }
.bs .v1 { animation: bs-v1 var(--T) infinite; } .bs .v2 { opacity: 0; animation: bs-v2 var(--T) infinite; }
.bs .v3 { opacity: 0; animation: bs-v3 var(--T) infinite; } .bs .v4 { opacity: 0; animation: bs-v4 var(--T) infinite; }
.bs .s1 { animation: bs-s1 var(--T) infinite; } .bs .s2 { opacity: 0; animation: bs-s2 var(--T) infinite; }
.bs .lock { position: absolute; left: 40px; top: 230px; width: 260px; height: 54px; border-radius: 10px; background: #ffb703; display: grid; place-items: center; font-weight: 800; font-size: 15px; animation: bs-press var(--T) infinite; }
.bs .fine { position: absolute; left: 330px; top: 246px; font-family: "Inter", sans-serif; font-size: 12px; color: #4a5d75; }
.bs .cx-cursor { color: #0b2545; animation: bs-cur var(--T) infinite cubic-bezier(.5,0,.3,1); }
.bs .cx-cursor i { animation: bs-click var(--T) infinite; }
.bs .cx-toast { background: #0b2545; color: #fff; border-radius: 10px; border-left: 5px solid #13c4e3; animation: bs-toast var(--T) infinite; }

@keyframes bs-scroll { 0%, 32% { transform: translateY(0); } 40%, 48% { transform: translateY(-500px); } 54%, 92% { transform: translateY(-1000px); } 98%, 100% { transform: translateY(0); } }
@keyframes bs-wipe { 0%, 5% { clip-path: inset(0 0 0 400px); } 14% { clip-path: inset(0 0 0 640px); } 22% { clip-path: inset(0 0 0 160px); } 30%, 100% { clip-path: inset(0 0 0 400px); } }
@keyframes bs-handle { 0%, 5% { left: 400px; } 14% { left: 640px; } 22% { left: 160px; } 30%, 100% { left: 400px; } }
@keyframes bs-cur {
  0% { transform: translate(560px, 420px); } 5% { transform: translate(400px, 282px); } 14% { transform: translate(640px, 282px); } 22% { transform: translate(160px, 282px); }
  30% { transform: translate(400px, 282px); } 34% { transform: translate(500px, 330px); } 44% { transform: translate(300px, 300px); }
  56% { transform: translate(140px, 238px); } 66% { transform: translate(460px, 238px); } 72%, 84% { transform: translate(210px, 357px); } 94%, 100% { transform: translate(560px, 420px); } }
@keyframes bs-click { 0%, 4.5% { opacity: 0; transform: scale(.3); } 5% { opacity: .9; transform: scale(.5); } 7%, 55.5% { opacity: 0; transform: scale(1.6); } 56% { opacity: .9; transform: scale(.5); } 58%, 73.5% { opacity: 0; transform: scale(1.6); } 74% { opacity: .9; transform: scale(.5); } 77%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bs-knob { 0%, 56% { left: 60px; } 66%, 94% { left: 380px; } 98%, 100% { left: 60px; } }
@keyframes bs-fill { 0%, 56% { width: 60px; } 66%, 94% { width: 380px; } 98%, 100% { width: 60px; } }
@keyframes bs-v1 { 0%, 58.9% { opacity: 1; } 59%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bs-v2 { 0%, 58.9% { opacity: 0; } 59%, 61.9% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes bs-v3 { 0%, 61.9% { opacity: 0; } 62%, 64.9% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bs-v4 { 0%, 64.9% { opacity: 0; } 65%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bs-s1 { 0%, 61.9% { opacity: 1; } 62%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bs-s2 { 0%, 61.9% { opacity: 0; } 62%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bs-press { 0%, 73.6% { transform: scale(1); } 74.2% { transform: scale(.95); } 75%, 100% { transform: scale(1); } }
@keyframes bs-toast { 0%, 74.5% { opacity: 0; transform: translateY(16px); } 77%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(16px); } }

/* =========================== 4. VOLT FITNESS LAB ===========================
   Trend: futuristic dark mode, glowing borders, glass panels, holographic color. */
.vf { --T: 16s; background: #07070d; color: #eef0ff; }
.vf .cx-nav { background: rgba(7,7,13,.7); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(87,240,255,.18); color: #b9bdd8; }
.vf .logo { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .06em; color: #eef0ff; display: flex; gap: 6px; align-items: center; }
.vf .logo b { color: #57f0ff; text-shadow: 0 0 12px #57f0ff; font-weight: 700; }
.vf .navbtn { padding: 10px 16px; border-radius: 99px; border: 1px solid #57f0ff; color: #eef0ff; box-shadow: 0 0 18px rgba(87,240,255,.35), inset 0 0 12px rgba(87,240,255,.15); font-weight: 600; }
.vf .cx-scroll { animation: vf-scroll var(--T) infinite cubic-bezier(.65,0,.3,1); }
.vf .hero { position: absolute; left: 0; top: 64px; width: 800px; height: 436px; overflow: hidden; }
.vf .floor { position: absolute; left: -200px; right: -200px; bottom: -120px; height: 260px; background-image: linear-gradient(rgba(155,107,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(155,107,255,.35) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(300px) rotateX(60deg); transform-origin: top; animation: vf-floor 2.4s linear infinite; mask-image: linear-gradient(transparent, #000 40%); -webkit-mask-image: linear-gradient(transparent, #000 40%); }
.vf h3 { margin: 0; font-family: "Unbounded", sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.vf .hero h3 { position: absolute; left: 40px; top: 64px; width: 430px; font-size: 46px; }
.vf .hero h3 span { background: linear-gradient(90deg, #57f0ff, #9b6bff 55%, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vf .hero p { position: absolute; left: 42px; top: 200px; width: 360px; font-size: 14px; line-height: 1.5; color: #b9bdd8; }
.vf .hero .btns { position: absolute; left: 40px; top: 272px; display: flex; gap: 10px; }
.vf .glow { padding: 12px 20px; border-radius: 99px; background: linear-gradient(90deg, #57f0ff, #9b6bff); color: #07070d; font-weight: 700; font-size: 13px; box-shadow: 0 0 24px rgba(87,240,255,.45); }
.vf .ghost { padding: 12px 20px; border-radius: 99px; border: 1px solid rgba(238,240,255,.3); font-weight: 600; font-size: 13px; }
.vf .ring { position: absolute; left: 480px; top: 40px; width: 270px; height: 270px; border-radius: 50%; background: conic-gradient(from 0deg, #57f0ff, #9b6bff, #ff4fd8, #57f0ff); animation: vf-spin 6s linear infinite; filter: drop-shadow(0 0 30px rgba(155,107,255,.6)); }
.vf .ring::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1a1a2e, #07070d 70%); }
.vf .glass { position: absolute; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); font-size: 12px; color: #b9bdd8; animation: vf-hover 4s ease-in-out infinite alternate; }
.vf .glass b { display: block; font-family: "Unbounded", sans-serif; font-size: 16px; color: #eef0ff; font-weight: 600; }
.vf .sched { position: absolute; left: 0; top: 500px; width: 800px; height: 500px; background: radial-gradient(600px 300px at 80% 0%, rgba(155,107,255,.18), transparent 70%), #0b0b14; }
.vf .sched h3 { display: none; }
.vf .tab { position: absolute; top: 80px; width: 90px; height: 40px; border-radius: 99px; border: 1px solid rgba(238,240,255,.18); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #b9bdd8; }
.vf .tab.mon { animation: vf-mon var(--T) infinite; }
.vf .tab.tue { animation: vf-tue var(--T) infinite; }
.vf .rows { position: absolute; left: 40px; top: 150px; width: 720px; }
.vf .rows.a { animation: vf-seta var(--T) infinite; }
.vf .rows.b { opacity: 0; animation: vf-setb var(--T) infinite; }
.vf .row { position: absolute; left: 0; width: 720px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 24px; padding: 0 16px; font-size: 13px; color: #b9bdd8; }
.vf .row .t { width: 70px; font-weight: 700; color: #57f0ff; }
.vf .row .c { width: 220px; font-family: "Unbounded", sans-serif; font-size: 14px; color: #eef0ff; }
.vf .res { position: absolute; left: 600px; top: 10px; width: 104px; height: 36px; border-radius: 99px; border: 1px solid rgba(87,240,255,.5); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #eef0ff; }
.vf .res.hit { animation: vf-res var(--T) infinite; }
.vf .res.hit .a { animation: vf-ra var(--T) infinite; }
.vf .res.hit .b { opacity: 0; animation: vf-rb var(--T) infinite; }
.vf .mem { position: absolute; left: 0; top: 1000px; width: 800px; height: 420px; background: #07070d; }
.vf .mem h3 { position: absolute; left: 40px; top: 30px; font-size: 30px; }
.vf .mcard { position: absolute; top: 100px; width: 228px; height: 260px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.14); padding: 22px; }
.vf .mcard.hot { border-color: #57f0ff; box-shadow: 0 0 30px rgba(87,240,255,.3); }
.vf .mcard .nm { font-family: "Unbounded", sans-serif; font-size: 16px; }
.vf .mcard .pr { font-family: "Unbounded", sans-serif; font-size: 40px; margin-top: 14px; }
.vf .mcard .pr small { font-size: 13px; color: #b9bdd8; font-family: "Inter", sans-serif; }
.vf .mcard ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 12px; color: #b9bdd8; }
.vf .cx-cursor { color: #57f0ff; animation: vf-cur var(--T) infinite cubic-bezier(.5,0,.3,1); }
.vf .cx-cursor svg path { fill: #eef0ff; stroke: #07070d; }
.vf .cx-cursor i { animation: vf-click var(--T) infinite; box-shadow: 0 0 12px #57f0ff; }
.vf .cx-toast { background: rgba(20,20,36,.9); border: 1px solid #57f0ff; color: #eef0ff; border-radius: 99px; box-shadow: 0 0 24px rgba(87,240,255,.4); animation: vf-toast var(--T) infinite; }

@keyframes vf-scroll { 0%, 18% { transform: translateY(0); } 28%, 62% { transform: translateY(-500px); } 70%, 84% { transform: translateY(-920px); } 94%, 100% { transform: translateY(0); } }
@keyframes vf-cur {
  0% { transform: translate(520px, 420px); } 10% { transform: translate(690px, 33px); } 16% { transform: translate(500px, 300px); }
  32%, 38% { transform: translate(185px, 100px); } 42% { transform: translate(400px, 200px); } 48%, 58% { transform: translate(692px, 243px); }
  66% { transform: translate(600px, 300px); } 80% { transform: translate(300px, 250px); } 92%, 100% { transform: translate(520px, 420px); } }
@keyframes vf-click { 0%, 35.5% { opacity: 0; transform: scale(.3); } 36% { opacity: 1; transform: scale(.5); } 39%, 49.5% { opacity: 0; transform: scale(1.7); } 50% { opacity: 1; transform: scale(.5); } 53%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes vf-mon { 0%, 35.9% { background: rgba(87,240,255,.14); border-color: #57f0ff; color: #eef0ff; } 36%, 92% { background: transparent; border-color: rgba(238,240,255,.18); color: #b9bdd8; } 94%, 100% { background: rgba(87,240,255,.14); border-color: #57f0ff; color: #eef0ff; } }
@keyframes vf-tue { 0%, 35.9% { background: transparent; border-color: rgba(238,240,255,.18); color: #b9bdd8; box-shadow: none; } 36%, 92% { background: rgba(87,240,255,.14); border-color: #57f0ff; color: #eef0ff; box-shadow: 0 0 16px rgba(87,240,255,.4); } 94%, 100% { background: transparent; border-color: rgba(238,240,255,.18); color: #b9bdd8; box-shadow: none; } }
@keyframes vf-seta { 0%, 35.9% { opacity: 1; transform: none; } 36%, 92% { opacity: 0; transform: translateX(-20px); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes vf-setb { 0%, 35.9% { opacity: 0; transform: translateX(20px); } 37.5%, 92% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(20px); } }
@keyframes vf-res { 0%, 49.9% { background: transparent; box-shadow: none; } 50%, 90% { background: linear-gradient(90deg, #57f0ff, #9b6bff); box-shadow: 0 0 22px rgba(87,240,255,.6); color: #07070d; } 92%, 100% { background: transparent; box-shadow: none; } }
@keyframes vf-ra { 0%, 49.9% { opacity: 1; } 50%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes vf-rb { 0%, 49.9% { opacity: 0; } 50%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes vf-toast { 0%, 50.5% { opacity: 0; transform: translateY(16px); } 53%, 64% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes vf-spin { to { transform: rotate(360deg); } }
@keyframes vf-floor { to { background-position: 0 48px; } }
@keyframes vf-hover { to { transform: translateY(-12px); } }

/* ---------- real client sites: a screenshot strip that scrolls ---------- */
.shot { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.shot img { position: absolute; left: 0; top: 0; width: 100%; height: auto; animation: shot-scroll 18s cubic-bezier(.65,0,.3,1) infinite; }
@keyframes shot-scroll { 0%, 14% { transform: translateY(0); } 40%, 52% { transform: translateY(calc(-50% + 31.25cqw)); } 78%, 86% { transform: translateY(calc(-100% + 62.5cqw)); } 100% { transform: translateY(0); } }
.shot { container-type: inline-size; }

@media (prefers-reduced-motion: reduce) {
  .cx-view *, .shot img { animation: none !important; }
  .cx-cursor, .cx-toast { display: none; }
}