/* ===== PRODUCT TABS — CARD HEADER BAR ===== */
.vx-pcard-tabs-bar {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0;
}
.vx-pcard-tabs-bar .vx-prod-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.vx-pcard-tabs-bar .vx-prod-tabs::-webkit-scrollbar { display: none; }

.vx-prod-tab {
  background: transparent;
  border: none;
  padding: 14px 22px;
  font-size: .8rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  transition: all .3s;
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
}
.vx-prod-tab i {
  font-size: .7rem;
  transition: color .3s;
}
.vx-prod-tab:hover {
  color: #555;
  background: rgba(0,0,0,.02);
}
.vx-prod-tab.active {
  color: #F6511D;
  font-weight: 600;
  border-bottom-color: #F6511D;
  background: #fff;
}
.vx-prod-tab.active i { color: #F6511D; }

/* Progress bar inside tabs bar */
.vx-pcard-tabs-bar .vx-prod-progress {
  height: 2px;
  background: #eee;
  margin: 0;
  width: 100%;
}
.vx-prod-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F6511D, #FF6B35);
}

/* Remove old accent bar */
.vx-pcard-accent { display: none !important; }

/* ===== MOBILE TABS BAR ===== */
@media (max-width: 768px) {
  .vx-prod-tab {
    padding: 10px 14px;
    font-size: .65rem;
    gap: 4px;
  }
  .vx-prod-tab span {
    display: none;
  }
  .vx-prod-tab i {
    font-size: .85rem;
  }
  .vx-prod-tab.active span {
    display: inline;
  }
}
@media (max-width: 400px) {
  .vx-prod-tab {
    padding: 8px 12px;
  }
}

/* ============================================
   VONTHREX MODERNIZE — PART 2
   Hero + Sections + Footer
   ============================================ */

/* ===== HERO — Orange Gradient Cloudflare Style ===== */
.hero {
  background: var(--vx-bg-hero) !important;
  min-height: 92vh !important;
}
.hero::before {
  background: none !important;
}
.hero::after {
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%) !important;
}

.hero-particles .particle {
  background: rgba(255,255,255,.2) !important;
}
.hero-circuit-layer .circuit-dot {
  background: rgba(255,255,255,.15) !important;
}
.hero-circuit-layer .circuit-line {
  background: rgba(255,255,255,.08) !important;
}

.hero-aura {
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%) !important;
}
.hero-aura--secondary {
  background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 60%) !important;
}

