/* ==============================================
   HOMEPAGE VISUAL REDESIGN — CSS Override
   Inspired by: Sixgun.com.au (clean, breathable, bold)
   
   RULES:
   - Zero content/HTML changes
   - Zero SEO element changes
   - No layout shift (CLS safe)
   - Font sizes ≥16px mobile, tap targets ≥48px
   - No heavy animations
   - Lean CSS, no custom font imports beyond Google Fonts
   
   LOAD THIS FILE AFTER index-modern-styles.css
   ============================================== */

/* --- FONT SWAP ---
   Replace Outfit/DM Sans with Sora (geometric, modern, agency feel)
   Add this <link> to <head> alongside existing font loads:
   <link rel="preload" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap"></noscript>
*/

/* ==========================================
   1. COLOR PALETTE OVERRIDE
   From: blue (#3b82f6) + green (#10b981) + yellow
   To:   bold red (#E63946) + deep charcoal (#111827) + clean white
   ========================================== */

:root {
  /* New primary: bold red (Sixgun-inspired) */
  --primary-50: #fef2f2;
  --primary-100: #fee2e2;
  --primary-500: #E63946;
  --primary-600: #DC2626;
  --primary-700: #B91C1C;
  --primary-800: #991B1B;
  --primary-900: #7F1D1D;

  /* Accent stays neutral — no second bright color */
  --accent-500: #E63946;
  --accent-600: #DC2626;

  /* Tighten grays for crisper contrast */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-800: #1A1A1A;
  --gray-900: #111111;

  /* Dark tones for hero/footer */
  --dark: #111111;
  --dark-lighter: #1A1A1A;
  --dark-slate: #222222;

  /* Typography swap */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Reduce shadow intensity across the board */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.08);

  /* Bigger section spacing for breathability */
  --space-16: 5rem;
  --space-20: 6.5rem;
}


/* ==========================================
   2. GLOBAL TYPOGRAPHY CLEANUP
   ========================================== */

body {
  font-family: var(--font-body);
  color: #333;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #111;
}

/* Reduce default h2 size slightly, left-align feel */
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 600;
}

p {
  line-height: 1.75;
  color: #555;
}

a {
  color: var(--primary-600);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--primary-700);
}


/* ==========================================
   3. SECTION BREATHING ROOM
   ========================================== */

.section {
  padding: 100px 0 !important;
}

.container {
  max-width: 1140px;
}

@media (max-width: 768px) {
  .section {
    padding: 64px 0 !important;
  }
}


/* ==========================================
   4. KILL ALL SVG DOT PATTERN BACKGROUNDS
   These are the biggest "AI template" tell.
   ========================================== */

/* Remove all pseudo-element decorative backgrounds */
section > div[style*="background: url('data:image/svg+xml"],
div[style*="background: url('data:image/svg+xml"] {
  background: none !important;
}

/* Override inline style patterns on sections */
section[style*="background: url"],
section div[style*="background: url('data:image/svg+xml"] {
  background-image: none !important;
}


/* ==========================================
   5. HEADER / HERO — Dark with bold red circles
   Inspired by Sixgun's signature red blobs
   ========================================== */

.header {
  background: #111 !important;
  padding: 72px 0 88px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Angled red accent stripe — architectural, not decorative */
.header::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  width: 120% !important;
  height: 40% !important;
  background: #E63946 !important;
  border-radius: 0 !important;
  top: -15% !important;
  right: -10% !important;
  left: auto !important;
  bottom: auto !important;
  transform: rotate(-6deg) !important;
  opacity: 0.1 !important;
  filter: none !important;
  z-index: 0 !important;
}

.header::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(230,57,70,0.3), transparent) !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 0 !important;
}

.header-content {
  gap: 60px;
  position: relative !important;
  z-index: 2 !important;
}

/* Profile badge — cleaner */
.profile-badge {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: none !important;
}

