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

: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);
}

/* 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);
  
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.15);
  --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);

  --hero-glow-1: rgba(37, 99, 235, 0.03);
  --hero-glow-2: rgba(59, 130, 246, 0.02);
}

/* 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;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* --------------------------------------------------------
   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 transparent;
  transition: height var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

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

/* Logo */
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--logo-color);
}

.logo-accent {
  color: var(--accent);
}

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

/* Desktop Nav Menu */
.desktop-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);
}

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

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}

.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 {
  width: auto;
  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: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

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

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

#themeToggle.action-btn: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 {
  content: '';
  position: absolute;
  top: 3px;
  width: 26px;
  height: 26px;
  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;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

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

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

/* Icons inside the pill */
#themeToggle.action-btn i {
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  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 {
  display: flex !important;
  order: 0;
}

/* Moon icon (right side) */
#themeToggle.action-btn .theme-icon-dark {
  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 {
  color: #ffffff;
  transform: scale(1.1);
}
[data-theme="light"] #themeToggle.action-btn .theme-icon-dark {
  color: var(--text-secondary);
  opacity: 0.5;
  transform: scale(0.9);
}

[data-theme="dark"] #themeToggle.action-btn .theme-icon-dark {
  color: #050a0e;
  transform: scale(1.1);
}
[data-theme="dark"] #themeToggle.action-btn .theme-icon-light {
  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;
}

.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 {
  max-width: 1440px;
  margin: 0 auto;
}

.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 Overlay Component
-------------------------------------------------------- */

.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 var(--transition-smooth), visibility 0.4s var(--transition-smooth);
}

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

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

.search-container {
  width: 100%;
  max-width: 600px;
  padding: 40px 20px;
  position: relative;
}

.search-close-btn {
  position: absolute;
  top: -40px;
  right: 20px;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-normal);
}

.search-close-btn:hover {
  color: var(--text-primary);
}

.search-input-wrapper {
  position: relative;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-icon {
  font-size: 1.8rem;
  color: var(--accent);
}

#searchInput {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  outline: none;
  background: none;
  border: none;
}

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

.search-suggestions {
  margin-top: 30px;
}

.search-suggestions h4 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  margin-bottom: 15px;
}

.search-suggestions ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-suggestions ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text-secondary);
}

.search-suggestions ul li a:hover {
  color: var(--accent);
  padding-left: 5px;
}

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

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

  .header-container,
  .hero-layout,
  .mega-grid {
    padding: 0 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 {
    padding: 0 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);
}

/* Editorial 12-Column Grid Layout */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

/* Cards Base */
.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 var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

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

/* Large Featured Card (Spans 7 Columns) */
.large-featured-card {
  grid-column: span 7;
}

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

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s var(--transition-smooth);
}

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

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.card-category {
  position: absolute;
  top: 24px;
  left: 24px;
  background-color: rgba(var(--accent-rgb), 0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

[data-theme="light"] .card-category {
  background-color: var(--accent);
  color: #ffffff;
  border: none;
}

.large-featured-card .card-details {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.card-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
}

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

.card-footer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

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

.card-meta-dot {
  opacity: 0.3;
}

/* Slide Arrow CTA Button Link */
.card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  align-self: flex-start;
}

.card-action-btn span {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition-normal);
}

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

.card-action-btn:hover span {
  border-bottom-color: var(--accent);
}

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

/* Right Side Stack of Supporting Cards (Spans 5 Columns) */
.supporting-stack {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.supporting-card {
  padding: 30px;
  height: 100%;
}

.supporting-card:hover {
  box-shadow: 0 15px 30px rgba(var(--accent-rgb), 0.05);
}

.card-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.supporting-badge-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.supporting-category {
  color: var(--accent);
  font-weight: 600;
}

.meta-dot {
  opacity: 0.3;
}

.supporting-headline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
}

/* --------------------------------------------------------
   Media Query Responsive Overrides for Phase 2
-------------------------------------------------------- */

