.topbar{position:fixed;top:0;left:0;right:0;height:44px;background:var(--primary);color:#fff;z-index:1000;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;column-gap:20px;height:100%}
.topbar .container .social{grid-column:1;justify-self:start}
.topbar .container .ticker{grid-column:2}
.topbar .container .contact{grid-column:3;justify-self:end}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none}
.social a:hover{background:rgba(255,255,255,.12)}
.ticker{position:relative;flex:0 0 auto;overflow:hidden;display:flex;justify-content:center;align-items:center;max-width:420px;height:100%;padding:0}
.ticker-track{display:inline-flex;gap:24px;will-change:transform;animation:marquee 20s linear infinite;position:relative;z-index:1}
.ticker-list{list-style:none;margin:0;padding:0;display:inline-flex;gap:24px}
.ticker li{white-space:nowrap;color:#cbd5e1;font-size:13px}
.contact{display:flex;gap:14px;color:#cbd5e1;font-size:13px;justify-self:end}
.contact .ico{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.contact .ico:hover{opacity:.9}
.contact .ico svg{width:18px;height:18px}
.contact .contact-text{color:#fff}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Tablet: simplify content */
@media (max-width:992px){
  .topbar{height:42px}
  .topbar .container{grid-template-columns:1fr auto 1fr;justify-items:center;column-gap:14px}
  .topbar .container .social{grid-column:1}
  .topbar .container .ticker{grid-column:2}
  .topbar .container .contact{grid-column:3}
  .contact{display:flex;gap:10px}
  .contact .contact-text{display:none}
  .social{display:flex}
  .ticker{max-width:360px}
  .ticker-track{gap:18px}
}

@media (max-width:640px){
  .topbar{height:40px}
  .topbar .container{grid-template-columns:1fr auto 1fr;justify-items:center;column-gap:8px}
  .topbar .container .social{grid-column:1}
  .topbar .container .ticker{grid-column:2}
  .topbar .container .contact{grid-column:3}
  .contact{display:flex;gap:8px}
  .contact .contact-text{display:none}
  .contact .ico svg{width:16px;height:16px}
  .social{display:none}
  .ticker{max-width:68%}
  .ticker-track{gap:16px}
  .ticker li{font-size:12px}
  .ticker{height:100%}
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
}