/* Hero headings */
.hero-h2-main {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

.hero-h2-main .highlight {
  color: #E63946 !important;
}

.hero-h3-sub {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 400 !important;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem) !important;
  line-height: 1.6 !important;
}

.hero-h4-desc {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 400 !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
}

/* Trust stats bar — force red numbers to be visible */
.header-text div[style*="display: flex; gap: 24px"] {
  gap: 40px !important;
}

/* Target the stat numbers by their inline font-size */
.header-text div[style*="font-size: 1.75rem; font-weight: 800; color: #60a5fa"],
.header-text div[style*="font-size: 1.75rem; font-weight: 800; color: #34d399"],
.header-text div[style*="font-size: 1.75rem; font-weight: 800; color: #fbbf24"] {
  color: #fff !important;
}

/* Target the stat labels */
.header-text div[style*="font-size: 0.75rem; color: rgba(255,255,255,0.6)"] {
  color: rgba(255,255,255,0.5) !important;
}

/* LinkedIn button — red accent */
.linkedin-button {
  background: #E63946 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}
.linkedin-button:hover {
  background: #c5303c !important;
  transform: none !important;
  color: white !important;
}

/* Form card — cleaner, no heavy shadow */
.form-card {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  border: none !important;
  padding: 2.5rem !important;
}

.form-header h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Form inputs — cleaner */
.form-group input {
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease !important;
}
.form-group input:focus {
  border-color: #E63946 !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.1) !important;
}

/* Submit button — flat red */
.form-submit-btn {
  background: #E63946 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}
.form-submit-btn:hover {
  background: #c5303c !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ==========================================
   6. CTA BUTTONS — Flat red, no gradients
   ========================================== */

.cta-button {
  background: #E63946 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: background 0.2s ease !important;
  letter-spacing: -0.01em !important;
}
.cta-button:hover {
  background: #c5303c !important;
  transform: none !important;
  box-shadow: none !important;
  color: white !important;
}

.cta-button-outline {
  border-color: #E63946 !important;
  color: #E63946 !important;
}
.cta-button-outline:hover {
  background: #E63946 !important;
  color: white !important;
}


/* ==========================================
   7. BREADCRUMBS — Minimal
   ========================================== */

.breadcrumbs {
  background: #FAFAFA !important;
  border-bottom: 1px solid #eee !important;
  padding: 12px 0 !important;
}


/* ==========================================
   8. STICKY CTA — Red accent
   ========================================== */

a#stickyCTA.sticky-cta {
  background: #E63946 !important;
}
a#stickyCTA.sticky-cta:hover {
  background: #c5303c !important;
}


/* ==========================================
   9. SECTION BACKGROUNDS — Clean, flat
   Strip gradients. Alternate white / light gray.
   ========================================== */

/* Remove all inline gradient backgrounds on sections */
section[style*="background: linear-gradient"] {
  background: #fff !important;
}

/* Specifically target alternating sections for subtle contrast */
#top-rankings {
  background: #F7F7F8 !important;
}

#calculator {
  background: #111 !important;
}

#real {
  background: #fff !important;
}

#services {
  background: #F7F7F8 !important;
}

#pricing {
  background: #fff !important;
}

#faq {
  background: #F7F7F8 !important;
}

#contact {
  background: #111 !important;
}


/* ==========================================
   10. SERVICE CARDS — Sixgun editorial style
   No card backgrounds, top border dividers,
   2-column grid, emoji icons hidden
   ========================================== */

/* Services grid — 2 columns like Sixgun */
#services .grid-3 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

/* Service card — no card, just top border divider */
#services .service-card {
  background: transparent !important;
  border: none !important;
  border-top: 2px solid #222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2rem 1.5rem 2.5rem 0 !important;
  transition: none !important;
}

/* Odd cards (right column) get left padding instead */
#services .service-card:nth-child(even) {
  padding: 2rem 0 2.5rem 1.5rem !important;
  border-left: none !important;
}

#services .service-card:hover {
  border-color: #222 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}

