/* ============================================================
   ai-animations.css — AI-Themed Animations Layer
   Uses ONLY existing CSS variables. No colour/layout changes.
   ============================================================ */

/* ─── Neural Canvas ─── */
#neural-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85
}

/* ─── Cursor Glow ─── */
.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(177, 180, 10, 0.18) 0%, rgba(30, 64, 175, .06) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  opacity: 0
}

.cursor-glow.visible {
  opacity: 1
}

@media(hover:none) {
  .cursor-glow {
    display: none !important
  }
}

/* ─── Card Scan Beam (Capability cells) ─── */
.cap-cell {
  position: relative;
  overflow: hidden
}

.cap-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .15), transparent);
  transition: none;
  pointer-events: none;
  z-index: 1
}

.cap-cell:hover::after {
  animation: scanBeam .7s ease forwards
}

.cap-cell:hover {
  box-shadow: 0 0 28px rgba(30, 64, 175, .16), inset 0 0 0 1.5px rgba(30, 64, 175, .22)
}

@keyframes scanBeam {
  0% {
    left: -60%
  }

  100% {
    left: 120%
  }
}

/* ─── Card Circuit Glow (feat, nf, value, vm cards) ─── */
.nf-card,
.feat-card,
.value-card,
.vm-card {
  position: relative;
  overflow: hidden
}

.nf-card::before,
.feat-card::before,
.value-card::before,
.vm-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 49%, rgba(30, 64, 175, .1) 49%, rgba(30, 64, 175, .1) 51%, transparent 51%) 0 0 / 22px 22px,
    linear-gradient(0deg, transparent 49%, rgba(30, 64, 175, .1) 49%, rgba(30, 64, 175, .1) 51%, transparent 51%) 0 0 / 22px 22px;
}

.nf-card:hover::before,
.feat-card:hover::before,
.value-card:hover::before,
.vm-card:hover::before {
  opacity: 1
}

/* Icon pulse ring on card hover */
.nf-card:hover .nf-num,
.feat-card:hover .feat-icon,
.value-card:hover .value-num {
  animation: iconPulse .5s ease;
}

@keyframes iconPulse {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.12)
  }

  100% {
    transform: scale(1)
  }
}

/* ─── Impact Card Bar Shimmer ─── */
.impact-card .impact-bar {
  position: relative;
  overflow: hidden
}

.impact-card .impact-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(30, 64, 175, .8), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

.impact-card:hover .impact-bar::after {
  opacity: 1;
  animation: barShimmer 1.2s ease-in-out infinite;
}

@keyframes barShimmer {
  0% {
    top: -100%
  }

  100% {
    top: 200%
  }
}

/* ─── Contact Info Card Hover ─── */
.ci-card {
  transition: all .3s var(--ease) !important
}

.ci-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(30, 64, 175, .1), 0 0 0 1px rgba(30, 64, 175, .1)
}

.ci-card:hover .ci-icon-box {
  animation: iconGlow .4s ease forwards;
  box-shadow: 0 0 22px rgba(30, 64, 175, .35);
  border-color: var(--accent);
  background: rgba(30, 64, 175, .06);
}

@keyframes iconGlow {
  0% {
    transform: rotate(0deg) scale(1)
  }

  50% {
    transform: rotate(-12deg) scale(1.15)
  }

  100% {
    transform: rotate(0deg) scale(1.06)
  }
}

/* ─── Button Shine Sweep ─── */
.btn-primary {
  position: relative;
  overflow: hidden
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  pointer-events: none;
}

.btn-primary:hover::after {
  animation: btnShine .6s ease forwards;
}

@keyframes btnShine {
  0% {
    left: -50%
  }

  100% {
    left: 150%
  }
}

/* Arrow loop on primary button hover */
.btn-primary:hover svg {
  animation: arrowLoop .5s ease;
}

@keyframes arrowLoop {
  0% {
    transform: translateX(0);
    opacity: 1
  }

  40% {
    transform: translateX(8px);
    opacity: 0
  }

  41% {
    transform: translateX(-6px);
    opacity: 0
  }

  100% {
    transform: translateX(3px);
    opacity: 1
  }
}

/* ─── Outline Button Circuit Border ─── */
.btn-outline {
  position: relative;
  overflow: hidden
}

.btn-outline::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
  animation: rotateBorder 3s linear infinite;
}

.btn-outline::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

.btn-outline:hover::before {
  opacity: .55
}

@keyframes rotateBorder {
  to {
    transform: rotate(360deg)
  }
}

/* ─── Submit Button Pulse Ring ─── */
.submit-btn {
  position: relative;
  overflow: visible
}

.submit-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

.submit-btn:hover::after {
  animation: submitPulse .8s ease forwards;
}

@keyframes submitPulse {
  0% {
    transform: scale(1);
    opacity: .4
  }

  100% {
    transform: scale(1.06);
    opacity: 0
  }
}

/* ─── Typing Cursor ─── */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursorBlink .7s infinite;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

/* ─── Section Eyebrow Entrance ─── */
.eyebrow {
  position: relative;
}

.eyebrow-animated {
  animation: eyebrowSlide .6s var(--ease-out) both;
}

@keyframes eyebrowSlide {
  from {
    opacity: 0;
    transform: translateX(-18px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

/* ─── Section Rule Width Reveal ─── */
.section-rule-animated {
  animation: ruleReveal .5s var(--ease-out) both;
}

@keyframes ruleReveal {
  from {
    width: 0
  }

  to {
    width: 36px
  }
}

/* ─── Stats Slot-Machine Blur ─── */
.stat-counting {
  filter: blur(1.5px);
  transition: filter .2s;
}

.stat-counted {
  filter: blur(0);
  transition: filter .4s;
}

/* ─── WWB Ring Scale Entrance ─── */
.wwb-ring-enter {
  animation: ringExpand .8s var(--ease-out) both;
}

.wwb-ring-1.wwb-ring-enter {
  animation-delay: 0s
}

.wwb-ring-2.wwb-ring-enter {
  animation-delay: .15s
}

.wwb-ring-3.wwb-ring-enter {
  animation-delay: .30s
}

.wwb-center.wwb-ring-enter {
  animation-delay: .45s;
  animation-name: ringExpandCenter
}

@keyframes ringExpand {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
  }
}

@keyframes ringExpandCenter {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
  }
}

/* ─── Data Orbit Dots ─── */
.orbit-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(30, 64, 175, .7), 0 0 28px rgba(30, 64, 175, .3);
  pointer-events: none;
  z-index: 2;
}

/* ─── Neelam Diamond Parallax Tilt ─── */
.neelam-svg.parallax-tilt {
  transition: transform .15s ease-out;
  will-change: transform;
}

/* ─── Marquee Pill Glow ─── */
.marquee-pill {
  position: relative;
  overflow: hidden
}

.marquee-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .18), transparent);
  transform: translateX(-100%);
  animation: pillGlow 4s linear infinite;
  pointer-events: none;
}

.marquee-pill:hover {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 6px 24px rgba(30, 64, 175, .2), 0 0 12px rgba(30, 64, 175, .1);
}

@keyframes pillGlow {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

/* ─── CTA Band Animated Background ─── */
.cta-band {
  position: relative;
  overflow: hidden
}

/* Scrolling diagonal grid */
.cta-band::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: ctaGridScroll 12s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes ctaGridScroll {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(40px, 40px)
  }
}

/* Floating shapes container */
.cta-float-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}

.cta-shape {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: rgba(255, 255, 255, .03);
  animation: ctaFloat linear infinite;
  pointer-events: none;
}

.cta-shape.hex {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}

.cta-shape.circle {
  border-radius: 50%
}

