:root {
  --nb-purple: #7c2ae8;
  --nb-violet: #a855f7;
  --nb-violet-bright: #c56cff;
  --nb-bg: #050711;
  --nb-bg-deep: #02030a;
  --nb-surface: #0c1020;
  --nb-surface-raised: #12172a;
  --nb-text: #f5f3ff;
  --nb-muted: #a9afd0;
  --nb-border: #292f4d;
  --nb-success: #21d89a;
  --nb-warning: #f7b955;
  --nb-identify: #69a7ff;
  --nb-error: #ff647c;
  --nb-glow: rgba(124, 42, 232, .32);
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--nb-bg-deep); }
body {
  margin: 0;
  color: var(--nb-text);
  background:
    radial-gradient(circle at 78% 16%, rgba(92, 35, 190, .22), transparent 30rem),
    radial-gradient(circle at 12% 32%, rgba(28, 65, 125, .12), transparent 28rem),
    linear-gradient(180deg, var(--nb-bg) 0%, var(--nb-bg-deep) 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--nb-text); color: var(--nb-bg); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: relative;
  z-index: 10;
  width: min(calc(100% - 40px), var(--max-width));
  min-height: 84px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(134, 145, 197, .18);
}
.brand { display: inline-flex; width: 190px; }
.brand img { display: block; width: 100%; height: auto; }
nav { display: flex; gap: 32px; color: var(--nb-muted); font-size: .92rem; }
nav a:hover, nav a:focus-visible { color: var(--nb-text); }
.site-header > .button { justify-self: end; }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--nb-border);
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); border-color: #6f5cb2; }
.button:focus-visible, nav a:focus-visible { outline: 3px solid var(--nb-identify); outline-offset: 3px; }
.button-primary { border-color: #963df0; background: linear-gradient(135deg, var(--nb-purple), #922ee6); box-shadow: 0 14px 38px var(--nb-glow), inset 0 1px 0 rgba(255,255,255,.24); }
.button-quiet { background: rgba(14, 18, 35, .62); }

.hero {
  width: min(calc(100% - 40px), var(--max-width));
  min-height: 690px;
  margin: 0 auto;
  padding: 84px 0 72px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
}
.eyebrow, .section-kicker { color: #d4b6ff; font-size: .78rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--nb-success); box-shadow: 0 0 14px rgba(33, 216, 154, .8); }
h1, h2 { margin: 0; line-height: 1.05; letter-spacing: -.04em; }
h1 { margin-top: 22px; font-size: clamp(3.3rem, 6.6vw, 5.8rem); max-width: 720px; }
h1 span { color: transparent; background: linear-gradient(100deg, #dfb7ff 0%, var(--nb-violet) 50%, #7a5cff 100%); background-clip: text; }
.hero-lede { max-width: 590px; margin: 28px 0 0; color: var(--nb-muted); font-size: 1.14rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 34px; margin: 46px 0 0; }
.hero-facts div { padding-left: 14px; border-left: 2px solid rgba(168,85,247,.55); }
.hero-facts dt { color: #7f88ad; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-facts dd { margin: 3px 0 0; font-weight: 650; font-size: .93rem; }

.product-stage { position: relative; display: grid; place-items: center; min-width: 0; }
.app-window { position: relative; z-index: 2; width: min(100%, 535px); margin: 0; overflow: hidden; border: 1px solid #3b3566; border-radius: 18px; background: var(--nb-surface); box-shadow: 0 34px 90px rgba(0,0,0,.58), 0 0 56px var(--nb-glow); transform: perspective(1300px) rotateY(-3deg) rotateX(1deg); }
.window-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding-left: 12px; background: #111529; border-bottom: 1px solid #252b47; }
.window-bar span { width: 7px; height: 7px; border-radius: 50%; background: #4e5477; }
.window-bar span:first-child { background: var(--nb-violet); }
.app-window img { display: block; width: 100%; height: auto; }
.orbit { position: absolute; border: 1px solid rgba(148, 72, 255, .35); border-radius: 50%; box-shadow: 0 0 30px rgba(119,46,220,.15); }
.orbit-one { width: 116%; aspect-ratio: 1; }
.orbit-two { width: 95%; aspect-ratio: 1; border-style: dashed; border-color: rgba(83, 122, 255, .3); transform: rotate(24deg); }

.trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 42px; padding: 22px 24px; color: #c6cbea; background: rgba(12,16,32,.76); border-block: 1px solid rgba(92,104,159,.22); font-size: .86rem; }
.trust-strip span::before { content: "◆"; margin-right: 10px; color: var(--nb-violet); font-size: .62rem; }
.section { width: min(calc(100% - 40px), var(--max-width)); margin: 0 auto; padding: 100px 0; }
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
h2 { margin-top: 14px; font-size: clamp(2.2rem, 4vw, 4rem); }
.teaser > p { margin: 0; color: var(--nb-muted); font-size: 1.12rem; }
.placeholder-section { border-top: 1px solid rgba(108,119,170,.22); min-height: 300px; }

.section-heading { margin-bottom: 48px; }
.split-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; }
.split-heading > p { margin: 0; color: var(--nb-muted); font-size: 1.08rem; }
h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { min-height: 235px; padding: 28px; border: 1px solid var(--nb-border); border-radius: 18px; background: linear-gradient(145deg, rgba(18,23,42,.92), rgba(8,11,23,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.feature-wide { grid-column: span 2; }
.feature-card p { margin: 14px 0 0; color: var(--nb-muted); }
.feature-number { display: block; margin-bottom: 34px; color: #766d9c; font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.feature-accent { border-color: rgba(168,85,247,.5); background: radial-gradient(circle at 90% 10%, rgba(124,42,232,.28), transparent 15rem), var(--nb-surface); }
.mode-row { display: flex; gap: 8px; margin-top: 24px; }
.mode-row span { padding: 6px 10px; border: 1px solid rgba(168,85,247,.4); border-radius: 8px; color: #dac5ff; font-size: .8rem; }

.showcase-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 120px); align-items: center; }
.showcase-copy > p:not(.section-kicker) { margin: 24px 0; color: var(--nb-muted); font-size: 1.05rem; }
.check-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; color: var(--nb-success); background: rgba(33,216,154,.1); font-weight: 900; }
.settings-window { width: min(100%, 460px); margin: 0 auto; padding: 14px; border: 1px solid #343b61; border-radius: 22px; background: linear-gradient(145deg, #171c33, #080b17); box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 38px rgba(124,42,232,.16); }
.settings-window img { display: block; width: 100%; border-radius: 10px; }

.hardware-section { border-block: 1px solid rgba(100,111,168,.2); background: linear-gradient(180deg, rgba(10,14,28,.78), rgba(4,6,14,.84)); }
.hardware-heading { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: end; }
.warning-card { padding: 20px 22px; border: 1px solid rgba(247,185,85,.35); border-radius: 14px; background: rgba(247,185,85,.055); }
.warning-card strong { color: var(--nb-warning); text-transform: uppercase; font-size: .74rem; letter-spacing: .14em; }
.warning-card p { margin: 7px 0 0; color: #d7d3c8; }
.status-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.status-summary article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 22px; border: 1px solid var(--nb-border); border-radius: 16px; background: var(--nb-surface); }
.status-summary article > strong { grid-row: span 2; font-size: 2.2rem; }
.status-summary article p { margin: 0; color: var(--nb-muted); font-size: .85rem; }
.status { display: inline-flex; width: fit-content; align-items: center; padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: .72rem; line-height: 1.2; font-weight: 800; }
.status-supported { color: var(--nb-success); border-color: rgba(33,216,154,.36); background: rgba(33,216,154,.08); }
.status-protocol_known_unimplemented, .status-beta { color: var(--nb-warning); border-color: rgba(247,185,85,.36); background: rgba(247,185,85,.08); }
.status-identification_only { color: var(--nb-identify); border-color: rgba(105,167,255,.36); background: rgba(105,167,255,.08); }
.status-experimental { color: var(--nb-violet-bright); border-color: rgba(197,108,255,.36); background: rgba(197,108,255,.08); }
.status-unsupported { color: var(--nb-error); border-color: rgba(255,100,124,.36); background: rgba(255,100,124,.08); }
.catalog-panel { overflow: hidden; border: 1px solid var(--nb-border); border-radius: 18px; background: rgba(5,8,18,.72); }
.catalog-toolbar { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--nb-border); }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-group button { min-height: 40px; padding: 0 14px; color: var(--nb-muted); border: 1px solid transparent; border-radius: 9px; background: transparent; font: inherit; font-size: .84rem; cursor: pointer; }
.filter-group button[aria-pressed="true"] { color: var(--nb-text); border-color: #6744a5; background: rgba(124,42,232,.17); }
.filter-group button:focus-visible { outline: 3px solid var(--nb-identify); outline-offset: 2px; }
#device-result-count, .catalog-source { color: #838bad; font-size: .8rem; }
.catalog-source { margin: 0; padding: 13px 18px; border-bottom: 1px solid rgba(41,47,77,.7); }
.device-row { min-height: 70px; display: grid; grid-template-columns: 1.55fr .6fr .55fr 1fr; align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid rgba(41,47,77,.62); }
.device-row:last-child { border-bottom: 0; }
.device-row > span:not(.status) { color: var(--nb-muted); font-size: .86rem; }
.device-name { display: grid; }
.device-name span { color: #7f88ad; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.device-name strong { font-size: .92rem; }
code { color: #d7bdff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.catalog-error { padding: 20px; color: var(--nb-error); }

.testing-section { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 80px; align-items: start; }
.testing-intro > p:not(.section-kicker) { color: var(--nb-muted); font-size: 1.06rem; }
.text-link { display: inline-block; margin-top: 10px; color: #cfadff; font-weight: 750; border-bottom: 1px solid rgba(207,173,255,.4); }
.report-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.report-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--nb-border); border-radius: 14px; background: var(--nb-surface); }
.report-steps li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #d9c1ff; background: rgba(124,42,232,.2); font-weight: 800; }
.report-steps p { margin: 3px 0 0; color: var(--nb-muted); font-size: .88rem; }
.report-steps a { color: #d8baff; }
.privacy-card { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px; border: 1px solid rgba(33,216,154,.28); border-radius: 16px; background: rgba(33,216,154,.055); }
.privacy-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #06140f; background: var(--nb-success); font-weight: 900; }
.privacy-card p { margin: 4px 0 0; color: #b8cfc7; }

.download-section { border-block: 1px solid rgba(124,42,232,.25); background: radial-gradient(circle at 76% 50%, rgba(124,42,232,.2), transparent 25rem), #080b17; }
.download-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 80px; align-items: center; }
.download-copy { max-width: 620px; color: var(--nb-muted); font-size: 1.05rem; }
.release-note { margin-top: 26px; padding-left: 16px; border-left: 2px solid var(--nb-warning); }
.release-note strong { color: var(--nb-warning); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.release-note p { margin: 5px 0 0; color: #bcb8ae; font-size: .88rem; }
.download-card { padding: 32px; border: 1px solid #4d3a78; border-radius: 20px; background: rgba(15,18,36,.92); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.download-card h3 { margin-top: 22px; font-size: 1.55rem; }
.download-card p { color: var(--nb-muted); }
.download-card .button { width: 100%; margin: 12px 0 10px; }
.download-card .text-link { font-size: .86rem; }

.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.docs-grid a { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--nb-border); border-radius: 15px; background: var(--nb-surface); transition: border-color .2s ease, transform .2s ease; }
.docs-grid a:hover { transform: translateY(-3px); border-color: #6f52a8; }
.docs-grid span { color: var(--nb-muted); font-size: .84rem; }

footer { padding: 58px 20px 24px; border-top: 1px solid var(--nb-border); background: #03050c; }
.footer-inner { width: min(100%, var(--max-width)); margin: 0 auto 48px; display: grid; grid-template-columns: 1fr auto auto; gap: 90px; }
.footer-brand img { width: 180px; }
.footer-brand p { color: var(--nb-muted); }
.footer-inner > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.footer-inner > div > strong { margin-bottom: 5px; color: #d9c5fb; font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }
.footer-inner a { color: var(--nb-muted); font-size: .88rem; }
.footer-inner a:hover { color: var(--nb-text); }
.legal { width: min(100%, var(--max-width)); margin: 0 auto; padding-top: 20px; border-top: 1px solid rgba(41,47,77,.7); color: #737b9f; font-size: .75rem; }

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-copy { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-actions, .hero-facts { justify-content: center; }
  .product-stage { width: min(100%, 580px); margin: 0 auto; }
  .teaser { grid-template-columns: 1fr; gap: 24px; }
  .split-heading, .showcase-section, .hardware-heading, .testing-section, .download-grid { grid-template-columns: 1fr; gap: 34px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-wide { grid-column: span 2; }
  .docs-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 38px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-header { width: min(calc(100% - 28px), var(--max-width)); min-height: 72px; }
  .brand { width: 150px; }
  .site-header > .button { min-height: 38px; padding-inline: 12px; font-size: .78rem; }
  .hero, .section { width: min(calc(100% - 28px), var(--max-width)); }
  .hero { padding-top: 48px; min-height: 0; }
  h1 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
  .hero-facts { display: grid; grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .app-window { transform: none; border-radius: 13px; }
  .orbit { display: none; }
  .feature-grid, .status-summary, .docs-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; }
  .catalog-toolbar { align-items: flex-start; flex-direction: column; }
  .device-row { grid-template-columns: 1fr auto; gap: 9px 14px; }
  .device-row > span:not(.status) { grid-column: 1; }
  .device-row .status { grid-column: 2; grid-row: 1 / span 2; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }