/* Quality shares the Product section's typography, surface and outer grid. */
.oct-continuation #quality {
  --ink:#081a34; --muted:#506580; --hairline:#9cb4cf66;
  font-family:var(--page-font); min-height:auto; color:var(--ink); background:#f7faff;
}
#quality > .wrap {
  width:min(1480px,calc(100% - 2 * var(--gutter))); max-width:none;
  padding-block:clamp(64px,6.2vw,100px) clamp(48px,5vw,78px);
}
.quality-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.03fr); gap:clamp(40px,5vw,82px); }
.quality-intro { display:flex; flex-direction:column; align-items:stretch; }
#quality h2 { font:500 clamp(48px,4.9vw,79px)/1.035 var(--page-font); letter-spacing:-.047em; text-wrap:initial; }
#quality h2 em { color:#3868a7; }
#quality .quality-intro > p { margin:20px 0 32px; color:var(--muted); font-size:clamp(16px,1.22vw,19px); max-width:45ch; line-height:1.55; }
#quality .quality-facts {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr;
  gap:12px; padding:0; margin:0; list-style:none;
}
.quality-facts li {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:clamp(19px,1.7vw,28px); min-height:140px; border:1px solid #cddbec; border-radius:16px;
  background:linear-gradient(125deg,#fff 5%,#f4f8ff 40%,#ebf3ff 50%,#d7ebff 72%,#c1dfff 100%) 0% 50% / 220% 100%;

  box-shadow:0 2px 3px #15335b04; transition:background-position .32s var(--ease),border-color .32s,box-shadow .32s;
}
.quality-facts li svg { width:24px; height:24px; margin-bottom:auto; color:#396eaf; }
.quality-facts li strong { display:block; font-size:clamp(25px,2.4vw,39px); font-weight:550; line-height:1.16; letter-spacing:-.04em; margin-top:15px; }
#quality .quality-facts small { color:var(--muted); font-size:clamp(13px,1vw,16px); margin-top:3px; }
@media (hover:hover) {
  .quality-facts li:hover { background-position:100% 50%; border-color:#558bd4;
    box-shadow:inset 0 1px 4px #ffffffd9,inset 0 -8px 24px #6ab7ff22,0 5px 18px #225ca21f; }
}

#quality .connection {
  position:relative; color:#f5f9ff; margin:auto 0 0; padding:20px clamp(17px,1.7vw,29px) 12px;
  border:1px solid #31496a; border-radius:18px;
  background:radial-gradient(ellipse at 50% 48%,#103963 0%,#0a2341 41%,transparent 72%),linear-gradient(122deg,#071324,#081a31 75%,#041123);
  box-shadow:inset 0 1px #e1efff16,0 8px 22px -12px #102a4e66;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px 8px;
}
.connection figcaption { font-size:clamp(12px,1.05vw,16px); font-weight:600; line-height:1.35; }
.link-status { justify-self:end; color:#c5eaf9; background:#23405a; border:1px solid #507a923d; border-radius:20px; padding:4px 9px; font-size:11px; font-weight:650; white-space:nowrap; }
.link-status::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#a9c6df; transition:background .5s; }
[data-phase="online"] .link-status::before { background:#89e1ca; }
.link-track {
  --field-height:108px; --chip:clamp(50px,4.3vw,69px);
  position:relative; isolation:isolate; grid-column:1/-1; display:grid;
  grid-template-columns:24% 52% 24%; align-items:start; padding:5px 0 10px;
  border-top:1px solid #7eb9f32c;
}
.link-track::before {
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,#95c9fe42 .75px,transparent 1px);
  background-size:14px 14px; mask-image:radial-gradient(ellipse at center,black,transparent 78%);
}
.circuit { position:absolute; top:5px; width:100%; height:var(--field-height); overflow:visible; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.traces { stroke:#46658b; stroke-width:1.1; }
.traces path { opacity:.54; stroke-width:.8; }
.route-light { stroke:#70c8ff; stroke-width:1.8; }
.route-light use { opacity:.15; transition:opacity .55s; }
.contacts { stroke:#638ab3; fill:#14314d; stroke-width:1.2; }
.connection:is([data-phase="secure"],[data-phase="signal"],[data-phase="online"]) .uplink,
.connection:is([data-phase="signal"],[data-phase="online"]) .downlink { opacity:.96; }
.signals { stroke:#d3f9ff; stroke-width:3.5; filter:drop-shadow(0 0 3px #41bdff); }
.signals use { stroke-dasharray:9 110; stroke-dashoffset:11; opacity:0; }
.connection[data-phase="secure"] .to-hub { animation:quality-transmit 1.45s .1s both; }
.connection[data-phase="signal"] .to-server { animation:quality-transmit 1.65s .12s both; }
@keyframes quality-transmit {
  0% {stroke-dashoffset:10;opacity:0}
  12%,84% {opacity:1}
  100% {stroke-dashoffset:-100;opacity:0}
}
.endpoint { position:relative; display:grid; grid-template-rows:var(--field-height) auto; align-items:center; justify-items:center; }
#quality .endpoint small { color:#cedff0; font-size:12px; font-weight:500; line-height:1.35; text-align:center; }
.client-phone {
  position:relative; display:grid; place-items:center; width:40px; height:68px; border:1px solid #89adc9; border-radius:9px;
  background:linear-gradient(140deg,#4a6887,#0b1a30 10%,#122946 72%,#41617f);
  box-shadow:inset 0 0 0 2px #061426,2px 3px 0 #020e1e,0 6px 10px #010916aa;
}
.client-phone span { position:absolute; inset:4px; border-radius:5px; background:radial-gradient(ellipse at 50% 80%,#137ec1,#10375c 62%,#091d34); }
.client-phone::before,.client-phone::after { content:""; position:absolute; z-index:1; width:12px; border-radius:4px; }
.client-phone::before { top:5px; height:3px; background:#031123; }
.client-phone::after { bottom:6px; height:2px; background:#b2d8ee; }
.client-phone svg { position:relative; width:22px; color:#b8ecff; }
.connection[data-phase="ready"] .client-phone span { animation:quality-wake 1s ease-out both; }
@keyframes quality-wake { from {opacity:.25} to {opacity:1} }
.network-hub { position:relative; display:grid; place-items:center; height:var(--field-height); }
.hub-chip {
  position:relative; display:grid; place-items:center; width:var(--chip); aspect-ratio:1; border-radius:24%;
  background:linear-gradient(145deg,#4c6e91,#15324f 42%,#071a30 64%,#2b4a6c);
  border:1px solid #7490ad; box-shadow:inset 0 1px #b3cde855,0 4px 9px #020d20a6;
}
.hub-chip::before,.hub-chip::after { content:""; position:absolute; pointer-events:none; }
.hub-chip::before { inset:-5px; border:1px solid #7298bd69; border-radius:26%; }
.hub-chip::after { inset:-10px; border-radius:27%; border:1px solid #49b4ff42; opacity:0; box-shadow:0 0 22px #2584e54a,inset 0 0 9px #409dff38; transition:opacity .65s; }
.hub-chip img { display:block; width:84%; height:auto; border-radius:18%; }
.connection:not([data-phase="ready"]) .hub-chip::after { opacity:1; }
.connection[data-phase="secure"] .hub-chip::before { animation:quality-engage 1.8s ease-out both; }
@keyframes quality-engage { 0%,35% { transform:scale(.95);border-color:#7298bd69 } 75% {border-color:#95e6ff} 100% {transform:scale(1);border-color:#7298bd69} }
.server-rack { position:relative; width:clamp(48px,4.5vw,70px); padding:3px; border:1px solid #7994ac; border-radius:6px; background:linear-gradient(155deg,#526881,#0b1e34 40%); box-shadow:2px 3px 0 #031022,0 5px 9px #020d1f88; }
.server-rack i { display:block; position:relative; margin:2px; height:11px; border-radius:2px; border:1px solid #526c84; background:linear-gradient(#354d65,#192c41); }
.server-rack i::before { content:""; position:absolute; top:3px; left:3px; width:3px; height:3px; border-radius:50%; background:#7f92a2; box-shadow:6px 0 #708493; transition:background .5s,box-shadow .5s; }
.server-rack i::after { content:""; position:absolute; right:3px; inset-block:2px; width:29%; background:repeating-linear-gradient(90deg,#0a1a2c 0 1px,transparent 1px 3px); }
.connection[data-phase="online"] .server-rack i::before { background:#adf8e9; box-shadow:5px 0 #65d8e4,0 0 5px #60d9f1; }
.connection[data-playing="false"] :is(.to-hub,.to-server,.client-phone span),
.connection[data-playing="false"] .hub-chip::before { animation-play-state:paused; }
.link-playback { grid-column:1/-1; border-top:1px solid #afceff25; display:flex; align-items:center; justify-content:space-between; padding-top:6px; min-height:36px; }
.phase-bars { display:flex; gap:4px; }
.phase-bars i { width:18px; height:2px; border-radius:2px; background:#42586f; transition:background .6s; }
.phase-bars i:first-child,[data-phase="secure"] .phase-bars i:nth-child(-n+2),[data-phase="signal"] .phase-bars i:nth-child(-n+3),[data-phase="online"] .phase-bars i { background:#8dcaf3; }
.link-toggle { display:grid; place-items:center; width:32px; height:32px; border:1px solid #8eadce52; background:transparent; border-radius:50%; color:#deefff; }
.link-toggle span { height:9px; width:7px; border-inline:2px solid currentColor; }
.link-toggle[data-paused="true"] span { border:0; border-left:7px solid currentColor; border-block:5px solid transparent; height:0; width:0; }
.link-toggle:focus-visible { outline:2px solid #b3e7ff; outline-offset:3px; }
.quality-summary { display:grid; align-items:start; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; margin-top:clamp(32px,3vw,54px); padding-top:24px; border-top:1px solid var(--hairline); position:relative; }
.quality-summary strong { font-size:clamp(19px,1.75vw,28px); line-height:1.25; font-weight:550; letter-spacing:-.035em; }
#quality .quality-summary p { margin:0; color:var(--muted); font-size:14px; }
@media (max-width:1000px) {
  .quality-layout { gap:24px; }
  .quality-facts li { padding:16px; }
  #quality h2 { font-size:clamp(41px,5.2vw,53px); }
}
@media (max-width:800px) {
  .quality-layout { grid-template-columns:minmax(0,1fr); gap:22px; }
  #quality .quality-intro > p { margin:16px 0 24px; }
  .quality-facts li { min-height:123px; }
  .quality-summary { grid-template-columns:1fr; gap:10px; padding-top:18px; }
}
@media (max-width:480px) {
  #quality > .wrap { padding-block:50px; }
  #quality h2 { font-size:clamp(36px,9.7vw,44px); }
  #quality .quality-facts { gap:8px; }
  .quality-facts li { padding:14px; min-height:116px; border-radius:12px; }
  .quality-facts li strong { font-size:clamp(19px,5.2vw,24px); }
  .quality-facts li svg { width:20px; height:20px; }
  #quality .quality-facts small { font-size:12px; line-height:1.4; min-height:2.8em; }
  #quality .connection { padding:13px 12px 9px; gap:10px 5px; }
  .link-status { font-size:10px; padding:4px 6px; }
  .link-track { --field-height:90px; --chip:45px; }
  .client-phone { width:31px; height:53px; }
  .server-rack { width:44px; }
  #quality .endpoint small { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #quality *,#quality *::before,#quality *::after { transition:none; animation:none; }
}