/* ═══════════════════════════════════════════
   MEGA ANIMATIONS UPGRADE
═══════════════════════════════════════════ */

/* Canvas particles hero */
#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8}
#hero .hero-l,#hero .hero-r{z-index:2;position:relative}

/* Background orbs */
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
#hero .bg-orb-1{width:700px;height:700px;background:rgba(36,88,200,.06);top:-250px;right:-150px;animation:orbFloat 18s ease-in-out infinite}
#hero .bg-orb-2{width:500px;height:500px;background:rgba(212,43,43,.04);bottom:-150px;left:5%;animation:orbFloat 14s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-40px)}50%{transform:translate(-30px,30px)}75%{transform:translate(30px,40px)}}

/* Cursor glow */
#cursor-glow{
  pointer-events:none;position:fixed;z-index:9990;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(36,88,200,.05) 0%,transparent 65%);
  transform:translate(-50%,-50%);
  transition:none;
}

/* Button shimmer */
.btn-red,.btn-navy,.nav-cta,.btn-sub{position:relative;overflow:hidden}
.btn-red::after,.btn-navy::after,.nav-cta::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-15deg);transition:none;pointer-events:none;
}
.btn-red:hover::after,.btn-navy:hover::after,.nav-cta:hover::after{animation:shimmerBtn .65s ease}
@keyframes shimmerBtn{to{left:140%}}

/* Ripple */
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.28);
  width:10px;height:10px;transform:scale(0);pointer-events:none;
  animation:rippleOut .65s linear forwards;
}
@keyframes rippleOut{to{transform:scale(8);opacity:0}}

/* 3D card container perspective */
.srv-grid{perspective:1400px}
.tst-grid{perspective:1400px}

/* Floating hero elements */
.hi-card{animation:floatCard 7s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(0deg)}40%{transform:translateY(-14px) rotate(1.5deg)}70%{transform:translateY(-7px) rotate(-.8deg)}}
.hero-eyebrow{animation:floatEyebrow 6s ease-in-out infinite}
@keyframes floatEyebrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Pulse ring on live dot */
.hero-dot{position:relative}
.hero-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:var(--red);opacity:.35;
  animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{0%{transform:scale(1);opacity:.35}100%{transform:scale(3);opacity:0}}

/* Nav link underline slide */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:2px;background:var(--red);border-radius:1px;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* Animated gradient text on hero h1 */
.hero-h1 .animated-gradient{
  background:linear-gradient(135deg,var(--red) 0%,#FF6B6B 40%,var(--red2) 60%,var(--red) 100%);
  background-size:250% 250%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradFlow 3s ease infinite;
}
.hero-h1 .blue.animated-gradient{
  background:linear-gradient(135deg,var(--blue-mid) 0%,#60A5FA 40%,#2458C8 60%,var(--blue-mid) 100%);
  background-size:250% 250%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradFlow 4s ease infinite reverse;
}
@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* S-title decorative underline */
.s-title{position:relative}
.s-title::after{
  content:'';display:block;width:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--blue-mid));
  border-radius:2px;margin-top:14px;
  transition:width 1s var(--ease);
}
.s-title.ul-active::after{width:64px}

/* Expertise item hover accent line */
.exp-item{position:relative}
.exp-item::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--red),transparent);
  transition:width .5s var(--ease);
}
.exp-item:hover::after{width:100%}
.exp-item:hover .exp-n{transform:scale(1.25);color:#fff}

/* Testimonial quote mark */
.tst-card{position:relative;overflow:hidden}
.tst-card::before{
  content:'\201C';position:absolute;top:-10px;right:18px;
  font-size:100px;font-family:var(--ff-head);
  color:var(--off2);line-height:1;pointer-events:none;
  transition:color .3s,transform .35s var(--ease);
}
.tst-card:hover::before{color:rgba(212,43,43,.1);transform:scale(1.15) translateY(-5px)}

/* Glow on audience dark card */
.aud-part{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.aud-part:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(212,43,43,.22),0 0 50px rgba(212,43,43,.08)}

/* Counter glow on hover */
.counter-num{transition:text-shadow .3s}
.counter-num:hover{text-shadow:0 0 40px rgba(212,43,43,.5)}

/* Noise texture overlay */
#noise-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9985;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Partner marquee */
.pt-marquee-wrap{overflow:hidden;width:100%}
.pt-marquee-inner{display:flex;gap:14px;width:max-content;animation:marqueeScroll 28s linear infinite}
.pt-marquee-inner:hover{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animated aurora in expertise section */
#expertise::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(36,88,200,.15) 0%,transparent 70%),
             radial-gradient(ellipse 60% 40% at 80% 100%,rgba(212,43,43,.1) 0%,transparent 60%);
  animation:auroraShift 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes auroraShift{
  from{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(36,88,200,.15) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(212,43,43,.1) 0%,transparent 60%)}
  to{background:radial-gradient(ellipse 80% 60% at 30% 10%,rgba(36,88,200,.2) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 20% 90%,rgba(212,43,43,.15) 0%,transparent 60%)}
}
#expertise .s-header,#expertise .exp-layout{position:relative;z-index:1}

/* Animated stat numbers glow */
.stat-n{transition:text-shadow .3s,transform .3s}
.stat-n:hover{text-shadow:0 0 30px rgba(212,43,43,.4);transform:scale(1.06)}

/* Agence facts slide */
.af{transition:border-color .3s,transform .3s,box-shadow .3s}
.af:hover{border-color:var(--blue-mid)!important;transform:translateX(6px);box-shadow:0 8px 30px rgba(36,88,200,.1)}

/* Glassmorphism hi-card */
.hi-card{backdrop-filter:blur(20px);background:rgba(255,255,255,.96)}

/* Divider photos parallax container */
.dp img{transition:transform .1s linear}

/* Gradient border on first srv-card */
.srv-card:nth-child(1)::after{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,rgba(36,88,200,.12),rgba(212,43,43,.08),transparent);
  opacity:0;transition:opacity .4s;pointer-events:none;z-index:0;
}
.srv-card:nth-child(1):hover::after{opacity:1}

/* Scroll-triggered line reveal for hero stats */
.hero-stats{position:relative}
.hero-stats::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:statLine 2s 1.5s var(--ease) both;
}
@keyframes statLine{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

/* Fancy loading bar in splash */
.sp-bar-inner{
  background:linear-gradient(90deg,var(--blue-mid),rgba(255,255,255,.9),var(--red));
  background-size:200% 100%;
}