/* ============================================================
   Novatrax Premium Layer — polish + motion primitives
   Pairs with premium.js. Safe to add on top of any page.
   ============================================================ */

/* Smooth, refined base */
html { scroll-behavior: smooth; }
html.premium-on { scroll-behavior: auto; }            /* Lenis takes over */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

::selection{ background: rgba(91,230,255,.28); color:inherit; }

/* Custom scrollbar */
*{ scrollbar-width: thin; scrollbar-color: rgba(120,140,170,.45) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(120,140,170,.4); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(120,140,170,.65); background-clip:content-box; }

/* Accessible focus */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #5BE6FF; outline-offset:3px; border-radius:6px;
}

/* Scroll progress bar */
.px-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#5BE6FF,#2563EB);
  z-index:9999; pointer-events:none;
  box-shadow:0 0 12px rgba(91,230,255,.6);
}

/* Nav gets a touch more presence after scroll */
nav{ transition:background .35s ease, box-shadow .35s ease, height .35s ease, backdrop-filter .35s ease; }
nav.nav-scrolled{ box-shadow:0 8px 30px rgba(8,12,24,.10); backdrop-filter:blur(22px); }

/* Premium button shine (applies to existing primary buttons) */
.btn-primary,.btn-white,.nav-cta,.nav-dl,.tier-cta-pilot{ position:relative; overflow:hidden; will-change:transform; }
.btn-primary::after,.btn-white::after,.nav-cta::after,.nav-dl::after,.tier-cta-pilot::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); transition:none; pointer-events:none;
}
.btn-primary:hover::after,.btn-white:hover::after,.nav-cta:hover::after,.nav-dl:hover::after,.tier-cta-pilot:hover::after{
  animation:px-shine .85s ease;
}
@keyframes px-shine{ to{ left:140%; } }

/* Card lift refinement (layered onto existing cards) */
.product-card,.how-card,.feat-card,.tier,.step,.pillar{ will-change:transform; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s ease; }

/* Image reveal helper */
img[data-reveal]{ clip-path:inset(0 0 0 0); }

/* ============================================================
   DARK SECTION SYSTEM  — "light hero -> dark sections"
   Add class="px-dark" to any <section> to convert it to the
   premium dark cinematic treatment. Optional .px-dark-glow adds aura.
   ============================================================ */
.px-dark{
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(180deg,#0B1018 0%, #070A10 100%);
  color:#E8ECF5;
  position:relative; overflow:hidden;
}
.px-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(120,170,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 25%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 25%,transparent 100%);
}
.px-dark > *{ position:relative; z-index:1; }
.px-dark .section-title,.px-dark h2,.px-dark h3,.px-dark .stat-num,.px-dark .ht-num{ color:#F3F6FC; }
.px-dark .section-body,.px-dark p{ color:#9aa6be; }
.px-dark .section-eyebrow{ color:#7BD8EE; }
.px-dark .how-card,.px-dark .feat-card,.px-dark .step,.px-dark .pillar,.px-dark .product-card,.px-dark .tier{
  background:rgba(255,255,255,.03); border-color:rgba(150,180,230,.12); box-shadow:none;
}
.px-dark .how-card:hover,.px-dark .feat-card:hover,.px-dark .step:hover,.px-dark .pillar:hover,.px-dark .product-card:hover{
  border-color:rgba(91,230,255,.4); box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.px-dark .how-title,.px-dark .feat-title,.px-dark .pillar-name{ color:#F3F6FC; }
.px-dark .how-desc,.px-dark .feat-desc,.px-dark .pillar-desc{ color:#9aa6be; }
.px-dark .how-icon,.px-dark .feat-icon,.px-dark .pillar-icon,.px-dark .step-ic{
  background:rgba(91,230,255,.08); border-color:rgba(91,230,255,.18);
}

/* Dark overrides for Novatrax component classes (tech / values / products) */
.px-dark .tech-card,.px-dark .value-card{ background:rgba(255,255,255,.03); border-color:rgba(150,180,230,.12); box-shadow:none; }
.px-dark .tech-card:hover,.px-dark .value-card:hover{ border-color:rgba(91,230,255,.4); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.px-dark .tech-title,.px-dark .value-name,.px-dark .product-name{ color:#F3F6FC; }
.px-dark .tech-desc,.px-dark .value-desc,.px-dark .product-desc,.px-dark .product-tagline,.px-dark .product-feat{ color:#9aa6be; }
.px-dark .tech-icon,.px-dark .value-icon{ background:rgba(91,230,255,.08); border-color:rgba(91,230,255,.18); }
.px-dark .tech-card::before{ color:rgba(120,170,255,.06); }
.px-dark .marquee-section{ background:transparent; border-color:rgba(150,180,230,.12); }
.px-dark .mq-item{ color:rgba(180,200,230,.55); }

/* Gradient text utility */
.px-grad{ background:linear-gradient(120deg,#5BE6FF,#2563EB); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Subtle float for accent visuals */
@keyframes px-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.px-float{ animation:px-float 6s ease-in-out infinite; }

/* Reduced-motion: neutralize transforms set by JS reveals */
@media (prefers-reduced-motion: reduce){
  .px-progress{ display:none; }
  [style*="opacity: 0"]{ opacity:1!important; transform:none!important; }
}