@charset "UTF-8";
/* CSS Document */
:root{
    --yellow:#f4d03f;            /* Brooklyn Bourne yellow */
    --ink:#0a0a0a;               /* Almost black */
    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.25);
    --h: 220px;                  /* Banner min-height; tweak if needed */
    --gap: clamp(20px,4vw,36px);
	--ticker-speed: 10s;
  }
  *{ box-sizing:border-box }
  html,body{ margin:0; background:#0a0a0a; color:#fff; font-family:system-ui,-apple-system,"Helvetica Neue",Arial,Roboto,"Noto Sans" }

  .bb-banner{
    min-height:var(--h);
    background:var(--primary-color);
    color:var(--ink);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin: clamp(10px,2vw,20px);
    position:relative;
    overflow:hidden;
  }

  /* Subtle texture + gloss (safe + lightweight) */
  .bb-banner::before{
    content:""; position:absolute; inset:-30%;
    background:repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 6px, rgba(255,255,255,.04) 6px 14px);
    transform:translateX(-10%); animation: drift 18s linear infinite; pointer-events:none;
  }
  .bb-banner::after{
    content:""; position:absolute; inset:-25% -40%;
    background:linear-gradient(115deg,transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
    transform:translateX(-60%); animation:sweep 6s ease-in-out infinite; pointer-events:none; mix-blend-mode:screen;
  }
  @keyframes drift{ to{ transform:translateX(10%) } }
  @keyframes sweep{ 0%{transform:translateX(-60%)} 50%{transform:translateX(0%)} 100%{transform:translateX(60%)} }
  @media (prefers-reduced-motion: reduce){
    .bb-banner::before, .bb-banner::after{ animation:none !important }
  }

  .bb-inner{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:var(--gap);
    padding: clamp(16px,3vw,26px);
  }

  /* Left: logo + copy */
  .bb-left{ display:flex; align-items:center; gap: clamp(14px,2.6vw,22px); min-width:0 }
  .bb-right{width: 350px;}
  .bb-logo{
    width:auto; height: clamp(40px,6.5vw,60px);
    border:2px solid var(--ink); border-radius:12px; background:#fff; object-fit:contain;
  }
  .bb-text{ min-width:0 }  /* allow ticker to shrink on small screens */

  .bb-pill{
    display:inline-flex; padding:6px 12px; border-radius:999px;
    background: rgba(0,0,0,.08);
    text-transform:uppercase; letter-spacing:.4px;
    font:700 .8rem/1 system-ui; margin:0 0 10px 0;
  }

  .bb-title{
    margin:0 0 8px 0;
    font-weight:900;
    font-size: clamp(1.15rem,3.2vw,1.85rem);
    line-height:1.12;
	color: #333333;
  }

  .bb-sub{
    margin:.25rem 0 0;
    font-size: clamp(.95rem,2vw,1.05rem);
    max-width: 100ch;
  }

  /* Right: QR block */
  .bb-qr{
    display:flex; align-items:center; gap:12px;
    background: rgba(255,255,255,.72);
    border:2px solid var(--ink);
    padding:10px 12px; border-radius:14px; backdrop-filter: blur(3px);
  }
  .qr-img{
    width:55%; height:100%; border-radius:10px; border:2px solid var(--ink);
    background:#fff; padding:10px; object-fit:contain;
  }
  .qr-text{ color:#000; font-weight:900; line-height:1.1 }
  .qr-text small{ display:block; opacity:.85; font-weight:700; margin-top:2px; font-size:.78rem }

  /* ====== BULLETPROOF HORIZONTAL TICKER (no JS) ====== */
  .ticker{
    margin-top:.5rem;
    border:2px solid var(--ink);
    border-radius:10px;
    background: rgba(0,0,0,.08);
    overflow:hidden;
  }
  .ticker-track{
    display:flex; gap: clamp(28px,4vw,48px);
    padding: .55rem clamp(12px,2vw,16px);
    white-space:nowrap;
    will-change: transform;
    animation: ticker-marquee var(--ticker-speed) linear infinite;
  }
  .ticker-item{ font-weight:900; color:#000; }
  .dot{ width:6px; height:6px; border-radius:50%; background:#000; display:inline-block; transform:translateY(-2px); margin:0 .5rem }

  @keyframes ticker-marquee{
    from{ transform: translateX(0) }
    to  { transform: translateX(-50%) }   /* because we duplicate content */
  }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track{ animation-play-state: paused }
  @media (prefers-reduced-motion: reduce){
    .ticker-track{ animation:none }
  }

  /* Mobile stacking */
  @media (max-width: 720px){
    .bb-inner{ grid-template-columns:1fr; align-items:start }
    .bb-qr{ justify-content:center }
  }