/* ==========================================================================
   SOJU88 - Unified Alternate Language Stylesheet
   Used by all localized folders (de, en, en-us, es, fr, hi, it, ja, ko, ms, pt, ru, ta, th, tl, vi, zh-cn, zh-tw)
   Bridges all variations in HTML class naming between newer and older homepage templates.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── DESIGN SYSTEM TOKENS & ALIASES ── */
:root {
  /* Global Design Tokens (style.css naming) */
  --color-bg: #060610;
  --color-bg-secondary: #0d0d1a;
  --color-card: #12121f;
  --color-card-hover: #1a1a2e;
  --color-border: rgba(124, 58, 237, 0.15);
  --color-border-hover: rgba(124, 58, 237, 0.45);
  
  /* Brand / Accent Colors */
  --color-primary: #7c3aed;
  --color-primary-light: #9d63f5;
  --color-primary-dark: #5b21b6;
  --color-secondary: #06b6d4;
  --color-secondary-light: #22d3ee;
  --color-gold: #f59e0b;
  --color-gold-light: #fbbf24;
  --color-green: #10b981;
  --color-red: #ef4444;

  /* Typography */
  --font-primary: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing & Utilities */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s cubic-bezier(.4, 0, .2, 1);
  --container-max: 1280px;

  /* Aliases for lang.css legacy mapping */
  --bg: #060610;
  --bg2: #0d0d1a;
  --card: #12121f;
  --accent: #7c3aed;
  --accent-l: #9d63f5;
  --glow: rgba(124, 58, 237, 0.35);
  --cyan: #06b6d4;
  --cyan-glow: rgba(6, 182, 212, 0.3);
  --gold: #f59e0b;
  --green: #10b981;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --muted: #64748b;
  --border: rgba(255, 255, 255, 0.07);
  --border-a: rgba(124, 58, 237, 0.4);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 32px rgba(124, 58, 237, 0.3);
  --t: all 0.3s cubic-bezier(.4, 0, .2, 1);
  --font: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-accent: rgba(124, 58, 237, 0.4);
  --transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  --font-main: 'Outfit', sans-serif;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── LAYOUT UTILITIES ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section-alt {
  background-color: var(--color-bg-secondary);
}

.text-gradient, .gradient-text {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gold {
  background: linear-gradient(135deg, var(--color-gold), #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ── GRIDS ── */
.grid-3, .cards-grid, .news-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.grid-2, .reviews-grid, .authors-grid, .trending-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
}

.grid-4, .features-grid, .internal-links-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* Specific Sidebar Grid Override */
.trending-reviews-grid {
  grid-template-columns: 1fr 2fr !important;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border-radius: var(--radius-md) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--transition-base) !important;
  border: 2px solid transparent !important;
  white-space: nowrap !important;
  font-family: var(--font-primary) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5) !important;
  color: #fff !important;
}

.btn-outline, .btn-secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--color-border-hover) !important;
}

.btn-outline:hover, .btn-secondary:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: var(--color-primary-light) !important;
  transform: translateY(-2px) !important;
}

.btn-sm {
  padding: 9px 18px !important;
  font-size: .85rem !important;
}

/* ── BADGES ── */
.badge, .card-badge, .card-tag, .review-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.card-badge, .card-tag, .review-tag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
}

.badge-accent, .card-badge--guide, .card-tag {
  background: rgba(124, 58, 237, 0.15) !important;
  color: var(--color-primary-light) !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
}

.badge-cyan, .card-badge--strategy {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--color-secondary) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}

.badge-gold, .card-badge--review, .review-tag {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--color-gold) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

/* ── TAG SYSTEM ── */
.tags {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: var(--transition-fast) !important;
  background: rgba(124, 58, 237, 0.1) !important;
  color: var(--color-primary-light) !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
}
.tag:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.5) !important;
  color: var(--color-primary-light) !important;
}

.tag-purple {
  background: rgba(124, 58, 237, 0.15) !important;
  color: var(--color-primary-light) !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
}
.tag-purple:hover {
  background: rgba(124, 58, 237, 0.25) !important;
  border-color: rgba(124, 58, 237, 0.6) !important;
}

.tag-cyan {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--color-secondary-light) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}
.tag-cyan:hover {
  background: rgba(6, 182, 212, 0.25) !important;
  border-color: rgba(6, 182, 212, 0.6) !important;
}

.tag-gold {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--color-gold-light) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.tag-gold:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.tag-green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.tag-green:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
}

