/* =========================================================
   APPLE x LIQUID-GLASS UI LAYER  v2   (loads AFTER theme CSS)
   Quick re-brand: edit the :root variables below.
   ========================================================= */
:root{
  /* --- palette: indigo / sky / aqua on deep ink --- */
  --ap-accent:#5e5ce6;
  --ap-accent-2:#0a84ff;
  --ap-accent-3:#40c8e0;
  --ap-grad:linear-gradient(135deg,#5e5ce6 0%,#0a84ff 55%,#40c8e0 100%);
  --ap-ink:#0b0b1f;
  --ap-ink-2:#14123a;
  --ap-text:#1d1d2b;
  --ap-text-2:#5b5b72;
  --ap-bg:#f6f6fc;
  --ap-line:rgba(30,30,70,.10);
  /* --- glass --- */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.75);
  --glass-blur:blur(24px) saturate(180%);
  --glass-shadow:0 8px 32px rgba(40,40,120,.10),inset 0 1px 0 rgba(255,255,255,.9);
  --glass-shadow-hover:0 24px 60px rgba(60,60,200,.20),inset 0 1px 0 rgba(255,255,255,.95);
  --ap-radius-sm:14px;--ap-radius:22px;--ap-radius-lg:30px;
  --ap-ease:cubic-bezier(.22,1,.36,1);
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ap-font)!important;
  color:var(--ap-text);
  background:
    radial-gradient(1200px 600px at 8% -5%,rgba(94,92,230,.14),transparent 60%),
    radial-gradient(900px 500px at 100% 20%,rgba(64,200,224,.14),transparent 60%),
    var(--ap-bg)!important;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;line-height:1.6;letter-spacing:-.006em;
}
body,p,li,span,a,label,input,textarea,select,button,td,th,div{font-family:var(--ap-font)}
p,li{line-height:1.6}
::selection{background:rgba(94,92,230,.25)}
html.ap-js body{animation:apPageIn .8s var(--ap-ease) both}
@keyframes apPageIn{from{opacity:0}to{opacity:1}}

