/* NUKEPAD on top of the template's Webflow CSS: near-black + hazard yellow, warning orange for strikes, cold steel greys.
   Stencil + dot-matrix headline pair, Archivo body, JetBrains Mono for numbers. No loading gate. */
:root {
  --nk-ink: #0b0d0f; --nk-panel: #14181c; --nk-panel2: #1b2025; --nk-line: #262c32; --nk-line2: #343c43;
  --nk-steel: #9aa5ae; --nk-light: #d3d9de; --nk-text: #e9edf0; --nk-yellow: #ffc400; --nk-orange: #ff6a1a; --nk-red: #ff4b3e;
  --color--brand: #ffc400; --black: #0b0d0f; --color--black: #0b0d0f; --color--light-grey: #d3d9de;
  --button--text-hover: #0b0d0f; --color--currentcolor: #0b0d0f;
}
html, body { background: var(--nk-ink); color: var(--nk-text); }
::selection { background: var(--nk-yellow); color: var(--nk-ink); }
.page-wrapper { background-color: var(--nk-ink); }
.loader, #introVideo { display: none !important; }

/* wordmark */
.nk-word { font-family: "Saira Stencil One", sans-serif; font-size: 25px; line-height: 1; letter-spacing: .04em; color: var(--nk-text); white-space: nowrap; }
.nk-word::first-letter { color: var(--nk-yellow); }
.code-embed-2.w-embed, .navv2__drill-logo .w-embed, .footer_logo-icon.w-embed { width: auto !important; height: auto !important; display: flex; align-items: center; }
.footer_logo-icon .nk-word { font-size: 30px; }

/* header */
.navv2 { background-color: rgba(11, 13, 15, .82); border-bottom-color: var(--nk-line); }
.navv2__bar { background-color: transparent; }
.navv2__cta { border-color: var(--nk-yellow) !important; color: var(--nk-yellow) !important; }
.navv2__cta:hover { background: var(--nk-yellow) !important; color: var(--nk-ink) !important; }

/* hero type: stencil half in hazard yellow, dot-matrix half white */
.hero_heading_mondawest { color: var(--nk-yellow); letter-spacing: -.01em; }
.home_hero_neubit { letter-spacing: .02em; }
.home_hero_content .quick-stack { opacity: 1 !important; }

/* buttons: yellow fill takes ink text */
.button-primary, .button-primary .button-text { color: var(--nk-ink); }
.button-primary:hover { background-color: #ffd54a; }
.button-primary.is-outline { background: transparent; border: 1px solid var(--nk-yellow); }
.button-primary.is-outline .button-text { color: var(--nk-yellow); }
.button-primary.is-outline:hover { background: var(--nk-yellow); }
.button-primary.is-outline:hover .button-text { color: var(--nk-ink); }

/* the globe sits behind the numbered sections: their text lets the pointer through, their links and buttons do not */
#section-1, #section-2, #section-3, #section-4, #section-5 { pointer-events: none; }
#section-1 a, #section-2 a, #section-3 a, #section-4 a, #section-5 a, #section-1 button, #section-4 .nk-left { pointer-events: auto; }
#nk-hero-globe { z-index: 0; transform-origin: 0 0; will-change: transform; }
.main-wrapper { position: relative; z-index: 1; }

/* globe (all pages) */
.nk-globe { position: relative; user-select: none; -webkit-user-select: none; }
.nk-gl-canvas { position: absolute; inset: 0; display: block; }
.nk-globe.is-over .nk-gl-canvas { cursor: grab; }
.nk-globe.is-dragging .nk-gl-canvas { cursor: grabbing; }
.nk-gl-layer { position: absolute; inset: 0; pointer-events: none; }
.nk-gl-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-115% - var(--dy, 0px))); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 7px 0 6px; border: 1px solid var(--nk-yellow); background: rgba(11, 13, 15, .86); color: var(--nk-text); font: 500 12px/1 "JetBrains Mono", monospace; cursor: pointer; transition: opacity .2s; white-space: nowrap; }
.nk-gl-tag b { font-weight: 700; color: var(--nk-ink); background: var(--nk-yellow); padding: 3px 4px; margin-left: -2px; }
.nk-gl-tag::after { content: ""; position: absolute; left: 50%; bottom: calc(-7px - var(--dy, 0px)); width: 1px; height: calc(6px + var(--dy, 0px)); background: var(--nk-yellow); }
.nk-gl-tag:hover, .nk-gl-tag.is-on { background: var(--nk-yellow); color: var(--nk-ink); }
.nk-gl-tag:hover b, .nk-gl-tag.is-on b { background: var(--nk-ink); color: var(--nk-yellow); }
.nk-gl-tag.is-back { opacity: 0; pointer-events: none; }
.nk-gl-tag.is-out { border-color: var(--nk-line2); }
.nk-gl-tag.is-out b { background: var(--nk-line2); color: var(--nk-steel); }
.nk-gl-tip { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; background: var(--nk-panel); border: 1px solid var(--nk-line2); border-left: 2px solid var(--nk-orange); font: 500 12px/1.25 "JetBrains Mono", monospace; color: var(--nk-steel); max-width: 240px; z-index: 3; }
.nk-gl-tip b { color: var(--nk-text); font: 600 14px/1.2 Archivo, sans-serif; }

