/* === v13 Hero + Slider === */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#hero{margin:8px 0 16px;position:relative;border-radius:18px}
#hero .top-slider{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:8px 4px 4px}
#hero .top-slider a{flex:0 0 auto;padding:.55rem .85rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;text-decoration:none;color:#f5f7fa;background:transparent}
#hero .hero-wrap{display:grid;gap:12px;padding:16px}
#hero .timer{font-size:clamp(32px,12vw,64px);font-weight:900;letter-spacing:.02em;line-height:1.1}
#hero .subgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#hero .kpi{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px}
@media (max-width:900px){
  #hero{margin-top:8px}
}


/* v14: smaller mobile pills & timer sizing */
@media (max-width:900px){
  #hero .top-slider{padding:6px 2px}
  #hero .top-slider a{font-size:.95rem;padding:.45rem .65rem;line-height:1}
  #hero .hero-wrap{padding:12px}
  #hero .timer{font-size:clamp(28px,10vw,56px)}
}
@media (max-width:480px){
  #hero .top-slider a{font-size:.88rem;padding:.35rem .55rem}
  #hero .timer{font-size:clamp(26px,10vw,50px)}
}


/* v15: tighter mobile pills and nowrap */
@media (max-width:900px){
  #hero .top-slider a{font-size:.9rem;padding:.38rem .55rem;white-space:nowrap}
}
@media (max-width:480px){
  #hero .top-slider a{font-size:.82rem;padding:.30rem .48rem;white-space:nowrap}
}