.hero-tag {
  color: rgba(255,255,255,.85) !important;
  font-size: .85rem !important;
  letter-spacing: 3px !important;
}
.hero-title {
  color: #fff !important;
  font-size: 3.8rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.hero-desc {
  color: rgba(255,255,255,.85) !important;
  font-size: 1.15rem !important;
}
.hero-btns .btn-primary {
  background: #fff !important;
  color: var(--vx-primary) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  font-weight: 700 !important;
}
.hero-btns .btn-primary:hover {
  background: var(--vx-dark) !important;
  color: #fff !important;
  box-shadow: 0 6px 30px rgba(0,0,0,.25) !important;
}
.hero-btns .btn-ghost {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.35) !important;
}
.hero-btns .btn-ghost:hover {
  background: rgba(255,255,255,.25) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Hero wave divider */
.hero-divider {
  position: absolute !important;
  bottom: -2px !important; left: 0 !important; right: 0 !important;
  height: 80px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' d='M0,40 C360,100 720,0 1080,60 C1260,80 1380,40 1440,40 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom center !important;
  background-size: cover !important;
  z-index: 5 !important;
}

/* Device styling on orange bg */
.device {
  box-shadow: 0 25px 60px rgba(0,0,0,.3), 0 0 40px rgba(255,255,255,.08) !important;
}
.floating-badge {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
}

/* ===== SERVICES OVERVIEW ===== */
.services-overview {
  background: var(--vx-bg) !important;
}
.svc-overview-card {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: var(--vx-radius) !important;
  transition: all .3s !important;
}
.svc-overview-card:hover {
  border-color: rgba(246,81,29,.2) !important;
  box-shadow: 0 12px 40px rgba(246,81,29,.08) !important;
  transform: translateY(-4px) !important;
}
.svc-overview-card h3 { color: var(--vx-text) !important; }
.svc-overview-card p { color: var(--vx-text-muted) !important; }
.svc-overview-card .svc-overview-icon {
  background: var(--vx-primary-light) !important;
  color: var(--vx-primary) !important;
}
.svc-overview-card:hover .svc-overview-icon {
  background: var(--vx-primary) !important;
  color: #fff !important;
}
.svc-overview-card .read-more { color: var(--vx-primary) !important; }

/* ===== MARKETING SECTION ===== */
.mkt-showcase {
  background: var(--vx-bg-alt) !important;
}
.mkt-tag { color: var(--vx-primary) !important; }
.mkt-subtitle { color: var(--vx-text-muted) !important; }

.mkt-holo-card {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: 16px !important;
}
.mkt-holo-card:hover {
  border-color: rgba(246,81,29,.15) !important;
  box-shadow: var(--vx-card-shadow) !important;
}
.mkt-pillar-content h3 { color: var(--vx-text) !important; }
.mkt-pillar-content p { color: var(--vx-text-body) !important; }
.mkt-features-list li { color: var(--vx-text-body) !important; }
.mkt-features-list li i { color: var(--vx-primary) !important; }

/* ===== ABOUT SECTION ===== */
.about {
  background: var(--vx-bg) !important;
}
.about-mesh { display: none !important; }
.about-headline { color: var(--vx-text) !important; }
.about-gradient {
  background: linear-gradient(135deg, var(--vx-primary), #FF6B35) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.about-n-val { color: var(--vx-primary) !important; }
.about-n-line { background: var(--vx-primary) !important; }
.about-n-txt { color: var(--vx-text-muted) !important; }
.about-cap-item {
  background: var(--vx-bg-alt) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: var(--vx-radius) !important;
  padding: 20px !important;
}
.about-cap-item strong { color: var(--vx-text) !important; }
.about-cap-item span { color: var(--vx-text-muted) !important; }

/* ===== PRODUCTS SECTION ===== */
.products-section {
  background: var(--vx-bg-alt) !important;
}
.showcase-info { color: var(--vx-text) !important; }
.showcase-title { color: var(--vx-text) !important; }
.showcase-desc { color: var(--vx-text-body) !important; }
.showcase-feat i { color: var(--vx-primary) !important; }
.showcase-feat span { color: var(--vx-text-body) !important; }
.showcase-cat { color: var(--vx-primary) !important; }
.showcase-counter { color: var(--vx-text-muted) !important; }
.showcase-arrow {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  color: var(--vx-text) !important;
}
.showcase-arrow:hover {
  background: var(--vx-primary) !important;
  color: #fff !important;
  border-color: var(--vx-primary) !important;
}
.showcase-dot {
  background: var(--vx-border) !important;
}
.showcase-dot.active {
  background: var(--vx-primary) !important;
}

/* ===== PRICING ===== */
.hp-pricing {
  background: var(--vx-bg) !important;
}
.hp-plan {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: 16px !important;
}
.hp-plan:hover {
  border-color: rgba(246,81,29,.15) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.08) !important;
  transform: translateY(-6px) !important;
}
.hp-plan--featured {
  border: 2px solid var(--vx-primary) !important;
  box-shadow: 0 8px 40px rgba(246,81,29,.12) !important;
}
.hp-plan-badge {
  background: var(--vx-primary) !important;
  color: #fff !important;
}
.hp-plan-name { color: var(--vx-text) !important; }
.hp-plan-price { color: var(--vx-text) !important; }
.hp-plan-desc { color: var(--vx-text-muted) !important; }
.hp-plan-features li { color: var(--vx-text-body) !important; }
.hp-plan-features li i { color: var(--vx-primary) !important; }
.hp-plan-features li.disabled i { color: #ccc !important; }
.hp-plan-features li.disabled { color: #bbb !important; }
.hp-plan-btn {
  background: var(--vx-bg-alt) !important;
  color: var(--vx-text) !important;
  border: 1px solid var(--vx-card-border) !important;
}
.hp-plan-btn:hover {
  background: var(--vx-primary) !important;
  color: #fff !important;
  border-color: var(--vx-primary) !important;
}
.hp-plan-btn--primary {
  background: var(--vx-primary) !important;
  color: #fff !important;
  border-color: var(--vx-primary) !important;
}
.hp-pricing-note { color: var(--vx-text-muted) !important; }
.hp-pricing-note a { color: var(--vx-primary) !important; }
.hp-pricing-note i { color: var(--vx-primary) !important; }

/* ===== CONTACT ===== */
.contact {
  background: var(--vx-bg-alt) !important;
}
.contact-info p { color: var(--vx-text-body) !important; }
.contact-item { color: var(--vx-text-body) !important; }
.contact-item i { color: var(--vx-primary) !important; }
.contact-item a { color: var(--vx-text-body) !important; }
.contact-item a:hover { color: var(--vx-primary) !important; }

.contact-form-wrap {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: 16px !important;
  padding: 40px !important;
}
.contact-form input,
.contact-form textarea {
  background: var(--vx-bg-alt) !important;
  border: 1px solid var(--vx-card-border) !important;
  color: var(--vx-text) !important;
  border-radius: 10px !important;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--vx-text-muted) !important;
}

.contact-socials a {
  background: var(--vx-bg-alt) !important;
  color: var(--vx-text-muted) !important;
  border: 1px solid var(--vx-card-border) !important;
}
.contact-socials a:hover {
  background: var(--vx-primary) !important;
  color: #fff !important;
  border-color: var(--vx-primary) !important;
}

/* Quick contact strip */
.cqs-card {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
  border-radius: var(--vx-radius) !important;
}
.cqs-card:hover {
  border-color: var(--vx-primary) !important;
  box-shadow: var(--vx-card-shadow) !important;
}
.cqs-icon { color: var(--vx-primary) !important; }
.cqs-text strong { color: var(--vx-text) !important; }
.cqs-text span { color: var(--vx-text-muted) !important; }

/* ===== NEWSLETTER ===== */
.newsletter {
  background: var(--vx-dark) !important;
}
.newsletter h3 { color: #fff !important; }
.newsletter-form input {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--vx-dark) !important;
}
.footer h4 { color: #fff !important; }
.footer p, .footer li, .footer a { color: rgba(255,255,255,.6) !important; }
.footer a:hover { color: var(--vx-primary) !important; }
.footer-socials a {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.6) !important;
}
.footer-socials a:hover {
  background: var(--vx-primary) !important;
  color: #fff !important;
}
.footer-bottom {
  background: var(--vx-dark-alt) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.footer-bottom p { color: rgba(255,255,255,.4) !important; }

/* ===== SNAP DOTS ===== */
.snap-dots-nav { z-index: 100; }
.snap-dot { background: var(--vx-border) !important; }
.snap-dot.active { background: var(--vx-primary) !important; }
.snap-dot.passed { background: rgba(246,81,29,.3) !important; }
.snap-dots-line { background: var(--vx-border) !important; }
.snap-dots-line-fill { background: var(--vx-primary) !important; }
.snap-dots-label {
  background: var(--vx-dark) !important;
  color: #fff !important;
}

/* ===== PREMIUM CSS OVERRIDES ===== */
.premium-feature-card {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
}
.premium-feature-card::after {
  background: linear-gradient(90deg, var(--vx-primary), #FF6B35) !important;
}
.premium-feature-card:hover {
  border-color: rgba(246,81,29,.15) !important;
  box-shadow: 0 16px 48px rgba(246,81,29,.08) !important;
  background: var(--vx-bg-alt) !important;
}
.pf-icon {
  background: var(--vx-primary-light) !important;
  color: var(--vx-primary) !important;
}
.premium-feature-card:hover .pf-icon {
  background: var(--vx-primary) !important;
  color: #fff !important;
}
.premium-feature-card h3 { color: var(--vx-text) !important; }
.premium-feature-card p { color: var(--vx-text-muted) !important; }
.pf-number { color: rgba(246,81,29,.06) !important; }

/* WhatsApp float */
.whatsapp-float {
  background: #25d366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,.4) !important;
}

/* Back to top */
.back-to-top {
  background: var(--vx-primary) !important;
  color: #fff !important;
}

/* ===== PREMIUM CTA ===== */
.premium-cta {
  background: linear-gradient(135deg, var(--vx-primary) 0%, #FF6B35 100%) !important;
}
.premium-cta::before { background: none !important; }
.premium-cta-inner h2 { color: #fff !important; }
.premium-cta-inner p { color: rgba(255,255,255,.8) !important; }

/* ===== BLOG ===== */
.blog-mag-cat, .blog-mag-cat-sm {
  background: var(--vx-primary) !important;
  color: #fff !important;
}
.blog-mag-cta, .blog-mag-cta-sm { color: var(--vx-primary) !important; }

/* Smooth transitions */
* { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* ===== SUBPAGE HERO ===== */
.page-hero, .about-hero, .services-hero, .blog-hero, .contact-hero {
  background: linear-gradient(135deg, var(--vx-dark) 0%, #2d2d4e 100%) !important;
}
.page-hero::before, .about-hero::before { background: none !important; }
.page-hero h1, .about-hero h1 { color: #fff !important; }
.page-hero p, .about-hero p { color: rgba(255,255,255,.75) !important; }
.page-hero .breadcrumb a { color: var(--vx-primary) !important; }
.page-hero .breadcrumb span { color: rgba(255,255,255,.5) !important; }

/* ===== SUBPAGE SECTIONS ===== */
.page-content section, .about-section, .services-grid-section,
.blog-section, .faq-section, .team-section, .pricing-section {
  background: var(--vx-bg) !important;
}
.page-content section:nth-child(even) {
  background: var(--vx-bg-alt) !important;
}

/* ===== SERVICE DETAIL ===== */
.sd-hero { background: linear-gradient(135deg, var(--vx-dark), #2d2d4e) !important; }
.sd-hero::before { background: none !important; }
.sd-hero h1 { color: #fff !important; }
.sd-hero p { color: rgba(255,255,255,.75) !important; }
.sd-stat-val { color: var(--vx-primary) !important; }
.sd-tab.active { background: var(--vx-primary) !important; color: #fff !important; }
.sd-tab { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; border: 1px solid var(--vx-card-border) !important; }

/* ===== BLOG CARDS ===== */
.blog-card, .blog-mag-main, .blog-mag-sm {
  background: var(--vx-card-bg) !important;
  border: 1px solid var(--vx-card-border) !important;
}
.blog-card:hover { border-color: rgba(246,81,29,.15) !important; box-shadow: var(--vx-card-shadow) !important; }
.blog-card h3 a { color: var(--vx-text) !important; }
.blog-card p { color: var(--vx-text-muted) !important; }

/* ===== FAQ ===== */
.faq-item { background: var(--vx-card-bg) !important; border: 1px solid var(--vx-card-border) !important; }
.faq-question { color: var(--vx-text) !important; }
.faq-answer { color: var(--vx-text-body) !important; }
.faq-item.active { border-color: var(--vx-primary) !important; }
.faq-toggle { color: var(--vx-primary) !important; }

/* ===== TEAM ===== */
.team-card { background: var(--vx-card-bg) !important; border: 1px solid var(--vx-card-border) !important; }
.team-card h3 { color: var(--vx-text) !important; }
.team-card p { color: var(--vx-text-muted) !important; }
.team-card:hover { border-color: rgba(246,81,29,.15) !important; }

/* ===== PROJECTS ===== */
.project-card { background: var(--vx-card-bg) !important; border: 1px solid var(--vx-card-border) !important; }
.project-card h3 { color: var(--vx-text) !important; }
.project-card p { color: var(--vx-text-body) !important; }
.project-filter.active { background: var(--vx-primary) !important; color: #fff !important; }
.project-filter { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; }

/* ===== MOBILE NAV ===== */
.mobile-nav { background: #fff !important; }
.mobile-nav a { color: var(--vx-text) !important; }
.mobile-nav a:hover { color: var(--vx-primary) !important; }
.mobile-nav .nav-cta { background: var(--vx-primary) !important; color: #fff !important; }


/* ===================================================================
   CLOUDFLARE DYNAMIC EFFECTS v2 — Scroll + Hover + Transitions
   =================================================================== */

/* ===== SCROLL-TRIGGERED FADE-IN ===== */
.cf-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-reveal.cf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.cf-reveal-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-reveal-children.cf-visible > *:nth-child(1) { transition-delay: 0.05s; }
.cf-reveal-children.cf-visible > *:nth-child(2) { transition-delay: 0.12s; }
.cf-reveal-children.cf-visible > *:nth-child(3) { transition-delay: 0.19s; }
.cf-reveal-children.cf-visible > *:nth-child(4) { transition-delay: 0.26s; }
.cf-reveal-children.cf-visible > *:nth-child(5) { transition-delay: 0.33s; }
.cf-reveal-children.cf-visible > *:nth-child(6) { transition-delay: 0.40s; }
.cf-reveal-children.cf-visible > * {
  opacity: 0;
  transform: translateY(30px);
}
.cf-reveal-children.cf-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== CARD LIFT HOVER — Cloudflare style ===== */
.service-card,
.feature-card,
.tech-card,
.product-card,
.mkt-card,
.trust-card,
.stat-card {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease !important;
}
.service-card:hover,
.feature-card:hover,
.tech-card:hover,
.product-card:hover,
.mkt-card:hover,
.trust-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10) !important;
  border-color: rgba(246, 81, 29, 0.18) !important;
}

/* ===== BUTTON TRANSITIONS — 400ms smooth ===== */
a, button, .btn, .nav-cta, .cta-btn, .hero-cta a {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== FLOATING PULSE ANIMATION ===== */
@keyframes cfFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floating-badge {
  animation: cfFloat 4s ease-in-out infinite !important;
}

/* ===== SECTION DIVIDER — Curved wave ===== */
.snap-section {
  position: relative !important;
}
.snap-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  background: inherit !important;
  clip-path: ellipse(55% 100% at 50% 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.snap-section.hero::after {
  display: none !important;
}

/* ===== ANIMATED COUNTER GLOW ===== */
@keyframes cfPulseGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 20px rgba(246, 81, 29, 0.3); }
}
.stat-number, .counter-value, .stat-val {
  animation: cfPulseGlow 3s ease-in-out infinite;
}

/* ===== SCROLL DOTS — subtle breathe ===== */
@keyframes cfDotBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
.snap-dots .dot {
  animation: cfDotBreathe 2s ease-in-out infinite;
  background: rgba(0,0,0,0.2) !important;
  border: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: all 0.3s !important;
}
.snap-dots .dot.active {
  animation: none !important;
  opacity: 1 !important;
  background: var(--vx-primary) !important;
  transform: scale(1.5) !important;
}

/* ===== ICON HOVER ROTATE ===== */
.service-card i,
.feature-card i,
.card-icon i {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.service-card:hover i,
.feature-card:hover i {
  transform: scale(1.15) rotate(5deg) !important;
}

/* ===== LINK ARROW SLIDE ===== */
a.learn-more::after,
a.card-link::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.3s ease;
}
a.learn-more:hover::after,
a.card-link:hover::after {
  transform: translateX(4px);
}

/* ===== CHATBOT & WHATSAPP RECOLOR ===== */
.chatbot-toggle, .chat-toggle, #chatbot-toggle,
.chatbot-btn, .chat-btn {
  background: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  transition: all 0.3s !important;
}
.chatbot-toggle:hover, .chat-toggle:hover {
  background: #E04510 !important;
  transform: scale(1.05) !important;
}

/* ===================================================================
   CLOUDFLARE-STYLE MARKETING SECTION
   =================================================================== */

/* Header */
.cf-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.cf-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  margin: 12px 0 16px;
}
.cf-accent {
  color: #F6511D;
}
.cf-subtitle {
  color: #64748B;
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Stats Row */
.cf-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 56px;
  padding: 0 20px;
}
.cf-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-stat-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F6511D;
  display: inline-block;
  margin-bottom: 4px;
}
.cf-stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: #F6511D;
  line-height: 1;
}
.cf-stat-label {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.45;
}

/* Pillars — clean horizontal cards */
.cf-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.cf-pillar {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 32px 28px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.cf-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F6511D, #FF6B35);
  opacity: 0;
  transition: opacity 0.35s;
}
.cf-pillar:hover {
  border-color: rgba(246, 81, 29, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}
.cf-pillar:hover::before {
  opacity: 1;
}

.cf-pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(246, 81, 29, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: #F6511D;
  transition: all 0.35s;
}
.cf-pillar:hover .cf-pillar-icon {
  background: #F6511D;
  color: #fff;
  transform: scale(1.05);
}

.cf-pillar-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}
.cf-pillar-body p {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 16px;
}

.cf-pillar-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cf-pillar-features span {
  font-size: 0.8rem;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cf-pillar-features span i {
  color: #10b981;
  font-size: 0.7rem;
}

.cf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #F6511D;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.3s;
}
.cf-link:hover {
  gap: 10px;
}

/* CTA Row */
.cf-cta-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F6511D;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.35s;
}
.cf-btn-primary:hover {
  background: #E04510;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(246, 81, 29, 0.3);
}
.cf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #0F172A;
  padding: 14px 28px;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.35s;
}
.cf-btn-ghost:hover {
  border-color: #F6511D;
  color: #F6511D;
}

/* Mobile */
@media (max-width: 768px) {
  .cf-stats-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cf-pillars { grid-template-columns: 1fr; }
  .cf-title { font-size: 1.8rem; }
  .cf-stat-number { font-size: 1.8rem; }
}

/* ===== HIDE OLD MKT ELEMENTS ===== */
.mkt-pillars, .mkt-holo-card, .mkt-holo-border,
.mkt-holo-glow, .mkt-holo-shimmer, .mkt-holo-icon-wrap,
.mkt-holo-floating-orbs, .mkt-cta-row {
  display: none !important;
}
/* Ensure new CF elements show */
.cf-section-header, .cf-stats-row, .cf-pillars, .cf-cta-row {
  display: grid !important;
}
.cf-section-header { display: block !important; }
.cf-cta-row { display: flex !important; }

/* ===== COMPACT MKT SECTION ===== */
.mkt-showcase .cf-cta-row {
  display: none !important;
}
.mkt-showcase .cf-section-header {
  margin-bottom: 28px !important;
}
.cf-stats-row {
  margin-bottom: 32px !important;
  gap: 20px !important;
}
.cf-stat-number {
  font-size: 2rem !important;
}
.cf-stat-label {
  font-size: 0.82rem !important;
}
.cf-pillar {
  padding: 24px 22px !important;
}
.cf-pillar-icon {
  margin-bottom: 14px !important;
  width: 42px !important;
  height: 42px !important;
}
.cf-pillar-body h3 {
  font-size: 1.05rem !important;
  margin-bottom: 6px !important;
}
.cf-pillar-body p {
  font-size: 0.83rem !important;
  margin-bottom: 10px !important;
}
.cf-pillar-features {
  margin-bottom: 10px !important;
  gap: 6px !important;
}
.cf-pillar-features span {
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
}
.cf-pillars {
  margin-bottom: 0 !important;
  gap: 18px !important;
}
.cf-title {
  font-size: 2.2rem !important;
  margin: 8px 0 10px !important;
}
.cf-subtitle {
  font-size: 0.92rem !important;
}

/* ===== WHATSAPP ORANGE ===== */
.whatsapp-float, .whatsapp-btn, #whatsapp-float,
a[href*='wa.me'], a[href*='whatsapp'] .fab,
.wa-float, .wa-btn {
  background: #F6511D !important;
  color: #fff !important;
  border: none !important;
}
.whatsapp-float:hover, .wa-float:hover {
  background: #E04510 !important;
}

/* ===== CHATBOT BORDER ORANGE ===== */
.cb-bubble, .chatbot-toggle, .chat-toggle {
  border: 2px solid #F6511D !important;
  box-shadow: 0 0 0 3px rgba(246,81,29,.15) !important;
}
.cb-badge {
  background: #F6511D !important;
  border-color: #fff !important;
}

/* ===================================================================
   CLOUDFLARE-STYLE ABOUT SECTION
   =================================================================== */
.cf-about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cf-about-left .section-tag {
  color: #F6511D;
}
.cf-about-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  margin: 12px 0 16px;
}
.cf-about-desc {
  color: #64748B;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 32px;
}
.cf-about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cf-about-stat {
  text-align: center;
}
.cf-about-stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #F6511D;
  line-height: 1;
  margin-bottom: 6px;
}
.cf-about-stat::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: #F6511D;
  margin: 8px auto;
  border-radius: 2px;
}
.cf-about-stat-txt {
  font-size: 0.75rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
}

/* Right: Capabilities */
.cf-about-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cf-cap {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 18px 22px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-cap:hover {
  border-color: rgba(246, 81, 29, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transform: translateX(4px);
}
.cf-cap-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.cf-cap-body strong {
  display: block;
  font-size: 0.95rem;
  color: #0F172A;
  margin-bottom: 2px;
}
.cf-cap-body span {
  font-size: 0.83rem;
  color: #64748B;
}

/* Hide old about elements */
.about-mesh, .about-flow, .about-statement, .about-numbers,
.about-caps, .about-cta-zone {
  display: none !important;
}

/* Mobile */
@media (max-width: 768px) {
  .cf-about-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cf-about-title { font-size: 1.8rem; }
  .cf-about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   PRODUCTS SECTION — ANIMATED CLOUDFLARE STYLE
   =================================================================== */

/* Fix purple lines in orbital visual */
.showcase-visual .orbit-line,
.showcase-visual .orbit-ring,
.showcase-visual circle[stroke*="7F56"],
.showcase-visual [style*="purple"],
.showcase-visual [style*="#F6511D"],
.showcase-visual [style*="#F6511D"] {
  stroke: #F6511D !important;
  border-color: #F6511D !important;
}
.showcase-visual .connection-line,
.showcase-visual line,
.showcase-visual path:not([fill]) {
  stroke: rgba(246,81,29,.3) !important;
}

/* Animated orbital rotation */
@keyframes cfOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes cfOrbitReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes cfPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes cfFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.showcase-visual {
  position: relative !important;
}

/* Animate the orbital rings */
.showcase-visual .orbit-container,
.showcase-visual .visual-orbit {
  animation: cfOrbit 20s linear infinite !important;
}
.showcase-visual .orbit-container:nth-child(2),
.showcase-visual .visual-orbit:nth-child(2) {
  animation: cfOrbitReverse 25s linear infinite !important;
}

/* Pulse the center icon */
.showcase-visual .center-icon,
.showcase-visual .visual-center {
  animation: cfPulse 3s ease-in-out infinite !important;
}

/* Float the satellite icons */
.showcase-visual .satellite,
.showcase-visual .orbit-icon {
  animation: cfFloat 4s ease-in-out infinite !important;
}
.showcase-visual .satellite:nth-child(2),
.showcase-visual .orbit-icon:nth-child(2) {
  animation-delay: 0.5s !important;
}
.showcase-visual .satellite:nth-child(3),
.showcase-visual .orbit-icon:nth-child(3) {
  animation-delay: 1s !important;
}
.showcase-visual .satellite:nth-child(4),
.showcase-visual .orbit-icon:nth-child(4) {
  animation-delay: 1.5s !important;
}

/* Product title transition */
.showcase-info .product-title,
.showcase-info h3 {
  transition: opacity 0.5s, transform 0.5s !important;
}
.showcase-info.transitioning .product-title,
.showcase-info.transitioning h3 {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

/* Product category label */
.showcase-info .product-category,
.showcase-info .showcase-category {
  color: #F6511D !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 0.8rem !important;
}

/* Product features checks */
.showcase-info .feature-check i,
.showcase-info .product-features i {
  color: #F6511D !important;
}

/* Carousel dots */
.showcase-dots .dot,
.showcase-dots span {
  background: #D1D5DB !important;
  transition: all 0.3s !important;
}
.showcase-dots .dot.active,
.showcase-dots span.active {
  background: #F6511D !important;
  transform: scale(1.4) !important;
}

/* Carousel arrows */
.showcase-arrow {
  border: 1px solid #D1D5DB !important;
  color: #64748B !important;
  background: #fff !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transition: all 0.3s !important;
}
.showcase-arrow:hover {
  border-color: #F6511D !important;
  color: #F6511D !important;
}

/* Product CTA buttons */
.showcase-info .btn-primary {
  background: #F6511D !important;
  border-radius: 10px !important;
  transition: all 0.35s !important;
}
.showcase-info .btn-primary:hover {
  background: #E04510 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(246,81,29,.3) !important;
}
.showcase-info .btn-ghost,
.showcase-info .btn-outline {
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  color: #0F172A !important;
  transition: all 0.35s !important;
}
.showcase-info .btn-ghost:hover,
.showcase-info .btn-outline:hover {
  border-color: #F6511D !important;
  color: #F6511D !important;
}

/* Counter number animation */
.showcase-visual .counter-num,
.showcase-visual .visual-counter {
  color: #94A3B8 !important;
  font-weight: 200 !important;
  font-size: 4rem !important;
}

/* Add subtle glow behind visual */
.showcase-visual::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(246,81,29,.06) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: cfPulse 4s ease-in-out infinite !important;
}

/* ===================================================================
   PRODUCTS — CLOUDFLARE REDESIGN
   =================================================================== */

/* Hide old showcase */
.product-showcase, #productShowcase, .showcase-nav, #showcaseNav,
.showcase-info, .showcase-visual {
  display: none !important;
}

/* Layout */
.cf-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 32px;
}

/* Left info */
.cf-product-cat {
  color: #F6511D;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 0.78rem;
  margin-bottom: 8px;
}
.cf-product-name {
  font-size: 2rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  margin-bottom: 14px;
  transition: all 0.4s;
}
.cf-product-desc {
  color: #64748B;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  transition: all 0.4s;
}
.cf-product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.cf-product-features span {
  font-size: 0.82rem;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-product-features span i {
  color: #F6511D;
  font-size: 0.7rem;
}
.cf-product-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Right visual */
.cf-product-visual {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-network-svg {
  width: 380px;
  height: 380px;
  position: absolute;
}

/* Animated rings */
.cf-ring-1 { animation: cfSpin 30s linear infinite; transform-origin: 200px 200px; }
.cf-ring-2 { animation: cfSpin 20s linear infinite reverse; transform-origin: 200px 200px; }
.cf-ring-3 { animation: cfSpin 15s linear infinite; transform-origin: 200px 200px; }

@keyframes cfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Dashed lines pulse */
.cf-conn { animation: cfDash 3s linear infinite; }
@keyframes cfDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 16; } }

/* Nodes */
.cf-node {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.4s;
  z-index: 2;
}
.cf-node-center {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #F6511D, #FF6B35);
  color: #fff;
  font-size: 1.5rem;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(246,81,29,.3);
  animation: cfNodePulse 3s ease-in-out infinite;
  z-index: 3;
}
@keyframes cfNodePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 30px rgba(246,81,29,.3); }
  50% { transform: scale(1.06); box-shadow: 0 12px 40px rgba(246,81,29,.4); }
}

.cf-node-1 { top: 10%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #E5E7EB; color: #F6511D; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 4s ease-in-out infinite; }
.cf-node-2 { top: 30%; right: 5%; background: #fff; border: 1px solid #E5E7EB; color: #0891b2; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 4.5s ease-in-out infinite 0.5s; }
.cf-node-3 { bottom: 30%; right: 5%; background: #fff; border: 1px solid #E5E7EB; color: #22c55e; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 3.8s ease-in-out infinite 1s; }
.cf-node-4 { bottom: 10%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #E5E7EB; color: #F37335; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 4.2s ease-in-out infinite 1.5s; }
.cf-node-5 { top: 30%; left: 5%; background: #fff; border: 1px solid #E5E7EB; color: #3b82f6; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 4.8s ease-in-out infinite 0.8s; }
.cf-node-6 { bottom: 30%; left: 5%; background: #fff; border: 1px solid #E5E7EB; color: #ef4444; box-shadow: 0 4px 16px rgba(0,0,0,.06); animation: cfNodeFloat 3.5s ease-in-out infinite 1.2s; }

@keyframes cfNodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.cf-node-1 { animation-name: cfNodeFloat1; }
@keyframes cfNodeFloat1 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}
.cf-node-4 { animation-name: cfNodeFloat1; }

/* Pulse ring */
.cf-pulse-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(246,81,29,.2);
  animation: cfPulseRing 2.5s ease-out infinite;
  z-index: 1;
}
@keyframes cfPulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

/* Nav dots */
.cf-product-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cf-nav-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.cf-nav-arrow:hover { border-color: #F6511D; color: #F6511D; }
.cf-nav-dots {
  display: flex;
  gap: 8px;
}
.cf-nav-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #D1D5DB;
  cursor: pointer;
  transition: all 0.3s;
}
.cf-nav-dots span.active {
  background: #F6511D;
  transform: scale(1.3);
}

/* Mobile */
@media (max-width: 768px) {
  .cf-product-layout { grid-template-columns: 1fr; gap: 32px; }
  .cf-product-visual { height: 280px; }
  .cf-network-svg { width: 280px; height: 280px; }
  .cf-product-name { font-size: 1.5rem; }
}

/* ===== PRICING: FULL WIDTH ===== */
.hp-pricing .container {
  max-width: 95vw !important;
  width: 95vw !important;
  padding: 0 20px !important;
}
.hp-pricing-grid {
  gap: 16px !important;
}

/* ===== PRICING WIDTH ONLY ===== */
.hp-pricing .container {
  max-width: 95vw !important;
  width: 95vw !important;
}

/* ===== PRICING CONTAINER OVERRIDE (specificity fix) ===== */
section.hp-pricing.snap-section > .container,
.hp-pricing > .container,
#pricing > .container,
#pricing .container {
  max-width: none !important;
  width: 92% !important;
  margin: 0 auto !important;
}

/* ===== PRICING CARDS — DYNAMIC EFFECTS ===== */

/* Reduce width slightly */
.hp-pricing-grid {
  max-width: 1280px !important;
}

/* Card hover lift + glow */
.hp-plan {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hp-plan::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #F6511D, transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.4s !important;
}
.hp-plan:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(246, 81, 29, 0.15) !important;
}
.hp-plan:hover::before {
  opacity: 1 !important;
}

/* Featured card — subtle glow pulse */
.hp-plan--featured {
  border: 2px solid #F6511D !important;
  box-shadow: 0 0 30px rgba(246, 81, 29, 0.08) !important;
}
.hp-plan--featured::before {
  opacity: 1 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #F6511D, #FF6B35, #F6511D) !important;
}
.hp-plan--featured:hover {
  box-shadow: 0 20px 60px rgba(246, 81, 29, 0.18) !important;
}

/* Price number — animated on hover */
.hp-plan-price {
  transition: all 0.3s !important;
}
.hp-plan:hover .hp-plan-price {
  color: #F6511D !important;
  transform: scale(1.05) !important;
}

/* Feature checks — animate on card hover */
.hp-plan-features li {
  transition: all 0.3s !important;
}
.hp-plan:hover .hp-plan-features li {
  transform: translateX(4px) !important;
}
.hp-plan:hover .hp-plan-features li:nth-child(1) { transition-delay: 0s; }
.hp-plan:hover .hp-plan-features li:nth-child(2) { transition-delay: 0.03s; }
.hp-plan:hover .hp-plan-features li:nth-child(3) { transition-delay: 0.06s; }
.hp-plan:hover .hp-plan-features li:nth-child(4) { transition-delay: 0.09s; }
.hp-plan:hover .hp-plan-features li:nth-child(5) { transition-delay: 0.12s; }
.hp-plan:hover .hp-plan-features li:nth-child(6) { transition-delay: 0.15s; }
.hp-plan:hover .hp-plan-features li:nth-child(7) { transition-delay: 0.18s; }

/* Button glow on hover */
.hp-plan-btn {
  transition: all 0.35s !important;
}
.hp-plan-btn:hover {
  transform: translateY(-2px) !important;
}
.hp-plan-btn--primary:hover {
  box-shadow: 0 8px 24px rgba(246, 81, 29, 0.35) !important;
}

/* Badge pulse */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(246,81,29,.25); }
  50% { box-shadow: 0 4px 16px rgba(246,81,29,.45); }
}
.hp-plan-badge {
  animation: badgePulse 2.5s ease-in-out infinite !important;
}

/* Plan name icon accent */
.hp-plan-name::before {
  content: '—' !important;
  color: #F6511D !important;
  margin-right: 6px !important;
  font-weight: 300 !important;
}

/* ===== FIX BADGE VISIBILITY ===== */
.hp-plan {
  overflow: visible !important;
}
.hp-plan-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  color: #fff !important;
  padding: 6px 20px !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  letter-spacing: .03em !important;
}

/* ===== MORE CARD EFFECTS ===== */
/* Subtle gradient bg on featured */
.hp-plan--featured {
  background: linear-gradient(180deg, rgba(246,81,29,.03) 0%, #fff 100%) !important;
}

/* Corner accent dots */
.hp-plan::after {
  content: '' !important;
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  background-image: radial-gradient(#F6511D 1.5px, transparent 1.5px) !important;
  background-size: 8px 8px !important;
  opacity: 0.12 !important;
  transition: opacity 0.3s !important;
}
.hp-plan:hover::after {
  opacity: 0.3 !important;
}

/* Icon beside check marks */
.hp-plan-features .fa-check {
  color: #F6511D !important;
  font-size: 0.75rem !important;
  background: rgba(246,81,29,.08) !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Price underline accent */
.hp-plan-price::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: #F6511D !important;
  border-radius: 2px !important;
  margin-top: 6px !important;
  transition: width 0.3s !important;
}
.hp-plan:hover .hp-plan-price::after {
  width: 70px !important;
}

/* Card border glow on hover */
.hp-plan:hover {
  border-color: rgba(246, 81, 29, 0.25) !important;
}
.hp-plan--featured:hover {
  border-color: #F6511D !important;
}

/* ===== SPECIALIZED CARD — DARK PREMIUM ===== */
.hp-plan:last-child {
  background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%) !important;
  border: 1px solid rgba(246,81,29,.25) !important;
  color: #fff !important;
}
.hp-plan:last-child .hp-plan-name {
  color: rgba(255,255,255,.6) !important;
}
.hp-plan:last-child .hp-plan-name::before {
  color: #F6511D !important;
}
.hp-plan:last-child .hp-plan-price {
  color: #fff !important;
}
.hp-plan:last-child .hp-plan-price::after {
  background: #F6511D !important;
}
.hp-plan:last-child .hp-plan-desc {
  color: rgba(255,255,255,.55) !important;
}
.hp-plan:last-child .hp-plan-features li {
  color: rgba(255,255,255,.75) !important;
}
.hp-plan:last-child .hp-plan-features li.disabled {
  color: rgba(255,255,255,.25) !important;
}
.hp-plan:last-child .hp-plan-features .fa-check {
  background: rgba(246,81,29,.2) !important;
  color: #FB8C5E !important;
}
.hp-plan:last-child .hp-plan-btn {
  background: #F6511D !important;
  color: #fff !important;
  border-color: #F6511D !important;
}
.hp-plan:last-child .hp-plan-btn:hover {
  background: #FF6B35 !important;
  box-shadow: 0 8px 24px rgba(246,81,29,.4) !important;
}
.hp-plan:last-child::after {
  opacity: 0.2 !important;
  background-image: radial-gradient(rgba(246,81,29,.6) 1.5px, transparent 1.5px) !important;
}
.hp-plan:last-child:hover {
  border-color: #F6511D !important;
  box-shadow: 0 20px 60px rgba(246,81,29,.15) !important;
}

/* ===== SPECIALIZED: A Medida orange, rest white ===== */
.hp-plan:last-child .hp-plan-header h3,
.hp-plan:last-child .hp-plan-price {
  color: #F6511D !important;
}
.hp-plan:last-child .hp-plan-features li {
  color: #fff !important;
}
.hp-plan:last-child .hp-plan-desc {
  color: rgba(255,255,255,.8) !important;
}
.hp-plan:last-child .hp-plan-name {
  color: rgba(255,255,255,.9) !important;
}

/* A Medida title = orange */
.hp-plan-price--custom {
  color: #F6511D !important;
}

/* ===== ABOUT PAGE — HERO + DARK SECTIONS FIX ===== */

/* Hero header: orange matte gradient */
.page-hero--premium {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%) !important;
}

/* Hide shield badge */
.ph-badge {
  display: none !important;
}

/* Values section: dark navy with orange accent */
body[data-page] .values-section {
  background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%) !important;
}
.values-section .val-tag,
.values-section .section-tag {
  color: #F6511D !important;
}
.values-section .val-title,
.values-section h2 {
  color: #fff !important;
}
.values-section .val-subtitle,
.values-section p {
  color: rgba(255,255,255,.6) !important;
}
.value-card {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(246,81,29,.15) !important;
  backdrop-filter: blur(8px) !important;
}
.value-card h3 {
  color: #fff !important;
}
.value-card p {
  color: rgba(255,255,255,.65) !important;
}
.value-card:hover {
  border-color: rgba(246,81,29,.35) !important;
  background: rgba(255,255,255,.08) !important;
}

/* Stats section: orange gradient matte */
body[data-page] .stats {
  background: linear-gradient(135deg, #F6511D 0%, #E04510 50%, #D13A0A 100%) !important;
}

/* Tech marquee: dark navy */
.tech-marquee-section {
  background: #0F172A !important;
}

/* ===== ABOUT HERO — ORANGE MATTE GRADIENT ===== */
body[data-page] .page-hero--premium,
.page-hero--premium {
  background: linear-gradient(135deg, #F6511D 0%, #E04510 35%, #C73A0D 65%, #A8300A 100%) !important;
  padding: 100px 0 70px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  border-bottom: none !important;
}
body[data-page] .page-hero {
  padding: 100px 0 70px !important;
}
.page-hero--premium h1 {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.15) !important;
}
.page-hero--premium p {
  color: rgba(255,255,255,.85) !important;
}
.page-hero--premium .breadcrumb a {
  color: rgba(255,255,255,.7) !important;
}
.page-hero--premium .breadcrumb span {
  color: rgba(255,255,255,.5) !important;
}

/* Hide grid overlay and effects on orange bg */
.ph-grid-overlay, .ph-orb, .ph-scanline, .ph-accent-bar {
  display: none !important;
}

/* ===== VALUES SECTION — ORANGE MATTE ===== */
.val-section {
  background: linear-gradient(160deg, #F6511D 0%, #E04510 40%, #C73A0D 100%) !important;
  padding: 60px 0 !important;
}
.val-header .val-tag {
  color: rgba(255,255,255,.8) !important;
}
.val-header .val-tag i {
  color: #fff !important;
}
.val-title {
  color: #fff !important;
}
.val-subtitle {
  color: rgba(255,255,255,.7) !important;
}
.val-card {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
  transition: all 0.35s !important;
}
.val-card:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.35) !important;
  transform: translateY(-4px) !important;
}
.val-card h4, .val-card h3 {
  color: #fff !important;
}
.val-card p {
  color: rgba(255,255,255,.75) !important;
}
.val-icon {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

/* ===== HERO + VALUES TEXT CONTRAST FIX ===== */
.page-hero--premium h1 {
  color: #fff !important;
  text-shadow: 0 3px 15px rgba(0,0,0,.25) !important;
}
.page-hero--premium p,
.page-hero--premium .ph-sub {
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.15) !important;
}
.page-hero--premium .breadcrumb,
.page-hero--premium .breadcrumb a,
.page-hero--premium .breadcrumb span {
  color: rgba(255,255,255,.85) !important;
}
.val-card h4 {
  color: #fff !important;
  font-weight: 700 !important;
}
.val-card p {
  color: rgba(255,255,255,.9) !important;
}
.val-subtitle {
  color: rgba(255,255,255,.85) !important;
}


/* ===== MOBILE HERO FIX ===== */
@media (max-width: 768px) {
  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
  }
  .hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  .hero-tag {
    font-size: 0.72rem !important;
  }
  .hero-btns {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .hero-btns .btn {
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .hero-btns .btn i {
    margin-right: 4px !important;
  }
  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
  }
  .devices-showcase {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 14px !important;
    height: auto !important;
    max-width: 300px !important;
    margin: 10px auto 0 !important;
    overflow: visible !important;
  }
  .device-laptop {
    display: none !important;
  }
  .device-tablet {
    width: 52% !important;
    max-width: 155px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  .device-phone {
    width: 32% !important;
    max-width: 90px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  .floating-badge {
    display: none !important;
  }
  .hero-aura {
    display: none !important;
  }
  .hero-content {
    text-align: center !important;
    max-width: 100% !important;
  }
  .hero-inner {
    flex-direction: column !important;
    padding-top: 10px !important;
  }
  .snap-section.hero {
    min-height: auto !important;
    padding: 55px 0 20px !important;
  }
  /* Section titles */
  .section-title,
  .cf-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  .cf-subtitle {
    font-size: 0.82rem !important;
  }
  .section-tag {
    font-size: 0.7rem !important;
  }
  /* CF About layout */
  .cf-about-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .cf-about-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  .cf-about-desc {
    font-size: 0.85rem !important;
  }
  .cf-about-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .cf-about-stat-num {
    font-size: 1.5rem !important;
  }
  /* CF Product layout */
  .cf-product-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cf-product-visual {
    display: none !important;
  }
  .cf-product-name {
    font-size: 1.3rem !important;
  }
  .cf-product-desc {
    font-size: 0.82rem !important;
  }
  .cf-product-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cf-product-actions .cf-btn-primary {
    padding: 10px 18px !important;
    font-size: 0.82rem !important;
    text-align: center !important;
  }
  /* Pricing */
  .hp-pricing-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 16px 16px !important;
    scrollbar-width: none !important;
  }
  .hp-pricing-grid::-webkit-scrollbar {
    display: none !important;
  }
  .hp-plan {
    flex: 0 0 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: center !important;
    min-width: 0 !important;
  }
  .hp-plan-price {
    font-size: 1.8rem !important;
  }
  .hp-plan-name {
    font-size: 1rem !important;
  }
  .hp-plan-features li {
    font-size: 0.82rem !important;
  }
  .hp-plan-btn {
    font-size: 0.82rem !important;
    padding: 10px 18px !important;
  }
  /* Pricing nav dots */
  .pricing-mobile-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .pricing-mobile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: none;
    cursor: pointer;
    transition: all .3s;
    padding: 0;
  }
  .pricing-mobile-dot.active {
    background: #F6511D;
    width: 22px;
    border-radius: 4px;
  }
  .pricing-mobile-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(246,81,29,.12);
    color: #F6511D;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all .2s;
    padding: 0;
  }
  .pricing-mobile-arrow:active {
    background: rgba(246,81,29,.3);
    transform: scale(.9);
  }
  /* Contact section */
  .contact-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .contact-info,
  .contact-form-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 0.85rem !important;
  }
  /* CF pillars mobile */
  .cf-pillars {
    grid-template-columns: 1fr !important;
  }
  .cf-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .cf-stat-number {
    font-size: 1.5rem !important;
  }
  .cf-stat-label {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem !important;
  }
  .hero-desc {
    font-size: 0.82rem !important;
  }
  .hero-btns .btn {
    padding: 9px 12px !important;
    font-size: 0.75rem !important;
  }
  .section-title,
  .cf-title {
    font-size: 1.3rem !important;
  }
  .cf-about-title {
    font-size: 1.3rem !important;
  }
  .hp-plan {
    flex: 0 0 88vw !important;
    max-width: 88vw !important;
  }
}



/* ===== MARKETING SECTION — LIGHT ANIMATED EFFECTS ===== */

/* Subtle animated gradient background */
.mkt-showcase {
  background: linear-gradient(135deg, #fafbff 0%, #fff5f0 50%, #f0f4ff 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.mkt-showcase::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important;
  right: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(246,81,29,.06) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: mktFloat1 8s ease-in-out infinite alternate !important;
}
.mkt-showcase::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -80px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(243,115,53,.05) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: mktFloat2 10s ease-in-out infinite alternate !important;
}
@keyframes mktFloat1 {
  0% { transform: translate(0,0); }
  100% { transform: translate(-30px, 20px); }
}
@keyframes mktFloat2 {
  0% { transform: translate(0,0); }
  100% { transform: translate(20px, -15px); }
}

/* Tag badge pulse */
.mkt-showcase .section-tag.mkt-tag {
  animation: mktTagGlow 3s ease-in-out infinite !important;
}
@keyframes mktTagGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246,81,29,.1); }
  50% { box-shadow: 0 0 15px 3px rgba(246,81,29,.12); }
}

