/* --------------------------------------------------------
   PlayerSDK - Premium Editorial Style System
-------------------------------------------------------- */

/* ── Remove default browser blue focus outline ── */
*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none;
}

/* Keep a subtle custom ring only for keyboard users */
*:focus-visible:not(input):not(textarea):not(select) {
  outline: 2px solid rgba(37, 99, 235, 0.25) !important;
  outline-offset: 2px;
}

:root {
  /* Common System Values */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Fira Code', monospace;
  --header-height-large: 90px;
  --header-height-shrunk: 70px;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-primary: #06080f;
  --bg-secondary: #0c0f18;
  --bg-card: rgba(15, 23, 42, 0.45);
  --border-color: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(124, 255, 107, 0.3);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;

  --accent: #7cff6b;
  /* Neon Mint/Green */
  --accent-hover: #5eff4a;
  --accent-rgb: 124, 255, 107;

  --glass-bg: rgba(6, 8, 15, 0.7);
  --card-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --logo-color: #ffffff;
  --watermark-color: rgba(255, 255, 255, 0.015);
  --scroll-thumb: rgba(255, 255, 255, 0.1);
  --tv-stand-glow: rgba(124, 255, 107, 0.15);

  /* Additional decorative gradients */
  --hero-glow-1: rgba(124, 255, 107, 0.04);
  --hero-glow-2: rgba(59, 130, 246, 0.04);

  /* Universal Two-Shade Heading Tokens */
  --heading-shade-1: #ffffff;
  --heading-shade-2-gradient: linear-gradient(135deg, #7cff6b 0%, #38bdf8 100%);
  --header-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.05);
  --section-card-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --glass-bg: rgba(255, 255, 255, 0.85);

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.15);
  --border-color: rgba(15, 23, 42, 0.12);
  --border-hover: rgba(37, 99, 235, 0.3);

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --accent-hover: #1d4ed8;
  --accent-rgb: 37, 99, 235;

  --card-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  --card-shadow-hover: 0 12px 32px rgba(37, 99, 235, 0.1);
  --hero-glow-1: rgba(37, 99, 235, 0.03);
  --hero-glow-2: rgba(59, 130, 246, 0.03);

  --logo-color: #0f172a;
  --watermark-color: rgba(15, 23, 42, 0.02);
  --scroll-thumb: rgba(0, 0, 0, 0.15);
  --tv-stand-glow: rgba(37, 99, 235, 0.08);

  /* Universal Two-Shade Heading Tokens */
  --heading-shade-1: #0f172a;
  --heading-shade-2-gradient: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --header-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --section-card-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ================================================================
   TWO-SHADE HEADING & ELEVATED SHADOW HEADER SYSTEM
   ================================================================ */

/* 1. Header with elevated floating shadow look */
.main-header {
  box-shadow: var(--header-shadow) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* 2. Elevated Shadow Cards & Section Headers */
.section-header,
.sec-header,
.page-header,
.news-stat-card,
.tut-card,
.dev-card,
.review-card,
.download-card,
.featured-news-card,
.stat-card,
.p91-card,
.cms-panel-box,
.news-quick-stats .stat-item,
.category-card,
.comm-card,
.tut-hero-card {
  box-shadow: var(--section-card-shadow) !important;
  border-radius: 20px;
}

/* 3. Universal Two-Shade Headings */
h1, h2,
.news-hero-title,
.tutorials-hero-title,
.devices-hero-title,
.reviews-hero-title,
.downloads-hero-title,
.contact-hero-title,
.section-title,
.sec-title,
.page-title,
.hero-title,
.cta-heading {
  color: var(--heading-shade-1);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The 2nd shade highlight class and nested spans */
h1 span,
h2 span,
.news-hero-title span,
.tutorials-hero-title span,
.devices-hero-title span,
.reviews-hero-title span,
.downloads-hero-title span,
.contact-hero-title span,
.section-title span,
.sec-title span,
.page-title span,
.hero-title span,
.cta-heading span,
.news-title-gradient,
.title-gradient-2shade,
.title-highlight,
.gradient-text,
.highlight-text {
  background: var(--heading-shade-2-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-normal), opacity var(--transition-normal);
}

input,
button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* --------------------------------------------------------
   Typography & Typography Utilities
-------------------------------------------------------- */

.text-gradient {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0.22em;
}

/* --------------------------------------------------------
   Buttons & Links
-------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition-smooth), background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.btn-large {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background-color: var(--accent);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.2);
}

.btn-accent,
.btn-accent * {
  background-color: var(--accent);
  color: #06080f !important;
}

.btn-accent:hover,
.btn-accent:hover *,
.btn-accent:focus,
.btn-accent:focus * {
  background-color: var(--accent-hover, #5eff4a) !important;
  color: #06080f !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.25);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

[data-theme="light"] .btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus {
  color: #ffffff;
}

[data-theme="light"] .btn-accent,
[data-theme="light"] .btn-accent * {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-accent:hover,
[data-theme="light"] .btn-accent:focus,
[data-theme="light"] .btn-accent:hover *,
[data-theme="light"] .btn-accent:focus * {
  background-color: var(--accent-hover, #6d28d9) !important;
  color: #ffffff !important;
}

.btn:active {
  transform: translateY(0);
}

/* --------------------------------------------------------
   Header Component
-------------------------------------------------------- */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height-large);
  z-index: 1000;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(11, 15, 25, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: height var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

[data-theme="light"] .main-header {
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.header-container,
.header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo,
.brand-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--logo-color, #ffffff);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

[data-theme="light"] .logo,
[data-theme="light"] .brand-logo {
  color: #0f172a;
}

.logo-accent {
  color: var(--accent, #00d289);
}

.logo-light {
  font-weight: 300;
}

/* Desktop Nav Menu */
.desktop-nav,
.main-nav {
  height: 100%;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link i {
  font-size: 0.8rem;
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

[data-theme="light"] .nav-link {
  color: #334155;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #0284c7;
}

/* Hover Underline effect */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-smooth);
}

.nav-link.active::after,
.nav-item:hover>.nav-link::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-item:hover>.nav-link i,
.nav-item.is-open>.nav-link i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  width: 220px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dropdown-menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  padding-left: 16px;
}

[data-theme="light"] .dropdown-menu li a:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* JS-controlled via .is-open — keeps menu closed on DOM errors/repaints */
.nav-item.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Mega Menu Style — matches Devices dropdown aesthetic */
.nav-item.has-mega {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateY(10px);
  width: 800px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 24px;
  z-index: 1050;
  overflow: hidden;
}

/* JS-controlled open state via .is-open class */
.nav-item.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 0;
  align-items: start;
}

/* Lock inner content to always-visible so GSAP entrance animation can't bleed opacity */
.mega-col,
.mega-col h3,
.mega-col ul li a,
.mega-featured,
.mega-featured .featured-badge,
.mega-featured h4,
.mega-featured p,
.mega-featured .featured-link {
  opacity: 1 !important;
  visibility: visible !important;
}

.mega-col {
  padding-right: 20px;
}

/* Middle column — dividers on both sides */
.mega-col+.mega-col {
  padding: 0 20px;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.mega-col h3 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.mega-col ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-col ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.mega-col ul li a i {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.mega-col ul li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  padding-left: 14px;
}

[data-theme="light"] .mega-col ul li a:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mega-featured {
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 74, 222, 128), 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(var(--accent-rgb, 74, 222, 128), 0.2);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  margin-left: 20px;
}

[data-theme="light"] .mega-featured {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.03) 100%);
}

.mega-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--accent);
  border-radius: 3px 0 0 3px;
}

.mega-featured .featured-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

.mega-featured h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
}

.mega-featured p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

.mega-featured .featured-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mega-featured .featured-link:hover i {
  transform: translateX(4px);
}

/* Header Controls & Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1005;
  pointer-events: auto !important;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-normal);
  position: relative;
  z-index: 1006;
  pointer-events: auto !important;
  background: transparent;
}

.action-btn * {
  pointer-events: none !important;
}

.action-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .action-btn:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.action-btn i {
  font-size: 1.2rem;
}

/* Sun/Moon Toggle Visibility */
[data-theme="dark"] .theme-icon-light {
  display: none;
}

[data-theme="light"] .theme-icon-dark {
  display: none;
}

/* ── Premium Pill Theme Toggle ── */
#themeToggle.action-btn,
#themeToggleSwitch,
.theme-toggle-switch,
.theme-toggle {
  width: auto;
  min-width: 58px;
  height: 32px;
  border-radius: 100px;
  padding: 0 6px;
  gap: 0;
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1006;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] #themeToggle.action-btn,
[data-theme="dark"] #themeToggleSwitch,
[data-theme="dark"] .theme-toggle-switch,
[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] #themeToggle.action-btn,
[data-theme="light"] #themeToggleSwitch,
[data-theme="light"] .theme-toggle-switch,
[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

#themeToggle.action-btn:hover,
#themeToggleSwitch:hover,
.theme-toggle-switch:hover,
.theme-toggle:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  background: rgba(var(--accent-rgb), 0.06);
}

/* The sliding pill indicator */
#themeToggle.action-btn::before,
#themeToggleSwitch::before,
.theme-toggle-switch::before,
.theme-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 0;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

[data-theme="dark"] #themeToggle.action-btn::before,
[data-theme="dark"] #themeToggleSwitch::before,
[data-theme="dark"] .theme-toggle-switch::before,
[data-theme="dark"] .theme-toggle::before {
  left: calc(100% - 27px);
  background: #7cff6b;
  box-shadow: 0 2px 12px rgba(124, 255, 107, 0.5);
}

[data-theme="light"] #themeToggle.action-btn::before,
[data-theme="light"] #themeToggleSwitch::before,
[data-theme="light"] .theme-toggle-switch::before,
[data-theme="light"] .theme-toggle::before {
  left: 3px;
  background: #2563eb;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.45);
}

/* Icons inside the pill */
#themeToggle.action-btn i,
#themeToggleSwitch i,
.theme-toggle-switch i,
.theme-toggle i {
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

/* Sun icon (left side) */
#themeToggle.action-btn .theme-icon-light,
#themeToggleSwitch .theme-icon-light,
.theme-toggle-switch .theme-icon-light,
.theme-toggle .theme-icon-light,
#themeToggle.action-btn .ph-sun,
#themeToggleSwitch .ph-sun,
.theme-toggle-switch .ph-sun,
.theme-toggle .ph-sun {
  display: flex !important;
  order: 0;
}

/* Moon icon (right side) */
#themeToggle.action-btn .theme-icon-dark,
#themeToggleSwitch .theme-icon-dark,
.theme-toggle-switch .theme-icon-dark,
.theme-toggle .theme-icon-dark,
#themeToggle.action-btn .ph-moon,
#themeToggleSwitch .ph-moon,
.theme-toggle-switch .ph-moon,
.theme-toggle .ph-moon {
  display: flex !important;
  order: 1;
}

/* Active icon (under the pill) is white; inactive icon has muted color */
[data-theme="light"] #themeToggle.action-btn .theme-icon-light,
[data-theme="light"] #themeToggleSwitch .theme-icon-light,
[data-theme="light"] .theme-toggle-switch .theme-icon-light,
[data-theme="light"] .theme-toggle .theme-icon-light,
[data-theme="light"] #themeToggle.action-btn .ph-sun,
[data-theme="light"] #themeToggleSwitch .ph-sun,
[data-theme="light"] .theme-toggle-switch .ph-sun,
[data-theme="light"] .theme-toggle .ph-sun {
  color: #ffffff;
  transform: scale(1.1);
  opacity: 1;
}

[data-theme="light"] #themeToggle.action-btn .theme-icon-dark,
[data-theme="light"] #themeToggleSwitch .theme-icon-dark,
[data-theme="light"] .theme-toggle-switch .theme-icon-dark,
[data-theme="light"] .theme-toggle .theme-icon-dark,
[data-theme="light"] #themeToggle.action-btn .ph-moon,
[data-theme="light"] #themeToggleSwitch .ph-moon,
[data-theme="light"] .theme-toggle-switch .ph-moon,
[data-theme="light"] .theme-toggle .ph-moon {
  color: var(--text-secondary);
  opacity: 0.5;
  transform: scale(0.9);
}

[data-theme="dark"] #themeToggle.action-btn .theme-icon-dark,
[data-theme="dark"] #themeToggleSwitch .theme-icon-dark,
[data-theme="dark"] .theme-toggle-switch .theme-icon-dark,
[data-theme="dark"] .theme-toggle .theme-icon-dark,
[data-theme="dark"] #themeToggle.action-btn .ph-moon,
[data-theme="dark"] #themeToggleSwitch .ph-moon,
[data-theme="dark"] .theme-toggle-switch .ph-moon,
[data-theme="dark"] .theme-toggle .ph-moon {
  color: #050a0e;
  transform: scale(1.1);
  opacity: 1;
}

[data-theme="dark"] #themeToggle.action-btn .theme-icon-light,
[data-theme="dark"] #themeToggleSwitch .theme-icon-light,
[data-theme="dark"] .theme-toggle-switch .theme-icon-light,
[data-theme="dark"] .theme-toggle .theme-icon-light,
[data-theme="dark"] #themeToggle.action-btn .ph-sun,
[data-theme="dark"] #themeToggleSwitch .ph-sun,
[data-theme="dark"] .theme-toggle-switch .ph-sun,
[data-theme="dark"] .theme-toggle .ph-sun {
  color: var(--text-secondary);
  opacity: 0.5;
  transform: scale(0.9);
}

.btn-header {
  font-size: 0.85rem;
  padding: 8px 18px;
}

/* Hamburger Button */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  cursor: pointer;
  z-index: 1100;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  transform-origin: left center;
}

/* Sticky Shrink State style */
.main-header.scrolled {
  height: var(--header-height-shrunk);
  background-color: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .main-header.scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------
   Mobile Navigation Drawer
-------------------------------------------------------- */

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(6, 8, 15, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--transition-smooth), visibility 0.4s var(--transition-smooth);
}

[data-theme="light"] .drawer-overlay {
  background-color: rgba(248, 250, 252, 0.5);
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background-color: var(--bg-secondary);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mobile-drawer.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {

  .mobile-drawer,
  .drawer-overlay {
    display: none !important;
  }
}

.drawer-header {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.drawer-close {
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}

.drawer-close:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
}

[data-theme="light"] .drawer-close:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-link,
.mobile-accordion-btn {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 5px 0;
}

.mobile-accordion-btn i {
  font-size: 1rem;
  transition: transform var(--transition-normal);
}

.mobile-accordion.active .mobile-accordion-btn i {
  transform: rotate(180deg);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-accordion.active .mobile-submenu {
  max-height: 500px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.mobile-submenu li a {
  font-size: 0.95rem;
  color: var(--text-secondary);
  display: block;
  padding: 4px 0;
}

.mobile-submenu li a:hover {
  color: var(--accent);
}

.drawer-footer {
  padding-top: 40px;
}

.btn-full-width {
  width: 100%;
}

/* --------------------------------------------------------
   Hero Section Layout
-------------------------------------------------------- */

.hero-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: var(--header-height-large);
  overflow: hidden;
}

/* Decorative ambient background glows */
.hero-container::before,
.hero-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}

.hero-container::before {
  top: 10%;
  left: -10%;
  background-color: var(--hero-glow-1);
}

.hero-container::after {
  bottom: 10%;
  right: 10%;
  background-color: var(--hero-glow-2);
}

.hero-layout {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 50px;
  position: relative;
  z-index: 1;
}

/* Editorial background text watermark */
.bg-watermark {
  position: absolute;
  left: 65%;
  top: 25%;
  transform: rotate(90deg) translate(-50%, -50%);
  transform-origin: 0 0;
  font-family: var(--font-display);
  font-size: 14vw;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--watermark-color);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

/* Hero Left Column (75%) */
.hero-main-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Premium TV Mockup */
.hero-media-wrapper {
  width: 100%;
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tv-mockup {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background-color: #000;
  border: 4px solid #1e293b;
  border-bottom: none;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.tv-display-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Realistic glare overlay */
.tv-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.0) 50%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 3;
}

.tv-frame-bezel {
  width: 100%;
  height: 10px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 2px solid #334155;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.tv-stand-base {
  width: 160px;
  height: 16px;
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

.tv-stand-base::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 4px;
  background-color: var(--tv-stand-glow);
  filter: blur(6px);
  border-radius: 50%;
}

/* Article Hero Typography & Contents */
.hero-text-content {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.article-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  display: inline-block;
}

.main-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 400;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-meta i {
  color: var(--accent);
}

.meta-divider {
  opacity: 0.3;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* Hero Right Sidebar (25%) */
.hero-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sidebar-sticky-wrapper {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Featured Sidebar Card */
.featured-sidebar-card {
  position: relative;
  border-radius: 20px;
  padding: 30px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: border-color var(--transition-normal), transform var(--transition-smooth);
}

.featured-sidebar-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-5px);
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.featured-sidebar-card .card-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
}

.featured-sidebar-card .card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.featured-sidebar-card .card-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 10px;
  align-self: flex-start;
}

.cta-arrow {
  transition: transform var(--transition-normal);
}

.card-cta:hover {
  color: var(--text-primary);
}

.card-cta:hover .cta-arrow {
  transform: translateX(5px);
}

/* Trust Signals Badges */
.trust-indicators {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.trust-badge i {
  font-size: 1.3rem;
  color: var(--accent);
  margin-top: 2px;
}

.trust-badge h5 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.trust-badge p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------
   Dummy Scroll Section Styling (Verification Page height)
-------------------------------------------------------- */

.dummy-scroll-section {
  background-color: var(--bg-secondary);
  padding: 80px 40px;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.section-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.section-header {
  margin-bottom: 60px;
}

.section-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.resource-card {
  padding: 40px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all var(--transition-normal);
}

.resource-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: var(--card-shadow);
}

.resource-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background-color: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
}

.resource-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.resource-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.resource-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.resource-link i {
  transition: transform var(--transition-normal);
}

.resource-link:hover i {
  transform: translateX(4px);
}


/* ────────────────────────────────────────────────────────
   Search Dropdown Panel  (.sdp)
   Compact command-palette style — drops below nav button
──────────────────────────────────────────────────────── */

/* ── Panel shell ── */
.sdp {
  position: absolute;
  z-index: 4000;
  border-radius: 16px;
  background: var(--bg-card, #111827);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.sdp.sdp-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

[data-theme="light"] .sdp {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15), 0 3px 12px rgba(15, 23, 42, 0.08);
}

/* ── Arrow pointer ── */
.sdp-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  overflow: hidden;
  pointer-events: none;
}

.sdp-arrow::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-card, #111827);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
}

[data-theme="light"] .sdp-arrow::before {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}

