/* ==========================================================
   WEBILEY Premium Interaction System
   Blue ONLY on interaction — restrained, premium, GPU-friendly
   Colors: #1D4ED8 primary, #2563EB highlight
   ========================================================== */
#wb-app{
  --wb-blue:#1D4ED8;
  --wb-blue-hi:#2563EB;
  --wb-blue-glow:rgba(37,99,235,.10);
  --wb-blue-glow-soft:rgba(37,99,235,.08);
  --wb-blue-border:rgba(37,99,235,.38);
  --wb-blue-border-soft:rgba(37,99,235,.22);
}

/* ---------- Scroll Progress ---------- */
body.webiley-site .wb-scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--wb-blue),var(--wb-blue-hi));
  z-index:9999;pointer-events:none;transform-origin:left;
  transition:width .08s linear;will-change:width;
}

/* ---------- Custom Cursor (desktop only) ---------- */
body.webiley-site .wb-cursor-dot,body.webiley-site .wb-cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;
  border-radius:50%;opacity:0;z-index:9999;
  transform:translate(-50%,-50%);
  will-change:transform,opacity,width,height,background,border-color;
}
body.webiley-site .wb-cursor-dot{
  width:6px;height:6px;background:var(--wb-blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  transition:transform .18s cubic-bezier(.23,1,.32,1),opacity .2s,background .2s;
}
body.webiley-site .wb-cursor-ring{
  width:28px;height:28px;border:1px solid rgba(37,99,235,.32);
  background:rgba(37,99,235,.04);
  transition:width .22s cubic-bezier(.23,1,.32,1),height .22s cubic-bezier(.23,1,.32,1),
             border-color .22s,background .22s,opacity .2s,transform .18s cubic-bezier(.23,1,.32,1);
}
body.webiley-site .wb-cursor-dot.wb-cursor-visible,
body.webiley-site .wb-cursor-ring.wb-cursor-visible{opacity:1}
body.webiley-site .wb-cursor-dot.wb-cursor-hover{
  transform:translate(-50%,-50%) scale(1.6);
  background:var(--wb-blue-hi);
  box-shadow:0 0 0 6px rgba(37,99,235,.14);
}
body.webiley-site .wb-cursor-ring.wb-cursor-hover{
  width:44px;height:44px;
  border-color:rgba(37,99,235,.45);
  background:rgba(37,99,235,.08);
}
body.webiley-site .wb-cursor-ring.wb-cursor-active{
  width:36px;height:36px;
  border-color:rgba(37,99,235,.6);
  background:rgba(37,99,235,.12);
  transform:translate(-50%,-50%) scale(.92);
}
html.wb-has-custom-cursor #wb-app,html.wb-has-custom-cursor #wb-app{cursor:none}
html.wb-has-custom-cursor #wb-app a,html.wb-has-custom-cursor #wb-app button,html.wb-has-custom-cursor #wb-app [role="button"],html.wb-has-custom-cursor #wb-app summary{cursor:none}

/* disable on touch / coarse pointer */
@media (hover:none),(pointer:coarse){
  body.webiley-site .wb-cursor-dot,body.webiley-site .wb-cursor-ring{display:none!important}
  html.wb-has-custom-cursor #wb-app,html.wb-has-custom-cursor #wb-app,html.wb-has-custom-cursor #wb-app a,html.wb-has-custom-cursor #wb-app button{cursor:auto!important}
}

/* ---------- Ambient Glow + Grid ---------- */
#wb-app .wb-hero,#wb-app .wb-page-hero,#wb-app .wb-cta{position:relative;isolation:isolate;overflow:hidden}
#wb-app .wb-hero::before,#wb-app .wb-page-hero::before,#wb-app .wb-cta::before{
  content:"";position:absolute;pointer-events:none;z-index:-2;
  border-radius:50%;filter:blur(28px);will-change:transform;
  background:radial-gradient(50% 50% at 50% 50%,rgba(37,99,235,.09),transparent 72%);
  animation:wb-ambient-float 18s ease-in-out infinite alternate;
}
#wb-app .wb-hero::before{width:680px;height:680px;left:58%;top:-18%}
#wb-app .wb-page-hero::before{width:520px;height:520px;left:68%;top:-28%;background:radial-gradient(50% 50% at 50% 50%,rgba(37,99,235,.07),transparent 72%)}
#wb-app .wb-cta::before{width:760px;height:760px;left:8%;top:-42%;background:radial-gradient(50% 50% at 50% 50%,rgba(37,99,235,.07),transparent 72%);animation-duration:22s}
#wb-app .wb-grid-pattern{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  animation:wb-grid-drift 70s linear infinite;
  will-change:transform;
}
@keyframes wb-ambient-float{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-18px,16px,0) scale(1.05)}
}
@keyframes wb-grid-drift{
  from{transform:translate3d(0,0,0)}to{transform:translate3d(42px,42px,0)}
}

