/* ==========================================================================
   NextoBig - Apple Glass Layer  (extends "Midnight Signal")
   Loads AFTER nextobig.css. Everything is scoped to html.nb-glass-on so the
   whole layer can be switched off from one PHP flag.
   ========================================================================== */

html.nb-glass-on{
  /* material */
  --g-tint:rgba(9,19,34,.34);
  --g-tint-soft:rgba(9,19,34,.22);
  --g-tint-deep:rgba(7,16,29,.56);
  --g-blur:saturate(200%) blur(34px);
  --g-blur-sm:saturate(185%) blur(18px);
  --g-blur-lg:saturate(210%) blur(50px);
  --g-line:rgba(255,255,255,.19);
  --g-line-hi:rgba(0,212,255,.55);
  --g-top:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05);
  --g-top-hi:inset 0 1px 0 rgba(255,255,255,.44),inset 0 -1px 0 rgba(0,212,255,.12);
  --g-sheen:linear-gradient(158deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.055) 36%,rgba(255,255,255,0) 64%);
  --g-shadow:0 28px 64px -22px rgba(2,8,20,.9),0 6px 18px -8px rgba(2,8,20,.6);
  --g-shadow-hi:0 40px 84px -26px rgba(2,8,20,.95),0 0 0 1px rgba(0,212,255,.16),0 14px 48px -18px rgba(0,212,255,.45);
  /* motion */
  --ease-a:cubic-bezier(.16,1,.3,1);
  --ease-b:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   1. Ambient backdrop - glass needs something behind it to actually blur
   -------------------------------------------------------------------------- */
html.nb-glass-on{background:#050D18}
html.nb-glass-on body{background:transparent}

html.nb-glass-on body::before{
  content:"";position:fixed;inset:-6%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 40% at 24% 20%,rgba(37,99,235,.38),transparent 60%),
    radial-gradient(40% 34% at 86% 18%,rgba(0,212,255,.22),transparent 62%),
    radial-gradient(56% 46% at 66% 68%,rgba(30,58,138,.50),transparent 64%),
    radial-gradient(42% 36% at 4% 78%,rgba(0,212,255,.15),transparent 60%),
    linear-gradient(180deg,#07111F 0%,#0A1930 48%,#07111F 100%);
  animation:nb-aurora 34s ease-in-out infinite alternate;
  will-change:transform;
}
html.nb-glass-on body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
}
@keyframes nb-aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.2%,-1.6%,0) scale(1.12)}
}

/* Section grounds go translucent so the ambient reads through.
   background-COLOR only here: Elementor 4 strips background-image from
   containers (and all their children) until it lazy-loads them. */
html.nb-glass-on .e-con.nb-secalt{
  background-color:rgba(11,22,40,.28);
  border-block:1px solid rgba(148,163,184,.08);
}
html.nb-glass-on .posbar{
  background:rgba(15,23,42,.45);
  -webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm);
}

/* --------------------------------------------------------------------------
   2. The glass material
   -------------------------------------------------------------------------- */
html.nb-glass-on .e-con.nb-ncard,
html.nb-glass-on .nb-ncard,
html.nb-glass-on .e-con.nb-glass,
html.nb-glass-on .svc,
html.nb-glass-on .why,
html.nb-glass-on .ct,
html.nb-glass-on .tst,
html.nb-glass-on .case,
html.nb-glass-on .cap,
html.nb-glass-on .form-card,
html.nb-glass-on .gpanel{
  background-color:var(--g-tint);
  background-image:
    radial-gradient(440px circle at var(--mx,50%) var(--my,-40%),rgba(255,255,255,var(--glare,0)),rgba(255,255,255,0) 58%),
    var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line);
  box-shadow:var(--g-shadow),var(--g-top);
  transition:box-shadow .55s var(--ease-a),border-color .45s var(--ease-a),
             background-color .45s var(--ease-a),transform .55s var(--ease-a);
}
html.nb-glass-on .e-con.nb-ncard:hover,
html.nb-glass-on .nb-ncard:hover,
html.nb-glass-on .e-con.nb-glass:hover,
html.nb-glass-on .svc:hover,
html.nb-glass-on .why:hover,
html.nb-glass-on .ct:hover,
html.nb-glass-on .tst:hover,
html.nb-glass-on .case:hover,
html.nb-glass-on .cap:hover,
html.nb-glass-on .form-card:hover{
  background-color:rgba(14,34,58,.42);
  border-color:var(--g-line-hi);
  box-shadow:var(--g-shadow-hi),var(--g-top-hi);
}