/* Hide emoji icons — these are the biggest AI-generated tell */
#services .service-card .service-icon {
  display: none !important;
}

/* Service card headings — bolder, larger */
#services .service-card h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.02em !important;
}

/* Service card description */
#services .service-card p {
  color: #555 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

#services .service-card-clickable {
  text-decoration: none !important;
}

/* "Learn More" link — red, understated */
#services .service-link-arrow {
  color: #E63946 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Services section heading */
#services h2 {
  text-align: left !important;
  margin-bottom: 1rem !important;
}

#services > .container > p {
  text-align: left !important;
  max-width: 680px !important;
  margin-left: 0 !important;
  margin-bottom: 3rem !important;
}

/* Mobile: single column */
@media (max-width: 768px) {
  #services .grid-3 {
    grid-template-columns: 1fr !important;
  }

  #services .service-card,
  #services .service-card:nth-child(even) {
    padding: 1.5rem 0 2rem 0 !important;
  }
}

/* General service-card rule (for cards outside #services) */
.service-card {
  background: #fff !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 2rem !important;
  transition: border-color 0.2s ease !important;
}
.service-card:hover {
  border-color: #ccc !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  transform: none !important;
}


/* ==========================================
   11. COMPARISON CARDS — Simplified
   ========================================== */

.comparison-card-modern {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
  transition: box-shadow 0.2s ease !important;
}
.comparison-card-modern:hover {
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

.vs-divider {
  background: #E63946 !important;
  box-shadow: 0 4px 16px rgba(230,57,70,0.3) !important;
}


/* ==========================================
   12. RANKING PROOF SECTION — Clean up
   ========================================== */

/* Rankings card — dark flat, no gradient noise */
#top-rankings div[style*="background: linear-gradient(135deg, var(--primary-700)"] {
  background: #1A1A1A !important;
}

/* Ranking list items — simpler hover */
#top-rankings li[style*="backdrop-filter"] {
  backdrop-filter: none !important;
}

/* Ranking badges — red instead of green */
#top-rankings span[style*="background: linear-gradient(135deg, var(--accent-500)"] {
  background: #E63946 !important;
  box-shadow: none !important;
}


/* ==========================================
   13. ROI CALCULATOR — Clean dark section
   ========================================== */

#calculator {
  background: #111 !important;
}

/* Main result card — red accent instead of yellow gradient */
#calculator div[style*="background: linear-gradient(135deg, #fbbf24"] {
  background: #E63946 !important;
  box-shadow: 0 8px 24px rgba(230,57,70,0.2) !important;
}

/* Slider thumb — red */
.roi-slider-enhanced::-webkit-slider-thumb {
  background: #E63946 !important;
  box-shadow: 0 2px 8px rgba(230,57,70,0.4) !important;
}
.roi-slider-enhanced::-moz-range-thumb {
  background: #E63946 !important;
  box-shadow: 0 2px 8px rgba(230,57,70,0.4) !important;
}

/* Toggle cards */
.toggle-card.active {
  background: rgba(230,57,70,0.15) !important;
  border-color: #E63946 !important;
  box-shadow: 0 0 0 2px rgba(230,57,70,0.2) !important;
}


/* ==========================================
   14. PRICING CARDS — Clean, breathable
   ========================================== */

#pricing .service-card {
  border: 1px solid #E5E5E5 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* Popular card highlight — red border */
#pricing .service-card[style*="border: 3px solid var(--primary-500)"] {
  border: 2px solid #E63946 !important;
  box-shadow: 0 4px 20px rgba(230,57,70,0.1) !important;
}

/* Popular badge */
#pricing div[style*="background: linear-gradient(135deg, var(--primary-500), var(--primary-600))"] {
  background: #E63946 !important;
  box-shadow: none !important;
}


/* ==========================================
   15. FAQ SECTION — Gmail-style 2-column layout
   Left: questions with line separators (no cards)
   Right: "Have more questions?" CTA card
   ========================================== */

