/* Home page — "sell your skins" banner under the FAQ. */

/* The FAQ block and this one both carry py-6, which leaves too much air between them. */
[data-skc-cta] { margin-top: -40px }

.skc-cta {
  position: relative;
  height: 320px;
  width: 100%;
  isolation: isolate;
}

/* Background sits in its own clipped layer so the artwork can spill over the top. */
.skc-cta-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border: 1px solid rgba(61, 255, 158, .18); border-radius: 20px;
  background: linear-gradient(115deg, #0b1310 0%, #0a0d0c 46%, #0c1b14 100%);
}
.skc-cta-bg::before {
  content: ''; position: absolute; left: 50%; top: -40%; width: 760px; height: 520px;
  transform: translateX(-50%); border-radius: 9999px; opacity: .5; filter: blur(110px);
  background: radial-gradient(circle, hsla(150, 84%, 42%, .55) 0%, transparent 70%);
}
.skc-cta-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .05;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 46px 46px;
}
.skc-cta-halo {
  position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(90px);
}
.skc-cta-halo--left { left: 6%; bottom: -30%; width: 320px; height: 320px; opacity: .35; background: hsla(150, 84%, 45%, .55) }
.skc-cta-halo--right { right: 4%; top: -25%; width: 340px; height: 340px; opacity: .28; background: hsla(160, 90%, 50%, .5) }

/*
 * The art layer's bottom edge lines up with the banner, so nothing can hang below it,
 * while the extra height above lets the rifle and the characters break the top edge.
 */
.skc-cta-art::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
}
.skc-cta-art {
  position: absolute; left: 0; right: 0; bottom: 0; top: -110px; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.skc-cta-art > img { position: absolute; height: auto }
.skc-cta-awp, .skc-cta-knife, .skc-cta-heroes { display: block }

/*
 * Weapons point up with a slight lean to the right, the way the reference banners
 * angle them. Rotation happens around the centre, so each one is lifted by half the
 * growth of its bounding box — that lands the lowest point exactly on the banner
 * floor while the muzzle breaks the top edge.
 */
.skc-cta-awp {
  left: 10px; bottom: 135px; width: 340px;
  transform: rotate(-66deg);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.skc-cta-knife {
  left: 120px; bottom: 79px; width: 220px;
  transform: rotate(-58deg);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5));
}
.skc-cta-heroes {
  right: 24px; bottom: 0; width: 322px;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .5));
}

.skc-cta-arrows {
  position: absolute; top: 50%; z-index: 1; display: flex; gap: 2px;
  transform: translateY(-50%); opacity: .4; pointer-events: none;
}
.skc-cta-arrows--left { left: 330px }
.skc-cta-arrows--right { right: 330px; transform: translateY(-50%) scaleX(-1) }
.skc-cta-arrows svg { width: 22px; height: 22px; color: #3dff9e; animation: skc-cta-chevron 1.6s ease-in-out infinite }
.skc-cta-arrows svg:nth-child(2) { animation-delay: .18s }
.skc-cta-arrows svg:nth-child(3) { animation-delay: .36s }
@keyframes skc-cta-chevron {
  0%, 100% { opacity: .25; transform: translateX(-4px) }
  50% { opacity: 1; transform: translateX(4px) }
}

.skc-cta-body {
  position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 0 24px; text-align: center;
}
.skc-cta-title {
  max-width: 400px; margin: 0; color: #fff;
  font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.skc-cta-title b { color: #3dff9e; font-weight: 700 }
.skc-cta-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden; border-radius: 14px; padding: 16px 38px;
  background: linear-gradient(180deg, #4dffa8, #11c56b); color: #04140a;
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 10px 34px -10px rgba(34, 197, 94, .85); transition: transform .15s, box-shadow .2s;
}
.skc-cta-button:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px rgba(34, 197, 94, 1) }
.skc-cta-button:active { transform: translateY(0) scale(.98) }
.skc-cta-button svg { position: relative; width: 17px; height: 17px }
.skc-cta-button i {
  position: absolute; top: 0; bottom: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: skc-cta-sweep 3s ease-in-out infinite;
}
@keyframes skc-cta-sweep { 0% { transform: translateX(-160%) } 55%, 100% { transform: translateX(300%) } }

@media (max-width: 1200px) {
  .skc-cta-arrows { display: none }
  .skc-cta-awp { width: 290px; bottom: 115px; left: 4px }
  .skc-cta-knife { width: 190px; bottom: 68px; left: 92px }
  .skc-cta-heroes { width: 278px; right: 6px }
  .skc-cta-title { font-size: 28px }
}
@media (max-width: 900px) {
  .skc-cta { height: 300px }
  .skc-cta-awp { width: 240px; bottom: 95px; left: -26px }
  .skc-cta-knife { width: 158px; bottom: 57px; left: 40px }
  .skc-cta-heroes { width: 224px; right: -14px }
  .skc-cta-title { max-width: 330px; font-size: 24px }
}
@media (max-width: 640px) {
  .skc-cta { height: 300px }
  .skc-cta-bg { border-radius: 16px }
  .skc-cta-awp, .skc-cta-knife { display: none }
  .skc-cta-heroes { width: 178px; right: -30px; opacity: .5 }
  .skc-cta-title { max-width: none; font-size: 22px }
  .skc-cta-button { padding: 14px 30px }
}
@media (prefers-reduced-motion: reduce) {
  .skc-cta-arrows svg, .skc-cta-button i { animation: none }
}

/* The display face has no Cyrillic, so Russian headings fall back to another
 * font whose capitals are much taller: measured at 24px, a Cyrillic capital
 * rises 21 units while the face's own "?" rises only 15. Next to Russian text
 * the question mark therefore reads as undersized, and 21/15 scales it back to
 * the cap height. The baseline is shared, so nothing else moves, and
 * line-height:0 keeps the larger glyph from stretching the line box.
 *
 * English headings need none of this - there the capitals and the "?" come from
 * the same face and already match - so the class is only on the Russian page. */
.skc-qmark { font-size: 1.4em; line-height: 0 }

/* Russian hero description. */
html[lang="ru"] .max-w-\[30rem\] > p:first-child { font-weight: 500 }

/* Keep the two archived heading fragments on one visual line on phones. */
@media (max-width: 767px) {
  #how-it-works > div > div > div:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: .5rem !important;
    white-space: nowrap;
  }
  #how-it-works > div > div > div:first-child h2 { white-space: nowrap }
}

/* "Buy skins" keeps its cart icon on phones; only below 375px wide, where it would push the
   two hero buttons past the screen edge, is it hidden (the live site hides it below 768px). */
@media (max-width: 374px) { .skc-buy-cart { display: none } }

/* Home stats (total transactions / volume / users): on tablets the three cards sit in one
   row but are too narrow for desktop spacing — the label wrapped and the number ran under
   the icon. Between 768px and 1099px the cards tighten their padding, type and icon. */
@media (min-width: 768px) and (max-width: 1099px) {
  body > main :has(> [style*="--stat-accent"]) { gap: 12px }
  body > main [style*="--stat-accent"] > .relative.z-10 { height: 104px; gap: 10px; padding: 0 16px }
  body > main [style*="--stat-accent"] > .relative.z-10 > .flex-col { min-width: 0; gap: 8px }
  body > main [style*="--stat-accent"] .uppercase { font-size: 9px; letter-spacing: .12em; white-space: nowrap }
  body > main [style*="--stat-accent"] .tabular-nums { font-size: clamp(19px, 2.65vw, 26px); white-space: nowrap }
  body > main [style*="--stat-accent"] .w-14.h-14 { flex-shrink: 0; width: 44px; height: 44px }
  body > main [style*="--stat-accent"] .w-14.h-14 > svg { width: 22px; height: 22px }
  body > main [style*="--stat-accent"] > svg.absolute { width: 11px; height: 11px }
}

/* Two independent FAQ stacks: opening an answer changes only its own column. */
#faq { scroll-margin-top: 100px }

#faq .scrollbar-hide,
#faq [data-skc-faq-scroll] {
  display: block !important;
  width: 100%;
  max-width: 76rem;
}

#faq [data-skc-faq-columns] {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  width: 100%;
  gap: 8px;
}

#faq [data-skc-faq-column] {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

#faq [data-skc-faq-wide] {
  min-width: 0;
  grid-column: 1 / -1;
}

#faq [data-skc-faq-wide]:empty { display: none }

@media (min-width: 1280px) {
  #faq [data-skc-faq-column] > .group > button > .flex > span:last-child,
  #faq [data-skc-faq-wide] > .group > button > .flex > span:last-child {
    white-space: nowrap;
  }
}

@media (max-width: 1279px) {
  #faq [data-skc-faq-columns] { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 767px) {
  #faq { scroll-margin-top: 76px }
}