/* ---------- Reveal / Entrance ---------- */
#wb-app .wb-reveal{opacity:0;transform:translate3d(0,18px,0);will-change:transform,opacity}
#wb-app .wb-reveal.wb-reveal-in{
  opacity:1;transform:translate3d(0,0,0);
  transition:opacity .65s cubic-bezier(.23,1,.32,1),transform .65s cubic-bezier(.23,1,.32,1);
}
#wb-app .wb-reveal-delay-1{transition-delay:.06s}
#wb-app .wb-reveal-delay-2{transition-delay:.14s}
#wb-app .wb-reveal-delay-3{transition-delay:.22s}
#wb-app .wb-reveal-delay-4{transition-delay:.30s}
#wb-app .wb-reveal-delay-5{transition-delay:.38s}

/* hero stagger initial state — will be lifted on load */
#wb-app .wb-hero .wb-eyebrow,#wb-app .wb-hero .wb-hero-title,#wb-app .wb-hero .wb-lead,#wb-app .wb-hero .wb-hero-visual,#wb-app .wb-page-hero .wb-eyebrow,#wb-app .wb-page-hero .wb-page-title,#wb-app .wb-page-hero .wb-lead{
  will-change:transform,opacity;
}

/* ---------- Card Spotlight (blue follows cursor) ---------- */
#wb-app .wb-card{
  position:relative;overflow:hidden;
  --wb-mx:50%;--wb-my:50%;
}
#wb-app .wb-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--wb-mx) var(--wb-my),rgba(37,99,235,.11),transparent 68%);
  opacity:0;transition:opacity .35s ease;will-change:opacity;
  border-radius:14px;
}
#wb-app .wb-card:hover::before{opacity:1}
#wb-app .wb-card > *{position:relative;z-index:1}

/* ---------- Service Cards ---------- */
#wb-app .wb-service-card{
  transition:transform .38s cubic-bezier(.23,1,.32,1),border-color .38s,box-shadow .38s;
  will-change:transform,border-color,box-shadow;
}
#wb-app .wb-service-card:hover{
  transform:translateY(-4px);
  border-color:var(--wb-blue-border);
  box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(37,99,235,.22),0 0 28px var(--wb-blue-glow);
}
#wb-app .wb-service-card img{
  transition:transform .6s cubic-bezier(.23,1,.32,1);will-change:transform;
}
#wb-app .wb-service-card:hover img{transform:scale(1.05)}
#wb-app .wb-service-card .wb-btn{transition:transform .2s,border-color .2s,color .2s}

/* ---------- Case / Portfolio Cards ---------- */
#wb-app .wb-case{position:relative;overflow:hidden;isolation:isolate}
#wb-app .wb-case img{
  transition:transform .75s cubic-bezier(.23,1,.32,1);will-change:transform;
  transform-origin:center center;
}
#wb-app .wb-case:hover img{transform:scale(1.07)}
#wb-app .wb-case::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,0) 38%,rgba(8,9,10,.72) 100%);
  opacity:0;transition:opacity .35s ease;border-radius:10px;
}
#wb-app .wb-case:hover::after{opacity:1}
#wb-app .wb-case-view{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  transform:translate(-50%,-40%);
  background:var(--wb-blue);color:#fff;
  padding:8px 14px;border-radius:99px;
  font-size:.74rem;font-weight:600;letter-spacing:.02em;
  opacity:0;transition:opacity .32s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1);
  box-shadow:0 6px 20px rgba(37,99,235,.32),0 0 0 1px rgba(255,255,255,.12) inset;
  white-space:nowrap;
}
#wb-app .wb-case:hover .wb-case-view{opacity:1;transform:translate(-50%,-50%)}
#wb-app .wb-case .wb-result{transition:color .2s}
#wb-app .wb-case:hover .wb-result{color:#fff!important}

/* image parallax inside card */
#wb-app .wb-case.wb-parallax-ready img{will-change:transform}

