/* ═══════════════════════════════════════════════════ */

/* On laptop and smaller: make absolute containers flow normally */
@media (max-width: 1366px) {
  .elementor-element-1977f2a,
  .elementor-element-6da9c2cc {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  
  /* Hero parent: ensure column flow */
  .elementor-element-d6ebf39 {
    flex-direction: column !important;
  }
  
  /* Hero child containers: full width */
  .elementor-element-d6ebf39 > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* AI card inner: row on laptop, column on mobile */
  .elementor-element-6da9c2cc {
    flex-direction: row !important;
    max-width: 600px !important;
  }
  
  /* Counters row: side by side */
  .elementor-element-1977f2a {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 40px !important;
    max-width: 500px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-6da9c2cc {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  
  .elementor-element-1977f2a {
    justify-content: center !important;
    max-width: 100% !important;
  }
  
  /* Reduce hero padding on mobile */
  .elementor-element-d6ebf39 {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* HERO: Clean centered layout                        */
/* ═══════════════════════════════════════════════════ */
.elementor-element-d6ebf39 {
  text-align: center;
}

.elementor-element-d6ebf39 .elementor-widget-heading,
.elementor-element-d6ebf39 .elementor-widget-text-editor {
  text-align: center !important;
}

/* Counters row */
.elementor-element-1977f2a {
  justify-content: center !important;
  gap: 48px !important;
}

/* AI card */
.elementor-element-6da9c2cc {
  max-width: 600px;
  margin: 24px auto 0 !important;
}

/* Buttons stay side by side */
.elementor-element-54067cdd {
  justify-content: center !important;
}

@media (max-width: 767px) {
  .elementor-element-6da9c2cc {
    max-width: 100%;
  }
  
  .elementor-element-1977f2a {
    gap: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* LOGO CAROUSEL: Infinite scrolling + visibility     */
/* ═══════════════════════════════════════════════════ */

/* Make ALL logo images bright/white on dark background */
#vi-logo-carousel .elementor-widget-image img,
.vi-carousel-logo img,
#vi-logo-carousel img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}

#vi-logo-carousel .elementor-widget-image img:hover,
.vi-carousel-logo img:hover,
#vi-logo-carousel img:hover {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}

/* Carousel container */
#vi-logo-carousel {
  overflow: hidden !important;
  position: relative;
  padding: 20px 0 !important;
}

/* The inner track that slides */
#vi-logo-carousel > .e-con-inner,
#vi-logo-carousel > .e-con {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 60px !important;
  animation: vi-logo-scroll 12s linear infinite !important;
  width: max-content !important;
}

/* Duplicate logos via CSS for seamless loop effect */
#vi-logo-carousel::after {
  content: "";
  display: block;
}

/* Smooth infinite scroll animation */
@keyframes vi-logo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
#vi-logo-carousel:hover > .e-con-inner,
#vi-logo-carousel:hover > .e-con {
  animation-play-state: paused !important;
}

/* Fade edges for smooth appearance */
#vi-logo-carousel::before,
#vi-logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

#vi-logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, #0F172A 0%, transparent 100%);
}

#vi-logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, #0F172A 0%, transparent 100%);
}

/* Logo images should not shrink */
#vi-logo-carousel .elementor-widget-image,
#vi-logo-carousel .elementor-widget {
  flex-shrink: 0 !important;
  min-width: 100px;
}

