/* ============================================================
   BLOG HERO SECTION & LAYOUTS (.blog-hero-sec)
   ============================================================ */
:root {
  --blog-glow: rgba(124, 255, 107, 0.15);
  --dl-accent: #7cff6b;
  --dl-border: rgba(255, 255, 255, 0.08);
  --dl-card-bg: rgba(15, 23, 42, 0.6);
}

.blog-hero-sec {
  position: relative;
  background: #060908;
  padding: 140px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--dl-border);
}

/* Background graphics */
.blog-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-hero-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 100%);
}

.blog-hero-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
}

.blog-hero-bg__orb--1 {
  top: -10%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
}

.blog-hero-bg__orb--2 {
  bottom: -10%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.blog-hero-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Layout */
.blog-hero-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

/* Left Column */
.blog-hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.blog-badge-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7cff6b;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.25);
  padding: 5px 14px;
  border-radius: 100px;
}

[data-theme="light"] .blog-badge-main {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

.blog-hero-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

.blog-hero-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 580px;
}

.blog-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.btn-explore {
  padding: 12px 24px;
  font-size: 0.92rem;
  border-radius: 12px;
  font-weight: 700;
}

.btn-tutorials {
  padding: 12px 24px;
  font-size: 0.92rem;
  border-radius: 12px;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Search bar component */
.blog-search-bar {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px 14px;
  margin-top: 10px;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
}

.blog-search-bar:focus-within {
  border-color: #7cff6b;
  box-shadow: 0 0 20px rgba(124, 255, 107, 0.2);
}

.search-bar-icon {
  color: #64748b;
  font-size: 1.15rem;
  margin-right: 10px;
  flex-shrink: 0;
}

#blogSearchInput {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.92rem;
  width: 100%;
  padding: 8px 0;
  outline: none;
  font-family: inherit;
}

#blogSearchInput::placeholder {
  color: #64748b;
}

.btn-search-clear {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  display: none;
  padding: 4px;
}

.btn-search-clear:hover {
  color: #fff;
}

/* Categories Chips */
.blog-quick-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.quick-categories-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.categories-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chip {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: #f1f5f9;
  background: #1e293b;
  border: 1px solid #334155;
  padding: 7px 16px;
  border-radius: 100px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 1 !important;
  visibility: visible !important;
}

.category-chip:hover {
  border-color: #7cff6b;
  color: #7cff6b;
  background: rgba(124, 255, 107, 0.12);
  transform: translateY(-1px);
}

.category-chip.active {
  border-color: #7cff6b !important;
  color: #050a0e !important;
  background: #7cff6b !important;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(124, 255, 107, 0.4) !important;
}

/* Right Column (Featured Card) */
.blog-hero-right {
  position: relative;
}

.featured-blog-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-blog-img-wrap {
  position: relative;
  aspect-ratio: 1.7;
  overflow: hidden;
  background: #000;
}

.feat-blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-blog-card:hover .feat-blog-img {
  transform: scale(1.02);
}

.feat-blog-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--dl-accent);
  color: #000000 !important;
  padding: 3px 8px;
  border-radius: 100px;
}

.feat-blog-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feat-blog-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #7cff6b;
  text-transform: uppercase;
}

.feat-blog-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.feat-blog-summary {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.feat-blog-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: 8px;
}

/* Stats strip */
.blog-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 40px;
  margin-top: 40px;
}

.blog-stat-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-stat-num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.blog-stat-text {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: #7cff6b !important;
  line-height: 1.2;
}

.stat-accent {
  color: #7cff6b !important;
  font-weight: 800;
  margin-left: 2px;
}

.blog-stat-label {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .blog-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .blog-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .blog-hero-title {
    font-size: 2.2rem !important;
  }

  .blog-hero-sec__inner {
    padding: 0 20px !important;
  }

  .blog-stats-strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-hero-sec {
  background: #f8fafc;
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .blog-hero-title {
  color: #0f172a;
}

[data-theme="light"] .blog-hero-desc {
  color: #475569;
}

[data-theme="light"] .blog-search-bar {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .blog-search-bar:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .search-bar-icon {
  color: #64748b;
}

[data-theme="light"] #blogSearchInput {
  color: #0f172a;
}

[data-theme="light"] #blogSearchInput::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .btn-search-clear {
  color: #64748b;
}

[data-theme="light"] .btn-search-clear:hover {
  color: #0f172a;
}

[data-theme="light"] .quick-categories-title {
  color: #334155;
  font-weight: 800;
  letter-spacing: 0.06em;
}

[data-theme="light"] .category-chip {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .category-chip:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
  transform: translateY(-1px);
}

[data-theme="light"] .category-chip.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

[data-theme="light"] .featured-blog-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .featured-blog-card:hover {
  border-color: rgba(37, 99, 235, 0.22);
}

[data-theme="light"] .feat-blog-title {
  color: #0f172a;
}

[data-theme="light"] .feat-blog-summary {
  color: #475569;
}

[data-theme="light"] .feat-blog-cat {
  color: #2563eb;
}

[data-theme="light"] .feat-blog-badge,
[data-theme="light"] .feat-hero-card__badge,
[data-theme="light"] .feat-tip-card__badge,
[data-theme="light"] .feat-tut-card__badge { background: #2563eb !important; color: #ffffff !important; }

:root:not([data-theme="light"]) .feat-blog-badge,
:root:not([data-theme="light"]) .feat-hero-card__badge,
:root:not([data-theme="light"]) .feat-tip-card__badge,
:root:not([data-theme="light"]) .feat-tut-card__badge,
[data-theme="dark"] .feat-blog-badge,
[data-theme="dark"] .feat-hero-card__badge,
[data-theme="dark"] .feat-tip-card__badge,
[data-theme="dark"] .feat-tut-card__badge { background: #7cff6b !important; color: #000000 !important; font-weight: 800 !important; }

[data-theme="light"] .blog-search-bar:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.18);
}

[data-theme="light"] .blog-stats-strip {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .blog-stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  border-radius: 20px !important;
}

:root:not([data-theme="light"]) .blog-stat-num,
[data-theme="dark"] .blog-stat-num {
  color: #ffffff !important;
  font-weight: 800 !important;
}

:root:not([data-theme="light"]) .blog-stat-text,
[data-theme="dark"] .blog-stat-text {
  color: #7cff6b !important;
  font-weight: 800 !important;
}

:root:not([data-theme="light"]) .stat-accent,
[data-theme="dark"] .stat-accent {
  color: #7cff6b !important;
  font-weight: 800 !important;
  margin-left: 2px;
}

:root:not([data-theme="light"]) .blog-stat-label,
[data-theme="dark"] .blog-stat-label {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .blog-stat-num {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .blog-stat-text {
  color: #2563eb !important;
  font-weight: 800 !important;
}

[data-theme="light"] .stat-accent {
  color: #2563eb !important;
  font-weight: 800 !important;
  margin-left: 2px;
}

[data-theme="light"] .blog-stat-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="light"] {
  --dl-accent: #2563eb;
}




/* ============================================================
   FEATURED ARTICLES SECTION (.blog-featured-sec)
   ============================================================ */
.blog-featured-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-feat-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-feat-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-feat-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-feat-bg__orb--1 {
  top: 20%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.blog-feat-bg__orb--2 {
  bottom: 15%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.blog-feat-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Section Header Layout */
.dl-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}

.dl-sec-header__left {
  max-width: 720px;
  flex: 1;
}

[data-theme="light"] .dl-view-all,
.dl-view-all {
  white-space: nowrap;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb !important;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
  margin-bottom: 4px;
}

[data-theme="light"] .dl-view-all:hover,
.dl-view-all:hover {
  color: #1d4ed8 !important;
  transform: translateX(3px);
}

[data-theme="dark"] .dl-view-all {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dl-view-all:hover {
  color: #7cff6b !important;
}

/* -- Full-width Hero card -- */
.feat-hero-wrapper {
  margin-bottom: 40px;
}

.feat-hero-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feat-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.feat-hero-card__layout {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  min-height: auto;
  gap: 32px;
  align-items: center;
}

.feat-hero-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #080d1a;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.feat-hero-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  border-radius: 20px;
  transition: transform 0.4s ease;
}

.feat-hero-card:hover .feat-hero-card__img {
  transform: scale(1.02);
}

.feat-hero-card__badge {
  display: none !important;
}

.feat-hero-card__info-panel {
  padding: 16px 24px 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background: transparent;
}

.feat-hero-card__cat {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.feat-hero-card__title {
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.feat-hero-card__desc {
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

.feat-hero-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 4px;
  border: none;
  padding-top: 0;
}

.feat-hero-card__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
}

.bd-read-link {
  color: #2563eb;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.bd-read-link:hover {
  color: #1d4ed8;
  transform: translateX(3px);
}

.btn-feat-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-feat-save-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

/* Dark Theme for Featured Hero Card */
[data-theme="dark"] .feat-hero-card {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .feat-hero-card__info-panel {
  background: #0f172a;
}

[data-theme="dark"] .feat-hero-card__title {
  color: #ffffff;
}

[data-theme="dark"] .feat-hero-card__desc {
  color: #94a3b8;
}

[data-theme="dark"] .feat-hero-card__meta {
  color: #64748b;
}

[data-theme="dark"] .feat-hero-card__badge {
  background: #7cff6b;
  color: #050a0e;
  box-shadow: 0 4px 12px rgba(124, 255, 107, 0.35);
}

[data-theme="dark"] .feat-hero-card__cat {
  color: #7cff6b;
}

[data-theme="dark"] .bd-read-link {
  color: #7cff6b;
}

[data-theme="dark"] .bd-read-link:hover {
  color: #5eff4a;
}

[data-theme="dark"] .btn-feat-save-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

[data-theme="dark"] .btn-feat-save-pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Grid of article cards */
.feat-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.feat-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.feat-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-grid-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feat-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f172a;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.feat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.95;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.feat-grid-card:hover .feat-card-img {
  transform: scale(1.02);
}

.feat-card-badge {
  display: none !important;
}

.feat-card-content {
  padding: 18px 12px 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.feat-card-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.feat-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.feat-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.feat-card-time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.feat-card-actions {
  display: flex;
  gap: 6px;
}

.feat-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feat-action-btn:hover {
  color: var(--dl-accent);
  border-color: rgba(124, 255, 107, 0.3);
}

.btn-feat-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-feat-more:hover {
  color: #fff;
}

/* Popular tags */
.feat-popular-tags {
  margin-bottom: 56px;
}

.tags-section-title {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.tags-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Collections Grid */
.feat-collections-sec {
  margin-bottom: 56px;
}

.collections-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.collection-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.collection-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.collection-icon {
  font-size: 1.6rem;
}

.collection-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.collection-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Statistics */
.news-feat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feat-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.feat-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.feat-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .feat-hero-card__layout {
    grid-template-columns: 1fr !important;
  }

  .feat-articles-grid {
    grid-template-columns: 1fr !important;
  }

  .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .news-feat-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .collections-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-feat-sec__inner {
    padding: 0 20px !important;
  }

  .feat-hero-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-featured-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .feat-hero-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-hero-card__cat {
  color: #2563eb !important;
}

[data-theme="light"] .setup-feat-card__eyebrow {
  color: #2563eb !important;
}

[data-theme="light"] .feat-card-cat {
  color: #2563eb !important;
}

[data-theme="light"] .feat-hero-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-hero-card__desc {
  color: #475569;
}

[data-theme="light"] .feat-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-card-title {
  color: #0f172a;
}

[data-theme="light"] .feat-card-desc {
  color: #475569;
}

[data-theme="light"] .btn-feat-more {
  color: #0f172a;
}

[data-theme="light"] .btn-feat-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .collection-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .collection-title {
  color: #0f172a;
}

[data-theme="light"] .collection-desc {
  color: #475569;
}

[data-theme="light"] .feat-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-stat-label {
  color: #475569;
}


/* ============================================================
   BLOG CATEGORIES SECTION (.blog-categories-sec)
   ============================================================ */
.blog-categories-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-cat-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-cat-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-cat-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-cat-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.blog-cat-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.blog-cat-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Grid of categories (8 items) */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.cat-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.cat-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.cat-card-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.cat-card-icon {
  font-size: 1.8rem;
}

.cat-card-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.cat-card-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.cat-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.cat-art-count {
  font-family: var(--font-mono);
  color: var(--dl-accent);
  font-weight: 600;
}

.btn-explore-cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-explore-cat:hover {
  color: #fff;
}

/* Carousel */
.cats-collections-carousel-sec {
  margin-bottom: 56px;
}

.cats-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.cats-carousel-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.cats-carousel-nav {
  display: flex;
  gap: 8px;
}

.cats-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #131917;
  border: 1px solid var(--dl-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cats-nav-btn:hover {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

.cats-carousel-wrap {
  overflow-hidden;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.cats-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.cats-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.cats-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.cats-carousel-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.cats-carousel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.cats-card-img-wrap {
  position: relative;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #000;
}

.cats-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.cats-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.cats-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cats-card-content h4 {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.cats-card-count {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.btn-cats-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-cats-explore:hover {
  color: #fff;
}

/* Popular Topics */
.cats-popular-topics {
  margin-bottom: 56px;
}

/* Spotlight card */
.cats-spotlight-wrapper {
  margin-bottom: 56px;
}

.cats-spotlight-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, var(--dl-card-bg) 100%);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.spotlight-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  filter: blur(50px);
}

.spotlight-layout {
  position: relative;
  z-index: 2;
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spotlight-cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.spotlight-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.spotlight-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 850px;
}

/* Statistics */
.cats-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cats-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cats-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.cats-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cats-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .cats-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-cat-sec__inner {
    padding: 0 20px !important;
  }

  .cats-spotlight-card {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-categories-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .cat-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .cat-card-title {
  color: #0f172a;
}

[data-theme="light"] .cat-card-desc {
  color: #475569;
}

[data-theme="light"] .btn-explore-cat {
  color: #2563eb !important;
  font-weight: 600;
}

[data-theme="light"] .btn-explore-cat:hover {
  color: #1d4ed8 !important;
}

[data-theme="light"] .cats-nav-btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .cats-carousel-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .cats-carousel-card h4 {
  color: #0f172a;
}

[data-theme="light"] .btn-cats-explore {
  color: #2563eb !important;
  font-weight: 600;
}

[data-theme="light"] .btn-cats-explore:hover {
  color: #1d4ed8 !important;
}

[data-theme="light"] .cats-spotlight-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .spotlight-title {
  color: #0f172a;
}

[data-theme="light"] .spotlight-desc {
  color: #475569;
}

[data-theme="light"] .cats-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .cats-stat-label {
  color: #475569;
}


/* ============================================================
   LATEST BLOG POSTS SECTION (.blog-posts-sec)
   ============================================================ */
.blog-posts-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-posts-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-posts-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-posts-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-posts-bg__orb--1 {
  top: 20%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.blog-posts-bg__orb--2 {
  bottom: 15%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.blog-posts-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Sticky filter bar */
.blog-toolbar {
  position: sticky;
  top: 80px;
  background: rgba(6, 9, 8, 0.85);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  backdrop-filter: blur(16px);
  z-index: 100;
  transition: background var(--dl-trans), border-color var(--dl-trans);
}

.toolbar-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
  display: flex;
  align-items: center;
}

.toolbar-search-icon {
  font-size: 1.1rem;
  color: var(--text-secondary);
  position: absolute;
  left: 14px;
}

#toolbarSearchInput {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--dl-border);
  border-radius: 10px;
  padding: 0 16px 0 42px;
  font-size: 0.82rem;
  color: #fff;
  outline: none;
  transition: border-color var(--dl-trans);
}

#toolbarSearchInput:focus {
  border-color: rgba(124, 255, 107, 0.3);
}

.toolbar-filters {
  display: flex;
  gap: 10px;
}

.filter-select-wrapper {
  position: relative;
}

.filter-select-wrapper select {
  height: 40px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--dl-border);
  border-radius: 10px;
  padding: 0 32px 0 16px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}

.filter-select-wrapper select:hover,
.filter-select-wrapper select:focus {
  border-color: rgba(124, 255, 107, 0.3);
  color: #fff;
}

.filter-select-wrapper::after {
  content: "\ec08";
  font-family: "Phosphor";
  font-weight: 400;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--text-secondary);
  pointer-events: none;
}

/* Post Cards Grid */
.posts-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.post-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.post-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.post-grid-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transition: transform 0.3s ease;
}

.post-grid-card:hover .post-img {
  transform: scale(1.02);
}

.post-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.post-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.post-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.post-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.post-author-row {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dl-accent);
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-size: 0.72rem;
  color: #fff;
  font-weight: 600;
}

.post-meta {
  display: flex;
  gap: 8px;
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
}

.btn-post-read {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-post-read:hover {
  color: #fff;
}

.post-actions {
  display: flex;
  gap: 6px;
}

.post-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.post-action-btn:hover {
  color: var(--dl-accent);
  border-color: rgba(124, 255, 107, 0.3);
}

/* Pagination */
.blog-pagination-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}

.blog-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-link {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.page-link:hover {
  border-color: var(--dl-accent);
  color: var(--dl-accent);
}

.page-numbers {
  display: flex;
  gap: 6px;
}

.page-num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--dl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-num.active,
.page-num:hover {
  border-color: var(--dl-accent);
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.04);
}

.pagination-footer-text {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Featured Blog Banner */
.blog-featured-banner {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.04) 0%, var(--dl-card-bg) 100%);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  margin-bottom: 56px;
}

.featured-banner-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
  filter: blur(50px);
}

.featured-banner-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.featured-banner-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.25);
  padding: 4px 10px;
  border-radius: 100px;
  align-self: flex-start;
}

.featured-banner-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.featured-banner-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 850px;
}

.featured-banner-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

/* Popular Topics */
.blog-popular-topics {
  margin-bottom: 56px;
}

/* Statistics */
.blog-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .blog-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .toolbar-search-wrap {
    max-width: 100% !important;
    width: 100%;
  }

  .toolbar-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .filter-select-wrapper select {
    width: 100%;
  }

  .posts-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .blog-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .toolbar-filters {
    grid-template-columns: 1fr !important;
  }

  .posts-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-posts-sec__inner {
    padding: 0 20px !important;
  }

  .blog-featured-banner {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-posts-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .blog-toolbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] #toolbarSearchInput {
  color: #0f172a;
}

