/* Hero — near black */
#hero.hero-pulsefit {
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background: #060101 !important;
}
#hero.hero-pulsefit::before,
#hero.hero-pulsefit::after { display: none !important; }

/* Arc container — mask fades arc in from left, out toward bottom-right */
.pf-arc-wrap {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent       0%,
    rgba(0,0,0,.30)  12%,
    black            30%,
    black            70%,
    rgba(0,0,0,.30)  88%,
    transparent      100%
  );
  mask-image: linear-gradient(
    to right,
    transparent       0%,
    rgba(0,0,0,.30)  12%,
    black            30%,
    black            70%,
    rgba(0,0,0,.30)  88%,
    transparent      100%
  );
}

/*
  Arc — single bright orange-white line
  Geometry: R=3606, center at (cx=1440, cy=-3176)
  → arc enters at (0, 130px) top-left
  → arc exits  at (1440, 430px) bottom-right
  → continuously descending — never bends back up within viewport
*/
.pf-arc-wrap::after {
  content: ''; position: absolute; border-radius: 50%; background: transparent;
  width: 7212px; height: 7212px; top: -6782px; right: -3606px;
  border: 2px solid rgba(255,210,70,0.98);
  box-shadow:
    0 0   4px rgba(255,250,200,1.00),
    0 0  14px rgba(255,190, 50,1.00),
    0 0  35px rgba(255,130, 20,0.88),
    0 0  80px rgba(230, 78, 10,0.68),
    0 0 160px rgba(200, 44,  5,0.46),
    0 0 320px rgba(155, 20,  3,0.24),
    0 0 520px rgba(110,  8,  1,0.10);
}

/* Ambient glow blob — upper-right, matching reference */
.pf-hero-glow {
  position: absolute; width: 1000px; height: 800px;
  top: -100px; right: -50px; border-radius: 50%;
  background: radial-gradient(ellipse at 38% 42%, rgba(255,130,20,.48) 0%, rgba(225,72,10,.30) 28%, rgba(170,32,5,.14) 54%, rgba(90,12,2,.05) 74%, transparent 90%);
  filter: blur(65px); pointer-events: none; z-index: 0;
}

/* Content above arc */
.pf-hero-inner { position: relative !important; z-index: 10 !important; padding-bottom: 160px !important; }
#hero.hero-pulsefit > *:not(.pf-arc-wrap):not(.pf-hero-glow) { position: relative !important; z-index: 10 !important; }

/* Kitotech live hero background only - keep layout, nav and product carousel untouched */
#hero.hero-pulsefit {
  background:
    linear-gradient(90deg, rgba(6,1,1,.92) 0%, rgba(35,5,5,.78) 42%, rgba(6,1,1,.42) 100%),
    linear-gradient(180deg, rgba(6,1,1,.18) 0%, rgba(6,1,1,.44) 100%),
    url('assets/hero/kitotech-live-hero-bg-desktop.jpg') center center / cover no-repeat !important;
}

@media (max-width: 768px) {
  #hero.hero-pulsefit {
    background:
      linear-gradient(180deg, rgba(6,1,1,.78) 0%, rgba(35,5,5,.66) 48%, rgba(6,1,1,.88) 100%),
      url('assets/hero/kitotech-live-hero-bg-mobile.jpg') center top / cover no-repeat !important;
  }
}

/* Tighten only the gap between social proof and product carousel */
#hero.hero-pulsefit .pf-hero-inner {
  padding-bottom: 46px !important;
}
#hero.hero-pulsefit .pf-carousel-wrap {
  margin-top: -52px !important;
  padding-top: 8px !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.9) 5%, black 14%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.9) 5%, black 14%) !important;
}
@media (max-width: 768px) {
  #hero.hero-pulsefit .pf-hero-inner {
    padding-bottom: 28px !important;
  }
  #hero.hero-pulsefit .pf-carousel-wrap {
    margin-top: -36px !important;
    padding-top: 4px !important;
  }
}