@media (max-width: 767px) {
  #vi-logo-carousel > .e-con-inner,
  #vi-logo-carousel > .e-con {
    gap: 40px !important;
    animation-duration: 8s !important;
  }
  
  #vi-logo-carousel .elementor-widget-image img,
  #vi-logo-carousel img {
    max-height: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* MOBILE SECTION FIXES                               */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* All row sections stack on tablet/mobile */
  #vi-stats,
  #vi-features,
  #vi-services,
  #vi-how-it-works,
  #vi-testimonials,
  #vi-tech-features {
    flex-direction: column !important;
  }
  
  #vi-stats > .e-con,
  #vi-features > .e-con,
  #vi-services > .e-con,
  #vi-how-it-works > .e-con,
  #vi-testimonials > .e-con,
  #vi-tech-features > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* Stack all child containers on mobile */
  #vi-stats .e-con,
  #vi-features .e-con,
  #vi-services .e-con,
  #vi-how-it-works .e-con,
  #vi-tech-features .e-con {
    width: 100% !important;
    flex-direction: column !important;
  }
  
  /* Images in stats section: center and limit size */
  #vi-stats .elementor-widget-image img {
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
  }
  
  #vi-stats .elementor-widget-image {
    text-align: center !important;
  }
  
  /* Stats text: center on mobile */
  #vi-stats .elementor-widget-heading,
  #vi-stats .elementor-widget-text-editor {
    text-align: center !important;
  }
  
  /* Feature cards: full width with margin */
  #vi-features .e-con > .e-con,
  #vi-services .e-con > .e-con {
    margin-bottom: 24px;
  }
  
  /* Pricing cards */
  #vi-pricing .e-con > .e-con {
    width: 100% !important;
    margin-bottom: 24px;
  }
  
  /* Tech features grid: single column */
  #vi-tech-features > .e-con {
    min-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* LOGO CAROUSEL: Fast scroll + high visibility       */
/* ═══════════════════════════════════════════════════ */

/* Make logo images WHITE and clearly visible */
#vi-logo-carousel img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
  transition: opacity 0.3s ease !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  max-width: 140px !important;
}

#vi-logo-carousel img:hover {
  opacity: 1 !important;
}

/* Container: hide overflow for carousel effect */
#vi-logo-carousel {
  overflow: hidden !important;
  position: relative !important;
  padding: 16px 0 !important;
}

/* Inner track: flex row, animate */
#vi-logo-carousel .e-con-inner,
#vi-logo-carousel > .e-con {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 50px !important;
  width: max-content !important;
  animation: vi-scroll 10s linear infinite !important;
}

/* Logo widgets: no shrink */
#vi-logo-carousel .elementor-widget {
  flex-shrink: 0 !important;
}

/* Keyframe for infinite scroll */
@keyframes vi-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pause carousel on hover */
#vi-logo-carousel:hover .e-con-inner,
#vi-logo-carousel:hover > .e-con {
  animation-play-state: paused !important;
}

/* Fade edges */
#vi-logo-carousel::before,
#vi-logo-carousel::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#vi-logo-carousel::before {
  left: 0 !important;
  background: linear-gradient(to right, #0F172A, transparent) !important;
}
#vi-logo-carousel::after {
  right: 0 !important;
  background: linear-gradient(to left, #0F172A, transparent) !important;
}

@media (max-width: 767px) {
  #vi-logo-carousel .e-con-inner,
  #vi-logo-carousel > .e-con {
    gap: 32px !important;
    animation-duration: 6s !important;
  }
  #vi-logo-carousel img {
    height: 24px !important;
    max-width: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* LOGO CAROUSEL: Per-logo filters + fast scroll      */
/* ═══════════════════════════════════════════════════ */

/* Container */
#vi-logo-carousel {
  overflow: hidden !important;
  position: relative !important;
  padding: 16px 0 !important;
}

/* Inner track: flex row, fast animation */
#vi-logo-carousel .e-con-inner,
#vi-logo-carousel > .e-con {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 50px !important;
  width: max-content !important;
  animation: vi-scroll 10s linear infinite !important;
}

/* All logo images: consistent sizing */
#vi-logo-carousel img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  max-width: 140px !important;
  transition: opacity 0.3s ease !important;
}

/* DARK logos → make white */
.elementor-element-28c44c77 img,
.elementor-element-20253514 img,
.elementor-element-36e9d719 img,
.elementor-element-740d4215 img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
}

/* MEDIUM logos (Cloudflare) → brighten to white */
.elementor-element-1029692f img {
  filter: grayscale(1) brightness(2) !important;
  opacity: 0.85 !important;
}

