/* Ababil Technology — Futuristic Experience v13 */
:root{
  --fx-cobalt:#0052ff;
  --fx-cyan:#38d9ff;
  --fx-violet:#7b5cff;
  --fx-citron:#ccff00;
  --fx-line:rgba(120,160,255,.14);
  --fx-glow:0 24px 80px rgba(0,82,255,.16);
  --fx-section-opacity:.92;
  --fx-parallax:0px;
}

body.ababil-x{
  position:relative;
  isolation:isolate;
}

body.ababil-x:before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,82,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,82,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--fx-violet) 12%,transparent),transparent 32%),
    radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--fx-cyan) 11%,transparent),transparent 30%),
    radial-gradient(circle at 50% 92%,color-mix(in srgb,var(--fx-cobalt) 10%,transparent),transparent 36%);
  background-size:72px 72px,72px 72px,auto,auto,auto;
  transform:translate3d(var(--fx-scroll,0),var(--fx-pointer-y,0),0) scale(1.06);
  animation:fx-field-drift 28s linear infinite;
  will-change:transform;
}

body.ababil-x:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(56,217,255,.07) 51%,transparent 60%);
  background-size:280% 100%;
  animation:fx-sweep 16s cubic-bezier(.65,0,.35,1) infinite;
  mix-blend-mode:screen;
}

.fx-field{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.58;
}

body.ababil-x main,
body.ababil-x .site-footer,
body.ababil-x .site-header{
  position:relative;
  z-index:1;
}

/* Cinematic headings and section entrances */
body.ababil-x h1,
body.ababil-x h2{
  text-shadow:0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 20px 55px color-mix(in srgb,var(--fx-cobalt) 13%,transparent);
}

body.ababil-x h1 em,
body.ababil-x .section-title-row h2 em{
  background:linear-gradient(100deg,var(--ab-cobalt),var(--fx-cyan) 38%,var(--fx-violet) 64%,var(--ab-cobalt));
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:fx-text-flow 7s linear infinite;
}

body.ababil-x.fx-ready .reveal:not(.fx-in){
  opacity:.22!important;
  transform:translateY(24px) scale(.992)!important;
  filter:blur(5px);
  transition:
    opacity .75s var(--ease-expo),
    transform .75s var(--ease-expo),
    filter .65s var(--ease-expo);
  transition-delay:calc(min(var(--delay,0),320) * 1ms);
}

/* Dedicated section fields keep the futuristic atmosphere visible above opaque theme bands */
.fx-section-field{
  position:absolute;
  inset:-12% 0;
  z-index:0;
  pointer-events:none;
  opacity:.48;
  mix-blend-mode:screen;
  background:
    linear-gradient(rgba(120,170,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,255,.07) 1px,transparent 1px),
    radial-gradient(circle at 18% 20%,rgba(123,92,255,.24),transparent 28%),
    radial-gradient(circle at 82% 72%,rgba(56,217,255,.22),transparent 30%),
    radial-gradient(circle at 50% 50%,rgba(0,82,255,.14),transparent 42%);
  background-size:64px 64px,64px 64px,auto,auto,auto;
  animation:fx-section-drift 26s ease-in-out infinite alternate,fx-section-hue 18s linear infinite;
}

.fx-surface{
  position:relative!important;
}

.fx-surface:after{
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  z-index:4;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card-accent,var(--fx-cyan)) 55%,transparent),transparent);
  opacity:.7;
}

