/* ============================================================
   DOWNLOADS PAGE — downloads.css
   Premium Editorial / Dark Luxury Design
   Inspired by Apple, Linear, Framer, TechRadar, Webflow
   ============================================================ */

/* ---- CSS Variables (inherit from styles.css) ---- */
:root {
  --dl-accent:      #7CFF6B;
  --dl-accent-dim:  rgba(124,255,107,0.08);
  --dl-border:      rgba(255,255,255,0.07);
  --dl-card-bg:     rgba(255,255,255,0.025);
  --dl-radius-lg:   24px;
  --dl-radius-md:   16px;
  --dl-radius-sm:   10px;
  --dl-trans:       0.3s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.dl-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-primary);
  padding: 120px 0 80px;
}

/* Ambient BG */
.dl-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.dl-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  animation: dlGridDrift 22s linear infinite;
}

@keyframes dlGridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 52px 52px, 52px 52px; }
}

.dl-hero__bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.dl-hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.dl-hero__bg-glow--1 {
  top: -100px;
  left: -60px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(124,255,107,0.06) 0%, transparent 70%);
}

.dl-hero__bg-glow--2 {
  bottom: -80px;
  right: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
}

.dl-hero__bg-circuit {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cpath d='M10 10 L100 10 L100 50 M150 10 L200 10 L200 80 M50 150 L50 200 L100 200' stroke='rgba(124,255,107,0.05)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.6;
}

.dl-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.dl-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ---- LEFT COLUMN ---- */
.dl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  display: inline-flex;
}

.dl-hero__title {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.dl-hero__title-accent {
  background: linear-gradient(135deg, #7CFF6B 0%, #4ade80 50%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dl-hero__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}

.dl-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Stats row */
.dl-hero__stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border);
  border-radius: 16px;
  padding: 16px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: fit-content;
  gap: 0;
}

.dl-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  gap: 3px;
}

.dl-hero__stat-divider {
  width: 1px;
  height: 32px;
  background: var(--dl-border);
  flex-shrink: 0;
}

.dl-hero__stat-num,
.dl-hero__stat-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.dl-hero__stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---- RIGHT: Illustration ---- */
.dl-hero__right {
  position: relative;
}

.dl-hero__illustration {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Desktop mockup */
.dl-illus__desktop {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 480px;
}

.dl-illus__screen {
  background: rgba(10,15,12,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}

.dl-illus__screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dl-illus__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dl-illus__dot--r { background: #ff5f57; }
.dl-illus__dot--y { background: #febc2e; }
.dl-illus__dot--g { background: #28c840; }

.dl-illus__browser-addr {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
}

.dl-illus__screen-body {
  padding: 18px;
}

.dl-illus__app-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.dl-illus__app-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.2s ease;
}

.dl-illus__app-card--featured {
  border-color: rgba(124,255,107,0.2);
  background: rgba(124,255,107,0.04);
}

.dl-illus__app-icon { font-size: 1.2rem; }

.dl-illus__app-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.dl-illus__app-ver {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.dl-illus__app-btn {
  margin-left: auto;
  background: var(--dl-accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dl-illus__app-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(124,255,107,0.4);
}

.dl-illus__progress-wrap { }

.dl-illus__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}

.dl-illus__progress-track {
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 100px;
  overflow: hidden;
}

.dl-illus__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7CFF6B, #4ade80);
  border-radius: 100px;
  transition: width 0.05s linear;
}

.dl-illus__stand {
  height: 24px;
  width: 80px;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 8px 8px;
  margin: 0 auto;
}

/* Floating badges */
.dl-float-badge {
  position: absolute;
  background: rgba(10,15,12,0.92);
  border: 1px solid rgba(124,255,107,0.2);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  white-space: nowrap;
  animation: dlFloat 4s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dl-float-badge i { color: var(--dl-accent); font-size: 0.9rem; }

.dl-float-badge--tl { top: -20px; left: -30px; animation-delay: 0s; }
.dl-float-badge--tr { top: -20px; right: -30px; animation-delay: 0.8s; }
.dl-float-badge--bl { bottom: 60px; left: -30px; animation-delay: 1.6s; }
.dl-float-badge--br { bottom: 60px; right: -30px; animation-delay: 2.4s; }

@keyframes dlFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Device floating cards */
.dl-device-float {
  position: absolute;
  background: rgba(10,15,12,0.88);
  border: 1px solid var(--dl-border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  backdrop-filter: blur(8px);
  z-index: 4;
  animation: dlFloat 5s ease-in-out infinite;
}

.dl-device-float i { font-size: 1rem; color: var(--dl-accent); }
.dl-device-float--atv  { top: 30%; left: -60px; animation-delay: 0.3s; }
.dl-device-float--fire { top: 50%; right: -60px; animation-delay: 1.2s; }
.dl-device-float--phone{ bottom: 20%; left: -60px; animation-delay: 2.0s; }

/* Shield badge */
.dl-shield-badge {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(124,255,107,0.1);
  border: 2px solid rgba(124,255,107,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--dl-accent);
  z-index: 5;
  animation: dlPulseRing 2.5s ease-in-out infinite;
}

@keyframes dlPulseRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,255,107,0.0); }
  50%      { box-shadow: 0 0 0 12px rgba(124,255,107,0.1); }
}

/* ============================================================
   SEARCH & FILTER SECTION
   ============================================================ */
.dl-filter-sec {
  background: var(--bg-secondary, var(--bg-primary));
  border-top: 1px solid var(--dl-border);
  border-bottom: 1px solid var(--dl-border);
  padding: 40px 0;
  position: sticky;
  top: 70px;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dl-filter-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.dl-search-wrap {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.dl-search-box {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.dl-search-icon {
  position: absolute;
  left: 18px;
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.dl-search-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  padding: 14px 44px 14px 48px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dl-search-input::placeholder { color: rgba(255,255,255,0.22); }

.dl-search-input:focus {
  border-color: rgba(124,255,107,0.4);
  box-shadow: 0 0 0 3px rgba(124,255,107,0.07);
}

.dl-search-clear {
  position: absolute;
  right: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}
.dl-search-clear:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Sort */
.dl-sort-wrap {
  position: relative;
  flex-shrink: 0;
}

.dl-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  padding: 14px 40px 14px 18px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #fff;
  cursor: pointer;
  outline: none;
  min-width: 180px;
  transition: border-color 0.2s ease;
}

.dl-sort-select:focus { border-color: rgba(124,255,107,0.4); }

.dl-sort-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.85rem;
  pointer-events: none;
}

/* Filter chips */
.dl-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.dl-chip {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dl-chip:hover {
  border-color: rgba(124,255,107,0.3);
  color: var(--dl-accent);
  background: rgba(124,255,107,0.05);
}

.dl-chip--active,
.dl-chip.active {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

/* Platform icons */
.dl-platform-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dl-platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--dl-trans);
  min-width: 72px;
}

.dl-platform-btn:hover {
  background: rgba(124,255,107,0.05);
  border-color: rgba(124,255,107,0.25);
  transform: translateY(-2px);
}

.dl-platform-btn.active {
  background: rgba(124,255,107,0.08);
  border-color: rgba(124,255,107,0.35);
}

.dl-platform-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
  transition: color 0.2s ease, background 0.2s ease;
}

.dl-platform-btn:hover .dl-platform-icon-wrap,
.dl-platform-btn.active .dl-platform-icon-wrap {
  color: var(--dl-accent);
  background: rgba(124,255,107,0.1);
}

.dl-platform-label {
  font-size: 0.62rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.dl-platform-count {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.15);
  padding: 1px 6px;
  border-radius: 100px;
}

/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.dl-featured-sec,
.dl-grid-sec,
.dl-trust-sec,
.dl-guides-sec,
.dl-cta-sec {
  padding: 90px 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
}

.dl-featured-sec__inner,
.dl-grid-sec__inner,
.dl-trust-sec__inner,
.dl-guides-sec__inner,
.dl-cta-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.dl-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}

.dl-sec-header__left { flex: 1; }

.dl-sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.dl-sec-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.dl-sec-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

.dl-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dl-accent);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  transition: gap 0.2s ease;
}
.dl-view-all:hover { gap: 10px; }

.dl-result-count {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-bottom: 4px;
}

#dlResultNum {
  color: var(--dl-accent);
  font-weight: 700;
}

/* ============================================================
   FEATURED DOWNLOADS GRID
   ============================================================ */
.dl-featured-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

/* Hero featured card */
.dl-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.05) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18);
  border-radius: var(--dl-radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
  overflow: hidden;
}

.dl-feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}

.dl-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,255,107,0.3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,255,107,0.08);
}

.dl-feat-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  padding: 4px 10px;
  border-radius: 100px;
}

.dl-feat-card__top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dl-feat-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.dl-feat-card__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px 0;
}

.dl-feat-card__tagline {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.dl-feat-card__ver-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dl-feat-card__version,
.dl-feat-card__updated,
.dl-feat-card__size {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dl-feat-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

.dl-feat-card__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dl-feat-card__plat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dl-border);
  padding: 4px 10px;
  border-radius: 8px;
}

.dl-feat-card__stats {
  display: flex;
  gap: 24px;
}

.dl-feat-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dl-feat-card__stat span:first-child {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.dl-feat-card__stat-num {
  color: var(--dl-accent) !important;
}

.dl-feat-card__stat-rating {
  color: #fbbf24 !important;
}

.dl-feat-card__stat span:last-child {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dl-feat-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Side cards */
.dl-feat-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dl-side-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}

.dl-side-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124,255,107,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.dl-side-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dl-side-card__icon { font-size: 1.5rem; flex-shrink: 0; }

.dl-side-card__name {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px 0;
  transition: color 0.2s ease;
}
.dl-side-card:hover .dl-side-card__name { color: var(--dl-accent); }

.dl-side-card__plats {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dl-side-card__rating {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dl-accent);
  flex-shrink: 0;
}

.dl-side-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.dl-side-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dl-side-card__ver {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dl-side-card__dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dl-accent);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dl-side-card__dl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,255,107,0.35);
}

/* ============================================================
   ALL DOWNLOADS GRID (12 cards, 3-col)
   ============================================================ */
.dl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.dl-card {
  position: relative;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
  overflow: hidden;
}

.dl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,255,107,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.3);
}

.dl-card.dl-hidden { display: none; }

.dl-card__verified-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--dl-accent);
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.dl-card:hover .dl-card__verified-badge { opacity: 1; }

.dl-card__new-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.1);
  border: 1px solid rgba(124,255,107,0.2);
  padding: 3px 7px;
  border-radius: 6px;
}

.dl-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dl-card__icon { font-size: 1.6rem; flex-shrink: 0; }

.dl-card__info { flex: 1; }

.dl-card__name {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px 0;
  transition: color 0.2s ease;
}
.dl-card:hover .dl-card__name { color: var(--dl-accent); }

.dl-card__ver {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.dl-card__rating-badge {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
  flex-shrink: 0;
}

.dl-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.dl-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dl-card__tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
}

.dl-card__platforms-row {
  display: flex;
  gap: 8px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.35);
}
.dl-card__platforms-row i:hover { color: var(--dl-accent); }

.dl-card__footer {
  border-top: 1px solid var(--dl-border);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.dl-card__meta-row {
  display: flex;
  gap: 12px;
}

.dl-card__size,
.dl-card__dlcount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.dl-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dl-accent);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dl-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,255,107,0.35);
}

/* No results */
.dl-no-results {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-secondary);
}

.dl-no-results__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 14px;
  opacity: 0.3;
}

.dl-no-results h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
}

.dl-no-results p { font-size: 0.88rem; margin-bottom: 20px; }

/* Load More */
.dl-load-more-wrap {
  text-align: center;
  padding-top: 12px;
}

.dl-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  border-radius: 14px;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dl-trans);
}

.dl-load-more-btn:hover {
  background: rgba(124,255,107,0.06);
  border-color: rgba(124,255,107,0.25);
  color: var(--dl-accent);
  transform: translateY(-1px);
}

/* ============================================================
   SAFETY / TRUST SECTION
   ============================================================ */
.dl-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}

.dl-trust-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dl-trans), transform var(--dl-trans), box-shadow var(--dl-trans);
}

.dl-trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,255,107,0.22);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

.dl-trust-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--dl-accent);
}

.dl-trust-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.dl-trust-card:hover .dl-trust-card__title { color: var(--dl-accent); }

.dl-trust-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

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

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

.dl-trust-stat__num,
.dl-trust-stat__text {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.dl-trust-stat__label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
}

/* ============================================================
   INSTALL GUIDES SECTION
   ============================================================ */
.dl-guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.dl-guide-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 24px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}

.dl-guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,255,107,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.dl-guide-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--dl-accent);
  flex-shrink: 0;
}

.dl-guide-card__content { flex: 1; }

.dl-guide-card__platform-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.18);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 6px;
}

.dl-guide-card__title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px 0;
  transition: color 0.2s ease;
}
.dl-guide-card:hover .dl-guide-card__title { color: var(--dl-accent); }

.dl-guide-card__desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 6px 0;
}

.dl-guide-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
}

.dl-guide-card__link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.dl-guide-card:hover .dl-guide-card__link {
  background: var(--dl-accent);
  border-color: var(--dl-accent);
  color: #ffffff;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.dl-cta-sec {
  background: var(--bg-primary);
  border-top: 1px solid var(--dl-border);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.dl-cta-sec__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.dl-cta-sec__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,255,107,0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.dl-cta-sec__content {
  position: relative;
  z-index: 2;
}

.dl-cta-sec__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.dl-cta-sec__title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.dl-cta-sec__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 32px;
}

.dl-cta-sec__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.dl-cta-sec__note {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   DOWNLOAD TOAST
   ============================================================ */
.dl-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  background: rgba(10,15,12,0.95);
  border: 1px solid rgba(124,255,107,0.25);
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 0.86rem;
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  pointer-events: none;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}

.dl-toast:not([hidden]) {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .dl-trust-grid   { grid-template-columns: repeat(2, 1fr); }
  .dl-trust-stats  { grid-template-columns: repeat(2, 1fr); }
  .dl-cards-grid   { grid-template-columns: repeat(2, 1fr); }
  .dl-featured-grid { grid-template-columns: 1fr; }
  .dl-feat-side    { flex-direction: row; flex-wrap: wrap; }
  .dl-side-card    { flex: 1; min-width: 200px; }
}