/* LIGHT logos (already white) → keep as-is, just show them */
.elementor-element-6f1ebf3 img,
.elementor-element-1898e414 img,
.elementor-element-40f1fc81 img {
  filter: none !important;
  opacity: 0.85 !important;
}

/* Hover: full opacity on all */
#vi-logo-carousel img:hover {
  opacity: 1 !important;
}

/* Logo widgets: no shrink */
#vi-logo-carousel .elementor-widget {
  flex-shrink: 0 !important;
}

/* Keyframe */
@keyframes vi-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pause on hover */
#vi-logo-carousel:hover .e-con-inner,
#vi-logo-carousel:hover > .e-con {
  animation-play-state: paused !important;
}

/* Fade edges */
#vi-logo-carousel::before,
#vi-logo-carousel::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#vi-logo-carousel::before {
  left: 0 !important;
  background: linear-gradient(to right, #0F172A, transparent) !important;
}
#vi-logo-carousel::after {
  right: 0 !important;
  background: linear-gradient(to left, #0F172A, transparent) !important;
}

@media (max-width: 767px) {
  #vi-logo-carousel .e-con-inner,
  #vi-logo-carousel > .e-con {
    gap: 32px !important;
    animation-duration: 6s !important;
  }
  #vi-logo-carousel img {
    height: 24px !important;
    max-width: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* LOGO CAROUSEL: Per-logo filters + fast scroll      */
/* ═══════════════════════════════════════════════════ */
#vi-logo-carousel {
  overflow: hidden !important;
  position: relative !important;
  padding: 16px 0 !important;
}

#vi-logo-carousel .e-con-inner,
#vi-logo-carousel > .e-con {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 50px !important;
  width: max-content !important;
  animation: vi-scroll 10s linear infinite !important;
}

#vi-logo-carousel img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  max-width: 140px !important;
  transition: opacity 0.3s ease !important;
}

#vi-logo-carousel img:hover {
  opacity: 1 !important;
}

#vi-logo-carousel .elementor-widget {
  flex-shrink: 0 !important;
}

/* DARK logos (SEMrush, WordPress, ahrefs, Moz) → invert to white */
.elementor-element-28c44c77 img,
.elementor-element-20253514 img,
.elementor-element-36e9d719 img,
.elementor-element-740d4215 img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
}

/* MEDIUM logos (Cloudflare) → brighten to white-ish */
.elementor-element-1029692f img {
  filter: grayscale(1) brightness(2) !important;
  opacity: 0.85 !important;
}

/* LIGHT logos (already white on transparent) → no filter needed */
.elementor-element-6f1ebf3 img,
.elementor-element-1898e414 img,
.elementor-element-40f1fc81 img {
  filter: none !important;
  opacity: 0.85 !important;
}

@keyframes vi-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

#vi-logo-carousel:hover .e-con-inner,
#vi-logo-carousel:hover > .e-con {
  animation-play-state: paused !important;
}

#vi-logo-carousel::before,
#vi-logo-carousel::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#vi-logo-carousel::before {
  left: 0 !important;
  background: linear-gradient(to right, #0F172A, transparent) !important;
}
#vi-logo-carousel::after {
  right: 0 !important;
  background: linear-gradient(to left, #0F172A, transparent) !important;
}

@media (max-width: 767px) {
  #vi-logo-carousel .e-con-inner,
  #vi-logo-carousel > .e-con {
    gap: 32px !important;
    animation-duration: 6s !important;
  }
  #vi-logo-carousel img {
    height: 24px !important;
    max-width: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* MOBILE SECTION FIXES                               */
/* ═══════════════════════════════════════════════════ */

