/* Homepage, third design. The "Netdata Home v2" mockup's stylesheet, scoped to .nd-home so it
   cannot restyle the banner, footer, demo modal or search that the homepage shares with the
   site. Generated once from the mockup; edit here from now on. */
/* Layout: one static first screen over a live "haystack" of per-second metrics; then five short sections, each one screen or less. Committed dark look. */
.nd-home {
  --bg: #05080a; --bg-2: #090d10; --bg-3: #10171b;
  --fg: #edf2ef; --fg-2: #a1aea8; --fg-3: #66746e;
  --line: rgba(161,174,168,.15); --line-2: rgba(161,174,168,.28);
  --signal: #00ab44; --signal-hi: #3ddc84; --warn: #f2a93b;
  --display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --max: 1280px; --hh: 58px;
  color-scheme: dark;
}
.nd-home, .nd-home * { box-sizing: border-box; }
html, body { background: #05080a; }
body { margin: 0; overflow-x: hidden; }
.nd-home { color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 80; background: #05080a; }
.nd-home a { color: inherit; text-decoration: none; }
.nd-home a:focus-visible, .nd-home button:focus-visible, .nd-home label:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 3px; }
.nd-home h1, .nd-home h2, .nd-home h3, .nd-home h4, .nd-home p, .nd-home ul { margin: 0; }
.nd-home ul { padding: 0; list-style: none; }
.nd-home button { font: inherit; color: inherit; }
.nd-home .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.nd-home .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.nd-home .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nd-home .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 6px; font-weight: 600; font-size: 15px; line-height: 1.2; border: 1px solid var(--line-2); color: var(--fg); background: rgba(5,8,10,.4); cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.nd-home .btn:hover { border-color: var(--fg-3); background: rgba(255,255,255,.04); }
.nd-home .btn.primary { background: var(--signal); border-color: var(--signal); color: #031208; }
.nd-home .btn.primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.nd-home .btn.sm { padding: 7px 12px; font-size: 14px; }
.nd-home .btn svg { width: 14px; height: 14px; }
.nd-home .arrow { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; color: var(--fg); border-bottom: 1px solid var(--signal); padding-bottom: 2px; }
.nd-home .arrow:hover { color: var(--signal-hi); }
.nd-home h2 .w, .nd-home h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.nd-home h2 .w > span { display: inline-block; }
.nd-home [data-fade], .nd-home [data-fade][data-stagger] > * { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.nd-home [data-fade][data-stagger] { transition: none; }
.nd-home [data-fade][data-stagger] > :nth-child(2) { transition-delay: .06s; } .nd-home [data-fade][data-stagger] > :nth-child(3) { transition-delay: .12s; } .nd-home [data-fade][data-stagger] > :nth-child(4) { transition-delay: .18s; } .nd-home [data-fade][data-stagger] > :nth-child(5) { transition-delay: .24s; }
.nd-home [data-fade].rv:not([data-stagger]):not(.in), .nd-home [data-fade][data-stagger].rv:not(.in) > * { opacity: 0; transform: translateY(18px); }
.nd-home [data-rise] .w > span { transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 35ms); }
.nd-home [data-rise].rv:not(.in) .w > span { transform: translateY(112%); }

/* ---------- hero ---------- */
.nd-home .hero { position: relative; z-index: 2; overflow: hidden; display: flex; min-height: min(calc(100svh - var(--hh)), 900px); background: var(--bg); }
.nd-home .wall { position: absolute; inset: 0; z-index: 0; }
.nd-home .wall-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transition: opacity 1s .3s; }
.nd-home .wall-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; }
.nd-home .wall-on .wall-gl { opacity: 1; }
.nd-home .wall-on .wall-poster { opacity: 0; }
.nd-home .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --edge: max(var(--gl), calc((100vw - var(--max)) / 2 + var(--gl)));
  background: linear-gradient(90deg, rgba(5,8,10,.97) 0, rgba(5,8,10,.95) calc(var(--edge) + 500px), rgba(5,8,10,.55) calc(var(--edge) + 660px), transparent calc(var(--edge) + 860px)), linear-gradient(0deg, var(--bg) 0%, rgba(5,8,10,.55) 11%, transparent 24%); }
