/* Neon moving CTA border (scoped, does not affect other buttons) */
.btn-neon-moving {
  --neon-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 0;
}

.btn-neon-moving::before,
.btn-neon-moving::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--neon-angle),
    rgba(255, 176, 46, 0) 120deg,
    #ffb02e 230deg,
    #ef3340 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-neon-rotate 2.8s linear infinite;
}

.btn-neon-moving::before {
  z-index: -1;
}

.btn-neon-moving::after {
  inset: -6px;
  padding: 6px;
  filter: blur(14px);
  opacity: 0.6;
  z-index: -2;
}

.btn-neon-moving:hover::before,
.btn-neon-moving:hover::after {
  animation-play-state: paused;
  background: linear-gradient(#ef3340, #ef3340);
}

.btn-neon-moving:hover,
.btn-neon-moving:focus {
  background-color: #06070f !important;
  border-color: #ef3340 !important;
  color: #ffffff !important;
}

.btn-neon-moving:hover::after,
.btn-neon-moving:focus::after {
  opacity: 0.8;
  filter: blur(16px);
}

@keyframes btn-neon-rotate {
  to {
    --neon-angle: 360deg;
  }
}

@property --neon-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .btn-neon-moving::before,
  .btn-neon-moving::after {
    animation: none;
  }
}

/* Neon panel effect for CTA boxes */
.panel-neon-moving {
  --panel-neon-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(239, 51, 64, 0.14);
  box-shadow: 0 10px 24px rgba(200, 74, 35, 0.18);
}

.panel-neon-moving::before,
.panel-neon-moving::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--panel-neon-angle),
    rgba(255, 176, 46, 0) 120deg,
    #ffb02e 230deg,
    #ef3340 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: panel-neon-rotate 3.8s linear infinite;
}

.panel-neon-moving::before {
  z-index: -1;
}

.panel-neon-moving::after {
  display: none;
}

@keyframes panel-neon-rotate {
  to {
    --panel-neon-angle: 360deg;
  }
}

@property --panel-neon-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .panel-neon-moving::before,
  .panel-neon-moving::after {
    animation: none;
  }
}

/* Neon panel effect v2 (Halo Telco red + warm gold) */
.panel-neon-moving-two {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(239, 51, 64, 0.14);
  box-shadow: 0 10px 24px rgba(200, 74, 35, 0.18);
}

.panel-neon-moving-two::before,
.panel-neon-moving-two::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 176, 46, 0.14) 0%,
    #ffb02e 24%,
    #ef3340 64%,
    #ff7a2f 90%,
    rgba(255, 176, 46, 0.14) 100%
  );
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: panel-neon-flow-two 3.6s ease-in-out infinite;
}

.panel-neon-moving-two::before {
  z-index: -1;
}

.panel-neon-moving-two::after {
  display: none;
}

@keyframes panel-neon-flow-two {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-neon-moving-two::before,
  .panel-neon-moving-two::after {
    animation: none;
  }
}

/* Neon panel effect v3 (Halo Telco soft breathing motion) */
.panel-neon-moving-tree {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(239, 51, 64, 0.14);
  box-shadow: 0 10px 24px rgba(200, 74, 35, 0.18);
}

.panel-neon-moving-tree::before,
.panel-neon-moving-tree::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 210deg,
    rgba(255, 176, 46, 0.16) 0deg,
    #ffb02e 120deg,
    #ff7a2f 220deg,
    #ef3340 300deg,
    rgba(255, 176, 46, 0.16) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: panel-neon-breathe-tree 2.4s ease-in-out infinite;
}

.panel-neon-moving-tree::before {
  z-index: 1;
}

.panel-neon-moving-tree::after {
  display: none;
}

.panel-neon-moving-tree > * {
  position: relative;
  z-index: 2;
}

@keyframes panel-neon-breathe-tree {
  0%,
  100% {
    opacity: 0.56;
    filter: saturate(0.95) brightness(0.92);
  }
  50% {
    opacity: 1;
    filter: saturate(1.15) brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-neon-moving-tree::before,
  .panel-neon-moving-tree::after {
    animation: none;
  }
}

/* Neon variant for light/white button */
.btn-neon-moving-two {
  --neon2-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 0;
  border-width: 1px;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe3f3 !important;
  font-weight: 700;
  text-shadow: none !important;
}

.btn-neon-moving-two:visited,
.btn-neon-moving-two:active {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.btn-neon-moving-two::before,
.btn-neon-moving-two::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--neon2-angle),
    rgba(255, 176, 46, 0) 110deg,
    #ffb02e 235deg,
    #ff7a2f 320deg,
    #ef3340 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-neon-rotate-two 3.2s linear infinite;
}

.btn-neon-moving-two::before {
  z-index: -1;
}

.btn-neon-moving-two::after {
  inset: -5px;
  padding: 5px;
  filter: blur(12px);
  opacity: 0.55;
  z-index: -2;
}

.btn-neon-moving-two:hover::before,
.btn-neon-moving-two:hover::after {
  animation-play-state: paused;
  background: linear-gradient(#ef3340, #ef3340);
}

.btn.btn-neon-moving-two:hover,
.btn.btn-neon-moving-two:focus,
.btn.btn-neon-moving-two:active {
  background-color: #06070f !important;
  border-color: #ef3340 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 0 transparent;
  opacity: 1 !important;
  filter: none !important;
}

.btn.btn-neon-moving-two i,
.btn.btn-neon-moving-two:hover i,
.btn.btn-neon-moving-two:focus i,
.btn.btn-neon-moving-two:active i {
  color: currentColor !important;
  opacity: 1 !important;
}

.btn-neon-moving-two:hover::after,
.btn-neon-moving-two:focus::after {
  opacity: 0.58;
  filter: blur(12px);
}

@keyframes btn-neon-rotate-two {
  to {
    --neon2-angle: 360deg;
  }
}

@property --neon2-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .btn-neon-moving-two::before,
  .btn-neon-moving-two::after {
    animation: none;
  }
}

/* Ensure logo inside circular plan badge stays perfectly round */
.job-box .firm-logo {
  overflow: hidden;
}

.job-box .firm-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* YouTube Shorts modal frame, matched with getting-started EastelHub video modal */
.gs-video-modal {
  max-width: 420px;
}

.gs-youtube-frame-wrap {
  background: #000000;
  overflow: hidden;
  padding-top: 177.77777778%;
  position: relative;
  width: 100%;
}

.gs-youtube-frame-wrap iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

@media (max-width: 991.98px) {
  .tg-cta-wrap {
    bottom: 16px;
  }

  body .czm-fixed .czm-button,
  #back-to-top {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}