/* Stats: fade-in-up + counter animation class */
.mkt-showcase .cf-stat {
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  padding: 22px 18px !important;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  animation: mktSlideUp .6s ease-out both !important;
}
.mkt-showcase .cf-stat:nth-child(1) { animation-delay: .1s !important; }
.mkt-showcase .cf-stat:nth-child(2) { animation-delay: .2s !important; }
.mkt-showcase .cf-stat:nth-child(3) { animation-delay: .3s !important; }
.mkt-showcase .cf-stat:nth-child(4) { animation-delay: .4s !important; }

@keyframes mktSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mkt-showcase .cf-stat:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 35px rgba(246,81,29,.1) !important;
  border-color: rgba(246,81,29,.15) !important;
}

/* Stat bullet — live pulsing dot */
.mkt-showcase .cf-stat-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #F6511D !important;
  position: relative !important;
}
.mkt-showcase .cf-stat-bullet::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(246,81,29,.3) !important;
  animation: mktPulseRing 2s ease-out infinite !important;
}
@keyframes mktPulseRing {
  0% { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Stat numbers — animated gradient shimmer */
.mkt-showcase .cf-stat-number {
  background: linear-gradient(90deg, #F6511D 0%, #FF6B35 40%, #F37335 60%, #F6511D 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: mktShimmer 3s linear infinite !important;
  font-weight: 800 !important;
}
@keyframes mktShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Pillars: staggered entrance + hover lift */
.mkt-showcase .cf-pillar {
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  animation: mktSlideUp .6s ease-out both !important;
  overflow: hidden !important;
}
.mkt-showcase .cf-pillar:nth-child(1) { animation-delay: .15s !important; }
.mkt-showcase .cf-pillar:nth-child(2) { animation-delay: .3s !important; }
.mkt-showcase .cf-pillar:nth-child(3) { animation-delay: .45s !important; }

.mkt-showcase .cf-pillar:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(246,81,29,.08), 0 4px 16px rgba(0,0,0,.06) !important;
  border-color: rgba(246,81,29,.12) !important;
}

/* Pillar bottom accent bar on hover */
.mkt-showcase .cf-pillar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #F6511D, #FF6B35, #F37335) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}
.mkt-showcase .cf-pillar:hover::after {
  transform: scaleX(1) !important;
}

/* Pillar icons — bounce on hover */
.mkt-showcase .cf-pillar-icon {
  transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}
.mkt-showcase .cf-pillar:hover .cf-pillar-icon {
  transform: scale(1.1) rotate(-5deg) !important;
}
.mkt-showcase .cf-pillar:nth-child(1) .cf-pillar-icon {
  background: rgba(246,81,29,.1) !important;
  color: #F6511D !important;
}
.mkt-showcase .cf-pillar:nth-child(2) .cf-pillar-icon {
  background: rgba(243,115,53,.1) !important;
  color: #F37335 !important;
}
.mkt-showcase .cf-pillar:nth-child(3) .cf-pillar-icon {
  background: rgba(255,107,53,.1) !important;
  color: #FF6B35 !important;
}

/* Feature tags — slide-in effect */
.mkt-showcase .cf-pillar-features span {
  border-radius: 20px !important;
  transition: all .3s !important;
}
.mkt-showcase .cf-pillar:hover .cf-pillar-features span {
  background: rgba(246,81,29,.06) !important;
  border-color: rgba(246,81,29,.15) !important;
}

/* Link arrow slide */
.mkt-showcase .cf-link i {
  transition: transform .3s !important;
}
.mkt-showcase .cf-link:hover i {
  transform: translateX(4px) !important;
}

/* CTA buttons */
.mkt-showcase .cf-btn-primary {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(246,81,29,.2) !important;
  transition: all .35s !important;
  position: relative !important;
  overflow: hidden !important;
}
.mkt-showcase .cf-btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) !important;
  transition: left .5s !important;
}
.mkt-showcase .cf-btn-primary:hover::before {
  left: 100% !important;
}
.mkt-showcase .cf-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(246,81,29,.3) !important;
}