/* Contrast guard: the fill is thin now, so secondary copy sitting on glass
   steps up from slate-400 to slate-300 and headings stay pure white. */
html.nb-glass-on .e-con.nb-ncard p,
html.nb-glass-on .nb-ncard p,
html.nb-glass-on .e-con.nb-glass p,
html.nb-glass-on .svc p,
html.nb-glass-on .why p,
html.nb-glass-on .ct p,
html.nb-glass-on .tst p,
html.nb-glass-on .case p,
html.nb-glass-on .cap p,
html.nb-glass-on .e-con.nb-ncard .nb-body .elementor-widget-container,
html.nb-glass-on .e-con.nb-glass .nb-body .elementor-widget-container,
html.nb-glass-on .e-con.nb-ncard .elementor-widget-text-editor,
html.nb-glass-on .e-con.nb-glass .elementor-widget-text-editor{color:#CBD5E1}
html.nb-glass-on .e-con.nb-ncard .num,
html.nb-glass-on .nb-cardtop .num,
html.nb-glass-on .svc .num{color:#94A3B8}

/* accent glass keeps its blue cast, now with real depth */
html.nb-glass-on .e-con.nb-glass.accent{
  background-color:rgba(21,45,96,.42);
  background-image:linear-gradient(150deg,rgba(0,212,255,.13),rgba(37,99,235,.06) 46%,rgba(255,255,255,0) 74%);
  border-color:rgba(0,212,255,.24);
}

/* case-study card header sits inside the glass, not on top of it */
html.nb-glass-on .case,html.nb-glass-on .e-con.nb-ncard.nb-nopad{overflow:hidden}
html.nb-glass-on .ch{background:linear-gradient(135deg,rgba(30,58,138,.75),rgba(37,99,235,.55) 55%,rgba(0,212,255,.30))}

/* small glass tiles: icons, chips, dots, socials */
html.nb-glass-on .sic,
html.nb-glass-on .ci,
html.nb-glass-on .ci-ic,
html.nb-glass-on .nb-mi-ic,
html.nb-glass-on .step .dot,
html.nb-glass-on .chip,
html.nb-glass-on .nb-soc a{
  background-color:rgba(255,255,255,.055);
  background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
html.nb-glass-on .step .dot{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 10px 26px -12px rgba(2,8,20,.8)}

/* ghost button becomes a real glass pill */
html.nb-glass-on .btn-ghost,
html.nb-glass-on .nb-btn-ghost a.elementor-button,
html.nb-glass-on .nb-btn-ghost .elementor-button{
  background-color:rgba(255,255,255,.06)!important;
  background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 62%)!important;
  -webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm);
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .45s var(--ease-a),background-color .35s var(--ease-a),border-color .35s var(--ease-a);
}
html.nb-glass-on .btn-ghost:hover,
html.nb-glass-on .nb-btn-ghost a.elementor-button:hover{
  background-color:rgba(0,212,255,.10)!important;
  border-color:rgba(0,212,255,.45)!important;
}

/* form fields */
html.nb-glass-on .form-card input,
html.nb-glass-on .form-card select{
  background-color:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:border-color .3s var(--ease-a),box-shadow .3s var(--ease-a),background-color .3s var(--ease-a);
}
html.nb-glass-on .form-card input::placeholder{color:rgba(148,163,184,.75)}
html.nb-glass-on .form-card input:focus,
html.nb-glass-on .form-card select:focus{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(0,212,255,.55);
  box-shadow:0 0 0 3px rgba(0,212,255,.16),inset 0 1px 0 rgba(255,255,255,.14);
}

/* CTA band + footer */
html.nb-glass-on .cta-band{
  background-color:rgba(12,33,74,.46);
  background-image:linear-gradient(150deg,rgba(0,212,255,.14),rgba(37,99,235,.10) 45%,rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid rgba(0,212,255,.22);
  box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.20);
}
html.nb-glass-on .nb-footer{
  background-color:rgba(9,18,32,.55);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border-top:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* floating buttons pick up the same edge light */
html.nb-glass-on .nb-fb{box-shadow:0 14px 34px -10px rgba(2,8,20,.75),inset 0 1px 0 rgba(255,255,255,.28)}

/* --------------------------------------------------------------------------
   3. Header: materialises on scroll + scroll progress line
   -------------------------------------------------------------------------- */
/* The bar carries a dark ground from the very first pixel: the logo is a white
   mark and the ambient aurora is brightest near the top left, so a near
   transparent resting state let the two blend. It still deepens on scroll. */
html.nb-glass-on .nb-header{
  background-color:rgba(5,12,23,calc(.80 + var(--nbs,0) * .17));
  -webkit-backdrop-filter:saturate(175%) blur(calc(18px + var(--nbs,0) * 16px));
  backdrop-filter:saturate(175%) blur(calc(18px + var(--nbs,0) * 16px));
  border-bottom:1px solid rgba(255,255,255,calc(.05 + var(--nbs,0) * .07));
  box-shadow:0 20px 44px -30px rgba(2,8,20,calc(.35 + var(--nbs,0) * .6));
  transition:background-color .4s var(--ease-b),border-color .4s var(--ease-b),box-shadow .4s var(--ease-b);
}
html.nb-glass-on .nb-header.scrolled{background-color:rgba(5,12,23,calc(.80 + var(--nbs,1) * .17))}
/* keep the brightest ambient field away from the logo */
html.nb-glass-on .nb-logo-link,html.nb-glass-on .nb-header .logo{position:relative;z-index:2}
html.nb-glass-on .nb-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden;
}
html.nb-glass-on .nb-progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#2563EB,#00D4FF);
  box-shadow:0 0 12px rgba(0,212,255,.55);
}
/* Menus are reading surfaces, not decoration: they stay heavily frosted so
   the links never compete with whatever is scrolling underneath. */