[data-theme="light"] .filter-select-wrapper select {
  color: #475569;
}

[data-theme="light"] .filter-select-wrapper select:hover,
[data-theme="light"] .filter-select-wrapper select:focus {
  color: #0f172a;
}

[data-theme="light"] .post-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .post-title {
  color: #0f172a;
}

[data-theme="light"] .post-desc {
  color: #475569;
}

[data-theme="light"] .author-name {
  color: #0f172a;
}

[data-theme="light"] .btn-post-read {
  color: #0f172a;
}

[data-theme="light"] .btn-post-read:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .page-link {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .page-num {
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .page-num.active,
[data-theme="light"] .page-num:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .blog-featured-banner {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .featured-banner-title {
  color: #0f172a;
}

[data-theme="light"] .featured-banner-desc {
  color: #475569;
}


/* ============================================================
   POPULAR TUTORIALS SECTION (.blog-tutorials-sec)
   ============================================================ */
.blog-tutorials-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-tut-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-tut-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-tut-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-tut-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.blog-tut-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.blog-tut-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* -- Featured card -- */
.tut-featured-wrapper {
  margin-bottom: 40px;
}

.featured-tut-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-tut-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-tut-card__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

.feat-tut-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-tut-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-tut-card:hover .feat-tut-card__img {
  transform: scale(1.02);
}

.feat-tut-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: var(--dl-accent);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 100px;
}

.feat-tut-card__info-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat-tut-card__cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-tut-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.feat-tut-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feat-tut-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dl-accent);
}

.feat-tut-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* Grid of tutorials */
.tuts-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.tut-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tut-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.tut-grid-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tut-card-img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.tut-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transition: transform 0.3s ease;
}

.tut-grid-card:hover .tut-card-img {
  transform: scale(1.02);
}

.tut-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.tut-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tut-card-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.tut-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

/* Progress bar inside card */
.tut-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}

.tut-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.tut-progress-fill {
  height: 100%;
  background: var(--dl-accent);
  border-radius: 10px;
}

.tut-progress-text {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.tut-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.tut-card-meta-txt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tut-card-actions {
  display: flex;
  gap: 6px;
}

.tut-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tut-action-btn:hover {
  color: var(--dl-accent);
  border-color: rgba(124, 255, 107, 0.3);
}

.btn-tut-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-tut-more:hover {
  color: #fff;
}

/* Browse by Difficulty Grid */
.tut-difficulty-row {
  margin-bottom: 56px;
}

.difficulty-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.difficulty-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.difficulty-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.difficulty-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: -2px;
}

.difficulty-status-dot--beg {
  background: #10b981;
}

.difficulty-status-dot--int {
  background: #f59e0b;
}

.difficulty-status-dot--adv {
  background: #ef4444;
}

