/* Actinium – animation system v2 */
:root{--ac:#00bfff;--ac2:#7b61ff}


/* progress + cursor glow */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--ac),var(--ac2));box-shadow:0 0 12px var(--ac)}
.cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(0,191,255,.14),transparent 65%);will-change:transform;opacity:0;transition:opacity .4s}
.cursor-glow.on{opacity:1}

/* particle canvas */
.ac-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.page-header,.ax-hero{position:relative;overflow:hidden}
.page-header>*:not(.ac-particles){position:relative;z-index:2}

/* reveal variants (blur + slide) */
.js-anim .anim-item{opacity:0;transform:translateY(24px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.js-anim .anim-item.from-left{transform:translateX(-50px)}
.js-anim .anim-item.from-right{transform:translateX(50px)}
.js-anim .anim-item.zoom{transform:scale(.7)}
.js-anim .anim-item.in{opacity:1;filter:none;transform:none}

/* word-split headings */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(110%) rotate(6deg);animation:wordUp .45s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*.025s)}
@keyframes wordUp{to{transform:none}}

/* hero children + header entrance */
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-section .p-3>*:not(h1){animation:heroUp .4s cubic-bezier(.16,1,.3,1) both}
.hero-section .p-3>*:nth-child(1){animation-delay:.1s}
.hero-section .p-3>*:nth-child(3){animation-delay:.2s}
.hero-section .p-3>*:nth-child(4){animation-delay:.28s}
.hero-section .p-3>*:nth-child(5){animation-delay:.36s}
.page-header p,.page-header .text-white{animation:heroUp .4s .15s cubic-bezier(.16,1,.3,1) both}
.hero-section .hero-blob{will-change:transform}

/* floating badges in hero */
.hero-section .p-3>.d-flex span{animation:floaty 4s ease-in-out infinite}
.hero-section .p-3>.d-flex span:nth-child(2){animation-delay:.7s}
.hero-section .p-3>.d-flex span:nth-child(3){animation-delay:1.4s}
@keyframes floaty{50%{transform:translateY(-6px)}}

/* section title line */
.section-title{position:relative}
.section-title::after{content:"";display:block;height:4px;width:0;margin-top:10px;border-radius:4px;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width 1.2s .3s cubic-bezier(.16,1,.3,1)}
.in.section-title::after,.is-visible .section-title::after{width:100px}

/* cards: spotlight + tilt + gradient border */
.glass-card,.svc-card,.client-logo-card{position:relative;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .4s,border-color .4s;will-change:transform}
.glass-card::after,.svc-card::after,.client-logo-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,191,255,.22),transparent 45%)}
.glass-card:hover::after,.svc-card:hover::after,.client-logo-card:hover::after{opacity:1}
.glass-card:hover,.svc-card:hover,.client-logo-card:hover{box-shadow:0 25px 60px rgba(0,191,255,.3),0 0 0 1px rgba(0,191,255,.5)}
.svc-icon,.glass-card .fa,.glass-card .fas{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.svc-card:hover .svc-icon,.glass-card:hover .fa,.glass-card:hover .fas{transform:translateZ(40px) scale(1.25) rotate(-8deg)}

/* pills */
.tech-pill,.svc-tag{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.tech-pill:hover,.svc-tag:hover{transform:translateY(-5px) scale(1.12);box-shadow:0 10px 22px rgba(0,191,255,.5)}

/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .2s ease-out,box-shadow .3s}
.btn::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg)}
.btn:hover::before{left:130%;transition:left .7s}
.btn:hover{box-shadow:0 12px 30px rgba(0,191,255,.55)}
.btn-primary{animation:btnPulse 2.8s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,191,255,.5)}60%{box-shadow:0 0 0 14px rgba(0,191,255,0)}}

/* nav */
.navbar{transition:box-shadow .3s,background .3s}
.navbar.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.55)}
.navbar .nav-link{position:relative}
.navbar .nav-link::after{content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;background:var(--ac);transition:width .3s,left .3s}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{width:60%;left:20%}

/* images */
.img-fluid,.leader-img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
a:hover>.img-fluid,.leader-img:hover{transform:scale(1.08) rotate(1deg)}
.leader-img{animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{50%{box-shadow:0 0 55px rgba(0,191,255,.85)}}

.back-to-top{animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  .js-anim .anim-item{opacity:1;filter:none;transform:none;transition:none}
  .w>span{transform:none;animation:none}
  *{animation:none!important}
  .ac-loader,.cursor-glow,.ac-particles{display:none}
}

/* ===== Responsive / mobile ===== */
html,body{overflow-x:hidden;max-width:100%}
img,video,canvas,iframe{max-width:100%}
.w{max-width:100%}

@media (max-width:991.98px){
  /* side slides become simple rises so nothing overflows sideways */
  .js-anim .anim-item.from-left,.js-anim .anim-item.from-right{transform:translateY(50px)}
  .cursor-glow{display:none}
  .navbar-collapse{background:rgba(10,10,15,.97);padding:10px 16px;border-radius:0 0 12px 12px}
}

@media (max-width:767.98px){
  .js-anim .anim-item{transform:translateY(24px);transition-duration:.25s,.3s}
  .js-anim .anim-item.zoom{transform:scale(.85)}
  .js-anim .anim-item.in{filter:none;transform:none}
  .js-anim .anim-item{transition-delay:calc(var(--d,0s)*.5)}

  .hero-section .display-3{font-size:2.15rem!important;line-height:1.15!important}
  .hero-section .lead{font-size:.98rem!important}
  .hero-section>.d-flex{min-height:100svh!important;padding:90px 0 40px}
  .hero-section .p-3{padding:1rem!important}
  .hero-section .p-3>.d-flex span{font-size:.68rem!important;padding:5px 10px!important}
  .hero-section .btn{width:100%;max-width:320px}
  .page-header h3.display-4,.page-header h1{font-size:1.9rem!important}
  .page-header{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
  .section-title,.animated-section h2{font-size:1.5rem!important;line-height:1.25!important}
  .glass-card{padding:1.25rem!important}
  .container,.container-fluid{padding-left:16px;padding-right:16px}
  .btn{padding:12px 20px}
  .ac-loader img{height:44px}
  .leader-img{max-width:70%;height:auto}
  .back-to-top{right:14px;bottom:14px}
  .hero-blob{opacity:.6}
  .row>[class*="col-"]{margin-bottom:.25rem}
  table{display:block;overflow-x:auto}
}

@media (max-width:420px){
  .hero-section .display-3{font-size:1.85rem!important}
  .page-header h3.display-4{font-size:1.6rem!important}
  .tech-pill,.svc-tag{font-size:.72rem}
}

/* touch devices: no hover-only effects, tap feedback instead */
@media (hover:none){
  .glass-card:hover,.svc-card:hover,.client-logo-card:hover,.tech-pill:hover,.svc-tag:hover,.btn:hover{transform:none}
  .glass-card:active,.svc-card:active,.client-logo-card:active{transform:scale(.97);box-shadow:0 8px 24px rgba(0,191,255,.35)}
  .btn:active{transform:scale(.96)}
  .btn-primary{animation-duration:3.5s}
}

.ax-hero>.ax-wrap{position:relative;z-index:2}
