/* ============================================================
   devices.css — Premium Devices Hub Page Styles
   PlayerSDK Connected Ecosystem Design System
   ============================================================ */

/* ── Smooth page animations ── */
@keyframes dev-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dev-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dev-float-badge {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes dev-float-device {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-5px) rotate(0.5deg);
  }
}

@keyframes dev-pulse-green {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 255, 107, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(124, 255, 107, 0);
  }
}

@keyframes dev-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

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

/* ── Background decoration ── */
.dev-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dev-hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0;
  animation: dev-fade-in 2s ease-out forwards;
}

.dev-hero__bg-orb--green {
  width: 600px;
  height: 600px;
  top: -100px;
  left: -200px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.12) 0%, transparent 70%);
  animation-delay: 0.2s;
}

.dev-hero__bg-orb--blue {
  width: 500px;
  height: 500px;
  top: 100px;
  right: -150px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  animation-delay: 0.4s;
}

.dev-hero__bg-orb--purple {
  width: 450px;
  height: 450px;
  bottom: -150px;
  left: 20%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  animation-delay: 0.6s;
}

.dev-hero__grid-lines {
  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: 50px 50px;
  opacity: 0.8;
  mask-image: radial-gradient(circle at 30% 40%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, black 20%, transparent 80%);
}

.dev-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* ── Left Content Column ── */
.dev-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dev-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(124, 255, 107, 0.12);
  border: 1px solid rgba(124, 255, 107, 0.25);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #7cff6b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 28px;
  box-shadow: 0 4px 15px rgba(124, 255, 107, 0.1);
}

.dev-hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent, #7cff6b);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(124, 255, 107, 0.6);
}

.dev-hero__heading {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary, #fff);
  margin-bottom: 24px;
}

.dev-hero__heading-accent {
  color: var(--accent, #7cff6b);
  background: linear-gradient(135deg, #7cff6b 30%, #a3ff97 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dev-hero__subtitle {
  font-size: 1.08rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 580px;
}

/* CTA buttons wrapper */
.dev-hero__ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 56px;
}

.dev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.dev-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.dev-btn:active {
  transform: translateY(0px) scale(0.98);
}

.dev-btn--primary,
.dev-btn--primary:link,
.dev-btn--primary:visited,
.dev-btn--primary:hover,
.dev-btn--primary:focus,
.dev-btn--primary:active,
#devBrowseBtn,
#devBrowseBtn:link,
#devBrowseBtn:visited,
#devBrowseBtn:hover,
#devBrowseBtn:focus,
#devBrowseBtn:active {
  background: var(--accent, #7cff6b) !important;
  color: #06080f !important;
  box-shadow: 0 4px 20px rgba(124, 255, 107, 0.35);
}

.dev-btn--primary *,
#devBrowseBtn * {
  color: #06080f !important;
}

.dev-btn--primary:hover,
#devBrowseBtn:hover {
  background: var(--accent-hover, #66ff52) !important;
  color: #06080f !important;
  box-shadow: 0 6px 24px rgba(124, 255, 107, 0.5);
}

.dev-btn__shine {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: dev-shimmer 3s infinite linear;
}

.dev-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dev-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.dev-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
}

/* Quick stats styles */
.dev-hero__stats {
  display: flex;
  gap: 36px;
  width: 100%;
  border-top: 1px solid var(--border-color);
  padding-top: 36px;
}

.dev-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dev-stat__number {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary, #fff);
  line-height: 1;
}

.dev-stat__number--text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.dev-stat__suffix {
  color: #3b82f6;
  margin-left: 2px;
}

.dev-stat__label {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dev-stat__divider {
  width: 1px;
  height: 36px;
  background: var(--border-color);
  align-self: center;
}

/* ============================================================
   BROWSE DEVICES SECTION (CURATED GRID)
   ============================================================ */
.dev-browse {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 85px 0 65px;
}

.dev-browse__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.dev-browse__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 42px;
  gap: 32px;
}

.dev-browse__header-left {
  flex: 1;
}

.dev-browse__section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-browse__section-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-browse__header-right {
  flex-shrink: 0;
}

.dev-browse__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-browse__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

.dev-browse__view-all i {
  font-size: 0.95rem;
}

/* 8-Card Grid Layout */
.dev-browse__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Curated Glassmorphism Card styling */
.dev-browse-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
}

.dev-browse-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

.dev-browse-card__glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  top: -70px;
  right: -70px;
  filter: blur(35px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-browse-card:hover .dev-browse-card__glow {
  opacity: 0.16;
}

/* Glow Color Schemes */
.dev-browse-card__glow--green {
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
}

.dev-browse-card__glow--google {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-browse-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-browse-card__glow--purple {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

.dev-browse-card__glow--silver {
  background: radial-gradient(circle, #f1f5f9 0%, transparent 70%);
}

.dev-browse-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-browse-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.dev-browse-card__glow--cyan {
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

/* Card Header elements */
.dev-browse-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-browse-card__icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  position: relative;
}

.dev-browse-card__icon-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  z-index: 0;
}

.dev-browse-card__icon-box i {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-browse-card:hover .dev-browse-card__icon-box i {
  transform: scale(1.15);
}

/* Icon box themes */
.icon-box--green {
  color: #10b981;
}

.icon-box--green::before {
  background: #10b981;
}

.icon-box--google {
  color: #3b82f6;
}

.icon-box--google::before {
  background: #3b82f6;
}

.icon-box--orange {
  color: #f97316;
}

.icon-box--orange::before {
  background: #f97316;
}

.icon-box--purple {
  color: #a855f7;
}

.icon-box--purple::before {
  background: #a855f7;
}

.icon-box--silver {
  color: #94a3b8;
}

.icon-box--silver::before {
  background: #94a3b8;
}

.icon-box--blue {
  color: #3b82f6;
}

.icon-box--blue::before {
  background: #3b82f6;
}

.icon-box--red {
  color: #ef4444;
}

.icon-box--red::before {
  background: #ef4444;
}

.icon-box--cyan {
  color: #06b6d4;
}

.icon-box--cyan::before {
  background: #06b6d4;
}

/* Guides Badge */
.dev-browse-card__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 4px 10px;
  transition: all 0.25s ease;
}

.dev-browse-card:hover .dev-browse-card__badge {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.3);
}

/* Card Content details */
.dev-browse-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.dev-browse-card__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.dev-browse-card__desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Explore Button styling */
.dev-browse-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: auto;
  text-align: left;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.dev-browse-card__explore i {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.dev-browse-card:hover .dev-browse-card__explore {
  color: var(--accent);
}

.dev-browse-card:hover .dev-browse-card__explore i {
  transform: translateX(4px);
}

/* ============================================================
   MOST POPULAR DEVICES SECTION
   ============================================================ */
.dev-popular {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 65px;
}

.dev-popular__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.dev-popular__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 32px;
}

.dev-popular__header-left {
  flex: 1;
}

.dev-popular__section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-popular__section-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-popular__header-right {
  flex-shrink: 0;
}

.dev-popular__explore-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-popular__explore-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

.dev-popular__explore-all i {
  font-size: 0.95rem;
}

/* Quick Filters */
.dev-popular__filters-container {
  margin-bottom: 36px;
}

.dev-popular__filters-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.dev-popular__filters-scroll::-webkit-scrollbar {
  display: none;
}

.dev-popular__filters {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.dev-pop-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-pop-filter-chip i {
  font-size: 0.95rem;
}

.dev-pop-filter-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px) scale(1.02);
}

.dev-pop-filter-chip.active,
.dev-pop-filter-chip.active:hover,
.dev-pop-filter-chip.active:focus {
  background: var(--accent, #7cff6b) !important;
  color: #06080f !important;
  border-color: var(--accent, #7cff6b) !important;
}

.dev-pop-filter-chip.active * {
  color: #06080f !important;
}

/* Split Grid Layout */
.dev-popular__layout {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 28px;
  align-items: start;
}

/* Curated Large Featured Card (Left Side) */
.dev-pop-large-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    scale 0.4s ease;
}

.dev-pop-large-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

.dev-pop-large-card__glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-pop-large-card:hover .dev-pop-large-card__glow {
  opacity: 1;
}

.dev-pop-large-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-pop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.25);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
}

.dev-pop-bookmark {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
}

