/* Visual & motion enhancements layered over the original site.css */

/* TSP logo */
.tsp-brand-logo{display:block;width:min(340px,80%);height:auto;margin:0 0 24px;filter:drop-shadow(0 0 24px rgba(0,213,245,.18));animation:tsp-logo-glow 5s ease-in-out infinite}
@keyframes tsp-logo-glow{50%{filter:drop-shadow(0 0 38px rgba(0,213,245,.35))}}

/* Source chips (TSP) */
.tsp-landing-source-list,.tsp-v9-sources{display:flex;flex-wrap:wrap;gap:10px}
.tsp-landing-source-list span,.tsp-v9-sources span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(0,213,245,.28);border-radius:999px;background:rgba(0,213,245,.06);font-size:12px;font-weight:600;color:#cfe9f3;letter-spacing:.02em;transition:border-color .3s,background .3s}
.tsp-landing-source-list span::before,.tsp-v9-sources span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.tsp-landing-source-list span:hover,.tsp-v9-sources span:hover{border-color:var(--cyan);background:rgba(0,213,245,.12)}

/* Hero slow zoom + pulsing grid */
.hero-v8{overflow:hidden}
.hero-v8-bg{animation:hero-zoom 24s ease-in-out infinite alternate;transform-origin:65% 50%}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-v8-grid,.tsp-landing-grid-bg{animation:grid-pulse 6s ease-in-out infinite}
@keyframes grid-pulse{50%{opacity:.45}}
.hero-v8-copy>*{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-v8-copy>*:nth-child(2){animation-delay:.12s}.hero-v8-copy>*:nth-child(3){animation-delay:.24s}.hero-v8-copy>*:nth-child(4){animation-delay:.36s}.hero-v8-copy>*:nth-child(5){animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0s)}
.reveal.is-visible{opacity:1;transform:none}

/* Journey steps light up in sequence, joined by a drawing line */
.proof-strip{position:relative}
.proof-strip .container{position:relative}
.journey-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.6s ease;pointer-events:none;opacity:.5}
.proof-strip.is-visible .journey-line{transform:scaleX(1)}
.journey-card.is-visible svg{animation:icon-pop .6s ease var(--reveal-delay,0s) both}
@keyframes icon-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* Card hover glow */
.journey-card,.capability-card,.svc-card-v8,.tsp-v9-gallery-card,.ms-grid>div,.insight-feature-grid>a,.tsp-landing-capabilities article,.tsp-landing-capabilities [class*="card"]{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.journey-card:hover,.capability-card:hover,.svc-card-v8:hover,.tsp-v9-gallery-card:hover,.ms-grid>div:hover,.insight-feature-grid>a:hover,.tsp-landing-capabilities article:hover,.tsp-landing-capabilities [class*="card"]:hover{transform:translateY(-6px);border-color:rgba(0,213,245,.55)!important;box-shadow:0 18px 40px -18px rgba(0,213,245,.35)}
.journey-card:hover svg,.svc-card-v8:hover svg,.capability-card:hover svg{animation:icon-wiggle .5s ease}
@keyframes icon-wiggle{30%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(6deg)}}
.ms-product-logo img{transition:transform .4s ease}
.ms-grid>div:hover .ms-product-logo img{transform:scale(1.1)}

/* Shine on primary buttons */
.button-primary{position:relative;overflow:hidden}
.button-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:shine 5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Dashboard tilt */
.tilt{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}

/* Section rhythm */
main>section.section:nth-of-type(even){background-image:linear-gradient(180deg,rgba(8,121,201,.05),transparent 40%)}
main>section.section{position:relative}
main>section.section::before{content:"";position:absolute;top:0;left:50%;width:min(60%,700px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,213,245,.4),transparent)}

/* Floating WhatsApp */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 10px 30px -8px rgba(37,211,102,.6);transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wa-ping 2.4s ease-out infinite}
@keyframes wa-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-v8-copy>*{opacity:1!important;transform:none!important}
}

/* ===== Header: a little bigger ===== */
.nav-wrap{height:90px}
.brand img{width:205px;max-height:64px}
.nav{gap:30px}
.nav a{font-size:13.5px}
.nav-cta{padding:12px 18px}
.header-social{width:42px;height:42px;flex:0 0 42px}
.header-social svg{width:20px;height:20px}
.hero-v8-content{padding-top:98px}
@media(max-width:1050px){.nav{gap:18px}.nav a{font-size:12px}}
@media(max-width:800px){
  .brand img{width:165px}
  .nav a{font-size:15px;padding:15px 10px}
  .menu-toggle{font-size:28px}
  .header-social::after{font-size:13.5px}
}
@media(max-width:800px){.nav{top:90px}}

/* TSP background: cyan glow + giant brand arcs */
.tsp-section,.tsp-landing-hero{position:relative;isolation:isolate;overflow:hidden}
.tsp-section:before,.tsp-landing-hero:before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 50%,transparent 62%,rgba(0,213,245,.10) 63%,transparent 64.5%) 108% 40%/900px 900px no-repeat,
    radial-gradient(closest-side at 50% 50%,transparent 70%,rgba(0,213,245,.07) 71%,transparent 72.2%) 112% 40%/1250px 1250px no-repeat,
    radial-gradient(closest-side at 50% 50%,transparent 80%,rgba(0,213,245,.05) 81%,transparent 82%) -30% 120%/1100px 1100px no-repeat,
    radial-gradient(ellipse 45% 55% at 72% 45%,rgba(0,213,245,.16),transparent 70%),
    radial-gradient(ellipse 30% 40% at 18% 30%,rgba(0,140,255,.10),transparent 70%);
  animation:tspGlow 14s ease-in-out infinite alternate}
@keyframes tspGlow{from{transform:translate3d(0,0,0) scale(1);opacity:.85}to{transform:translate3d(-2%,1.5%,0) scale(1.04);opacity:1}}
@media (prefers-reduced-motion:reduce){.tsp-section:before,.tsp-landing-hero:before{animation:none}}