/* ========================================
   HOMEPAGE v5 — FIXES (Feb 10, 2026)
   Applied on top of jobeyze-home.css
   ======================================== */

/* FIX 1: Hero top gap — remove min-height, reduce padding */
.jz-hero {
  min-height: auto !important;
  padding: 60px 24px 80px !important;
}

/* FIX 2: Orbs — more visible, centered behind text, more orb-like presence */
.jz-orb-1 {
  width: 800px !important;
  height: 800px !important;
  background: radial-gradient(circle, rgba(208, 0, 58, 0.6) 0%, rgba(208, 0, 58, 0.2) 40%, transparent 65%) !important;
  top: 15% !important;
  left: auto !important;
  right: -5% !important;
  transform: none !important;
  filter: blur(50px) !important;
}

.jz-orb-2 {
  width: 700px !important;
  height: 700px !important;
  background: radial-gradient(circle, rgba(171, 35, 121, 0.5) 0%, rgba(171, 35, 121, 0.15) 40%, transparent 65%) !important;
  bottom: -5% !important;
  left: -5% !important;
  filter: blur(50px) !important;
}

.jz-orb-3 {
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(208, 0, 58, 0.35) 0%, rgba(171, 35, 121, 0.1) 40%, transparent 65%) !important;
  top: 10% !important;
  left: 60% !important;
  filter: blur(45px) !important;
}

/* FIX 3: Remove scroll indicator */
.jz-scroll-hint {
  display: none !important;
}

/* FIX 4: Consistent section spacing — all sections get 100px padding */
.jz-products,
.jz-paths,
.jz-trust,
.jz-testimonials,
.jz-footer-cta {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.jz-testimonials {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* FIX 5: Pink accent line — add to ALL major sections consistently */
.jz-products::before,
.jz-testimonials::before,
.jz-footer-cta::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100px !important;
  height: 3px !important;
  background: linear-gradient(135deg, #D0003A, #AB2379) !important;
  border-radius: 2px !important;
}

.jz-paths,
.jz-trust,
.jz-footer-cta {
  position: relative !important;
}

.jz-paths::before,
.jz-trust::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100px !important;
  height: 3px !important;
  background: linear-gradient(135deg, #D0003A, #AB2379) !important;
  border-radius: 2px !important;
  z-index: 2 !important;
}

/* Remove duplicate accent line in footer CTA (it had a manual div) */
.jz-footer-cta .jz-accent-line {
  display: none !important;
}

.jz-footer-cta::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100px !important;
  height: 3px !important;
  background: linear-gradient(135deg, #D0003A, #AB2379) !important;
  border-radius: 2px !important;
}

/* FIX 6: Consistent section title bottom margin */
.jz-section-title {
  margin-bottom: 56px !important;
}

/* FIX 7: Mobile responsive adjustments for reduced hero */
@media (max-width: 900px) {
  .jz-hero {
    padding: 55px 20px 60px !important;
  }
}

@media (max-width: 600px) {
  .jz-hero {
    padding: 16px 16px 40px !important;
  }
  .jz-products,
  .jz-paths,
  .jz-trust,
  .jz-testimonials,
  .jz-footer-cta {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .jz-testimonials {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

/* FIX: Mobile orbs — move outside text area, orbit around edges */
}
@media (max-width: 768px) {
  .jz-orb-1 {
    width: 300px !important;
    height: 300px !important;
    top: auto !important;
    bottom: -8% !important;
    left: 60% !important;
    right: auto !important;
    transform: none !important;
    opacity: 0.7 !important;
    filter: blur(45px) !important;
    animation: jz-orb-rotate-1 12s ease-in-out infinite !important;
  }
  .jz-orb-2 {
    width: 250px !important;
    height: 250px !important;
    top: auto !important;
    bottom: 5% !important;
    left: -8% !important;
    opacity: 0.6 !important;
    filter: blur(45px) !important;
    animation: jz-orb-rotate-2 15s ease-in-out infinite !important;
  }
  .jz-orb-3 {
    width: 200px !important;
    height: 200px !important;
    top: auto !important;
    bottom: 15% !important;
    left: auto !important;
    right: -5% !important;
    opacity: 0.5 !important;
    filter: blur(40px) !important;
    animation: jz-orb-rotate-3 18s ease-in-out infinite !important;
  }
}

@keyframes jz-orb-rotate-1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-20px, 15px); }
  50%  { transform: translate(10px, -10px); }
  75%  { transform: translate(-15px, -20px); }
  100% { transform: translate(0, 0); }
}

@keyframes jz-orb-rotate-2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(15px, -20px); }
  50%  { transform: translate(-10px, 15px); }
  75%  { transform: translate(20px, 10px); }
  100% { transform: translate(0, 0); }
}

