/* ============================================================
   SmartAi AutoPost — Main Stylesheet
   Professional Premium Design
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
  --primary: #0d9edf;
  --primary-dark: #0b8ac6;
  --primary-light: #e0f5fd;
  --secondary: #16a34a;
  --secondary-light: #dcfce7;
  --accent: #00b4d8;
  --dark: #0c1a2e;
  --dark-2: #1a2d45;
  --dark-3: #274060;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --bg-2: #f0faf4;
  --white: #ffffff;
  --green: #16a34a;
  --red: #ef4444;
  --orange: #f59e0b;
  --gradient: linear-gradient(135deg, #0d9edf 0%, #16a34a 100%);
  --gradient-soft: linear-gradient(135deg, #e0f5fd 0%, #dcfce7 100%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-glow: 0 0 30px rgba(13,158,223,.25);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'DM Sans', 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-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(13,158,223,.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(13,158,223,.45);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-download {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: var(--dark);
  border: none;
  box-shadow: 0 4px 15px rgba(245,158,11,.4);
  font-weight: 700;
}
.btn-download:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245,158,11,.5);
}
.btn-ghost {
  background: rgba(255,255,255,.15);
  color: var(--white);
  border: 2px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}
.btn-ghost-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.4);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
}
.btn-white {
  background: var(--white);
  color: var(--primary);
  font-weight: 700;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
}
.btn-lg { padding: 13px 26px; font-size: 13px; border-radius: 10px; }
.btn-full { width: 100%; justify-content: center; }

/* ===== SECTION HEADERS ===== */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--gradient-soft);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark);
  margin-bottom: 20px;
}
.section-desc {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 10px 0;
  background: rgba(15,23,42,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: var(--transition);
  overflow: visible;
}
.header.scrolled {
  padding: 5px 0;
  box-shadow: 0 4px 30px rgba(0,0,0,.4);
}
/* 20% chhota on scroll */
.header.scrolled .logo { font-size: 14px; }
.header.scrolled .logo-icon { width: 24px; height: 24px; font-size: 11px; }
.header.scrolled .nav-link { font-size: 11px; padding: 4px 9px; }
.header.scrolled .header-cta .btn { padding: 0 12px; height: 28px; font-size: 11px; }
.header.scrolled .lang-toggle { height: 28px; padding: 0 10px; font-size: 11px; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
  flex-shrink: 0;
  transition: font-size .3s ease;
}
.logo-icon {
  width: 30px; height: 30px;
  background: var(--gradient);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 14px;
  transition: width .3s ease, height .3s ease, font-size .3s ease;
}
.logo-accent { color: #38bdf8; }
.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: height .3s ease;
}
.header.scrolled .logo-img { height: 32px; }
.nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-link {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  transition: var(--transition), font-size .3s ease, padding .3s ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--white);
  background: rgba(255,255,255,.1);
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-cta .btn {
  padding: 0 14px;
  height: 36px;
  font-size: 13px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  transition: var(--transition), font-size .3s ease, padding .3s ease;
}
.header-cta .btn-outline {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
  background: transparent;
}
.header-cta .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}
.btn-support {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-support:hover {
  background: rgba(16,185,129,.22);
  border-color: rgba(16,185,129,.7);
  color: #34d399;
  transform: translateY(-1px);
}
.header.scrolled .btn-support { padding: 5px 11px; font-size: 11px; }
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-login:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.45);
  color: var(--white);
  transform: translateY(-1px);
}
.header.scrolled .btn-login { padding: 5px 11px; font-size: 11px; }
/* Mobile-only nav button — hidden on desktop, shown inside open mobile nav */
.nav-mobile-only { display: none !important; }

/* ── Header Mobile Quick Buttons (next to logo on mobile) ── */
.header-mobile-btns { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 55px 0 50px;
  background: var(--dark);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.hero-bg-anim { position: absolute; inset: 0; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
  animation: blobFloat 8s ease-in-out infinite;
}
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #0d9edf 0%, transparent 70%);
  top: -200px; left: -200px;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #16a34a 0%, transparent 70%);
  top: 50%; right: -150px;
  animation-delay: -3s;
}
.blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #0ea5e9 0%, transparent 70%);
  bottom: -100px; left: 40%;
  animation-delay: -5s;
}
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.05); }
  66% { transform: translate(-20px,30px) scale(.95); }
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-inner { color: var(--white); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}
.hero-badge i { color: #fbbf24; }
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 24px;
}
.hero-title-small {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .5px;
  display: inline-block;
  margin-bottom: 4px;
}
.hero-desc {
  font-size: 18px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 30px;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}
.stat:first-child { padding-left: 0; }
.stat-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
}
.stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.2);
}

