/* A panoramic device fleet, rendered entirely in CSS/SVG. The scale is illustrative, not telemetry. */
.home-fleet {
  --hf-green: #49efba;
  position: relative;
  isolation: isolate;
  color: #eefbf8;
  background: #050d13;
  border-bottom: 1px solid #20343a;
  padding: 32px 0 22px;
  scroll-margin-top: 80px;
}
.home-fleet::before {
  position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none;
  background: radial-gradient(ellipse at 50% 64%, #0d634c66, transparent 49%),
    radial-gradient(ellipse at 15% 77%, #124b6940, transparent 35%),
    radial-gradient(ellipse at 90% 80%, #34317533, transparent 32%),
    linear-gradient(#90e7d007 1px, transparent 1px), linear-gradient(90deg, #90e7d007 1px, transparent 1px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(#000, #000 85%, transparent);
}
.home-fleet *, .home-fleet *::before, .home-fleet *::after { box-sizing: border-box; }
.hf-layout { width: min(1320px, 88%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hf-layout > * { min-width: 0; }
.hf-copy { position: relative; z-index: 2; text-align: center; }
.hf-eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #9fe5ce; }
.hf-eyebrow i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--hf-green); box-shadow: 0 0 14px #49efbaaa; }
.home-fleet h1 { margin: 0 auto; max-width: 22ch; font-size: clamp(42px, 4.3vw, 68px); font-weight: 850; line-height: 1.12; letter-spacing: -.04em; overflow-wrap: break-word; text-wrap: balance; color: #f2faf9; }
.home-fleet h1 em { display: block; font-style: normal; color: var(--hf-green); text-shadow: 0 0 50px #49efba20; }
.hf-description { margin: 17px auto 0; max-width: 54em; font-size: 17px; line-height: 1.8; color: #aec8c8; text-wrap: pretty; }
.hf-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hf-button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 45px; max-width: 100%; border: 1px solid var(--hf-green); border-radius: 8px; padding: 12px 22px; font-size: 14px; font-weight: 750; line-height: 1.4; text-decoration: none; text-align: center; color: #05251b; background: var(--hf-green); box-shadow: 0 8px 30px #49efba15; transition: background .2s, border-color .2s, transform .2s; }
.hf-button:hover { color: #05251b; background: #8bffd3; border-color: #8bffd3; transform: translateY(-2px); }
.hf-button.hf-secondary { background: #0a171b; color: #e0efed; border-color: #3c585a; box-shadow: none; }
.hf-button.hf-secondary:hover { background: #17372d; color: #f2faf9; border-color: #83e2bd; }
.home-fleet a:focus-visible { outline: 2px solid #b8ffe4; outline-offset: 5px; }
.hf-platforms { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.hf-platforms a { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #8baaa9; text-decoration: none; line-height: 1.6; }
.hf-platforms a:hover { color: var(--hf-green); }
.hf-platforms svg { width: 16px; height: 16px; flex-shrink: 0; }
.hf-network { position: relative; margin: 0 auto; width: 100%; min-width: 0; max-width: 1180px; padding-top: 16px; direction: ltr; }
.hf-network::before { content: ""; position: absolute; z-index: -1; top: 95px; left: 13%; right: 13%; height: 330px; border-radius: 50%; background: radial-gradient(ellipse, #16b77f24, transparent 65%); pointer-events: none; }
.hf-network-top { position: absolute; top: 24px; left: 0; display: flex; align-items: center; gap: 10px; color: #8aafa7; font: 11px/1.5 ui-monospace, monospace; letter-spacing: .1em; }
.hf-network-top > i { height: 4px; width: 4px; border-radius: 50%; background: var(--hf-green); box-shadow: 0 0 8px #49efba77; }
.hf-scale { position: absolute; top: 56px; left: 0; display: grid; gap: 4px; }
.hf-scale strong { color: #d4f9eb; font-size: 42px; font-weight: 650; line-height: 1.1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.hf-scale strong > span { font-size: 20px; color: var(--hf-green); vertical-align: top; margin-inline-start: 4px; }
.hf-scale > span { color: #9cbbb0; font-size: 13px; line-height: 1.7; }
.hf-task-flow { position: absolute; top: 43px; right: 0; width: min(26%, 250px); color: #b9d8cc; }
.hf-task-flow > strong { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 650; line-height: 1.6; color: #a4cebd; }
.hf-task-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hf-task-flow li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 8px; border: 1px solid #4a8d732c; border-radius: 5px; background: #0c221c70; }
.hf-task-flow b { flex-shrink: 0; font: 500 11px/1.5 ui-monospace, monospace; color: #7cd8b5; }
.hf-task-flow li > span { min-width: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.hf-task-flow li > i { flex-shrink: 0; margin-inline-start: auto; width: 4px; height: 4px; border-radius: 50%; background: #5ce7ad; opacity: .25; animation: hf-step 9s infinite; animation-delay: calc(var(--hf-step) * 3s); }
.hf-controller { position: relative; display: grid; justify-items: center; align-content: start; min-height: 149px; margin: 0 auto; width: min(420px, 55%); padding-top: 7px; }
.hf-ai { position: relative; z-index: 1; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #88ffd1; border-radius: 26px; color: #e0fff2; font: 800 35px/1 ui-monospace, monospace; background: radial-gradient(circle at 30% 20%, #276c54, #0e342f 66%); box-shadow: 0 0 35px #4affb83b, 0 0 90px #29e9a71c, inset 0 0 22px #49efba22; animation: hf-core 6s ease-in-out infinite; }
.hf-orbit { position: absolute; top: -7px; left: 50%; width: 114px; height: 114px; margin-left: -57px; border: 1px solid #46a08355; border-radius: 50%; pointer-events: none; animation: hf-orbit 14s linear infinite; }
.hf-orbit::after { content: ""; position: absolute; top: 50%; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: #78ffd2; box-shadow: 0 0 9px #78ffd2; }
.hf-orbit-two { width: 148px; height: 148px; margin-left: -74px; top: -24px; border-style: dashed; border-color: #60d4b228; animation-direction: reverse; animation-duration: 25s; }
.hf-orbit-two::after { background: #49c6ff; width: 3px; height: 3px; box-shadow: 0 0 8px #49c6ff; }
.hf-controller > div { position: relative; z-index: 2; text-align: center; margin-top: 15px; }
.hf-controller strong { display: block; font-size: 18px; line-height: 1.5; font-weight: 700; color: #dcfff0; }
.hf-controller > div > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #9cdcc4; }
.hf-routes { height: 40px; width: 100%; margin-top: -2px; }
.hf-routes svg { display: block; width: 100%; height: 100%; fill: none; }
.hf-route-base { stroke: #3b665a; stroke-width: .7; }
.hf-route-flow { stroke: #8dffca; stroke-width: 1.5; stroke-dasharray: 18 220; animation: hf-dispatch 3s linear infinite; filter: drop-shadow(0 0 3px #49efba88); }
.hf-fleets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; position: relative; }
.hf-fleet { --hf-tint: #63d0ff; min-width: 0; position: relative; }
.hf-fleet:nth-child(2) { --hf-tint: #63efb3; }
.hf-fleet:nth-child(3) { --hf-tint: #b4a2ff; }
.hf-fleet-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: #def0ed; margin: 0 0 12px; }
.hf-fleet-label::before { content: ""; position: absolute; top: -6px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--hf-tint), transparent); }
.hf-fleet-label svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--hf-tint); }
.hf-fleet-label strong { font-size: 18px; font-weight: 650; line-height: 1.5; }
.hf-fleet-label > span { font-size: 13px; color: #a0bdb5; padding-inline-start: 8px; border-inline-start: 1px solid #52746966; }
.hf-devices { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; gap: 8px 9px; padding: 14px 7px 18px; perspective: 900px; transform: perspective(850px) rotateX(24deg); transform-origin: center top; mask-image: linear-gradient(#000 60%, #0009 88%, #0003); }
.hf-devices::before { content: ""; position: absolute; inset: -10px -8px; z-index: -1; border: 1px solid #5db99e16; border-radius: 18px; background: linear-gradient(180deg, #1d504f22, #0a182110); }
.hf-node { position: relative; display: block; height: 44px; width: 100%; max-width: 26px; justify-self: center; border: 1px solid #35645c; border-radius: 5px; background: linear-gradient(150deg, #153337, #08191c); box-shadow: 0 5px 10px #0006; animation: hf-node-glow 6s ease-in-out infinite; animation-delay: calc(var(--hf-row) * -.52s + var(--hf-col) * -.16s); }
.hf-node-camera { display: block; margin: 3px auto 0; height: 2px; width: 7px; border-radius: 2px; background: #6ca89466; }
.hf-node-browser { max-width: none; height: 28px; border-radius: 4px; }
.hf-node-browser .hf-node-camera { width: 10px; margin-inline: 3px auto; height: 1px; background: linear-gradient(90deg, #759fb3 20%, transparent 20%, transparent 40%, #759fb3 40%, #759fb3 60%, transparent 60%, transparent 80%, #759fb3 80%); }
.hf-node-browser::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #3c7a8c55; }
.hf-fleet:first-child .hf-devices { row-gap: 16px; padding-block: 22px 28px; }
.hf-node-android { border-radius: 4px; }
.hf-node-android .hf-node-camera { width: 2px; height: 2px; border-radius: 50%; }
.hf-node-screen { display: grid; gap: 4px; position: relative; padding: 10px 4px 0; }
.hf-node-screen > i { display: block; height: 2px; width: 100%; border-radius: 1px; background: #507972; }
.hf-node-screen > i:nth-child(2) { width: 65%; }
.hf-node-screen b { position: absolute; inset: 4px 0 auto; text-align: center; font-size: 16px; color: var(--hf-tint); font-weight: 400; opacity: 0; animation: hf-verified 6s ease-in-out infinite; animation-delay: calc(var(--hf-row) * -.52s + var(--hf-col) * -.16s); }
.hf-node-browser .hf-node-screen { padding-top: 6px; gap: 3px; }
.hf-node-browser .hf-node-screen b { font-size: 12px; top: 0; }
.hf-node-progress { position: absolute; bottom: 5px; left: 18%; width: 64%; height: 2px; background: #30564b; }
.hf-node-progress::after { content: ""; display: block; width: 100%; height: 100%; background: var(--hf-tint); box-shadow: 0 0 5px var(--hf-tint); transform-origin: left; animation: hf-progress 6s ease-in-out infinite; animation-delay: calc(var(--hf-row) * -.52s + var(--hf-col) * -.16s); }
.hf-node-browser .hf-node-progress { bottom: 3px; }
.hf-array-scan { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hf-tint), transparent); box-shadow: 0 0 20px 4px color-mix(in srgb, var(--hf-tint) 25%, transparent); pointer-events: none; animation: hf-array-scan 6s ease-in-out infinite; animation-delay: calc(var(--hf-platform) * -.6s); }
.hf-results { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: min(380px, 80%); border: 1px solid #3b776455; border-radius: 24px; padding: 6px 16px; margin: -5px auto 0; background: #0a201bcc; box-shadow: 0 0 40px #49efba08; }
.hf-result-check { display: grid; place-items: center; color: #77ffd0; font-size: 13px; flex-shrink: 0; }
.hf-phase-labels { position: relative; min-width: 0; display: grid; align-items: center; min-height: 20px; }
.hf-phase-labels > span { grid-area: 1/1; text-align: center; font-size: 14px; color: #c4eddd; line-height: 1.5; opacity: 0; animation: hf-phase 9s infinite; animation-delay: calc(var(--hf-phase) * 3s); }
.hf-result-bars { display: flex; align-items: center; gap: 2px; height: 13px; }
.hf-result-bars i { width: 2px; height: 7px; border-radius: 3px; background: #55bf9c; animation: hf-bars 2.5s infinite alternate; }
.hf-result-bars i:nth-child(2n) { height: 12px; animation-delay: -.7s; }
.hf-result-bars i:nth-child(3n) { height: 4px; animation-delay: -1.3s; }
.hf-network figcaption { margin-top: 13px; text-align: center; color: #b8d6cc; font-size: 16px; line-height: 1.7; }
.hf-next { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 88%; margin: 24px auto 0; color: #b3d3c8; font-size: 16px; font-weight: 600; line-height: 1.7; text-align: center; text-decoration: none; }
.hf-next span { color: #74cfb2; }
.hf-next:hover { color: #d1f9ea; }
.home-fleet[dir="rtl"] .hf-copy { direction: rtl; }
.home-fleet[dir="rtl"] .hf-network { direction: ltr; }
/* Preserve the previous marketing hero below this new opening. */
.qqk-public-copy .figma-home .hf-legacy-title { margin: 36px auto 20px; color: #f0f4ff; font-size: clamp(48px, 4.2vw, 64px); line-height: 1.08; font-weight: 900; letter-spacing: 0; }
.qqk-public-copy .figma-home .hf-legacy-title strong { display: inline-block; font-weight: 900; white-space: nowrap; color: transparent; background: linear-gradient(90deg, #00d4a4, #3b82f6 58%, #7c3aed); background-clip: text; -webkit-background-clip: text; }
body:not([data-locale="zh"]):not([data-locale="zh-TW"]) .qqk-public-copy .figma-home .hf-legacy-title strong { white-space: normal; overflow-wrap: break-word; }
.hero-copy .hf-fallback-title { margin: 28px 0 24px; font-size: clamp(50px, 4.25vw, 66px); line-height: 1.09; letter-spacing: -.055em; font-weight: 900; }
.hero-copy .hf-fallback-title strong { color: var(--green); }
#marketing-execution { scroll-margin-top: 80px; }
@keyframes hf-dispatch { to { stroke-dashoffset: -476; } }
@keyframes hf-step { 0%, 29% { opacity: 1; box-shadow: 0 0 9px #5ce7ad88; } 33.34%, 100% { opacity: .25; box-shadow: none; } }
@keyframes hf-orbit { to { transform: rotate(360deg); } }
@keyframes hf-core { 0%, 100% { box-shadow: 0 0 35px #4affb83b, 0 0 90px #29e9a71c, inset 0 0 22px #49efba22; } 45% { box-shadow: 0 0 50px #4affb86b, 0 0 120px #29e9a73c, inset 0 0 32px #49efba44; } }
@keyframes hf-node-glow { 0%, 12%, 100% { border-color: #35645c; } 36%, 70% { border-color: var(--hf-tint); box-shadow: 0 0 12px color-mix(in srgb, var(--hf-tint) 30%, transparent); } }
@keyframes hf-progress { 0%, 10% { transform: scaleX(.08); opacity: .6; } 70%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.08); opacity: .6; } }
@keyframes hf-verified { 0%, 58%, 100% { opacity: 0; } 68%, 90% { opacity: 1; background: #102826; } }
@keyframes hf-array-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .6; } 100% { transform: translateY(245px); opacity: 0; } }
@keyframes hf-phase { 0%, 30% { opacity: 1; } 33.34%, 100% { opacity: 0; } }
@keyframes hf-bars { 0%, 100% { transform: scaleY(.5); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
/* Keep the user's 100px navigation spacing on wide screens, adapt on smaller laptops. */
@media (min-width: 1101px) and (max-width: 1600px) {
  body:has(.home-fleet) .site-header { column-gap: clamp(16px, calc((100vw - 1100px) * .12), 60px); }
  body:has(.home-fleet) .site-nav { column-gap: 12px; }
  body:has(.home-fleet) .site-nav :is(a, summary) { font-size: 13px; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  body:has(.home-fleet) .site-nav { column-gap: 10px; }
  body:has(.home-fleet) .site-nav :is(a, summary) { font-size: 12px; }
}
@media (min-width: 761px) and (max-height: 950px) {
  .home-fleet { padding-top: 25px; }
  .home-fleet h1 { font-size: clamp(40px, 4vw, 60px); }
  .hf-node:nth-of-type(n+26) { display: none; }
  .hf-controller { min-height: 144px; }
  .hf-next { margin-top: 18px; }
}
@media (max-width: 1100px) {
  .home-fleet { padding-top: 36px; }
  .hf-layout { width: 90%; }
  .home-fleet h1 { font-size: clamp(40px, 5.2vw, 58px); }
  .hf-description { font-size: 15px; }
  .hf-fleets { gap: 19px; }
  .hf-devices { gap: 10px 6px; }
  .hf-node { height: 44px; max-width: 24px; }
  .hf-node-browser { height: 25px; }
  .hf-fleet:first-child .hf-devices { row-gap: 20px; padding-block: 24px 20px; }
  .hf-network-top { font-size: 10px; }
  .qqk-public-copy .figma-home .hf-legacy-title { font-size: 44px; }
}
@media (max-width: 760px) {
  .home-fleet { padding-top: 38px; }
  .hf-layout { width: 88%; gap: 28px; }
  .home-fleet h1 { max-width: 22ch; font-size: clamp(34px, 6.7vw, 48px); line-height: 1.18; }
  .home-fleet[lang="zh-CN"] h1, .home-fleet[lang="zh-TW"] h1 { max-width: none; font-size: clamp(31px, 7.4vw, 48px); }
  .hf-eyebrow { margin-bottom: 19px; font-size: 10px; letter-spacing: .07em; }
  .hf-description { margin-top: 17px; font-size: 14px; line-height: 1.85; }
  .hf-actions { margin-top: 22px; }
  .hf-button { font-size: 13px; gap: 18px; padding-inline: 19px; }
  .hf-platforms { margin-top: 18px; gap: 18px; }
  .hf-network { padding-top: 17px; }
  .hf-network-top { display: none; }
  .hf-scale { top: 27px; left: -2%; max-width: 30%; }
  .hf-scale strong { font-size: 30px; }
  .hf-scale strong > span { font-size: 14px; }
  .hf-scale > span { font-size: 11px; }
  .hf-task-flow { top: 23px; right: -2%; width: 25%; }
  .hf-task-flow > strong { font-size: 11px; line-height: 1.4; margin-bottom: 7px; overflow-wrap: anywhere; }
  .hf-task-flow ol { gap: 5px; }
  .hf-task-flow li { padding: 4px 6px; gap: 5px; }
  .hf-task-flow li > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .hf-task-flow b { font-size: 10px; }
  .hf-controller { min-height: 139px; width: 53%; }
  .hf-ai { width: 62px; height: 62px; font-size: 27px; border-radius: 19px; }
  .hf-orbit { width: 86px; height: 86px; margin-left: -43px; top: -5px; }
  .hf-orbit-two { width: 111px; height: 111px; margin-left: -55.5px; top: -17px; }
  .hf-controller > div { margin-top: 16px; }
  .hf-controller strong { font-size: 16px; }
  .hf-controller > div > span { font-size: 12px; }
  .hf-routes { height: 38px; }
  .hf-fleets { gap: 12px; }
  .hf-fleet-label { gap: 5px; margin-bottom: 11px; }
  .hf-fleet-label svg { width: 14px; height: 14px; }
  .hf-fleet-label strong { font-size: 16px; }
  .hf-fleet-label > span { display: none; }
  .hf-devices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 5px; padding-inline: 3px; }
  .hf-node:nth-of-type(n+18) { display: none; }
  .hf-node { height: 36px; max-width: 20px; border-radius: 4px; }
  .hf-node-browser { height: 22px; max-width: none; }
  .hf-fleet:first-child .hf-devices { row-gap: 17px; padding-block: 20px; }
  .hf-node-screen { padding-top: 6px; gap: 3px; }
  .hf-node-progress { bottom: 3px; }
  .hf-node-screen b { font-size: 12px; top: 2px; }
  .hf-results { margin-top: -11px; width: min(320px, 92%); padding-block: 7px; }
  .hf-phase-labels > span { font-size: 12px; }
  .hf-network figcaption { font-size: 14px; max-width: 92%; margin-inline: auto; }
  .hf-next { margin-top: 20px; font-size: 14px; }
  .qqk-public-copy .figma-home .hf-legacy-title { font-size: 40px; }
  .qqk-public-copy .figma-home .hf-legacy-title strong { white-space: normal; }
}
@media (max-width: 380px) {
  .home-fleet h1 { font-size: 31px; }
  .hf-scale strong { font-size: 26px; }
  .hf-fleets { gap: 9px; }
  .hf-fleet-label strong { font-size: 14px; }
  .hf-node { height: 31px; }
  .hf-node-browser { height: 21px; }
  .hf-node-screen > i { height: 1px; }
  .hf-fleet:first-child .hf-devices { row-gap: 14px; padding-block: 20px 18px; }
  .hf-button { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-fleet *, .home-fleet *::before, .home-fleet *::after { animation: none !important; transition: none !important; }
  .hf-phase-labels > span { opacity: 0; }
  .hf-phase-labels > span:last-child { opacity: 1; }
  .hf-node-screen b { opacity: 1; background: #102826; }
  .hf-route-flow { stroke-dasharray: none; opacity: .65; }
  .hf-array-scan { display: none; }
  .hf-task-flow li > i { opacity: 1; }
}