/* ============================================================
   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; color: #fff; background: var(--dl-accent); color: #ffffff;
  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, .blog-stat-text { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: #7cff6b; line-height: 1.2; }
.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      { background: #2563eb; }
[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; }
[data-theme="light"] .blog-stat-num,
[data-theme="light"] .blog-stat-text       { color: #2563eb !important; font-weight: 800 !important; }
[data-theme="light"] .blog-stat-label      { color: #64748b !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);
  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: 1fr 1.05fr; min-height: 460px; }

.feat-hero-card__img-panel { position: relative; overflow: hidden; background: #f8fafc; display: flex; align-items: center; justify-content: center; }
.feat-hero-card__img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 0.4s ease; }
.feat-hero-card:hover .feat-hero-card__img { transform: scale(1.02); }
.feat-hero-card__badge {
  position: absolute; top: 24px; left: 24px; font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: #ffffff; background: #2563eb;
  padding: 6px 14px; border-radius: 9999px; letter-spacing: 0.06em; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.feat-hero-card__info-panel { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: #ffffff; }
.feat-hero-card__cat { font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif); font-size: 0.75rem; font-weight: 800; color: #7cff6b; 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; 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: 1.8; overflow: hidden; background: #000; }
.feat-card-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.84; transition: transform 0.3s ease; }
.feat-grid-card:hover .feat-card-img { transform: scale(1.02); }
.feat-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);
}

.feat-card-content { padding: 24px; 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__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; color: #fff; background: var(--dl-accent); color: #ffffff;
  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.72rem; font-weight:700; color:var(--dl-accent);
  background:none; border:none; align-self:flex-start; padding:0; cursor:pointer;
}
.btn-setup-view-guides:hover { color:#fff; }

/* ── 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;
}