/* #vi-features: Fix absolute overlays on mobile/tablet */
@media (max-width: 1024px) {
  /* Make feature card overlays flow normally instead of floating */
  .elementor-element-16eb1346,
.elementor-element-2fdb7608,
.elementor-element-3cff2f23,
.elementor-element-288a50f1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }

  /* Feature card parent containers: stack vertically */
  #vi-features .e-con > .e-con {
    width: 100% !important;
  }

  /* Each feature card: make the image a background-like element */
  #vi-features .e-con .e-con .elementor-widget-image img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 767px) {
  /* All row sections stack on mobile */
  #vi-stats,
  #vi-features,
  #vi-services,
  #vi-how-it-works,
  #vi-testimonials,
  #vi-tech-features {
    flex-direction: column !important;
  }
  
  #vi-stats > .e-con,
  #vi-features > .e-con,
  #vi-services > .e-con,
  #vi-how-it-works > .e-con,
  #vi-testimonials > .e-con,
  #vi-tech-features > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stack all child containers on mobile */
  #vi-stats .e-con,
  #vi-features .e-con,
  #vi-services .e-con,
  #vi-how-it-works .e-con,
  #vi-tech-features .e-con {
    width: 100% !important;
    flex-direction: column !important;
  }
  
  /* Feature overlay buttons: full width */
  .elementor-element-16eb1346,
.elementor-element-2fdb7608,
.elementor-element-3cff2f23,
.elementor-element-288a50f1 {
    flex-direction: column !important;
  }
  
  .elementor-element-16eb1346,
.elementor-element-2fdb7608,
.elementor-element-3cff2f23,
.elementor-element-288a50f1 {
    width: 100% !important;
    margin-top: 12px !important;
  }

  /* Stats section fixes */
  #vi-stats .elementor-widget-image img {
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
  }
  #vi-stats .elementor-widget-image {
    text-align: center !important;
  }
  #vi-stats .elementor-widget-heading,
  #vi-stats .elementor-widget-text-editor {
    text-align: center !important;
  }

  /* Pricing cards */
  #vi-pricing .e-con > .e-con {
    width: 100% !important;
    margin-bottom: 24px;
  }

  /* Tech features grid: single column */
  #vi-tech-features > .e-con {
    min-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* PRICING PAGE — VISUAL UPGRADE v2                   */
/* ═══════════════════════════════════════════════════ */

/* === SMOOTH SCROLL === */
html { scroll-behavior: smooth; }

/* === PAGE BACKGROUND (Obsidian gradient via page settings + fallback) === */
body.page-id-119 {
  background: linear-gradient(180deg, #0A0A0F 0%, #0D1117 50%, #0A0A0F 100%) !important;
}

/* === CORE PLANS — 5-COLUMN DESKTOP === */
.pricing-core-plans {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: stretch !important;
}
.pricing-core-plans > .e-con {
  flex: 1 1 calc(20% - 20px) !important;
  min-width: 200px;
  max-width: 260px;
  background: rgba(17, 24, 39, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}
.pricing-core-plans > .e-con:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 255, 133, 0.3) !important;
}

/* === AGENCY PLANS — 3-COLUMN === */
.pricing-agency-plans {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: stretch !important;
}
.pricing-agency-plans > .e-con {
  flex: 1 1 calc(33.33% - 24px) !important;
  min-width: 280px;
  max-width: 380px;
  background: rgba(17, 24, 39, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}
.pricing-agency-plans > .e-con:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 255, 133, 0.3) !important;
}

/* === INTELLIGENCE BUNDLES — 4-COLUMN === */
.pricing-intel-bundles {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: stretch !important;
}
.pricing-intel-bundles > .e-con {
  flex: 1 1 calc(25% - 20px) !important;
  min-width: 220px;
  max-width: 300px;
  background: rgba(17, 24, 39, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}
.pricing-intel-bundles > .e-con:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 255, 133, 0.3) !important;
}

/* === HIGHLIGHTED CARDS — Green border === */
.pricing-card-highlighted {
  border: 1px solid #00FF85 !important;
}

/* === PRO CARD — Permanent glow pulse === */
@keyframes proCardGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 133, 0.15); }
  50% { box-shadow: 0 0 30px rgba(0, 255, 133, 0.25); }
}
.pricing-card-pro {
  animation: proCardGlow 3s ease-in-out infinite;
  border: 2px solid #00FF85 !important;
}
.pricing-card-pro:hover {
  animation: none;
  box-shadow: 0 20px 40px rgba(0, 255, 133, 0.2) !important;
}

