/* ═══════════════════════════════════════════════════
   LOADER — FULL OVERHAUL
   ═══════════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #080d1a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .9s ease, visibility .9s ease, transform .9s ease, filter .9s ease;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.07);
  filter: blur(10px);
}

/* Drifting grid background */
.loader-grid {
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(rgba(79,200,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,200,232,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: grid-drift 18s linear infinite;
}
@keyframes grid-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(44px, 44px); }
}

/* Horizontal scanline sweep */
.loader-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(79,200,232,.025) 40%,
    rgba(79,200,232,.05) 50%,
    rgba(79,200,232,.025) 60%,
    transparent 100%);
  animation: scan-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scan-sweep {
  0%   { top: -120px; }
  100% { top: 100%; }
}

/* Corner brackets */
.loader-corner {
  position: absolute;
  width: 44px; height: 44px;
  border-color: rgba(79,200,232,.2);
  border-style: solid;
  animation: corner-in .8s .2s ease both;
}
.loader-corner.tl { top: 28px; left: 28px; border-width: 1px 0 0 1px; }
.loader-corner.tr { top: 28px; right: 28px; border-width: 1px 1px 0 0; }
.loader-corner.bl { bottom: 28px; left: 28px; border-width: 0 0 1px 1px; }
.loader-corner.br { bottom: 28px; right: 28px; border-width: 0 1px 1px 0; }
@keyframes corner-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* HUD data panels */
.loader-hud {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: hud-in .9s .4s ease both;
}
.loader-hud-left  { left: 48px; bottom: 80px; align-items: flex-start; }
.loader-hud-right { right: 48px; bottom: 80px; align-items: flex-end; }
@keyframes hud-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.loader-hud-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .15em;
  color: #1e3560;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.loader-hud-item span {
  color: rgba(79,200,232,.4);
  font-size: .7rem;
  letter-spacing: .1em;
}

/* Top accent line */
.loader-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4fc8e8, #63cf49, transparent);
  animation: top-line-in .6s ease both;
}
@keyframes top-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Center content */
.loader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fadeUp .6s .1s ease both;
}

/* Logo + rings */
.loader-logo-wrap {
  position: relative;
  width: 140px; height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-logo-wrap img {
  width: 68px; height: 68px;
  object-fit: contain;
  position: relative;
  z-index: 4;
  animation: logo-pop .8s .3s cubic-bezier(.175,.885,.32,1.275) both,
             loader-glow 2.4s ease-in-out infinite;
}
@keyframes logo-pop {
  from { opacity: 0; transform: scale(.2); filter: blur(16px); }
  to   { opacity: 1; transform: scale(1);  filter: blur(0); }
}
@keyframes loader-glow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(79,200,232,.4)); }
  50%       { filter: drop-shadow(0 0 36px rgba(79,200,232,1)); }
}

/* 3 concentric spinning rings */
.loader-ring-a,
.loader-ring-b,
.loader-ring-c { position: absolute; border-radius: 50%; border-style: solid; }

.loader-ring-a {
  inset: 6px;
  border-width: 1.5px;
  border-color: rgba(79,200,232,.55) transparent transparent transparent;
  animation: spin 1.6s linear infinite;
}
.loader-ring-b {
  inset: -14px;
  border-width: 1px;
  border-color: transparent rgba(79,200,232,.25) transparent rgba(79,200,232,.25);
  animation: spin 3.2s linear infinite reverse;
}
.loader-ring-c {
  inset: -34px;
  border-width: 1px;
  border-color: rgba(79,200,232,.1) transparent rgba(79,200,232,.06) transparent;
  animation: spin 7s linear infinite;
}