/* ── Header: search input row ── */
.sdp-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .sdp-header {
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

.sdp-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sdp-input-row:focus-within {
  border-color: var(--accent, #7cff6b);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .sdp-input-row {
  background: #f4f6f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .sdp-input-row:focus-within {
  border-color: var(--accent, #7cff6b);
  background: #fff;
}

.sdp-search-icon {
  font-size: 1.1rem;
  color: var(--accent, #7cff6b);
  flex-shrink: 0;
  transition: color 0.2s;
}

#sdpInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-primary, #f0f4ff);
  min-width: 0;
}

#sdpInput::placeholder {
  color: var(--text-secondary, #94a3b8);
}

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

.sdp-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.sdp-clear:hover {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.12);
}

.sdp-esc-hint {
  font-size: 0.62rem;
  font-family: var(--font-mono, 'Fira Code', monospace);
  color: var(--text-secondary, #64748b);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

[data-theme="light"] .sdp-esc-hint {
  background: #e9ecf0;
  border-color: #d1d8e0;
  color: #64748b;
}

/* ── Body ── */
.sdp-body {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* ── Section ── */
.sdp-section {
  padding: 4px 8px 6px;
}

.sdp-section-label {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  margin: 6px 0 8px;
  padding: 0 4px;
}

/* ── Quick-browse chips ── */
.sdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.sdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 5px 11px;
  text-decoration: none;
  transition: all 0.18s ease;
}

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

[data-theme="light"] .sdp-chip {
  background: #f1f5f9;
  border-color: #dde3ed;
  color: #475569;
}

[data-theme="light"] .sdp-chip:hover {
  color: #16a34a;
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}

/* ── Result rows ── */
.sdp-results,
.sdp-live-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sdp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.16s, border-color 0.16s, transform 0.15s;
  cursor: pointer;
}

.sdp-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

[data-theme="light"] .sdp-row:hover {
  background: #f0f4fb;
  border-color: #dde3ed;
}

/* Colored icon bubble */
.sdp-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sdp-icon-blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.sdp-icon-orange {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}

.sdp-icon-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

.sdp-icon-teal {
  background: rgba(20, 184, 166, 0.18);
  color: #2dd4bf;
}

.sdp-icon-green {
  background: rgba(124, 255, 107, 0.15);
  color: var(--accent, #7cff6b);
}

.sdp-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sdp-row-title {
  font-family: var(--font-display, sans-serif);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary, #f0f4ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .sdp-row-title {
  color: #1e293b;
}

.sdp-row-meta {
  font-size: 0.71rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}

.sdp-row-arr {
  font-size: 0.8rem;
  color: var(--text-secondary, #475569);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.sdp-row:hover .sdp-row-arr {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* ── Empty state ── */
.sdp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
  gap: 8px;
}

.sdp-empty i {
  font-size: 2rem;
  color: var(--text-secondary);
  opacity: 0.4;
}

.sdp-empty p {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sdp-empty span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ── Live results section ── */
.sdp-live-results {
  padding: 4px 8px 6px;
}

/* ── Footer ── */
.sdp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

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

.sdp-footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent, #7cff6b);
  text-decoration: none;
  transition: opacity 0.15s;
}

.sdp-footer-link:hover {
  opacity: 0.8;
}

[data-theme="light"] .sdp-footer-link {
  color: #16a34a;
}

.sdp-kbd-hint {
  font-size: 0.65rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 3px;
}

.sdp-kbd-hint kbd {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary);
}

[data-theme="light"] .sdp-kbd-hint kbd {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* ── Active state for search toggle button ── */
#searchToggle.active {
  color: var(--accent, #7cff6b);
  background: rgba(124, 255, 107, 0.12);
}

/* ── Keep old .search-overlay CSS for any other pages that may reference it ── */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 8, 15, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.search-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .sdp {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
  }

  .sdp-kbd-hint {
    display: none;
  }
}

/* ── Preserve any other search subcomponents still in use ── */
.search-suggestion-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-suggestion-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.12);
}




/* ════════════════════════════════════════════════════════
   Search Command-Palette Modal  (.sdp-backdrop / .sdp-modal)
   Centered modal — position:fixed, works on any scroll depth
════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.sdp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6, 8, 15, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.sdp-backdrop.sdp-visible {
  opacity: 1;
  visibility: visible;
}

[data-theme="light"] .sdp-backdrop {
  background: rgba(248, 250, 252, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Modal card ── */
.sdp-modal {
  width: 100%;
  max-width: 600px;
  margin: 0 16px;
  border-radius: 20px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  transform: translateY(-20px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
  opacity: 0;
}

.sdp-backdrop.sdp-visible .sdp-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

[data-theme="light"] .sdp-modal {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.10);
}

/* ── Modal header ── */
.sdp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .sdp-modal-header {
  border-bottom-color: #f1f5f9;
}

.sdp-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
}

.sdp-modal-title i {
  color: var(--accent, #7cff6b);
  font-size: 1rem;
}

[data-theme="light"] .sdp-modal-title i {
  color: #16a34a;
}

.sdp-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #64748b);
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}

.sdp-modal-close:hover {
  color: var(--accent, #7cff6b);
  border-color: rgba(124, 255, 107, 0.4);
  background: rgba(124, 255, 107, 0.10);
}

[data-theme="light"] .sdp-modal-close {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

[data-theme="light"] .sdp-modal-close:hover {
  color: #16a34a;
  border-color: #16a34a;
  background: #f0fdf4;
}

/* ── Search input ── */
.sdp-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 2px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, background 0.2s;
}

.sdp-input-wrap:focus-within {
  border-bottom-color: var(--accent, #7cff6b);
  background: rgba(124, 255, 107, 0.025);
}

[data-theme="light"] .sdp-input-wrap {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .sdp-input-wrap:focus-within {
  border-bottom-color: #16a34a;
  background: #f0fdf4;
}

.sdp-inp-icon {
  font-size: 1.3rem;
  color: var(--accent, #7cff6b);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.sdp-input-wrap:focus-within .sdp-inp-icon {
  transform: scale(1.1);
}

[data-theme="light"] .sdp-inp-icon {
  color: #16a34a;
}

#sdpInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary, #f0f4ff);
  min-width: 0;
  caret-color: var(--accent, #7cff6b);
}

#sdpInput::placeholder {
  color: var(--text-secondary, #475569);
  font-weight: 400;
}

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

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

.sdp-inp-clear {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #64748b);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.sdp-inp-clear:hover {
  background: rgba(124, 255, 107, 0.15);
  color: var(--accent);
}

[data-theme="light"] .sdp-inp-clear {
  background: #e9ecf0;
  color: #475569;
}

.sdp-inp-esc {
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary, #475569);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}

[data-theme="light"] .sdp-inp-esc {
  background: #e9ecf0;
  border-color: #dde3ed;
  color: #64748b;
}

/* ── Quick browse ── */
.sdp-quick {
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .sdp-quick {
  border-bottom-color: #f1f5f9;
}

.sdp-label {
  display: block;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #475569);
  margin-bottom: 9px;
}

.sdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.77rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.18s ease;
}

.sdp-chip i {
  font-size: 0.85rem;
}

.sdp-chip:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.15);
}

.sdp-chip-blue {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.22);
}

.sdp-chip-teal {
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.22);
}

.sdp-chip-yellow {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.22);
}

.sdp-chip-green {
  color: var(--accent, #7cff6b);
  background: rgba(124, 255, 107, 0.10);
  border-color: rgba(124, 255, 107, 0.22);
}

.sdp-chip-purple {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.22);
}

[data-theme="light"] .sdp-chip-blue {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

[data-theme="light"] .sdp-chip-teal {
  color: #0d9488;
  background: #f0fdfa;
  border-color: #99f6e4;
}

[data-theme="light"] .sdp-chip-yellow {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

[data-theme="light"] .sdp-chip-green {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

[data-theme="light"] .sdp-chip-purple {
  color: #7c3aed;
  background: #faf5ff;
  border-color: #ddd6fe;
}

/* ── Results body ── */
.sdp-body {
  flex: 1;
  min-height: 0;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 255, 107, 0.25) transparent;
}

.sdp-body::-webkit-scrollbar {
  width: 4px;
}

.sdp-body::-webkit-scrollbar-thumb {
  background: rgba(124, 255, 107, 0.25);
  border-radius: 2px;
}

.sdp-list {
  display: flex;
  flex-direction: column;
}

.sdp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.14s, border-color 0.14s;
}

.sdp-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--accent, #7cff6b);
}

[data-theme="light"] .sdp-item:hover {
  background: #f8fafc;
  border-left-color: #16a34a;
}

/* Colored icon bubbles */
.sdp-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.c-blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.c-orange {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}

.c-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

.c-teal {
  background: rgba(20, 184, 166, 0.18);
  color: #2dd4bf;
}

.c-green {
  background: rgba(124, 255, 107, 0.15);
  color: var(--accent, #7cff6b);
}

[data-theme="light"] .c-blue {
  background: #eff6ff;
  color: #2563eb;
}

[data-theme="light"] .c-orange {
  background: #fff7ed;
  color: #ea580c;
}

[data-theme="light"] .c-purple {
  background: #faf5ff;
  color: #7c3aed;
}

[data-theme="light"] .c-teal {
  background: #f0fdfa;
  color: #0d9488;
}

[data-theme="light"] .c-green {
  background: #f0fdf4;
  color: #16a34a;
}

.sdp-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sdp-item-name {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.91rem;
  font-weight: 600;
  color: var(--text-primary, #f0f4ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .sdp-item-name {
  color: #1e293b;
}

.sdp-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  color: var(--text-secondary, #64748b);
}

/* Badges */
.sdp-badge {
  font-size: 0.61rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

.badge-tutorial {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.badge-review {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.badge-fix {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

.badge-dl {
  background: rgba(124, 255, 107, 0.15);
  color: var(--accent, #7cff6b);
}

[data-theme="light"] .badge-tutorial {
  background: #eff6ff;
  color: #2563eb;
}

[data-theme="light"] .badge-review {
  background: #fffbeb;
  color: #d97706;
}

[data-theme="light"] .badge-fix {
  background: #faf5ff;
  color: #7c3aed;
}

[data-theme="light"] .badge-dl {
  background: #f0fdf4;
  color: #16a34a;
}

.sdp-item-arr {
  font-size: 0.85rem;
  color: var(--text-secondary, #475569);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.14s, transform 0.14s;
}

.sdp-item:hover .sdp-item-arr {
  opacity: 1;
  transform: translate(2px, -2px);
  color: var(--accent, #7cff6b);
}

[data-theme="light"] .sdp-item:hover .sdp-item-arr {
  color: #16a34a;
}

/* Empty state */
.sdp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
  gap: 10px;
}

.sdp-empty i {
  font-size: 2.4rem;
  color: var(--text-secondary, #475569);
  opacity: 0.35;
  display: block;
}

.sdp-empty p {
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #f0f4ff);
  margin: 0;
}

[data-theme="light"] .sdp-empty p {
  color: #1e293b;
}

.sdp-empty span {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
}

/* Footer */
.sdp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .sdp-modal-footer {
  border-top-color: #f1f5f9;
  background: #f8fafc;
}

.sdp-footer-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #7cff6b);
  text-decoration: none;
  transition: opacity 0.15s;
}

.sdp-footer-all:hover {
  opacity: 0.75;
}

[data-theme="light"] .sdp-footer-all {
  color: #16a34a;
}

.sdp-kbd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.67rem;
  color: var(--text-secondary, #475569);
}

.sdp-kbd-row kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary, #64748b);
  margin-right: 2px;
}

[data-theme="light"] .sdp-kbd-row kbd {
  background: #e9ecf0;
  border-color: #d1d5db;
  color: #475569;
}

/* Active state for the navbar search toggle */
#searchToggle.active {
  color: var(--accent, #7cff6b) !important;
  background: rgba(124, 255, 107, 0.12) !important;
}

/* Responsive */
@media (max-width: 640px) {
  .sdp-backdrop {
    padding-top: 60px;
  }

  .sdp-modal {
    border-radius: 16px;
    max-width: 100%;
    margin: 0 8px;
  }

  .sdp-kbd-row {
    display: none;
  }

  .sdp-inp-esc {
    display: none;
  }
}

/* ── Light theme for original search overlay (kept for other pages) ── */
[data-theme="light"] .search-overlay {
  background-color: rgba(248, 250, 252, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


.search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.search-container.modal-search-card {
  width: 90%;
  max-width: 720px;
  background: var(--bg-card, rgba(12, 15, 24, 0.95));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .search-container.modal-search-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.15);
}

.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.search-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.close-search {
  position: static;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  font-size: 1.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-search:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.15);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.search-input-wrapper {
  position: relative;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
  border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: 8px 12px 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s ease;
}

.search-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 124, 255, 107), 0.2);
  background: var(--bg-primary, rgba(0, 0, 0, 0.2));
}

.search-icon {
  font-size: 1.4rem;
  color: var(--accent);
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  outline: none;
  background: none;
  border: none;
  color: var(--text-primary);
}

#searchInput::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.search-submit-btn {
  background: var(--accent);
  color: #06080f !important;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 0.9rem;
  font-family: var(--font-display);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb, 124, 255, 107), 0.35);
}

.search-quick-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.quick-tags-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-right: 4px;
}

.quick-tag-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-tag-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.12);
}

.search-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.search-clear-btn:hover {
  color: var(--accent);
}

.search-clear-btn.visible {
  display: flex;
}

.search-results-wrapper {
  margin-top: 24px;
  max-height: 54vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-secondary, rgba(15, 23, 42, 0.4));
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.search-result-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.08);
}

.search-result-thumb {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-result-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.15);
  color: var(--accent);
}

.search-no-results {
  text-align: center;
  padding: 36px 16px;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 16px;
}

.search-suggestion-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-suggestion-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 124, 255, 107), 0.12);
}

/* --------------------------------------------------------
   Responsive Media Queries
-------------------------------------------------------- */

/* Desktop Narrow / Tablet Landscape (1440px max width bounds) */
@media (max-width: 1440px) {

  .header-container,
  .hero-layout,
  .section-container,
  .mega-grid {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Large Tablet & Desktop Small (1024px to 1200px) */
@media (max-width: 1200px) {
  .hero-layout {
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
  }

  .bg-watermark {
    font-size: 18vw;
    left: 80%;
  }
}

/* Tablet (Portrait) */
@media (max-width: 1023px) {

  /* Navigation Layout Adjustments */
  .desktop-nav {
    display: none;
  }

  .btn-header {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .header-actions {
    gap: 10px;
  }

  /* Hero Layout Stacking: Sidebar Below Main */
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-top: 40px;
  }

  .bg-watermark {
    display: none;
    /* Hide watermark on mobile/tablet to avoid overflow clutter */
  }

  .sidebar-sticky-wrapper {
    position: static;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: start;
  }

  .featured-sidebar-card {
    height: 100%;
  }

  .trust-indicators {
    height: 100%;
    justify-content: center;
  }
}

/* Mobile Devices (Under 768px) */
@media (max-width: 767px) {
  :root {
    --header-height-large: 75px;
    --header-height-shrunk: 65px;
  }

  .header-container,
  .hero-layout,
  .section-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero ordering: Image first, text second, sidebar third */
  .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .hero-main-content {
    display: flex;
    flex-direction: column;
  }

  .hero-media-wrapper {
    order: 1;
    /* Image first */
  }

  .hero-text-content {
    order: 2;
    /* Text second */
    margin-top: 35px;
  }

  .sidebar-sticky-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    order: 3;
    /* Sidebar card last */
  }

  .featured-sidebar-card {
    width: 100%;
  }

  /* Optimize typography */
  .main-headline {
    font-size: 2.2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .article-meta {
    flex-wrap: wrap;
    gap: 8px;
  }

  .meta-divider {
    display: none;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  /* Hamburger Menu Active (Cross state toggle fallback) */
  .hamburger-btn.active .hamburger-bar:nth-child(1) {
    transform: rotate(45deg) translate(2px, 1px);
  }

  .hamburger-btn.active .hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger-btn.active .hamburger-bar:nth-child(3) {
    transform: rotate(-45deg) translate(2px, -1px);
  }
}

/* --------------------------------------------------------
   Featured Articles Section Styling
-------------------------------------------------------- */

.featured-articles-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

.articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: all var(--transition-normal);
}

.view-all-btn i {
  transition: transform var(--transition-normal);
}

.view-all-btn:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.view-all-btn:hover i {
  transform: translateX(6px);
}

/* --------------------------------------------------------
   Featured Articles & Guides Section Styling
-------------------------------------------------------- */

.featured-articles-section {
  padding: 85px 0;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

.articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 30px;
}

.articles-header .header-left .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

[data-theme="dark"] .articles-header .header-left .section-badge,
:root:not([data-theme="light"]) .articles-header .header-left .section-badge {
  color: var(--accent);
}

.articles-header .header-left .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.2;
}

.articles-header .header-left .section-subtitle {
  font-size: 0.96rem;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.6;
}

.articles-header .view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #2563eb;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.articles-header .view-all-btn:hover {
  transform: translateX(4px);
  color: #1d4ed8;
}

[data-theme="dark"] .articles-header .view-all-btn,
:root:not([data-theme="light"]) .articles-header .view-all-btn {
  color: var(--accent);
}

/* 2-Column Split: Left Spotlight Card, Right Stack */
.featured-articles-section .editorial-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
  min-height: 0;
}

/* Base Article Card */
.article-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* Large Featured Card (Left Side) */
.large-featured-card {
  height: 100%;
}

.large-featured-card .card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #0b0f19;
}

.large-featured-card .card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.large-featured-card:hover .card-image {
  transform: scale(1.05);
}

.large-featured-card .card-category {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #2563eb;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .large-featured-card .card-category,
:root:not([data-theme="light"]) .large-featured-card .card-category {
  background: rgba(124, 255, 107, 0.2);
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(124, 255, 107, 0.2);
}

.large-featured-card .card-details {
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  min-height: 0;
}

.large-featured-card .card-headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.large-featured-card .card-text {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.large-featured-card .card-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.large-featured-card .card-footer-meta i {
  color: #2563eb;
}

[data-theme="dark"] .large-featured-card .card-footer-meta i,
:root:not([data-theme="light"]) .large-featured-card .card-footer-meta i {
  color: var(--accent);
}

.large-featured-card .card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  transition: all 0.25s ease;
  align-self: flex-start;
}

.large-featured-card .card-action-btn:hover {
  gap: 10px;
  color: #1d4ed8;
}

[data-theme="dark"] .large-featured-card .card-action-btn,
:root:not([data-theme="light"]) .large-featured-card .card-action-btn {
  color: var(--accent);
}

/* Right Side: Supporting Cards Stack — stretches to match left column height */
.supporting-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  border-radius: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
}

/* Each supporting card fills equal share of the full left-column height */
.supporting-card {
  padding: 16px 22px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
  text-decoration: none;
}

.supporting-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

[data-theme="dark"] .supporting-card:hover,
:root:not([data-theme="light"]) .supporting-card:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.12);
}

/* Thumbnail inside supporting card */
.supporting-card-thumb-wrap {
  flex-shrink: 0;
  width: 200px;
  max-width: 38%;
  aspect-ratio: 16 / 9;
  height: auto;
  align-self: center;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0b0f19;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.supporting-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.01);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.supporting-card:hover .supporting-card-thumb {
  transform: scale(1.06);
}

/* Left accent bar */
.supporting-card::before {
  content: '';
  display: block;
  width: 3px;
  flex-shrink: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.3));
  align-self: stretch;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.supporting-card:hover::before {
  opacity: 1;
}

/* Text wrapper fills remaining width */
.supporting-card .card-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Bottom: Read More */
.supporting-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  flex-shrink: 0;
}

.supporting-badge-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.supporting-category {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
  flex-shrink: 0;
}

[data-theme="dark"] .supporting-category,
:root:not([data-theme="light"]) .supporting-category {
  color: var(--accent);
  background: transparent;
}

.supporting-read-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.meta-dot {
  opacity: 0.3;
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.supporting-headline {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.supporting-card:hover .supporting-headline {
  color: #2563eb;
}

[data-theme="dark"] .supporting-card:hover .supporting-headline,
:root:not([data-theme="light"]) .supporting-card:hover .supporting-headline {
  color: var(--accent);
}

.supporting-card .card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.supporting-card .card-action-btn:hover {
  gap: 9px;
  color: #1d4ed8;
}

[data-theme="dark"] .supporting-card .card-action-btn,
:root:not([data-theme="light"]) .supporting-card .card-action-btn {
  color: var(--accent);
}

.supporting-card .arrow-icon {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.supporting-card .card-action-btn:hover .arrow-icon {
  transform: translateX(4px);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .supporting-card-thumb-wrap {
    width: 170px;
    max-width: 36%;
  }
}

@media (max-width: 1023px) {
  .featured-articles-section {
    padding: 70px 24px;
  }

  .articles-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }

  .featured-articles-section .editorial-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    height: auto;
  }

  .large-featured-card .card-image-wrapper {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .supporting-stack {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .supporting-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
  }

  .supporting-card-thumb-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .large-featured-card .card-details {
    padding: 24px 20px;
  }
}

/* --------------------------------------------------------
   Browse by Categories Section Styling (Enhanced Premium UI)
-------------------------------------------------------- */

.categories-section {
  padding: 96px 0;
  background-color: var(--bg-secondary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  overflow: hidden;
}

.categories-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 30px;
}

.categories-header .header-left .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  background: rgba(37, 99, 235, 0.08);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.categories-header .header-left .section-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 8px #2563eb;
  animation: pulseBadgeDot 2s infinite;
}

@keyframes pulseBadgeDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

[data-theme="dark"] .categories-header .header-left .section-badge,
:root:not([data-theme="light"]) .categories-header .header-left .section-badge {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.2);
}

[data-theme="dark"] .categories-header .header-left .section-badge .badge-dot,
:root:not([data-theme="light"]) .categories-header .header-left .section-badge .badge-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.categories-header .header-left .section-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.categories-header .header-left .section-title .gradient-accent {
  margin-left: 0.25em;
  display: inline-block;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .categories-header .header-left .section-title .gradient-accent,
:root:not([data-theme="light"]) .categories-header .header-left .section-title .gradient-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #86efac 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.categories-header .header-left .section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.6;
}

