@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&family=Permanent+Marker&display=swap');

/* ==========================================================================
   ZeroCostAI.pro — Comic Book Theme Stylesheet (comic-theme.css)
   Pure visual redesign: 100% SEO-safe, zero schema/meta/content modifications
   ========================================================================== */

html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

:root {
  --comic-yellow: #FFD700;
  --comic-red: #FF3B3B;
  --comic-blue: #2B7FFF;
  --comic-green: #00C853;
  --comic-orange: #FF8C00;
  --comic-pink: #FF69B4;
  --comic-purple: #9B59B6;
  --comic-black: #1a1a2e;
  --comic-white: #FFFEF5;
  --comic-cream: #FFF8E7;
  --comic-border: 3px solid var(--comic-black);
  --comic-border-thick: 4px solid var(--comic-black);
  --comic-shadow: 5px 5px 0px var(--comic-black);
  --comic-shadow-sm: 3px 3px 0px var(--comic-black);
  --comic-shadow-lg: 8px 8px 0px var(--comic-black);
  --font-heading: 'Bangers', cursive, sans-serif;
  --font-body: 'Comic Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Permanent Marker', cursive, sans-serif;
}

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS & COMIC BACKGROUND
   -------------------------------------------------------------------------- */
body, body.tool-detail-body {
  font-family: var(--font-body) !important;
  background-color: var(--comic-cream) !important;
  color: var(--comic-black) !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.02) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  line-height: 1.65 !important;
  font-size: 15px !important;
}

/* Headings: Bangers font (Issue 1 Fix: Force on all headings including tool detail pages) */
h1, h2, h3, h4, h5, h6,
h1[style], h2[style], h3[style],
.tool-detail-body h1,
.tool-detail-body h2,
.tool-detail-body h3,
.tool-detail-body h4,
.review-header-flex h1,
.review-section-title,
article.review-card-section h2,
article.review-card-section h3,
.article-content h2,
.article-content h3,
.compare-hero-banner h1,
.compare-hero-banner h2,
.compare-tool-card h3,
div[style*="grid-template-columns"] h3,
div[style*="background:linear-gradient"] h1,
div[style*="background:linear-gradient"] h2,
.hero-editorial-title, .hero-heading, .review-h1,
.section-title, .card-name, .tool-title,
.tool-header-title, .tool-hero-title,
.trending-hero-title, .news-hero-title, .stat-number,
.best-tool-card h3, .best-tool-card h3 a,
.spec-title, .verdict-heading {
  font-family: var(--font-heading) !important;
  letter-spacing: 1.5px !important;
  color: var(--comic-black) !important;
  font-weight: 400 !important;
}

h1, .hero-heading, .hero-editorial-title {
  font-size: clamp(34px, 5.5vw, 56px) !important;
  line-height: 1.15 !important;
}

h2, .section-title {
  font-size: clamp(26px, 4vw, 38px) !important;
  line-height: 1.2 !important;
}

h3 {
  font-size: clamp(20px, 3vw, 26px) !important;
}

/* Eyebrows & Accents: Permanent Marker */
.hero-editorial-eyebrow, .hero-eyebrow, .section-eyebrow,
.badge-pill-title, .stat-label, .proof-icon,
.proof-strip-item, .editorial-announcement-bar .bold,
.news-live-pill, .badge-counter span:last-child {
  font-family: var(--font-accent) !important;
  letter-spacing: 1.5px !important;
}

/* Paragraphs & Reading text: High contrast and effortless legibility */
p, li {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: #1e293b !important; /* Deep charcoal for sharp reading contrast */
  font-weight: 400 !important;
}

span, label, input, button {
  font-family: var(--font-body) !important;
}

/* Only make buttons, labels, pills, links, and strong tags bold */
a, label, button, .nav-menu-links a, .filter-pill, .badge, .btn-launch, .btn-review {
  font-weight: 700 !important;
}

strong, b, .bold, .spec-value, .meta-value {
  color: var(--comic-black) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2. HALFTONE DOT OVERLAYS
   -------------------------------------------------------------------------- */
.halftone,
.editorial-announcement-bar,
.top-bar,
.newsletter-bar,
.submit-cta-banner,
.newsletter-box,
.submit-box {
  position: relative !important;
  overflow: hidden !important;
}

.halftone::after,
.editorial-announcement-bar::after,
.top-bar::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px) !important;
  background-size: 6px 6px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   3. TOP ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.editorial-announcement-bar, .top-bar {
  background: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  border-bottom: var(--comic-border-thick) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 0 var(--comic-black) !important;
}

