@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap");

:root {
  --void: #000000;
  --ash: #0b0908;
  --line: #3b2117;
  --bone: #fff7f0;
  --muted: #b3a49b;
  --ember: #ff4b0b;
  --ember-dim: #d73500;
  --good: #a8d47f;
  --warn: #ffb020;
  --color-void: #000000;
  --color-ash: #0b0908;
  --color-line: #3b2117;
  --color-bone: #fff7f0;
  --color-muted: #b3a49b;
  --color-ember: #ff4b0b;
}

html, body { background: #000 !important; }
body {
  color: var(--bone);
  background-image: radial-gradient(ellipse 70% 34% at 85% 0%, rgba(255,75,11,.075), transparent 70%) !important;
}
.bg-void { background-color: #000 !important; }
.bg-ash { background-color: #0b0908 !important; }
.border-line, .border-line\/80 { border-color: rgba(255,75,11,.22) !important; }
.text-muted { color: #b3a49b !important; }
.text-ember { color: #ff4b0b !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(255,75,11,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,75,11,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 58%);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #050505; }
*::-webkit-scrollbar-thumb { background: #5b270f; border: 2px solid #050505; border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: var(--ember); }

h1, h2, h3, .font-display {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
  font-weight: 800;
  letter-spacing: -.025em;
}
main h1[class], main > h1[class], body > main h1[class] {
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  line-height: .94;
  text-transform: uppercase;
}
main h2[class], section h2[class] {
  font-size: clamp(2.6rem, 4.8vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
}
main h3, section h3 { letter-spacing: -.015em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--ember) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .2em !important;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--ember); }

header {
  background: rgba(0,0,0,.92) !important;
  border-bottom: 1px solid rgba(255,75,11,.28) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.7);
}
header > div { max-width: 1440px !important; }
header nav > a { font-weight: 600; }
header nav > a:hover { color: var(--ember) !important; }
header a[href*="door=anonymous"], header a[href*="signup"] {
  border-radius: 0 !important;
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  padding: 12px 22px !important;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255,75,11,.16);
}

/* Landing hero: same content, rebuilt as an asymmetric display composition. */
[code-path="src/pages/Landing.tsx:12:7"] {
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1440px !important;
  min-height: 980px;
  padding: 86px 64px 96px !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,75,11,.3);
}
[code-path="src/pages/Landing.tsx:12:7"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  top: 0;
  width: 53%;
  height: 100%;
  background: linear-gradient(145deg, transparent 17%, rgba(255,75,11,.06) 17.2%, transparent 17.6%), linear-gradient(32deg, transparent 77%, rgba(255,75,11,.12) 77.3%, transparent 78%);
  clip-path: polygon(25% 0,100% 0,100% 100%,0 100%);
}
[code-path="src/pages/Landing.tsx:12:7"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(49%, 690px);
  aspect-ratio: 760 / 780;
  right: 8px;
  top: 74px;
  background: url("/nf/hero-demon.svg") center / contain no-repeat;
  filter: saturate(1.08) contrast(1.04);
  pointer-events: none;
}
[code-path="src/pages/Landing.tsx:13:9"] { display: none; }
[code-path="src/pages/Landing.tsx:14:9"] { position: relative; z-index: 2; margin-bottom: 24px !important; }
[code-path="src/pages/Landing.tsx:15:9"] {
  position: relative;
  z-index: 2;
  max-width: 760px !important;
  color: var(--ember);
  font-size: clamp(5rem, 7.2vw, 7.1rem) !important;
  font-style: italic;
  font-weight: 900 !important;
  line-height: .82 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase;
  text-wrap: balance;
  filter: drop-shadow(0 7px 0 rgba(98,17,0,.22));
}
[code-path="src/pages/Landing.tsx:15:9"] > span {
  display: block;
  max-width: 670px;
  margin-top: 30px;
  color: var(--bone);
  font-size: .55em;
  line-height: .9;
  letter-spacing: -.025em;
}
[code-path="src/pages/Landing.tsx:19:9"],
[code-path="src/pages/Landing.tsx:23b:9"],
[code-path="src/pages/Landing.tsx:24:9"],
[code-path="src/pages/Landing.tsx:38:9"] { position: relative; z-index: 2; width: 55%; max-width: 680px; }
[code-path="src/pages/Landing.tsx:24:9"] { order: 3; }
[code-path="src/pages/Landing.tsx:19:9"] { order: 4; margin-top: 34px !important; font-size: 15px !important; line-height: 1.8 !important; }
[code-path="src/pages/Landing.tsx:23b:9"] { order: 5; margin-top: 28px !important; }
[code-path="src/pages/Landing.tsx:38:9"] { order: 6; }
[code-path="src/pages/Landing.tsx:23b:9"] li { align-items: flex-start; gap: 14px !important; }
[code-path="src/pages/Landing.tsx:23b:9"] li > span:first-child { font-family: "Barlow Condensed", sans-serif; font-size: 25px; line-height: 1; }
[code-path="src/pages/Landing.tsx:24:9"] { gap: 12px !important; margin-top: 36px !important; }
[code-path="src/pages/Landing.tsx:24:9"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 0 !important;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .025em;
  text-transform: uppercase;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}
[code-path="src/pages/Landing.tsx:25:11"] {
  min-width: 230px;
  padding: 17px 30px !important;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow: 0 0 40px rgba(255,75,11,.2);
}
[code-path="src/pages/Landing.tsx:24:9"] a:not([code-path="src/pages/Landing.tsx:25:11"]) { border-color: #512717 !important; background: rgba(12,8,6,.82); }
[code-path="src/pages/Landing.tsx:24:9"] a:hover { transform: translateY(-3px); opacity: 1 !important; border-color: var(--ember) !important; }

/* Bold, squared controls and tactile model surfaces. */
input, select, textarea, pre, code, .chip { border-radius: 3px !important; }
input, select, textarea {
  border-color: #442419 !important;
  background-color: #090807 !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--ember) !important; box-shadow: 0 0 0 2px rgba(255,75,11,.15); }
select { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ff8a4c !important;
  outline-offset: 4px;
}

.rowline {
  position: relative;
  border-bottom-color: rgba(255,75,11,.18) !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
.rowline::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: transparent; }
.rowline:hover { background: rgba(255,75,11,.055) !important; }
.rowline:hover::before { background: var(--ember); }

main section { border-color: rgba(255,75,11,.24) !important; }
main section > div > .eyebrow + h2 { margin-top: 14px; }
a[class*="border"][class*="rounded"]:not(header a):not(nav a) {
  border-color: #3f251b;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
a[class*="border"][class*="rounded"]:not(header a):not(nav a):hover { border-color: var(--ember); }
.rounded-lg, .rounded-xl { border-radius: 5px; }
pre {
  border: 1px solid rgba(255,75,11,.28) !important;
  background: #050403 !important;
  box-shadow: inset 4px 0 0 var(--ember);
}
table { border-collapse: collapse; }
th { color: var(--bone); font-family: "Barlow Condensed", sans-serif; font-size: 16px; letter-spacing: .05em; }
td, th { border-color: rgba(255,75,11,.18) !important; }

footer { background: #030202 !important; border-top: 1px solid rgba(255,75,11,.28) !important; }
footer > div { max-width: 1440px !important; }

/* Static guide, integrations and contact pages share the same visual system. */
.static-page, .guide-page, .integrations-page { background: #000; }
main .prose h2, main .prose h3 { font-family: "Barlow Condensed", sans-serif; }

@media (min-width: 640px) {
  [class*="grid-cols-[2fr_1fr_0.8fr_0.5fr_0.7fr_0.9fr_0.9fr_0.6fr]"] {
    grid-template-columns: 2fr 1fr .8fr .5fr .7fr .9fr .9fr .6fr;
  }
}

@media (min-width: 1100px) {
  [code-path="src/pages/Landing.tsx:12:7"] { min-height: 1050px; }
  [code-path="src/pages/Landing.tsx:12:7"]::after { top: 70px; right: 12px; }
}

@media (max-width: 1099px) {
  [code-path="src/pages/Landing.tsx:12:7"] { min-height: 0; padding: 72px 36px 80px !important; }
  [code-path="src/pages/Landing.tsx:12:7"]::after { position: relative; order: 2; top: auto; right: auto; width: min(100%,620px); margin: 24px auto 12px; align-self: center; }
  [code-path="src/pages/Landing.tsx:15:9"] { max-width: 850px !important; font-size: clamp(4.6rem,10vw,6.5rem) !important; }
  [code-path="src/pages/Landing.tsx:19:9"] { order: 4; }
  [code-path="src/pages/Landing.tsx:23b:9"] { order: 5; }
  [code-path="src/pages/Landing.tsx:24:9"] { order: 3; }
  [code-path="src/pages/Landing.tsx:38:9"] { order: 6; }
  [code-path="src/pages/Landing.tsx:19:9"], [code-path="src/pages/Landing.tsx:23b:9"], [code-path="src/pages/Landing.tsx:24:9"], [code-path="src/pages/Landing.tsx:38:9"] { width: 100%; max-width: 760px; }
}

@media (max-width: 639px) {
  body::before { background-size: 48px 48px; opacity: .09; }
  header > div { padding-left: 16px !important; padding-right: 16px !important; }
  header > div > a { gap: 6px !important; }
  header > div > a img { width: 28px !important; height: 28px !important; }
  header > div > a > span { font-size: 14px !important; }
  header nav { gap: 10px !important; }
  header nav > button { padding: 7px !important; }
  header a[href*="door=anonymous"] { padding: 10px 12px !important; font-size: 14px !important; }
  main h1[class], main > h1[class], body > main h1[class] { font-size: 3.4rem; }
  main h2[class], section h2[class] { font-size: 3rem; }
  [code-path="src/pages/Landing.tsx:12:7"] { padding: 54px 20px 62px !important; }
  [code-path="src/pages/Landing.tsx:14:9"] { margin-bottom: 20px !important; }
  [code-path="src/pages/Landing.tsx:15:9"] { font-size: clamp(4rem,19vw,5.4rem) !important; line-height: .84 !important; }
  [code-path="src/pages/Landing.tsx:15:9"] > span { margin-top: 24px; font-size: .57em; line-height: .92; }
  [code-path="src/pages/Landing.tsx:12:7"]::after { width: calc(100% + 28px); margin: 20px -14px 4px; }
  [code-path="src/pages/Landing.tsx:19:9"] { margin-top: 22px !important; font-size: 14px !important; }
  [code-path="src/pages/Landing.tsx:24:9"] { display: grid !important; grid-template-columns: 1fr 1fr; }
  [code-path="src/pages/Landing.tsx:24:9"] a { min-width: 0; width: 100%; padding-left: 16px !important; padding-right: 16px !important; }
  [code-path="src/pages/Landing.tsx:25:11"] { grid-column: 1 / -1; }
  [code-path="src/pages/Landing.tsx:38:9"] { line-height: 1.7; }
  [code-path="src/pages/Catalog.tsx:183:9"] { flex-wrap: wrap; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* DEMONROUTE FOOTER NAV 20261104 */
button[aria-label="Menu"], button[aria-label="Open menu"], #navmenu-btn, #navmenu { display: none !important; }
.dr-footer { border-top: 1px solid var(--line); background: #080808; padding: 42px 20px 28px; }
.dr-footer-inner { max-width: 1152px; margin: 0 auto; display: grid; gap: 24px; }
.dr-footer-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--bone); font-weight: 800; text-decoration: none; }
.dr-footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.dr-footer-links a { color: var(--muted); font-size: 14px; line-height: 1.5; text-decoration: none; transition: color .18s ease; }
.dr-footer-links a:hover, .dr-footer-links a:focus-visible { color: var(--ember); }
.dr-footer-note { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
@media (min-width: 768px) { .dr-footer-inner { grid-template-columns: 180px 1fr; align-items: start; } .dr-footer-note { grid-column: 2; } }

/* Footer owns secondary navigation; keep tablet headers to primary actions. */
@media (min-width: 768px) and (max-width: 1099px) {
  header nav a.hidden.md\:inline { display: none !important; }
}