/* =========================================================================
   Wavez Creatives — Landing styles
   Ported verbatim from the approved design (resources/ui-reference/).
   Do NOT redesign — these rules preserve the approved spacing, animations
   and mobile responsiveness. Component styling stays inline in the markup,
   exactly as in the approved file.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0B0F12; }
::selection { background: #0D7A5F; color: #fff; }

@keyframes wz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wz-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

#creator-track::-webkit-scrollbar,
#freelancer-track::-webkit-scrollbar { height: 0; width: 0; display: none; }
#creator-track, #freelancer-track { scrollbar-width: none; }

@media (max-width: 1024px) {
  .wz-cols { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .wz-nav-links, .wz-nav-actions { display: none !important; }
  .wz-burger { display: inline-flex !important; }
  .wz-split { flex-direction: column !important; align-items: flex-start !important; }
  /* The row-layout children carry pixel flex-basis values (e.g. flex:1 1 460px)
     meant to size their WIDTH side-by-side. Once .wz-split switches to a
     column, that same flex-basis is read along the (now vertical) main axis
     and gets treated as a forced MINIMUM HEIGHT — every .wz-split child was
     reserving 420-500px of blank vertical space on mobile regardless of its
     actual content height. Resetting flex-basis here removes that reserved
     space without touching the desktop (row) layout at all. */
  .wz-split > * { flex-basis: auto !important; }
  /* align-items:flex-start above also kills the desktop default
     (align-items:stretch) that let width-less children — like the UGC video
     mockup box, sized only by an explicit height — fill the row's cross
     axis. Without stretch, that box collapses to its ~1px border width: a
     thin vertical sliver with all its content (dark gradient, play button)
     squeezed invisible, reading as a big blank gap with a stray line. */
  .wz-split > * { width: 100% !important; }
  .wz-hero-art { max-width: 100% !important; width: 100% !important; justify-content: flex-start !important; }
  .wz-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .wz-announce-links { display: none !important; }
}
@media (max-width: 640px) {
  .wz-cols { grid-template-columns: 1fr !important; }
  .wz-stats { flex-wrap: wrap !important; gap: 18px 28px !important; }
  .wz-stats > div { flex: 1 1 38% !important; }
  .wz-hero-art { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 14px !important; scrollbar-width: none; }
  .wz-hero-art::-webkit-scrollbar { display: none; }
  .wz-hero-art > div { margin-top: 0 !important; }
  .wz-root { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Mobile bottom tab bar (landing page) ---- */
.wz-tabbar { display: none; }
@media (max-width: 640px) {
  .wz-tabbar {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
    background: rgba(11,15,18,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #232A31;
    padding: 0 6px calc(6px + env(safe-area-inset-bottom, 0px));
    height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .wz-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 0; padding: 8px 6px; color: #5f6b75; text-decoration: none; font-size: 9.5px; font-weight: 500; }
  .wz-tab.active { color: #22C55E; font-weight: 700; }
  .wz-tab-mid { position: relative; }
  .wz-tab-mid-icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: #F5C242; color: #0B0F12;
    margin-top: -22px; box-shadow: 0 6px 16px rgba(245,194,66,0.35), 0 0 0 4px #0B0F12;
  }
  .wz-tab-mid { color: #cdd3da; }
  .wz-tab-mid-badge {
    position: absolute; top: -20px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #ef4444; color: #fff; font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    box-shadow: 0 0 0 2px #0B0F12;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 400px) {
  .wz-chips { grid-template-columns: 1fr !important; }
}