.categories-header .view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #2563eb;
  text-decoration: none;
  background: var(--bg-card);
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.categories-header .view-all-btn:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.categories-header .view-all-btn i {
  transition: transform 0.25s ease;
}
.categories-header .view-all-btn:hover i {
  transform: translateX(4px);
}

[data-theme="dark"] .categories-header .view-all-btn,
:root:not([data-theme="light"]) .categories-header .view-all-btn {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .categories-header .view-all-btn:hover,
:root:not([data-theme="light"]) .categories-header .view-all-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(124, 255, 107, 0.15);
}

/* 3 Equal Columns Responsive Grid Layout (1fr + 2fr containing 1fr 1fr) */
.categories-section .editorial-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: stretch;
}

/* Left: Large Featured Category Card (1st Equal Column) */
.large-featured-category-card {
  background-color: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(226, 232, 240, 0.9));
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  height: 100%;
  position: relative;
}

.large-featured-category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .large-featured-category-card:hover,
:root:not([data-theme="light"]) .large-featured-category-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.large-featured-category-card .card-image-wrapper {
  position: relative;
  width: 100%;
  height: 235px;
  overflow: hidden;
  background-color: #0f172a;
  flex-shrink: 0;
}

.large-featured-category-card .card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.005);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.large-featured-category-card:hover .card-image {
  transform: scale(1.05);
}

.large-featured-category-card .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
  pointer-events: none;
}

.large-featured-category-card .card-category-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #2563eb;
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
}

[data-theme="dark"] .large-featured-category-card .card-category-label,
:root:not([data-theme="light"]) .large-featured-category-card .card-category-label {
  background: var(--accent, #7cff6b);
  color: #050b14;
  box-shadow: 0 4px 12px rgba(124, 255, 107, 0.3);
}

.large-featured-category-card .card-details {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.large-featured-category-card .card-headline {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary, #1e293b);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.large-featured-category-card .card-text {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Card Action Text Link */
.card-text-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin-top: auto !important;
  align-self: flex-start !important;
}

.card-text-link span {
  color: #2563eb !important;
}

.card-text-link i {
  color: #2563eb !important;
  font-size: 0.88rem !important;
  transition: transform 0.2s ease !important;
}

.card-text-link:hover {
  gap: 10px !important;
  color: #1d4ed8 !important;
}

.card-text-link:hover span,
.card-text-link:hover i {
  color: #1d4ed8 !important;
}

.card-text-link:hover i {
  transform: translateX(3px) !important;
}

[data-theme="dark"] .card-text-link,
[data-theme="dark"] .card-text-link span,
[data-theme="dark"] .card-text-link i,
:root:not([data-theme="light"]) .card-text-link,
:root:not([data-theme="light"]) .card-text-link span,
:root:not([data-theme="light"]) .card-text-link i {
  color: var(--accent, #7cff6b) !important;
}

[data-theme="dark"] .card-text-link:hover,
[data-theme="dark"] .card-text-link:hover span,
[data-theme="dark"] .card-text-link:hover i,
:root:not([data-theme="light"]) .card-text-link:hover,
:root:not([data-theme="light"]) .card-text-link:hover span,
:root:not([data-theme="light"]) .card-text-link:hover i {
  color: #a3ff97 !important;
}

/* Right Side: 2 Columns of 2 Supporting Cards (2x2 Grid) */
.categories-stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 100%;
  align-items: stretch;
}

.supporting-category-card {
  background-color: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(226, 232, 240, 0.9));
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  height: 100%;
  position: relative;
}

.supporting-category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .supporting-category-card:hover,
:root:not([data-theme="light"]) .supporting-category-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.supporting-category-card .card-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.supporting-category-card .card-top-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* Category Specific Theming & Glowing Icons */
.category-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.supporting-category-card:hover .category-icon-wrapper {
  transform: scale(1.08);
}

/* Tutorials & Guides Card theme */
.cat-tutorials .category-icon-wrapper,
.cat-android .category-icon-wrapper {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

/* Supported Devices Card theme */
.cat-devices .category-icon-wrapper,
.cat-firetv .category-icon-wrapper {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

/* Reviews & Comparisons Card theme */
.cat-reviews .category-icon-wrapper,
.cat-smarttv .category-icon-wrapper {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

/* Downloads & Apps Card theme */
.cat-downloads .category-icon-wrapper,
.cat-features .category-icon-wrapper {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

[data-theme="dark"] .category-icon-wrapper,
:root:not([data-theme="light"]) .category-icon-wrapper {
  background: rgba(124, 255, 107, 0.1) !important;
  border-color: rgba(124, 255, 107, 0.25) !important;
  color: var(--accent, #7cff6b) !important;
}

.supporting-category-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.supporting-category-card:hover .supporting-category-title {
  color: #2563eb;
}

[data-theme="dark"] .supporting-category-card:hover .supporting-category-title,
:root:not([data-theme="light"]) .supporting-category-card:hover .supporting-category-title {
  color: var(--accent, #7cff6b);
}

.category-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}

.category-tags li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 3px 0;
  transition: color 0.2s ease;
}

.category-tags li i {
  font-size: 0.8rem;
  color: #2563eb;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-theme="dark"] .category-tags li i,
:root:not([data-theme="light"]) .category-tags li i {
  color: var(--accent);
}

.supporting-category-card:hover .category-tags li i {
  transform: translateX(2px);
  opacity: 1;
}

.supporting-category-card .card-action-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  padding: 4px 0;
  transition: all 0.25s ease;
  align-self: flex-start;
}

.supporting-category-card .card-action-btn .arrow-icon {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.supporting-category-card .card-action-btn:hover {
  color: #1d4ed8;
}

.supporting-category-card:hover .card-action-btn .arrow-icon {
  transform: translateX(4px);
}

[data-theme="dark"] .supporting-category-card .card-action-btn,
:root:not([data-theme="light"]) .supporting-category-card .card-action-btn {
  color: var(--accent);
}

/* Responsive Overrides for Categories Section */
@media (max-width: 1080px) {
  .categories-section {
    padding: 70px 24px;
  }

  .categories-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }

  .categories-section .editorial-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .categories-stack-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .large-featured-category-card .card-details {
    padding: 24px 20px;
  }

  .supporting-category-card {
    padding: 24px 20px;
  }
}

/* --------------------------------------------------------
   Supported Devices Section Styling
-------------------------------------------------------- */

.devices-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

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

/* Device Category Filter Pills */
.dev-category-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 24px 2px;
  margin-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dev-category-filters::-webkit-scrollbar {
  display: none;
}

.dev-category-filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #64748b);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  white-space: nowrap;
  outline: none;
}

.dev-category-filter-chip:hover {
  color: var(--text-primary, #0f172a);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

.dev-category-filter-chip.active {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

[data-theme="dark"] .dev-category-filter-chip,
:root:not([data-theme="light"]) .dev-category-filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

[data-theme="dark"] .dev-category-filter-chip:hover,
:root:not([data-theme="light"]) .dev-category-filter-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .dev-category-filter-chip.active,
:root:not([data-theme="light"]) .dev-category-filter-chip.active {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .dev-category-filter-chip {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .dev-category-filter-chip:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

[data-theme="light"] .dev-category-filter-chip.active {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

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

@media (max-width: 1200px) {
  .devices-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .devices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 580px) {
  .devices-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.device-card-item {
  background-color: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.device-card-item:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .device-card-item,
:root:not([data-theme="light"]) .device-card-item {
  background-color: var(--bg-card, #111827);
  border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .device-card-item:hover,
:root:not([data-theme="light"]) .device-card-item:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.device-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #000000;
}

.device-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: #000000;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.device-card-item:hover .device-image {
  transform: scale(1.02);
}

.article-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #0f172a;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

[data-theme="dark"] .article-count-badge,
:root:not([data-theme="light"]) .article-count-badge {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.device-details {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.device-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-icon {
  font-size: 1.25rem;
  color: #3b82f6;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.device-card-item:hover .device-icon {
  transform: scale(1.1);
}

.device-name {
  font-family: var(--font-display, inherit);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin: 0;
}

.device-description {
  font-size: 0.86rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.device-card-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
}

.device-read-more-btn,
.device-card-item .card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #3b82f6 !important;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  transition: color 0.2s ease;
  cursor: pointer;
}

.device-read-more-btn i,
.device-card-item .card-action-btn i {
  font-size: 14px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.device-read-more-btn:hover,
.device-card-item .card-action-btn:hover {
  color: #1d4ed8 !important;
}

.device-read-more-btn:hover i,
.device-card-item .card-action-btn:hover i {
  transform: translateX(4px);
}

/* Responsive Overrides for Devices Section */
@media (max-width: 1023px) {
  .devices-section {
    padding: 80px 30px;
  }

  .devices-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .devices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .devices-section {
    padding: 60px 20px;
  }

  .devices-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .device-details {
    padding: 24px;
  }
}

/* --------------------------------------------------------
   Latest Tutorials & Guides Section Styling (Redesigned)
-------------------------------------------------------- */

.tutorials-section {
  padding: 95px 0 85px;
  background-color: var(--bg-secondary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

.tutorials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}

/* Quick Category Filter Bar */
.tutorials-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.tut-filter-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}

.tut-filter-chip i {
  font-size: 1rem;
  color: inherit;
  transition: transform 0.2s ease;
}

.tut-filter-chip:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
}

.tut-filter-chip:hover i {
  transform: scale(1.15);
}

.tut-filter-chip.active {
  background: var(--accent);
  color: #ffffff !important;
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
}

/* Asymmetrical Grid Layout */
.tutorials-grid-layout {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Card Base for Tutorials */
.tutorial-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Large Featured Hero Card */
.featured-tutorial-card {
  height: auto;
  display: flex;
  flex-direction: column;
}

.featured-tutorial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 25px rgba(var(--accent-rgb), 0.12);
}

.featured-tutorial-card .card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9.5;
  overflow: hidden;
  background: #000;
}

.featured-tutorial-card .card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-tutorial-card:hover .card-image {
  transform: scale(1.06);
}

.featured-tutorial-card .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.featured-tutorial-card .card-badges-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.featured-tutorial-card .card-category-label {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.featured-tutorial-card .card-read-time-badge {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.featured-tutorial-card .card-platform-pills {
  position: absolute;
  bottom: 14px;
  left: 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}

.featured-tutorial-card .platform-pill {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.95);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.featured-tutorial-card .card-details {
  padding: 26px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.featured-card-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #10b981;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #3b82f6;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.12);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.featured-tutorial-card .card-headline {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0;
  transition: color 0.25s ease;
}

.featured-tutorial-card:hover .card-headline {
  color: var(--accent);
}

.featured-tutorial-card .card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-tutorial-card .card-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  margin-top: 6px;
}

.author-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.author-name {
  font-size: 0.82rem;
}

.featured-tutorial-card .card-action-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563eb !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.featured-tutorial-card .card-action-btn:hover {
  color: #1d4ed8 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.featured-tutorial-card .card-action-btn i {
  color: #2563eb !important;
  font-size: 1rem !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.featured-tutorial-card:hover .card-action-btn i {
  color: #1d4ed8 !important;
  transform: translateX(4px) !important;
}

/* Right Column: Supporting Tutorial Cards Deck */
.tutorials-stack-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.supporting-tutorial-card {
  padding: 12px 16px;
  height: auto;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: block;
}

.supporting-tutorial-card:hover {
  transform: translateY(-2px) translateX(3px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15), 0 0 15px rgba(var(--accent-rgb), 0.08);
}

.supporting-card-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.supporting-img-box {
  flex-shrink: 0;
  width: 88px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-color);
}

.supporting-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.supporting-tutorial-card:hover .supporting-img {
  transform: scale(1.08);
}

.supporting-tutorial-card .card-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.supporting-badge-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
}

.supporting-category {
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.category-firetv {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.category-android {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
}

.category-tizen {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}

.category-webos {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
}

.category-windows {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.12);
}

.category-macos {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.12);
}

.supporting-read-time {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.supporting-headline {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.supporting-tutorial-card:hover .supporting-headline {
  color: var(--accent);
}

.supporting-tutorial-card .card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent) !important;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 2px;
  transition: gap 0.2s ease;
}

.supporting-tutorial-card:hover .card-action-btn {
  gap: 8px;
}

.supporting-tutorial-card .card-action-btn i {
  transition: transform 0.2s ease;
}

.supporting-tutorial-card:hover .card-action-btn i {
  transform: translateX(2px);
}

/* Light Theme Overrides */
[data-theme="light"] .tutorials-section {
  background-color: #f8fafc;
}

[data-theme="light"] .tut-filter-chip {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .tut-filter-chip:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.3);
}

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

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

[data-theme="light"] .featured-tutorial-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .featured-tutorial-card .card-headline {
  color: #0f172a;
}

[data-theme="light"] .featured-tutorial-card:hover .card-headline {
  color: #2563eb;
}

[data-theme="light"] .featured-tutorial-card .card-text {
  color: #475569;
}

[data-theme="light"] .supporting-tutorial-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .supporting-tutorial-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

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

[data-theme="light"] .supporting-tutorial-card:hover .supporting-headline {
  color: #2563eb;
}

[data-theme="light"] .featured-tutorial-card .card-action-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  box-shadow: none !important;
}

[data-theme="light"] .featured-tutorial-card .card-action-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  box-shadow: none !important;
}

[data-theme="light"] .featured-tutorial-card .card-action-btn i {
  color: #2563eb !important;
}

[data-theme="light"] .featured-tutorial-card .card-action-btn:hover i {
  color: #1d4ed8 !important;
}

/* Responsive Overrides for Tutorials Section */
@media (max-width: 1080px) {
  .tutorials-grid-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tutorials-stack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .tutorials-section {
    padding: 60px 20px;
  }

  .tutorials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tutorials-grid-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .featured-tutorial-card .card-details {
    padding: 22px;
  }

  .featured-tutorial-card .card-headline {
    font-size: 1.25rem;
  }

  .tutorials-stack-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .supporting-tutorial-card {
    padding: 12px 14px;
  }

  .supporting-img-box {
    width: 72px;
    height: 54px;
  }
}



/* --------------------------------------------------------
   Featured Reviews & Comparisons Section Styling
-------------------------------------------------------- */

.reviews-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

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

/* Category Filter Pills for Reviews Section */
.rev-category-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 24px 2px;
  margin-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rev-category-filters::-webkit-scrollbar {
  display: none;
}

.rev-category-filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #64748b);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  white-space: nowrap;
  outline: none;
}

.rev-category-filter-chip:hover {
  color: var(--text-primary, #0f172a);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

.rev-category-filter-chip.active {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

[data-theme="dark"] .rev-category-filter-chip,
:root:not([data-theme="light"]) .rev-category-filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

[data-theme="dark"] .rev-category-filter-chip:hover,
:root:not([data-theme="light"]) .rev-category-filter-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .rev-category-filter-chip.active,
:root:not([data-theme="light"]) .rev-category-filter-chip.active {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .rev-category-filter-chip {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .rev-category-filter-chip:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

[data-theme="light"] .rev-category-filter-chip.active {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}

/* Split Layout: 65% left / 35% right */
.reviews-split-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.65fr;
  gap: 36px;
  align-items: stretch;
}

/* Base Card Style Shared */
.review-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.review-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 15px 40px rgba(var(--accent-rgb), 0.06);
}

/* Featured Comparison Card */
.featured-review-card {
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.featured-review-card .card-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}

.featured-review-card:hover .card-image {
  transform: scale(1.05);
}

/* Meta overlay floating on featured image */
.featured-review-meta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 3;
}

.featured-review-card .card-details {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}

.featured-review-card .card-details .card-action-btn {
  margin-top: auto;
}

/* Comparison Player Tags */
.comparison-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.comparison-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.comparison-tag:hover {
  background-color: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Right-side stacked review cards */
.reviews-stack-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.compact-review-card {
  border-radius: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.compact-review-card img,
.compact-review-card .compact-review-thumb-wrapper,
.compact-review-card .compact-review-thumb {
  display: none !important;
}

.compact-card-inner {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.compact-card-inner .card-action-btn.compact {
  margin-top: auto;
}

.compact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Category Badge on compact cards */
.review-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.compact-review-card:hover .review-category-badge {
  background-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.review-category-badge.comparison {
  background-color: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #FBBF24;
}

.compact-review-card:hover .review-category-badge.comparison {
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

/* Star Ratings */
.star-rating {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 0.85rem;
  color: #FBBF24;
}

.star-empty {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

/* Compact card text */
.compact-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.compact-card-summary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Animated Rating Bar */
.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-bar-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 44px;
}

.rating-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background-color: var(--border-color);
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.6));
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Triggered by JS when in viewport */
.rating-bar-fill.animated {
  width: var(--rating-width);
}

.rating-score {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  min-width: 26px;
  text-align: right;
}

/* Compact CTA Button */
.card-action-btn.compact {
  padding: 10px 16px;
  font-size: 0.82rem;
  align-self: flex-start;
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .reviews-section {
    padding: 80px 30px;
  }

  .reviews-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .reviews-split-layout {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .reviews-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .reviews-section {
    padding: 60px 20px;
  }

  .reviews-split-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .reviews-stack-grid {
    grid-template-columns: 1fr;
  }

  .featured-review-card .card-details {
    padding: 24px;
  }

  .comparison-tags-row {
    gap: 8px;
  }
}

/* --------------------------------------------------------
   Featured Video Tutorials Section Styling
-------------------------------------------------------- */

.videos-section {
  padding: 80px 40px;
  background-color: var(--bg-secondary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

.videos-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}

/* Main 70/30 layout */
.videos-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 30px;
  align-items: start;
}

/* Shared video card base */
.video-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 20px 50px rgba(var(--accent-rgb), 0.07);
}

/* Featured video thumbnail */
.video-thumbnail-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #000;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.7s var(--transition-smooth);
}

.featured-video-card:hover .video-thumbnail {
  transform: scale(1.06);
}

/* Cinematic gradient overlay */
.video-cinematic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}

.compact-overlay {
  background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.7) 100%);
}

/* Category label overlaid top-left */
.video-category-label {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 8px;
  background-color: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  z-index: 3;
}

/* Duration badge bottom-right */
.video-duration-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  z-index: 3;
}

.video-duration-badge.mini {
  bottom: 10px;
  right: 10px;
  font-size: 0.7rem;
  padding: 3px 8px;
}

/* Animated circular play button */
.play-btn-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--transition-normal), transform var(--transition-smooth), border-color var(--transition-normal);
}

.play-btn-circle:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.1);
}

.play-icon {
  font-size: 1.6rem;
  margin-left: 4px;
}

/* Pulse ring */
.play-pulse-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.25);
    opacity: 0;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* Mini play button */
.play-btn-mini {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  font-size: 1rem;
  transition: opacity var(--transition-normal), transform var(--transition-smooth), background var(--transition-normal);
}

.compact-video-card:hover .play-btn-mini {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Featured video detail panel */
.video-details {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.video-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.video-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.video-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.video-meta-item i {
  font-size: 0.9rem;
  color: var(--accent);
}

.video-meta-dot {
  color: var(--border-color);
  font-size: 0.9rem;
}

/* Right side video stack */
.videos-stack-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Compact video card: horizontal row */
.compact-video-card {
  flex-direction: row;
  border-radius: 16px;
  overflow: hidden;
}

.compact-video-thumb-wrapper {
  position: relative;
  width: 130px;
  min-width: 130px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #000;
  flex-shrink: 0;
}

.compact-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.5s var(--transition-smooth);
}

.compact-video-card:hover .compact-video-thumb {
  transform: scale(1.08);
}

.compact-video-info {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.video-category-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  background-color: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.compact-video-card:hover .video-category-tag {
  background-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
}

.compact-video-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .videos-section {
    padding: 80px 30px;
  }

  .videos-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .videos-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .videos-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .compact-video-card {
    flex-direction: column;
  }

  .compact-video-thumb-wrapper {
    width: 100%;
    min-width: unset;
    aspect-ratio: 16 / 9;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .videos-section {
    padding: 60px 20px;
  }

  .videos-stack-grid {
    grid-template-columns: 1fr;
  }

  .video-details {
    padding: 24px;
  }

  .video-headline {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------
   Latest News & Updates Section Styling
-------------------------------------------------------- */

.news-section {
  padding: 90px 0 80px;
  scroll-margin-top: 90px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
}

.news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 30px;
}

/* Main asymmetric layout: large card left, grid right */
.news-grid-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: stretch;
}

/* Base news card */
.news-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
  box-shadow: 0 18px 45px rgba(var(--accent-rgb), 0.09);
}

/* Featured article card */
.featured-news-card {
  height: 100%;
}

.featured-news-card .card-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.featured-news-card:hover .card-image {
  transform: scale(1.05);
}

.featured-news-card .card-details {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.featured-news-card .card-footer-meta {
  margin-top: auto;
}

/* "Breaking News" category label — red variant */
.card-category-label.breaking {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 8px;
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  z-index: 3;
  animation: badge-pulse 3s ease-in-out infinite;
}

@keyframes badge-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    border-color: rgba(239, 68, 68, 0.7);
  }
}

/* 3-column balanced editorial news grid */
.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-content: stretch;
  width: 100%;
}

/* Compact news card - Enhanced Premium UI */
.compact-news-card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.4s ease;
}

.compact-news-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.12), 0 0 25px rgba(var(--accent-rgb), 0.14);
}