.mkt-showcase .cf-btn-ghost {
  border: 1px solid rgba(246,81,29,.2) !important;
  color: #F6511D !important;
  border-radius: 12px !important;
  transition: all .35s !important;
}
.mkt-showcase .cf-btn-ghost:hover {
  background: rgba(246,81,29,.05) !important;
  border-color: #F6511D !important;
  transform: translateY(-2px) !important;
}

/* ===== MOBILE adjustments ===== */
@media (max-width: 768px) {
  .mkt-showcase::before {
    width: 200px !important;
    height: 200px !important;
  }
  .mkt-showcase::after {
    width: 180px !important;
    height: 180px !important;
  }
  .mkt-showcase .cf-stat {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .mkt-showcase .cf-pillar {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
  .mkt-showcase .cf-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mkt-showcase .cf-btn-primary,
  .mkt-showcase .cf-btn-ghost {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-size: .82rem !important;
  }
}


/* ===== MOBILE about adjustments ===== */
@media (max-width: 768px) {
  .about::before {
    width: 200px !important;
    height: 200px !important;
  }
  .cf-about-stat::after {
    margin: 6px auto 0 !important;
  }
  .cf-cap {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
}


/* ===== MARKETING PILLARS — AUTO-ROTATE SLIDESHOW ON MOBILE ===== */
@media (max-width: 768px) {
  .mkt-showcase .cf-pillars,
  .cf-pillars {
    display: block !important;
    position: relative !important;
    min-height: 260px !important;
    overflow: hidden !important;
  }
  .mkt-showcase .cf-pillar,
  .cf-pillar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 0 !important;
    transform: translateX(30px) !important;
    transition: opacity .5s ease, transform .5s ease !important;
    pointer-events: none !important;
  }
  .cf-pillar.pillar-active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  /* Progress bar + dots */
  .pillar-mobile-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 14px !important;
  }
  .pillar-mobile-dot {
    width: 30px;
    height: 4px;
    border-radius: 4px;
    background: rgba(0,0,0,.08);
    border: none;
    cursor: pointer;
    transition: all .3s;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  .pillar-mobile-dot.active {
    background: rgba(246,81,29,.15);
  }
  .pillar-mobile-dot.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #F6511D;
    border-radius: 4px;
    animation: pillarProgress 4s linear forwards;
  }
  @keyframes pillarProgress {
    from { width: 0; }
    to { width: 100%; }
  }
}


/* ===== MKT TITLE + STATS MOBILE FIXES ===== */

/* Remove white bg from section tag */
.mkt-showcase .section-tag.mkt-tag,
.mkt-showcase .section-tag {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Title animated underline effect */
.mkt-showcase .cf-title {
  position: relative !important;
  display: inline-block !important;
}
.mkt-showcase .cf-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #F6511D, #FF6B35) !important;
  animation: mktTitleLine 2s ease-in-out infinite alternate !important;
}
@keyframes mktTitleLine {
  0% { width: 40px; opacity: .6; }
  100% { width: 100px; opacity: 1; }
}

/* Title accent shimmer */
.mkt-showcase .cf-accent {
  background: linear-gradient(90deg, #F6511D 0%, #FF6B35 30%, #F37335 60%, #F6511D 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: mktAccentShimmer 3s linear infinite !important;
}
@keyframes mktAccentShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ===== STATS: compact 2x2 grid on mobile ===== */
@media (max-width: 768px) {
  .mkt-showcase .cf-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  .mkt-showcase .cf-stat {
    padding: 10px 10px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }
  .mkt-showcase .cf-stat-bullet {
    width: 6px !important;
    height: 6px !important;
    margin: 0 auto 4px !important;
  }
  .mkt-showcase .cf-stat-bullet::after {
    inset: -3px !important;
  }
  .mkt-showcase .cf-stat-number {
    font-size: 1.3rem !important;
    display: block !important;
  }
  .mkt-showcase .cf-stat-label {
    font-size: .65rem !important;
    line-height: 1.3 !important;
    display: block !important;
  }
  /* Title size on mobile */
  .mkt-showcase .cf-title {
    font-size: 1.4rem !important;
    display: block !important;
  }
  .mkt-showcase .cf-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .mkt-showcase .cf-subtitle {
    font-size: .78rem !important;
  }
  .mkt-showcase .cf-section-header {
    text-align: center !important;
    margin-bottom: 16px !important;
  }
}


/* ===== BROWSER MOCKUP — TABBED COMPONENT ===== */
.vx-browser-mockup {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .4s;
}
.vx-browser-mockup:hover {
  box-shadow: 0 16px 60px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
}

/* Top bar */
.vx-browser-bar {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vx-browser-dots {
  display: flex;
  gap: 6px;
  padding-bottom: 0;
}
.vx-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.vx-dot-red { background: #ff5f57; }
.vx-dot-yellow { background: #ffbd2e; }
.vx-dot-green { background: #28ca42; }

/* Tabs */
.vx-browser-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.vx-browser-tabs::-webkit-scrollbar { display: none; }

.vx-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: .82rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .3s;
  white-space: nowrap;
  font-family: inherit;
}
.vx-tab:hover {
  color: #444;
}
.vx-tab.active {
  color: #F6511D;
  border-bottom-color: #F6511D;
  font-weight: 600;
}

/* Content */
.vx-browser-content {
  padding: 28px 28px 24px;
  min-height: 200px;
  position: relative;
}
.vx-panel {
  display: none;
  animation: none;
}
.vx-panel.active {
  display: block;
}
.vx-panel.vx-panel-enter {
  animation: vxPanelIn .4s ease-out;
}
@keyframes vxPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vx-panel-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.vx-panel-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
  line-height: 1.2;
}
.vx-panel-desc {
  font-size: .88rem;
  color: #555;
  line-height: 1.65;
  margin-bottom: 16px;
}

.vx-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vx-panel-tags span {
  font-size: .7rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  background: #f3f4f6;
  color: #555;
  border: 1px solid rgba(0,0,0,.04);
  transition: all .3s;
}
.vx-panel-tags span:hover {
  background: rgba(246,81,29,.06);
  border-color: rgba(246,81,29,.12);
  color: #F6511D;
}

/* Progress bar */
.vx-browser-progress {
  height: 2px;
  background: #f0f0f0;
}
.vx-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F6511D, #FF6B35);
  transition: width 5s linear;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .vx-browser-mockup {
    border-radius: 12px;
  }
  .vx-browser-bar {
    padding: 8px 12px 0;
    gap: 8px;
  }
  .vx-dot {
    width: 8px;
    height: 8px;
  }
  .vx-tab {
    padding: 8px 12px;
    font-size: .7rem;
  }
  .vx-browser-content {
    padding: 18px 16px 16px;
    min-height: 160px;
  }
  .vx-panel-badge {
    font-size: .58rem;
    padding: 3px 10px;
    margin-bottom: 8px;
  }
  .vx-panel-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .vx-panel-desc {
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .vx-panel-tags span {
    font-size: .6rem;
    padding: 3px 8px;
  }
  .cf-about-right {
    display: block !important;
    grid-template-columns: unset !important;
  }
}

/* ===== BROWSER MOCKUP OVERRIDES ===== */

/* Reset cf-about-right for mockup */
.cf-about-right {
  display: block !important;
  grid-template-columns: unset !important;
}

/* Hide old cf-cap styles — replaced by mockup */
.cf-about-right .cf-cap {
  display: none !important;
}

/* Ensure mockup panels work */
.vx-browser-mockup .vx-panel {
  display: none !important;
}
.vx-browser-mockup .vx-panel.active {
  display: block !important;
}

/* About section light bg */
.about {
  background: linear-gradient(160deg, #fffaf7 0%, #fff 40%, #f7f9ff 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Title effects */
.cf-about-title .cf-accent {
  background: linear-gradient(135deg, #F6511D, #FF6B35, #F37335) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: aboutTitleShimmer 4s linear infinite !important;
}
@keyframes aboutTitleShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Stats shimmer */
.cf-about-stat-num {
  background: linear-gradient(90deg, #F6511D 0%, #FF6B35 40%, #F37335 60%, #F6511D 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: aboutNumShimmer 3s linear infinite !important;
  font-weight: 800 !important;
}
@keyframes aboutNumShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Stats mobile inline strip */
@media (max-width: 768px) {
  .cf-about-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .cf-about-left { width: 100% !important; text-align: center !important; }
  .cf-about-right { width: 100% !important; }
  .cf-about-title { font-size: 1.4rem !important; line-height: 1.2 !important; }
  .cf-about-desc { font-size: .82rem !important; max-width: 340px !important; margin: 0 auto !important; }

  .cf-about-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 14px 0 !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }
  .cf-about-stat {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 4px !important;
    border-right: 1px solid rgba(0,0,0,.06) !important;
  }
  .cf-about-stat:last-child { border-right: none !important; }
  .cf-about-stat::after { display: none !important; }
  .cf-about-stat-num { font-size: 1.1rem !important; display: block !important; line-height: 1.1 !important; }
  .cf-about-stat-txt {
    font-size: .5rem !important; text-transform: uppercase !important;
    letter-spacing: .3px !important; color: #999 !important;
    line-height: 1.25 !important; display: block !important;
    margin-top: 3px !important; word-spacing: 2px !important;
  }
  .cf-about-stat-txt br { content: ' ' !important; display: inline !important; }
  .cf-about-stat:hover { transform: none !important; }
}


/* ===== MOBILE PRODUCT TABS ===== */
@media (max-width: 768px) {
  .vx-prod-tabs-wrap {
    margin-top: 16px;
  }
  .vx-prod-tabs {
    justify-content: flex-start;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
  }
  .vx-prod-tab {
    padding: 8px 12px;
    font-size: .68rem;
    border-radius: 8px;
    gap: 4px;
  }
  .vx-prod-tab i {
    font-size: .6rem;
  }
  /* Hide text on very small, show only icon */
  .vx-prod-tab span {
    display: inline;
  }
  .vx-prod-progress {
    width: 120px;
    margin-top: 10px;
  }
}
@media (max-width: 400px) {
  .vx-prod-tab {
    padding: 7px 10px;
    font-size: .6rem;
  }
}



/* ===== PRODUCT CARD REDESIGN V2 ===== */
.vx-product-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,.04);
  transition: box-shadow .4s;
  margin-top: 32px;
  width: 100%;
}
.vx-product-card:hover {
  box-shadow: 0 16px 60px rgba(0,0,0,.07);
}

.vx-pcard-accent {
  height: 3px;
  background: linear-gradient(90deg, #F6511D, #F6511D44);
  transition: background .5s;
}

.vx-pcard-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
  min-height: 360px;
}

/* Info side */
.vx-pcard-info {
  transition: opacity .3s;
  padding: 40px 44px;
}
.vx-pcard-cat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #F6511D;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vx-pcard-cat::before {
  content: '';
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.vx-pcard-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 14px;
  line-height: 1.15;
}
.vx-pcard-desc {
  font-size: .92rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 520px;
}
.vx-pcard-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.vx-pcard-features span {
  font-size: .72rem;
  color: #555;
  background: #f5f5f7;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(0,0,0,.04);
  transition: all .3s;
}
.vx-pcard-features span i {
  color: #22c55e;
  font-size: .6rem;
}
.vx-pcard-features span:hover {
  background: rgba(246,81,29,.05);
  border-color: rgba(246,81,29,.12);
  transform: translateY(-1px);
}

.vx-pcard-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.vx-pcard-btn-primary {
  background: linear-gradient(135deg, #F6511D, #FF6B35);
  color: #fff;
  border: none;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .84rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(246,81,29,.2);
  position: relative;
  overflow: hidden;
}
.vx-pcard-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .6s;
}
.vx-pcard-btn-primary:hover::after {
  left: 100%;
}
.vx-pcard-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(246,81,29,.3);
}
.vx-pcard-link {
  color: #F6511D;
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .3s;
}
.vx-pcard-link:hover { gap: 10px; }

/* Visual side — rich animated panel */
.vx-pcard-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: linear-gradient(135deg, #fafbfc, #f5f5f7);
  border-left: 1px solid rgba(0,0,0,.04);
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
}
/* Animated orb in visual */
.vx-pcard-visual::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pcard-glow, rgba(246,81,29,.06)) 0%, transparent 70%);
  animation: pcardGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes pcardGlow {
  0% { transform: translate(-20px, 20px) scale(1); opacity: .5; }
  100% { transform: translate(20px, -20px) scale(1.2); opacity: 1; }
}

.vx-pcard-icon-main {
  width: 90px;
  height: 90px;
  border-radius: 22px;
  background: rgba(246,81,29,.07);
  color: #F6511D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 30px rgba(246,81,29,.1);
  position: relative;
  z-index: 1;
  animation: pcardIconFloat 3s ease-in-out infinite;
}
@keyframes pcardIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.vx-product-card:hover .vx-pcard-icon-main {
  transform: scale(1.08) rotate(-5deg);
}

.vx-pcard-stats {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.vx-pcard-stat {
  text-align: center;
  padding: 14px 18px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.04);
  min-width: 80px;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
}
.vx-pcard-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.vx-pcard-stat-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: #F6511D;
  line-height: 1;
}
.vx-pcard-stat-label {
  font-size: .58rem;
  color: #999;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ===== MOBILE PRODUCT CARD V2 ===== */
@media (max-width: 768px) {
  .vx-product-card {
    border-radius: 14px;
    margin-top: 16px;
  }
  .vx-pcard-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .vx-pcard-info {
    padding: 22px 18px;
  }
  .vx-pcard-visual {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,.04);
    flex-direction: row;
    padding: 20px 16px;
    gap: 14px;
  }
  .vx-pcard-visual::before {
    width: 100px; height: 100px;
  }
  .vx-pcard-icon-main {
    width: 52px; height: 52px;
    font-size: 1.3rem; border-radius: 14px;
  }
  .vx-pcard-stats { gap: 6px; }
  .vx-pcard-stat {
    padding: 8px 12px; border-radius: 10px; min-width: 60px;
  }
  .vx-pcard-stat-num { font-size: .85rem; }
  .vx-pcard-stat-label { font-size: .48rem; }
  .vx-pcard-title { font-size: 1.15rem; }
  .vx-pcard-desc { font-size: .76rem; }
  .vx-pcard-features span { font-size: .6rem; padding: 4px 8px; }
  .vx-pcard-btn-primary { width: 100%; justify-content: center; padding: 11px 18px; font-size: .78rem; }
  .vx-pcard-actions { flex-direction: column; gap: 8px; align-items: flex-start; }
}


