/* ============================================================
   Abhitri Innovations — 2026 rebuild
   Brand: navy #0e4472 (logo) + green #3bbc45 (logo dot)
   Written by _build/build.py's companion stylesheet; self-contained.
   ============================================================ */

:root{
  --navy:#0e4472;
  --navy-700:#0b3459;
  --navy-900:#062038;
  --ink:#05192c;
  --ink-2:#0a2540;
  --green:#3bbc45;
  --green-600:#2ea23a;
  --cyan:#38bdf8;
  --paper:#ffffff;
  --surface:#f2f6fa;
  --surface-2:#e7eef5;
  --line:#dae4ee;
  --text:#0f2537;
  --muted:#5b7186;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(9,38,66,.06);
  --shadow:0 18px 40px -22px rgba(9,38,66,.35);
  --shadow-lg:0 34px 70px -30px rgba(9,38,66,.45);
  --hdr-h:78px;          /* .hdr__bar height — the overlaying header's height */
  --maxw:1220px;
  --gut:clamp(1rem, 3.2vw, 2.5rem);
  --fs-h1:clamp(2.1rem, 1.15rem + 3.5vw, 3.85rem);
  --fs-h2:clamp(1.65rem, 1.05rem + 2.1vw, 2.7rem);
  --fs-h3:clamp(1.12rem, .98rem + .6vw, 1.4rem);
  --fs-body:clamp(.98rem, .94rem + .18vw, 1.06rem);
  --fs-small:clamp(.85rem, .82rem + .12vw, .92rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-body);line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Sora',system-ui,sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.018em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - (var(--gut) * 2), var(--maxw));margin-inline:auto}
.sec{padding:clamp(3.4rem,6vw,6.5rem) 0}
.sec--tight{padding:clamp(2.4rem,4vw,4rem) 0}
.sec--surface{background:var(--surface)}
.sec--ink{background:var(--ink);color:#e6eef6}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}

/* ---------- bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.73rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--green);border-radius:2px}
.eyebrow--light{color:#8fc9f5}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.lead{color:var(--muted);font-size:clamp(1rem,.96rem + .3vw,1.15rem);line-height:1.72}
.sec--ink .lead,.sec--ink .muted{color:#a9c1d6}
.muted{color:var(--muted)}
.sec-head{max-width:56rem;margin-bottom:clamp(2rem,3.5vw,3rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.65rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn svg{width:1rem;height:1rem;flex:none}
.btn--primary{background:var(--navy);color:#fff;box-shadow:0 14px 26px -16px rgba(14,68,114,.9)}
.btn--primary:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn--green{background:var(--green);color:#04210a}
.btn--green:hover{background:var(--green-600);color:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--text);background:#fff}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn--on-dark{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06)}
.btn--on-dark:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--sm{padding:.62rem 1.15rem;font-size:.86rem}

.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:999px;
  background:rgba(59,188,69,.12);color:var(--navy);font-size:.8rem;font-weight:600;
  border:1px solid rgba(59,188,69,.28);
}
.chip--light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#dbeafe}

.fade-in{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- header ----------
   Client request (14 Aug 2026): the header OVERLAYS the hero / page banner and
   is transparent while the page sits at the top; as soon as the visitor
   scrolls it turns into a solid white fixed bar with dark navigation links,
   smoothly transitioning between the two states.
   `script.js` (platform-owned — never edited) already adds `.shadow-md` to
   #siteHeader past 8px of scroll, so that class IS the "scrolled" hook and no
   extra JavaScript is needed. Every page opens on a dark band (.hero on the
   home page, .banner everywhere else), so the light state always has contrast.
   ---------------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;backdrop-filter:none;
  border-bottom:1px solid transparent;box-shadow:none;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.hdr.shadow-md{
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);box-shadow:0 10px 30px -18px rgba(9,38,66,.45);
}
.hdr__bar{display:flex;align-items:center;gap:1.25rem;height:var(--hdr-h)}

/* logo cross-fades: the client's white artwork over the dark band, the colour
   one once the bar goes white. The colour logo stays in flow so the link keeps
   its width; the white one is stacked on top of it. */
.hdr__logo{position:relative;display:inline-flex;align-items:center}
.hdr__logo img{height:42px;width:auto;transition:opacity .35s ease}
.hdr__logo-light{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.hdr__logo-dark{opacity:0}
.hdr.shadow-md .hdr__logo-dark{opacity:1}
.hdr.shadow-md .hdr__logo-light{opacity:0}

.hdr__nav{display:none;margin-left:auto;align-items:center;gap:.35rem}
.hdr__link{
  position:relative;padding:.62rem .85rem;border-radius:10px;font-weight:600;font-size:.93rem;
  color:rgba(255,255,255,.88);
  transition:color .3s ease,background .3s ease;white-space:nowrap;
}
.hdr__link:hover{color:#fff;background:rgba(255,255,255,.14)}
.hdr__link.is-active{color:#fff}
.hdr__link.is-active::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--green);border-radius:2px}
.hdr.shadow-md .hdr__link{color:#274156}
.hdr.shadow-md .hdr__link:hover{color:var(--navy);background:var(--surface)}
.hdr.shadow-md .hdr__link.is-active{color:var(--navy)}
/* the CTA is .btn--primary (navy) — navy on the dark hero would vanish, so it
   reverses to a white outline while the bar is transparent */
.hdr__cta{display:none;margin-left:.5rem}
.hdr .hdr__cta{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.hdr .hdr__cta:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hdr.shadow-md .hdr__cta{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 14px 26px -16px rgba(14,68,114,.9)}
.hdr.shadow-md .hdr__cta:hover{background:var(--navy-700)}
.hdr__call{
  display:none;align-items:center;gap:.6rem;font-size:.88rem;font-weight:600;
  color:#fff;white-space:nowrap;transition:color .3s ease;
}
.hdr__call>svg{width:1.35rem;height:1.35rem;color:var(--green);flex:none}
.hdr__call span span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);transition:color .3s ease}
.hdr.shadow-md .hdr__call{color:var(--navy)}
.hdr.shadow-md .hdr__call span span{color:var(--muted)}
.hdr__burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;
  transition:color .3s ease,background .3s ease,border-color .3s ease;
}
.hdr.shadow-md .hdr__burger{border-color:var(--line);background:#fff;color:var(--navy)}
.hdr__burger svg{width:22px;height:22px}
/* 1024px matches script.js, which force-closes the drawer at that width */
@media (min-width:1024px){
  .hdr__nav{display:flex}
  .hdr__cta{display:inline-flex}
  .hdr__burger{display:none}
}
@media (min-width:1240px){ .hdr__call{display:inline-flex} }

/* script.js builds its own click-catching backdrop with utility class names;
   style it here so the drawer dims the page behind it. */
.backdrop,.fixed.inset-0.z-40{position:fixed;inset:0;background:rgba(5,25,44,.5);z-index:65}
@media (min-width:1024px){ .fixed.inset-0.z-40{display:none} }

/* mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;z-index:70;
  transform:translateX(102%);transition:transform .3s ease;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(5,25,44,.6);
}
.drawer.open{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.drawer__top img{height:34px}
.drawer__close{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.drawer__close svg{width:20px;height:20px}
.drawer__nav{padding:1rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;flex:1}
.drawer__nav a{padding:.85rem 1rem;border-radius:10px;font-weight:600;color:#22384b;border-left:3px solid transparent}
.drawer__nav a:hover{background:var(--surface)}
.drawer__nav a.is-active{color:var(--navy);background:rgba(14,68,114,.06);border-left-color:var(--green)}
.drawer__foot{padding:1.25rem;border-top:1px solid var(--line);display:grid;gap:.6rem}

/* ============================================================
   HERO — layered "revolution" slider
   Stack (bottom → top): base gradient (.hero::before) · drifting aurora blobs ·
   animated mesh · IoT node network (SVG) · light sweep · floating motes ·
   the slides themselves · UI row · autoplay bar · category ticker.
   Every decorative layer is aria-hidden and dies under prefers-reduced-motion.
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 78% 18%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(55% 65% at 12% 88%, rgba(59,188,69,.17), transparent 58%),
    linear-gradient(135deg,#01080f 0%,#04182c 52%,#083254 100%);
}

/* ---- animated backdrop ---- */
.hero__fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__aurora{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.hero__aurora--1{
  width:46vw;height:46vw;min-width:380px;min-height:380px;left:-12vw;top:-14vw;
  background:radial-gradient(circle,rgba(56,189,248,.38),transparent 66%);
  animation:auroraA 26s ease-in-out infinite;
}
.hero__aurora--2{
  width:40vw;height:40vw;min-width:340px;min-height:340px;left:8vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(59,188,69,.30),transparent 66%);
  animation:auroraB 32s ease-in-out infinite;
}
.hero__aurora--3{
  width:52vw;height:52vw;min-width:400px;min-height:400px;right:-16vw;top:-6vw;
  background:radial-gradient(circle,rgba(10,48,80,.62),transparent 68%);
  animation:auroraC 38s ease-in-out infinite;
}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,4vw,0) scale(1.14)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(9vw,-5vw,0) scale(.9)}}
@keyframes auroraC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,6vw,0) scale(1.1)}}

