.eg-blog-page,
.eg-article-page {
  position: relative;
  color: #f7f3ff;
  background:
    radial-gradient(circle at 12% 4%, rgba(139, 92, 246, 0.16), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(139, 92, 246, 0.12), transparent 22%),
    linear-gradient(180deg, #08070f 0%, #090913 46%, #0b0a14 100%);
}

.eg-blog-page::before,
.eg-blog-page::after,
.eg-article-page::before,
.eg-article-page::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.42;
}

.eg-blog-page::before,
.eg-article-page::before {
  left: 0;
  top: 80px;
  width: 280px;
  height: 280px;
  background: rgba(109, 93, 246, 0.22);
}

.eg-blog-page::after,
.eg-article-page::after {
  right: 0;
  bottom: 120px;
  width: 320px;
  height: 320px;
  background: rgba(139, 92, 246, 0.14);
}

.eg-blog-hero,
.eg-blog-featured,
.eg-blog-cta,
.eg-blog-clusters,
.eg-blog-listing,
.eg-blog-final-cta,
.eg-article-breadcrumbs,
.eg-article-hero,
.eg-article-layout,
.eg-article-related {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}

.eg-blog-badge,
.eg-blog-topic-chip,
.eg-blog-card__cover-chip,
.eg-blog-featured__visual-badge,
.eg-blog-final-cta__formats span,
.eg-article-hero__category,
.eg-article-inline-cta__kicker,
.eg-article-final-cta__eyebrow,
.eg-article-sidebar__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(180, 150, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: #f2edff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eg-blog-button {
  min-height: 58px;
  padding: 0 24px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.eg-blog-button:hover,
.eg-blog-button:focus-visible {
  transform: translateY(-2px);
  color: #fff;
}

.eg-blog-button--primary {
  background: linear-gradient(135deg, #5b4bff, #8b5cf6);
  color: #fff;
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.36),
    0 18px 42px rgba(91, 75, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.eg-blog-button--primary:hover,
.eg-blog-button--primary:focus-visible {
  box-shadow:
    0 0 40px rgba(139, 92, 246, 0.48),
    0 22px 52px rgba(91, 75, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.eg-blog-button--ghost {
  color: rgba(246, 242, 255, 0.92);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.eg-blog-button--ghost:hover,
.eg-blog-button--ghost:focus-visible {
  border-color: rgba(180, 150, 255, 0.26);
  background: rgba(139, 92, 246, 0.12);
}

.eg-blog-hero {
  padding: clamp(68px, 8vw, 110px) 0 clamp(36px, 5vw, 62px);
}

.eg-blog-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.eg-blog-badge {
  width: fit-content;
  gap: 10px;
  margin-bottom: 28px;
}

.eg-blog-badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4dac, #8b5cf6);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.7);
}

.eg-blog-hero__title {
  margin: 0;
  font-size: clamp(54px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 950;
}

.eg-blog-hero__title span {
  color: #8b5cf6;
  text-shadow: 0 0 34px rgba(139, 92, 246, 0.34);
}

.eg-blog-hero__subtitle {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(236, 232, 255, 0.74);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.6;
}

.eg-blog-hero__chips,
.eg-blog-hero__meta,
.eg-blog-topic-grid,
.eg-blog-card__tags,
.eg-blog-final-cta__formats,
.eg-article-sidebar__actions,
.eg-article-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eg-blog-hero__chips {
  margin-top: 32px;
}

.eg-blog-hero__meta {
  margin-top: 28px;
}

.eg-blog-hero__meta span {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(246, 242, 255, 0.84);
  font-size: 13px;
  font-weight: 760;
}

.eg-blog-hero__panel,
.eg-blog-featured,
.eg-blog-cta,
.eg-blog-cluster-card,
.eg-blog-listing,
.eg-blog-card,
.eg-blog-empty,
.eg-blog-final-cta,
.eg-article-inline-cta,
.eg-article-faq,
.eg-article-final-cta,
.eg-article-sidebar__card {
  position: relative;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(24, 23, 36, 0.9), rgba(11, 10, 18, 0.96));
  border: 1px solid rgba(180, 150, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.eg-blog-hero__panel {
  padding: clamp(26px, 3vw, 34px);
}

.eg-blog-panel__eyebrow,
.eg-blog-cta__eyebrow,
.eg-blog-section-head__eyebrow,
.eg-blog-final-cta__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eg-blog-panel__title,
.eg-blog-featured__content h2,
.eg-blog-section-head__title,
.eg-blog-cta__copy h2,
.eg-blog-final-cta__copy h2,
.eg-article-inline-cta h3,
.eg-article-final-cta h2,
.eg-article-sidebar__card h2 {
  margin: 0;
  color: #f7f3ff;
  letter-spacing: -0.04em;
  font-weight: 900;
  line-height: 1.08;
}

.eg-blog-panel__title {
  font-size: clamp(28px, 3vw, 36px);
}

.eg-blog-panel__text {
  margin: 14px 0 0;
  color: rgba(236, 232, 255, 0.72);
  line-height: 1.6;
}

.eg-blog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 26px;
}

.eg-blog-search__field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(180, 150, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  outline: none;
}

.eg-blog-search__field input::placeholder {
  color: rgba(236, 232, 255, 0.5);
}

.eg-blog-search__button {
  min-width: 110px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #5b4bff, #8b5cf6);
  box-shadow: 0 14px 28px rgba(91, 75, 255, 0.22);
}

.eg-blog-topic-grid {
  margin-top: 24px;
}

.eg-blog-topic-chip {
  text-decoration: none;
  color: rgba(246, 242, 255, 0.88);
}

.eg-blog-topic-chip.is-active,
.eg-blog-topic-chip:hover,
.eg-blog-topic-chip:focus-visible {
  color: #fff;
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.34);
}

.eg-blog-panel__active {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(180, 150, 255, 0.12);
  display: grid;
  gap: 8px;
}

.eg-blog-panel__active strong {
  font-size: 28px;
  line-height: 1;
}

.eg-blog-panel__active span,
.eg-blog-panel__active a {
  color: rgba(236, 232, 255, 0.74);
}

.eg-blog-panel__active a {
  width: fit-content;
  text-decoration: none;
  color: #c4b5fd;
}

.eg-blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.eg-blog-featured__visual,
.eg-blog-card__cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 28%, rgba(139, 92, 246, 0.18), transparent 28%),
    radial-gradient(circle at 72% 58%, rgba(139, 92, 246, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(24, 23, 36, 0.9), rgba(9, 9, 14, 0.98));
}

.eg-blog-featured__visual::after,
.eg-blog-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(12, 10, 20, 0.14), rgba(12, 10, 20, 0.7));
}

.eg-blog-featured__visual {
  min-height: 320px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eg-blog-featured__visual strong,
.eg-blog-card__cover strong {
  position: relative;
  z-index: 1;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 0.9;
  letter-spacing: -0.07em;
  opacity: 0.18;
}

.eg-blog-featured__visual-badge {
  position: relative;
  z-index: 1;
  width: fit-content;
}

.eg-blog-featured__content {
  padding: clamp(28px, 4vw, 42px);
  display: grid;
  align-content: center;
  gap: 16px;
}

.eg-blog-featured__meta,
.eg-blog-card__meta,
.eg-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.eg-blog-featured__meta a,
.eg-blog-featured__meta span,
.eg-blog-card__meta a,
.eg-blog-card__meta span,
.eg-article-hero__meta span {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(236, 232, 255, 0.82);
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.eg-blog-featured__content h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.eg-blog-featured__content p,
.eg-blog-section-head__text,
.eg-blog-card p,
.eg-blog-empty p,
.eg-blog-final-cta__copy p,
.eg-article-hero__description,
.eg-article-sidebar__card p,
.eg-article-final-cta p,
.eg-article-faq__answer,
.eg-article-outro p {
  color: rgba(236, 232, 255, 0.74);
  line-height: 1.65;
}

.eg-blog-featured__actions,
.eg-blog-cta__actions,
.eg-blog-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.eg-blog-cta,
.eg-blog-final-cta,
.eg-article-final-cta {
  padding: clamp(28px, 4vw, 42px);
}

.eg-blog-cta {
  margin-bottom: clamp(34px, 5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.eg-blog-clusters {
  margin-bottom: clamp(34px, 5vw, 58px);
}

.eg-blog-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.eg-blog-section-head__title {
  font-size: clamp(28px, 3.1vw, 42px);
}

.eg-blog-section-head__text {
  max-width: 480px;
  margin: 0;
}

.eg-blog-cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.eg-blog-cluster-card {
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.eg-blog-cluster-card:hover,
.eg-blog-cluster-card:focus-visible,
.eg-blog-card:hover,
.eg-blog-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(180, 150, 255, 0.26);
}

.eg-blog-cluster-card__eyebrow,
.eg-blog-card__link {
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 820;
}

.eg-blog-cluster-card h3,
.eg-blog-card h3 {
  margin: 10px 0 12px;
  color: #f7f3ff;
  letter-spacing: -0.03em;
}

.eg-blog-card h3 a,
.eg-blog-featured__content h2 a {
  color: inherit;
  text-decoration: none;
}

.eg-blog-cluster-card h3 {
  font-size: 28px;
}

.eg-blog-cluster-card p,
.eg-blog-card p {
  margin: 0;
}

.eg-blog-cluster-card__link,
.eg-blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-top: 18px;
}

.eg-blog-listing {
  padding: clamp(28px, 4vw, 38px);
  margin-bottom: clamp(34px, 5vw, 58px);
}

.eg-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.eg-blog-grid--related {
  margin-top: 0;
}

.eg-blog-card {
  overflow: hidden;
}

.eg-blog-card__cover {
  min-height: 168px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eg-blog-card__body {
  padding: 24px;
}

.eg-blog-card h3 {
  font-size: 22px;
  line-height: 1.16;
  font-weight: 900;
}

.eg-blog-card__tag {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(246, 242, 255, 0.82);
  font-size: 12px;
  font-weight: 760;
}

.eg-blog-empty {
  padding: 36px;
  text-align: center;
}

.eg-blog-empty h3 {
  margin: 0 0 12px;
  font-size: 30px;
  letter-spacing: -0.03em;
}

.eg-blog-empty .eg-blog-button {
  margin-top: 18px;
}

.eg-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.eg-blog-pagination .page-numbers {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 150, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f3efff;
  font-weight: 800;
  text-decoration: none;
}

.eg-blog-pagination .page-numbers.current,
.eg-blog-pagination .page-numbers:hover,
.eg-blog-pagination .page-numbers:focus-visible {
  color: #fff;
  border-color: rgba(139, 92, 246, 0.32);
  background: rgba(139, 92, 246, 0.18);
}

.eg-blog-final-cta {
  margin-bottom: clamp(48px, 6vw, 78px);
  display: grid;
  gap: 22px;
}

.eg-blog-final-cta__formats span {
  color: rgba(246, 242, 255, 0.86);
}

.eg-blog-card__cover.is-discord,
.eg-blog-featured__visual.is-discord {
  background:
    radial-gradient(circle at 28% 26%, rgba(99, 102, 241, 0.26), transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(139, 92, 246, 0.2), transparent 34%),
    linear-gradient(135deg, #171328, #0b0b15);
}

.eg-blog-card__cover.is-games,
.eg-blog-featured__visual.is-games {
  background:
    radial-gradient(circle at 28% 26%, rgba(139, 92, 246, 0.18), transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(59, 130, 246, 0.16), transparent 34%),
    linear-gradient(135deg, #171328, #0b0b15);
}

.eg-blog-card__cover.is-evening,
.eg-blog-featured__visual.is-evening {
  background:
    radial-gradient(circle at 28% 26%, rgba(196, 181, 253, 0.18), transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(139, 92, 246, 0.18), transparent 34%),
    linear-gradient(135deg, #18131f, #0c0a14);
}

.eg-blog-card__cover.is-virtual,
.eg-blog-featured__visual.is-virtual {
  background:
    radial-gradient(circle at 28% 26%, rgba(96, 165, 250, 0.18), transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(139, 92, 246, 0.22), transparent 34%),
    linear-gradient(135deg, #171328, #0a0a13);
}

.eg-article-page {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.eg-article-breadcrumbs {
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(236, 232, 255, 0.58);
  font-size: 14px;
}

.eg-article-breadcrumbs a {
  color: rgba(236, 232, 255, 0.78);
  text-decoration: none;
}

.eg-article-hero {
  display: block !important;
  width: min(100% - 48px, 980px);
  padding: 40px;
  text-align: center;
}

.eg-article-hero__category {
  text-decoration: none;
  color: #f3efff;
}

.eg-article-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 950;
}

.eg-article-hero__description {
  max-width: 720px;
  margin: 26px auto 0;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.62;
}

.eg-article-hero__meta {
  justify-content: center;
  margin-top: 28px;
}

.eg-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 320px);
  gap: clamp(36px, 5vw, 74px);
  align-items: start;
}

.eg-article-content {
  min-width: 0;
}

.eg-article-content p,
.eg-article-content li {
  color: rgba(236, 232, 255, 0.8);
  font-size: 18px;
  line-height: 1.82;
}

.eg-article-content p {
  margin: 0 0 24px;
}

.eg-article-content h2,
.eg-article-faq h2 {
  color: #f7f3ff;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 900;
  margin: clamp(52px, 6vw, 76px) 0 22px;
}

.eg-article-content h3,
.eg-article-faq__question {
  color: #f7f3ff;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  margin: 42px 0 16px;
}

.eg-article-content a,
.eg-article-outro a {
  color: #c4b5fd;
  text-decoration: underline;
  text-decoration-color: rgba(196, 181, 253, 0.4);
}

.eg-article-content ul {
  margin: 0 0 26px;
  padding-left: 22px;
}

.eg-article-inline-cta {
  margin: clamp(42px, 5vw, 64px) 0;
  padding: 0;
  overflow: hidden;
}

.eg-article-inline-cta__inner p,
.eg-article-final-cta p,
.eg-article-sidebar__card p {
  margin: 12px 0 0;
}

.eg-article-outro {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(180, 150, 255, 0.1);
}

.eg-article-sidebar {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 18px;
}

.eg-article-sidebar__card {
  padding: 22px;
}

.eg-article-sidebar__card h2 {
  font-size: 24px;
}

.eg-article-sidebar__card ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.eg-article-sidebar__card li a {
  color: rgba(236, 232, 255, 0.78);
  text-decoration: none;
}

.eg-article-sidebar__card li a:hover,
.eg-article-sidebar__card li a:focus-visible {
  color: #fff;
}

.eg-article-sidebar__actions {
  margin-top: 18px;
}

.eg-article-faq {
  margin-top: clamp(56px, 7vw, 90px);
  padding: clamp(28px, 4vw, 42px);
}

.eg-article-faq h2 {
  margin-top: 0;
}

.eg-article-faq__item + .eg-article-faq__item {
  padding-top: 22px;
  border-top: 1px solid rgba(180, 150, 255, 0.1);
}

.eg-article-faq__question {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

.eg-article-faq__answer {
  margin: 0;
}

.eg-article-final-cta {
  margin-top: clamp(46px, 6vw, 72px);
  display: grid;
  gap: 22px;
}

.eg-article-related {
  margin-top: clamp(48px, 6vw, 78px);
}

@media (max-width: 1100px) {
  .eg-blog-hero__inner,
  .eg-blog-featured,
  .eg-blog-cta,
  .eg-article-layout {
    grid-template-columns: 1fr;
  }

  .eg-blog-cluster-grid,
  .eg-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eg-blog-cta {
    align-items: start;
  }

  .eg-article-sidebar {
    position: relative;
    top: auto;
  }
}

@media (max-width: 760px) {
  .eg-blog-hero,
  .eg-article-page {
    padding-bottom: 0;
  }

  .eg-blog-hero,
  .eg-blog-featured,
  .eg-blog-cta,
  .eg-blog-clusters,
  .eg-blog-listing,
  .eg-blog-final-cta,
  .eg-article-breadcrumbs,
  .eg-article-hero,
  .eg-article-layout,
  .eg-article-related {
    width: min(100% - 32px, 1180px);
  }

  .eg-blog-hero__title {
    font-size: clamp(42px, 12vw, 70px);
  }

  .eg-blog-hero__panel,
  .eg-blog-listing,
  .eg-blog-cta,
  .eg-blog-final-cta,
  .eg-article-inline-cta,
  .eg-article-faq,
  .eg-article-final-cta,
  .eg-article-sidebar__card {
    border-radius: 24px;
  }

  .eg-blog-search {
    grid-template-columns: 1fr;
  }

  .eg-blog-section-head {
    align-items: start;
  }

  .eg-blog-cluster-grid,
  .eg-blog-grid {
    grid-template-columns: 1fr;
  }

  .eg-blog-card h3 {
    font-size: 21px;
  }

  .eg-blog-featured__content h2,
  .eg-blog-section-head__title,
  .eg-article-final-cta h2 {
    font-size: clamp(26px, 8vw, 36px);
  }

  .eg-article-hero {
    padding-top: 28px;
  }

  .eg-article-hero h1 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .eg-article-content p,
  .eg-article-content li {
    font-size: 17px;
  }

  .eg-article-content h2,
  .eg-article-faq h2 {
    font-size: clamp(28px, 8vw, 36px);
    margin-top: 42px;
  }

  .eg-article-content h3,
  .eg-article-faq__question {
    font-size: 22px;
  }

  .eg-article-inline-cta__actions {
    flex-direction: column;
  }

  .eg-article-inline-cta__button,
  .eg-blog-button {
    width: 100%;
  }

  .eg-blog-featured__actions,
  .eg-blog-cta__actions,
  .eg-blog-final-cta__actions,
  .eg-article-final-cta__actions,
  .eg-article-sidebar__actions {
    display: grid;
    gap: 12px;
  }
}

body.single-post,
.single-post,
.article-page,
.eg-article-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 130, 246, 0.08), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.1), transparent 38%),
    #07070b;
}

.eg-article-page {
  isolation: isolate;
  overflow: hidden;
}

.eg-article-page::before,
.eg-article-page::after {
  z-index: 0;
  filter: blur(118px);
  opacity: 0.28;
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 48%, rgba(0, 0, 0, 0.56) 68%, transparent 90%);
  mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 48%, rgba(0, 0, 0, 0.56) 68%, transparent 90%);
}

.eg-article-breadcrumbs,
.eg-article-hero,
.eg-article-layout,
.article-faq,
.article-cta,
.eg-article-related {
  position: relative;
  z-index: 1;
}

.article-hero-bg,
.article-background {
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 48%, rgba(0, 0, 0, 0.56) 68%, transparent 90%);
  mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 48%, rgba(0, 0, 0, 0.56) 68%, transparent 90%);
}

.eg-article-hero__category,
.eg-article-inline-cta__kicker,
.article-cta-kicker,
.article-label,
.article-badge,
.post-kicker {
  margin-bottom: 22px;
}

.eg-article-hero__category {
  margin-bottom: 24px;
}

.eg-article-hero h1 {
  margin-top: 0;
}

.eg-article-inline-cta {
  margin: clamp(38px, 5vw, 62px) 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 15%, rgba(132, 92, 255, 0.2), transparent 34%),
    radial-gradient(circle at 86% 70%, rgba(95, 70, 190, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(18, 17, 29, 0.9), rgba(9, 9, 14, 0.96));
  border-color: rgba(178, 153, 255, 0.24);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.eg-article-inline-cta__inner {
  display: block;
  max-width: 720px;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 44px);
}

.eg-article-inline-cta__kicker {
  min-height: 32px;
  padding: 0 15px;
  margin-bottom: 14px;
  background: rgba(132, 92, 255, 0.14);
  border-color: rgba(185, 160, 255, 0.28);
  color: rgba(226, 216, 255, 0.9);
  font-size: 11px;
}

.eg-article-inline-cta h3 {
  max-width: 560px;
  margin-top: 0;
  font-size: clamp(24px, 2.6vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.eg-article-inline-cta__inner p {
  max-width: 540px;
  margin-top: 12px;
  color: rgba(236, 232, 255, 0.7);
  font-size: 15.5px;
  line-height: 1.6;
}

.eg-article-inline-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.eg-article-inline-cta__actions .eg-article-inline-cta__button {
  min-width: 260px;
  min-height: 64px;
  border-radius: 20px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  font-size: 18px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.eg-article-inline-cta__actions .eg-article-inline-cta__button--primary {
  min-width: 300px;
  color: #fff;
  background: linear-gradient(135deg, #5b4bff, #8b5cf6);
  box-shadow:
    0 0 24px rgba(139, 92, 246, 0.32),
    0 16px 34px rgba(91, 75, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.eg-article-inline-cta__actions .eg-article-inline-cta__button--primary:hover,
.eg-article-inline-cta__actions .eg-article-inline-cta__button--primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 0 32px rgba(139, 92, 246, 0.44),
    0 20px 42px rgba(91, 75, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.eg-article-inline-cta__actions .eg-article-inline-cta__button--secondary {
  min-width: 260px;
  color: rgba(246, 242, 255, 0.9);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.eg-article-inline-cta__actions .eg-article-inline-cta__button--secondary:hover,
.eg-article-inline-cta__actions .eg-article-inline-cta__button--secondary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(180, 150, 255, 0.3);
}

.eg-article-sidebar__eyebrow {
  margin-bottom: 16px;
}

.eg-article-sidebar__card--cta .eg-blog-button--primary {
  width: 100%;
}

.eg-article-sidebar__card--cta .eg-blog-button--ghost {
  width: 100%;
  min-height: 50px;
}

.article-cta.eg-article-final-cta {
  width: min(100% - 48px, 1080px);
  margin: clamp(54px, 7vw, 90px) auto;
  padding: clamp(44px, 5vw, 72px) clamp(24px, 5vw, 80px);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(132, 92, 255, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(22, 21, 34, 0.88), rgba(9, 9, 14, 0.96));
  border: 1px solid rgba(180, 150, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 32px 80px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
}

.article-cta-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: rgba(132, 92, 255, 0.13);
  border: 1px solid rgba(178, 153, 255, 0.26);
  color: rgba(230, 220, 255, 0.88);
  font-weight: 850;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-cta h2 {
  max-width: 780px;
  margin: 0 auto;
  color: #f7f3ff;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 900;
  text-align: center;
}

.article-cta p {
  max-width: 700px;
  margin: 20px auto 0;
  color: rgba(236, 232, 255, 0.72);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  text-align: center;
}

.article-cta-actions {
  margin-top: 32px;
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.article-cta-primary {
  min-width: 260px;
  min-height: 58px;
  border-radius: 18px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, #6d5df6, #8b5cf6);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  text-decoration: none;
  box-shadow:
    0 0 34px rgba(139, 92, 246, 0.32),
    0 18px 40px rgba(91, 75, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.article-cta-primary:hover,
.article-cta-primary:focus-visible {
  color: #fff;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    0 0 42px rgba(139, 92, 246, 0.42),
    0 22px 48px rgba(91, 75, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.article-cta-secondary {
  min-width: 220px;
  min-height: 58px;
  border-radius: 16px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(246, 242, 255, 0.86);
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.article-cta-secondary:hover,
.article-cta-secondary:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(180, 150, 255, 0.22);
  transform: translateY(-1px);
}

.article-faq.eg-article-faq {
  width: min(100% - 48px, 900px);
  margin: clamp(54px, 7vw, 90px) auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.article-faq-heading {
  text-align: center;
  margin-bottom: 28px;
}

.article-faq-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(180, 150, 255, 0.14);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.article-faq-heading h2 {
  margin: 14px 0 0;
  color: #f7f3ff;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 950;
}

.article-faq-heading p {
  margin: 14px auto 0;
  max-width: 620px;
  color: rgba(236, 232, 255, 0.66);
  line-height: 1.55;
}

.article-faq-list {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 22% 0%, rgba(132, 92, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(13, 10, 24, 0.78);
  border: 1px solid rgba(178, 153, 255, 0.22);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.article-faq-entry {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(185, 160, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.article-faq-entry.is-active {
  background:
    radial-gradient(circle at 18% 0%, rgba(132, 92, 255, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.045);
  border-color: rgba(177, 146, 255, 0.26);
}

.article-faq-item {
  width: 100%;
  min-height: 64px;
  border-radius: 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: none;
  background: transparent;
  color: #f7f3ff;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease;
}

.article-faq-item:hover,
.article-faq-item:focus-visible {
  background: rgba(255, 255, 255, 0.035);
}

.article-faq-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(132, 92, 255, 0.12);
  border: 1px solid rgba(178, 153, 255, 0.2);
  color: rgba(190, 166, 255, 0.95);
  font-weight: 900;
  flex: 0 0 auto;
}

.article-faq-question {
  font-weight: 850;
  font-size: 15px;
  line-height: 1.25;
}

.article-faq-arrow {
  color: #a78bfa;
  transition: transform 0.16s ease;
}

.article-faq-item[aria-expanded="true"] .article-faq-arrow {
  transform: rotate(180deg);
}

.article-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin: 0 clamp(18px, 3vw, 30px);
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: rgba(238, 232, 255, 0.72);
  font-size: 15px;
  line-height: 1.6;
  opacity: 0;
  transition:
    grid-template-rows 0.22s ease,
    opacity 0.18s ease,
    padding 0.18s ease,
    margin 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.article-faq-answer.is-open {
  grid-template-rows: 1fr;
  padding: 16px 20px;
  margin: 0 clamp(18px, 3vw, 30px) clamp(20px, 3vw, 28px);
  opacity: 1;
  background: rgba(8, 6, 16, 0.34);
  border-color: rgba(185, 160, 255, 0.1);
}

.article-faq-answer p {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.eg-article-related .eg-blog-card {
  cursor: pointer;
}

@media (max-width: 760px) {
  .article-cta.eg-article-final-cta,
  .article-faq.eg-article-faq {
    width: min(100% - 32px, 980px);
    margin-top: 46px;
    margin-bottom: 46px;
  }

  .article-cta.eg-article-final-cta {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .article-cta h2 {
    font-size: clamp(28px, 8.6vw, 40px);
  }

  .eg-article-inline-cta__actions {
    flex-direction: column;
  }

  .eg-article-inline-cta__button {
    width: 100%;
  }

  .article-faq-list {
    padding: 14px;
    border-radius: 26px;
  }

  .article-faq-item {
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 14px;
  }

  .article-faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .article-faq-answer,
  .article-faq-answer.is-open {
    margin: 0 10px;
  }

  .article-faq-answer.is-open {
    margin-bottom: 14px;
  }
}

@media (max-width: 560px) {
  .article-cta-actions {
    flex-direction: column;
  }

  .article-cta-primary,
  .article-cta-secondary {
    width: 100%;
    min-width: 0;
  }
}

.blog-page {
  --blog-shell-width: min(100% - 48px, 1180px);
  --blog-panel: rgba(18, 17, 28, 0.84);
  --blog-panel-strong: rgba(18, 17, 30, 0.94);
  --blog-line: rgba(180, 150, 255, 0.13);
  --blog-text: #f7f3ff;
  --blog-muted: rgba(236, 232, 255, 0.68);
  --blog-soft: rgba(236, 232, 255, 0.52);
  --blog-pink: #8b5cf6;
  --blog-violet: #8b5cf6;
  --blog-blue: #6ee7f9;
  position: relative;
  overflow: hidden;
  color: var(--blog-text);
  background:
    linear-gradient(180deg, rgba(8, 8, 14, 0.98) 0%, rgba(9, 8, 17, 0.98) 48%, rgba(6, 6, 12, 0.98) 100%),
    url("../img/skies/sky_background-home.png");
  background-size: cover;
  background-position: center top;
  font-family: var(--main-font);
}

.blog-page *,
.blog-page *::before,
.blog-page *::after {
  box-sizing: border-box;
}

.blog-page a {
  color: inherit;
}

.blog-hero,
.blog-toolbar,
.blog-main-layout,
.blog-catalog-cta {
  width: var(--blog-shell-width);
  margin-inline: auto;
}

.blog-hero {
  position: relative;
  min-height: 460px;
  padding: 72px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 64px;
  align-items: center;
}

.blog-hero-content {
  position: relative;
  z-index: 2;
}

.blog-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 16px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.blog-kicker > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blog-pink);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.82);
}

.blog-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 68px;
  line-height: 0.96;
  letter-spacing: 0;
  font-weight: 950;
}

.blog-hero h1 span {
  color: var(--blog-pink);
  text-shadow: 0 0 38px rgba(139, 92, 246, 0.35);
}

.blog-hero p {
  max-width: 580px;
  margin: 26px 0 0;
  color: rgba(236, 232, 255, 0.76);
  font-size: 18px;
  line-height: 1.6;
}

.blog-hero-visual {
  position: relative;
  min-height: 380px;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8, 8, 14, 0.86), rgba(8, 8, 14, 0.22), rgba(8, 8, 14, 0)),
    radial-gradient(circle at 70% 44%, rgba(139, 92, 246, 0.24), transparent 48%),
    url("../img/blog-background.png");
  background-size: 116% auto;
  background-position: center right;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 54px rgba(139, 92, 246, 0.14));
}

.blog-hero-visual::before,
.blog-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-hero-visual::before {
  background: radial-gradient(circle at 65% 42%, rgba(139, 92, 246, 0.14), transparent 38%);
  mix-blend-mode: screen;
}

.blog-hero-visual::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.22)),
    linear-gradient(270deg, rgba(8, 8, 14, 0.02), rgba(8, 8, 14, 0.26) 82%, rgba(8, 8, 14, 0.72));
}

.blog-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
}

.blog-stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "icon strong"
    "icon label";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}

.blog-stat-icon {
  grid-area: icon;
  width: 34px;
  height: 34px;
  color: #b9a7ff;
  filter: drop-shadow(0 0 10px rgba(168, 139, 250, .35));
  opacity: .95;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

.blog-stat:hover .blog-stat-icon {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 14px rgba(185, 167, 255, .5));
}

.blog-stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
}

.blog-search button svg,
.blog-catalog-cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.blog-stat strong {
  grid-area: strong;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.blog-stat span:last-child {
  grid-area: label;
  color: rgba(236, 232, 255, 0.62);
  font-size: 13px;
}

.blog-toolbar {
  margin-bottom: 16px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 20px;
  align-items: center;
  border-radius: 18px;
  background: rgba(12, 11, 20, 0.74);
  border: 1px solid var(--blog-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.blog-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-filter-tab {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 150, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(246, 242, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.blog-filter-tab:hover,
.blog-filter-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.blog-filter-tab.is-active {
  background: linear-gradient(135deg, #6d5df6, #a855f7);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.25);
}

.blog-search {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 5px 7px 5px 14px;
  border-radius: 12px;
  background: rgba(15, 14, 24, 0.82);
  border: 1px solid rgba(180, 150, 255, 0.12);
}

.blog-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f7f3ff;
  font-size: 14px;
}

.blog-search input::placeholder {
  color: rgba(236, 232, 255, 0.48);
}

.blog-search button {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 232, 255, 0.72);
  background: transparent;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.blog-search button:hover,
.blog-search button:focus-visible {
  color: #fff;
  background: rgba(139, 92, 246, 0.18);
}

.blog-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 22px;
  align-items: start;
}

.blog-content-stack {
  min-width: 0;
}

.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.blog-card {
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(20, 19, 32, 0.88), rgba(12, 11, 19, 0.96));
  border: 1px solid var(--blog-line);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 46px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, 0.26);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(139, 92, 246, 0.1);
  color: inherit;
}

.blog-card-cover {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 34%, rgba(139, 92, 246, 0.22), transparent 36%),
    radial-gradient(circle at 72% 55%, rgba(139, 92, 246, 0.24), transparent 42%),
    linear-gradient(135deg, rgba(24, 23, 36, 0.92), rgba(8, 8, 14, 0.98));
}

.blog-card-cover.is-discord {
  background:
    radial-gradient(circle at 24% 34%, rgba(110, 231, 249, 0.16), transparent 34%),
    radial-gradient(circle at 70% 48%, rgba(139, 92, 246, 0.28), transparent 44%),
    linear-gradient(135deg, #141428, #070711);
}

.blog-card-cover.is-games {
  background:
    radial-gradient(circle at 30% 34%, rgba(139, 92, 246, 0.26), transparent 36%),
    radial-gradient(circle at 72% 54%, rgba(64, 121, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #181326, #080811);
}

.blog-card-cover.is-evening {
  background:
    radial-gradient(circle at 28% 34%, rgba(196, 181, 253, 0.2), transparent 36%),
    radial-gradient(circle at 75% 55%, rgba(139, 92, 246, 0.24), transparent 42%),
    linear-gradient(135deg, #1b1324, #080811);
}

.blog-card-cover.is-virtual {
  background:
    radial-gradient(circle at 28% 34%, rgba(110, 231, 249, 0.16), transparent 36%),
    radial-gradient(circle at 72% 55%, rgba(139, 92, 246, 0.22), transparent 42%),
    linear-gradient(135deg, #131827, #080811);
}

.blog-card-cover img {
  width: 100%;
  height: 100%;
  min-height: 138px;
  display: block;
  object-fit: cover;
}

.blog-card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 14, 0.02), rgba(8, 8, 14, 0.46)),
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.14), transparent 14%);
  pointer-events: none;
}

.blog-card-glow {
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow:
    0 0 34px rgba(139, 92, 246, 0.16),
    inset 0 0 28px rgba(139, 92, 246, 0.18);
}

.blog-card-symbol {
  position: absolute;
  right: 16px;
  bottom: 22px;
  max-width: 72%;
  color: rgba(255, 255, 255, 0.15);
  font-size: 34px;
  line-height: 0.95;
  font-weight: 950;
  text-align: right;
}

.blog-card-category {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(139, 92, 246, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4e8ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.blog-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: rgba(236, 232, 255, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.blog-card h3 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: 0;
  font-weight: 900;
}

.blog-card p {
  margin: 0;
  color: rgba(236, 232, 255, 0.68);
  font-size: 13.5px;
  line-height: 1.55;
}

.blog-card-arrow {
  margin-top: auto;
  color: var(--blog-pink);
  font-size: 22px;
  line-height: 1;
  align-self: flex-end;
}

.blog-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

.blog-sidebar-card {
  border-radius: 18px;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.12), transparent 38%),
    var(--blog-panel);
  border: 1px solid var(--blog-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 46px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.blog-sidebar-card h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
}

.blog-topic-list {
  display: grid;
  gap: 4px;
}

.topic-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  padding: 8px 10px;
  transition: background 0.16s ease, transform 0.16s ease;
}

.topic-row:hover,
.topic-row:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(2px);
  color: inherit;
}

.topic-icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(180, 150, 255, 0.12);
}

.topic-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.topic-row strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.topic-row small {
  color: rgba(236, 232, 255, 0.52);
  font-size: 12px;
}

.topic-row-arrow {
  color: rgba(196, 181, 253, 0.62);
  font-size: 24px;
}

.blog-support-card p,
.blog-discord-card p,
.blog-empty-state p,
.blog-catalog-cta p {
  margin: 0;
  color: var(--blog-muted);
  line-height: 1.58;
}

.blog-support-card ul {
  display: grid;
  gap: 9px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.blog-support-card li {
  position: relative;
  padding-left: 22px;
  color: rgba(246, 242, 255, 0.82);
  font-size: 13px;
  font-weight: 760;
}

.blog-support-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(236, 232, 255, 0.72);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.blog-support-button,
.blog-discord-card > a,
.blog-catalog-cta > a,
.blog-empty-link {
  min-height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, #6d5df6, #8b5cf6);
  box-shadow: 0 16px 34px rgba(109, 93, 246, 0.22), 0 0 28px rgba(139, 92, 246, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-support-button,
.blog-discord-card > a {
  width: 100%;
  padding: 0 16px;
}

.blog-support-button:hover,
.blog-support-button:focus-visible,
.blog-discord-card > a:hover,
.blog-discord-card > a:focus-visible,
.blog-catalog-cta > a:hover,
.blog-catalog-cta > a:focus-visible,
.blog-empty-link:hover,
.blog-empty-link:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 20px 44px rgba(109, 93, 246, 0.3), 0 0 34px rgba(139, 92, 246, 0.32);
}

.blog-discord-card {
  overflow: hidden;
}

.blog-discord-art {
  min-height: 126px;
  margin: -4px -4px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10, 9, 18, 0.04), rgba(10, 9, 18, 0.42)),
    radial-gradient(circle at 50% 48%, rgba(139, 92, 246, 0.3), transparent 46%),
    url("../img/discord_3d_neon_icon_transparent.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.blog-discord-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-discord-card h2 span {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.22);
  font-size: 10px;
  font-weight: 900;
}

.blog-discord-card > a {
  margin-top: 18px;
}

.blog-discord-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.blog-discord-stats span {
  min-width: 0;
  color: rgba(236, 232, 255, 0.66);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.blog-discord-stats strong {
  display: block;
  color: #fff;
  font-size: 12px;
}

.blog-catalog-cta {
  margin-top: 16px;
  margin-bottom: 22px;
  padding: 30px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 50%, rgba(139, 92, 246, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(22, 21, 34, 0.86), rgba(10, 10, 16, 0.96));
  border: 1px solid var(--blog-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.26);
}

.blog-catalog-cta-icon {
  width: 76px;
  height: 76px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: #c084fc;
  background:
    radial-gradient(circle at 35% 22%, rgba(238, 230, 255, .22), transparent 42%),
    linear-gradient(145deg, rgba(145, 118, 255, .20), rgba(42, 32, 78, .34)),
    rgba(18, 14, 34, .55);
  border: 1px solid rgba(205, 190, 255, .22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 18px 42px rgba(112, 82, 230, .22),
    0 0 30px rgba(150, 116, 255, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.3));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.blog-catalog-cta:hover .blog-catalog-cta-icon {
  transform: translateY(-2px);
  border-color: rgba(220, 205, 255, .32);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .045) inset,
    0 22px 52px rgba(130, 96, 255, .26),
    0 0 38px rgba(170, 132, 255, .20);
}

.blog-catalog-cta h2,
.blog-empty-state h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
  font-weight: 950;
}

.blog-catalog-cta > a {
  min-width: 220px;
  padding: 0 22px;
}

.blog-empty-state {
  padding: 34px;
  border-radius: 20px;
  background: var(--blog-panel-strong);
  border: 1px solid var(--blog-line);
  text-align: center;
}

.blog-empty-link {
  margin-top: 18px;
  padding: 0 18px;
}

.blog-pagination {
  width: var(--blog-shell-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 22px;
}

.blog-pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 150, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f3efff;
  font-weight: 800;
  text-decoration: none;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus-visible {
  color: #fff;
  border-color: rgba(139, 92, 246, 0.32);
  background: rgba(139, 92, 246, 0.18);
}

@media (max-width: 1080px) {
  .blog-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 28px;
    padding-top: 54px;
  }

  .blog-hero-visual {
    min-height: 300px;
  }

  .blog-toolbar,
  .blog-main-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-discord-card {
    grid-column: 1 / -1;
  }

  .blog-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .blog-page {
    --blog-shell-width: min(100% - 32px, 1180px);
  }

  .blog-hero {
    padding: 40px 0 24px;
  }

  .blog-hero h1 {
    font-size: 52px;
  }

  .blog-hero p {
    font-size: 16px;
  }

  .blog-hero-visual {
    min-height: 250px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
  }

  .blog-toolbar {
    gap: 14px;
  }

  .blog-filter-tabs {
    gap: 8px;
  }

  .blog-filter-tab {
    flex: 1 1 auto;
    min-width: calc(50% - 8px);
  }

  .blog-sidebar,
  .blog-post-grid {
    grid-template-columns: 1fr;
  }

  .blog-discord-card {
    grid-column: auto;
  }

  .blog-catalog-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .blog-catalog-cta-icon {
    margin-inline: auto;
    width: 64px;
    height: 64px;
    padding: 12px;
  }

  .blog-catalog-cta > a {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .blog-hero h1 {
    font-size: 43px;
  }

  .blog-filter-tab {
    min-width: 100%;
  }

  .blog-card-symbol {
    font-size: 28px;
  }

  .blog-discord-stats {
    grid-template-columns: 1fr;
  }
}

.blog-page {
  --eg-purple: #7c5cff;
  --eg-purple-2: #8b5cf6;
  --eg-lavender: #c4b5fd;
  --eg-deep: #0b0a12;
  --eg-card: rgba(18, 17, 28, 0.84);
  --eg-border: rgba(180, 150, 255, 0.14);
  --eg-glow: rgba(139, 92, 246, 0.28);
  --blog-pink: var(--eg-purple-2);
  --blog-violet: var(--eg-purple-2);
  --blog-line: var(--eg-border);
  --blog-panel: var(--eg-card);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.blog-page),
body:has(.blog-page) > main {
  overflow-x: clip;
}

body:has(.blog-page) > main > section.main {
  margin-bottom: 0;
  padding-bottom: 0 !important;
  min-height: 0;
}

body:has(.blog-page) > main > section.main > .container {
  width: min(100%, 1180px);
  max-width: none;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* Full-bleed atmosphere bridge: .blog-hero itself has overflow: hidden
   (needed to clip the 1100px-tall .blog-hero-visual box -- tested
   removing it and the visual's lower portion leaks into the article
   cards grid through the gutters between cards) and is only as wide as
   the page's content column (1180px, centered with ~130px side margins
   at 1440px down to ~16-24px at narrower widths). Everything inside
   .blog-hero's own box gets a dark-purple vignette from .blog-hero::
   before/::after, but the side margins outside it have zero atmosphere
   at all, so heroRect.left/right always reads as a hard boundary no
   matter how that vignette's own gradient is shaped.
   This was first tried as .blog-page::before, but eg-global-background.css
   has `.blog-page::before, .blog-page::after { content: none !important;
   display: none !important; }` -- a deliberate kill-switch so per-page
   decorative pseudo-layers can't double up with that file's own global
   background system. Respecting that, this lives one level up on the
   bare <main> element instead (scoped to blog pages only via the same
   body:has(.blog-page) pattern already used elsewhere in this file).
   <main> is already exactly viewport-width and isn't in that kill-list.
   It also already establishes its own stacking context (position:
   relative + isolation:isolate + z-index:1), so a z-index:-1 child of it
   reliably paints behind .blog-page's own content without escaping
   behind <body>'s base background. Only spans the hero's own vertical
   band (same min-height formula) so it never reaches the cards section
   below, and tapers to fully transparent well before the viewport edges
   and before its own top/bottom -- no edge of its own anywhere -- so the
   margins now carry a faint trace of the same atmosphere instead of
   nothing, bridging the gap. */
body:has(.blog-page) > main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(360px, 38vw, 520px);
  pointer-events: none;
  z-index: -1;
  /* Two edge-anchored glows (strongest at the viewport's own 0%/100%
     edges, fading inward) instead of one center-anchored blob -- a
     center blob is necessarily weak by the time it reaches heroRect.
     left/right (the only place it actually needs to match anything),
     since .blog-hero is itself centered and wide. Anchoring at the
     viewport edges means the margins -- currently literally blank, the
     actual source of the contrast jump -- get the strongest tint, fading
     toward the hero, so there's a real continuation right up to its
     boundary instead of an already-faded wisp. */
  /* ry is deliberately <= 50% of this layer's own height (its vertical
     center is at 50%) so that distance-to-edge / ry is always >= 100%
     of the gradient's own radius -- the top/bottom edges land at or
     past the final, fully-transparent (alpha 0) stop. The previous
     version (ry 88% at center 42%) never actually reached zero before
     the box's real bottom edge (~0.42 alpha left at the edge at 1440px),
     which painted as a hard horizontal line across the full page width
     a little above the hero/toolbar boundary -- confirmed visually as
     the reported "rectangular plate", not a margin-fill artifact. */
  background:
    radial-gradient(
      ellipse 34% 45% at 0% 50%,
      rgba(7, 6, 17, 0.94),
      rgba(7, 6, 17, 0.94) 30%,
      rgba(9, 7, 20, 0.6) 55%,
      rgba(9, 7, 20, 0.22) 78%,
      rgba(7, 6, 17, 0) 100%
    ),
    radial-gradient(
      ellipse 34% 45% at 100% 50%,
      rgba(7, 6, 17, 0.82),
      rgba(7, 6, 17, 0.82) 30%,
      rgba(9, 7, 20, 0.5) 55%,
      rgba(9, 7, 20, 0.18) 78%,
      rgba(7, 6, 17, 0) 100%
    );
}

.blog-page .blog-hero {
  position: relative;
  /* min-height is reduced by exactly the same amount padding-bottom is
     reduced by below (old padding-bottom minus new padding-bottom,
     evaluated at any viewport width) -- align-items: center splits
     leftover vertical space using the padding-adjusted content box, so
     shrinking padding-bottom alone shifts the centered text/stats down
     (confirmed empirically: a flat 44px padding-bottom cut moved h1 and
     .blog-stats down 22px). Cancelling min-height by the same delta
     keeps that leftover space, and therefore the text's vertical
     position, exactly unchanged while still shrinking the box itself
     (the gap to .blog-toolbar below) by the desired amount. */
  min-height: calc(clamp(360px, 38vw, 520px) - clamp(42px, 5vw, 68px) + clamp(18px, 2vw, 28px));
  margin-top: 0 !important;
  padding: clamp(12px, 1.5vw, 24px) 0 clamp(18px, 2vw, 28px) !important;
  display: flex;
  align-items: center;
  overflow: visible;
  background: transparent !important;
  isolation: isolate;
}

.blog-page .blog-hero-content {
  position: relative;
  z-index: 3;
  width: min(100%, 620px);
  min-width: 0;
  max-width: 620px;
}

/* Disabled outright -- these two full-cover gradient overlays (one a
   38%-wide right-side band, one a full-inset double-gradient vignette)
   were each individually defensible (text legibility, edge darkening)
   but together they painted as a visibly darker rectangular region
   distinguishable from the page's own background, reading as a "dark
   plate" behind the hero content. No replacement overlay is added --
   if text-over-image contrast is ever needed again, it should be a
   small local treatment under .blog-hero-content, not a section-wide
   rectangle. */
.blog-page .blog-hero::before,
.blog-page .blog-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Standalone image layer, not a section-wide overlay: sized/positioned
   to sit in the right portion of the hero (clamp-based, so it scales
   continuously with viewport width instead of jumping at a breakpoint),
   vertically centered on the hero itself. Height is now comparable to
   the hero's own height (previously this box was 1100px tall against a
   ~520px hero, which is why .blog-hero needed overflow: hidden in the
   first place) so nothing needs clipping anymore. */
.blog-page .blog-hero-visual {
  position: absolute;
  top: calc(50% - 24px);
  right: clamp(8px, 3vw, 60px);
  left: auto;
  width: clamp(460px, 40vw, 720px);
  height: clamp(320px, 30vw, 500px);
  min-height: 0;
  /* scale(0.8) shrinks the visual to ~80% of its previous size, appended
     to the existing translateY centering transform rather than replacing
     it. transform-origin: center right anchors the scale to the box's
     own right edge (closest to the viewport edge) so it shrinks toward
     the page margin, not toward .blog-hero-content's text on the left. */
  transform: translateY(-50%) scale(0.8);
  transform-origin: center right;
  pointer-events: none;
  z-index: 0;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  isolation: auto;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.blog-page .blog-hero-visual::before {
  content: "";
  position: absolute;
  /* Expands the masked layer 14% past .blog-hero-visual on every side --
     widened from 8% because the smaller opaque core (rx/ry below) was
     cropping into the object's own top/edges. background-size: contain
     still fits the same image, just with more fade room around it. */
  inset: -14%;
  pointer-events: none;
  z-index: 0;
  /* Same active asset as before (blog-background.png, not recreated or
     re-cropped). mix-blend-mode: screen is load-bearing: it's what makes
     the image's own dark, non-transparent fill disappear into the page
     background instead of sitting as an opaque tinted patch. */
  background-image: url("../img/blog-background.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
  opacity: 1;
  mix-blend-mode: screen;
  /* Explicit ellipse radii (rx 40%, ry 38% of this layer's own box,
     which is already 8% bigger than .blog-hero-visual on each side) --
     the previous version omitted rx/ry, which defaults to "farthest-
     corner" sizing. With the center pulled right to 58%, the farthest
     corner is on the LEFT, so the ellipse's overall radius was being
     calibrated against that far/left distance -- on the RIGHT side
     (the near side, where this layer's own edge actually is) the
     gradient hadn't reached its 100%/transparent stop yet by the time
     it hit the box edge, so it just got clipped there: a real, visible
     hard vertical cutoff (confirmed in a screenshot crop right at this
     layer's own right edge). Explicit, smaller, symmetric rx/ry forces
     the fade to complete on EVERY side well inside the box instead. */
  -webkit-mask-image: radial-gradient(
    ellipse 50% 48% at 56% 48%,
    #000 0%,
    #000 64%,
    rgba(0, 0, 0, 0.8) 76%,
    rgba(0, 0, 0, 0.32) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 48% at 56% 48%,
    #000 0%,
    #000 64%,
    rgba(0, 0, 0, 0.8) 76%,
    rgba(0, 0, 0, 0.32) 88%,
    transparent 100%
  );
  filter:
    drop-shadow(0 0 24px rgba(139, 92, 246, 0.2))
    drop-shadow(0 0 60px rgba(88, 28, 135, 0.16));
}

.blog-page .blog-hero-visual::after {
  content: none;
}

.blog-page .blog-hero > :not(.blog-hero-visual),
.blog-page .blog-hero-content,
.blog-page .blog-stats {
  position: relative;
  z-index: 3;
}

.blog-page .blog-kicker {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.18);
  color: var(--eg-lavender);
}

.blog-page .blog-kicker > span:first-child {
  background: var(--eg-purple-2);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.82);
}

.blog-page .blog-hero h1 span {
  color: var(--eg-lavender);
  text-shadow: 0 0 38px rgba(139, 92, 246, 0.36);
}

.blog-page .blog-stat-icon,
.blog-page .blog-card-arrow,
.blog-page .topic-row-arrow,
.blog-page .blog-catalog-cta-icon {
  color: var(--eg-lavender);
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.28));
}

.blog-page .blog-filter-tab:hover,
.blog-page .blog-filter-tab:focus-visible,
.blog-page .blog-card:hover,
.blog-page .blog-card:focus-visible,
.blog-page .footer-social a:hover,
.blog-page .footer-social a:focus-visible {
  border-color: rgba(139, 92, 246, 0.28);
}

.blog-page .blog-filter-tab.is-active,
.blog-page .blog-support-button,
.blog-page .blog-discord-card > a,
.blog-page .blog-catalog-cta > a,
.blog-page .blog-empty-link {
  background: linear-gradient(135deg, var(--eg-purple), var(--eg-purple-2));
  box-shadow:
    0 0 24px rgba(139, 92, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.blog-page .blog-card:hover,
.blog-page .blog-card:focus-visible {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(139, 92, 246, 0.12);
}

.blog-page .blog-card-cover,
.blog-page .blog-card-cover.is-games,
.blog-page .blog-card-cover.is-evening,
.blog-page .blog-card-cover.is-virtual,
.blog-page .blog-card-cover.is-discord {
  background:
    radial-gradient(circle at 28% 34%, rgba(139, 92, 246, 0.24), transparent 36%),
    radial-gradient(circle at 72% 55%, rgba(196, 181, 253, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(24, 23, 36, 0.92), rgba(8, 8, 14, 0.98));
}

.blog-page .blog-card-glow {
  border-color: rgba(139, 92, 246, 0.22);
  box-shadow:
    0 0 34px rgba(139, 92, 246, 0.16),
    inset 0 0 28px rgba(196, 181, 253, 0.12);
}

.blog-page .blog-card-category {
  background: rgba(139, 92, 246, 0.28);
  color: #f4e8ff;
}

.blog-page .blog-catalog-cta {
  background:
    radial-gradient(circle at 12% 50%, rgba(139, 92, 246, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(22, 21, 34, 0.86), rgba(10, 10, 16, 0.96));
}

.blog-page .blog-support-card {
  padding: 22px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 12%, rgba(139, 92, 246, 0.16), transparent 42%),
    rgba(18, 17, 28, 0.84);
  border: 1px solid rgba(180, 150, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 56px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.blog-page .blog-support-kicker {
  margin-bottom: 10px;
  color: var(--eg-lavender);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-page .blog-support-card h3 {
  margin: 0;
  color: #f7f3ff;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 900;
}

.blog-page .blog-support-card p {
  margin: 12px 0 0;
  color: rgba(236, 232, 255, 0.68);
  font-size: 14.5px;
  line-height: 1.55;
}

.blog-page .blog-support-points {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.blog-page .blog-support-points li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 15px;
  color: rgba(236, 232, 255, 0.74);
  font-size: 13px;
  font-weight: 750;
}

.blog-page .blog-support-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
  transform: translateY(-50%);
}

.blog-page .blog-support-button {
  margin-top: 18px;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 850;
}

@media (max-width: 1180px) {
  .blog-page .blog-hero {
    min-height: 620px;
    align-items: flex-start;
  }

  /* .blog-hero-visual intentionally has no override here anymore -- its
     base width/height/right are all clamp()-based now and already scale
     down continuously through this breakpoint without needing a fixed
     900x900px jump (which would otherwise fight the clamp values and
     reintroduce a fixed-size box). */
}

@media (max-width: 900px) {
  .blog-page .blog-hero {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-page .blog-hero::before {
    display: none;
  }

  .blog-page .blog-hero-visual {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: 320px;
    margin-top: 24px;
  }

  .blog-page .blog-hero-visual::before {
    background-position: center;
  }
}

@media (max-width: 720px) {
  .blog-page .blog-hero {
    padding-top: clamp(12px, 1.5vw, 24px) !important;
    padding-bottom: 30px !important;
  }

  .blog-page .blog-hero::after {
    background:
      linear-gradient(180deg, rgba(8, 8, 14, 0.82) 0%, rgba(8, 8, 14, 0.42) 58%, rgba(8, 8, 14, 0.82) 100%),
      radial-gradient(circle at 50% 70%, rgba(139, 92, 246, 0.16), transparent 45%);
  }

  .blog-page {
    overflow-x: hidden;
  }

  .blog-page .blog-hero,
  .blog-page .blog-toolbar,
  .blog-page .blog-main-layout,
  .blog-page .blog-post-grid,
  .blog-page .blog-sidebar,
  .blog-page .blog-catalog-cta,
  .blog-page .blog-pagination,
  .blog-page .blog-card {
    width: calc(100vw - 32px);
    max-width: 100%;
    margin-inline: auto;
  }

  .blog-page .blog-hero-content,
  .blog-page .blog-content-stack {
    width: 100%;
    min-width: 0;
  }

  .blog-page .blog-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    max-width: 100%;
  }

  .blog-page .blog-stat {
    grid-template-columns: 26px minmax(0, 1fr);
    min-width: 0;
  }

  .blog-page .blog-stat:nth-child(3) {
    grid-column: 1 / -1;
  }

  .blog-page .blog-toolbar {
    overflow: hidden;
  }

  .blog-page .blog-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .blog-page .blog-filter-tab {
    width: 100%;
    min-width: 0;
  }

  .blog-page .blog-card-body,
  .blog-page .blog-card h3,
  .blog-page .blog-card p,
  .blog-page .blog-support-card,
  .blog-page .blog-discord-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 460px) {
  .blog-page .blog-hero h1 {
    font-size: 42px;
  }

  .blog-page .blog-stats {
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 280px);
  }

  .blog-page .blog-stat:nth-child(3) {
    grid-column: auto;
  }

  .blog-page .blog-stat {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(180, 150, 255, 0.1);
    border-radius: 14px;
    background: rgba(18, 17, 28, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ── Blog client-side filter ──────────────────────────── */

.blog-grid-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.blog-count-label {
  font-size: 13px;
  color: rgba(236, 232, 255, 0.52);
}

.blog-count-label strong {
  color: rgba(236, 232, 255, 0.80);
  font-weight: 700;
}

.blog-card[hidden] {
  display: none;
}

.blog-card--in {
  animation: blog-card-appear 0.24s ease both;
}

@keyframes blog-card-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.blog-empty-link[data-blog-reset] {
  appearance: none;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card--in {
    animation: none !important;
    transition: none !important;
  }
}