/* ============================================================
   MULTITEK CONTROLS — Premium Industrial Motion System
   Precision · Engineering Excellence · Technical Sophistication
   ============================================================ */

/* ── ANIMATION TIMING TOKENS ────────────────────────────────── */
:root {
  --ease-premium:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-expo:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --dur-fast:   180ms;
  --dur-normal: 400ms;
  --dur-slow:   700ms;
  --dur-slower: 1100ms;
}

/* Hero heading — white with depth shadow for legibility over the factory
   photo (dark scrim sits behind it); accent span keeps its own gradient */
.hero__title {
  color: #FFFFFF !important;
  text-shadow:
    0 3px 12px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.4);
}

/* Extreme Engineering nav tab — sister-brand orange accent, in both
   transparent and scrolled navbar states */
.navbar__links a[href="extreme.html"],
.navbar.is-scrolled .navbar__links a[href="extreme.html"] {
  color: #F47B20;
}
.navbar__links a[href="extreme.html"]:hover { color: #FF9142; }
.navbar__links a[href="extreme.html"]::after { background: #F47B20; }
.mobile-menu__nav a[href="extreme.html"] { color: #F47B20; }

/* ── GPU ACCELERATION FOUNDATION ───────────────────────────── */
.product-card,
.industry-card,
.card,
.masonry-item,
.product-detail-card,
.industry-detail-card,
.quality-step,
.ex-product-card,
.ex-feature-card,
.ex-step-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06080F;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preloader__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77,123,247,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,123,247,.055) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: pre-grid-in 1.2s var(--ease-premium) forwards;
  opacity: 0;
  pointer-events: none;
}
@keyframes pre-grid-in {
  to { opacity: 1; }
}

.preloader__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(77,123,247,.04) 50%, transparent 100%);
  background-size: 100% 200px;
  animation: pre-scan 3s linear infinite;
  pointer-events: none;
}
@keyframes pre-scan {
  from { background-position: 0 -200px; }
  to   { background-position: 0 100vh;  }
}

.preloader__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.preloader__logo-wrap {
  position: relative;
  width: 84px;
  height: 84px;
}

.preloader__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(77,123,247,.2);
  animation: pre-ring-spin 4s linear infinite;
}
.preloader__ring::before {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4D7BF7;
  box-shadow: 0 0 10px rgba(77,123,247,.9), 0 0 20px rgba(77,123,247,.5);
}
@keyframes pre-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.preloader__ring-2 {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 0.5px solid rgba(94,224,220,.1);
  animation: pre-ring-spin 7s linear infinite reverse;
}
.preloader__ring-2::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5EE0DC;
  box-shadow: 0 0 8px rgba(94,224,220,.8);
}

.preloader__logo-inner {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(77,123,247,.12), rgba(77,123,247,.04));
  border: 1px solid rgba(77,123,247,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.preloader__logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: pre-logo-in 0.7s 0.8s var(--ease-premium) both;
}
@keyframes pre-logo-in {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}
.preloader__logo-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(77,123,247,.4), transparent);
  transform: translateX(-100%);
  animation: pre-sweep 2s 0.5s ease-in-out infinite;
}
@keyframes pre-sweep {
  0%         { transform: translateX(-100%); }
  45%, 100%  { transform: translateX(150%); }
}

.preloader__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  animation: pre-logo-in 0.5s 1s both;
}

.preloader__progress {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  animation: pre-logo-in 0.5s 0.9s both;
}
.preloader__bar {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.07);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.preloader__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4D7BF7, #5EE0DC);
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(77,123,247,.7), 0 0 20px rgba(77,123,247,.3);
}
.preloader__counter {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}