@media (max-width: 820px) {
  .dl-hero__layout { grid-template-columns: 1fr; gap: 48px; }
  .dl-hero__right  { display: none; }
  .dl-hero__title  { font-size: 2.4rem; }
  .dl-hero__stats  { flex-wrap: wrap; width: 100%; }
  .dl-filter-sec   { position: relative; top: 0; }
  .dl-guides-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dl-hero { padding: 100px 0 60px; }
  .dl-hero__inner { padding: 0 20px; }
  .dl-filter-sec__inner { padding: 0 20px; }
  .dl-featured-sec__inner,
  .dl-grid-sec__inner,
  .dl-trust-sec__inner,
  .dl-guides-sec__inner,
  .dl-cta-sec__inner { padding: 0 20px; }
  .dl-hero__title { font-size: 2rem; }
  .dl-cards-grid   { grid-template-columns: 1fr; }
  .dl-trust-grid   { grid-template-columns: 1fr; }
  .dl-trust-stats  { grid-template-columns: repeat(2, 1fr); }
  .dl-search-wrap  { flex-direction: column; }
  .dl-platform-icons { gap: 8px; }
  .dl-platform-btn { min-width: 60px; padding: 10px 8px; }
  .dl-cta-sec__title { font-size: 2.2rem; }
  .dl-feat-side { flex-direction: column; }
  .dl-sec-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
[data-theme="light"] .dl-hero        { background: #f8fafc; }
[data-theme="light"] .dl-hero__bg-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
}
[data-theme="light"] .dl-hero__title         { color: #0f172a; }
[data-theme="light"] .dl-hero__subtitle      { color: #475569; }
[data-theme="light"] .dl-hero__stats         { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-hero__stat-label    { color: #64748b; }
[data-theme="light"] .dl-illus__screen       { background: #fff; border-color: rgba(15,23,42,0.1); }
[data-theme="light"] .dl-illus__screen-bar   { background: #f1f5f9; border-bottom-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-illus__app-card     { background: #f8fafc; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-illus__app-name     { color: #0f172a; }
[data-theme="light"] .dl-float-badge         { background: rgba(248,250,252,0.95); }
[data-theme="light"] .dl-filter-sec          { background: rgba(248,250,252,0.95); border-top-color: rgba(15,23,42,0.06); border-bottom-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-search-input        { background: #fff; border-color: rgba(15,23,42,0.1); color: #0f172a; }
[data-theme="light"] .dl-search-input::placeholder { color: rgba(15,23,42,0.3); }
[data-theme="light"] .dl-sort-select         { background: #fff; border-color: rgba(15,23,42,0.1); color: #0f172a; }
[data-theme="light"] .dl-platform-btn        { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-chip                { border-color: rgba(15,23,42,0.1); color: #64748b; }
[data-theme="light"] .dl-featured-sec,
[data-theme="light"] .dl-grid-sec,
[data-theme="light"] .dl-trust-sec,
[data-theme="light"] .dl-guides-sec,
[data-theme="light"] .dl-cta-sec             { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-sec-title           { color: #0f172a; }
[data-theme="light"] .dl-sec-subtitle        { color: #475569; }
[data-theme="light"] .dl-feat-card           { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .dl-feat-card__name     { color: #0f172a; }
[data-theme="light"] .dl-feat-card__desc     { color: #475569; }
[data-theme="light"] .dl-side-card           { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-side-card__name     { color: #0f172a; }
[data-theme="light"] .dl-side-card__desc     { color: #475569; }
[data-theme="light"] .dl-card                { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-card__name          { color: #0f172a; }
[data-theme="light"] .dl-card__desc          { color: #475569; }
[data-theme="light"] .dl-card__footer        { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-trust-card          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-trust-card__title   { color: #0f172a; }
[data-theme="light"] .dl-trust-card__desc    { color: #475569; }
[data-theme="light"] .dl-trust-stat          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-trust-stat__label   { color: #64748b; }
[data-theme="light"] .dl-guide-card          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-guide-card__title   { color: #0f172a; }
[data-theme="light"] .dl-guide-card__desc    { color: #475569; }
[data-theme="light"] .dl-cta-sec__title      { color: #0f172a; }
[data-theme="light"] .dl-cta-sec__desc       { color: #475569; }
[data-theme="light"] .dl-load-more-btn       { background: #fff; border-color: rgba(15,23,42,0.1); }


/* ============================================================
   FEATURED DOWNLOADS ENHANCEMENTS & NEW STYLES
   ============================================================ */

/* 1. Category filter chips inside featured section */
.dl-feat-chips-wrap {
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.dl-feat-chips-wrap::-webkit-scrollbar {
  height: 4px;
}

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

.dl-feat-chips {
  display: flex;
  gap: 8px;
  width: max-content;
}

.dl-feat-chip {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.dl-feat-chip.active {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

/* 2. Side Card Grid layout (Right Column) */
.dl-featured-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
}

.dl-feat-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Hide card animation trigger state */
.dl-side-card.dl-hidden,
.dl-feat-card.dl-hidden {
  display: none !important;
}

/* 3. Action row for bookmark, share, favorite inside hero card */
.dl-feat-card__actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}

.dl-feat-card__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dl-action-bar {
  display: flex;
  gap: 8px;
}

.dl-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dl-action-btn:hover {
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
  transform: translateY(-2px);
}

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

.dl-action-btn--favorite.active i {
  color: #f87171 !important;
}

.dl-action-btn--bookmark.active i {
  color: var(--dl-accent) !important;
}

/* 4. Trust badges list inside Hero card */
.dl-feat-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

.dl-feat-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  background: rgba(124, 255, 107, 0.04);
  border: 1px solid rgba(124, 255, 107, 0.15);
  padding: 4px 10px;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.dl-feat-trust-badge i {
  color: var(--dl-accent);
  font-size: 0.85rem;
}

.dl-feat-trust-badge:hover {
  border-color: rgba(124, 255, 107, 0.3);
}

/* 5. Side card customizations */
.dl-side-card__meta-wrap {
  flex: 1;
}

.dl-side-card__category-tag {
  font-size: 0.65rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
}

.dl-side-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--dl-border);
  padding-top: 12px;
  margin-top: auto;
  gap: 12px;
}

.dl-side-card__stats-row {
  display: flex;
  gap: 10px;
}

.dl-side-card__stat-item {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dl-side-card__stat-item i {
  color: var(--dl-accent);
}

/* 6. Inline progress indicator inside cards */
.dl-card-progress {
  width: 100%;
  margin-top: 8px;
}

.dl-card-progress__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.dl-card-progress__pct {
  color: var(--dl-accent);
  font-weight: 700;
}

.dl-card-progress__track {
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  overflow: hidden;
}

.dl-card-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7CFF6B, #22c55e);
  border-radius: 10px;
  transition: width 0.05s linear;
}

/* 7. Statistics Row below grid */
.dl-feat-stats-container {
  margin-top: 48px;
  border-top: 1px solid var(--dl-border);
  padding-top: 48px;
}

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

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

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

.dl-feat-stat-card__label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
}

/* App icon zoom effect */
.dl-feat-card__icon-wrap span,
.dl-side-card__icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-feat-card:hover .dl-feat-card__icon-wrap span,
.dl-side-card:hover .dl-side-card__icon {
  transform: scale(1.15) rotate(2deg);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .dl-featured-grid {
    grid-template-columns: 1fr !important;
  }
  .dl-feat-side {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dl-feat-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .dl-feat-side {
    grid-template-columns: 1fr !important;
  }
  .dl-feat-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .dl-feat-card__actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dl-feat-card__buttons {
    flex-direction: column;
  }
  .dl-feat-card__buttons .btn {
    width: 100%;
    justify-content: center;
  }
  .dl-action-bar {
    justify-content: center;
    margin-top: 8px;
  }
}

/* Light Theme Overrides */
[data-theme="light"] .dl-feat-chip {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dl-feat-chip:hover {
  background: rgba(37, 99, 235, 0.04);
}

[data-theme="light"] .dl-action-btn {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dl-action-btn:hover {
  background: rgba(37, 99, 235, 0.06);
}

[data-theme="light"] .dl-feat-trust-badge {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .dl-side-card__category-tag {
  color: #64748b;
}

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

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


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

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

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

.dl-plat-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}

.dl-plat-bg__orb--1 {
  top: -100px;
  right: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.03) 0%, transparent 70%);
}

.dl-plat-bg__orb--2 {
  bottom: -100px;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
}

.dl-plat-bg__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

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

/* Filter Chips for Platform Section */
.dl-plat-chips-wrap {
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.dl-plat-chips-wrap::-webkit-scrollbar {
  height: 4px;
}

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

.dl-plat-chips {
  display: flex;
  gap: 8px;
  width: max-content;
}

.dl-plat-chip {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-plat-chip:hover {
  border-color: rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
  background: rgba(124, 255, 107, 0.05);
}

.dl-plat-chip.active {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

/* 4-Column Platform Grid */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.plat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}

.plat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.plat-card.dl-hidden {
  display: none !important;
}

/* Card Top Section */
.plat-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plat-card__logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  transition: all 0.3s ease;
}

/* Tailored Brand Colors/Glows */
.plat-card__logo--win      { color: #0078d4; background: rgba(0, 120, 212, 0.08); border-color: rgba(0, 120, 212, 0.2); }
.plat-card__logo--mac      { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); }
.plat-card__logo--lin      { color: #fcc624; background: rgba(252, 198, 36, 0.08); border-color: rgba(252, 198, 36, 0.2); }
.plat-card__logo--and      { color: #3ddc84; background: rgba(61, 220, 132, 0.08); border-color: rgba(61, 220, 132, 0.2); }
.plat-card__logo--atv      { color: #3ddc84; background: rgba(61, 220, 132, 0.08); border-color: rgba(61, 220, 132, 0.2); }
.plat-card__logo--fire     { color: #ff9900; background: rgba(255, 153, 0, 0.08); border-color: rgba(255, 153, 0, 0.2); }
.plat-card__logo--appletv  { color: #ff3b30; background: rgba(255, 59, 48, 0.08); border-color: rgba(255, 59, 48, 0.2); }
.plat-card__logo--roku     { color: #662d91; background: rgba(102, 45, 145, 0.08); border-color: rgba(102, 45, 145, 0.2); }
.plat-card__logo--lg       { color: #a50034; background: rgba(165, 0, 52, 0.08); border-color: rgba(165, 0, 52, 0.2); }
.plat-card__logo--samsung  { color: #1428a0; background: rgba(20, 40, 160, 0.08); border-color: rgba(20, 40, 160, 0.2); }
.plat-card__logo--ios      { color: #0078d4; background: rgba(0, 120, 212, 0.08); border-color: rgba(0, 120, 212, 0.2); }
.plat-card__logo--web      { color: var(--dl-accent); background: rgba(124, 255, 107, 0.08); border-color: rgba(124, 255, 107, 0.2); }

.plat-card:hover .plat-card__logo {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Card Tools */
.plat-card__fav-wrap {
  display: flex;
  gap: 6px;
}

.plat-fav-btn,
.plat-info-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.plat-fav-btn:hover {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.plat-fav-btn.active {
  background: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
  color: #f87171;
}

.plat-info-btn:hover {
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.3);
  color: var(--dl-accent);
}

/* Card Details */
.plat-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  transition: color 0.2s ease;
}

.plat-card:hover .plat-card__title {
  color: var(--dl-accent);
}

.plat-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.plat-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.plat-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dl-border);
  padding: 2px 8px;
  border-radius: 6px;
}

.plat-card__stats {
  border-top: 1px solid var(--dl-border);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.plat-card__count {
  font-weight: 700;
  color: #fff;
}

.plat-count-num {
  color: var(--dl-accent);
}

.plat-card__btn {
  width: 100%;
  justify-content: center;
  font-size: 0.8rem;
  padding: 10px 16px;
  border-radius: 12px;
  margin-top: 4px;
}

/* Statistics row */
.dl-plat-stats-container {
  border-top: 1px solid var(--dl-border);
  padding-top: 56px;
}

.dl-plat-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dl-plat-stat-card {
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dl-plat-stat-card__number,
.dl-plat-stat-card__text {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dl-accent);
  line-height: 1;
}

.dl-plat-stat-card__label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
}

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

@media (max-width: 640px) {
  .plat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .plat-card {
    padding: 20px !important;
    gap: 10px !important;
  }
  .plat-card__title {
    font-size: 1rem !important;
  }
  .plat-card__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px !important;
  }
  .dl-plat-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

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

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

[data-theme="light"] .dl-plat-chip:hover {
  background: rgba(37, 99, 235, 0.04);
}

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

[data-theme="light"] .plat-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

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

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

[data-theme="light"] .plat-badge {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}

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

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

[data-theme="light"] .plat-fav-btn,
[data-theme="light"] .plat-info-btn {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}

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

[data-theme="light"] .dl-plat-stat-card__label {
  color: #475569;
}


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

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

.dl-cat-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 80% 80% at 50% 50%, #000 20%, transparent 100%);
}

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

.dl-cat-bg__orb--1 {
  top: -80px; left: 10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,255,107,0.04) 0%, transparent 70%);
}
.dl-cat-bg__orb--2 {
  bottom: -80px; right: 5%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(59,130,246,0.035) 0%, transparent 70%);
}
.dl-cat-bg__orb--3 {
  top: 40%; left: 40%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(168,85,247,0.025) 0%, transparent 70%);
}

.dl-cat-bg__particles {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  opacity: 0.35;
}

.dl-cat-bg__lines {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  opacity: 1;
}

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

/* --- Filter chips --- */
.dl-cat-chips-wrap {
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.dl-cat-chips-wrap::-webkit-scrollbar { height: 4px; }
.dl-cat-chips-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 10px;
}
.dl-cat-chips {
  display: flex; gap: 8px; width: max-content;
}
.dl-cat-chip {
  font-family: var(--font-display);
  font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.dl-cat-chip:hover {
  border-color: rgba(124,255,107,0.3);
  color: var(--dl-accent);
  background: rgba(124,255,107,0.05);
}
.dl-cat-chip.active {
  background: var(--dl-accent);
  color: #ffffff;
  border-color: var(--dl-accent);
}

/* --- Category Grid --- */
.dl-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 44px;
}

/* --- Category Card --- */
.cat-card {
  position: relative;
  border-radius: var(--dl-radius-lg);
  background: var(--dl-card-bg);
  border: 1px solid var(--dl-border);
  overflow: hidden;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
  display: flex;
  flex-direction: column;
}

.cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124,255,107,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.cat-card.dl-hidden { display: none !important; }

/* Trending ribbon */
.cat-card__ribbon {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px 5px 18px;
  border-radius: 0 var(--dl-radius-lg) 0 20px;
  z-index: 3;
}

.cat-card__ribbon--gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Hover glow layer */
.cat-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(124,255,107,0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.cat-card__glow--gold {
  background: radial-gradient(circle at 50% 0%, rgba(251,191,36,0.07) 0%, transparent 70%);
}
.cat-card:hover .cat-card__glow { opacity: 1; }

/* Gradient border on hover via ::before */
.cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0), transparent);
  transition: background 0.4s ease;
  z-index: 2;
}
.cat-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.5), transparent);
}

/* Editor's pick card */
.cat-card--editors-pick {
  border-color: rgba(251,191,36,0.2);
  background: linear-gradient(135deg, rgba(251,191,36,0.03) 0%, var(--dl-card-bg) 100%);
}
.cat-card--editors-pick:hover {
  border-color: rgba(251,191,36,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.08);
}
.cat-card--editors-pick::before {
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0), transparent);
}
.cat-card--editors-pick:hover::before {
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), transparent);
}

/* Trending card highlight */
.cat-card--trending {
  border-color: rgba(255,107,53,0.2);
}
.cat-card--trending:hover {
  border-color: rgba(255,107,53,0.35);
}

/* Card Inner */
.cat-card__inner {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Card Top Row */
.cat-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Icon Wrap */
.cat-card__icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(124,255,107,0.06);
  border: 1px solid rgba(124,255,107,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
  flex-shrink: 0;
}
.cat-card__icon-wrap--accent { background: rgba(255,107,53,0.07); border-color: rgba(255,107,53,0.2); }
.cat-card__icon-wrap--purple { background: rgba(168,85,247,0.07); border-color: rgba(168,85,247,0.2); }
.cat-card__icon-wrap--blue   { background: rgba(59,130,246,0.07); border-color: rgba(59,130,246,0.2); }
.cat-card__icon-wrap--cyan   { background: rgba(6,182,212,0.07);  border-color: rgba(6,182,212,0.2);  }
.cat-card__icon-wrap--orange { background: rgba(249,115,22,0.07); border-color: rgba(249,115,22,0.2); }
.cat-card__icon-wrap--pink   { background: rgba(236,72,153,0.07); border-color: rgba(236,72,153,0.2); }
.cat-card__icon-wrap--yellow { background: rgba(234,179,8,0.07);  border-color: rgba(234,179,8,0.2);  }
.cat-card__icon-wrap--indigo { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.2); }
.cat-card__icon-wrap--gold   { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); }

.cat-card:hover .cat-card__icon-wrap {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Card tool buttons */
.cat-card__tools { display: flex; gap: 6px; }

.cat-fav-btn,
.cat-info-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; cursor: pointer;
  transition: all 0.2s ease;
}
.cat-fav-btn:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }
.cat-fav-btn.active { background: rgba(124,255,107,0.12); border-color: var(--dl-accent); color: var(--dl-accent); }
.cat-info-btn:hover { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #60a5fa; }

/* Card content */
.cat-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  transition: color 0.2s ease;
}
.cat-card:hover .cat-card__title { color: var(--dl-accent); }

.cat-card__desc {
  font-size: 0.79rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* Card footer */
.cat-card__footer {
  border-top: 1px solid var(--dl-border);
  padding-top: 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-card__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-count-wrap {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.cat-count-num { color: var(--dl-accent); }

.cat-card__btn {
  width: 100%;
  justify-content: center;
  font-size: 0.78rem;
  padding: 9px 14px;
  border-radius: 11px;
}

/* --- Featured Banner --- */
.dl-cat-banner {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(124,255,107,0.15);
  border-radius: 24px;
  overflow: hidden;
  padding: 48px 48px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 12px;
}

.dl-cat-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}

.dl-cat-banner__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.dl-cat-banner__orb {
  position: absolute;
  left: -80px; top: -80px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,255,107,0.06) 0%, transparent 65%);
  filter: blur(60px);
}

.dl-cat-banner__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.dl-cat-banner__left { flex: 1; min-width: 280px; }

.dl-cat-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.dl-cat-banner__eyebrow i { color: var(--dl-accent); }

.dl-cat-banner__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}

.dl-cat-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

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

@media (max-width: 640px) {
  .dl-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .cat-card__inner { padding: 18px !important; gap: 10px !important; }
  .cat-card__title { font-size: 0.92rem !important; }
  .dl-cat-banner { padding: 28px 24px !important; }
  .dl-cat-banner__content { flex-direction: column; align-items: flex-start; }
  .dl-cat-banner__actions { width: 100%; }
  .dl-cat-banner__actions .btn { flex: 1; text-align: center; }
  .dl-cat-sec__inner { padding: 0 20px !important; }
}

/* Light theme */
[data-theme="light"] .dl-cat-sec          { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-cat-chip         { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-cat-chip:hover   { background: rgba(37,99,235,0.04); }
[data-theme="light"] .cat-card            { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .cat-card:hover      { border-color: rgba(37,99,235,0.3); box-shadow: 0 12px 36px rgba(15,23,42,0.06); }
[data-theme="light"] .cat-card__title     { color: #0f172a; }
[data-theme="light"] .cat-card:hover .cat-card__title { color: #2563eb; }
[data-theme="light"] .cat-card__desc      { color: #475569; }
[data-theme="light"] .cat-card__footer    { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .cat-count-wrap      { color: #0f172a; }
[data-theme="light"] .cat-fav-btn,
[data-theme="light"] .cat-info-btn        { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-cat-banner       { background: rgba(15,23,42,0.02); border-color: rgba(37,99,235,0.2); }
[data-theme="light"] .dl-cat-banner__eyebrow { color: #0f172a; }
[data-theme="light"] .dl-cat-banner__desc { color: #475569; }


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

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

.dl-latest-bg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 25%, transparent 100%);
}

.dl-latest-bg__orb {
  position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none;
}
.dl-latest-bg__orb--1 { top:-80px; left:5%;  width:480px; height:480px; background:radial-gradient(circle,rgba(124,255,107,0.04) 0%,transparent 70%); }
.dl-latest-bg__orb--2 { bottom:-80px; right:5%; width:420px; height:420px; background:radial-gradient(circle,rgba(59,130,246,0.03) 0%,transparent 70%); }

.dl-latest-bg__particles { position:absolute; inset:0; width:100%; height:100%; opacity:0.35; }

.dl-latest-bg__accent-line {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.2), transparent);
}

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

/* -- Filter chips -- */
.dl-latest-chips-wrap {
  margin-bottom: 40px; overflow-x: auto; padding-bottom: 8px;
}
.dl-latest-chips-wrap::-webkit-scrollbar { height: 4px; }
.dl-latest-chips-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.dl-latest-chips { display: flex; gap: 8px; width: max-content; }
.dl-latest-chip {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.dl-latest-chip:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); background: rgba(124,255,107,0.05); }
.dl-latest-chip.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* ── Featured Release Card ── */
.dl-latest-featured { margin-bottom: 48px; }

.rel-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.04) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.2);
  border-radius: 28px;
  overflow: hidden;
  padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.rel-feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,255,107,0.35);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(124,255,107,0.07);
}

.rel-feat-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.5), transparent);
}

.rel-feat-card__ribbon {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, rgba(124,255,107,0.35), rgba(34,197,94,0.25));
  border: 1px solid rgba(124,255,107,0.35);
  padding: 5px 12px; border-radius: 100px;
  backdrop-filter: blur(8px);
}

/* Two-column layout */
.rel-feat-card__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: flex-start;
}

.rel-feat-card__meta-top {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px;
}

.rel-feat-card__icon-wrap {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.rel-feat-card:hover .rel-feat-card__icon-wrap { transform: scale(1.08) rotate(3deg); }

.rel-feat-card__name {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  color: #fff; margin: 0 0 8px 0;
}

.rel-feat-card__ver-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.rel-feat-card__ver-badge {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800;
  color: var(--dl-accent);
  background: rgba(124,255,107,0.1); border: 1px solid rgba(124,255,107,0.25);
  padding: 3px 10px; border-radius: 100px;
}

.rel-feat-card__date-badge,
.rel-feat-card__size-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--text-secondary);
}

.rel-feat-card__desc {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.68; margin: 0 0 20px 0;
}

.rel-feat-card__platforms {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}

.rel-feat-card__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}

/* Small action buttons row */
.rel-feat-card__tool-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.rel-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  border-radius: 10px; padding: 6px 12px; cursor: pointer;
  transition: all 0.2s ease;
}
.rel-action-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.rel-action-btn.active { background: rgba(124,255,107,0.1); border-color: var(--dl-accent); color: var(--dl-accent); }

/* Inline progress */
.rel-progress-wrap { margin-top: 14px; }
.rel-progress-label { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-secondary); margin-bottom: 6px; }
.rel-progress-pct { color: var(--dl-accent); font-weight: 700; }
.rel-progress-track { height: 5px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; }
.rel-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7CFF6B, #22c55e); border-radius: 10px; transition: width 0.06s linear; }

/* What's New panel */
.rel-whats-new {
  background: rgba(255,255,255,0.025); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 24px; position: relative;
  height: 100%;
}
.rel-whats-new::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.35), transparent);
}

.rel-whats-new__header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.rel-whats-new__title {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 800;
  color: #fff; margin: 0; display: flex; align-items: center; gap: 7px;
}
.rel-whats-new__title i { color: var(--dl-accent); }

.rel-whats-new__toggle {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem;
}
.rel-whats-new__toggle:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }

.rel-whats-new__list {
  list-style: none; padding: 0; margin: 0 0 20px 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.rel-whats-new__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4;
}
.rel-whats-new__item i { font-size: 1rem; flex-shrink: 0; }
.rel-whats-new__item--perf    i { color: #fbbf24; }
.rel-whats-new__item--ui      i { color: #60a5fa; }
.rel-whats-new__item--feature i { color: var(--dl-accent); }
.rel-whats-new__item--security i { color: #34d399; }

.rel-ver-compare {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--dl-border);
}
.rel-ver-compare__old {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-secondary); text-decoration: line-through;
}
.rel-ver-compare__new {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800;
  color: var(--dl-accent);
}
.rel-ver-compare__tag {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
  color: #fbbf24; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2);
  padding: 2px 8px; border-radius: 100px;
}

/* ── 6-Card Release Grid ── */
.dl-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.rel-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
  position: relative; overflow: hidden;
}
.rel-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0), transparent);
  transition: background 0.4s ease;
}
.rel-card:hover::before { background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent); }
.rel-card:hover { transform: translateY(-4px); border-color: rgba(124,255,107,0.22); box-shadow: 0 16px 44px rgba(0,0,0,0.32); }
.rel-card.dl-hidden { display: none !important; }

/* Card header */
.rel-card__header { display: flex; align-items: center; gap: 12px; }
.rel-card__icon-bg {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  transition: transform 0.3s ease;
}
.rel-card:hover .rel-card__icon-bg { transform: scale(1.08) rotate(4deg); }

.rel-card__meta { flex: 1; min-width: 0; }
.rel-card__name {
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 700;
  color: #fff; margin: 0 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.rel-card:hover .rel-card__name { color: var(--dl-accent); }
.rel-card__cat { font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }

.rel-card__badges-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.rel-card__ver-badge {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800;
  color: var(--dl-accent); background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.18); padding: 2px 8px; border-radius: 100px;
}
.rel-card__security-badge {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  color: #34d399; background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2); padding: 2px 7px; border-radius: 100px;
}
.rel-card__new-badge {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800;
  color: var(--dl-accent); background: rgba(124,255,107,0.1);
  border: 1px solid rgba(124,255,107,0.22); padding: 2px 7px; border-radius: 100px;
  animation: relBadgePulse 2s ease-in-out infinite;
}
@keyframes relBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,255,107,0); }
  50%      { box-shadow: 0 0 0 4px rgba(124,255,107,0.1); }
}

/* Highlight row */
.rel-card__highlight {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.76rem; font-weight: 700;
  padding: 6px 12px; border-radius: 10px;
}
.rel-card__highlight--perf     { color: #fbbf24; background: rgba(251,191,36,0.07); }
.rel-card__highlight--security { color: #34d399; background: rgba(52,211,153,0.07); }
.rel-card__highlight--ui       { color: #60a5fa; background: rgba(96,165,250,0.07); }
.rel-card__highlight--feature  { color: var(--dl-accent); background: rgba(124,255,107,0.07); }
.rel-card__highlight--fix      { color: #f87171; background: rgba(248,113,113,0.07); }

.rel-card__updated {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px; margin: 0;
}

/* Card actions row */
.rel-card__actions {
  border-top: 1px solid var(--dl-border); padding-top: 12px; margin-top: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.rel-card__tool-row { display: flex; gap: 6px; }
.rel-card-tool {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease;
}
.rel-card-tool:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.rel-card-tool.active { background: rgba(124,255,107,0.12); border-color: var(--dl-accent); color: var(--dl-accent); }

.rel-card__dl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--dl-accent); color: #ffffff;
  border: none; border-radius: 10px; padding: 7px 14px;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rel-card__dl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,255,107,0.35); }

/* ── Release Timeline ── */
.dl-release-timeline {
  margin-bottom: 56px;
  padding: 40px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.dl-release-timeline::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.3), transparent);
}

.dl-timeline-header { margin-bottom: 32px; }
.dl-timeline-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  color: #fff; margin: 0;
}

.dl-timeline-track {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0;
}

.dl-timeline-line {
  position: absolute; top: 14px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--dl-accent), rgba(124,255,107,0.3), transparent);
  z-index: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s ease;
}
.dl-timeline-line.animated { transform: scaleX(1); }

.dl-timeline-item {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; z-index: 1; flex: 1;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.dl-timeline-item.visible { opacity: 1; transform: translateY(0); }

.dl-timeline-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(124,255,107,0.15); border: 2px solid rgba(124,255,107,0.5);
  box-shadow: 0 0 0 4px rgba(124,255,107,0.05);
  position: relative; transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.dl-timeline-dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--dl-accent);
}
.dl-timeline-item:hover .dl-timeline-dot {
  background: rgba(124,255,107,0.25);
  border-color: var(--dl-accent);
  box-shadow: 0 0 0 8px rgba(124,255,107,0.08), 0 0 20px rgba(124,255,107,0.2);
}

.dl-timeline-content { text-align: center; }
.dl-timeline-month {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 800;
  color: #fff; display: block; margin-bottom: 4px;
}
.dl-timeline-detail {
  font-size: 0.72rem; color: var(--text-secondary); margin: 0; line-height: 1.4;
}

/* ── Stats strip ── */
.dl-latest-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.dl-latest-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; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dl-latest-stat-num,
.dl-latest-stat-text {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  color: var(--dl-accent); line-height: 1;
}
.dl-latest-stat-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; line-height: 1.3; }

