/* Nextritech "liquid glass" layer — additive: loads AFTER each page's own styles and only restyles surfaces.
   Shared by the main site and (later) the app subdomains. Tokens first; everything degrades to the old look
   if backdrop-filter is unsupported or the visitor asks for reduced motion / transparency. */
:root{
  --nxg-amber:#f5a623;--nxg-teal:#3bf1d3;--nxg-indigo:#15b6c3;
  --nxg-fill:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  --nxg-fill-strong:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  --nxg-edge:rgba(255,255,255,.15);
  --nxg-hi:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.04);
  --nxg-shadow:0 18px 50px rgba(0,0,0,.34);
  --nxg-blur:blur(18px) saturate(1.55);
}

/* ---------- aurora: slow colour blobs the glass can refract ---------- */
.nx-aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.nx-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.nx-aurora i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,rgba(0,210,180,.55),transparent 65%);animation:nxDriftA 38s ease-in-out infinite alternate}
.nx-aurora i:nth-child(2){width:40vmax;height:40vmax;right:-14vmax;top:12vh;background:radial-gradient(circle,rgba(245,166,35,.42),transparent 65%);animation:nxDriftB 46s ease-in-out infinite alternate}
.nx-aurora i:nth-child(3){width:36vmax;height:36vmax;left:30vw;bottom:-20vmax;background:radial-gradient(circle,rgba(21,182,195,.42),transparent 65%);animation:nxDriftC 52s ease-in-out infinite alternate}
@keyframes nxDriftA{to{transform:translate(14vw,10vh) scale(1.15)}}
@keyframes nxDriftB{to{transform:translate(-12vw,16vh) scale(.9)}}
@keyframes nxDriftC{to{transform:translate(-16vw,-12vh) scale(1.2)}}

/* sections were opaque gradients; let the aurora show through */
#about,#services,#apps,#why-us,#contact,main>section{background-image:none!important;background-color:transparent!important}
#apps{background-color:rgba(0,0,0,.18)!important}
#contact{background-color:rgba(0,0,0,.26)!important}

/* ---------- floating glass nav ---------- */
header.sticky.top-0{top:8px!important;margin:8px auto 0;width:calc(100% - 20px);max-width:1280px;border:1px solid var(--nxg-edge)!important;border-radius:22px;
  background:linear-gradient(145deg,rgba(6,56,60,.62),rgba(2,34,38,.50))!important;-webkit-backdrop-filter:var(--nxg-blur);backdrop-filter:var(--nxg-blur);
  box-shadow:var(--nxg-hi),var(--nxg-shadow);transition:background .25s ease,box-shadow .25s ease}
header.sticky.top-0>div:first-child{transition:height .25s ease}
header.sticky.nx-scrolled>div:first-child{height:3.9rem!important}
header.sticky.nx-scrolled{background:linear-gradient(145deg,rgba(6,56,60,.78),rgba(2,34,38,.66))!important}
html.nx-refract header.sticky.top-0{-webkit-backdrop-filter:url(#nxRefract) blur(14px) saturate(1.6);backdrop-filter:url(#nxRefract) blur(14px) saturate(1.6)}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--nxg-amber);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover::after,.navlink.active::after{transform:scaleX(1)}

/* mobile menu = floating glass panel (same idea as NexRental's menu popover) */
@media(max-width:767.98px){
  header.sticky{position:sticky}
  #mobileMenu{position:absolute;left:0;right:0;top:calc(100% + 8px);border:1px solid var(--nxg-edge)!important;border-radius:20px;
    background:linear-gradient(145deg,rgba(6,58,62,.99),rgba(2,34,38,.985))!important;-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:var(--nxg-hi),0 22px 50px rgba(0,0,0,.45)}
  #mobileMenu:not(.hidden){animation:nxPop .2s cubic-bezier(.2,.8,.2,1)}
  #menuBtn{border-color:var(--nxg-edge)!important;background:var(--nxg-fill-strong)!important;box-shadow:var(--nxg-hi)}
}
@keyframes nxPop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- glass surfaces ---------- */
.glass-card,[data-nex-card],#about .space-y-4>div,#why-us .grid.grid-cols-2>div,.nx-glass{
  position:relative;background:var(--nxg-fill)!important;border:1px solid var(--nxg-edge)!important;-webkit-backdrop-filter:var(--nxg-blur);backdrop-filter:var(--nxg-blur);
  box-shadow:var(--nxg-hi),var(--nxg-shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
/* specular sheen + cursor glow (position set by nx-glass.js via --mx/--my) */
.glass-card::before,[data-nex-card]::before,.nx-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 32%);opacity:.7}
.glass-card::after,[data-nex-card]::after,.nx-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 55%)}
.glass-card:hover::after,[data-nex-card]:hover::after,.nx-glass:hover::after{opacity:1}
.glass-card:hover,[data-nex-card]:hover{border-color:rgba(255,255,255,.28)!important;box-shadow:var(--nxg-hi),0 24px 60px rgba(0,0,0,.42)}
.glass-card>*,[data-nex-card]>*,.nx-glass>*{position:relative;z-index:1}
details.glass-card{overflow:hidden}