/* Preloader exit */
#preloader.is-done {
  animation: pre-exit 0.75s 0.15s var(--ease-in-expo) forwards;
}
@keyframes pre-exit {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 9000;
  background: linear-gradient(90deg, #4D7BF7 0%, #5EE0DC 50%, #4D7BF7 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(77,123,247,.6);
  animation: prog-shimmer 3s linear infinite;
  will-change: width;
  pointer-events: none;
}
@keyframes prog-shimmer {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  will-change: clip-path;
  overflow: hidden;
}
#page-transition::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #06080F 0%, #0E1320 60%, #161D2E 100%);
}
#page-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77,123,247,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,123,247,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ============================================================
   NAVBAR — HIDE / SHOW ON SCROLL
   ============================================================ */
.navbar {
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s var(--ease-premium),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  will-change: transform;
}
.navbar.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* ============================================================
   SPLIT TEXT — MASK SYSTEM
   ============================================================ */
.split-word,
.split-char,
.split-line {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Word mask — clip-path reveal */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em;
}

/* ============================================================
   HERO ENHANCEMENTS
   ============================================================ */
.hero__geo {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.hero__geo--ring {
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 0.5px solid rgba(77,123,247,.1);
  top: 5%; right: 2%;
  animation: geo-drift 22s ease-in-out infinite;
}
.hero__geo--ring-sm {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 0.5px solid rgba(94,224,220,.08);
  bottom: 18%; right: 12%;
  animation: geo-drift 16s ease-in-out infinite reverse 2s;
}
.hero__geo--ring-xs {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 0.5px solid rgba(77,123,247,.15);
  top: 40%; right: 30%;
  animation: geo-drift 11s ease-in-out infinite 1s;
}
.hero__geo--dot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  top: 55%; right: 6%;
  opacity: 0.18;
}
.hero__geo--dot-grid span {
  width: 2px; height: 2px;
  background: rgba(77,123,247,.9);
  border-radius: 50%;
  display: block;
}
.hero__geo--cross {
  top: 28%; right: 22%;
  opacity: 0.2;
  animation: geo-drift 14s ease-in-out infinite 3s;
}
@keyframes geo-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg);     }
  33%       { transform: translate3d(10px, -14px, 0) rotate(2deg);  }
  66%       { transform: translate3d(-7px, 9px, 0) rotate(-1deg);   }
}

/* ============================================================
   CIRCUIT TRACE — DARK SECTIONS BACKGROUND
   ============================================================ */
.circuit-trace {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
}
.circuit-trace svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.circuit-path {
  fill: none;
  stroke: rgba(77,123,247,.22);
  stroke-width: 0.75;
  stroke-dasharray: 6 4;
  animation: circuit-flow 10s linear infinite;
}
.circuit-path--fast {
  stroke: rgba(94,224,220,.15);
  stroke-dasharray: 4 8;
  animation-duration: 6s;
  animation-direction: reverse;
}
.circuit-path--slow {
  stroke: rgba(77,123,247,.12);
  stroke-width: 0.5;
  animation-duration: 16s;
}
.circuit-node {
  fill: rgba(77,123,247,.55);
  animation: circuit-node-pulse 2.8s ease-in-out infinite;
}
.circuit-node--cyan { fill: rgba(94,224,220,.55); animation-delay: 1.4s; }
@keyframes circuit-flow {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: 0; }
}
@keyframes circuit-node-pulse {
  0%, 100% { opacity: 0.4; r: var(--r, 2.5); }
  50%       { opacity: 1;   r: calc(var(--r, 2.5) + 1.5); }
}

/* ============================================================
   ENERGY PARTICLES
   ============================================================ */
.energy-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(77,123,247,.85);
  pointer-events: none;
  will-change: transform, opacity;
  animation: particle-rise var(--pdur, 6s) var(--pdel, 0s) ease-in-out infinite;
}
.energy-particle--cyan {
  background: rgba(94,224,220,.8);
  width: 1.5px; height: 1.5px;
}
@keyframes particle-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  8%   { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(var(--pdx, 20px), var(--pdy, -80px), 0); }
}

/* ============================================================
   BUTTON MICRO-INTERACTIONS
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

/* Ripple */
.btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transform: scale(0);
  animation: btn-ripple 0.65s var(--ease-out-expo) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes btn-ripple {
  to { transform: scale(4.5); opacity: 0; }
}