@keyframes jz-orb-rotate-3 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-10px, 20px); }
  50%  { transform: translate(15px, -15px); }
  75%  { transform: translate(-20px, 5px); }
  100% { transform: translate(0, 0); }
}
/* FIX 8: Trust section — stronger orbs matching hero style */
.jz-trust .jz-trust-glow {
  width: 700px !important;
  height: 700px !important;
  filter: blur(60px) !important;
  opacity: 0.45 !important;
  animation: jz-pulse-glow 8s ease-in-out infinite !important;
}
.jz-trust .jz-trust-glow:first-child {
  top: -15% !important;
  right: -5% !important;
  background: radial-gradient(circle, rgba(208, 0, 58, 0.55) 0%, rgba(208, 0, 58, 0.15) 40%, transparent 65%) !important;
}
.jz-trust .jz-trust-glow:nth-child(2) {
  bottom: -15% !important;
  left: -5% !important;
  background: radial-gradient(circle, rgba(171, 35, 121, 0.45) 0%, rgba(171, 35, 121, 0.1) 40%, transparent 65%) !important;
  animation-delay: -3s !important;
}

/* FIX 9: Trust section — real animated orbs + particles like hero */
.jz-trust-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.jz-trust-orb-1 {
  width: 900px !important;
  height: 900px !important;
  background: radial-gradient(circle, rgba(208, 0, 58, 0.5) 0%, rgba(208, 0, 58, 0.15) 40%, transparent 65%) !important;
  top: calc(50% - 450px) !important;
  left: calc(50% - 450px) !important;
  right: auto !important;
  filter: blur(50px) !important;
  animation: jz-pulse-glow 8s ease-in-out infinite !important;
}

.jz-trust-orb-2 {
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(171, 35, 121, 0.45) 0%, rgba(171, 35, 121, 0.1) 40%, transparent 65%) !important;
  bottom: -10% !important;
  left: -5% !important;
  top: auto !important;
  filter: blur(50px) !important;
  animation: jz-pulse-glow 8s ease-in-out infinite !important;
  animation-delay: -3s !important;
}

.jz-trust-orb-3 {
  width: 450px !important;
  height: 450px !important;
  background: radial-gradient(circle, rgba(208, 0, 58, 0.3) 0%, rgba(171, 35, 121, 0.1) 40%, transparent 65%) !important;
  top: 10% !important;
  right: 5% !important;
  left: auto !important;
  filter: blur(45px) !important;
  animation: jz-pulse-glow 8s ease-in-out infinite !important;
  animation-delay: -5s !important;
}

.jz-trust-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 1;
}

.jz-trust-particles .jz-particle {
  background: rgba(208, 0, 58, 0.8) !important;
}
.jz-trust-particles .jz-particle:nth-child(1) { opacity: 0.5 !important; }
.jz-trust-particles .jz-particle:nth-child(2) { opacity: 0.4 !important; background: rgba(171, 35, 121, 0.8) !important; }
.jz-trust-particles .jz-particle:nth-child(3) { opacity: 0.6 !important; }
.jz-trust-particles .jz-particle:nth-child(4) { opacity: 0.35 !important; background: rgba(171, 35, 121, 0.7) !important; }

/* Ensure trust content stays above orbs */
.jz-trust .jz-container {
  position: relative;
  z-index: 2;
}