/* ===== PRODUCT VISUAL — FLOATING ANIMATED ELEMENTS ===== */

/* Orbiting rings */
.vx-orbit {
  position: absolute;
  border: 1px solid rgba(246,81,29,.08);
  border-radius: 50%;
  pointer-events: none;
}
.vx-orbit-1 {
  width: 200px; height: 200px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: vxOrbitSpin 20s linear infinite;
}
.vx-orbit-2 {
  width: 280px; height: 280px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: vxOrbitSpin 30s linear infinite reverse;
  border-style: dashed;
}
.vx-orbit-3 {
  width: 140px; height: 140px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: vxOrbitSpin 15s linear infinite;
  border-width: 1.5px;
}
@keyframes vxOrbitSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Floating satellite nodes */
.vx-float-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vx-fnode {
  position: absolute;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  color: #555;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  z-index: 2;
}
.vx-fnode-1 { top: 12%; left: 15%; animation: vxFloat1 4s ease-in-out infinite; }
.vx-fnode-2 { top: 8%; right: 18%; animation: vxFloat2 5s ease-in-out infinite; }
.vx-fnode-3 { top: 42%; right: 8%; animation: vxFloat3 4.5s ease-in-out infinite; }
.vx-fnode-4 { bottom: 25%; right: 15%; animation: vxFloat4 5.5s ease-in-out infinite; }
.vx-fnode-5 { bottom: 22%; left: 10%; animation: vxFloat5 4s ease-in-out infinite; }
.vx-fnode-6 { top: 45%; left: 5%; animation: vxFloat6 5s ease-in-out infinite; }