/* Border sweep shimmer on primary */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 20%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.22) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.btn--primary:hover::after {
  opacity: 1;
  transition: opacity 0.2s ease, background-position 0.55s ease;
  background-position: 200% 0;
}

/* Arrow icon motion */
.btn svg {
  transition: transform 0.3s var(--ease-spring);
  will-change: transform;
}
.btn:hover svg { transform: translateX(3px); }

/* Press state */
.btn:active {
  transform: scale3d(0.97, 0.97, 1) !important;
  transition: transform 0.1s ease !important;
}

/* ============================================================
   MAGNETIC WRAPPER
   ============================================================ */
.mag-wrap {
  display: inline-flex;
  will-change: transform;
  backface-visibility: hidden;
}

/* ============================================================
   CARD HOVER — GRADIENT BORDER + GLOW
   ============================================================ */
.card,
.industry-card,
.quality-step,
.product-detail-card,
.industry-detail-card,
.ex-feature-card,
.ex-step-card,
.ex-contact-card {
  position: relative;
}

/* Animated conic gradient border on hover */
@property --card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.card::after,
.industry-card::after,
.quality-step::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--card-angle, 0deg),
    transparent 0deg,
    rgba(77,123,247,.45) 60deg,
    rgba(94,224,220,.3) 120deg,
    transparent 200deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.card:hover::after,
.industry-card:hover::after,
.quality-step:hover::after {
  opacity: 1;
  animation: card-border-spin 3.5s linear infinite;
}
@keyframes card-border-spin {
  from { --card-angle: 0deg; }
  to   { --card-angle: 360deg; }
}

/* Enhanced glow on hover */
.card:hover,
.industry-card:hover,
.industry-detail-card:hover,
.product-detail-card:hover,
.quality-step:hover {
  box-shadow:
    0 20px 60px -20px rgba(11,17,31,.2),
    0 0 0 1px rgba(77,123,247,.12),
    0 0 40px -18px rgba(77,123,247,.18) !important;
}

/* ============================================================
   GALLERY — 3D TILT & LIGHT REFLECTION
   ============================================================ */
.masonry-item {
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s ease;
  will-change: transform;
}
.masonry-item:hover {
  box-shadow:
    0 28px 56px -18px rgba(11,17,31,.28),
    0 0 0 1px rgba(77,123,247,.1) !important;
}
/* Light reflection */
.masonry-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,.04) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.masonry-item:hover::after { opacity: 1; }