/* FIX 10: Trust orb sweeping animation — left to right and back */
@keyframes jz-orb-sweep {
  0% { left: calc(10% - 450px); }
  50% { left: calc(90% - 450px); }
  100% { left: calc(10% - 450px); }
}

.jz-trust-orb-1 {
  animation: jz-orb-sweep 10s ease-in-out infinite, jz-pulse-glow 8s ease-in-out infinite !important;
}

/* FIX 11: Force sweep on trust orb-1 — override all previous */
@keyframes jz-trust-sweep {
  0% { left: -10%; }
  50% { left: 70%; }
  100% { left: -10%; }
}

section.jz-trust .jz-trust-bg .jz-orb.jz-trust-orb-1 {
  top: calc(50% - 450px) !important;
  left: -10% !important;
  right: auto !important;
  animation: jz-trust-sweep 6s ease-in-out infinite !important;
  filter: blur(50px) !important;
}

/* FIX 12: Trust orb sweep using translateX — final override */
@keyframes jz-sweep-move {
  0% { transform: translateX(-300px) scale(1); }
  25% { transform: translateX(100px) scale(1.05); }
  50% { transform: translateX(500px) scale(1); }
  75% { transform: translateX(100px) scale(1.05); }
  100% { transform: translateX(-300px) scale(1); }
}

section.jz-trust .jz-trust-bg .jz-orb.jz-trust-orb-1 {
  top: calc(50% - 450px) !important;
  left: calc(50% - 450px) !important;
  right: auto !important;
  animation: jz-sweep-move 6s ease-in-out infinite !important;
  filter: blur(50px) !important;
}

/* =========================================================
   TRUST SECTION — Light Background Override
   Converts dark section to light for better page flow
   Hero (dark) → light content → Footer (dark)
   Updated: February 15, 2026
   ========================================================= */

/* Background: dark → light */
.jz-trust {
    background: #F5F5F7 !important;
}

/* Hide dark-mode decorative elements */
.jz-trust-bg,
.jz-trust-particles,
.jz-trust .jz-trust-glow {
    display: none !important;
}

/* Section label */
.jz-trust .jz-section-label {
    color: #86868B !important;
}

/* Section title */
.jz-trust .jz-section-title {
    color: #1A1A2E !important;
}