@keyframes vxFloat1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5px,-10px); } }
@keyframes vxFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-8px,8px); } }
@keyframes vxFloat3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-12px); } }
@keyframes vxFloat4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,6px); } }
@keyframes vxFloat5 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-8px); } }
@keyframes vxFloat6 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5px,10px); } }

/* Floating tech labels */
.vx-float-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vx-flabel {
  position: absolute;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: #aaa;
  background: rgba(255,255,255,.7);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.04);
  backdrop-filter: blur(4px);
  z-index: 1;
}
.vx-flabel-1 { top: 28%; left: 4%; animation: vxFloat2 6s ease-in-out infinite; }
.vx-flabel-2 { top: 20%; right: 5%; animation: vxFloat1 7s ease-in-out infinite; }
.vx-flabel-3 { bottom: 38%; right: 3%; animation: vxFloat5 5s ease-in-out infinite; }
.vx-flabel-4 { bottom: 35%; left: 18%; animation: vxFloat3 6.5s ease-in-out infinite; }

/* Pulse ring */
.vx-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  border: 2px solid rgba(246,81,29,.1);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: vxPulseRing 3s ease-out infinite;
  pointer-events: none;
}
@keyframes vxPulseRing {
  0% { width: 80px; height: 80px; opacity: .5; }
  100% { width: 220px; height: 220px; opacity: 0; }
}

