/* =========================================
   1ST RANKING TECHNOLOGIES
   SHINE, GLOW & ANIMATION EFFECTS
   ========================================= */

/* ── GOLD SHIMMER KEYFRAMES ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,164,55,0); }
  50%       { box-shadow: 0 0 20px 6px rgba(201,164,55,0.25); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(201,164,55,0.2); }
  50%       { border-color: rgba(201,164,55,0.6); }
}
@keyframes scanLine {
  0%   { top: -5%; opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.4; }
  100% { top: 105%; opacity: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   HERO ENHANCEMENTS
   ========================================= */

/* Animated grid background */
.hero {
  background-image:
    linear-gradient(135deg, #0d0d0d 0%, #1a1206 40%, #0a0a0a 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(201,164,55,0.03) 60px,
      rgba(201,164,55,0.03) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(201,164,55,0.03) 60px,
      rgba(201,164,55,0.03) 61px
    );
}

/* Animated orbs behind hero */
.hero::before {
  animation: floatUp 6s ease-in-out infinite;
}
.hero::after {
  animation: floatUp 8s ease-in-out infinite reverse;
}

/* Gold shimmer on main H1 */
.hero h1 .gold {
  background: linear-gradient(
    90deg,
    #C9A437 0%,
    #f5e09a 30%,
    #C9A437 50%,
    #a07c1a 70%,
    #C9A437 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Italic tagline glow */
.hero-tagline-italic em {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(201,164,55,0.4);
}

/* Hero badge animated border */
.hero-badge {
  animation: borderGlow 3s ease-in-out infinite;
}

/* Stat numbers glow */
.stat-num {
  text-shadow: 0 0 20px rgba(201,164,55,0.5);
  animation: countUp 0.6s ease forwards;
}

/* Hero card scan line effect */
.hero-card {
  overflow: hidden;
}
.hero-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,164,55,0.4), transparent);
  animation: scanLine 4s ease-in-out infinite;
  pointer-events: none;
}

/* =========================================
   NAVBAR ENHANCEMENTS
   ========================================= */

/* Logo hex glow on hover */
.logo:hover .logo-hex {
  box-shadow: 0 0 20px rgba(201,164,55,0.4);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* Gold shimmer on active nav link */
.nav-links a.active {
  background: linear-gradient(90deg, #C9A437, #f5e09a, #C9A437);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* =========================================
   BUTTON ENHANCEMENTS
   ========================================= */

/* Shimmer sweep on primary buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
}
.btn-primary:hover::before {
  animation: btnShimmer 0.6s ease forwards;
}
@keyframes btnShimmer {
  from { left: -100%; }
  to   { left: 160%; }
}
.btn-primary:hover {
  box-shadow: 0 0 25px rgba(201,164,55,0.5), 0 6px 20px rgba(201,164,55,0.3);
}

/* Outline button glow */
.btn-outline:hover {
  box-shadow: 0 0 20px rgba(201,164,55,0.35);
}

/* =========================================
   SECTION DIVIDERS (gold line accents)
   ========================================= */
.section-header {
  position: relative;
  padding-bottom: 4px;
}
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 16px auto 0;
  border-radius: 2px;
}
.section-header.left-align::after {
  margin-left: 0;
}

/* =========================================
   TRUST BAR
   ========================================= */
.trust-item {
  position: relative;
  padding: 8px 16px;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.trust-item:hover {
  background: rgba(201,164,55,0.1);
  text-shadow: 0 0 12px rgba(201,164,55,0.6);
}
.trust-item i {
  filter: drop-shadow(0 0 6px rgba(201,164,55,0.5));
}

/* =========================================
   SERVICE CARDS
   ========================================= */
.service-card {
  position: relative;
  overflow: hidden;
}

/* Subtle diagonal shine on hover */
.service-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(201,164,55,0.06) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.service-card:hover::after {
  left: 130%;
}

/* Icon float on hover */
.service-icon, .sc-icon {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover .service-icon,
.service-card:hover .sc-icon {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 20px rgba(201,164,55,0.2);
}

/* =========================================
   WHY US SECTION
   ========================================= */
.stat-box, .why-card {
  position: relative;
  overflow: hidden;
}
.stat-box::before, .why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top right, rgba(201,164,55,0.06), transparent 70%);
  pointer-events: none;
}
.stat-box:hover, .why-card:hover {
  animation: goldPulse 1.5s ease-in-out;
}

/* =========================================
   ENGAGE STEPS
   ========================================= */
.engage-step-icon {
  position: relative;
}
.engage-step:hover .engage-step-icon {
  animation: floatUp 2s ease-in-out infinite;
}

/* Connector arrows pulse */
.engage-connector i {
  animation: goldPulse 2s ease-in-out infinite;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201,164,55,0.5));
}

/* =========================================
   INDUSTRY CARDS
   ========================================= */
.industry-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.industry-card { position: relative; overflow: hidden; }
.industry-card:hover::after {
  opacity: 1;
}
.industry-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.industry-card:hover .industry-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 0 20px rgba(201,164,55,0.3);
}

/* =========================================
   TRUSTED LOGO ITEMS
   ========================================= */
.trusted-logo-item {
  position: relative;
  overflow: hidden;
}
.trusted-logo-item::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,164,55,0.08), transparent);
  transition: left 0.5s ease;
}
.trusted-logo-item:hover::before {
  left: 150%;
}

/* =========================================
   CTA BANNER
   ========================================= */
.cta-banner {
  position: relative;
}
.cta-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-banner::before {
  bottom: 0; top: auto;
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* =========================================
   FOOTER LOGO HEX GLOW
   ========================================= */
.footer-logo-hex {
  transition: box-shadow 0.3s ease;
}
.logo:hover .footer-logo-hex {
  box-shadow: 0 0 16px rgba(201,164,55,0.3);
}

/* =========================================
   SCROLL REVEAL ANIMATIONS
   (Applied via JS)
   ========================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered delay for grids */
.reveal:nth-child(1)      { transition-delay: 0.05s; }
.reveal:nth-child(2)      { transition-delay: 0.15s; }
.reveal:nth-child(3)      { transition-delay: 0.25s; }
.reveal:nth-child(4)      { transition-delay: 0.35s; }
.reveal:nth-child(5)      { transition-delay: 0.45s; }
.reveal:nth-child(6)      { transition-delay: 0.55s; }

/* =========================================
   BADGE SHIMMER
   ========================================= */
.section-badge, .badge {
  position: relative;
  overflow: hidden;
}
.section-badge::after, .badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: badgeShimmer 3s ease-in-out infinite;
}
@keyframes badgeShimmer {
  0%   { left: -100%; }
  40%  { left: 150%; }
  100% { left: 150%; }
}

/* =========================================
   FORM INPUT GOLD FOCUS GLOW
   ========================================= */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,164,55,0.15), 0 0 12px rgba(201,164,55,0.1);
}

/* =========================================
   CONTACT ICON GLOW
   ========================================= */
.contact-icon, .ci-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-item:hover .contact-icon,
.contact-item:hover .ci-icon {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(201,164,55,0.3);
}

/* =========================================
   PAGE HERO GOLD LINE
   ========================================= */
.page-hero {
  border-bottom: 1px solid rgba(201,164,55,0.2);
}
.page-hero::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* =========================================
   FOOTER GOLD TOP BORDER GLOW
   ========================================= */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: 0.5;
}

/* =========================================
   CARD GLASS SHIMMER ON HERO CARD
   ========================================= */
.hero-card {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,164,55,0.15);
}

/* =========================================
   GRADIENT TEXT — DARK SECTION HEADINGS
   ========================================= */
.why-us-left h2,
.trusted-section .section-header h2 {
  background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 50%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* Glow on section header decorative line */
.section-header::after {
  box-shadow: 0 0 12px rgba(201,164,55,0.5);
  animation: goldPulse 3s ease-in-out infinite;
}

/* Section badge elevated look */
.section-badge {
  backdrop-filter: blur(4px);
  letter-spacing: 2.5px;
}

/* Stat boxes animated border glow */
.stat-box:hover {
  box-shadow: 0 0 0 1px rgba(201,164,55,0.5), 0 8px 32px rgba(201,164,55,0.15);
}

/* Mission/value card top accent line */
.mission-card::before,
.value-card::before,
.perk-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mission-card, .value-card, .perk-card { position: relative; overflow: hidden; }
.mission-card:hover::before,
.value-card:hover::before,
.perk-card:hover::before { opacity: 1; }

/* Job card left accent bar */
.job-card {
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.job-card:hover {
  border-left-color: var(--gold);
  box-shadow: 0 4px 32px rgba(201,164,55,0.15);
  transform: translateX(6px);
}

/* CTA banner inner glow */
.cta-banner {
  background: linear-gradient(135deg, #0a0a0a 0%, #161208 50%, #0a0a0a 100%) !important;
}

/* Hero h1 full gradient */
.hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 .gold {
  background: linear-gradient(90deg, #C9A437 0%, #f5e09a 30%, #C9A437 50%, #a07c1a 70%, #C9A437 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Trust marquee item hover */
.trust-item:hover span {
  text-shadow: 0 0 16px rgba(201,164,55,0.8);
}

/* =========================================
   MOBILE — DISABLE HEAVY ANIMATIONS
   ========================================= */
@media (max-width: 768px) {
  .hero::before, .hero::after { animation: none; }
  .hero h1 .gold { animation: none; }
  .engage-connector i { animation: none; }
  .section-badge::after, .badge::after { animation: none; }
}

/* =========================================
   REDUCED MOTION RESPECT
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}