/* Apply Manrope immediately to prevent font flash */
* {
  font-family: 'Manrope', Arial, sans-serif;
}

body {
  background: #f4f6fb;
  font-family: 'Manrope', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero */
.hero.gradient-hero {
  width: 100%;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(255, 111, 97, 0.5), rgba(255,255,255,0) 60%),
              radial-gradient(1200px 600px at 90% -10%, rgba(129, 140, 248, 0.55), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 24px 16px 56px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto 12px auto;
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
}

.text-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.hero-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px auto 8px auto;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.upvote-icon {
  width: clamp(32px, 5vw, 56px);
  height: clamp(32px, 5vw, 56px);
  fill: #ff6b35;
  filter: drop-shadow(0 2px 4px rgba(255, 107, 53, 0.3));
  transition: transform 0.2s ease;
}

.upvote-icon:hover {
  transform: translateY(-2px);
}

.button-upvote-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.cta-button:hover .button-upvote-icon {
  transform: translateY(-1px);
}

.hero-animated-subtitle {
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 300;
  margin: -8px 0 16px 0;
  opacity: 0.85;
  position: relative;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', 'Monaco', monospace;
}

.typewriter-container {
  overflow: hidden;
  display: inline-block;
}

.time-text {
  display: inline-block;
  white-space: nowrap;
  width: 0;
  opacity: 0.85;
  animation: typewriter 1.8s steps(10, end) 0.8s both;
}

.blinking-cursor {
  display: inline-block;
  animation: fadeIn 0.1s ease-out 2.6s both, blink 1s infinite 2.7s;
  font-weight: 900;
  opacity: 0;
  color: #ffffff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.hero-subtitle { 
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 800; 
  margin: 0 0 12px 0; 
}

.hero-desc { 
  max-width: 840px; 
  margin: 0 auto 22px auto; 
  line-height: 1.6; 
  opacity: 0.95; 
  font-size: clamp(14px, 1.6vw, 18px);
}

.try-now { 
  max-width: 920px; 
  margin: 14px auto 0 auto; 
}

.try-now .pad-h { padding-left: 36px; padding-right: 36px; }

/* Glass panel container */
.try-now{ display:flex; justify-content:center; }
.try-panel{
  position: relative;
  width: min(980px, calc(100% - 24px));
  padding: 36px 36px 36px 36px;
  border-radius: 24px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.45);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) inset, 0 6px 30px rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.try-copy{ text-align:center; color:#fff; max-width: 900px; margin: 0 auto 18px auto; padding: 0 12px; }
.try-title{ font-weight:800; font-size: clamp(22px,3vw,30px); margin-bottom: 10px; }
.try-sub{ opacity:0.95; font-size: clamp(14px,1.8vw,18px); margin: 0 16px; }

.try-input-row { 
  display: flex; 
  gap: 0; 
  justify-content: center; 
  align-items: stretch; 
  flex-wrap: nowrap; 
  padding: 0; 
}

.try-input {
  flex: 1; 
  min-width: 360px; 
  padding: 16px 18px; 
  border: 1px solid #e5e7eb; 
  border-right: 0;
  border-radius: 12px 0 0 12px;
  font-size: 1rem; 
  background: #ffffff; 
  color: #111827; 
  outline: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.generate-btn-hero{
  border: 1px solid #ff6b35;
  border-left: 0;
  padding: 0 22px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #ff6b35 0%, #ff7f50 50%, #ff8c42 100%);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1rem;
  box-shadow: 0 2px 12px rgba(255, 107, 53, 0.35);
  cursor: pointer;
}

.generate-btn-hero:hover{ filter: brightness(1.05); box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45); }

@media (max-width: 640px){
  .try-input{ min-width: 0; width: 60vw; border-radius: 12px; margin-bottom: 10px; }
  .try-panel{ padding: 28px 18px; }
  .try-input-row{ flex-wrap: wrap; gap: 10px; }
  .generate-btn-hero{ width: auto; border-radius: 12px; }
}

.container {
  margin-top: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  padding: 40px 32px 32px 32px;
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Feature section and general styles */
h2 { font-weight: 600; color: #1a237e; margin-bottom: 4px; letter-spacing: -1px; }
.subtitle { color: #666; font-size: 1rem; line-height: 1.5; margin-bottom: 32px; text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Modern SVG icon styling */
.feature-icon-container { 
  padding: 12px; 
  border-radius: 12px; 
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); 
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.feature-card:hover .feature-icon-container { 
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); 
}

.feature-icon { 
  width: 32px; 
  height: 32px; 
}

.target-icon { color: var(--feature-icon-color) !important; }
.zap-icon { color: var(--feature-icon-color) !important; }
.refresh-icon { color: var(--feature-icon-color) !important; }
.search-icon { color: var(--feature-icon-color) !important; }

.cta-section { text-align: center; padding-top: 32px; border-top: 1px solid #e9ecef; }
.cta-button { background: linear-gradient(90deg, #ff6b35 60%, #ff7f50 100%); color: #fff; font-weight: 600; border: none; border-radius: 8px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding: 14px 32px; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(255, 107, 53, 0.08); transition: background 0.2s, box-shadow 0.2s; }
.cta-button:hover { background: linear-gradient(90deg, #e55a2b 60%, #ff6b35 100%); box-shadow: 0 4px 16px rgba(255, 107, 53, 0.13); }

@media (max-width: 600px) { 
  .container { padding: 18px 4vw 18px 4vw; max-width: 98vw; }
  .features-section { grid-template-columns: 1fr; }
  .hero.gradient-hero { padding-bottom: 48px; min-height: 100vh; }
  .try-now::before { height: 180px; }
}

/* Tech logos */
.tech-logos-section { padding: 24px; background: #f8f9fa; border-radius: 16px; text-align: center; width: 100%; }
.tech-logos-section h3 { color: #1a237e; margin-bottom: 16px; font-size: 1.3rem; font-weight: 600; }
.tech-logos-section p { color: #666; margin-bottom: 20px; font-size: 1rem; }
.tech-logos { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; }
.tech-logo { text-align: center; transition: transform 0.2s ease; }
.tech-logo:hover { transform: translateY(-2px); }
.tech-logo img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; border-radius: 8px; background: white; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s ease; }
.tech-logo img:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.tech-logo img:not([src]), .tech-logo img[src=""], .tech-logo img[src*="broken"] { background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; }
.tech-logo img:not([src])::after, .tech-logo img[src=""]::after, .tech-logo img[src*="broken"]::after { content: attr(alt); color: white; font-weight: bold; font-size: 18px; }
.tech-logo span { color: #333; font-size: 0.9rem; font-weight: 500; display: block; }

@media (max-width: 768px) { .tech-logos { gap: 20px; } .tech-logo img { width: 50px; height: 50px; } .tech-logo span { font-size: 0.8rem; } .pricing-section { padding: 32px 20px; } }

/* Pricing */
.pricing-section { width: 100%; background: #ffffff; padding: 48px 32px; }
.pricing-title { text-align: center; color: #374151; margin: 0 0 8px 0; font-size: 32px; font-weight: 700; }
.pricing-subtitle { text-align: center; color: #6b7280; margin-bottom: 40px; font-size: 16px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; width: 100%; max-width: 1000px; margin: 0 auto; }
.price-card { background: #ffffff; border: 2px solid #e5e7eb; border-radius: 16px; padding: 32px 24px; text-align: center; position: relative; transition: all 0.3s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
/* Removed hardcoded orange - now uses theme variable */
.price-card .ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #ff6b35; color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.plan-icon { font-size: 40px; margin-bottom: 16px; }
.plan-name { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.plan-note { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
.plan-price { font-size: 32px; font-weight: 800; margin: 0 0 24px 0; color: #111827; }
.plan-price span { font-size: 14px; color: #6b7280; font-weight: 400; display: block; margin-top: 4px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 32px 0; text-align: left; }
.plan-features li { margin: 12px 0; color: #374151; font-size: 14px; line-height: 1.6;}
.plan-cta { width: 100%; background: #f3f4f6; color: #374151; border: none; border-radius: 12px; padding: 14px 24px; font-weight: 600; cursor: pointer; font-size: 16px; transition: all 0.2s ease; }
.plan-cta:hover { background: #e5e7eb; }
/* Removed hardcoded orange - now uses theme variables */

/* Brand logo */
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand-icon { 
  width: 22px; 
  height: 22px; 
  opacity: 0.95; 
  fill: #ff6b35;
  filter: drop-shadow(0 1px 2px rgba(255, 107, 53, 0.3));
  transition: transform 0.2s ease;
}

.brand-icon:hover {
  transform: translateY(-3px);
}
.brand-name { font-weight: 700; letter-spacing: -0.02em; }

/* Centered hero badge */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:6px auto 8px auto;
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-weight:700;
  font-size: clamp(14px,1.8vw,18px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero .spark{ color:#ff7a1a; font-size: 18px; }

/* Spacing adjustments for hero */
.hero-badge{ margin-top: clamp(6px, 2vh, 24px); }
.hero-title{ margin: clamp(10px, 3vh, 32px) auto 10px auto; }
.hero-subtitle{ margin-bottom: clamp(8px, 2.5vh, 24px); }
.hero-desc{ margin: 0 auto clamp(14px, 4vh, 48px) auto; }
.try-panel{ margin-top: clamp(14px, 6vh, 80px); margin-bottom: clamp(14px, 6vh, 80px); }

@media (max-width: 480px){
  .hero-badge{ font-size: 12px; padding: 8px 12px; }
  .hero-title{ font-size: 36px; gap: 6px; }
  .upvote-icon{ width: 36px; height: 36px; }
  .hero-animated-subtitle{ font-size: 20px; }
  .hero-subtitle{ font-size: 16px; }
  .hero-desc{ font-size: 14px; }
  .try-panel{ padding: 20px 16px; margin-top: 18px; margin-bottom: 18px; }
  .try-input{ width: 100%; border-radius: 12px; }
  .generate-btn-hero{ width: 100%; border-radius: 12px; padding: 14px 16px; }
  .tech-logos{ gap: 16px; }
}

@media (min-width: 1600px){
  .try-panel{ max-width: 1100px; }
}

/* Below the fold */
.below-fold{ background: #ffffff; width: 100%; }

/* Standardized vertical spacing */
:root { --section-space: 72px; }
@media (max-width: 600px){ :root { --section-space: 40px; } }

/* Below-the-fold layout uses a single stack gap to control spacing */
.below-content{ max-width: 1100px; margin: 0 auto; padding: 56px 24px 64px 24px; display: flex; flex-direction: column; gap: var(--section-space); }

/* Neutralize legacy margins that could add/subtract spacing */
.below-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.below-content h2, .below-content h3 { margin-top: 0; }

/* Features section layout */
.features-section { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 32px; 
  width: 100%; 
}

@media (min-width: 900px){
  .features-section { grid-template-columns: repeat(2, 1fr); }
}

/* Feature card styling */
.feature-card { 
  background: #ffffff; 
  border: 1px solid #eef2f5; 
  border-radius: 16px; 
  padding: 24px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
  transition: all 0.3s ease; 
  display: flex; 
  align-items: flex-start; 
  gap: 16px; 
}

.feature-card:hover { box-shadow: 0 18px 60px rgba(79,70,229,0.12), 0 12px 40px rgba(2,6,23,0.06); transform: translateY(-2px); }
.feature-content { flex: 1; }
.feature-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; color: #111827; }
.feature-description { color: #4b5563; font-size: 0.95rem; line-height: 1.6; }

/* Brand Intelligence Section */
.brand-intelligence-section {
  background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
  border-radius: 24px;
  padding: 48px 32px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}

.brand-intelligence-header {
  margin-bottom: 24px;
}

.brand-intelligence-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.brand-intelligence-badge .spark {
  color: #ffd700;
  font-size: 16px;
}

.brand-intelligence-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: white;
  line-height: 1.2;
}

.brand-intelligence-description {
  font-size: 18px;
  margin: 0 0 32px 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.brand-intelligence-cta {
  background: white;
  color: #667eea;
  border: 2px solid white;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.brand-intelligence-cta:hover {
  background: transparent;
  color: white;
  transform: translateY(-2px);
}

.brand-intelligence-contact {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.brand-intelligence-contact a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.brand-intelligence-contact a:hover {
  text-decoration: underline;
}

/* Reddit Answer Agent Section */
.reddit-agent-section {
  background: white;
  border-radius: 24px;
  padding: 48px 32px;
  text-align: center;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reddit-agent-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #111827;
}

.reddit-agent-description {
  font-size: 16px;
  margin: 0 0 32px 0;
  color: #6b7280;
  line-height: 1.5;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.reddit-agent-cta {
  /* Background now uses theme variable */
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reddit-agent-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.reddit-agent-cta .spark {
  color: #ffd700;
  font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .brand-intelligence-section,
  .reddit-agent-section {
    padding: 32px 24px;
    margin-bottom: 24px;
  }
  
  .brand-intelligence-title {
    font-size: 24px;
  }
  
  .reddit-agent-title {
    font-size: 24px;
  }
  
  .brand-intelligence-description,
  .reddit-agent-description {
    font-size: 16px;
  }
  
  .brand-intelligence-cta,
  .reddit-agent-cta {
    padding: 14px 24px;
    font-size: 16px;
  }
}

/* Font Theme Sidebar - Development Tool */
.font-theme-sidebar {
  position: fixed;
  top: 50%;
  right: -320px;
  transform: translateY(-50%);
  z-index: 9999;
  transition: right 0.3s ease;
  display: none; /* Hidden by default */
}

/* Show theme sidebar only when ?theme=true */
.show-theme-selector .font-theme-sidebar {
  display: block;
}

.font-theme-sidebar.open {
  right: 0;
}

.theme-toggle-btn {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px 0 0 12px;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  transform: translateY(-50%) translateX(-5px);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}

.theme-sidebar-content {
  width: 320px;
  height: 80vh;
  max-height: 600px;
  background: white;
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  padding: 20px;
}

.theme-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.theme-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.theme-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.theme-close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-option {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  width: 100%;
}

.theme-option:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-option.active {
  border-color: #3b82f6;
  background: #f0f9ff;
  color: #1e40af;
}

.theme-preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}

.dev-note {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

.dev-note small {
  color: #6b7280;
  font-style: italic;
}

/* Theme preview colors */
.inter-preview {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.outfit-preview {
  background: linear-gradient(135deg, #fbbf24 0%, #ec4899 100%);
}

.jakarta-preview {
  background: linear-gradient(135deg, #60a5fa 0%, #f97316 100%);
}

.albert-preview {
  background: linear-gradient(135deg, #6b7280 0%, #f59e0b 100%);
}

.manrope-preview {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}

.space-grotesk-preview {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
}

/* Font theme classes */
.font-theme-inter,
.font-theme-inter * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-theme-outfit,
.font-theme-outfit * {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-theme-jakarta,
.font-theme-jakarta * {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-theme-albert,
.font-theme-albert * {
  font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-theme-manrope,
.font-theme-manrope * {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-theme-space-grotesk,
.font-theme-space-grotesk * {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Responsive adjustments for sidebar */
@media (max-width: 768px) {
  .font-theme-sidebar {
    right: -280px;
  }
  
  .theme-sidebar-content {
    width: 280px;
  }
  
  .theme-toggle-btn {
    left: -45px;
    padding: 10px 6px;
    font-size: 18px;
  }
  
  .theme-option {
    padding: 12px 10px;
    font-size: 13px;
  }
  
  .theme-preview {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================
   COLOR PALETTE THEMES - Development Tool
   ========================================== */

/* Default Theme - Midnight Blue (was Purple) */
:root {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(79, 70, 229, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #1e40af 0%, #4338ca 100%);
  --brand-intelligence-bg: linear-gradient(135deg, #1e40af 0%, #6366f1 100%);
  --brand-intelligence-cta-color: #1e40af;
  --reddit-agent-bg: white;
  --reddit-agent-border: #dbeafe;
  --reddit-agent-cta-bg: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
  --body-bg: #f8fafc;
  --primary-text: #1e3a8a;
  --secondary-text: #6b7280;
  --cta-bg: linear-gradient(135deg, #ff6b35 0%, #ff7f50 50%, #ff8c42 100%);
  --sidebar-toggle-bg: linear-gradient(135deg, #1e40af 0%, #4338ca 100%);
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff;
  --pricing-title-color: #111827;
  --pricing-subtitle-color: #6b7280;
  --price-card-bg: #ffffff;
  --price-card-border: #dbeafe;
  --price-card-featured-border: #ff6b35;
  --plan-name-color: #111827;
  --plan-note-color: #6b7280;
  --plan-price-color: #111827;
  --plan-features-color: #374151;
  --plan-cta-bg: #f8fafc;
  --plan-cta-color: #374151;
  --plan-cta-hover-bg: #f1f5f9;
  --plan-cta-primary-bg: #ff6b35;
  --plan-cta-primary-hover: #e55a2b;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #f8fafc;
  --tech-title-color: #111827;
  --tech-desc-color: #6b7280;
  --tech-logo-text-color: #374151;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff;
  --feature-icon-color: #1e40af;
  --feature-title-color: #111827;
  --feature-desc-color: #6b7280;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #7c3aed;
  --highlight-secondary-color: #3b82f6;
}

/* Ocean Breeze - Teal/Cyan Theme */
.color-palette-ocean,
.color-palette-ocean * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(16, 185, 129, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(6, 182, 212, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%) !important;
  --brand-intelligence-cta-color: #06b6d4 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #d1fae5 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  --body-bg: #f0fdfa !important;
  --primary-text: #134e4a !important;
  --secondary-text: #4b5563 !important;
  --cta-bg: linear-gradient(90deg, #0891b2 60%, #06b6d4 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #a7f3d0 !important;
  --price-card-featured-border: #06b6d4 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #f0fdfa !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #ccfbf1 !important;
  --plan-cta-primary-bg: #06b6d4 !important;
  --plan-cta-primary-hover: #0891b2 !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #f0fdfa !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #06b6d4 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #f97316 !important;
  --highlight-secondary-color: #0891b2 !important;
}

/* Sunset Glow - Orange/Pink Theme */
.color-palette-sunset,
.color-palette-sunset * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(251, 146, 60, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(244, 63, 94, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #f97316 0%, #f43f5e 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
  --brand-intelligence-cta-color: #f97316 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #fed7d7 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  --body-bg: #fef2f2 !important;
  --primary-text: #7c2d12 !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #ea580c 60%, #dc2626 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #f97316 0%, #f43f5e 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #fed7d7 !important;
  --price-card-featured-border: #f97316 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #fef2f2 !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #fecaca !important;
  --plan-cta-primary-bg: #f97316 !important;
  --plan-cta-primary-hover: #ea580c !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fef2f2 !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #f97316 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #dc2626 !important;
  --highlight-secondary-color: #f43f5e !important;
}

/* Forest Green - Green/Emerald Theme */
.color-palette-forest,
.color-palette-forest * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(34, 197, 94, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(5, 150, 105, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #16a34a 0%, #10b981 100%) !important;
  --brand-intelligence-cta-color: #16a34a !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #d1fae5 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
  --body-bg: #f0fdf4 !important;
  --primary-text: #14532d !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #15803d 60%, #16a34a 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #bbf7d0 !important;
  --price-card-featured-border: #16a34a !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #f0fdf4 !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #dcfce7 !important;
  --plan-cta-primary-bg: #16a34a !important;
  --plan-cta-primary-hover: #15803d !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #f0fdf4 !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #16a34a !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #eab308 !important;
  --highlight-secondary-color: #16a34a !important;
}

/* Midnight Blue - Deep Blue/Indigo Theme */
.color-palette-midnight,
.color-palette-midnight * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(79, 70, 229, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #1e40af 0%, #4338ca 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #1e40af 0%, #6366f1 100%) !important;
  --brand-intelligence-cta-color: #1e40af !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #dbeafe !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  --body-bg: #f8fafc !important;
  --primary-text: #1e3a8a !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #1d4ed8 60%, #3b82f6 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #1e40af 0%, #4338ca 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #dbeafe !important;
  --price-card-featured-border: #1e40af !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #f8fafc !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #f1f5f9 !important;
  --plan-cta-primary-bg: #1e40af !important;
  --plan-cta-primary-hover: #1d4ed8 !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #f8fafc !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #1e40af !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #7c3aed !important;
  --highlight-secondary-color: #3b82f6 !important;
}

/* Rose Gold - Pink/Rose Theme */
.color-palette-rose,
.color-palette-rose * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(244, 63, 94, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(236, 72, 153, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #e11d48 0%, #ec4899 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #e11d48 0%, #be185d 100%) !important;
  --brand-intelligence-cta-color: #e11d48 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #fce7f3 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #c026d3 0%, #a21caf 100%) !important;
  --body-bg: #fdf2f8 !important;
  --primary-text: #831843 !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #be185d 60%, #e11d48 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #e11d48 0%, #ec4899 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #fce7f3 !important;
  --price-card-featured-border: #e11d48 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #fdf2f8 !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #fce7f3 !important;
  --plan-cta-primary-bg: #e11d48 !important;
  --plan-cta-primary-hover: #be185d !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fdf2f8 !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #e11d48 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #c026d3 !important;
  --highlight-secondary-color: #e11d48 !important;
}

/* Monochrome - Black/Gray/White Theme */
.color-palette-mono,
.color-palette-mono * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(75, 85, 99, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(55, 65, 81, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #374151 0%, #111827 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  --brand-intelligence-cta-color: #374151 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #e5e7eb !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  --body-bg: #f9fafb !important;
  --primary-text: #111827 !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #374151 60%, #4b5563 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #374151 0%, #111827 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #e5e7eb !important;
  --price-card-featured-border: #374151 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #f9fafb !important;
  --plan-cta-color: #111827 !important;
  --plan-cta-hover-bg: #f3f4f6 !important;
  --plan-cta-primary-bg: #374151 !important;
  --plan-cta-primary-hover: #4b5563 !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #f9fafb !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #374151 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #6b7280 !important;
  --highlight-secondary-color: #374151 !important;
}

/* Bright Modern - Orange/Coral Theme */
.color-palette-bright,
.color-palette-bright * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(255, 154, 0, 0.4), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(255, 107, 0, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #ff9a00 0%, #ff6b00 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #ff9a00 0%, #ff6b00 100%) !important;
  --brand-intelligence-cta-color: #ff9a00 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #ffedd5 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
  --body-bg: #fffbf7 !important;
  --primary-text: #9a3412 !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #ea580c 60%, #f97316 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #ff9a00 0%, #ff6b00 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #ffedd5 !important;
  --price-card-featured-border: #ff9a00 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #fffbf7 !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #ffedd5 !important;
  --plan-cta-primary-bg: #ff9a00 !important;
  --plan-cta-primary-hover: #ea580c !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fffbf7 !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #ff9a00 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #ea580c !important;
  --highlight-secondary-color: #ff9a00 !important;
}

/* Clean White - Blue/White Theme */
.color-palette-clean,
.color-palette-clean * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, 0.3), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(147, 197, 253, 0.4), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
  --brand-intelligence-cta-color: #3b82f6 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #e0f2fe !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  --body-bg: #fefefe !important;
  --primary-text: #1e40af !important;
  --secondary-text: #64748b !important;
  --cta-bg: linear-gradient(90deg, #2563eb 60%, #3b82f6 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #64748b !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #e0f2fe !important;
  --price-card-featured-border: #3b82f6 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #64748b !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #fefefe !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #f0f9ff !important;
  --plan-cta-primary-bg: #3b82f6 !important;
  --plan-cta-primary-hover: #2563eb !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fefefe !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #64748b !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #3b82f6 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #64748b !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #60a5fa !important;
  --highlight-secondary-color: #2563eb !important;
}

/* Dark Modern - Dark Theme */
.color-palette-dark,
.color-palette-dark * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(55, 65, 81, 0.6), rgba(0,0,0,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(75, 85, 99, 0.5), rgba(0,0,0,0) 60%),
                   linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  --brand-intelligence-cta-color: #d1d5db !important;
  --reddit-agent-bg: #1f2937 !important;
  --reddit-agent-border: #374151 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  --body-bg: #111827 !important;
  --primary-text: #f9fafb !important;
  --secondary-text: #d1d5db !important;
  --cta-bg: linear-gradient(90deg, #4f46e5 60%, #6366f1 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  
  /* Pricing Section Variables - Keep light text for dark theme */
  --pricing-bg: #1f2937 !important;
  --pricing-title-color: #f9fafb !important;
  --pricing-subtitle-color: #d1d5db !important;
  --price-card-bg: #374151 !important;
  --price-card-border: #4b5563 !important;
  --price-card-featured-border: #6366f1 !important;
  --plan-name-color: #f9fafb !important;
  --plan-note-color: #d1d5db !important;
  --plan-price-color: #f9fafb !important;
  --plan-features-color: #e5e7eb !important;
  --plan-cta-bg: #4b5563 !important;
  --plan-cta-color: #f9fafb !important;
  --plan-cta-hover-bg: #6b7280 !important;
  --plan-cta-primary-bg: #6366f1 !important;
  --plan-cta-primary-hover: #4f46e5 !important;
  
  /* Tech Logos Section Variables - Keep light text for dark theme */
  --tech-section-bg: #1f2937 !important;
  --tech-title-color: #f9fafb !important;
  --tech-desc-color: #d1d5db !important;
  --tech-logo-text-color: #e5e7eb !important;
  
  /* Features Section Variables - Keep light text for dark theme */
  --feature-card-bg: #374151 !important;
  --feature-icon-color: #6366f1 !important;
  --feature-title-color: #f9fafb !important;
  --feature-desc-color: #d1d5db !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #8b5cf6 !important;
  --highlight-secondary-color: #6366f1 !important;
}

/* Neon Bright - Vibrant Neon Theme */
.color-palette-neon,
.color-palette-neon * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(236, 72, 153, 0.5), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(168, 85, 247, 0.5), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
  --brand-intelligence-cta-color: #ec4899 !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #fdf4ff !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  --body-bg: #fefcff !important;
  --primary-text: #7c2d12 !important;
  --secondary-text: #6b7280 !important;
  --cta-bg: linear-gradient(90deg, #d946ef 60%, #ec4899 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #6b7280 !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #fdf4ff !important;
  --price-card-featured-border: #ec4899 !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #6b7280 !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #374151 !important;
  --plan-cta-bg: #fefcff !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #fdf4ff !important;
  --plan-cta-primary-bg: #ec4899 !important;
  --plan-cta-primary-hover: #d946ef !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fefcff !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #6b7280 !important;
  --tech-logo-text-color: #374151 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #ec4899 !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #6b7280 !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #d946ef !important;
  --highlight-secondary-color: #a855f7 !important;
}

/* Minimal White - Brown/White Theme */
.color-palette-minimal,
.color-palette-minimal * {
  --hero-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(120, 113, 108, 0.3), rgba(255,255,255,0) 60%),
                   radial-gradient(1200px 600px at 90% -10%, rgba(168, 162, 158, 0.3), rgba(255,255,255,0) 60%),
                   linear-gradient(135deg, #78716c 0%, #a8a29e 100%) !important;
  --brand-intelligence-bg: linear-gradient(135deg, #78716c 0%, #9ca3af 100%) !important;
  --brand-intelligence-cta-color: #78716c !important;
  --reddit-agent-bg: white !important;
  --reddit-agent-border: #f5f5f4 !important;
  --reddit-agent-cta-bg: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  --body-bg: #fafaf9 !important;
  --primary-text: #44403c !important;
  --secondary-text: #78716c !important;
  --cta-bg: linear-gradient(90deg, #6b7280 60%, #78716c 100%) !important;
  --sidebar-toggle-bg: linear-gradient(135deg, #78716c 0%, #a8a29e 100%) !important;
  
  /* Pricing Section Variables */
  --pricing-bg: #ffffff !important;
  --pricing-title-color: #111827 !important;
  --pricing-subtitle-color: #78716c !important;
  --price-card-bg: #ffffff !important;
  --price-card-border: #f5f5f4 !important;
  --price-card-featured-border: #78716c !important;
  --plan-name-color: #111827 !important;
  --plan-note-color: #78716c !important;
  --plan-price-color: #111827 !important;
  --plan-features-color: #6b7280 !important;
  --plan-cta-bg: #fafaf9 !important;
  --plan-cta-color: #374151 !important;
  --plan-cta-hover-bg: #f5f5f4 !important;
  --plan-cta-primary-bg: #78716c !important;
  --plan-cta-primary-hover: #6b7280 !important;
  
  /* Tech Logos Section Variables */
  --tech-section-bg: #fafaf9 !important;
  --tech-title-color: #111827 !important;
  --tech-desc-color: #78716c !important;
  --tech-logo-text-color: #6b7280 !important;
  
  /* Features Section Variables */
  --feature-card-bg: #ffffff !important;
  --feature-icon-color: #78716c !important;
  --feature-title-color: #111827 !important;
  --feature-desc-color: #78716c !important;
  
  /* Text Highlight Variables */
  --highlight-primary-color: #a8a29e !important;
  --highlight-secondary-color: #6b7280 !important;
}

/* Apply CSS variables to actual elements */
.hero.gradient-hero {
  background: var(--hero-gradient) !important;
}

.brand-intelligence-section {
  background: var(--brand-intelligence-bg) !important;
}

.brand-intelligence-cta {
  background: white !important;
  color: var(--brand-intelligence-cta-color) !important;
}

.brand-intelligence-cta:hover {
  background: transparent !important;
  color: white !important;
}

.reddit-agent-section {
  background: var(--reddit-agent-bg) !important;
  border: 1px solid var(--reddit-agent-border) !important;
}

.reddit-agent-cta {
  background: var(--reddit-agent-cta-bg) !important;
  color: white !important;
}

body {
  background: var(--body-bg) !important;
}

h2 {
  color: var(--primary-text) !important;
}

.subtitle {
  color: var(--secondary-text) !important;
}

.cta-button {
  background: var(--cta-bg) !important;
  color: white !important;
}

.theme-toggle-btn {
  background: var(--sidebar-toggle-bg) !important;
  color: white !important;
}

/* Apply CSS variables to pricing section */
.pricing-section {
  background: var(--pricing-bg) !important;
}

.pricing-title {
  color: var(--pricing-title-color) !important;
}

.pricing-subtitle {
  color: var(--pricing-subtitle-color) !important;
}

.price-card {
  background: var(--price-card-bg) !important;
  border-color: var(--price-card-border) !important;
}

.price-card.featured {
  border-color: var(--price-card-featured-border) !important;
}

.plan-name {
  color: var(--plan-name-color) !important;
}

.plan-note {
  color: var(--plan-note-color) !important;
}

.plan-price {
  color: var(--plan-price-color) !important;
}

.plan-features li {
  color: var(--plan-features-color) !important;
}

.plan-cta {
  background: #e5e7eb !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.plan-cta:hover {
  background: #d1d5db !important;
  color: #111827 !important;
  border: 1px solid #9ca3af !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Dark theme exception for secondary buttons */
.color-palette-dark .plan-cta {
  background: #4b5563 !important;
  color: #f9fafb !important;
  border: 1px solid #6b7280 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.color-palette-dark .plan-cta:hover {
  background: #6b7280 !important;
  color: #f9fafb !important;
  border: 1px solid #9ca3af !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.plan-cta.primary {
  background: var(--plan-cta-primary-bg) !important;
  color: white !important;
}

.plan-cta.primary:hover {
  background: var(--plan-cta-primary-hover) !important;
  color: white !important;
}

/* Apply CSS variables to tech logos section */
.tech-logos-section {
  background: var(--tech-section-bg) !important;
}

.tech-logos-section h3 {
  color: var(--tech-title-color) !important;
}

.tech-logos-section p {
  color: var(--tech-desc-color) !important;
}

.tech-logo span {
  color: var(--tech-logo-text-color) !important;
}

/* Apply CSS variables to features section */
.feature-card {
  background: var(--feature-card-bg) !important;
}

.feature-icon {
  color: var(--feature-icon-color) !important;
}

.feature-title {
  color: var(--feature-title-color) !important;
}

.feature-description {
  color: var(--feature-desc-color) !important;
}

/* Text highlight classes */
.highlight-primary {
  color: var(--highlight-primary-color) !important;
  font-weight: 600;
}

.highlight-secondary {
  color: var(--highlight-secondary-color) !important;
  font-weight: 600;
}

/* Color Palette Selector Styles */
.color-palette-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.palette-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px 0;
}

.palette-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}

.palette-option:hover {
  background: #f8fafc;
}

.palette-option.active {
  background: #e0f2fe;
  color: #0c4a6e;
  font-weight: 600;
}

.palette-preview {
  width: 32px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Color Palette Previews */
.default-preview {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ocean-preview {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
}

.sunset-preview {
  background: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
}

.forest-preview {
  background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
}

.midnight-preview {
  background: linear-gradient(135deg, #1e40af 0%, #4338ca 100%);
}

.rose-preview {
  background: linear-gradient(135deg, #e11d48 0%, #ec4899 100%);
}

.mono-preview {
  background: linear-gradient(135deg, #374151 0%, #111827 100%);
}

.bright-preview {
  background: linear-gradient(135deg, #ff9a00 0%, #ff6b00 100%);
}

.clean-preview {
  background: linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%);
}

.dark-preview {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.neon-preview {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
}

.minimal-preview {
  background: linear-gradient(135deg, #78716c 0%, #a8a29e 100%);
}

.palette-option span {
  font-size: 14px;
  color: #64748b;
}

.palette-option.active span {
  color: #0c4a6e;
}

/* Mobile responsiveness for color palettes */
@media (max-width: 768px) {
  .palette-option {
    padding: 10px 6px;
    font-size: 13px;
  }
  
  .palette-preview {
    width: 28px;
    height: 18px;
  }
}

/* Animations */
@keyframes typewriter {
  0% {
    width: 0;
  }
  100% {
    width: 10ch; /* "in seconds" is exactly 10 characters including space */
  }
}

@keyframes cursorFadeInBlink {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25%, 50% {
    opacity: 1;
  }
  62.5%, 87.5% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Credit-based pricing styles */
.credit-calculator {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.calculator-header {
  text-align: center;
  margin-bottom: 32px;
}

.calculator-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.calculator-header p {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

.calculator-controls {
  margin-bottom: 32px;
}

.calculator-controls label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  font-size: 16px;
}

#credit-selector {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Manrope', Arial, sans-serif;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

#credit-selector:focus {
  outline: none;
  border-color: #3b82f6;
}

.pricing-display {
  text-align: center;
}

.price-breakdown {
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.total-price {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}

.currency {
  font-size: 32px;
  vertical-align: top;
}

.price-note {
  font-size: 14px;
  color: #6b7280;
  margin-left: 8px;
}

.per-post-price {
  font-size: 18px;
  color: #6b7280;
  font-weight: 500;
}

.package-features {
  margin-bottom: 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.feature-item {
  font-size: 14px;
  color: #374151;
  padding: 8px 12px;
  background: #f0f9ff;
  border-radius: 8px;
  text-align: left;
}

.plan-cta.large {
  font-size: 18px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 280px;
  margin: 0 auto;
}

.cta-text {
  font-weight: 600;
}

.cta-price {
  background: rgba(255,255,255,0.2);
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 700;
}

.free-trial-section {
  margin: 48px auto;
  max-width: 600px;
}

.trial-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  color: white;
}

.trial-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.trial-content h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.trial-content p {
  font-size: 16px;
  margin: 0 0 24px 0;
  opacity: 0.9;
}

.plan-cta.trial {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
}

.plan-cta.trial:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

.plan-cta.secondary {
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.plan-cta.secondary:hover {
  background: #e5e7eb;
  transform: translateY(-2px);
}

.free-trial-mention {
  text-align: center;
  margin: 32px 0;
  padding: 20px;
  background: linear-gradient(135deg, #667eea20, #764ba220);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.free-trial-mention p {
  font-size: 16px;
  color: #374151;
  margin: 0;
}

.free-trial-mention strong {
  color: #111827;
}

/* Credit card specific styles */
.credit-card .credit-pricing {
  margin: 20px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
}

.credit-card #credit-selector {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Manrope', Arial, sans-serif;
  background: #ffffff;
  cursor: pointer;
  margin-bottom: 12px;
}

.credit-card #credit-selector:focus {
  outline: none;
  border-color: #3b82f6;
}

.credit-card .selected-price {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #111827;
}

.credit-card .currency {
  font-size: 20px;
  vertical-align: top;
}

.credit-card .price-note {
  font-size: 12px;
  color: #6b7280;
  margin-left: 6px;
  font-weight: 400;
}

.value-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 48px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.value-prop {
  text-align: center;
  padding: 24px;
}

.prop-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.value-prop h4 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.value-prop p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Responsive design for credit calculator */
@media (max-width: 768px) {
  .credit-calculator {
    margin: 0 20px;
    padding: 24px;
  }
  
  .total-price {
    font-size: 36px;
  }
  
  .currency {
    font-size: 24px;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .plan-cta.large {
    font-size: 16px;
    padding: 14px 24px;
    min-width: auto;
    width: 100%;
  }
  
  .value-props {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }
}