/* 02: live counts where the investor logos were */
.nk-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 12px; border-top: 1px solid var(--nk-line2); min-width: 9rem; }
.nk-stat span { font: 500 12px/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--nk-steel); }
.nk-stat b { font: 500 22px/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: var(--nk-text); }
[data-nk-stat="left"] b { color: var(--nk-yellow); }

/* 04: warheads left per state where the exchange logos were */
.quick-stack-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column-gap: 10px !important; grid-row-gap: 10px !important; }
.nk-left { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--nk-line2); background: rgba(11, 13, 15, .72); color: var(--nk-text); text-decoration: none; transition: border-color .15s, background-color .15s; }
.nk-left b { grid-row: span 2; font: 700 30px/1 Handjet, monospace; color: var(--nk-yellow); }
.nk-left span { font: 500 12px/1.2 Archivo, sans-serif; color: var(--nk-steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-left i { font: 500 17px/1.1 "JetBrains Mono", monospace; font-style: normal; font-variant-numeric: tabular-nums; }
.nk-left:hover { border-color: var(--nk-yellow); background: rgba(255, 196, 0, .08); }
.nk-left.is-out b, .nk-left.is-out i { color: var(--nk-steel); }
.nk-src { font: 700 28px/1 Handjet, monospace; letter-spacing: .03em; color: var(--nk-text); text-decoration: none; border-bottom: 1px solid var(--nk-yellow); }

/* 05: delivery systems where the token logos were */
.nk-sys { display: flex; align-items: baseline; justify-content: center; gap: 10px; width: 100%; }
.nk-sys b { font: 700 28px/1 Handjet, monospace; letter-spacing: .03em; color: var(--nk-text); white-space: nowrap; }
.nk-sys span { font: 500 12px/1 "JetBrains Mono", monospace; color: var(--nk-yellow); white-space: nowrap; }

/* How it works panel: hazard yellow with ink words */
.home_stats_sticky, .home_stats_sticky .sub-header, .home_stats_sticky .text-size-small, .home_stats_sticky .text-span-7, .home_stats_sticky .pixel-heading { color: var(--nk-ink); }
.home_stats_header-flex.is-white-30 { color: rgba(11, 13, 15, .28); }
.home_stats_sticky .home_stats_icon { color: rgba(11, 13, 15, .5); }
.home_stats_sticky .text-size-small { font-size: 15px; }

/* Arsenal panel: steel with ink words, the stockpile bars in the photo frame */
.home_stockpile_component { background-color: var(--nk-light); }
.nk-bars { width: 100%; height: 100%; display: block; }
.home_stockpile_image-wrapper .image_overlay { display: none; }
.nk-card { width: 100% !important; height: 100% !important; object-fit: contain; display: block; background: var(--nk-ink); }

/* CA pill and X (only when set in config) */
.nk-ca-row { display: flex; gap: 10px; margin-top: 18px; }
.nk-ca-row:empty { display: none; }
.nk-ca { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--nk-line2); background: var(--nk-panel); color: var(--nk-text); font: 500 13px/1 "JetBrains Mono", monospace; }
.nk-ca span { color: var(--nk-yellow); }
.nk-x { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 10px; border: 1px solid var(--nk-line2); color: var(--nk-text); font: 700 15px/1 Archivo, sans-serif; text-decoration: none; }
.footer_social-link:empty { display: none; }

/* footer: ink with a hazard rule on top */
.footer_component { background: var(--nk-ink); }
.footer_component::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--nk-yellow) 0 10px, var(--nk-ink) 10px 20px); z-index: 2; }
.footer_background-wrap { background-color: var(--nk-ink); }

/* toasts */
#nk-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.nk-toast { padding: 12px 14px; background: var(--nk-panel); border: 1px solid var(--nk-line2); border-left: 3px solid var(--nk-yellow); color: var(--nk-text); font: 500 14px/1.35 Archivo, sans-serif; }
.nk-toast.bad { border-left-color: var(--nk-red); }

@media (max-width: 767px) {
  .quick-stack-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column-gap: 6px !important; }
  .nk-left { grid-template-columns: 1fr; padding: 8px; }
  .nk-left b { grid-row: auto; font-size: 24px; }
  .nk-left span { display: none; }
  .nk-left i { font-size: 15px; }
  .nk-sys b { font-size: 22px; }
  .nk-word { font-size: 22px; }
  #nk-hero-globe { z-index: 0; }
}
.nk-gl-tip[hidden] { display: none; }
.nk-sys b { font-size: 24px; }
.home_stockpile_component .pixel-heading, .home_stockpile_component .home_stats_header-flex.text-color-white { color: var(--nk-ink); }
.home_stockpile_component .home_stats_icon { color: rgba(11, 13, 15, .5); }
.footer_background-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .55; }
/* the home's scroll wrappers cover the fixed globe: let the pointer through them too */
#scroll, .main-wrapper:has(#scroll) { pointer-events: none; }
#scroll .sticky_wrap, #scroll .tabs_menu_component, .main-wrapper:has(#scroll) .sticky_wrap { pointer-events: auto; }
/* header mark: the approved logo in front of the wordmark */
.nk-mark { width: 32px; height: 32px; display: block; flex: none; margin-right: 10px; }
@media (max-width: 767px) { .nk-mark { width: 28px; height: 28px; margin-right: 8px; } }