html.nb-glass-on .nb-mega{
  background-color:rgba(8,17,31,.98);
  background-image:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,0) 46%);
  -webkit-backdrop-filter:saturate(180%) blur(48px);backdrop-filter:saturate(180%) blur(48px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 90px -30px rgba(2,8,20,.98),inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .45s var(--ease-a),transform .45s var(--ease-a),visibility .45s;
}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  html.nb-glass-on .nb-mega{background-color:rgba(8,17,31,.99)}
}
html.nb-glass-on .nb-mega-feature{
  background-color:rgba(14,40,88,.85);
  background-image:linear-gradient(150deg,rgba(0,212,255,.16),rgba(255,255,255,0) 62%);
  border-color:rgba(0,212,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
html.nb-glass-on .nb-mobile,
html.nb-glass-on .nb-header.mobile-open{
  background-color:rgba(7,17,31,.98);
  -webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);
}
html.nb-glass-on .nb-msticky{
  background:rgba(7,17,31,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
}

/* --------------------------------------------------------------------------
   4. Motion - Apple spring reveal
   -------------------------------------------------------------------------- */
html.nb-glass-on.nb-anim .nb-wrapc>.elementor-widget,
html.nb-glass-on.nb-anim .nb-wrapc>.nb-btnrow,
html.nb-glass-on.nb-anim .nb-herocol>.elementor-widget,
html.nb-glass-on.nb-anim .nb-herocol>.nb-btnrow,
html.nb-glass-on.nb-anim .nb-herogrid>.hero-visual,
html.nb-glass-on.nb-anim .nb-grid2>*,
html.nb-glass-on.nb-anim .nb-grid3>*,
html.nb-glass-on.nb-anim .nb-grid4>*,
html.nb-glass-on.nb-anim .nb-split>*,
html.nb-glass-on.nb-anim .cta-band{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.986);
  transition:opacity .7s var(--ease-a),transform .82s var(--ease-a);
}
html.nb-glass-on.nb-anim .nb-in{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}

/* nav underline + link easing */
html.nb-glass-on .nb-menu>a::after{transition:width .5s var(--ease-a)}
html.nb-glass-on .nb-mi{transition:background-color .35s var(--ease-a),transform .35s var(--ease-a)}
html.nb-glass-on .nb-mi:hover{transform:translateX(2px)}

/* primary button: softer spring + press feedback */
html.nb-glass-on .btn-primary,
html.nb-glass-on .nb-btn-primary .elementor-button,
html.nb-glass-on .nb-nav-cta,
html.nb-glass-on .nb-fbtn2{
  transition:transform .45s var(--ease-a),box-shadow .45s var(--ease-a);
}
html.nb-glass-on .btn-primary:active,
html.nb-glass-on .nb-btn-primary .elementor-button:active,
html.nb-glass-on .nb-nav-cta:active{transform:translateY(-1px) scale(.978)}

/* --------------------------------------------------------------------------
   5. Motion - pointer tilt + specular glare (JS adds nb-tilt-s / nb-tilt-r)
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.nb-glass-on .nb-tilt-s,
  html.nb-glass-on .nb-tilt-r{transform-style:preserve-3d}
  html.nb-glass-on .nb-tilt-on{--glare:.20}
  html.nb-glass-on .nb-tilt-s{
    transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0);
    transition:transform .6s var(--ease-a),box-shadow .55s var(--ease-a),
               border-color .45s var(--ease-a),background-color .45s var(--ease-a);
  }
  html.nb-glass-on.nb-anim .nb-tilt-r.nb-in{
    transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0)!important;
    transition:transform .6s var(--ease-a),box-shadow .55s var(--ease-a),
               border-color .45s var(--ease-a),background-color .45s var(--ease-a),opacity .95s var(--ease-a);
  }
  html.nb-glass-on .nb-tilt-on{--ty:-6px}
  html.nb-glass-on .nb-tilt-s.nb-tilt-on,
  html.nb-glass-on .nb-tilt-r.nb-tilt-on{transition-duration:.18s,.3s,.3s,.3s}
}

/* --------------------------------------------------------------------------
   6. Motion - hero scroll parallax (JS sets --nbhero on .nb-herosec)
   -------------------------------------------------------------------------- */
html.nb-glass-on .nb-herosec{--nbhero:0}
html.nb-glass-on .nb-herocol{
  transform:translate3d(0,calc(var(--nbhero,0) * 44px),0);
  opacity:calc(1 - var(--nbhero,0) * .78);
  will-change:transform,opacity;
}
/* The hero visual's own SVG layers carry the scroll parallax now (see
   NB-HERO-VISUAL-V2 in nextobig.css), so the container keeps its clean
   reveal and only fades as the hero leaves. */
html.nb-glass-on .nb-herogrid>.hero-visual{opacity:calc(1 - var(--nbhero,0) * .55)}
html.nb-glass-on.nb-anim .nb-herogrid>.hero-visual.nb-in{opacity:calc(1 - var(--nbhero,0) * .55)!important}
html.nb-glass-on .nb-herosec::after{
  transform:translate3d(0,calc(var(--nbhero,0) * -60px),0);
  opacity:calc(1 - var(--nbhero,0) * .5);
}

/* --------------------------------------------------------------------------
   7. Fallbacks, performance and accessibility
   -------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  html.nb-glass-on .e-con.nb-ncard,
  html.nb-glass-on .nb-ncard,
  html.nb-glass-on .e-con.nb-glass,
  html.nb-glass-on .svc,
  html.nb-glass-on .why,
  html.nb-glass-on .ct,
  html.nb-glass-on .tst,
  html.nb-glass-on .case,
  html.nb-glass-on .cap,
  html.nb-glass-on .form-card,
  html.nb-glass-on .gpanel,
  html.nb-glass-on .cta-band,
  html.nb-glass-on .nb-footer,
  html.nb-glass-on .nb-mega{background-color:rgba(11,22,38,.94)}
  html.nb-glass-on .nb-header.scrolled{background-color:rgba(7,17,31,.96)}
}

@media (max-width:1024px){
  html.nb-glass-on{--g-tint:rgba(9,19,34,.46);--g-blur:saturate(170%) blur(18px);--g-blur-lg:saturate(175%) blur(24px);--g-blur-sm:saturate(160%) blur(11px)}
  html.nb-glass-on .nb-herocol{transform:none;opacity:1}
  html.nb-glass-on body::before{animation:none}
}
@media (max-width:680px){
  html.nb-glass-on{--g-tint:rgba(9,19,34,.60);--g-blur:saturate(150%) blur(13px)}
  html.nb-glass-on body::after{opacity:.22}
}

@media (prefers-reduced-motion:reduce){
  html.nb-glass-on body::before{animation:none}
  html.nb-glass-on .nb-herocol,
  html.nb-glass-on .nb-herogrid>.hero-visual,
  html.nb-glass-on .nb-herosec::after{transform:none!important;opacity:1!important}
  html.nb-glass-on .nb-tilt-s,
  html.nb-glass-on .nb-tilt-r{transform:none!important}
  html.nb-glass-on .nb-progress{display:none}
}