.difficulty-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.difficulty-card p {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Carousel */
.tut-paths-carousel-sec {
  margin-bottom: 56px;
}

.paths-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.paths-carousel-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.paths-carousel-nav {
  display: flex;
  gap: 8px;
}

.paths-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #131917;
  border: 1px solid var(--dl-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.paths-nav-btn:hover {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

.paths-carousel-wrap {
  overflow-hidden;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.paths-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.paths-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.paths-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.paths-carousel-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.paths-carousel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.paths-card-img-wrap {
  position: relative;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #000;
}

.paths-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.paths-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.paths-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paths-card-content h4 {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.paths-card-lessons {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.btn-paths-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-paths-explore:hover {
  color: #fff;
}

/* Community favorites */
.tut-community-favs {
  margin-bottom: 56px;
}

/* Statistics */
.news-tut-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tut-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tut-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.tut-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .featured-tut-card {
    border-radius: 24px;
  }

  .feat-tut-card__layout {
    grid-template-columns: 1fr !important;
  }

  .tuts-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .difficulty-grid {
    grid-template-columns: 1fr !important;
  }

  .news-tut-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .tuts-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-tut-sec__inner {
    padding: 0 20px !important;
  }

  .feat-tut-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-tutorials-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .featured-tut-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-tut-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-tut-card__desc {
  color: #475569;
}

[data-theme="light"] .tut-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tut-card-title {
  color: #0f172a;
}

[data-theme="light"] .btn-tut-more {
  color: #0f172a;
}

[data-theme="light"] .btn-tut-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .difficulty-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .difficulty-card h4 {
  color: #0f172a;
}

[data-theme="light"] .difficulty-card p {
  color: #475569;
}

[data-theme="light"] .paths-nav-btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .paths-carousel-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .paths-carousel-card h4 {
  color: #0f172a;
}

[data-theme="light"] .btn-paths-explore {
  color: #0f172a;
}

[data-theme="light"] .btn-paths-explore:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .tut-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tut-stat-label {
  color: #475569;
}


/* ============================================================
   BEGINNER GUIDES SECTION (.blog-beginner-sec)
   ============================================================ */
.blog-beginner-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-beg-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-beg-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-beg-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-beg-bg__orb--1 {
  top: 20%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.blog-beg-bg__orb--2 {
  bottom: 15%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.blog-beg-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* -- Featured card -- */
.beg-featured-wrapper {
  margin-bottom: 40px;
}

.featured-beg-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-beg-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-beg-card__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

.feat-beg-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-beg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-beg-card:hover .feat-beg-card__img {
  transform: scale(1.02);
}

.feat-beg-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: var(--dl-accent);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 100px;
}

.feat-beg-card__info-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat-beg-card__cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-beg-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.feat-beg-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feat-beg-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.feat-beg-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* -- Roadmap -- */
.beg-learning-path-sec {
  margin-bottom: 56px;
}

.path-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 32px 0;
  text-align: center;
}

.beg-path-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.beg-path-line-bg {
  position: absolute;
  top: 38px;
  left: 8.33%;
  right: 8.33%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.beg-path-line-fill {
  height: 100%;
  background: var(--dl-accent);
}

.beg-path-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.beg-path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.node-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.beg-path-node.active .node-circle,
.beg-path-node:hover .node-circle {
  border-color: var(--dl-accent);
  color: #ffffff;
  background: var(--dl-accent);
  box-shadow: 0 0 10px var(--dl-accent);
}

.node-label {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  max-width: 130px;
}

.beg-path-node.active .node-label {
  color: #fff;
  font-weight: 700;
}

/* Grid of guides */
.beg-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.beg-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.beg-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.beg-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.beg-card-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.beg-difficulty-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.beg-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.beg-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.btn-beg-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 12px;
}

.btn-beg-more:hover {
  color: #fff;
}

/* Toolkit */
.beg-toolkit-sec {
  margin-bottom: 56px;
}

.toolkit-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.toolkit-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.toolkit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.toolkit-icon {
  font-size: 1.8rem;
}

.toolkit-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.toolkit-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.btn-toolkit-action {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 12px;
}

.btn-toolkit-action:hover {
  color: #fff;
}

/* FAQ Accordion */
.beg-faq-sec {
  margin-bottom: 56px;
}

.faq-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
  text-align: center;
}

.faq-accordion-wrap {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(124, 255, 107, 0.15);
}

.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.faq-trigger span {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.faq-trigger i {
  font-size: 1rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-trigger i {
  transform: rotate(180deg);
  color: var(--dl-accent);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-content p {
  padding: 0 24px 20px 24px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Statistics */
.news-beg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.beg-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.beg-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.beg-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .feat-beg-card__layout {
    grid-template-columns: 1fr !important;
  }

  .beg-guide-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .toolkit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .news-beg-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .beg-path-nodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .beg-path-line-bg {
    display: none;
  }
}

@media (max-width: 640px) {
  .beg-guide-grid {
    grid-template-columns: 1fr !important;
  }

  .toolkit-grid {
    grid-template-columns: 1fr !important;
  }

  .beg-path-nodes {
    grid-template-columns: 1fr !important;
  }

  .blog-beg-sec__inner {
    padding: 0 20px !important;
  }

  .feat-beg-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-beginner-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .featured-beg-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-beg-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-beg-card__desc {
  color: #475569;
}

[data-theme="light"] .node-circle {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .beg-path-node.active .node-circle {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

[data-theme="light"] .beg-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .beg-card-title {
  color: #0f172a;
}

[data-theme="light"] .beg-card-desc {
  color: #475569;
}

[data-theme="light"] .btn-beg-more {
  color: #0f172a;
}

[data-theme="light"] .btn-beg-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .toolkit-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .toolkit-title {
  color: #0f172a;
}

[data-theme="light"] .toolkit-desc {
  color: #475569;
}

[data-theme="light"] .btn-toolkit-action {
  color: #0f172a;
}

[data-theme="light"] .btn-toolkit-action:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .faq-item {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .faq-trigger span {
  color: #0f172a;
}

[data-theme="light"] .faq-content p {
  color: #475569;
}

[data-theme="light"] .beg-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .beg-stat-label {
  color: #475569;
}


/* ============================================================
   EXPERT GUIDES SECTION (.blog-expert-sec)
   ============================================================ */
.blog-expert-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-exp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-exp-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-exp-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-exp-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.blog-exp-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.blog-exp-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* -- Featured card -- */
.exp-featured-wrapper {
  margin-bottom: 40px;
}

.featured-exp-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-exp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-exp-card__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

.feat-exp-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-exp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-exp-card:hover .feat-exp-card__img {
  transform: scale(1.02);
}

.feat-exp-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: var(--dl-accent);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 100px;
}

.feat-exp-card__info-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat-exp-card__cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-exp-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.feat-exp-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feat-exp-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.verify-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dl-accent);
}

.feat-exp-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* Grid of expert cards */
.exps-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.exp-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.exp-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.exp-grid-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.exp-card-img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.exp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transition: transform 0.3s ease;
}

.exp-grid-card:hover .exp-card-img {
  transform: scale(1.02);
}

.exp-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.exp-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.exp-card-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.exp-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.exp-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.exp-card-meta-row {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.exp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.exp-card-actions {
  display: flex;
  gap: 6px;
}

.exp-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exp-action-btn:hover {
  color: var(--dl-accent);
  border-color: rgba(124, 255, 107, 0.3);
}

.btn-exp-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-exp-more:hover {
  color: #fff;
}

/* Tracks */
.exp-tracks-sec {
  margin-bottom: 56px;
}

.tracks-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.tracks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.track-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.track-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.track-icon {
  font-size: 1.8rem;
}

.track-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.track-card p {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Code Snippet Console */
.exp-code-section {
  margin-bottom: 56px;
}

.code-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.code-console-box {
  background: #0b0f0d;
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  overflow: hidden;
}

.code-console-tabs {
  display: flex;
  border-bottom: 1px solid var(--dl-border);
  background: #0f1512;
}

.console-tab {
  background: none;
  border: none;
  padding: 14px 20px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border-right: 1px solid var(--dl-border);
  transition: all 0.2s ease;
}

.console-tab.active,
.console-tab:hover {
  background: #0b0f0d;
  color: #fff;
}

.console-tab.active {
  border-bottom: 2px solid var(--dl-accent);
}

.code-console-content {
  padding: 24px;
}

.console-panel {
  display: none;
}

.console-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.panel-header span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.btn-copy-code {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-copy-code:hover {
  border-color: var(--dl-accent);
  color: var(--dl-accent);
}

.console-panel pre {
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border-radius: 10px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.console-panel code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--dl-accent);
  line-height: 1.5;
}

/* Recommended tools grid */
.exp-tools-sec {
  margin-bottom: 56px;
}

.tools-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tool-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 107, 0.22);
}

.tool-logo {
  font-size: 1.5rem;
}

.tool-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.tool-info h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tool-info p {
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 0;
}

.tool-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.tool-actions a,
.btn-tool-doc {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tool-actions a:hover,
.btn-tool-doc:hover {
  color: #fff;
}

/* Statistics */
.news-exp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.exp-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.exp-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.exp-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .featured-exp-card {
    border-radius: 24px;
  }

  .feat-exp-card__layout {
    grid-template-columns: 1fr !important;
  }

  .exps-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tracks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tools-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .news-exp-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .exps-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .tools-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-exp-sec__inner {
    padding: 0 20px !important;
  }

  .feat-exp-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-expert-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .featured-exp-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-exp-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-exp-card__desc {
  color: #475569;
}

[data-theme="light"] .exp-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .exp-grid-card h4 {
  color: #0f172a;
}

[data-theme="light"] .exp-grid-card p {
  color: #475569;
}

[data-theme="light"] .btn-exp-more {
  color: #0f172a;
}

[data-theme="light"] .btn-exp-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .track-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .track-card h4 {
  color: #0f172a;
}

[data-theme="light"] .track-card p {
  color: #475569;
}

[data-theme="light"] .code-console-box {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .code-console-tabs {
  background: #f8fafc;
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .console-tab {
  border-right-color: rgba(15, 23, 42, 0.07);
  color: #475569;
}

[data-theme="light"] .console-tab.active,
[data-theme="light"] .console-tab:hover {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .console-panel pre {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .tool-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tool-info h4 {
  color: #0f172a;
}

[data-theme="light"] .tool-info p {
  color: #475569;
}

[data-theme="light"] .exp-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .exp-stat-label {
  color: #475569;
}


/* ============================================================
   IPTV LEARNING CENTER SECTION (.blog-iptv-sec)
   ============================================================ */
.blog-iptv-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-iptv-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-iptv-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-iptv-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-iptv-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.blog-iptv-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.blog-iptv-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* -- Featured card -- */
.iptv-featured-wrapper {
  margin-bottom: 40px;
}

.featured-iptv-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-iptv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-iptv-card__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

.feat-iptv-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-iptv-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-iptv-card:hover .feat-iptv-card__img {
  transform: scale(1.02);
}

.feat-iptv-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: var(--dl-accent);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 100px;
}

.feat-iptv-card__info-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat-iptv-card__cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-iptv-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.feat-iptv-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feat-iptv-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.feat-iptv-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* Grid of modules */
.iptv-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.iptv-mod-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.iptv-mod-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.iptv-mod-card__inner {
  padding: 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
}

.mod-icon {
  font-size: 1.8rem;
}

.iptv-mod-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.iptv-mod-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.iptv-mod-diff {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.iptv-mod-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.iptv-mod-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.iptv-mod-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}

.iptv-mod-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.iptv-mod-progress-fill {
  height: 100%;
  background: var(--dl-accent);
  border-radius: 10px;
}

.iptv-mod-progress-txt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.btn-iptv-mod-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 10px;
}

.btn-iptv-mod-more:hover {
  color: #fff;
}

/* KB Carousel */
.iptv-kb-carousel-sec {
  margin-bottom: 56px;
}

.kb-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.kb-carousel-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.kb-carousel-nav {
  display: flex;
  gap: 8px;
}

.kb-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #131917;
  border: 1px solid var(--dl-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kb-nav-btn:hover {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

.kb-carousel-wrap {
  overflow-hidden;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kb-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.kb-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.kb-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.kb-carousel-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.kb-carousel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.kb-carousel-card .kb-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-carousel-card h4 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.kb-carousel-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.btn-kb-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-kb-explore:hover {
  color: #fff;
}

/* Device Grid compatibility cards */
.iptv-devices-sec {
  margin-bottom: 56px;
}

.devices-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.device-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.device-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.device-icon {
  font-size: 1.8rem;
}

.device-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.device-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.compat-status {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 100px;
}

.status-high {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
}

.status-partial {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}

.difficulty-level {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.btn-device-guide {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-device-guide:hover {
  color: #fff;
}

/* Glossary console */
.iptv-glossary-sec {
  margin-bottom: 56px;
}

.glossary-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.glossary-box {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  padding: 28px;
}

.glossary-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

#glossarySearchInput {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--dl-border);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 0.88rem;
  color: #fff;
  outline: none;
  transition: border-color var(--dl-trans);
}

#glossarySearchInput:focus {
  border-color: rgba(124, 255, 107, 0.3);
}

.glossary-alpha-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alpha-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--dl-border);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alpha-btn.active,
.alpha-btn:hover {
  border-color: var(--dl-accent);
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.04);
}

.glossary-items-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.glossary-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.glossary-item:hover {
  border-color: rgba(124, 255, 107, 0.15);
}

.glossary-trigger {
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.glossary-trigger span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.glossary-trigger i {
  font-size: 0.94rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.glossary-item.active .glossary-trigger i {
  transform: rotate(45deg);
  color: var(--dl-accent);
}

.glossary-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.glossary-content p {
  padding: 0 20px 16px 20px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Statistics */
.news-iptv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.iptv-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.iptv-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.iptv-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .featured-iptv-card {
    border-radius: 24px;
  }

  .feat-iptv-card__layout {
    grid-template-columns: 1fr !important;
  }

  .iptv-modules-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .devices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .glossary-items-wrap {
    grid-template-columns: 1fr !important;
  }

  .news-iptv-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .iptv-modules-grid {
    grid-template-columns: 1fr !important;
  }

  .devices-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-iptv-sec__inner {
    padding: 0 20px !important;
  }

  .feat-iptv-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-iptv-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .featured-iptv-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-iptv-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-iptv-card__desc {
  color: #475569;
}

[data-theme="light"] .iptv-mod-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .iptv-mod-title {
  color: #0f172a;
}

[data-theme="light"] .iptv-mod-desc {
  color: #475569;
}

[data-theme="light"] .btn-iptv-mod-more {
  color: #0f172a;
}

[data-theme="light"] .btn-iptv-mod-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .kb-nav-btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .kb-carousel-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .kb-carousel-card h4 {
  color: #0f172a;
}

[data-theme="light"] .kb-carousel-card p {
  color: #475569;
}

[data-theme="light"] .btn-kb-explore {
  color: #0f172a;
}

[data-theme="light"] .btn-kb-explore:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .device-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .device-card h4 {
  color: #0f172a;
}

[data-theme="light"] .btn-device-guide {
  color: #0f172a;
}

[data-theme="light"] .btn-device-guide:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .glossary-box {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] #glossarySearchInput {
  color: #0f172a;
}

[data-theme="light"] .alpha-btn {
  color: #475569;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .glossary-item {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .glossary-trigger span {
  color: #0f172a;
}

[data-theme="light"] .glossary-content p {
  color: #475569;
}

[data-theme="light"] .iptv-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .iptv-stat-label {
  color: #475569;
}


/* ============================================================
   STREAMING TIPS & TRICKS SECTION (.blog-tips-sec)
   ============================================================ */
.blog-tips-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* -- Background -- */
.blog-tips-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-tips-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-tips-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-tips-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.blog-tips-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.blog-tips-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* -- Featured card -- */
.tips-featured-wrapper {
  margin-bottom: 40px;
}

.featured-tip-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.featured-tip-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.feat-tip-card__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

.feat-tip-card__img-panel {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-tip-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.featured-tip-card:hover .feat-tip-card__img {
  transform: scale(1.02);
}

.feat-tip-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--dl-accent);
  color: #000000 !important;
  padding: 4px 10px;
  border-radius: 100px;
}

.feat-tip-card__info-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feat-tip-card__cat {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.feat-tip-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.feat-tip-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feat-tip-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 14px;
}

.feat-tip-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* Grid of tips */
.tips-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.tip-grid-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tip-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.tip-grid-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tip-card-img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.tip-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transition: transform 0.3s ease;
}

.tip-grid-card:hover .tip-card-img {
  transform: scale(1.02);
}

.tip-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.tip-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tip-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.tip-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.tip-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.tip-card-meta-txt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tip-card-actions {
  display: flex;
  gap: 6px;
}

.tip-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tip-action-btn:hover {
  color: var(--dl-accent);
  border-color: rgba(124, 255, 107, 0.3);
}

.btn-tips-more {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.btn-tips-more:hover {
  color: #fff;
}

/* Quick Tips Carousel */
.quick-tips-carousel-sec {
  margin-bottom: 56px;
}

.quick-tips-carousel-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.quick-tips-carousel-wrap {
  overflow-hidden;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.quick-tips-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.quick-tips-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.quick-tips-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.quick-tip-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.quick-tip-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.qt-icon {
  font-size: 1.8rem;
}

.quick-tip-card h4 {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.quick-tip-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.btn-qt-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 8px;
}

.btn-qt-explore:hover {
  color: #fff;
}

/* Tips by Device */
.tips-devices-sec {
  margin-bottom: 56px;
}

.tip-dev-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tip-dev-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dev-icon {
  font-size: 1.8rem;
}

.tip-dev-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.dev-tips-count {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.btn-view-dev-tips {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 8px;
}

.btn-view-dev-tips:hover {
  color: #fff;
}

/* Split Ranked Row */
.tips-split-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}

.weekly-tips-col,
.favs-stats-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.weekly-tips-title,
.stats-col-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.weekly-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.weekly-tips-list li {
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  padding: 14px 20px;
}

.rank-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dl-accent);
}

.rank-txt {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.favs-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .feat-tip-card__layout {
    grid-template-columns: 1fr !important;
  }

  .tips-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tips-split-row {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .tips-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-tips-sec__inner {
    padding: 0 20px !important;
  }

  .feat-tip-card__info-panel {
    padding: 24px !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-tips-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .featured-tip-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .feat-tip-card__title {
  color: #0f172a;
}

[data-theme="light"] .feat-tip-card__desc {
  color: #475569;
}

[data-theme="light"] .tip-grid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tip-card-title {
  color: #0f172a;
}

[data-theme="light"] .tip-card-desc {
  color: #475569;
}

[data-theme="light"] .btn-tips-more {
  color: #0f172a;
}

[data-theme="light"] .btn-tips-more:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .quick-tip-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .quick-tip-card h4 {
  color: #0f172a;
}

[data-theme="light"] .quick-tip-card p {
  color: #475569;
}

[data-theme="light"] .btn-qt-explore {
  color: #0f172a;
}

[data-theme="light"] .btn-qt-explore:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .tip-dev-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tip-dev-card h4 {
  color: #0f172a;
}

[data-theme="light"] .btn-view-dev-tips {
  color: #0f172a;
}

[data-theme="light"] .btn-view-dev-tips:hover {
  color: var(--dl-accent);
}

[data-theme="light"] .weekly-tips-list li {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .rank-txt {
  color: #0f172a;
}

[data-theme="light"] .tips-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tips-stat-label {
  color: #475569;
}


/* ============================================================
   DEVICE SETUP GUIDES SECTION (.blog-setup-sec)
   ============================================================ */

.blog-setup-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background */
.setup-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.setup-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 100%);
}

.setup-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.setup-bg__orb--1 {
  top: 10%;
  left: 0;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.025) 0%, transparent 70%);
}

.setup-bg__orb--2 {
  bottom: 5%;
  right: 0;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
}

.setup-bg__circuit {
  position: absolute;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect x='10' y='10' width='180' height='180' rx='12' fill='none' stroke='%237CFF6B' stroke-width='1'/%3E%3Cline x1='100' y1='10' x2='100' y2='190' stroke='%237CFF6B' stroke-width='0.5'/%3E%3Cline x1='10' y1='100' x2='190' y2='100' stroke='%237CFF6B' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.blog-setup-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Featured Hero Card ── */
.setup-featured-wrap {
  margin-bottom: 52px;
}

.setup-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.setup-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.setup-feat-card__visual {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.setup-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.4s ease;
}

.setup-feat-card:hover .setup-feat-card__img {
  transform: scale(1.025);
}

.setup-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--dl-card-bg) 100%);
}

.setup-feat-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--dl-accent);
  color: #0a0f0d;
  padding: 4px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.setup-feat-platform-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}

.setup-feat-card__copy {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup-feat-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.setup-feat-card__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.setup-feat-card__desc {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.setup-difficulty-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
}

.setup-difficulty-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  border-radius: 100px;
  transition: width 1s ease;
}

.setup-difficulty-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  display: block;
  margin-top: 6px;
}

.setup-feat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.setup-feat-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* ── Device Grid (4-col) ── */
.setup-device-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.setup-dev-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.setup-dev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.setup-dev-card__img-wrap {
  position: relative;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #000;
}

.setup-dev-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.35s ease;
}

.setup-dev-card:hover .setup-dev-card__img {
  transform: scale(1.03);
}

.setup-dev-platform-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.setup-dev-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.setup-dev-card__name {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.setup-dev-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setup-dev-guides-count {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--dl-accent);
}

.setup-dev-diff-badge {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 100px;
}

.diff-beginner {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.diff-intermediate {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.diff-advanced {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.setup-dev-progress-wrap {
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.setup-dev-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  border-radius: 100px;
}

.setup-dev-updated {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.btn-setup-view-guides {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-setup-view-guides:hover,
.setup-dev-card:hover .btn-setup-view-guides {
  color: #1d4ed8 !important;
  transform: translateX(5px);
}

[data-theme="dark"] .btn-setup-view-guides {
  color: #38bdf8;
}

[data-theme="dark"] .btn-setup-view-guides:hover,
[data-theme="dark"] .setup-dev-card:hover .btn-setup-view-guides {
  color: #60a5fa !important;
  transform: translateX(5px);
}

/* ── Setup Wizard ── */
.setup-wizard-sec {
  margin-bottom: 56px;
}

.setup-wizard-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.setup-wizard-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-wizard-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.setup-wizard-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.setup-wizard-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.setup-wizard-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.setup-wizard-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.setup-wizard-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.setup-wizard-step.active {
  border-color: rgba(124, 255, 107, 0.35);
  background: rgba(124, 255, 107, 0.06);
}

.setup-wizard-step.done {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}

.wizard-step-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-secondary);
}

.wizard-step-icon {
  font-size: 1.6rem;
}

.wizard-step-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.wizard-step-check {
  font-size: 1rem;
  color: var(--dl-accent);
  display: none;
}

.setup-wizard-step.done .wizard-step-check {
  display: inline;
}

.wizard-step-num,
.wizard-step-icon,
.wizard-step-label {
  display: block;
}

.setup-wizard-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── Popular Setup Guides Carousel ── */
.popular-guides-sec {
  margin-bottom: 56px;
}

.popular-guides-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.popular-guides-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.popular-guides-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.popular-guides-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.popular-guides-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.pop-guide-card {
  width: 260px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.pop-guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.pop-guide-card__img-wrap {
  aspect-ratio: 1.8;
  overflow: hidden;
}

.pop-guide-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.35s ease;
}

.pop-guide-card:hover .pop-guide-card__img {
  transform: scale(1.04);
}

.pop-guide-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.pop-guide-diff {
  font-size: 0.58rem;
}

.pop-guide-card__body h4 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.pop-guide-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-pop-guide-open {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 6px;
}

.btn-pop-guide-open:hover {
  color: #fff;
}

/* ── Quick Troubleshooting ── */
.quick-trouble-sec {
  margin-bottom: 56px;
}

.quick-trouble-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.quick-trouble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.trouble-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.trouble-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.25);
}

.trouble-icon {
  font-size: 2rem;
}

.trouble-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.trouble-card p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.btn-trouble-fix {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #ef4444;
  background: none;
  border: none;
  align-self: flex-start;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  padding-top: 6px;
}

.btn-trouble-fix:hover {
  color: #fff;
}

/* ── Compatibility Table ── */
.setup-compat-table-sec {
  margin-bottom: 56px;
}

.setup-compat-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.setup-compat-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.setup-compat-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.compat-filter-btn {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.compat-filter-btn.active,
.compat-filter-btn:hover {
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
}

.setup-compat-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--dl-border);
}

.setup-compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  background: var(--dl-card-bg);
}

.setup-compat-table thead th {
  text-align: left;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.01);
  white-space: nowrap;
}

.setup-compat-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s ease;
}

.setup-compat-table tbody tr:last-child {
  border-bottom: none;
}

.setup-compat-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.setup-compat-table td {
  padding: 14px 20px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.compat-dev-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.compat-yes {
  color: #22c55e;
  font-weight: 700;
}

.compat-partial {
  color: #fbbf24;
  font-weight: 700;
}

.compat-no {
  color: #ef4444;
  font-weight: 700;
}

.btn-compat-guide {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-compat-guide:hover {
  color: #fff;
}

.setup-compat-table tr.hidden {
  display: none;
}

/* ── Device Statistics ── */
.setup-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.setup-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.setup-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.setup-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.setup-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.setup-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .setup-feat-card {
    grid-template-columns: 1fr !important;
  }

  .setup-device-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .setup-wizard-steps {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .setup-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .setup-device-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .setup-wizard-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .quick-trouble-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .setup-compat-table-header {
    flex-direction: column !important;
  }

  .blog-setup-sec__inner {
    padding: 0 20px !important;
  }

  .setup-feat-card__copy {
    padding: 28px !important;
  }

  .setup-wizard-card {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .setup-device-grid {
    grid-template-columns: 1fr !important;
  }

  .setup-wizard-steps {
    grid-template-columns: 1fr !important;
  }

  .quick-trouble-grid {
    grid-template-columns: 1fr !important;
  }

  .setup-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme */
[data-theme="light"] .blog-setup-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .setup-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .setup-feat-card__title {
  color: #0f172a;
}

[data-theme="light"] .setup-feat-card__desc {
  color: #475569;
}

[data-theme="light"] .setup-dev-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .setup-dev-card__name {
  color: #0f172a;
}

[data-theme="light"] .setup-wizard-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .setup-wizard-title {
  color: #0f172a;
}

[data-theme="light"] .wizard-step-label {
  color: #0f172a;
}

[data-theme="light"] .pop-guide-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .pop-guide-card__body h4 {
  color: #0f172a;
}

[data-theme="light"] .trouble-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .trouble-card h4 {
  color: #0f172a;
}

[data-theme="light"] .trouble-card p {
  color: #475569;
}

[data-theme="light"] .setup-compat-table {
  background: #fff;
}

[data-theme="light"] .setup-compat-table thead th {
  background: #f8fafc;
}

[data-theme="light"] .compat-dev-name {
  color: #0f172a;
}

[data-theme="light"] .setup-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .setup-stat-label {
  color: #475569;
}


/* ============================================================
   SOFTWARE REVIEWS SECTION (.blog-swrev-sec)
   ============================================================ */

.blog-swrev-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background */
.swrev-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.swrev-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 20%, transparent 100%);
}

.swrev-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.swrev-bg__orb--1 {
  top: 5%;
  left: 2%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.025) 0%, transparent 70%);
}

.swrev-bg__orb--2 {
  bottom: 5%;
  right: 2%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
}

.blog-swrev-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Featured Review Card ── */
.swrev-feat-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 56px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.swrev-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 204, 21, 0.22);
}

.swrev-feat-card__visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.swrev-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.4s ease;
}