@keyframes ctaFloat {
  0% {
    transform: translateY(110vh) rotate(0deg);
    opacity: 0
  }

  10% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    transform: translateY(-10vh) rotate(180deg);
    opacity: 0
  }
}

/* ─── Footer Enhancements ─── */
/* Sliding underline on footer links */
.footer-col ul li a {
  position: relative;
  display: inline-block
}

.footer-col ul li a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: rgba(199, 213, 240, .8);
  transition: width .3s var(--ease);
}

.footer-col ul li a:hover::after {
  width: 100%
}

/* Social icon hover pop */
.soc-link {
  transition: all .25s var(--ease) !important
}

.soc-link:hover {
  transform: rotate(-10deg) scale(1.22) !important;
  box-shadow: 0 0 24px rgba(30, 64, 175, .5), 0 0 48px rgba(30, 64, 175, .15);
}

/* Footer subtle grid scroll */
.footer {
  position: relative;
  overflow: hidden
}

.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: footerGridScroll 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.footer .container {
  position: relative;
  z-index: 1
}

@keyframes footerGridScroll {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(48px)
  }
}

/* ─── Nav Logo Hover ─── */
.nav-logo-mark {
  transition: all .3s var(--ease) !important
}

.nav-logo:hover .nav-logo-mark {
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 0 22px rgba(30, 64, 175, .45);
}

/* ─── Nav CTA Button (Get In Touch) ─── */
.nav-cta {
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease) !important
}

.nav-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  pointer-events: none;
}

.nav-cta:hover::after {
  animation: btnShine .6s ease forwards;
}

.nav-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 20px rgba(30, 64, 175, .4), 0 0 40px rgba(30, 64, 175, .15);
}

/* Subtle continuous pulse on nav-cta */
.nav-cta::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(30, 64, 175, .3);
  animation: navCtaPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes navCtaPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0
  }

  50% {
    transform: scale(1.08);
    opacity: .6
  }
}

/* ─── Nav Link Hover Enhancement ─── */
.nav-link {
  position: relative
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all .25s var(--ease);
  transform: translateX(-50%);
  border-radius: 1px;
}

.nav-link:hover::after {
  width: 60%
}

.nav-link.active::after {
  width: 60%;
  background: var(--accent)
}

/* ─── Hero Eyebrow Dot Pulse ─── */
.hero-eyebrow-dot {
  animation: dotPulse 2s ease-in-out infinite !important;
}

@keyframes dotPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(30, 64, 175, .6)
  }

  50% {
    box-shadow: 0 0 0 10px rgba(30, 64, 175, 0)
  }
}

/* ─── Scroll Cue Enhanced ─── */
.scroll-cue-line {
  animation: scrollLine 2s ease-in-out infinite !important;
}

@keyframes scrollLine {

  0%,
  100% {
    height: 36px;
    opacity: .5
  }

  50% {
    height: 48px;
    opacity: 1
  }
}

/* ─── FAQ Item Hover ─── */
.faq-item {
  transition: background .2s var(--ease)
}

.faq-item:hover {
  background: rgba(30, 64, 175, .05)
}

.faq-q h4 {
  transition: all .2s var(--ease) !important
}

.faq-item:hover .faq-q h4 {
  transform: translateX(6px);
  color: var(--accent)
}

/* ─── Innovation Item Hover ─── */
.innov-item {
  transition: all .3s var(--ease) !important
}

.innov-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(30, 64, 175, .14)
}

.innov-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 1px;
  transition: height .3s var(--ease);
  box-shadow: 0 0 8px rgba(30, 64, 175, .3);
}

.innov-item {
  position: relative;
  overflow: hidden
}

.innov-item:hover::before {
  height: 100%
}

/* ─── How-We-Work Tick Hover ─── */
.hw-item:hover .hw-tick {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.1);
}

.hw-tick {
  transition: all .25s var(--ease) !important
}

/* ─── People Banner Shimmer ─── */
.people-banner {
  position: relative;
  overflow: hidden
}

.people-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .1), transparent);
  animation: bannerShimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bannerShimmer {
  0% {
    left: -50%
  }

  50% {
    left: 120%
  }

  100% {
    left: 120%
  }
}

/* ─── Stat Cell Hover ─── */
.stat-cell {
  transition: all .25s var(--ease) !important
}

.stat-cell:hover .stat-n {
  color: var(--accent);
  transform: scale(1.08);
}

.stat-n {
  transition: all .3s var(--ease)
}

/* ─── Page Hero Enhanced ─── */
.page-hero {
  position: relative;
  overflow: hidden
}

/* ─── Global Hover Lift for Interactive Elements ─── */
.card,
.ci-card,
.contact-form-wrap {
  transition: all .3s var(--ease-out) !important;
}

/* ─── Form Input Focus Glow ─── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  box-shadow: 0 0 0 4px rgba(30, 64, 175, .15), 0 0 28px rgba(30, 64, 175, .1) !important;
}

/* ─── WWB Center Hover ─── */
.wwb-center {
  transition: all .3s var(--ease) !important
}

.wwb-graphic:hover .wwb-center {
  /* box-shadow: 0 0 40px rgba(30, 64, 175, .35), 0 0 80px rgba(30, 64, 175, .12), var(--shadow-md); */
  /* border-color: rgba(30, 64, 175, .4); */
}

/* ─── Slider Dot Hover ─── */
.s-dot {
  transition: all .3s var(--ease) !important
}

.s-dot:hover {
  background: var(--accent);
  transform: scale(1.3);
}

/* ─── Image / Card Tilt on Hover (subtle) ─── */
.nf-card:hover,
.value-card:hover {
  transform: translateY(-6px) perspective(800px) rotateX(1.5deg) !important;
  box-shadow: 0 12px 32px rgba(30, 64, 175, .12), 0 0 0 1px rgba(30, 64, 175, .1);
}

.vm-card:hover {
  transform: translateY(-5px) perspective(800px) rotateX(1deg) !important;
  box-shadow: 0 10px 28px rgba(30, 64, 175, .1), 0 0 0 1px rgba(30, 64, 175, .08);
}

/* ─── Cap-Cell Enhanced Hover ─── */
.cap-cell {
  transition: all .3s var(--ease) !important
}

.cap-cell:hover {
  transform: translateY(-4px)
}

.cap-cell:hover .cap-icon {
  transform: scale(1.2) rotate(-8deg);
  color: var(--accent);
}

.cap-icon {
  transition: all .35s var(--ease) !important
}

.cap-cell:hover h3 {
  color: var(--accent);
  transition: color .3s
}

/* ─── Impact Card Enhanced Hover ─── */
.impact-card {
  transition: all .3s var(--ease) !important;
  position: relative;
  overflow: hidden
}

.impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(30, 64, 175, .12), 0 0 0 1px rgba(30, 64, 175, .15);
  border-color: rgba(30, 64, 175, .2);
}

.impact-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .06), transparent);
  pointer-events: none;
  z-index: 0;
}

.impact-card:hover::after {
  animation: scanBeam .8s ease forwards;
}

.impact-card:hover .impact-text h3 {
  color: var(--accent);
  transition: color .3s
}

/* ─── Section Background Circuit Grid ─── */
.section,
.section-sm {
  position: relative
}

.section::before,
.section-sm::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(30, 64, 175, .03) 1px, transparent 0);
  background-size: 32px 32px;
}

.section>.container,
.section-sm>.container {
  position: relative;
  z-index: 1
}

/* ─── Animated Section Divider Lines ─── */
.section-rule {
  position: relative
}

.section-rule.center::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .15), transparent);
  transform: translate(-50%, -50%);
  animation: ruleGlow 3s ease-in-out infinite;
}

