/* ===========================
   WORKFLOW CARD MOTION GLOW
   =========================== */
.xtru-workflow-card:hover .brxe-icon {
  stroke: #00c4ff;
  filter: drop-shadow(0 0 6px rgba(0,196,255,0.6))
          drop-shadow(0 0 12px rgba(108,99,255,0.4));
  transform: scale(1.15);
}

.xtru-workflow-card:hover h3 {
  color: #00c4ff;
  text-shadow: 0 0 8px rgba(0,196,255,0.4);
}

.xtru-workflow-card:hover p {
  color: #fff;
  transition: color 0.3s ease;
}
/* ===========================================
   XTRU Gradient Background (Static)
   =========================================== */

.xtru-surface-pro {
  background: linear-gradient(180deg, #071522 0%, #0b1e31 45%, #010409 100%);
  position: relative;
  z-index: 0;
}

/* optional soft vignette for subtle focus */
.xtru-surface-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.25), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.xtru-surface-pro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0,196,255,0.07), transparent);
  pointer-events: none;
  z-index: 1;
}


/* keep content above background */
.xtru-surface-pro > * {
  position: relative;
  z-index: 2;
}
.xtru-surface-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(0,196,255,0.05), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
footer {
  background: #010409;
  border-top: none;
}
form input,
form select,
form textarea {
  background: #0a0f15 !important;
  border: 1px solid rgba(0,196,255,0.15) !important;
  transition: all 0.3s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: #00c4ff !important;
  box-shadow: 0 0 10px rgba(0,196,255,0.15);
}
/* HERO ICON Home */
.xtru-hero-icon {
  position: relative;
  width: clamp(180px, 22vw, 320px);
  margin-inline: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 200, 255, .2));
}
#xtruLogo { display:block; width:100%; height:auto; }

/* Moving scan bar clipped to the SVG shape */
.xtru-hero-icon .xtru-scan-sweep {
  position:absolute; inset:0;
  /* Use the SVG as a clip-path so the sweep only shows inside the icon */
  -webkit-mask: url(#) no-repeat center / contain;   /* fallback mask */
  mask: url(#) no-repeat center / contain;
  /* Safari/Chrome clip-path to the element’s alpha: */
  -webkit-mask-image: var(--xtru-logo-mask, none);
  mask-image: var(--xtru-logo-mask, none);
  background:
    radial-gradient(120px 60px at 50% 50%, rgba(255,255,255,.18), transparent 60%) no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(0,200,255,.40) 45%, rgba(255,255,255,.75) 50%, rgba(0,200,255,.40) 55%, transparent 100%);
  mix-blend-mode: screen;
  opacity:.9;
  animation: xtruSweep 2.8s linear infinite;
}
@keyframes xtruSweep {
  0%   { background-position:-120% 0, -120% 0; }
  100% { background-position:220% 0, 220% 0; }
}

/* Nice rim glow that breathes */
.xtru-hero-icon::after{
  content:"";
  position:absolute; inset:-6%;
  border-radius:24px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,200,255,.08), transparent 70%);
  filter: blur(12px);
  animation: xtruBreathe 5s ease-in-out infinite;
}
@keyframes xtruBreathe { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Respect motion settings */
@media (prefers-reduced-motion: reduce){
  .xtru-scan-sweep, .xtru-hero-icon::after { animation: none; }
}