/* Tablet Portrait & Landscape (Stack cards to 2-columns / Spacings) */
@media (max-width: 1023px) {
  .featured-articles-section {
    padding: 80px 30px;
  }

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

  .editorial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .large-featured-card {
    grid-column: span 2;
  }

  .supporting-stack {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* Mobile Portrait Stack */
@media (max-width: 767px) {
  .featured-articles-section {
    padding: 60px 20px;
  }

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

  .large-featured-card {
    grid-column: span 1;
  }

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

  .supporting-stack {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

/* --------------------------------------------------------
   Browse by Categories Section Styling
-------------------------------------------------------- */

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

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

.category-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;
}

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

/* Large Featured Category Card (Spans 7 Columns) */
.large-featured-category-card {
  grid-column: span 7;
}

.card-category-label {
  position: absolute;
  top: 24px;
  left: 24px;
  background-color: rgba(var(--accent-rgb), 0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

[data-theme="light"] .card-category-label {
  background-color: var(--accent);
  color: #ffffff;
  border: none;
}

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

.large-featured-category-card .card-details {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* Right Side Stack: 2x2 Grid of Category Cards (Spans 5 Columns) */
.categories-stack-grid {
  grid-column: span 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.supporting-category-card {
  padding: 30px;
  height: 100%;
}

.supporting-category-card:hover {
  box-shadow: 0 15px 30px rgba(var(--accent-rgb), 0.05);
}

.category-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 20px;
  transition: transform var(--transition-normal), background-color var(--transition-normal);
}

.supporting-category-card:hover .category-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  background-color: rgba(var(--accent-rgb), 0.15);
}

.supporting-category-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.category-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.category-tags li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.category-tags li i {
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.6;
}

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

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

  .large-featured-category-card {
    grid-column: span 2;
  }

  .categories-stack-grid {
    grid-column: span 2;
    gap: 30px;
  }
}

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

  .large-featured-category-card {
    grid-column: span 1;
  }

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

  .categories-stack-grid {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

/* --------------------------------------------------------
   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: 60px;
  gap: 30px;
}

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

.device-card-item {
  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;
}

.device-card-item:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
}

.device-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #000;
}

.device-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s var(--transition-smooth);
}

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

.article-count-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgba(6, 8, 15, 0.75);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 5px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .article-count-badge {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.device-details {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

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

.device-icon {
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform 0.4s var(--transition-smooth);
}

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

.device-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.device-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 5px;
}

/* 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
-------------------------------------------------------- */

.tutorials-section {
  padding: 80px 40px;
  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;
}

.tutorials-grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

/* 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 var(--transition-smooth), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

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

/* Large Featured Tutorial Card (Spans 7 Columns) */
.featured-tutorial-card {
  grid-column: span 7;
}

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

.featured-tutorial-card .card-details {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* Right Side Stack: 4 Supporting Cards (Spans 5 Columns) */
.tutorials-stack-grid {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.supporting-tutorial-card {
  padding: 20px 24px;
  height: auto;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
}

.supporting-tutorial-card:first-child {
  border-radius: 20px 20px 0 0;
}

.supporting-tutorial-card:last-child {
  border-radius: 0 0 20px 20px;
  border-bottom: none;
}

.supporting-tutorial-card:only-child {
  border-radius: 20px;
}

.supporting-tutorial-card:hover {
  transform: none;
  border-color: var(--border-color);
  box-shadow: none;
}

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

.supporting-img-box {
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
}

.supporting-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

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

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

/* Hover glow effect on category badges */
.supporting-category {
  transition: text-shadow var(--transition-normal);
}

.supporting-tutorial-card:hover .supporting-category {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

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

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

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

  .featured-tutorial-card {
    grid-column: span 2;
  }

  .tutorials-stack-grid {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .supporting-tutorial-card {
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
  }
}

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

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

  .featured-tutorial-card {
    grid-column: span 1;
  }

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

  .tutorials-stack-grid {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .supporting-tutorial-card {
    padding: 16px 20px;
  }

  .supporting-img-box {
    width: 68px;
    height: 56px;
  }
}

/* --------------------------------------------------------
   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: 60px;
  gap: 30px;
}

/* 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-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: 80px 40px;
  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: 60px;
  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(-5px);
  border-color: var(--border-hover);
  box-shadow: 0 18px 45px rgba(var(--accent-rgb), 0.07);
}

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

/* 2-column compact news grid */
.news-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Compact news card */
.compact-news-card {
  border-radius: 16px;
  flex-direction: column;
}

.compact-news-thumb-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #000;
}

.compact-news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.6s var(--transition-smooth);
}

.compact-news-card:hover .compact-news-thumb {
  transform: scale(1.09);
}

/* Category badge overlaid on thumbnail */
.compact-news-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  z-index: 3;
  transition: box-shadow var(--transition-normal);
}

.compact-news-card:hover .compact-news-badge {
  box-shadow: 0 0 12px currentColor;
}

/* Badge colour variants */
.compact-news-badge.player-update {
  background-color: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.compact-news-badge.devices {
  background-color: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #A78BFA;
}

.compact-news-badge.streaming {
  background-color: rgba(6, 182, 212, 0.18);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #22D3EE;
}

.compact-news-badge.technology {
  background-color: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #FBBF24;
}

.compact-news-badge.tutorial {
  background-color: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ADE80;
}

.compact-news-badge.security {
  background-color: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
}

/* Compact card text block */
.compact-news-info {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.compact-news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.compact-news-meta i {
  font-size: 0.82rem;
  color: var(--accent);
}

.meta-sep {
  color: var(--border-color);
}

/* Sliding arrow "Read More" link */
.news-read-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--transition-normal), color var(--transition-normal);
  margin-top: 4px;
  align-self: flex-start;
}

.news-read-link:hover {
  gap: 9px;
  color: var(--accent);
}

.news-arrow {
  font-size: 0.85rem;
  transition: transform var(--transition-normal);
}

.news-read-link:hover .news-arrow {
  transform: translateX(3px);
}

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

  .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 20px;
  }

  .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: center;
  justify-content: space-between;
  margin-bottom: 40px;
  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 {
  margin-bottom: 60px;
  text-align: center;
}

.community-header .header-center {
  max-width: 680px;
  margin: 0 auto;
}

/* 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: 18px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
}

.social-box-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.social-channels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.social-btn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 50% !important;
  background-color: rgba(var(--accent-rgb), 0.12);
  border: 1.5px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.7rem !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.7rem !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.social-btn:hover {
  transform: scale(1.15) translateY(-2px);
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.45);
  color: #06080f;
}

/* 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
-------------------------------------------------------- */

.main-footer,
[data-theme="light"] .main-footer {
  position: relative;
  background-color: #0b0f19 !important;
  color: #94a3b8 !important;
  padding: 60px 40px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden;
  z-index: 10;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --border-color: rgba(255, 255, 255, 0.08);
}

.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.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 35px;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-column h4,
[data-theme="light"] .main-footer .footer-column h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  margin-bottom: 16px;
  margin-top: 0;
}

/* Brand Column styling */
.brand-col .footer-logo,
[data-theme="light"] .main-footer .footer-logo,
[data-theme="light"] .main-footer .logo {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffffff !important;
  margin-bottom: 12px;
  display: inline-block;
  text-decoration: none;
}

.main-footer .logo-accent {
  color: #7cff6b !important;
}

[data-theme="light"] .main-footer .logo-accent {
  color: #2563eb !important;
}

.main-footer .logo-light {
  color: #cbd5e1 !important;
  font-weight: 300;
}

.brand-col .about-title,
[data-theme="light"] .main-footer .about-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  margin-bottom: 8px;
  margin-top: 4px;
}

.brand-col .brand-desc,
[data-theme="light"] .main-footer .brand-desc {
  font-size: 0.84rem;
  color: #94a3b8 !important;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 330px;
}

.follow-us-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.follow-us-label,
[data-theme="light"] .main-footer .follow-us-label {
  font-size: 0.76rem;
  color: #64748b !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Social links list */
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.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.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.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.3s ease;
}

.footer-social-icon:hover {
  transform: translateY(-3px) scale(1.08);
  background-color: rgba(124, 255, 107, 0.15) !important;
  border-color: rgba(124, 255, 107, 0.4) !important;
  box-shadow: 0 4px 15px rgba(124, 255, 107, 0.25);
}

.footer-social-icon:hover i {
  color: #7cff6b !important;
}

[data-theme="light"] .main-footer .footer-social-icon:hover {
  background-color: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

[data-theme="light"] .main-footer .footer-social-icon:hover i {
  color: #2563eb !important;
}

/* Link Lists styling */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list a {
  font-size: 0.85rem;
  color: #94a3b8 !important;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: all 0.25s ease;
}

.footer-links-list a:hover {
  color: #7cff6b !important;
  transform: translateX(4px);
}

[data-theme="light"] .main-footer .footer-links-list a:hover {
  color: #2563eb !important;
}

/* Bottom Bar styling */
.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: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.bottom-left p,
[data-theme="light"] .main-footer .bottom-left p {
  font-size: 0.8rem;
  color: #64748b !important;
  margin: 0;
}

.enthusiasts-tag,
[data-theme="light"] .main-footer .enthusiasts-tag {
  font-size: 0.8rem;
  color: #64748b !important;
  font-weight: 500;
}

/* 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-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"] .downloads-header .badge-dot,
[data-theme="light"] .downloads-section .badge-dot {
  background-color: #2563eb !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6) !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 */
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-green,
[data-theme="dark"] .badge-green,
[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"] .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 {
  color: #000000 !important;
}

/* ============================================================
   LIGHT THEME BLUE BUTTON & ACTIVE TAB/CHIP ENFORCEMENT (WHITE TEXT)
   ============================================================ */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-accent,
[data-theme="light"] .btn-blue,
[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"] .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-accent *,
[data-theme="light"] .btn-blue *,
[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"] .portal-tab.active *,
[data-theme="light"] .download-row-item:hover .btn-action-download * {
  color: #ffffff !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;
}

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