.web-quality{background:#f3f6f0;color:#2c513a;padding:100px 0 0;overflow:hidden}.quality-container{width:min(1440px,calc(100% - 80px));margin:auto}.quality-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:48px}.quality-eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7a9274;margin:0 0 20px}.quality-heading h2{font-size:clamp(34px,4vw,58px);line-height:1.08;letter-spacing:-2px;margin:0}.quality-heading h2 em,.quality-closing em{font-style:normal;color:#f68122}.quality-heading-aside{max-width:330px}.quality-heading-aside p{font-size:15px;line-height:1.8;color:#778472;margin:0 0 15px}.quality-motion{padding:8px 13px;border:1px solid #cfddc7;border-radius:20px;background:transparent;color:#66805d;font:inherit;font-size:11px;cursor:pointer}.quality-motion[hidden]{display:none}.web-quality button:focus-visible,.web-quality a:focus-visible{outline:3px solid #ed8b3c;outline-offset:4px}
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.quality-card{background:#fffdf8;border:1px solid #e0e7da;border-radius:18px;padding:30px;min-width:0}.quality-card-heading{display:flex;gap:12px;align-items:center;margin-bottom:23px}.quality-number{font-size:12px;color:#ef8c42;border:1px solid #f2d7ba;border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.quality-category{font-size:10px;letter-spacing:1.4px;font-weight:700;color:#78906f}.quality-card>h3{font-size:24px;letter-spacing:-.7px;margin:25px 0 12px;color:#2f573d}.quality-card>p{color:#74816e;font-size:14px;line-height:1.8;margin:0}.quality-visual{height:250px;border:1px solid #e1e8db;border-radius:12px;background:#f5f8f0;overflow:hidden;position:relative}.quality-card .quality-heading-explanation{background:#f0f5e9;border-left:2px solid #c1d2b3;padding:11px 13px;margin-top:18px;font-size:12px;min-height:64px;color:#63805a}.quality-heading-explanation strong{color:#3d6948}.quality-hint{display:block;font-size:10px;color:#91a087;margin-top:10px}
.quality-outline{padding:22px 25px;display:flex;flex-direction:column;justify-content:center;gap:9px}.quality-outline-line{position:absolute;top:58px;bottom:44px;left:42px;border-left:1px dashed #b8cbaa}.quality-node{position:relative;display:flex;align-items:center;text-align:left;gap:13px;width:calc(100% - 40px);min-height:55px;flex-shrink:0;background:#fffdf8;border:1px solid #dbe5d1;border-radius:8px;padding:10px 13px;color:#63805a;cursor:pointer;transition:background .25s,border-color .25s,transform .25s;font:inherit}.quality-node[data-heading=h2]{margin-left:20px}.quality-node[data-heading=h3]{margin-left:40px}.quality-node.is-selected{border-color:#7fa170;background:#ecf3e5;box-shadow:0 4px 12px #47653b08}.quality-tag{border:1px solid #cdddbe;background:#f0f6e9;border-radius:5px;font:700 12px monospace;padding:6px}.quality-node strong{font-size:11px;display:block}.quality-node small{font-size:10px;font-weight:400;color:#8a9b7f;display:block;margin-top:4px}.quality-node i{font-style:normal;margin-left:auto;color:#92ad81}.quality-node:hover{transform:translateX(3px)}
.quality-search-demo{padding:24px}.quality-search-box{background:#fffefb;border:1px solid #d6e1cc;border-radius:24px;display:flex;gap:10px;align-items:center;padding:12px 16px;font-size:12px;color:#6a805f}.quality-search-box svg{width:18px;height:18px;stroke:#7b986b;stroke-width:1.5;flex-shrink:0}.quality-search-caret{display:block;width:1px;height:15px;background:#f68122;margin-left:1px}.quality-search-result{padding:20px 10px}.quality-search-address{display:block;font-size:10px;color:#92a185;margin-bottom:9px}.quality-search-result>strong{font-size:16px;font-weight:500;color:#3b6648;line-height:1.5;display:block}.quality-search-result p{font-size:12px;color:#7d8e72;line-height:1.75;margin:8px 0}.quality-search-result mark{background:#e5edd8;color:inherit;padding:1px 2px;border-radius:3px}.quality-demo-label{font-size:9px;color:#94a389;display:block;margin-top:9px}.quality-principle{display:flex;align-items:baseline;gap:8px;font-size:12px;color:#63835a;line-height:1.6;margin-top:18px}.quality-principle>span{color:#f68122}
.quality-image-demo{padding:18px;display:flex;flex-direction:column;gap:13px}.quality-image-frame{height:155px;border-radius:8px;overflow:hidden;position:relative}.quality-image-frame>svg{height:100%;width:100%;object-fit:cover}.quality-image-frame>span{position:absolute;bottom:9px;left:10px;background:#fffdf8e8;border-radius:4px;padding:5px 8px;font-size:9px;color:#66835b}.quality-image-scan{position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);border-right:1px solid #fff8;transform:translateX(-110%)}.quality-format-flow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 5px}.quality-format-flow>span:not(.quality-format-arrow){font-size:8px;letter-spacing:.7px;color:#95a18b}.quality-format-flow small{font-size:13px;font-weight:700;display:block;letter-spacing:0;margin-top:4px}.quality-old-format small{color:#9eaa93}.quality-new-format small{color:#548360}.quality-new-format i{color:#ed8a3d;font-style:normal;margin-left:5px}.quality-format-arrow{color:#a3b795}.quality-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.quality-chips span{border:1px solid #dce7d1;border-radius:15px;padding:6px 10px;font-size:10px;color:#819875}
.quality-security-demo{padding:23px}.quality-https-address{display:flex;align-items:center;justify-content:center;gap:7px;background:#fffdf8;border:1px solid #d8e3ce;border-radius:8px;padding:12px;font-size:12px;white-space:nowrap;color:#8da080}.quality-https-address svg{width:16px;height:18px;stroke:#5d8e50;stroke-width:1.7}.quality-https-address strong{color:#558547;font-weight:700}.quality-security-scene{display:flex;align-items:center;justify-content:center;height:155px;gap:10px}.quality-endpoint{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:0}.quality-endpoint svg{width:37px;height:37px;stroke:#9eb48e;stroke-width:1.5;stroke-linecap:round}.quality-endpoint>span{font-size:9px;color:#91a084}.quality-lock{display:flex;align-items:center;flex-direction:column;flex-shrink:0;gap:5px}.quality-lock>svg{height:76px;width:68px;stroke:#548360;stroke-width:2;fill:#e2edd8;stroke-linecap:round;stroke-linejoin:round}.quality-lock>span{font-size:9px;letter-spacing:1px;color:#809973}.quality-lock-shackle{fill:none;transform-origin:32px 30px}.quality-secure-tunnel{position:relative;display:flex;align-items:center;justify-content:space-around;gap:8px;flex:1;max-width:75px;border-top:1px dashed #c2d2b7;height:1px}.quality-secure-tunnel i{width:5px;height:5px;background:#9ebc86;border-radius:50%;position:absolute;top:-3px;left:0;opacity:0}.quality-secure-tunnel i:nth-child(2){animation-delay:.8s!important}.quality-secure-tunnel i:nth-child(3){animation-delay:1.6s!important}
.quality-closing{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:65px 0 70px}.quality-closing p{font-size:9px;letter-spacing:1.6px;font-weight:700;color:#8da180;margin:0 0 16px}.quality-closing h3{font-size:clamp(27px,3vw,40px);line-height:1.15;letter-spacing:-1px;margin:0}.quality-closing a{display:inline-flex;align-items:center;gap:25px;background:#548360;color:white;border-radius:8px;padding:20px 24px;font-size:13px;font-weight:700;transition:background .2s}.quality-closing a:hover{background:#365f41}.quality-closing a span{font-size:21px;font-weight:400}
.quality-search-caret{animation:quality-blink 1.3s step-end infinite}.quality-search-result mark{animation:quality-highlight 7s ease-in-out infinite}.quality-image-scan{animation:quality-scan 7s ease-in-out infinite}.quality-new-format{animation:quality-format 7s ease-in-out infinite}.quality-lock-shackle{animation:quality-lock 7s ease-in-out infinite}.quality-secure-tunnel i{animation:quality-packet 2.4s linear infinite}.web-quality:not(.quality-running) *{animation-play-state:paused!important}
@keyframes quality-blink{50%{opacity:0}}@keyframes quality-highlight{0%,10%,100%{background:transparent}30%,80%{background:#dfebcf}}@keyframes quality-scan{0%,15%{transform:translateX(-110%)}65%,100%{transform:translateX(320%)}}@keyframes quality-format{0%,20%,100%{opacity:.55;transform:translateY(2px)}45%,85%{opacity:1;transform:none}}@keyframes quality-lock{0%,12%{transform:translateY(-5px);opacity:.5}30%,100%{transform:none;opacity:1}}@keyframes quality-packet{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:100%;opacity:0}}
@media(max-width:1000px){.quality-container{width:calc(100% - 48px)}.quality-card{padding:24px}.quality-visual{height:255px}.quality-node{gap:8px;padding:9px;width:calc(100% - 28px)}.quality-node[data-heading=h2]{margin-left:14px}.quality-node[data-heading=h3]{margin-left:28px}.quality-outline{padding:20px 16px}.quality-outline-line{left:30px}.quality-search-demo{padding:20px 16px}.quality-search-box{font-size:11px;padding:11px 12px;gap:7px}.quality-search-result>strong{font-size:15px}.quality-security-demo{padding:20px 16px}.quality-https-address{font-size:11px}.quality-card>h3{font-size:21px}.quality-category{font-size:9px;letter-spacing:1px}}
@media(max-width:760px){.web-quality{padding-top:62px}.quality-container{width:calc(100% - 36px)}.quality-heading{align-items:flex-start;flex-direction:column;gap:23px;margin-bottom:30px}.quality-heading h2{font-size:41px;letter-spacing:-1.5px}.quality-heading-aside{max-width:none;display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%}.quality-heading-aside p{font-size:12px;margin:0}.quality-motion{font-size:10px;white-space:nowrap}.quality-grid{grid-template-columns:1fr;gap:18px}.quality-card{padding:23px}.quality-visual{height:245px}.quality-outline{padding:19px}.quality-search-demo{padding:22px 18px}.quality-search-result>strong{font-size:16px}.quality-card>h3{font-size:23px}.quality-card>p{font-size:13px}.quality-closing{align-items:flex-start;flex-direction:column;gap:26px;padding:42px 0 50px}.quality-closing a{padding:18px 20px;font-size:12px}.quality-category{font-size:9px}.quality-format-flow small{font-size:12px}.quality-https-address{font-size:12px}.quality-search-box{font-size:11px}}
@media(prefers-reduced-motion:reduce){.web-quality *{animation:none!important;transition:none!important}.quality-image-scan{display:none}.quality-secure-tunnel i{position:relative;opacity:.65;top:-1px}.quality-new-format{opacity:1}.quality-lock-shackle{transform:none;opacity:1}}