/* Responsive */
@media (max-width: 1100px) {
  .rel-feat-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dl-latest-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-latest-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-timeline-track { flex-direction: column; align-items: flex-start; gap: 24px; }
  .dl-timeline-line { display: none; }
  .dl-timeline-item { flex-direction: row; flex: unset; width: 100%; opacity: 1; transform: none; }
  .dl-timeline-content { text-align: left; }
}
@media (max-width: 640px) {
  .dl-latest-grid { grid-template-columns: 1fr !important; }
  .dl-latest-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-latest-sec__inner { padding: 0 20px; }
  .rel-feat-card { padding: 24px !important; }
  .rel-feat-card__actions { flex-direction: column; }
  .rel-feat-card__actions .btn { width: 100%; justify-content: center; }
  .rel-feat-card__tool-row { flex-wrap: wrap; }
  .dl-release-timeline { padding: 24px !important; }
}

/* Light theme */
[data-theme="light"] .dl-latest-sec         { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-latest-chip        { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-latest-chip:hover  { background: rgba(37,99,235,0.04); }
[data-theme="light"] .rel-feat-card         { background: #fff; border-color: rgba(37,99,235,0.25); }
[data-theme="light"] .rel-feat-card__name   { color: #0f172a; }
[data-theme="light"] .rel-feat-card__desc   { color: #475569; }
[data-theme="light"] .rel-whats-new         { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .rel-whats-new__title  { color: #0f172a; }
[data-theme="light"] .rel-whats-new__item   { color: #475569; }
[data-theme="light"] .rel-action-btn        { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .rel-card              { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .rel-card__name        { color: #0f172a; }
[data-theme="light"] .rel-card__actions     { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .rel-card-tool         { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-release-timeline   { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-timeline-title     { color: #0f172a; }
[data-theme="light"] .dl-timeline-month     { color: #0f172a; }
[data-theme="light"] .dl-latest-stat-card   { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-latest-stat-label  { color: #475569; }


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

/* -- Background overlay -- */
.dl-popular-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.dl-popular-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(circle at 50% 50%, #000 30%, transparent 100%);
}
.dl-popular-bg__orb {
  position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none;
}
.dl-popular-bg__orb--1 { top:-120px; right:10%; width:500px; height:500px; background:radial-gradient(circle,rgba(124,255,107,0.045) 0%,transparent 70%); }
.dl-popular-bg__orb--2 { bottom:-120px; left:10%; width:450px; height:450px; background:radial-gradient(circle,rgba(59,130,246,0.035) 0%,transparent 70%); }

.dl-popular-bg__particles { position:absolute; inset:0; width:100%; height:100%; opacity:0.3; }
.dl-popular-bg__lines { position:absolute; inset:0; width:100%; height:100%; opacity:0.8; }

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

/* -- Filter chips -- */
.dl-pop-chips-wrap {
  margin-bottom: 40px; overflow-x: auto; padding-bottom: 8px;
}
.dl-pop-chips-wrap::-webkit-scrollbar { height: 4px; }
.dl-pop-chips-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.dl-pop-chips { display: flex; gap: 8px; width: max-content; }
.dl-pop-chip {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.dl-pop-chip:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); background: rgba(124,255,107,0.05); }
.dl-pop-chip.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* ── Spotlight Card (#1) ── */
.dl-pop-spotlight { margin-bottom: 48px; }

.pop-spot-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.035) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18);
  border-radius: 28px;
  overflow: hidden;
  padding: 40px;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.pop-spot-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}

.pop-spot-card__glow-border {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}

.pop-spot-card__rank-badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(124,255,107,0.2), rgba(34,197,94,0.1));
  border: 1px solid rgba(124,255,107,0.3);
  padding: 6px 14px; border-radius: 100px;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}

.pop-spot-card__layout {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}

.pop-spot-card__brand-row {
  display: flex; align-items: center; gap: 18px; margin-bottom: 20px;
}
.pop-spot-card__logo-wrap {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  flex-shrink: 0; transition: transform 0.3s ease;
}
.pop-spot-card:hover .pop-spot-card__logo-wrap { transform: scale(1.08) rotate(3deg); }

.pop-spot-card__title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  color: #fff; margin: 0 0 4px 0;
}
.pop-spot-card__ratings {
  display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-secondary);
}
.pop-spot-card__stars { font-size: 0.72rem; letter-spacing: -2px; }
.pop-spot-card__rating-val { color: #fff; font-weight: 700; }

.pop-spot-card__desc {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 24px 0;
}

/* Specs list */
.pop-spot-card__specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px;
}
.pop-spot-card__spec-item {
  display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary);
}
.pop-spot-card__spec-item i { font-size: 1rem; color: var(--dl-accent); }

/* Trust Badges */
.pop-spot-card__trust {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.pop-trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  padding: 5px 12px; border-radius: 100px;
}
.pop-trust-badge i { color: var(--dl-accent); }

.pop-spot-card__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}

/* Interactive widgets row */
.pop-spot-card__widgets {
  display: flex; gap: 10px;
}
.pop-widget-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  color: var(--text-secondary); background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border); padding: 6px 14px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.pop-widget-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.pop-widget-btn.active { background: rgba(124,255,107,0.1); border-color: var(--dl-accent); color: var(--dl-accent); }

/* Progress */
.pop-progress-container { margin-top: 18px; }
.pop-progress-header { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 6px; }
.pop-progress-val { color: var(--dl-accent); font-weight: 700; }
.pop-progress-bar { height: 5px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.pop-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--dl-accent), #22c55e); transition: width 0.08s linear; }

/* Visual / Right side panel */
.pop-spot-card__visual {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 32px; height: 100%; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; gap: 20px;
}
.pop-spot-card__live-trending {
  display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary);
}
.pop-trending-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dl-accent);
  box-shadow: 0 0 10px var(--dl-accent); animation: popDotPulse 1.6s infinite ease-in-out;
}
@keyframes popDotPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

.pop-spot-card__visual-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pop-visual-icon { font-size: 2.5rem; animation: popFloatIcon 3s infinite ease-in-out; }
@keyframes popFloatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pop-visual-badge {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800;
  color: var(--dl-accent); text-transform: uppercase; letter-spacing: 0.05em;
}
.pop-visual-stat { font-size: 0.88rem; color: #fff; font-weight: 700; }

/* ── Popular Grid ── */
.dl-pop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px;
}
.pop-grid-card.dl-hidden { display: none !important; }

.pop-card {
  position: relative; background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg); overflow: hidden; height: 100%;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.pop-card:hover { transform: translateY(-4px); border-color: rgba(124,255,107,0.22); box-shadow: 0 16px 44px rgba(0,0,0,0.3); }

.pop-card__rank {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 900;
  color: rgba(255,255,255,0.08); transition: color var(--dl-trans);
}
.pop-card:hover .pop-card__rank { color: rgba(124,255,107,0.2); }

.pop-card__inner { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.pop-card__header { display: flex; align-items: center; gap: 12px; }
.pop-card__icon-bg {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  transition: transform 0.3s ease;
}
.pop-card:hover .pop-card__icon-bg { transform: scale(1.06) rotate(3deg); }

.pop-card__meta { flex: 1; min-width: 0; }
.pop-card__title {
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 700;
  color: #fff; margin: 0 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop-card:hover .pop-card__title { color: var(--dl-accent); }
.pop-card__cat { font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }

.pop-card__details {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px;
  border-top: 1px solid var(--dl-border); border-bottom: 1px solid var(--dl-border);
  padding: 12px 0;
}
.pop-card__stat-item { display: flex; flex-direction: column; gap: 3px; }
.pop-card__stat-label { font-size: 0.68rem; color: var(--text-secondary); }
.pop-card__stat-val { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: #fff; }

.pop-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pop-card__tools { display: flex; gap: 6px; }
.pop-card-tool {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease;
}
.pop-card-tool:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.pop-card-tool.active { background: rgba(124,255,107,0.12); border-color: var(--dl-accent); color: var(--dl-accent); }

.pop-card__btn {
  background: var(--dl-accent); color: #ffffff; border: none; border-radius: 10px;
  padding: 7px 14px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 800;
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pop-card__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,255,107,0.35); }

/* ── Top Categories List ── */
.dl-pop-categories {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 24px; padding: 32px; margin-bottom: 48px; position: relative;
}
.dl-pop-categories::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.35), transparent);
}
.pop-cat-header { margin-bottom: 24px; }
.pop-cat-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.pop-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.pop-cat-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; transition: transform var(--dl-trans), border-color var(--dl-trans);
}
.pop-cat-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.25); }
.pop-cat-card__icon { font-size: 1.5rem; }
.pop-cat-card__title { font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; color: #fff; margin: 0; }
.pop-cat-card__desc { font-size: 0.68rem; color: var(--text-secondary); margin: 0; }

/* ── Popular This Week Carousel ── */
.dl-pop-weekly { margin-bottom: 56px; }
.pop-weekly-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.pop-weekly-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }

.pop-carousel-nav { display: flex; gap: 8px; }
.pop-carousel-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
}
.pop-carousel-btn:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }

