/* KLINT Halaman 3. Live DOM content and CSS geometry; only the product and
   physical podium are cropped from the customer's own reference image. */
.home-quality-section{--q-ink:#0a1218;position:relative;width:100%;margin:0;padding:0;overflow:hidden;background:#d3ebeb;color:var(--q-ink);isolation:isolate}
.quality-reference-stage{position:relative;display:block;width:100%;aspect-ratio:1672 / 941;overflow:hidden;background:radial-gradient(ellipse 28% 37% at 51% 43%,rgba(255,255,255,.26),transparent 95%),radial-gradient(ellipse 19% 27% at 91% 10%,rgba(248,255,255,.42),transparent 95%),linear-gradient(180deg,#92dade 0%,#c9e9eb 17%,#d2ebec 54%,#deeff0 75%,#8fcfd3 100%)}
.quality-reference-stage::before{position:absolute;content:"";inset:0;background:radial-gradient(ellipse 42% 26% at 50% 69%,rgba(243,255,255,.5),transparent 96%),radial-gradient(ellipse 28% 45% at 3% 72%,rgba(100,191,199,.18),transparent 98%),radial-gradient(ellipse 32% 48% at 100% 71%,rgba(101,194,199,.12),transparent 97%);pointer-events:none}
.quality-scene-light{position:absolute;inset:0;background:radial-gradient(ellipse 63% 78% at 50% 48%,rgba(239,255,255,.20),transparent 80%);pointer-events:none}
.quality-top-fold{position:absolute;inset:0 0 auto;height:12.7%;background:linear-gradient(180deg,rgba(50,150,158,.43),rgba(68,167,174,.10));clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.quality-top-fold-inner{position:absolute;inset:0 0 auto;height:8.1%;background:linear-gradient(180deg,rgba(47,149,155,.24),rgba(60,172,177,.03));clip-path:polygon(10% 0,90% 0,50% 100%);pointer-events:none}
.quality-horizon{position:absolute;left:0;right:0;top:66%;height:19%;background:linear-gradient(180deg,rgba(226,245,245,.02),rgba(235,248,248,.46) 46%,rgba(232,246,246,.05));filter:blur(8px);pointer-events:none}
.quality-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:radial-gradient(ellipse 49% 47% at 50% 25%,rgba(255,255,255,.7),rgba(235,249,249,.12) 87%),linear-gradient(180deg,rgba(202,234,235,.03) 0%,rgba(117,202,208,.27) 100%);pointer-events:none}
.quality-floor-fold{position:absolute;inset:auto 0 0;height:16.7%;background:linear-gradient(180deg,rgba(148,215,219,.05),rgba(93,179,186,.32));clip-path:polygon(50% 0,100% 92%,100% 100%,0 100%,0 92%);pointer-events:none}
.quality-floor-fold-inner{position:absolute;inset:auto 0 0;height:12.3%;background:linear-gradient(180deg,rgba(109,193,201,.36),rgba(64,163,173,.24));clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none}
.quality-object{position:absolute;inset:0;z-index:2;pointer-events:none}
.quality-object-shadow{position:absolute;left:30.2%;width:39.3%;top:72%;height:8%;background:radial-gradient(ellipse,rgba(18,94,99,.20),transparent 70%);filter:blur(18px)}
.quality-reference-podium{position:absolute;left:32.12%;top:58.25%;width:35.71%;height:auto;display:block;filter:drop-shadow(0 8px 12px rgba(22,89,97,.11))}
.quality-reference-product{position:absolute;left:37.02%;top:19.98%;width:25.12%;height:auto;display:block;filter:drop-shadow(0 9px 8px rgba(14,61,65,.11));will-change:transform}
.quality-fact{position:absolute;z-index:3;display:grid;grid-template-columns:18% 1fr;gap:6.7%;align-items:start;width:29.25%;font-family:'Aspekta',Arial,sans-serif}
.quality-top-left{top:21.0%;left:6.17%}
.quality-bottom-left{top:52.21%;left:6.17%}
.quality-top-right{top:21%;left:69.10%}
.quality-bottom-right{top:52.31%;left:69.10%}
.quality-fact-icon{display:grid;place-items:center;width:100%;aspect-ratio:1;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(247,255,255,.21);color:#060e13;flex:none}
.quality-fact-icon svg{display:block;width:86%;height:86%;stroke:currentColor;stroke-width:3.3;stroke-linejoin:round;stroke-linecap:round;fill:none;overflow:visible}
.quality-fact-copy{min-width:0}
.quality-fact-copy h2{color:#080d14;font-family:'Aspekta',Arial,sans-serif;font-weight:800;font-size:clamp(13px,1.52vw,26px);line-height:1.06;letter-spacing:-.018em;margin:14px 0 22px;text-transform:uppercase}
.quality-fact-copy p{color:#192c32;font-family:'Aspekta',Arial,sans-serif;font-size:clamp(11px,1.16vw,19.5px);line-height:1.34;letter-spacing:.002em;font-weight:410;margin:0;max-width:360px}
.quality-top-right .quality-fact-copy p{max-width:370px}
.quality-source-break{display:block;content:""}
.quality-bottom-right .quality-fact-copy h2{letter-spacing:-.024em}
/* Motion: restrained scroll entrance, natural movement, no permanent floating can. */
.quality-reference-stage[data-qa-ready] [data-quality-reveal]{opacity:0;transform:translateY(15px);transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.quality-reference-stage[data-qa-ready] .quality-object{transform:translateY(10px) scale(.975);transform-origin:50% 65%;transition:opacity .92s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.quality-reference-stage[data-qa-ready] .quality-top-left{transition-delay:.10s}
.quality-reference-stage[data-qa-ready] .quality-top-right{transition-delay:.17s}
.quality-reference-stage[data-qa-ready] .quality-bottom-left{transition-delay:.24s}
.quality-reference-stage[data-qa-ready] .quality-bottom-right{transition-delay:.31s}
.quality-reference-stage[data-qa-ready] [data-quality-reveal].is-visible{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.quality-reference-stage[data-qa-ready] .quality-object.is-visible:hover .quality-reference-product{transform:translateY(-3px);transition:transform .4s ease}}
/* Portrait and tablet layouts use reflowing real HTML, not a stretched screenshot. */
@media(max-width:1050px){
 .quality-reference-stage{aspect-ratio:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;padding:52px 5.5% 74px;background:radial-gradient(ellipse 65% 45% at 50% 30%,rgba(250,255,255,.48),transparent),linear-gradient(180deg,#a1dee1,#d8eef0 55%,#a1d9dc)}
 .quality-reference-stage::before,.quality-top-fold,.quality-top-fold-inner,.quality-horizon,.quality-floor,.quality-floor-fold,.quality-floor-fold-inner,.quality-scene-light{pointer-events:none}
 .quality-source-break{display:none}
 .quality-top-fold{height:65px}.quality-top-fold-inner{height:48px}.quality-floor{height:32%}.quality-floor-fold{height:10%}.quality-floor-fold-inner{height:8%}
 .quality-object{position:relative;inset:auto;grid-column:1/-1;grid-row:1;width:min(74vw,520px);margin:0 auto;aspect-ratio:597 / 580;align-self:center}
 .quality-object-shadow{left:8%;width:84%;top:81%;height:9%}
 .quality-reference-podium{left:0;top:68%;width:100%;height:auto}
 .quality-reference-product{left:14.82%;top:15.8%;width:70.36%;height:auto}
 .quality-fact{position:relative;left:auto;top:auto;right:auto;bottom:auto;grid-template-columns:64px 1fr;gap:15px;width:100%;padding:5px 2px;align-self:start}
 .quality-fact-icon{width:62px;height:62px}
 .quality-fact-copy h2{margin:6px 0 13px;font-size:clamp(20px,2.7vw,26px);line-height:1.06}
 .quality-fact-copy p,.quality-top-right .quality-fact-copy p{font-size:clamp(14px,1.85vw,17px);line-height:1.4;max-width:30em}
 .quality-top-left{grid-column:1;grid-row:2}.quality-top-right{grid-column:2;grid-row:2}.quality-bottom-left{grid-column:1;grid-row:3}.quality-bottom-right{grid-column:2;grid-row:3}
}
@media(max-width:640px){
 .quality-reference-stage{grid-template-columns:1fr;gap:26px;padding:32px 22px 46px}
 .quality-top-fold{height:44px}.quality-top-fold-inner{height:31px}
 .quality-object{width:min(94vw,395px);grid-column:1;grid-row:1;margin:0 auto -4px}
 .quality-top-left,.quality-top-right,.quality-bottom-left,.quality-bottom-right{grid-column:1;grid-row:auto}
 .quality-fact{grid-template-columns:52px 1fr;gap:14px;padding:0;max-width:500px;margin-inline:auto}
 .quality-fact-icon{width:51px;height:51px}
 .quality-fact-copy h2{font-size:clamp(18px,5.2vw,22px);margin:4px 0 10px}
 .quality-fact-copy p,.quality-top-right .quality-fact-copy p{font-size:clamp(14px,3.5vw,16px);line-height:1.4;max-width:none}
}
@media(prefers-reduced-motion:reduce){.quality-reference-stage[data-qa-ready] [data-quality-reveal],.quality-reference-stage[data-qa-ready] .quality-object{opacity:1!important;transform:none!important;transition:none!important}.quality-reference-product{will-change:auto}}
html[data-user-reduced-motion="true"] .quality-reference-stage[data-qa-ready] [data-quality-reveal],html[data-user-reduced-motion="true"] .quality-reference-stage[data-qa-ready] .quality-object{opacity:1!important;transform:none!important;transition:none!important}