:root {
  --seo-card-line: rgba(198, 246, 255, .2);
}

#main-content[data-seo-home] { display: none !important; }
.seo-page { min-height: 70vh; }
.seo-hero { position: relative; overflow: hidden; padding-top: 82px; padding-bottom: 58px; }
.seo-hero::before { position: absolute; z-index: -1; top: -160px; right: -130px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(40, 243, 255, .13), rgba(53, 120, 255, .06) 42%, transparent 70%); content: ''; pointer-events: none; }
.seo-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 56px; margin-top: 22px; }
.seo-hero h1 { max-width: 900px; font-size: clamp(3.15rem, 6vw, 6rem); line-height: .98; letter-spacing: -.065em; }
.seo-hero h1 small { display: block; margin-top: 16px; color: var(--cyan); font-size: .18em; letter-spacing: .12em; text-transform: uppercase; }
.seo-intro { max-width: 720px; margin-top: 24px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.seo-hero__mark, .seo-guide__icon { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(40, 243, 255, .27); border-radius: 38px; color: var(--cyan); background: radial-gradient(circle at 30% 20%, rgba(239, 77, 225, .24), transparent 44%), linear-gradient(145deg, rgba(19, 38, 71, .8), rgba(6, 15, 31, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 28px 65px rgba(0, 0, 0, .28), 0 0 36px rgba(40, 243, 255, .1); }
.seo-hero__mark .material-symbols-rounded { font-size: 4rem; }
.categories { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.categories a, .seo-pagination a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(168, 194, 231, .22); border-radius: 999px; color: #c0ccdc; background: rgba(8, 18, 37, .62); font-size: .76rem; font-weight: 800; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.categories a:hover, .categories a:focus-visible, .seo-pagination a:hover, .seo-pagination a:focus-visible { border-color: rgba(40, 243, 255, .54); color: #fff; outline: 0; background: linear-gradient(135deg, rgba(155, 92, 255, .28), rgba(40, 243, 255, .16)); box-shadow: 0 9px 25px rgba(40, 243, 255, .1); transform: translateY(-2px); }
.categories a[aria-current="page"] { border-color: rgba(40, 243, 255, .58); color: #fff; background: linear-gradient(135deg, rgba(155, 92, 255, .44), rgba(40, 243, 255, .25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px rgba(40, 243, 255, .12); }
.seo-catalog-section { padding-top: 42px; padding-bottom: 98px; }
.seo-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.seo-section-heading h2, .seo-guide h2 { margin-top: 14px; font-size: clamp(2.35rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: -.06em; }
.seo-section-heading > p { color: var(--muted); font-size: .82rem; font-weight: 700; }
.seo-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; perspective: 1200px; }
.seo-catalog > .wallpaper { display: block; min-width: 0; color: inherit; text-decoration: none; }
.seo-wallpaper-card { width: 100%; min-width: 0; color: inherit; text-decoration: none; }
.seo-wallpaper-card .collectible-card__image { animation: none; transition: transform .55s ease; }
.seo-catalog > .wallpaper:hover .collectible-card__image, .seo-catalog > .wallpaper:focus-visible .collectible-card__image { transform: scale(1.075); }
.seo-catalog > .wallpaper:focus-visible { outline: 0; }
.seo-catalog > .wallpaper:focus-visible .seo-wallpaper-card { box-shadow: 0 0 0 3px #050812, 0 0 0 5px var(--cyan), 0 28px 58px rgba(0, 0, 0, .5); }
.seo-wallpaper-card .collectible-card__info { gap: 9px; }
.seo-wallpaper-card .collectible-card__info h2 { overflow: hidden; color: #fff; font-size: clamp(.9rem, 1.35vw, 1.08rem); font-weight: 900; line-height: 1.18; letter-spacing: -.025em; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.seo-wallpaper-card .collectible-card__stats { gap: 8px; font-size: .66rem; }
.seo-empty { grid-column: 1 / -1; padding: 40px; border: 1px solid var(--seo-card-line); border-radius: 24px; color: var(--muted); background: var(--surface); text-align: center; }
.seo-pagination { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }
.seo-pagination a { gap: 7px; min-width: 150px; }
.seo-guide { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 30px; overflow: hidden; margin-bottom: 76px; padding-top: 46px; padding-bottom: 46px; border: 1px solid rgba(198, 246, 255, .22); border-radius: 30px; background: radial-gradient(circle at 0 50%, rgba(155, 92, 255, .18), transparent 32%), radial-gradient(circle at 100% 50%, rgba(40, 243, 255, .1), transparent 32%), var(--surface); box-shadow: var(--shadow); }
.seo-guide__icon { width: 80px; border-radius: 25px; }
.seo-guide__icon span { font-size: 2.4rem; }
.seo-guide > div:last-child > p:not(.eyebrow) { max-width: 800px; margin-top: 18px; color: var(--muted); line-height: 1.75; }
.seo-guide a, .wallpaper-seo-content a { color: #eafcff; font-weight: 700; text-decoration-color: rgba(40, 243, 255, .55); text-underline-offset: 4px; }
.wallpaper-seo-content { width: min(960px, 100%); margin: 0 auto; padding: 64px 28px 94px; line-height: 1.7; }
.wallpaper-seo-content nav { margin-bottom: 28px; color: var(--muted); font-size: .78rem; }
.wallpaper-seo-content h1 { max-width: 850px; margin-bottom: 30px; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1; letter-spacing: -.06em; }
.wallpaper-seo-content > img { width: min(390px, 100%); height: auto; margin-bottom: 28px; border: 1px solid var(--seo-card-line); border-radius: 30px; box-shadow: var(--shadow), 0 0 32px rgba(40, 243, 255, .08); }
.wallpaper-seo-content > p { max-width: 800px; margin: 16px 0; color: var(--muted); }
.wallpaper-seo-gate { max-width: 680px; padding: 42px; border: 1px solid var(--seo-card-line); border-radius: 28px; background: radial-gradient(circle at 20% 0, rgba(155, 92, 255, .18), transparent 42%), var(--surface); box-shadow: var(--shadow); }

@media (max-width: 980px) {
  .seo-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .seo-hero { padding-top: 48px; padding-bottom: 42px; }
  .seo-hero__layout { grid-template-columns: 1fr; gap: 28px; }
  .seo-hero h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .seo-hero__mark { display: none; }
  .categories { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; padding-bottom: 8px; scrollbar-width: none; }
  .categories::-webkit-scrollbar { display: none; }
  .categories a { flex: 0 0 auto; }
  .seo-catalog-section { padding-top: 26px; padding-bottom: 72px; }
  .seo-section-heading { display: grid; gap: 12px; align-items: start; margin-bottom: 26px; }
  .seo-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .seo-guide { grid-template-columns: 1fr; gap: 22px; padding: 32px 24px; }
  .seo-guide__icon { width: 65px; }
  .wallpaper-seo-content { padding: 44px 18px 72px; }
}

@media (max-width: 390px) {
  .seo-catalog { grid-template-columns: 1fr; max-width: 310px; margin-inline: auto; }
  .seo-pagination { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .categories a, .seo-pagination a, .seo-wallpaper-card .collectible-card__image { transition: none; }
}