/* UcuzTap v4 motion banners — shared shell (1240×160).
   Inlined inside each .html so iframe is self-contained.
   Reference copy kept here for re-use; loaders read inline copy. */
:root { --y:#EAB308; --y-d:#CA8A04; --y-l:#FDE047; --y-glow:rgba(234,179,8,0.45);
        --ink:#18181B; --ink-2:#27272A; --ink-3:#3F3F46; --white:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; background:transparent; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
       letter-spacing:-0.01em; }
.banner-host { width:1240px; height:160px; flex-shrink:0; transform-origin:top left;
               transform: scale(calc(100vw / 1240)); }
.mb { width:1240px; height:160px; position:relative; overflow:hidden; padding:0 36px;
      display:flex; align-items:center; gap:28px; isolation:isolate; }
.mb.dark { color:#fff; }
.cta { display:inline-flex; align-items:center; gap:8px; background:var(--y); color:var(--ink);
       font-weight:800; border-radius:12px; padding:14px 22px; font-size:15px; white-space:nowrap;
       text-decoration:none; box-shadow:0 12px 28px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
       animation: glowpulse 2.4s infinite; }
.cta-dark { background:var(--ink); color:#fff; }
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800;
           letter-spacing:.14em; color:var(--y); }
.pulse { position:relative; width:6px; height:6px; display:inline-block; }
.pulse::before,.pulse::after { content:''; position:absolute; inset:0; background:var(--y); border-radius:50%; }
.pulse::before { animation: pulseDot 2s ease-out infinite; }
.h2 { font-size:26px; font-weight:800; line-height:1.05; letter-spacing:-0.025em; color:#fff; }
.h2.ink { color:var(--ink); }
.sub { font-size:11px; color:rgba(255,255,255,0.5); }
.sub.ink { color:rgba(0,0,0,0.65); font-weight:600; }
.shimmer { position:absolute; top:0; left:0; width:30%; height:100%;
           background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
           animation: scanline 4s ease-in-out infinite; animation-delay:1.2s; pointer-events:none; z-index:5; }
.wmark { position:absolute; right:-20%; top:-20%; width:140%; height:140%; opacity:.04; pointer-events:none; z-index:0; }
@keyframes scanline { 0% { transform:translateX(-100%) skewX(-20deg); } 100% { transform:translateX(400%) skewX(-20deg); } }
@keyframes pulseDot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(2.4); opacity:0; } }
@keyframes glowpulse { 0%,100% { box-shadow:0 0 0 0 var(--y-glow); } 50% { box-shadow:0 0 0 12px rgba(234,179,8,0); } }
@keyframes ringPulse { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes rankShift { 0%,35% { transform:translateY(0); } 50%,85% { transform:translateY(-100%); } 100% { transform:translateY(0); } }
@keyframes countTick { 0%,78% { transform:translateY(0); opacity:1; } 85% { transform:translateY(-100%); opacity:0; } 86% { transform:translateY(100%); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
@keyframes chevron { 0% { transform:translateX(-8px); opacity:0; } 40%,60% { opacity:1; } 100% { transform:translateX(8px); opacity:0; } }
@keyframes rise { 0% { transform:translateY(8px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes gradientShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .shimmer { animation:none; }
  .mb *, .mb *::before, .mb *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}