.editorial-announcement-bar a, .top-bar a {
  color: var(--comic-red) !important;
  background: var(--comic-white) !important;
  border: 2px solid var(--comic-black) !important;
  border-radius: 6px !important;
  padding: 2px 10px !important;
  text-decoration: none !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  display: inline-block !important;
  margin-left: 8px !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.5px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.editorial-announcement-bar a:hover, .top-bar a:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
}

/* --------------------------------------------------------------------------
   4. STICKY HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.header-nav, .header, .navbar {
  background: var(--comic-white) !important;
  border-bottom: var(--comic-border-thick) !important;
  box-shadow: 0 4px 0 var(--comic-black) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-content, .nav-container {
  height: 64px !important;
}

.brand-logo img,
.footer .brand-logo img,
.footer-brand img,
.nav-brand img {
  filter: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-logo:hover img {
  transform: rotate(-2deg) scale(1.05) !important;
}

.nav-menu-links a, .nav-link, .nav-links a {
  color: var(--comic-black) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.nav-menu-links a:hover, .nav-link:hover, .nav-links a:hover {
  background: var(--comic-yellow) !important;
  border-color: var(--comic-black) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--comic-shadow-sm) !important;
  color: var(--comic-black) !important;
}

/* Badge Counter */
.badge-counter, .tool-count {
  background: var(--comic-green) !important;
  color: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--comic-shadow-sm) !important;
  padding: 6px 14px !important;
  font-weight: 800 !important;
}

.badge-counter .live-pulse {
  background-color: var(--comic-yellow) !important;
  box-shadow: 0 0 0 2px var(--comic-black) !important;
}

/* Submit Tool Button */
.btn-submit, .btn-form-submit, .mobile-nav-submit {
  font-family: var(--font-heading) !important;
  background: var(--comic-red) !important;
  color: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--comic-shadow-sm) !important;
  letter-spacing: 1px !important;
  padding: 8px 18px !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
}

.btn-submit:hover, .btn-form-submit:hover, .mobile-nav-submit:hover {
  background: #ff1f1f !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--comic-black) !important;
  color: #ffffff !important;
}

/* Hamburger button */
.hamburger-btn {
  background: var(--comic-yellow) !important;
  border: var(--comic-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--comic-shadow-sm) !important;
}

/* --------------------------------------------------------------------------
   5. HERO SECTION & ACTION BURSTS
   -------------------------------------------------------------------------- */
.hero-section, .hero-editorial, .hero {
  background: var(--comic-white) !important;
  border: var(--comic-border-thick) !important;
  border-radius: 24px !important;
  box-shadow: var(--comic-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 20px auto 36px !important;
  padding: 44px 28px !important;
}

/* Subtle corner burst decoration in hero */
.hero-section::before, .hero-editorial::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 220px !important;
  height: 220px !important;
  background: var(--comic-yellow) !important;
  border-radius: 50% !important;
  opacity: 0.25 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero-editorial-eyebrow, .hero-badge-pill {
  background: var(--comic-yellow) !important;
  border: var(--comic-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--comic-shadow-sm) !important;
  color: var(--comic-black) !important;
  display: inline-flex !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.hero-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--comic-blue) !important;
  color: var(--comic-blue) !important;
  text-shadow: 2px 2px 0 var(--comic-yellow), 3px 3px 0 var(--comic-black) !important;
}

.editorial-line {
  background: var(--comic-yellow) !important;
  border: 2px solid var(--comic-black) !important;
  border-radius: 8px !important;
  padding: 2px 10px !important;
  display: inline-block !important;
  transform: rotate(-1.5deg) !important;
  box-shadow: var(--comic-shadow-sm) !important;
}

/* --------------------------------------------------------------------------
   6. SUPERHERO COMMAND SEARCH BAR (MESMERIZING & HIGH-CONTRAST)
   -------------------------------------------------------------------------- */
