/* The front page (GET /). Dark only, drawn over a real map picture; nothing here is used by the shop page or the dashboard.
   It loads AFTER dashboard.css and status.css, and re-points the dashboard's colour tokens at this page's olive-and-amber palette
   (see `body.hm`), so the blocks that still come from those files — the commands, the shop list, the buying bar, the support card —
   match without being restyled one by one. The state (online / offline / lost) is still one attribute on <body> (status.css). */

body.hm {
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-cond: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --bg-0: #0b0f0c; --bg-1: #080b09; --bg-2: #101610; --bg-3: #172018; --bg-input: #0d130e;
  --line: #223024; --line-strong: #2b3a2d;
  --text: #e3e8df; --text-2: #b6c0b2; --text-3: #8f9a8c;

  --acc: #f0b43c;                                     /* the one accent: amber */
  --blue: #f0b43c; --blue-fill: #f0b43c; --blue-fill-hover: #f6c45f;
  --blue-soft: rgba(240, 180, 60, .12); --blue-ring: rgba(240, 180, 60, .4);
  --green: #7fcf8e; --green-soft: rgba(127, 207, 142, .13);
  --red: #ff8d7c; --red-fill: #d4483a; --red-soft: rgba(255, 141, 124, .13);
  --amber: #f0b43c; --amber-soft: rgba(240, 180, 60, .13);
  --r-s: 2px; --r: 2px; --r-l: 2px;

  background: #0b0f0c; color: var(--text);
}
body.hm .btn.primary, body.hm button.primary { color: #0b0f0c; }
body.hm a:hover { text-decoration: none; }

.hm-wrap { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 32px; box-sizing: border-box; }

/* ─── The hero: a real map, a dark wash, the name ──────────────────────────── */
.hm-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 860px; background: #0b0f0c; }
.hm-map { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; filter: brightness(.85) saturate(.95); }
.hm-grid { position: absolute; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); background-size: 96px 96px; }
.hm-heat { position: absolute; z-index: -3; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; }
.hm-heat.a { left: 60%; top: 60%; width: 340px; height: 340px; background: radial-gradient(circle, #e5604dcc 0%, #e5604d55 38%, transparent 70%); }
.hm-heat.b { left: 79%; top: 68%; width: 280px; height: 280px; background: radial-gradient(circle, #e5604dbb 0%, #e5604d44 40%, transparent 70%); }
.hm-heat.c { left: 66%; top: 86%; width: 200px; height: 200px; background: radial-gradient(circle, #e5604d99 0%, #e5604d33 40%, transparent 70%); }
.hm-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, #0b0f0ccc 0%, #0b0f0c8c 34%, transparent 62%, #0b0f0c 100%),
    linear-gradient(90deg, #0b0f0cf0 0%, #0b0f0cb3 30%, #0b0f0c55 62%, #0b0f0c14 100%);
}
/* Decoration over the picture: a zone ring, a few dots with a slow ping, an airdrop diamond. No names, no numbers: it is texture, not data. */
.hm-marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hm-zone { position: absolute; left: 74%; top: 66%; width: 150px; height: 150px; transform: translate(-50%, -50%); border: 2px dashed #e5604d; border-radius: 50%; background: #e5604d1f; }
.hm-dot { position: absolute; width: 11px; height: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #0b0f0c99; }
.hm-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border: 2px solid var(--acc); border-radius: 50%; transform: translate(-50%, -50%) scale(.4); opacity: 0; animation: hm-ping 2.6s ease-out infinite; }
.hm-dot.p1 { left: 66%; top: 57%; }
.hm-dot.p2 { left: 84%; top: 58%; }
.hm-dot.p3 { left: 60%; top: 79%; }
.hm-dot.p3::after { animation: none; }
.hm-drop { position: absolute; left: 89%; top: 47%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid #8fe0cf; }
@keyframes hm-ping { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hm-dot::after { animation: none; } }

.hm-inner { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.hm-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 26px; }
.hm-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.hm-brand:hover { color: #fff; }
.hm-mark { width: 26px; height: 26px; color: var(--acc); }
.hm-brand span { font: 800 26px/1 var(--font-cond); letter-spacing: .06em; text-transform: uppercase; }
.hm-brand b { font-weight: 800; color: var(--acc); }
.hm-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15.5px; font-weight: 500; }
.hm-links a { color: #d5dcd1; }
.hm-links a:hover { color: #fff; }

.hm-copy { padding: 48px 0 40px; }
.hm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hm-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--st) 42%, transparent); background: color-mix(in srgb, var(--st) 10%, #0b0f0c);
  color: var(--st); font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.hm-badge .lamp { background: var(--st); box-shadow: 0 0 10px var(--st); }
.hm-rel { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.hm-name {
  margin: 18px 0 0; font: 900 clamp(50px, 11.5vw, 120px)/.84 var(--font-cond); letter-spacing: .005em; text-transform: uppercase;
  color: #fff; text-shadow: 0 4px 40px #000000b3;
}
.hm-name span { color: var(--acc); }
.hm-tag { margin: 20px 0 0; font: 700 clamp(30px, 4.4vw, 52px)/1 var(--font-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.hm-lead { margin: 24px 0 0; max-width: 46ch; font-size: 20px; line-height: 1.55; color: #cfd7cb; }
.hm .st-id { margin: 14px 0 0; color: var(--text-3); }

.hm .st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hm .btn.xl { height: 52px; padding: 0 26px; gap: 12px; font: 700 16.5px/1 var(--font-ui); border-radius: 0; }
.hm .btn.primary.xl { box-shadow: none; }
.hm .btn.xl:not(.primary) { background: #0b0f0c99; border-color: #5d7060; color: #fff; }
.hm .btn.xl:not(.primary):hover { background: #0b0f0ccc; border-color: #8a9a8c; }
.hm .st-cta a.support-btn.lg {
  height: 52px; padding: 0 8px; border-radius: 0; border-color: transparent; background: transparent; color: #d5dcd1; font-weight: 500; font-size: 16px;
  text-decoration: underline; text-decoration-color: #6f7a6c; text-underline-offset: 5px;
}
.hm .st-cta a.support-btn.lg:hover { background: transparent; border-color: transparent; color: #fff; text-decoration: underline; }
.hm .st-support a.support-btn.lg { height: 52px; padding: 0 26px; border-radius: 0; border: 1px solid #5d7060; background: transparent; color: #fff; font-weight: 600; font-size: 16px; }
.hm .st-support a.support-btn.lg:hover { background: #172018; border-color: #8a9a8c; color: #fff; }
.hm .st-cta-note { margin: 14px 0 0; max-width: 62ch; font-size: 14.5px; color: #aab5a6; }

/* The live numbers: one bar along the bottom of the hero. */
.hm-bottom { margin-top: auto; }
.hm .st-readouts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding-inline: max(32px, calc(50% - 558px));
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: #0b0f0ce6;
}
.hm .st-readouts .readout { padding: 18px 28px; border-left: 1px solid var(--line); }
.hm .st-readouts .readout:first-child { padding-left: 0; border-left: 0; }
.hm .st-readouts .readout .k { font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.hm .st-readouts .readout .v { margin-top: 6px; font: 700 clamp(30px, 4vw, 36px)/1 var(--font-cond); }
.hm .st-readouts .readout .v.mono { font: 500 22px/1.2 var(--font-mono); padding-top: 8px; }
.hm .st-readouts .readout .s { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.hm .st-live { margin: 0; padding: 12px 0 20px; }

/* ─── About, the maps ──────────────────────────────────────────────────────── */
.hm-sec { padding-top: 112px; }
.hm-two { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-start; }
.hm-side { flex: 1 1 280px; min-width: 0; }
.hm-main { flex: 2 1 480px; min-width: 0; }
.hm-kick { margin: 0; font: 500 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.hm-h2 { margin: 12px 0 0; font: 800 clamp(44px, 6vw, 72px)/.94 var(--font-cond); text-transform: uppercase; color: #fff; }
.hm-big { margin: 0; max-width: 54ch; font-size: 24px; line-height: 1.5; color: #f0f4ec; }
.hm-sub { margin: 20px 0 0; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.hm-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 64px; margin-top: 60px; border-top: 1px solid var(--line-strong); }
.hm-feat { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.hm-feat h3 { margin: 0; font: 700 30px/1 var(--font-cond); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.hm-feat p { margin: 8px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--text-2); }

.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: 22px; }
.hm-head .hm-h2 { margin: 0; font-size: clamp(36px, 5vw, 56px); }
.hm-head p { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.hm-tile { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-2); }
.hm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-tile img[src$="/livonia"] { filter: brightness(.58) saturate(.85); }
.hm-tile img[src$="/nasdara"] { filter: brightness(.72); }
.hm-tile img[src$="/sakhal"] { filter: brightness(.55) saturate(.85); }
.hm-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0b0f0ccc 100%); }
.hm-tile figcaption { position: absolute; z-index: 1; left: 18px; bottom: 14px; font: 700 28px/1 var(--font-cond); letter-spacing: .04em; text-transform: uppercase; color: #fff; }

/* ─── Commands, the shop, support: the blocks that come from dashboard.css / status.css, drawn flatter ─────── */
.hm-body { padding-top: 112px; }
.hm-body .block { padding: 0; border-top: 0; gap: 28px 64px; }
.hm .block.st-block { display: grid; margin-top: 0; font-size: inherit; color: inherit; }      /* (status.css also uses `.st-block` for a line of text in the buying dialog; that rule must not turn this section into a plain block) */
.hm .st-block .block-meta h2 { font: 800 clamp(40px, 4.6vw, 62px)/.94 var(--font-cond); text-transform: uppercase; color: #fff; }
.hm .st-block .block-meta p { max-width: 32ch; font-size: 17px; color: var(--text-2); }
.hm .st-cmds { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.hm .st-cmd-head { margin: 0; padding: 0 0 8px; background: transparent; border-bottom: 1px solid var(--line-strong); font: 500 12.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--text-3); }
.hm .st-cmds .st-cmd-head:not(:first-child) { margin-top: 34px; border-top: 0; color: #ff8d7c; }
.hm .st-cmd { grid-template-columns: 250px minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; }
.hm .st-cmd + .st-cmd { border-top: 1px solid #1c271e; }
.hm .st-cmd dt { font: 500 15.5px/1.4 var(--font-mono); color: var(--acc); }
.hm .st-cmds .st-cmd-head:not(:first-child) + .st-cmd-list .st-cmd dt { color: #ff8d7c; }
.hm .st-cmd dd { font-size: 17px; color: #d5dcd1; }

.hm-band { position: relative; isolation: isolate; overflow: hidden; margin-top: 112px; border-block: 1px solid var(--line-strong); }
.hm-band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.5) saturate(.8); }
.hm-band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b0f0cf2 0%, #0b0f0cb3 55%, #0b0f0c66 100%); }
.hm-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 44px; padding-block: 72px; }
.hm-band-in > div { flex: 1 1 420px; min-width: 0; }
.hm-band .hm-h2 { font-size: clamp(40px, 6vw, 68px); line-height: .95; }
.hm-band p:not(.hm-kick) { margin: 14px 0 0; max-width: 50ch; font-size: 19px; line-height: 1.55; color: #d5dcd1; }
.hm-band .btn.xl { height: 58px; padding-inline: 32px; font-size: 17.5px; }

.hm .st-support { margin-top: 56px; padding: 32px 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.hm .st-support h2 { font: 800 34px/1 var(--font-cond); text-transform: uppercase; color: #fff; }
.hm .st-support p { max-width: 52ch; }

.hm-foot { margin-top: 88px; overflow: hidden; background: #080b09; border-top: 1px solid var(--line); }
.hm-bigname { max-width: 1180px; margin: 0 auto; padding: 40px 32px 0; box-sizing: border-box; font: 900 clamp(50px, 11.5vw, 120px)/.82 var(--font-cond); text-transform: uppercase; color: #141c16; user-select: none; }
.hm-bigname span { color: #2a2416; }
.hm-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block: 22px; font-size: 14px; color: var(--text-3); }
.hm-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hm-foot a { color: var(--text-2); }
.hm-foot a:hover { color: #fff; }

@media (max-width: 960px) {
  .hm-wrap { padding-inline: 24px; }
  .hm-bigname { padding-inline: 24px; }
}
@media (max-width: 700px) {
  .hm-wrap { padding-inline: 16px; }
  .hm-bigname { padding-inline: 16px; }
  .hm-hero { min-height: 0; }
  .hm-shade { background: linear-gradient(180deg, #0b0f0ccc 0%, #0b0f0cb3 55%, #0b0f0c 100%); }
  .hm-heat { opacity: .4; }
  .hm-marks { display: none; }
  .hm-copy { padding: 36px 0 32px; }
  .hm .st-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
  .hm .st-readouts .readout { padding: 16px 18px; }
  .hm .st-readouts .readout:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hm .st-readouts .readout:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hm-sec, .hm-body { padding-top: 72px; }
  .hm-band { margin-top: 72px; }
  .hm-band-in { padding-block: 52px; }
  .hm .st-cmd { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hm-foot { margin-top: 64px; }
}