/* ---------- TYPE SCALE (role based, not wildcard) ---------- */
/* font family everywhere a theme title used Bebas */
h1,h2,h3,h4,h5,h6,[class*="title"]:not(i):not([class*="icon"]),.pxl-heading--inner,.pxl-item--number,.pxl-counter--number{
  font-family:var(--ap-font)!important;
  text-transform:none!important;
}
h1,h2,h3,h4,h5,h6,.pxl-item--title,.pxl-heading--title,.pxl-page-title{
  font-weight:600!important;letter-spacing:-.022em!important;line-height:1.14!important;
}
/* section headings */
.pxl-heading .pxl-item--title{font-size:clamp(1.9rem,3.4vw,2.9rem)!important;font-weight:650!important;letter-spacing:-.03em!important}
/* hero heading (tagged by JS, falls back to first section) */
.ap-hero .pxl-heading .pxl-item--title{font-size:clamp(2.4rem,5.4vw,4.6rem)!important;font-weight:700!important;letter-spacing:-.04em!important;line-height:1.05!important}
.ap-hero .pxl-heading p,.ap-hero p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5}
/* card / list item titles */
.pxl-item--inner .pxl-item--title,.pxl-post--title,.pxl-swiper-slide h3,.pxl-swiper-slide h4,.pxl-service-carousel h3,.pxl-icon-box h3{
  font-size:clamp(1.15rem,1.5vw,1.4rem)!important;line-height:1.25!important;letter-spacing:-.018em!important;overflow-wrap:break-word;hyphens:manual;
}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}
h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}
.pxl-page-title,#pxl-page-title-default h1{font-size:clamp(2.2rem,4.4vw,3.6rem)!important}
/* sub titles / lead text under headings */
.pxl-item--subtitle{font-size:1.0625rem!important;font-weight:500!important;letter-spacing:-.011em!important;text-transform:none!important;line-height:1.55!important;color:var(--ap-text-2)!important}
.ap-dark .pxl-item--subtitle{color:rgba(255,255,255,.8)!important}
/* big theme text-editor "headings" (tagged by JS) */
.ap-bigtext,.ap-bigtext p{font-size:clamp(1.9rem,3.4vw,2.9rem)!important;font-weight:650!important;letter-spacing:-.03em!important;line-height:1.15!important}
/* belief/portfolio slides: smaller so long words fit */
.pxl-swiper-slide .pxl-item--title{font-size:clamp(1rem,1.25vw,1.2rem)!important}
.pxl-portfolio-carousel .pxl-swiper-slide h6.pxl-item--title{font-size:clamp(2.6rem,5vw,4.6rem)!important;font-weight:700!important;line-height:1!important;letter-spacing:-.04em!important}
.pxl-portfolio-carousel .item--title span{font-size:1.2rem!important;font-weight:550!important;line-height:1.25!important;letter-spacing:-.015em!important;overflow-wrap:normal!important}
/* gradient highlight word */
.pxl-title--highlight{
  background:var(--ap-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;
  background-size:200% 200%;animation:apShimmer 8s ease-in-out infinite;
}
@keyframes apShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* big outline marquee text: keep, but lighter */
.pxl-text-marquee,[class*="marquee"] [class*="title"]{font-weight:700!important;letter-spacing:-.03em!important}

/* icon fonts must survive */
i[class*="fa"],.fa,.fas,.far,.fab{font-family:"Font Awesome 5 Pro","Font Awesome 5 Free","Font Awesome 5 Brands"!important}
[class*="caseicon-"],[class^="caseicon"]{font-family:Caseicon!important}
[class*="flaticon-"],[class^="flaticon"]{font-family:Flaticon!important}
[class*="eicon-"]{font-family:eicons!important}

/* ---------- Links ---------- */
a{color:var(--ap-accent);text-decoration:none;transition:color .25s var(--ap-ease),opacity .25s var(--ap-ease)}
a:hover{color:var(--ap-accent-2)}

/* ---------- Header ---------- */
.pxl-header-elementor-main,.pxl-header-elementor-sticky{transition:background .4s var(--ap-ease),box-shadow .4s var(--ap-ease),transform .5s var(--ap-ease)}
.pxl-header-elementor-sticky{
  background:rgba(255,255,255,.6)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 30px rgba(40,40,120,.10)!important;
  border-bottom:1px solid rgba(255,255,255,.6);
}
.pxl-header-elementor-sticky section,.pxl-header-elementor-sticky .pxl-header-main{background:transparent!important}
html.ap-scrolled .pxl-header-elementor-main:not(.px-header--transparent){
  background:rgba(255,255,255,.6)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.pxl-menu-primary>li>a,.pxl-header-menu a{font-size:.9375rem!important;font-weight:500!important;text-transform:none!important;letter-spacing:-.01em!important}
.pxl-menu-primary>li>a:hover{opacity:.65}
.pxl-menu-primary .sub-menu{
  background:var(--glass-bg-strong)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--ap-radius-sm)!important;
  box-shadow:var(--glass-shadow-hover)!important;padding:8px!important;overflow:hidden;
  transform-origin:top center;animation:apPop .35s var(--ap-ease) both;
}
@keyframes apPop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.pxl-menu-primary .sub-menu li a{border-radius:10px;padding:9px 14px!important;transition:background .2s}
.pxl-menu-primary .sub-menu li a:hover{background:rgba(94,92,230,.10)}

/* ---------- ACTION BUTTONS: gradient glass pill with sheen ---------- */
.btn,a.btn,button.btn,.pxl-button,.pxl-btn,.elementor-button,
.wpcf7-submit,input[type="submit"],button[type="submit"]:not(.search-submit),
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  position:relative;overflow:hidden;isolation:isolate;
  font-size:.975rem!important;font-weight:550!important;letter-spacing:-.01em!important;text-transform:none!important;line-height:1.2!important;
  color:#fff!important;
  background:var(--ap-grad)!important;background-size:160% 160%!important;background-position:0% 50%!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:980px!important;padding:14px 28px!important;
  box-shadow:0 8px 24px rgba(94,92,230,.35),inset 0 1px 0 rgba(255,255,255,.45)!important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  transition:transform .35s var(--ap-ease),box-shadow .35s var(--ap-ease),background-position .6s var(--ap-ease)!important;
  -webkit-tap-highlight-color:transparent;
}
.btn::after,.pxl-button::after,.elementor-button::after,.wpcf7-submit::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ap-ease);display:block!important;
}
.btn:hover::after,.pxl-button:hover::after,.elementor-button:hover::after,.wpcf7-submit:hover::after{transform:translateX(120%)}
.btn:hover,a.btn:hover,.pxl-button:hover,.pxl-btn:hover,.elementor-button:hover,.wpcf7-submit:hover,
input[type="submit"]:hover,button[type="submit"]:not(.search-submit):hover,.woocommerce a.button:hover,.woocommerce button.button:hover{
  color:#fff!important;background-position:100% 50%!important;transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 34px rgba(94,92,230,.45),inset 0 1px 0 rgba(255,255,255,.6)!important;
}
.btn:active,.pxl-button:active,.elementor-button:active,.wpcf7-submit:active,input[type="submit"]:active{transform:scale(.96)!important}
:focus-visible{outline:3px solid rgba(94,92,230,.45);outline-offset:3px;border-radius:8px}
/* remove old fill-effect pseudo elements */
.pxl-btn-effect1::before,.pxl-btn-effect2::before,.pxl-btn-effect3::before,.pxl-btn-effect4::before,.pxl-btn-effect5::before{display:none!important}
/* "read more" text links */
.pxl-post--readmore,.pxl-item--readmore{background:none!important;padding:0!important}
.pxl-post--readmore a,a.pxl-post--readmore{
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:var(--ap-accent)!important;
  font-weight:550!important;display:inline-flex;gap:6px;border-radius:0!important;overflow:visible;
}
.pxl-post--readmore a::after{display:none!important}
.pxl-post--readmore a:hover{transform:translateX(4px);background:none!important;box-shadow:none!important;color:var(--ap-accent-2)!important}
/* hero video button: glass orb with pulse */
.pxl-item--video,.pxl-item--video.pxl-item--image{overflow:visible!important;border-radius:0!important}
.btn-video{
  position:relative;border-radius:50%!important;padding:0!important;width:104px;height:104px;overflow:visible!important;
  background:rgba(255,255,255,.22)!important;border:1px solid rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  color:#fff!important;box-shadow:0 10px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.btn-video::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);animation:apPulse 2.6s ease-out infinite;pointer-events:none}
.btn-video::after{display:none!important}
@keyframes apPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.search-submit{background:transparent!important;border:0!important;box-shadow:none!important}

/* ---------- Forms (glass inputs) ---------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="search"],input[type="password"],textarea,select,.wpcf7-form-control:not(.wpcf7-submit){
  font-size:1rem;color:var(--ap-text);
  background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.8)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--ap-radius-sm)!important;padding:14px 16px!important;
  box-shadow:inset 0 1px 2px rgba(40,40,120,.06)!important;
  transition:border-color .25s var(--ap-ease),box-shadow .25s var(--ap-ease),background .25s var(--ap-ease);
}
input:focus,textarea:focus,select:focus{
  outline:0!important;background:rgba(255,255,255,.9)!important;border-color:var(--ap-accent)!important;
  box-shadow:0 0 0 4px rgba(94,92,230,.18)!important;
}
::placeholder{color:#8a8aa3;opacity:1}

/* ---------- GLASS CARDS ---------- */
img{border-radius:var(--ap-radius-sm)}
.pxl-header-branding img,.pxl-logo img,.custom-logo,footer img,[class*="icon"] img,.pxl-item--icon img{border-radius:0}
.pxl-post--inner,.pxl-service-carousel .pxl-item--inner,.pxl-testimonial-carousel .pxl-item--inner,.pxl-icon-box .pxl-item--inner,
.pxl-team-lv1 .pxl-item--inner,.pxl-swiper-slide .pxl-item--inner,.pxl-item--inner.ap-glass{
  position:relative;overflow:hidden;
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border)!important;border-radius:var(--ap-radius)!important;
  box-shadow:var(--glass-shadow)!important;
  transition:transform .5s var(--ap-ease),box-shadow .5s var(--ap-ease),background .4s;
  transform-style:preserve-3d;will-change:transform;
}
/* specular glare that follows the cursor (vars set by JS) */
.pxl-post--inner::after,.pxl-service-carousel .pxl-item--inner::after,.pxl-testimonial-carousel .pxl-item--inner::after,
.pxl-icon-box .pxl-item--inner::after,.pxl-team-lv1 .pxl-item--inner::after,.pxl-swiper-slide .pxl-item--inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 45%);
  mix-blend-mode:soft-light;
}
.pxl-post--inner:hover::after,.pxl-service-carousel .pxl-item--inner:hover::after,.pxl-testimonial-carousel .pxl-item--inner:hover::after,
.pxl-icon-box .pxl-item--inner:hover::after,.pxl-team-lv1 .pxl-item--inner:hover::after,.pxl-swiper-slide .pxl-item--inner:hover::after{opacity:1}
.pxl-post--inner:hover,.pxl-service-carousel .pxl-item--inner:hover,.pxl-icon-box .pxl-item--inner:hover,.pxl-team-lv1 .pxl-item--inner:hover,.pxl-swiper-slide .pxl-item--inner:hover{
  box-shadow:var(--glass-shadow-hover)!important;
}
.pxl-post--featured,.pxl-item--image{overflow:hidden;border-radius:var(--ap-radius-sm)}
.pxl-post--featured img,.pxl-item--image img{transition:transform 1s var(--ap-ease)}
.pxl-post--inner:hover .pxl-post--featured img,.pxl-item--inner:hover .pxl-item--image img{transform:scale(1.06)}

/* ---------- Carousel controls: glass ---------- */
.pxl-swiper-arrow{
  border-radius:50%!important;background:rgba(255,255,255,.55)!important;color:var(--ap-text)!important;
  border:1px solid rgba(255,255,255,.8)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(40,40,120,.12)!important;transition:transform .3s var(--ap-ease),background .3s!important;
}
.pxl-swiper-arrow:hover{background:var(--ap-grad)!important;color:#fff!important;transform:scale(1.1)}
.swiper-pagination-bullet{background:var(--ap-accent)!important;opacity:.25;transition:all .4s var(--ap-ease)}
.swiper-pagination-bullet-active{opacity:1;width:24px;border-radius:6px;background:var(--ap-grad)!important}

/* ---------- SECTIONS (classes added by JS from computed bg) ---------- */
.elementor-top-section{position:relative}
.ap-pale{background:transparent!important}
.ap-dark{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--ap-ink) 0%,var(--ap-ink-2) 100%)!important;color:rgba(255,255,255,.78);
}
.ap-dark>.elementor-container,.ap-dark>.elementor-background-overlay{position:relative;z-index:1}
.ap-dark::before,.ap-dark::after{
  content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform;
}
.ap-dark::before{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#5e5ce6,transparent 65%);animation:apDrift1 22s ease-in-out infinite alternate}
.ap-dark::after{width:40vw;height:40vw;right:-10vw;bottom:-14vw;background:radial-gradient(circle,#40c8e0,transparent 65%);animation:apDrift2 26s ease-in-out infinite alternate}
@keyframes apDrift1{to{transform:translate(18vw,10vw) scale(1.2)}}
@keyframes apDrift2{to{transform:translate(-16vw,-8vw) scale(1.15)}}
.ap-dark h1,.ap-dark h2,.ap-dark h3,.ap-dark h4,.ap-dark h5,.ap-dark h6{color:#fff}
.ap-dark p,.ap-dark li{color:rgba(255,255,255,.72)}
.ap-dark .pxl-post--inner,.ap-dark .pxl-swiper-slide .pxl-item--inner{
  background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.ap-dark .pxl-swiper-arrow{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}

/* footer */
footer,.pxl-footer,#pxl-footer-elementor{background:transparent!important}
footer a,.pxl-footer a{color:var(--ap-text-2)}footer a:hover,.pxl-footer a:hover{color:var(--ap-accent)}
hr,.elementor-divider-separator{border-color:var(--ap-line)!important}
#pxl-page-title-default,.pxl-page-title-wrap{background:transparent!important}

/* scroll-to-top */
.pxl-scroll-top,#pxl-scroll-top,.pxl-sticky-stt{
  border-radius:50%!important;background:rgba(255,255,255,.6)!important;color:var(--ap-accent)!important;
  border:1px solid rgba(255,255,255,.85)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 30px rgba(40,40,120,.2)!important;transition:transform .35s var(--ap-ease)!important;
}
.pxl-scroll-top:hover,#pxl-scroll-top:hover{transform:translateY(-4px) scale(1.06)}

/* ---------- Scroll reveal: glass "focus-in" (fade + rise + blur) ---------- */
html.ap-js .ap-reveal{
  opacity:0;transform:translateY(34px) scale(.985);filter:blur(14px);
  transition:opacity 1s var(--ap-ease),transform 1s var(--ap-ease),filter 1s var(--ap-ease);
  transition-delay:var(--ap-d,0ms);
}
html.ap-js .ap-reveal.ap-in{opacity:1;transform:none;filter:blur(0)}
/* tame theme wow.js so it doesn't fight us */
.wow{animation-duration:1s!important}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .btn,.pxl-button,.elementor-button,.wpcf7-submit{padding:13px 24px!important}
  .ap-hero .pxl-heading .pxl-item--title{font-size:2.3rem!important}
  .pxl-heading .pxl-item--title{font-size:1.85rem!important}
  .btn-video{width:84px;height:84px}
  .ap-dark::before,.ap-dark::after{filter:blur(60px);opacity:.45}
  html.ap-js .ap-reveal{filter:blur(8px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.ap-js .ap-reveal{opacity:1;transform:none;filter:none}
}