/* === INDIVIDUAL MODULES — 2-COLUMN GRID === */
#individual-modules > .e-con.pricing-module-card {
  background: rgba(17, 24, 39, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#individual-modules > .e-con.pricing-module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
#individual-modules table { width: 100%; border-collapse: collapse; }
#individual-modules table th {
  font-weight: 600 !important;
  color: #FFFFFF !important;
}
#individual-modules table td {
  color: #CBD5E1;
}
#individual-modules table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* === STATS BAR — Horizontal counters === */
.pricing-stats-bar,
.pricing-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 48px !important;
  justify-content: center !important;
  align-items: center !important;
}
.pricing-stats-bar > .e-con,
.pricing-stats-row > .e-con {
  text-align: center;
}
.pricing-stat-card {
  text-align: center;
  min-width: 160px;
}

/* === AGENCY PRO CARD — Permanent glow === */
.pricing-card-agency-pro {
  animation: proCardGlow 3s ease-in-out infinite;
  border: 2px solid #00FF85 !important;
}
.pricing-card-agency-pro:hover {
  animation: none;
  box-shadow: 0 20px 40px rgba(0, 255, 133, 0.2) !important;
}

/* === TESTIMONIALS === */
.pricing-testimonials-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: stretch !important;
}
.pricing-testimonials-grid > .e-con {
  flex: 1 1 calc(33.33% - 24px) !important;
  min-width: 280px;
  max-width: 380px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-testimonials-grid > .e-con:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* === INDIVIDUAL MODULES PARENT === */
.pricing-individual-modules {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
}
.pricing-individual-modules > .elementor-widget-heading,
.pricing-individual-modules > .elementor-widget-text-editor {
  flex-basis: 100% !important;
  width: 100% !important;
}

/* === COMPARISON TABLE === */
.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.comparison-table { border-collapse: collapse; }
.comparison-table-wrapper table th {
  background: rgba(0, 255, 133, 0.08) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.comparison-table-wrapper table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* === CTA BUTTON PULSE === */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 133, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(0, 255, 133, 0); }
}
.pricing-cta-primary .elementor-button-wrapper .elementor-button {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* === FAQ SMOOTH TOGGLE === */
.elementor-toggle .elementor-tab-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              padding 0.3s ease;
}
#pricing-faq .elementor-toggle-item {
  border-color: rgba(255, 255, 255, 0.06) !important;
  transition: border-color 0.3s ease;
}
#pricing-faq .elementor-toggle-item:hover {
  border-color: rgba(0, 255, 133, 0.15) !important;
}

/* === STICKY MOBILE CTA BAR === */
.vi-sticky-cta { display: none; }

/* ─── DESKTOP (1025px+) ─── */
@media (min-width: 1025px) {
  .swipe-hint { display: none !important; }

  #individual-modules {
    display: flex;
    flex-direction: column;
  }
  #individual-modules > .e-con.pricing-module-card {
    width: calc(50% - 10px);
    display: inline-flex;
  }
  /* Use a wrapper approach — modules side by side */
  #individual-modules {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
  }
  #individual-modules > .elementor-widget-heading,
  #individual-modules > .elementor-widget-text-editor {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  #individual-modules > .e-con.pricing-module-card {
    flex: 1 1 calc(50% - 20px) !important;
    min-width: 320px;
    max-width: calc(50% - 10px);
  }
}