.swrev-feat-card:hover .swrev-feat-card__img {
  transform: scale(1.025);
}

.swrev-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--dl-card-bg) 100%);
}

.swrev-feat-badges-wrap {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swrev-editor-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #0a0a0a;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.swrev-software-badge {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}

.swrev-feat-stars {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.swrev-stars-row {
  color: #fbbf24;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.swrev-feat-score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.swrev-feat-card__copy {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.swrev-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
}

.swrev-feat-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.swrev-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Mini score bars */
.swrev-feat-mini-scores {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swrev-mini-score-row {
  display: grid;
  grid-template-columns: 100px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.swrev-mini-score-row>span:first-child {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.swrev-mini-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
}

.swrev-mini-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  border-radius: 100px;
  transition: width 1.2s ease;
}

.swrev-mini-val {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dl-accent);
  text-align: right;
}

.swrev-feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.swrev-feat-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.swrev-plat-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 100px;
}

.swrev-plat-badge.sm {
  font-size: 0.85rem;
  padding: 2px 6px;
}

.swrev-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Category Grid (4-col) ── */
.swrev-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}

.swrev-cat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.swrev-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 204, 21, 0.25);
}

.swrev-cat-icon {
  font-size: 2rem;
}

.swrev-cat-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.swrev-cat-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dl-accent);
}

.btn-swrev-cat-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-swrev-cat-explore:hover {
  color: #fff;
}

/* ── Latest Reviews Grid (3-col) ── */
.swrev-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.swrev-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.swrev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 204, 21, 0.22);
}

.swrev-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.swrev-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.35s ease;
}

.swrev-card:hover .swrev-card__img {
  transform: scale(1.03);
}

.swrev-card__score-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 900;
  color: #0a0a0a;
  background: #fbbf24;
  padding: 4px 10px;
  border-radius: 100px;
}

.swrev-card__score-badge.top {
  background: var(--dl-accent);
  color: #000000 !important;
  font-weight: 900;
}

.swrev-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.swrev-card__head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.swrev-card__sw-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.swrev-logo-kodi {
  background: linear-gradient(135deg, #17aeff, #1e4eff);
}

.swrev-logo-plex {
  background: linear-gradient(135deg, #e5a00d, #e5750d);
}

.swrev-logo-jellyfin {
  background: linear-gradient(135deg, #9b59b6, #6c3483);
}

.swrev-logo-emby {
  background: linear-gradient(135deg, #52b54b, #1e8449);
}

.swrev-logo-smarters {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  font-size: 0.55rem;
}

.swrev-logo-tivimate {
  background: linear-gradient(135deg, #3498db, #1a5276);
}

.swrev-card__name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.swrev-card__stars {
  color: #fbbf24;
  font-size: 0.72rem;
  letter-spacing: 1px;
}

.swrev-card__score-wrap {
  margin-left: auto;
}

.swrev-card__score {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fbbf24;
}

.swrev-card__score span {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.swrev-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.swrev-card__plat-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.swrev-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 12px;
  margin-top: auto;
}

.swrev-card__updated {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-swrev-read-card {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-swrev-read-card:hover {
  color: #fff;
}

/* ── Score Breakdown (Circular) ── */
.swrev-scores-sec {
  margin-bottom: 56px;
}

.swrev-scores-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 28px 0;
}

.swrev-scores-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.swrev-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.swrev-circle-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.swrev-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.swrev-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 6;
}

.swrev-circle-fill {
  fill: none;
  stroke: var(--dl-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swrev-circle-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 900;
  color: #fff;
}

.swrev-score-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}

/* ── Pros & Cons ── */
.swrev-proscons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 56px;
}

.swrev-pros-card,
.swrev-cons-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  padding: 32px;
}

.swrev-pros-card {
  border-color: rgba(34, 197, 94, 0.15);
}

.swrev-cons-card {
  border-color: rgba(239, 68, 68, 0.15);
}

.swrev-pros-title,
.swrev-cons-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.swrev-pros-icon,
.swrev-cons-icon {
  font-size: 1.2rem;
}

.swrev-pros-list,
.swrev-cons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.swrev-pros-list li,
.swrev-cons-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.swrev-pros-list .ph-fill {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
}

.swrev-cons-list .ph-fill {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Compare Table ── */
.swrev-compare-sec {
  margin-bottom: 56px;
}

.swrev-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.swrev-compare-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.swrev-compare-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.swrev-filter-btn {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swrev-filter-btn.active,
.swrev-filter-btn:hover {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.3);
  color: #fbbf24;
}

.swrev-compare-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--dl-border);
}

.swrev-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  background: var(--dl-card-bg);
}

.swrev-compare-table thead th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.01);
  white-space: nowrap;
}

.swrev-compare-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.swrev-compare-table tbody tr:last-child {
  border-bottom: none;
}

.swrev-compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.swrev-compare-table td {
  padding: 13px 18px;
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

.swrev-tbl-name {
  color: #fff;
  font-weight: 700;
}

.swrev-tbl-score {
  font-weight: 700;
  color: #fbbf24;
}

.swrev-tbl-score.accent {
  color: var(--dl-accent);
}

.swrev-free-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #22c55e;
}

.swrev-compare-table tr.hidden {
  display: none;
}

/* ── Editor's Recs Carousel ── */
.swrev-recs-sec {
  margin-bottom: 56px;
}

.swrev-recs-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.swrev-recs-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.swrev-recs-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.swrev-recs-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.swrev-recs-carousel {
  display: flex;
  gap: 20px;
  width: max-content;
}

.swrev-rec-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.swrev-rec-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 204, 21, 0.22);
}

.swrev-rec-badge {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

.swrev-rec-logo {
  font-size: 1.8rem;
}

.swrev-rec-card h4 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.swrev-rec-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.btn-swrev-rec {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-swrev-rec:hover {
  color: #fff;
}

/* ── Stats Grid ── */
.swrev-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.swrev-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.swrev-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 204, 21, 0.2);
}

.swrev-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}

.swrev-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}

.swrev-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .swrev-feat-card {
    grid-template-columns: 1fr !important;
  }

  .swrev-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .swrev-latest-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .swrev-scores-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .swrev-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .swrev-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .swrev-latest-grid {
    grid-template-columns: 1fr !important;
  }

  .swrev-proscons-row {
    grid-template-columns: 1fr !important;
  }

  .swrev-scores-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .blog-swrev-sec__inner {
    padding: 0 20px !important;
  }

  .swrev-feat-card__copy {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .swrev-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .swrev-scores-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .swrev-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme */
[data-theme="light"] .blog-swrev-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .swrev-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .swrev-feat-title {
  color: #0f172a;
}

[data-theme="light"] .swrev-feat-desc {
  color: #475569;
}

[data-theme="light"] .swrev-cat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .swrev-cat-title {
  color: #0f172a;
}

[data-theme="light"] .swrev-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .swrev-card__name {
  color: #0f172a;
}

[data-theme="light"] .swrev-card__desc {
  color: #475569;
}

[data-theme="light"] .swrev-pros-card {
  background: #fff;
}

[data-theme="light"] .swrev-cons-card {
  background: #fff;
}

[data-theme="light"] .swrev-pros-title {
  color: #0f172a;
}

[data-theme="light"] .swrev-cons-title {
  color: #0f172a;
}

[data-theme="light"] .swrev-compare-table {
  background: #fff;
}

[data-theme="light"] .swrev-compare-table thead th {
  background: #f8fafc;
}

[data-theme="light"] .swrev-tbl-name {
  color: #0f172a;
}

[data-theme="light"] .swrev-rec-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .swrev-rec-card h4 {
  color: #0f172a;
}

[data-theme="light"] .swrev-rec-card p {
  color: #475569;
}

[data-theme="light"] .swrev-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .swrev-stat-label {
  color: #475569;
}


/* ============================================================
   COMPARISONS SECTION (.blog-comp-sec)
   ============================================================ */

.blog-comp-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background */
.comp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.comp-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 20%, transparent 100%);
}

