
/* === v17 Mobile Redesign (inspired; original code) === */
:root{--bg:#0b0e0f;--ink:#f5f7fa;--muted:#b7c0cd;--line:#1f2937;--card:#101318;--accent:#ff477e;--pill:#131822}
html,body{max-width:100%;overflow-x:hidden;background:var(--bg);color:var(--ink)}
img,video,canvas{max-width:100%;height:auto}
#site-header{position:sticky;top:0;z-index:30;background:rgba(11,14,15,.95);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
#nav-toggle,#nav-close{appearance:none;border:1px solid rgba(255,255,255,.12);background:#121721;color:var(--ink);border-radius:12px;padding:.6rem .75rem;font-weight:700}
#primary-nav a{display:inline-flex;align-items:center;gap:8px;padding:.55rem .8rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--pill)}
#nav-overlay{display:none}
@media (max-width:900px){
  #primary-nav{position:fixed;inset:0 auto 0 0;width:min(86vw,360px);max-width:90vw;background:var(--bg);border-right:1px solid rgba(255,255,255,.08);padding:16px;display:none;flex-direction:column;align-items:stretch;overflow:auto;-webkit-overflow-scrolling:touch}
  #primary-nav.open{display:flex}
  #nav-close{display:block;margin-left:auto;margin-bottom:8px}
  #nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
  #nav-overlay.show{opacity:1;pointer-events:auto}
  #primary-nav a{width:100%}
}
#hero .top-slider{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px 4px 4px}
#hero .top-slider::-webkit-scrollbar{height:0}
#hero .top-slider a{flex:0 0 auto;border-color:rgba(255,255,255,.12)}
@media (max-width:900px){
  #hero .top-slider a{font-size:.88rem;padding:.38rem .55rem;white-space:nowrap}
}
@media (max-width:480px){
  #hero .top-slider a{font-size:.8rem;padding:.3rem .48rem}
}
#hero{margin:10px 0 14px;border-radius:18px;background:var(--card);border:1px solid rgba(255,255,255,.06)}
#hero .hero-wrap{display:grid;gap:12px;padding:16px}
#hero .timer{font-size:clamp(28px,10vw,56px);font-weight:900;letter-spacing:.02em;line-height:1.05}
#hero .subgrid{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
#hero .kpi{background:#0e131a;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px}
#hero .small{color:var(--muted)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:900px){.grid.cards{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#111;padding:.8rem 1rem;border:none;border-radius:14px;font-weight:800;min-height:46px}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.14)}
input,select,textarea{width:100%;min-height:44px;background:#0f141b;border:1px solid #233044;border-radius:12px;color:var(--ink);padding:.75rem}
@media (max-width:900px){section[data-role="big-countdown"],.big-countdown,.countdown-section-duplicate{display:none!important}}
.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}