/* Dashboard Card */
.hero-visual {
  position: relative;
}
.dashboard-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.dash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dash-dots { display: flex; gap: 6px; }
.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }
.dash-title {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  flex: 1;
  text-align: center;
}
.dash-body { display: flex; }
.dash-sidebar {
  width: 160px;
  background: rgba(0,0,0,.2);
  padding: 16px 0;
  flex-shrink: 0;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: var(--transition);
}
.side-item:hover, .side-item.active {
  color: var(--white);
  background: rgba(255,255,255,.08);
}
.side-item.active { border-left: 3px solid var(--primary); }
.side-item i { width: 14px; }
.dash-content { flex: 1; padding: 16px; }
.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.dash-stat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-num {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}
.ds-label { font-size: 10px; color: rgba(255,255,255,.5); }
.ds-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
  width: fit-content;
}
.ds-badge.green { background: rgba(16,185,129,.2); color: #10b981; }
.ds-badge.blue { background: rgba(13,158,223,.2); color: #38bdf8; }
.ds-badge.purple { background: rgba(22,163,74,.2); color: #86efac; }
.dash-feed { display: flex; flex-direction: column; gap: 8px; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.feed-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.feed-icon.rss { background: rgba(245,158,11,.2); color: #f59e0b; }
.feed-icon.yt { background: rgba(239,68,68,.2); color: #ef4444; }
.feed-icon.amazon { background: rgba(245,158,11,.2); color: #f59e0b; }
.feed-icon.gn { background: rgba(13,158,223,.2); color: #38bdf8; }
.feed-info { flex: 1; min-width: 0; }
.feed-title {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-meta { font-size: 10px; color: rgba(255,255,255,.4); }
.feed-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.feed-status.published { background: rgba(16,185,129,.2); color: #10b981; }
.feed-status.scheduled { background: rgba(245,158,11,.2); color: #f59e0b; }
.feed-status.draft { background: rgba(100,116,139,.2); color: #94a3b8; }

/* Floating Badges */
.float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  box-shadow: var(--shadow-lg);
  animation: floatBadge 4s ease-in-out infinite;
}
.float-badge i { color: var(--primary); }
.fb1 { top: -20px; right: -10px; animation-delay: 0s; }
.fb2 { bottom: 30%; left: -30px; animation-delay: -1.5s; }
.fb3 { bottom: -15px; right: 20%; animation-delay: -3s; }
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


/* ============================================================
   FEATURES
   ============================================================ */
/* ── Features Keyframes ── */
@keyframes fcFadeUp {
  from { opacity: 0; transform: translateY(40px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fcShine {
  0%   { left: -80%; }
  100% { left: 130%; }
}
@keyframes fcPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--fc-glow); }
  50%     { box-shadow: 0 0 0 8px transparent; }
}

.features {
  padding: 50px 0;
  background: #080e1e;
  position: relative;
  overflow: hidden;
}
.features-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.features .section-badge { color: #86efac; border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.08); }
.features .section-title { color: var(--white); }
.features .section-desc  { color: rgba(255,255,255,.55); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Base Card ── */
.feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 30px 26px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  opacity: 0;
  cursor: pointer;
}
.feature-card.fc-visible {
  animation: fcFadeUp .55s ease forwards;
}
.feature-card[data-delay="1"] { animation-delay: .08s; }
.feature-card[data-delay="2"] { animation-delay: .16s; }
.feature-card[data-delay="3"] { animation-delay: .24s; }
.feature-card[data-delay="4"] { animation-delay: .32s; }
.feature-card[data-delay="5"] { animation-delay: .40s; }
.feature-card[data-delay="6"] { animation-delay: .48s; }
.feature-card[data-delay="7"] { animation-delay: .56s; }
.feature-card[data-delay="8"] { animation-delay: .64s; }

.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--fc-color);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px var(--fc-color);
}

/* Shine sweep on hover */
.fc-shine {
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.feature-card:hover .fc-shine { animation: fcShine .6s ease forwards; }

/* Card number */
.fc-number {
  position: absolute;
  top: 18px; right: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--fc-color);
  opacity: .4;
  letter-spacing: 1px;
}

/* Icon */
.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  background: var(--fc-bg);
  color: var(--fc-color);
  transition: transform .3s ease, box-shadow .3s ease;
  --fc-glow: var(--fc-color);
}
.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(6deg);
  animation: fcPulse .6s ease;
}

/* Title & Text */
.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.feature-card p {
  color: rgba(255,255,255,.5);
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.feature-list { display: flex; flex-direction: column; gap: 7px; }
.feature-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.feature-list li i { color: var(--fc-color); font-size: 11px; flex-shrink: 0; }

/* Arrow */
.fc-arrow {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--fc-bg);
  color: var(--fc-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.feature-card:hover .fc-arrow { opacity: 1; transform: translateX(0); }

/* ── Color Variants ── */
.fc-purple { --fc-color: #86efac; --fc-bg: rgba(22,163,74,.12); }
.fc-orange  { --fc-color: #fb923c; --fc-bg: rgba(251,146,60,.12); }
.fc-green   { --fc-color: #34d399; --fc-bg: rgba(52,211,153,.12); }
.fc-yellow  { --fc-color: #fbbf24; --fc-bg: rgba(251,191,36,.12); }
.fc-blue    { --fc-color: #38bdf8; --fc-bg: rgba(96,165,250,.12); }
.fc-pink    { --fc-color: #f472b6; --fc-bg: rgba(244,114,182,.12); }
.fc-cyan    { --fc-color: #22d3ee; --fc-bg: rgba(34,211,238,.12); }
.fc-indigo  { --fc-color: #818cf8; --fc-bg: rgba(129,140,248,.12); }
.fc-emerald { --fc-color: #10b981; --fc-bg: rgba(16,185,129,.12); }

.features-cta { text-align: center; margin-top: 40px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-it-works {
  padding: 50px 0;
  background: var(--bg);
}
.steps-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
.step {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: var(--transition);
  position: relative;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.step-number {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 800;
  color: var(--primary-light);
  line-height: 1;
  margin-bottom: 16px;
}
.step-icon {
  width: 64px; height: 64px;
  background: var(--gradient);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--white);
  margin: 0 auto 20px;
  box-shadow: var(--shadow-glow);
}
.step h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}
.step-arrow {
  color: var(--primary);
  font-size: 24px;
  flex-shrink: 0;
  opacity: .5;
}

/* ============================================================
   SOURCES
   ============================================================ */
.sources {
  padding: 80px 0 70px;
  background: linear-gradient(180deg, #070e1d 0%, #0c1526 50%, #070e1d 100%);
  position: relative;
  overflow: hidden;
}
.sources-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(245,158,11,0.08) 0%, rgba(13,158,223,0.05) 50%, transparent 75%);
  pointer-events: none;
}
.sources .section-title { color: #e2e8f0; }
.sources-badge {
  background: rgba(245,158,11,0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245,158,11,0.3) !important;
}
.sources-badge i { margin-right: 5px; }
.sources-desc { color: #94a3b8 !important; }

/* ---- RSS Showcase Layout ---- */
.rss-showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 48px;
}
.rss-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 28px 24px;
  height: 100%;
}
.rss-panel-head {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rss-panel-head i { color: var(--primary); }
.rss-site-items { display: flex; flex-direction: column; gap: 13px; }
.rss-site-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #cbd5e1;
  font-weight: 500;
}
.rss-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}
.rss-feat-items { display: flex; flex-direction: column; gap: 13px; }
.rss-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #cbd5e1;
  font-weight: 500;
}
.rss-feat-item i { color: #22c55e; font-size: 15px; flex-shrink: 0; }
.rss-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.rss-flow-icon {
  width: 66px; height: 66px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.07));
  border: 1px solid rgba(245,158,11,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: #f59e0b;
  box-shadow: 0 0 28px rgba(245,158,11,0.18);
}
.rss-flow-arrow { color: rgba(255,255,255,0.18); font-size: 13px; }
.rss-flow-step {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rss-flow-step i { color: #86efac; }
.rss-flow-wp { border-color: rgba(33,117,155,0.4); }
.rss-flow-wp i { color: #21759b; }

/* ============================================================
   COMPARISON
   ============================================================ */
.comparison {
  padding: 50px 0;
  background: var(--bg);
}
.comparison-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 600px;
}
.comparison-table th {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  background: var(--dark);
  color: var(--white);
}
.comparison-table th:first-child { text-align: left; border-radius: var(--radius) 0 0 0; }
.comparison-table th:last-child { border-radius: 0 var(--radius) 0 0; }
.comparison-table .highlight-col {
  background: linear-gradient(180deg, #0d9edf 0%, #0b8ac6 100%);
  color: var(--white);
}
.comparison-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  text-align: center;
  color: var(--text-muted);
}
.comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--text); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--bg-2); }
.comparison-table .highlight-col {
  background: rgba(13,158,223,.06);
  color: var(--text);
  font-weight: 600;
}
.green { color: var(--green) !important; }
.red { color: var(--red) !important; }
.orange { color: var(--orange) !important; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  padding: 50px 0;
  background: var(--white);
  overflow: hidden;
}
.testi-marquee-wrap {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
  mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}
.testi-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testiScroll 40s linear infinite;
}
.testi-track:hover { animation-play-state: paused; }
@keyframes testiScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  width: 340px;
  flex-shrink: 0;
}
.testi-stars { color: #f59e0b; font-size: 18px; margin-bottom: 16px; letter-spacing: 2px; }
.testi-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 44px; height: 44px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 15px; color: var(--dark); }
.testi-author span { font-size: 13px; color: var(--text-light); }

/* ============================================================
   PRICING TEASER
   ============================================================ */
/* ============================================================
   PRICING TEASER
   ============================================================ */
.pricing-teaser {
  padding: 80px 0 72px;
  background: linear-gradient(180deg, #080e1c 0%, #0c1526 60%, #080e1c 100%);
  position: relative;
  overflow: hidden;
}
.pt-glow {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(13,158,223,0.1) 0%, rgba(22,163,74,0.07) 50%, transparent 72%);
  pointer-events: none;
}
.pt-badge {
  background: rgba(13,158,223,0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(13,158,223,0.3) !important;
}
.pt-badge i { margin-right: 5px; }
.pt-title { color: #f1f5f9; }
.pt-desc  { color: #94a3b8 !important; }

/* ---- Pack Grid ---- */
.pack-grid-home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 44px;
}

/* Base Card */
.pack-home-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
.pack-home-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}


/* Card Header */
.pkh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.pkh-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
}

/* Tags */
.pkh-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pkh-tag-free {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.25);
}
.pkh-tag-save {
  background: rgba(13,158,223,0.15);
  color: #38bdf8;
  border: 1px solid rgba(13,158,223,0.3);
}

/* Price */
.pkh-price {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1;
  margin-bottom: 6px;
}
.pkh-price sup {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  vertical-align: super;
  margin-right: 2px;
}

.pkh-rate {
  font-size: 12px;
  color: #475569;
  margin: 0 0 20px;
}

/* Separator */
.pkh-sep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 18px;
  margin-top: auto;
}

/* Button */
.pkh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 10px;
  font-family: var(--font-heading);
  transition: background .18s, color .18s;
}
.pkh-btn:hover { background: rgba(255,255,255,0.13); color: white; }
.pkh-btn i { font-size: 11px; }


/* Footer strip */
.pt-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 32px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475569;
}
.pt-footer i { color: #22c55e; margin-right: 5px; }
.pt-link {
  color: #38bdf8;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
}
.pt-link:hover { color: #93c5fd; }
.pt-link i { font-size: 11px; }

.hidden { display: none !important; }

/* ============================================================
   TUTORIAL
   ============================================================ */
.tutorial-section {
  padding: 80px 0;
  background: #f8fafc;
}
.tut-badge { background: rgba(13,158,223,.1); color: var(--primary); }
.tutorial-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.tut-title { margin: 14px 0 16px; }
.tut-desc { color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; }
.tut-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tut-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
}
.tut-list li i { color: var(--primary); font-size: 16px; }
.tut-video-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  aspect-ratio: 16/9;
}
.tut-video-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.tut-video-caption {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.tut-video-caption i { color: var(--primary); }

/* ============================================================
   SUPPORT
   ============================================================ */
.support-section {
  padding: 90px 0;
  background: linear-gradient(180deg, #080e1c 0%, #0c1526 60%, #080e1c 100%);
  position: relative;
  overflow: hidden;
}
.support-section::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(22,163,74,.18) 0%, transparent 70%);
  pointer-events: none;
}
.sup-badge { background: rgba(22,163,74,.15); color: #86efac; border: 1px solid rgba(22,163,74,.3); }
.support-section .section-title { color: #f1f5f9; }
.support-section .section-desc { color: rgba(255,255,255,.5); }

.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

/* Card */
.sup-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px 24px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor: default;
}
/* animated gradient glow on hover */
.sup-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}
.sup-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 19px;
  background: #0d1629;
  z-index: 1;
}
.sup-card > * { position: relative; z-index: 2; }
.sup-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(13,158,223,.2);
  border-color: transparent;
}
.sup-card:hover::before { opacity: 1; }

/* Icon */
.sup-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 26px;
  color: #fff;
  position: relative;
  transition: transform .3s ease;
}
.sup-card:hover .sup-icon { transform: scale(1.12) rotate(-4deg); }

/* Per-card icon colors */
.sup-card:nth-child(1) .sup-icon { background: linear-gradient(135deg, #0d9edf, #0ea5e9); box-shadow: 0 8px 24px rgba(13,158,223,.35); }
.sup-card:nth-child(2) .sup-icon { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 8px 24px rgba(22,163,74,.35); }
.sup-card:nth-child(3) .sup-icon { background: linear-gradient(135deg, #dc2626, #f97316); box-shadow: 0 8px 24px rgba(220,38,38,.35); }
.sup-card:nth-child(4) .sup-icon { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 8px 24px rgba(22,163,74,.35); }
.sup-card:nth-child(5) .sup-icon { background: linear-gradient(135deg, #ea580c, #f59e0b); box-shadow: 0 8px 24px rgba(234,88,12,.35); }

.sup-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #f1f5f9; }
.sup-card p { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.75; margin-bottom: 22px; }

.sup-link {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
  transition: gap .2s, color .2s;
}
.sup-link i { font-size: 11px; transition: transform .2s; }
.sup-link:hover { color: #fff; gap: 10px; }
.sup-link:hover i { transform: translateX(3px); }

/* Floating dots decoration */
.sup-card .sup-dot {
  position: absolute;
  border-radius: 50%;
  opacity: .06;
  pointer-events: none;
}
.sup-card .sup-dot1 { width: 80px; height: 80px; background: var(--gradient); top: -20px; right: -20px; }
.sup-card .sup-dot2 { width: 50px; height: 50px; background: var(--gradient); bottom: -10px; left: -10px; }


/* ============================================================
   BLOG
   ============================================================ */
.blog-section {
  padding: 90px 0;
  background: #f8fafc;
}
.blog-badge { background: rgba(13,158,223,.08); color: var(--primary); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

/* Card */
.blog-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e8edf5;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(13,158,223,.12);
}

/* Thumbnail */
.blog-thumb {
  height: 200px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.blog-thumb-1 { background: linear-gradient(135deg, rgba(13,158,223,.72) 0%, rgba(14,165,233,.72) 100%), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&q=80&fit=crop') center/cover no-repeat; }
.blog-thumb-2 { background: linear-gradient(135deg, rgba(22,163,74,.72) 0%, rgba(219,39,119,.72) 100%), url('https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?w=800&q=80&fit=crop') center/cover no-repeat; }
.blog-thumb-3 { background: linear-gradient(135deg, rgba(5,150,105,.72) 0%, rgba(16,185,129,.72) 100%), url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=800&q=80&fit=crop') center/cover no-repeat; }

/* Subtle pattern overlay */
.blog-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
}
.blog-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 60%);
}
.blog-thumb > * { position: relative; z-index: 1; }

.blog-cat {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.3);
  text-transform: uppercase;
}
.blog-featured-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Body */
.blog-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.blog-meta span {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.blog-meta i { color: var(--primary); font-size: 11px; }
.blog-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
  margin-bottom: 10px;
  transition: color .2s;
}
.blog-card:hover .blog-title { color: var(--primary); }
.blog-excerpt {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
  flex: 1;
}
.blog-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
  margin-top: auto;
}
.blog-link i { font-size: 11px; transition: transform .2s; }
.blog-link:hover { gap: 10px; }
.blog-link:hover i { transform: translateX(3px); }

/* Featured card accent */
.blog-card-featured { border-color: rgba(22,163,74,.2); }
.blog-card-featured .blog-title { color: #5b21b6; }
.blog-card-featured:hover .blog-title { color: #16a34a; }
.blog-card-featured .blog-link { color: #16a34a; }

.blog-footer {
  text-align: center;
  margin-top: 44px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 50px 0;
  background: var(--white);
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.faq-item.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,158,223,.08);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  text-align: left;
  transition: var(--transition);
  gap: 16px;
}
.faq-question:hover { color: var(--primary); }
.faq-question i {
  flex-shrink: 0;
  color: var(--primary);
  transition: transform .3s ease;
}
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-answer.open { max-height: 300px; }
.faq-answer p {
  padding: 0 28px 24px;
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 15px;
}

/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */
.download-section {
  padding: 80px 0;
  background: var(--dark);
}
.download-box {
  display: flex;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg, rgba(13,158,223,.12), rgba(22,163,74,.12));
  border: 1px solid rgba(13,158,223,.25);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.download-box::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(245,158,11,.15), transparent 70%);
  pointer-events: none;
}
.download-icon {
  flex-shrink: 0;
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--dark);
  box-shadow: 0 8px 24px rgba(245,158,11,.35);
}
.download-content { flex: 1; }
.download-content h2 {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.download-content p {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.download-content strong { color: rgba(255,255,255,.9); }
.download-meta {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
}
.download-meta li {
  display: flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.7); font-size: 14px;
}
.download-meta li i { color: #10b981; font-size: 13px; }
.download-action {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.download-action .btn { width: 100%; justify-content: center; min-width: 220px; }
.download-note {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px;
}
.download-note i { color: #10b981; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  padding: 80px 0;
  background: var(--bg);
}
.cta-box {
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-blob1, .cta-blob2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  pointer-events: none;
}
.cta-blob1 {
  width: 400px; height: 400px;
  background: var(--primary);
  top: -150px; left: -100px;
}
.cta-blob2 {
  width: 350px; height: 350px;
  background: var(--secondary);
  bottom: -100px; right: -50px;
}
.cta-inner { position: relative; z-index: 1; }
.cta-box h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}
.cta-box p {
  font-size: 18px;
  color: rgba(255,255,255,.75);
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cta-note {
  font-size: 14px;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  padding: 80px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand { text-align: center; }
.footer-brand .logo { margin-bottom: 16px; color: var(--white); justify-content: center; }
.footer-brand p {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.social-links { display: flex; gap: 12px; justify-content: center; }
.social-link {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: var(--transition);
  font-size: 15px;
}
.social-link:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
}
.footer-col a:hover { color: var(--white); padding-left: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.4);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in {
  opacity: 0;
  transition: opacity .6s ease;
}
.fade-in.visible { opacity: 1; }

/* ============================================================
   RESPONSIVE — MOBILE FRIENDLY
   ============================================================ */

/* ── Tablet Landscape (≤1100px) ── */
@media (max-width: 1100px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero { min-height: auto; padding: 60px 0 35px; }
  .hero-desc { max-width: 100%; }
  .float-badge { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── Tablet Portrait (≤900px) ── */
@media (max-width: 900px) {
  /* sections spacing */
  .features, .how-it-works, .sources, .comparison,
  .testimonials, .pricing-teaser, .faq, .final-cta { padding: 70px 0; }

  .features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pack-grid-home { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tutorial-inner { grid-template-columns: 1fr; gap: 36px; }
  .support-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  .steps-wrapper { flex-direction: column; align-items: stretch; gap: 12px; }
  .step-arrow { transform: rotate(90deg); text-align: center; }

  .rss-showcase { grid-template-columns: 1fr; }
  .rss-flow { flex-direction: row; padding: 8px 0; }
  .rss-flow-arrow { transform: rotate(-90deg); }

  /* comparison table scroll */
  .comparison-table-wrap { overflow-x: auto; }
}

/* ── Mobile Landscape / Large Phone (≤768px) ── */
@media (max-width: 768px) {
  /* HEADER */
  .nav { display: none; }
  .hamburger { display: flex; margin-left: 6px; }
  .header-inner { flex-wrap: nowrap; }

  /* Quick buttons next to logo */
  .header-mobile-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .hmb-btn {
    padding: 7px 11px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    gap: 5px !important;
    white-space: nowrap;
    line-height: 1;
  }

  /* Nav opens as full-width panel below header (position: absolute relative to .header) */
  .nav.open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - 52px);
    background: #0a1122;
    padding: 12px 16px 24px;
    z-index: 999;
    overflow-y: auto;
    border-top: 2px solid rgba(13,158,223,.4);
    box-shadow: 0 20px 40px rgba(0,0,0,.7);
  }
  .nav.open .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 12px;
    flex: 0 0 auto;
  }
  .nav.open .nav-link {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    display: block;
    color: rgba(255,255,255,.8);
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .nav.open .nav-link:hover,
  .nav.open .nav-link.active {
    background: rgba(255,255,255,.08);
    color: var(--white);
  }
  /* CTA buttons inside open nav */
  .nav.open .header-cta {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex: 0 0 auto;
  }
  .nav.open .header-cta .btn,
  .nav.open .header-cta .btn-support {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
    padding: 9px 10px !important;
    font-size: 12px !important;
    border-radius: 8px;
  }
  /* Download Plugin — same line as Get Started */
  .nav.open .nav-mobile-only {
    display: flex !important;
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 9px 8px !important;
    font-size: 12px !important;
    border-radius: 8px;
    order: 1;
  }
  /* Get Started — same line as Download Plugin */
  .nav.open .header-cta .btn-primary {
    flex: 1 1 0;
    order: 1;
  }
  /* Theme toggle — same line, fixed size */
  .nav.open .header-cta .theme-toggle {
    flex: 0 0 auto;
    order: 1;
  }
  /* Support & Login — second line, half width each */
  .nav.open .header-cta .btn-support,
  .nav.open .header-cta .btn-login {
    flex: 1 1 calc(50% - 5px);
    order: 2;
  }

  /* HERO */
  .hero { padding: 65px 0 30px; }
  .hero-title { font-size: 32px; line-height: 1.2; }
  .hero-desc { font-size: 15px; }
  .hero-badge { font-size: 12px; }
  .hero-actions {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
  }
  .hero-actions .btn { width: 100%; justify-content: center; font-size: 15px; }

  /* hero stats */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    justify-content: unset;
  }
  .stat-divider { display: none; }
  .stat { padding: 0; text-align: center; }
  .stat-num { font-size: 18px; }
  .stat-label { font-size: 10px; }

  /* hero visual — hide on mobile to keep hero compact */
  .hero-visual { display: none; }

  /* dashboard card — simplified on mobile */
  .dashboard-card { border-radius: var(--radius); overflow: hidden; }
  .dash-sidebar { display: none; }
  .dash-content { padding: 12px; }
  .dash-stat-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ds-num { font-size: 15px; }

  /* DOWNLOAD */
  .download-section { padding: 56px 0; }
  .download-box { flex-direction: column; padding: 32px 20px; gap: 24px; text-align: center; }
  .download-meta { justify-content: center; }
  .download-action .btn { min-width: unset; width: 100%; }

  /* SECTIONS */
  .features, .how-it-works, .sources, .comparison,
  .testimonials, .pricing-teaser, .faq, .final-cta { padding: 28px 0; }
  .section-header { margin-bottom: 20px; }
  .section-desc { font-size: 15px; }

  /* FEATURES */
  .features-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-card { padding: 24px 20px; }
  .feature-card .feature-icon { margin: 0 auto 18px; }
  .fc-number { top: 14px; right: 14px; }
  .fc-arrow { display: none; }

  /* HOW IT WORKS */
  .step { padding: 28px 22px; }
  .step-number { font-size: 42px; }


  /* COMPARISON TABLE */
  .comparison-table-wrap { border-radius: var(--radius); }
  .comparison-table th,
  .comparison-table td { padding: 12px 14px; font-size: 13px; }

  /* PRICING */
  .pack-grid-home { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .support-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }

  /* FAQ */
  .faq-list { gap: 8px; }
  .faq-question { padding: 16px 20px; font-size: 14px; }
  .faq-answer p { padding: 0 20px 18px; font-size: 14px; }

  /* CTA */
  .cta-box { padding: 48px 20px; border-radius: var(--radius-lg); }
  .cta-box h2 { font-size: 26px; }
  .cta-box p { font-size: 15px; }
  .cta-actions { flex-direction: column; gap: 12px; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* FOOTER */
  .footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .footer-brand p { max-width: 100%; }

  /* SOURCES */
  .rss-flow { flex-direction: column; }
}

/* ── Small Mobile (≤480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section-title { font-size: 24px; }
  .section-badge { font-size: 11px; padding: 5px 12px; }

  .hero { padding: 60px 0 28px; }
  .hero-title { font-size: 28px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-num { font-size: 22px; }

  .btn-lg { padding: 13px 22px; font-size: 14px; }

  /* pricing pack cards — 1 column on small mobile */
  .pack-grid-home { grid-template-columns: 1fr; }

  /* steps */
  .step { padding: 22px 16px; }

  /* features */
  .feature-card { padding: 22px 16px; }
  .feature-icon { width: 46px; height: 46px; font-size: 20px; }

  /* cta */
  .cta-box { padding: 36px 16px; }

  /* footer */
  .footer-grid { gap: 24px; }
  .social-links { gap: 8px; }

  /* support */
  .support-grid { grid-template-columns: 1fr; }

  /* comparison */
  .comparison-table th,
  .comparison-table td { padding: 10px 10px; font-size: 12px; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background: rgba(13,158,223,.2);
  color: var(--primary-dark);
}

/* ============================================================
   INNER PAGES (Privacy, Terms, Refund, About, Docs)
   ============================================================ */

/* Page Hero Banner */
.page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
  padding: 100px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(13,158,223,.25) 0%, transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,158,223,.15);
  border: 1px solid rgba(13,158,223,.3);
  color: #7ab8f5;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.page-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.6);
  max-width: 580px;
  margin: 0 auto 20px;
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-top: 24px;
}
.page-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
.page-breadcrumb a:hover { color: #7ab8f5; }
.page-breadcrumb i { font-size: 10px; }

/* Inner Content Area */
.inner-content {
  padding: 80px 0;
  background: #fff;
}
.inner-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  align-items: start;
}

/* Sticky Sidebar TOC */
.inner-sidebar {
  position: sticky;
  top: 90px;
}
.inner-toc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
}
.inner-toc h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.inner-toc ul { list-style: none; padding: 0; margin: 0; }
.inner-toc ul li { margin-bottom: 4px; }
.inner-toc ul li a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #475569;
  text-decoration: none;
  transition: all .2s;
  font-weight: 500;
}
.inner-toc ul li a:hover,
.inner-toc ul li a.active {
  background: rgba(13,158,223,.08);
  color: var(--primary);
}
.inner-toc ul li a i { margin-right: 8px; font-size: 12px; width: 14px; }

/* Prose Content */
.inner-prose { max-width: 760px; }
.inner-prose .last-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 36px;
}
.inner-prose section { margin-bottom: 48px; scroll-margin-top: 100px; }
.inner-prose h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inner-prose h2 i { color: var(--primary); font-size: 1.1rem; }
.inner-prose h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin: 24px 0 10px;
}
.inner-prose p {
  font-size: 15px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 14px;
}
.inner-prose ul, .inner-prose ol {
  padding-left: 20px;
  margin-bottom: 16px;
}
.inner-prose ul li, .inner-prose ol li {
  font-size: 15px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 6px;
}
.inner-prose a { color: var(--primary); font-weight: 500; }
.inner-prose a:hover { text-decoration: underline; }
.inner-prose a.btn { color: inherit; font-weight: 600; text-decoration: none !important; }
.inner-prose a.btn-primary { color: var(--white); }
.inner-prose a.btn-outline { color: var(--primary); }
.inner-prose a.btn-white { color: var(--primary); }
.inner-prose strong { color: #1e293b; font-weight: 700; }
.inner-prose .highlight-box {
  background: rgba(13,158,223,.05);
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.inner-prose .highlight-box p { margin: 0; color: #334155; }
.inner-prose .contact-box {
  background: linear-gradient(135deg, rgba(13,158,223,.07), rgba(22,163,74,.07));
  border: 1px solid rgba(13,158,223,.15);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  margin-top: 20px;
}
.inner-prose .contact-box p { margin-bottom: 14px; }
.inner-prose .contact-box a.btn { margin: 0 auto; display: inline-flex; }

/* About Page Specific */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.about-stat-card {
  background: linear-gradient(135deg, rgba(13,158,223,.07), rgba(22,163,74,.07));
  border: 1px solid rgba(13,158,223,.12);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
}
.about-stat-card .stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.about-stat-card .stat-label { font-size: 13px; color: #64748b; font-weight: 500; margin-top: 4px; }
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.about-value-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}
.about-value-card i { color: var(--primary); font-size: 1.3rem; margin-bottom: 10px; display: block; }
.about-value-card h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.about-value-card p { font-size: 13.5px; color: #64748b; margin: 0; line-height: 1.6; }

/* Docs Specific */
.doc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.doc-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition: all .2s;
  display: block;
}
.doc-card:hover {
  border-color: var(--primary);
  background: rgba(13,158,223,.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,158,223,.1);
}
.doc-card i { color: var(--primary); font-size: 1.4rem; margin-bottom: 10px; display: block; }
.doc-card h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.doc-card p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }
.doc-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 18px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.doc-step-num {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-step-body h4 { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.doc-step-body p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.6; }
.doc-code {
  background: #0f172a;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 14px 0;
  overflow-x: auto;
}
.doc-code code {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #7dd3fc;
  white-space: pre;
}

/* Responsive Inner Pages */
@media (max-width: 900px) {
  .inner-layout { grid-template-columns: 1fr; }
  .inner-sidebar { position: static; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .about-values { grid-template-columns: 1fr 1fr; }
  .doc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-hero { padding: 80px 0 40px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .doc-cards { grid-template-columns: 1fr; }
}


/* ===== PAGE: how-it-works.html ===== */
/* === HOW IT WORKS PAGE STYLES — DARK THEME === */
    .hiw-steps { padding: 80px 0; background: #080e1c; }
    .hiw-steps .section-title { color: white; }
    .hiw-steps .section-desc { color: rgba(255,255,255,.6); }
    .hiw-steps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 32px;
      margin-top: 60px;
      position: relative;
    }
    .hiw-steps-grid::before {
      content: '';
      position: absolute;
      top: 52px;
      left: 10%;
      right: 10%;
      height: 2px;
      background: linear-gradient(90deg, #0d9edf, #16a34a);
      opacity: 0.35;
      z-index: 0;
    }
    .hiw-step {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      text-align: center;
      position: relative;
      z-index: 1;
      transition: var(--transition);
    }
    .hiw-step:hover {
      transform: translateY(-6px);
      border-color: var(--primary);
      background: rgba(13,158,223,0.08);
    }
    .hiw-step-number {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--gradient);
      color: white;
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 4px 15px rgba(13,158,223,.35);
    }
    .hiw-step-icon {
      font-size: 36px;
      margin-bottom: 16px;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hiw-step h3 {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 700;
      color: rgba(255,255,255,0.92);
      margin-bottom: 12px;
    }
    .hiw-step p {
      color: rgba(255,255,255,0.55);
      font-size: 14px;
      line-height: 1.7;
    }
    .hiw-step-tag {
      display: inline-block;
      background: rgba(13,158,223,0.15);
      border: 1px solid rgba(13,158,223,0.35);
      color: #60a5fa;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      margin-top: 14px;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* === PROCESS DETAIL === */
    .hiw-detail { padding: 80px 0; background: #0d1527; }
    .hiw-detail-item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 80px;
    }
    .hiw-detail-item:last-child { margin-bottom: 0; }
    .hiw-detail-item.reverse .hiw-detail-visual { order: -1; }
    .hiw-detail-text .step-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(13,158,223,0.15);
      border: 1px solid rgba(13,158,223,0.3);
      color: #60a5fa;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 16px;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .hiw-detail-text h2 {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 800;
      color: rgba(255,255,255,0.95);
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .hiw-detail-text p {
      color: rgba(255,255,255,0.6);
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .hiw-checklist { list-style: none; padding: 0; margin: 0; }
    .hiw-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255,255,255,0.78);
      font-size: 15px;
      margin-bottom: 10px;
    }
    .hiw-checklist li i {
      color: var(--green);
      margin-top: 3px;
      flex-shrink: 0;
    }
    .hiw-detail-visual {
      background: rgba(255,255,255,0.03);
      border-radius: var(--radius-xl);
      padding: 32px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .mock-terminal {
      background: #0f172a;
      border-radius: 12px;
      padding: 20px;
      font-family: 'Courier New', monospace;
      font-size: 13px;
    }
    .mock-terminal .term-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
    }
    .mock-terminal .term-bar span {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .term-red { background: #ef4444; }
    .term-yellow { background: #f59e0b; }
    .term-green { background: #10b981; }
    .term-line { color: #94a3b8; margin-bottom: 6px; }
    .term-line.cmd { color: #16a34a; }
    .term-line.success { color: #10b981; }
    .term-line.info { color: #0d9edf; }

    .mock-dashboard {
      background: #0f172a;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .mock-dashboard-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .mock-dashboard-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      color: rgba(255,255,255,0.9);
    }
    .mock-badge {
      background: var(--green);
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 10px;
    }
    .mock-source-list { display: flex; flex-direction: column; gap: 10px; }
    .mock-source-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.06);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 13px;
    }
    .mock-source-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: white;
    }
    .ms-rss { background: #f59e0b; }
    .ms-yt { background: #ef4444; }
    .ms-reddit { background: #ff4500; }
    .ms-amazon { background: #f59e0b; color: #0f172a !important; }
    .mock-source-name { font-weight: 600; color: rgba(255,255,255,0.85); flex: 1; }
    .mock-source-status {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 10px;
    }
    .mss-active { background: rgba(16,185,129,0.2); color: #10b981; }
    .mss-paused { background: rgba(245,158,11,0.2); color: #f59e0b; }

    .mock-ai-panel {
      background: #0f172a;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .mock-ai-title {
      color: white;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 14px;
    }
    .mock-ai-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(255,255,255,.06);
      border-radius: 8px;
      margin-bottom: 8px;
    }
    .mock-ai-label { color: #94a3b8; font-size: 12px; }
    .mock-ai-value {
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-heading);
    }

    .mock-autopublish {
      background: #0f172a;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .map-stat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: rgba(255,255,255,0.06);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 10px;
    }
    .map-stat-label { font-size: 13px; color: rgba(255,255,255,0.5); }
    .map-stat-value {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .map-recent-posts { margin-top: 12px; }
    .map-post-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 12px;
    }
    .map-post-item:last-child { border-bottom: none; }
    .map-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: .7; }
    }
    .map-post-title { color: rgba(255,255,255,0.8); font-weight: 500; flex: 1; }
    .map-post-time { color: rgba(255,255,255,0.4); white-space: nowrap; }

    /* === STATS BANNER === */
    .hiw-stats { padding: 60px 0; background: var(--gradient); }
    .hiw-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      text-align: center;
    }
    .hiw-stat-item h3 {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 800;
      color: white;
      margin-bottom: 6px;
    }
    .hiw-stat-item p {
      color: rgba(255,255,255,.8);
      font-size: 14px;
      font-weight: 500;
    }

    /* === VIDEO PREVIEW === */
    .hiw-video { padding: 80px 0; background: #080e1c; }
    .hiw-video .section-title { color: white; }
    .hiw-video .section-desc { color: rgba(255,255,255,.6); }
    .video-wrapper {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      background: var(--dark);
      aspect-ratio: 16/9;
      max-width: 860px;
      margin: 40px auto 0;
    }
    .video-thumb {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
    }
    .video-play-btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: white;
      box-shadow: 0 0 40px rgba(13,158,223,.5);
      cursor: pointer;
      transition: var(--transition);
      animation: pulse-btn 2.5s infinite;
    }
    @keyframes pulse-btn {
      0%, 100% { box-shadow: 0 0 40px rgba(13,158,223,.5); transform: scale(1); }
      50% { box-shadow: 0 0 60px rgba(13,158,223,.7); transform: scale(1.05); }
    }
    .video-play-btn:hover { transform: scale(1.1) !important; }
    .video-label {
      color: rgba(255,255,255,.7);
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 600;
    }

    /* === FAQ MINI === */
    .hiw-faq { padding: 80px 0; background: #ffffff; }

    /* === RESPONSIVE === */
    @media (max-width: 900px) {
      .hiw-detail-item, .hiw-detail-item.reverse .hiw-detail-visual { grid-template-columns: 1fr; }
      .hiw-detail-item.reverse .hiw-detail-visual { order: 0; }
      .hiw-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .hiw-detail-text h2 { font-size: 24px; }
    }
    @media (max-width: 480px) {
      .hiw-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .hiw-stat-item h3 { font-size: 28px; }
      .hiw-steps-grid::before { display: none; }
    }

/* ===== PAGE: pricing.html ===== */
/* === PRICING PAGE === */

    /* Stats Row */
    .price-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin: 0 0 60px;
    }
    .price-stat-item {
      background: rgba(255,255,255,.03);
      padding: 28px 20px;
      text-align: center;
    }
    .price-stat-num {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 800;
      color: #f8fafc;
      line-height: 1;
      margin-bottom: 6px;
    }
    .price-stat-num span { font-size: 18px; }
    .price-stat-label { font-size: 13px; color: #64748b; font-weight: 500; }

    /* Main Packs Section */
    .packs-main {
      padding: 80px 0 72px;
      background: linear-gradient(180deg, #080e1c 0%, #0c1526 60%, #080e1c 100%);
      position: relative;
      overflow: hidden;
    }
    .packs-main-glow {
      position: absolute;
      top: 40%; left: 50%;
      transform: translate(-50%, -50%);
      width: 900px; height: 500px;
      background: radial-gradient(ellipse, rgba(13,158,223,.1) 0%, rgba(22,163,74,.07) 50%, transparent 72%);
      pointer-events: none;
    }

    /* 6-pack grid — 3x2 */
    .pack-grid-pricing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Reuse home card styles, add popular variant */
    .pack-home-card.pack-popular {
      border-color: rgba(13,158,223,.55) !important;
      box-shadow: 0 0 0 1px rgba(13,158,223,.3), 0 20px 50px rgba(0,0,0,.4);
      background: rgba(13,158,223,.08) !important;
    }
    .pack-popular-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #0d9edf, #16a34a);
      color: white;
      font-family: var(--font-heading);
      font-size: 10px;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: 20px;
      white-space: nowrap;
      letter-spacing: .5px;
    }

    /* Per-post rate highlight */
    .pkh-rate-highlight {
      font-size: 12px;
      font-weight: 700;
      color: #22c55e;
      margin: 0 0 20px;
    }

    /* Features Included Section */
    .included-section {
      padding: 80px 0;
      background: var(--white);
    }
    .included-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 48px;
    }
    .included-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      transition: var(--transition);
    }
    .included-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--primary);
    }
    .included-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--gradient-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--primary);
      margin-bottom: 16px;
    }
    .included-card h3 {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }
    .included-card p {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* Cost Calculator */
    .calc-section {
      padding: 80px 0;
      background: var(--bg);
    }
    .calc-box {
      max-width: 760px;
      margin: 48px auto 0;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 48px;
      box-shadow: var(--shadow-md);
    }
    .calc-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .calc-label {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 600;
      color: var(--dark);
      min-width: 200px;
    }
    .calc-input {
      flex: 1;
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--dark);
      background: var(--bg);
      transition: var(--transition);
    }
    .calc-input:focus { outline: none; border-color: var(--primary); background: var(--white); }
    .calc-result {
      background: var(--gradient-soft);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-top: 8px;
    }
    .calc-result-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      color: var(--text-muted);
    }
    .calc-result-row:last-child { border-bottom: none; }
    .calc-result-row strong { color: var(--dark); font-weight: 700; }
    .calc-result-row .highlight {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Comparison vs Manual Writing */
    .compare-section {
      padding: 80px 0;
      background: var(--white);
    }
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24px;
      margin-top: 48px;
    }
    .compare-col {
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 2px solid var(--border);
    }
    .compare-col.highlight { border-color: var(--primary); box-shadow: var(--shadow-lg); }
    .compare-col-head {
      padding: 24px;
      text-align: center;
      background: var(--bg);
    }
    .compare-col.highlight .compare-col-head {
      background: var(--gradient);
      color: white;
    }
    .compare-col-head h3 {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 4px;
    }
    .compare-col.highlight .compare-col-head h3 { color: white; }
    .compare-col-head p { font-size: 13px; color: var(--text-muted); }
    .compare-col.highlight .compare-col-head p { color: rgba(255,255,255,.8); }
    .compare-col-body { padding: 24px; }
    .compare-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      color: var(--text-muted);
    }
    .compare-item:last-child { border-bottom: none; }
    .compare-item i.yes { color: var(--green); flex-shrink: 0; margin-top: 2px; }
    .compare-item i.no { color: var(--red); flex-shrink: 0; margin-top: 2px; }

    /* FAQ */
    .pricing-faq {
      padding: 80px 0;
      background: var(--bg);
    }

    /* Guarantee strip */
    .guarantee-strip {
      padding: 40px 0;
      background: linear-gradient(135deg, #f0fdf4, #dcfce7);
      border-top: 1px solid #bbf7d0;
    }
    .guarantee-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .guarantee-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .guarantee-item-icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #16a34a;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
      flex-shrink: 0;
    }
    .guarantee-item strong {
      display: block;
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 700;
      color: #14532d;
    }
    .guarantee-item span { font-size: 13px; color: #15803d; }

    /* Comparison Table */
    .compare-table-wrap {
      overflow-x: auto;
      margin-top: 48px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .compare-table th {
      padding: 18px 20px;
      text-align: center;
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 700;
      border-bottom: 2px solid var(--border);
      background: var(--bg);
    }
    .compare-table th:first-child { text-align: left; min-width: 210px; }
    .compare-table th.col-us {
      background: var(--gradient);
      color: white;
    }
    .compare-table th.col-us .th-sub { font-size: 12px; font-weight: 500; opacity: .85; display: block; margin-top: 3px; }
    .compare-table th .th-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); display: block; margin-top: 3px; }
    .compare-table td {
      padding: 14px 20px;
      text-align: center;
      border-bottom: 1px solid var(--border);
      color: var(--text-muted);
      background: var(--white);
    }
    .compare-table td:first-child {
      text-align: left;
      font-weight: 600;
      color: var(--dark);
      background: var(--bg);
    }
    .compare-table td.col-us { background: rgba(13,158,223,.04); }
    .compare-table tr:last-child td { border-bottom: none; }
    .compare-table tr:hover td { background: var(--bg); }
    .compare-table tr:hover td.col-us { background: rgba(13,158,223,.07); }
    .ct-yes { color: #16a34a; font-size: 16px; }
    .ct-no  { color: #dc2626; font-size: 16px; }
    .ct-partial {
      display: inline-block;
      background: #fef3c7;
      color: #92400e;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .ct-limited {
      display: inline-block;
      background: #fee2e2;
      color: #991b1b;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .ct-cost { font-family: var(--font-heading); font-weight: 700; }
    .ct-cost.us { color: #16a34a; font-size: 15px; }
    .ct-cost.them { color: #dc2626; font-size: 13px; }

    @media (max-width: 900px) {
      .pack-grid-pricing { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
      .price-stats { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .pack-grid-pricing { grid-template-columns: repeat(2, 1fr); }
      .calc-row { flex-direction: column; align-items: flex-start; }
      .calc-label { min-width: unset; }
      .price-stats { grid-template-columns: repeat(2, 1fr); }
      .calc-box { padding: 28px 20px; }
    }

/* ===== PAGE: blog.html ===== */
/* === BLOG PAGE === */
    .blog-layout { padding: 80px 0; background: var(--white); }
    .blog-grid-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 48px;
      align-items: start;
    }

    /* === FILTER BAR === */
    .blog-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .blog-filter-label { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--text-muted); margin-right: 4px; }
    .blog-filter-btn {
      padding: 8px 16px;
      border-radius: 20px;
      font-family: var(--font-heading);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      transition: var(--transition);
    }
    .blog-filter-btn:hover { color: var(--primary); border-color: var(--primary); }
    .blog-filter-btn.active { background: var(--gradient); color: white; border-color: transparent; }

    /* === FEATURED POST === */
    .blog-featured {
      background: var(--gradient);
      border-radius: var(--radius-xl);
      overflow: hidden;
      margin-bottom: 40px;
      position: relative;
      padding: 48px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .blog-featured::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(13,158,223,.9) 0%, rgba(22,163,74,.85) 100%);
    }
    .blog-featured > * { position: relative; z-index: 1; }
    .bf-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.2);
      color: white;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 14px;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: .5px;
      width: fit-content;
    }
    .bf-title {
      font-family: var(--font-heading);
      font-size: 26px;
      font-weight: 800;
      color: white;
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .bf-excerpt { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
    .bf-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .bf-meta span {
      color: rgba(255,255,255,.7);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bf-read-btn {
      background: white;
      color: var(--primary);
      padding: 10px 22px;
      border-radius: 8px;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: var(--transition);
    }
    .bf-read-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,.2); }

    /* === BLOG POSTS GRID === */
    .blog-posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
    }
    .blog-post-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: var(--transition);
    }
    .blog-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
    .bpc-thumb {
      height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
      color: white;
      position: relative;
      overflow: hidden;
    }
    .bpc-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.1);
    }
    .bpc-category {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(255,255,255,.9);
      color: var(--primary);
      font-size: 10px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      font-family: var(--font-heading);
      text-transform: uppercase;
      z-index: 1;
    }
    .bpc-body { padding: 20px; }
    .bpc-title {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.4;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .bpc-title:hover { color: var(--primary); }
    .bpc-excerpt {
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.7;
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .bpc-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-muted);
    }
    .bpc-author {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .bpc-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: white;
      font-family: var(--font-heading);
      font-weight: 700;
    }
    .bpc-read-time { display: flex; align-items: center; gap: 4px; }

    /* === PAGINATION === */
    .blog-pagination {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 40px;
      justify-content: center;
    }
    .page-btn {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      transition: var(--transition);
    }
    .page-btn:hover { color: var(--primary); border-color: var(--primary); }
    .page-btn.active { background: var(--gradient); color: white; border-color: transparent; }
    .page-btn.arrow { color: var(--primary); }

    /* === SIDEBAR === */
    .blog-sidebar { position: sticky; top: 100px; }
    .sidebar-widget {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 24px;
    }
    .sw-title {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sw-title i { color: var(--primary); }
    .sw-category-list { display: flex; flex-direction: column; gap: 8px; }
    .sw-cat-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      transition: var(--transition);
      cursor: pointer;
      border: 1px solid transparent;
    }
    .sw-cat-item:hover { background: var(--gradient-soft); color: var(--primary); border-color: var(--border); }
    .sw-cat-count {
      background: var(--bg);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .sw-popular-post {
      display: flex;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .sw-popular-post:last-child { border-bottom: none; padding-bottom: 0; }
    .sw-pp-num {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--gradient-soft);
      color: var(--primary);
      font-family: var(--font-heading);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sw-pp-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--dark);
      line-height: 1.4;
      cursor: pointer;
    }
    .sw-pp-title:hover { color: var(--primary); }
    .sw-pp-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
    .sw-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
    .sw-tag {
      padding: 6px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: var(--transition);
    }
    .sw-tag:hover { background: var(--gradient-soft); color: var(--primary); border-color: var(--primary); }
    .sw-newsletter { text-align: center; }
    .sw-newsletter p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
    .sw-email-input {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
      margin-bottom: 10px;
      transition: var(--transition);
    }
    .sw-email-input:focus { border-color: var(--primary); }
    .sw-sub-btn {
      width: 100%;
      background: var(--gradient);
      color: white;
      border: none;
      border-radius: var(--radius);
      padding: 12px;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
    }
    .sw-sub-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

    @media (max-width: 1024px) {
      .blog-grid-layout { grid-template-columns: 1fr; }
      .blog-sidebar { position: static; }
    }
    @media (max-width: 600px) {
      .bf-title { font-size: 20px; }
      .blog-featured { padding: 28px; }
    }

/* ===== PAGE: reviews.html ===== */
/* === REVIEWS PAGE === */

    /* === RATING SUMMARY === */
    .reviews-summary { padding: 80px 0; background: var(--white); }
    .rating-overview {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 60px;
    }
    .rating-big-score {
      text-align: center;
      background: var(--gradient);
      border-radius: var(--radius-xl);
      padding: 40px 32px;
      color: white;
    }
    .rbs-num {
      font-family: var(--font-heading);
      font-size: 72px;
      font-weight: 800;
      line-height: 1;
      display: block;
    }
    .rbs-stars {
      font-size: 24px;
      letter-spacing: 4px;
      margin: 10px 0;
      color: #fbbf24;
    }
    .rbs-total {
      font-size: 14px;
      color: rgba(255,255,255,.8);
      margin-top: 4px;
    }
    .rbs-verified {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.2);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 14px;
    }
    .rating-breakdown { display: flex; flex-direction: column; gap: 12px; }
    .rb-row { display: flex; align-items: center; gap: 14px; }
    .rb-stars-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      min-width: 70px;
    }
    .rb-stars-label i { color: #f59e0b; font-size: 12px; }
    .rb-bar-wrap {
      flex: 1;
      height: 10px;
      background: var(--bg);
      border-radius: 10px;
      overflow: hidden;
    }
    .rb-bar {
      height: 100%;
      border-radius: 10px;
      background: var(--gradient);
    }
    .rb-count { font-size: 13px; color: var(--text-muted); min-width: 40px; text-align: right; }

    /* === TRUST BADGES === */
    .trust-badges {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 24px;
    }
    .tb-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: white;
      flex-shrink: 0;
    }
    .tb-info { }
    .tb-num {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .tb-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

    /* === FILTER BAR === */
    .reviews-filter { padding: 0 0 20px; }
    .rev-filter-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .rev-filter-btn {
      padding: 9px 18px;
      border-radius: 30px;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      transition: var(--transition);
    }
    .rev-filter-btn:hover { color: var(--primary); border-color: var(--primary); }
    .rev-filter-btn.active { background: var(--gradient); color: white; border-color: transparent; }
    .rev-sort {
      margin-left: auto;
      padding: 9px 18px;
      border-radius: 30px;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1.5px solid var(--border);
      background: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* === FEATURED REVIEWS === */
    .reviews-featured { padding: 80px 0; background: var(--bg); }
    .featured-review-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .featured-review-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 28px;
      transition: var(--transition);
      position: relative;
    }
    .featured-review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
    .frc-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .frc-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
    .frc-verified {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--green);
    }
    .frc-quote-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 40px;
      color: var(--primary);
      opacity: .06;
    }
    .frc-text {
      color: var(--text);
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 20px;
      font-style: italic;
    }
    .frc-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .frc-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .frc-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--dark); }
    .frc-role { font-size: 13px; color: var(--text-muted); }
    .frc-result {
      margin-top: 16px;
      background: var(--gradient-soft);
      border-radius: var(--radius);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .frc-result i { color: var(--primary); }
    .frc-result span { font-size: 13px; font-weight: 600; color: var(--text); }

    /* === ALL REVIEWS GRID === */
    .reviews-all { padding: 80px 0; background: var(--white); }
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 32px;
    }
    .review-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 22px;
      transition: var(--transition);
    }
    .review-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary); }
    .rc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .rc-stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
    .rc-date { font-size: 12px; color: var(--text-muted); }
    .rc-text {
      color: var(--text);
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 14px;
    }
    .rc-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rc-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .rc-name { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--dark); }
    .rc-type { font-size: 11px; color: var(--text-muted); }

    /* === CASE STUDIES BANNER === */
    .reviews-cases { padding: 80px 0; background: var(--dark); }
    .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .case-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-xl);
      padding: 28px;
      transition: var(--transition);
    }
    .case-card:hover { background: rgba(255,255,255,.1); }
    .case-card-num {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
      margin-bottom: 8px;
    }
    .case-card-label { color: rgba(255,255,255,.6); font-size: 13px; margin-bottom: 16px; }
    .case-card-name { color: white; font-family: var(--font-heading); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .case-card-type { color: rgba(255,255,255,.5); font-size: 13px; }

    @media (max-width: 900px) {
      .rating-overview { grid-template-columns: 1fr; }
    }

/* ===== PAGE: download.html ===== */
/* === DOWNLOAD PAGE === */
    .dl-hero-card { padding: 80px 0; background: var(--white); }
    .dl-main-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      display: grid;
      grid-template-columns: 1fr 380px;
      margin-bottom: 60px;
    }
    .dl-card-info { padding: 48px; }
    .dl-version-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--gradient-soft);
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      margin-bottom: 20px;
      font-family: var(--font-heading);
    }
    .dl-card-title {
      font-family: var(--font-heading);
      font-size: 36px;
      font-weight: 800;
      color: var(--dark);
      line-height: 1.2;
      margin-bottom: 14px;
    }
    .dl-card-desc { color: var(--text-muted); font-size: 16px; line-height: 1.8; margin-bottom: 28px; }
    .dl-stats-row {
      display: flex;
      gap: 24px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
    .dl-stat { text-align: center; }
    .dl-stat-num {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
    }
    .dl-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
    .dl-quick-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dl-quick-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text);
    }
    .dl-quick-item i { color: var(--green); font-size: 13px; }

    .dl-card-sidebar {
      background: var(--gradient);
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 20px;
    }
    .dl-plugin-icon {
      width: 90px;
      height: 90px;
      background: rgba(255,255,255,.2);
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      color: white;
      box-shadow: 0 8px 30px rgba(0,0,0,.2);
    }
    .dl-plugin-name { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: white; }
    .dl-plugin-version { color: rgba(255,255,255,.7); font-size: 13px; }
    .dl-file-info { background: rgba(255,255,255,.15); border-radius: 12px; padding: 16px 20px; width: 100%; }
    .dl-file-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 6px;
    }
    .dl-file-row:last-child { margin-bottom: 0; }
    .dl-file-key { color: rgba(255,255,255,.65); }
    .dl-file-val { color: white; font-weight: 600; }
    .dl-btn-wrap { width: 100%; }
    .dl-main-btn {
      width: 100%;
      background: white;
      color: var(--primary);
      border: none;
      border-radius: var(--radius);
      padding: 16px;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: var(--transition);
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(0,0,0,.2);
    }
    .dl-main-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.25); }
    .dl-login-note { color: rgba(255,255,255,.6); font-size: 12px; }

    /* === REQUIREMENTS === */
    .dl-requirements { padding: 80px 0; background: var(--bg); }
    .dl-req-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
    .dl-req-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      text-align: center;
      transition: var(--transition);
    }
    .dl-req-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
    .dl-req-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--gradient-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--primary);
      margin: 0 auto 14px;
    }
    .dl-req-label {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 6px;
    }
    .dl-req-value {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 800;
      color: var(--dark);
    }
    .dl-req-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

    /* === INSTALL STEPS === */
    .dl-install { padding: 80px 0; background: var(--white); }
    .dl-install-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
    .dl-install-step {
      position: relative;
      background: var(--bg);
      border-radius: var(--radius-lg);
      padding: 28px 20px;
      text-align: center;
      border: 1px solid var(--border);
    }
    .dl-step-num {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient);
      color: white;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
    }
    .dl-install-step h4 {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }
    .dl-install-step p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

    /* === CHANGELOG === */
    .dl-changelog { padding: 80px 0; background: var(--bg); }
    .dl-changelog-list {
      max-width: 760px;
      margin: 40px auto 0;
    }
    .dl-version-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 16px;
      overflow: hidden;
    }
    .dl-version-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 24px;
      cursor: pointer;
    }
    .dl-version-tag {
      background: var(--gradient);
      color: white;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 20px;
    }
    .dl-version-tag.latest { animation: pulse-tag 2s infinite; }
    @keyframes pulse-tag {
      0%, 100% { box-shadow: 0 0 0 0 rgba(13,158,223,.4); }
      50% { box-shadow: 0 0 0 6px rgba(13,158,223,0); }
    }
    .dl-version-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--dark); flex: 1; }
    .dl-version-date { font-size: 13px; color: var(--text-muted); }
    .dl-version-body { padding: 0 24px 20px; }
    .dl-change-list { list-style: none; padding: 0; margin: 0; }
    .dl-change-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 8px;
      padding-left: 4px;
    }
    .dl-change-type {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      text-transform: uppercase;
      font-family: var(--font-heading);
      flex-shrink: 0;
    }
    .ct-new { background: #d1fae5; color: #065f46; }
    .ct-fix { background: #fee2e2; color: #991b1b; }
    .ct-improve { background: #dbeafe; color: #1e40af; }

    @media (max-width: 900px) {
      .dl-main-card { grid-template-columns: 1fr; }
      .dl-card-sidebar { padding: 32px; }
    }
    @media (max-width: 480px) {
      .dl-card-info { padding: 28px; }
      .dl-card-title { font-size: 24px; }
      .dl-stats-row { gap: 16px; }
    }

/* ===== PAGE: demo.html ===== */
/* === DEMO PAGE === */
    .demo-main { padding: 80px 0; background: var(--white); }

    /* === VIDEO PLAYER === */
    .demo-video-container {
      max-width: 900px;
      margin: 0 auto 60px;
    }
    .demo-video-wrapper {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(13,158,223,.25);
      border: 1px solid var(--border);
      background: var(--dark);
      aspect-ratio: 16/9;
    }
    .demo-video-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .demo-video-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(13,158,223,.15) 0%, transparent 70%);
    }
    .demo-play-ring {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 3px solid rgba(13,158,223,.4);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      animation: ring-pulse 2.5s infinite;
    }
    @keyframes ring-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(13,158,223,.4); }
      50% { box-shadow: 0 0 0 20px rgba(13,158,223,0); }
    }
    .demo-play-btn {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: white;
      box-shadow: 0 0 40px rgba(13,158,223,.5);
      transition: var(--transition);
    }
    .demo-play-btn:hover { transform: scale(1.08); }
    .demo-play-btn i { margin-left: 4px; }
    .demo-video-meta {
      display: flex;
      align-items: center;
      gap: 20px;
      z-index: 1;
    }
    .demo-video-meta span {
      color: rgba(255,255,255,.6);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .demo-video-title {
      color: white;
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      z-index: 1;
    }
    .demo-chapters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }
    .demo-chapter {
      padding: 7px 16px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font-heading);
    }
    .demo-chapter:hover { background: var(--gradient-soft); color: var(--primary); border-color: var(--primary); }
    .demo-chapter i { font-size: 10px; color: var(--primary); }
    .demo-chapter .chapter-time { color: var(--text-muted); font-weight: 400; font-size: 12px; }

    /* === FEATURE HIGHLIGHTS === */
    .demo-highlights { padding: 80px 0; background: var(--bg); }
    .demo-highlight-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .demo-highlight-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      transition: var(--transition);
    }
    .demo-highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
    .dhc-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: white;
      margin-bottom: 16px;
    }
    .dhc-title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
    .dhc-desc { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
    .dhc-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      font-family: var(--font-heading);
      background: var(--gradient-soft);
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* === SCREENSHOTS === */
    .demo-screenshots { padding: 80px 0; background: var(--white); }
    .screenshots-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .screenshot-item {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      cursor: pointer;
    }
    .screenshot-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .screenshot-thumb {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      color: white;
      position: relative;
    }
    .screenshot-thumb::after {
      content: '\f065';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,.2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    .screenshot-info { padding: 16px; background: white; }
    .screenshot-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
    .screenshot-desc { font-size: 13px; color: var(--text-muted); }

    /* === LIVE STATS === */
    .demo-live { padding: 80px 0; background: var(--dark); }
    .demo-live .section-title, .demo-live .section-desc { color: white; }
    .demo-live .section-badge { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
    .live-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-top: 40px;
    }
    .live-stat-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      text-align: center;
      transition: var(--transition);
    }
    .live-stat-card:hover { background: rgba(255,255,255,.1); }
    .live-stat-num {
      font-family: var(--font-heading);
      font-size: 38px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
      margin-bottom: 6px;
    }
    .live-stat-label { color: rgba(255,255,255,.6); font-size: 14px; font-weight: 500; }

    /* === MINI TESTIMONIALS === */
    .demo-social { padding: 80px 0; background: var(--bg); }
    .demo-quote-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
    .demo-quote {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
    }
    .dq-stars { color: #f59e0b; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
    .dq-text { color: var(--text); font-size: 14px; line-height: 1.7; margin-bottom: 16px; font-style: italic; }
    .dq-author { display: flex; align-items: center; gap: 10px; }
    .dq-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: white;
      font-family: var(--font-heading);
      font-weight: 700;
      flex-shrink: 0;
    }
    .dq-name { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--dark); }
    .dq-role { font-size: 12px; color: var(--text-muted); }

    @media (max-width: 768px) {
      .demo-chapters { gap: 6px; }
    }