.tag-orange {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
}
.tag-orange:hover {
  background: rgba(249, 115, 22, 0.25) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
}

.tag-red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
.tag-red:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

/* ── CARDS (GLASSMORPHISM) ── */
.glass-card, .glass, .card, .guide-card, .review-card, .news-card, .trending-card, .author-card, .feature-card {
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.85), rgba(15, 15, 26, 0.8)) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition-base) !important;
  overflow: hidden;
}

.glass-card:hover, .glass:hover, .card:hover, .guide-card:hover, .review-card:hover, .news-card:hover, .feature-card:hover {
  border-color: var(--color-border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card), 0 0 32px rgba(124, 58, 237, 0.3) !important;
}

/* Card Image Wrappers */
.card-img, .card-img-wrap, .guide-card-img, .review-card-img, .news-card-img, .news-image-wrap {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.05)) !important;
  padding: 0 !important;
  height: auto !important;
}

/* Shorter formats */
.card-img-wrap-sm, .card-icon-wrap-sm, .review-card-img, .news-image-wrap {
  height: 160px !important;
  aspect-ratio: unset !important;
}

.card-img img, .card-img-wrap img, .guide-card-img img, .review-card-img img, .news-card-img img, .news-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: var(--transition-base) !important;
}

.glass-card:hover img, .glass:hover img, .card:hover img, .guide-card:hover img, .review-card:hover img, .news-card:hover img {
  transform: scale(1.05) !important;
}

.card-img-emoji, .card-img-placeholder {
  font-size: 4rem !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)) !important;
}

/* Card Body & Content */
.card-body, .guide-card-body, .review-card-body, .news-card-body, .news-body {
  padding: 24px !important;
}

.card-meta, .guide-meta, .news-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.card-title, .guide-card h3, .review-card h3, .news-card h3, .news-title, h3[itemprop="headline"] {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  color: var(--text-primary) !important;
}

.card-excerpt, .guide-excerpt, .review-excerpt, .news-excerpt {
  color: var(--text-secondary) !important;
  font-size: .9rem !important;
  margin-bottom: 18px !important;
  line-height: 1.65 !important;
}

.card-footer, .guide-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
  padding: 0 !important;
  border-top: none !important;
  background: none !important;
}

.author-mini, .card-author-mini, .card-author {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.author-avatar-sm, .author-avatar, .author-img,
.card-author img, .author img, .author-mini img, .review-meta img, .review-thumb {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  border: none !important;
  object-fit: cover !important;
}

.author-name-sm, .author-name {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.read-time, .date-str, .card-date, .news-date {
  font-size: .78rem !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

.read-more, .card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--color-primary-light) !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  transition: var(--transition-fast) !important;
}

.read-more:hover, .card-link:hover {
  gap: 10px !important;
  color: var(--color-secondary-light) !important;
}

.stars {
  color: var(--color-gold) !important;
  font-size: .85rem !important;
}

.score, .score-number {
  font-family: var(--font-mono) !important;
  font-weight: 900 !important;
  color: var(--color-gold) !important;
  font-size: 1.1rem !important;
}

/* ── HEADER & NAVIGATION ── */
/* ── SKIP LINK ── */
.skip-link, .skip-to-content {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  background: var(--color-primary) !important;
  color: white !important;
  padding: 8px 16px !important;
  z-index: 99999 !important;
  transition: top 0.2s, left 0s !important;
}

.skip-link:focus, .skip-to-content:focus {
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(6, 6, 16, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--color-border) !important;
  height: 72px !important;
}

.header-inner, .nav-inner, .nav-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
  gap: 24px !important;
  width: 100% !important;
}

.logo, .site-logo, .nav-logo, .footer-logo, .footer-brand-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--text-primary) !important;
}

.logo-soju, .logo-soju span {
  color: var(--text-primary) !important;
}

.logo-88, .nav-logo span, .logo span, .footer-logo span, .footer-brand-logo span {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-left: 2px !important;
}

.logo-icon, .nav-logo-icon {
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3) !important;
}

.logo-text, .nav-logo-text {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.main-nav, .nav-links, .nav-menu, .nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.main-nav li, .nav-links li, .nav-menu li, .nav-list li {
  display: inline-block !important;
  list-style: none !important;
  flex-shrink: 0 !important;
}

.nav-a, .nav-link, .main-nav a, .nav-links a, .nav-menu a, .nav-list a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: .92rem !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
  white-space: nowrap !important;
}

.nav-a:hover, .nav-a.active, .nav-link:hover, .nav-link.active,
.main-nav a:hover, .main-nav a.active,
.nav-links a:hover, .nav-links a.active,
.nav-menu a:hover, .nav-menu a.active {
  color: var(--text-primary) !important;
  background: rgba(124, 58, 237, 0.12) !important;
}

.nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
}

.dropdown, .nav-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 200px !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: var(--transition-base) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5) !important;
  z-index: 100 !important;
}

.nav-item:hover .dropdown, .nav-item:hover .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown a, .nav-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: .88rem !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
}

.dropdown a:hover, .nav-dropdown a:hover {
  color: var(--text-primary) !important;
  background: rgba(124, 58, 237, 0.15) !important;
}

/* ── LANGUAGE SWITCHER & BANNER ── */
.lang-switcher, .lang-selector {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .82rem !important;
}

.lang-btn {
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: var(--transition-fast) !important;
  font-size: .8rem !important;
}

.lang-btn:hover, .lang-btn.active {
  border-color: var(--color-primary) !important;
  color: var(--color-primary-light) !important;
  background: rgba(124, 58, 237, 0.1) !important;
}

.lang-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px !important;
  min-width: 200px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5) !important;
  display: none !important;
}

.lang-switcher:hover .lang-dropdown, .lang-selector:hover .lang-dropdown {
  display: block !important;
}

.lang-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: .85rem !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
}

.lang-dropdown a:hover, .lang-dropdown a.active {
  color: var(--text-primary) !important;
  background: rgba(124, 58, 237, 0.12) !important;
}

/* Language Banner */
.lang-banner {
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.08)) !important;
  border: 1px solid var(--color-border-hover) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 22px !important;
  margin-bottom: 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.lang-flag {
  font-size: 1.8rem !important;
}

.lang-info {
  flex: 1 !important;
}

.lang-info strong {
  display: block !important;
  font-size: .95rem !important;
  color: var(--text-primary) !important;
}

.lang-info small {
  font-size: .8rem !important;
  color: var(--text-secondary) !important;
}

.lang-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
  margin-bottom: 32px !important;
}

.lang-link {
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
}

.lang-link:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary-light) !important;
}

/* Grid of all languages in sitemap/footer */
.all-langs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 32px !important;
}

.lang-card {
  padding: 16px !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  text-align: center !important;
  transition: var(--transition-base) !important;
}

.lang-card:hover {
  border-color: var(--color-border-hover) !important;
  transform: translateY(-2px) !important;
}

.lang-card .flag {
  font-size: 1.8rem !important;
  margin-bottom: 8px !important;
}

.lang-card .lang-name {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.lang-card .lang-native {
  font-size: .75rem !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
}

/* ── HERO SECTION ── */
.hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 100px 0 80px !important;
  min-height: 92vh !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #060610 0%, #1a0533 50%, #001a2e 100%) !important;
}

.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.25 !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,.18) 0%, transparent 65%),
              radial-gradient(ellipse 50% 40% at 90% 80%, rgba(6,182,212,.1) 0%, transparent 60%) !important;
  z-index: 1 !important;
  pointer-events: none;
}

.hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 780px !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(6,182,212,.15)) !important;
  border: 1px solid var(--color-border-hover) !important;
  border-radius: 99px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--color-secondary-light) !important;
  margin-bottom: 28px !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.15) !important;
}

.hero h1, .hero-heading {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 24px !important;
  letter-spacing: -.02em !important;
  color: var(--text-primary) !important;
}

.hero-desc {
  font-size: clamp(1rem, 1.8vw, 1.18rem) !important;
  color: var(--text-secondary) !important;
  max-width: 620px !important;
  margin-bottom: 36px !important;
  line-height: 1.75 !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 64px !important;
}

.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding: 28px !important;
  background: rgba(26,26,46,.6) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.stat, .stat-item {
  text-align: center !important;
}

.stat-n, .stat-number {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
}

.stat-l, .stat-label {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

.stat-divider {
  width: 1px !important;
  background: var(--color-border) !important;
  align-self: stretch !important;
  margin: 8px 0 !important;
}

/* Floating Orbs & Particles */
.orb {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  animation: orbFloat 8s ease-in-out infinite !important;
  z-index: 0;
}

.orb-1 { width: 500px !important; height: 500px !important; background: radial-gradient(circle, rgba(124,58,237,.25), transparent) !important; top: -150px !important; right: -100px !important; animation-delay: 0s !important; }
.orb-2 { width: 350px !important; height: 350px !important; background: radial-gradient(circle, rgba(6,182,212,.18), transparent) !important; bottom: -80px !important; left: -80px !important; animation-delay: -3s !important; }
.orb-3 { width: 250px !important; height: 250px !important; background: radial-gradient(circle, rgba(245,158,11,.12), transparent) !important; top: 40% !important; left: 30% !important; animation-delay: -5s !important; }

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

.particles { position: absolute !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.particle {
  position: absolute !important; width: 2px !important; height: 2px !important; background: var(--color-primary-light) !important;
  border-radius: 50% !important; animation: particleDrift linear infinite !important;
  opacity: 0 !important;
}

@keyframes particleDrift {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .6; }
  100% { transform: translateY(-10vh) translateX(60px); opacity: 0; }
}

/* ── FAQ SECTION ── */
.faq-section {
  background-color: var(--color-bg-secondary) !important;
}

.faq-container, .faq-list {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.faq-item {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: var(--transition-base) !important;
}

.faq-item:hover {
  border-color: var(--color-border-hover) !important;
}

.faq-item.open {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25) !important;
}

.faq-question, .faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: .97rem !important;
  gap: 16px !important;
  user-select: none !important;
  background: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  text-align: left !important;
}

.faq-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: rgba(124, 58, 237, 0.15) !important;
  color: var(--color-primary-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .85rem !important;
  transition: transform 0.3s !important;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
}

.faq-answer, .faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, padding 0.3s !important;
  color: var(--text-secondary) !important;
  font-size: .93rem !important;
  line-height: 1.75 !important;
}

.faq-answer-inner, .faq-a-inner {
  padding: 0 24px 20px !important;
}

.faq-item.open .faq-answer, .faq-item.open .faq-a {
  max-height: 400px !important;
}

/* ── AUTHORS & E-E-A-T ── */
.authors-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
}

.author-card {
  padding: 32px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
}

.author-header {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.author-avatar, .author-img, .author-img-placeholder {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 3px solid var(--color-border-hover) !important;
  object-fit: cover !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
}

.author-info {
  flex: 1 !important;
}

.author-name {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
  color: var(--text-primary) !important;
}

.author-role {
  font-size: .83rem !important;
  color: var(--color-primary-light) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 10px !important;
}

.author-bio {
  font-size: .9rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

.author-stats-row, .author-stats {
  display: flex !important;
  gap: 20px !important;
  margin-top: 12px !important;
  flex-wrap: wrap !important;
}

.a-stat, .author-stat {
  font-size: .8rem !important;
  color: var(--text-muted) !important;
}

.a-stat strong, .author-stat-num {
  color: var(--text-primary) !important;
  display: block !important;
  font-size: .92rem !important;
}

.author-stat-label {
  font-size: .73rem !important;
  color: var(--text-muted) !important;
}

.author-social {
  display: flex !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.author-social-link {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid var(--color-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .9rem !important;
  color: var(--color-primary-light) !important;
  transition: var(--transition-fast) !important;
}

.author-social-link:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.editorial-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 24px !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid var(--color-border-hover) !important;
  border-radius: var(--radius-md) !important;
  margin-top: 40px !important;
}

/* ── NEWSLETTER ── */
.newsletter, .newsletter-section {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.1)) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 60px 0 !important;
}

.nl-inner, .newsletter-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
}

.nl-text, .newsletter-text {
  flex: 1 !important;
  min-width: 280px !important;
}

.nl-text h2, .newsletter-text h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
  color: var(--text-primary) !important;
}

.nl-text p, .newsletter-text p {
  color: var(--text-secondary) !important;
  font-size: .95rem !important;
}

.nl-form, .newsletter-form {
  flex: 1 !important;
  min-width: 280px !important;
  max-width: 480px !important;
}

.nl-group, .newsletter-input-group {
  display: flex !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border-hover) !important;
}

.nl-input, .newsletter-input {
  flex: 1 !important;
  padding: 14px 18px !important;
  background: rgba(26, 26, 46, 0.8) !important;
  border: none !important;
  outline: none !important;
  color: var(--text-primary) !important;
  font-family: var(--font-primary) !important;
  font-size: .92rem !important;
}

.nl-input::placeholder, .newsletter-input::placeholder {
  color: var(--text-muted) !important;
}