body.ababil-x .section:nth-of-type(4n+1) .fx-section-field{--card-accent:#38d9ff}
body.ababil-x .section:nth-of-type(4n+2) .fx-section-field{--card-accent:#7b5cff}
body.ababil-x .section:nth-of-type(4n+3) .fx-section-field{--card-accent:#0052ff}
body.ababil-x .section:nth-of-type(4n+4) .fx-section-field{--card-accent:#ccff00}

/* Unified premium interaction system */
body.ababil-x :is(.service-card,.product-flow-node,.product-directory-row,.capability-row,.client-logo,.testimonial-grid figure,.project-row,.related-card,.portfolio-card,.value-card,.module-card,.control-card,.analytics-card,.whatsapp-panel,.experience-metric,.journey-card){
  --fx-lift:0px;
  --fx-glow-strength:0;
  transform:translate3d(0,var(--fx-lift),0);
  transition:transform .42s var(--ease-expo),box-shadow .38s var(--ease-expo),border-color .3s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out);
}

body.ababil-x.fx-motion :is(.service-card,.product-flow-node,.product-directory-row,.capability-row,.client-logo,.testimonial-grid figure,.project-row,.related-card,.portfolio-card,.value-card,.module-card,.control-card,.analytics-card,.whatsapp-panel,.experience-metric,.journey-card):hover{
  --fx-lift:-7px;
  --fx-glow-strength:1;
  box-shadow:
    0 26px 70px color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) calc(18% + 8% * var(--fx-glow-strength)),transparent),
    0 0 0 1px color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 28%,transparent);
}

body.ababil-x :is(.capability-row,.client-logo,.testimonial-grid figure,.project-row)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 13%,transparent),transparent 68%),
    linear-gradient(120deg,rgba(255,255,255,.09),transparent 34%,transparent 72%,color-mix(in srgb,var(--fx-cyan) 9%,transparent));
  opacity:0;
  transition:opacity .32s var(--ease-out);
}

body.ababil-x :is(.capability-row,.client-logo,.testimonial-grid figure,.project-row):hover::after,
body.ababil-x :is(.capability-row,.client-logo,.testimonial-grid figure,.project-row):focus-within::after{
  opacity:1;
}

body.ababil-x :is(.capability-row,.project-row)>*{
  position:relative;
  z-index:1;
}

body.ababil-x .experience-metric strong{
  display:inline-block;
  background:linear-gradient(100deg,#fff,var(--fx-cyan) 45%,var(--ab-citron) 75%,#fff);
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:fx-text-flow 8s linear infinite;
}

body.ababil-x .site-header{
  transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),backdrop-filter .35s var(--ease-out);
}

body.ababil-x .site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--fx-violet) 16%,transparent),transparent 32%),
    radial-gradient(circle at 85% 85%,color-mix(in srgb,var(--fx-cobalt) 18%,transparent),transparent 36%);
  mix-blend-mode:screen;
  animation:fx-section-drift 30s ease-in-out infinite alternate;
}

body.ababil-x .reveal.fx-in{
  opacity:1!important;
  transform:none!important;
  filter:blur(0)!important;
}

/* Holographic controls */
body.ababil-x .button{
  position:relative;
  overflow:hidden;
  border-radius:.625rem!important;
  box-shadow:0 12px 34px color-mix(in srgb,var(--fx-cobalt) 17%,transparent)!important;
}

body.ababil-x .button:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from calc(var(--fx-angle,0deg) + var(--mx,50%) * 2),transparent 0 68%,color-mix(in srgb,var(--fx-citron) 62%,transparent) 78%,transparent 88%);
  opacity:0;
  transition:opacity .25s var(--ease-out);
}

body.ababil-x .button:hover,
body.ababil-x .button:focus-visible{
  transform:translateY(-3px) scale(1.015)!important;
  box-shadow:0 18px 48px color-mix(in srgb,var(--fx-cobalt) 26%,transparent)!important;
}

body.ababil-x .button:hover:before,
body.ababil-x .button:focus-visible:before{
  opacity:1;
}

body.ababil-x .button{
  transform:perspective(700px) translate3d(var(--magnet-x,0),var(--magnet-y,0),0)!important;
}

body.ababil-x .button:hover,
body.ababil-x .button:focus-visible{
  transform:perspective(700px) translate3d(var(--magnet-x,0),var(--magnet-y,0),0) scale(1.035)!important;
}

body.ababil-x .button>*{
  position:relative;
  z-index:1;
}

/* Pointer-reactive surfaces */
body.ababil-x .service-card,
body.ababil-x .tilt-fx,
body.ababil-x .product-flow-node,
body.ababil-x .product-directory-row,
body.ababil-x .related-card,
body.ababil-x .portfolio-card,
body.ababil-x .value-card,
body.ababil-x .module-card,
body.ababil-x .control-card,
body.ababil-x .analytics-card,
body.ababil-x .whatsapp-panel,
body.ababil-x .experience-metric,
body.ababil-x .journey-card{
  --mx:50%;
  --my:50%;
  position:relative;
  transition:
    transform .38s var(--ease-expo),
    box-shadow .32s var(--ease-expo),
    border-color .32s var(--ease-out),
    background-color .32s var(--ease-out);
}