.nd-home .hero-in { position: relative; z-index: 3; width: 100%; display: grid; grid-template-rows: 1fr auto; gap: 28px; padding-block: 56px 22px; }
.nd-home .hero-main { align-self: center; max-width: 610px; display: grid; gap: 20px; }
.nd-home .hero h1 { max-width: 9.6em; }
@media (min-width: 900px) { .nd-home .hero .sub span { display: block; } }
.nd-home .hero h1 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.0; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.nd-home .hero h1 em { font-style: normal; color: var(--signal-hi); }
.nd-home .hero .sub { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; color: var(--fg); }
.nd-home .hero .txt { font-size: 17px; color: var(--fg-2); max-width: 56ch; }
.nd-home .hero .proof { color: var(--signal-hi); font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; }
.nd-home .hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.nd-home .hero .ctas .arrow { margin-left: 8px; }
.nd-home .hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--fg-3); }
.nd-home .trusted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; }
.nd-home .trusted .names { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: #7d8a84; }
.nd-home .wall-cap { color: var(--fg-3); margin-left: auto; text-align: right; }
.nd-home .reticle { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s; }
.nd-home .reticle.on { opacity: 1; }
.nd-home .reticle i { position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--warn); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.nd-home .reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; transform: translate(-12px,-12px); }
.nd-home .reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; transform: translate(12px,-12px); }
.nd-home .reticle i:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; transform: translate(12px,12px); }
.nd-home .reticle i:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; transform: translate(-12px,12px); }
.nd-home .reticle.on i { transform: none; }
.nd-home .reticle .tag { position: absolute; left: -1px; bottom: calc(100% + 14px); width: 236px; background: rgba(5,8,10,.94); border: 1px solid rgba(242,169,59,.7); border-radius: 6px; padding: 10px 11px 9px; display: grid; gap: 7px; opacity: 0; transform: translateY(6px); transition: opacity .3s .25s, transform .3s .25s; }
.nd-home .reticle .tag::after { content: ""; position: absolute; left: 14px; top: 100%; width: 1px; height: 14px; background: rgba(242,169,59,.7); }
.nd-home .reticle .tag canvas { width: 100%; height: 54px; display: block; }
.nd-home .reticle.on .tag { opacity: 1; transform: none; }
.nd-home .reticle.flip .tag { left: auto; right: -1px; }
.nd-home .reticle.flip .tag::after { left: auto; right: 14px; }
.nd-home .reticle .tag b { color: var(--warn); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nd-home .reticle .tag span { color: var(--fg-2); font-size: 12px; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .nd-home .hero-main > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .nd-home .hero-main > :nth-child(2) { animation-delay: .08s; } .nd-home .hero-main > :nth-child(3) { animation-delay: .14s; } .nd-home .hero-main > :nth-child(4) { animation-delay: .2s; } .nd-home .hero-main > :nth-child(5) { animation-delay: .26s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 899px) {
  .nd-home .hero { min-height: 0; }
  .nd-home .hero-in { padding-block: 36px 18px; gap: 0; }
  .nd-home .hero-main { gap: 16px; padding-bottom: min(46vh, 340px); }
  .nd-home .hero-veil { background: linear-gradient(180deg, rgba(5,8,10,.97) 0%, rgba(5,8,10,.9) 52%, rgba(5,8,10,.2) 70%, transparent 82%), linear-gradient(0deg, var(--bg) 0%, transparent 14%); }
  .nd-home .wall-poster { object-position: 60% 100%; }
  .nd-home .wall-cap { display: none; }
  .nd-home .reticle .tag span { display: none; }
}

/* ---------- sections ---------- */
.nd-home .sec { position: relative; z-index: 2; padding-block: 92px; border-top: 1px solid var(--line); background: var(--bg); scroll-margin-top: var(--hh); }
.nd-home .sec.alt { background: var(--bg-2); }
.nd-home .eyebrow { color: var(--signal-hi); display: block; margin-bottom: 18px; }
.nd-home .sec h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.nd-home .lede { color: var(--fg-2); font-size: 18px; max-width: 54ch; }
.nd-home .head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 56px; align-items: end; }
@media (max-width: 899px) { .nd-home .sec { padding-block: 72px; } .nd-home .head { grid-template-columns: 1fr; } }

/* ---------- anomaly detection ---------- */
.nd-home .find { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.nd-home .find-copy { display: grid; gap: 20px; }
.nd-home .find-copy h2 { font-size: clamp(30px, 3.2vw, 46px); }
.nd-home .find-copy h2 em { font-style: normal; color: var(--warn); }
.nd-home .how { display: grid; border-top: 1px solid var(--line); margin-top: 8px; }
.nd-home .how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nd-home .how svg { width: 18px; height: 18px; stroke: var(--signal-hi); fill: none; stroke-width: 1.5; margin-top: 3px; }
.nd-home .how b { font-weight: 600; font-size: 17px; }
.nd-home .how span { grid-column: 2; color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.nd-home .hay { border: 1px solid var(--line-2); border-radius: 10px; background: #060a0c; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.nd-home .hay-top, .nd-home .hay-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 11px 14px; flex-wrap: wrap; }
.nd-home .hay-top { border-bottom: 1px solid var(--line); color: var(--fg-3); }
.nd-home .hay-top b { color: var(--fg); font-weight: 500; }
.nd-home .hay-ctl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nd-home .hay-new { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--fg-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nd-home .hay-new:hover { color: var(--fg); border-color: var(--line-2); }
.nd-home .hay-new svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.nd-home .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px 6px 11px; cursor: pointer; font-size: 13.5px; font-weight: 600; overflow: hidden; }
.nd-home .switch:hover { border-color: var(--fg-3); }
.nd-home .sw-track { width: 34px; height: 20px; border-radius: 20px; background: #26302f; position: relative; transition: background .25s; flex: none; }
.nd-home .sw-thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.nd-home .switch[aria-checked="true"] .sw-track { background: var(--signal); }
.nd-home .switch[aria-checked="true"] .sw-thumb { transform: translateX(14px); }
.nd-home .switch::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--signal-hi); transform: scaleX(0); transform-origin: left; }
.nd-home .hay.auto .switch::after { animation: fillbar 6.5s linear forwards; }
@keyframes fillbar { to { transform: scaleX(1); } }
.nd-home .hay-stage { position: relative; height: clamp(360px, 54vh, 540px); }
.nd-home .hay-stage canvas#hay-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.nd-home .hay-card { position: absolute; z-index: 2; width: 300px; background: rgba(7,11,13,.97); border: 1px solid rgba(242,169,59,.65); border-radius: 8px; padding: 12px; display: grid; gap: 10px; box-shadow: 0 24px 50px rgba(0,0,0,.6); pointer-events: none; }
.nd-home .hay-card .hc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nd-home .hay-card .hc-top b { color: var(--warn); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nd-home .hay-card .hc-top span { color: var(--fg-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nd-home .hay-card canvas { width: 100%; height: 132px; display: block; }
.nd-home .hay-card .hc-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fg-2); font-size: 12px; }
.nd-home .hay-card .hc-leg i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; vertical-align: 0; border-radius: 1px; }
.nd-home .hay-card .hc-leg .l1 { background: rgba(0,171,68,.3); outline: 1px dashed rgba(61,220,132,.6); }
.nd-home .hay-card .hc-leg .l2 { background: var(--warn); }
.nd-home .hay-bot { border-top: 1px solid var(--line); min-height: 48px; }
.nd-home #hay-status { font-size: 14.5px; color: var(--fg); min-width: 0; flex: 1 1 240px; }
.nd-home #hay-timer { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.nd-home #hay-timer.hit { color: var(--warn); }
.nd-home .hay-note { margin-top: 12px; color: var(--fg-3); font-size: 13px; }
@media (max-width: 899px) { .nd-home .find { grid-template-columns: 1fr; gap: 36px; } .nd-home .hay-stage { height: 440px; } }
@media (max-width: 560px) { .nd-home .hay-card canvas { height: 96px; } .nd-home .hay-card { padding: 10px; gap: 8px; } }

/* ---------- platform ---------- */
.nd-home .stack { position: relative; margin-top: 36px; border-top: 1px solid var(--line); }
.nd-home .stack::before { content: ""; position: absolute; left: 34px; top: -14px; bottom: -14px; width: 1px; background: linear-gradient(180deg, transparent, var(--fg) 8%, var(--fg) 92%, transparent); box-shadow: 0 0 12px rgba(237,242,239,.5); opacity: 0; transition: opacity .5s; pointer-events: none; }
.nd-home .stack[data-open="netdata-ai"]::before { opacity: .75; }
.nd-home .layer { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + 12px); }
.nd-home .layer-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 26px; gap: 8px 20px; align-items: center; width: 100%; padding: 17px 0; cursor: pointer; text-align: left; background: none; border: 0; }
.nd-home .layer-no { color: var(--fg-3); transition: color .3s; }
.nd-home .layer-title { display: grid; gap: 3px; min-width: 0; }
.nd-home .layer-name { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; color: var(--fg-2); transition: color .3s; }
.nd-home .layer-line { color: var(--fg-3); font-size: 15px; transition: color .3s; }
.nd-home .layer.is-open .layer-no { color: var(--signal-hi); }
.nd-home .layer.is-open .layer-name, .nd-home .layer-head:hover .layer-name { color: var(--fg); }
.nd-home .layer.is-open .layer-line, .nd-home .layer-head:hover .layer-line { color: var(--fg-2); }
.nd-home .logos { display: flex; gap: 6px; flex-wrap: nowrap; }
.nd-home .lg { position: relative; flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg); filter: grayscale(1); opacity: .42; transition: filter .35s, opacity .35s, transform .35s; }
.nd-home .lg svg { width: 20px; height: 20px; display: block; }
.nd-home .lg i { font: 500 9px var(--mono); color: var(--fg-3); font-style: normal; letter-spacing: 0; }
.nd-home .lg.ok i { display: none; }
.nd-home .layer.is-open .lg, .nd-home .layer-head:hover .lg, .nd-home .lg.live { filter: none; opacity: 1; }
.nd-home .layer-chev { width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; position: relative; justify-self: end; }
.nd-home .layer-chev::before, .nd-home .layer-chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--fg-2); transform: translate(-50%,-50%); transition: transform .3s; }
.nd-home .layer-chev::after { transform: translate(-50%,-50%) rotate(90deg); }
.nd-home .layer.is-open .layer-chev::after { transform: translate(-50%,-50%) rotate(0deg); }
.nd-home .layer-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.js .nd-home .layer:not(.is-open) .layer-body { grid-template-rows: 0fr; }
.nd-home .layer-body-in { overflow: hidden; min-height: 0; }
.nd-home .layer-detail { display: grid; grid-template-columns: 56px minmax(0, 6fr) minmax(0, 5fr); gap: 20px 20px; padding: 6px 0 30px; align-items: start; }
.nd-home .layer-detail > .pts { grid-column: 2; display: grid; gap: 18px; align-content: start; }
.nd-home .pts ul { display: grid; gap: 9px; }
.nd-home .pts li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; color: var(--fg); font-size: 16px; }
.nd-home .pts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-top: 10px; }
.nd-home .pts .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nd-home .rec { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border: 1px dashed rgba(61,220,132,.4); border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(61,220,132,.035) 0 10px, transparent 10px 20px), rgba(5,8,10,.6); display: grid; place-content: center; text-align: center; gap: 6px; padding: 14px; }
.nd-home .rec b { font-weight: 600; font-size: 15px; color: var(--fg); }
.nd-home .rec span { color: var(--fg-3); }
.nd-home .rec .mono:first-child { color: var(--signal-hi); }
.nd-home .layer-detail .rec { max-width: 340px; justify-self: end; width: 100%; }
.nd-home .stack-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; color: var(--fg-3); font-size: 14.5px; }
@media (max-width: 1000px) {
  .nd-home .layer-head { grid-template-columns: 34px minmax(0, 1fr) 26px; }
  .nd-home .layer-head .logos { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; }
  .nd-home .lg { width: 34px; height: 34px; } .nd-home .lg svg { width: 18px; height: 18px; }
  .nd-home .layer-detail { grid-template-columns: 34px minmax(0, 1fr); }
  .nd-home .layer-detail .rec { grid-column: 2; justify-self: start; }
  .nd-home .stack::before { left: 12px; }
}