/* ===== PAGE: content-sources.html ===== */
/* === SOURCES PAGE === */
    .sources-overview { padding: 80px 0; background: var(--white); }
    .sources-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }
    .src-stat {
      background: var(--gradient-soft);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      text-align: center;
      border: 1px solid var(--border);
    }
    .src-stat-num {
      font-family: var(--font-heading);
      font-size: 36px;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
      margin-bottom: 6px;
    }
    .src-stat-label { color: var(--text-muted); font-size: 14px; font-weight: 500; }

    /* === CATEGORY TABS === */
    .src-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 36px;
      padding: 6px;
      background: var(--bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
    }
    .src-tab {
      padding: 10px 20px;
      border-radius: 10px;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: none;
    }
    .src-tab:hover { color: var(--primary); background: var(--white); }
    .src-tab.active {
      background: var(--gradient);
      color: white;
      box-shadow: var(--shadow-sm);
    }

    /* === SOURCE CARDS === */
    .sources-section { padding: 70px 0; }
    .sources-section:nth-child(even) { background: var(--bg); }
    .sources-section:nth-child(odd) { background: var(--white); }

    .source-category-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 36px;
    }
    .source-category-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: white;
      flex-shrink: 0;
    }
    .source-category-info h2 {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 4px;
    }
    .source-category-info p { color: var(--text-muted); font-size: 14px; }

    .sources-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }
    .source-card-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .source-card-item:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--primary);
    }
    .source-card-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient);
      opacity: 0;
      transition: var(--transition);
    }
    .source-card-item:hover::before { opacity: 1; }
    .sci-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .sci-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      flex-shrink: 0;
    }
    .sci-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--dark); }
    .sci-type { font-size: 11px; color: var(--text-muted); font-weight: 500; }
    .sci-desc { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
    .sci-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .sci-tag {
      background: var(--gradient-soft);
      color: var(--primary);
      font-size: 10px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 12px;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: .3px;
    }
    .sci-popular {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--gradient);
      color: white;
      font-size: 9px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 10px;
      font-family: var(--font-heading);
      text-transform: uppercase;
    }

    /* === HOW SOURCES WORK === */
    .sources-how { padding: 80px 0; background: var(--dark); }
    .sources-how .section-title,
    .sources-how .section-desc { color: white; }
    .sources-how .section-badge { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
    .flow-diagram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-top: 50px;
      flex-wrap: wrap;
    }
    .flow-node {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      text-align: center;
      min-width: 130px;
    }
    .flow-node-icon {
      font-size: 28px;
      margin-bottom: 10px;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .flow-node-title {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      color: white;
      margin-bottom: 4px;
    }
    .flow-node-sub { font-size: 11px; color: rgba(255,255,255,.5); }
    .flow-arrow {
      font-size: 22px;
      color: rgba(255,255,255,.3);
      padding: 0 12px;
    }

    /* === RESPONSIVE === */
    @media (max-width: 900px) {
      .sources-stats-row { grid-template-columns: repeat(2, 1fr); }
      .flow-diagram { gap: 8px; }
      .flow-arrow { display: none; }
    }
    @media (max-width: 480px) {
      .sources-stats-row { grid-template-columns: 1fr 1fr; gap: 12px; }
      .src-tabs { gap: 6px; }
    }

/* ===== PAGE: faq.html ===== */
/* === FAQ PAGE === */
    .faq-page { padding: 80px 0; background: var(--white); }
    .faq-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 40px;
      align-items: start;
    }

    /* === SIDEBAR === */
    .faq-sidebar {
      position: sticky;
      top: 100px;
    }
    .faq-sidebar-title {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 14px;
    }
    .faq-cat-list { list-style: none; padding: 0; margin: 0 0 32px; }
    .faq-cat-list li { margin-bottom: 4px; }
    .faq-cat-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
    }
    .faq-cat-link i { width: 16px; text-align: center; }
    .faq-cat-link:hover { background: var(--bg); color: var(--primary); }
    .faq-cat-link.active { background: var(--gradient-soft); color: var(--primary); font-weight: 600; }
    .faq-contact-box {
      background: var(--gradient);
      border-radius: var(--radius-lg);
      padding: 24px;
      text-align: center;
    }
    .faq-contact-box h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; }
    .faq-contact-box p { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 16px; line-height: 1.6; }
    .faq-contact-box .btn { background: white; color: var(--primary); width: 100%; justify-content: center; font-size: 14px; }

    /* === FAQ CONTENT === */
    .faq-content-area {}
    .faq-section { margin-bottom: 60px; }
    .faq-section:last-child { margin-bottom: 0; }
    .faq-section-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-bottom: 20px;
      border-bottom: 2px solid var(--border);
      margin-bottom: 24px;
    }
    .faq-section-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      flex-shrink: 0;
    }
    .faq-section-title {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 700;
      color: var(--dark);
    }
    .faq-section-count {
      margin-left: auto;
      background: var(--gradient-soft);
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      font-family: var(--font-heading);
    }

    /* === FAQ ITEMS === */
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 10px;
      overflow: hidden;
      transition: var(--transition);
    }
    .faq-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
    .faq-item.open { border-color: var(--primary); box-shadow: 0 4px 20px rgba(13,158,223,.1); }
    .faq-question {
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 600;
      color: var(--dark);
    }
    .faq-question i {
      color: var(--primary);
      transition: transform .3s ease;
      flex-shrink: 0;
      font-size: 14px;
    }
    .faq-item.open .faq-question i { transform: rotate(45deg); }
    .faq-item.open .faq-question { color: var(--primary); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease;
    }
    .faq-answer.open { max-height: 500px; }
    .faq-answer p, .faq-answer ul {
      padding: 0 24px 20px;
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.8;
    }
    .faq-answer ul { list-style: none; }
    .faq-answer ul li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 6px;
    }
    .faq-answer ul li::before {
      content: '—';
      color: var(--primary);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .faq-answer a { color: var(--primary); text-decoration: underline; }

    /* === SEARCH BAR === */
    .faq-search-wrap {
      max-width: 560px;
      margin: 0 auto 50px;
      position: relative;
    }
    .faq-search-wrap input {
      width: 100%;
      padding: 16px 20px 16px 52px;
      border-radius: var(--radius-lg);
      border: 2px solid var(--border);
      font-family: var(--font-body);
      font-size: 15px;
      outline: none;
      transition: var(--transition);
      background: var(--white);
    }
    .faq-search-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(13,158,223,.1); }
    .faq-search-wrap i {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 16px;
    }

    @media (max-width: 900px) {
      .faq-layout { grid-template-columns: 1fr; }
      .faq-sidebar { position: static; }
      .faq-cat-list { display: flex; flex-wrap: wrap; gap: 6px; }
      .faq-cat-list li { margin: 0; }
    }
    @media (max-width: 480px) {
      .faq-question { font-size: 14px; padding: 14px 16px; }
      .faq-answer p { padding: 0 16px 16px; font-size: 14px; }
    }