@keyframes ruleGlow {

  0%,
  100% {
    opacity: 0;
    width: 0
  }

  50% {
    opacity: 1;
    width: 80px
  }
}

/* ─── Eyebrow Trailing Accent Line ─── */
.eyebrow::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 12px;
  border-radius: 1px;
  transition: width .5s var(--ease-out) .3s;
}

.eyebrow-animated::after {
  width: 32px
}

/* ─── Stat Cell Enhanced Hover ─── */
.stat-cell {
  position: relative;
  overflow: hidden
}

.stat-cell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .3s var(--ease);
}

.stat-cell:hover::after {
  width: 100%
}

.stat-cell:hover {
  background: rgba(30, 64, 175, .02);
  border-radius: 8px
}

/* ─── CTA Box Glassmorphism ─── */
.cta-box {
  position: relative;
  z-index: 1
}

.cta-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  pointer-events: none;
  z-index: -1;
}

/* ─── WWB Graphic Ring Glow on Hover ─── */
.wwb-ring {
  transition: all .4s var(--ease) !important
}

.wwb-graphic:hover .wwb-ring-1 {
  box-shadow: 0 0 30px rgba(30, 64, 175, .15);
  border-color: rgba(30, 64, 175, .25) !important
}

.wwb-graphic:hover .wwb-ring-2 {
  box-shadow: 0 0 25px rgba(30, 64, 175, .12);
  border-color: rgba(30, 64, 175, .2) !important
}

.wwb-graphic:hover .wwb-ring-3 {
  box-shadow: 0 0 20px rgba(30, 64, 175, .1);
  border-color: rgba(30, 64, 175, .18) !important
}

/* ─── Animated Gradient Separator Lines ─── */
.section-glow-sep {
  position: relative;
}

.section-glow-sep::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .3), rgba(30, 64, 175, .6), rgba(30, 64, 175, .3), transparent);
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.section-glow-sep.sep-visible::after {
  animation: sepExpand 1.2s var(--ease-out) forwards;
}

@keyframes sepExpand {
  0% {
    width: 0;
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    width: min(80%, 900px);
    opacity: 1
  }
}

/* Gradient pulse on the separator */
.section-glow-sep.sep-visible::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 600px);
  height: 4px;
  background: radial-gradient(ellipse at center, rgba(30, 64, 175, .25), transparent 70%);
  animation: sepPulse 3s ease-in-out infinite 1.2s;
  pointer-events: none;
  z-index: 2;
}

@keyframes sepPulse {

  0%,
  100% {
    opacity: .3;
    transform: translateX(-50%) scaleX(.8)
  }

  50% {
    opacity: .7;
    transform: translateX(-50%) scaleX(1.2)
  }
}

/* ─── Heading Underline Reveal ─── */
.heading-reveal {
  position: relative;
  display: inline-block;
}

.heading-reveal::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(30, 64, 175, .3));
  transition: width .8s var(--ease-out);
}

.heading-reveal.revealed::after {
  width: 60px;
}

/* ─── Card Blur-to-Sharp Stagger ─── */
.card-blur-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(30px) scale(.96);
  transition: all .7s var(--ease-out);
}

.card-blur-in.card-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* ─── Floating Ambient Particles (for content sections) ─── */
.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(30, 64, 175, .2);
  box-shadow: 0 0 8px rgba(30, 64, 175, .15);
  animation: ambientFloat linear infinite;
  pointer-events: none;
}

@keyframes ambientFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  10% {
    opacity: .6
  }

  50% {
    opacity: .8
  }

  90% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

/* ─── Counter Bounce ─── */
.counter-bounce {
  animation: counterBounce .5s var(--ease-out);
}

@keyframes counterBounce {
  0% {
    transform: scale(1)
  }

  30% {
    transform: scale(1.15)
  }

  60% {
    transform: scale(.95)
  }

  100% {
    transform: scale(1)
  }
}

/* ─── Text Shimmer (section headings) ─── */
.text-shimmer {
  position: relative;
  overflow: hidden;
}

.text-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .12), transparent);
  pointer-events: none;
}

.text-shimmer.shimmer-active::after {
  animation: textShimmerSweep 1.5s ease forwards;
}

@keyframes textShimmerSweep {
  0% {
    left: -60%
  }

  100% {
    left: 160%
  }
}

/* ─── Impact Bar Progressive Fill ─── */
.impact-bar-fill {
  position: relative;
  overflow: hidden;
}

.impact-bar-fill .impact-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .8s var(--ease-out);
}

.impact-bar-fill.bar-visible .impact-bar {
  transform: scaleY(1);
}

/* ─── Section Wipe-In ─── */
.section-wipe {
  position: relative;
}

.section-wipe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-0) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .8s ease;
}

.section-wipe.wipe-done::before {
  opacity: 0;
}

/* ─── Animated Grid Lines Background ─── */
.grid-lines-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.grid-lines-bg .grid-line {
  position: absolute;
  background: rgba(30, 64, 175, .06);
}

.grid-lines-bg .grid-line.h {
  height: 1px;
  width: 0;
  left: 0;
  transition: width 1.5s var(--ease-out);
}

.grid-lines-bg .grid-line.v {
  width: 1px;
  height: 0;
  top: 0;
  transition: height 1.5s var(--ease-out);
}

.grid-lines-bg.lines-visible .grid-line.h {
  width: 100%
}

.grid-lines-bg.lines-visible .grid-line.v {
  height: 100%
}

/* ─── Stat Number Color Flash ─── */
.stat-flash .stat-n {
  animation: statColorFlash .8s ease;
}

@keyframes statColorFlash {
  0% {
    color: var(--accent)
  }

  100% {
    color: var(--text-0)
  }
}

/* ─── Value Card Number Watermark Reveal ─── */
.value-num-reveal {
  opacity: 0;
  transform: translateY(20px) scale(.8);
  transition: all .6s var(--ease-out) .2s;
}

.value-card.card-visible .value-num-reveal,
.value-card.card-visible .value-num {
  opacity: .04;
  transform: translateY(0) scale(1);
}

/* ─── VM Card Accent Border Slide ─── */
.vm-card {
  position: relative;
  overflow: hidden
}

.vm-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), rgba(30, 64, 175, .2));
  border-radius: 0 1px 1px 0;
  transition: height .6s var(--ease-out);
}

.vm-card.card-visible::after {
  height: 100%;
}

/* ─── NF Card Number Pulse ─── */
.nf-card.card-visible .nf-num {
  animation: nfNumPulse .4s ease .3s both;
}

@keyframes nfNumPulse {
  0% {
    transform: translateX(-8px);
    opacity: 0
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }
}

/* ─── Eyebrow Dot Trail ─── */
.eyebrow-dot-trail {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-left: 0 !important;
  /* override JS-set padding; we use gap instead */
}

.eyebrow-dot-trail::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .4s var(--ease-out);
  box-shadow: 0 0 10px rgba(30, 64, 175, .4);
  /* no position:absolute — flex child, auto-aligns with text */
}

.eyebrow-dot-trail.dot-visible::before {
  transform: scale(1);
  animation: dotTrailPulse 2s ease-in-out infinite .4s;
}

@keyframes dotTrailPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(30, 64, 175, .4)
  }

  50% {
    box-shadow: 0 0 0 8px rgba(30, 64, 175, 0)
  }
}

/* ─── Section Icon Float ─── */
.cap-icon-float {
  animation: capIconFloat 4s ease-in-out infinite;
  animation-play-state: paused;
}

.cap-cell.card-visible .cap-icon-float {
  animation-play-state: running;
}

@keyframes capIconFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-4px)
  }
}

/* ─── Stats Strip Shimmer ─── */
.stats-strip {
  position: relative;
  overflow: hidden
}