/* ---------- AI ---------- */
.nd-home .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.nd-home .way { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 22px 22px 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.nd-home .way .dg { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.nd-home .way .tag { color: var(--signal-hi); }
.nd-home .way h3 { font-size: 26px; line-height: 1.1; font-weight: 500; letter-spacing: -.025em; }
.nd-home .way p { color: var(--fg-2); font-size: 16px; }
.nd-home .way .logos { flex-wrap: wrap; margin-top: 2px; }
.nd-home .dg .grid { fill: url(#hay-dots); }
.nd-home .dg .ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.nd-home .dg .ink { fill: var(--fg); } .nd-home .dg .ink-l { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.nd-home .dg .ask { fill: none; stroke: var(--fg-2); stroke-width: 1.2; stroke-dasharray: 3 4; }
.nd-home .dg .ans { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.nd-home .dg .needle { fill: var(--warn); }
.nd-home .dg .halo { fill: none; stroke: var(--warn); stroke-width: 1; opacity: .5; }
.nd-home .dg .c-ring { fill: none; stroke: var(--fg); stroke-width: 1.4; } .nd-home .dg .c-dot { fill: var(--fg); }
.nd-home .dg text { font: 500 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--fg-3); text-anchor: middle; }
.nd-home .dg .sweep { fill: none; stroke: var(--signal-hi); stroke-width: 1.6; stroke-linecap: round; transform-origin: 30px 46px; }
.nd-home .dg .agent { fill: var(--bg-3); stroke: var(--line-2); }
@media (prefers-reduced-motion: no-preference) {
  .nd-home .dg .ask-m { clip-path: inset(0 100% 0 0); animation: dg-ask 7s infinite; }
  .nd-home .dg .ans { animation: dg-ans 7s infinite; }
  .nd-home .dg .cause { animation: dg-cause 7s infinite; }
  .nd-home .dg .halo { animation: dg-halo 1.8s infinite; transform-origin: 186px 46px; }
  .nd-home .dg .sweep { animation: dg-spin 2.4s linear infinite; }
  .nd-home .dg-own .needle, .nd-home .dg-own .halo { animation: dg-appear 7s infinite; }
  .nd-home .dg-own .halo { animation: dg-halo 1.8s infinite, dg-appear 7s infinite; }
  @keyframes dg-ask { 0%, 4% { clip-path: inset(0 100% 0 0); } 26%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
  @keyframes dg-ans { 0%, 32% { stroke-dashoffset: 1; opacity: 1; } 54%, 94% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes dg-cause { 0%, 52% { opacity: .2; } 60%, 94% { opacity: 1; } 100% { opacity: .2; } }
  @keyframes dg-halo { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
  @keyframes dg-spin { to { transform: rotate(360deg); } }
  @keyframes dg-appear { 0%, 12% { opacity: 0; } 18%, 94% { opacity: 1; } 100% { opacity: 0; } }
}
.nd-home .asks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.nd-home .asks li { font-size: 13.5px; color: var(--fg); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 11px; background: var(--bg-3); }
.nd-home .asks:not(.plain) li::before { content: "\201C"; color: var(--fg-3); } .nd-home .asks:not(.plain) li::after { content: "\201D"; color: var(--fg-3); }
.nd-home .asks.plain li { color: var(--fg-2); }
.nd-home .tools { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-home .tools li { font-family: var(--mono); font-size: 11px; color: var(--fg-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; background: var(--bg-3); }
.nd-home .ai-foot { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; }
.nd-home .ai-foot p { color: var(--fg-2); }
.nd-home .ai-foot .rec { aspect-ratio: 21 / 7; }
@media (max-width: 1000px) { .nd-home .ways { grid-template-columns: 1fr; } .nd-home .way .dg { max-width: 420px; } .nd-home .ai-foot { grid-template-columns: 1fr; } }

/* ---------- your data ---------- */
.nd-home .keep { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.nd-home .keep-copy { display: grid; gap: 24px; }
.nd-home .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.nd-home .opts > div { background: var(--bg); padding: 18px 18px 20px; display: grid; gap: 6px; align-content: start; }
.nd-home .opts b { font-weight: 600; font-size: 17px; }
.nd-home .opts span { color: var(--fg-2); font-size: 15px; }
.nd-home .dd { width: 100%; height: auto; display: block; }
.nd-home .dd-cap { display: none; color: var(--fg-2); font-size: 15px; margin-top: 12px; }
@media (max-width: 560px) { .nd-home .dd-wrap { overflow: hidden; } .nd-home .dd { width: 139%; max-width: none; } .nd-home .dd .dd-out { display: none; } .nd-home .dd-cap { display: block; } }
.nd-home .dd .bound { fill: rgba(0,171,68,.035); stroke: var(--signal); stroke-width: 1.2; stroke-dasharray: 5 6; }
.nd-home .dd .node { fill: var(--bg-3); stroke: var(--line-2); }
.nd-home .dd .spark { fill: none; stroke: #2fcf74; stroke-width: 1.4; stroke-linejoin: round; }
.nd-home .dd .disk { fill: none; stroke: var(--fg-2); stroke-width: 1.1; }
.nd-home .dd text { font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; fill: var(--fg-3); }
.nd-home .dd .t-hi { fill: var(--signal-hi); }
.nd-home .dd .t-fg { fill: var(--fg); font: 600 13px var(--display); letter-spacing: 0; text-transform: none; }
.nd-home .dd .pill { fill: var(--bg); stroke: var(--line-2); }
.nd-home .dd .q { fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-dasharray: 4 5; }
.nd-home .dd .qh { fill: var(--fg); }
@media (prefers-reduced-motion: no-preference) { .nd-home .dd .q { animation: march 1.2s linear infinite; } .nd-home .dd .pulse { animation: blink 1s infinite; } @keyframes march { to { stroke-dashoffset: -18; } } @keyframes blink { 0% { opacity: 1; } 100% { opacity: .25; } } }
.nd-home .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.nd-home .facts > div { background: var(--bg-2); padding: 24px 22px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.nd-home .facts .v { font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.nd-home .facts p { color: var(--fg-2); font-size: 15px; }
.nd-home .row-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 1000px) { .nd-home .keep { grid-template-columns: 1fr; gap: 36px; } .nd-home .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nd-home .facts, .nd-home .opts { grid-template-columns: 1fr; } }

/* ---------- close ---------- */
.nd-home .close { padding-block: 112px; overflow: hidden; }
.nd-home .close .wrap { position: relative; z-index: 1; }
.nd-home .close h2 { font-size: clamp(38px, 5.6vw, 84px); max-width: 16ch; line-height: .96; }
.nd-home .close .fine { margin-top: 18px; color: var(--fg-3); font-size: 15px; }

/* ---------- footer ---------- */
.nd-home footer.site-foot { position: relative; z-index: 2; background: #040607; border-top: 1px solid var(--line); padding-block: 64px 28px; }
.nd-home .fcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 36px 28px; }
.nd-home .fcols h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 12px; }
.nd-home .fcols ul { display: grid; gap: 7px; }
.nd-home .fcols a { color: var(--fg-2); font-size: 14px; }
.nd-home .fcols a:hover { color: var(--signal-hi); }
.nd-home .fcols a.moved { color: var(--fg); }
.nd-home .fbar { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; color: var(--fg-3); font-size: 14px; }
.nd-home .fbar .social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }
.nd-home .fbar a:hover { color: var(--fg); }

/* ---------- section rail ---------- */
.nd-home .rail { position: fixed; z-index: 40; right: max(14px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; justify-items: end; }
.nd-home .rail a { display: flex; align-items: center; gap: 10px; padding: 5px 2px 5px 8px; color: var(--fg-3); }
.nd-home .rail a span { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; background: rgba(5,8,10,.85); padding: 3px 6px; border-radius: 3px; white-space: nowrap; }
.nd-home .rail a i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--fg-3); transition: all .25s; flex: none; }
.nd-home .rail:hover a span, .nd-home .rail a:focus-visible span { opacity: 1; transform: none; }
.nd-home .rail a.on { color: var(--fg); } .nd-home .rail a.on i { background: var(--signal-hi); border-color: var(--signal-hi); box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.nd-home .rail a:hover { color: var(--fg); }
@media (max-width: 1280px) { .nd-home .rail { display: none; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ================= v3: stage, carousel, tour, borrowed sections ================= */
.nd-home #stage { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity .9s; pointer-events: none; }
.nd-home #stage > canvas { width: 100%; height: 100%; display: block; }
.nd-home .fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.nd-home .trace { position: absolute; inset: 0; width: 100%; height: 100%; }
.nd-home .trace line { stroke: var(--warn); stroke-width: 1.3; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0; transition: opacity .35s; }
.nd-home .trace.on line { opacity: .9; }
.gl .nd-home #stage.on { opacity: 1; }
.gl.product.in-tour .nd-home #stage.on { opacity: .14; }
.nd-home-main { position: relative; z-index: 2; }
.nd-home .sec, .nd-home .close, .nd-home footer.site-foot { position: relative; z-index: 3; }

/* hero over the stage */
.gl .nd-home .hero { background: transparent; }
.gl.stage-ready .nd-home .wall-poster { opacity: 0; }
.nd-home .hero { min-height: calc(100svh - var(--hh) - 62px); }
.nd-home .hero-main { max-width: min(610px, 46vw); }
.nd-home .hero-in { grid-template-rows: 1fr; padding-block: 48px 44px; }
.nd-home .hero-veil { background: linear-gradient(90deg, rgba(5,8,10,.96) 0, rgba(5,8,10,.93) calc(var(--edge) + 470px), rgba(5,8,10,.5) calc(var(--edge) + 640px), transparent calc(var(--edge) + 840px)), linear-gradient(0deg, var(--bg) 0%, rgba(5,8,10,.4) 7%, transparent 16%); }
.nd-home .hero-cap { position: absolute; right: max(var(--gr), calc((100vw - var(--max)) / 2 + var(--gr))); bottom: 16px; z-index: 3; color: var(--fg-3); display: none; }
.gl .nd-home .hero-cap { display: block; }
@media (max-width: 899px) {
  .nd-home .hero-cap { display: none !important; } .nd-home .hero { min-height: calc(100svh - var(--hh) - 96px); } .nd-home .hero-in { padding-block: 32px 18px; align-content: start; }
  .nd-home .hero-main { max-width: 610px; padding-bottom: min(36vh, 290px); align-self: start; }
  .nd-home .wall-poster { inset: auto 0 0 0; height: min(36vh, 290px); object-position: 85% 100%; }
  .nd-home .hero-veil { background: linear-gradient(180deg, rgba(5,8,10,.96) 0%, rgba(5,8,10,.94) calc(100% - 310px), rgba(5,8,10,.2) calc(100% - 262px), transparent calc(100% - 220px)), linear-gradient(0deg, var(--bg) 0%, transparent 8%); }
}

/* customer carousel */
.nd-home .band { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 18px var(--gr) 18px var(--gl); border-block: 1px solid var(--line); background: rgba(5,8,10,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--fg-3); }
.nd-home .band-clip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nd-home .marq { display: flex; gap: 64px; width: max-content; padding-right: 64px; font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: #8b9892; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .nd-home .marq { animation: marq 46s linear infinite; } .nd-home .band:hover .marq { animation-play-state: paused; } }
@keyframes marq { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .nd-home .band { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- platform tour ---------- */
.nd-home .tour { position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.nd-home .tour-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 22px; }
.nd-home .tour-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.nd-home .tour-title h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
.nd-home .tour-title .eyebrow { margin: 0 0 8px; }
.nd-home .tour-ctl { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.nd-home .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nd-home .tabs::-webkit-scrollbar { display: none; }
.nd-home .tab { position: relative; background: none; border: 0; padding: 12px 14px 14px; color: var(--fg-3); font: 500 15px var(--display); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 9px; align-items: baseline; transition: color .25s; }
.nd-home .tab .mono { color: inherit; font-size: 10px; }
.nd-home .tab i { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--signal-hi); transform: scaleX(0); transform-origin: left; }
.nd-home .tab.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: rgba(61,220,132,.28); }
.gl .nd-home .tab i { transform: scaleX(var(--p, 0)); }
.nd-home .tab.on { color: var(--fg); }
html:not(.gl) .nd-home .tab.on i { transform: scaleX(1); }
.nd-home .tab:hover { color: var(--fg); }
.nd-home .view { display: none; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 7px; padding: 3px; background: rgba(5,8,10,.6); flex: none; }
.gl .nd-home .view { display: inline-flex; }
.nd-home .view button { background: none; border: 0; padding: 6px 12px; border-radius: 5px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.nd-home .view button.on { background: var(--bg-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }

.nd-home .step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; padding-block: 44px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + 12px); }
.nd-home .step:first-child { border-top: 0; }
.nd-home .step-copy { display: grid; gap: 16px; align-content: start; min-width: 0; }
.nd-home .step-no { color: var(--signal-hi); }
.nd-home .step h3 { font-size: clamp(34px, 4.2vw, 62px); line-height: .98; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.nd-home .step-line { color: var(--fg-2); font-size: clamp(17px, 1.4vw, 19.5px); max-width: 40ch; }
.nd-home .step .pts ul { display: grid; gap: 8px; }
.nd-home .step .logos { flex-wrap: wrap; }
.nd-home .step .logos .lg { filter: none; opacity: 1; }
.nd-home .step-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 4px; }
.nd-home .see { display: none; }
.gl .nd-home .see { display: inline-flex; }
.nd-home .shot { margin: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #070b0d; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.nd-home .shot-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.nd-home .shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #26302f; }
.nd-home .shot-bar span { margin-left: 8px; }
.nd-home .shot .rec { border: 0; border-radius: 0; aspect-ratio: 16 / 9.4; }

/* pinned, scroll-driven mode */
.gl .nd-home .tour { height: 434vh; border-bottom: 0; }
.gl .nd-home .tour-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding-top: var(--hh); }
.gl .nd-home .tour-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; --edge: max(var(--gl), calc((100vw - var(--max)) / 2 + var(--gl)));
  background: linear-gradient(90deg, rgba(5,8,10,.95) 0, rgba(5,8,10,.86) calc(var(--edge) + 360px), rgba(5,8,10,.35) calc(var(--edge) + 560px), transparent calc(var(--edge) + 760px)), linear-gradient(180deg, rgba(5,8,10,.85) 0, transparent 22%); }
.gl .nd-home .tour-pin > .wrap { width: 100%; }
.gl .nd-home .steps { position: relative; min-height: 0; }
.gl .nd-home .step { position: absolute; inset: 0; left: var(--gl); right: var(--gr); border: 0; padding: 0 0 max(36px, 6vh); align-items: end; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.gl .nd-home .step.on { opacity: 1; visibility: visible; transition: opacity .5s .12s; }
.gl .nd-home .step-copy > * { transform: translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.gl .nd-home .step.on .step-copy > * { transform: none; opacity: 1; }
.gl .nd-home .step.on .step-copy > :nth-child(2) { transition-delay: .16s; } .gl .nd-home .step.on .step-copy > :nth-child(3) { transition-delay: .22s; } .gl .nd-home .step.on .step-copy > :nth-child(4) { transition-delay: .28s; } .gl .nd-home .step.on .step-copy > :nth-child(n+5) { transition-delay: .34s; }
.gl .nd-home .step .logos { display: none; }
.gl .nd-home .step .shot { align-self: center; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.gl.product .nd-home .step.on .shot { opacity: 1; transform: none; pointer-events: auto; }
.nd-home .scroll-cue { display: none; position: absolute; right: var(--gr); bottom: 22px; color: var(--fg-3); }
.gl .nd-home .scroll-cue { display: block; transition: opacity .4s; }
.gl .nd-home .tour:not([data-step="0"]) .scroll-cue, .gl.product .nd-home .scroll-cue { opacity: 0; }
@media (max-width: 899px) {
  .nd-home .step { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  .gl .nd-home .tour-pin::before { background: linear-gradient(0deg, rgba(5,8,10,.96) 0, rgba(5,8,10,.9) 40%, rgba(5,8,10,.25) 58%, transparent 70%), linear-gradient(180deg, rgba(5,8,10,.9) 0, transparent 26%); }
  .gl .nd-home .step { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-bottom: 22px; }
  .gl .nd-home .step-copy { grid-row: 2; gap: 10px; }
  .gl .nd-home .step .shot { grid-row: 1; align-self: center; }
  .gl .nd-home .step .pts { display: none; }
  .nd-home .step h3 { font-size: 34px; }
  .nd-home .tour-title h2 { font-size: 21px; }
  .nd-home .scroll-cue { display: none !important; }
  .gl .nd-home .view { display: none; }
  .nd-home .reticle .tag { bottom: auto; top: calc(100% + 12px); width: 204px; padding: 8px 10px; gap: 5px; }
  .nd-home .reticle .tag canvas { height: 40px; }
  .nd-home .reticle .tag::after { top: auto; bottom: 100%; height: 12px; }
  .nd-home .tab { padding: 10px 10px 12px; font-size: 14px; }
}

/* ---------- troubleshooting ---------- */
.nd-home .tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.nd-home .tcards > div { background: var(--bg); padding: 16px 16px 18px; display: grid; gap: 5px; align-content: start; }
.nd-home .tcards b { font-weight: 600; font-size: 16.5px; line-height: 1.25; }
.nd-home .tcards span { color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }
.nd-home .find .hay-stage { height: clamp(320px, 46vh, 470px); }
@media (max-width: 560px) { .nd-home .tcards { grid-template-columns: 1fr; } }

/* ---------- agents ---------- */
.nd-home .agents-row { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: var(--fg-3); }
.nd-home .agents-row .logos { flex-wrap: wrap; }
.nd-home .agents-row .lg { width: 44px; height: 44px; filter: none; opacity: 1; } .nd-home .agents-row .lg svg { width: 23px; height: 23px; }

/* ---------- integrations belt ---------- */
.nd-home .integ { overflow: hidden; }
.nd-home .integ-head { display: grid; justify-items: center; text-align: center; gap: 18px; }
.nd-home .integ-head .lede { max-width: 56ch; }
.nd-home .belt { margin-top: 44px; display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nd-home .belt-row { overflow: hidden; }
.nd-home .belt-track { display: flex; gap: 14px; width: max-content; padding-right: 14px; }
.nd-home .belt .lg { width: 68px; height: 68px; border-radius: 14px; filter: none; opacity: 1; background: var(--bg-2); }
.nd-home .belt .lg svg { width: 32px; height: 32px; }
.nd-home .belt .lg i { font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .nd-home .belt-track { animation: marq var(--d, 60s) linear infinite; }
  .nd-home .belt-row:nth-child(even) .belt-track { animation-direction: reverse; }
  .nd-home .belt:hover .belt-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .nd-home .belt-track { flex-wrap: wrap; width: auto; justify-content: center; } .nd-home .belt-track > [aria-hidden="true"] { display: none; } }
.nd-home .integ .row-ctas { justify-content: center; }

/* ---------- the full view ---------- */
.nd-home .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.nd-home .board > div { background: var(--bg-2); padding: 22px 20px 24px; min-width: 0; }
.nd-home .board h3 { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-hi); margin-bottom: 14px; }
.nd-home .board ul { display: grid; gap: 1px; }
.nd-home .board a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; color: var(--fg); font-size: 16px; border-bottom: 1px solid transparent; }
.nd-home .board a::after { content: "\2192"; color: var(--fg-3); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.nd-home .board a:hover { color: var(--signal-hi); } .nd-home .board a:hover::after { opacity: 1; transform: none; color: var(--signal-hi); }
@media (max-width: 1000px) { .nd-home .board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nd-home .board { grid-template-columns: 1fr; } }

/* ---------- open source ---------- */
.nd-home .oss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.nd-home .oss-copy { display: grid; gap: 22px; }
.nd-home .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nd-home .stats > div { background: var(--bg); padding: 26px 24px; display: grid; gap: 6px; }
.nd-home .stats .n { font-size: clamp(38px, 4.4vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.nd-home .stats .n small { font-size: .45em; color: var(--signal-hi); letter-spacing: 0; margin-left: 2px; }
.nd-home .stats span { color: var(--fg-2); font-size: 15px; }
.nd-home .cite { border-left: 2px solid var(--signal); padding: 2px 0 2px 16px; display: grid; gap: 4px; }
.nd-home .cite b { font-weight: 600; font-size: 17px; } .nd-home .cite span { color: var(--fg-3); font-size: 14px; }
@media (max-width: 899px) { .nd-home .oss { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- enterprise ---------- */
.nd-home .ent { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 44px; }
.nd-home .ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nd-home .ent-grid > div { background: var(--bg-2); padding: 20px 20px 22px; display: grid; gap: 6px; align-content: start; }
.nd-home .ent-grid b { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.nd-home .ent-grid span { color: var(--fg-2); font-size: 15px; line-height: 1.45; }
@media (max-width: 1000px) { .nd-home .ent { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .nd-home .ent-grid { grid-template-columns: 1fr; } }

/* ---------- customers ---------- */
.nd-home .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.nd-home .case { background: var(--bg); padding: 22px 22px 18px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; min-width: 0; transition: background .2s; }
.nd-home .case:hover { background: var(--bg-3); }
.nd-home .case-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nd-home .case-top b { font: 600 17px var(--display); letter-spacing: -.01em; }
.nd-home .case-top .mono { color: var(--fg-3); flex: none; }
.nd-home .case blockquote { margin: 0; font-family: var(--display); font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.36; letter-spacing: -.012em; color: var(--fg); quotes: "\201C" "\201D"; text-wrap: pretty; }
.nd-home .case blockquote::before { content: open-quote; color: var(--signal-hi); }
.nd-home .case blockquote::after { content: close-quote; color: var(--signal-hi); }
.nd-home .case .by { color: var(--fg-2); font-size: 14.5px; }
.nd-home .case .stat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.nd-home .case .stat .n { font: 500 32px/1 var(--display); letter-spacing: -.03em; color: var(--signal-hi); }
.nd-home .case .stat .what { color: var(--fg-2); font-size: 14.5px; line-height: 1.35; }
.nd-home .case .stat::after { content: "\2192"; color: var(--fg-3); transition: transform .2s, color .2s; }
.nd-home .case:hover .stat::after { color: var(--signal-hi); transform: translateX(3px); }
.nd-home .reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.nd-home .review { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.nd-home .review .r { display: flex; align-items: baseline; gap: 10px; }
.nd-home .review .r b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.nd-home .review .r span { color: var(--fg-3); font-size: 14px; }
.nd-home .review .src { font-weight: 600; font-size: 15px; }
.nd-home .review q, .nd-home .review .bdg { color: var(--fg-2); font-size: 14.5px; quotes: "\201C" "\201D"; }
.nd-home .stars { display: inline-flex; gap: 2px; } .nd-home .stars svg { width: 13px; height: 13px; fill: var(--warn); }
@media (max-width: 1000px) { .nd-home .cases { grid-template-columns: 1fr 1fr; } .nd-home .reviews { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .nd-home .cases { grid-template-columns: 1fr; } }


/* ================= type: the faces netdata.cloud uses today =================
   Geist for headings, ledes and figures. IBM Plex Sans for body and navigation. Geist Mono for labels. */
.nd-home h1, .nd-home h2, .nd-home h3, .nd-home .brand, .nd-home .hero .sub, .nd-home .hero .txt, .nd-home .lede, .nd-home .step-line, .nd-home .stats .n, .nd-home .review .r b, .nd-home .marq, .nd-home .facts .v, .nd-home .layer-name, .nd-home .cite b, .nd-home .close .fine { font-family: var(--display); }
.nd-home .mono, .nd-home .mm-col h4, .nd-home .fcols h4, .nd-home .board h3 { font-family: var(--mono); letter-spacing: .06em; font-weight: 500; }
.nd-home .hero h1 { font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.nd-home .sec h2 { font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.nd-home .step h3 { font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.nd-home .tour-title h2 { letter-spacing: -.025em; }
.nd-home .way h3 { letter-spacing: -.02em; }
.nd-home .hero .sub { letter-spacing: -.02em; }
.nd-home .stats .n { letter-spacing: -.04em; font-weight: 500; }
.nd-home .btn, .nd-home .arrow, .nd-home .tab, .nd-home .view button { font-family: var(--body); }


/* ================= v5: incident card, plain tour, advisor, platform map, terminal, quote carousel ================= */

/* ---------- hero: the incident card that follows the highlighted chart ---------- */
.nd-home .reticle .tag.inc { width: 310px; padding: 10px 12px 12px; gap: 9px; transition: opacity .3s .25s, transform .3s .25s, border-color .4s; }
.nd-home .inc-steps { display: flex; margin: 0; padding: 0; list-style: none; font: 500 9.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); }
.nd-home .inc-steps li { display: flex; align-items: center; white-space: nowrap; transition: color .3s; }
.nd-home .inc-steps li + li::before { content: ""; width: 7px; height: 1px; background: var(--line-2); margin: 0 5px; }
.nd-home .inc-steps li.done { color: var(--fg-2); }
.nd-home .inc-steps li.on { color: var(--warn); }
.nd-home .inc[data-stage="4"] { border-color: rgba(61,220,132,.75); }
.nd-home .inc[data-stage="4"]::after { background: rgba(61,220,132,.75); }
.nd-home .inc[data-stage="4"] .inc-steps li.on { color: var(--signal-hi); }
.nd-home .inc-body { display: grid; }
.nd-home .inc-p { grid-area: 1 / 1; display: grid; gap: 7px; align-content: start; opacity: 0; transition: opacity .35s; min-width: 0; }
.nd-home .inc[data-stage="0"] .inc-p[data-s="0"], .nd-home .inc[data-stage="1"] .inc-p[data-s="1"], .nd-home .inc[data-stage="2"] .inc-p[data-s="2"], .nd-home .inc[data-stage="3"] .inc-p[data-s="3"], .nd-home .inc[data-stage="4"] .inc-p[data-s="4"] { opacity: 1; }
.nd-home .reticle .tag .inc-p b { font: 600 13.5px/1.3 var(--body); color: var(--fg); letter-spacing: 0; text-transform: none; }
.nd-home .reticle .tag .inc-p span { font-size: 12.5px; color: var(--fg-2); line-height: 1.4; }
.nd-home .reticle .tag .inc-p canvas { height: 46px; }
.nd-home .inc-rows { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.nd-home .inc-rows li { display: flex; justify-content: space-between; gap: 10px; }
.nd-home .reticle .tag .inc-rows span, .nd-home .inc-tr span, .nd-home .inc-tr em { font: 500 11px/1.3 var(--mono); color: var(--fg-2); }
.nd-home .inc-rows em { font: 500 11px/1.3 var(--mono); font-style: normal; color: var(--warn); }
.nd-home .inc-p pre { margin: 0; font: 500 10.5px/1.6 var(--mono); color: var(--fg-2); white-space: pre-wrap; }
.nd-home .inc-tr { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.nd-home .inc-tr u { display: block; height: 7px; width: var(--w); background: rgba(161,174,168,.38); border-radius: 2px; text-decoration: none; }
.nd-home .inc-tr.child span { padding-left: 10px; }
.nd-home .inc-tr.child u { background: var(--warn); margin-left: 5%; width: calc(var(--w) - 5%); }
.nd-home .inc-tr em { font-style: normal; text-align: right; }
.nd-home .trace line { stroke: var(--signal-hi); stroke-dasharray: 2 5; }
.nd-home .trace circle { fill: none; stroke: var(--signal-hi); stroke-width: 1.4; opacity: 0; transition: opacity .3s; }
.nd-home .trace:not(.on) circle { opacity: 0 !important; }
@media (max-width: 599px) {
  .nd-home .reticle .tag.inc { padding: 8px 10px 9px; gap: 5px; right: auto; }
  .nd-home .reticle .tag.inc::after { display: none; }
  .nd-home .inc-steps li { display: none; } .nd-home .inc-steps li.on { display: flex; }
  .nd-home .inc-steps li + li::before { display: none; }
  .nd-home .reticle .tag .inc-p > :not(b):not(.inc-keep) { display: none; }
  .nd-home .reticle .tag .inc-p span.inc-keep { display: block; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .nd-home .reticle .tag.inc { width: 310px; padding: 10px 12px 12px; }
  .nd-home .reticle .tag .inc-p span { display: block; }
  .nd-home .reticle .tag .inc-p canvas { height: 46px; }
  .nd-home .hero-veil { background: linear-gradient(180deg, rgba(5,8,10,.96) 0, rgba(5,8,10,.94) 400px, rgba(5,8,10,.2) 500px, transparent 580px), linear-gradient(0deg, var(--bg) 0%, transparent 8%); }
}

/* ---------- platform tour: plain details, the dashboard video beside the 3D view ---------- */
.nd-home .tour-title h2 { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.02em; }
.nd-home .step { align-items: start; }
.nd-home .step h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; display: flex; gap: 12px; align-items: baseline; text-wrap: initial; }
.nd-home .step h3 .mono { color: var(--signal-hi); flex: none; }
.nd-home .step-line { font-family: var(--body); font-size: 16.5px; line-height: 1.5; color: var(--fg-2); max-width: 54ch; }
.nd-home .specs { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nd-home .specs li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.nd-home .specs b { font-weight: 600; color: var(--fg); }
.nd-home .specs span { color: var(--fg-2); }
.nd-home .arrow.sm { font-size: 14px; justify-self: start; }
.nd-home .media { margin: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #070b0d; box-shadow: 0 30px 70px -34px rgba(0,0,0,.9); min-width: 0; }
.nd-home .media .rec { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.nd-home .walk-body { padding: 14px 16px 16px; display: grid; gap: 11px; align-content: start; }
.nd-home .w-q { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: var(--fg); }
.nd-home .w-q .mono { color: var(--fg-3); flex: none; }
.nd-home .w-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nd-home .w-steps li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.nd-home .w-steps li::before { content: "\2713"; color: var(--signal-hi); font-size: 12px; line-height: 1.6; }
.nd-home .w-rc { border: 1px solid rgba(61,220,132,.42); border-radius: 8px; padding: 10px 12px 11px; display: grid; gap: 5px; background: rgba(61,220,132,.05); }
.nd-home .w-rc b { color: var(--signal-hi); font-weight: 500; }
.nd-home .w-rc p { font-size: 14.5px; line-height: 1.4; color: var(--fg); }
.nd-home .w-rc span { color: var(--fg-3); font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .nd-home .walk.play .w-q { animation: w-in .5s both; }
  .nd-home .walk.play .w-steps li { animation: w-in .45s both; }
  .nd-home .walk.play .w-steps li:nth-child(1) { animation-delay: .9s; } .nd-home .walk.play .w-steps li:nth-child(2) { animation-delay: 2s; } .nd-home .walk.play .w-steps li:nth-child(3) { animation-delay: 3.1s; }
  .nd-home .walk.play .w-rc { animation: w-in .6s 4.3s both; }
  @keyframes w-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* pinned mode: copy and video share the left column, the 3D view has the right */
.gl .nd-home .step { grid-template-columns: minmax(0, min(500px, 37vw)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 56px; row-gap: 18px; align-items: start; padding: clamp(14px, 3vh, 30px) 0 max(20px, 3.2vh); }
.gl .nd-home .step-copy { grid-column: 1; grid-row: 1; gap: 12px; }
.gl .nd-home .step .media { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; height: 100%; max-height: min(281px, calc(min(500px, 37vw) * 0.5625)); aspect-ratio: 16 / 9; max-width: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); opacity: 0; transform: translateY(12px); transition: opacity .5s .3s, transform .6s .3s cubic-bezier(.2,.7,.2,1); }
.gl .nd-home .step.on .media { opacity: 1; transform: none; }
.gl .nd-home .step .media .rec { aspect-ratio: auto; height: 100%; min-height: 0; padding: 8px; }
.gl .nd-home .step .media.walk { aspect-ratio: auto; width: 100%; height: auto; max-height: 100%; }
@media (max-height: 760px) and (min-width: 900px) { .gl .nd-home .specs li { padding: 5px 0; font-size: 14px; } .gl .nd-home .step-line { font-size: 15.5px; } .gl .nd-home .step .arrow.sm { display: none; } }
@media (max-height: 800px) and (min-width: 900px) { .gl .nd-home .step .media.walk .w-steps { display: none; } }
@media (max-width: 899px) {
  .gl .nd-home .step { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 12px; padding: 0 0 16px; }
  .gl .nd-home .step-copy { grid-row: 2; gap: 8px; }
  .gl .nd-home .step .media { grid-row: 3; height: auto; width: 100%; max-height: none; aspect-ratio: auto; justify-self: stretch; }
  .gl .nd-home .step .media .rec { aspect-ratio: 16 / 7.4; height: auto; }
  .gl .nd-home .step .specs, .gl .nd-home .step .arrow.sm { display: none; }
  .gl .nd-home .step h3 { font-size: 21px; }
  .gl .nd-home .step-line { font-size: 15px; }
  .gl .nd-home .step .media.walk .w-steps { display: none; }
  .gl .nd-home .walk-body { padding: 10px 12px 12px; gap: 8px; }
  .nd-home .specs li { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (max-width: 899px) and (max-height: 700px) { .gl .nd-home .step-line { display: none; } }

/* ---------- troubleshooting: Anomaly Advisor to root cause ---------- */
.nd-home .adv { border: 1px solid var(--line-2); border-radius: 12px; background: #070b0d; padding: 16px; display: grid; }
.nd-home .adv-blk { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 16px; background: var(--bg-2); display: grid; gap: 12px; min-width: 0; }
.nd-home .adv-h { display: flex; justify-content: space-between; gap: 12px; color: var(--fg-2); }
.nd-home .adv-h .dim { color: var(--fg-3); }
.nd-home .adv-chart { width: 100%; height: 96px; display: block; }
.nd-home .adv-area { fill: rgba(0,171,68,.14); }
.nd-home .adv-line { fill: none; stroke: var(--signal-hi); stroke-width: 1.5; stroke-linejoin: round; }
.nd-home .adv-win { fill: rgba(242,169,59,.08); stroke: rgba(242,169,59,.75); stroke-width: 1; stroke-dasharray: 3 3; }
.nd-home .adv-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nd-home .adv-rank li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; font: 500 12px/1.4 var(--mono); color: var(--fg); border-radius: 4px; overflow: hidden; background: rgba(161,174,168,.05); }
.nd-home .adv-rank li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, rgba(242,169,59,.24), rgba(242,169,59,.07)); transform-origin: left; }
.nd-home .adv-rank li > * { position: relative; min-width: 0; }
.nd-home .adv-rank em { font-style: normal; color: var(--warn); flex: none; }
.nd-home .adv-link { height: 30px; display: grid; justify-items: center; }
.nd-home .adv-link i { width: 1px; height: 100%; background: linear-gradient(var(--warn), var(--signal-hi)); transform-origin: top; }
.nd-home .adv-blk.ai { border-color: rgba(61,220,132,.36); }
.nd-home .adv-chk { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--fg-2); }
.nd-home .adv-chk li::before { content: "\2713"; color: var(--signal-hi); margin-right: 7px; }
.nd-home .adv-rc { border-left: 2px solid var(--signal-hi); padding-left: 12px; display: grid; gap: 4px; }
.nd-home .adv-rc b { color: var(--signal-hi); font-weight: 500; }
.nd-home .adv-rc p { font-size: 16px; line-height: 1.4; color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .nd-home .adv.play .adv-line, .nd-home .adv.play .adv-area { animation: adv-draw 1.7s cubic-bezier(.4,0,.2,1) both; }
  .nd-home .adv.play .adv-win { animation: w-in .5s 1.5s both; }
  .nd-home .adv.play .adv-rank li { animation: w-in .4s both; }
  .nd-home .adv.play .adv-rank li::before { animation: adv-bar .7s both cubic-bezier(.2,.7,.2,1); }
  .nd-home .adv.play .adv-rank li:nth-child(1), .nd-home .adv.play .adv-rank li:nth-child(1)::before { animation-delay: 2s; } .nd-home .adv.play .adv-rank li:nth-child(2), .nd-home .adv.play .adv-rank li:nth-child(2)::before { animation-delay: 2.15s; }
  .nd-home .adv.play .adv-rank li:nth-child(3), .nd-home .adv.play .adv-rank li:nth-child(3)::before { animation-delay: 2.3s; } .nd-home .adv.play .adv-rank li:nth-child(4), .nd-home .adv.play .adv-rank li:nth-child(4)::before { animation-delay: 2.45s; }
  .nd-home .adv.play .adv-link i { animation: adv-grow .5s 3.2s both; }
  .nd-home .adv.play .adv-blk.ai { animation: w-in .5s 3.5s both; }
  .nd-home .adv.play .adv-chk li { animation: w-in .4s both; }
  .nd-home .adv.play .adv-chk li:nth-child(1) { animation-delay: 3.9s; } .nd-home .adv.play .adv-chk li:nth-child(2) { animation-delay: 4.4s; } .nd-home .adv.play .adv-chk li:nth-child(3) { animation-delay: 4.9s; }
  .nd-home .adv.play .adv-rc { animation: w-in .6s 5.6s both; }
  @keyframes adv-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes adv-bar { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes adv-grow { from { transform: scaleY(0); } to { transform: none; } }
}

/* ---------- the full view: a layered map of the platform ---------- */
.nd-home .fv { margin-top: 48px; display: grid; gap: 14px; }
.nd-home .fv-row { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #111a1e, #0b1114); }
.nd-home .fv-row.base { border-color: rgba(61,220,132,.45); background: linear-gradient(180deg, rgba(0,171,68,.1), #0b1114 80%); }
.nd-home .fv-row + .fv-row::after { content: ""; position: absolute; left: 50%; top: -15px; height: 14px; width: 1px; background: var(--line-2); }
.nd-home .fv-tag { display: grid; gap: 4px; min-width: 0; padding-top: 4px; }
.nd-home .fv-tag .mono { color: var(--signal-hi); }
.nd-home .fv-tag b { font: 400 20px/1.25 var(--display); }
.nd-home .fv-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nd-home .fv-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-home .fv-grid a { display: grid; gap: 3px; align-content: start; padding: 11px 13px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,8,10,.55); transition: border-color .2s, background .2s; }
.nd-home .fv-grid a b { font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--fg); transition: color .2s; }
.nd-home .fv-grid a em { font-style: normal; font-size: 13px; line-height: 1.4; color: var(--fg-3); }
.nd-home .fv-grid a:hover, .nd-home .fv-grid a:focus-visible { border-color: var(--signal-hi); background: rgba(0,171,68,.08); }
.nd-home .fv-grid a:hover b, .nd-home .fv-grid a:focus-visible b { color: var(--signal-hi); }
.nd-home .fv-row.base .fv-grid a { border-color: rgba(61,220,132,.35); }
@media (max-width: 1100px) { .nd-home .fv-row { grid-template-columns: 1fr; gap: 12px; } .nd-home .fv-grid, .nd-home .fv-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .nd-home .fv-grid, .nd-home .fv-grid.g3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nd-home .fv-grid a, .nd-home .fv-grid a b { transition: none; } }

/* ---------- open source: install line and live counters ---------- */
.nd-home .oss { align-items: start; }
.nd-home .oss-live { display: grid; gap: 16px; min-width: 0; }
.nd-home .term { border: 1px solid var(--line-2); border-radius: 10px; background: #070b0d; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.9); }
.nd-home .term-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.nd-home .term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #26302f; }
.nd-home .term-bar span { margin-left: 8px; }
.nd-home .term-copy { margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 5px; color: var(--fg-2); padding: 4px 9px; cursor: pointer; font-size: 10px; }
.nd-home .term-copy:hover { color: var(--fg); border-color: var(--fg-3); }
.nd-home .term-body { margin: 0; padding: 16px 16px 18px; font: 500 13px/1.75 var(--mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; min-height: 118px; }
.nd-home .term-body .tp { color: var(--signal-hi); }
.nd-home .term-body .tc { color: var(--fg-3); transition: opacity .5s; }
.nd-home .term.typing .tc { opacity: 0; }
.nd-home .cur { display: inline-block; width: 7px; height: 15px; background: var(--signal-hi); vertical-align: -2px; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .nd-home .cur { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.nd-home .oss-live .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 10px; overflow: hidden; }
.nd-home .oss-live .stats > div { padding: 18px 16px; }
.nd-home .oss-live .stats .n { font-size: clamp(28px, 2.9vw, 42px); }
.nd-home .oss-live .stats span { font-size: 13.5px; }
.nd-home .stats .n .cnt { font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.nd-home .gh-btn svg { fill: var(--warn); }
.nd-home .gh-n { color: var(--fg-2); font-weight: 500; border-left: 1px solid var(--line-2); padding-left: 10px; margin-left: 2px; }
@media (max-width: 560px) { .nd-home .oss-live .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- customers: one moving row of quotes ---------- */
.nd-home .qwall { margin-top: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.nd-home .qrow { overflow: hidden; }
.nd-home .qtrack { display: flex; gap: 18px; width: max-content; padding: 4px 18px 4px 0; }
.nd-home .qcard { width: min(440px, 84vw); flex: none; display: grid; grid-template-rows: 1fr auto; gap: 22px; padding: 28px 28px 22px; border: 1px solid var(--line); border-radius: 14px; background: #0b1013; color: var(--fg); transition: border-color .2s, background .2s; }
.nd-home .qcard:hover { border-color: var(--line-2); background: #0f161a; }
.nd-home .qcard blockquote { margin: 0; font: 400 21px/1.42 var(--display); letter-spacing: -.012em; color: #f3f6f4; text-wrap: pretty; quotes: "\201C" "\201D"; }
.nd-home .qcard blockquote::before { content: open-quote; color: var(--fg-3); }
.nd-home .qcard blockquote::after { content: close-quote; color: var(--fg-3); }
.nd-home .q-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.nd-home .q-who { display: grid; gap: 2px; min-width: 0; }
.nd-home .q-who b { font-weight: 600; font-size: 15px; }
.nd-home .q-who span { color: var(--fg-2); font-size: 13.5px; line-height: 1.35; }
.nd-home .q-stat { text-align: right; display: grid; gap: 2px; flex: none; max-width: 140px; }
.nd-home .q-stat b { font: 500 24px/1 var(--display); letter-spacing: -.02em; color: var(--signal-hi); }
.nd-home .q-stat span { color: var(--fg-3); font-size: 12.5px; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) { .nd-home .qtrack { animation: marq var(--d, 100s) linear infinite; } .nd-home .qwall:hover .qtrack, .nd-home .qwall:focus-within .qtrack { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .nd-home .qrow { overflow-x: auto; } .nd-home .qtrack > [aria-hidden="true"] { display: none; } .nd-home .qtrack { padding-left: var(--gl); } }
.nd-home .rv-strip { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 44px; }
.nd-home .rvw { display: flex; align-items: baseline; gap: 9px; }
.nd-home .rvw b { font: 500 26px/1 var(--display); letter-spacing: -.02em; }
.nd-home .rvw span { color: var(--fg-2); font-size: 14.5px; }
.nd-home .rv-strip .arrow { margin-left: auto; }
@media (max-width: 700px) { .nd-home .qcard { padding: 22px 20px 18px; } .nd-home .qcard blockquote { font-size: 19px; } .nd-home .rv-strip .arrow { margin-left: 0; } }

/* the veil stays at full strength in the far (waves) view too, so the copy reads over it
   (owner, 2026-11-11; the mockup thinned it to .62 there) */


/* ================= production: the scope, the shared footer, and screenshots in the tour ================= */
.nd-home-fx { display: contents; }
/* class names the site's own stylesheet also styles (.hero, .tag, .star, .grid, .ring,
   pre code): put each property those rules set back to what the mockup had */
.nd-home .hero { color: inherit; }
.nd-home .tag { display: inline; padding: 0; border: 0; background: none; border-radius: 0; text-align: inherit; color: inherit; font-size: inherit; transition: none; }
.nd-home .tag.mono { font-size: 11px; }
.nd-home .star { background: none; clip-path: none; aspect-ratio: auto; }
.nd-home rect.grid { display: inline; }
.nd-home .ring { box-shadow: none; }
.nd-home pre code { display: inline; padding: 0; background: none; font: inherit; color: inherit; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.nd-home svg { vertical-align: baseline; }
.nd-home h1, .nd-home h2, .nd-home h3, .nd-home h4 { color: inherit; }
.nd-home .shot-img, .nd-home .media picture { display: block; width: 100%; }
.nd-home .media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.gl .nd-home .step .media picture { height: 100%; min-height: 0; }
.gl .nd-home .step .media img { height: 100%; aspect-ratio: auto; }
body > footer, main ~ footer { position: relative; z-index: 3; background: #040607; }

/* ================= type: the live site's, not the mockup's =================
   Measured on www.netdata.cloud: headings and ledes Geist 400 with normal tracking; buttons and
   CTA links Geist Mono 500; navigation and body IBM Plex Sans 400. Sizes and layout stay the
   mockup's. Selectors repeat the mockup's own so they win by order, not by weight. */
.nd-home .hero h1, .nd-home .sec h2, .nd-home .step h3, .nd-home .tour-title h2, .nd-home .way h3,
.nd-home .layer-name, .nd-home .close h2, .nd-home .find-copy h2 { font-weight: 400; letter-spacing: normal; }
.nd-home .hero .sub, .nd-home .stats .n, .nd-home .facts .v, .nd-home .review .r b,
.nd-home .case .stat .n, .nd-home .q-stat b, .nd-home .rvw b { font-weight: 400; letter-spacing: normal; }
.nd-home .qcard blockquote, .nd-home .case blockquote, .nd-home .marq, .nd-home .trusted .names,
.nd-home .ent-grid b, .nd-home .case-top b, .nd-home .hero .proof { letter-spacing: normal; }
.nd-home .btn, .nd-home .arrow { font-family: var(--mono); font-weight: 500; letter-spacing: normal; text-transform: none; }

/* ================= customers: quotes from any source, and review ratings =================
   Cards come from front matter (quotes:); a review or social card shows its platform's mark
   where a case study shows its result. Ratings are cards with the platform's logo, the score
   and stars filled to it. */
.nd-home .q-src { flex: none; display: flex; align-items: center; }
.nd-home .q-src img { display: block; width: auto; opacity: .9; }
.nd-home .q-src .lg { filter: none; opacity: 1; width: 30px; height: 30px; }
.nd-home .q-src .lg svg { width: 16px; height: 16px; }
.nd-home .ratings { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nd-home .rating { height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #0b1013; color: var(--fg); transition: border-color .2s, background .2s; }
.nd-home .rating:hover { border-color: var(--line-2); background: #0f161a; }
.nd-home .r-logo { display: flex; align-items: center; gap: 10px; height: 30px; }
.nd-home .r-logo img { display: block; width: auto; max-width: 100%; }
.nd-home .r-logo .lg { filter: none; opacity: 1; width: 30px; height: 30px; }
.nd-home .r-logo .lg svg { width: 17px; height: 17px; }
.nd-home .r-logo b { font: 600 19px var(--display); }
.nd-home .rating .lg[data-icon="g2"] svg { color: #ff492c; }
.nd-home .r-score { display: flex; align-items: baseline; gap: 8px; }
.nd-home .r-score b { font: 400 44px/1 var(--display); letter-spacing: -.02em; }
.nd-home .r-score span { color: var(--fg-2); font-size: 14px; }
.nd-home .r-stars { --star: 22px; display: block; height: var(--star); width: calc(var(--star) * 5 + 16px);
  background: linear-gradient(90deg, var(--warn) calc(var(--v) / 5 * 100%), rgba(255,255,255,.16) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") 0 0 / calc(var(--star) + 4px) var(--star) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") 0 0 / calc(var(--star) + 4px) var(--star) repeat-x; }
.nd-home .r-badges { display: flex; gap: 8px; align-items: flex-end; }
.nd-home .r-badges img { display: block; width: auto; }
.nd-home .r-cta { font: 500 13px var(--mono); color: var(--fg-2); border-top: 1px solid var(--line); padding-top: 14px; }
.nd-home .r-cta::after { content: " \2197"; }
.nd-home .rating:hover .r-cta { color: var(--signal-hi); }
.nd-home .rv-more { margin: 22px 0 0; }
@media (max-width: 900px) {
  .nd-home .ratings { grid-template-columns: 1fr; gap: 12px; }
  .nd-home .rating { grid-template-columns: 1fr auto; grid-template-rows: none; align-items: center; gap: 10px 16px; padding: 18px 20px; }
  .nd-home .r-logo, .nd-home .r-badges, .nd-home .r-cta { grid-column: 1 / -1; }
  .nd-home .r-score b { font-size: 36px; }
  .nd-home .r-stars { --star: 18px; justify-self: end; }
  .nd-home .r-badges img { height: 46px; }
}
/* the site's stylesheet sets img height: auto, so the heights are set here */
.nd-home .q-src img { height: 20px; }
.nd-home .q-src img[src*="peer-insights"] { height: 26px; }
.nd-home .r-logo img { height: 30px; }
.nd-home .r-logo img[src*="peer-insights"] { height: 36px; }
.nd-home .r-badges img { height: 56px; }
@media (max-width: 900px) { .nd-home .r-badges img { height: 46px; } }

/* phones: the tour's tab row scrolls sideways; a fade at the right edge shows there is more */
@media (max-width: 760px) {
  .nd-home .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 32px; }
}


/* ================= less green (owner, 2026-11-11) =================
   Green stays for the one filled button, the active tab, the rail, link underlines and the data
   in charts, section labels and customer results. Small repeated details go grey; the top
   layer keeps a faint green wash but loses its glow, so the page stays lively. */
.nd-home .board h3, .nd-home .way .tag, .nd-home .rec .mono:first-child { color: var(--fg-2); }
.nd-home .stats .n small { color: var(--fg-3); }

/* hero proof points: three short items under the buttons, not a sentence above them */
.nd-home .hero .proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 0; padding: 0; list-style: none; font: 400 14px/1.3 var(--body); color: var(--fg-2); letter-spacing: normal; }
.nd-home .hero .proof li { display: inline-flex; align-items: center; gap: 8px; }
.nd-home .hero .proof svg { width: 16px; height: 16px; flex: none; stroke: var(--signal-hi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* customer logos band: logos only */
.nd-home .band { grid-template-columns: minmax(0, 1fr); padding-block: 22px; }
.nd-home .marq { align-items: center; gap: 56px; padding-right: 56px; }
.nd-home .marq img { display: block; width: auto; max-width: none; opacity: .62; filter: grayscale(1); transition: opacity .2s; }
.nd-home .band:hover .marq img { opacity: .85; }
@media (max-width: 700px) { .nd-home .marq { gap: 40px; padding-right: 40px; } .nd-home .marq img { transform: scale(.85); } }

/* closing section: the hero's waves again, behind a veil on the copy side */
.nd-home .sec.alt.close { background: var(--bg) url("/home-v3/stills/hero.jpg") 72% 60% / cover no-repeat; }
.nd-home .close::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,8,10,.96) 0, rgba(5,8,10,.93) 46%, rgba(5,8,10,.45) 64%, transparent 82%), linear-gradient(180deg, var(--bg) 0, transparent 22%, transparent 80%, var(--bg) 100%); }
.gl.stage-ready .nd-home .sec.alt.close { background: transparent; }
.nd-home .close { min-height: min(86vh, 760px); display: flex; align-items: center; }
.nd-home .close .wrap { width: 100%; }
@media (max-width: 760px) {
  .nd-home .close::before { background: linear-gradient(180deg, var(--bg) 0, rgba(5,8,10,.94) 12%, rgba(5,8,10,.9) 40%, rgba(5,8,10,.2) 58%, transparent 70%, transparent 92%, var(--bg) 100%); }
  .nd-home .close { min-height: calc(100svh - 58px); padding-block: 64px 0; }
  .nd-home .close { align-items: flex-start; }
}

/* when the live waves will run, the still picture never shows: the hero starts dark and the
   waves fade in (#stage .on). If the 3D code fails, app.js removes .gl and the picture returns. */
.gl .nd-home .wall-poster { opacity: 0; transition: none; }

/* Platform tour: play button over each screenshot, and the video it opens */
.nd-home .media { position: relative; }
.nd-home .media .play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; background: linear-gradient(rgba(5,8,10,0) 62%, rgba(5,8,10,.5)); }
.nd-home .media .play span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border-radius: 999px; background: rgba(5,8,10,.86); color: #fff; font-weight: 500; font-size: 14px; line-height: 1; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 10px 28px rgba(0,0,0,.6); transition: transform .2s, background .2s, box-shadow .2s; }
.nd-home .media .play svg { width: 16px; height: 16px; fill: #fff; flex: none; }
.nd-home .media .play:hover span, .nd-home .media .play:focus-visible span { transform: scale(1.04); background: #00ab44; box-shadow: 0 0 0 1.5px #00ab44, 0 10px 28px rgba(0,0,0,.6); }
.nd-home .media .play:focus-visible { outline: 2px solid #3ddc84; outline-offset: -3px; }
.nd-home dialog.vid { position: fixed; inset: 0; margin: auto; width: min(1100px, calc(100vw - 32px), calc((100vh - 128px) * 16 / 9)); max-width: none; max-height: none; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: #000; overflow: visible; box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.nd-home dialog.vid::backdrop { background: rgba(3,5,6,.86); backdrop-filter: blur(6px); }
.nd-home .vid-frame, .nd-home .vid-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 11px; }
.nd-home .vid-x { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(5,8,10,.7); color: #fff; cursor: pointer; }
.nd-home .vid-x:hover { border-color: #fff; }
.nd-home .vid-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .nd-home .media .play span { transition: none; } }
.nd-home .faq-list { margin-top: 40px; max-width: 920px; border-top: 1px solid var(--line); }
.nd-home .faq-list details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 0; margin: 0; }
.nd-home .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; }
.nd-home .faq-list summary::-webkit-details-marker { display: none; }
.nd-home .faq-list summary h3 { margin: 0; font: 400 20px/1.3 var(--display); color: var(--fg); }
.nd-home .faq-list summary i { position: relative; flex: none; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; }
.nd-home .faq-list summary i::before, .nd-home .faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--fg-2); transform: translate(-50%,-50%); }
.nd-home .faq-list summary i::after { transform: translate(-50%,-50%) rotate(90deg); }
.nd-home .faq-list details[open] summary i::after { transform: translate(-50%,-50%); }
.nd-home .faq-list summary:hover h3, .nd-home .faq-list summary:focus-visible h3 { color: var(--signal-hi); }
.nd-home .faq-a { padding: 0 46px 20px 0; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.nd-home .faq-a p { margin: 0; }
.nd-home .faq-a a { color: var(--signal-hi); text-decoration: underline; text-underline-offset: 3px; }