#faq {
  background: #F7F7F8 !important;
}

/* Make FAQ container a 2-column grid */
#faq > .container {
  max-width: 900px !important;
}

/* Heading spans full width */
#faq > .container > h2 {
  grid-column: 1 / -1 !important;
  text-align: left !important;
  margin-bottom: 0.5rem !important;
}

/* The br after h2 */
#faq > .container > br {
  display: none !important;
}

/* FAQ accordion — left column, no cards */
.faq-accordion {
  grid-column: 1 !important;
}

.faq-accordion .faq-item {
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.faq-accordion .faq-item:first-child {
  border-top: 1px solid #ddd !important;
}

.faq-accordion .faq-item.active {
  box-shadow: none !important;
  transform: none !important;
  border-color: #ddd !important;
}

.faq-accordion .faq-item h3 {
  background: transparent !important;
  color: #111 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 1.25rem 0 !important;
  border-radius: 0 !important;
}

.faq-accordion .faq-item h3:hover {
  background: transparent !important;
  color: #E63946 !important;
}

.faq-accordion .faq-item h3::after {
  color: #bbb !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
}

.faq-accordion .faq-item.active h3 {
  border-bottom: none !important;
  color: #111 !important;
  font-weight: 600 !important;
}

.faq-accordion .faq-item p {
  padding: 0 0 1.25rem 0 !important;
  color: #666 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* Mobile: FAQ adjustments */
@media (max-width: 768px) {
  .faq-accordion .faq-item h3 {
    font-size: 0.95rem !important;
  }
}


/* ==========================================
   16. FOOTER — Clean dark
   ========================================== */

.footer {
  background: #111 !important;
}

.footer h4 {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
}

.footer-links a {
  color: rgba(255,255,255,0.6) !important;
  transition: color 0.2s ease !important;
}
.footer-links a:hover {
  color: #fff !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}


/* ==========================================
   17. CONTACT SECTION — Dark, simple
   ========================================== */

#contact {
  background: #111 !important;
  text-align: center;
}

#contact h2 {
  color: #fff !important;
}

#contact p {
  color: rgba(255,255,255,0.7) !important;
}

#contact .cta-button {
  background: #E63946 !important;
}


/* ==========================================
   18. KEY RESULTS GRID — Simplify borders
   ========================================== */

.key-results-grid > div {
  border-color: #E5E5E5 !important;
  box-shadow: none !important;
  border-width: 1px !important;
  border-radius: 10px !important;
}

/* Big numbers — red instead of blue */
.key-results-grid div[style*="font-size: 38px"] {
  color: #E63946 !important;
}


/* ==========================================
   19. ROI HIGHLIGHT BOX — Red accent
   ========================================== */

div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"] {
  background: #fef2f2 !important;
  border-color: #E63946 !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"] div[style*="color: #1e40af"] {
  color: #991B1B !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"] div[style*="color: #1e3a8a"] {
  color: #E63946 !important;
}


/* ==========================================
   20. CASE STUDY CTA BUTTONS — Red
   ========================================== */

a[style*="background: linear-gradient(135deg, #3b82f6, #2563eb)"] {
  background: #E63946 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* Section badges — red */
div[style*="background: linear-gradient(135deg, #3b82f6, #2563eb)"][style*="border-radius: 50px"] {
  background: #E63946 !important;
  box-shadow: none !important;
}

/* Green "featured" badges — also red for consistency */
div[style*="background: linear-gradient(135deg, var(--accent-500)"][style*="border-radius: 9999px"] {
  background: #E63946 !important;
  box-shadow: none !important;
}


/* ==========================================
   21. B2B SECTION — Clean up
   ========================================== */

/* Industry cards — simpler hover */
div[style*="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px"] {
  transition: border-color 0.2s ease !important;
}

/* Yellow case study box — use light red instead */
div[style*="background: linear-gradient(135deg, #fef3c7"] {
  background: #fef2f2 !important;
  border-color: #E63946 !important;
}

div[style*="background: linear-gradient(135deg, #78350f"] {
  background: #E63946 !important;
}


/* ==========================================
   22. GRID LAYOUTS — Slightly wider gaps
   ========================================== */

.grid-2 {
  gap: 36px !important;
}

.grid-3 {
  gap: 24px !important;
}


/* ==========================================
   23. PROGRESS BAR — Red
   ========================================== */

.progress-indicator {
  background: #E63946 !important;
}


/* ==========================================
   24. WHATSAPP BUTTON — Keep green (brand color)
   ========================================== */

/* Intentionally unchanged — green is WhatsApp's brand */


/* ==========================================
   25. TESTIMONIAL CARD BACKGROUNDS
   ========================================== */

.testimonial-card {
  background: #F7F7F8 !important;
  border: 1px solid #E5E5E5 !important;
  box-shadow: none !important;
}


/* ==========================================
   26. LIGHTBOX — Cleaner
   ========================================== */

.lightbox {
  background: rgba(0,0,0,0.85) !important;
}


/* ==========================================
   27. REMOVE EXCESSIVE HOVER TRANSFORMS
   Cards and elements shouldn't float up on hover
   — this is the #1 "template" tell.
   ========================================== */

.service-card:hover,
.comparison-card-modern:hover,
.faq-accordion .faq-item.active {
  transform: none !important;
}


/* ==========================================
   28. INLINE STYLE OVERRIDES
   ========================================== */

/* All inline blue links → red */
a[style*="color: #2563eb"],
a[style*="color:#2563eb"] {
  color: #E63946 !important;
}


/* ==========================================
   31. KILL PILL BADGES ABOVE SECTIONS
   The colored pill/eyebrow label is the #1
   AI-generated template tell on the web.
   Hide them — the headings speak for themselves.
   ========================================== */

div[style*="border-radius: 50px"][style*="background: linear-gradient"] {
  display: none !important;
}

/* Also catch the inline pill badges with uppercase text */
div[style*="border-radius: 50px"][style*="text-transform: uppercase"] {
  display: none !important;
}


/* ==========================================
   32. BEFORE/AFTER COMPARISON — Strip template feel
   ========================================== */

/* Remove the VS circle divider */
.vs-divider {
  display: none !important;
}

/* Comparison cards — clean, no colored theming */
.comparison-card-modern {
  border: 1px solid #E5E5E5 !important;
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 2.5rem !important;
}

.comparison-card-before {
  border-color: #E5E5E5 !important;
  background: #fff !important;
}

.comparison-card-after {
  border-color: #E5E5E5 !important;
  background: #fff !important;
}

/* Remove colored top bars on comparison cards */
.comparison-card-before::before,
.comparison-card-after::before {
  display: none !important;
}

/* Comparison badges — muted, not colored */
.badge-before {
  background: #F5F5F5 !important;
  color: #555 !important;
}

.badge-after {
  background: #F5F5F5 !important;
  color: #111 !important;
}

/* Comparison icons — all same neutral gray, no red/green */
.icon-before {
  background: #F5F5F5 !important;
  color: #999 !important;
}

.icon-after {
  background: #F5F5F5 !important;
  color: #111 !important;
}

/* Comparison text — remove red/green coloring */
.comparison-text-before {
  color: #666 !important;
  font-weight: 500 !important;
}

.comparison-text-after {
  color: #111 !important;
  font-weight: 600 !important;
}

.comparison-title {
  font-size: 1.5rem !important;
}


/* ==========================================
   33. KEY RESULTS / STAT BOXES — Borderless
   ========================================== */

.key-results-grid > div,
div[style*="border: 2px solid #dbeafe"] {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 1.25rem 0 !important;
  border-bottom: 1px solid #eee !important;
}

div[style*="font-size: 38px; font-weight: 900; color: #3b82f6"] {
  color: #111 !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"][style*="border"] {
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
  border-left: 3px solid #E63946 !important;
}

div[style*="font-size: 42px; font-weight: 900; color: #1e3a8a"] {
  color: #E63946 !important;
}

div[style*="color: #1e40af"] {
  color: #555 !important;
}

div[style*="font-size: 14px; color: #1e40af; font-weight: 700; text-transform: uppercase"] {
  text-transform: none !important;
  font-weight: 600 !important;
  color: #666 !important;
  letter-spacing: 0 !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe); border-left: 4px solid #3b82f6"] {
  background: #F5F5F5 !important;
  border-left: 3px solid #E63946 !important;
}

div[style*="background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 50%"][style*="width: 60px"] {
  background: #111 !important;
}

.key-results-grid {
  gap: 0 !important;
}


/* ==========================================
   34. RANKINGS SECTION — Clean up
   ========================================== */

#top-rankings div[style*="background: linear-gradient(135deg, var(--accent-500)"][style*="border-radius: 9999px"] {
  display: none !important;
}

#top-rankings span[style*="background: linear-gradient(135deg, var(--accent-500)"] {
  background: #E63946 !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 0.85rem !important;
}

#top-rankings li[style*="padding: var(--space-4)"] {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
}

#top-rankings div[style*="height: 4px; background: linear-gradient"] {
  background: #E63946 !important;
}

#top-rankings div[style*="border: 2px solid var(--primary-300)"] {
  border-color: #E5E5E5 !important;
  border-width: 1px !important;
}

#top-rankings p[style*="color: var(--primary-600)"] {
  color: #666 !important;
}


/* ==========================================
   35. B2B SECTION — Strip emoji/icon clutter
   ========================================== */

div[style*="font-size: 24px; margin-bottom: 8px"] {
  display: none !important;
}

span[style*="background: linear-gradient"][style*="border-radius: 50%"][style*="width: 40px; height: 40px"] {
  display: none !important;
}

span[style*="background: linear-gradient(135deg, #10b981, #059669)"][style*="border-radius: 50%"][style*="width: 28px"] {
  background: #222 !important;
}

div[style*="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 15px 12px"] {
  padding: 14px 16px !important;
  border-radius: 6px !important;
}

div[style*="font-size: 42px; font-weight: 900; color: #1e3a8a"][style*="text-align: center"] {
  color: #E63946 !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff"][style*="border: 2px solid #93c5fd"] {
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
}

div[style*="background: linear-gradient(135deg, #fef3c7"] {
  background: #fff !important;
  border: 1px solid #E5E5E5 !important;
}

div[style*="color: #78350f"] {
  color: #333 !important;
}

div[style*="color: #92400e"] {
  color: #111 !important;
}

div[style*="background: rgba(255, 255, 255, 0.6); border-radius: 10px; padding: 15px"] {
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
}

div[style*="background: linear-gradient(135deg, #78350f"] {
  background: #E63946 !important;
  border-radius: 8px !important;
}

div[style*="background: linear-gradient(135deg, #eff6ff"][style*="border-radius: 20px"],
div[style*="background: linear-gradient(135deg, #eff6ff"][style*="border-radius: var(--radius-xl)"] {
  background: #F7F7F8 !important;
  border-color: #E5E5E5 !important;
}


/* ==========================================
   36. PRICING — Cleaner
   ========================================== */

/* "MOST POPULAR" badge — more subtle */
#pricing div[style*="position: absolute; top: -15px"] {
  background: #E63946 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  padding: 6px 16px !important;
}

/* Popular card — subtle red accent, not heavy */
#pricing .service-card[style*="border: 3px solid var(--primary-500)"] {
  border: 1px solid #E5E5E5 !important;
  border-top: 3px solid #E63946 !important;
  box-shadow: none !important;
}

/* "Not sure which package" box */
#pricing div[style*="background: linear-gradient(135deg, var(--primary-50)"] {
  background: #F7F7F8 !important;
  border-color: #E5E5E5 !important;
}


