/* ByteBrain · Agentic Futures portal
   Layout: one cream frontier ground with halftone dot fields, pixel display type for short titles,
   geometric sans for reading, dark neon bands for the film and the call to action. Single brand look by choice. */
:root {
  --cream: #f4f1e9;      /* page ground (brand sheet) */
  --paper: #fbf9f4;      /* raised cards */
  --sand: #decebc;       /* voxel sand */
  --stone: #ccbeaf;      /* voxel stone, hairlines on cream */
  --ink: #0a141f;        /* text and dark bands */
  --ink-2: #39424f;      /* secondary text */
  --indigo: #4e52b7;     /* Scout's bandana, primary accent */
  --violet: #6022e8;     /* BRAIN wordmark */
  --orange: #dd6d2f;     /* brand spark, humans at both ends */
  --orange-ink: #b4521c; /* orange text on cream (contrast) */
  --cyan: #6fd6ff;       /* neon on dark bands */
  --line: rgba(10, 20, 31, .14);
  --pixel: "Silkscreen", "Courier New", monospace;
  --sans: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r: 14px;
  --shadow: 0 1px 0 rgba(10,20,31,.06), 0 18px 40px -24px rgba(10,20,31,.35);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { background: var(--cream); color: var(--ink); }
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--indigo); }
a:hover { color: var(--violet); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--indigo); color: #fff; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.narrow { max-width: 760px; }
section { position: relative; }
.band { padding-block: clamp(72px, 10vw, 140px); }

/* halftone dot fields, as on the brand sheet */
.dots { overflow-x: clip; }
.dots::before { content: ""; position: absolute; pointer-events: none; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10,20,31,.22) 1.4px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 70%); mask: radial-gradient(circle, #000 0 20%, transparent 70%); opacity: .5; }
.dots.dl::before { left: -150px; top: 30%; }
.dots.dr::before { right: -150px; top: 10%; }

/* type */
.eyebrow { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--orange-ink); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--orange); box-shadow: 8px -8px 0 var(--orange), 8px 8px 0 rgba(221,109,47,.55); margin-right: 10px; }
.pix { font-family: var(--pixel); font-weight: 400; letter-spacing: .02em; line-height: .95; text-transform: uppercase; }
.h-xl { font-size: clamp(38px, 5.6vw, 80px); }
.h-lg { font-size: clamp(30px, 4vw, 54px); line-height: 1.02; }
.h-md { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.01em; }
.h-sm { font-family: var(--sans); font-weight: 600; font-size: 21px; line-height: 1.3; }
.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.violet { color: var(--violet); }
.indigo { color: var(--indigo); }
.orange { color: var(--orange-ink); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(244,241,233,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--cream); }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.brand .bw { font-family: var(--pixel); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.brand .bw b { color: var(--violet); font-weight: 700; }
.brand small { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav ul a { display: inline-block; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; }
.nav ul a:hover, .nav ul a[aria-current="true"] { background: rgba(78,82,183,.1); color: var(--indigo); }
.nav .menu-btn { display: none; }
@media (max-width: 900px) {
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--cream); padding: 10px var(--gutter-r) 18px var(--gutter); border-bottom: 1px solid var(--line); }
  .nav.open ul { display: flex; }
  .nav ul a { font-size: 17px; padding: 12px 14px; }
  .nav .menu-btn { display: inline-flex; }
}

/* buttons */
.btn { --b: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 2px solid var(--b); background: var(--b); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .2s; box-shadow: 4px 4px 0 var(--indigo); }
.btn:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--indigo); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--indigo); }
.btn.orange-b { --b: var(--orange); box-shadow: 4px 4px 0 var(--ink); }
.btn.orange-b:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--orange); }
.btn.sm { min-height: 40px; padding: 8px 14px; font-size: 14.5px; }
.btn.light { --b: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--violet); }
.btn.light:hover { color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* cards */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); min-width: 0; }
.grid { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 420px) { .g2, .g3 { grid-template-columns: 1fr; } }
.pixmark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pixmark i { background: var(--indigo); border-radius: 1px; }
.pixmark i:nth-child(odd) { background: transparent; }
.pixmark.o i { background: var(--orange); } .pixmark.o i:nth-child(odd) { background: transparent; }