/* Ensure visual panel is positioned */
.vx-pcard-visual {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.vx-pcard-icon-main {
  position: relative;
  z-index: 3;
}
.vx-pcard-stats {
  position: relative;
  z-index: 3;
}

/* ===== MOBILE floating elements ===== */
@media (max-width: 768px) {
  .vx-pcard-visual {
    min-height: 200px;
    padding: 30px 16px;
    flex-direction: column;
    gap: 16px;
  }
  .vx-orbit-1 { width: 120px; height: 120px; }
  .vx-orbit-2 { width: 170px; height: 170px; }
  .vx-orbit-3 { width: 80px; height: 80px; }
  .vx-fnode { width: 28px; height: 28px; font-size: .6rem; border-radius: 8px; }
  .vx-flabel { font-size: .45rem; padding: 2px 5px; }
  .vx-pcard-icon-main { width: 56px; height: 56px; font-size: 1.4rem; }
  .vx-pcard-stats { flex-direction: row; gap: 6px; }
  .vx-pcard-stat { padding: 8px 10px; min-width: 58px; }
  .vx-pcard-stat-num { font-size: .8rem; }
  .vx-pulse-ring { display: none; }
}


/* ===== PRODUCTS SECTION — TOP SPACING FIX ===== */
.products-section,
section.projects.products-section {
  padding-top: 100px !important;
}
.products-section .section-tag {
  position: relative !important;
  z-index: 1 !important;
}

/* ===== PRODUCTS — REDUCE GAP TITLE TO CARD ===== */
.products-section .cf-section-header {
  margin-bottom: 12px !important;
}
.vx-product-card {
  margin-top: 12px !important;
}

/* ===== SNAP DOTS — ORANGE GRADIENT OVERRIDE ===== */
.snap-dots-line {
  background: rgba(246,81,29,.1) !important;
}
.snap-dots-line-fill {
  background: linear-gradient(to bottom, #F6511D, #FF6B35) !important;
}
.snap-dot {
  border-color: rgba(246,81,29,.2) !important;
}
.snap-dot::after {
  background: #F6511D !important;
}
.snap-dot.passed {
  border-color: #F6511D !important;
  background: #F6511D !important;
}
.snap-dot.active {
  border-color: #F6511D !important;
  background: #F6511D !important;
  box-shadow: 0 0 12px rgba(246,81,29,.35) !important;
}
.snap-dot.active::before {
  border-color: rgba(246,81,29,.25) !important;
}
.snap-dot.future {
  border-color: rgba(246,81,29,.15) !important;
}
.snap-dot:hover {
  border-color: rgba(246,81,29,.5) !important;
}
.snap-dots-label {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
}
.snap-dots-label::after {
  border-left-color: #F6511D !important;
}

/* ===== WHATSAPP — ORANGE BRAND OVERRIDE ===== */
.whatsapp-float {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  box-shadow: 0 4px 14px rgba(246,81,29,.3), 0 0 20px rgba(246,81,29,.12) !important;
}
.whatsapp-float:hover {
  box-shadow: 0 6px 24px rgba(246,81,29,.4), 0 0 30px rgba(246,81,29,.2) !important;
}
.whatsapp-float-pulse {
  background: rgba(246,81,29,.15) !important;
}
.whatsapp-float-tooltip {
  color: #F6511D !important;
}

/* ===== SNAP DOTS — FORCE ORANGE (HIGH SPECIFICITY) ===== */
.snap-dots-nav .snap-dots-track .snap-dots-line {
  background: rgba(246,81,29,.1) !important;
}
.snap-dots-nav .snap-dots-track .snap-dots-line-fill {
  background: linear-gradient(to bottom, #F6511D, #FF6B35) !important;
}
.snap-dots-nav .snap-dot,
.snap-dots-list .snap-dot {
  border-color: rgba(246,81,29,.2) !important;
}
.snap-dots-nav .snap-dot::after,
.snap-dots-list .snap-dot::after {
  background: #F6511D !important;
}
.snap-dots-nav .snap-dot.passed,
.snap-dots-list .snap-dot.passed {
  border-color: #F6511D !important;
  background: #F6511D !important;
}
.snap-dots-nav .snap-dot.active,
.snap-dots-list .snap-dot.active {
  border-color: #F6511D !important;
  background: #F6511D !important;
  box-shadow: 0 0 12px rgba(246,81,29,.35) !important;
}
.snap-dots-nav .snap-dot.active::before,
.snap-dots-list .snap-dot.active::before {
  border-color: rgba(246,81,29,.25) !important;
}
.snap-dots-nav .snap-dot.active::after,
.snap-dots-list .snap-dot.active::after {
  background: #fff !important;
}
.snap-dots-nav .snap-dot.future,
.snap-dots-list .snap-dot.future {
  border-color: rgba(246,81,29,.15) !important;
  background: transparent !important;
}
.snap-dots-nav .snap-dot:hover,
.snap-dots-list .snap-dot:hover {
  border-color: rgba(246,81,29,.5) !important;
}
.snap-dots-nav .snap-dots-label,
#snapDotsNav .snap-dots-label {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  color: #fff !important;
}
.snap-dots-nav .snap-dots-label::after,
#snapDotsNav .snap-dots-label::after {
  border-left-color: #F6511D !important;
}

/* ===== HIDE SNAP DOTS LABEL + DIAMOND ===== */
.snap-dots-label,
#snapDotsLabel,
.snap-dots-nav .snap-dots-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Hide any diamond/arrow decorators on dots */
.snap-dot[title] {
  title: none;
}
.snap-dots-nav .snap-dots-label::before,
.snap-dots-nav .snap-dots-label::after,
#snapDotsLabel::before,
#snapDotsLabel::after {
  display: none !important;
}