.nl-btn, .newsletter-btn {
  padding: 14px 24px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  color: #fff !important;
  white-space: nowrap !important;
  transition: var(--transition-fast) !important;
}

.nl-btn:hover, .newsletter-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
}

/* ── FOOTER ── */
.site-footer {
  background: var(--color-bg-secondary) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 72px 0 0 !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  margin-bottom: 56px !important;
}

.footer-brand-desc {
  font-size: .88rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.75 !important;
  margin: 16px 0 20px !important;
}

.footer-social {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.social-a, .social-link {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  transition: var(--transition-fast) !important;
}

.social-a:hover, .social-link:hover {
  border-color: var(--color-primary) !important;
  background: rgba(124, 58, 237, 0.15) !important;
  color: var(--color-primary-light) !important;
  transform: translateY(-2px) !important;
}

.footer-col h4 {
  font-size: .83rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--text-muted) !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.footer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-links a {
  font-size: .88rem !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.footer-links a:hover {
  color: var(--color-primary-light) !important;
  padding-left: 4px !important;
}

.footer-links a::before {
  content: '›' !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.footer-bottom {
  border-top: 1px solid var(--color-border) !important;
  padding: 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer-bottom-links {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.footer-bottom-links a {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  transition: var(--transition-fast) !important;
}

.footer-bottom-links a:hover {
  color: var(--color-primary-light) !important;
}

.footer-copyright {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
}

/* ── SCROLL PROGRESS & BUTTONS ── */
#read-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-gold)) !important;
  z-index: 9999 !important;
  transition: width .15s linear !important;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.4) !important;
}

#scroll-top, .scroll-top {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  color: #fff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(16px) !important;
  transition: var(--transition-base) !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
}

#scroll-top.visible, .scroll-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

#scroll-top:hover, .scroll-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5) !important;
}

/* ── BREADCRUMBS ── */
.breadcrumb-nav, .breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  padding: 12px 0 !important;
  flex-wrap: wrap !important;
}

.breadcrumb a {
  color: var(--text-secondary) !important;
  transition: var(--transition-fast) !important;
}

.breadcrumb a:hover {
  color: var(--color-primary-light) !important;
}

.breadcrumb-sep {
  color: var(--text-muted) !important;
}

/* ── RESPONSIVE GRID SYSTEMS ── */
@media (max-width: 1100px) {
  .grid-4, .features-grid, .internal-links-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Medium screens: fit navigation items */
@media (min-width: 901px) and (max-width: 1200px) {
  .nav-a, .nav-link, .main-nav a, .nav-links a, .nav-menu a, .nav-list a {
    padding: 6px 10px !important;
    font-size: .84rem !important;
  }
  .header-inner, .nav-inner, .nav-wrap {
    gap: 12px !important;
  }
}

@media (max-width: 900px) {
  .grid-3, .cards-grid, .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hide all desktop navigation and call-to-actions */
  .nav-desktop, .main-nav, .nav-links, .nav-menu, .nav-list, .nav-cta, .header-cta, 
  .nav-wrap .btn, .nav-inner .btn, .header-inner .btn, .site-header .btn {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trending-reviews-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── MOBILE NAVIGATION BRIDGING ── */
.mobile-nav, .mobile-menu, .nav-mobile {
  display: none !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100vh - 72px) !important;
  background: rgba(6, 6, 16, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 24px 20px !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mobile-nav.open, .mobile-menu.open, .nav-mobile.open,
.mobile-nav.active, .mobile-menu.active, .nav-mobile.active {
  display: flex !important;
  animation: slideDownMenu 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideDownMenu {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav a, .mobile-menu a, .nav-mobile a, .nav-mobile-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: var(--transition-base) !important;
  min-height: 52px !important;
  background: rgba(18, 18, 31, 0.4) !important;
  white-space: nowrap !important;
}

.mobile-nav a:hover, .mobile-menu a:hover, .nav-mobile a:hover, .nav-mobile-link:hover,
.mobile-nav a.active, .mobile-menu a.active, .nav-mobile a.active, .nav-mobile-link.active {
  color: var(--text-primary) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.12) !important;
}

@media (max-width: 640px) {
  .grid-3, .cards-grid, .news-grid,
  .grid-2, .reviews-grid, .authors-grid,
  .grid-4, .features-grid, .internal-links-grid,
  .trending-reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .author-card {
    flex-direction: column !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}