/* ---------- Pricing ---------- */
#wb-app .wb-plan{
  transition:transform .36s cubic-bezier(.23,1,.32,1),border-color .36s,box-shadow .36s;
  will-change:transform,border-color,box-shadow;
}
#wb-app .wb-plan:hover{
  transform:translateY(-3px);
  border-color:var(--wb-blue-border);
  box-shadow:0 14px 44px rgba(0,0,0,.38),0 0 0 1px var(--wb-blue-border-soft),0 0 30px var(--wb-blue-glow);
}
#wb-app .wb-plan-featured{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 1px rgba(37,99,235,.18),0 0 38px rgba(37,99,235,.10),0 10px 36px rgba(0,0,0,.32);
}
#wb-app .wb-plan-featured:hover{
  border-color:var(--wb-blue-border);
  box-shadow:0 0 0 1px rgba(37,99,235,.34),0 0 48px rgba(37,99,235,.14),0 14px 44px rgba(0,0,0,.42);
}

/* ---------- Magnetic Buttons ---------- */
#wb-app .wb-btn{will-change:transform;transform:translate3d(0,0,0)}
#wb-app .wb-btn.wb-magnetic{
  transition:transform .28s cubic-bezier(.23,1,.32,1),background .22s,border-color .22s,box-shadow .22s;
}
#wb-app .wb-btn.wb-magnetic:hover{box-shadow:0 0 0 1px rgba(37,99,235,.22),0 0 18px rgba(37,99,235,.10)}

/* ---------- Navigation ---------- */
#wb-app .wb-nav-link{position:relative}
#wb-app .wb-nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:0%;
  background:linear-gradient(90deg,var(--wb-blue),var(--wb-blue-hi));
  border-radius:99px;transition:width .32s cubic-bezier(.23,1,.32,1);
}
#wb-app .wb-nav-link:hover::after,#wb-app .wb-nav-link.is-active::after{width:100%}
#wb-app .wb-nav-link:hover{color:#fff}
#wb-app .wb-header{transition:box-shadow .3s,background .3s,border-color .3s}
#wb-app .wb-header.wb-header-scrolled{
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  border-bottom-color:rgba(255,255,255,.12);
}

/* ---------- Hero Visual Parallax ---------- */
#wb-app .wb-hero-visual{perspective:900px;transform-style:preserve-3d}
#wb-app .wb-hero-img.wb-parallax-img,#wb-app .wb-split-img.wb-parallax-img{
  will-change:transform;transition:transform .6s cubic-bezier(.23,1,.32,1);
  transform:translate3d(0,0,0) scale(1.01);
}
#wb-app .wb-float-card{will-change:transform;transition:transform .5s cubic-bezier(.23,1,.32,1)}

/* ---------- Count Up ---------- */
#wb-app .wb-stat strong,#wb-app .wb-metric strong{display:inline-block;will-change:contents}

/* ---------- Touch / Mobile Overrides ---------- */
@media (hover:none),(pointer:coarse){
  #wb-app .wb-card::before{opacity:0!important}
  #wb-app .wb-card:active{border-color:var(--wb-blue-border-soft)!important;transform:translateY(-2px)}
  #wb-app .wb-service-card:active{transform:translateY(-2px) scale(.99)}
  #wb-app .wb-service-card:active img{transform:scale(1.03)}
  #wb-app .wb-case:active img{transform:scale(1.04)}
  #wb-app .wb-case .wb-case-view{opacity:0;transform:translate(-50%,-30%)}
  #wb-app .wb-case:active .wb-case-view{opacity:1;transform:translate(-50%,-50%)}
  #wb-app .wb-case::after{opacity:0}
  #wb-app .wb-case:active::after{opacity:1}
  #wb-app .wb-plan:active{transform:translateY(-2px)}
  #wb-app .wb-btn.wb-magnetic:active{transform:translate3d(0,0,0) scale(.98)!important}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  body.webiley-site .wb-scroll-progress{display:none!important}
  body.webiley-site .wb-cursor-dot,body.webiley-site .wb-cursor-ring{display:none!important}
  #wb-app .wb-grid-pattern,#wb-app .wb-hero::before,#wb-app .wb-page-hero::before,#wb-app .wb-cta::before{animation:none!important}
  #wb-app .wb-reveal{opacity:1!important;transform:none!important;transition:none!important}
  #wb-app .wb-card::before{opacity:0!important}
  #wb-app .wb-service-card,#wb-app .wb-case img,#wb-app .wb-plan,#wb-app .wb-btn,#wb-app .wb-hero-img,#wb-app .wb-split-img,#wb-app .wb-float-card{transition:none!important;transform:none!important}
  #wb-app .wb-case-view{transition:none!important}
}

/* ---------- Safety: no horizontal scroll ---------- */
html:has(#wb-app),body.webiley-site{overflow-x:clip}
#wb-app .wb-container{position:relative}