/* ===== MEGA MENU — CLOUDFLARE CLEAN STYLE ===== */

/* Main container */
.megamenu {
  box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04) !important;
  border-top: 2px solid #F6511D !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* Inner layout — main + sidebar */
.mm-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.mm-main {
  flex: 1 !important;
  padding: 28px 36px 20px !important;
}
.mm-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

/* Column titles */
.mm-col-title {
  color: #F6511D !important;
  border-bottom: 1px solid rgba(246,81,29,.1) !important;
  font-size: .68rem !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
}
.mm-col-title i { color: #F6511D !important; }

/* Items — clean hover */
.mm-item {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  gap: 12px !important;
}
.mm-item:hover {
  background: rgba(246,81,29,.03) !important;
}
.mm-item::before {
  background: #F6511D !important;
}
.mm-item-icon {
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  border-radius: 8px !important;
  font-size: .8rem !important;
}
.mm-item-text h6 {
  font-size: .78rem !important;
  font-weight: 600 !important;
}
.mm-item:hover .mm-item-text h6 { color: #F6511D !important; }
.mm-item-text p {
  font-size: .65rem !important;
  color: #999 !important;
  line-height: 1.35 !important;
}

/* Footer */
.mm-footer {
  border-top: 1px solid rgba(0,0,0,.05) !important;
  padding: 12px 0 0 !important;
}
.mm-cta-btn {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  box-shadow: 0 4px 14px rgba(246,81,29,.2) !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-size: .75rem !important;
}
.mm-cta-btn:hover {
  background: linear-gradient(135deg, #FF6B35, #F6511D) !important;
  box-shadow: 0 8px 24px rgba(246,81,29,.3) !important;
}
.mm-all-link { color: #F6511D !important; font-size: .75rem !important; }
.mm-all-link:hover { color: #FF6B35 !important; }

/* Sidebar */
.mm-sidebar {
  width: 240px !important;
  min-width: 240px !important;
  background: #f9fafb !important;
  border-left: 1px solid rgba(0,0,0,.05) !important;
  padding: 24px 20px !important;
}
.mm-sidebar h6 {
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin: 0 0 8px !important;
}
.mm-sidebar-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-bottom: 16px !important;
}
.mm-sidebar-links a {
  font-size: .72rem !important;
  color: #555 !important;
  text-decoration: none !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: #fff !important;
  transition: all .2s !important;
}
.mm-sidebar-links a:hover {
  border-color: rgba(246,81,29,.2) !important;
  color: #F6511D !important;
  background: rgba(246,81,29,.03) !important;
}
.mm-sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .75rem !important;
  color: #555 !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
  transition: color .2s !important;
}
.mm-sidebar-item i { font-size: .65rem !important; color: #bbb !important; }
.mm-sidebar-item:hover { color: #F6511D !important; }
.mm-sidebar-item:hover i { color: #F6511D !important; }

.mm-sidebar-section {
  margin-bottom: 14px !important;
}
.mm-sidebar-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all .3s !important;
  box-shadow: 0 3px 10px rgba(246,81,29,.15) !important;
  margin-top: 8px !important;
}
.mm-sidebar-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(246,81,29,.25) !important;
}
.mm-sidebar-cta i { font-size: .6rem !important; }

/* ===== MOBILE MEGA MENU ===== */
@media (max-width: 992px) {
  .megamenu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: all !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .4s ease !important;
    border-top: none !important;
    box-shadow: none !important;
  }
  .has-megamenu.mm-mobile-open .megamenu {
    max-height: 2000px !important;
    border-top: 2px solid #F6511D !important;
  }
  .mm-inner {
    flex-direction: column !important;
    padding: 0 !important;
  }
  .mm-main {
    padding: 16px !important;
  }
  .mm-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mm-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    padding: 16px !important;
  }
  .mm-item {
    padding: 6px 8px !important;
  }
  .mm-item-icon {
    width: 28px !important; height: 28px !important; min-width: 28px !important;
    font-size: .7rem !important;
  }
  .mm-item-text p { display: none !important; }
  .mm-footer { flex-direction: column !important; gap: 8px !important; }
  .mm-cta-btn { width: 100% !important; justify-content: center !important; }
  .mm-arrow { display: inline-block !important; }
}


/* ===== MEGA MENU SIDEBARS — FILL EMPTY SPACE ===== */

/* Marketing 360 mega sidebar fix */
.has-megamenu .mm-inner {
  display: flex !important;
  flex-direction: row !important;
}
.has-megamenu .mm-inner > .mm-grid:only-child {
  flex: 1 !important;
}

/* Ensure all mega menus have proper sidebar bg */
.mm-sidebar {
  background: #f9fafb !important;
  border-left: 1px solid rgba(0,0,0,.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 220px !important;
}

/* ===== TESTING DROPDOWN — PREMIUM STYLE ===== */
.has-dropdown .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08) !important;
  padding: 8px !important;
  min-width: 220px !important;
  border-top: 2px solid #F6511D !important;
}
.has-dropdown .dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
}
.has-dropdown .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  border-radius: 8px !important;
  transition: all .2s !important;
  text-decoration: none !important;
}
.has-dropdown .dropdown-menu li a:hover {
  background: rgba(246,81,29,.04) !important;
  color: #F6511D !important;
}

/* ===== MARKETING & CLOUD MEGA — SINGLE COLUMN FIX ===== */
/* When megamenu has no mm-main wrapper (Marketing/Cloud) */
.megamenu .mm-inner > .mm-grid {
  padding: 24px 32px !important;
}
.megamenu .mm-footer {
  padding: 12px 32px 16px !important;
}

/* Cloud mega CTA */
.megamenu .mm-inner .mm-cta-btn,
.megamenu .mm-cta-btn {
  background: linear-gradient(135deg, #F6511D, #FF6B35) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(246,81,29,.2) !important;
}


/* ===== MOBILE MEGA MENU — FULL FIX ===== */
@media (max-width: 992px) {
  /* Testing dropdown mobile */
  .has-dropdown .dropdown-menu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    background: #f8f9fc !important;
    border-radius: 8px !important;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown .dropdown-menu {
    display: none !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }
  .has-dropdown.open .dropdown-menu {
    display: flex !important;
  }
  .has-dropdown .dropdown-menu li {
    width: 100% !important;
    display: block !important;
  }
  .has-dropdown .dropdown-menu li a {
    padding: 8px 16px !important;
    font-size: .8rem !important;
  }

  /* Mega menu mobile — FULL WIDTH, NO SIDEBAR, NO TRUNCATION */
  .megamenu {
    position: static !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: #f8f9fc !important;
    border-top: 1px solid rgba(246,81,29,.1) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: all !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .4s ease !important;
    display: block !important;
  }
  .has-megamenu.mm-mobile-open .megamenu {
    max-height: 3000px !important;
  }

  .mm-inner {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .mm-main {
    padding: 12px 16px !important;
    width: 100% !important;
  }
  .mm-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .mm-col-title {
    font-size: .65rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }
  
  /* ITEMS — FULL TEXT, NO TRUNCATION */
  .mm-item {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .mm-item-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 7px !important;
    font-size: .7rem !important;
  }
  .mm-item-text h6 {
    font-size: .78rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .mm-item-text p {
    display: none !important;
  }

  /* HIDE SIDEBAR ON MOBILE */
  .mm-sidebar {
    display: none !important;
  }

  /* Footer */
  .mm-footer {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 16px 14px !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
  }
  .mm-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: .78rem !important;
  }
  .mm-all-link {
    text-align: center !important;
    display: block !important;
    font-size: .75rem !important;
  }

  /* Arrow indicator */
  .mm-arrow {
    display: inline-block !important;
    font-size: .5rem !important;
    margin-left: 4px !important;
    transition: transform .3s !important;
  }
  .has-megamenu.mm-mobile-open .mm-arrow {
    transform: rotate(180deg) !important;
  }
}




/* ===== CONSOLIDATED MENU FIX ===== */



/* ===== MOBILE NAV — ALL FIXES ===== */
@media (max-width: 992px) {
  /* White background nav */
  .nav-links,
  #navLinks,
  ul.nav-links {
    background: #fff !important;
  }
  .nav-links a,
  #navLinks a {
    color: #1a1a2e !important;
  }
  .nav-links a:hover,
  .nav-links a.nav-active {
    color: #F6511D !important;
  }

  /* Megamenu mobile: hidden by default, accordion open */
  .megamenu {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .4s ease !important;
    background: #f8f9fc !important;
    border-top: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    display: block !important;
    padding: 0 !important;
  }
  /* Don't show on hover in mobile */
  .has-megamenu:hover .megamenu {
    max-height: 0 !important;
  }
  /* Only show when toggled */
  .has-megamenu.mm-mobile-open .megamenu {
    max-height: 3000px !important;
    border-top: 2px solid #F6511D !important;
  }

  /* Inner layout — vertical stack */
  .megamenu .mm-inner {
    display: block !important;
    padding: 8px 0 !important;
  }
  .megamenu .mm-main {
    display: block !important;
    padding: 8px 14px !important;
  }
  .megamenu .mm-grid {
    display: block !important;
  }
  .megamenu .mm-col {
    display: block !important;
    margin-bottom: 10px !important;
  }
  .megamenu .mm-col-title {
    font-size: .6rem !important;
    margin-bottom: 4px !important;
    padding: 4px 0 !important;
  }

  /* Items — clean list */
  .megamenu .mm-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 8px !important;
    border-radius: 6px !important;
    width: 100% !important;
  }
  .megamenu .mm-item-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    font-size: .65rem !important;
  }
  .megamenu .mm-item-text {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .megamenu .mm-item-text h6 {
    font-size: .78rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin: 0 !important;
    color: #1a1a2e !important;
  }
  .megamenu .mm-item-text p {
    display: none !important;
  }

  /* Hide sidebar on mobile */
  .megamenu .mm-sidebar {
    display: none !important;
  }

  /* Footer */
  .megamenu .mm-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 14px 12px !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
  }
  .megamenu .mm-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }
  .megamenu .mm-all-link {
    text-align: center !important;
    display: block !important;
  }

  /* Arrow */
  .mm-arrow {
    display: inline-block !important;
  }
  .has-megamenu.mm-mobile-open .mm-arrow {
    transform: rotate(180deg) !important;
  }
}