/* Skeleton loading placeholder */
.masonry-item.is-loading {
  background: linear-gradient(90deg,
    var(--off-white) 25%,
    var(--canvas) 50%,
    var(--off-white) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.6s infinite;
  min-height: 200px;
}
@keyframes skeleton {
  from { background-position:  200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
   PRODUCT CARDS — KEN BURNS + SLIDESHOW
   ============================================================ */
/* Ken Burns: applied to active slide image */
@keyframes ken-burns-a {
  0%   { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { transform: scale3d(1.07, 1.07, 1) translate3d(-1.5%, -1.5%, 0); }
}
@keyframes ken-burns-b {
  0%   { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { transform: scale3d(1.07, 1.07, 1) translate3d(1.5%, -1%, 0); }
}

.ex-product-card__img.is-active {
  animation: ken-burns-a 9s ease-in-out infinite alternate;
}
.ex-product-card:nth-child(even) .ex-product-card__img.is-active {
  animation: ken-burns-b 11s ease-in-out infinite alternate;
}
.product-card__img {
  animation: ken-burns-a 12s ease-in-out infinite alternate;
}

/* Slideshow navigation dots */
.slide-dots {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.slide-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.35s var(--ease-spring);
  will-change: transform;
}
.slide-dot.is-active {
  background: rgba(255,255,255,.9);
  transform: scale(1.5);
}

/* Slideshow arrows */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-spring);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slide-arrow--prev { left: 10px; }
.slide-arrow--next { right: 10px; }
.slide-arrow:hover {
  background: rgba(77,123,247,.5);
  border-color: rgba(77,123,247,.55);
  transform: translateY(-50%) scale(1.1);
}
.ex-product-card:hover .slide-arrow,
.product-card:hover .slide-arrow {
  opacity: 1;
}

/* ============================================================
   COUNTER — DIGIT FLIP OVERLAY
   ============================================================ */
.counter-flip-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */
.reveal,
.reveal-up {
  /* No persistent will-change here: these reveal once and then sit idle,
     so a standing compositor hint on every reveal element only wastes GPU
     memory. GSAP promotes them for the duration of the tween anyway. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
html.has-gsap .reveal,
html.has-gsap .reveal-up {
  transition: none;
  opacity: 0;
  transform: none;
}

/* ============================================================
   STAT ITEM — ELECTRICAL PULSE ON LEFT BORDER
   ============================================================ */
.stat-item {
  position: relative;
  overflow: hidden; /* clips pulse to the left-border line */
}
/* Prevent the wide numbers from being clipped by overflow:hidden */
.stat-item__num,
.stat-item__label,
.stat-item__sub {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.stat-item::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  /* Short blip — sweeps through the border, clipped at both ends by overflow:hidden */
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, #5EE0DC 30%, #4D7BF7 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(94,224,220,.7);
  transform: translateY(-100%);
  opacity: 0;
  animation: stat-pulse var(--spd, 3.5s) var(--sdl, 0s) ease-in-out infinite;
}
@keyframes stat-pulse {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(325%);  opacity: 0; }
}

/* ============================================================
   NAVBAR ACTIVE SECTION INDICATOR
   ============================================================ */
.navbar__link::after {
  will-change: transform;
  transition: transform 0.35s var(--ease-premium);
}

/* ============================================================
   SECTION ANIMATED DIVIDER
   ============================================================ */
.animated-divider {
  height: 1px;
  position: relative;
  overflow: hidden;
  background: rgba(77,123,247,.12);
}
.animated-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,224,220,.7),
    transparent
  );
  animation: divider-scan 5s ease-in-out infinite;
}
@keyframes divider-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   PAGE HERO — ENHANCED GRID + BOTTOM ACCENT
   ============================================================ */
.page-hero__bg-grid {
  animation: hero-grid-drift 32s ease-in-out infinite;
}
@keyframes hero-grid-drift {
  0%, 100% { background-position: 0 0, 0 0; }
  50%       { background-position: 26px 26px, 26px 26px; }
}
.page-hero {
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(77,123,247,.35) 25%,
    rgba(94,224,220,.55) 50%,
    rgba(77,123,247,.35) 75%,
    transparent 100%
  );
  animation: hero-bottom-pulse 4.5s ease-in-out infinite;
}
@keyframes hero-bottom-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

/* ============================================================
   FORM — FLOATING LABELS + FOCUS LINE
   ============================================================ */
.form-field-wrap {
  position: relative;
}
.form-field-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #4D7BF7, #5EE0DC);
  border-radius: 0 0 var(--radius-md, 14px) var(--radius-md, 14px);
  transition: width 0.35s var(--ease-premium), left 0.35s var(--ease-premium);
}
.form-field-wrap:focus-within::after {
  width: 100%;
  left: 0%;
}

.form-floating {
  position: relative;
}
.form-floating .form-field {
  padding-top: 1.55rem;
  padding-bottom: 0.55rem;
}
.form-floating label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  transition: all 0.22s var(--ease-premium);
  pointer-events: none;
  color: var(--light, #969FB2);
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: var(--font-body, sans-serif);
}
.form-floating .form-field:focus   + label,
.form-floating .form-field.has-val + label {
  top: 0.8rem;
  transform: translateY(0);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-display, sans-serif);
  color: var(--electric, #4D7BF7);
}