/* ============================================================
   DARK / LIGHT MODE TOGGLE
   ============================================================ */

/* Toggle Button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: 15px;
  transition: all .3s cubic-bezier(.4,0,.2,1), width .3s ease, height .3s ease, font-size .3s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  color: #fff;
  transform: translateY(-1px);
}
.header.scrolled .theme-toggle { width: 28px; height: 28px; font-size: 12px; }

/* Body */

/* ============================================================
   LIGHT MODE — [data-theme="light"]
   ============================================================ */

/* Body */
[data-theme="light"] body { background: #ffffff; color: #1e293b; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* Toggle button */
[data-theme="light"] .theme-toggle { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: #334155; }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,.10); color: #0d9edf; }

/* Header */
[data-theme="light"] .header { background: rgba(255,255,255,.97); box-shadow: 0 2px 24px rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.06); }
[data-theme="light"] .header.scrolled { background: rgba(255,255,255,.99); }
[data-theme="light"] .nav-link { color: #334155; }
[data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: #0d9edf; background: rgba(13,158,223,.08); }
[data-theme="light"] .logo { color: #0c1a2e; }
[data-theme="light"] .btn-support { background: rgba(13,158,223,.1); border-color: rgba(13,158,223,.25); color: #0d9edf; }
[data-theme="light"] .btn-login { background: transparent; border-color: rgba(0,0,0,.15); color: #334155; }
/* Hamburger bars — dark on light header */
[data-theme="light"] .hamburger span { background: #334155; }
/* Mobile quick buttons — light mode */
[data-theme="light"] .hmb-btn.btn-download { background: #f97316; color: #ffffff; border-color: #f97316; }
[data-theme="light"] .hmb-btn.btn-primary { background: var(--primary); color: #ffffff; }
/* Mobile open nav panel */
[data-theme="light"] .nav.open {
  background: #ffffff;
  border-top: 2px solid rgba(13,158,223,.3);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .nav.open .nav-link { color: #334155; border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .nav.open .nav-link:hover,
[data-theme="light"] .nav.open .nav-link.active { color: #0d9edf; background: rgba(13,158,223,.08); }
[data-theme="light"] .nav.open .header-cta { border-top-color: rgba(0,0,0,.08); }
/* Download Plugin button color inside light mode nav */
[data-theme="light"] .nav.open .nav-mobile-only { color: #ffffff; }

/* Hero */
[data-theme="light"] .hero { background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 50%, #dbeafe 100%); }
[data-theme="light"] .hero-bg-anim { opacity: 0.12; }
[data-theme="light"] .hero-inner { color: #0c1a2e; }
[data-theme="light"] .hero-title { color: #0c1a2e; }
[data-theme="light"] .hero-title-small { color: #0c1a2e; }
[data-theme="light"] .hero-desc { color: #475569; }
[data-theme="light"] .hero-badge { background: rgba(13,158,223,.1); border-color: rgba(13,158,223,.25); color: #0369a1; }
[data-theme="light"] .hero-badge i { color: #0d9edf; }
[data-theme="light"] .hero-stat-value { color: #0c1a2e; }
[data-theme="light"] .hero-stat-label { color: #64748b; }
[data-theme="light"] .hero-stat-divider { background: rgba(0,0,0,.12); }
[data-theme="light"] .hero-visual { background: rgba(255,255,255,.8); border-color: rgba(13,158,223,.2); box-shadow: 0 20px 60px rgba(13,158,223,.12); }
[data-theme="light"] .dash-header { background: rgba(13,158,223,.06); border-bottom-color: rgba(0,0,0,.06); }

/* Features */
[data-theme="light"] .features { background: #f8fafc; }
[data-theme="light"] .features-bg-grid { opacity: 0; }
[data-theme="light"] .features .section-badge { color: #16a34a; border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.08); }
[data-theme="light"] .features .section-title { color: #0c1a2e; }
[data-theme="light"] .features .section-desc { color: #475569; }
[data-theme="light"] .feature-card { background: #ffffff; border-color: rgba(0,0,0,.09); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
[data-theme="light"] .feature-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.12); }
[data-theme="light"] .feature-card h3 { color: #0c1a2e; }
[data-theme="light"] .feature-card p { color: #475569; }
[data-theme="light"] .feature-list li { color: #475569; }

/* How It Works */
[data-theme="light"] .how-it-works { background: #ffffff; }
[data-theme="light"] .step { background: #f8fafc; border-color: rgba(0,0,0,.08); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
[data-theme="light"] .step h3 { color: #0c1a2e; }
[data-theme="light"] .step p  { color: #475569; }

/* Pricing Teaser */
[data-theme="light"] .pricing-teaser { background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 60%, #f0fdf4 100%); }
[data-theme="light"] .pt-title { color: #0c1a2e; }
[data-theme="light"] .pt-desc { color: #475569; }
[data-theme="light"] .pack-home-card { background: #ffffff; border-color: rgba(13,158,223,.18); box-shadow: 0 4px 20px rgba(0,0,0,.07); }
[data-theme="light"] .pack-home-card:hover { border-color: rgba(13,158,223,.4); box-shadow: 0 20px 40px rgba(13,158,223,.15); }
[data-theme="light"] .pkh-name { color: #64748b; }
[data-theme="light"] .pkh-price { color: #0c1a2e; }
[data-theme="light"] .pkh-rate { color: #64748b; }
[data-theme="light"] .pkh-sep { background: rgba(0,0,0,.08); }
[data-theme="light"] .pkh-btn { background: rgba(13,158,223,.08); border-color: rgba(13,158,223,.2); color: #0369a1; }
[data-theme="light"] .pkh-btn:hover { background: #0d9edf; color: #fff; border-color: #0d9edf; }
[data-theme="light"] .pt-footer { color: #475569; }
[data-theme="light"] .pt-link { color: #0d9edf; }

/* Comparison */
[data-theme="light"] .comparison { background: #f8fafc; }
[data-theme="light"] .comparison-table { background: #ffffff; }
[data-theme="light"] .comparison-table th { background: #f1f5f9; color: #0c1a2e; }
[data-theme="light"] .comparison-table td { border-bottom-color: rgba(0,0,0,.06); color: #475569; }
[data-theme="light"] .comparison-table td:first-child { color: #0c1a2e; }
[data-theme="light"] .comparison-table tr:hover td { background: #f8fafc; }
[data-theme="light"] .comparison-table .highlight-col { background: rgba(13,158,223,.05); }

/* Sources */
[data-theme="light"] .sources { background: linear-gradient(135deg, #fffbeb 0%, #f0f9ff 50%, #fffbeb 100%); }
[data-theme="light"] .sources .section-title { color: #0c1a2e; }
[data-theme="light"] .sources-badge { background: rgba(245,158,11,.1) !important; color: #b45309 !important; border-color: rgba(245,158,11,.25) !important; }
[data-theme="light"] .sources-desc { color: #475569 !important; }
[data-theme="light"] .rss-panel { background: #ffffff; border-color: rgba(0,0,0,.09); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
[data-theme="light"] .rss-panel-head { color: #94a3b8; }
[data-theme="light"] .rss-site-item { color: #334155; }
[data-theme="light"] .rss-feat-item { color: #334155; }
[data-theme="light"] .rss-flow-step { background: rgba(13,158,223,.08); border-color: rgba(13,158,223,.2); color: #0c1a2e; }
[data-theme="light"] .rss-flow-arrow { color: rgba(0,0,0,.25); }

/* Testimonials */
[data-theme="light"] .testimonials { background: #f0f9ff; }
[data-theme="light"] .testi-card { background: #ffffff; border-color: rgba(0,0,0,.08); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .testi-text { color: #475569; }
[data-theme="light"] .testi-author strong { color: #0c1a2e; }
[data-theme="light"] .testi-author span { color: #64748b; }

/* Tutorial */
[data-theme="light"] .tutorial-section { background: #ffffff; }
[data-theme="light"] .tut-desc { color: #475569; }
[data-theme="light"] .tut-list li { color: #334155; }
[data-theme="light"] .tut-video-caption { color: #64748b; }

/* Support Section */
[data-theme="light"] .support-section { background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 60%, #f0fdf4 100%); }
[data-theme="light"] .support-section .section-title { color: #0c1a2e; }
[data-theme="light"] .support-section .section-desc { color: #475569; }
[data-theme="light"] .sup-badge { background: rgba(22,163,74,.1); color: #16a34a; border-color: rgba(22,163,74,.25); }
[data-theme="light"] .sup-card { background: #ffffff; border-color: rgba(0,0,0,.09); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
[data-theme="light"] .sup-card h3 { color: #0c1a2e; }
[data-theme="light"] .sup-card p { color: #475569; }
[data-theme="light"] .sup-card .sup-dot1, [data-theme="light"] .sup-card .sup-dot2 { opacity: .1; }

/* Blog */
[data-theme="light"] .blog-section { background: #f8fafc; }
[data-theme="light"] .blog-card { background: #ffffff; border-color: rgba(0,0,0,.08); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .blog-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,.12); }
[data-theme="light"] .blog-meta span { color: #64748b; }
[data-theme="light"] .blog-title { color: #0c1a2e; }
[data-theme="light"] .blog-excerpt { color: #475569; }

/* FAQ */
[data-theme="light"] .faq { background: #ffffff; }
[data-theme="light"] .faq-item { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .faq-question { color: #0c1a2e; background: transparent; }
[data-theme="light"] .faq-answer { color: #475569; }

/* Download Section */
[data-theme="light"] .download-section { background: #f8fafc; }
[data-theme="light"] .download-box { background: linear-gradient(135deg, rgba(13,158,223,.06), rgba(22,163,74,.06)); border-color: rgba(13,158,223,.2); }

/* Final CTA */
[data-theme="light"] .final-cta { background: #f0f9ff; }

/* Footer — keep dark even in light mode */
[data-theme="light"] .footer { background: #0c1a2e; }

/* Float badges */
[data-theme="light"] .float-badge { background: #ffffff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 20px rgba(0,0,0,.12); color: #0c1a2e; }
[data-theme="light"] .float-badge span { color: #334155; }

/* Global section overrides */
[data-theme="light"] .section-badge { background: rgba(13,158,223,.08); color: #0369a1; border-color: rgba(13,158,223,.2); }
[data-theme="light"] .section-title { color: #0c1a2e; }
[data-theme="light"] .section-desc  { color: #475569; }


[data-theme="dark"] body { background: #070e1d; color: #e2e8f0; }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0c1526; }

/* Section Badges */
[data-theme="dark"] .section-badge { background: rgba(13,158,223,.12); color: #38bdf8; }

/* Section Titles */
[data-theme="dark"] .section-title { color: #f1f5f9; }
[data-theme="dark"] .section-desc  { color: #94a3b8; }

/* How It Works */
[data-theme="dark"] .how-it-works { background: #0c1526; }
[data-theme="dark"] .step { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .step:hover { box-shadow: 0 20px 50px rgba(0,0,0,.5); }
[data-theme="dark"] .step h3 { color: #f1f5f9; }
[data-theme="dark"] .step p  { color: #94a3b8; }

/* Comparison */
[data-theme="dark"] .comparison { background: #0a1628; }
[data-theme="dark"] .comparison-table-wrap { box-shadow: 0 20px 40px rgba(0,0,0,.5); }
[data-theme="dark"] .comparison-table { background: #111f35; }
[data-theme="dark"] .comparison-table th { background: #0c1a2e; color: #e2e8f0; }
[data-theme="dark"] .comparison-table td { border-bottom-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .comparison-table td:first-child { color: #e2e8f0; }
[data-theme="dark"] .comparison-table tr:hover td { background: #0f1e32; }
[data-theme="dark"] .comparison-table .highlight-col { background: rgba(13,158,223,.1); }

/* Testimonials */
[data-theme="dark"] .testimonials { background: #0a1628; }
[data-theme="dark"] .testi-marquee-wrap {
  -webkit-mask: linear-gradient(90deg, transparent, #0a1628 8%, #0a1628 92%, transparent);
  mask: linear-gradient(90deg, transparent, #0a1628 8%, #0a1628 92%, transparent);
}
[data-theme="dark"] .testi-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .testi-text { color: #94a3b8; }
[data-theme="dark"] .testi-author strong { color: #f1f5f9; }
[data-theme="dark"] .testi-author span { color: #64748b; }

/* Tutorial */
[data-theme="dark"] .tutorial-section { background: #0c1526; }
[data-theme="dark"] .tut-desc { color: #94a3b8; }
[data-theme="dark"] .tut-list li { color: #e2e8f0; }
[data-theme="dark"] .tut-video-caption { color: #64748b; }

/* Blog Section */
[data-theme="dark"] .blog-section { background: #0c1526; }
[data-theme="dark"] .blog-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .blog-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,.4); }
[data-theme="dark"] .blog-meta span { color: #64748b; }
[data-theme="dark"] .blog-title { color: #f1f5f9; }
[data-theme="dark"] .blog-excerpt { color: #94a3b8; }
[data-theme="dark"] .blog-card-featured { border-color: rgba(22,163,74,.25); }
[data-theme="dark"] .blog-card-featured .blog-title { color: #818cf8; }
[data-theme="dark"] .blog-card-featured:hover .blog-title { color: #86efac; }

/* FAQ */
[data-theme="dark"] .faq { background: #0a1628; }
[data-theme="dark"] .faq-item { border-color: #1e3a5f; }
[data-theme="dark"] .faq-question { color: #f1f5f9; background: transparent; }
[data-theme="dark"] .faq-question:hover { color: #0d9edf; }
[data-theme="dark"] .faq-answer p { color: #94a3b8; }

/* Final CTA */
[data-theme="dark"] .final-cta { background: #0c1526; }

/* Float Badges */
[data-theme="dark"] .float-badge { background: #111f35; color: #f1f5f9; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
[data-theme="dark"] .float-badge i { color: #0d9edf; }

/* Inner Pages */
[data-theme="dark"] .inner-content { background: #070e1d; }
[data-theme="dark"] .inner-toc { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .inner-toc h3 { color: #64748b; }
[data-theme="dark"] .inner-toc ul li a { color: #94a3b8; }
[data-theme="dark"] .inner-toc ul li a:hover,
[data-theme="dark"] .inner-toc ul li a.active { background: rgba(13,158,223,.12); color: #0d9edf; }
[data-theme="dark"] .inner-prose h2 { color: #f1f5f9; border-bottom-color: #1e3a5f; }
[data-theme="dark"] .inner-prose h3 { color: #e2e8f0; }
[data-theme="dark"] .inner-prose p { color: #94a3b8; }
[data-theme="dark"] .inner-prose ul li,
[data-theme="dark"] .inner-prose ol li { color: #94a3b8; }
[data-theme="dark"] .inner-prose strong { color: #e2e8f0; }
[data-theme="dark"] .inner-prose .highlight-box { background: rgba(13,158,223,.08); border-left-color: #0d9edf; }
[data-theme="dark"] .inner-prose .highlight-box p { color: #94a3b8; }
[data-theme="dark"] .inner-prose .contact-box { background: rgba(13,158,223,.06); border-color: rgba(13,158,223,.2); }
[data-theme="dark"] .inner-prose .last-updated { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }

/* About */
[data-theme="dark"] .about-stat-card { background: rgba(13,158,223,.06); border-color: rgba(13,158,223,.15); }
[data-theme="dark"] .about-stat-card .stat-label { color: #64748b; }
[data-theme="dark"] .value-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .value-card h3 { color: #f1f5f9; }
[data-theme="dark"] .value-card p { color: #94a3b8; }

/* Reviews */
[data-theme="dark"] .reviews-section { background: #0c1526; }
[data-theme="dark"] .review-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .review-card p { color: #94a3b8; }

/* Download changelog */
[data-theme="dark"] .changelog-section { background: #0a1628; }
[data-theme="dark"] .changelog-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .changelog-card p { color: #94a3b8; }

/* Features full page */
[data-theme="dark"] .features-full-section { background: #0a1628; }
[data-theme="dark"] .feature-full-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .feature-full-card h3 { color: #f1f5f9; }
[data-theme="dark"] .feature-full-card p, [data-theme="dark"] .feature-full-card li { color: #94a3b8; }

/* How It Works full page */
[data-theme="dark"] .hiw-steps-section { background: #0c1526; }
[data-theme="dark"] .hiw-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .hiw-card h3 { color: #f1f5f9; }
[data-theme="dark"] .hiw-card p { color: #94a3b8; }

/* Support page forms */
[data-theme="dark"] .support-page-section { background: #0c1526; }
[data-theme="dark"] .ticket-form-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .ticket-form-card label { color: #94a3b8; }
[data-theme="dark"] .ticket-form-card input,
[data-theme="dark"] .ticket-form-card textarea,
[data-theme="dark"] .ticket-form-card select {
  background: #0c1526;
  border-color: #1e3a5f;
  color: #e2e8f0;
}

/* Pricing page */
[data-theme="dark"] .pricing-section { background: #0a1628; }
[data-theme="dark"] .pack-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .pack-card h3, [data-theme="dark"] .pack-card .pack-price { color: #f1f5f9; }
[data-theme="dark"] .pack-card p, [data-theme="dark"] .pack-card li { color: #94a3b8; }

/* Demo page */
[data-theme="dark"] .demo-section { background: #0c1526; }
[data-theme="dark"] .demo-card { background: #111f35; border-color: #1e3a5f; }

/* ── About: Our Values Cards ── */
[data-theme="dark"] .about-value-card { background: #111f35 !important; border-color: #1e3a5f !important; }
[data-theme="dark"] .about-value-card h4 { color: #f1f5f9 !important; }
[data-theme="dark"] .about-value-card p { color: #94a3b8 !important; }

/* ── Blog Page Layout ── */
[data-theme="dark"] .blog-layout { background: #070e1d; }
[data-theme="dark"] .blog-filter-bar { border-bottom-color: #1e3a5f; }
[data-theme="dark"] .blog-filter-btn { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .blog-filter-btn:hover,
[data-theme="dark"] .blog-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .blog-post-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .bpc-title { color: #f1f5f9; }
[data-theme="dark"] .bpc-excerpt { color: #94a3b8; }
[data-theme="dark"] .bpc-meta { color: #64748b; }

/* ── Blog Sidebar ── */
[data-theme="dark"] .sidebar-widget { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .sw-title { color: #f1f5f9; border-bottom-color: #1e3a5f; }
[data-theme="dark"] .sw-cat-item { color: #94a3b8; }
[data-theme="dark"] .sw-cat-item:hover { background: rgba(13,158,223,.08); color: #0d9edf; }
[data-theme="dark"] .sw-pp-title { color: #f1f5f9; }
[data-theme="dark"] .sw-tag { background: #0a1628; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .sw-tag:hover { background: rgba(13,158,223,.12); border-color: #0d9edf; color: #0d9edf; }
[data-theme="dark"] .sw-email-input { background: #0a1628; border-color: #1e3a5f; color: #e2e8f0; }
[data-theme="dark"] .sw-email-input::placeholder { color: #64748b; }

/* ── Documentation Page ── */
[data-theme="dark"] .doc-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .doc-card:hover { border-color: #0d9edf; }
[data-theme="dark"] .doc-card h4 { color: #f1f5f9; }
[data-theme="dark"] .doc-card p { color: #94a3b8; }
[data-theme="dark"] .doc-step-body h4 { color: #f1f5f9; }
[data-theme="dark"] .doc-step-body p { color: #94a3b8; }

/* ── Content Sources Page ── */
[data-theme="dark"] .source-card-item { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .sci-name { color: #f1f5f9; }

/* ── Reviews Page ── */
[data-theme="dark"] .reviews-summary { background: #070e1d; }
[data-theme="dark"] .rb-bar-wrap { background: #1e3a5f; }
[data-theme="dark"] .rb-stars-label { color: #e2e8f0; }
[data-theme="dark"] .trust-badge { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .reviews-featured { background: #0c1526; }
[data-theme="dark"] .featured-review-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .frc-text { color: #94a3b8; }
[data-theme="dark"] .frc-name { color: #f1f5f9; }
[data-theme="dark"] .frc-author { border-top-color: #1e3a5f; }
[data-theme="dark"] .frc-result { background: rgba(13,158,223,.08); border-color: rgba(13,158,223,.2); }
[data-theme="dark"] .frc-result span { color: #e2e8f0; }
[data-theme="dark"] .reviews-all { background: #070e1d; }

/* ── Pricing Page ── */
[data-theme="dark"] .guarantee-strip { background: rgba(22,163,74,.08); border-top-color: rgba(22,163,74,.2); }
[data-theme="dark"] .guarantee-strip p { color: #94a3b8; }
[data-theme="dark"] .calc-section { background: #0a1628; }
[data-theme="dark"] .calc-box { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .calc-label { color: #e2e8f0; }
[data-theme="dark"] .calc-input { background: #0c1526; border-color: #1e3a5f; color: #e2e8f0; }
[data-theme="dark"] .calc-input:focus { background: #111f35; border-color: var(--primary); }
[data-theme="dark"] .calc-result { background: rgba(13,158,223,.08); border-color: rgba(13,158,223,.2); }
[data-theme="dark"] .calc-result-row { border-bottom-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .calc-result-row strong { color: #f1f5f9; }
[data-theme="dark"] .compare-section { background: #070e1d; }
[data-theme="dark"] .compare-col { border-color: #1e3a5f; }
[data-theme="dark"] .compare-col-head { background: #0c1526; }
[data-theme="dark"] .compare-col-head h3 { color: #f1f5f9; }
[data-theme="dark"] .compare-col-head p { color: #94a3b8; }
[data-theme="dark"] .compare-col-body { background: #111f35; }
[data-theme="dark"] .compare-item { border-bottom-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .pricing-faq { background: #0a1628; }

/* ── How It Works: FAQ section ── */
[data-theme="dark"] .hiw-faq { background: #0a1628; }

/* ── FAQ Page ── */
[data-theme="dark"] .faq-page { background: #070e1d; }
[data-theme="dark"] .faq-cat-link:hover { background: #111f35; }
[data-theme="dark"] .faq-cat-link.active { background: rgba(13,158,223,.1); }
[data-theme="dark"] .faq-section-header { border-bottom-color: #1e3a5f; }
[data-theme="dark"] .faq-section-title { color: #f1f5f9; }
[data-theme="dark"] .faq-section-count { background: rgba(13,158,223,.1); color: #38bdf8; }

/* ── Download Page ── */
[data-theme="dark"] .dl-requirements { background: #0c1526; }
[data-theme="dark"] .dl-req-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dl-req-value { color: #f1f5f9; }
[data-theme="dark"] .dl-install { background: #0a1628; }
[data-theme="dark"] .dl-install-step { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dl-install-step h4 { color: #f1f5f9; }

/* ── Demo Page ── */
[data-theme="dark"] .demo-main { background: #070e1d; }
[data-theme="dark"] .demo-highlights { background: #0c1526; }
[data-theme="dark"] .demo-social { background: #0a1628; }
[data-theme="dark"] .demo-quote { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dq-text { color: #94a3b8; }
[data-theme="dark"] .dq-name { color: #f1f5f9; }
[data-theme="dark"] .demo-chapter { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .demo-chapter:hover { background: rgba(13,158,223,.1); color: #0d9edf; }
[data-theme="dark"] .demo-highlight-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dhc-title { color: #f1f5f9; }
[data-theme="dark"] .dhc-desc { color: #94a3b8; }

/* ── Reviews: Sort Dropdown ── */
[data-theme="dark"] .rev-sort { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .rev-filter-btn { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }

/* ── Pricing: Guarantee Strip Icons & Text ── */
[data-theme="dark"] .guarantee-item-icon { background: rgba(22,163,74,.15); box-shadow: none; }
[data-theme="dark"] .guarantee-item strong { color: #86efac; }
[data-theme="dark"] .guarantee-item span { color: #4ade80; }

/* ── Documentation & Refund Policy: Doc Steps ── */
[data-theme="dark"] .doc-step { background: #111f35; border-color: #1e3a5f; }

/* ── Download Page: Changelog ── */
[data-theme="dark"] .dl-changelog { background: #0c1526; }
[data-theme="dark"] .dl-version-item { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dl-version-name { color: #f1f5f9; }
[data-theme="dark"] .dl-change-item { color: #94a3b8; }

/* ── Content Sources Page ── */
[data-theme="dark"] .sources-overview { background: #070e1d; }
[data-theme="dark"] .src-stat { background: rgba(13,158,223,.08); border-color: #1e3a5f; }
[data-theme="dark"] .src-tabs { background: #0c1526; border-color: #1e3a5f; }
[data-theme="dark"] .src-tab:hover { background: #111f35; }
[data-theme="dark"] .sources-section:nth-child(odd) { background: #070e1d; }
[data-theme="dark"] .sources-section:nth-child(even) { background: #0c1526; }

/* ── Light Mode: sup-card inner overlay fix ── */
[data-theme="light"] .sup-card::after { background: #ffffff; }
[data-theme="light"] .sup-card::before { opacity: 0; }

/* ── Light Mode: mobile nav menu ── */
[data-theme="light"] .nav-mobile { background: #ffffff !important; }

/* ── Light Mode: rss-flow-icon (sources section) ── */
[data-theme="light"] .rss-flow-icon {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.06));
  border-color: rgba(245,158,11,.3);
  box-shadow: none;
}

/* ── Light Mode: hero stat divider ── */
[data-theme="light"] .hero-stats { border-top-color: rgba(0,0,0,.1); }

/* ── Light Mode: gradient-text stays colored in both modes ── */
[data-theme="light"] .gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Light Mode: download section text ── */
[data-theme="light"] .download-box h2 { color: #0c1a2e; }
[data-theme="light"] .download-box p { color: #475569; }
[data-theme="light"] .download-version { color: #64748b; }

/* ── Light Mode: final CTA box — fully light ── */
[data-theme="light"] .cta-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 60%, #f0fdfa 100%);
  border: 1px solid rgba(13,158,223,.15);
  box-shadow: 0 24px 64px rgba(13,158,223,.1), 0 4px 16px rgba(0,0,0,.05);
}
[data-theme="light"] .cta-blob1 { background: rgba(13,158,223,.12); }
[data-theme="light"] .cta-blob2 { background: rgba(22,163,74,.10); }

/* ── Light Mode: faq answer text ── */
[data-theme="light"] .faq-answer p { color: #475569; }
[data-theme="light"] .faq-question.active { color: #0d9edf; }

/* ── Light Mode: section-badge global fallback ── */
[data-theme="light"] .tut-badge { background: rgba(13,158,223,.1); color: #0369a1; border-color: rgba(13,158,223,.2); }
[data-theme="light"] .blog-badge { background: rgba(13,158,223,.1); color: #0369a1; border-color: rgba(13,158,223,.2); }
[data-theme="light"] .pt-badge { background: rgba(13,158,223,.15) !important; color: #0369a1 !important; border-color: rgba(13,158,223,.25) !important; }

/* ── Light Mode: hero visual dashboard items ── */
[data-theme="light"] .dash-row { background: rgba(13,158,223,.04); border-bottom-color: rgba(0,0,0,.05); color: #475569; }
[data-theme="light"] .dash-title { color: #0c1a2e; }
[data-theme="light"] .dash-subtitle { color: #64748b; }
[data-theme="light"] .dash-stat-card { background: rgba(13,158,223,.06); border-color: rgba(13,158,223,.12); }
[data-theme="light"] .dash-stat-num { color: #0c1a2e; }
[data-theme="light"] .dash-stat-label { color: #64748b; }


/* ============================================================
   LIGHT MODE — TEXT VISIBILITY FIXES
   ============================================================ */

/* Hero stats numbers & labels */
[data-theme="light"] .stat-num { color: #0c1a2e; }
[data-theme="light"] .stat-label { color: #64748b; }
[data-theme="light"] .stat-icon { color: #0d9edf; }

/* Watch Demo / ghost button in hero */
[data-theme="light"] .btn-ghost {
  background: transparent;
  border: 2px solid rgba(0,0,0,.18);
  color: #334155;
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.3);
  color: #0c1a2e;
}

/* Hero visual dashboard mockup — inner text */
[data-theme="light"] .side-item { color: #64748b; }
[data-theme="light"] .side-item.active { color: #0c1a2e; background: rgba(13,158,223,.1); }
[data-theme="light"] .side-item i { color: #94a3b8; }
[data-theme="light"] .side-item.active i { color: #0d9edf; }
[data-theme="light"] .ds-num { color: #0c1a2e; }
[data-theme="light"] .ds-label { color: #64748b; }
[data-theme="light"] .ds-title { color: #0c1a2e; }
[data-theme="light"] .ds-subtitle { color: #64748b; }
[data-theme="light"] .ds-row { color: #334155; }
[data-theme="light"] .dash-row { color: #334155; border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .dash-stat-card { background: rgba(13,158,223,.06); }
[data-theme="light"] .dash-stat-num { color: #0c1a2e; }
[data-theme="light"] .dash-stat-label { color: #64748b; }
[data-theme="light"] .dash-sidebar { background: rgba(0,0,0,.04); border-right-color: rgba(0,0,0,.06); }
[data-theme="light"] .dash-item-title { color: #334155; }
[data-theme="light"] .dash-item-sub { color: #94a3b8; }

/* Blog category labels (on images — keep readable) */
[data-theme="light"] .blog-cat {
  background: rgba(0,0,0,.45);
  color: #ffffff;
}

/* Tutorial section list items & text */
[data-theme="light"] .tut-list li { color: #334155; }
[data-theme="light"] .tut-title { color: #0c1a2e; }

/* FAQ question & answer text */
[data-theme="light"] .faq-question { color: #0c1a2e; }
[data-theme="light"] .faq-answer { color: #475569; }
[data-theme="light"] .faq-item.open .faq-question { color: #0d9edf; }

/* Comparison table header */
[data-theme="light"] .comparison-table thead th { color: #0c1a2e; }
[data-theme="light"] .comparison-table .smart-col { color: #0d9edf; }

/* Testimonial marquee section heading */
[data-theme="light"] .testi-heading { color: #0c1a2e; }

/* Download section */
[data-theme="light"] .download-title { color: #0c1a2e; }
[data-theme="light"] .download-desc { color: #475569; }
[data-theme="light"] .download-version { color: #64748b; }
[data-theme="light"] .download-meta { color: #64748b; }
[data-theme="light"] .download-meta span { color: #64748b; }

/* Support link text in sup-cards */
[data-theme="light"] .sup-link { color: #0d9edf; }

/* Sources rss text */
[data-theme="light"] .rss-panel-head { color: #94a3b8; }

/* FAQ icon */
[data-theme="light"] .faq-icon { color: #0d9edf; }
[data-theme="light"] .faq-toggle { color: #64748b; }

/* How it works step number */
[data-theme="light"] .step-num { color: #0d9edf; opacity: 0.4; }
[data-theme="light"] .step-icon { background: rgba(13,158,223,.1); color: #0d9edf; }

/* blog-meta read-more links */
[data-theme="light"] .blog-read-more { color: #0d9edf; }
[data-theme="light"] .blog-link { color: #0d9edf; }

/* Tutorial badge and text */
[data-theme="light"] .tut-badge { background: rgba(13,158,223,.1); color: #0369a1; }

/* Section general text cleanup */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 { color: #0c1a2e; }
[data-theme="light"] p { color: #475569; }

/* CTA box — light mode text & buttons */
[data-theme="light"] .cta-box h2,
[data-theme="light"] .cta-box h3 { color: #0c1a2e; }
[data-theme="light"] .cta-box p { color: #475569; }
[data-theme="light"] .cta-box .cta-sub { color: #64748b; }
[data-theme="light"] .cta-note { color: #64748b; }
/* Start Free Trial btn → primary teal on light bg */
[data-theme="light"] .cta-box .btn-white {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(13,158,223,.35);
}
[data-theme="light"] .cta-box .btn-white:hover {
  background: #0a8ac4;
  box-shadow: 0 8px 28px rgba(13,158,223,.45);
}
/* See All Features ghost btn → dark border on light bg */
[data-theme="light"] .cta-box .btn-ghost-white {
  background: transparent;
  color: #334155;
  border: 2px solid rgba(0,0,0,.18);
}
[data-theme="light"] .cta-box .btn-ghost-white:hover {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.28);
}

/* Hero section headings override (hero bg is light but heading has gradient) */
[data-theme="light"] .hero h1,
[data-theme="light"] .hero-title { color: #0c1a2e; }
[data-theme="light"] .hero p { color: #475569; }

/* Header link text */
[data-theme="light"] .nav-link { color: #334155; }
[data-theme="light"] .header-cta .btn-login { color: #334155; border-color: rgba(0,0,0,.2); }


/* ============================================================
   LIGHT MODE — FINAL TEXT VISIBILITY FIXES
   ============================================================ */

/* Download box — install instruction strong text & feature list */
[data-theme="light"] .download-box strong { color: #334155; }
[data-theme="light"] .download-box li { color: #475569; }
[data-theme="light"] .download-box li::before,
[data-theme="light"] .download-box li i { color: #16a34a; }

/* Hero visual dashboard — feed/article titles inside mockup */
[data-theme="light"] .feed-title { color: #334155; }
[data-theme="light"] .feed-item { color: #475569; }
[data-theme="light"] .feed-source { color: #94a3b8; }
[data-theme="light"] .feed-time { color: #94a3b8; }
[data-theme="light"] .dash-feed-title { color: #334155; }
[data-theme="light"] .dash-feed-source { color: #94a3b8; }

/* Hero visual sidebar items */
[data-theme="light"] .side-nav .side-item { color: #64748b; }
[data-theme="light"] .side-nav .side-item.active { color: #0d9edf; background: rgba(13,158,223,.08); }

/* How it works step numbers */
[data-theme="light"] .step-number { color: rgba(13,158,223,.25); }

/* Sources section panel text color */
[data-theme="light"] .rss-site-item { color: #334155; }
[data-theme="light"] .rss-feat-item { color: #334155; }

/* Pricing teaser — pack badge text */
[data-theme="light"] .pkh-tag-free { background: rgba(22,163,74,.12); color: #16a34a; border-color: rgba(22,163,74,.25); }
[data-theme="light"] .pkh-tag-save { background: rgba(13,158,223,.12); color: #0369a1; border-color: rgba(13,158,223,.25); }

/* Fix any remaining rgba white text in non-dark containers */
[data-theme="light"] .hero-visual .dash-row span { color: #475569; }
[data-theme="light"] .hero-visual .status-tag { color: #ffffff; }



/* ============================================================
   LIGHT MODE — INNER PAGES FIX (all pages)
   ============================================================ */

/* ── page-hero banner (all inner pages) ── */
[data-theme="light"] .page-hero {
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 60%, #ccfbf1 100%);
}
[data-theme="light"] .page-hero::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(13,158,223,.18) 0%, transparent 70%);
}
[data-theme="light"] .page-hero h1 { color: #0c1a2e; }
[data-theme="light"] .page-hero p { color: #475569; }
[data-theme="light"] .page-hero-badge {
  background: rgba(13,158,223,.1);
  color: #0369a1;
  border-color: rgba(13,158,223,.2);
}
[data-theme="light"] .page-breadcrumb { color: #64748b; }
[data-theme="light"] .page-breadcrumb a { color: #475569; }
[data-theme="light"] .page-breadcrumb a:hover { color: var(--primary); }
[data-theme="light"] .page-breadcrumb i { color: #94a3b8; }

/* ── how-it-works.html — steps ── */
[data-theme="light"] .hiw-steps { background: #f8fafc; }
[data-theme="light"] .hiw-steps .section-title { color: #0c1a2e; }
[data-theme="light"] .hiw-steps .section-desc { color: #475569; }
[data-theme="light"] .hiw-step {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
[data-theme="light"] .hiw-step:hover {
  background: rgba(13,158,223,.04);
  border-color: var(--primary);
  box-shadow: 0 8px 30px rgba(13,158,223,.12);
}
[data-theme="light"] .hiw-step-number { color: #0c1a2e; }
[data-theme="light"] .hiw-step h3 { color: #0c1a2e; }
[data-theme="light"] .hiw-step p { color: #475569; }
[data-theme="light"] .hiw-steps-grid::before { background: rgba(13,158,223,.2); }

/* ── how-it-works.html — detail ── */
[data-theme="light"] .hiw-detail { background: #ffffff; }
[data-theme="light"] .hiw-detail-text h2 { color: #0c1a2e; }
[data-theme="light"] .hiw-detail-text p { color: #475569; }
[data-theme="light"] .hiw-detail-text li { color: #475569; }
[data-theme="light"] .hiw-detail-visual {
  background: rgba(13,158,223,.03);
  border: 1px solid rgba(13,158,223,.1);
}

/* ── how-it-works.html — video ── */
[data-theme="light"] .hiw-video { background: #f0f9ff; }
[data-theme="light"] .hiw-video .section-title { color: #0c1a2e; }
[data-theme="light"] .hiw-video .section-desc { color: #475569; }

/* ── reviews.html — case studies banner ── */
[data-theme="light"] .reviews-cases { background: #f0f9ff; }
[data-theme="light"] .reviews-cases .section-title { color: #0c1a2e; }
[data-theme="light"] .reviews-cases .section-desc { color: #475569; }
[data-theme="light"] .case-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
[data-theme="light"] .case-card:hover {
  background: rgba(13,158,223,.04);
  border-color: rgba(13,158,223,.2);
}
[data-theme="light"] .case-card-label { color: #64748b; }
[data-theme="light"] .case-card-name { color: #0c1a2e; }
[data-theme="light"] .case-card-type { color: #64748b; }

/* ── demo.html — live stats ── */
[data-theme="light"] .demo-live { background: #f8fafc; }
[data-theme="light"] .demo-live .section-title { color: #0c1a2e; }
[data-theme="light"] .demo-live .section-desc { color: #475569; }
[data-theme="light"] .demo-live .section-badge {
  background: rgba(13,158,223,.1);
  color: #0369a1;
  border-color: rgba(13,158,223,.2);
}
[data-theme="light"] .live-stat-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
[data-theme="light"] .live-stat-card:hover {
  background: rgba(13,158,223,.04);
  border-color: rgba(13,158,223,.2);
}
[data-theme="light"] .live-stat-num { color: #0c1a2e; }
[data-theme="light"] .live-stat-label { color: #64748b; }

/* ── content-sources.html — how it works flow ── */
[data-theme="light"] .sources-how { background: #f0f9ff; }
[data-theme="light"] .sources-how .section-title { color: #0c1a2e; }
[data-theme="light"] .sources-how .section-desc { color: #475569; }
[data-theme="light"] .sources-how .section-badge {
  background: rgba(13,158,223,.1);
  color: #0369a1;
  border-color: rgba(13,158,223,.2);
}
[data-theme="light"] .flow-node {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
[data-theme="light"] .flow-node-title { color: #0c1a2e; }
[data-theme="light"] .flow-node-sub { color: #64748b; }
[data-theme="light"] .flow-arrow { color: rgba(0,0,0,.25); }

/* ── pricing.html — packs main section ── */
[data-theme="light"] .packs-main {
  background: #f8fafc;
}

/* ============================================================
   LIGHT MODE — FOOTER
   ============================================================ */
[data-theme="light"] .footer {
  background: linear-gradient(135deg, #a8d4ec 0%, #9ecfdf 50%, #a2d4e0 100%);
  color: #1e3a50;
}
[data-theme="light"] .footer-brand p { color: #1e3a50; }

/* Footer logo — 50% bada */
.footer-brand .logo-img { height: 94px; }
[data-theme="light"] .footer-col h4 { color: #0c2233; }
[data-theme="light"] .footer-col a { color: #1e3a50; }
[data-theme="light"] .footer-col a:hover { color: #0c1a2e; }
[data-theme="light"] .social-link {
  background: rgba(255,255,255,.35);
  color: #0c2233;
}
[data-theme="light"] .social-link:hover {
  background: var(--primary);
  color: #ffffff;
}
[data-theme="light"] .footer-bottom {
  border-top-color: rgba(0,0,0,.15);
  color: #1e3a50;
}

/* ── download.html — plugin card sidebar ── */
[data-theme="light"] .dl-card-sidebar {
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 100%);
}
[data-theme="light"] .dl-plugin-icon {
  background: rgba(13,158,223,.15);
  color: #0d9edf;
}
[data-theme="light"] .dl-plugin-icon .fas { color: #0d9edf; }
[data-theme="light"] .dl-plugin-name { color: #0c1a2e; }
[data-theme="light"] .dl-plugin-version { color: #475569; }
[data-theme="light"] .dl-file-info {
  background: rgba(255,255,255,.6);
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .dl-file-key { color: #64748b; }
[data-theme="light"] .dl-file-val { color: #0c1a2e; }
[data-theme="light"] .dl-login-note { color: #64748b; }

/* ── how-it-works.html — mock terminal (Step 1) ── */
[data-theme="light"] .mock-terminal {
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="light"] .mock-terminal .term-line { color: #0369a1; }
[data-theme="light"] .mock-terminal .info      { color: #0369a1; }
[data-theme="light"] .mock-terminal .cmd       { color: #166534; }
[data-theme="light"] .mock-terminal .success   { color: #15803d; }

/* ── how-it-works.html — mock dashboards (Steps 2,3,4) ── */
[data-theme="light"] .mock-dashboard {
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="light"] .mock-dashboard-title   { color: #0c1a2e; }
[data-theme="light"] .mock-source-name       { color: #1e293b; }
[data-theme="light"] .mock-source-item       { background: rgba(0,0,0,.04); }
[data-theme="light"] .mock-config-label      { color: #475569; }
[data-theme="light"] .mock-config-val        { color: #0c1a2e; }
[data-theme="light"] .mock-config-row        { border-color: rgba(0,0,0,.07); }
[data-theme="light"] .mock-stat-label        { color: #475569; }
[data-theme="light"] .mock-stat-val          { color: #0c1a2e; }
[data-theme="light"] .mock-post-item         { border-color: rgba(0,0,0,.07); }
[data-theme="light"] .mock-post-title        { color: #1e293b; }
[data-theme="light"] .mock-post-time         { color: #64748b; }
[data-theme="light"] .mock-section-label     { color: #64748b; }
[data-theme="light"] .mock-add-source        { color: #0369a1; }

/* ── how-it-works.html — mock-ai-panel (Step 3) ── */
[data-theme="light"] .mock-ai-panel {
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="light"] .mock-ai-title  { color: #0c1a2e; }
[data-theme="light"] .mock-ai-option { background: rgba(0,0,0,.04); }
[data-theme="light"] .mock-ai-label  { color: #64748b; }
[data-theme="light"] .mock-ai-value  { color: #0c1a2e; }

/* ── how-it-works.html — mock-autopublish (Step 4) ── */
[data-theme="light"] .mock-autopublish {
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
[data-theme="light"] .map-stat        { background: rgba(0,0,0,.04); }
[data-theme="light"] .map-stat-label  { color: #64748b; }
[data-theme="light"] .map-stat-value  { color: #0c1a2e; }
[data-theme="light"] .map-post-title  { color: #1e293b; }
[data-theme="light"] .map-post-time   { color: #64748b; }

/* ── how-it-works.html — video-wrapper ── */
[data-theme="light"] .video-wrapper {
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 100%);
}
[data-theme="light"] .video-thumb {
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 50%, #ccfbf1 100%);
}
[data-theme="light"] .video-label { color: #475569; }

/* ── how-it-works.html — hiw-stats section ── */
[data-theme="light"] .hiw-stats {
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 50%, #ccfbf1 100%);
}
[data-theme="light"] .hiw-stat-item .stat-num {
  color: #0c1a2e;
}
[data-theme="light"] .hiw-stat-item p {
  color: #1e3a50;
}

/* ── support.html — support channels section ── */
[data-theme="light"] .support-channels {
  background: #f8fafc;
}
[data-theme="light"] .support-channels .section-title { color: #0c1a2e; }
[data-theme="light"] .support-channels .section-desc { color: #475569; }
[data-theme="light"] .support-channels .section-badge {
  background: rgba(13,158,223,.1);
  color: #0369a1;
  border-color: rgba(13,158,223,.2);
}

/* ================================================================
   Language Toggle Button (EN / HI)
   ================================================================ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(13,158,223,.12);
  border: 1.5px solid rgba(13,158,223,.3);
  color: var(--primary);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  font-family: inherit;
  letter-spacing: .3px;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.lang-toggle .lang-icon { font-size: 14px; }
[data-theme="light"] .lang-toggle {
  background: rgba(13,158,223,.1);
  border-color: rgba(13,158,223,.35);
  color: #0369a1;
}
[data-theme="light"] .lang-toggle:hover {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   DARK MODE — ROUND 3 FIXES
   (Demo, Download, Reviews page cards)
   ============================================================ */

/* ── Demo Page: Tutorial Video Cards (inline-style override) ── */
[data-theme="dark"] .demo-vid-card { background: #111f35 !important; border-color: #1e3a5f !important; }

/* ── Demo Page: Chapter Timeline Pills ── */
[data-theme="dark"] .demo-chapter { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .demo-chapter:hover { background: rgba(13,158,223,.1); color: #0d9edf; }

/* ── Demo Page: Highlight Feature Cards ── */
[data-theme="dark"] .demo-highlight-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dhc-title { color: #f1f5f9; }
[data-theme="dark"] .dhc-desc { color: #94a3b8; }

/* ── Download Page: Hero & Main Cards ── */
[data-theme="dark"] .dl-hero-card { background: #070e1d; }
[data-theme="dark"] .dl-main-card { background: #111f35; border-color: #1e3a5f; }
[data-theme="dark"] .dl-card-title { color: #f1f5f9; }
[data-theme="dark"] .dl-card-desc { color: #94a3b8; }
[data-theme="dark"] .dl-stat-label { color: #64748b; }
[data-theme="dark"] .dl-quick-item { color: #e2e8f0; }
[data-theme="dark"] .dl-version-badge { background: rgba(13,158,223,.1); }

/* ── Reviews Page: Sort & Filter Controls ── */
[data-theme="dark"] .rev-sort { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }
[data-theme="dark"] .rev-filter-btn { background: #111f35; border-color: #1e3a5f; color: #94a3b8; }

/* ── Social Proof Toast Notification ── */
.sp-toast { background: #ffffff; border: 1px solid #e2e8f0; color: #1e293b; }
[data-theme="dark"] .sp-toast { background: #111f35; border-color: #1e3a5f; color: #e2e8f0; }

/* ── Inline code snippets (download install steps) ── */
[data-theme="dark"] .dl-install-step code { background: #0a1628 !important; color: #7dd3fc; }
[data-theme="dark"] .dl-install-step p { color: #94a3b8; }
[data-theme="dark"] .dl-install-step h4 { color: #f1f5f9; }

/* ── FAQ Page: Search Input ── */
[data-theme="dark"] .faq-search-wrap input { background: #111f35; border-color: #1e3a5f; color: #e2e8f0; }
[data-theme="dark"] .faq-search-wrap input::placeholder { color: #64748b; }
[data-theme="dark"] .faq-search-wrap i { color: #64748b; }

/* ── Pricing: Compare Table ── */
[data-theme="dark"] .compare-table-wrap { border-color: #1e3a5f; }
[data-theme="dark"] .compare-table th { background: #0c1526; color: #f1f5f9; border-bottom-color: #1e3a5f; }
[data-theme="dark"] .compare-table td { background: #111f35; color: #94a3b8; border-bottom-color: #1e3a5f; }
[data-theme="dark"] .compare-table td:first-child { background: #0c1526; color: #e2e8f0; }
[data-theme="dark"] .compare-table td.col-us { background: rgba(13,158,223,.08); }
[data-theme="dark"] .compare-table tr:hover td { background: rgba(13,158,223,.05); }
[data-theme="dark"] .compare-table tr:hover td.col-us { background: rgba(13,158,223,.12); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — BUTTON OVERRIDES (All Pages)
   ══════════════════════════════════════════════════════════════ */

/* ── .btn-white → primary teal on dark navy CTA sections ── */
[data-theme="dark"] .btn-white {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(13,158,223,.35);
}
[data-theme="dark"] .btn-white:hover {
  background: #0a8ac4;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(13,158,223,.45);
}

/* ── FAQ: Contact box "Live Chat" button (gradient bg) ── */
[data-theme="dark"] .faq-contact-box .btn {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* ── Download: "Download Plugin" button (gradient sidebar bg) ── */
[data-theme="dark"] .dl-main-btn {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: none;
}
[data-theme="dark"] .dl-main-btn:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

/* ── Blog: Featured post "Read Case Study" button (gradient bg) ── */
[data-theme="dark"] .bf-read-btn {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
}
[data-theme="dark"] .bf-read-btn:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
}

/* ── Blog: Sidebar CTA widget button (inline background:white override) ── */
[data-theme="dark"] .sidebar-widget a.btn {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
}