/* Orbiting dots */
.loader-orbit-dot {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform-origin: 0 0;
}
.loader-orbit-1 {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #4fc8e8;
  box-shadow: 0 0 10px #4fc8e8, 0 0 20px rgba(79,200,232,.5);
  animation: orbit-spin-a 2.4s linear infinite;
  z-index: 5;
}
.loader-orbit-2 {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #63cf49;
  box-shadow: 0 0 8px #63cf49;
  animation: orbit-spin-b 5s linear infinite reverse;
  z-index: 5;
}
@keyframes orbit-spin-a {
  from { transform: rotate(0deg) translateX(66px); }
  to   { transform: rotate(360deg) translateX(66px); }
}
@keyframes orbit-spin-b {
  from { transform: rotate(120deg) translateX(88px); }
  to   { transform: rotate(480deg) translateX(88px); }
}

/* Wordmark */
.loader-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3em;
  text-align: center;
  animation: wordmark-in .5s .5s ease both;
}
@keyframes wordmark-in {
  from { opacity: 0; letter-spacing: .6em; }
  to   { opacity: 1; letter-spacing: .3em; }
}

.loader-tagline {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #3d5a80;
  margin-top: -8px;
}

/* Cycling status text */
.loader-status {
  font-size: .7rem;
  font-weight: 500;
  color: #2a5070;
  letter-spacing: .06em;
  font-family: 'Inter', monospace;
  min-height: 1.1em;
  transition: opacity .3s ease;
}
.loader-status.fade { opacity: 0; }

/* Progress row */
.loader-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.loader-bar-track {
  width: 200px; height: 2px;
  background: #111d35;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loader-bar-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(79,200,232,.08) 50%, transparent 100%);
  animation: bar-shimmer 2s linear infinite;
}
@keyframes bar-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fc8e8, #63cf49);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(79,200,232,.8);
  transition: width .12s linear;
  position: relative;
  z-index: 1;
}
.loader-percent {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: #4fc8e8;
  min-width: 38px;
  text-align: right;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS
   ═══════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #4fc8e8, #63cf49);
  z-index: 200;
  box-shadow: 0 0 8px rgba(79,200,232,.6);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }

  .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4fc8e8;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(79,200,232,.8);
    transition: width .15s ease, height .15s ease, background .15s ease, opacity .2s ease;
  }
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(79,200,232,.45);
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width .3s ease, height .3s ease, border-color .3s ease, opacity .2s ease;
  }

  body.cursor-hover .cursor-dot   { width: 10px; height: 10px; background: #7adff5; }
  body.cursor-hover .cursor-ring  { width: 46px; height: 46px; border-color: rgba(79,200,232,.75); }
  body.cursor-clicking .cursor-dot  { width: 4px; height: 4px; }
  body.cursor-clicking .cursor-ring { width: 22px; height: 22px; }
}

/* ═══════════════════════════════════════════════════
   PARTICLES CANVAS
   ═══════════════════════════════════════════════════ */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   HERO — FLOATING STAT CARDS
   ═══════════════════════════════════════════════════ */
.float-card {
  position: absolute;
  background: rgba(13,21,41,.92);
  border: 1px solid #1e3560;
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(79,200,232,.05);
  z-index: 3;
  min-width: 110px;
}
.float-card .fc-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #3d5a80;
  margin-bottom: 3px;
}
.float-card .fc-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #4fc8e8;
  line-height: 1;
}
.float-card .fc-tag {
  font-size: .6rem;
  font-weight: 600;
  color: #4fc87a;
  margin-top: 3px;
}

.float-card-1 { top:  4%; right: -18px; animation: fc-float-a 4s ease-in-out infinite; }
.float-card-2 { bottom: 16%; left: -24px; animation: fc-float-b 5s ease-in-out infinite; }
.float-card-3 { top: 52%; right: -32px; animation: fc-float-c 3.6s ease-in-out infinite; }

