/*
  perf.css — Mobile & cross-device performance layer
  Rules here only remove invisible overhead; nothing changes the visual design.
*/

/* ── Hardware-accelerate things that animate ─────────────────────────────── */
.orb, .float-shape, .cursor, .cursor-follower,
.reveal, .nav, .hero-bg-img, .portfolio-card,
.bento-card, .testimonial-card, .industry-card {
  will-change: transform;
}

/* ── Touch / mobile devices ──────────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 768px) {

  /* Hide desktop-only cursor elements */
  .cursor, .cursor-follower { display: none !important; }
  body { cursor: auto !important; }
  button, a, [role="button"] { cursor: pointer !important; }

  /* Reduce orb blur — still looks identical visually, ~3× faster paint */
  .orb  { filter: blur(50px) !important; }
  .float-shape { filter: blur(40px) !important; }
  .cta-bg .orb { filter: blur(60px) !important; }

  /* Replace backdrop-filter with a solid equivalent — no visual change */
  .nav.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6,11,20,.96) !important;
  }
  .mobile-cta {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10,16,32,.97) !important;
  }
  .nav-mobile-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15,26,46,.85) !important;
  }
  .industry-tag {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(59,130,246,.08) !important;
  }
  .glass {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* Simplify reveal — keep the fade-up, remove blur (expensive on mobile) */
  .reveal {
    filter: none !important;
    transform: translateY(40px) !important;
  }
  .reveal.visible {
    transform: translateY(0) !important;
  }

  /* Remove 3D rotateX from reveal — triggers GPU layer on every scroll */
  .reveal {
    transform: translateY(40px) !important;
  }

  /* Disable parallax — causes scroll jank on iOS */
  .hero-bg-img, .hero-mesh { transform: none !important; }

  /* Reduce card hover lift — keep the effect but lighter */
  .portfolio-card:hover { transform: translateY(-4px) !important; }
  .bento-card:hover { transform: translateY(-4px) !important; }

  /* Disable 3D card tilt (requires mouse, unavailable on touch) */
  .portfolio-card, .testimonial-card, .industry-card,
  .value-card, .team-card, .award-card, .process-card,
  .global-card, .office-card, .faq-item, .info-block {
    transform: none !important;
  }

  /* Section stagger animation — play all at once on mobile (no mouse to trigger) */
  .section { animation-delay: 0s !important; }

  /* Reduce reveal transition time — feels snappier on touch */
  .reveal { transition-duration: 0.6s !important; }
}

/* ── Very small screens (<480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Bump tap targets to 44px minimum (Apple HIG) */
  .nav-link, .nav-cta, button, .faq-question { min-height: 44px; }

  /* Tighten section padding on small screens */
  .section { padding: 4rem 0 !important; }
  .hero { padding: 7rem 0 5rem !important; }

  /* Prevent hero title overflow */
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; letter-spacing: -.02em !important; }
}

/* ── Admin Portal nav button ─────────────────────────────────────────────── */
.nav-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .3s, border-color .3s, background .3s;
  white-space: nowrap;
}
.nav-admin-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}
@media (max-width: 768px) {
  .nav-admin-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR + DROPDOWN HEADER — shared CSS for all pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.hdr-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  height: 46px;
  background: #020308;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .72rem;
  color: rgba(255,255,255,.6);
}
.hdr-top-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.hdr-flags {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hdr-flag-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .2s, box-shadow .2s;
  display: block;
}
.hdr-flag-img:hover {
  transform: scale(1.12) translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
}
.hdr-vsep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.hdr-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hdr-contact-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .25s;
}
.hdr-contact-item:hover { color: #fff; }
.hdr-online {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #34d399;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .04em;
}
.hdr-online::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
  animation: hdrPulse 2s ease-in-out infinite;
}
@keyframes hdrPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.75); }
}
.hdr-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hdr-culture {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color .25s;
}
.hdr-culture:hover { color: #fff; }
.hdr-socials {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.hdr-social {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.hdr-social:hover {
  background: rgba(124,58,237,.35);
  border-color: rgba(124,58,237,.5);
  color: #fff;
  transform: translateY(-1px);
}

/* Push main nav below topbar */
.nav { top: 46px !important; }

/* ── Dropdown nav ────────────────────────────────────────────────────────── */
.nav-dd {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dd-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem 0;
  cursor: pointer;
  position: relative;
  color: var(--muted, #8B7EC8);
  transition: color .4s;
}
.nav-dd-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gradient, linear-gradient(135deg,#4C1D95,#7C3AED 45%,#06B6D4));
  transition: width .4s cubic-bezier(0.16,1,0.3,1);
}
.nav-dd:hover .nav-dd-btn,
.nav-dd-btn.active { color: #fff; }
.nav-dd:hover .nav-dd-btn::after,
.nav-dd-btn.active::after { width: 100%; }
.nav-dd-arrow {
  flex-shrink: 0;
  opacity: .65;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
}
.nav-dd:hover .nav-dd-arrow { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + .65rem);
  left: 50%;
  min-width: 215px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .25s, visibility .25s, transform .3s cubic-bezier(0.16,1,0.3,1);
  z-index: 200;
  overflow: hidden;
}
.nav-dd:hover .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.nav-dd-menu a {
  display: block;
  padding: .62rem 1.25rem;
  color: #1a1a2e;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,.05);
  white-space: nowrap;
  transition: background .2s, color .2s, padding-left .2s;
}
.nav-dd-menu a:last-child { border-bottom: none; }
.nav-dd-menu a:hover {
  background: #f3eeff;
  color: #7C3AED;
  padding-left: 1.5rem;
}

/* ── Topbar responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hdr-flags, .hdr-vsep { display: none; }
}
@media (max-width: 768px) {
  .hdr-culture { display: none; }
  .hdr-right { margin-left: 0; }
  .hdr-contact { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .hdr-socials { display: none; }
  .hdr-contact-item svg { display: none; }
}

/* ── Respect user preference: no motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee-track { animation: none !important; }
}