/* hero division panel gets the strongest glass */
#about aside,#about .glass-card.rounded-3xl{background:var(--nxg-fill-strong)!important}

/* inputs + buttons */
#contact input,#contact select,#contact textarea{background:rgba(255,255,255,.06)!important;border-color:var(--nxg-edge)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#contact input:focus,#contact select:focus,#contact textarea:focus{border-color:var(--nxg-amber)!important;box-shadow:0 0 0 3px rgba(245,166,35,.22);outline:none}
.bg-brand-teal{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 28px rgba(245,166,35,.28)!important;transition:transform .2s ease,box-shadow .2s ease}
.bg-brand-teal:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 16px 36px rgba(245,166,35,.38)!important}
.bg-brand-teal:active{transform:translateY(0) scale(.98)}
a.glass-btn,.nx-btn-glass{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:14px;border:1px solid var(--nxg-edge);background:var(--nxg-fill-strong);box-shadow:var(--nxg-hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s ease,border-color .2s ease}
.nx-btn-glass:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}

/* ---------- scroll reveal (only when JS is running) ---------- */
html.nx-js .nx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
html.nx-js .nx-reveal.nx-in{opacity:1;transform:none}

/* ---------- app icon marquee ---------- */
.nx-marquee{overflow:hidden;margin:0 auto 2.5rem;max-width:56rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nx-marquee-track{display:flex;gap:14px;width:max-content;animation:nxMarquee 38s linear infinite}
.nx-marquee:hover .nx-marquee-track{animation-play-state:paused}
.nx-chip{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;border:1px solid var(--nxg-edge);background:var(--nxg-fill);box-shadow:var(--nxg-hi);white-space:nowrap;font-size:.85rem;color:#e8edf6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nx-chip img{width:34px;height:34px;border-radius:10px;object-fit:cover}
.nx-chip small{display:block;font-size:.65rem;color:#a1aec3;letter-spacing:.04em;text-transform:uppercase}
@keyframes nxMarquee{to{transform:translateX(-50%)}}

/* ---------- mobile: sticky glass call-to-action bar ---------- */
.nx-cta-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:none;gap:8px;align-items:center;padding:8px;border-radius:20px;border:1px solid var(--nxg-edge);
  background:linear-gradient(145deg,rgba(6,58,62,.8),rgba(2,34,38,.72));-webkit-backdrop-filter:var(--nxg-blur);backdrop-filter:var(--nxg-blur);box-shadow:var(--nxg-hi),0 18px 44px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nx-cta-bar a{flex:1;text-align:center;padding:.8rem 1rem;border-radius:14px;font-weight:700;font-size:.9rem}
.nx-cta-bar a.p{background:linear-gradient(135deg,#ffc34d,#f5a623);color:#211808;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.nx-cta-bar a.s{flex:0 0 auto;border:1px solid var(--nxg-edge);color:#e8edf6;background:var(--nxg-fill)}
@media(max-width:767.98px){.nx-cta-bar{display:flex}.nx-cta-bar.on{transform:none}
  /* keep the existing scroll-to-top button clear of the bar */
  #toTop,.fixed.bottom-6.right-6,button[aria-label*="top" i]{bottom:84px!important}
  main section{scroll-margin-top:84px}}

/* ---------- installation gallery + lightbox ---------- */
.nx-gallery{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.nx-gallery figure{margin:0;border-radius:20px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/5;position:relative}
.nx-gallery figure.wide{grid-column:1/-1;aspect-ratio:16/9}
.nx-gallery figure.last-wide{grid-column:1/-1;aspect-ratio:16/10}
.nx-gallery picture,.nx-gallery img{display:block;width:100%;height:100%}
.nx-gallery img{object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nx-gallery figure:hover img{transform:scale(1.04)}
.nx-gallery figcaption{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:8px 12px;border-radius:14px;font-size:.8rem;color:#f1f5fb;border:1px solid var(--nxg-edge);background:rgba(2,34,38,.62);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)}
@media(min-width:900px){.nx-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.nx-gallery figure.wide{aspect-ratio:21/9}.nx-gallery figure.last-wide{grid-column:auto;aspect-ratio:4/5}}
.nx-lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(5,8,16,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nx-lightbox.open{display:flex;animation:nxPop .2s ease}
.nx-lightbox img{max-width:100%;max-height:82vh;border-radius:18px;border:1px solid var(--nxg-edge);box-shadow:var(--nxg-shadow)}
.nx-lightbox p{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#dfe6f2;font-size:.9rem}
.nx-lightbox button{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:14px;border:1px solid var(--nxg-edge);background:var(--nxg-fill-strong);color:#fff;font-size:1.2rem}

/* ---------- respect the visitor ---------- */
@media(prefers-reduced-motion:reduce){
  .nx-aurora i,.nx-marquee-track{animation:none!important}
  html.nx-js .nx-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .glass-card,[data-nex-card]{transition:none}
}
@media(prefers-reduced-transparency:reduce){
  header.sticky.top-0,#mobileMenu,.glass-card,[data-nex-card],.nx-glass,.nx-chip,.nx-cta-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#06363b!important}
}
/* low-power phones: lighter blur, fewer repaint costs */
@media(max-width:767.98px){:root{--nxg-blur:blur(12px) saturate(1.4)}.nx-aurora i{filter:blur(48px);opacity:.42}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.sticky.top-0,#mobileMenu,.glass-card,[data-nex-card],.nx-glass{background:#06363b!important}
}

/* ======================================================================================
   BRAND PALETTE — taken from the Nextritech logo (2026-10-03):
   deep teal ground #022b2d / #012f34, aqua highlight #66fbfc, teal #15b6c3, mint #3bf1d3, amber accent #fdaa31.
   The logo's wordmark is white + aqua "TECH"; amber is the small accent, so it stays on primary buttons only.
   ====================================================================================== */
:root{
  --nx-bg:#022326;--nx-panel:#04383b;--nx-card:#06474b;--nx-line:#1a5c60;--nx-text:#eaf7f6;--nx-muted:#a5c9c8;
  --nxg-aqua:#4ff0ec;--nxg-aqua-2:#15b6c3;--nxg-amber:#fdaa31;
  --nxg-edge:rgba(160,255,250,.18);
}
body{background-color:var(--nx-bg)!important;color:var(--nx-text)}
.bg-dark-bg{background-color:var(--nx-bg)!important}
.bg-radial-glow{background-image:radial-gradient(ellipse at 50% -18%,rgba(21,182,195,.35) 0,transparent 52%),radial-gradient(ellipse at 90% 18%,rgba(253,170,49,.10) 0,transparent 36%)!important}
.nx-aurora i:nth-child(1){background:radial-gradient(circle,rgba(79,240,236,.5),transparent 65%)}
.nx-aurora i:nth-child(2){background:radial-gradient(circle,rgba(253,170,49,.30),transparent 65%)}
.nx-aurora i:nth-child(3){background:radial-gradient(circle,rgba(21,182,195,.45),transparent 65%)}
/* accents that were amber-as-brand become aqua; buttons (.bg-brand-teal) stay amber like the logo's accent */
.text-brand-teal,.text-teal-300,.text-teal-400,.hover\:text-brand-teal:hover{color:var(--nxg-aqua)!important}
.border-brand-teal{border-color:var(--nxg-aqua)!important}
.bg-brand-teal\/10{background-color:rgba(79,240,236,.10)!important}
.border-brand-teal\/20{border-color:rgba(79,240,236,.28)!important}
.bg-brand-teal{background-image:linear-gradient(135deg,#ffc15c,#fdaa31)!important;background-color:#fdaa31!important;color:#241402!important}
#about h1 span{background-image:linear-gradient(95deg,#4ff0ec,#d9fffd)!important;-webkit-background-clip:text;background-clip:text}
.navlink::after{background:var(--nxg-aqua)}
header.sticky .text-brand-teal{color:var(--nxg-aqua)!important}
header.sticky,#mobileMenu{border-color:var(--nxg-edge)!important}
#about,#services,#apps,#why-us,#contact,main>section{border-color:var(--nx-line)!important}
#apps{background-color:rgba(1,22,24,.35)!important}
#contact{background-color:rgba(1,22,24,.5)!important}
footer.bg-black\/80,footer{background-color:rgba(1,22,24,.82)!important}
.nx-cta-bar a.p{background:linear-gradient(135deg,#ffc15c,#fdaa31)}
::selection{background:#4ff0ec;color:#022326}

/* ---------- equipment tabs ---------- */
.nx-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nx-tabs::-webkit-scrollbar{display:none}
.nx-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--nxg-edge);background:var(--nxg-fill);color:#d6ecea;font-size:.85rem;font-weight:600;box-shadow:var(--nxg-hi);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.nx-tabs button:hover{transform:translateY(-1px)}
.nx-tabs button.on{background:linear-gradient(135deg,rgba(79,240,236,.30),rgba(21,182,195,.18));color:#fff;border-color:rgba(79,240,236,.55)}
.nx-pane{display:none}.nx-pane.on{display:block;animation:nxPop .25s ease}
@media(max-width:639.98px){.nx-gallery figcaption{left:8px;right:8px;bottom:8px;padding:6px 9px;font-size:.7rem;border-radius:12px;line-height:1.3}}

/* ---------- product cards (Growatt range) ---------- */
.nx-products{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.nx-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.nx-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nx-product{display:flex;flex-direction:column;overflow:hidden}
.nx-product[hidden]{display:none}
.nx-product-img{aspect-ratio:1/1;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 38%,#ffffff 0,#eef6f6 55%,#dcebec 100%);border-bottom:1px solid var(--nxg-edge)}
.nx-product-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(2,34,38,.22));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.nx-product:hover .nx-product-img img{transform:scale(1.05) translateY(-2px)}
.nx-product-img i{font-size:4rem;color:#15b6c3}
.nx-product-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.nx-spec{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.nx-spec li{font-size:.72rem;color:#cfe8e6;padding:4px 10px;border-radius:999px;border:1px solid var(--nxg-edge);background:rgba(255,255,255,.05)}
.nx-product-cta{margin-top:auto;padding-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.nx-product-cta a{display:inline-flex;align-items:center;gap:8px;padding:.65rem 1.1rem;border-radius:12px;font-weight:700;font-size:.85rem}
.nx-product-cta a.nx-btn-glass{color:#e8f6f5;font-weight:600}

/* ---------- advert card: fixed small slot (never the tall auto-sized unit), invisible until an ad fills it ---------- */
.nx-ad-slot{width:300px;height:250px}
@media(max-width:639.98px){.nx-ad-slot{width:320px;height:50px}#adCard{width:auto!important;max-height:none!important}}
#adCard.nx-ad-pending{opacity:0;pointer-events:none}
#adCard{background:linear-gradient(145deg,rgba(6,56,60,.88),rgba(2,34,38,.85))!important;border-color:var(--nxg-edge)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}