@keyframes fc-float-a {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes fc-float-b {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@keyframes fc-float-c {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%       { transform: translateY(-6px) translateX(3px); }
}

/* ═══════════════════════════════════════════════════
   STAGGER REVEAL GRIDS
   ═══════════════════════════════════════════════════ */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   PORTFOLIO CARD — PREVIEW IMAGE
   ═══════════════════════════════════════════════════ */
.company-preview {
  height: 170px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid #1a2a4a;
  position: relative;
}
.company-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.company-card:hover .company-preview img {
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════
   SERVICE ICON — SVG
   ═══════════════════════════════════════════════════ */
.service-icon svg {
  width: 22px;
  height: 22px;
  stroke: #4fc8e8;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════
   SHIMMER TEXT EFFECT
   ═══════════════════════════════════════════════════ */
.shimmer {
  background: linear-gradient(
    90deg,
    #e8f4ff 0%,
    #7adff5 35%,
    #4fc8e8 50%,
    #7adff5 65%,
    #e8f4ff 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-move 3.5s linear infinite;
}
@keyframes shimmer-move {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}

/* ═══════════════════════════════════════════════════
   SECTION LABEL PULSE
   ═══════════════════════════════════════════════════ */
.section-label::before {
  animation: label-glow 2.5s ease-in-out infinite;
}
@keyframes label-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; box-shadow: 2px 0 8px rgba(79,200,232,.6); }
}

/* ═══════════════════════════════════════════════════
   TEAM AVATAR RING PULSE
   ═══════════════════════════════════════════════════ */
.team-card:hover .team-avatar {
  border-color: #4fc8e8;
  box-shadow: 0 0 0 3px rgba(79,200,232,.15);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ═══════════════════════════════════════════════════
   HERO ORB EXPANDED
   ═══════════════════════════════════════════════════ */
.hero-orb-2 {
  position: absolute;
  bottom: 10%; left: 5%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,207,73,.06) 0%, transparent 70%);
  animation: orb-pulse 8s ease-in-out infinite reverse;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   COUNTER NUMBER
   ═══════════════════════════════════════════════════ */
.count-up { display: inline-block; }

/* ═══════════════════════════════════════════════════
   MAGNETIC BUTTON HINT
   ═══════════════════════════════════════════════════ */
.btn-primary,
.btn-outline {
  will-change: transform;
}

/* ═══════════════════════════════════════════════════
   TECH TICKER BAND
   ═══════════════════════════════════════════════════ */
.tech-ticker {
  position: relative;
  z-index: 1;
  border-top: 1px solid #1a2a4a;
  border-bottom: 1px solid #1a2a4a;
  padding: 11px 0;
  background: rgba(8,13,26,.9);
  overflow: hidden;
}
.tech-ticker::before,
.tech-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.tech-ticker::before { left: 0;  background: linear-gradient(90deg, #080d1a, transparent); }
.tech-ticker::after  { right: 0; background: linear-gradient(-90deg, #080d1a, transparent); }

.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker-scroll 36s linear infinite;
}
.ticker-inner:hover { animation-play-state: paused; }

.ticker-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 28px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a4060;
  white-space: nowrap;
  transition: color .2s;
}
.ticker-item:hover { color: #4fc8e8; }
.ticker-item::after {
  content: '·';
  margin-left: 28px;
  color: #1a2a4a;
  font-size: .9rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════
   3D CARD TILT
   ═══════════════════════════════════════════════════ */
.company-card,
.service-card,
.team-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
/* override the existing hover so JS transform wins */
.company-card:hover,
.service-card:hover,
.team-card:hover {
  transform: none; /* JS handles this */
}

/* ═══════════════════════════════════════════════════
   HERO HEADING GLITCH PULSE
   ═══════════════════════════════════════════════════ */
.hero-h1 {
  animation: fadeUp .7s .1s ease both, hero-glitch 9s steps(1) 2s infinite;
}
@keyframes hero-glitch {
  0%, 88%, 92%, 100% { transform: none; text-shadow: none; }
  89% { transform: translateX(-3px) skewX(1deg);
        text-shadow: 3px 0 0 rgba(79,200,232,.4), -3px 0 0 rgba(99,207,73,.3); }
  90% { transform: translateX(3px) skewX(-1deg);
        text-shadow: -3px 0 0 rgba(79,200,232,.4), 3px 0 0 rgba(99,207,73,.3); }
  91% { transform: translateX(-1px); text-shadow: none; }
}