.search-container {
  max-width: 680px !important;
  margin: 0 auto 20px auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.search-command-bar {
  background: #ffffff !important;
  border: 3.5px solid var(--comic-black) !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 0px var(--comic-black) !important;
  padding: 6px 14px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.search-command-bar:focus-within {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 var(--comic-black) !important;
  border-color: var(--comic-blue) !important;
}

/* Inner input: NEVER nested borders or shadows */
.search-command-bar input,
.search-container input,
.search-input,
#searchInput {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--comic-black) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
  height: 44px !important;
  outline: none !important;
  flex: 1 !important;
  width: 100% !important;
}

.search-input::placeholder {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 15.5px !important;
}

/* Comic Magnifying Badge */
.search-icon {
  width: 38px !important;
  height: 38px !important;
  background: var(--comic-yellow) !important;
  border: 2px solid var(--comic-black) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.search-icon svg {
  stroke: var(--comic-black) !important;
  stroke-width: 2.5 !important;
}

/* Comic Arcade Key Shortcut */
.kbd-shortcut {
  background: var(--comic-cream) !important;
  color: var(--comic-black) !important;
  border: 2px solid var(--comic-black) !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  padding: 4px 10px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Live search feedback counter */
#searchResultsCount {
  background: #ffffff !important;
  border: 2.5px solid var(--comic-black) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--comic-black) !important;
  padding: 10px 18px !important;
  margin: 12px 0 4px !important;
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  letter-spacing: 1.2px !important;
  color: var(--comic-black) !important;
}

/* --------------------------------------------------------------------------
   7. FILTER CHIPS & CATEGORY PILLS
   -------------------------------------------------------------------------- */
.intent-chip, .filter-chip, .filter-pill, .trending-filter-pill, .category-chip {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  color: var(--comic-black) !important;
  border: var(--comic-border) !important;
  border-radius: 20px !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  padding: 6px 14px !important;
  transition: all 0.15s ease !important;
}

.intent-chip:hover, .intent-chip.active,
.filter-chip:hover, .filter-chip.active,
.filter-pill:hover, .filter-pill.active,
.trending-filter-pill:hover, .trending-filter-pill.active {
  background: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--comic-shadow-sm) !important;
}

.filter-bar {
  background: var(--comic-white) !important;
  border: var(--comic-border-thick) !important;
  border-radius: 16px !important;
  box-shadow: var(--comic-shadow) !important;
  backdrop-filter: none !important;
}

/* Colored intent dots */
.dot-code { background: var(--comic-blue) !important; border: 1px solid var(--comic-black) !important; }
.dot-image { background: var(--comic-pink) !important; border: 1px solid var(--comic-black) !important; }
.dot-chat { background: var(--comic-green) !important; border: 1px solid var(--comic-black) !important; }
.dot-video { background: var(--comic-red) !important; border: 1px solid var(--comic-black) !important; }
.dot-write { background: var(--comic-orange) !important; border: 1px solid var(--comic-black) !important; }
.dot-audio { background: var(--comic-purple) !important; border: 1px solid var(--comic-black) !important; }

/* --------------------------------------------------------------------------
   8. ALL CARDS: THE CORE COMIC CARD STYLE (Issue 5 Fix)
   -------------------------------------------------------------------------- */
.tool-card,
.best-tool-card,
.card,
.pick-card,
.podium-card,
.spotlight-card,
.news-card,
.review-card-section,
.trending-row-card {
  background: #ffffff !important;
  border: 3px solid var(--comic-black) !important;
  border-radius: 14px !important;  /* Slightly less round */
  box-shadow: 4px 4px 0 rgba(26, 26, 46, 0.7) !important;  /* Slightly transparent shadow */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.tool-card:hover,
.best-tool-card:hover,
.card:hover,
.pick-card:hover,
.podium-card:hover,
.spotlight-card:hover,
.news-card:hover,
.trending-row-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 rgba(26, 26, 46, 0.7) !important;
}