/* ─── TABLET (768px — 1024px) ─── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Core plans: 2 per row, 5th centered */
  .pricing-core-plans > .e-con {
    flex-basis: calc(50% - 20px) !important;
    max-width: 48% !important;
    min-width: auto !important;
  }

  /* Agency: 1 per row */
  .pricing-agency-plans > .e-con {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  /* Intel bundles: 2 per row */
  .pricing-intel-bundles > .e-con {
    flex-basis: calc(50% - 20px) !important;
    max-width: 48% !important;
    min-width: auto !important;
  }

  /* Individual modules: 1 per row */
  #individual-modules > .e-con.pricing-module-card {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  /* Stats: 2x2 grid */
  .pricing-stats-bar,
  .pricing-stats-row {
    gap: 24px !important;
  }
  .pricing-stat-card {
    flex-basis: calc(50% - 24px) !important;
    min-width: auto !important;
  }

  /* Testimonials: 1 per row */
  .pricing-testimonials-grid > .e-con {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  /* Comparison table: sticky first col */
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: #0F172A;
  }
  .swipe-hint { display: block !important; }

  /* Section padding */
  #pricing-plans, #pricing-agency, #intelligence-bundles,
  #individual-modules, #comparison-table, #pricing-stats, #pricing-trust,
  #pricing-faq, #pricing-social-proof {
    padding: 40px 24px !important;
  }
}

/* ─── MOBILE (< 768px) ─── */
@media (max-width: 767px) {
  /* ALL pricing cards: 1 column full width */
  .pricing-core-plans > .e-con,
  .pricing-agency-plans > .e-con,
  .pricing-intel-bundles > .e-con {
    flex-basis: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* Individual modules: 1 col */
  #individual-modules > .e-con.pricing-module-card {
    flex-basis: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* Hero */
  #pricing-hero {
    padding: 40px 16px 20px !important;
  }
  #pricing-hero h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
  }
  #pricing-hero h2 {
    font-size: 22px !important;
  }

  /* Stats: 2x2 grid (NOT 1 col) */
  .pricing-stats-bar,
  .pricing-stats-row {
    gap: 12px !important;
  }
  .pricing-stat-card {
    flex-basis: calc(50% - 12px) !important;
    min-width: calc(50% - 12px) !important;
  }

  /* Testimonials: 1 per row */
  .pricing-testimonials-grid > .e-con {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  /* Comparison table: scrollable */
  .comparison-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: #0F172A;
  }
  .swipe-hint {
    display: block !important;
    text-align: center; color: #64748B; font-size: 12px; padding: 8px 0;
  }

  /* CTA buttons full width */
  #pricing-final-cta .elementor-widget-button,
  #pricing-final-cta .elementor-button { width: 100% !important; }

  /* Sticky mobile CTA bar */
  .vi-sticky-cta {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 255, 133, 0.3);
    justify-content: center; gap: 12px;
  }
  .vi-sticky-cta a {
    display: inline-block; padding: 10px 24px; border-radius: 8px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    text-align: center; flex: 1; max-width: 200px;
  }
  .vi-sticky-cta .vi-btn-primary {
    background: linear-gradient(135deg, #00FF85, #10B981); color: #0A0A0F;
  }
  .vi-sticky-cta .vi-btn-ghost {
    border: 1px solid #00FF85; color: #00FF85; background: transparent;
  }
  body.page-id-119 { padding-bottom: 70px; }

  /* Section padding mobile */
  #pricing-plans, #pricing-agency, #intelligence-bundles,
  #individual-modules, #comparison-table, #pricing-stats, #pricing-trust,
  #pricing-faq, #pricing-social-proof {
    padding: 24px 16px !important;
  }

  /* Card padding mobile */
  .pricing-core-plans > .e-con,
  .pricing-agency-plans > .e-con,
  .pricing-intel-bundles > .e-con {
    padding: 24px 16px !important;
  }

  /* Font sizes mobile */
  #pricing-plans h2, #pricing-agency h2, #intelligence-bundles h2,
  #individual-modules h2, #comparison-table h2, #pricing-stats h2,
  #pricing-trust h2, #pricing-faq h2, #pricing-final-cta h2,
  #pricing-social-proof h2 {
    font-size: 22px !important;
  }
}

/* ─── SWIPE HINT: hidden on desktop ─── */
@media (min-width: 768px) {
  .swipe-hint { display: none; }
}