.dev-pop-bookmark:hover {
  transform: scale(1.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.dev-pop-bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* Pure CSS/HTML Android TV Interface Mockup styling */
.dev-pop-mockup-tv {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #04060b;
  border: 4px solid #1a2233;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.dev-tv-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
}

.dev-tv-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.dev-tv-navbar__brand {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dev-tv-navbar__brand i {
  color: var(--accent);
  font-size: 0.75rem;
}

.dev-tv-navbar__links {
  display: flex;
  gap: 8px;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.dev-tv-navbar__links span.active {
  color: var(--accent);
  font-weight: 700;
}

.dev-tv-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}

.dev-tv-hero__tag {
  font-family: var(--font-mono);
  font-size: 0.4rem;
  color: var(--accent);
  text-transform: uppercase;
}

.dev-tv-hero__title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  margin: 2px 0;
}

.dev-tv-hero__sub {
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.5);
}

.dev-tv-hero__play {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #06080f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

.dev-tv-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-tv-row__title {
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.dev-tv-row__items {
  display: flex;
  gap: 6px;
}

.dev-tv-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
}

.dev-tv-item i {
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.dev-tv-item--active {
  border-color: var(--accent);
  background: rgba(124, 255, 107, 0.05);
  color: #fff;
}

.dev-tv-neck {
  width: 14px;
  height: 8px;
  background: #1a2233;
  margin: 0 auto;
}

.dev-tv-base {
  width: 60px;
  height: 3px;
  background: #2e3b52;
  margin: 0 auto;
  border-radius: 2px;
}

/* Large Card content details */
.dev-pop-large-card__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.dev-pop-large-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.dev-pop-large-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dev-pop-large-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dev-pop-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: 12px;
}

.dev-pop-stat__val {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.dev-pop-stat__label {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dev-pop-large-card__explore-btn,
.dev-pop-large-card__explore-btn:link,
.dev-pop-large-card__explore-btn:visited,
.dev-pop-large-card__explore-btn:hover,
.dev-pop-large-card__explore-btn:focus,
.dev-pop-large-card__explore-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent, #7cff6b);
  color: #06080f !important;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-large-card__explore-btn * {
  color: #06080f !important;
}

.dev-pop-large-card__explore-btn:hover {
  background: var(--accent-hover, #66ff52);
  color: #06080f !important;
  box-shadow: 0 4px 15px rgba(124, 255, 107, 0.35);
  transform: translateY(-1px);
}

.dev-pop-large-card__explore-btn i {
  transition: transform 0.2s ease;
}

.dev-pop-large-card__explore-btn:hover i {
  transform: translateX(4px);
}

/* RIGHT Side: 6 Curated Device Cards Grid styling */
.dev-pop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dev-pop-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    scale 0.4s ease;
}

.dev-pop-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

.dev-pop-card__glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  top: -60px;
  right: -60px;
  filter: blur(30px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-pop-card:hover .dev-pop-card__glow {
  opacity: 0.15;
}

/* Glow colors */
.dev-pop-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-pop-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-pop-card__glow--silver {
  background: radial-gradient(circle, #cbd5e1 0%, transparent 70%);
}

.dev-pop-card__glow--cyan {
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

.dev-pop-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.dev-pop-card__glow--green {
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
}

.dev-pop-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-pop-card__badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 4px 8px;
  transition: all 0.25s ease;
}

.dev-pop-card:hover .dev-pop-card__badge {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.3);
}

.dev-pop-card__icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.dev-pop-card__icon-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  z-index: 0;
}

.dev-pop-card__icon-box i {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-card:hover .dev-pop-card__icon-box i {
  transform: scale(1.15);
}

.dev-pop-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.dev-pop-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.dev-pop-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.dev-pop-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-top: auto;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.dev-pop-card__explore i {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.dev-pop-card:hover .dev-pop-card__explore {
  color: var(--accent);
}

.dev-pop-card:hover .dev-pop-card__explore i {
  transform: translateX(4px);
}

/* ============================================================
   DEVICE SETUP GUIDES SECTION
   ============================================================ */
.dev-guides {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 65px;
}

.dev-guides__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.dev-guides__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 32px;
}

.dev-guides__header-left {
  flex: 1;
}

.dev-guides__section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-guides__section-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-guides__header-right {
  flex-shrink: 0;
}

.dev-guides__view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-guides__view-all-link:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

.dev-guides__view-all-link i {
  font-size: 0.95rem;
}

/* Quick Access Tabs */
.dev-guides__tabs-container {
  margin-bottom: 36px;
}

.dev-guides__tabs-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.dev-guides__tabs-scroll::-webkit-scrollbar {
  display: none;
}

.dev-guides__tabs {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.dev-guides-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-guides-tab i {
  font-size: 0.95rem;
}

.dev-guides-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px) scale(1.02);
}

.dev-guides-tab.active {
  background: var(--accent, #7cff6b) !important;
  color: #06080f !important;
  border-color: var(--accent, #7cff6b) !important;
}

.dev-guides-tab.active:hover {
  background: var(--accent-hover, #66ff52) !important;
  color: #06080f !important;
  border-color: var(--accent-hover, #66ff52) !important;
}

.dev-guides-tab.active i {
  color: #06080f !important;
}

/* Split Layout Grid: Large (Left) + List (Right) */
.dev-guides__layout {
  display: grid;
  grid-template-columns: 0.58fr 0.42fr;
  gap: 28px;
  align-items: start;
}

/* Curated Large Featured Guide Card (Left Side) */
.dev-guide-large-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    scale 0.4s ease;
}

.dev-guide-large-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

.dev-guide-large-card__glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-guide-large-card:hover .dev-guide-large-card__glow {
  opacity: 1;
}

.dev-guide-large-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-guide-large-card__badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
}

.dev-guide-bookmark {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
}

.dev-guide-bookmark:hover {
  transform: scale(1.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.dev-guide-bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* Pure CSS Player TV Mockup styling */
.dev-guide-mockup-tv {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #04060b;
  border: 4px solid #1a2233;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.dev-guide-tv-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(4, 6, 11, 0.5) 0%, rgba(4, 6, 11, 0) 50%, rgba(4, 6, 11, 0.8) 100%);
  position: relative;
}

.dev-guide-player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-guide-player-title {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dev-guide-player-title i {
  color: var(--accent);
  font-size: 0.7rem;
}

.dev-guide-player-meta {
  display: flex;
  gap: 4px;
}

.dev-guide-player-meta .badge {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.05);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 2px 5px;
  border-radius: 3px;
}

.dev-guide-player-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.dev-guide-player-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.12);
  border: 1px solid rgba(124, 255, 107, 0.35);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 0 20px rgba(124, 255, 107, 0.15);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-guide-large-card:hover .dev-guide-player-circle {
  transform: scale(1.12);
  background: var(--accent);
  color: #06080f;
  box-shadow: 0 0 25px rgba(124, 255, 107, 0.4);
}

.dev-guide-player-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.dev-guide-player-progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
}

.dev-guide-player-progress-current {
  height: 100%;
  width: 38%;
  background: var(--accent);
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(124, 255, 107, 0.4);
}

.dev-guide-player-progress-handle {
  position: absolute;
  top: -3px;
  left: 38%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.dev-guide-player-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
}

.dev-guide-player-buttons i {
  font-size: 0.68rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.dev-guide-player-buttons i:hover {
  color: #fff;
}

.dev-guide-player-buttons-left,
.dev-guide-player-buttons-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dev-guide-player-buttons span.time {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
}

.dev-guide-tv-neck {
  width: 14px;
  height: 8px;
  background: #1a2233;
  margin: 0 auto;
}

.dev-guide-tv-base {
  width: 60px;
  height: 3px;
  background: #2e3b52;
  margin: 0 auto;
  border-radius: 2px;
}

/* Large Guide card content details */
.dev-guide-large-card__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.dev-guide-large-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}

.dev-guide-large-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dev-guide-large-card__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.dev-guide-large-card__meta .meta-item {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dev-guide-large-card__meta .meta-item i {
  color: var(--accent);
  font-size: 0.88rem;
}

.dev-guide-large-card__read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: #06080f;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-guide-large-card__read-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 15px rgba(124, 255, 107, 0.25);
  transform: translateY(-1px);
}

.dev-guide-large-card__read-btn i {
  transition: transform 0.2s ease;
}

.dev-guide-large-card__read-btn:hover i {
  transform: translateX(4px);
}

/* RIGHT Side: 6 Setup Guide Cards List styling */
.dev-guides-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dev-guide-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    scale 0.4s ease;
}

.dev-guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

.dev-guide-card__glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  top: -60px;
  right: -60px;
  filter: blur(30px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-guide-card:hover .dev-guide-card__glow {
  opacity: 0.12;
}

/* Glow colors */
.dev-guide-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-guide-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-guide-card__glow--silver {
  background: radial-gradient(circle, #cbd5e1 0%, transparent 70%);
}

.dev-guide-card__glow--cyan {
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

.dev-guide-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.dev-guide-card__glow--purple {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

.dev-guide-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-guide-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dev-guide-card__meta .tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 2px 8px;
  border-radius: 100px;
}

.dev-guide-card__meta .read-time {
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dev-guide-card__meta .read-time i {
  font-size: 0.8rem;
}

.dev-guide-card__content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.dev-guide-card__icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.dev-guide-card__icon-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  z-index: 0;
}

.dev-guide-card__icon-box i {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-guide-card:hover .dev-guide-card__icon-box i {
  transform: scale(1.15);
}

.dev-guide-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

.dev-guide-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.dev-guide-card__read i {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.dev-guide-card:hover .dev-guide-card__read {
  color: var(--accent);
}

.dev-guide-card:hover .dev-guide-card__read i {
  transform: translateX(4px);
}

/* ============================================================
   RIGHT COLUMN: CONNECTED ECOSYSTEM MOCKUP
   ============================================================ */
.dev-hero__visual {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-mockup-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.dev-canvas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── Base Device Shapes ── */
.dev-shape {
  position: absolute;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  animation: dev-float-device 6s ease-in-out infinite;
}

/* TV Shape (Center Back) */
.dev-shape--tv {
  top: 15%;
  left: 32%;
  width: 170px;
  animation-delay: 0.2s;
}

.dev-shape__tv-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: #060911;
  border: 4px solid #1c2637;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.dev-shape__tv-screen {
  height: 100%;
  position: relative;
}

.dev-shape__tv-ui {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 8px;
}

.dev-shape__tv-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.dev-shape__tv-header .active-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: dev-pulse-green 1.5s infinite;
}

.dev-shape__tv-content {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.55rem;
  color: #fff;
  font-weight: 600;
  margin-top: 6px;
}

.dev-shape__tv-content i {
  font-size: 0.95rem;
  color: var(--accent);
}

.dev-shape__tv-neck {
  width: 14px;
  height: 12px;
  background: #1c2637;
  margin: 0 auto;
}

.dev-shape__tv-base {
  width: 60px;
  height: 3px;
  background: #25334a;
  border-radius: 2px;
  margin: 0 auto;
}

/* MacBook Laptop (Left Side) */
.dev-shape--laptop {
  top: 18%;
  left: 4%;
  width: 110px;
  animation-delay: 0.6s;
}

.dev-shape__laptop-screen {
  width: 100%;
  aspect-ratio: 16/10;
  background: #080d1a;
  border: 4px solid #1a2233;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-shape__laptop-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.dev-shape__laptop-ui i {
  font-size: 1.1rem;
  color: #599cf7;
}

.dev-shape__laptop-base {
  width: 118px;
  height: 4px;
  background: #1e283b;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-left: -4px;
}

/* Tablet (Right Side) */
.dev-shape--tablet {
  top: 20%;
  right: 6%;
  width: 75px;
  animation-delay: 0.9s;
}

.dev-shape__tablet-frame {
  width: 100%;
  aspect-ratio: 3/4;
  background: #050810;
  border: 3px solid #1d2536;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.dev-shape__tablet-ui {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.dev-shape__tablet-step {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.45rem;
  color: #fff;
}

.dev-shape__tablet-step i {
  color: var(--accent);
}

.dev-shape__tablet-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.dev-shape__tablet-progress::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 70%;
  background: var(--accent);
}

/* Smart Phone (Foreground Right) */
.dev-shape--phone {
  bottom: 22%;
  right: 25%;
  width: 38px;
  animation-delay: 1.4s;
}

.dev-shape__phone-frame {
  width: 100%;
  aspect-ratio: 9/19;
  background: #04070d;
  border: 2px solid #1a2233;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-shape__phone-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.4rem;
  color: #fff;
}

.dev-shape__phone-ui i {
  font-size: 0.65rem;
  color: var(--accent);
}

/* TV Stick (Foreground Left) */
.dev-shape--stick {
  bottom: 26%;
  left: 22%;
  width: 60px;
  animation-delay: 1.8s;
}

.dev-shape__stick-frame {
  width: 100%;
  padding: 5px 8px;
  background: rgba(20, 25, 38, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.42rem;
  color: rgba(255, 255, 255, 0.7);
}

.dev-shape__stick-frame i {
  font-size: 0.65rem;
  color: #f97316;
}

/* ── Floating Badges / UI Cards ── */
.dev-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  z-index: 3;
  animation: dev-float-badge 5s ease-in-out infinite;
}

.dev-float-badge span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}

.dev-float-badge i {
  font-size: 0.85rem;
}

.dev-float-badge--1 {
  top: 8%;
  left: 6%;
  animation-delay: 0.1s;
}

.dev-float-badge--1 i {
  color: #3b82f6;
}

.dev-float-badge--2 {
  bottom: 12%;
  left: 4%;
  animation-delay: 0.5s;
}

.dev-float-badge--2 i {
  color: #f59e0b;
}

.dev-float-badge--3 {
  top: 8%;
  right: 12%;
  animation-delay: 1.1s;
}

.dev-float-badge--3 i {
  color: var(--accent);
}

.dev-float-badge--4 {
  bottom: 10%;
  right: 2%;
  animation-delay: 1.5s;
}

.dev-float-badge--4 i {
  color: #ec4899;
}

.dev-float-badge--5 {
  top: 48%;
  left: 40%;
  animation-delay: 2s;
}

.dev-float-badge--5 i {
  color: #a855f7;
}


/* ============================================================
   SEARCH & FILTER BAR
   ============================================================ */
.dev-search-bar {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 32px 40px;
}

.dev-search-bar__inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Search input wrap */
.dev-search-input {
  position: relative;
  width: 100%;
}

.dev-search-input__icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.dev-search-input__field {
  width: 100%;
  padding: 16px 56px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.25s ease;
}

.dev-search-input__field:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 0 25px rgba(124, 255, 107, 0.08);
}

.dev-search-input__clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.2s;
}

.dev-search-input__clear:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Controls layout */
.dev-search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.dev-chips-scroll {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.dev-chips-scroll::-webkit-scrollbar {
  display: none;
}

.dev-chips-container {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-chip i {
  font-size: 0.95rem;
}

.dev-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px) scale(1.02);
}

.dev-chip--active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

.dev-chip--active:hover {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* Custom sorting selection */
.dev-sort-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.dev-sort-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.dev-sort-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dev-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 36px 10px 16px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.dev-sort-select:focus {
  outline: none;
  border-color: rgba(124, 255, 107, 0.3);
}

.dev-sort-arrow {
  position: absolute;
  right: 14px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  pointer-events: none;
}

/* Results metadata text */
.dev-results-meta {
  font-size: 0.86rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 16px;
}

.dev-results-meta span {
  font-weight: 700;
  color: var(--accent);
}


/* ============================================================
   DEVICES CATALOG GRID
   ============================================================ */
.dev-catalog {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  padding: 60px 0 80px;
}

.dev-catalog__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.dev-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Device Catalog Card ── */
.dev-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.dev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

/* Colored Icon Box Wraps */
.dev-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
  position: relative;
}

.dev-card__icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.15;
  z-index: 0;
}

.dev-card__icon-wrap i {
  position: relative;
  z-index: 1;
}

/* Icon box themes */
.dev-card__icon-wrap--orange {
  color: #f97316;
}

.dev-card__icon-wrap--orange::before {
  background: #f97316;
}

.dev-card__icon-wrap--green {
  color: #10b981;
}

.dev-card__icon-wrap--green::before {
  background: #10b981;
}

.dev-card__icon-wrap--black {
  color: #f8fafc;
}

.dev-card__icon-wrap--black::before {
  background: #64748b;
}

.dev-card__icon-wrap--purple {
  color: #a855f7;
}

.dev-card__icon-wrap--purple::before {
  background: #a855f7;
}

.dev-card__icon-wrap--blue {
  color: #3b82f6;
}

.dev-card__icon-wrap--blue::before {
  background: #3b82f6;
}

.dev-card__icon-wrap--red {
  color: #ef4444;
}

.dev-card__icon-wrap--red::before {
  background: #ef4444;
}

.dev-card__icon-wrap--cyan {
  color: #06b6d4;
}

.dev-card__icon-wrap--cyan::before {
  background: #06b6d4;
}

.dev-card__icon-wrap--lightgrey {
  color: #e2e8f0;
}

.dev-card__icon-wrap--lightgrey::before {
  background: #cbd5e1;
}

.dev-card__icon-wrap--amber {
  color: #f59e0b;
}

.dev-card__icon-wrap--amber::before {
  background: #f59e0b;
}

.dev-card__icon-wrap--grey {
  color: #94a3b8;
}

.dev-card__icon-wrap--grey::before {
  background: #94a3b8;
}

.dev-card__icon-wrap--darkblue {
  color: #6366f1;
}

.dev-card__icon-wrap--darkblue::before {
  background: #6366f1;
}

/* Card content body */
.dev-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dev-card__category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.dev-card__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.dev-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
}

/* Card metadata items */
.dev-card__meta {
  display: flex;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 16px;
  margin-top: auto;
  margin-bottom: 20px;
}

.dev-card__meta-item {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.dev-card__meta-item i {
  font-size: 0.85rem;
}

/* Direct action buttons */
.dev-card__actions {
  display: flex;
  gap: 12px;
}

.dev-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dev-card__btn--primary {
  background: #2563eb;
  color: #ffffff !important;
}

.dev-card__btn--primary,
.dev-card__btn--primary *,
.dev-card__btn--primary i {
  color: #ffffff !important;
}

.dev-card__btn--primary:hover {
  background: #1d4ed8;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.dev-card__btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: #fff;
}

.dev-card__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── No Devices State ── */
.dev-empty {
  text-align: center;
  padding: 64px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  max-width: 580px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dev-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.dev-empty__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.dev-empty__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 380px;
  line-height: 1.5;
}

.dev-empty__reset {
  padding: 10px 20px;
  font-size: 0.86rem;
  border-radius: 8px;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet: ≤ 1100px ── */
@media (max-width: 1100px) {
  .dev-hero__inner {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 30px;
  }

  .dev-hero {
    padding: 110px 0 60px;
    min-height: auto;
  }

  .dev-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dev-browse {
    padding: 60px 0 50px;
  }

  .dev-browse__inner {
    padding: 0 30px;
  }

  .dev-browse__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dev-popular {
    padding: 60px 0 50px;
  }

  .dev-popular__inner {
    padding: 0 30px;
  }

  .dev-popular__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dev-guides {
    padding: 60px 0 50px;
  }

  .dev-guides__inner {
    padding: 0 30px;
  }

  .dev-guides__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
  .dev-hero {
    padding: 100px 0 50px;
  }

  .dev-hero__inner {
    padding: 0 20px;
    gap: 40px;
  }

  .dev-hero__heading {
    font-size: 2.5rem;
  }

  .dev-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .dev-btn {
    width: 100%;
    justify-content: center;
  }

  .dev-hero__stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .dev-stat__divider {
    display: none;
  }

  .dev-stat {
    flex: 0 0 calc(50% - 10px);
  }

  .dev-hero__visual {
    height: 380px;
  }

  /* Scale down mockup positions */
  .dev-shape--tv {
    left: 24%;
    width: 140px;
  }

  .dev-shape--laptop {
    left: 2%;
    width: 90px;
  }

  .dev-shape--tablet {
    right: 2%;
    width: 65px;
  }

  .dev-float-badge {
    padding: 6px 10px;
  }

  .dev-float-badge span {
    font-size: 0.65rem;
  }

  .dev-search-bar {
    padding: 24px 20px;
  }

  .dev-search-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .dev-sort-wrap {
    width: 100%;
  }

  .dev-sort-select-wrapper {
    flex: 1;
  }

  .dev-sort-select {
    width: 100%;
  }

  .dev-catalog {
    padding: 40px 0 60px;
  }

  .dev-catalog__inner {
    padding: 0 20px;
  }

  .dev-catalog__grid {
    grid-template-columns: 1fr;
  }

  .dev-browse {
    padding: 50px 0 45px;
  }

  .dev-browse__inner {
    padding: 0 20px;
  }

  .dev-browse__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }

  .dev-browse__section-title {
    font-size: 1.8rem;
  }

  .dev-browse__view-all {
    width: 100%;
    justify-content: flex-start;
  }

  .dev-browse__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dev-popular {
    padding: 50px 0 45px;
  }

  .dev-popular__inner {
    padding: 0 20px;
  }

  .dev-popular__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }

  .dev-popular__section-title {
    font-size: 1.8rem;
  }

  .dev-popular__explore-all {
    width: 100%;
    justify-content: flex-start;
  }

  .dev-popular__filters-container {
    margin-bottom: 24px;
  }

  .dev-pop-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dev-pop-large-card {
    padding: 24px;
    gap: 20px;
  }

  .dev-pop-large-card__title {
    font-size: 1.3rem;
  }

  .dev-pop-large-card__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dev-guides {
    padding: 50px 0 45px;
  }

  .dev-guides__inner {
    padding: 0 20px;
  }

  .dev-guides__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }

  .dev-guides__section-title {
    font-size: 1.8rem;
  }

  .dev-guides__view-all-link {
    width: 100%;
    justify-content: flex-start;
  }

  .dev-guides__tabs-container {
    margin-bottom: 24px;
  }

  .dev-guides__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dev-guide-large-card {
    padding: 24px;
    gap: 20px;
  }

  .dev-guide-large-card__title {
    font-size: 1.3rem;
  }

  .dev-guide-large-card__meta {
    gap: 12px;
  }

  .dev-guides-list {
    gap: 14px;
  }

  .dev-guide-card {
    padding: 16px 20px;
    gap: 10px;
  }
}

/* ── Small Mobile: ≤ 480px ── */
@media (max-width: 480px) {
  .dev-hero__heading {
    font-size: 2rem;
  }

  .dev-hero__visual {
    height: 320px;
  }

  /* Hide some elements on small mobile to reduce clutter */
  .dev-shape--laptop,
  .dev-shape--stick,
  .dev-canvas-svg,
  .dev-float-badge--2,
  .dev-float-badge--4 {
    display: none;
  }

  .dev-shape--tv {
    left: 50%;
    transform: translateX(-50%);
  }

  .dev-shape--tablet {
    right: 5%;
    bottom: 5%;
  }

  .dev-float-badge--1 {
    top: auto;
    bottom: 5%;
    left: 5%;
    animation: none;
  }
}

/* ── Light Theme overrides ── */
[data-theme="light"] .dev-hero__heading {
  color: #0f172a;
}

[data-theme="light"] .dev-stat__number,
[data-theme="light"] .dev-stat__number--text {
  color: #0f172a;
}

[data-theme="light"] .dev-hero__grid-lines {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

[data-theme="light"] .dev-shape__tv-frame,
[data-theme="light"] .dev-shape__laptop-screen,
[data-theme="light"] .dev-shape__tablet-frame,
[data-theme="light"] .dev-shape__phone-frame {
  border-color: #cbd5e1;
  background: #f8fafc;
}

[data-theme="light"] .dev-shape__tv-content,
[data-theme="light"] .dev-shape__laptop-ui,
[data-theme="light"] .dev-shape__tablet-step,
[data-theme="light"] .dev-shape__phone-ui {
  color: #0f172a;
}

[data-theme="light"] .dev-shape__tv-neck,
[data-theme="light"] .dev-shape__tv-base,
[data-theme="light"] .dev-shape__laptop-base {
  background: #cbd5e1;
}

[data-theme="light"] .dev-float-badge {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dev-float-badge span {
  color: #0f172a;
}

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

[data-theme="light"] .dev-chip {
  color: #475569;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .dev-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.04);
}

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

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

[data-theme="light"] .dev-card__btn--secondary {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: #334155;
}

[data-theme="light"] .dev-card__btn--secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .dev-empty {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

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

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

[data-theme="light"] .dev-btn--ghost {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

[data-theme="light"] .dev-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.25);
  color: #000;
}

[data-theme="light"] .dev-btn--ghost .dev-btn__icon {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .dev-empty__reset {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

[data-theme="light"] .dev-empty__reset:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.25);
  color: #000;
}

[data-theme="light"] .dev-btn--primary,
[data-theme="light"] .dev-btn--primary:link,
[data-theme="light"] .dev-btn--primary:visited,
[data-theme="light"] .dev-btn--primary:hover,
[data-theme="light"] .dev-btn--primary:focus,
[data-theme="light"] .dev-btn--primary:active,
[data-theme="light"] #devBrowseBtn,
[data-theme="light"] #devBrowseBtn:link,
[data-theme="light"] #devBrowseBtn:visited,
[data-theme="light"] #devBrowseBtn:hover,
[data-theme="light"] #devBrowseBtn:focus,
[data-theme="light"] #devBrowseBtn:active,
[data-theme="light"] .dev-nl__submit,
[data-theme="light"] .dev-nl__submit:link,
[data-theme="light"] .dev-nl__submit:visited,
[data-theme="light"] .dev-nl__submit:hover,
[data-theme="light"] .dev-nl__submit:focus,
[data-theme="light"] .dev-nl__submit:active,
[data-theme="light"] #devNlSubmit,
[data-theme="light"] #devNlSubmit:link,
[data-theme="light"] #devNlSubmit:visited,
[data-theme="light"] #devNlSubmit:hover,
[data-theme="light"] #devNlSubmit:focus,
[data-theme="light"] #devNlSubmit:active,
[data-theme="light"] .dev-faq__help-btn--primary,
[data-theme="light"] .dev-faq__help-btn--primary:link,
[data-theme="light"] .dev-faq__help-btn--primary:visited,
[data-theme="light"] .dev-faq__help-btn--primary:hover,
[data-theme="light"] .dev-faq__help-btn--primary:focus,
[data-theme="light"] .dev-faq__help-btn--primary:active,
[data-theme="light"] #devFaqHelpCenter,
[data-theme="light"] #devFaqHelpCenter:link,
[data-theme="light"] #devFaqHelpCenter:visited,
[data-theme="light"] #devFaqHelpCenter:hover,
[data-theme="light"] #devFaqHelpCenter:focus,
[data-theme="light"] #devFaqHelpCenter:active,
[data-theme="light"] .dev-chip--active,
[data-theme="light"] .dev-chip--active:link,
[data-theme="light"] .dev-chip--active:visited,
[data-theme="light"] .dev-chip--active:hover,
[data-theme="light"] .dev-chip--active:focus,
[data-theme="light"] .dev-chip--active:active,
[data-theme="light"] .dev-compare__rec-btn--primary,
[data-theme="light"] .dev-compare__rec-btn--primary:link,
[data-theme="light"] .dev-compare__rec-btn--primary:visited,
[data-theme="light"] .dev-compare__rec-btn--primary:hover,
[data-theme="light"] .dev-compare__rec-btn--primary:focus,
[data-theme="light"] .dev-compare__rec-btn--primary:active,
[data-theme="light"] #devCmpBuyingGuide,
[data-theme="light"] #devCmpBuyingGuide:link,
[data-theme="light"] #devCmpBuyingGuide:visited,
[data-theme="light"] #devCmpBuyingGuide:hover,
[data-theme="light"] #devCmpBuyingGuide:focus,
[data-theme="light"] #devCmpBuyingGuide:active {
  color: #ffffff !important;
}

[data-theme="light"] .dev-btn--primary *,
[data-theme="light"] #devBrowseBtn *,
[data-theme="light"] .dev-nl__submit *,
[data-theme="light"] #devNlSubmit *,
[data-theme="light"] .dev-faq__help-btn--primary *,
[data-theme="light"] #devFaqHelpCenter *,
[data-theme="light"] .dev-chip--active *,
[data-theme="light"] .dev-compare__rec-btn--primary *,
[data-theme="light"] #devCmpBuyingGuide * {
  color: #ffffff !important;
}

[data-theme="light"] .dev-search-input__field {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .dev-search-input__field:focus {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .dev-ts__suggestion-item:hover,
[data-theme="light"] .dev-ts__suggestion-item:focus {
  background: #0f172a;
  color: #ffffff;
}

/* Light Theme overrides for Browse Devices Cards */
[data-theme="light"] .dev-browse__section-title {
  color: #0f172a;
}

[data-theme="light"] .dev-browse-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-browse-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

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

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

[data-theme="light"] .dev-browse-card__badge {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .dev-browse-card__explore {
  color: #0f172a;
}

[data-theme="light"] .dev-browse-card:hover .dev-browse-card__explore {
  color: var(--accent-hover);
}

/* Light Theme overrides for Popular Devices Section */
[data-theme="light"] .dev-popular {
  background: rgba(241, 245, 249, 0.5);
  border-top-color: rgba(15, 23, 42, 0.06);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

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

[data-theme="light"] .dev-popular__section-subtitle {
  color: #475569;
}

[data-theme="light"] .dev-pop-filter-chip {
  border-color: rgba(15, 23, 42, 0.1);
  color: #475569;
}

[data-theme="light"] .dev-pop-filter-chip:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .dev-pop-filter-chip.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

[data-theme="light"] .dev-pop-large-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-pop-large-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

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

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

[data-theme="light"] .dev-pop-stat {
  background: rgba(15, 23, 42, 0.01);
  border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-pop-stat__val {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-stat__label {
  color: #64748b;
}

[data-theme="light"] .dev-pop-bookmark {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}

[data-theme="light"] .dev-pop-bookmark:hover {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .dev-pop-bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

[data-theme="light"] .dev-pop-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-pop-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

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

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

[data-theme="light"] .dev-pop-card__badge {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .dev-pop-card__explore {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-card:hover .dev-pop-card__explore {
  color: var(--accent-hover);
}

/* TV Screen adjustments for Light Mode readability */
[data-theme="light"] .dev-pop-mockup-tv {
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .dev-tv-neck {
  background: #e2e8f0;
}

[data-theme="light"] .dev-tv-base {
  background: #cbd5e1;
}

/* Light Theme overrides for Device Setup Guides Section */
[data-theme="light"] .dev-guides {
  background: #fff;
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

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

[data-theme="light"] .dev-guides__section-subtitle {
  color: #475569;
}

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

[data-theme="light"] .dev-guides-tab:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .dev-guides-tab.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

[data-theme="light"] .dev-guides-tab.active:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

[data-theme="light"] .dev-guides-tab.active i {
  color: #ffffff !important;
}

[data-theme="light"] .dev-pop-large-card__explore-btn,
[data-theme="light"] .dev-pop-large-card__explore-btn:link,
[data-theme="light"] .dev-pop-large-card__explore-btn:visited {
  background: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .dev-pop-large-card__explore-btn * {
  color: #ffffff !important;
}

[data-theme="light"] .dev-pop-large-card__explore-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .dev-guide-large-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-guide-large-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

[data-theme="light"] .dev-guide-large-card__badge-tag {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .dev-guide-bookmark {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}

[data-theme="light"] .dev-guide-bookmark:hover {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .dev-guide-bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

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

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

[data-theme="light"] .dev-guide-large-card__meta .meta-item {
  color: #64748b;
}

[data-theme="light"] .dev-guide-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-guide-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

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

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

[data-theme="light"] .dev-guide-card:hover .dev-guide-card__read {
  color: var(--accent-hover);
}

[data-theme="light"] .dev-guide-card__meta .read-time {
  color: #64748b;
}

[data-theme="light"] .dev-guide-mockup-tv {
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .dev-guide-tv-neck {
  background: #e2e8f0;
}

[data-theme="light"] .dev-guide-tv-base {
  background: #cbd5e1;
}

/* ============================================================
   DOWNLOADS BY DEVICE SECTION
   ============================================================ */
.dev-downloads {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary, #080b12);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 70px;
}

.dev-downloads__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header */
.dev-downloads__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 32px;
}

.dev-downloads__header-left {
  flex: 1;
}

.dev-downloads__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-downloads__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-downloads__header-right {
  flex-shrink: 0;
}

.dev-downloads__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-downloads__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

.dev-downloads__view-all i {
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.dev-downloads__view-all:hover i {
  transform: translateX(3px);
}

/* Info Strip */
.dev-downloads__info-strip {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 28px;
  margin-bottom: 40px;
  gap: 0;
  flex-wrap: wrap;
  overflow: hidden;
}

.dev-downloads__info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 160px;
}

.dev-downloads__info-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.dev-downloads__info-icon--green {
  color: #7cff6b;
}

.dev-downloads__info-icon--blue {
  color: #60a5fa;
}

.dev-downloads__info-icon--purple {
  color: #c084fc;
}

.dev-downloads__info-icon--orange {
  color: #fb923c;
}

.dev-downloads__info-icon--cyan {
  color: #22d3ee;
}

.dev-downloads__info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dev-downloads__info-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dev-downloads__info-value {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.dev-downloads__info-divider {
  width: 1px;
  height: 40px;
  background: var(--border-color);
  flex-shrink: 0;
  margin: 0 20px;
}

/* 4-Column Grid */
.dev-downloads__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Download Card */
.dev-dl-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
}

.dev-dl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

/* Per-card glow blobs */
.dev-dl-card__glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  top: -80px;
  right: -80px;
  filter: blur(45px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-dl-card:hover .dev-dl-card__glow {
  opacity: 0.15;
}

.dev-dl-card__glow--green {
  background: radial-gradient(circle, #7cff6b 0%, transparent 70%);
}

.dev-dl-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-dl-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-dl-card__glow--purple {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

.dev-dl-card__glow--silver {
  background: radial-gradient(circle, #cbd5e1 0%, transparent 70%);
}

.dev-dl-card__glow--yellow {
  background: radial-gradient(circle, #facc15 0%, transparent 70%);
}

.dev-dl-card__glow--cyan {
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

.dev-dl-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

/* Card top row: icon + verified / guide badge */
.dev-dl-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Coloured icon circles */
.dev-dl-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-dl-card:hover .dev-dl-card__icon-wrap {
  transform: scale(1.1) rotate(-3deg);
}

/* Icon colour themes */
.dev-dl-card__icon-wrap--green {
  background: rgba(124, 255, 107, 0.12);
  color: #7cff6b;
}

.dev-dl-card__icon-wrap--orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.dev-dl-card__icon-wrap--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.dev-dl-card__icon-wrap--purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.dev-dl-card__icon-wrap--silver {
  background: rgba(203, 213, 225, 0.10);
  color: #cbd5e1;
}

.dev-dl-card__icon-wrap--yellow {
  background: rgba(250, 204, 21, 0.12);
  color: #fbbf24;
}

.dev-dl-card__icon-wrap--cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #22d3ee;
}

.dev-dl-card__icon-wrap--red {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Verified badge */
.dev-dl-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--accent);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dev-dl-card:hover .dev-dl-card__verified {
  opacity: 1;
  transform: scale(1.1);
}

/* Guide badge (Samsung / LG) */
.dev-dl-card__badge-guide {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

/* Body */
.dev-dl-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.dev-dl-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.dev-dl-card__version-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dev-dl-card__version {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 2px 8px;
  border-radius: 100px;
}

.dev-dl-card__updated {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.dev-dl-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dev-dl-card__meta li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dev-dl-card__meta li i {
  font-size: 0.88rem;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Download / Guide Buttons */
.dev-dl-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dev-dl-card__btn i {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

/* Primary – Electric Green */
.dev-dl-card__btn--primary {
  background: var(--accent);
  color: #06080f;
  box-shadow: 0 0 0 0 rgba(124, 255, 107, 0);
}

.dev-dl-card__btn--primary:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 4px 18px rgba(124, 255, 107, 0.35);
  transform: translateY(-1px);
}

.dev-dl-card__btn--primary:hover i {
  transform: translateY(-2px);
}

/* Secondary – ghost/outline */
.dev-dl-card__btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1px solid var(--border-color);
}

.dev-dl-card__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.dev-dl-card__btn--secondary:hover i {
  transform: translateX(3px);
}

/* ── Responsive overrides ── */

/* Tablet: ≤ 1100px → 2 columns */
@media (max-width: 1100px) {
  .dev-downloads {
    padding: 65px 0 55px;
  }

  .dev-downloads__inner {
    padding: 0 30px;
  }

  .dev-downloads__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .dev-downloads__info-strip {
    gap: 0;
    padding: 18px 20px;
  }

  .dev-downloads__info-divider {
    margin: 0 14px;
  }
}

/* Mobile: ≤ 768px → 1 column */
@media (max-width: 768px) {
  .dev-downloads {
    padding: 52px 0 44px;
  }

  .dev-downloads__inner {
    padding: 0 20px;
  }

  .dev-downloads__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .dev-downloads__title {
    font-size: 1.8rem;
  }

  .dev-downloads__info-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .dev-downloads__info-divider {
    display: none;
  }

  .dev-downloads__info-item {
    min-width: unset;
  }

  .dev-downloads__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

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

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

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

[data-theme="light"] .dev-downloads__info-strip {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-downloads__info-label {
  color: #64748b;
}

[data-theme="light"] .dev-downloads__info-value {
  color: #0f172a;
}

[data-theme="light"] .dev-downloads__info-divider {
  background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-dl-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-dl-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

[data-theme="light"] .dev-dl-card__name {
  color: #0f172a;
}

[data-theme="light"] .dev-dl-card__meta li {
  color: #64748b;
}

[data-theme="light"] .dev-dl-card__updated {
  color: #94a3b8;
}

[data-theme="light"] .dev-dl-card__badge-guide {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .dev-dl-card__btn--secondary {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .dev-dl-card__btn--secondary:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   TROUBLESHOOTING CENTER SECTION
   ============================================================ */
.dev-ts {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 70px;
}

.dev-ts__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.dev-ts__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 32px;
}

.dev-ts__header-left {
  flex: 1;
}

.dev-ts__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-ts__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-ts__header-right {
  flex-shrink: 0;
}

.dev-ts__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-ts__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* Search Bar */
.dev-ts__search-wrap {
  position: relative;
  margin-bottom: 24px;
}

.dev-ts__search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 0 20px;
  gap: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dev-ts__search-box:focus-within {
  border-color: rgba(124, 255, 107, 0.4);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.08), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.dev-ts__search-icon {
  font-size: 1.2rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.2s ease;
}

.dev-ts__search-box:focus-within .dev-ts__search-icon {
  color: var(--accent);
}

.dev-ts__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  padding: 18px 0;
  appearance: none;
}

.dev-ts__search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.dev-ts__search-input::-webkit-search-cancel-button {
  display: none;
}

.dev-ts__search-clear {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-ts__search-clear:hover {
  color: #fff;
  transform: scale(1.15);
}

/* Suggestions dropdown */
.dev-ts__suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 14px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: tsDropIn 0.2s ease forwards;
}

@keyframes tsDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dev-ts__suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  font-size: 0.88rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.dev-ts__suggestion-item:last-child {
  border-bottom: none;
}

.dev-ts__suggestion-item i {
  font-size: 1rem;
  color: var(--accent);
  opacity: 0.75;
}

.dev-ts__suggestion-item:hover,
.dev-ts__suggestion-item:focus {
  background: rgba(124, 255, 107, 0.06);
  color: #fff;
  padding-left: 26px;
  outline: none;
}

/* Filter Chips */
.dev-ts__filters-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 36px;
}

.dev-ts__filters-wrap::-webkit-scrollbar {
  display: none;
}

.dev-ts__filters {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.dev-ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.dev-ts-chip i {
  font-size: 0.92rem;
}

.dev-ts-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px) scale(1.02);
}

.dev-ts-chip.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
  font-weight: 700;
}

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

/* Troubleshooting Card */
.dev-ts-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
}

.dev-ts-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(124, 255, 107, 0.04);
}

.dev-ts-card__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: -90px;
  right: -90px;
  filter: blur(50px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-ts-card:hover .dev-ts-card__glow {
  opacity: 0.13;
}

.dev-ts-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-ts-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-ts-card__glow--purple {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

.dev-ts-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.dev-ts-card__glow--cyan {
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

.dev-ts-card__glow--green {
  background: radial-gradient(circle, #7cff6b 0%, transparent 70%);
}

.dev-ts-card__glow--yellow {
  background: radial-gradient(circle, #facc15 0%, transparent 70%);
}

.dev-ts-card__glow--silver {
  background: radial-gradient(circle, #cbd5e1 0%, transparent 70%);
}

.dev-ts-card__glow--teal {
  background: radial-gradient(circle, #2dd4bf 0%, transparent 70%);
}

.dev-ts-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dev-ts-card__icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-ts-card:hover .dev-ts-card__icon-wrap {
  transform: scale(1.12) rotate(-4deg);
}

.dev-ts-card__icon-wrap--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.dev-ts-card__icon-wrap--orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.dev-ts-card__icon-wrap--purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.dev-ts-card__icon-wrap--red {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.dev-ts-card__icon-wrap--cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #22d3ee;
}

.dev-ts-card__icon-wrap--green {
  background: rgba(124, 255, 107, 0.12);
  color: #7cff6b;
}

.dev-ts-card__icon-wrap--yellow {
  background: rgba(250, 204, 21, 0.12);
  color: #fbbf24;
}

.dev-ts-card__icon-wrap--silver {
  background: rgba(203, 213, 225, 0.10);
  color: #cbd5e1;
}

.dev-ts-card__icon-wrap--teal {
  background: rgba(45, 212, 191, 0.12);
  color: #2dd4bf;
}

.dev-ts-card__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.dev-ts-card__badge--hot {
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
}

.dev-ts-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.dev-ts-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}

.dev-ts-card__desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dev-ts-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.dev-ts-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dev-ts-card__btn i {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.dev-ts-card:hover .dev-ts-card__btn {
  color: var(--accent-hover, #5be94a);
}

.dev-ts-card:hover .dev-ts-card__btn i {
  transform: translateX(4px);
}

.dev-ts-card__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.65;
}

/* No Results State */
.dev-ts__no-results[hidden] {
  display: none !important;
}

.dev-ts__no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 16px;
}

.dev-ts__no-results-icon {
  font-size: 3rem;
  color: var(--text-secondary);
  opacity: 0.35;
}

.dev-ts__no-results-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.dev-ts__no-results-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  opacity: 0.65;
}

.dev-ts__no-results-reset {
  margin-top: 8px;
  padding: 10px 22px;
  background: var(--accent);
  color: #06080f;
  border: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-ts__no-results-reset:hover {
  background: var(--accent-hover, #5be94a);
  transform: translateY(-1px);
}

/* Quick Help Banner */
.dev-ts__help-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 32px 40px;
  overflow: hidden;
  flex-wrap: wrap;
}

.dev-ts__help-banner__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(124, 255, 107, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.dev-ts__help-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.dev-ts__help-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.dev-ts__help-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-ts__help-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.dev-ts__help-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.dev-ts__help-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.dev-ts__help-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-ts__help-btn--primary {
  background: var(--accent);
  color: #06080f;
}

.dev-ts__help-btn--primary:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 4px 18px rgba(124, 255, 107, 0.3);
  transform: translateY(-1px);
}

.dev-ts__help-btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--border-color);
}

.dev-ts__help-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1100px) {
  .dev-ts {
    padding: 65px 0 55px;
  }

  .dev-ts__inner {
    padding: 0 30px;
  }

  .dev-ts__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .dev-ts__help-banner {
    padding: 28px 30px;
  }
}

@media (max-width: 768px) {
  .dev-ts {
    padding: 52px 0 44px;
  }

  .dev-ts__inner {
    padding: 0 20px;
  }

  .dev-ts__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .dev-ts__title {
    font-size: 1.8rem;
  }

  .dev-ts__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dev-ts__help-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
    gap: 20px;
  }

  .dev-ts__help-actions {
    width: 100%;
    flex-direction: column;
  }

  .dev-ts__help-btn {
    width: 100%;
    justify-content: center;
  }
}

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

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

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

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

[data-theme="light"] .dev-ts__search-input {
  color: #0f172a;
}

[data-theme="light"] .dev-ts__search-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .dev-ts__suggestions {
  background: #fff;
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .dev-ts__suggestion-item {
  color: #475569;
}

[data-theme="light"] .dev-ts__suggestion-item:hover {
  background: rgba(124, 255, 107, 0.06);
  color: #0f172a;
}

[data-theme="light"] .dev-ts-chip {
  border-color: rgba(15, 23, 42, 0.1);
  color: #475569;
}

[data-theme="light"] .dev-ts-chip:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .dev-ts-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-ts-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(124, 255, 107, 0.08);
}

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

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

[data-theme="light"] .dev-ts-card__badge {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .dev-ts__help-banner {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

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

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

[data-theme="light"] .dev-ts__help-btn--secondary {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .dev-ts__help-btn--secondary:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   DEVICE COMPARISON SECTION
   ============================================================ */
.dev-compare {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary, #080b12);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 75px;
}

.dev-compare__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header */
.dev-compare__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 32px;
}

.dev-compare__header-left {
  flex: 1;
}

.dev-compare__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-compare__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 720px;
}

.dev-compare__header-right {
  flex-shrink: 0;
}

.dev-compare__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-compare__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* ── 4-Card Row ── */
.dev-compare__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
  align-items: start;
}

/* Comparison Card */
.dev-cmp-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
}

.dev-cmp-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 255, 107, 0.04);
}

/* Featured card — highlighted ring */
.dev-cmp-card--featured {
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 0 0 1px rgba(124, 255, 107, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dev-cmp-card--featured:hover {
  border-color: rgba(124, 255, 107, 0.4);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 255, 107, 0.1);
}

/* "Best Choice" top badge */
.dev-cmp-card__badge-top {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--accent);
  color: #06080f;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 3;
}

/* Glow blob per card */
.dev-cmp-card__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: -100px;
  right: -100px;
  filter: blur(55px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.dev-cmp-card:hover .dev-cmp-card__glow {
  opacity: 0.18;
}

.dev-cmp-card--featured .dev-cmp-card__glow {
  opacity: 0.12;
}

.dev-cmp-card__glow--green {
  background: radial-gradient(circle, #7cff6b 0%, transparent 70%);
}

.dev-cmp-card__glow--orange {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.dev-cmp-card__glow--silver {
  background: radial-gradient(circle, #cbd5e1 0%, transparent 70%);
}

.dev-cmp-card__glow--purple {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

/* Icon wrap */
.dev-cmp-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-cmp-card:hover .dev-cmp-card__icon-wrap {
  transform: scale(1.1) rotate(-4deg);
}

.dev-cmp-card__icon-wrap--green {
  background: rgba(124, 255, 107, 0.12);
  color: #7cff6b;
}

.dev-cmp-card__icon-wrap--orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.dev-cmp-card__icon-wrap--silver {
  background: rgba(203, 213, 225, 0.10);
  color: #cbd5e1;
}

.dev-cmp-card__icon-wrap--purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

/* Device name */
.dev-cmp-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

/* Overall score row */
.dev-cmp-card__overall {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.dev-cmp-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
  font-size: 0.9rem;
}

.dev-cmp-card__score {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.dev-cmp-card__score span {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Rating bars */
.dev-cmp-card__ratings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.dev-cmp-card__ratings li {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  align-items: center;
  gap: 8px;
}

.dev-cmp-card__rating-label {
  font-size: 0.73rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dev-cmp-card__rating-bar-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  height: 5px;
  overflow: hidden;
}

.dev-cmp-card__rating-bar {
  display: block;
  height: 100%;
  width: 0;
  /* animated in via JS */
  background: linear-gradient(90deg, var(--accent) 0%, #5be94a 100%);
  border-radius: 100px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-cmp-card__rating-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-align: right;
}

/* Tags row */
.dev-cmp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.dev-cmp-card__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.dev-cmp-card__tag--green {
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.25);
  color: #7cff6b;
}

.dev-cmp-card__tag--blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.dev-cmp-card__tag--orange {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
  color: #f97316;
}

/* Card button */
.dev-cmp-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: #06080f;
  background: var(--accent);
  position: relative;
  z-index: 2;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-cmp-card__btn:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 4px 18px rgba(124, 255, 107, 0.35);
  transform: translateY(-1px);
}


/* ── Feature Comparison Table ── */
.dev-compare__table-wrap {
  margin-bottom: 36px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

.dev-compare__table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-color);
}

.dev-compare__table-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.dev-compare__table-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.65;
}

.dev-compare__table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.dev-compare__table-scroll::-webkit-scrollbar { height: 4px; }
.dev-compare__table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 100px; }

.dev-compare__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.dev-compare__table thead th {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.dev-compare__table thead th:first-child { text-align: left; }

.dev-compare__th-device {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.dev-compare__th-device--green  { color: #7cff6b; }
.dev-compare__th-device--orange { color: #f97316; }
.dev-compare__th-device--silver { color: #cbd5e1; }
.dev-compare__th-device--purple { color: #c084fc; }

.dev-compare__table tbody td {
  padding: 15px 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dev-compare__table tbody tr:last-child td { border-bottom: none; }

.dev-compare__feature-cell {
  text-align: left !important;
  font-weight: 600;
  color: var(--text-primary) !important;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 2;
}

.dev-compare__row--alt { background: rgba(255,255,255,0.015); }
.dev-compare__row--alt .dev-compare__feature-cell { background: rgba(14,18,28,0.97); }

.dev-compare__check { color: #7cff6b; font-size: 0.82rem; }
.dev-compare__warn  { color: #f97316; font-size: 0.82rem; }

/* Pills inside table cells */
.dev-compare__pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dev-compare__pill--green  { background: rgba(124,255,107,0.12); color: #7cff6b;  border: 1px solid rgba(124,255,107,0.2); }
.dev-compare__pill--yellow { background: rgba(250,204, 21,0.12); color: #fbbf24;  border: 1px solid rgba(250,204,21,0.2); }
.dev-compare__pill--orange { background: rgba(249,115, 22,0.12); color: #f97316;  border: 1px solid rgba(249,115,22,0.2); }
.dev-compare__pill--blue   { background: rgba( 59,130,246,0.12); color: #60a5fa;  border: 1px solid rgba(59,130,246,0.2); }
.dev-compare__pill--gray   { background: rgba(255,255,255,0.06); color: #94a3b8;  border: 1px solid rgba(255,255,255,0.1); }





/* ── Recommendation Banner ── */
.dev-compare__rec-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 34px 42px;
  overflow: hidden;
  flex-wrap: wrap;
}

.dev-compare__rec-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(124, 255, 107, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.dev-compare__rec-content {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.dev-compare__rec-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.22);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
}

.dev-compare__rec-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dev-compare__rec-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.dev-compare__rec-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dev-compare__rec-desc strong {
  color: #fff;
  font-weight: 700;
}

.dev-compare__rec-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.dev-compare__rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-compare__rec-btn--primary {
  background: var(--accent);
  color: #06080f;
}

.dev-compare__rec-btn--primary:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 4px 18px rgba(124, 255, 107, 0.3);
  transform: translateY(-1px);
}

.dev-compare__rec-btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--border-color);
}

.dev-compare__rec-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .dev-compare {
    padding: 65px 0 55px;
  }

  .dev-compare__inner {
    padding: 0 30px;
  }

  .dev-compare__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .dev-compare__rec-banner {
    padding: 28px 30px;
  }
}

@media (max-width: 768px) {
  .dev-compare {
    padding: 52px 0 44px;
  }

  .dev-compare__inner {
    padding: 0 20px;
  }

  .dev-compare__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .dev-compare__title {
    font-size: 1.8rem;
  }

  .dev-compare__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dev-compare__rec-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
    gap: 20px;
  }

  .dev-compare__rec-actions {
    width: 100%;
    flex-direction: column;
  }

  .dev-compare__rec-btn {
    width: 100%;
    justify-content: center;
  }

  .dev-compare__table-hint {
    display: flex;
  }
}

@media (min-width: 769px) {
  .dev-compare__table-hint {
    display: none;
  }
}

/* ── Light Theme ── */
[data-theme="light"] .dev-compare {
  background: #f8fafc;
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

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

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

[data-theme="light"] .dev-cmp-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-cmp-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .dev-cmp-card--featured {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 0 0 1px rgba(124, 255, 107, 0.12), 0 8px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-cmp-card__name {
  color: #0f172a;
}

[data-theme="light"] .dev-cmp-card__rating-bar-wrap {
  background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-cmp-card__rating-label {
  color: #64748b;
}

[data-theme="light"] .dev-cmp-card__tag {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

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

[data-theme="light"] .dev-compare__table-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

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

[data-theme="light"] .dev-compare__table thead th {
  background: rgba(15, 23, 42, 0.02);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-compare__table tbody td {
  color: #475569;
  border-bottom-color: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-compare__feature-cell {
  color: #0f172a !important;
  background: #fff;
}

[data-theme="light"] .dev-compare__row--alt {
  background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .dev-compare__row--alt .dev-compare__feature-cell {
  background: rgba(248, 250, 252, 0.98);
}

[data-theme="light"] .dev-compare__rec-banner {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

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

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

[data-theme="light"] .dev-compare__rec-desc strong {
  color: #0f172a;
}

[data-theme="light"] .dev-compare__rec-btn--secondary {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .dev-compare__rec-btn--secondary:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.dev-faq {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 85px 0 75px;
}

.dev-faq__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Eyebrow + Header */
.dev-faq__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 32px;
}

.dev-faq__header-left {
  flex: 1;
}

.dev-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--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: 16px;
}

.dev-faq__eyebrow i {
  font-size: 0.9rem;
}

.dev-faq__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dev-faq__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 12px;
  max-width: 640px;
}

.dev-faq__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.dev-faq__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-faq__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* 2-Column Accordion Grid */
.dev-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

/* Accordion Item */
.dev-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

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

.dev-faq-item.is-open {
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(124, 255, 107, 0.04);
}

/* Trigger / Question Button */
.dev-faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}

.dev-faq-item__trigger:hover {
  background: rgba(255, 255, 255, 0.025);
}

.dev-faq-item.is-open .dev-faq-item__trigger {
  background: rgba(124, 255, 107, 0.03);
  border-bottom: 1px solid rgba(124, 255, 107, 0.08);
}

/* Number badge */
.dev-faq-item__q-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.18);
  padding: 2px 8px;
  border-radius: 100px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: background 0.2s ease;
}

.dev-faq-item.is-open .dev-faq-item__q-num {
  background: rgba(124, 255, 107, 0.18);
}

/* Question text */
.dev-faq-item__q-text {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

/* +/- Icon */
.dev-faq-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-faq-item.is-open .dev-faq-item__icon {
  background: rgba(124, 255, 107, 0.12);
  border-color: rgba(124, 255, 107, 0.3);
  color: var(--accent);
  transform: rotate(45deg);
}

/* Answer Body — CSS max-height animation */
.dev-faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  /* visible state handled via JS toggling hidden attr + grid-template-rows */
}

.dev-faq-item__body:not([hidden]) {
  grid-template-rows: 1fr;
}

/* Inner wrapper needed for grid-template-rows trick */
.dev-faq-item__body>* {
  overflow: hidden;
}

.dev-faq-item__body-inner {
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dev-faq-item__answer {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.dev-faq-item__answer strong {
  color: #fff;
  font-weight: 700;
}

.dev-faq-item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.dev-faq-item__link i {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}

.dev-faq-item__link:hover {
  color: var(--accent-hover);
  gap: 9px;
}

.dev-faq-item__link:hover i {
  transform: translateX(3px);
}

/* Need More Help Banner */
.dev-faq__help-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 32px 40px;
  overflow: hidden;
  flex-wrap: wrap;
}

.dev-faq__help-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(124, 255, 107, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.dev-faq__help-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.dev-faq__help-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.dev-faq__help-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-faq__help-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.dev-faq__help-desc {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.dev-faq__help-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.dev-faq__help-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-faq__help-btn--primary {
  background: var(--accent);
  color: #06080f;
}

.dev-faq__help-btn--primary:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 4px 18px rgba(124, 255, 107, 0.3);
  transform: translateY(-1px);
}

.dev-faq__help-btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--border-color);
}

.dev-faq__help-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1100px) {
  .dev-faq {
    padding: 65px 0 55px;
  }

  .dev-faq__inner {
    padding: 0 30px;
  }

  .dev-faq__help-banner {
    padding: 28px 30px;
  }
}

@media (max-width: 900px) {
  .dev-faq__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dev-faq {
    padding: 52px 0 44px;
  }

  .dev-faq__inner {
    padding: 0 20px;
  }

  .dev-faq__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 32px;
  }

  .dev-faq__title {
    font-size: 1.8rem;
  }

  .dev-faq__help-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
    gap: 20px;
  }

  .dev-faq__help-actions {
    width: 100%;
    flex-direction: column;
  }

  .dev-faq__help-btn {
    width: 100%;
    justify-content: center;
  }
}

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

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

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

[data-theme="light"] .dev-faq-item {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-faq-item:hover {
  border-color: rgba(124, 255, 107, 0.2);
}

[data-theme="light"] .dev-faq-item.is-open {
  border-color: rgba(124, 255, 107, 0.28);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-faq-item__trigger:hover {
  background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .dev-faq-item.is-open .dev-faq-item__trigger {
  background: rgba(124, 255, 107, 0.03);
  border-bottom-color: rgba(124, 255, 107, 0.1);
}

[data-theme="light"] .dev-faq-item__q-text {
  color: #0f172a;
}

[data-theme="light"] .dev-faq-item__icon {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

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

[data-theme="light"] .dev-faq-item__answer strong {
  color: #0f172a;
}

[data-theme="light"] .dev-faq__help-banner {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

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

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

[data-theme="light"] .dev-faq__help-btn--secondary {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .dev-faq__help-btn--secondary:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.2);
}

/* ============================================================
   NEWSLETTER & COMMUNITY CTA SECTION
   ============================================================ */
.dev-nl {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #040610 0%, #07091a 40%, #060c18 70%, #050a14 100%);
  padding: 100px 0 90px;
  z-index: 10;
}

/* Canvas for particles */
.dev-nl__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Subtle dot grid */
.dev-nl__grid-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(124, 255, 107, 0.055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.9) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.9) 0%, transparent 72%);
}

/* Ambient glowing blobs */
.dev-nl__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.dev-nl__blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.09) 0%, transparent 70%);
  top: -200px;
  left: -150px;
  animation: nlBlobDrift 14s ease-in-out infinite alternate;
}

.dev-nl__blob--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 70%);
  bottom: -150px;
  right: -120px;
  animation: nlBlobDrift 18s ease-in-out infinite alternate-reverse;
}

@keyframes nlBlobDrift {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(40px, 30px) scale(1.06);
  }
}

/* Inner container */
.dev-nl__inner {
  position: relative;
  z-index: 10;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

/* Section Header */
.dev-nl__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dev-nl__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(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 6px 16px;
  border-radius: 100px;
}

.dev-nl__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 700px;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dev-nl__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 620px;
}

/* Newsletter Card */
.dev-nl__card {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(124, 255, 107, 0.16);
  border-radius: 24px;
  padding: 36px 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(124, 255, 107, 0.06), 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.4s ease, border-color 0.3s ease;
}

.dev-nl__card:hover {
  border-color: rgba(124, 255, 107, 0.28);
  box-shadow: 0 0 0 1px rgba(124, 255, 107, 0.1), 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(124, 255, 107, 0.05);
}

.dev-nl__card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(124, 255, 107, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Card header row */
.dev-nl__card-content {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.dev-nl__card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.dev-nl__card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dev-nl__card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.dev-nl__card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Subscribe Form */
.dev-nl__form {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.dev-nl__input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.dev-nl__input-icon {
  position: absolute;
  left: 16px;
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color 0.2s ease;
}

.dev-nl__input-wrap:focus-within .dev-nl__input-icon {
  color: var(--accent);
}

.dev-nl__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 15px 18px 15px 46px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: #fff;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.dev-nl__input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.dev-nl__input:focus {
  border-color: rgba(124, 255, 107, 0.4);
  background: rgba(124, 255, 107, 0.04);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.08), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.dev-nl__input.input-error {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.dev-nl__submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #06080f;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.dev-nl__submit:hover {
  background: var(--accent-hover, #5be94a);
  box-shadow: 0 6px 24px rgba(124, 255, 107, 0.4), 0 0 0 3px rgba(124, 255, 107, 0.1);
  transform: translateY(-1px);
}

.dev-nl__submit:active {
  transform: translateY(0);
}

.dev-nl__submit.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Privacy note */
.dev-nl__note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.dev-nl__note i {
  font-size: 0.9rem;
  color: var(--accent);
  opacity: 0.8;
}

/* Success state */
.dev-nl__success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 14px;
  position: relative;
  z-index: 1;
}

.dev-nl__success-icon {
  font-size: 1.6rem;
  color: var(--accent);
  flex-shrink: 0;
}

.dev-nl__success-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.dev-nl__success-text strong {
  color: #fff;
}

/* Trust Stats Row */
.dev-nl__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
}

.dev-nl__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 140px;
  padding: 0 16px;
}

.dev-nl__stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.dev-nl__stat-num--text {
  color: #fff;
}

.dev-nl__stat-label {
  font-size: 0.73rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.dev-nl__stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

/* Community Cards Grid */
.dev-nl__community-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

/* Community Card */
.dev-nl-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 26px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.4s ease;
}

.dev-nl-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* Per-card glow */
.dev-nl-card__glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  top: -80px;
  right: -80px;
  filter: blur(45px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.dev-nl-card:hover .dev-nl-card__glow {
  opacity: 0.2;
}

.dev-nl-card__glow--red {
  background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.dev-nl-card__glow--indigo {
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
}

.dev-nl-card__glow--blue {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.dev-nl-card__glow--green {
  background: radial-gradient(circle, #7cff6b 0%, transparent 70%);
}

/* Icon */
.dev-nl-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-nl-card:hover .dev-nl-card__icon {
  transform: scale(1.1) rotate(-4deg);
}

.dev-nl-card__icon--red {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.dev-nl-card__icon--indigo {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}

.dev-nl-card__icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.dev-nl-card__icon--green {
  background: rgba(124, 255, 107, 0.12);
  color: #7cff6b;
}

/* Hover border per colour */
.dev-nl-card:has(.dev-nl-card__glow--red):hover {
  border-color: rgba(239, 68, 68, 0.22);
}

.dev-nl-card:has(.dev-nl-card__glow--indigo):hover {
  border-color: rgba(99, 102, 241, 0.22);
}

.dev-nl-card:has(.dev-nl-card__glow--blue):hover {
  border-color: rgba(59, 130, 246, 0.22);
}

.dev-nl-card:has(.dev-nl-card__glow--green):hover {
  border-color: rgba(124, 255, 107, 0.22);
}

.dev-nl-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.dev-nl-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.dev-nl-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Platform buttons */
.dev-nl-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 11px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-nl-card__btn--red {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.dev-nl-card__btn--indigo {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.dev-nl-card__btn--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.dev-nl-card__btn--green {
  background: rgba(124, 255, 107, 0.12);
  color: #7cff6b;
  border: 1px solid rgba(124, 255, 107, 0.2);
}

.dev-nl-card__btn--red:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.dev-nl-card__btn--indigo:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

.dev-nl-card__btn--blue:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.dev-nl-card__btn--green:hover {
  background: rgba(124, 255, 107, 0.22);
  border-color: rgba(124, 255, 107, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 255, 107, 0.3);
}

/* Responsive */
@media (max-width: 1100px) {
  .dev-nl {
    padding: 80px 0 70px;
  }

  .dev-nl__inner {
    padding: 0 30px;
    max-width: 860px;
    gap: 44px;
  }

  .dev-nl__community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dev-nl {
    padding: 60px 0 52px;
  }

  .dev-nl__inner {
    padding: 0 20px;
    gap: 36px;
  }

  .dev-nl__card {
    padding: 24px 22px 20px;
  }

  .dev-nl__form {
    flex-direction: column;
  }

  .dev-nl__submit {
    width: 100%;
    justify-content: center;
  }

  .dev-nl__stats {
    gap: 0;
  }

  .dev-nl__stat {
    min-width: 100px;
    padding: 0 10px;
  }

  .dev-nl__stat-divider {
    height: 30px;
  }

  .dev-nl__community-grid {
    grid-template-columns: 1fr;
  }

  .dev-nl__stat-num {
    font-size: 1.3rem;
  }

  .dev-nl__card-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .dev-nl__stats {
    flex-wrap: wrap;
    row-gap: 24px;
  }

  .dev-nl__stat-divider {
    display: none;
  }

  .dev-nl__stat {
    min-width: 120px;
  }
}

/* Light Theme */
[data-theme="light"] .dev-nl {
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 40%, #f7fff4 70%, #f8fafc 100%);
}

[data-theme="light"] .dev-nl__grid-bg {
  background-image: radial-gradient(circle, rgba(124, 255, 107, 0.12) 1px, transparent 1px);
}

[data-theme="light"] .dev-nl__title {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

[data-theme="light"] .dev-nl__card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(124, 255, 107, 0.1);
}

[data-theme="light"] .dev-nl__card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(124, 255, 107, 0.15);
}

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

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

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

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

[data-theme="light"] .dev-nl__input:focus {
  background: rgba(124, 255, 107, 0.03);
  border-color: rgba(124, 255, 107, 0.4);
}

[data-theme="light"] .dev-nl__note {
  color: #64748b;
}

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

[data-theme="light"] .dev-nl__stat-num--text {
  color: #0f172a;
}

[data-theme="light"] .dev-nl__stat-divider {
  background: linear-gradient(to bottom, transparent 0%, rgba(15, 23, 42, 0.15) 50%, transparent 100%);
}

[data-theme="light"] .dev-nl-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-nl-card__name {
  color: #0f172a;
}

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

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