/* Form success */
.form-success-anim {
  display: none;
  text-align: center;
  padding: 2.5rem 1.5rem;
  animation: success-pop 0.55s var(--ease-spring) forwards;
}
.form-success-anim.is-visible { display: block; }
@keyframes success-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.form-success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(77,123,247,.1);
  border: 2px solid var(--electric, #4D7BF7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--electric, #4D7BF7);
  animation: success-draw 0.6s 0.2s ease both;
}
@keyframes success-draw {
  from { transform: scale(0) rotate(-45deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* ============================================================
   TIMELINE — PROGRESS LINE DRAW
   ============================================================ */
.about-milestones {
  position: relative;
}
.about-milestones::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 2px;
  height: 0%;
  background: linear-gradient(180deg, #4D7BF7, rgba(77,123,247,.2));
  transition: height 1.8s var(--ease-premium);
}
.about-milestones.is-drawn::before {
  height: 100%;
}
.milestone::before {
  animation: milestone-dot-in 0.4s var(--ease-spring) both;
}
@keyframes milestone-dot-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   XFEAT (EXTREME ENGINEERING CARD)
   ============================================================ */
.xfeat {
  /* box-shadow is a paint property, not compositor-driven, so will-change
     on it does nothing useful — dropped. */
  transition: box-shadow 0.4s ease;
}
.xfeat:hover .xfeat__img {
  transition: transform 1s var(--ease-premium);
  transform: scale(1.05);
}

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.float-wa {
  will-change: transform;
  transition: transform 0.35s var(--ease-spring);
}
.float-wa:hover { transform: scale(1.1); }

.float-top {
  will-change: transform, opacity;
}

/* ============================================================
   HERO — TARGETED UI FIXES
   ============================================================ */

/* 1 — "Solutions" accent gradient
   ROOT CAUSE: SplitType wraps every character of .hero__title-accent in
   individual <span class="char"> elements. After that rewrite the parent
   span contains NO direct text, so background-clip:text clips to nothing
   and the gradient disappears.
   FIX: apply the gradient to both the parent span (fallback when SplitType
   is not running) AND to every .char descendant (post-SplitType state). */

/* Fallback — SplitType absent or prefers-reduced-motion.
   text-shadow must be none: the title's shadow shows through the
   transparent clipped glyphs and muddies the blue. */
.hero__title-accent {
  background: linear-gradient(115deg, #4D7BF7 0%, #6E9AFF 70%, #8AB4FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none !important;
}

/* Primary fix — targets spans SplitType creates at both word and char level.
   When SplitType wraps "last", "Proven", "India.", "1994.", "together." etc. in
   child spans, the parent's background-clip:text clips to nothing (no direct text).
   The child spans inherit color:transparent but have no gradient of their own.
   Applying the gradient directly to .word and .char fixes this. */
.hero__title-accent .word,
.hero__title-accent .char {
  background: linear-gradient(115deg, #4D7BF7 0%, #6E9AFF 70%, #8AB4FF 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block;
}

/* 2 — "Trusted by Indian Industry Since 1994" badge
        Glassmorphism panel with dark readable text */
.hero .badge {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #0B1120;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

/* 3 — Hero paragraph: brighter white with stronger shadow for legibility */
.hero__desc {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.35);
}

/* 4 — Stats row: center every block, prevent label wrapping */
.hero__stats {
  max-width: 600px;
  gap: 0;  /* handled by even 1fr columns — no extra gap needed */
}
.hero__stat {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hero__stat:not(:first-child) {
  padding-left: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.hero__stat-num,
.hero__stat-label {
  white-space: nowrap;
}

/* Mobile: keep stats readable on small screens */
@media (max-width: 480px) {
  .hero__stats {
    max-width: 100%;
  }
  .hero__stat-num {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  }
  .hero__stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
}

/* ============================================================
   REDUCE MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #preloader { display: none !important; }
  #scroll-progress { display: none; }
}

/* ============================================================
   MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 767px) {
  .hero__geo    { display: none !important; }
  .circuit-trace { opacity: 0.25; }
}