body.ababil-x.fx-motion .service-card,
body.ababil-x.fx-motion .tilt-fx,
body.ababil-x.fx-motion .related-card,
body.ababil-x.fx-motion .portfolio-card,
body.ababil-x.fx-motion .value-card,
body.ababil-x.fx-motion .module-card,
body.ababil-x.fx-motion .control-card,
body.ababil-x.fx-motion .analytics-card{
  transform:perspective(900px) translateY(var(--lift,0)) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) scale(var(--zoom,1));
}

body.ababil-x.fx-motion .service-card:hover,
body.ababil-x.fx-motion .related-card:hover,
body.ababil-x.fx-motion .portfolio-card:hover,
body.ababil-x.fx-motion .value-card:hover,
body.ababil-x.fx-motion .module-card:hover,
body.ababil-x.fx-motion .control-card:hover,
body.ababil-x.fx-motion .analytics-card:hover{
  --lift:-9px;
  --zoom:1.015;
  box-shadow:0 35px 95px rgba(0,82,255,.25),0 0 0 1px color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 34%,transparent);
}

/* Premium media treatment */
body.ababil-x .visual-frame img,
body.ababil-x .product-flow-node figure img,
body.ababil-x .related-card img,
body.ababil-x .client-logo img{
  transition:transform .65s var(--ease-expo),filter .45s var(--ease-out),opacity .45s var(--ease-out);
}

body.ababil-x .visual-frame img,
body.ababil-x .product-flow-node figure img,
body.ababil-x .related-card img{
  filter:saturate(1.08) contrast(1.04) brightness(1.01);
}

body.ababil-x .visual-frame:hover img,
body.ababil-x .product-flow-node:hover figure img,
body.ababil-x .related-card:hover img{
  transform:scale(1.06);
  filter:saturate(1.16) contrast(1.07) brightness(1.04);
}

body.ababil-x .service-card:hover,
body.ababil-x .product-directory-row:hover,
body.ababil-x .related-card:hover,
body.ababil-x .portfolio-card:hover,
body.ababil-x .value-card:hover,
body.ababil-x .module-card:hover,
body.ababil-x .control-card:hover,
body.ababil-x .analytics-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--fx-glow),0 0 0 1px color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 24%,transparent);
}

body.ababil-x .service-card:after,
body.ababil-x .product-directory-row:after,
body.ababil-x .related-card:after,
body.ababil-x .portfolio-card:after,
body.ababil-x .value-card:after,
body.ababil-x .module-card:after,
body.ababil-x .control-card:after,
body.ababil-x .analytics-card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(340px circle at var(--mx) var(--my),color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 15%,transparent),transparent 65%),
    linear-gradient(130deg,rgba(255,255,255,.08),transparent 32%,transparent 74%,color-mix(in srgb,var(--fx-cyan) 10%,transparent));
  opacity:0;
  transition:opacity .3s var(--ease-out);
}

body.ababil-x .service-card:hover:after,
body.ababil-x .product-directory-row:hover:after,
body.ababil-x .related-card:hover:after,
body.ababil-x .portfolio-card:hover:after,
body.ababil-x .value-card:hover:after,
body.ababil-x .module-card:hover:after,
body.ababil-x .control-card:hover:after,
body.ababil-x .analytics-card:hover:after{
  opacity:1;
}

body.ababil-x .service-card>*,
body.ababil-x .product-directory-row>*,
body.ababil-x .related-card>*,
body.ababil-x .portfolio-card>*,
body.ababil-x .value-card>*,
body.ababil-x .module-card>*,
body.ababil-x .control-card>*,
body.ababil-x .analytics-card>*{
  position:relative;
  z-index:1;
}

body.ababil-x .product-flow-node{
  overflow:hidden;
}