/* Scout guide */
.scout-guide { position: fixed; z-index: 40; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.scout-guide .bubble { pointer-events: auto; max-width: 270px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px 14px 4px 14px; padding: 12px 14px 12px; font-size: 15px; line-height: 1.4; box-shadow: 4px 4px 0 var(--indigo); transform-origin: bottom right; transition: opacity .25s, transform .25s; position: relative; margin-bottom: 70px; }
.scout-guide .bubble b { display: block; font-family: var(--pixel); font-size: 11px; letter-spacing: .08em; color: var(--orange-ink); margin-bottom: 3px; }
.scout-guide .bubble .x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); font-size: 18px; line-height: 1; border-radius: 6px; }
.scout-guide .bubble.swap { opacity: 0; transform: scale(.94) translateY(6px); }
.scout-guide.quiet .bubble, .scout-guide.hush .bubble { display: none; }
.scout-guide.hush .rider { position: relative; }
.scout-guide.hush:not(.quiet) .rider::before { content: "!"; position: absolute; top: 4px; left: 6px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--orange); color: #fff; font: 700 13px var(--pixel); z-index: 2; }
.scout-guide .rider { transition: opacity .3s, transform .3s; }
.scout-guide.away .rider { opacity: 0; transform: translateX(30px); }
.scout-guide.away .bubble { margin-bottom: 8px; }
.scout-guide .rider { position: relative; pointer-events: auto; width: 112px; height: 112px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.scout-guide .rider img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(10,20,31,.25)); animation: trot 1.1s steps(2) infinite; }
@keyframes trot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 640px) { .scout-guide .rider { width: 78px; height: 78px; } .scout-guide .bubble { max-width: 210px; font-size: 14px; margin-bottom: 50px; } }

/* reveal: only applied by script to elements below the fold */
.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.pre { opacity: 0; transform: translateY(28px); }

/* pixel title reveal (letters drop in like blocks) */
.blocks .ch { display: inline-block; transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .4s; }
.blocks.pre .ch { transform: translateY(-.6em); opacity: 0; }

/* marquee */
.marquee { overflow: hidden; border-block: 2px solid var(--ink); background: var(--ink); color: var(--cream); padding-block: 14px; }
.marquee .track { display: flex; gap: 48px; white-space: nowrap; font-family: var(--pixel); font-weight: 700; font-size: clamp(22px, 3vw, 38px); will-change: transform; }
.marquee .track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee .track span::after { content: ""; width: 14px; height: 14px; background: var(--orange); box-shadow: 14px 0 0 var(--violet); }

/* dark neon band */
.dark { background: #070b14; color: #eef0ff; }
.dark .lead, .dark .muted { color: #b9c0dc; }
.dark .eyebrow { color: #ffb38a; }
.dark a { color: var(--cyan); }
.neon-grid { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(rgba(111,214,255,.07) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgba(160,110,255,.07) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }

/* modal form */
dialog.modal { border: 0; padding: 0; border-radius: 18px; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--indigo), 0 40px 80px -20px rgba(0,0,0,.5); }
dialog.modal::backdrop { background: rgba(10,20,31,.55); backdrop-filter: blur(3px); }
.modal .mhead { padding: 22px 26px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal .mbody { padding: 18px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal .close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 20px; flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 14.5px; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--stone); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); outline: 3px solid rgba(78,82,183,.2); outline-offset: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--stone); background: #fff; font-size: 14.5px; cursor: pointer; user-select: none; }
.chip input { accent-color: var(--indigo); width: 16px; height: 16px; margin: 0; }
.chip:has(input:checked) { border-color: var(--indigo); background: rgba(78,82,183,.08); color: var(--indigo); font-weight: 600; }
.err { color: #a3261a; font-size: 14px; }
.sentbox { background: rgba(78,82,183,.07); border: 1.5px dashed var(--indigo); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sentbox pre { margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; max-height: 200px; overflow: auto; background: #fff; border-radius: 8px; padding: 10px; border: 1px solid var(--line); }
.addr { font-family: var(--mono); font-weight: 600; user-select: all; }

/* footer */
.foot { position: relative; background: var(--ink); color: #d9dcea; overflow: hidden; }
.foot .horizon { height: clamp(140px, 22vw, 260px); background: url(frontier-horizon.jpg) center bottom / cover; image-rendering: auto; -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); }
.foot .wrap { padding-block: 34px 44px; display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: flex-end; }
.foot a { color: #fff; }
.foot .wm { width: min(360px, 80vw); filter: brightness(0) invert(1); opacity: .95; }
.foot small { color: #9aa2bc; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .blocks .ch { transition: none !important; }
  .rv.pre, .blocks.pre .ch { opacity: 1 !important; transform: none !important; }
  .scout-guide .rider img { animation: none; }
}