:root { --nosce-accent: #4a9eff; --nosce-teal: #2dd4bf; }

body { -webkit-font-smoothing: antialiased; }

.navbar-brand img { width: 28px; height: 28px; }
.accent { color: var(--nosce-accent); }
code { color: var(--nosce-teal); }

/* hero */
.hero {
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(74,158,255,.18), transparent 60%),
    radial-gradient(50rem 30rem at 95% 0%, rgba(45,212,191,.12), transparent 55%);
  border-bottom: 1px solid var(--bs-border-color);
}
.hero h1 { letter-spacing: -.02em; }
.hero-shot {
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.5);
  overflow: hidden;
}
.hero-shot img { display: block; width: 100%; height: auto; }

/* screenshot figures + lightbox trigger */
.shot {
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  transition: transform .12s ease, border-color .12s ease;
  cursor: zoom-in;
}
.shot:hover { transform: translateY(-3px); border-color: var(--nosce-accent); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: .5rem .75rem; font-size: .85rem; color: var(--bs-secondary-color); }

/* about page bits */
.feature-icon {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-content: center;
  border-radius: .5rem;
  background: rgba(74,158,255,.12);
  color: var(--nosce-accent);
  font-weight: 700;
}
.step-num {
  width: 1.6rem; height: 1.6rem; flex: none;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--bs-tertiary-bg);
  font-size: .8rem; font-weight: 700;
}

/* content pages: sidebar + pane layout */
.page-head {
  background: radial-gradient(50rem 24rem at 12% -20%, rgba(74,158,255,.14), transparent 60%);
  border-bottom: 1px solid var(--bs-border-color);
}
.side-nav .list-group-item {
  cursor: pointer;
  border-left: 3px solid transparent;
}
@media (min-width: 992px) {
  .side-nav { position: sticky; top: 4.75rem; }
}
.side-nav .list-group-item.active {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  border-color: var(--bs-border-color);
  border-left-color: var(--nosce-accent);
}