/* Dark only, by product decision. Look and tokens follow oferta.lotka24.pl (Pages/marketing);
   the content follows the app's "Trochę o Nas w Liczbach" page. */
:root {
  --bg: #0A0F16;
  --bg-hi: #14233A;
  --band: #0E1621;
  --text: #F0F5FA;
  --dim: rgba(240, 245, 250, 0.72);
  --faint: #93a4b6;
  --sheet: #111923;
  --sheet-2: #172230;
  --line: rgba(118, 205, 255, 0.18);
  --blue: #76CDFF;
  --red: #E24B4A;
  --red-deep: #A32D2D;
  --gold: #FAC775;
  --up: #5fd08a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(120% 60vh at 50% 0, var(--bg-hi) 0, var(--bg) 100%) no-repeat, var(--bg);
  color: var(--text);
  font: 400 16px/1.45 "Barlow", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
h1, h2 { font-family: "Bebas Neue", "Barlow", sans-serif; font-weight: 400; letter-spacing: .01em; margin: 0; }
h3, p, ol, dl, dd { margin: 0; }
ol { list-style: none; padding: 0; }
a { color: inherit; }
main { overflow-x: hidden; }
.num { font-family: "Bebas Neue", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---- Top bar ---- */
.top { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.brand { display: flex; align-items: center; text-decoration: none; font: 400 22px "Bebas Neue", sans-serif; letter-spacing: .03em; min-height: 44px; }
.brand img { width: 34px; height: 34px; object-fit: contain; margin-right: 8px; }
.brand b, .foot b { font-weight: 400; color: var(--blue); }
.brand em { font: 500 13px "Barlow", sans-serif; font-style: normal; letter-spacing: 0; color: var(--dim); margin-left: 4px; }
.top-cta { font-weight: 700; font-size: 14px; text-decoration: none; color: #fff; background: var(--red); border-radius: 8px; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; flex: none; }
.top-cta:active, .btn:active, .stick:active { transform: scale(.98); background: var(--red-deep); }

/* ---- Hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; max-width: 1120px; margin: 0 auto; padding: 4px 16px 28px; }
h1 { font-size: clamp(40px, 11vw, 76px); line-height: .96; }
h1 span { color: var(--blue); }
.lead { font-size: clamp(15px, 2vw, 20px); color: var(--dim); margin-top: 6px; max-width: 34em; }
.refresh { display: flex; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--dim); }
.refresh i { flex: none; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(118, 205, 255, .22); }

.stage { position: relative; z-index: 0; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.glow { position: absolute; z-index: -2; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(77, 168, 224, .3), transparent); }
.road { position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; max-width: 640px; transform: translate(-50%, -50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 72%, transparent); }
.road path { fill: none; }
.road-bed { stroke: rgba(118, 205, 255, .12); stroke-width: 54; }
.road-mid { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 22 20; opacity: .55; animation: road 2.4s linear infinite; }
@keyframes road { to { stroke-dashoffset: -84; } }

.count-card { background: rgba(17, 25, 35, .9); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.since { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.big { display: block; font-size: clamp(92px, 26vw, 150px); line-height: .88; margin-top: 4px; }
.caption { color: var(--dim); font-size: 15px; margin-top: 6px; }
.caption b { color: var(--gold); font-weight: 700; }
.spark { display: block; width: 100%; height: 86px; margin-top: 10px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; margin-top: 10px; }
.stat { background: rgba(17, 25, 35, .9); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.stat .num { display: block; font-size: clamp(28px, 8vw, 44px); line-height: 1; }
.stat .up { color: var(--up); }
.stat small { display: block; font-size: 12px; line-height: 1.2; color: var(--dim); margin-top: 4px; }
.stat strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }

.state { display: flex; flex-direction: column; align-items: center; color: var(--dim); text-align: center; padding: 40px 12px; }
.spinner { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--blue); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Bands ---- */
.band { padding: 36px 16px; }
.band > * { max-width: 1088px; margin-left: auto; margin-right: auto; }
.band-alt { background: var(--band); }
h2 { font-size: clamp(30px, 6vw, 44px); line-height: 1; margin-bottom: 14px; }
.sub-h { color: var(--dim); margin-top: -8px; margin-bottom: 14px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.empty { color: var(--dim); }

/* ---- Ranking ---- */
.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 8px; align-items: end; margin: 16px 0 10px; }
.podium-partial { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.pod { position: relative; text-align: center; padding: 18px 6px 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pod.first { border-color: var(--gold); background: linear-gradient(180deg, rgba(250, 199, 117, .14), var(--sheet) 70%); padding-top: 22px; }
.rank { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font: 400 18px/1 "Bebas Neue", sans-serif; padding: 4px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.first .rank { color: var(--gold); border-color: var(--gold); }
.second .rank { color: #b9c6d3; }
.third .rank { color: #c9895a; }
.ava { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 12px; color: #06202f; background: var(--blue); }
.ava.a2 { background: var(--gold); color: #3a2605; }
.ava.a3 { background: #9fd8b4; color: #0d2c1a; }
.ava.a4 { background: #f2a3a2; color: #3f0f0f; }
.pod .ava { width: 48px; height: 48px; font-size: 17px; margin: 0 auto 8px; }
.pod.first .ava { width: 60px; height: 60px; font-size: 21px; }
.pod-name { font-weight: 700; font-size: 15px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-pts { font-size: 13px; color: var(--dim); }
.pod-pts .num { font-size: 26px; color: var(--text); }
.rank-list li { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 48px; padding: 6px 12px 6px 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.rank-list li + li { margin-top: 6px; }
.rank-list .pos { font-size: 19px; color: var(--faint); text-align: center; }
.rank-list .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .pts { font-size: 22px; color: var(--blue); }

/* ---- Bars (cities, regions): same look as the report on the partner page ---- */
.bars { counter-reset: pos; }
.bars li { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 10px; background: var(--sheet); border-radius: 6px; overflow: hidden; }
.bars li + li { margin-top: 5px; }
.bars li > i { position: absolute; inset: 0; background: rgba(118, 205, 255, .24); transform-origin: left; transform: scaleX(var(--w)); }
.bars li:first-child > i { background: rgba(250, 199, 117, .34); }
.reveal .bars li > i { transform: scaleX(0); }
.reveal.in .bars li > i { transform: scaleX(var(--w)); transition: transform .9s cubic-bezier(.2, .8, .3, 1) .15s; }
.bars span, .bars b { position: relative; }
.bars span { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars span::before { counter-increment: pos; content: counter(pos) ". "; color: var(--faint); font-weight: 500; }
.bars b { font: 400 21px/1 "Bebas Neue", sans-serif; margin-left: 10px; }

/* ---- Legendary lotki ---- */
.legends { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.legend { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.legends li:first-child .legend { border-color: var(--gold); }
.legends li:first-child .legend .n .num { color: var(--gold); }
.legend:hover, .legend:focus-visible { border-color: var(--blue); outline: none; }
.legend:active { transform: scale(.99); }
.pos-n { font-size: 20px; color: var(--faint); text-align: center; }
.legends li:nth-child(-n+3) .pos-n { color: var(--gold); }
.legend img { width: 52px; height: 35px; object-fit: contain; display: block; }
.legend-text { min-width: 0; }
.legend-title { font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.legend-meta { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n { text-align: right; }
.n .num { display: block; font-size: 30px; line-height: 1; color: var(--blue); }
.n small { font-size: 11px; color: var(--faint); }

/* ---- Map ---- */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: center; }
.plmap { display: block; width: 100%; height: auto; max-height: 480px; overflow: visible; }
.region { stroke: var(--bg); stroke-width: 1.6; stroke-linejoin: round; }
.rl { font: 700 11px "Barlow", sans-serif; text-anchor: middle; pointer-events: none; letter-spacing: .03em; }
.rn { font: 400 16px "Bebas Neue", sans-serif; text-anchor: middle; pointer-events: none; }
.scale { display: flex; align-items: center; margin-top: 10px; font-size: 12px; color: var(--dim); }
.scale i { flex: 1; height: 8px; margin: 0 8px; border-radius: 4px; background: linear-gradient(90deg, #123A66, var(--blue)); }
.unknown { margin-top: 8px; font-size: 13px; color: var(--dim); }

/* ---- Brands ---- */
.share { display: flex; height: 34px; margin-bottom: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.share i { display: block; height: 100%; }
.share .rest { background: var(--sheet); flex: 1; }
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.brands li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-height: 42px; padding: 6px 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: block; }
.brands .b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brands .num { font-size: 20px; }
.brands li:first-child .num { color: var(--gold); }

/* ---- Press ---- */
.press { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.press-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; cursor: pointer; list-style: none; }
.press-card::-webkit-details-marker { display: none; }
.press-card:hover, .press-card:focus-visible { border-color: var(--blue); outline: none; }
.logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
.logo svg { width: 24px; height: 24px; }
.press-h { display: block; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.press-s { display: block; font-size: 13px; color: var(--dim); }
.go { font-weight: 700; font-size: 13px; color: var(--blue); white-space: nowrap; }
.press-links { margin-top: 4px; }
.press-links a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.press-links a:last-child { border-bottom: 0; }

/* ---- How we count ---- */
.how { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; }
.how summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 400 26px/1 "Bebas Neue", sans-serif; letter-spacing: .02em; cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: "+"; color: var(--blue); font-size: 30px; }
.how[open] summary::after { content: "−"; }
.notice { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(250, 199, 117, .12); border: 1px solid rgba(250, 199, 117, .3); font-size: 15px; }
.notice b { color: var(--gold); margin-right: 4px; }
.how dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; padding-bottom: 14px; }
.how dt { font-weight: 700; color: var(--blue); }
.how dd { color: var(--dim); font-size: 15px; margin-top: 2px; }

/* ---- Join ---- */
.contact { padding: 44px 16px 80px; text-align: center; }
.contact h2 { margin-bottom: 6px; }
.contact p { color: var(--dim); }
.btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 52px; padding: 0 32px; background: var(--red); color: #fff; border-radius: 10px; font-weight: 700; font-size: 17px; text-decoration: none; }
.login { display: flex; align-items: center; min-height: 44px; width: fit-content; margin: 8px auto 0; padding: 0 4px; font-weight: 600; color: var(--blue); text-underline-offset: 3px; }
.stick { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 48px; line-height: 48px; text-align: center; border-radius: 10px; background: var(--red); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.stick.on { opacity: 1; transform: none; pointer-events: auto; }
.foot { display: flex; justify-content: space-between; align-items: center; max-width: 1120px; margin: 0 auto; padding: 14px 16px 22px; font-size: 14px; color: var(--dim); border-top: 1px solid var(--line); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot span { font: 400 18px "Bebas Neue", sans-serif; letter-spacing: .03em; }

@media (min-width: 560px) {
  .legends { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat small { font-size: 14px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 40px; align-items: center; padding: 24px 16px 44px; }
  .stage { min-height: 460px; }
  .road { width: auto; max-width: none; height: 108%; }
  .glow { width: 100%; }
  .band { padding: 52px 16px; }
  .duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 44px; align-items: start; }
  .legends { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 44px; }
  .stick { display: none; }
  .contact { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .road-mid, .count-card, .spinner { animation: none; }
  .reveal .bars li > i, .reveal.in .bars li > i { transform: scaleX(var(--w)); transition: none; }
  .stick { transition: none; }
}