.comp-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.comp-bg__orb--1 {
  top: 8%;
  left: 2%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.03) 0%, transparent 70%);
}

.comp-bg__orb--2 {
  bottom: 5%;
  right: 2%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
}

.comp-bg__lines {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background: repeating-linear-gradient(45deg, rgba(124, 255, 107, 0.5) 0px, rgba(124, 255, 107, 0.5) 1px, transparent 1px, transparent 60px);
}

.blog-comp-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Featured Comparison Hero ── */
.comp-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.comp-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, 0.25);
}

/* Visual: split side-by-side */
.comp-feat-card__visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.comp-feat-side {
  position: relative;
  overflow: hidden;
}

.comp-feat-side__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 0.4s ease;
}

.comp-feat-card:hover .comp-feat-side__img {
  transform: scale(1.03);
}

.comp-feat-side__overlay {
  position: absolute;
  inset: 0;
}

.comp-feat-side__overlay--left {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
}

.comp-feat-side__overlay--right {
  background: linear-gradient(225deg, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
}

.comp-feat-side__label {
  position: absolute;
  bottom: 20px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-feat-side__label--right {
  left: auto;
  right: 16px;
  align-items: flex-end;
}

.comp-feat-product-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.comp-feat-score-pill {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  padding: 3px 10px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.comp-feat-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.15);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  z-index: 5;
}

.comp-editor-pick-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 6;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #0a0a0a;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Copy side */
.comp-feat-card__copy {
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comp-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
}

.comp-feat-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.comp-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Verdict bars */
.comp-feat-verdict-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comp-verdict-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}

.comp-verdict-row>span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.comp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-bar {
  height: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  transition: width 1s ease;
}

.comp-bar--left {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  justify-content: flex-end;
}

.comp-bar--right {
  background: linear-gradient(90deg, #ef4444, #f87171);
  justify-content: flex-start;
}

.comp-feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.comp-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Category Grid (4-col) ── */
.comp-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 52px;
}

.comp-cat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.comp-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.25);
}

.comp-cat-icon {
  font-size: 1.9rem;
}

.comp-cat-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.comp-cat-count {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--dl-accent);
}

.comp-cat-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.btn-comp-cat {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #a78bfa;
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-comp-cat:hover {
  color: #fff;
}

/* ── Popular Grid (3-col) ── */
.comp-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.comp-pop-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.comp-pop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.25);
}

.comp-pop-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
}

.comp-pop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.35s ease;
}

.comp-pop-card:hover .comp-pop-card__img {
  transform: scale(1.03);
}

.comp-pop-cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.comp-pop-vs-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  flex-wrap: wrap;
}

.comp-pop-vs-prod {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}

.comp-pop-vs-divider {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 900;
  color: #a78bfa;
}

.comp-pop-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.comp-pop-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.comp-pop-meta {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text-secondary);
  align-items: center;
}

.comp-pop-expert {
  font-family: var(--font-mono);
  color: #fbbf24;
}

.btn-comp-pop {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-comp-pop:hover {
  color: #fff;
}

/* ── Comparison Table ── */
.comp-table-sec {
  margin-bottom: 56px;
}

.comp-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.comp-table-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.comp-table-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comp-filter-btn {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comp-filter-btn.active,
.comp-filter-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
}

.comp-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--dl-border);
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: var(--dl-card-bg);
}

.comp-table thead th {
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.01);
  white-space: nowrap;
}

.comp-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.comp-table tbody tr:last-child {
  border-bottom: none;
}

.comp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.comp-table td {
  padding: 12px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

.comp-tbl-name {
  color: #fff;
  font-weight: 700;
}

.comp-tbl-score {
  font-weight: 700;
  color: #fbbf24;
}

.comp-tbl-score.hi {
  color: var(--dl-accent);
}

.comp-free-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #22c55e;
}

.comp-table tr.hidden {
  display: none;
}

/* ── Feature Matrix + Verdict (split) ── */
.comp-matrix-verdict-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 56px;
}

.comp-matrix-col,
.comp-verdict-col {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comp-matrix-title,
.comp-verdict-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.comp-matrix-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comp-matrix-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 12px;
}

.comp-matrix-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comp-matrix-label {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.comp-matrix-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.comp-star {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.12);
}

.comp-star.filled {
  color: #fbbf24;
}

.comp-community-score {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--dl-accent);
}

.comp-community-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.comp-verdict-col {
  gap: 20px;
}

.comp-verdict-card {
  border-radius: 16px;
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.comp-verdict-card--winner {
  background: rgba(124, 255, 107, 0.05);
  border: 1px solid rgba(124, 255, 107, 0.15);
}

.comp-verdict-card--value {
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.15);
}

.comp-verdict-trophy {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.comp-verdict-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: block;
}

.comp-verdict-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 4px 0 8px;
}

.comp-verdict-reason {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ── Buying Decision Wizard ── */
.comp-wizard-sec {
  margin-bottom: 56px;
}

.comp-wizard-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comp-wizard-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comp-wizard-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
}

.comp-wizard-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.comp-wizard-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.comp-wizard-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.comp-wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a78bfa, var(--dl-accent));
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comp-wizard-step-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.comp-wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.comp-wiz-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.comp-wiz-step.active {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(139, 92, 246, 0.08);
}

.comp-wiz-step.done {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}

.comp-wiz-step-ico {
  font-size: 1.5rem;
  display: block;
}

.comp-wiz-step-num {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-secondary);
  display: block;
}

.comp-wiz-step-txt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: block;
}

.comp-wiz-step-done {
  font-size: 1rem;
  color: var(--dl-accent);
  display: none;
}

.comp-wiz-step.done .comp-wiz-step-done {
  display: inline;
}

.comp-wizard-foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── Stats Grid ── */
.comp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.comp-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.comp-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, 0.2);
}

.comp-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #a78bfa;
  line-height: 1;
}

.comp-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #a78bfa;
  line-height: 1;
}

.comp-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .comp-feat-card {
    grid-template-columns: 1fr !important;
  }

  .comp-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .comp-popular-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .comp-matrix-verdict-row {
    grid-template-columns: 1fr !important;
  }

  .comp-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .comp-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .comp-popular-grid {
    grid-template-columns: 1fr !important;
  }

  .comp-wizard-steps {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .comp-feat-card__visual {
    grid-template-columns: 1fr 1fr !important;
    min-height: 220px !important;
  }

  .blog-comp-sec__inner {
    padding: 0 20px !important;
  }

  .comp-feat-card__copy {
    padding: 26px !important;
  }

  .comp-wizard-card {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .comp-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .comp-wizard-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .comp-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme */
[data-theme="light"] .blog-comp-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .comp-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-feat-title {
  color: #0f172a;
}

[data-theme="light"] .comp-feat-desc {
  color: #475569;
}

[data-theme="light"] .comp-cat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-cat-title {
  color: #0f172a;
}

[data-theme="light"] .comp-pop-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-pop-title {
  color: #0f172a;
}

[data-theme="light"] .comp-table {
  background: #fff;
}

[data-theme="light"] .comp-table thead th {
  background: #f8fafc;
}

[data-theme="light"] .comp-tbl-name {
  color: #0f172a;
}

[data-theme="light"] .comp-matrix-col {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-verdict-col {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-matrix-title {
  color: #0f172a;
}

[data-theme="light"] .comp-verdict-heading {
  color: #0f172a;
}

[data-theme="light"] .comp-verdict-name {
  color: #0f172a;
}

[data-theme="light"] .comp-matrix-label {
  color: #475569;
}

[data-theme="light"] .comp-verdict-reason {
  color: #475569;
}

[data-theme="light"] .comp-wizard-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-wizard-title {
  color: #0f172a;
}

[data-theme="light"] .comp-wiz-step-txt {
  color: #0f172a;
}

[data-theme="light"] .comp-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comp-stat-label {
  color: #475569;
}


/* ============================================================
   BUYING GUIDES SECTION (.blog-bg-sec)
   ============================================================ */

.blog-bg-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background */
.bg-sec-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bg-sec-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 68% 55% at 50% 50%, #000 20%, transparent 100%);
}

.bg-sec-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.bg-sec-bg__orb--1 {
  top: 5%;
  left: 0%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
}

.bg-sec-bg__orb--2 {
  bottom: 5%;
  right: 0%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.042) 0%, transparent 70%);
}

.bg-sec-bg__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.014;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='2' fill='%237CFF6B'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.blog-bg-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Featured Buying Guide Hero ── */
.bg-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 52px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.bg-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, 0.25);
}

.bg-feat-card__visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.bg-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.4s ease;
}

.bg-feat-card:hover .bg-feat-card__img {
  transform: scale(1.025);
}

.bg-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--dl-card-bg) 100%);
}

.bg-feat-badge-wrap {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bg-feat-badge-editor {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #0a0a0a;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bg-feat-badge-cat {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  align-self: flex-start;
}

/* Floating product chips */
.bg-feat-product-chips {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bg-feat-chip {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

/* Copy side */
.bg-feat-card__copy {
  padding: 46px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bg-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
}

.bg-feat-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.bg-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Price range strip */
.bg-feat-price-ranges {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
}

.bg-price-range-item {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bg-price-range-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.bg-price-range-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.bg-price-range-val {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #10b981;
}

.bg-price-range-pick {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #fff;
}

.bg-feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.bg-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Category Grid (4-col) ── */
.bg-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 52px;
}

.bg-cat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.bg-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.25);
}

.bg-cat-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
}

.bg-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.35s ease;
}

.bg-cat-card:hover .bg-cat-card__img {
  transform: scale(1.03);
}

.bg-cat-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.bg-cat-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bg-cat-icon {
  font-size: 1.6rem;
}

.bg-cat-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.bg-cat-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.btn-bg-cat {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-bg-cat:hover {
  color: #fff;
}

/* ── Top Guides Grid (3-col) ── */
.bg-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.bg-guide-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.bg-guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.25);
}

.bg-guide-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
}

.bg-guide-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: transform 0.35s ease;
}

.bg-guide-card:hover .bg-guide-card__img {
  transform: scale(1.03);
}

.bg-guide-cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.bg-guide-price-tag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.bg-guide-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.bg-guide-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bg-guide-stars {
  color: #fbbf24;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.bg-guide-score {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fbbf24;
}

.bg-guide-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.bg-guide-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.bg-guide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
  margin-top: auto;
}

.bg-guide-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-bg-guide-read {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-bg-guide-read:hover {
  color: #fff;
}

/* ── Buying Wizard ── */
.bg-wizard-sec {
  margin-bottom: 56px;
}

.bg-wizard-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bg-wizard-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bg-wizard-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
}

.bg-wizard-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.bg-wizard-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bg-wizard-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.bg-wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, var(--dl-accent));
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bg-wizard-step-lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bg-wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.bg-wiz-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bg-wiz-step.active {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.07);
}

.bg-wiz-step.done {
  border-color: rgba(124, 255, 107, 0.3);
  background: rgba(124, 255, 107, 0.04);
}

.bg-wiz-step-ico {
  font-size: 1.5rem;
  display: block;
}

.bg-wiz-step-num {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-secondary);
  display: block;
}

.bg-wiz-step-txt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: block;
}

.bg-wiz-step-check {
  font-size: 1rem;
  color: var(--dl-accent);
  display: none;
}

.bg-wiz-step.done .bg-wiz-step-check {
  display: inline;
}

.bg-wizard-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── Buying Checklist ── */
.bg-checklist-sec {
  margin-bottom: 56px;
}

.bg-checklist-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 26px 0;
}

.bg-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bg-check-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.bg-check-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.bg-check-icon {
  font-size: 1.8rem;
}

.bg-check-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.bg-check-card p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ── Best Picks Awards ── */
.bg-awards-sec {
  margin-bottom: 56px;
}

.bg-awards-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 26px 0;
}

.bg-awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bg-award-card {
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dl-trans), box-shadow var(--dl-trans);
}

.bg-award-card:hover {
  transform: translateY(-4px);
}

.bg-award--overall {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.08), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(124, 255, 107, 0.2);
}

.bg-award--overall:hover {
  box-shadow: 0 0 40px rgba(124, 255, 107, 0.12);
}

.bg-award--budget {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.bg-award--budget:hover {
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.12);
}

.bg-award--perf {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.bg-award--perf:hover {
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.12);
}

.bg-award--iptv {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(167, 139, 250, 0.04));
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.bg-award--iptv:hover {
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.12);
}

.bg-award-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bg-award-trophy {
  font-size: 2rem;
}

.bg-award-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(124, 255, 107, 0.15);
  border: 1px solid rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
  padding: 4px 10px;
  border-radius: 100px;
}

.bg-award-badge.budget {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.bg-award-badge.perf {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.bg-award-badge.iptv {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.bg-award-product {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.bg-award-reason {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.bg-award-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.bg-award-price {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #10b981;
  font-weight: 700;
}

.bg-award-score {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  color: #fbbf24;
}

.btn-bg-award {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
}

.btn-bg-award:hover {
  color: #fff;
}

/* ── Price Comparison Table ── */
.bg-price-table-sec {
  margin-bottom: 56px;
}

.bg-price-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.bg-price-table-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.bg-price-table-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bg-price-filter-btn {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bg-price-filter-btn.active,
.bg-price-filter-btn:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.bg-price-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--dl-border);
}

.bg-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: var(--dl-card-bg);
}

.bg-price-table thead th {
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.01);
  white-space: nowrap;
}

.bg-price-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.bg-price-table tbody tr:last-child {
  border-bottom: none;
}

.bg-price-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.bg-price-table td {
  padding: 13px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

.bg-tbl-name {
  color: #fff;
  font-weight: 700;
}

.bg-tbl-score {
  font-weight: 700;
  color: #fbbf24;
}

.bg-tbl-score.hi {
  color: var(--dl-accent);
}

.bg-tbl-price {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #10b981;
  font-weight: 700;
}

.bg-price-table tr.hidden {
  display: none;
}

/* ── Stats Grid ── */
.bg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bg-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.bg-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, 0.22);
}

.bg-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #10b981;
  line-height: 1;
}