/* Media/Screenshot containers inside cards (Issue 4 Fix: No nested double borders) */
.tool-card-media,
.tool-preview-media,
.blog-featured-hero,
.compare-featured-hero {
  border: none !important;
  border-bottom: 2px solid var(--comic-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0f172a !important;
}

/* Tool Brand Logos (Issue 3 Fix: Light border and soft subtle shadow) */
.tool-brand-logo, .brand-logo-img {
  border: 1.5px solid rgba(26, 26, 46, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
}

/* Description text inside cards and review sections (Issue 7 Fix: Regular & readable) */
.tool-card-desc, .card-desc, .pick-desc, .trending-desc, .tool-description p,
.review-content p, .verdict-text, .tester-verdict {
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: rgb(71, 85, 105) !important;
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   9. BADGES & PILLS (Issue 9 Fix: Lightweight badges, border matches text)
   -------------------------------------------------------------------------- */
.badge, .badge-free, .badge-no-login, .badge-open-source, .badge-daily-credit,
.tag-free, .tag-freemium, .tag-paid {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border: 1.5px solid currentColor !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}

.badge-free, .tag-free, .badge-green {
  background: #c6f6d5 !important;
  color: #14532d !important;
}

.badge-no-login, .tag-freemium, .badge-blue {
  background: #bfdbfe !important;
  color: #1e3a8a !important;
}

.badge-amber, .tag-paid {
  background: #fde68a !important;
  color: #78350f !important;
}

/* --------------------------------------------------------------------------
   10. BUTTONS (LAUNCH / REVIEW / VISIT)
   -------------------------------------------------------------------------- */
.btn-launch, .btn-visit {
  background: var(--comic-blue) !important;
  color: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 10px !important;
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.btn-launch:hover, .btn-visit:hover {
  background: #1d68d8 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--comic-black) !important;
  color: #ffffff !important;
}

.btn-review {
  background: #ffffff !important;
  color: var(--comic-black) !important;
  border: var(--comic-border) !important;
  border-radius: 10px !important;
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.btn-review:hover {
  background: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--comic-black) !important;
}

.btn-upvote, .trending-upvote-btn {
  background: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  font-weight: 800 !important;
}

.btn-upvote:hover, .trending-upvote-btn:hover {
  background: var(--comic-yellow) !important;
  transform: translateY(-1px) !important;
  box-shadow: 4px 4px 0 var(--comic-black) !important;
}

/* --------------------------------------------------------------------------
   11. SPEECH BUBBLE & VERDICT CALLOUTS
   -------------------------------------------------------------------------- */
.tool-verdict {
  background: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--comic-black) !important;
  padding: 14px 18px !important;
  position: relative !important;
}

.speech-bubble,
.hero-editorial-subtitle {
  background: #ffffff !important;
  border: var(--comic-border-thick) !important;
  border-radius: 24px !important;
  padding: 18px 26px !important;
  box-shadow: var(--comic-shadow) !important;
  position: relative !important;
  display: inline-block !important;
  max-width: 660px !important;
  margin-top: 14px !important;
  margin-bottom: 34px !important;
  color: var(--comic-black) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.speech-bubble::after,
.hero-editorial-subtitle::after {
  content: '' !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 48px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 15px solid transparent !important;
  border-right: 15px solid transparent !important;
  border-top: 20px solid #ffffff !important;
  filter: drop-shadow(0 3px 0 var(--comic-black)) !important;
}

.speech-bubble.bubble-center::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* --------------------------------------------------------------------------
   12. COMPARE SPLIT HEROES & VS BADGES
   -------------------------------------------------------------------------- */
.compare-split-hero {
  border: var(--comic-border-thick) !important;
  border-radius: 20px !important;
  box-shadow: var(--comic-shadow) !important;
  overflow: hidden !important;
  background: var(--comic-white) !important;
}

.vs-badge, .compare-split-grid div[style*="border-radius: 50%"] {
  font-family: var(--font-heading) !important;
  font-size: 26px !important;
  background: var(--comic-yellow) !important;
  border: 3px solid var(--comic-black) !important;
  color: var(--comic-red) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
}

/* --------------------------------------------------------------------------
   13. TABLES & TECHNICAL MATRICES
   -------------------------------------------------------------------------- */
table {
  border: var(--comic-border-thick) !important;
  border-radius: 16px !important;
  box-shadow: var(--comic-shadow) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

th {
  background: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 3px solid var(--comic-black) !important;
  border-right: 2px solid var(--comic-black) !important;
  padding: 14px 18px !important;
}

td {
  border-bottom: 2px solid var(--comic-black) !important;
  border-right: 2px solid #e2e8f0 !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
}

tr:hover td {
  background: #fffbeb !important;
}

/* --------------------------------------------------------------------------
   14. NEWSLETTER & SUBMIT CTA BANNERS
   -------------------------------------------------------------------------- */
.newsletter-bar, .newsletter-box {
  background: var(--comic-blue) !important;
  border: var(--comic-border-thick) !important;
  border-radius: 22px !important;
  box-shadow: var(--comic-shadow) !important;
  color: #ffffff !important;
}

.newsletter-bar-input, .newsletter-input, .newsletter-form input {
  background: #ffffff !important;
  border: var(--comic-border) !important;
  border-radius: 12px !important;
  color: var(--comic-black) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
}

.newsletter-bar-btn, .newsletter-btn, .newsletter-form button {
  background: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  border: var(--comic-border) !important;
  border-radius: 12px !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.newsletter-bar-btn:hover, .newsletter-btn:hover, .newsletter-form button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--comic-black) !important;
}

.submit-cta-banner, .submit-box {
  background: var(--comic-green) !important;
  border: var(--comic-border-thick) !important;
  border-radius: 22px !important;
  box-shadow: var(--comic-shadow) !important;
  color: #ffffff !important;
}

.submit-cta-banner h3, .submit-cta-banner h4, .submit-box h2 {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 var(--comic-black) !important;
}

.submit-cta-banner p, .submit-box p {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   15. FAQ ACCORDION ITEMS
   -------------------------------------------------------------------------- */
.faq-section, .faq-item {
  border: var(--comic-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--comic-shadow-sm) !important;
  background: #ffffff !important;
}

.faq-item:hover {
  transform: translateX(4px) !important;
  box-shadow: var(--comic-shadow) !important;
}

.faq-item h4 {
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  letter-spacing: 0.5px !important;
}

/* --------------------------------------------------------------------------
   16. FOOTER: COMIC BLACK & YELLOW
   -------------------------------------------------------------------------- */
.app-footer, .footer {
  background: var(--comic-black) !important;
  color: #ffffff !important;
  border-top: 6px solid var(--comic-yellow) !important;
  padding: 48px 0 28px !important;
}

.app-footer h5, .app-footer h4, .footer h5, .footer h4 {
  font-family: var(--font-heading) !important;
  color: var(--comic-yellow) !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5) !important;
}

.app-footer a, .footer a {
  color: #cbd5e1 !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.app-footer a:hover, .footer a:hover {
  color: var(--comic-yellow) !important;
  transform: translateX(2px) !important;
}

.footer-bottom {
  border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   17. COMIC DECORATIONS & ACTION BURSTS (POW / ZAP / BURST)
   -------------------------------------------------------------------------- */
.comic-pow {
  font-family: var(--font-heading) !important;
  font-size: 42px !important;
  letter-spacing: 3px !important;
  color: var(--comic-red) !important;
  text-shadow: 3px 3px 0 var(--comic-yellow), 4px 4px 0 var(--comic-black) !important;
  transform: rotate(-10deg) !important;
  display: inline-block !important;
  pointer-events: none !important;
}

.comic-zap {
  font-family: var(--font-heading) !important;
  font-size: 34px !important;
  color: var(--comic-blue) !important;
  text-shadow: 2px 2px 0 var(--comic-yellow), 3px 3px 0 var(--comic-black) !important;
  transform: rotate(8deg) !important;
  display: inline-block !important;
  pointer-events: none !important;
}

.burst {
  display: inline-block !important;
  position: relative !important;
  padding: 8px 20px !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 2px !important;
}

.burst::before {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  background: var(--comic-yellow) !important;
  clip-path: polygon(50% 0%, 61% 15%, 78% 5%, 72% 22%, 95% 22%, 80% 35%, 100% 50%, 80% 55%, 95% 72%, 72% 65%, 78% 88%, 61% 75%, 50% 95%, 39% 75%, 22% 88%, 28% 65%, 5% 72%, 20% 55%, 0% 50%, 20% 35%, 5% 22%, 28% 22%, 22% 5%, 39% 15%) !important;
  z-index: -1 !important;
}

/* --------------------------------------------------------------------------
   18. MOBILE RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body {
    background-size: 15px 15px !important;
  }
  .hero-section, .hero-editorial, .hero {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    margin: 12px auto 20px !important;
  }
  .tool-card, .best-tool-card, .review-card-section {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .stat-number {
    font-size: 26px !important;
  }
}

@media (max-width: 900px) {
  .comic-pow, .comic-zap {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   19. MARQUEE TICKER & CATEGORIES RIBBON (Issue 10 Fix)
   -------------------------------------------------------------------------- */
.marquee-ribbon,
.marquee-track-container,
.category-scroll-strip,
.categories-marquee {
  background: var(--comic-black) !important;
  border-top: var(--comic-border-thick) !important;
  border-bottom: var(--comic-border-thick) !important;
  padding: 12px 0 !important;
}

.marquee-link,
.category-scroll-strip a,
.categories-marquee a {
  color: var(--comic-yellow) !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  letter-spacing: 1.5px !important;
  font-weight: 400 !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.marquee-link:hover,
.category-scroll-strip a:hover,
.categories-marquee a:hover {
  color: var(--comic-white) !important;
  transform: scale(1.05) !important;
}

.marquee-count {
  font-family: var(--font-accent) !important;
  color: var(--comic-blue) !important;
  font-size: 13px !important;
  margin-left: 4px !important;
}