body.ababil-x .product-flow-node:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:auto;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--card-accent,var(--fx-citron)),transparent);
  transform:scaleX(.15);
  transform-origin:left;
  transition:transform .45s var(--ease-expo);
}

body.ababil-x .product-flow-node:hover:before{
  transform:scaleX(1);
}

body.ababil-x .product-flow-node img{
  transition:transform .55s var(--ease-expo),filter .4s var(--ease-out);
}

body.ababil-x .product-flow-node:hover img{
  transform:scale(1.04);
  filter:saturate(1.12) contrast(1.03);
}

body.ababil-x .visual-frame{
  box-shadow:0 40px 110px rgba(0,0,0,.34),0 0 0 1px rgba(120,160,255,.16),0 0 65px color-mix(in srgb,var(--card-accent,var(--fx-cobalt)) 16%,transparent);
}

body.ababil-x .visual-frame:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--fx-cyan) 52%,transparent),transparent 32%,transparent 66%,color-mix(in srgb,var(--fx-violet) 44%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}

body.ababil-x .brand img{
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--fx-cyan) 34%,transparent));
}

body.ababil-x .mega-menu{
  background:color-mix(in srgb,var(--ab-mineral) 88%,#fff)!important;
  box-shadow:0 30px 100px rgba(8,17,27,.18),var(--fx-glow)!important;
}

.fx-progress{
  position:fixed;
  inset:0 100% auto 0;
  z-index:calc(var(--z-header) + 1);
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--fx-cobalt),var(--fx-cyan),var(--fx-violet),var(--fx-citron));
  box-shadow:0 0 18px color-mix(in srgb,var(--fx-cobalt) 48%,transparent);
}

@keyframes fx-field-drift{
  to{background-position:72px 144px,-72px 0,0 0,0 0,0 0}
}

@keyframes fx-sweep{
  to{background-position:-280% 0}
}

@keyframes fx-text-flow{
  to{background-position:-220% center}
}

@keyframes fx-section-drift{
  from{background-position:0 0,0 0,0 0,0 0,0 0;transform:translate3d(0,var(--fx-parallax,0),0)}
  to{background-position:96px 128px,-64px 32px,24px -18px,-24px 20px,0 0;transform:translate3d(0,calc(var(--fx-parallax,0) - 18px),0)}
}

@keyframes fx-section-hue{
  to{filter:hue-rotate(38deg) saturate(1.15)}
}

@media(max-width:767px){
  body.ababil-x:before{background-size:46px 46px,46px 46px,auto,auto,auto}
  .fx-field{opacity:.38}
  .fx-section-field{inset:0;background-size:44px 44px,44px 44px,auto,auto,auto;opacity:.62;animation-duration:16s,12s}
  body.ababil-x .reveal,
  body.ababil-x .reveal.fx-in{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  body.ababil-x .service-card:hover,
  body.ababil-x .product-directory-row:hover,
  body.ababil-x .related-card:hover,
  body.ababil-x .portfolio-card:hover,
  body.ababil-x .value-card:hover,
  body.ababil-x .module-card:hover,
  body.ababil-x .control-card:hover,
  body.ababil-x .analytics-card:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  body.ababil-x:before,
  body.ababil-x:after,
  .fx-section-field,
  body.ababil-x h1 em,
  body.ababil-x .section-title-row h2 em{animation:none}
  .fx-field{display:none}
  .fx-section-field{display:none}
  body.ababil-x .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  body.ababil-x .button,
  body.ababil-x .product-flow-node,
  body.ababil-x .service-card,
  body.ababil-x .capability-row,
  body.ababil-x .client-logo,
  body.ababil-x .testimonial-grid figure,
  body.ababil-x .project-row,
  body.ababil-x .product-directory-row,
  body.ababil-x .related-card,
  body.ababil-x .portfolio-card,
  body.ababil-x .value-card,
  body.ababil-x .module-card,
  body.ababil-x .control-card,
  body.ababil-x .analytics-card{transition:none}
  body.ababil-x :is(.button,.product-flow-node,.service-card,.capability-row,.client-logo,.testimonial-grid figure,.project-row,.product-directory-row,.related-card,.portfolio-card,.value-card,.module-card,.control-card,.analytics-card){transform:none!important}
}