.bg-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #10b981;
  line-height: 1;
}

.bg-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .bg-feat-card {
    grid-template-columns: 1fr !important;
  }

  .bg-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .bg-awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .bg-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-guides-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-checklist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-awards-grid {
    grid-template-columns: 1fr !important;
  }

  .bg-wizard-steps {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .blog-bg-sec__inner {
    padding: 0 20px !important;
  }

  .bg-feat-card__copy {
    padding: 28px !important;
  }

  .bg-wizard-card {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .bg-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-guides-grid {
    grid-template-columns: 1fr !important;
  }

  .bg-checklist-grid {
    grid-template-columns: 1fr !important;
  }

  .bg-wizard-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bg-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme */
[data-theme="light"] .blog-bg-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .bg-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-feat-title {
  color: #0f172a;
}

[data-theme="light"] .bg-feat-desc {
  color: #475569;
}

[data-theme="light"] .bg-cat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-cat-title {
  color: #0f172a;
}

[data-theme="light"] .bg-guide-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-guide-title {
  color: #0f172a;
}

[data-theme="light"] .bg-wizard-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-wizard-title {
  color: #0f172a;
}

[data-theme="light"] .bg-wiz-step-txt {
  color: #0f172a;
}

[data-theme="light"] .bg-check-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-check-card h4 {
  color: #0f172a;
}

[data-theme="light"] .bg-check-card p {
  color: #475569;
}

[data-theme="light"] .bg-award-product {
  color: #0f172a;
}

[data-theme="light"] .bg-award-reason {
  color: #475569;
}

[data-theme="light"] .bg-price-table {
  background: #fff;
}

[data-theme="light"] .bg-price-table thead th {
  background: #f8fafc;
}

[data-theme="light"] .bg-tbl-name {
  color: #0f172a;
}

[data-theme="light"] .bg-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .bg-stat-label {
  color: #475569;
}


/* ============================================================
   TROUBLESHOOTING CENTER SECTION (.blog-tc-sec)
   ============================================================ */

.blog-tc-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background */
.tc-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.tc-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, #000 25%, transparent 100%);
}

.tc-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.tc-bg__orb--1 {
  top: 6%;
  left: 0%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.025) 0%, transparent 70%);
}

.tc-bg__orb--2 {
  bottom: 6%;
  right: 0%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.038) 0%, transparent 70%);
}

.tc-bg__circuit {
  position: absolute;
  inset: 0;
  opacity: 0.013;
  background-image:
    linear-gradient(90deg, rgba(239, 68, 68, 0.5) 1px, transparent 1px),
    linear-gradient(rgba(239, 68, 68, 0.5) 1px, transparent 1px);
  background-size: 120px 120px;
}

.blog-tc-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Smart Assistant Card ── */
.tc-assistant-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 52px;
}

.tc-assistant-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tc-assistant-icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tc-assistant-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tc-assistant-sub {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin: 0;
}

.tc-assistant-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--dl-accent);
  flex-shrink: 0;
}

.tc-status-dot {
  width: 6px;
  height: 6px;
  background: var(--dl-accent);
  border-radius: 50%;
  animation: tc-pulse 2s ease infinite;
}

@keyframes tc-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: 0.5;
    transform: scale(1.4)
  }
}

/* Search input */
.tc-search-wrap {
  position: relative;
}

.tc-search-ico {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.tc-search-input {
  width: 100%;
  padding: 16px 48px 16px 50px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tc-search-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.tc-search-input:focus {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.tc-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  font-size: 1rem;
}

/* Quick buttons */
.tc-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-quick-btn {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.tc-quick-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fff;
}

.tc-quick-btn.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
}

.tc-btn-diagnose {
  align-self: flex-start;
}

/* ── Featured Solution Hero ── */
.tc-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 52px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.25);
}

.tc-feat-card__visual {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.tc-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.4s ease;
}

.tc-feat-card:hover .tc-feat-card__img {
  transform: scale(1.025);
}

.tc-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, var(--dl-card-bg) 100%);
}

/* Gauge overlay */
.tc-feat-success-gauge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tc-gauge-svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

.tc-gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 5;
}

.tc-gauge-fill {
  fill: none;
  stroke: var(--dl-accent);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray 1.5s ease;
}

.tc-gauge-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 900;
  color: #fff;
}

.tc-gauge-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--dl-accent);
}

.tc-feat-badge-hot {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Copy */
.tc-feat-card__copy {
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tc-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #f87171;
  text-transform: uppercase;
}

.tc-feat-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.tc-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Step-preview chips */
.tc-feat-steps-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-feat-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 100px;
}

.tc-feat-step-chip span {
  width: 16px;
  height: 16px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #fca5a5;
}

/* Info row */
.tc-feat-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tc-info-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

.tc-info-badge.easy {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.tc-info-badge.medium {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.tc-info-badge.hard {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.tc-info-time,
.tc-info-readers,
.tc-info-date {
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tc-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Category Grid (4-col) ── */
.tc-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 52px;
}

.tc-cat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, 0.25);
}

.tc-cat-icon {
  font-size: 1.8rem;
}

.tc-cat-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tc-cat-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #f87171;
}

.tc-cat-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.btn-tc-cat {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #f87171;
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-tc-cat:hover {
  color: #fff;
}

/* ── Popular Fixes Grid (3-col) ── */
.tc-fixes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.tc-fix-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-fix-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, 0.22);
}

.tc-fix-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tc-fix-icon {
  font-size: 1.8rem;
}

.tc-fix-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tc-diff-badge {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}

.tc-diff-badge.easy {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.tc-diff-badge.medium {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.tc-diff-badge.hard {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.tc-time-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tc-fix-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.tc-fix-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.tc-fix-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.tc-success-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.tc-success-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-secondary);
}

.tc-success-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.tc-success-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  border-radius: 100px;
  transition: width 1.2s ease;
}

.tc-success-val {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dl-accent);
  text-align: right;
}

.btn-tc-fix-read {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #f87171;
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
}

.btn-tc-fix-read:hover {
  color: #fff;
}

/* ── Wizard ── */
.tc-wizard-sec {
  margin-bottom: 56px;
}

.tc-wizard-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tc-wizard-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-wizard-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #f87171;
  text-transform: uppercase;
}

.tc-wizard-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tc-wizard-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tc-wizard-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
}

.tc-wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, var(--dl-accent));
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tc-wizard-step-lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tc-wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.tc-wiz-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tc-wiz-step.active {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.07);
}

.tc-wiz-step.done {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}

.tc-wiz-ico {
  font-size: 1.5rem;
  display: block;
}

.tc-wiz-num {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-secondary);
  display: block;
}

.tc-wiz-txt {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: block;
}

.tc-wiz-check {
  font-size: 1rem;
  color: var(--dl-accent);
  display: none;
}

.tc-wiz-step.done .tc-wiz-check {
  display: inline;
}

.tc-wizard-foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── Error Code Grid ── */
.tc-errors-sec {
  margin-bottom: 56px;
}

.tc-errors-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 26px 0;
}

.tc-errors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tc-err-card {
  background: var(--dl-card-bg);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-err-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.3);
}

.tc-err-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tc-err-code {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 900;
  color: #f87171;
  line-height: 1;
}

.tc-err-code--text {
  font-size: 0.9rem;
}

.tc-err-type {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
  padding: 3px 7px;
  border-radius: 100px;
}

.tc-err-explain {
  font-size: 0.74rem;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.tc-err-causes {
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.tc-err-causes strong {
  color: rgba(255, 255, 255, 0.55);
}

.btn-tc-err {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
}

.btn-tc-err:hover {
  color: #fff;
}

/* ── Devices Carousel ── */
.tc-devices-sec {
  margin-bottom: 56px;
}

.tc-devices-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 22px 0;
}

.tc-devices-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.tc-devices-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.tc-devices-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.tc-devices-carousel {
  display: flex;
  gap: 16px;
  width: max-content;
}

.tc-dev-card {
  width: 160px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-dev-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.25);
}

.tc-dev-emoji {
  font-size: 2rem;
}

.tc-dev-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tc-dev-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.btn-tc-dev {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: #f87171;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-tc-dev:hover {
  color: #fff;
}

/* ── Quick Fix Checklist ── */
.tc-checklist-sec {
  margin-bottom: 56px;
}

.tc-checklist-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 26px 0;
}

.tc-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tc-check-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-check-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.2);
}

.tc-check-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tc-check-ico {
  font-size: 1.8rem;
}

.tc-check-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--dl-accent);
  padding: 3px 8px;
  border-radius: 100px;
}

.tc-check-card h4 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.tc-check-card p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ── Stats Grid ── */
.tc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tc-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.tc-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.2);
}

.tc-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #f87171;
  line-height: 1;
}

.tc-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #f87171;
  line-height: 1;
}

.tc-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .tc-feat-card {
    grid-template-columns: 1fr !important;
  }

  .tc-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .tc-errors-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .tc-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .tc-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tc-fixes-grid {
    grid-template-columns: 1fr !important;
  }

  .tc-wizard-steps {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .tc-errors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tc-checklist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .blog-tc-sec__inner {
    padding: 0 20px !important;
  }

  .tc-feat-card__copy {
    padding: 28px !important;
  }

  .tc-wizard-card {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .tc-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tc-errors-grid {
    grid-template-columns: 1fr !important;
  }

  .tc-checklist-grid {
    grid-template-columns: 1fr !important;
  }

  .tc-wizard-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tc-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme */
[data-theme="light"] .blog-tc-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .tc-assistant-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-assistant-title {
  color: #0f172a;
}

[data-theme="light"] .tc-search-input {
  background: #f1f5f9;
  border-color: rgba(239, 68, 68, 0.2);
  color: #0f172a;
}

[data-theme="light"] .tc-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-feat-title {
  color: #0f172a;
}

[data-theme="light"] .tc-feat-desc {
  color: #475569;
}

[data-theme="light"] .tc-cat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-cat-title {
  color: #0f172a;
}

[data-theme="light"] .tc-fix-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-fix-title {
  color: #0f172a;
}

[data-theme="light"] .tc-wizard-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-wizard-title {
  color: #0f172a;
}

[data-theme="light"] .tc-wiz-txt {
  color: #0f172a;
}

[data-theme="light"] .tc-err-card {
  background: #fff;
}

[data-theme="light"] .tc-err-explain {
  color: #0f172a;
}

[data-theme="light"] .tc-dev-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-dev-name {
  color: #0f172a;
}

[data-theme="light"] .tc-check-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-check-card h4 {
  color: #0f172a;
}

[data-theme="light"] .tc-check-card p {
  color: #475569;
}

[data-theme="light"] .tc-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tc-stat-label {
  color: #475569;
}


/* ============================================================
   DOWNLOADS & RESOURCES SECTION (.blog-dl-sec)
   ============================================================ */

.blog-dl-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background elements */
.dl-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.dl-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, #000 25%, transparent 100%);
}

.dl-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.dl-bg__orb--1 {
  top: 6%;
  left: 3%;
  width: 490px;
  height: 490px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.dl-bg__orb--2 {
  bottom: 6%;
  right: 3%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.035) 0%, transparent 70%);
}

.dl-bg__folders {
  position: absolute;
  inset: 0;
  opacity: 0.012;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0px, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 80px);
}

.blog-dl-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Featured Download Hero ── */
.dl-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dl-feat-card__visual {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.dl-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.4s ease;
}

.dl-feat-card:hover .dl-feat-card__img {
  transform: scale(1.025);
}

.dl-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--dl-card-bg) 100%);
}

.dl-feat-badges-wrap {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-editor-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--dl-accent), #34d399);
  color: #0a0a0a;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dl-type-badge {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  align-self: flex-start;
}

/* Download bounce stat */
.dl-feat-download-stat {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 18px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.dl-arrow-bounce {
  font-size: 1.8rem;
  color: var(--dl-accent);
  animation: dl-bounce 2s infinite;
}

@keyframes dl-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.dl-stat-copy {
  display: flex;
  flex-direction: column;
}

.dl-stat-count {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.dl-stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Copy side */
.dl-feat-card__copy {
  padding: 46px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dl-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.dl-feat-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.dl-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.dl-feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

.dl-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Category Grid (4-col) ── */
.dl-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 52px;
}

.dl-cat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dl-cat-icon {
  font-size: 1.8rem;
}

.dl-cat-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.dl-cat-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--dl-accent);
}

.dl-cat-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.btn-dl-cat-explore {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-dl-cat-explore:hover {
  color: #fff;
}

/* ── Latest Downloads Grid (3-col) ── */
.dl-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.dl-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dl-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.dl-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.35s ease;
}

.dl-card:hover .dl-card__img {
  transform: scale(1.03);
}

.dl-card__type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(124, 255, 107, 0.18);
  border: 1px solid rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.dl-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.dl-card__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dl-card__size {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.dl-card__count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--dl-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dl-card__title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.dl-card__desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.dl-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
  margin-top: auto;
}

.dl-card__updated {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dl-card__actions {
  display: flex;
  gap: 10px;
}

.btn-dl-preview-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-dl-preview-link:hover {
  color: #fff;
}

.btn-dl-download-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-dl-download-link:hover {
  color: #fff;
}

/* ── Essential Free Toolkit ── */
.dl-toolkit-sec {
  margin-bottom: 56px;
}

.dl-toolkit-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.dl-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dl-tool-item {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-tool-item:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dl-tool-ico {
  font-size: 1.5rem;
  color: var(--dl-accent);
  flex-shrink: 0;
}

.dl-tool-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dl-tool-info h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.dl-tool-info span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.btn-dl-tool-download {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--dl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dl-tool-download:hover {
  background: var(--dl-accent);
  border-color: var(--dl-accent);
  color: #0a0a0a;
}

/* ── Format Grid ── */
.dl-formats-sec {
  margin-bottom: 56px;
}

.dl-formats-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

.dl-formats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dl-format-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
  cursor: pointer;
}

.dl-format-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.25);
}

.dl-format-ico {
  font-size: 2.2rem;
  color: var(--dl-accent);
}

.dl-format-card h4 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.dl-format-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

/* ── Most Downloaded Carousel ── */
.dl-most-sec {
  margin-bottom: 56px;
}