/* Cards: solid white with subtle border */
.jz-trust-item {
    background: #ffffff !important;
    border: 1px solid #E8E8F0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.jz-trust-item:hover {
    background: #ffffff !important;
    border-color: #D1D1D6 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Numbers: keep brand gradient (looks great on light) */

/* Unit text */
.jz-trust-unit {
    color: #86868B !important;
}

/* Card headings */
.jz-trust-item h4 {
    color: #1A1A2E !important;
}

/* Card body text */
.jz-trust-item p {
    color: #666677 !important;
}

/* =========================================================
   MOBILE HOMEPAGE RESTRUCTURE
   February 15, 2026
   ========================================================= */

/* --- Desktop/Mobile Content Toggle --- */
.jz-mobile-only { display: none; }
.jz-desktop-only { display: inline; }

@media (max-width: 600px) {
    .jz-mobile-only { display: inline !important; }
    .jz-desktop-only { display: none !important; }
}

/* --- Gradient Section Dividers (site-wide) --- */
.jz-products::before,
.jz-paths::before,
.jz-trust::before,
.jz-testimonials::before,
.jz-footer-cta::before {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, #D0003A, #AB2379);
    margin: 0 auto 0;
    border-radius: 2px;
    position: relative;
    top: -1px;
}

/* Offset for sections that already have padding */
.jz-products::before,
.jz-paths::before,
.jz-trust::before,
.jz-testimonials::before,
.jz-footer-cta::before {
    margin-bottom: 0;
    top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

/* Sections need position relative for the divider */
.jz-products,
.jz-paths,
.jz-trust,
.jz-testimonials,
.jz-footer-cta {
    position: relative;
}

/* --- Card Hover Highlight (site-wide) --- */
.jz-product-card,
.jz-path-card,
.jz-trust-item,
.jz-testimonial-card {
    transition: all 0.3s ease;
}

.jz-product-card:hover,
.jz-path-card:hover,
.jz-trust-item:hover {
    background: #FAFAFD !important;
}

/* --- MOBILE: Swipeable Products --- */
@media (max-width: 600px) {

    /* Products: horizontal scroll */
    .jz-product-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 14px !important;
        padding-bottom: 16px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .jz-product-grid::-webkit-scrollbar {
        display: none;
    }

    .jz-product-card {
        min-width: 280px !important;
        max-width: 280px !important;
        scroll-snap-align: center;
        flex-shrink: 0;
    }

    /* Trust: 2x2 grid */
    .jz-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .jz-trust-item {
        padding: 24px 16px 20px !important;
        border-radius: 16px !important;
    }

    .jz-trust-num {
        font-size: 32px !important;
    }

    .jz-trust-unit {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }

    .jz-trust-item h4 {
        font-size: 13px !important;
    }

    .jz-trust-item p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Footer CTA: hide accent line on mobile */
    .jz-footer-cta .jz-accent-line {
        display: none !important;
    }

    /* Gradient dividers: slightly smaller on mobile */
    .jz-products::before,
    .jz-paths::before,
    .jz-trust::before,
    .jz-testimonials::before,
    .jz-footer-cta::before {
        width: 80px !important;
        height: 2px !important;
    }
}

/* =========================================================
   FIXES: Dividers, Product Cards, Spacing
   February 15, 2026
   ========================================================= */

/* --- Fix: Gradient dividers — proper positioning at section borders --- */
.jz-products::before,
.jz-paths::before,
.jz-trust::before,
.jz-testimonials::before,
.jz-footer-cta::before {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
}

@media (max-width: 600px) {
    /* Dividers: tighter margin on mobile */
    .jz-products::before,
    .jz-paths::before,
    .jz-trust::before,
    .jz-testimonials::before,
    .jz-footer-cta::before {
        margin: 0 auto 28px !important;
        width: 80px !important;
        height: 2px !important;
    }

    /* Products section: reduce top padding to close gap */
    .jz-products {
        padding-top: 32px !important;
    }

    /* Section labels and titles: tighter spacing */
    .jz-products .jz-section-label,
    .jz-paths .jz-section-label {
        margin-bottom: 8px !important;
    }

    .jz-products .jz-section-title,
    .jz-paths .jz-section-title {
        margin-bottom: 24px !important;
        font-size: 24px !important;
    }

    /* Product cards: compact and consistent */
    .jz-product-card {
        min-width: 260px !important;
        max-width: 260px !important;
        padding: 22px 18px 18px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .jz-product-card .jz-product-icon {
        margin-bottom: 12px !important;
    }

    .jz-product-card h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    .jz-product-card p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        flex-grow: 1 !important;
    }

    .jz-product-card .jz-product-link {
        margin-top: 14px !important;
        font-size: 13px !important;
    }

    /* Products grid: add left padding so first card isn't flush to edge */
    .jz-product-grid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* --- Fix: Allow dividers to be visible --- */
.jz-products,
.jz-paths,
.jz-trust,
.jz-testimonials,
.jz-footer-cta {
    overflow: visible !important;
}

/* FIX: Mobile main content offset — match actual mobile header height */
@media (max-width: 600px) {
  main.main {
    padding-top: 65px !important;
  }
}

/* FIX: Desktop main content offset — match actual desktop header height */
@media (min-width: 601px) {
  main.main {
    padding-top: 80px !important;
  }
}

/* FIX: Enterprise IT mobile — remove main.main gap so hero sits flush */
@media (max-width: 576px) {
  body:has(.eit-hero) main.main {
    padding-top: 0 !important;
  }
}

/* FIX: Enterprise IT mobile — pull hero up to eliminate white gap (no :has needed) */
@media (max-width: 576px) {
  .eit-hero {
    margin-top: -65px;
    padding-top: 65px;
  }
}