/* ═══════════════════════════════════════════════════════════
   187 DARK KNIGHTS — MECHA HUD overlay (HYBRID proposal)
   Gothic headlines + blackletter wordmark KEPT; chrome goes HUD:
   mech-red retint, cyan readouts, skew-tab menus/buttons,
   cut-corner panels, Orbitron on the supporting UI.
   Loaded AFTER style/forge/landing so it wins.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

:root{
  --blood:#ff2e42; --blood2:#ff2e42; --maroon:#b3202f;
  --readout:#29e7ff;
  --cut:12px;
  --hud-cyan:rgba(41,231,255,.26);
  --hud-red:rgba(255,46,66,.32);
}

/* ── FIELD: cleaner HUD backdrop + faint hex grid, less all-red wash ── */
body.landing{
  background-color:#050608 !important;
  background-image:
    radial-gradient(1000px 540px at 14% -8%, rgba(255,46,66,.13), transparent 60%),
    radial-gradient(820px 460px at 108% 4%, rgba(41,231,255,.09), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 1h28l14 23-14 23H14L0 24z' fill='none' stroke='%2329e7ff' stroke-opacity='.05'/%3E%3C/svg%3E") !important;
  background-attachment:fixed !important;
}

/* ═══ NAV — skew-tab HUD menu ═══ */
.lp-nav{ border-bottom:1px solid var(--hud-cyan); background:linear-gradient(180deg,rgba(255,46,66,.06),rgba(5,6,8,.92)); backdrop-filter:blur(9px); }
.lp-nav-links a{
  font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; color:var(--ink2); padding:9px 17px; position:relative;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  border:1px solid transparent; transition:.15s;
}
.lp-nav-links a:hover{ color:#fff; border-color:var(--hud-cyan); background:rgba(41,231,255,.06); }
.lp-nav-links a.on{ color:var(--readout); border-color:var(--hud-cyan); background:rgba(41,231,255,.07); }

/* ═══ BUTTONS — parallelogram skew tabs ═══ */
.btn-blood,.btn-ghost,.lp-btn-lg,.btn-mini{
  border-radius:0 !important;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  font-family:'Orbitron',sans-serif !important; text-transform:uppercase; letter-spacing:.11em;
}
.btn-blood{ background:var(--blood) !important; color:#04060a !important; border:none !important;
  box-shadow:0 0 20px rgba(255,46,66,.42) !important; }
.btn-ghost{ background:transparent !important; color:var(--readout) !important; border:1px solid var(--readout) !important; }
.btn-blood:hover{ box-shadow:0 0 28px rgba(255,46,66,.6) !important; transform:translateY(-1px); }

/* ═══ KICKERS — Orbitron cyan + diamond bullet ═══ */
.lp-kicker{
  font-family:'Orbitron',sans-serif !important; color:var(--readout) !important;
  letter-spacing:.3em; display:inline-flex; align-items:center; gap:10px;
}
.lp-kicker::before{ content:""; width:9px;height:9px; flex:none; background:var(--blood);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 0 8px var(--blood); }

/* section sub-text to mono-ish readout grey */
.lp-sub{ color:#9fb2c4; }

/* ═══ PANELS — radius 0, cut corners, cyan hairline, red top-accent ═══
   ⚠️ .plate EXCLUDES .mor-panel. The Morticia chat panel is
   .mor-panel.plate and morticia.css pins it position:fixed off-screen.
   This block sets position:relative, and since mecha-hud loads AFTER
   morticia it won. A fixed off-screen panel forced to relative drops
   into page flow BELOW the footer → the scrollable gap at the bottom.
   The dock/panel are chrome, not landing cards; they keep their own look. */
.lp-div, .lp-point, .lp-code-item, .lp-mor, .plate:not(.mor-panel){
  border-radius:0 !important;
  background:linear-gradient(160deg,rgba(14,21,32,.92),rgba(6,9,14,.96)) !important;
  border:1px solid var(--hud-cyan) !important;
  backdrop-filter:none !important;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  position:relative;
}
.lp-div::before, .lp-point::before{
  content:""; position:absolute; left:0; right:14px; top:0; height:2px;
  background:linear-gradient(90deg,var(--blood),var(--readout) 70%,transparent); opacity:.8;
}
.lp-div:hover, .lp-point:hover{ border-color:var(--readout) !important;
  box-shadow:0 0 22px rgba(41,231,255,.18) !important; transform:translateY(-3px); }

/* division name stays forged; tag + go go HUD-cyan */
.lp-div-tag{ font-family:'Share Tech Mono',monospace; color:var(--readout); letter-spacing:.08em; }
.lp-div-go{ font-family:'Orbitron',sans-serif; color:var(--readout); letter-spacing:.14em; text-transform:uppercase; font-size:11px; }
.work-tag{ border-radius:0 !important; border:1px solid var(--hud-cyan); color:var(--readout);
  background:rgba(41,231,255,.05); font-family:'Share Tech Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.lp-point b{ /* keep forged */ }

/* ═══ PROOF STATS — mono cyan readouts, Orbitron labels ═══ */
.lp-proof{ border-top:1px solid var(--hud-cyan); }
.lp-proof b{ font-family:'Share Tech Mono',monospace !important; color:var(--readout) !important;
  text-shadow:0 0 12px rgba(41,231,255,.4); }
.lp-proof small{ font-family:'Orbitron',sans-serif !important; color:#6b7f90 !important; letter-spacing:.2em; }

/* eyebrow to mono */
.lp-eyebrow{ font-family:'Share Tech Mono',monospace !important; color:var(--readout) !important; letter-spacing:.35em; }
/* The creed line beneath it — dimmer companion to the tagline. */
.lp-eyebrow2{ font-family:'Share Tech Mono',monospace; color:#6b7f90;
  letter-spacing:.22em; font-size:12px; text-transform:uppercase;
  margin-top:3px; opacity:.9; }

/* scroll chevron cyan */
.lp-scroll{ color:var(--readout) !important; }

/* scrollbar cyan/red */
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--blood),#7a0f1a) !important; }

/* ═══ STORE PRODUCT CARDS (.crypt-card) — were rounded (14px) + grungy +
   crimson border, so they read as OLD next to the marketing HUD panels.
   Bring them to the .lp-div look: cut corners + cyan border + the clean
   cool-dark gradient, cyan readout accents. Buttons already HUD
   (btn-blood / btn-ghost). (Knox, 2026-10-19 — "you missed some more".) ═══ */
.crypt-card{
  border-radius:0 !important;
  border:1px solid var(--hud-cyan) !important;
  background:linear-gradient(160deg,rgba(14,21,32,.9),rgba(6,9,14,.95)) !important;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.crypt-card:hover{
  border-color:var(--readout) !important;
  box-shadow:0 0 26px rgba(41,231,255,.12) !important;
}
.crypt-img{ border-radius:0 !important; }
.crypt-name{ font-family:'Oswald',sans-serif !important; }
.crypt-cat{ color:var(--readout) !important; }
.crypt-price{ color:var(--blood) !important; }
.crypt-badge{
  border-radius:0 !important;
  border:1px solid var(--hud-cyan) !important; color:var(--readout) !important;
  background:rgba(41,231,255,.06) !important;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}

/* ═══ FULL-SWEEP 2026-10-19 — marketing/company-side content cards that
   still read as old rounded cards: home blocks + tiles, division cards +
   service cards, membership tiers, landing work cards, Patreon row, stat
   tiles. Same cut-corner + cyan border as the .lp-div family above. ═══ */
/* `body ` prefix on purpose: deck.css loads AFTER mecha-hud.css on the
   marketing pages and its card-family rule (`.tier-card, .contract …`)
   sets a grey border !important at equal specificity, which would win on
   load order. The body-level prefix lifts this to (0,1,1) so the cyan
   border wins regardless of order. The cut-corner has no competitor. */
body .home-block, body .home-tile, body .div-card, body .div-services, body .div-service,
body .svc-card, body .tier-card, body .membership-tier, body .lp-work-card, body .patreon-row, body .stat{
  border-radius:0 !important;
  border:1px solid var(--hud-cyan) !important;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}