.dl-most-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 22px 0;
}

.dl-most-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.dl-most-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.dl-most-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.dl-most-carousel {
  display: flex;
  gap: 18px;
  width: max-content;
}

.dl-most-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-most-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.dl-most-dl-count {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

.dl-most-logo {
  font-size: 1.8rem;
}

.dl-most-card h4 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.dl-most-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.dl-most-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
}

.dl-most-rating {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #fbbf24;
}

.btn-dl-most-download {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-dl-most-download:hover {
  color: #fff;
}

/* ── Stats Grid ── */
.dl-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.dl-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.dl-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.2);
}

.dl-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.dl-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.dl-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Responsive breakpoints ── */
@media (max-width:1100px) {
  .dl-feat-card {
    grid-template-columns: 1fr !important;
  }

  .dl-cats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .dl-latest-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dl-formats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .dl-toolkit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dl-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .dl-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dl-latest-grid {
    grid-template-columns: 1fr !important;
  }

  .dl-formats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .blog-dl-sec__inner {
    padding: 0 20px !important;
  }

  .dl-feat-card__copy {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .dl-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dl-formats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dl-toolkit-grid {
    grid-template-columns: 1fr !important;
  }

  .dl-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme overrides */
[data-theme="light"] .blog-dl-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dl-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-feat-title {
  color: #0f172a;
}

[data-theme="light"] .dl-feat-desc {
  color: #475569;
}

[data-theme="light"] .dl-cat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-cat-title {
  color: #0f172a;
}

[data-theme="light"] .dl-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-card__title {
  color: #0f172a;
}

[data-theme="light"] .dl-card__desc {
  color: #475569;
}

[data-theme="light"] .dl-tool-item {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-tool-info h4 {
  color: #0f172a;
}

[data-theme="light"] .dl-format-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-format-card h4 {
  color: #0f172a;
}

[data-theme="light"] .dl-most-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-most-card h4 {
  color: #0f172a;
}

[data-theme="light"] .dl-most-card p {
  color: #475569;
}

[data-theme="light"] .dl-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .dl-stat-label {
  color: #475569;
}


/* ============================================================
   COMMUNITY FAVORITES SECTION (.blog-fav-sec)
   ============================================================ */

.blog-fav-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background elements */
.fav-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.fav-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, #000 25%, transparent 100%);
}

.fav-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.fav-bg__orb--1 {
  top: 5%;
  left: 1%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.02) 0%, transparent 70%);
}

.fav-bg__orb--2 {
  bottom: 5%;
  right: 1%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.fav-bg__hearts {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='%23F43F5E'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

.blog-fav-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.fav-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

/* ── Featured Hero Card ── */
.fav-feat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 63, 94, 0.22);
}

.fav-feat-card__visual {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.fav-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.4s ease;
}

.fav-feat-card:hover .fav-feat-card__img {
  transform: scale(1.025);
}

.fav-feat-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--dl-card-bg) 100%);
}

.fav-feat-badges {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-badge-num {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f43f5e, #fda4af);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fav-badge-cat {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  align-self: flex-start;
}

/* Pulse widget */
.fav-feat-pulse-widget {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 18px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.fav-pulse-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f43f5e;
  position: relative;
  flex-shrink: 0;
}

.fav-pulse-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #f43f5e;
  animation: fav-ring-pulse 2s infinite ease-out;
}

@keyframes fav-ring-pulse {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.fav-pulse-icon {
  font-size: 1.4rem;
  color: #f43f5e;
}

.fav-pulse-stats {
  display: flex;
  flex-direction: column;
}

.fav-pulse-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.fav-pulse-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Copy */
.fav-feat-card__copy {
  padding: 46px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fav-feat-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #f43f5e;
  text-transform: uppercase;
}

.fav-feat-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.fav-feat-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.fav-feat-stats {
  display: flex;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 14px 0;
}

.fav-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.fav-stat-item i {
  font-size: 1.1rem;
  color: #f87171;
}

.fav-stat-item strong {
  color: #fff;
  font-weight: 800;
}

.fav-feat-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Trending Grid (3-col) ── */
.fav-trending-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.fav-trend-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-trend-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 63, 94, 0.22);
}

.fav-trend-card__img-wrap {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #000;
}

.fav-trend-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.35s ease;
}

.fav-trend-card:hover .fav-trend-card__img {
  transform: scale(1.03);
}

.fav-trend-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: #f43f5e;
  color: #fff;
  padding: 3px 8px;
  border-radius: 100px;
}

.fav-trend-cat {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 3px 8px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.fav-trend-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.fav-trend-meta {
  font-size: 0.68rem;
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
  align-items: center;
}

.fav-trend-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.fav-trend-engagement {
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.fav-trend-engagement span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fav-trend-engagement i {
  color: #f43f5e;
}

.btn-fav-trend-read {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}

.btn-fav-trend-read:hover {
  color: #fff;
}

/* ── Curated Collections (3-col) ── */
.fav-collections-sec {
  margin-bottom: 56px;
}

.fav-collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fav-collection-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-collection-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 63, 94, 0.22);
}

.fav-collection-ico {
  font-size: 2rem;
}

.fav-collection-card h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.fav-collection-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dl-accent);
}

.fav-collection-card p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.btn-fav-collection {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  align-self: flex-start;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
  padding-top: 6px;
}

.btn-fav-collection:hover {
  color: #fff;
}

/* ── Most Bookmarked Carousel ── */
.fav-bookmarks-sec {
  margin-bottom: 56px;
}

.fav-bookmarks-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.fav-bookmarks-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.fav-bookmarks-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.fav-bookmarks-carousel {
  display: flex;
  gap: 18px;
  width: max-content;
}

.fav-bookmark-card {
  width: 240px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-bookmark-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 63, 94, 0.22);
}

.fav-bookmark-count {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

.fav-bookmark-logo {
  font-size: 1.8rem;
}

.fav-bookmark-card h4 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.fav-bookmark-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.fav-bookmark-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 12px;
}

.fav-bookmark-rating {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #fbbf24;
}

.btn-fav-bookmark {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-fav-bookmark:hover {
  color: #fff;
}

/* ── Top Contributors (4-col) ── */
.fav-contributors-sec {
  margin-bottom: 56px;
}

.fav-contributors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fav-contributor-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-contributor-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 63, 94, 0.22);
}

.fav-contrib-avatar {
  font-size: 2.2rem;
  display: block;
}

.fav-contributor-card h4 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.fav-contrib-role {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}

.fav-contrib-role.editor {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.fav-contrib-role.expert {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.fav-contrib-role.author {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.fav-contributor-card p {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
}

.fav-contrib-rating {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #fbbf24;
}

.btn-contrib-follow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-contrib-follow:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* ── Reader Achievements ── */
.fav-achievements-sec {
  margin-bottom: 56px;
}

.fav-achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fav-ach-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-ach-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 63, 94, 0.2);
}

.fav-ach-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.fav-ach-card h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0 0 4px 0;
}

.fav-ach-card p {
  font-size: 0.76rem;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

/* ── Stats Grid ── */
.fav-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.fav-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.fav-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 63, 94, 0.2);
}

.fav-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #f43f5e;
  line-height: 1;
}

.fav-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #f43f5e;
  line-height: 1;
}

.fav-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Reader Testimonial Slider ── */
.fav-testimonial-sec {
  margin-bottom: 0;
}

.fav-testimonial-slider {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 26px;
  padding: 44px;
  position: relative;
  overflow: hidden;
  min-height: 240px;
}

.fav-testimonial-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.fav-testimonial-slide {
  display: none;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fav-testimonial-slide.active {
  display: flex;
  opacity: 1;
}

.fav-user-avatar {
  font-size: 2.2rem;
}

.fav-testi-info h4 {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px 0;
}

.fav-testi-info span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.fav-testi-stars {
  color: #fbbf24;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.fav-testi-quote {
  font-size: 0.92rem;
  color: #fff;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.fav-testi-fav {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.fav-testi-fav strong {
  color: var(--dl-accent);
}

.fav-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.fav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.2s;
}

.fav-dot.active {
  background: #f43f5e;
  transform: scale(1.3);
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .fav-feat-card {
    grid-template-columns: 1fr !important;
  }

  .fav-trending-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fav-collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fav-contributors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fav-achievements-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fav-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .fav-trending-grid {
    grid-template-columns: 1fr !important;
  }

  .fav-collections-grid {
    grid-template-columns: 1fr !important;
  }

  .fav-achievements-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-fav-sec__inner {
    padding: 0 20px !important;
  }

  .fav-feat-card__copy {
    padding: 28px !important;
  }

  .fav-testimonial-slider {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .fav-contributors-grid {
    grid-template-columns: 1fr !important;
  }

  .fav-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme support */
[data-theme="light"] .blog-fav-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .fav-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-feat-title {
  color: #0f172a;
}

[data-theme="light"] .fav-feat-desc {
  color: #475569;
}

[data-theme="light"] .fav-trend-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-trend-title {
  color: #0f172a;
}

[data-theme="light"] .fav-collection-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-collection-card h4 {
  color: #0f172a;
}

[data-theme="light"] .fav-collection-card p {
  color: #475569;
}

[data-theme="light"] .fav-bookmark-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-bookmark-card h4 {
  color: #0f172a;
}

[data-theme="light"] .fav-bookmark-card p {
  color: #475569;
}

[data-theme="light"] .fav-contributor-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-contributor-card h4 {
  color: #0f172a;
}

[data-theme="light"] .fav-ach-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-ach-card p {
  color: #0f172a;
}

[data-theme="light"] .fav-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-stat-label {
  color: #475569;
}

[data-theme="light"] .fav-testimonial-slider {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .fav-testi-info h4 {
  color: #0f172a;
}

[data-theme="light"] .fav-testi-quote {
  color: #0f172a;
}


/* ============================================================
   NEWSLETTER CTA SECTION (.blog-news-sec)
   ============================================================ */

.blog-news-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

/* Background elements */
.news-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.news-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, #000 25%, transparent 100%);
}

.news-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.news-bg__orb--1 {
  top: 6%;
  left: 2%;
  width: 490px;
  height: 490px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.02) 0%, transparent 70%);
}

.news-bg__orb--2 {
  bottom: 6%;
  right: 2%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
}

.news-bg__connections {
  position: absolute;
  inset: 0;
  opacity: 0.01;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 24px 24px;
}

.blog-news-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.news-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px 0;
}

/* ── Newsletter Hero Card (Luxurious Stripe-Style) ── */
.news-hero-card {
  position: relative;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: border-color var(--dl-trans);
}

.news-hero-card:hover {
  border-color: rgba(124, 255, 107, 0.22);
}

/* Success Overlay */
.news-success-overlay {
  position: absolute;
  inset: 0;
  background: var(--dl-card-bg);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.news-success-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.news-success-content {
  text-align: center;
  max-width: 440px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.news-success-ico {
  font-size: 3.5rem;
  color: var(--dl-accent);
}

.news-success-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.news-success-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.btn-news-reset {
  margin-top: 10px;
  width: 120px;
}

/* Left Copy side */
.news-hero-left {
  padding: 48px;
  border-right: 1px solid var(--dl-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-transform: uppercase;
}

.news-hero-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.22;
}

.news-hero-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.news-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.news-benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.news-benefits-list .ph-fill {
  color: var(--dl-accent);
  font-size: 0.95rem;
}

/* Right form side */
.news-hero-right {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Input wrapper */
.news-input-wrap {
  position: relative;
}

.news-input-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.news-email-input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.news-email-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.news-email-input:focus {
  border-color: rgba(124, 255, 107, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.08);
}

.news-input-validation-indicator {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.news-input-validation-indicator.valid {
  background-color: #22c55e;
}

.news-input-validation-indicator.invalid {
  background-color: #ef4444;
}

/* Interests */
.news-interests-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-interests-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.news-interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-interest-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  padding: 6px 12px;
  border-radius: 100px;
  transition: all 0.2s;
}

.news-interest-option input {
  display: none;
}

.news-interest-option span {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.news-interest-option:has(input:checked) {
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.3);
}

.news-interest-option:has(input:checked) span {
  color: var(--dl-accent);
}

/* GDPR */
.news-gdpr-wrap {
  display: flex;
}

.news-gdpr-option {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.news-gdpr-option input {
  margin-top: 2px;
}

.news-gdpr-option span {
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.btn-news-subscribe {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.news-privacy-text {
  font-size: 0.66rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* Trust indicators */
.news-trust-indicators {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 18px;
  margin-top: auto;
}

.news-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-trust-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}

.news-trust-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.news-trust-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Benefits Grid (4-col) ── */
.news-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 52px;
}

.news-benefit-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.news-benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.news-benefit-icon {
  font-size: 1.8rem;
}

.news-benefit-card h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.news-benefit-card p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* ── Timeline Schedule ── */
.news-timeline-sec {
  margin-bottom: 56px;
}

.news-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 18px;
}

.news-timeline-line {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dl-accent), #3b82f6);
  opacity: 0.15;
}

.news-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.news-timeline-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.12);
  border: 2px solid var(--dl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dl-accent);
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}

.news-timeline-item:hover .news-timeline-node {
  transform: scale(1.1);
}

.news-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-timeline-content h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin: 0;
}

.news-timeline-content h5 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.news-timeline-content p {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* ── Featured Issues Carousel ── */
.news-issues-sec {
  margin-bottom: 56px;
}

.news-issues-carousel-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.news-issues-carousel-wrap::-webkit-scrollbar {
  height: 4px;
}

.news-issues-carousel-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.news-issues-carousel {
  display: flex;
  gap: 18px;
  width: max-content;
}

.news-issue-card {
  width: 220px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.news-issue-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.22);
}

.news-issue-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  align-self: flex-start;
}

.news-issue-cover {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0.8;
}

.news-issue-card h4 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.news-issue-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.btn-news-issue-preview {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  margin-top: auto;
}

.btn-news-issue-preview:hover {
  color: #fff;
}

/* ── Testimonials ── */
.news-trust-sec {
  margin-bottom: 56px;
}

.news-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.news-testi-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.news-testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.news-testi-avatar {
  font-size: 2rem;
}

