/* Palette sampled from the supplied QuantStacks logo. Layout stays unchanged. */
:root {
  --ink: #031625;
  --deep: #00101d;
  --paper: #f8fbfd;
  --white: #fff;
  --muted: #506779;
  --line: #d5e5ec;
  --electric: #006af6;
  --teal: #1ab9ab;
  --teal-ink: #087c78;
  --accent-soft: #b6eee7;
  --mint: var(--accent-soft);
  --forest: #07426a;
  --nav-border: #d5e5ec;
  --dark-copy: #c5e0ea;
  --quiet-copy: #a5c9d7;
  --light-label: #3c627a;
}
button:focus-visible, a:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline-color: var(--electric); }
.hero a:focus-visible, .site-header a:focus-visible,
.site-header button:focus-visible { outline-color: var(--electric); }
.site-header, .hero { background: var(--white); color: var(--ink); }
.header-inner, .hero-bottom { border-color: var(--line); }
#primary-nav > a:not(.nav-cta) { color: var(--ink); }
#primary-nav > a:hover { color: var(--electric); }
.nav-cta, .menu-toggle { border-color: #bed6e4; color: var(--ink); }
.eyebrow { color: var(--dark-copy); }
.eyebrow.dark { color: var(--light-label); }
.hero .eyebrow { color: var(--muted); }
.status-dot { background: var(--teal); }
.hero h1 > span { color: var(--electric); }
.hero-description, .hero-note { color: var(--muted); }
.about-copy > p { color: var(--dark-copy); }
.button-mint { background: var(--electric); color: var(--white); }
.button-mint:hover { background: #0051c5; }
.text-link { border-color: #9cbacb; }
.text-link:hover { color: var(--electric); }
.text-link.light { border-color: #457d98; }
.text-link.light:hover { color: var(--accent-soft); }
.hero .text-link.light, .site-header .text-link.light {
  color: var(--ink); border-color: #9cbacb;
}
.hero .text-link.light:hover, .site-header .text-link.light:hover { color: var(--electric); }

/* Fit the unchanged supplied logo inside a cropped display viewport. */
.supplied-wordmark { display: inline-flex; flex: none; }
.logo-viewport {
  display: block; width: 220px; height: 55px; position: relative;
  overflow: hidden; background: var(--white);
}
.logo-viewport > img {
  position: absolute; width: 105%; max-width: none; height: auto;
  left: -3%; top: 50%; transform: translateY(-47.3%);
}
.footer-top .logo-viewport { width: 196px; height: 49px; }

/* Architectural illustration: blue-to-teal layers over the logo's navy. */
.system-graphic {
  border-color: #1c5472; background: #06283b; color: var(--paper);
  box-shadow: 22px 23px 0 -3px #e5f0f5;
}
.graphic-top { color: #b6d9eb; }
.graphic-tag { border-color: #3e899a; }
.graphic-grid {
  background-image: linear-gradient(#1ab9ab18 1px, transparent 1px),
    linear-gradient(90deg, #006af618 1px, transparent 1px);
}
.stack-block {
  border-color: #327597; background: #0b2742;
  box-shadow: 0 5px 0 #00131e85;
}
.stack-block-2 { background: #063e60; }
.stack-block-3 { background: #095464; }
.stack-block-4 {
  background: var(--accent-soft); border-color: var(--teal); color: var(--ink);
}
.stack-connector { color: #6edcd0; }
.stack-connector > span:first-child { border-color: #3e9ba4; }
.graphic-bottom { color: #a7cbd6; }
.hero-bottom { color: #526d80; }

/* Light panels and understated teal accents. */
.stack-explorer { background: var(--white); }
.layer-tab { color: #506a7b; }
.layer-tab .mono { color: #587e91; }
.layer-tab.active, .noscript-layers { background: #e4f1f7; }
.layer-tab.active .mono { color: var(--electric); }
.layer-tab:hover { background: #eff8fb; }
.layer-panel { background: #f0f8fb; }
.panel-top { color: #0a5b76; }
.layer-panel > p { color: #506d7d; }
.panel-features > li { border-color: #bbd8e2; color: #305c70; }
.panel-foot { border-color: #c8dfe7; color: #496d7b; }
.approach-section { background: #f0f7fa; }
.principles > li { border-color: #c7dfe7; }
.principle-no { color: var(--teal-ink); }
.technology-list > span { border-color: #2d7a86; }
.closing-section { background: linear-gradient(110deg, #eaf4ff, #e2f6f1); }
.site-footer { background: var(--white); color: var(--ink); }
.footer-top > div { color: var(--muted); }
.footer-top > div > a:hover { color: var(--electric); }
.footer-bottom { border-color: var(--line); color: var(--muted); }
.document-main p, .document-main li { color: #496779; }
.document-main .document-lead { color: var(--ink); }
.document-note { border-color: var(--teal); background: #e9f7f5; }

@media (max-width: 800px) {
  .system-graphic { box-shadow: 13px 15px 0 -3px #e5f0f5; }
  #primary-nav { background: var(--white); box-shadow: 0 15px 20px #03162516; }
}
@media (max-width: 440px) {
  .logo-viewport { width: 180px; height: 45px; }
  .footer-top .logo-viewport { width: 174px; height: 43.5px; }
}