.compact-news-thumb-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #0b0f19;
}

.compact-news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.compact-news-card:hover .compact-news-thumb {
  transform: scale(1.08);
}

/* Category badge overlaid on thumbnail */
.compact-news-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 13px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.compact-news-card:hover .compact-news-badge {
  transform: translateY(-2px) scale(1.03);
}

/* Badge colour variants */
.compact-news-badge.player-update {
  background-color: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34D399;
}

.compact-news-badge.devices {
  background-color: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.6);
  color: #C084FC;
}

.compact-news-badge.streaming {
  background-color: rgba(6, 182, 212, 0.25);
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #38BDF8;
}

.compact-news-badge.technology {
  background-color: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #FBBF24;
}

.compact-news-badge.tutorial {
  background-color: rgba(34, 197, 94, 0.25);
  border: 1px solid rgba(34, 197, 94, 0.6);
  color: #4ADE80;
}

.compact-news-badge.security {
  background-color: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #F87171;
}

/* Compact card text block */
.compact-news-info {
  padding: 24px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.compact-news-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.compact-news-card:hover .compact-news-title {
  color: var(--accent);
}

.compact-news-excerpt {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.58;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compact-news-meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.news-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-news-meta i {
  font-size: 0.88rem;
  color: var(--accent);
}

.meta-sep {
  color: var(--border-color);
}

/* Sliding arrow "Read" link button */
.news-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
}

.news-read-link:hover {
  gap: 9px;
  background: rgba(var(--accent-rgb), 0.16);
}

.news-arrow {
  font-size: 0.88rem;
  transition: transform 0.3s ease;
}

.news-read-link:hover .news-arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .news-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .news-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .news-section {
    padding: 80px 0;
  }

  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .news-grid-layout {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .news-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .news-section {
    padding: 60px 0;
  }

  .news-grid-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .news-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .featured-news-card .card-details {
    padding: 24px;
  }
}

@media (max-width: 479px) {
  .news-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------
   Download Center — Files.ar-style Directory Listing Portal
-------------------------------------------------------- */

.downloads-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  overflow: hidden;
}

/* Subtle background tech matrix pattern */
.downloads-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124, 255, 107, 0.015) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.downloads-section .section-container {
  position: relative;
  z-index: 1;
}

/* ---- Section Header ---- */
.downloads-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}

.downloads-header .header-left {
  max-width: 600px;
}

.downloads-header .section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0 12px;
  color: var(--text-primary);
}

.downloads-header .section-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Search Box styled like files.ar search bar */
.search-portal-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 16px;
  width: 320px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.search-portal-box:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-portal-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  width: 100%;
  padding-left: 8px;
}

.search-portal-box input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.search-portal-box .search-icon {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ---- Portal Tabs Bar ---- */
.portal-tabs-bar {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
}

.portal-tabs-bar::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.portal-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

.portal-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.portal-tab.active {
  color: var(--bg-primary);
  background: var(--accent);
}

/* ---- Two-Column Layout ---- */
.portal-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 30px;
  margin-bottom: 60px;
  align-items: start;
}

/* ---- Left: Main Download List ---- */
.portal-main-list {
  display: flex;
  flex-direction: column;
}

/* Hidden by default, active visible */
.platform-tab-content {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.platform-tab-content.active {
  display: flex;
}

/* Row Item styled like files.ar list rows */
.download-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  gap: 20px;
  transition: transform var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.download-row-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Column 1: Logo & App details */
.download-row-item .row-logo-container {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 2;
  min-width: 280px;
}

/* App avatar with color themes matching the reference */
.app-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.app-avatar.theme-blue {
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.app-avatar.theme-green {
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.app-avatar.theme-purple {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: #8B5CF6;
}

.app-avatar.theme-yellow {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #F59E0B;
}

.app-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.app-summary {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.app-category {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Column 2: Platform meta badge */
.row-meta-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0.8;
  min-width: 110px;
}

.row-meta-platform .OS-icon {
  font-size: 1.4rem;
  color: var(--text-secondary);
}

.row-meta-platform .meta-stats {
  display: flex;
  flex-direction: column;
}

.row-meta-platform .meta-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.row-meta-platform .meta-value {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* Column 3: Reputation stars */
.row-meta-reputation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0.8;
  min-width: 90px;
}

.row-meta-reputation .meta-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

.reputation-stars {
  display: flex;
  gap: 2px;
  color: #F59E0B;
  /* Golden yellow */
  font-size: 0.85rem;
}

.reputation-stars .ph-star.fill {
  font-weight: bold;
}

/* Column 4: File size */
.row-meta-size {
  display: flex;
  align-items: baseline;
  flex: 0.8;
  justify-content: flex-end;
  min-width: 80px;
  font-family: var(--font-display);
}

.row-meta-size .size-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.row-meta-size .size-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 2px;
  text-transform: uppercase;
}

/* Column 5: Action download button */
.row-action {
  flex: 0.5;
  display: flex;
  justify-content: flex-end;
  min-width: 46px;
}

.btn-action-download {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.download-row-item:hover .btn-action-download {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
  transform: scale(1.05);
}

/* ---- Right: Sidebar Popular Tools ---- */
.portal-sidebar {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(10px);
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sidebar Item row */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  transition: transform var(--transition-normal);
}

.sidebar-item:hover {
  transform: translateX(4px);
}

.sidebar-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.sidebar-item-thumb.theme-blue {
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.18);
  color: var(--accent);
}

.sidebar-item-thumb.theme-green {
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.18);
  color: var(--accent);
}

.sidebar-item-thumb.theme-purple {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: #8B5CF6;
}

.sidebar-item-thumb.theme-yellow {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.18);
  color: #F59E0B;
}

.sidebar-item-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.sidebar-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.sidebar-item-cat {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.8;
}

.sidebar-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.sidebar-item-size {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
}

.sidebar-item-downloads {
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

.sidebar-item-downloads i {
  font-size: 0.75rem;
}

/* ---- Feature Strip ---- */
.feature-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding: 28px 36px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.feature-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 180px;
}

.feature-strip-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.07);
  border: 1px solid rgba(124, 255, 107, 0.18);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.feature-strip-item:hover .feature-strip-icon-box {
  transform: scale(1.12) rotate(6deg);
  background-color: var(--accent);
  color: #000000;
}

.feature-strip-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

@media (max-width: 1023px) {
  .downloads-section {
    padding: 80px 30px;
  }

  .downloads-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .search-portal-box {
    width: 100%;
  }

  .portal-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .feature-strip {
    padding: 24px;
    gap: 20px;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .downloads-section {
    padding: 60px 20px;
  }

  .download-row-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }

  .download-row-item .row-logo-container {
    width: 100%;
    min-width: unset;
  }

  .row-meta-platform,
  .row-meta-reputation,
  .row-meta-size,
  .row-action {
    width: 100%;
    justify-content: flex-start;
    min-width: unset;
    flex: unset;
  }

  .row-meta-size {
    justify-content: flex-start;
  }

  .row-action {
    margin-top: 4px;
  }

  .btn-action-download {
    width: 100%;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg-primary);
  }

  .feature-strip {
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .feature-strip-item {
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------
   Community & Newsletter Section Styling
-------------------------------------------------------- */

.community-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  overflow: hidden;
}

.community-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}

.community-header .header-left {
  max-width: 680px;
}

/* Split Grid */
.community-split-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 80px;
}

/* Newsletter Card with Floating Animation & Glassmorphism */
.newsletter-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  animation: float-card 6s ease-in-out infinite;
}

@keyframes float-card {

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

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

.newsletter-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Abstract Graphic Illustration inside the card */
.abstract-graphic-wrapper {
  position: relative;
  width: 100%;
  height: 140px;
  margin-bottom: 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abstract-svg {
  width: 85%;
  height: 100%;
}

.glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(2px);
  z-index: 2;
}

.newsletter-form-container {
  position: relative;
  z-index: 2;
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* Email Input with Animated Focus Border */
.email-input-wrapper {
  position: relative;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.email-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: background-color var(--transition-normal);
  font-family: inherit;
}

.email-input::placeholder {
  color: var(--text-tertiary);
}

.input-icon {
  position: absolute;
  left: 20px;
  font-size: 1.25rem;
  color: var(--text-tertiary);
  transition: color var(--transition-normal);
}

/* Animated Border Glow Overlay */
.input-focus-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.email-input:focus~.input-focus-border {
  opacity: 1;
}

.email-input:focus~.input-icon {
  color: var(--accent);
}

/* Glowing Subscribe Button */
.subscribe-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--accent);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.1);
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.subscribe-btn:hover {
  background-color: var(--accent);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.45);
  transform: translateY(-1px);
}

.subscribe-btn i {
  font-size: 1.1rem;
}

.privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-tertiary);
  margin-top: 18px;
  justify-content: center;
}

.privacy-note i {
  color: var(--accent);
}

/* Right Side: Stats & Community Links */
.community-right-panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Statistics cards grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Daily animated counter card */
.stat-card--daily {
  position: relative;
  overflow: hidden;
  /* clips progress bar — prevents scrollbar */
  contain: layout paint;
  /* hard-stop any overflow from escaping */
}

.stat-number--daily {
  display: inline-block;
  transform-origin: left center;
  will-change: opacity, transform;
}

.stat-card--daily::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  max-width: 100%;
  /* never wider than card */
  width: 0%;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.3));
  border-radius: 0 0 18px 18px;
  animation: dailyProgress 2.8s linear infinite;
}

@keyframes dailyProgress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* Social links container — card style matching stat cards */
.community-social-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}

.social-box-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.social-box-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 20px;
}

.social-channels-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.social-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 50% !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.social-btn i {
  font-size: 1.65rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  color: #2563eb !important;
  transition: transform 0.25s ease, color 0.2s ease;
}

.social-btn.youtube i,
.social-btn.discord i {
  font-size: 1.6rem !important;
}

.social-btn.telegram i,
.social-btn.reddit i,
.social-btn.github i,
.social-btn.twitter i {
  font-size: 1.85rem !important;
}

.social-btn:hover {
  transform: translateY(-3px) scale(1.08) !important;
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

.social-btn:hover i {
  color: #ffffff !important;
}

[data-theme="dark"] .social-btn {
  background-color: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .social-btn i {
  color: #60a5fa !important;
}

[data-theme="dark"] .social-btn:hover {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.45) !important;
}

[data-theme="dark"] .social-btn:hover i {
  color: #ffffff !important;
}

/* Trust Banner below layout */
.trust-banner {
  border-top: 1px solid var(--border-color);
  padding-top: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.trust-banner-title {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

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

.trust-badge:hover {
  background-color: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.25);
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .community-section {
    padding: 80px 30px;
  }

  .community-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .community-section {
    padding: 60px 20px;
  }

  .newsletter-card {
    padding: 30px 20px;
  }

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

  .trust-badges-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
  }

  .trust-badge {
    justify-content: center;
  }
}

/* --------------------------------------------------------
   Full-Width Call to Action Section Styling
-------------------------------------------------------- */

.cta-section {
  position: relative;
  padding: 140px 40px;
  background-color: #0b0f19;
  /* Special deep luxury dark background */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Background Effects Container */
.cta-bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.85;
}

/* Blurred Gradient Circle 1 */
.cta-glow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  transition: transform 12s ease-in-out;
}

.cta-glow-1 {
  top: -100px;
  left: 20%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: glow-float-1 20s infinite alternate;
}

/* Blurred Gradient Circle 2 */
.cta-glow-2 {
  bottom: -150px;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
  animation: glow-float-2 24s infinite alternate;
}

@keyframes glow-float-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, 30px) scale(1.1);
  }

  100% {
    transform: translate(-20px, -40px) scale(0.95);
  }
}

@keyframes glow-float-2 {
  0% {
    transform: translate(0, 0) scale(0.95);
  }

  50% {
    transform: translate(-30px, 50px) scale(1.15);
  }

  100% {
    transform: translate(50px, -20px) scale(1);
  }
}

/* Light streaks */
.cta-light-streak {
  position: absolute;
  width: 250px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), transparent);
  transform: rotate(-35deg);
  opacity: 0.6;
}

.cta-streak-1 {
  top: 20%;
  left: -50px;
  animation: slide-streak-1 12s linear infinite;
}

.cta-streak-2 {
  bottom: 30%;
  right: -50px;
  animation: slide-streak-2 15s linear infinite;
}

@keyframes slide-streak-1 {
  0% {
    transform: translate(-200px, -100px) rotate(-35deg);
    opacity: 0;
  }

  15% {
    opacity: 0.6;
  }

  85% {
    opacity: 0.6;
  }

  100% {
    transform: translate(600px, 300px) rotate(-35deg);
    opacity: 0;
  }
}

@keyframes slide-streak-2 {
  0% {
    transform: translate(200px, 100px) rotate(-35deg);
    opacity: 0;
  }

  15% {
    opacity: 0.5;
  }

  85% {
    opacity: 0.5;
  }

  100% {
    transform: translate(-600px, -300px) rotate(-35deg);
    opacity: 0;
  }
}

/* Content Container */
.cta-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.cta-content {
  max-width: 800px;
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-heading {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.cta-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 680px;
}

/* Action Buttons */
.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.cta-btn {
  padding: 16px 36px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* Primary CTA: Green with Black text in Dark Theme, Blue with White text in Light Theme */
.cta-btn.primary-cta {
  background-color: var(--accent) !important;
  color: #06080f !important;
}

.cta-btn.primary-cta span,
.cta-btn.primary-cta i {
  color: #06080f !important;
}

.cta-btn.primary-cta:hover {
  background-color: var(--accent-hover, var(--accent)) !important;
  color: #06080f !important;
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-2px);
}

.cta-btn.secondary-cta {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-btn.secondary-cta span,
.cta-btn.secondary-cta i {
  color: #ffffff !important;
}

.cta-btn.secondary-cta:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Highlight Cards Grid */
.cta-highlights-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
}

/* Premium Glass Highlight Card */
.highlight-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--transition-smooth), border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

.highlight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.highlight-icon {
  font-size: 1.8rem;
  transition: transform var(--transition-smooth);
}

.highlight-card:nth-child(1) .highlight-icon i {
  color: var(--accent);
}

.highlight-card:nth-child(2) .highlight-icon i {
  color: #ef4444;
}

.highlight-card:nth-child(3) .highlight-icon i {
  color: #a855f7;
}

.highlight-card:nth-child(4) .highlight-icon i {
  color: #f59e0b;
}

.highlight-card:nth-child(5) .highlight-icon i {
  color: #10b981;
}

.highlight-card:nth-child(6) .highlight-icon i {
  color: #ec4899;
}

.highlight-card:hover .highlight-icon {
  transform: scale(1.15) rotate(5deg);
}

.highlight-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  transition: color var(--transition-normal);
}

.highlight-card:hover .highlight-title {
  color: #ffffff;
}

