/* XGR.Network / new_light3 - approved restrained glass ecosystem, v6.
 * Image source contains only the scene and stable product titles. DOM controls
 * and explanatory copy remain accessible, bilingual, and interactive.
 * v2-v4 video assets remain available for rollback. */
body.v3-site.xgr-kinetic-home{background:#fafbf8!important}
body.v3-site.xgr-kinetic-home .v3-main{width:100%;max-width:none;margin:0;padding:0 0 90px;overflow:visible}
body.v3-site.xgr-kinetic-home .v3-main>:not(.xgr-kinetic-hero){width:min(1270px,calc(100% - 56px));margin-left:auto;margin-right:auto}
.xgr-kinetic-hero{--xgr-v5-ink:#102a24;width:min(1480px,calc(100% - 28px));margin:12px auto 0;color:var(--xgr-v5-ink);position:relative;isolation:isolate;border:1px solid #e2ebe5;border-radius:14px;overflow:hidden;background:#f8faf6}
.xgr-kinetic-hero__stage{position:relative;isolation:isolate;min-height:clamp(470px,42vw,640px);overflow:hidden;background:linear-gradient(107deg,#fafaf7 0%,#f7f9f6 30%,#e7efe8 47%,#86a497 66%,#234f3a 100%)}
.xgr-kinetic-hero__stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 15% 12%,rgba(255,255,255,.9),transparent 50%)}
.xgr-kinetic-hero__visual{position:absolute;z-index:1;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;pointer-events:none}
.xgr-kinetic-hero__poster,.xgr-kinetic-hero__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.xgr-kinetic-hero__poster{z-index:1}
.xgr-kinetic-hero__video{z-index:2;opacity:0;transition:opacity .75s ease}
.xgr-kinetic-hero.is-playing .xgr-kinetic-hero__video{opacity:1}
.xgr-kinetic-hero__copy{position:relative;z-index:4;width:min(45%,625px);padding:clamp(72px,7vw,112px) 0 65px clamp(27px,4vw,69px);pointer-events:none}
.xgr-kinetic-hero__copy a{pointer-events:auto}
.xgr-kinetic-hero__eyebrow{margin:0 0 20px;color:#2d6753;letter-spacing:.19em;text-transform:uppercase;font-weight:760;font-size:clamp(.64rem,.78vw,.76rem);line-height:1.45}
.xgr-kinetic-hero__title{margin:0;color:var(--xgr-v5-ink);font-weight:400;line-height:1.015;letter-spacing:-.058em;font-size:clamp(2.85rem,4.25vw,5.2rem);text-wrap:balance}
.xgr-kinetic-hero__title span{display:block}
.xgr-kinetic-hero__lead{max-width:500px;margin:20px 0 0;color:#4f6660;font-size:clamp(.94rem,1.14vw,1.1rem);line-height:1.57}
.xgr-kinetic-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.xgr-kinetic-hero__actions .v3-button{min-height:47px;border-radius:25px;padding:0 19px;font-weight:680;font-size:.85rem;box-shadow:none}
.xgr-kinetic-hero__actions .v3-button--primary{background:#0d4939;color:#fff!important;border:1px solid #0d4939}
.xgr-kinetic-hero__actions .v3-button--primary:hover{background:#155c46}
.xgr-kinetic-hero__actions .v3-button--secondary{background:rgba(255,255,255,.83);border:1px solid #bfcfc7;color:#183f33!important}
.xgr-kinetic-hero__actions .v3-button:hover{transform:none}
/* No text floats beside the animated structures: the product titles are
 * part of the visual. Large invisible semantic links cover each glass panel. */
.xgr-kinetic-hero__hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.xgr-kinetic-hero__hotspots a{position:absolute;display:block;transform:translate(-50%,-50%);width:13%;height:27%;pointer-events:auto;cursor:pointer;text-decoration:none;border-radius:8px}
.xgr-kinetic-hero__hotspots a:hover{outline:none}
.xgr-kinetic-hero__hotspots a:focus-visible{outline:3px solid #d8f3df;outline-offset:3px}
.xgr-kinetic-hero__hotspots a[data-product=xgrchain]{left:59%;top:27%}
.xgr-kinetic-hero__hotspots a[data-product=xdala]{left:45%;top:51%}
.xgr-kinetic-hero__hotspots a[data-product=xita]{left:83%;top:36%}
.xgr-kinetic-hero__hotspots a[data-product=ai]{left:76%;top:66%}
/* Four stable descriptions. Not attached to the drifting video coordinates. */
.xgr-kinetic-hero__features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;z-index:5;padding:20px clamp(20px,3vw,48px);border-top:1px solid #e6ede7;background:rgba(247,250,248,.98)}
.xgr-kinetic-feature{min-width:0;display:flex;align-items:flex-start;gap:13px;padding:7px 21px 7px 0;color:#1b4234!important;text-decoration:none!important}
.xgr-kinetic-feature+.xgr-kinetic-feature{border-left:1px solid #d8e4dd;padding-left:23px}
.xgr-kinetic-feature svg{flex:0 0 27px;width:27px;height:27px;fill:none;stroke:#1b624d;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.xgr-kinetic-feature__content{display:flex;flex-direction:column;gap:4px;min-width:0}
.xgr-kinetic-feature strong{font-size:.89rem;font-weight:760;line-height:1.28}
.xgr-kinetic-feature small{display:block;color:#536d62;font-size:clamp(.67rem,.75vw,.79rem);font-weight:420;line-height:1.45}
.xgr-kinetic-feature:hover strong{text-decoration:underline;text-underline-offset:3px}
.xgr-kinetic-feature:focus-visible{outline:2px solid #237a53;outline-offset:3px}
@media(max-width:1100px){
 .xgr-kinetic-hero{width:calc(100% - 22px);margin:10px auto 0}
 .xgr-kinetic-hero__stage{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .xgr-kinetic-hero__copy{order:0;width:100%;max-width:none;padding:45px clamp(22px,5vw,48px) 30px;background:linear-gradient(115deg,#fbfcf8 0%,#e8f1eb 100%)}
 .xgr-kinetic-hero__title{max-width:700px;font-size:clamp(3rem,6.6vw,4.8rem)}
 .xgr-kinetic-hero__lead{max-width:630px;font-size:1rem}
 .xgr-kinetic-hero__visual{position:relative;order:1;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1480/640;transform:none;flex:0 0 auto;background:linear-gradient(100deg,#edf4eb,#27523d)}
 .xgr-kinetic-hero__features{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .xgr-kinetic-feature+.xgr-kinetic-feature{border-left:0;padding-left:0}
}
@media(max-width:560px){
 .xgr-kinetic-hero{width:100%;margin:0;border-radius:0;border-left:0;border-right:0}
 .xgr-kinetic-hero__copy{padding:33px 22px 28px}
 .xgr-kinetic-hero__eyebrow{letter-spacing:.11em;font-size:.64rem}
 .xgr-kinetic-hero__title{font-size:clamp(2.55rem,10vw,3.5rem)}
 .xgr-kinetic-hero__lead{font-size:.94rem;margin-top:16px}
 .xgr-kinetic-hero__actions{gap:9px;margin-top:21px}
 .xgr-kinetic-hero__actions .v3-button{padding:0 13px;font-size:.78rem;min-height:43px}
 .xgr-kinetic-hero__hotspots a{min-width:44px;min-height:44px}
 .xgr-kinetic-hero__features{gap:12px;padding:15px 17px}
 .xgr-kinetic-feature{gap:7px;padding:5px 0}
 .xgr-kinetic-feature svg{flex-basis:23px;width:23px;height:23px}
 .xgr-kinetic-feature strong{font-size:.82rem}
 .xgr-kinetic-feature small{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){.xgr-kinetic-hero__video{display:none!important;transition:none}}

/* Preserve the accessibility of hotspot text in markup from older renders.
 * Unstyled screen-reader spans caused the ghost labels reported in v5. */
.xgr-kinetic-hero .v3-only-screenreader{
 position:absolute!important;width:1px!important;height:1px!important;
 overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
 white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important;
}

/* v8: pixel-preserving right-edge composite.
 * The former white veil covered 25% of the active animation and made its
 * color and detail milky. Mask only the far edge of the VIDEO/POSTER layer
 * instead, so the original frames remain intact until the final ~10%.
 * Underlay is the surrounding paper tone, not the old dark stage cut. */
@media(min-width:1101px){
  .xgr-kinetic-hero__stage{
    background:linear-gradient(106deg,
      #fafbf8 0%,#f4f8f3 32%,#e5efe7 71%,#f5f9f4 92%,#fafbf8 100%);
  }
  .xgr-kinetic-hero__stage::after{content:none!important;display:none!important}
  .xgr-kinetic-hero__visual{
    -webkit-mask-image:linear-gradient(90deg,
      #000 0%,#000 89%,rgba(0,0,0,.98) 92%,
      rgba(0,0,0,.78) 95%,rgba(0,0,0,.34) 98%,transparent 100%);
    mask-image:linear-gradient(90deg,
      #000 0%,#000 89%,rgba(0,0,0,.98) 92%,
      rgba(0,0,0,.78) 95%,rgba(0,0,0,.34) 98%,transparent 100%);
  }
  .xgr-kinetic-hero{border-right-color:rgba(221,232,222,.52)}
}
/* Keep frames at their intrinsic proportions; don't use cover/zoom as a
 * fake sharpness fix. Larger source masters will be required for 4K/DPR2. */
.xgr-kinetic-hero__poster,.xgr-kinetic-hero__video{
  object-fit:contain;object-position:center;
}