/* ==========================================
   37. CTA BOXES — All neutral background
   Strip the colored tint boxes (blue, yellow, green)
   ========================================== */

/* Blue-tinted CTA boxes */
div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"] {
  background: #F7F7F8 !important;
  border-color: #E5E5E5 !important;
}

/* Blue-bordered CTA boxes */
div[style*="border: 2px solid #93c5fd"] {
  border-color: #E5E5E5 !important;
}

/* Yellow/amber tinted boxes */
div[style*="background: linear-gradient(135deg, #fef3c7, #fde68a)"],
div[style*="background: #fef3c7"] {
  background: #F7F7F8 !important;
  border-color: #E5E5E5 !important;
}

/* Green tinted boxes */
div[style*="background: linear-gradient(135deg, #d1fae5"] {
  background: #F5F5F5 !important;
}


/* ==========================================
   38. CASE STUDY SECTION — Cleaner cards
   ========================================== */

/* Case study image cards — subtle border */
#real .service-card {
  border: 1px solid #E5E5E5 !important;
  border-radius: 10px !important;
  background: #fff !important;
}

/* Blog link cards — cleaner hover */
#real a[style*="background: white; padding"] {
  border-color: #E5E5E5 !important;
}

/* Case study CTA buttons */
#real a[style*="background: linear-gradient(135deg, #3b82f6"] {
  background: #E63946 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Blog category labels — red */
#real div[style*="color: var(--primary-600); font-weight: 600"] {
  color: #E63946 !important;
}


/* ==========================================
   39. GLOBAL — Kill all remaining hover transforms
   ========================================== */

*[onmouseover*="translateY"],
*[onmouseover*="scale"] {
  /* Can't override JS-set inline styles with CSS alone,
     but these selectors catch common patterns */
}

/* Broader transform reset for common card patterns */
div[style*="transition: all 0.3s"]:hover,
a[style*="transition: all 0.3s"]:hover {
  transform: none !important;
}


/* ==========================================
   40. TESTIMONIAL QUOTE — Cleaner
   ========================================== */

/* Quote mark decoration — subtler */
div[style*="font-size: 80px; color: rgba(59, 130, 246, 0.08)"] {
  color: rgba(0,0,0,0.04) !important;
}

/* Testimonial blue highlight box → neutral */
div[style*="background: linear-gradient(135deg, #eff6ff, #dbeafe); border-left: 4px solid #3b82f6"] {
  background: #F7F7F8 !important;
  border-left-color: #E63946 !important;
}

/* Author avatar circle — red instead of blue */
div[style*="background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 50%; display: flex"][style*="width: 60px"] {
  background: #E63946 !important;
}


/* ==========================================
   41. SECTION HEADINGS — Left-align where appropriate
   Centered headings everywhere = template feel.
   Mix of left and center is more editorial.
   ========================================== */

/* Case study, B2B, and proof sections — left align */
#real h2,
#top-rankings h2 {
  text-align: left !important;
}

#real > .container > p[style*="text-align: center"],
#top-rankings > .container > div > p {
  text-align: left !important;
  margin-left: 0 !important;
}


/* ==========================================
   42. "SHOW MORE" BUTTON — Subtle
   ========================================== */

#toggleCaseStudies {
  color: #E63946 !important;
  font-weight: 600 !important;
}


/* ==========================================
   29. MOBILE REFINEMENTS
   ========================================== */

@media (max-width: 768px) {
  .header {
    padding: 48px 0 56px !important;
  }

  .section {
    padding: 56px 0 !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  .form-card {
    padding: 1.75rem !important;
  }

  /* Mobile sticky CTA — red */
  a#stickyCTA.sticky-cta {
    background: #E63946 !important;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 48px 0 !important;
  }

  h2 {
    font-size: 1.35rem !important;
  }
}


/* ==========================================
   30. REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}