/* Light Theme Overrides for CTA Section */
[data-theme="light"] .cta-section {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cta-grid-pattern {
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

[data-theme="light"] .cta-heading {
  color: #0f172a !important;
}

[data-theme="light"] .cta-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .cta-btn.primary-cta {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .cta-btn.primary-cta span,
[data-theme="light"] .cta-btn.primary-cta i {
  color: #ffffff !important;
}

[data-theme="light"] .cta-btn.secondary-cta {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .cta-btn.secondary-cta span,
[data-theme="light"] .cta-btn.secondary-cta i {
  color: #1e293b !important;
}

[data-theme="light"] .cta-btn.secondary-cta:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

[data-theme="light"] .highlight-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .highlight-card:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12) !important;
}

[data-theme="light"] .highlight-title {
  color: #1e293b !important;
}

/* Responsive: Tablet */
@media (max-width: 1023px) {
  .cta-section {
    padding: 100px 30px;
  }

  .cta-heading {
    font-size: 2.3rem;
  }

  .cta-highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .cta-section {
    padding: 80px 20px;
  }

  .cta-heading {
    font-size: 1.85rem;
  }

  .cta-subtitle {
    font-size: 1rem;
  }

  .cta-actions {
    flex-direction: column;
    gap: 12px;
  }

  .cta-btn {
    width: 100%;
    justify-content: center;
    padding: 16px;
  }

  .cta-highlights-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .highlight-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 16px;
  }

  .highlight-icon {
    font-size: 1.45rem;
  }
}

/* --------------------------------------------------------
   Footer Section Styling (Premium Dark Theme Matching Reference)
-------------------------------------------------------- */

.site-footer,
.main-footer,
footer.site-footer,
[data-theme="light"] .site-footer,
[data-theme="light"] .main-footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .main-footer {
  position: relative;
  background-color: #080b12 !important;
  background: #080b12 !important;
  color: #94a3b8 !important;
  padding: 60px 32px 30px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --border-color: rgba(255, 255, 255, 0.08);
}

.site-footer .footer-container,
.main-footer .footer-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.footer-bg-glow {
  position: absolute;
  bottom: -150px;
  left: 30%;
  width: 500px;
  height: 300px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Compact 4-Column Grid */
.footer-columns-grid.minimal-4-col {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

@media (max-width: 991px) {
  .footer-columns-grid.minimal-4-col {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 576px) {
  .footer-columns-grid.minimal-4-col {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.footer-column h4,
.site-footer .footer-column h4,
.main-footer .footer-column h4,
[data-theme="light"] .site-footer .footer-column h4,
[data-theme="light"] .main-footer .footer-column h4 {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  margin-bottom: 20px;
  margin-top: 0;
}

/* Brand Column styling */
.brand-col .footer-logo,
.site-footer .footer-logo,
.main-footer .footer-logo {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.site-footer .logo-accent,
.main-footer .logo-accent,
[data-theme="light"] .site-footer .logo-accent,
[data-theme="light"] .main-footer .logo-accent {
  color: #2563eb !important;
}

.site-footer .logo-light,
.main-footer .logo-light,
[data-theme="light"] .site-footer .logo-light,
[data-theme="light"] .main-footer .logo-light {
  color: #f1f5f9 !important;
  font-weight: 700;
}

.brand-col .about-title,
.site-footer .about-title,
.main-footer .about-title,
[data-theme="light"] .site-footer .about-title,
[data-theme="light"] .main-footer .about-title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  margin-bottom: 10px;
  margin-top: 6px;
}

.brand-col .brand-desc,
.site-footer .brand-desc,
.main-footer .brand-desc,
[data-theme="light"] .site-footer .brand-desc,
[data-theme="light"] .main-footer .brand-desc {
  font-size: 0.85rem;
  color: #94a3b8 !important;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 360px;
}

.follow-us-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.follow-us-label,
.site-footer .follow-us-label,
.main-footer .follow-us-label,
[data-theme="light"] .site-footer .follow-us-label,
[data-theme="light"] .main-footer .follow-us-label {
  font-size: 0.78rem;
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Social links list */
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.footer-social-icon,
.site-footer .footer-social-icon,
.main-footer .footer-social-icon,
[data-theme="light"] .site-footer .footer-social-icon,
[data-theme="light"] .main-footer .footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-icon i,
.site-footer .footer-social-icon i,
.main-footer .footer-social-icon i,
[data-theme="light"] .site-footer .footer-social-icon i,
[data-theme="light"] .main-footer .footer-social-icon i {
  color: #94a3b8 !important;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease;
}

.footer-social-icon:hover {
  transform: translateY(-2px);
  background-color: rgba(37, 99, 235, 0.2) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.footer-social-icon:hover i {
  color: #60a5fa !important;
}

/* Link Lists styling */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list a,
.site-footer .footer-links-list a,
.main-footer .footer-links-list a,
[data-theme="light"] .site-footer .footer-links-list a,
[data-theme="light"] .main-footer .footer-links-list a {
  font-size: 0.875rem;
  color: #94a3b8 !important;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.footer-links-list a:hover,
.site-footer .footer-links-list a:hover,
.main-footer .footer-links-list a:hover,
[data-theme="light"] .site-footer .footer-links-list a:hover,
[data-theme="light"] .main-footer .footer-links-list a:hover {
  color: #ffffff !important;
  transform: translateX(3px);
}

/* Bottom Bar styling */
.footer-bottom-bar,
.site-footer .footer-bottom-bar,
.main-footer .footer-bottom-bar,
[data-theme="light"] .site-footer .footer-bottom-bar,
[data-theme="light"] .main-footer .footer-bottom-bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 24px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.bottom-left p,
.site-footer .bottom-left p,
.main-footer .bottom-left p,
[data-theme="light"] .site-footer .bottom-left p,
[data-theme="light"] .main-footer .bottom-left p {
  font-size: 0.82rem;
  color: #64748b !important;
  margin: 0;
}

.enthusiasts-tag,
.site-footer .enthusiasts-tag,
.main-footer .enthusiasts-tag,
[data-theme="light"] .site-footer .enthusiasts-tag,
[data-theme="light"] .main-footer .enthusiasts-tag {
  font-size: 0.82rem;
  color: #64748b !important;
  font-weight: 400;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: transform 0.4s var(--transition-smooth), opacity 0.4s var(--transition-smooth), visibility 0.4s var(--transition-smooth), background-color var(--transition-normal), border-color var(--transition-normal);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.35);
}

/* Responsive: Tablet viewports */
@media (max-width: 1023px) {
  .footer-columns-grid.minimal-4-col {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .brand-col {
    grid-column: span 2;
  }
}

/* Responsive: Mobile viewports */
@media (max-width: 767px) {
  .main-footer {
    padding: 40px 20px 20px;
  }

  .footer-columns-grid.minimal-4-col {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    margin-bottom: 25px;
  }

  .brand-col {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .brand-col .brand-desc {
    max-width: 100%;
  }

  .footer-links-list {
    align-items: center;
    gap: 6px;
  }

  .footer-links-list a {
    font-size: 0.88rem;
    /* Larger touch targets */
    padding: 4px 0;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 15px;
    gap: 12px;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------
   Mega Menu Responsive — Tablet & below
   (hamburger drawer handles navigation on these sizes)
-------------------------------------------------------- */
@media (max-width: 1023px) {
  .mega-menu {
    display: none;
  }
}

/* --------------------------------------------------------
   Tutorials Page — Premium Hero & Content Styling
-------------------------------------------------------- */

.tutorials-hero {
  padding: 140px 40px 80px;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.tutorials-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* ---- Left Column Content ---- */
.hero-left-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-category-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 30px;
  background-color: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-main-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.hero-subtitle-text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 30px;
}

.hero-cta-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

/* Stats Layout */
.hero-stats-row {
  display: flex;
  gap: 36px;
  border-top: 1px solid var(--border-color);
  padding-top: 30px;
  width: 100%;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-plus {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.stat-lbl {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* ---- Right Column: Custom 3D Tech Visual Mockup ---- */
.hero-right-visual {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.tech-mockup-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Ambient glow spotlights */
.glow-spotlight {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.glow-mint {
  top: 10%;
  left: 20%;
  width: 250px;
  height: 250px;
  background: var(--accent);
}

.glow-blue {
  bottom: 10%;
  right: 10%;
  width: 280px;
  height: 280px;
  background: #3B82F6;
}

/* Mockup elements */
.mockup-monitor {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 280px;
  height: 175px;
  background: #0d121f;
  border: 4px solid #1e293b;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  z-index: 3;
  transform: rotateY(-10deg) translateZ(10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.monitor-screen {
  flex-grow: 1;
  background: #090d16;
  position: relative;
}

.player-studio-ui {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.player-studio-ui .ui-header {
  height: 24px;
  background: #111827;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ui-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
}

.ui-dots span:nth-child(2) {
  background: #eab308;
}

.ui-dots span:nth-child(3) {
  background: #22c55e;
}

.ui-address-bar {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 8px;
  border-radius: 4px;
  flex-grow: 1;
  max-width: 140px;
  margin-left: 10px;
  text-align: center;
}

.player-studio-ui .ui-sidebar-mock {
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 0;
  width: 45px;
  background: #0b0f17;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.player-studio-ui .ui-main-panel {
  position: absolute;
  left: 45px;
  right: 0;
  top: 24px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.main-play-icon {
  font-size: 2.2rem;
  color: var(--accent);
}

.mock-waveforms {
  display: flex;
  gap: 4px;
  height: 20px;
  align-items: center;
}

.mock-waveforms span {
  display: block;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.mock-waveforms span:nth-child(2) {
  height: 18px;
  background: var(--accent);
}

.mock-waveforms span:nth-child(3) {
  height: 8px;
}

.mock-waveforms span:nth-child(4) {
  height: 14px;
  background: var(--accent);
}

.monitor-neck {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 22px;
  background: #1e293b;
  z-index: 2;
}

.monitor-base {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 6px;
  background: #334155;
  border-radius: 4px;
  z-index: 2;
}

/* TV Mockup */
.mockup-tv {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 320px;
  height: 180px;
  background: #06080e;
  border: 5px solid #1e293b;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
  z-index: 1;
  transform: rotateY(12deg) translateZ(-40px);
  overflow: hidden;
}

.tv-screen {
  width: 100%;
  height: 100%;
}

.tv-app-ui {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: linear-gradient(to bottom, rgba(6, 8, 14, 0.4), rgba(6, 8, 14, 0.95));
}

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

.tv-banner .badge {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: max-content;
}

.tv-banner h5 {
  font-size: 0.9rem;
  color: #fff;
}

.tv-grid-thumbnails {
  display: flex;
  gap: 10px;
}

.tv-grid-thumbnails span {
  display: block;
  flex-grow: 1;
  height: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

/* Tablet Mockup */
.mockup-tablet {
  position: absolute;
  bottom: 12%;
  left: 15%;
  width: 130px;
  height: 190px;
  background: #0b0f19;
  border: 4px solid #1e293b;
  border-radius: 14px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  z-index: 4;
  transform: rotateX(8deg) rotateY(-8deg) translateZ(30px);
  overflow: hidden;
}

.tablet-screen {
  width: 100%;
  height: 100%;
  padding: 12px;
}

.tablet-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.tablet-ui i {
  font-size: 1.8rem;
  color: var(--accent);
}

.tablet-ui .bar-lbl {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.tablet-ui .progress-bar {
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.tablet-ui .progress-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 65%;
  background: var(--accent);
}

/* Phone Mockup */
.mockup-phone {
  position: absolute;
  bottom: 8%;
  right: 15%;
  width: 75px;
  height: 145px;
  background: #090c13;
  border: 3.5px solid #334155;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
  z-index: 5;
  transform: rotateX(-5deg) rotateY(12deg) translateZ(40px);
  overflow: hidden;
}

.phone-screen {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.phone-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.phone-ui i {
  font-size: 1.3rem;
  color: var(--accent);
}

.phone-ui span {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-secondary);
}

/* Floating UI cards */
.floating-ui-card {
  position: absolute;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transition: transform var(--transition-smooth);
}

.floating-ui-card:hover {
  transform: scale(1.05) translateZ(10px);
}

.floating-ui-card i {
  font-size: 1.3rem;
  color: var(--accent);
}

.floating-ui-card div {
  display: flex;
  flex-direction: column;
}

.floating-ui-card h6 {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

.floating-ui-card span {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.floating-ui-card.card-1 {
  top: 8%;
  left: -2%;
  z-index: 6;
}

.floating-ui-card.card-1 i {
  color: var(--accent);
}

.floating-ui-card.card-2 {
  top: 48%;
  right: -5%;
  z-index: 6;
}

.floating-ui-card.card-3 {
  bottom: 8%;
  left: 2%;
  z-index: 6;
}

/* ---- Search & Filter Section ---- */
.search-filter-section {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 30px 40px;
  position: relative;
  z-index: 15;
}

.search-filter-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-bar-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 20px;
  gap: 12px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.search-bar-container:focus-within {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.08);
}

.search-bar-container i {
  color: var(--text-secondary);
  font-size: 1.25rem;
}

.search-bar-container input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.search-bar-container input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.filter-chips-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.filter-chips-container::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

.filter-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.filter-chip.active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}

/* Custom Select Sort Dropdown */
.sort-container {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding-right: 12px;
}

.sort-container select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 36px 10px 16px;
  cursor: pointer;
}

.sort-container select:focus {
  color: var(--text-primary);
}

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

/* ---- Tutorials Catalog Section ---- */
.tutorials-catalog-section {
  padding: 80px 40px;
  background-color: var(--bg-primary);
}

.tutorials-catalog-section .section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tutorials-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.catalog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.catalog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.catalog-card-image-box {
  height: 170px;
  position: relative;
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.04) 0%, rgba(59, 130, 246, 0.04) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-card-image-box .category-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(12, 15, 24, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.catalog-card-image-box .icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.catalog-card-image-box.video-play-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 14, 0.4);
  transition: opacity 0.25s ease;
}

.catalog-card-image-box.video-play-overlay .icon-wrap {
  z-index: 2;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.2);
}

.catalog-card-details {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.catalog-card .card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 8px;
}

.catalog-card .card-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
  flex-grow: 1;
}

.catalog-card .card-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s ease;
}

.catalog-card:hover .card-link {
  gap: 8px;
}

.catalog-card-image-box.video-play-overlay+.catalog-card-details .card-link {
  color: var(--accent);
}

/* No Results placeholder */
.no-catalog-results {
  text-align: center;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.no-catalog-results i {
  font-size: 2.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.no-catalog-results h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.no-catalog-results p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---- Responsive Tutorials ---- */
@media (max-width: 1023px) {
  .tutorials-hero {
    padding: 110px 30px 60px;
  }

  .tutorials-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-right-visual {
    height: 400px;
  }

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

@media (max-width: 767px) {
  .tutorials-hero {
    padding: 90px 20px 50px;
  }

  .hero-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats-row {
    flex-wrap: wrap;
    gap: 20px 30px;
  }

  .search-filter-section {
    padding: 20px;
  }

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

  .sort-container {
    width: 100%;
  }

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

  .tutorials-catalog-section {
    padding: 40px 20px;
  }

  .tutorials-catalog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-right-visual {
    height: 320px;
  }

  .mockup-tv {
    width: 260px;
    height: 145px;
  }

  .mockup-monitor {
    width: 220px;
    height: 140px;
  }

  .mockup-tablet {
    width: 100px;
    height: 145px;
  }

  .floating-ui-card.card-2 {
    right: 0%;
  }
}


/* ============================================================
   RIGHT SIDE DROPDOWNS & BADGES
   ============================================================ */

.dropdown-menu--right {
  left: auto !important;
  right: 0 !important;
  transform: translateY(10px) !important;
}

.nav-item.has-dropdown.is-open .dropdown-menu--right {
  transform: translateY(0) !important;
}

.dropdown-menu--wide {
  width: 280px !important;
}

.dropdown-header {
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  pointer-events: none;
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}

.header-actions .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-actions .dropdown-menu {
  top: calc(100% - 10px);
}


/* ============================================================
   MEGA MENU POSITIONING & VISIBILITY OVERRIDES
   ============================================================ */

/* Centre every mega menu under its trigger */
.mega-menu {
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* ---- Open state: force full visibility for ALL mega items ---- */
.nav-item.has-mega.is-open>.mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Left-boundary items (1st & 2nd tab) – align to left edge so panel stays on-screen */
.nav-list>li:nth-child(1)>.mega-menu,
.nav-list>li:nth-child(2)>.mega-menu {
  left: 0 !important;
  right: auto !important;
  transform: translateY(10px) !important;
}

.nav-list>li:nth-child(1).is-open>.mega-menu,
.nav-list>li:nth-child(2).is-open>.mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Right-boundary items (6th & 7th tab) – align to right edge */
.nav-list>li:nth-child(6)>.mega-menu,
.nav-list>li:nth-child(7)>.mega-menu {
  left: auto !important;
  right: 0 !important;
  transform: translateY(10px) !important;
}

.nav-list>li:nth-child(6).is-open>.mega-menu,
.nav-list>li:nth-child(7).is-open>.mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}


/* ============================================================
   RIGHT SIDE ACTION ICONS & NOTIFICATION BADGE
   ============================================================ */

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px !important;
}

.header-actions .action-btn {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 1px solid var(--bg-secondary);
}

[data-theme="light"] .notif-badge {
  border-color: #fff;
}


/* ── Blog Read More Link (replaces buttons) ── */
.bd-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s, opacity 0.2s;
}

.bd-read-link:hover {
  gap: 10px;
  opacity: 0.85;
}

/* ── Ensure Read More links are always above card overlays ── */
.bd-read-link {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.feat-card-content,
.feat-hero-card__info-panel,
.feat-grid-card__inner,
.post-card-body,
.tut-card-content,
.beg-card-content,
.exp-card-body,
.iptv-card-content,
.tips-card-body {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   GLOBAL UNIFIED SECTION HEADER & HERO EYEBROW BADGE STYLES (PILL BADGE DESIGN)
   ========================================================================== */
.dl-sec-eyebrow,
.sec-eyebrow,
.section-eyebrow,
.news-hero-eyebrow,
.blog-badge-main,
.blog-badge-row span,
.news-badge-main,
.tut-hero__badge,
.hero-badge,
.setup-feat-card__eyebrow,
.setup-wizard-eyebrow,
.swrev-feat-eyebrow,
.comp-feat-eyebrow,
.comp-wizard-eyebrow,
.bg-feat-eyebrow,
.bg-wizard-eyebrow,
.tc-feat-eyebrow,
.tc-wizard-eyebrow,
.dl-feat-eyebrow,
.fav-feat-eyebrow,
.rev-feat__eyebrow,
.rev-cat-sec__eyebrow,
.rev-media-sec__eyebrow,
.rev-dev-sec__eyebrow,
.rev-vpn-sec__eyebrow,
.rev-comp-sec__eyebrow,
.rev-award-sec__eyebrow,
.rev-latest-sec__eyebrow,
.rev-method-sec__eyebrow,
.rev-faq-sec__eyebrow,
.rev-nl-eyebrow,
.dev-spec__eyebrow,
.dev-pop-tuts__eyebrow,
.vid-tuts__eyebrow,
.lp-sec__eyebrow,
.exp-res__eyebrow,
.tut-faq__eyebrow,
.dev-tut-cat__eyebrow,
.news-comm-sec__eyebrow,
.dc-hero__eyebrow,
.dev-faq__eyebrow,
.dev-nl__eyebrow,
.dl-hero__eyebrow,
.dl-cat-banner__eyebrow,
.dl-cta-sec__eyebrow,
.tut-section-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7cff6b !important;
  background: rgba(124, 255, 107, 0.08) !important;
  border: 1px solid rgba(124, 255, 107, 0.28) !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(124, 255, 107, 0.08) !important;
  width: fit-content !important;
}

.dl-sec-eyebrow i,
.sec-eyebrow i,
.section-eyebrow i,
.news-hero-eyebrow i,
.blog-badge-main i {
  color: inherit !important;
  font-size: 0.85em !important;
}

/* Light theme section header eyebrow pill override */
[data-theme="light"] .dl-sec-eyebrow,
[data-theme="light"] .sec-eyebrow,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .news-hero-eyebrow,
[data-theme="light"] .blog-badge-main,
[data-theme="light"] .blog-badge-row span,
[data-theme="light"] .news-badge-main,
[data-theme="light"] .tut-hero__badge,
[data-theme="light"] .hero-badge,
[data-theme="light"] .setup-feat-card__eyebrow,
[data-theme="light"] .setup-wizard-eyebrow,
[data-theme="light"] .swrev-feat-eyebrow,
[data-theme="light"] .comp-feat-eyebrow,
[data-theme="light"] .comp-wizard-eyebrow,
[data-theme="light"] .bg-feat-eyebrow,
[data-theme="light"] .bg-wizard-eyebrow,
[data-theme="light"] .tc-feat-eyebrow,
[data-theme="light"] .tc-wizard-eyebrow,
[data-theme="light"] .dl-feat-eyebrow,
[data-theme="light"] .fav-feat-eyebrow,
[data-theme="light"] .rev-feat__eyebrow,
[data-theme="light"] .rev-cat-sec__eyebrow,
[data-theme="light"] .rev-media-sec__eyebrow,
[data-theme="light"] .rev-dev-sec__eyebrow,
[data-theme="light"] .rev-vpn-sec__eyebrow,
[data-theme="light"] .rev-comp-sec__eyebrow,
[data-theme="light"] .rev-award-sec__eyebrow,
[data-theme="light"] .rev-latest-sec__eyebrow,
[data-theme="light"] .rev-method-sec__eyebrow,
[data-theme="light"] .rev-faq-sec__eyebrow,
[data-theme="light"] .rev-nl-eyebrow,
[data-theme="light"] .dev-spec__eyebrow,
[data-theme="light"] .dev-pop-tuts__eyebrow,
[data-theme="light"] .vid-tuts__eyebrow,
[data-theme="light"] .lp-sec__eyebrow,
[data-theme="light"] .exp-res__eyebrow,
[data-theme="light"] .tut-faq__eyebrow,
[data-theme="light"] .dev-tut-cat__eyebrow,
[data-theme="light"] .news-comm-sec__eyebrow,
[data-theme="light"] .dc-hero__eyebrow,
[data-theme="light"] .dev-faq__eyebrow,
[data-theme="light"] .dev-nl__eyebrow,
[data-theme="light"] .dl-hero__eyebrow,
[data-theme="light"] .dl-cat-banner__eyebrow,
[data-theme="light"] .dl-cta-sec__eyebrow {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

/* Ensure static language dropdowns are hidden by default */
.lang-dropdown:not(#langDropdownPanel):not(.open) {
  display: none !important;
}

/* ============================================================
   LIGHT THEME HYPERLINK ENFORCEMENT (#2563eb Royal Blue)
   ============================================================ */
[data-theme="light"] .btn-explore-cat,
[data-theme="light"] .btn-cats-explore,
[data-theme="light"] .dl-view-all,
[data-theme="light"] .blog-sec-link,
[data-theme="light"] .tut-view-all,
[data-theme="light"] .news-sec-link,
[data-theme="light"] .rev-sec-link,
[data-theme="light"] .sec-view-all,
[data-theme="light"] .view-all-link,
[data-theme="light"] .read-article-link,
[data-theme="light"] .read-full-guide,
[data-theme="light"] .featured-link,
[data-theme="light"] .card-link,
[data-theme="light"] .hero-link,
[data-theme="light"] .btn-read-more,
[data-theme="light"] .cats-spotlight-card a,
[data-theme="light"] .cats-carousel-card a,
[data-theme="light"] .cat-grid-card a {
  color: #2563eb !important;
  font-weight: 600;
}

[data-theme="light"] .btn-mag-more,
[data-theme="light"] .btn-dev-card-more,
[data-theme="light"] .btn-trend-more,
[data-theme="light"] .btn-recommend-explore,
[data-theme="light"] .btn-post-read,
[data-theme="light"] .btn-feat-more,
[data-theme="light"] .btn-tut-more,
[data-theme="light"] .btn-beg-more,
[data-theme="light"] .btn-exp-more,
[data-theme="light"] .btn-tips-more,
[data-theme="light"] .btn-swrev-read-card,
[data-theme="light"] .btn-bg-guide-read,
[data-theme="light"] .btn-tc-fix-read,
[data-theme="light"] .btn-fav-trend-read,
[data-theme="light"] .btn-explore-cat,
[data-theme="light"] .btn-cats-explore,
[data-theme="light"] .dl-view-all,
[data-theme="light"] .blog-sec-link,
[data-theme="light"] .tut-view-all,
[data-theme="light"] .news-sec-link,
[data-theme="light"] .rev-sec-link,
[data-theme="light"] .sec-view-all,
[data-theme="light"] .view-all-link,
[data-theme="light"] .read-article-link,
[data-theme="light"] .read-full-guide,
[data-theme="light"] .featured-link,
[data-theme="light"] .card-link,
[data-theme="light"] .hero-link,
[data-theme="light"] .btn-read-more {
  color: #2563eb !important;
}

[data-theme="light"] .btn-mag-more:hover,
[data-theme="light"] .btn-dev-card-more:hover,
[data-theme="light"] .btn-trend-more:hover,
[data-theme="light"] .btn-recommend-explore:hover,
[data-theme="light"] .btn-post-read:hover,
[data-theme="light"] .btn-feat-more:hover,
[data-theme="light"] .btn-tut-more:hover,
[data-theme="light"] .btn-beg-more:hover,
[data-theme="light"] .btn-exp-more:hover,
[data-theme="light"] .btn-tips-more:hover,
[data-theme="light"] .btn-swrev-read-card:hover,
[data-theme="light"] .btn-bg-guide-read:hover,
[data-theme="light"] .btn-tc-fix-read:hover,
[data-theme="light"] .btn-fav-trend-read:hover,
[data-theme="light"] .btn-explore-cat:hover,
[data-theme="light"] .btn-cats-explore:hover,
[data-theme="light"] .dl-view-all:hover,
[data-theme="light"] .blog-sec-link:hover,
[data-theme="light"] .tut-view-all:hover,
[data-theme="light"] .news-sec-link:hover,
[data-theme="light"] .rev-sec-link:hover,
[data-theme="light"] .sec-view-all:hover,
[data-theme="light"] .view-all-link:hover,
[data-theme="light"] .read-article-link:hover,
[data-theme="light"] .read-full-guide:hover,
[data-theme="light"] .featured-link:hover,
[data-theme="light"] .card-link:hover,
[data-theme="light"] .hero-link:hover,
[data-theme="light"] .btn-read-more:hover {
  color: #1d4ed8 !important;
}

[data-theme="light"] a:not(.nav-link):not(.brand):not(.logo):not(.btn-primary):not(.action-btn):not(.btn-header):not(.footer-col-title):not(.btn-secondary):not(.btn-outline) {
  color: #2563eb;
}

[data-theme="light"] a:not(.nav-link):not(.brand):not(.logo):not(.btn-primary):not(.action-btn):not(.btn-header):not(.footer-col-title):not(.btn-secondary):not(.btn-outline):hover {
  color: #1d4ed8;
}

/* ============================================================
   LIGHT THEME HIGH-CONTRAST VISIBILITY OVERRIDES
   ============================================================ */
[data-theme="light"] .news-section-title,
[data-theme="light"] .tags-section-title,
[data-theme="light"] .collections-section-title,
[data-theme="light"] .path-section-title,
[data-theme="light"] .toolkit-section-title,
[data-theme="light"] .faq-section-title,
[data-theme="light"] .tracks-section-title,
[data-theme="light"] .code-section-title,
[data-theme="light"] .tools-section-title,
[data-theme="light"] .devices-section-title,
[data-theme="light"] .glossary-section-title,
[data-theme="light"] .fav-section-title,
[data-theme="light"] .sec-title,
[data-theme="light"] .dl-sec-title,
[data-theme="light"] .section-title {
  color: #0f172a !important;
}

[data-theme="light"] .news-faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .news-faq-trigger {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .news-faq-trigger i {
  color: #64748b !important;
}

[data-theme="light"] .news-faq-panel p {
  color: #475569 !important;
}

[data-theme="light"] .news-social-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .news-social-card h4 {
  color: #0f172a !important;
}

[data-theme="light"] .news-social-count {
  color: #64748b !important;
}

[data-theme="light"] .news-social-card[data-social="x"] .news-social-icon {
  color: #0f172a !important;
}

[data-theme="light"] .news-social-card[data-social="github"] .news-social-icon {
  color: #0f172a !important;
}

[data-theme="light"] .btn-news-social-follow {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-news-social-follow:hover {
  background: #7C3AED !important;
  color: #ffffff !important;
  border-color: #7C3AED !important;
}

/* ========================================================
   Download Portal & Download Center Light Theme Overrides
   ======================================================== */
[data-theme="light"] .search-portal-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .search-portal-box input {
  color: #0f172a !important;
}

[data-theme="light"] .search-portal-box input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

[data-theme="light"] .search-portal-box .search-icon {
  color: #2563eb !important;
}

[data-theme="light"] .portal-tabs-bar {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .portal-tab {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .portal-tab:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

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

[data-theme="light"] .download-row-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .download-row-item:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12) !important;
}

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

[data-theme="light"] .app-summary {
  color: #475569 !important;
}

[data-theme="light"] .app-category {
  color: #2563eb !important;
}

[data-theme="light"] .row-meta-platform .meta-label {
  color: #0f172a !important;
}

[data-theme="light"] .row-meta-platform .meta-value {
  color: #475569 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .row-meta-platform .OS-icon {
  color: #475569 !important;
}

[data-theme="light"] .row-meta-reputation .meta-title {
  color: #475569 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .reputation-stars {
  color: #d97706 !important;
}

[data-theme="light"] .row-meta-size .size-val {
  color: #0f172a !important;
}

[data-theme="light"] .row-meta-size .size-unit {
  color: #475569 !important;
}

[data-theme="light"] .btn-action-download {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .download-row-item:hover .btn-action-download {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

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

[data-theme="light"] .sidebar-title {
  color: #0f172a !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-item-name {
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-item-cat {
  color: #475569 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .sidebar-item-downloads {
  color: #64748b !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .sidebar-item-size {
  color: #2563eb !important;
}

[data-theme="light"] .downloads-header .section-badge,
[data-theme="light"] .downloads-section .section-badge {
  color: #2563eb !important;
}

[data-theme="light"] .tut-section-badge__dot,
[data-theme="light"] .badge-dot,
[data-theme="light"] .tut-section-badge .tut-section-badge__dot,
[data-theme="light"] .exp-res__eyebrow .tut-section-badge__dot,
[data-theme="light"] .downloads-header .badge-dot,
[data-theme="light"] .downloads-section .badge-dot {
  background-color: #2563eb !important;
  background: #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7), 0 0 4px rgba(37, 99, 235, 0.5) !important;
}

[data-theme="light"] .feature-strip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .feature-strip-text {
  color: #334155 !important;
}

/* --------------------------------------------------------
   User Custom Dark Theme Rules: Green Button Black Text & Neon Green Heading
-------------------------------------------------------- */
[data-theme="dark"] .main-headline .text-gradient,
[data-theme="dark"] .hero-title .text-gradient,
[data-theme="dark"] .section-title .text-gradient {
  background: linear-gradient(90deg, #7cff6b 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #7cff6b;
}

/* Green buttons & elements must have black font in dark mode */
:root:not([data-theme="light"]) .btn-accent,
:root:not([data-theme="light"]) .btn-primary,
:root:not([data-theme="light"]) .btn-green,
:root:not([data-theme="light"]) .btn-glow,
:root:not([data-theme="light"]) .btn-mag-read,
:root:not([data-theme="light"]) .badge-green,
:root:not([data-theme="light"]) .subscribe-btn,
:root:not([data-theme="light"]) .subscribe-btn:hover,
:root:not([data-theme="light"]) .social-btn:hover,
:root:not([data-theme="light"]) .bd-newsletter__btn,
:root:not([data-theme="light"]) .bd-newsletter__btn:hover,
:root:not([data-theme="light"]) .btn-news-subscribe,
:root:not([data-theme="light"]) .btn-news-subscribe:hover,
:root:not([data-theme="light"]) .dev-nl__btn,
:root:not([data-theme="light"]) .dev-nl__btn:hover,
:root:not([data-theme="light"]) .newsletter-submit-btn,
:root:not([data-theme="light"]) .rev-tab-btn.active,
:root:not([data-theme="light"]) .hub-tab-btn.active,
:root:not([data-theme="light"]) .swrev-card__score-badge.top,
:root:not([data-theme="light"]) .category-chip.active,
:root:not([data-theme="light"]) .cat-chip.active,
:root:not([data-theme="light"]) .filter-chip.active,
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-green,
[data-theme="dark"] .btn-glow,
[data-theme="dark"] .btn-mag-read,
[data-theme="dark"] .badge-green,
[data-theme="dark"] .subscribe-btn,
[data-theme="dark"] .subscribe-btn:hover,
[data-theme="dark"] .social-btn:hover,
[data-theme="dark"] .bd-newsletter__btn,
[data-theme="dark"] .bd-newsletter__btn:hover,
[data-theme="dark"] .btn-news-subscribe,
[data-theme="dark"] .btn-news-subscribe:hover,
[data-theme="dark"] .dev-nl__btn,
[data-theme="dark"] .dev-nl__btn:hover,
[data-theme="dark"] .newsletter-submit-btn,
[data-theme="dark"] .rev-tab-btn.active,
[data-theme="dark"] .hub-tab-btn.active,
[data-theme="dark"] .swrev-card__score-badge.top,
[data-theme="dark"] .category-chip.active,
[data-theme="dark"] .cat-chip.active,
[data-theme="dark"] .filter-chip.active {
  color: #000000 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .btn-accent *,
[data-theme="dark"] .btn-primary *,
[data-theme="dark"] .btn-green *,
[data-theme="dark"] .badge-green *,
[data-theme="dark"] .subscribe-btn *,
[data-theme="dark"] .subscribe-btn:hover *,
[data-theme="dark"] .social-btn:hover i,
[data-theme="dark"] .bd-newsletter__btn *,
[data-theme="dark"] .bd-newsletter__btn:hover *,
[data-theme="dark"] .btn-news-subscribe *,
[data-theme="dark"] .btn-news-subscribe:hover *,
[data-theme="dark"] .dev-nl__btn *,
[data-theme="dark"] .dev-nl__btn:hover *,
[data-theme="dark"] .newsletter-submit-btn *,
[data-theme="dark"] .rev-tab-btn.active *,
[data-theme="dark"] .hub-tab-btn.active *,
[data-theme="dark"] .rev-tab-btn.active i,
[data-theme="dark"] .hub-tab-btn.active i,
[data-theme="dark"] .btn-accent i,
[data-theme="dark"] .btn-primary i,
[data-theme="dark"] .subscribe-btn i,
[data-theme="dark"] .bd-newsletter__btn i,
[data-theme="dark"] .btn-news-subscribe i {
  color: #000000 !important;
}

/* ============================================================
   LIGHT THEME BLUE BUTTON & ACTIVE TAB/CHIP ENFORCEMENT (WHITE TEXT)
   ============================================================ */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-accent,
[data-theme="light"] .btn-accent:hover,
[data-theme="light"] .btn-blue,
[data-theme="light"] .btn-blue:hover,
[data-theme="light"] .subscribe-btn,
[data-theme="light"] .subscribe-btn:hover,
[data-theme="light"] .social-btn:hover,
[data-theme="light"] .dev-btn--primary,
[data-theme="light"] .dev-pop-large-card__explore-btn,
[data-theme="light"] .dev-guides-tab.active,
[data-theme="light"] .dev-pop-filter-chip.active,
[data-theme="light"] .dev-ts-chip.active,
[data-theme="light"] .dev-chip.active,
[data-theme="light"] .dev-filter-chip.active,
[data-theme="light"] .dev-ts__help-btn--primary,
[data-theme="light"] .dev-cmp-card__btn,
[data-theme="light"] .dev-cmp-card__badge-top,
[data-theme="light"] .dev-matrix-card__cta,
[data-theme="light"] .dev-matrix-col__cta,
[data-theme="light"] .dev-matrix-banner__btn,
[data-theme="light"] .dev-compare-banner__btn,
[data-theme="light"] .dev-faq-banner__btn,
[data-theme="light"] .dev-newsletter__btn,
[data-theme="light"] .dev-sub-btn,
[data-theme="light"] .dev-cta-banner__btn,
[data-theme="light"] .exp-res-card__cta--filled,
[data-theme="light"] .exp-feat-card__btn,
[data-theme="light"] .exp-feat-card__btn:hover,
[data-theme="light"] .tut-featured__large-btn,
[data-theme="light"] .tut-featured__large-btn:hover,
[data-theme="light"] .dl-chip--active,
[data-theme="light"] .dl-chip.active,
[data-theme="light"] .dl-chip--active *,
[data-theme="light"] .dl-chip.active *,
[data-theme="light"] .portal-tab.active,
[data-theme="light"] .download-row-item:hover .btn-action-download {
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary *,
[data-theme="light"] .btn-primary:hover *,
[data-theme="light"] .btn-accent *,
[data-theme="light"] .btn-accent:hover *,
[data-theme="light"] .btn-blue *,
[data-theme="light"] .subscribe-btn *,
[data-theme="light"] .subscribe-btn:hover *,
[data-theme="light"] .social-btn:hover i,
[data-theme="light"] .dev-btn--primary *,
[data-theme="light"] .dev-pop-large-card__explore-btn *,
[data-theme="light"] .dev-guides-tab.active *,
[data-theme="light"] .dev-pop-filter-chip.active *,
[data-theme="light"] .dev-ts-chip.active *,
[data-theme="light"] .dev-chip.active *,
[data-theme="light"] .dev-filter-chip.active *,
[data-theme="light"] .dev-ts__help-btn--primary *,
[data-theme="light"] .dev-cmp-card__btn *,
[data-theme="light"] .dev-cmp-card__badge-top *,
[data-theme="light"] .dev-matrix-card__cta *,
[data-theme="light"] .dev-matrix-col__cta *,
[data-theme="light"] .dev-matrix-banner__btn *,
[data-theme="light"] .dev-compare-banner__btn *,
[data-theme="light"] .dev-faq-banner__btn *,
[data-theme="light"] .dev-newsletter__btn *,
[data-theme="light"] .dev-sub-btn *,
[data-theme="light"] .dev-cta-banner__btn *,
[data-theme="light"] .exp-res-card__cta--filled *,
[data-theme="light"] .exp-feat-card__btn *,
[data-theme="light"] .exp-feat-card__btn:hover *,
[data-theme="light"] .tut-featured__large-btn *,
[data-theme="light"] .tut-featured__large-btn:hover *,
[data-theme="light"] .portal-tab.active *,
[data-theme="light"] .download-row-item:hover .btn-action-download * {
  color: #ffffff !important;
}

/* ========================================================
   Homepage Unified High-Contrast Light Theme Overrides
   ======================================================== */
[data-theme="light"] .hero-container {
  background: #ffffff !important;
}

[data-theme="light"] .main-headline {
  color: #0f172a !important;
}

[data-theme="light"] .subtitle {
  color: #334155 !important;
}

[data-theme="light"] .featured-sidebar-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .featured-sidebar-card .card-title {
  color: #0f172a !important;
}

[data-theme="light"] .featured-sidebar-card .card-description {
  color: #475569 !important;
}

[data-theme="light"] .trust-badge {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .trust-badge h5 {
  color: #0f172a !important;
}

[data-theme="light"] .trust-badge p {
  color: #64748b !important;
}

[data-theme="light"] .news-card,
[data-theme="light"] .featured-news-card,
[data-theme="light"] .compact-news-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .card-headline,
[data-theme="light"] .compact-news-title {
  color: #0f172a !important;
}

[data-theme="light"] .card-text {
  color: #475569 !important;
}

[data-theme="light"] .card-footer-meta,
[data-theme="light"] .compact-news-meta {
  color: #64748b !important;
}

[data-theme="light"] .tutorials-section,
[data-theme="light"] .categories-section,
[data-theme="light"] .devices-section,
[data-theme="light"] .featured-articles-section,
[data-theme="light"] .reviews-section,
[data-theme="light"] .downloads-section,
[data-theme="light"] .community-section,
[data-theme="light"] .cta-section {
  background: #ffffff !important;
}

[data-theme="light"] .tutorial-item-row,
[data-theme="light"] .category-card,
[data-theme="light"] .device-guide-card,
[data-theme="light"] .featured-article-card,
[data-theme="light"] .review-card,
[data-theme="light"] .download-card,
[data-theme="light"] .community-card,
[data-theme="light"] .community-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .category-icon-wrapper {
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  color: #2563eb !important;
}

[data-theme="light"] .supporting-category-title {
  color: #0f172a !important;
}

[data-theme="light"] .category-tags li {
  color: #475569 !important;
}

[data-theme="light"] .category-tags li i {
  color: #94a3b8 !important;
}

[data-theme="light"] .category-card .card-action-btn,
[data-theme="light"] .categories-header .view-all-btn {
  color: #2563eb !important;
}

[data-theme="light"] .tut-filter-chip {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .tut-filter-chip.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

/* --------------------------------------------------------
   Media Player Reviews Featured Slider (5 Players Auto-Carousel)
-------------------------------------------------------- */
.rev-media-carousel-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.rev-media-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #7cff6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  outline: none;
}

[data-theme="light"] .rev-media-carousel-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  color: #2563eb;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.rev-media-carousel-btn:hover {
  background: #7cff6b;
  color: #050a0e;
  border-color: #7cff6b;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 25px rgba(124, 255, 107, 0.45);
}

[data-theme="light"] .rev-media-carousel-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
}

.rev-media-carousel-btn--prev {
  left: -25px;
}

.rev-media-carousel-btn--next {
  right: -25px;
}

@media (max-width: 1024px) {
  .rev-media-carousel-btn--prev {
    left: 10px;
  }

  .rev-media-carousel-btn--next {
    right: 10px;
  }
}

.rev-media-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.rev-media-dot {
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

[data-theme="light"] .rev-media-dot {
  background: rgba(0, 0, 0, 0.2);
}

.rev-media-dot.active {
  width: 34px;
  background: #7cff6b;
  box-shadow: 0 0 14px rgba(124, 255, 107, 0.6);
}


/* ========================================================
   THEME PAGINATION ACCENT STYLES
   Dark Mode: Neon Green (#7cff6b)
   Light Mode: Vibrant Royal Blue (#2563eb)
   ======================================================== */

/* Dark Mode (Default) */
.rev-media-dot.active,
.blog-pagination .page-num.active,
.pagination .page-item.active .page-link,
.dl-pagination .page-num.active,
.cat-chip-dot.active,
.carousel-dot.active,
.page-number.active,
.page-btn.active {
  background: #7cff6b !important;
  color: #050a0e !important;
  border-color: #7cff6b !important;
  box-shadow: 0 0 14px rgba(124, 255, 107, 0.5) !important;
}

/* Light Mode Override */
[data-theme="light"] .rev-media-dot.active,
[data-theme="light"] .blog-pagination .page-num.active,
[data-theme="light"] .pagination .page-item.active .page-link,
[data-theme="light"] .dl-pagination .page-num.active,
[data-theme="light"] .cat-chip-dot.active,
[data-theme="light"] .carousel-dot.active,
[data-theme="light"] .page-number.active,
[data-theme="light"] .page-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.45) !important;
}

[data-theme="light"] .rev-media-dot {
  background: rgba(37, 99, 235, 0.25) !important;
}

[data-theme="light"] .rev-media-dot:hover {
  background: rgba(37, 99, 235, 0.5) !important;
}


/* ========================================================
   GLOBAL LIGHT THEME BLUE / DARK THEME GREEN ACCENT SYSTEM
   Light Mode: Royal Blue (#2563eb)
   Dark Mode: Neon Green (#7cff6b / #00d289)
   ======================================================== */

/* --- DARK THEME (GREEN ACCENT) STRICT ENFORCEMENT --- */
:root,
[data-theme="dark"] {
  --accent: #7cff6b !important;
  --accent-light: #7cff6b !important;
  --accent-hover: #5ce64a !important;
  --accent-rgb: 124, 255, 107 !important;
  --border-hover: rgba(124, 255, 107, 0.3) !important;
}

[data-theme="dark"] .text-gradient,
[data-theme="dark"] .hero-title-accent,
[data-theme="dark"] .heading-accent,
[data-theme="dark"] .section-title span,
[data-theme="dark"] .news-hero-title span,
[data-theme="dark"] .dev-hero__heading-accent,
[data-theme="dark"] .tut-hero__heading-accent,
[data-theme="dark"] .rev-hero__heading-accent,
[data-theme="dark"] .blog-hero__heading-accent {
  background: linear-gradient(135deg, #7cff6b 30%, #34d399 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #7cff6b !important;
}

/* --- 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,
[data-theme="light"] .text-gradient,
[data-theme="light"] .section-title span {
  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;
}

[data-theme="light"] .article-badge,
[data-theme="light"] .section-badge,
[data-theme="light"] .featured-sidebar-card .card-badge,
[data-theme="light"] .article-meta i,
[data-theme="light"] .trust-badge i {
  color: #2563eb !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;
}

/* ========================================================
   ARTICLE, NEWS & SECTION LINKS STRICT COLOR ENFORCEMENT
   Dark Theme: Green (#7cff6b)
   Light Theme: Royal Blue (#2563eb)
   ======================================================== */

.news-read-link,
.card-link,
.bd-read-link,
.btn-swrev-read-card,
.btn-tut-more,
.btn-feat-more,
.btn-post-read,
.featured-link,
.btn-beg-more,
.btn-exp-more,
.btn-dl-more,
.btn-news-more,
.read-article-link,
.read-more-link,
.card-action-btn,
.card-cta,
.view-all-btn,
a.view-all-btn,
a.card-action-btn,
a.card-cta,
a.featured-link,
a.news-read-link {
  color: #7cff6b !important;
}

.news-read-link i,
.card-link i,
.bd-read-link i,
.btn-swrev-read-card i,
.btn-tut-more i,
.btn-feat-more i,
.btn-post-read i,
.featured-link i,
.read-article-link i,
.read-more-link i,
.card-action-btn i,
.card-cta i,
.view-all-btn i,
a.view-all-btn i,
a.card-action-btn i,
a.card-cta i,
a.featured-link i,
a.news-read-link i {
  color: #7cff6b !important;
}

[data-theme="light"] .news-read-link,
[data-theme="light"] .card-link,
[data-theme="light"] .bd-read-link,
[data-theme="light"] .btn-swrev-read-card,
[data-theme="light"] .btn-tut-more,
[data-theme="light"] .btn-feat-more,
[data-theme="light"] .btn-post-read,
[data-theme="light"] .featured-link,
[data-theme="light"] .btn-beg-more,
[data-theme="light"] .btn-exp-more,
[data-theme="light"] .btn-dl-more,
[data-theme="light"] .btn-news-more,
[data-theme="light"] .read-article-link,
[data-theme="light"] .read-more-link,
[data-theme="light"] .card-action-btn,
[data-theme="light"] .card-cta,
[data-theme="light"] .view-all-btn,
[data-theme="light"] a.view-all-btn,
[data-theme="light"] a.card-action-btn,
[data-theme="light"] a.card-cta,
[data-theme="light"] a.featured-link,
[data-theme="light"] a.news-read-link {
  color: #2563eb !important;
}

[data-theme="light"] .news-read-link i,
[data-theme="light"] .card-link i,
[data-theme="light"] .bd-read-link i,
[data-theme="light"] .btn-swrev-read-card i,
[data-theme="light"] .btn-tut-more i,
[data-theme="light"] .btn-feat-more i,
[data-theme="light"] .btn-post-read i,
[data-theme="light"] .featured-link i,
[data-theme="light"] .read-article-link i,
[data-theme="light"] .read-more-link i,
[data-theme="light"] .card-action-btn i,
[data-theme="light"] .card-cta i,
[data-theme="light"] .view-all-btn i,
[data-theme="light"] a.view-all-btn i,
[data-theme="light"] a.card-action-btn i,
[data-theme="light"] a.card-cta i,
[data-theme="light"] a.featured-link i,
[data-theme="light"] a.news-read-link i {
  color: #2563eb !important;
}

[data-theme="light"] .app-avatar.theme-blue,
[data-theme="light"] .sidebar-item-thumb.theme-blue,
[data-theme="light"] .feature-strip-icon-box {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  color: #2563eb !important;
}

[data-theme="light"] .feature-strip-item:hover .feature-strip-icon-box {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .tablet-ui i,
[data-theme="light"] .tablet-ui .progress-bar::before,
[data-theme="light"] .floating-ui-card.card-1 i,
[data-theme="light"] .catalog-card-image-box.video-play-overlay .icon-wrap,
[data-theme="light"] .catalog-card-image-box.video-play-overlay+.catalog-card-details .card-link {
  color: #2563eb !important;
}

/* ========================================================
   UNIVERSAL COMPARISON POPUP MODAL STYLES (ALL SECTIONS)
   ======================================================== */
.specs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 8, 15, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px !important;
}

[data-theme="light"] .specs-modal-overlay {
  background: rgba(248, 250, 252, 0.85) !important;
}

.specs-modal-overlay.active,
.specs-modal-overlay:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
}

.specs-modal-container,
.specs-modal {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: 30px !important;
  position: relative !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .specs-modal-container,
[data-theme="light"] .specs-modal {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}

.specs-modal-overlay.active .specs-modal-container,
.specs-modal-overlay.active .specs-modal {
  transform: translateY(0) scale(1) !important;
}

.specs-modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
}

.specs-modal-close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.specs-modal-content h3,
.specs-modal-content h4 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[data-theme="light"] .specs-modal-content h3,
[data-theme="light"] .specs-modal-content h4 {
  color: #0f172a !important;
}

.specs-modal-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.specs-modal-content li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  color: #cbd5e1 !important;
}

[data-theme="light"] .specs-modal-content li {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
  color: #334155 !important;
}

.specs-modal-content li strong {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Video Modal display protection */
#videoModal {
  display: none !important;
}

#videoModal.vm-open {
  display: flex !important;
}

/* ============================================================
   MEGA MENU DYNAMIC FILTERING & ACTIVE STATE STYLES
   ============================================================ */

/* Active state for Mega Menu links */
.mega-menu a.mega-filter-active,
.mega-menu li.mega-filter-active>a,
.dropdown-menu a.mega-filter-active,
.nav-link.mega-filter-active {
  color: var(--accent) !important;
  font-weight: 700 !important;
  background: rgba(0, 210, 137, 0.12) !important;
  border-radius: 6px !important;
  padding-left: 8px !important;
}

[data-theme="light"] .mega-menu a.mega-filter-active,
[data-theme="light"] .mega-menu li.mega-filter-active>a,
[data-theme="light"] .dropdown-menu a.mega-filter-active,
[data-theme="light"] .nav-link.mega-filter-active {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.12) !important;
}

/* Breadcrumbs Styling */
.mega-breadcrumbs {
  margin-bottom: 20px;
}

.mega-breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.mega-breadcrumbs-item {
  display: flex;
  align-items: center;
}

.mega-breadcrumbs-link {
  color: var(--text-secondary, #94a3b8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.mega-breadcrumbs-link:hover {
  color: var(--accent, #00d289);
}

[data-theme="light"] .mega-breadcrumbs-link {
  color: #334155;
  font-weight: 500;
}

[data-theme="light"] .mega-breadcrumbs-link:hover {
  color: #0284c7;
}

.mega-breadcrumbs-sep {
  color: var(--text-muted, #475569);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

[data-theme="light"] .mega-breadcrumbs-sep {
  color: #94a3b8;
}

.mega-breadcrumbs-item.active {
  color: var(--accent, #00d289);
  font-weight: 700;
}

[data-theme="light"] .mega-breadcrumbs-item.active {
  color: #0f172a;
  font-weight: 700;
}

/* Filter Hero Section */
#megaFilterResultsSection {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 60px auto;
  padding: 120px 24px 60px 24px;
  box-sizing: border-box;
  min-height: 70vh;
}

.mega-hero-bg-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mega-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.mega-hero-orb--1 {
  width: 320px;
  height: 320px;
  background: var(--accent, #00d289);
  top: -50px;
  left: -50px;
}

.mega-hero-orb--2 {
  width: 380px;
  height: 380px;
  background: #3b82f6;
  top: -80px;
  right: -80px;
}

.mega-filter-hero-container {
  position: relative;
  z-index: 1;
}

/* Split Filter Hero Banner (Left Small Breadcrumb, Right Big Bold Title) */
.mega-filter-hero-banner {
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 48px 40px;
  margin-bottom: 40px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .mega-filter-hero-banner {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .mega-hero-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

[data-theme="light"] .mega-hero-badge-dot {
  background: #059669;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.4);
}

.mega-hero-banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mega-hero-split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.mega-hero-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mega-hero-right-col {
  text-align: right;
}

.mega-hero-title-bold {
  font-size: 3rem;
  font-weight: 900;
  color: var(--text-primary, #f8fafc);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: capitalize;
}

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

.mega-hero-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .mega-hero-filter-bar {
  border-top-color: #e2e8f0;
}

.mega-hero-filter-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary, #94a3b8);
}

[data-theme="light"] .mega-hero-filter-info {
  color: #334155;
}

@media (max-width: 768px) {
  .mega-hero-split-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }

  .mega-hero-right-col {
    text-align: left;
  }

  .mega-hero-title-bold {
    font-size: 2.2rem;
  }

  .mega-hero-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.mega-filter-bar {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .mega-filter-bar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

.mega-filter-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  margin: 0;
}

.mega-filter-tag {
  background: rgba(0, 210, 137, 0.15);
  color: var(--accent, #00d289);
  border: 1px solid rgba(0, 210, 137, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="light"] .mega-filter-tag {
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.3);
}

.mega-filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mega-filter-clear-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

.mega-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

@media (max-width: 992px) {
  .mega-filter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .mega-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 0 12px;
  }
}

.mega-filter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
}

[data-theme="dark"] .mega-filter-card,
:root:not([data-theme="light"]) .mega-filter-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.mega-filter-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mega-filter-card:hover,
:root:not([data-theme="light"]) .mega-filter-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.mega-filter-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000000;
}

.mega-filter-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000000;
  transition: transform 0.35s ease;
}

.mega-filter-card:hover .mega-filter-card-img-wrap img {
  transform: scale(1.02);
}

.mega-filter-card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.mega-filter-card .device-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.mega-filter-card .device-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mega-filter-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
  font-family: inherit;
}

[data-theme="dark"] .mega-filter-card-title,
:root:not([data-theme="light"]) .mega-filter-card-title {
  color: #f8fafc;
}

.mega-filter-card-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

[data-theme="dark"] .mega-filter-card-desc,
:root:not([data-theme="light"]) .mega-filter-card-desc {
  color: #94a3b8;
}

.mega-filter-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10px;
  margin-top: auto;
  border-top: none;
}

.mega-filter-results-section {
  max-width: 1280px;
  margin: 30px auto 40px auto;
  padding: 0 20px;
}

.mega-filter-hero-banner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .mega-filter-hero-banner,
:root:not([data-theme="light"]) .mega-filter-hero-banner {
  background: rgba(17, 24, 39, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

/* No Content Found Card */
.mega-filter-empty {
  grid-column: 1 / -1;
  background: rgba(15, 23, 42, 0.6);
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary, #94a3b8);
}

[data-theme="light"] .mega-filter-empty {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.15);
}

.mega-filter-empty-icon {
  font-size: 3rem;
  color: var(--accent, #00d289);
  margin-bottom: 12px;
}

.mega-filter-empty-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  margin: 0 0 8px 0;
}

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

/* =====================================================================
   MEGA MENU FILTERING STRICT SECTION HIDING RULES
   When .mega-filtering-active is set on body, hide ALL default sections
   EXCEPT #megaFilterResultsSection, #newsletterCommunitySection / .news-comm-sec, header, and footer.
   ===================================================================== */
body.mega-filtering-active section:not(#megaFilterResultsSection):not(#newsletterCommunitySection):not(.news-comm-sec):not(#devNewsletterSection):not(#mainHeader):not(.main-header):not(#siteFooter):not(.site-footer),
body.mega-filtering-active main>section:not(#megaFilterResultsSection):not(#newsletterCommunitySection):not(.news-comm-sec):not(#devNewsletterSection):not(#mainHeader):not(.main-header):not(#siteFooter):not(.site-footer),
body.mega-filtering-active main>div.section-container,
body.mega-filtering-active main>div.glossary,
body.mega-filtering-active main.dev-catalog,
body.mega-filtering-active .dev-catalog,
body.mega-filtering-active #devicesCatalogGrid,
body.mega-filtering-active .dev-hero,
body.mega-filtering-active .dev-browse,
body.mega-filtering-active .dev-popular,
body.mega-filtering-active .dev-guides,
body.mega-filtering-active .dev-ts,
body.mega-filtering-active .dev-compare,
body.mega-filtering-active .dev-faq,
body.mega-filtering-active .dev-search-bar,
body.mega-filtering-active .tut-hero,
body.mega-filtering-active .tut-featured,
body.mega-filtering-active .dev-spec,
body.mega-filtering-active .dev-pop-tuts,
body.mega-filtering-active .exp-res,
body.mega-filtering-active .tut-faq,
body.mega-filtering-active .dev-tut-cat {
  display: none !important;
}

body.mega-filtering-active #megaFilterResultsSection,
body.mega-filtering-active #newsletterCommunitySection,
body.mega-filtering-active #devNewsletterSection,
body.mega-filtering-active .news-comm-sec,
body.mega-filtering-active #mainHeader,
body.mega-filtering-active .main-header,
body.mega-filtering-active #siteFooter,
body.mega-filtering-active .site-footer {
  display: block !important;
}

/* =====================================================================
   ULTRA-PREMIUM UNIVERSAL PAGINATION DESIGN SYSTEM
   ===================================================================== */
.blog-pagination-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  width: 100% !important;
  clear: both !important;
}

.blog-pagination,
.dl-pagination,
.tut-pagination,
.dev-pagination,
.news-pagination {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.blog-pagination .page-numbers,
.dl-pagination .page-numbers,
.tut-pagination .page-numbers,
.dev-pagination .page-numbers,
.news-pagination .page-numbers {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.blog-pagination .page-num,
.dl-pagination .page-num,
.tut-pagination .page-num,
.dev-pagination .page-num,
.news-pagination .page-num {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: rgba(30, 41, 59, 0.7) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  user-select: none !important;
  text-decoration: none !important;
}

.blog-pagination .page-num:hover,
.dl-pagination .page-num:hover,
.tut-pagination .page-num:hover,
.dev-pagination .page-num:hover,
.news-pagination .page-num:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

.blog-pagination .page-num.active,
.dl-pagination .page-num.active,
.tut-pagination .page-num.active,
.dev-pagination .page-num.active,
.news-pagination .page-num.active {
  background: #00d289 !important;
  color: #050a0e !important;
  border-color: #00d289 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0, 210, 137, 0.35) !important;
  transform: scale(1.05) !important;
}

.blog-pagination .page-num.page-num--dots,
.dl-pagination .page-num.page-num--dots,
.tut-pagination .page-num.page-num--dots {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.blog-pagination .page-link,
.dl-pagination .page-link,
.tut-pagination .page-link,
.dev-pagination .page-link,
.news-pagination .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: rgba(30, 41, 59, 0.7) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  user-select: none !important;
  text-decoration: none !important;
}

.blog-pagination .page-link:hover:not(:disabled),
.dl-pagination .page-link:hover:not(:disabled),
.tut-pagination .page-link:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: #00d289 !important;
  color: #00d289 !important;
  transform: translateY(-2px) !important;
}

.blog-pagination .page-link:disabled,
.dl-pagination .page-link:disabled,
.tut-pagination .page-link:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.pagination-footer-text,
.pagination-info {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  letter-spacing: 0.2px !important;
}

/* Light Theme Overrides */
[data-theme="light"] .blog-pagination .page-num,
[data-theme="light"] .dl-pagination .page-num,
[data-theme="light"] .tut-pagination .page-num,
[data-theme="light"] .dev-pagination .page-num,
[data-theme="light"] .news-pagination .page-num {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .blog-pagination .page-num:hover,
[data-theme="light"] .dl-pagination .page-num:hover,
[data-theme="light"] .tut-pagination .page-num:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .blog-pagination .page-num.active,
[data-theme="light"] .dl-pagination .page-num.active,
[data-theme="light"] .tut-pagination .page-num.active,
[data-theme="light"] .dev-pagination .page-num.active,
[data-theme="light"] .news-pagination .page-num.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
}

[data-theme="light"] .blog-pagination .page-link,
[data-theme="light"] .dl-pagination .page-link,
[data-theme="light"] .tut-pagination .page-link,
[data-theme="light"] .dev-pagination .page-link,
[data-theme="light"] .news-pagination .page-link {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .blog-pagination .page-link:hover:not(:disabled),
[data-theme="light"] .dl-pagination .page-link:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

[data-theme="light"] .pagination-footer-text,
[data-theme="light"] .pagination-info {
  color: #64748b !important;
}

/* =====================================================================
   YOAST SEO MANAGER & PREVIEW PANEL STYLES
   ===================================================================== */
.yoast-seo-panel-container {
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: var(--text-primary, #f8fafc);
}

.yoast-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.yoast-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.yoast-panel-title h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.yoast-score-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid #00d289;
  background: rgba(15, 23, 42, 0.8);
}

.yoast-score-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00d289;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

.yoast-score-label {
  font-size: 0.88rem;
  font-weight: 600;
}

/* Nav Tabs */
.yoast-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.yoast-tab-btn {
  padding: 10px 16px;
  border-radius: 10px 10px 0 0;
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.yoast-tab-btn:hover {
  color: var(--text-primary, #f8fafc);
  background: rgba(255, 255, 255, 0.04);
}

.yoast-tab-btn.active {
  color: var(--accent, #00d289);
  border-bottom: 2px solid var(--accent, #00d289);
  background: rgba(0, 210, 137, 0.08);
}

.yoast-tab-pane {
  display: none;
}

.yoast-tab-pane.active {
  display: block;
}

/* Form Controls */
.yoast-form-group {
  margin-bottom: 18px;
}

.yoast-form-row {
  display: flex;
  gap: 16px;
}

.yoast-form-row .half {
  flex: 1;
}

.yoast-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.yoast-form-group label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #f8fafc);
}

.yoast-help-text {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  font-weight: 400;
}

.yoast-char-count {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
}

.yoast-input,
.yoast-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.yoast-input:focus,
.yoast-textarea:focus {
  border-color: var(--accent, #00d289);
}

.yoast-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}

.yoast-progress-fill {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Analysis Checks List */
.yoast-checks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.yoast-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.yoast-chip {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.chip-good {
  background: rgba(0, 210, 137, 0.15);
  color: #00d289;
}

.chip-improvement {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.chip-problem {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.yoast-check-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary, #cbd5e1);
}

/* SERP & Social Previews */
.yoast-preview-block {
  margin-bottom: 24px;
}

.yoast-preview-block h4 {
  margin-bottom: 12px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-serp-card {
  background: #ffffff;
  color: #202124;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.serp-site-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.serp-site-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00d289;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.65rem;
}

.serp-site-name {
  font-weight: 600;
  color: #202124;
}

.serp-url {
  color: #4d5156;
  word-break: break-all;
}

.serp-title {
  color: #1a0dab;
  font-size: 1.15rem;
  font-weight: 400;
  margin: 4px 0;
  line-height: 1.3;
}

.serp-snippet {
  color: #4d5156;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
}

.facebook-og-card,
.twitter-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30, 41, 59, 0.6);
}

.og-img-wrap img,
.tw-img-wrap img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.og-content,
.tw-content {
  padding: 14px;
}

.og-domain,
.tw-domain {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.og-title,
.tw-title {
  margin: 4px 0;
  font-size: 1rem;
}

.og-desc,
.tw-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0;
}

/* ========================================================
   LIGHT THEME FOCUS & HOVER WHITE TEXT SYSTEM
   Only direct button hover/focus — NOT card-level cascading
   ======================================================== */
[data-theme="light"] .dev-spec-card__btn:hover,
[data-theme="light"] .dev-spec-card__btn:focus,
[data-theme="light"] .dev-spec-card__btn:active,
[data-theme="light"] .dev-pop-feat-card__btn:hover,
[data-theme="light"] .dev-pop-feat-card__btn:focus,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-explore:hover,
[data-theme="light"] .btn-explore:focus,
[data-theme="light"] .action-btn:hover,
[data-theme="light"] .action-btn:focus {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

[data-theme="light"] .dev-spec-card__btn:hover span,
[data-theme="light"] .dev-spec-card__btn:hover i,
[data-theme="light"] .dev-spec-card__btn:focus span,
[data-theme="light"] .dev-spec-card__btn:focus i,
[data-theme="light"] .dev-pop-feat-card__btn:hover *,
[data-theme="light"] .dev-pop-feat-card__btn:focus *,
[data-theme="light"] .btn-primary:hover *,
[data-theme="light"] .btn-primary:focus *,
[data-theme="light"] .btn-explore:hover *,
[data-theme="light"] .btn-explore:focus * {
  color: #ffffff !important;
}

/* Secondary Button Neutral Hover & Focus (Prevent turning blue on hover/focus) */
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-secondary:focus,
[data-theme="light"] .btn-secondary:active,
[data-theme="light"] .dev-card__btn--secondary:hover,
[data-theme="light"] .dev-card__btn--secondary:focus,
[data-theme="light"] .dev-card__btn--secondary:active {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-secondary:hover *,
[data-theme="light"] .btn-secondary:focus *,
[data-theme="light"] .dev-card__btn--secondary:hover *,
[data-theme="light"] .dev-card__btn--secondary:focus * {
  color: #0f172a !important;
}


/* Enforce transparent background for Explore Category text links */
.btn-explore-cat,
.btn-explore-cat:hover,
.btn-explore-cat:focus,
.btn-explore-cat:active,
[data-theme="light"] .btn-explore-cat,
[data-theme="light"] .btn-explore-cat:hover,
[data-theme="light"] .btn-explore-cat:focus,
[data-theme="light"] .btn-explore-cat:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

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

/* Clean Inline Text Link for Read Guide & Cards (Prevent full-width background bar on hover) */
.tut-featured__medium-link,
.dev-pop-card__link,
.dev-tut-card__link,
.tut-card__link,
.bd-read-link,
.btn-read-guide,
.feat-blog-link,
.btn-swrev-read-card,
.btn-explore-cat,
.supporting-card .card-action-btn,
.supporting-card:hover .card-action-btn,
.supporting-tutorial-card .card-action-btn,
.supporting-tutorial-card:hover .card-action-btn,
.article-card:hover .card-action-btn,
.supporting-card-footer a,
.tut-featured__medium-card:hover .tut-featured__medium-link,
.tut-featured__medium-card:focus .tut-featured__medium-link,
.tut-featured__medium-card:focus-within .tut-featured__medium-link,
.tut-featured__medium-link:hover,
.tut-featured__medium-link:focus,
.dev-pop-card:hover .dev-pop-card__link,
.dev-pop-card:focus .dev-pop-card__link,
.dev-pop-card__link:hover,
.dev-pop-card__link:focus,
.dev-tut-card:hover .dev-tut-card__link,
.dev-tut-card__link:hover,
[data-theme="light"] .tut-featured__medium-link,
[data-theme="light"] .dev-pop-card__link,
[data-theme="light"] .dev-tut-card__link,
[data-theme="light"] .tut-card__link,
[data-theme="light"] .bd-read-link,
[data-theme="light"] .btn-read-guide,
[data-theme="light"] .feat-blog-link,
[data-theme="light"] .btn-swrev-read-card,
[data-theme="light"] .btn-explore-cat,
[data-theme="light"] .supporting-card .card-action-btn,
[data-theme="light"] .supporting-card:hover .card-action-btn,
[data-theme="light"] .supporting-tutorial-card .card-action-btn,
[data-theme="light"] .supporting-tutorial-card:hover .card-action-btn,
[data-theme="light"] .article-card:hover .card-action-btn,
[data-theme="light"] .supporting-card-footer a,
[data-theme="light"] .tut-featured__medium-card:hover .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-card:focus .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-card:focus-within .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-link:hover,
[data-theme="light"] .tut-featured__medium-link:focus,
[data-theme="light"] .dev-pop-card:hover .dev-pop-card__link,
[data-theme="light"] .dev-pop-card:focus .dev-pop-card__link,
[data-theme="light"] .dev-pop-card__link:hover,
[data-theme="light"] .dev-pop-card__link:focus,
[data-theme="light"] .dev-tut-card:hover .dev-tut-card__link,
[data-theme="light"] .dev-tut-card__link:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

[data-theme="light"] .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-card:hover .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-link:hover,
[data-theme="light"] .dev-pop-card__link,
[data-theme="light"] .dev-pop-card:hover .dev-pop-card__link,
[data-theme="light"] .dev-pop-card__link:hover,
[data-theme="light"] .dev-tut-card__link,
[data-theme="light"] .dev-tut-card:hover .dev-tut-card__link,
[data-theme="light"] .dev-tut-card__link:hover,
[data-theme="light"] .supporting-card .card-action-btn,
[data-theme="light"] .supporting-card:hover .card-action-btn,
[data-theme="light"] .supporting-tutorial-card .card-action-btn,
[data-theme="light"] .supporting-tutorial-card:hover .card-action-btn {
  color: #2563eb !important;
}

/* Featured Tutorial Card "Read Full Guide" Clean Inline Link */
.featured-tutorial-card .card-action-btn,
.featured-tutorial-card a.card-action-btn,
[data-theme="light"] .featured-tutorial-card .card-action-btn,
[data-theme="light"] .featured-tutorial-card a.card-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  border: none !important;
  margin-top: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.featured-tutorial-card .card-action-btn:hover,
.featured-tutorial-card a.card-action-btn:hover,
[data-theme="light"] .featured-tutorial-card .card-action-btn:hover,
[data-theme="light"] .featured-tutorial-card a.card-action-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  transform: none !important;
  box-shadow: none !important;
  gap: 10px !important;
}

.featured-tutorial-card .card-action-btn i,
.featured-tutorial-card a.card-action-btn i,
[data-theme="light"] .featured-tutorial-card .card-action-btn i,
[data-theme="light"] .featured-tutorial-card a.card-action-btn i {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-size: 1rem !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.featured-tutorial-card .card-action-btn:hover i,
.featured-tutorial-card a.card-action-btn:hover i,
[data-theme="light"] .featured-tutorial-card .card-action-btn:hover i,
[data-theme="light"] .featured-tutorial-card a.card-action-btn:hover i {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  transform: translateX(4px) !important;
}

/* Dark Mode */
[data-theme="dark"] .featured-tutorial-card .card-action-btn,
[data-theme="dark"] .featured-tutorial-card a.card-action-btn,
:root:not([data-theme="light"]) .featured-tutorial-card .card-action-btn,
:root:not([data-theme="light"]) .featured-tutorial-card a.card-action-btn {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] .featured-tutorial-card .card-action-btn:hover,
[data-theme="dark"] .featured-tutorial-card a.card-action-btn:hover,
:root:not([data-theme="light"]) .featured-tutorial-card .card-action-btn:hover,
:root:not([data-theme="light"]) .featured-tutorial-card a.card-action-btn:hover {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
  background: transparent !important;
  gap: 10px !important;
}

[data-theme="dark"] .featured-tutorial-card .card-action-btn i,
:root:not([data-theme="light"]) .featured-tutorial-card .card-action-btn i {
  color: #60a5fa !important;
}

[data-theme="dark"] .featured-tutorial-card .card-action-btn:hover i,
:root:not([data-theme="light"]) .featured-tutorial-card .card-action-btn:hover i {
  color: #93c5fd !important;
  transform: translateX(4px) !important;
}

[data-theme="light"] .tut-featured__medium-card:hover .tut-featured__medium-link,
[data-theme="light"] .tut-featured__medium-link:hover,
[data-theme="light"] .dev-pop-card:hover .dev-pop-card__link,
[data-theme="light"] .dev-pop-card__link:hover,
[data-theme="light"] .dev-tut-card:hover .dev-tut-card__link,
[data-theme="light"] .dev-tut-card__link:hover,
[data-theme="light"] .card-action-btn:hover,
[data-theme="light"] .supporting-card:hover .card-action-btn {
  color: #1d4ed8 !important;
  gap: 8px !important;
}

/* ========================================================
   LIGHT THEME TYPOGRAPHY & HIGH CONTRAST BADGE SYSTEM
   "ye light background me sahi se nahi dikh rahe he font"
   ======================================================== */
[data-theme="light"] .dev-tut-card__badge--green,
[data-theme="light"] .tut-card-badge--green {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #047857 !important;
}

[data-theme="light"] .dev-tut-card__badge--blue,
[data-theme="light"] .tut-card-badge--blue {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #1d4ed8 !important;
}

[data-theme="light"] .dev-tut-card__badge--purple,
[data-theme="light"] .tut-card-badge--purple {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #6d28d9 !important;
}

[data-theme="light"] .dev-tut-card__badge--amber,
[data-theme="light"] .tut-card-badge--amber {
  background: rgba(217, 119, 6, 0.15) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  color: #b45309 !important;
}

[data-theme="light"] .dev-tut-card__badge--teal,
[data-theme="light"] .tut-card-badge--teal {
  background: rgba(13, 148, 136, 0.15) !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
  color: #0f766e !important;
}

[data-theme="light"] .dev-tut-card__badge--pink,
[data-theme="light"] .tut-card-badge--pink {
  background: rgba(219, 39, 119, 0.15) !important;
  border-color: rgba(219, 39, 119, 0.35) !important;
  color: #be185d !important;
}

/* Metadata & Dates in Light Theme */
[data-theme="light"] .dev-tut-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .dev-tut-card__title,
[data-theme="light"] .dev-tut-card__title a {
  color: #0f172a !important;
}

[data-theme="light"] .dev-tut-card__title a:hover {
  color: #2563eb !important;
}

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

[data-theme="light"] .dev-tut-card__author {
  color: #64748b !important;
}

[data-theme="light"] .dev-tut-card__author i {
  color: #2563eb !important;
}

[data-theme="light"] .dev-tut-card__link {
  color: #2563eb !important;
  font-weight: 600 !important;
}

[data-theme="light"] .dev-tut-card__date,
[data-theme="light"] .dev-tut-card__read-time,
[data-theme="light"] .dev-tut-card__meta,
[data-theme="light"] .news-item-date,
[data-theme="light"] .sidebar-date,
[data-theme="light"] .downloads-item-meta,
[data-theme="light"] .card-meta {
  color: #475569 !important;
}

[data-theme="light"] .dev-tut-card__author-name,
[data-theme="light"] .news-item-title,
[data-theme="light"] .sidebar-link,
[data-theme="light"] .downloads-item-name {
  color: #0f172a !important;
}

/* Empty State Card in Light Theme */
[data-theme="light"] .no-tutorials-box,
[data-theme="light"] .dev-tut-empty,
[data-theme="light"] .empty-state-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .no-tutorials-box p,
[data-theme="light"] .dev-tut-empty p {
  color: #475569 !important;
}


/* ════════════════════════════════════════════════════════
   Category Filter Banner — Dark & Light Theme Styling
════════════════════════════════════════════════════════ */
.mega-filter-hero-banner {
  position: relative;
  background: var(--bg-card, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mega-hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 137, 0.12);
  border: 1px solid rgba(0, 210, 137, 0.3);
  color: var(--accent, #00d289);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mega-hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #00d289);
  display: inline-block;
}

.mega-hero-main-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary, #f8fafc);
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.mega-breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #94a3b8);
}

.mega-breadcrumbs-link {
  color: var(--accent, #00d289);
  text-decoration: none;
  transition: color 0.15s;
}

.mega-breadcrumbs-link:hover {
  text-decoration: underline;
}

.mega-breadcrumbs-item.active {
  color: var(--text-primary, #f8fafc);
  font-weight: 600;
}

.mega-hero-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-hero-filter-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary, #cbd5e1);
}

.mega-hero-filter-info i {
  color: var(--accent, #00d289);
  font-size: 1.1rem;
}

.mega-filter-title-highlight {
  color: var(--text-primary, #ffffff);
  font-weight: 700;
}

/* Light Theme Overrides for Category Filter Banner */
[data-theme="light"] .mega-filter-hero-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .mega-hero-badge-pill {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

[data-theme="light"] .mega-hero-badge-dot {
  background: #059669 !important;
}

[data-theme="light"] .mega-hero-main-title {
  color: #0f172a !important;
}

[data-theme="light"] .mega-breadcrumbs-list {
  color: #64748b !important;
}

[data-theme="light"] .mega-breadcrumbs-link {
  color: #0284c7 !important;
}

[data-theme="light"] .mega-breadcrumbs-item.active {
  color: #1e293b !important;
}

[data-theme="light"] .mega-hero-filter-bar {
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .mega-hero-filter-info {
  color: #475569 !important;
}

[data-theme="light"] .mega-hero-filter-info i {
  color: #0284c7 !important;
}

[data-theme="light"] .mega-filter-title-highlight {
  color: #0f172a !important;
}

[data-theme="light"] .mega-filter-clear-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .mega-filter-clear-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ════════════════════════════════════════════════════════
   UNIFIED EQUAL CONTAINER SIDE MARGIN SYSTEM (LIKE 1ST SECTION)
   Aligns hero section and all section inner containers cleanly
   ════════════════════════════════════════════════════════ */
.hero-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.container,
.main-container,
.hero-layout,
.section-container,
.tut-hero__container,
.tut-hero__inner,
.tut-featured__inner,
.tut-categories__inner,
.tut-search-bar__inner,
.tut-catalog__inner,
.dev-tut-cat__inner,
.dev-spec__inner,
.dev-pop-tuts__inner,
.vid-tuts__inner,
.lp-sec__inner,
.exp-res__inner,
.tut-faq__inner,
.news-comm-sec__inner,
.news-sec__inner,
.news-releases-sec__inner,
.news-nl-sec__inner,
.news-devices-sec__inner,
.news-reviews-sec__inner,
.blog-sec__inner,
.blog-hero-sec__inner,
.blog-featured-sec__inner,
.blog-articles-sec__inner,
.blog-cat-sec__inner,
.blog-nl-sec__inner,
.dev-hero-sec__inner,
.dev-grid-sec__inner,
.dev-cmp-sec__inner,
.dev-matrix-sec__inner,
.dev-faq-sec__inner,
.dev-nl-sec__inner,
.cmp-hero__inner,
.cmp-matrix__inner,
.cmp-sec__inner,
.sec-inner,
.section-inner,
.hero-inner {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {

  .container,
  .main-container,
  .hero-layout,
  .section-container,
  .tut-hero__container,
  .tut-hero__inner,
  .tut-featured__inner,
  .tut-categories__inner,
  .tut-search-bar__inner,
  .tut-catalog__inner,
  .dev-tut-cat__inner,
  .dev-spec__inner,
  .dev-pop-tuts__inner,
  .vid-tuts__inner,
  .lp-sec__inner,
  .exp-res__inner,
  .tut-faq__inner,
  .news-comm-sec__inner,
  .news-sec__inner,
  .news-releases-sec__inner,
  .news-nl-sec__inner,
  .news-devices-sec__inner,
  .news-reviews-sec__inner,
  .blog-sec__inner,
  .blog-hero-sec__inner,
  .blog-featured-sec__inner,
  .blog-articles-sec__inner,
  .blog-cat-sec__inner,
  .blog-nl-sec__inner,
  .dev-hero-sec__inner,
  .dev-grid-sec__inner,
  .dev-cmp-sec__inner,
  .dev-matrix-sec__inner,
  .dev-faq-sec__inner,
  .dev-nl-sec__inner,
  .cmp-hero__inner,
  .cmp-matrix__inner,
  .cmp-sec__inner,
  .sec-inner,
  .section-inner,
  .hero-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 640px) {

  .container,
  .main-container,
  .hero-layout,
  .section-container,
  .tut-hero__container,
  .tut-hero__inner,
  .tut-featured__inner,
  .tut-categories__inner,
  .tut-search-bar__inner,
  .tut-catalog__inner,
  .dev-tut-cat__inner,
  .dev-spec__inner,
  .dev-pop-tuts__inner,
  .vid-tuts__inner,
  .lp-sec__inner,
  .exp-res__inner,
  .tut-faq__inner,
  .news-comm-sec__inner,
  .news-sec__inner,
  .news-releases-sec__inner,
  .news-nl-sec__inner,
  .news-devices-sec__inner,
  .news-reviews-sec__inner,
  .blog-sec__inner,
  .blog-hero-sec__inner,
  .blog-featured-sec__inner,
  .blog-articles-sec__inner,
  .blog-cat-sec__inner,
  .blog-nl-sec__inner,
  .dev-hero-sec__inner,
  .dev-grid-sec__inner,
  .dev-cmp-sec__inner,
  .dev-matrix-sec__inner,
  .dev-faq-sec__inner,
  .dev-nl-sec__inner,
  .cmp-hero__inner,
  .cmp-matrix__inner,
  .cmp-sec__inner,
  .sec-inner,
  .section-inner,
  .hero-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════
   GLOBAL COMPREHENSIVE RESPONSIVE DESIGN BREAKPOINTS
   Mobile (320px-640px), Tablet (641px-1024px), Desktop (1025px+)
   ════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 1024px) {
  .mega-hero-main-title {
    font-size: 1.85rem !important;
  }

  .grid-3-col,
  .articles-grid,
  .tutorials-grid,
  .releases-cards-grid,
  .benefits-grid,
  .dev-pop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .mega-filter-hero-banner {
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }

  .mega-hero-main-title {
    font-size: 1.5rem !important;
  }

  .mega-hero-filter-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {

  .grid-3-col,
  .grid-2-col,
  .articles-grid,
  .tutorials-grid,
  .releases-cards-grid,
  .benefits-grid,
  .dev-pop-grid,
  .changelog-columns-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .news-nl-stats,
  .news-rel-stats,
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .mega-hero-main-title {
    font-size: 1.35rem !important;
  }

  .app-banner-content,
  .nl-hero-card__layout,
  .feat-rel-card__header-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .app-banner-actions,
  .feat-rel-card__actions {
    width: 100% !important;
    flex-direction: column !important;
  }

  .app-banner-actions .btn,
  .feat-rel-card__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 380px) {

  .news-nl-stats,
  .news-rel-stats,
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PLAYERSDK DYNAMIC ADVERTISEMENT STYLING
   ========================================================================== */

/* Zero-Space Default when disabled */
.playersdk-ad-container:empty,
.playersdk-ad-container[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Base Ad Container */
.playersdk-ad-container {
  box-sizing: border-box;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.playersdk-ad-inner {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.playersdk-ad-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.playersdk-ad-badge span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: uppercase;
}

.playersdk-ad-banner-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
}

.playersdk-ad-img-box {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #0b0f19;
}

.playersdk-ad-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.playersdk-ad-banner-link:hover .playersdk-ad-banner-img {
  transform: scale(1.04);
}

.playersdk-ad-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.playersdk-ad-cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  background: #2563eb;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.playersdk-ad-banner-link:hover .playersdk-ad-cta {
  background: #1d4ed8;
  transform: translateX(3px);
}

/* Floating Side Rail Placement (Available Outer Margin Space) */
#playersdk-side-ad {
  position: fixed;
  right: 20px;
  top: 150px;
  width: 250px;
  z-index: 99;
}

/* Only show fixed side rail on screens with enough margin space */
@media (max-width: 1439px) {
  #playersdk-side-ad {
    display: none !important;
  }
}

/* In-Between Section Placement */
#playersdk-inbetween-ad {
  max-width: 1200px;
  width: calc(100% - 48px);
  margin: 40px auto;
  clear: both;
}

#playersdk-inbetween-ad .playersdk-ad-banner-img {
  max-height: 220px;
}

/* --------------------------------------------------------
   PLAYERSDK AD ADMIN MODAL STYLING
   -------------------------------------------------------- */
.playersdk-ad-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.playersdk-ad-modal.active {
  display: flex;
}

.playersdk-ad-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.playersdk-ad-modal-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  padding: 28px;
  z-index: 2;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.playersdk-ad-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.playersdk-ad-modal-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.playersdk-ad-modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.playersdk-ad-modal-close:hover {
  color: var(--text-primary);
}

.playersdk-ad-form-group {
  margin-bottom: 18px;
}

.playersdk-ad-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.playersdk-ad-form-group small {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.ad-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
}

.ad-input:focus {
  outline: none;
  border-color: #2563eb;
}

.ad-input.code-area {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
}

.radio-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 500;
}

.toggle-group {
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ad-btn {
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ad-btn.primary {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.ad-btn.primary:hover {
  background: #1d4ed8;
}

.playersdk-ad-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* ── 91mobiles Streaming Device Portal Styles ── */
.gsm-container {
  max-width: 1180px;
  margin: 0 auto;
  font-family: inherit;
}

.gsm-section-card {
  background: var(--bg-card, #0f172a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.gsm-sec-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.gsm-sec-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gsm-sec-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 4px 0 0 0;
}

.gsm-spec-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gsm-filter-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.gsm-filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.gsm-filter-btn.active {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
}

.gsm-full-specs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gsm-spec-table-block {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--bg-card, #0f172a) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 20px;
}

.gsm-spec-table-head {
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.gsm-spec-table-head h4 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.gsm-spec-table-head h4 i {
  color: #ea580c !important;
  font-size: 1.2rem !important;
}

.gsm-spec-count-tag {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.04em !important;
}

.gsm-spec-table-body {
  display: flex !important;
  flex-direction: column !important;
}

.gsm-spec-table-row {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  font-size: 0.92rem !important;
  align-items: center !important;
  gap: 16px !important;
}

.gsm-spec-table-row:last-child {
  border-bottom: none !important;
}

.gsm-spec-table-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015) !important;
}

.gsm-spec-label {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.9rem !important;
}

.gsm-spec-label i {
  color: #ea580c !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

.gsm-spec-value {
  color: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

@media (max-width: 640px) {
  .gsm-spec-table-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 16px !important;
  }
}