.stats-strip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .05), transparent);
  pointer-events: none;
  z-index: 1;
}

.stats-strip.strip-visible::after {
  animation: stripShimmer 2s ease forwards;
}

@keyframes stripShimmer {
  0% {
    left: -50%
  }

  100% {
    left: 150%
  }
}

/* ─── People Banner Entrance ─── */
.people-banner-enter {
  opacity: 0;
  transform: scale(.95);
  transition: all .8s var(--ease-out);
}

.people-banner-enter.pb-visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── HW Item Stagger Slide ─── */
.hw-item-anim {
  opacity: 0;
  transform: translateX(-20px);
  transition: all .5s var(--ease-out);
}

.hw-item-anim.hw-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Innovation Grid Stagger ─── */
.innov-item-anim {
  opacity: 0;
  transform: translateY(15px) scale(.97);
  transition: all .5s var(--ease-out);
}

.innov-item-anim.innov-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── Contact Form Glow Entrance ─── */
.contact-form-glow {
  position: relative;
}

.contact-form-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(30, 64, 175, .15), transparent 40%, transparent 60%, rgba(30, 64, 175, .1));
  opacity: 0;
  transition: opacity .8s ease;
  z-index: -1;
}

.contact-form-glow.form-visible::before {
  opacity: 1;
  animation: formGlowPulse 4s ease-in-out infinite;
}

@keyframes formGlowPulse {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: .8
  }
}

/* ─── CI Card Stagger Slide ─── */
.ci-card-anim {
  opacity: 0;
  transform: translateX(20px);
  transition: all .5s var(--ease-out);
}

.ci-card-anim.ci-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── FAQ Category Slide In ─── */
.faq-cat-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s var(--ease-out);
}

.faq-cat-anim.faq-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE: Reduce animations on smaller screens
   ============================================================ */

@media(max-width:860px) {
  .cursor-glow {
    display: none !important
  }

  #neural-canvas {
    opacity: .55
  }

  .cta-band::after {
    animation-duration: 20s
  }

  .nav-link::after {
    display: none
  }

  .nav-cta::before {
    display: none
  }

  .section::before,
  .section-sm::before {
    display: none
  }

  .ambient-particles {
    display: none
  }

  .grid-lines-bg {
    display: none
  }

  .section-glow-sep::before {
    display: none
  }
}

@media(max-width:640px) {
  #neural-canvas {
    opacity: .4
  }

  .btn-primary::after {
    display: none
  }

  .btn-outline::before {
    display: none
  }

  .cap-cell::after {
    display: none
  }

  .nf-card::before,
  .feat-card::before,
  .value-card::before,
  .vm-card::before {
    display: none
  }

  .orbit-dot {
    display: none
  }

  .cta-shape {
    display: none
  }

  .nf-card:hover,
  .value-card:hover {
    transform: translateY(-4px) !important
  }

  .vm-card:hover {
    transform: translateY(-3px) !important
  }

  .card-blur-in {
    filter: none;
    transform: translateY(20px) scale(1)
  }

  .section-glow-sep::after {
    display: none
  }

  .text-shimmer::after {
    display: none
  }

  .vm-card::after {
    display: none
  }

  .contact-form-glow::before {
    display: none
  }
}

/* ============================================================
   ACCESSIBILITY: prefers-reduced-motion
   ============================================================ */
@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  #neural-canvas {
    display: none !important
  }

  .cursor-glow {
    display: none !important
  }

  .orbit-dot {
    display: none !important
  }

  .cta-shape {
    display: none !important
  }

  .ambient-particles {
    display: none !important
  }

  .grid-lines-bg {
    display: none !important
  }

  .card-blur-in {
    opacity: 1;
    filter: none;
    transform: none
  }

  .section-glow-sep::after,
  .section-glow-sep::before {
    display: none !important
  }
}