.pop-weekly-carousel-wrap {
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
.pop-weekly-carousel-wrap::-webkit-scrollbar { height: 4px; }
.pop-weekly-carousel-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }

.pop-weekly-carousel { display: flex; gap: 16px; width: max-content; }

.pop-carousel-item {
  scroll-snap-align: start; width: 220px; background: var(--dl-card-bg);
  border: 1px solid var(--dl-border); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; transition: transform var(--dl-trans), border-color var(--dl-trans);
}
.pop-carousel-item:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }

.pop-carousel-item__header { display: flex; justify-content: space-between; align-items: center; }
.pop-carousel-item__icon { font-size: 1.3rem; }
.pop-carousel-item__trend {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800; color: var(--dl-accent);
  background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2);
  padding: 2px 7px; border-radius: 100px;
}

.pop-carousel-item__name { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: #fff; margin: 0; }
.pop-carousel-item__desc { font-size: 0.68rem; color: var(--text-secondary); margin: 0; }
.pop-carousel-item__dl {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  color: var(--text-secondary); border-radius: 9px; padding: 7px; font-size: 0.72rem;
  font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.pop-carousel-item__dl:hover { background: var(--dl-accent); border-color: var(--dl-accent); color: #ffffff; }

/* ── Insights Stats ── */
.dl-pop-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dl-insight-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; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dl-insight-num,
.dl-insight-text {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--dl-accent); line-height: 1;
}
.dl-insight-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; line-height: 1.3; }

/* Responsive rules */
@media (max-width: 1100px) {
  .pop-spot-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dl-pop-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pop-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dl-pop-insights { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .dl-pop-grid { grid-template-columns: 1fr !important; }
  .pop-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-pop-insights { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-popular-sec__inner { padding: 0 20px; }
  .pop-spot-card { padding: 24px !important; }
  .pop-spot-card__actions { flex-direction: column; }
  .pop-spot-card__actions .btn { width: 100%; justify-content: center; }
  .pop-spot-card__widgets { flex-wrap: wrap; }
}

/* Light theme support */
[data-theme="light"] .dl-popular-sec        { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-pop-chip           { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-pop-chip:hover     { background: rgba(37,99,235,0.04); }
[data-theme="light"] .pop-spot-card         { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .pop-spot-card__title  { color: #0f172a; }
[data-theme="light"] .pop-spot-card__desc   { color: #475569; }
[data-theme="light"] .pop-trust-badge       { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.06); color: #475569; }
[data-theme="light"] .pop-widget-btn        { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .pop-spot-card__visual { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .pop-spot-card__visual-card { background: #fff; border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .pop-visual-stat       { color: #0f172a; }
[data-theme="light"] .pop-card              { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .pop-card__title       { color: #0f172a; }
[data-theme="light"] .pop-card__details     { border-top-color: rgba(15,23,42,0.06); border-bottom-color: rgba(15,23,42,0.06); }
[data-theme="light"] .pop-card__stat-val    { color: #0f172a; }
[data-theme="light"] .pop-card-tool         { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-pop-categories     { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .pop-cat-title         { color: #0f172a; }
[data-theme="light"] .pop-cat-card          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .pop-cat-card__title   { color: #0f172a; }
[data-theme="light"] .pop-weekly-title      { color: #0f172a; }
[data-theme="light"] .pop-carousel-btn      { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .pop-carousel-item     { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .pop-carousel-item__name { color: #0f172a; }
[data-theme="light"] .pop-carousel-item__dl { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-insight-card       { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-insight-label      { color: #475569; }


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

/* -- Background overrides -- */
.dl-lib-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-lib-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: 70px 70px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}
.dl-lib-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-lib-bg__orb--1 { top:10%; left:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.03) 0%,transparent 70%); }
.dl-lib-bg__orb--2 { bottom:15%; right:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(168,85,247,0.02) 0%,transparent 70%); }
.dl-lib-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* -- Featured Collections Carousel / Cards -- */
.dl-lib-collections {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px;
}
.dl-coll-card {
  position: relative; background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 24px; overflow: hidden; cursor: pointer;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.dl-coll-card:hover {
  transform: translateY(-4px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.dl-coll-card__glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(124,255,107,0.05) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.3s ease;
}
.dl-coll-card:hover .dl-coll-card__glow { opacity: 1; }
.dl-coll-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.dl-coll-card__icon { font-size: 1.8rem; }
.dl-coll-card__title { font-family: var(--font-display); font-size: 0.94rem; font-weight: 800; color: #fff; margin: 0; }
.dl-coll-card__count { font-size: 0.74rem; color: var(--text-secondary); }

/* -- Stats -- */
.dl-lib-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.dl-lib-stat-card {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dl-lib-stat-num,
.dl-lib-stat-text {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--dl-accent); line-height: 1;
}
.dl-lib-stat-label { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }

/* -- Quick Tags -- */
.dl-lib-tags-wrap { margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; }
.dl-lib-tags-wrap::-webkit-scrollbar { height: 4px; }
.dl-lib-tags-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.dl-lib-tags { display: flex; gap: 8px; width: max-content; }
.dl-lib-tag {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.015); color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s ease;
}
.dl-lib-tag:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }
.dl-lib-tag.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* -- Sticky Toolbar -- */
.dl-lib-toolbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,15,13,0.7); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 18px 24px; margin-bottom: 36px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}
.dl-lib-toolbar.is-sticky {
  margin-top: 10px;
  border-color: rgba(124,255,107,0.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.dl-lib-toolbar__inner {
  display: grid; grid-template-columns: 1.2fr 1.8fr; gap: 24px; align-items: center;
}

.dl-lib-search-box {
  position: relative; display: flex; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  border-radius: 12px; padding: 0 16px; height: 44px;
}
.dl-lib-search-icon { font-size: 1.1rem; color: var(--text-secondary); margin-right: 12px; }
.dl-lib-search-input {
  background: none; border: none; outline: none; color: #fff; width: 100%;
  font-size: 0.84rem;
}
.dl-lib-search-clear {
  background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem;
}

.dl-lib-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.dl-lib-select-wrap { position: relative; display: flex; align-items: center; }
.dl-lib-select {
  width: 100%; height: 42px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border); border-radius: 12px; padding: 0 28px 0 14px;
  color: var(--text-secondary); font-size: 0.74rem; font-weight: 600; outline: none;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color 0.2s, color 0.2s;
}
.dl-lib-select:hover { border-color: rgba(124,255,107,0.3); color: #fff; }
.dl-lib-select-caret {
  position: absolute; right: 12px; font-size: 0.75rem; color: var(--text-secondary); pointer-events: none;
}

/* -- Skeletons -- */
.dl-lib-skeletons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 36px; }
.dl-skeleton-card {
  height: 320px; border-radius: 24px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border); position: relative; overflow: hidden;
}
.dl-skeleton-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: translateX(-100%); animation: dlSkelShimmer 1.6s infinite;
}
@keyframes dlSkelShimmer { 100% { transform: translateX(100%); } }

/* -- Cards Grid -- */
.dl-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 36px; }

/* -- Lib Card Layout -- */
.lib-card {
  position: relative; background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.lib-card:hover {
  transform: translateY(-4px); border-color: rgba(124,255,107,0.22);
  box-shadow: 0 16px 40px rgba(0,0,0,0.32);
}
.lib-card.dl-hidden { display: none !important; }

/* Top verified badge */
.lib-card__verified-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800;
  color: var(--dl-accent); background: rgba(124,255,107,0.08);
  border: 1px solid rgba(124,255,107,0.22); padding: 4px 10px; border-radius: 100px;
  display: flex; align-items: center; gap: 4px; z-index: 2;
}

.lib-card__inner { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

.lib-card__header { display: flex; align-items: center; gap: 12px; position: relative; }
.lib-card__icon-bg {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  flex-shrink: 0; transition: transform 0.3s ease;
}
.lib-card:hover .lib-card__icon-bg { transform: scale(1.06) rotate(3deg); }

.lib-card__meta { flex: 1; min-width: 0; padding-right: 48px; }
.lib-card__name {
  font-family: var(--font-display); font-size: 0.96rem; font-weight: 800;
  color: #fff; margin: 0 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-card:hover .lib-card__name { color: var(--dl-accent); }
.lib-card__cat { font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }

.lib-card__lic-badge {
  position: absolute; right: 0; bottom: 0; font-family: var(--font-mono);
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
}
.lib-card__lic-badge--premium { color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); }
.lib-card__lic-badge--os      { color: var(--dl-accent); background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2); }
.lib-card__lic-badge--free    { color: #60a5fa; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2); }

.lib-card__stats-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--text-secondary);
  border-top: 1px solid var(--dl-border); border-bottom: 1px solid var(--dl-border);
  padding: 10px 0;
}
.lib-card__stat { display: flex; align-items: center; gap: 5px; }
.lib-card__stars { font-size: 0.62rem; letter-spacing: -2px; }

.lib-card__specs { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-secondary); }
.lib-card__spec strong { color: #fff; }

.lib-card__platforms { display: flex; gap: 6px; }
.plat-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; transition: all 0.2s ease;
}
.lib-card:hover .plat-badge { transform: translateY(-1px); color: #fff; border-color: rgba(255,255,255,0.15); }

/* Card footer */
.lib-card__footer {
  border-top: 1px solid var(--dl-border); padding-top: 16px; margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.lib-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lib-card__btn-dl { justify-content: center; font-size: 0.74rem; font-weight: 800; padding: 8px; border-radius: 10px; }
.lib-card__btn-details { justify-content: center; font-size: 0.74rem; padding: 8px; border-radius: 10px; }

.lib-card__quick-actions { display: flex; justify-content: space-between; }
.lib-quick-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease;
}
.lib-quick-btn:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.lib-quick-btn.active { background: rgba(124,255,107,0.12); border-color: var(--dl-accent); color: var(--dl-accent); }
.lib-quick-btn.active i { font-weight: bold; }

/* -- No Results -- */
.dl-lib-no-results {
  text-align: center; padding: 48px 24px; border: 1px dashed var(--dl-border);
  border-radius: 20px; background: rgba(255,255,255,0.01); margin-bottom: 36px;
}
.dl-lib-no-results i { font-size: 2.2rem; color: var(--text-secondary); margin-bottom: 12px; }
.dl-lib-no-results h3 { font-family: var(--font-display); font-size: 1.1rem; color: #fff; margin: 0 0 6px 0; }
.dl-lib-no-results p { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 16px 0; }

/* -- Load More Wrap -- */
.dl-lib-load-more {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dl-lib-load-btn { font-size: 0.8rem; font-weight: 800; padding: 10px 24px; border-radius: 12px; }
.dl-lib-load-status { font-size: 0.74rem; color: var(--text-secondary); }

/* -- Modal (Details Preview) -- */
.dl-lib-modal {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 24px; transition: opacity 0.3s ease; opacity: 0; pointer-events: none;
}
.dl-lib-modal.active { opacity: 1; pointer-events: auto; }
.dl-lib-modal__backdrop {
  position: absolute; inset: 0; background: rgba(10,15,13,0.85); backdrop-filter: blur(12px);
}
.dl-lib-modal__box {
  position: relative; z-index: 2; background: #131917; border: 1px solid var(--dl-border);
  border-radius: 28px; width: 100%; max-width: 600px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dl-lib-modal.active .dl-lib-modal__box { transform: scale(1); }
.dl-lib-modal__close {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease;
}
.dl-lib-modal__close:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; }
.dl-lib-modal__body { padding: 36px; }

/* -- Compare Drawer -- */
.dl-lib-compare-drawer {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: rgba(19,25,23,0.9); border: 1px solid rgba(124,255,107,0.3);
  border-radius: 20px; padding: 18px 22px; width: 320px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 14px;
}
.dl-compare-drawer__header { display: flex; justify-content: space-between; align-items: center; }
.dl-compare-drawer__header h4 { font-family: var(--font-display); font-size: 0.84rem; color: #fff; margin: 0; }
.dl-compare-btn-clear { background: none; border: none; color: var(--text-secondary); font-size: 0.7rem; cursor: pointer; }
.dl-compare-btn-clear:hover { color: #f87171; }
.dl-compare-drawer__items { display: flex; flex-direction: column; gap: 8px; }
.dl-compare-item {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  padding: 8px 12px; border-radius: 10px; font-size: 0.74rem; color: #fff;
}
.dl-compare-item__remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; }
.dl-compare-item__remove:hover { color: #f87171; }
#dlCompareSubmit { font-size: 0.74rem; font-weight: 800; padding: 10px; border-radius: 10px; width: 100%; text-align: center; }

/* Responsive adapt */
@media (max-width: 1100px) {
  .dl-lib-collections { grid-template-columns: repeat(2, 1fr); }
  .dl-lib-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-lib-toolbar__inner { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .dl-lib-collections { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dl-lib-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .dl-lib-filters { grid-template-columns: repeat(2, 1fr); }
  .dl-lib-stats { grid-template-columns: repeat(2, 1fr); }
  .dl-lib-sec__inner { padding: 0 20px !important; }
  .lib-card__inner { padding: 18px; }
}

/* Light theme overrides */
[data-theme="light"] .dl-lib-sec            { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-coll-card          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-coll-card__title    { color: #0f172a; }
[data-theme="light"] .dl-coll-card:hover    { border-color: rgba(37,99,235,0.3); }
[data-theme="light"] .dl-lib-stat-card      { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-lib-stat-label     { color: #475569; }
[data-theme="light"] .dl-lib-tag            { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-lib-tag:hover      { background: rgba(37,99,235,0.04); }
[data-theme="light"] .dl-lib-toolbar        { background: rgba(255,255,255,0.85); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-lib-search-box     { background: #fff; }
[data-theme="light"] .dl-lib-search-input   { color: #0f172a; }
[data-theme="light"] .dl-lib-select         { background: #fff; }
[data-theme="light"] .lib-card              { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .lib-card__name        { color: #0f172a; }
[data-theme="light"] .lib-card__spec strong { color: #0f172a; }
[data-theme="light"] .lib-card__stats-row   { border-top-color: rgba(15,23,42,0.06); border-bottom-color: rgba(15,23,42,0.06); }
[data-theme="light"] .plat-badge            { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .lib-card__footer      { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .lib-quick-btn         { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-lib-modal__box     { background: #fff; }
[data-theme="light"] .dl-lib-modal__close   { background: rgba(15,23,42,0.03); }
[data-theme="light"] .dl-lib-compare-drawer { background: #fff; border-color: rgba(37,99,235,0.4); }
[data-theme="light"] .dl-compare-item       { background: rgba(15,23,42,0.02); color: #0f172a; }


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

/* -- Background overrides -- */
.dl-guides-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-guides-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: 70px 70px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 20%, transparent 100%);
}
.dl-guides-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-guides-bg__orb--1 { top:10%; left:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.035) 0%,transparent 70%); }
.dl-guides-bg__orb--2 { bottom:15%; right:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(59,130,246,0.02) 0%,transparent 70%); }
.dl-guides-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* ── Featured Guide Card ── */
.dl-guides-featured { margin-bottom: 48px; }

.gui-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.03) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18);
  border-radius: 28px; overflow: hidden; padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.gui-feat-card:hover {
  transform: translateY(-3px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}
.gui-feat-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}

.gui-feat-card__badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, rgba(124,255,107,0.2), rgba(34,197,94,0.1));
  border: 1px solid rgba(124,255,107,0.3); padding: 5px 12px; border-radius: 100px;
  backdrop-filter: blur(8px);
}

.gui-feat-card__layout {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
}

.gui-feat-card__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 12px 0;
}
.gui-feat-card__desc {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 20px 0;
}

.gui-feat-card__info-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.gui-info-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  padding: 4px 12px; border-radius: 100px;
}
.gui-info-pill i { color: var(--dl-accent); }

.gui-feat-card__actions { display: flex; gap: 12px; margin-bottom: 20px; }

.gui-feat-card__utils { display: flex; gap: 8px; }
.gui-util-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  color: var(--text-secondary); background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border); padding: 6px 12px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.gui-util-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }

/* Progress widget on featured card */
.gui-feat-card__visual {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 28px;
}
.gui-tracker { display: flex; flex-direction: column; gap: 16px; }
.gui-tracker__title { font-family: var(--font-display); font-size: 0.88rem; color: #fff; margin: 0; }
.gui-tracker__checklist { display: flex; flex-direction: column; gap: 10px; }

.gui-check-item {
  display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-secondary);
  cursor: pointer; position: relative; user-select: none;
}
.gui-check-cb {
  width: 16px; height: 16px; border: 1px solid var(--dl-border); border-radius: 4px;
  appearance: none; -webkit-appearance: none; outline: none; background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all 0.2s ease; position: relative;
}
.gui-check-cb:checked {
  background: var(--dl-accent); border-color: var(--dl-accent);
}
.gui-check-cb:checked::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 0.65rem; font-weight: bold;
}
.gui-check-cb:checked + .gui-check-text {
  color: #fff; text-decoration: line-through; opacity: 0.5;
}

.gui-tracker__progress { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gui-tracker__bar { height: 5px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.gui-tracker__fill { height: 100%; width: 0%; background: var(--dl-accent); transition: width 0.3s ease; }
.gui-tracker__percent { font-size: 0.72rem; color: var(--dl-accent); font-weight: 700; text-align: right; }

/* ── Platform selector chips ── */
.gui-platform-selector-wrap { margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; }
.gui-platform-selector-wrap::-webkit-scrollbar { height: 4px; }
.gui-platform-selector-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.gui-platform-selector { display: flex; gap: 8px; width: max-content; }
.gui-sel-chip {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px; border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02); color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s ease;
}
.gui-sel-chip:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }
.gui-sel-chip.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* ── 12-Card Grid ── */
.dl-guides-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px;
}

.dl-guide-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg); overflow: hidden; height: 100%;
  transition: transform var(--dl-trans), border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.dl-guide-card:hover {
  transform: translateY(-4px); border-color: rgba(124,255,107,0.22);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.dl-guide-card.dl-hidden { display: none !important; }

.dl-guide-card__inner { padding: 24px; display: flex; flex-direction: column; gap: 14px; height: 100%; }

.dl-guide-card__header { display: flex; align-items: center; gap: 12px; }
.dl-guide-card__icon { font-size: 1.5rem; }
.dl-guide-card__title {
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 800; color: #fff; margin: 0;
}
.dl-guide-card:hover .dl-guide-card__title { color: var(--dl-accent); }

.dl-guide-card__desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.dl-guide-card__command-box {
  background: rgba(0,0,0,0.25); border: 1px solid var(--dl-border); border-radius: 10px;
  padding: 8px 12px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.68rem; margin: 4px 0;
}
.dl-guide-card__command-box code { color: var(--dl-accent); }
.btn-copy-code {
  background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.8rem;
}
.btn-copy-code:hover { color: #fff; }

.dl-guide-card__btn {
  width: 100%; justify-content: center; font-size: 0.74rem; font-weight: 800;
  padding: 8px; border-radius: 10px; margin-top: auto;
}

/* ── Timeline ── */
.dl-guides-timeline {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 24px; padding: 40px; margin-bottom: 48px; position: relative;
}
.dl-guides-timeline::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.35), transparent);
}
.timeline-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 32px 0; }

.gui-timeline {
  position: relative; display: flex; justify-content: space-between; gap: 16px;
}
.gui-timeline__progress {
  position: absolute; top: 18px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--dl-accent), rgba(124,255,107,0.25), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease;
}
.gui-timeline__progress.animated { transform: scaleX(1); }

.gui-timeline-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; position: relative; z-index: 2; flex: 1;
}
.gui-timeline-num {
  width: 38px; height: 38px; border-radius: 50%;
  background: #131917; border: 2px solid rgba(124,255,107,0.3);
  color: var(--dl-accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem;
  transition: all 0.3s ease;
}
.gui-timeline-item:hover .gui-timeline-num {
  border-color: var(--dl-accent); background: rgba(124,255,107,0.1);
  box-shadow: 0 0 15px rgba(124,255,107,0.25);
}
.gui-timeline-text { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; max-width: 140px; }

/* ── Video tutorials carousel ── */
.dl-guides-videos { margin-bottom: 48px; }
.gui-video-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.gui-video-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.gui-video-nav { display: flex; gap: 8px; }
.gui-video-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
}
.gui-video-nav-btn:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.3); color: var(--dl-accent); }

.gui-video-slider-wrap { overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.gui-video-slider-wrap::-webkit-scrollbar { height: 4px; }
.gui-video-slider-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }

.gui-video-slider { display: flex; gap: 16px; width: max-content; }

.gui-video-card {
  scroll-snap-align: start; width: 260px; 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);
}
.gui-video-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }

.gui-video-thumb {
  height: 140px; background: #000; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Video scale simulation on hover */
.gui-video-thumb::before {
  content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"><rect width="100" height="100" fill="%231a1a1a"/><path d="M10 10 L90 90 M90 10 L10 90" stroke="rgba(255,255,255,0.02)" stroke-width="2"/></svg>') center/cover;
  transition: transform 0.4s ease;
}
.gui-video-card:hover .gui-video-thumb::before { transform: scale(1.05); }

.gui-video-duration {
  position: absolute; bottom: 8px; right: 8px; font-family: var(--font-mono);
  font-size: 0.58rem; color: #fff; background: rgba(10,15,13,0.75);
  padding: 3px 6px; border-radius: 4px;
}
.gui-video-views {
  position: absolute; bottom: 8px; left: 8px; font-family: var(--font-mono);
  font-size: 0.58rem; color: var(--text-secondary); background: rgba(10,15,13,0.75);
  padding: 3px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px;
}

.gui-video-play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dl-accent); border: none; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; transition: all 0.25s ease;
  position: relative; z-index: 2;
  box-shadow: 0 4px 15px rgba(124,255,107,0.3);
}
.gui-video-card:hover .gui-video-play { transform: scale(1.12); box-shadow: 0 4px 20px rgba(124,255,107,0.5); }

.gui-video-info { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.gui-video-plat { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; color: var(--dl-accent); text-transform: uppercase; }
.gui-video-card-title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.35; }
.gui-video-link { font-size: 0.72rem; color: var(--text-secondary); text-decoration: none; font-weight: bold; }
.gui-video-link:hover { color: var(--dl-accent); }

/* ── Tip Cards ── */
.dl-guides-tips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.gui-tip-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.gui-tip-icon { font-size: 1.6rem; }
.gui-tip-content { display: flex; flex-direction: column; gap: 4px; }
.gui-tip-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; color: #fff; margin: 0; }
.gui-tip-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; margin: 0; }

/* -- Expansion Guides Modal -- */
.gui-modal {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 24px; transition: opacity 0.3s ease; opacity: 0; pointer-events: none;
}
.gui-modal.active { opacity: 1; pointer-events: auto; }
.gui-modal__backdrop {
  position: absolute; inset: 0; background: rgba(10,15,13,0.85); backdrop-filter: blur(12px);
}
.gui-modal__box {
  position: relative; z-index: 2; background: #131917; border: 1px solid var(--dl-border);
  border-radius: 28px; width: 100%; max-width: 580px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.gui-modal.active .gui-modal__box { transform: scale(1); }
.gui-modal__close {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dl-border); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease;
}
.gui-modal__close:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; }
.gui-modal__body { padding: 36px; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .gui-feat-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dl-guides-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-guides-tips { grid-template-columns: repeat(2, 1fr) !important; }
  .gui-timeline { flex-direction: column; align-items: flex-start; gap: 24px; }
  .gui-timeline__progress { display: none; }
  .gui-timeline-item { flex-direction: row; text-align: left; }
  .gui-timeline-text { max-width: unset; }
}
@media (max-width: 640px) {
  .dl-guides-grid { grid-template-columns: 1fr !important; }
  .dl-guides-tips { grid-template-columns: 1fr !important; }
  .dl-guides-sec__inner { padding: 0 20px !important; }
  .gui-feat-card { padding: 24px !important; }
  .gui-feat-card__actions { flex-direction: column; }
  .gui-feat-card__actions .btn { width: 100%; justify-content: center; }
  .gui-feat-card__utils { flex-wrap: wrap; }
}

/* Light theme overrides */
[data-theme="light"] .dl-guides-sec          { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .gui-sel-chip           { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .gui-sel-chip:hover     { background: rgba(37,99,235,0.04); }
[data-theme="light"] .gui-feat-card          { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .gui-feat-card__title   { color: #0f172a; }
[data-theme="light"] .gui-feat-card__desc    { color: #475569; }
[data-theme="light"] .gui-info-pill          { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); color: #475569; }
[data-theme="light"] .gui-util-btn           { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .gui-feat-card__visual  { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .gui-tracker__title     { color: #0f172a; }
[data-theme="light"] .gui-check-cb           { background: #fff; }
[data-theme="light"] .dl-guide-card          { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .dl-guide-card__title   { color: #0f172a; }
[data-theme="light"] .dl-guide-card__desc    { color: #475569; }
[data-theme="light"] .dl-guide-card__command-box { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-guides-timeline     { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .timeline-title         { color: #0f172a; }
[data-theme="light"] .gui-timeline-num       { background: #fff; }
[data-theme="light"] .gui-timeline-text      { color: #475569; }
[data-theme="light"] .gui-video-title        { color: #0f172a; }
[data-theme="light"] .gui-video-nav-btn      { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .gui-video-card         { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .gui-video-card-title   { color: #0f172a; }
[data-theme="light"] .gui-tip-card           { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .gui-tip-title          { color: #0f172a; }
[data-theme="light"] .gui-tip-desc           { color: #475569; }
[data-theme="light"] .gui-modal__box         { background: #fff; }
[data-theme="light"] .gui-modal__close       { background: rgba(15,23,42,0.03); }


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

/* -- Background -- */
.dl-req-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-req-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%);
}
.dl-req-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-req-bg__orb--1 { top:15%; right:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.03) 0%,transparent 70%); }
.dl-req-bg__orb--2 { bottom:10%; left:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(59,130,246,0.02) 0%,transparent 70%); }
.dl-req-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* ── Featured Configuration Card ── */
.dl-req-featured { margin-bottom: 48px; }
.req-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.03) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18);
  border-radius: 28px; overflow: hidden; padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.req-feat-card:hover {
  transform: translateY(-3px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}
.req-feat-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}
.req-feat-card__badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; color: #fff;
  background: rgba(124,255,107,0.1); border: 1px solid rgba(124,255,107,0.25);
  padding: 5px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}
.req-feat-card__layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.req-feat-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 12px 0; }
.req-feat-card__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 20px 0; }
.req-feat-card__highlights {
  list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 8px;
}
.req-feat-card__highlights li {
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #fff; font-weight: 600;
}
.req-feat-card__highlights li i { color: var(--dl-accent); }
.req-feat-card__actions { display: flex; gap: 12px; }

/* Visual block */
.req-feat-card__visual {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 32px; display: flex; align-items: center; justify-content: center; height: 100%;
}
.req-visual-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.req-visual-icon { font-size: 2.5rem; animation: reqFloatIcon 3s infinite ease-in-out; }
@keyframes reqFloatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.req-visual-label { font-family: var(--font-display); font-size: 0.84rem; font-weight: 800; color: var(--dl-accent); text-transform: uppercase; }
.req-visual-desc { font-size: 0.74rem; color: var(--text-secondary); }

/* ── Platform Requirements Grid ── */
.dl-req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.req-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-lg);
  padding: 24px; transition: transform var(--dl-trans), border-color var(--dl-trans);
  display: flex; flex-direction: column; gap: 16px;
}
.req-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }
.req-card__header { display: flex; align-items: center; gap: 10px; }
.req-card__icon { font-size: 1.4rem; }
.req-card__title { font-family: var(--font-display); font-size: 0.94rem; font-weight: 800; color: #fff; margin: 0; }
.req-card__body { display: flex; flex-direction: column; gap: 16px; }

.req-spec-block { display: flex; flex-direction: column; gap: 8px; }
.req-spec-title {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  color: var(--text-secondary); letter-spacing: 0.05em; margin: 0;
}
.req-spec-title--rec { color: var(--dl-accent); }

.req-spec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.req-spec-list li { font-size: 0.76rem; color: #fff; display: flex; align-items: center; gap: 6px; }
.req-spec-list li::before {
  content: "•"; color: rgba(255,255,255,0.2); font-size: 0.9rem;
}

/* ── Internet Speed Cards ── */
.dl-req-speed-sec { margin-bottom: 48px; }
.speed-section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 20px 0; }
.dl-req-speed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.speed-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.speed-card__title { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }
.speed-card__val { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--dl-accent); line-height: 1; }
.speed-card__unit { font-size: 0.68rem; color: var(--text-secondary); }

/* ── Supported Formats ── */
.dl-req-formats {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border);
  border-radius: 24px; padding: 32px; margin-bottom: 48px; position: relative;
}
.dl-req-formats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.3), transparent);
}
.formats-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 24px 0; }
.formats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.format-group-card {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.format-group-title { font-family: var(--font-display); font-size: 0.74rem; font-weight: 800; color: var(--dl-accent); margin: 0; text-transform: uppercase; }
.format-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.format-chips span {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  padding: 3px 7px; border-radius: 4px;
}

/* ── Compatibility Checker ── */
.dl-req-checker-box { margin-bottom: 48px; }
.checker-card {
  background: linear-gradient(135deg, rgba(124,255,107,0.02) 0%, var(--dl-card-bg) 100%);
  border: 1px solid var(--dl-border); border-radius: 24px; padding: 36px;
  display: flex; flex-direction: column; gap: 24px;
}
.checker-card__header h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0 0 6px 0; }
.checker-card__header p { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }

.checker-form { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.checker-field { display: flex; flex-direction: column; gap: 6px; }
.checker-field label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.checker-field select,
.checker-field input {
  height: 42px; background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  border-radius: 10px; padding: 0 12px; color: #fff; font-size: 0.78rem; outline: none;
  cursor: pointer; transition: all 0.2s ease;
}
.checker-field select:hover,
.checker-field input:hover { border-color: rgba(124,255,107,0.3); }
.checker-field input { cursor: text; }

.checker-action-row { display: flex; justify-content: flex-end; }

/* Results block */
.checker-results {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  animation: reqSlideDown 0.3s ease;
}
@keyframes reqSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.results-header { display: flex; align-items: center; gap: 10px; }
.results-status-icon { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.results-status-icon.status-ok { background: var(--dl-accent); box-shadow: 0 0 8px var(--dl-accent); }
.results-status-icon.status-warn { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.results-status-icon.status-fail { background: #f87171; box-shadow: 0 0 8px #f87171; }
#resultsStatusTitle { font-family: var(--font-display); font-size: 0.94rem; font-weight: 800; color: #fff; margin: 0; }
.results-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
.results-specs { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
.results-specs span { display: flex; align-items: center; gap: 6px; }

/* ── Tips Grid ── */
.dl-req-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.req-tip-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.req-tip-icon { font-size: 1.6rem; }
.req-tip-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; color: #fff; margin: 0; }
.req-tip-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; margin: 0; }

/* Responsive adapt */
@media (max-width: 1100px) {
  .dl-req-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-req-speed-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .formats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .checker-form { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-req-tips { grid-template-columns: repeat(2, 1fr) !important; }
  .req-feat-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
}
@media (max-width: 640px) {
  .dl-req-grid { grid-template-columns: 1fr !important; }
  .formats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .checker-form { grid-template-columns: 1fr !important; }
  .dl-req-tips { grid-template-columns: 1fr !important; }
  .dl-req-sec__inner { padding: 0 20px !important; }
  .req-feat-card { padding: 24px !important; }
  .req-feat-card__actions { flex-direction: column; }
  .req-feat-card__actions .btn { width: 100%; justify-content: center; }
}

/* Light theme overrides */
[data-theme="light"] .dl-req-sec           { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .req-feat-card       { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .req-feat-card__title { color: #0f172a; }
[data-theme="light"] .req-feat-card__desc  { color: #475569; }
[data-theme="light"] .req-feat-card__highlights li { color: #0f172a; }
[data-theme="light"] .req-feat-card__visual { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .req-visual-desc      { color: #475569; }
[data-theme="light"] .req-card             { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .req-card__title      { color: #0f172a; }
[data-theme="light"] .req-spec-list li     { color: #0f172a; }
[data-theme="light"] .speed-card           { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .speed-card__title    { color: #475569; }
[data-theme="light"] .dl-req-formats       { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .formats-title        { color: #0f172a; }
[data-theme="light"] .format-group-card    { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .format-chips span    { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); color: #0f172a; }
[data-theme="light"] .checker-card         { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .checker-card__header h3 { color: #0f172a; }
[data-theme="light"] .checker-field select,
[data-theme="light"] .checker-field input  { background: #fff; border-color: rgba(15,23,42,0.08); color: #0f172a; }
[data-theme="light"] .checker-results      { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .results-specs        { color: #475569; }
[data-theme="light"] .req-tip-card         { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .req-tip-title        { color: #0f172a; }
[data-theme="light"] .req-tip-desc         { color: #475569; }


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

/* -- Background -- */
.dl-ver-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-ver-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%);
}
.dl-ver-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-ver-bg__orb--1 { top:15%; left:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.035) 0%,transparent 70%); }
.dl-ver-bg__orb--2 { bottom:10%; right:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(168,85,247,0.02) 0%,transparent 70%); }
.dl-ver-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* -- Filter chips -- */
.dl-ver-chips-wrap { margin-bottom: 40px; overflow-x: auto; padding-bottom: 8px; }
.dl-ver-chips-wrap::-webkit-scrollbar { height: 4px; }
.dl-ver-chips-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.dl-ver-chips { display: flex; gap: 8px; width: max-content; }
.dl-ver-chip {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px; border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02); color: var(--text-secondary); cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.dl-ver-chip:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); background: rgba(124,255,107,0.05); }
.dl-ver-chip.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* ── Featured Latest Version Card ── */
.dl-ver-featured { margin-bottom: 48px; }
.ver-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.03) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18); border-radius: 28px; overflow: hidden; padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.ver-feat-card:hover {
  transform: translateY(-3px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}
.ver-feat-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}
.ver-feat-card__badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; color: #fff;
  background: rgba(124,255,107,0.1); border: 1px solid rgba(124,255,107,0.25);
  padding: 5px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}

.ver-feat-card__layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }

.ver-feat-card__brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ver-feat-card__logo { font-size: 2.2rem; }
.ver-feat-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 4px 0; }

.ver-feat-card__version-meta { display: flex; gap: 12px; align-items: center; font-size: 0.75rem; color: var(--text-secondary); }
.ver-meta-badge { font-family: var(--font-mono); color: var(--dl-accent); font-weight: bold; }

.ver-feat-card__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 24px 0; }
.ver-feat-card__actions { display: flex; gap: 12px; margin-bottom: 20px; }

.ver-feat-card__utils { display: flex; gap: 8px; }
.ver-util-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  color: var(--text-secondary); background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border); padding: 6px 12px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.ver-util-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }

/* Highlights Panel */
.ver-feat-card__highlights-wrap {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 28px; height: 100%; display: flex; flex-direction: column; gap: 14px;
}
.ver-h-title { font-family: var(--font-display); font-size: 0.9rem; color: #fff; margin: 0; }
.ver-h-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ver-h-list li { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-secondary); }
.ver-h-dot { width: 6px; height: 6px; border-radius: 50%; }
.ver-h-dot--feature  { background: var(--dl-accent); box-shadow: 0 0 6px var(--dl-accent); }
.ver-h-dot--perf     { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.ver-h-dot--security { background: #34d399; box-shadow: 0 0 6px #34d399; }
.ver-h-dot--bugfix   { background: #f87171; box-shadow: 0 0 6px #f87171; }

/* ── Version Timeline ── */
.dl-ver-timeline { margin-bottom: 56px; }
.ver-timeline-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 32px 0; }
.timeline-container { position: relative; display: flex; flex-direction: column; gap: 24px; padding-left: 36px; }

.timeline-line-connector {
  position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--dl-accent), rgba(124,255,107,0.25), transparent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.2s ease;
}
.timeline-line-connector.animated { transform: scaleY(1); }

.timeline-node { position: relative; opacity: 0; transform: translateY(15px); transition: all 0.5s ease; }
.timeline-node.visible { opacity: 1; transform: translateY(0); }
.timeline-node.dl-hidden { display: none !important; }

.timeline-node__dot {
  position: absolute; left: -31px; top: 18px; width: 14px; height: 14px; border-radius: 50%;
  background: #131917; border: 2px solid rgba(124,255,107,0.5);
  box-shadow: 0 0 0 3px rgba(124,255,107,0.06); transition: all 0.25s ease;
}
.timeline-node:hover .timeline-node__dot {
  background: var(--dl-accent); border-color: var(--dl-accent);
  box-shadow: 0 0 10px var(--dl-accent);
}

.timeline-node__card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.timeline-node__card:hover { border-color: rgba(124,255,107,0.22); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

.timeline-node__header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.timeline-node__version { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: #fff; }
.timeline-node__date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }

.timeline-node__badge {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
}
.timeline-node__badge--latest { color: var(--dl-accent); background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2); }
.timeline-node__badge--prev   { color: #60a5fa; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2); }

.timeline-node__changes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline-node__changes li { font-size: 0.78rem; color: var(--text-secondary); }

.timeline-node__btn { align-self: flex-start; font-size: 0.72rem; padding: 6px 14px; border-radius: 8px; }

/* ── Spec Comparison Table ── */
.dl-ver-comparison { margin-bottom: 48px; }
.comparison-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 20px 0; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--dl-border); border-radius: 20px; background: var(--dl-card-bg); }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; }
.comparison-table th,
.comparison-table td { padding: 16px 20px; font-size: 0.78rem; border-bottom: 1px solid var(--dl-border); }
.comparison-table th { font-family: var(--font-display); font-weight: 800; color: #fff; background: rgba(255,255,255,0.01); }
.comparison-table tr:last-child td { border-bottom: none; }

.td-version { font-family: var(--font-display); font-weight: 800; color: var(--dl-accent); }
.td-platforms { font-size: 0.72rem; color: var(--text-secondary); }
.td-check--limited { color: #fbbf24; }
.td-check--no { color: #f87171; }
.tbl-dl-btn {
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border); color: #fff;
  padding: 6px 12px; border-radius: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease;
}
.tbl-dl-btn:hover { background: var(--dl-accent); border-color: var(--dl-accent); color: #ffffff; }

/* ── Changelog Categories ── */
.dl-ver-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.ver-cat-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.ver-cat-icon { font-size: 1.8rem; }
.ver-cat-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; color: #fff; margin: 0; }
.ver-cat-stat { font-size: 0.74rem; color: var(--text-secondary); }

/* ── Previous Releases ── */
.dl-ver-previous { margin-bottom: 48px; }
.prev-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 22px 0; }
.prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prev-card.dl-hidden { display: none !important; }

.prev-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);
}
.prev-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }
.prev-card__header { display: flex; justify-content: space-between; align-items: center; }
.prev-card__version { font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; color: #fff; }
.prev-card__badge { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; padding: 2px 7px; border-radius: 100px; }
.prev-card__badge--stable { color: var(--dl-accent); background: rgba(124,255,107,0.08); border: 1px solid rgba(124,255,107,0.2); }
.prev-card__badge--legacy { color: var(--text-secondary); background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border); }
.prev-card__badge--beta   { color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); }

.prev-card__meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); }
.prev-card__platforms { font-size: 0.72rem; color: var(--text-secondary); }
.prev-card__btn { width: 100%; justify-content: center; font-size: 0.74rem; padding: 8px; border-radius: 10px; margin-top: 4px; }

/* ── Release Stats ── */
.dl-ver-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ver-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;
}
.ver-stat-num,
.ver-stat-text {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--dl-accent); line-height: 1;
}
.ver-stat-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .ver-feat-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .prev-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-ver-categories { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-ver-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .prev-grid { grid-template-columns: 1fr !important; }
  .dl-ver-categories { grid-template-columns: 1fr !important; }
  .dl-ver-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-ver-sec__inner { padding: 0 20px !important; }
  .ver-feat-card { padding: 24px !important; }
  .ver-feat-card__actions { flex-direction: column; }
  .ver-feat-card__actions .btn { width: 100%; justify-content: center; }
  .ver-feat-card__utils { flex-wrap: wrap; }
}

/* Light theme overrides */
[data-theme="light"] .dl-ver-sec           { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-ver-chip          { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-ver-chip:hover    { background: rgba(37,99,235,0.04); }
[data-theme="light"] .ver-feat-card        { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .ver-feat-card__title { color: #0f172a; }
[data-theme="light"] .ver-feat-card__desc  { color: #475569; }
[data-theme="light"] .ver-util-btn         { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .ver-feat-card__highlights-wrap { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .ver-h-title          { color: #0f172a; }
[data-theme="light"] .ver-h-list li        { color: #475569; }
[data-theme="light"] .timeline-node__card  { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .timeline-node__version { color: #0f172a; }
[data-theme="light"] .timeline-node__changes li { color: #475569; }
[data-theme="light"] .comparison-table-wrap { background: #fff; }
[data-theme="light"] .comparison-table th  { color: #0f172a; }
[data-theme="light"] .tbl-dl-btn           { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); color: #0f172a; }
[data-theme="light"] .ver-cat-card         { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .ver-cat-title        { color: #0f172a; }
[data-theme="light"] .ver-cat-stat         { color: #475569; }
[data-theme="light"] .prev-card            { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .prev-card__version   { color: #0f172a; }
[data-theme="light"] .prev-card__meta      { color: #475569; }
[data-theme="light"] .ver-stat-card        { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .ver-stat-label       { color: #475569; }


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

/* -- Background -- */
.dl-trust-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-trust-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(circle at 50% 50%, #000 30%, transparent 100%);
}
.dl-trust-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-trust-bg__orb--1 { top:10%; right:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.03) 0%,transparent 70%); }
.dl-trust-bg__orb--2 { bottom:15%; left:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(59,130,246,0.02) 0%,transparent 70%); }
.dl-trust-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* ── Featured Trust Card ── */
.dl-trust-featured { margin-bottom: 48px; }
.trust-feat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.035) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18); border-radius: 28px; overflow: hidden; padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.trust-feat-card:hover {
  transform: translateY(-3px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}
.trust-feat-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}
.trust-feat-card__badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; color: #fff;
  background: rgba(124,255,107,0.1); border: 1px solid rgba(124,255,107,0.25);
  padding: 5px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}

.trust-feat-card__layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.trust-feat-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 12px 0; }
.trust-feat-card__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 24px 0; }

.trust-feat-card__badges-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px;
}
.trust-check-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
}
.trust-check-badge i { color: var(--dl-accent); font-weight: bold; }

.trust-feat-card__actions { display: flex; gap: 12px; }

/* Visual Block */
.trust-feat-card__visual {
  background: rgba(255,255,255,0.02); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 32px; display: flex; align-items: center; justify-content: center; height: 100%;
}
.trust-visual-shield { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.trust-visual-shield i { font-size: 3rem; color: var(--dl-accent); animation: trustShieldFloat 3s infinite ease-in-out; }
@keyframes trustShieldFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.trust-visual-label { font-family: var(--font-display); font-size: 0.84rem; font-weight: 800; color: #fff; text-transform: uppercase; }

/* ── 4-Step Verification Timeline ── */
.dl-trust-process-sec { margin-bottom: 56px; }
.process-section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 32px 0; }
.trust-process-container { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.trust-process-line {
  position: absolute; top: 22px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--dl-accent), rgba(124,255,107,0.25), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease;
  z-index: 1;
}
.trust-process-line.animated { transform: scaleX(1); }

.process-step-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; position: relative; z-index: 2; }
.process-step-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: #131917; border: 2px solid rgba(124,255,107,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: all 0.3s ease;
}
.process-step-node:hover .process-step-icon {
  border-color: var(--dl-accent); background: rgba(124,255,107,0.1);
  box-shadow: 0 0 15px rgba(124,255,107,0.25);
}
.process-step-content { display: flex; flex-direction: column; gap: 6px; }
.process-step-title { font-family: var(--font-display); font-size: 0.86rem; font-weight: 800; color: #fff; margin: 0; }
.process-step-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.45; }

/* ── Trust Indicators Grid (6 Columns) ── */
.dl-trust-indicators-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 48px;
}
.indicator-card {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 20px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}
.indicator-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }
.indicator-card__icon { font-size: 1.5rem; color: var(--dl-accent); }
.indicator-card__title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; color: #fff; margin: 0; }
.indicator-card__desc { font-size: 0.66rem; color: var(--text-secondary); margin: 0; }

/* ── Trust Stats ── */
.dl-trust-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.trust-stat-card {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border); border-radius: 20px;
  padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.trust-stat-num,
.trust-stat-text {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--dl-accent); line-height: 1;
}
.trust-stat-label { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }

/* ── Frequently Asked Questions Accordion ── */
.dl-trust-faq-sec { margin-bottom: 56px; }
.faq-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 20px 0; }
.faq-accordion-wrap { 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 var(--dl-trans);
}
.faq-item:hover { border-color: rgba(255,255,255,0.12); }
.faq-item.active { border-color: rgba(124,255,107,0.25); }

.faq-item__header {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 20px 24px; text-align: left;
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: #fff;
  cursor: pointer; outline: none;
}
.faq-item__toggle { font-size: 0.88rem; color: var(--text-secondary); transition: transform 0.3s ease; }
.faq-item.active .faq-item__toggle { transform: rotate(45deg); color: var(--dl-accent); }

.faq-item__body {
  padding: 0 24px 20px 24px; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55;
  border-top: 1px solid transparent; transition: border-color 0.3s ease;
}
.faq-item.active .faq-item__body { border-top-color: var(--dl-border); }

/* ── Editorial Standards Banner ── */
.dl-trust-banner-wrap { position: relative; }
.trust-banner {
  background: linear-gradient(135deg, rgba(124,255,107,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--dl-border); border-radius: 24px; padding: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.trust-banner__content { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.trust-banner__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; }
.trust-banner__desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.trust-banner__actions { display: flex; gap: 12px; }

/* Responsive rules */
@media (max-width: 1100px) {
  .trust-feat-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .trust-process-container { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  .trust-process-line { display: none; }
  .dl-trust-indicators-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dl-trust-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-banner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  .trust-process-container { grid-template-columns: 1fr !important; }
  .dl-trust-indicators-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-trust-sec__inner { padding: 0 20px !important; }
  .trust-feat-card { padding: 24px !important; }
  .trust-feat-card__actions { flex-direction: column; }
  .trust-feat-card__actions .btn { width: 100%; justify-content: center; }
  .trust-feat-card__badges-grid { grid-template-columns: 1fr !important; }
  .trust-banner { padding: 24px !important; }
  .trust-banner__actions { width: 100%; flex-direction: column; }
  .trust-banner__actions .btn { width: 100%; justify-content: center; }
}

/* Light theme overrides */
[data-theme="light"] .dl-trust-sec         { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .trust-feat-card       { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .trust-feat-card__title { color: #0f172a; }
[data-theme="light"] .trust-feat-card__desc  { color: #475569; }
[data-theme="light"] .trust-check-badge     { color: #475569; }
[data-theme="light"] .trust-feat-card__visual { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .process-step-icon     { background: #fff; }
[data-theme="light"] .process-step-title    { color: #0f172a; }
[data-theme="light"] .process-step-desc     { color: #475569; }
[data-theme="light"] .indicator-card        { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .indicator-card__title { color: #0f172a; }
[data-theme="light"] .indicator-card__desc  { color: #475569; }
[data-theme="light"] .trust-stat-card       { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .trust-stat-label      { color: #475569; }
[data-theme="light"] .faq-item              { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .faq-item__header      { color: #0f172a; }
[data-theme="light"] .faq-item__body        { color: #475569; }
[data-theme="light"] .trust-banner          { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .trust-banner__title   { color: #0f172a; }
[data-theme="light"] .trust-banner__desc    { color: #475569; }


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

/* -- Background -- */
.dl-faq-main-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-faq-main-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(circle at 50% 50%, #000 30%, transparent 100%);
}
.dl-faq-main-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-faq-main-bg__orb--1 { top:15%; right:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.03) 0%,transparent 70%); }
.dl-faq-main-bg__orb--2 { bottom:10%; left:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(168,85,247,0.02) 0%,transparent 70%); }
.dl-faq-main-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* -- Search wrap -- */
.dl-faq-search-wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 32px;
}
.dl-faq-search-box {
  position: relative; display: flex; align-items: center; flex: 1; max-width: 600px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  border-radius: 12px; padding: 0 16px; height: 44px;
}
.dl-faq-search-icon { font-size: 1.1rem; color: var(--text-secondary); margin-right: 12px; }
.dl-faq-search-input {
  background: none; border: none; outline: none; color: #fff; width: 100%; font-size: 0.84rem;
}
.dl-faq-search-clear { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; }

.dl-faq-expand-controls { display: flex; gap: 8px; }
.faq-ctrl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  color: var(--text-secondary); background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border); padding: 8px 14px; border-radius: 10px;
  cursor: pointer; transition: all 0.2s ease;
}
.faq-ctrl-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.2); color: var(--dl-accent); }

/* -- Categories -- */
.dl-faq-chips-wrap { margin-bottom: 36px; overflow-x: auto; padding-bottom: 8px; }
.dl-faq-chips-wrap::-webkit-scrollbar { height: 4px; }
.dl-faq-chips-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.dl-faq-chips { display: flex; gap: 8px; width: max-content; }
.dl-faq-chip {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px; border: 1px solid var(--dl-border);
  background: rgba(255,255,255,0.02); color: var(--text-secondary); cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.dl-faq-chip:hover { border-color: rgba(124,255,107,0.3); color: var(--dl-accent); background: rgba(124,255,107,0.05); }
.dl-faq-chip.active { background: var(--dl-accent); color: #ffffff; border-color: var(--dl-accent); }

/* ── Featured FAQ Card ── */
.dl-faq-featured { margin-bottom: 48px; }

/* ── FAQ Accordion ── */
.dl-faq-accordion { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.faq-main-item {
  background: var(--dl-card-bg); border: 1px solid var(--dl-border); border-radius: 20px; overflow: hidden;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans);
}
.faq-main-item:hover { border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.faq-main-item.active { border-color: rgba(124,255,107,0.25); }
.faq-main-item.dl-hidden { display: none !important; }

.faq-main-item__header {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 22px 28px; text-align: left;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: #fff;
  cursor: pointer; outline: none;
}
.faq-main-item__toggle { font-size: 0.88rem; color: var(--text-secondary); transition: transform 0.3s ease; }
.faq-main-item.active .faq-main-item__toggle { transform: rotate(45deg); color: var(--dl-accent); }

.faq-main-item__body {
  padding: 0 28px 22px 28px; border-top: 1px solid transparent; transition: border-color 0.3s ease;
}
.faq-main-item.active .faq-main-item__body { border-top-color: var(--dl-border); }

.faq-main-item__text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }

.faq-main-item__footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.03); padding-top: 14px;
}
.faq-vote { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-secondary); }
.faq-vote-btn {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.03);
  border: 1px solid var(--dl-border); color: var(--text-secondary); display: flex;
  align-items: center; justify-content: center; font-size: 0.76rem; cursor: pointer; transition: all 0.2s ease;
}
.faq-vote-btn:hover { background: rgba(124,255,107,0.08); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
.faq-vote-btn.voted { background: var(--dl-accent); border-color: var(--dl-accent); color: #ffffff; }

.faq-actions { display: flex; gap: 8px; }
.faq-act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  color: var(--text-secondary); background: rgba(255,255,255,0.02);
  border: 1px solid var(--dl-border); padding: 5px 12px; border-radius: 8px;
  cursor: pointer; transition: all 0.2s ease;
}
.faq-act-btn:hover { background: rgba(124,255,107,0.06); border-color: rgba(124,255,107,0.2); color: var(--dl-accent); }

/* ── Popular Help Topics ── */
.dl-faq-topics { margin-bottom: 48px; }
.topics-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 20px 0; }
.topics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.topic-card {
  position: relative; background: var(--dl-card-bg); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 20px 14px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  transition: transform var(--dl-trans), border-color var(--dl-trans);
}
.topic-card:hover { transform: translateY(-4px); border-color: rgba(124,255,107,0.3); }

.topic-card__icon { font-size: 1.6rem; }
.topic-card__title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; color: #fff; margin: 0; }
.topic-card__desc { font-size: 0.66rem; color: var(--text-secondary); margin: 0; }
.topic-card__arrow { position: absolute; bottom: 12px; right: 12px; font-size: 0.68rem; color: var(--text-secondary); opacity: 0; transition: all 0.2s ease; }
.topic-card:hover .topic-card__arrow { opacity: 1; transform: translateX(2px); color: var(--dl-accent); }

/* ── Still Need Help Banner ── */
.dl-faq-help-banner { position: relative; }
.help-banner {
  background: linear-gradient(135deg, rgba(168,85,247,0.03) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--dl-border); border-radius: 24px; padding: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.help-banner__content { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.help-banner__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; }
.help-banner__desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.help-banner__actions { display: flex; gap: 12px; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .dl-faq-search-wrap { flex-direction: column; align-items: flex-start; }
  .dl-faq-search-box { max-width: 100%; width: 100%; }
  .topics-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .help-banner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  .topics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-faq-main-sec__inner { padding: 0 20px !important; }
  .help-banner { padding: 24px !important; }
  .help-banner__actions { width: 100%; flex-direction: column; }
  .help-banner__actions .btn { width: 100%; justify-content: center; }
}

/* Light theme overrides */
[data-theme="light"] .dl-faq-main-sec       { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .dl-faq-search-box     { background: #fff; }
[data-theme="light"] .dl-faq-search-input   { color: #0f172a; }
[data-theme="light"] .faq-ctrl-btn          { background: #fff; }
[data-theme="light"] .dl-faq-chip           { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .dl-faq-chip:hover     { background: rgba(37,99,235,0.04); }
[data-theme="light"] .faq-main-item         { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .faq-main-item__header { color: #0f172a; }
[data-theme="light"] .faq-main-item__text   { color: #475569; }
[data-theme="light"] .faq-vote-btn          { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .faq-act-btn           { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .topic-card            { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .topic-card__title     { color: #0f172a; }
[data-theme="light"] .topic-card__desc      { color: #475569; }
[data-theme="light"] .help-banner           { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .help-banner__title    { color: #0f172a; }
[data-theme="light"] .help-banner__desc     { color: #475569; }


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

/* -- Background -- */
.dl-news-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dl-news-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(circle at 50% 50%, #000 30%, transparent 100%);
}
.dl-news-bg__orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.dl-news-bg__orb--1 { top:15%; left:5%; width:450px; height:450px; background:radial-gradient(circle,rgba(124,255,107,0.03) 0%,transparent 70%); }
.dl-news-bg__orb--2 { bottom:10%; right:5%; width:400px; height:400px; background:radial-gradient(circle,rgba(168,85,247,0.02) 0%,transparent 70%); }
.dl-news-bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; }

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

/* ── Newsletter Card ── */
.dl-news-card-wrap { margin-bottom: 48px; }
.news-card {
  position: relative;
  background: linear-gradient(135deg, rgba(124,255,107,0.035) 0%, var(--dl-card-bg) 100%);
  border: 1px solid rgba(124,255,107,0.18); border-radius: 28px; overflow: hidden; padding: 40px;
  transition: border-color var(--dl-trans), box-shadow var(--dl-trans), transform var(--dl-trans);
}
.news-card:hover {
  transform: translateY(-3px); border-color: rgba(124,255,107,0.3);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}
.news-card__shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,255,107,0.4), transparent);
}

.news-card__layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }

/* Visual Illustration on left side */
.news-card__visual {
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border);
  border-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: center; height: 100%;
  position: relative; min-height: 280px; overflow: hidden;
}
.news-ill-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.ill-plat-icon {
  position: absolute; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-secondary);
  animation: newsFloatIcon 4s infinite ease-in-out;
}
.ill-plat-icon--win   { top: 10%; left: 10%; animation-delay: 0s; }
.ill-plat-icon--and   { top: 10%; right: 10%; animation-delay: 1s; }
.ill-plat-icon--fire  { bottom: 10%; left: 10%; animation-delay: 2s; }
.ill-plat-icon--apple { bottom: 10%; right: 10%; animation-delay: 3s; }

@keyframes newsFloatIcon {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); border-color: rgba(124,255,107,0.25); color: var(--dl-accent); }
}

.ill-core-wrapper { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.ill-element {
  position: absolute; display: flex; align-items: center; justify-content: center; color: #fff;
  transition: all 0.3s ease;
}
.ill-element--cloud { font-size: 3rem; color: var(--dl-accent); animation: coreCloud 6s infinite ease-in-out; }
.ill-element--env   { font-size: 1.5rem; top: 0; left: 0; animation: coreEnv 4s infinite ease-in-out; }
.ill-element--bell  { font-size: 1.4rem; top: 0; right: 0; animation: coreBell 4s infinite ease-in-out; }
.ill-element--shield { font-size: 1.3rem; bottom: 0; left: 0; animation: coreShield 5s infinite ease-in-out; }
.ill-element--arrows { font-size: 1.2rem; bottom: 0; right: 0; animation: coreArrows 3s infinite linear; }
.ill-element--package { font-size: 1.6rem; color: #fbbf24; animation: corePkg 5s infinite ease-in-out; }

@keyframes coreCloud { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-4px); } }
@keyframes coreEnv { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -6px); } }
@keyframes coreBell { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -6px) rotate(15deg); } }
@keyframes coreShield { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 6px); } }
@keyframes coreArrows { 100% { transform: rotate(360deg); } }
@keyframes corePkg { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(-5deg); } }

/* Right Form panel */
.news-card__form-panel { display: flex; flex-direction: column; gap: 16px; }
.news-form-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; }
.news-form-desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.news-form { margin-top: 8px; }
.news-input-group {
  display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--dl-border);
  border-radius: 12px; padding: 0 6px 0 16px; height: 48px;
}
.news-input-group:focus-within { border-color: rgba(124,255,107,0.35); box-shadow: 0 0 15px rgba(124,255,107,0.08); }
.news-input-icon { font-size: 1.1rem; color: var(--text-secondary); margin-right: 12px; }
.news-input-group input {
  background: none; border: none; outline: none; color: #fff; width: 100%; font-size: 0.86rem;
}
.news-input-group input::placeholder { color: rgba(255,255,255,0.3); }
.news-input-group button { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 0.76rem; font-weight: 800; }

/* Optional Preferences */
.news-prefs-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.news-prefs-title { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.news-prefs-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.pref-check {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-secondary);
  background: rgba(255,255,255,0.015); border: 1px solid var(--dl-border);
  padding: 5px 12px; border-radius: 100px; cursor: pointer; transition: all 0.2s ease;
}
.pref-check:hover { border-color: rgba(255,255,255,0.15); color: #fff; }
.pref-check input {
  appearance: none; -webkit-appearance: none; width: 12px; height: 12px;
  border: 1px solid var(--dl-border); border-radius: 3px; background: rgba(255,255,255,0.02);
  outline: none; cursor: pointer; position: relative;
}
.pref-check input:checked { background: var(--dl-accent); border-color: var(--dl-accent); }
.pref-check input:checked::after {
  content: ""; position: absolute; top: 2px; left: 4px; width: 3px; height: 5px;
  border: solid #0a0f0d; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.pref-check input:checked + span { color: #fff; }

/* Privacy row */
.news-privacy-row {
  display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--dl-border);
  padding-top: 16px; margin-top: 8px;
}
.privacy-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.privacy-badges span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.privacy-badges span i { color: var(--dl-accent); }
.privacy-text { font-size: 0.68rem; color: var(--text-secondary); margin: 0; line-height: 1.4; }

/* ── Subscriber Benefits Grid ── */
.dl-news-benefits { margin-bottom: 56px; }
.benefits-section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 24px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.benefit-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);
}
.benefit-card:hover { transform: translateY(-3px); border-color: rgba(124,255,107,0.22); }
.benefit-card__icon { font-size: 1.6rem; }
.benefit-card__title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; color: #fff; margin: 0; }
.benefit-card__desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; margin: 0; }

/* ── Testimonial Slider ── */
.dl-news-testimonials {
  background: rgba(255,255,255,0.012); border-top: 1px solid var(--dl-border);
  border-bottom: 1px solid var(--dl-border); padding: 36px 0; margin-bottom: 56px;
}
.testimonials-slider-wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.testimonials-slider { position: relative; height: 70px; overflow: hidden; }
.testimonial-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; opacity: 0; transform: translateY(15px); transition: all 0.5s ease; pointer-events: none;
}
.testimonial-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.testimonial-text { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: #fff; font-style: italic; margin: 0; }
.testimonial-author { font-size: 0.74rem; color: var(--text-secondary); }

/* ── Community Stats Grid ── */
.dl-news-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.news-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;
}
.news-stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--dl-accent); line-height: 1; }
.news-stat-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  .news-card__layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .news-card__visual { min-height: 240px; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dl-news-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr !important; }
  .dl-news-sec__inner { padding: 0 20px !important; }
  .news-card { padding: 24px !important; }
  .news-input-group { flex-direction: column; height: auto; gap: 8px; padding: 12px; background: none; border: none; }
  .news-input-group input {
    height: 48px; border: 1px solid var(--dl-border); border-radius: 12px; padding: 0 16px;
    background: rgba(255,255,255,0.03); width: 100%;
  }
  .news-input-icon { display: none; }
  .news-input-group button { width: 100%; height: 48px; justify-content: center; }
  .dl-news-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonial-text { font-size: 0.88rem; }
  .testimonials-slider { height: 90px; }
}

/* Light theme overrides */
[data-theme="light"] .dl-news-sec          { background: #f8fafc; border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .news-card            { background: #fff; border-color: rgba(37,99,235,0.22); }
[data-theme="light"] .news-card__visual    { background: rgba(15,23,42,0.01); border-color: rgba(15,23,42,0.06); }
[data-theme="light"] .ill-plat-icon        { background: #fff; }
[data-theme="light"] .news-form-title      { color: #0f172a; }
[data-theme="light"] .news-form-desc       { color: #475569; }
[data-theme="light"] .news-input-group     { background: #fff; }
[data-theme="light"] .news-input-group input { color: #0f172a; }
[data-theme="light"] .pref-check           { background: #fff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .pref-check input     { background: #fff; }
[data-theme="light"] .news-privacy-row     { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .privacy-text         { color: #475569; }
[data-theme="light"] .dl-news-benefits     { border-top-color: rgba(15,23,42,0.06); }
[data-theme="light"] .benefits-section-title { color: #0f172a; }
[data-theme="light"] .benefit-card         { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .benefit-card__title  { color: #0f172a; }
[data-theme="light"] .benefit-card__desc   { color: #475569; }
[data-theme="light"] .dl-news-testimonials { background: rgba(15,23,42,0.01); border-top-color: rgba(15,23,42,0.06); border-bottom-color: rgba(15,23,42,0.06); }
[data-theme="light"] .testimonial-text     { color: #0f172a; }
[data-theme="light"] .testimonial-author   { color: #475569; }
[data-theme="light"] .news-stat-card       { background: #fff; border-color: rgba(15,23,42,0.07); }
[data-theme="light"] .news-stat-label      { color: #475569; }

/* Unified Section Header Eyebrow Badges */
.dl-sec-eyebrow,
.sec-eyebrow,
.section-eyebrow,
.dl-hero__eyebrow,
.dl-cat-banner__eyebrow,
.dl-cta-sec__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: #3b82f6 !important;
  background: rgba(37, 99, 235, 0.14) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !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"] .dl-hero__eyebrow,
[data-theme="light"] .dl-cat-banner__eyebrow,
[data-theme="light"] .dl-cta-sec__eyebrow {
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #7C3AED !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.08) !important;
}


/* ========================================================
   THEME PAGINATION ACCENT STYLES
   Dark Mode: Vibrant Emerald Green (#00d289)
   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: #00d289 !important;
  color: #050a0e !important;
  border-color: #00d289 !important;
  box-shadow: 0 0 14px rgba(0, 210, 137, 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;
}