.news-testi-card h4 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.news-testi-role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.news-testi-stars {
  color: #fbbf24;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.news-testi-card p {
  font-size: 0.78rem;
  color: #fff;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

/* ── Stats Grid ── */
.news-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.news-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.news-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 107, 0.2);
}

.news-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.news-stat-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--dl-accent);
  line-height: 1;
}

.news-stat-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── FAQ Accordion ── */
.news-faq-sec {
  margin-bottom: 56px;
}

.news-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-faq-item {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 16px;
  overflow: hidden;
}

.news-faq-trigger {
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  text-align: left;
}

.news-faq-trigger i {
  transition: transform 0.25s ease;
  color: var(--text-secondary);
}

.news-faq-trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
  color: var(--dl-accent);
}

.news-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.news-faq-panel p {
  padding: 0 24px 20px 24px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Social Grid (6-col) ── */
.news-social-sec {
  margin-bottom: 0;
}

.news-social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.news-social-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}

.news-social-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
}

.news-social-icon {
  font-size: 2rem;
}

.news-social-card h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.news-social-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.btn-news-social-follow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-news-social-follow:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

/* Social colors */
.news-social-card[data-social="youtube"] .news-social-icon {
  color: #ef4444;
}

.news-social-card[data-social="x"] .news-social-icon {
  color: #fff;
}

.news-social-card[data-social="facebook"] .news-social-icon {
  color: #3b82f6;
}

.news-social-card[data-social="instagram"] .news-social-icon {
  color: #ec4899;
}

.news-social-card[data-social="linkedin"] .news-social-icon {
  color: #0077b5;
}

.news-social-card[data-social="github"] .news-social-icon {
  color: #f3f4f6;
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .news-hero-card {
    grid-template-columns: 1fr !important;
  }

  .news-hero-left {
    border-right: none !important;
    border-bottom: 1px solid var(--dl-border);
  }

  .news-benefits-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .news-timeline {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
  }

  .news-timeline-line {
    display: none !important;
  }

  .news-social-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .news-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width:768px) {
  .news-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .news-timeline {
    grid-template-columns: 1fr !important;
  }

  .news-testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-news-sec__inner {
    padding: 0 20px !important;
  }

  .news-hero-left,
  .news-hero-right {
    padding: 28px !important;
  }
}

@media (max-width:480px) {
  .news-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .news-social-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .news-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Light theme support */
[data-theme="light"] .blog-news-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .news-hero-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .news-hero-title {
  color: #0f172a;
}

[data-theme="light"] .news-hero-desc {
  color: #475569;
}

[data-theme="light"] .news-email-input {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .news-interests-label {
  color: #475569;
}

[data-theme="light"] .news-privacy-text {
  color: #475569;
}

[data-theme="light"] .news-trust-val {
  color: #0f172a;
}

[data-theme="light"] .news-trust-label {
  color: #475569;
}

[data-theme="light"] .news-benefit-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .news-benefit-card h4 {
  color: #0f172a;
}

[data-theme="light"] .news-benefit-card p {
  color: #475569;
}

[data-theme="light"] .news-timeline-content h5 {
  color: #0f172a;
}

[data-theme="light"] .news-timeline-content p {
  color: #475569;
}

[data-theme="light"] .news-issue-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .news-issue-card h4 {
  color: #0f172a;
}

[data-theme="light"] .news-testi-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .news-testi-card h4 {
  color: #0f172a;
}

[data-theme="light"] .news-testi-card p {
  color: #475569;
}

/* Section titles light theme visibility */
[data-theme="light"] .news-section-title,
[data-theme="light"] .tags-section-title,
[data-theme="light"] .collections-section-title,
[data-theme="light"] .path-section-title,
[data-theme="light"] .toolkit-section-title,
[data-theme="light"] .faq-section-title,
[data-theme="light"] .tracks-section-title,
[data-theme="light"] .code-section-title,
[data-theme="light"] .tools-section-title,
[data-theme="light"] .devices-section-title,
[data-theme="light"] .glossary-section-title,
[data-theme="light"] .fav-section-title {
  color: #0f172a !important;
}

[data-theme="light"] .news-faq-item {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .news-faq-trigger {
  color: #0f172a !important;
  font-weight: 700;
}

[data-theme="light"] .news-faq-trigger i {
  color: #64748b;
}

[data-theme="light"] .news-faq-panel p {
  color: #475569;
}

[data-theme="light"] .news-social-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .news-social-card h4 {
  color: #0f172a !important;
}

[data-theme="light"] .news-social-count {
  color: #64748b !important;
}

[data-theme="light"] .news-social-card[data-social="x"] .news-social-icon {
  color: #0f172a !important;
}

[data-theme="light"] .news-social-card[data-social="github"] .news-social-icon {
  color: #0f172a !important;
}

[data-theme="light"] .btn-news-social-follow {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-news-social-follow:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

[data-theme="light"] .news-stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .news-stat-label {
  color: #475569;
}


/* ============================================================
   LEARNING HUB & REVIEWS TABS SYSTEM STYLE
   ============================================================ */
.blog-learning-hub-sec,
.blog-reviews-bg-sec {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  padding: 100px 0;
  overflow: hidden;
  z-index: 10;
}

.blog-cat-bg,
.swrev-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.blog-cat-bg__grid,
.swrev-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}

.blog-cat-bg__orb,
.swrev-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blog-cat-bg__orb--1 {
  top: 20%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.02) 0%, transparent 70%);
}

.blog-cat-bg__orb--2 {
  bottom: 15%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.swrev-bg__orb--1 {
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
}

.swrev-bg__orb--2 {
  bottom: 15%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.035) 0%, transparent 70%);
}

.hub-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 5;
}

.hub-tabs {
  display: inline-flex;
  gap: 8px;
  background: rgba(15, 21, 18, 0.6);
  border: 1px solid var(--dl-border);
  padding: 6px;
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hub-tab-btn,
.rev-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 10px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.hub-tab-btn i,
.rev-tab-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.hub-tab-btn:hover,
.rev-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.hub-tab-btn.active,
.rev-tab-btn.active {
  color: #000000 !important;
  background: var(--dl-accent);
  box-shadow: 0 0 16px rgba(124, 255, 107, 0.35);
  font-weight: 800;
}

.hub-tab-btn.active i,
.rev-tab-btn.active i {
  color: #000000 !important;
  transform: scale(1.1);
}

.hub-tab-content,
.rev-tab-content {
  display: none;
  opacity: 0;
}

.hub-tab-content.active,
.rev-tab-content.active {
  display: block;
  opacity: 1;
  animation: fadeInTabs 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInTabs {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Light Theme overrides for tab switcher */
[data-theme="light"] .hub-tabs {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .hub-tab-btn,
[data-theme="light"] .rev-tab-btn {
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .hub-tab-btn i,
[data-theme="light"] .rev-tab-btn i {
  color: #475569 !important;
}

[data-theme="light"] .hub-tab-btn:hover,
[data-theme="light"] .rev-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .hub-tab-btn:hover i,
[data-theme="light"] .rev-tab-btn:hover i {
  color: #0f172a !important;
}

[data-theme="light"] .hub-tab-btn.active,
[data-theme="light"] .rev-tab-btn.active {
  color: #ffffff !important;
  background: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

[data-theme="light"] .hub-tab-btn.active i,
[data-theme="light"] .rev-tab-btn.active i {
  color: #ffffff !important;
}

[data-theme="light"] .blog-learning-hub-sec,
[data-theme="light"] .blog-reviews-bg-sec {
  background: #f8fafc !important;
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}

/* Unified Section Header Eyebrow Badges */
.dl-sec-eyebrow,
.sec-eyebrow,
.section-eyebrow,
.news-hero-eyebrow,
.setup-feat-card__eyebrow,
.setup-wizard-eyebrow,
.swrev-feat-eyebrow,
.comp-feat-eyebrow,
.comp-wizard-eyebrow,
.bg-feat-eyebrow,
.bg-wizard-eyebrow,
.tc-feat-eyebrow,
.tc-wizard-eyebrow,
.dl-feat-eyebrow,
.fav-feat-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7cff6b !important;
  background: rgba(124, 255, 107, 0.12) !important;
  border: 1px solid rgba(124, 255, 107, 0.3) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(124, 255, 107, 0.1) !important;
  width: fit-content !important;
}

.dl-sec-eyebrow i,
.sec-eyebrow i,
.section-eyebrow i {
  color: inherit !important;
  font-size: 0.85em !important;
}

[data-theme="light"] .dl-sec-eyebrow,
[data-theme="light"] .sec-eyebrow,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .news-hero-eyebrow,
[data-theme="light"] .setup-feat-card__eyebrow,
[data-theme="light"] .setup-wizard-eyebrow,
[data-theme="light"] .swrev-feat-eyebrow,
[data-theme="light"] .comp-feat-eyebrow,
[data-theme="light"] .comp-wizard-eyebrow,
[data-theme="light"] .bg-feat-eyebrow,
[data-theme="light"] .bg-wizard-eyebrow,
[data-theme="light"] .tc-feat-eyebrow,
[data-theme="light"] .tc-wizard-eyebrow,
[data-theme="light"] .dl-feat-eyebrow,
[data-theme="light"] .fav-feat-eyebrow {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06) !important;
}


/* --------------------------------------------------------
   Media Player Reviews Featured Slider (5 Players Auto-Carousel)
-------------------------------------------------------- */
.rev-media-carousel-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.rev-media-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #7cff6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  outline: none;
}

[data-theme="light"] .rev-media-carousel-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  color: #2563eb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.rev-media-carousel-btn:hover {
  background: #7cff6b;
  color: #050a0e;
  border-color: #7cff6b;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 25px rgba(124, 255, 107, 0.45);
}

[data-theme="light"] .rev-media-carousel-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.rev-media-carousel-btn--prev {
  left: -25px;
}

.rev-media-carousel-btn--next {
  right: -25px;
}

@media (max-width: 1024px) {
  .rev-media-carousel-btn--prev {
    left: 10px;
  }

  .rev-media-carousel-btn--next {
    right: 10px;
  }
}

.rev-media-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.rev-media-dot {
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

[data-theme="light"] .rev-media-dot {
  background: rgba(0, 0, 0, 0.2);
}

.rev-media-dot.active {
  width: 34px;
  background: #7cff6b;
  box-shadow: 0 0 14px rgba(124, 255, 107, 0.6);
}


/* ========================================================
   THEME PAGINATION ACCENT STYLES
   Dark Mode: Neon Green (#7cff6b)
   Light Mode: Vibrant Royal Blue (#2563eb)
   ======================================================== */

/* Dark Mode (Default) */
.rev-media-dot.active,
.blog-pagination .page-num.active,
.pagination .page-item.active .page-link,
.dl-pagination .page-num.active,
.cat-chip-dot.active,
.carousel-dot.active,
.page-number.active,
.page-btn.active {
  background: #7cff6b !important;
  color: #050a0e !important;
  border-color: #7cff6b !important;
  box-shadow: 0 0 14px rgba(124, 255, 107, 0.5) !important;
}

/* Light Mode Override */
[data-theme="light"] .rev-media-dot.active,
[data-theme="light"] .blog-pagination .page-num.active,
[data-theme="light"] .pagination .page-item.active .page-link,
[data-theme="light"] .dl-pagination .page-num.active,
[data-theme="light"] .cat-chip-dot.active,
[data-theme="light"] .carousel-dot.active,
[data-theme="light"] .page-number.active,
[data-theme="light"] .page-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.45) !important;
}

[data-theme="light"] .rev-media-dot {
  background: rgba(37, 99, 235, 0.25) !important;
}

[data-theme="light"] .rev-media-dot:hover {
  background: rgba(37, 99, 235, 0.5) !important;
}


/* ========================================================
   GLOBAL LIGHT THEME BLUE / DARK THEME GREEN ACCENT SYSTEM
   Light Mode: Royal Blue (#2563eb)
   Dark Mode: Neon Green (#7cff6b / #00d289)
   ======================================================== */

/* --- LIGHT THEME (BLUE SHADE) OVERRIDES --- */
[data-theme="light"] {
  --accent: #2563eb !important;
  --accent-light: #3b82f6 !important;
  --accent-hover: #1d4ed8 !important;
  --accent-rgb: 37, 99, 235 !important;
  --border-hover: rgba(37, 99, 235, 0.3) !important;
}

/* Heading Accents in Light Mode */
[data-theme="light"] .dev-hero__heading-accent,
[data-theme="light"] .tut-hero__heading-accent,
[data-theme="light"] .rev-hero__heading-accent,
[data-theme="light"] .blog-hero__heading-accent,
[data-theme="light"] .news-hero-title span,
[data-theme="light"] .hero-title-accent,
[data-theme="light"] .heading-accent {
  color: #2563eb !important;
  background: linear-gradient(135deg, #2563eb 30%, #3b82f6 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Badges & Pill Tags in Light Mode */
[data-theme="light"] .dev-hero__badge,
[data-theme="light"] .tut-hero__badge,
[data-theme="light"] .rev-hero__badge,
[data-theme="light"] .news-badge,
[data-theme="light"] .blog-badge,
[data-theme="light"] .hero-badge,
[data-theme="light"] .badge-pill,
[data-theme="light"] .tut-badge {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

/* Badge Dots in Light Mode */
[data-theme="light"] .dev-hero__badge-dot,
[data-theme="light"] .tut-badge-dot,
[data-theme="light"] .badge-dot {
  background: #2563eb !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5) !important;
}

/* Stat Plus Suffixes in Light Mode */
[data-theme="light"] .dev-stat__suffix,
[data-theme="light"] .tut-stat__suffix,
[data-theme="light"] .stat-suffix,
[data-theme="light"] .rev-nl-stat__suffix {
  color: #2563eb !important;
}

/* Background Glow Orbs in Light Mode */
[data-theme="light"] .dev-hero__bg-orb--green,
[data-theme="light"] .tut-glow--green {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%) !important;
}

/* Active Chips & Filter Tabs in Light Mode */
[data-theme="light"] .dev-filter-chip.active,
[data-theme="light"] .tut-cat-chip.active,
[data-theme="light"] .rev-comp-filter-chip.active,
[data-theme="light"] .cat-chip.active,
[data-theme="light"] .filter-chip.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}