.hero__mesh{
  content:"";position:absolute;inset:-8%;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
  animation:meshDrift 24s linear infinite;
}
@keyframes meshDrift{from{background-position:0 0}to{background-position:56px 56px}}

.hero__net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero__net-links path{
  fill:none;stroke:rgba(125,203,255,.34);stroke-width:1.1;stroke-dasharray:7 11;
  animation:netDash 10s linear infinite;animation-delay:var(--d,0s);
}
@keyframes netDash{to{stroke-dashoffset:-360}}
.hero__net-nodes circle{
  fill:#5fd06a;transform-box:fill-box;transform-origin:center;
  animation:nodePulse 3.6s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes nodePulse{0%,100%{opacity:.2;transform:scale(.65)}50%{opacity:.95;transform:scale(1.4)}}

.hero__sweep{
  position:absolute;top:-10%;bottom:-10%;left:0;width:32vw;
  background:linear-gradient(90deg,transparent,rgba(190,230,255,.07),transparent);
  transform:translateX(-140%) skewX(-14deg);
  animation:heroSweep 12s ease-in-out infinite;
}
@keyframes heroSweep{0%{transform:translateX(-140%) skewX(-14deg)}55%,100%{transform:translateX(420%) skewX(-14deg)}}

.hero__motes i{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(5px * var(--s));height:calc(5px * var(--s));border-radius:50%;
  background:rgba(175,230,255,.85);box-shadow:0 0 12px rgba(120,200,255,.8);
  animation:mote var(--t,9s) ease-in-out infinite alternate;
}
@keyframes mote{from{transform:translate3d(0,0,0);opacity:.2}to{transform:translate3d(20px,-28px,0);opacity:.85}}

/* ---- slides ---- */
/* + var(--hdr-h): the header now floats over this band, so give the copy its
   clearance back (see the header block above). */
.hero__inner{position:relative;z-index:2;padding:calc(clamp(2.8rem,5.5vw,5rem) + var(--hdr-h)) 0 clamp(1.8rem,3.5vw,2.8rem)}
.hero__stage{display:grid}
.hero__slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease}
.hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:940px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__copy{min-width:0}
/* the client asked for a bigger headline and shorter buttons (14 Aug 2026) —
   the hero H1 runs one step above the site-wide --fs-h1 scale. */
.hero__title{font-size:clamp(2.3rem, 1.2rem + 4.15vw, 4.35rem);color:#fff;margin:.55rem 0 1.15rem}
.hero__text{color:#b8cede;max-width:34rem;font-size:clamp(1rem,.95rem + .35vw,1.13rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.85rem}
.hero__actions .btn{padding:.68rem 1.55rem}

/* layer entrance — direction aware */
.hero__slide.is-active .hero__l{animation:revIn .85s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
@keyframes revIn{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
[data-dir="back"] .hero__slide.is-active .hero__l{animation-name:revInBack}
@keyframes revInBack{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}

/* headline reveals word by word out of a mask */
.hero__w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.hero__w>span{display:inline-block;transform:translateY(115%);opacity:0}
.hero__slide.is-active .hero__w>span{
  animation:wordUp .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.16s + var(--i,0) * .07s);
}
@keyframes wordUp{to{transform:none;opacity:1}}

.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.hero__tag{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:999px;
  font-size:.79rem;font-weight:600;color:#cde5f7;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);
}
.hero__tag i{
  width:.42rem;height:.42rem;border-radius:50%;background:var(--green);flex:none;
  animation:dotPulse 2.6s ease-out infinite;animation-delay:calc(var(--i,0) * .35s);
}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(59,188,69,.55)}70%,100%{box-shadow:0 0 0 .6rem rgba(59,188,69,0)}}

/* ---- the animated stage art ----
   Everything hangs off .hero__frame, which is exactly as wide as the product
   cut-out, so the rings, tiles and cards keep the same relationship to the
   device on all three slides no matter how the photos are cropped. */
.hero__art{position:relative;min-height:clamp(330px,38vw,470px);display:flex;align-items:center;justify-content:center}
.hero__frame{position:relative;width:fit-content;max-width:min(470px,84%);margin-inline:auto}
.hero__ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(255,255,255,.16);pointer-events:none;
}
.hero__ring--1{width:min(430px,112%);aspect-ratio:1;animation:ringSpin 34s linear infinite}
.hero__ring--2{width:min(580px,146%);aspect-ratio:1;border-style:solid;border-color:rgba(125,203,255,.14);animation:ringSpin 56s linear infinite reverse}
@keyframes ringSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero__disc{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(500px,124%);aspect-ratio:1;border-radius:50%;filter:blur(4px);pointer-events:none;
  background:radial-gradient(circle,rgba(56,189,248,.28),rgba(59,188,69,.12) 46%,transparent 70%);
  animation:discPulse 6.5s ease-in-out infinite;
}
@keyframes discPulse{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.hero__pedestal{
  position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);
  width:78%;height:34px;border-radius:50%;filter:blur(4px);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);
}
.hero__shot{
  position:relative;z-index:3;width:100%;overflow:hidden;
  filter:drop-shadow(0 34px 55px rgba(0,0,0,.5));
}
.hero__shot img{width:100%;height:auto}
.hero__slide.is-active .hero__shot{animation:artIn 1.1s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes artIn{from{opacity:0;transform:translate3d(0,28px,0) scale(.94)}to{opacity:1;transform:none}}
.hero__slide.is-active .hero__shot img{animation:artFloat 7.5s ease-in-out 1.2s infinite}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.hero__beam{
  position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(150,245,175,.5),transparent) bottom/100% 1px no-repeat,
    linear-gradient(180deg,rgba(59,188,69,0),rgba(126,232,154,.2) 60%,rgba(126,232,154,.03));
  animation:heroBeam 5.6s ease-in-out infinite;
}
@keyframes heroBeam{0%{transform:translateY(-24%);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateY(420%);opacity:0}}

.hero__tile{
  position:absolute;z-index:4;width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  color:#c6ecff;background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.85);
}
.hero__tile svg{width:25px;height:25px}
.hero__tile--1{left:-12%;top:12%}
.hero__tile--2{right:-11%;top:-3%}
.hero__tile--3{left:-9%;bottom:7%}
.hero__slide.is-active .hero__tile--1{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .5s both,floatY 6.6s ease-in-out 1.3s infinite}
.hero__slide.is-active .hero__tile--2{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .62s both,floatY 7.8s ease-in-out 1.5s infinite}
.hero__slide.is-active .hero__tile--3{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .74s both,floatY 8.6s ease-in-out 1.7s infinite}
@keyframes popIn{from{opacity:0;transform:scale(.6) translateY(16px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-17px) rotate(-3.5deg)}}

.hero__pill{
  position:absolute;z-index:4;left:-14%;bottom:24%;
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;
  font-size:.77rem;font-weight:600;color:#e6f4ff;white-space:nowrap;
  background:rgba(6,28,49,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
}
.hero__pill i{width:.45rem;height:.45rem;border-radius:50%;background:var(--green);flex:none;animation:dotPulse 2.4s ease-out infinite}
.hero__stat{
  position:absolute;z-index:4;right:-12%;bottom:-8%;display:grid;gap:.1rem;padding:.8rem 1.15rem;border-radius:16px;
  background:linear-gradient(150deg,var(--green),var(--green-600));color:#04210a;
  box-shadow:0 24px 44px -24px rgba(0,0,0,.95);
}
.hero__stat b{font-family:'Sora',sans-serif;font-size:1.45rem;line-height:1}
.hero__stat span{font-size:.71rem;font-weight:600;letter-spacing:.03em}
.hero__slide.is-active .hero__pill{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .86s both}
.hero__slide.is-active .hero__stat{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .96s both}

/* pointer parallax — abhitri.js writes --px / --py on .hero (−.5 … .5) */
.hero__net,.hero__motes,.hero__art{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hero__net{transform:translate3d(calc(var(--px,0) * -22px),calc(var(--py,0) * -16px),0)}
.hero__motes{position:absolute;inset:0;transform:translate3d(calc(var(--px,0) * 30px),calc(var(--py,0) * 22px),0)}
.hero__art{transform:translate3d(calc(var(--px,0) * 14px),calc(var(--py,0) * 11px),0)}

/* ---- controls ---- */
.hero__ui{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2.4rem);
}
.hero__dots{display:flex;gap:.35rem;flex-wrap:wrap}
.hero__dot{
  display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .6rem;border:0;border-radius:999px;
  background:transparent;color:rgba(255,255,255,.5);cursor:pointer;
  font:700 .74rem/1 'Sora',sans-serif;letter-spacing:.1em;
  transition:color .3s ease;
}
.hero__dot i{display:block;width:1.5rem;height:2px;border-radius:2px;background:rgba(255,255,255,.28);transition:width .4s ease,background .4s ease}
.hero__dot:hover{color:#fff}
.hero__dot.is-active{color:#fff}
.hero__dot.is-active i{width:3.4rem;background:var(--green)}
.hero__arrows{display:flex;align-items:center;gap:.7rem}
.hero__arrow{
  width:46px;height:46px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;
  transition:background .25s ease,color .25s ease,transform .25s ease,border-color .25s ease;
}
.hero__arrow svg{width:19px;height:19px}
.hero__arrow:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
.hero__count{font:700 .82rem/1 'Sora',sans-serif;color:rgba(255,255,255,.55);letter-spacing:.08em}
.hero__count b{color:#fff;font-size:1.02rem}
.hero__count i{margin:0 .22rem;font-style:normal;opacity:.45}

.hero__progress{position:relative;z-index:3;height:2px;background:rgba(255,255,255,.12)}
.hero__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#8ceea3)}

.hero__ticker{position:relative;z-index:3;overflow:hidden;background:rgba(3,15,28,.42);border-top:1px solid rgba(255,255,255,.07)}
.hero__ticker-track{display:flex;width:max-content;animation:heroTicker 38s linear infinite}
.hero__ticker span{
  display:inline-flex;align-items:center;gap:1.6rem;padding:.72rem 0;margin-right:1.6rem;white-space:nowrap;
  font:600 .74rem/1 'Sora',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(196,220,238,.7);
}
.hero__ticker span::after{content:"";width:.36rem;height:.36rem;border-radius:50%;background:var(--green);opacity:.85;flex:none}
@keyframes heroTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero:hover .hero__ticker-track{animation-play-state:paused}

@media (max-width:939px){
  .hero__art{min-height:clamp(300px,62vw,400px)}
  .hero__frame{max-width:min(400px,74%)}
  .hero__tile{width:48px;height:48px;border-radius:14px}
  .hero__tile svg{width:21px;height:21px}
  .hero__tile--1{left:-13%;top:8%}
  .hero__tile--2{right:-12%;top:-2%}
  .hero__tile--3{left:-10%;bottom:6%}
  .hero__pill{left:-10%}
  .hero__stat{right:-9%}
  .hero__stat b{font-size:1.25rem}
  .hero__ui{gap:1rem}
}
@media (max-width:560px){
  .hero__frame{max-width:min(340px,72%)}
  .hero__pill{display:none}
  .hero__ring--2{display:none}
  .hero__stat{padding:.65rem .9rem;border-radius:13px}
  .hero__stat b{font-size:1.1rem}
  .hero__stat span{font-size:.66rem}
  .hero__dot i{width:1.1rem}
  .hero__dot.is-active i{width:2.2rem}
  .hero__arrow{width:42px;height:42px}
}

/* ---- desktop: the hero occupies exactly one screen ----
   Client request (14 Aug 2026): with the header overlaying it, the whole hero
   (badge, headline, text, buttons, tags AND the product shot) has to sit inside
   the first viewport — nothing below the fold on 1366x768 / 1440x900 / 1920x1080.
   The section becomes a flex column: .hero__inner takes the leftover height and
   centres the slide in it, while the controls row, the autoplay bar and the
   ticker keep their natural height. Type and art are then capped in *vh* as well
   as vw — min(…) inside the clamp — so a short laptop screen scales the whole
   composition down instead of pushing it past the fold.
   The art is budgeted by HEIGHT: --hero-ar is the aspect ratio of that slide's
   own banner PNG (they run from 0.79 to 1.35), which turns the height budget
   back into a frame width. Capping .hero__frame — not the image — is what keeps
   the rings, tiles, pill and 10+ card locked to the device exactly as before.
   The img max-height is the fallback for engines without :has(): the shot can
   then letterbox, but it can never grow taller than its budget.
   Tablet and mobile (<940px) keep the natural, stacked flow. */
@media (min-width:940px){
  .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .hero__inner{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--hdr-h) + clamp(.6rem,2vh,1.5rem)) 0 clamp(.5rem,1.6vh,1.15rem);
  }
  .hero__stage{min-height:0}
  .hero__grid{gap:clamp(1.75rem,3.4vw,3.25rem)}
  /* the client found the copy congested (14 Aug 2026) — the gaps below the
     badge, the headline and the paragraph are opened up. There is 160px+ of
     spare height inside .hero__inner at every desktop size, so this costs
     nothing at the fold; _build/hero_fit.py proves it. */
  .hero__title{font-size:clamp(2.05rem,min(3.5vw,5.3vh),4.05rem);margin:.5rem 0 clamp(.95rem,2vh,1.5rem)}
  .hero__text{font-size:clamp(.95rem,1.55vh,1.1rem);line-height:1.68}
  .hero__tags{margin-top:clamp(1.1rem,2.3vh,1.75rem)}
  .hero__actions{margin-top:clamp(1.3rem,2.9vh,2.25rem)}
  .hero__actions .btn{padding:clamp(.55rem,1.15vh,.72rem) 1.5rem}
  .hero__ui{margin-top:clamp(.9rem,2vh,1.6rem)}
  /* the art's height budget — raised on the same request ("the right image is
     looking so small"); the px/% caps move with it so the wide slide 3, which
     is width-bound rather than height-bound, grows too. */
  .hero{--hero-art-h:clamp(230px,58vh,560px)}
  /* padding-bottom reserves the room the pedestal and the 10+ card overhang */
  .hero__art{min-height:0;padding-bottom:clamp(.75rem,3vh,2.2rem)}
  .hero__frame{--hero-ar:1;max-width:min(560px,88%,calc(var(--hero-art-h) * var(--hero-ar)))}
  .hero__frame:has(img[src$="banner1.png"]){--hero-ar:.78}
  .hero__frame:has(img[src$="banner2.png"]){--hero-ar:.81}
  .hero__frame:has(img[src$="banner3.png"]){--hero-ar:1.34}
  .hero__shot img{max-height:var(--hero-art-h);object-fit:contain}
  /* the rings are sized off the frame's WIDTH, so on the wide slide they grew
     taller than the band and got clipped — budget them by height as well */
  .hero__ring--1{width:min(430px,112%,calc(var(--hero-art-h) * .95))}
  .hero__ring--2{width:min(580px,146%,calc(var(--hero-art-h) * 1.12))}
}

@media (prefers-reduced-motion:reduce){
  .hero *,.hero *::before,.hero *::after{animation:none !important;transition:none !important}
  .hero__w>span{transform:none;opacity:1}
  .hero__slide.is-active .hero__l,.hero__slide.is-active .hero__shot,
  .hero__slide.is-active .hero__tile,.hero__slide.is-active .hero__pill,
  .hero__slide.is-active .hero__stat{opacity:1;transform:none}
  .hero__beam,.hero__sweep{display:none}
}

/* page banner (inner pages) */
.banner{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 82% 12%,rgba(56,189,248,.2),transparent 60%),linear-gradient(120deg,#05192c,#0e4472)}
.banner::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 70% at 60% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 60% 40%,#000,transparent 80%);
}
/* + var(--hdr-h): clearance for the overlaying header (see the header block). */
.banner__inner{position:relative;z-index:2;padding:calc(clamp(2.6rem,5vw,4.4rem) + var(--hdr-h)) 0 clamp(2.4rem,4.5vw,3.8rem)}
.banner h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);color:#fff;margin-bottom:.85rem}
.banner p{color:#b8cede;max-width:46rem}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.82rem;color:#8fb0c9;margin-bottom:1.1rem}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* ---------- marquee strip ---------- */
.strip{background:var(--navy);color:#fff}
.strip__row{display:grid;gap:1px;background:rgba(255,255,255,.14);grid-template-columns:1fr}
@media (min-width:600px){.strip__row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.strip__row{grid-template-columns:repeat(4,1fr)}}
.strip__item{background:var(--navy);padding:1.5rem clamp(1rem,2vw,1.8rem);display:flex;gap:.9rem;align-items:flex-start}
.strip__item svg{width:1.6rem;height:1.6rem;color:var(--green);flex:none;margin-top:.15rem}
.strip__item b{display:block;font-family:'Sora',sans-serif;font-size:1rem}
.strip__item span{font-size:.85rem;color:#b6cee2}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.card__media{position:relative;aspect-ratio:4/3;min-height:0;background:var(--surface);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:contain;padding:1rem;transition:transform .5s ease}
.card__media--cover img{object-fit:cover;padding:0}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card__cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green-600)}
.card__title{font-size:1.06rem;font-family:'Sora',sans-serif;font-weight:600;color:var(--navy-900)}
.card__text{font-size:var(--fs-small);color:var(--muted);line-height:1.62}
.card__more{margin-top:auto;padding-top:.85rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.86rem;color:var(--navy)}
.card__more svg{width:.95rem;height:.95rem;transition:transform .25s ease}
.card:hover .card__more svg{transform:translateX(4px)}

/* ---------- "Standard offerings" band (#products) + category tiles ---------- */
.sec--cats{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f7fafd 40%,#eaf1f8 100%);
}
.sec--cats > .wrap{position:relative;z-index:1}
.sec--cats .sec-head{max-width:58rem}
.sec--cats .sec-head .lead{max-width:43rem;margin-inline:auto}
.cats-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
  background:
    radial-gradient(56rem 30rem at 12% -12%, rgba(14,68,114,.13), transparent 62%),
    radial-gradient(44rem 26rem at 94% 6%, rgba(59,188,69,.13), transparent 60%),
    linear-gradient(rgba(14,68,114,.05) 1px, transparent 1px) 0 0/100% 3.6rem,
    linear-gradient(90deg, rgba(14,68,114,.05) 1px, transparent 1px) 0 0/3.6rem 100%;
  -webkit-mask-image:radial-gradient(78% 66% at 50% 34%, #000 38%, transparent 100%);
  mask-image:radial-gradient(78% 66% at 50% 34%, #000 38%, transparent 100%);
}

/* 4 + 3 mosaic so the seven tiles never leave a ragged row */
.catgrid{display:grid;gap:clamp(.85rem,1.5vw,1.4rem);grid-template-columns:1fr}
@media (min-width:640px){
  .catgrid{grid-template-columns:repeat(2,1fr)}
  /* the odd seventh tile runs full width — give it height so the crop stays natural */
  .catgrid > .cat:last-child{grid-column:span 2;min-height:clamp(270px,34vw,340px)}
}
@media (min-width:1024px){
  .catgrid{grid-template-columns:repeat(12,1fr)}
  .catgrid > .cat{grid-column:span 3}
  .catgrid > .cat:nth-child(n+5),
  .catgrid > .cat:last-child{grid-column:span 4;min-height:330px}
}

.cat{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(240px,25vw,300px);
  border-radius:20px;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 34px -24px rgba(6,32,56,.55);
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .45s ease;
}
.cat img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:.92;transform:scale(1.02);filter:saturate(1.07) contrast(1.04);
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.cat::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,20,36,.34),rgba(4,20,36,0) 38%)}
.cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,20,36,0) 28%,rgba(4,20,36,.7) 66%,rgba(3,15,28,.95) 100%)}
.cat__fx{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-125%);transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.cat__num{
  position:absolute;z-index:3;top:1.05rem;left:1.3rem;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Sora',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.2em;
  color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(3,15,28,.5);
}
.cat__num::after{content:"";width:1.4rem;height:1px;background:var(--green)}
.cat__label{
  position:relative;z-index:3;width:100%;gap:.9rem;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem 1.3rem;
}
.cat__label::before{
  content:"";position:absolute;left:1.3rem;right:1.3rem;top:0;height:2px;
  background:linear-gradient(90deg,var(--green),rgba(59,188,69,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.cat__label b{
  font-family:'Sora',sans-serif;font-weight:600;line-height:1.28;letter-spacing:-.005em;
  font-size:clamp(.98rem,.93rem + .22vw,1.14rem);
}
.cat__go{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2.35rem;height:2.35rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.cat__go svg{width:1rem;height:1rem;color:#fff;transition:transform .35s ease}
.cat:hover{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(6,32,56,.6);border-color:rgba(59,188,69,.5)}
.cat:hover img{transform:scale(1.09);opacity:1}
.cat:hover .cat__fx{transform:translateX(125%)}
.cat:hover .cat__label::before{transform:scaleX(1)}
.cat:hover .cat__go{background:var(--green);border-color:var(--green);transform:translateX(3px)}
.cat:hover .cat__go svg{transform:translateX(1px)}
.cat:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cat,.cat img,.cat__fx,.cat__go,.cat__label::before{transition:none}
}

/* solution rows */
.sol{display:grid;gap:clamp(1.4rem,3vw,3rem);align-items:center}
@media (min-width:900px){.sol{grid-template-columns:1fr 1fr}.sol--flip .sol__media{order:2}}
.sol__media{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;min-height:0;
  border:1px solid var(--line);background:linear-gradient(160deg,#f7fafd,#e8f0f7);
}
.sol__media img{width:100%;height:100%;object-fit:contain;padding:clamp(.8rem,2vw,1.8rem)}
.sol__num{position:absolute;z-index:2;top:1rem;left:1rem;background:var(--navy);color:#fff;border-radius:10px;padding:.35rem .7rem;font-family:'Sora',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.06em}

/* about / split */
.split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;min-height:0}
.split__media img{width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;z-index:3;right:clamp(-.5rem,-1vw,0rem);bottom:1.2rem;
  background:var(--green);color:#04210a;border-radius:14px;padding:1rem 1.3rem;box-shadow:var(--shadow);
}
.badge b{display:block;font-family:'Sora',sans-serif;font-size:2rem;line-height:1}
.badge span{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.ticks{display:grid;gap:.7rem;margin-top:1.5rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
.ticks svg{width:1.15rem;height:1.15rem;color:var(--green);flex:none;margin-top:.28rem}

/* ---------- home "Welcome to Abhitri / Who we are ?" band ----------
   Its own namespace (.sec--who / .who__*) on purpose: plain .split and
   .badge are still used by about.html and contact.html and must not move. */
.sec--who{
  position:relative;overflow:hidden;
  padding:clamp(4rem,7vw,7.5rem) 0;
  background:linear-gradient(180deg,#eaf1f8 0%,#f4f8fc 44%,#ffffff 100%);
}
.sec--who > .wrap{position:relative;z-index:1}
.who-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
  background:
    radial-gradient(46rem 28rem at 92% 4%, rgba(59,188,69,.15), transparent 62%),
    radial-gradient(52rem 32rem at -10% 66%, rgba(14,68,114,.15), transparent 60%);
  /* fade out before the section edge, or the glow leaves a flat seam on the
     white band below */
  -webkit-mask-image:linear-gradient(180deg,#000 0 72%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 0 72%,transparent 97%);
}
.split--who{gap:clamp(2.6rem,5vw,4.6rem)}
/* two columns, and the picture grows to the height of the copy beside it —
   otherwise the 4/3 frame leaves a tall empty gap under the photo. The cap
   lives on .who__stage so the 10+ badge stays pinned to the photo, not to
   the (taller) column. */
@media (min-width:900px){
  .split--who{grid-template-columns:.94fr 1.06fr;align-items:stretch}
  .who__art{display:flex;flex-direction:column;justify-content:center}
  .who__stage{flex:1 1 auto;display:flex;max-height:620px}
  .who__frame{flex:1 1 auto;aspect-ratio:auto;min-height:0}
}

/* --- picture side --- */
.who__art{position:relative;isolation:isolate}
.who__stage{position:relative;z-index:1}
.who__deco{
  position:absolute;z-index:0;left:-1.5rem;bottom:-1.5rem;
  width:min(60%,15rem);height:min(48%,12rem);border-radius:20px;
  background-image:radial-gradient(rgba(14,68,114,.3) 1.6px, transparent 1.6px);
  background-size:14px 14px;opacity:.5;
}
.who__frame{
  position:relative;z-index:1;border-radius:24px;overflow:hidden;
  aspect-ratio:4/3.15;min-height:0;background:var(--ink-2);
  box-shadow:0 40px 80px -34px rgba(6,32,56,.6);
}
.who__frame img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.who__art:hover .who__frame img{transform:scale(1.07)}
.who__sheen{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  background:
    linear-gradient(200deg, rgba(255,255,255,.2), transparent 44%),
    linear-gradient(0deg, rgba(6,32,56,.32), transparent 55%);
}
.who__badge{
  position:absolute;z-index:3;right:1rem;bottom:clamp(1.1rem,3vw,2.1rem);
  display:grid;gap:.2rem;padding:1.05rem 1.5rem 1.1rem;border-radius:18px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 46px -22px rgba(6,32,56,.8);
}
.who__badge::before{
  content:"";position:absolute;left:1.5rem;top:0;width:2.6rem;height:3px;
  border-radius:0 0 3px 3px;background:var(--green);
}
.who__badge b{
  font-family:'Sora',sans-serif;font-weight:700;color:#fff;letter-spacing:-.02em;
  font-size:clamp(2.05rem,1.4rem + 1.5vw,2.85rem);line-height:1;
}
.who__badge span{
  font-size:.72rem;font-weight:600;color:#9fc6e6;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.35;
}
@media (min-width:900px){.who__badge{right:-1.4rem}}

/* --- copy side --- */
.who__title::after{
  content:"";display:block;width:3.6rem;height:4px;border-radius:4px;margin-top:1.05rem;
  background:linear-gradient(90deg,var(--green),rgba(59,188,69,0));
}
.who__lead{
  margin-top:1.3rem;padding-left:1.1rem;color:#27485f;
  border-left:2px solid rgba(59,188,69,.45);
  font-size:clamp(1.01rem,.97rem + .34vw,1.18rem);line-height:1.76;
}
.who__p{margin-top:1rem}
.ticks--cards{gap:.75rem;margin-top:1.7rem}
@media (min-width:560px){.ticks--cards{grid-template-columns:repeat(2,1fr)}}
.ticks--cards li{
  align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:14px;
  background:rgba(255,255,255,.88);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;color:var(--navy-900);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.ticks--cards li:hover{
  transform:translateY(-3px);border-color:rgba(59,188,69,.55);
  box-shadow:0 18px 30px -20px rgba(9,38,66,.5);
}
.tick__ic{
  flex:none;display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;
  border-radius:50%;background:rgba(59,188,69,.14);border:1px solid rgba(59,188,69,.32);
}
.ticks--cards .tick__ic svg{width:1.05rem;height:1.05rem;margin-top:0;color:var(--green-600)}
.who__cta{margin-top:1.9rem}
@media (prefers-reduced-motion:reduce){
  .who__frame img,.ticks--cards li{transition:none}
  .who__art:hover .who__frame img{transform:scale(1.02)}
}

/* ---------- home "Featured hardware" showcase band ----------
   Client request (14 Aug 2026): rebuild the band, make it premium, add animated
   objects. Its own .sec--feat / .fgrid / .fcard / .feat-* namespace on purpose —
   plain .card and .grid--3 still build every product, solution and blog grid on
   the other 29 pages and must not move with it.
   The band is dark and ENDS on var(--ink), so it runs seamlessly into the TATA
   case-study band (.sec--ink) directly below: showcase + case study read as one
   dark chapter between the white "Who we are" band above and the white solutions
   band below. Everything that moves is CSS-only (no JS was added) and is switched
   off under prefers-reduced-motion at the end of this block. */
.sec--feat{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.8rem,6.5vw,6.8rem) 0 clamp(4rem,7vw,7.2rem);
  background:linear-gradient(180deg,#0c2c4b 0%,#08243d 42%,#05192c 100%);
  color:#b9d1e4;
}
/* a lit hairline makes the white-to-dark edge above read as deliberate */
.sec--feat::before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(59,188,69,0),rgba(59,188,69,.55) 22%,rgba(56,189,248,.45) 58%,rgba(59,188,69,0));
}
.sec--feat > .wrap{position:relative;z-index:1}
.sec--feat .h2{color:#fff}
.sec--feat .sec-head{margin-bottom:clamp(2.2rem,3.8vw,3.4rem)}

/* --- animated backdrop --- */
.feat-bg{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;overflow:hidden}
.feat-bg > *{position:absolute;display:block}
.feat-bg__grid{
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 4.2rem,
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/4.2rem 100%;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 42%,#000 20%,transparent 100%);
  mask-image:radial-gradient(78% 72% at 50% 42%,#000 20%,transparent 100%);
  animation:feat-grid 26s linear infinite;
}
@keyframes feat-grid{to{background-position:0 4.2rem,4.2rem 0}}
.feat-bg__dots{
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.2px,transparent 1.6px);
  background-size:56px 56px;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
  animation:feat-drift 34s linear infinite;
}
@keyframes feat-drift{to{background-position:-56px -112px}}
.feat-bg__glow{border-radius:50%;filter:blur(70px)}
.feat-bg__glow--a{
  width:min(42rem,92vw);height:26rem;left:-10rem;top:-7rem;
  background:rgba(21,101,168,.55);opacity:.5;
  animation:feat-float-a 20s ease-in-out infinite;
}
.feat-bg__glow--b{
  width:min(36rem,84vw);height:24rem;right:-9rem;bottom:-8rem;
  background:rgba(59,188,69,.3);opacity:.45;
  animation:feat-float-b 26s ease-in-out infinite;
}
@keyframes feat-float-a{50%{transform:translate3d(5rem,3rem,0) scale(1.12)}}
@keyframes feat-float-b{50%{transform:translate3d(-4.5rem,-2.5rem,0) scale(1.1)}}
/* circuit rails with a light travelling along them */
.feat-bg__line{
  left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14) 18%,rgba(255,255,255,.14) 82%,rgba(255,255,255,0));
}
.feat-bg__line--1{top:21%}
.feat-bg__line--2{top:77%}
.feat-bg__line::after{
  content:"";position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 14px 4px rgba(59,188,69,.55);
  animation:feat-travel 11s linear infinite;
}
.feat-bg__line--2::after{
  background:var(--cyan);box-shadow:0 0 14px 4px rgba(56,189,248,.5);
  animation-duration:15s;animation-delay:-6s;
}
@keyframes feat-travel{0%{left:-2%;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:102%;opacity:0}}
/* floating outline objects */
.feat-orb{border-radius:50%;border:1px dashed rgba(255,255,255,.16)}
.feat-orb--1{width:clamp(9rem,16vw,17rem);aspect-ratio:1;left:3%;bottom:5%;border-color:rgba(59,188,69,.24);animation:feat-spin 46s linear infinite}
.feat-orb--2{width:clamp(6rem,10vw,11rem);aspect-ratio:1;right:5%;top:11%;border-style:solid;border-color:rgba(56,189,248,.22);animation:feat-bob 9s ease-in-out infinite}
.feat-orb--3{width:clamp(5rem,8vw,8.5rem);aspect-ratio:1;border-radius:26%;right:15%;bottom:13%;border-color:rgba(255,255,255,.14);animation:feat-spin 34s linear infinite reverse}
@keyframes feat-spin{to{transform:rotate(360deg)}}
@keyframes feat-bob{50%{transform:translateY(-1.6rem)}}

/* --- the three showcase cards --- */
.fgrid{display:grid;gap:clamp(1rem,1.9vw,1.6rem);grid-template-columns:1fr}
@media (min-width:660px) and (max-width:999.98px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  /* FEATURED holds three products, so the odd third card goes full width and
     turns side-on rather than leaving a half-empty row */
  .fgrid > .fcard:last-child{
    grid-column:span 2;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows:auto;align-items:center;
  }
  .fgrid > .fcard:last-child .fcard__stage{margin:.85rem 0 .85rem .85rem}
}
@media (min-width:1000px){.fgrid{grid-template-columns:repeat(3,1fr)}}

.fcard{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  border-radius:22px;
  background:linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.035) 55%,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -34px rgba(2,12,24,.95);
  transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .45s ease,box-shadow .55s ease;
}
.fcard::before{
  content:"";position:absolute;z-index:0;left:-25%;bottom:-45%;width:150%;height:75%;
  background:radial-gradient(closest-side,rgba(59,188,69,.3),transparent);
  opacity:0;transition:opacity .55s ease;pointer-events:none;
}
.fcard:hover{transform:translateY(-9px);border-color:rgba(59,188,69,.45);box-shadow:0 44px 74px -34px rgba(2,12,24,1)}
.fcard:hover::before{opacity:1}
.fcard:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* the lit stage the product stands on — the photos have white backgrounds, so
   they need a light plate even inside a dark card */
.fcard__stage{
  position:relative;z-index:1;margin:.85rem .85rem 0;border-radius:16px;overflow:hidden;
  aspect-ratio:4/3;min-height:0;
  background:radial-gradient(72% 68% at 50% 38%,#ffffff 0%,#eef4fa 52%,#dae6f2 100%);
  box-shadow:inset 0 0 0 1px rgba(14,68,114,.1);
}
.fcard__stage img{
  position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;
  padding:1.15rem;transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.fcard:hover .fcard__stage img{transform:scale(1.06) translateY(-4px)}
.fcard__ring{
  position:absolute;z-index:1;left:50%;top:50%;width:72%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);border:1px dashed rgba(14,68,114,.22);
  animation:feat-orbit 24s linear infinite;
}
.fcard__ring--2{
  width:96%;border-style:solid;border-color:rgba(59,188,69,.34);
  border-right-color:transparent;border-bottom-color:transparent;
  animation-duration:15s;animation-direction:reverse;
}
@keyframes feat-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.fcard__scan{
  position:absolute;z-index:3;left:5%;right:5%;top:-38%;height:32%;pointer-events:none;
  background:linear-gradient(180deg,rgba(59,188,69,0),rgba(59,188,69,.14) 44%,rgba(255,255,255,.55) 54%,rgba(56,189,248,.12) 64%,rgba(59,188,69,0));
  filter:blur(1px);
  animation:feat-scan 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 1.5s);
}
@keyframes feat-scan{0%{transform:translateY(0);opacity:0}10%{opacity:.95}75%{opacity:.8}100%{transform:translateY(430%);opacity:0}}
.fcard__glare{
  position:absolute;z-index:4;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.75) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.fcard:hover .fcard__glare{transform:translateX(130%)}
.fcard__num{
  position:absolute;z-index:5;top:1.5rem;left:1.55rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Sora',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  color:var(--navy);
}
.fcard__num::after{content:"";width:1.5rem;height:2px;border-radius:2px;background:var(--green)}

.fcard__body{position:relative;z-index:1;padding:1.3rem 1.4rem 1.55rem;display:flex;flex-direction:column;gap:.5rem}
.fcard__cat{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#5fd06a}
.fcard__title{font-family:'Sora',sans-serif;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff;font-size:clamp(1.02rem,.97rem + .25vw,1.2rem)}
.fcard__text{font-size:var(--fs-small);line-height:1.68;color:#a2bdd4}
.fcard__more{margin-top:auto;padding-top:1.05rem;display:inline-flex;align-items:center;gap:.7rem;font-weight:600;font-size:.88rem;color:#fff}
.fcard__go{
  display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  transition:background .35s ease,border-color .35s ease,transform .35s ease,color .35s ease;
}
.fcard__go svg{width:.95rem;height:.95rem;transition:transform .35s ease}
.fcard:hover .fcard__go{background:var(--green);border-color:var(--green);color:#04210a;transform:translateX(3px)}
.fcard:hover .fcard__go svg{transform:translateX(1px)}

.feat__cta{margin-top:clamp(2rem,3.4vw,3rem);display:flex;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .feat-bg__grid,.feat-bg__dots,.feat-bg__glow,.feat-bg__line::after,
  .feat-orb,.fcard__ring,.fcard__scan{animation:none}
  .fcard__scan{opacity:0}
  .fcard,.fcard__stage img,.fcard__glare,.fcard__go{transition:none}
  .fcard:hover{transform:none}
}

/* ---------- home "Abhitri Innovations LLP x TATA STEEL" case-study band ----------
   Client request (14 Aug 2026): change the background colour and adjust the
   section more nicely. It has its own .sec--case / .case-* namespace on purpose —
   .sec--ink still paints the "Have any Questions?" CTA band at the foot of all 30
   pages and must not move with it, and the bare .case__video frame is reused by
   gallery.html on a WHITE band, so only the dressing is scoped to .sec--case.
   The band still OPENS on var(--ink), so the .sec--feat showcase above runs into
   it seamlessly, then lifts to brand navy: the dark chapter now steps
   near-black -> navy -> the white solutions band below instead of reading as one
   flat slab, and a lit hairline makes that bottom edge deliberate (the same trick
   .sec--feat::before plays on the edge above). The two installation photos moved
   from under the copy into the media column: with all the weight on the left the
   video floated in the middle of a half-empty right column. Motion is CSS-only
   and is switched off under prefers-reduced-motion at the end of this block. */
.sec--case{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.6rem,6vw,6.4rem) 0 clamp(3.8rem,6.5vw,6.8rem);
  background:linear-gradient(180deg,var(--ink) 0%,#0a3159 30%,#11507c 68%,#0d4270 100%);
  color:#cfe1f0;
}
.sec--case::after{
  content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(59,188,69,0),rgba(59,188,69,.5) 25%,rgba(56,189,248,.42) 60%,rgba(59,188,69,0));
}
.sec--case > .wrap{position:relative;z-index:1}
.sec--case .h2{color:#fff}
.sec--case .lead{color:#c2d9ec}

/* --- animated backdrop --- */
.case-bg{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;overflow:hidden}
.case-bg > *{position:absolute;display:block}
.case-bg__grid{
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/100% 5rem,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/5rem 100%;
  -webkit-mask-image:radial-gradient(82% 78% at 72% 42%,#000 10%,transparent 100%);
  mask-image:radial-gradient(82% 78% at 72% 42%,#000 10%,transparent 100%);
  animation:case-grid 30s linear infinite;
}
@keyframes case-grid{to{background-position:0 5rem,5rem 0}}
.case-bg__glow{border-radius:50%;filter:blur(80px)}
.case-bg__glow--a{
  /* kept clear of the top edge: a green glow bleeding into the var(--ink) seam
     turns the join with the showcase band above olive */
  width:min(40rem,90vw);height:24rem;left:-9rem;top:22%;
  background:rgba(59,188,69,.24);opacity:.55;
  animation:case-float-a 24s ease-in-out infinite;
}
.case-bg__glow--b{
  width:min(34rem,82vw);height:22rem;right:-8rem;bottom:-7rem;
  background:rgba(56,189,248,.26);opacity:.5;
  animation:case-float-b 30s ease-in-out infinite;
}
@keyframes case-float-a{50%{transform:translate3d(4rem,2.5rem,0) scale(1.1)}}
@keyframes case-float-b{50%{transform:translate3d(-4rem,-2rem,0) scale(1.08)}}
.case-bg__ring{
  width:clamp(11rem,20vw,20rem);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(255,255,255,.15);left:-4.5rem;bottom:-5rem;
  animation:case-spin 52s linear infinite;
}
@keyframes case-spin{to{transform:rotate(360deg)}}

/* --- the two columns --- */
.case{display:grid;gap:clamp(1.8rem,3.6vw,3.2rem);align-items:center}
@media (min-width:950px){.case{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.case__copy{min-width:0}
.case__title{margin:1rem 0 1.25rem}
.case__x{color:var(--green)}
.case__copy .lead + .lead{margin-top:1.05rem}
.sec--case .case__lead{
  color:#e0edf8;padding-left:1.15rem;
  border-left:2px solid rgba(59,188,69,.6);
}
.case__more{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.75rem;
  padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.3);
  font-weight:600;font-size:.93rem;color:#fff;
  transition:color .3s ease,border-color .3s ease;
}
.case__more svg{width:.95rem;height:.95rem;transition:transform .35s ease}
.case__more:hover{color:#8fe09a;border-color:var(--green)}
.case__more:hover svg{transform:translateX(4px)}

/* --- the media stack: video + the two installation photos --- */
.case__media{display:grid;gap:.95rem;min-width:0}
/* once the two columns stack, a full-width 4:3 video swallows the tablet screen */
@media (max-width:949.98px){.case__media{width:100%;max-width:34rem;margin-inline:auto}}
.case__video{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#000}
.case__video video{width:100%;height:auto;display:block}
.sec--case .case__video{
  margin:0;border-radius:20px;background:#04121f;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 42px 82px -34px rgba(2,10,22,.95);
}
.sec--case .case__video::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(152deg,rgba(255,255,255,.13),rgba(255,255,255,0) 44%);
}
.case__cap{
  position:relative;z-index:1;display:flex;align-items:center;gap:.65rem;
  padding:.8rem 1.05rem;font-size:.79rem;line-height:1.4;color:#bcd6ea;
  background:rgba(4,18,31,.92);border-top:1px solid rgba(255,255,255,.1);
}
.case__dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;
  background:var(--green);box-shadow:0 0 0 4px rgba(59,188,69,.18);
}
.case__shots{display:grid;grid-template-columns:1fr 1fr;gap:.95rem;margin-top:.9rem}
.case__shots img{border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover;width:100%}
.sec--case .case__shots{margin-top:0}
.sec--case .case__shots img{
  border-radius:14px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 48px -30px rgba(2,10,22,.9);
  transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .45s ease;
}
.sec--case .case__shots img:hover{transform:translateY(-5px);border-color:rgba(59,188,69,.45)}

@media (prefers-reduced-motion:reduce){
  .case-bg__grid,.case-bg__glow,.case-bg__ring{animation:none}
  .sec--case .case__shots img,.case__more,.case__more svg{transition:none}
  .sec--case .case__shots img:hover{transform:none}
}

/* testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.6rem 1.6rem;position:relative;height:100%;display:flex;flex-direction:column;gap:1rem}
.quote::before{content:"\201C";position:absolute;top:.4rem;right:1.2rem;font-family:'Sora',serif;font-size:4.5rem;line-height:1;color:rgba(14,68,114,.1)}
.quote p{color:#2c4256;font-size:.98rem;line-height:1.7}
.quote footer{margin-top:auto;display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--line);padding-top:1rem}
.quote__av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:700;flex:none}
.quote b{display:block;font-size:.95rem;color:var(--navy-900)}
.quote span{font-size:.82rem;color:var(--muted)}

/* clients */
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (min-width:760px){.clients{grid-template-columns:repeat(4,1fr)}}
.clients div{background:#fff;display:grid;place-items:center;padding:1.6rem 1.2rem;min-height:120px}
.clients img{max-height:66px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .3s ease,opacity .3s ease}
.clients div:hover img{filter:none;opacity:1}

/* team */
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.person__ph{aspect-ratio:1;min-height:0;background:var(--surface-2);position:relative}
.person__ph img{width:100%;height:100%;object-fit:cover}
.person__ini{width:100%;height:100%;display:grid;place-items:center;font-family:'Sora',sans-serif;font-size:2rem;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--navy),var(--navy-900))}
.person__body{padding:1rem .9rem 1.2rem}
.person__body b{display:block;font-family:'Sora',sans-serif;font-size:.98rem;color:var(--navy-900)}
.person__body span{font-size:.8rem;color:var(--muted)}

/* gallery */
.gal{columns:1;column-gap:clamp(.9rem,1.6vw,1.3rem)}
@media (min-width:560px){.gal{columns:2}}
@media (min-width:960px){.gal{columns:3}}
.gal figure{break-inside:avoid;margin:0 0 clamp(.9rem,1.6vw,1.3rem);border-radius:var(--radius);overflow:hidden;position:relative;background:var(--surface);border:1px solid var(--line)}
.gal img{width:100%;height:auto;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.4rem 1rem .9rem;color:#fff;font-size:.85rem;
  background:linear-gradient(180deg,transparent,rgba(5,25,44,.88));opacity:0;transition:opacity .3s ease;
}
.gal figure:hover figcaption{opacity:1}

/* ============================================================
   PRODUCT / SOLUTION DETAIL — premium layout (client request, 15 Aug 2026)
   Own `.pdx-*` namespace: `.card`, `.grid--3`, `.chip`, `.block` and `.sec-head`
   are shared with services.html, so only the detail-page dressing lives here.
   Shape: dark product hero (photo on a lit stage) → sticky section index →
   white spec panels on a tinted band beside a sticky enquiry rail → related
   items → the shared `.sec--ink` CTA. The hero keeps the `.banner` shell
   because the overlaying transparent header needs a dark first band.
   ============================================================ */
.pdx-hero__fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.pdx-hero__fx i{position:absolute;border-radius:50%;filter:blur(62px);opacity:.55}
.pdx-hero__fx i:nth-child(1){width:26rem;height:26rem;right:-7rem;top:-9rem;background:rgba(59,188,69,.24);animation:pdxDrift 19s ease-in-out infinite}
.pdx-hero__fx i:nth-child(2){width:22rem;height:22rem;left:-8rem;bottom:-10rem;background:rgba(56,189,248,.22);animation:pdxDrift 25s ease-in-out infinite reverse}
.pdx-hero__fx i:nth-child(3){width:15rem;height:15rem;left:46%;top:52%;background:rgba(14,68,114,.5);animation:pdxDrift 31s ease-in-out infinite}
@keyframes pdxDrift{0%,100%{transform:none}50%{transform:translate3d(2.4rem,-1.7rem,0) scale(1.09)}}

.pdx-hero .banner__inner{padding-bottom:clamp(3rem,5.5vw,4.8rem)}
.pdx-hero__grid{display:grid;gap:clamp(1.9rem,4vw,3.4rem);align-items:center}
@media (min-width:940px){.pdx-hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
.pdx-hero__copy .chip{margin-bottom:1.05rem}
.pdx-hero h1{margin-bottom:1rem}
.pdx-hero__lead{color:#bcd3e6;max-width:34rem;line-height:1.72}
.pdx-spec{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.pdx-spec li{
  flex:0 1 auto;min-width:8.5rem;padding:.6rem .95rem;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
}
.pdx-spec span{display:block;font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8fc9f5}
.pdx-spec b{font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;color:#fff}
.pdx-hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.pdx-hero__cta .btn svg{width:1.05rem;height:1.05rem}

/* the photo sits on a lit stage — the product shots have white backgrounds, so
   `.pd__hero` stays a light plate inside the dark band */
.pdx-stage{position:relative;display:grid;place-items:center;padding:clamp(1.1rem,3vw,2.4rem)}
.pdx-stage::before{
  content:"";position:absolute;width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(59,188,69,.3),transparent 62%);filter:blur(26px);
}
/* both rings have to out-measure the plate below, or they never show */
.pdx-stage__ring{position:absolute;width:min(100%,29rem);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,255,255,.17);animation:pdxSpin 36s linear infinite}
.pdx-stage__ring--2{width:min(112%,33rem);border-style:solid;border-color:rgba(59,188,69,.26);animation-duration:26s;animation-direction:reverse}
@keyframes pdxSpin{to{transform:rotate(360deg)}}
/* a square plate, not the 4/3 one the old layout used: most of the client's
   product cut-outs are portrait and were left tiny inside a landscape box */
.pdx-stage .pd__hero{
  position:relative;z-index:2;width:min(100%,25rem);aspect-ratio:1;padding:clamp(1rem,2.4vw,1.6rem);
  border-color:rgba(255,255,255,.55);box-shadow:0 44px 80px -34px rgba(0,0,0,.85);
}
.pdx-stage__scan{
  position:absolute;z-index:3;left:13%;right:13%;top:14%;height:3px;border-radius:3px;filter:blur(1px);
  background:linear-gradient(90deg,transparent,rgba(59,188,69,.55),transparent);
  animation:pdxScan 6s ease-in-out infinite;
}
@keyframes pdxScan{0%{top:14%;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:82%;opacity:0}}
.pdx-hero__art .pd__thumbs{justify-content:center;margin-top:1.3rem}
.pdx-hero__art .pd__thumbs img{border-color:rgba(255,255,255,.3)}
.pdx-hero__art .pd__thumbs img:hover,.pdx-hero__art .pd__thumbs img.is-active{border-color:var(--green)}

/* section index — plain anchors (not `.chip`), so the browser's own smooth
   scroll runs and `scroll-margin-top` can clear this bar as well as the header */
.pdx-jump{
  position:sticky;top:calc(var(--hdr-h) - 1px);z-index:40;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
/* narrow screens scroll the index sideways, so fade the cut edge */
.pdx-jump::after{content:"";position:absolute;inset:0 0 0 auto;width:2.6rem;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
.pdx-jump__row{display:flex;align-items:center;gap:.5rem;padding:.8rem 0;overflow-x:auto;scrollbar-width:none}
.pdx-jump__row::-webkit-scrollbar{display:none}
@media (min-width:1000px){
  .pdx-jump__row{flex-wrap:wrap;overflow:visible}
  .pdx-jump::after{display:none}
}
.pdx-jump__lbl{flex:none;padding-right:.35rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pdx-jump__a{
  flex:none;white-space:nowrap;padding:.42rem .9rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:#33495c;font-size:.82rem;font-weight:600;
  transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.pdx-jump__a:hover{border-color:rgba(59,188,69,.55);color:var(--navy);background:rgba(59,188,69,.08)}

/* body: spec panels beside the sticky rail. No `overflow` on the band — that
   would kill the rail's `position:sticky`; the fx layer is inset instead. */
.pdx-body{position:relative;background:var(--surface)}
.pdx-body__fx{
  position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(14,68,114,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(14,68,114,.055) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(78% 62% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(78% 62% at 50% 0%,#000,transparent 78%);
}
.pdx-body>.wrap{position:relative;z-index:1}
.pdx-grid{display:grid;gap:clamp(1.2rem,2.6vw,2.4rem);align-items:start}
@media (min-width:1000px){.pdx-grid{grid-template-columns:minmax(0,1fr) minmax(0,20.5rem)}}
.pdx-main{display:grid;gap:clamp(1rem,2.2vw,1.7rem);min-width:0}

.pdx-block{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.25rem,2.6vw,2.1rem);box-shadow:var(--shadow-sm);
  scroll-margin-top:24px;      /* adds to html{scroll-padding-top} (header + 12) */
}
/* the index bar wraps to two rows on long pages, so allow for both rows */
.pdx-jump ~ main .pdx-block{scroll-margin-top:100px}
.pdx-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green),rgba(59,188,69,0))}
.pdx-block__hd{display:flex;align-items:center;gap:.85rem;margin-bottom:1.3rem;padding-bottom:.95rem;border-bottom:1px solid var(--surface-2)}
.pdx-block__n{
  flex:none;padding:.3rem .55rem;border-radius:9px;font-family:'Sora',sans-serif;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--green-600);
  background:rgba(59,188,69,.1);border:1px solid rgba(59,188,69,.26);
}
.pdx-block__t{font-size:clamp(1.06rem,.97rem + .5vw,1.32rem);color:var(--navy-900)}
.pdx-block__bd>*+*{margin-top:1.15rem}
.pdx-block__bd p{color:#33495c}
.pdx-block__bd h3{font-size:1rem;color:var(--navy-900)}

/* one card per spec row instead of the hairline table: a two-column table
   leaves the odd last cell empty, and an empty cell shows the container's
   hairline background as a grey block */
.pdx-block .speclist{background:transparent;border:0;border-radius:0;overflow:visible;gap:.6rem}
.pdx-block .speclist div{border:1px solid var(--line);border-radius:12px;transition:border-color .2s ease,background .2s ease}
.pdx-block .speclist div:hover{background:#f8fbff;border-color:rgba(59,188,69,.4)}
@media (min-width:760px){.pdx-block .speclist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pdx-block .featlist li{
  gap:.8rem;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbfe);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.pdx-block .featlist li:hover{transform:translateY(-2px);border-color:rgba(59,188,69,.45);box-shadow:var(--shadow-sm)}
.pdx-block .featlist svg{width:1.65rem;height:1.65rem;padding:.36rem;border-radius:50%;background:rgba(59,188,69,.12);color:var(--green-600);margin-top:0}
.pdx-block .pair{position:relative;overflow:hidden;border-radius:16px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.pdx-block .pair::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .38s ease;
}
.pdx-block .pair:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--shadow)}
.pdx-block .pair:hover::before{transform:none}

/* enquiry rail */
.pdx-rail{display:grid;gap:1rem;min-width:0}
@media (min-width:1000px){
  .pdx-rail{position:sticky;top:calc(var(--hdr-h) + 18px)}
  .pdx-jump ~ main .pdx-rail{top:calc(var(--hdr-h) + 96px)}
}
.pdx-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm)}
.pdx-card--cta{position:relative;overflow:hidden;border-color:transparent;box-shadow:var(--shadow);background:linear-gradient(158deg,var(--navy),var(--ink))}
.pdx-card--cta::after{content:"";position:absolute;right:-5rem;top:-6rem;width:14rem;height:14rem;border-radius:50%;background:radial-gradient(circle,rgba(59,188,69,.38),transparent 66%)}
.pdx-card--cta>*{position:relative;z-index:1}
.pdx-card__eye{display:block;margin-bottom:.6rem;font-size:.67rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-600)}
.pdx-card--cta .pdx-card__eye{color:#7fe08a}
.pdx-card h4{font-family:'Sora',sans-serif;font-size:1.02rem;line-height:1.35;margin-bottom:.5rem;color:var(--navy-900)}
.pdx-card--cta h4{color:#fff}
.pdx-card p{font-size:.88rem;color:var(--muted);margin-bottom:1.1rem}
.pdx-card--cta p{color:#a9c6dd}
.pdx-card .btn{width:100%}
.pdx-card .btn+.btn{margin-top:.6rem}
.pdx-card__row{display:flex;align-items:center;gap:.6rem;margin-top:.95rem;font-size:.86rem;color:#a9c6dd}
.pdx-card__row svg{width:1.05rem;height:1.05rem;flex:none;color:#7fe08a}
.pdx-card__row a{word-break:break-word}
.pdx-card__row a:hover{color:#fff}
.pdx-facts{display:grid}
.pdx-facts li{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-top:1px solid var(--surface-2);font-size:.87rem}
.pdx-facts li:first-child{border-top:0;padding-top:0}
.pdx-facts span{color:var(--muted)}
.pdx-facts b{font-weight:600;color:var(--navy-900);text-align:right}
.pdx-links{display:grid}
.pdx-links a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.72rem 0;border-top:1px solid var(--surface-2);font-size:.89rem;font-weight:600;color:#33495c}
.pdx-links a:first-child{border-top:0;padding-top:0}
.pdx-links a:hover{color:var(--navy)}
.pdx-links svg{width:.92rem;height:.92rem;flex:none;color:var(--green-600);transition:transform .25s ease}
.pdx-links a:hover svg{transform:translateX(3px)}

.pdx-rel .card__body{gap:.4rem}
@media (prefers-reduced-motion:reduce){
  .pdx-hero__fx i,.pdx-stage__ring{animation:none}
  .pdx-stage__scan{display:none}
}

/* the single row must be minmax(0,1fr): in the default auto row a tall photo
   sizes the track past the 4/3 box and spills out of the plate */
.pd__hero{border-radius:var(--radius);border:1px solid var(--line);background:#fff;padding:1.5rem;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;aspect-ratio:4/3;min-height:0}
.pd__hero img{height:100%;width:auto;max-width:100%;object-fit:contain}
.pd__thumbs{display:flex;gap:.7rem;margin-top:.8rem;flex-wrap:wrap}
.pd__thumbs img{width:84px;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.35rem;cursor:pointer;transition:border-color .2s ease}
.pd__thumbs img:hover,.pd__thumbs img.is-active{border-color:var(--green)}
.block{margin-top:clamp(2rem,3.5vw,3rem)}
.block h3{font-size:var(--fs-h3);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--surface-2);position:relative}
.block h3::after{content:"";position:absolute;left:0;bottom:-2px;width:3rem;height:2px;background:var(--green)}
.block p+p{margin-top:.9rem}
.block p{color:#33495c}
.speclist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.speclist div{background:#fff;padding:.78rem 1rem;display:grid;gap:.15rem;font-size:.9rem}
@media (min-width:640px){.speclist div.kv{grid-template-columns:minmax(140px,34%) 1fr;gap:1rem;align-items:baseline}}
.speclist .k{font-weight:600;color:var(--navy-900)}
.speclist .v{color:var(--muted)}
.featlist{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.featlist li{display:flex;gap:.65rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .95rem;font-size:.92rem}
.featlist svg{width:1.05rem;height:1.05rem;color:var(--green);flex:none;margin-top:.28rem}
.pairs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.pair{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.pair__ico{display:block;font-size:1.5rem;font-style:normal;line-height:1;margin-bottom:.6rem}
.pair b{display:block;font-family:'Sora',sans-serif;font-size:1rem;color:var(--navy-900);margin-bottom:.4rem}
.pair span{font-size:.9rem;color:var(--muted);line-height:1.62}

/* enquiry rail — superseded by .pdx-card, kept because the v4 history snapshot
   of the detail pages still ships `.rail` markup */
.rail{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.rail h4{font-family:'Sora',sans-serif;font-size:1.05rem;margin-bottom:.5rem;color:var(--navy-900)}
.rail p{font-size:.88rem;color:var(--muted);margin-bottom:1.1rem}
.rail .btn{width:100%}
.rail .btn+.btn{margin-top:.6rem}

/* contact */
.info{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.info__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.info__card svg{width:1.5rem;height:1.5rem;color:var(--green);margin-bottom:.85rem}
.info__card b{display:block;font-family:'Sora',sans-serif;font-size:.95rem;color:var(--navy-900);margin-bottom:.3rem}
.info__card p,.info__card a{font-size:.9rem;color:var(--muted);line-height:1.6}
.info__card a:hover{color:var(--navy)}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);line-height:0}
.map iframe{width:100%;height:clamp(280px,42vw,430px);border:0}

/* forms — markup/wiring is owned by the platform, this is styling only */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow-sm)}
.wlk-form{display:grid;gap:1.05rem}
.wlk-form label{display:block}
.wlk-form label>span{display:block;font-size:.84rem;font-weight:600;color:#33495c;margin-bottom:.4rem}
.wlk-form input,.wlk-form textarea,.wlk-form select{
  width:100%;padding:.82rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font:inherit;font-size:.95rem;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.wlk-form input:focus,.wlk-form textarea:focus,.wlk-form select:focus{
  outline:none;background:#fff;border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,68,114,.12);
}
.wlk-form textarea{resize:vertical;min-height:130px}
.wlk-form button[type=submit]{justify-self:start}
.wlk-form-status{border-radius:12px;padding:.8rem 1rem;font-size:.9rem}
.wlk-form-status.hidden{display:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#a9c1d6;padding-top:clamp(3rem,5vw,4.5rem);position:relative}
.ftr::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--green))}
.ftr__grid{display:grid;gap:clamp(1.8rem,3vw,2.6rem);padding-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1.2fr}}
@media (min-width:1040px){.ftr__grid{grid-template-columns:1.5fr .8fr .9fr 1.1fr}}
.ftr img.ftr__logo{height:44px;width:auto;margin-bottom:1.1rem}
.ftr h5{font-family:'Sora',sans-serif;color:#fff;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr a{color:#a9c1d6;transition:color .2s ease}
.ftr a:hover{color:#fff}
.ftr li+li{margin-top:.6rem}
.ftr li{font-size:.9rem}
.ftr__contact li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.ftr__contact svg{width:1.05rem;height:1.05rem;color:var(--green);flex:none;margin-top:.28rem}
.ftr__gst{display:inline-block;margin-top:1.2rem;font-size:.78rem;color:#7f9bb3;border:1px dashed rgba(255,255,255,.2);border-radius:8px;padding:.35rem .7rem}
.ftr__bar{border-top:1px solid rgba(255,255,255,.1);padding:1.15rem 0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.8rem;color:#7f9bb3}
.ftr__bar a{color:#9fd7a5}

/* floating actions */
.fab{position:fixed;right:1.1rem;z-index:55;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:var(--shadow);transition:transform .25s ease}
.fab:hover{transform:translateY(-3px)}
/* stacked upward so they clear the preview's own bottom-right helper button */
.fab--wa{bottom:9.6rem;width:52px;height:52px;background:#25d366;color:#fff}
.fab--wa svg{width:26px;height:26px}
.fab--top{bottom:5.6rem;width:46px;height:46px;background:var(--navy);color:#fff;border:0;cursor:pointer}
.fab--top svg{width:20px;height:20px}
.fab--top.hidden{display:none}

/* utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none}