body { background: var(--void); }
.sky { background: radial-gradient(40rem 26rem at 85% 8%, var(--sky-2), transparent 66%), radial-gradient(46rem 28rem at 8% 100%, var(--sky-1), transparent 68%), linear-gradient(180deg, var(--sky-top), var(--sky-bot)); }
.sky::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221600%22%20height=%22620%22%20viewBox=%220%200%201600%20620%22%20preserveAspectRatio=%22xMidYMax%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id=%22m%22%20cx=%22.5%22%20cy=%22.5%22%20r=%22.5%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23dfe8b0%22%20stop-opacity=%22.55%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23dfe8b0%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx=%221280%22%20cy=%22150%22%20r=%22200%22%20fill=%22url%28%23m%29%22/%3E%3Ccircle%20cx=%221280%22%20cy=%22150%22%20r=%2270%22%20fill=%22%23e6efc0%22%20opacity=%22.9%22/%3E%3Cg%20fill=%22%23050804%22%3E%3Cpath%20d=%22M0%20520Q200%20480%20400%20505T800%20500T1200%20510T1600%20495V620H0z%22/%3E%3Cpath%20d=%22M120%20520v-90l-34-40M120%20460l30-30M120%20440l-24-46%22%20stroke=%22%23050804%22%20stroke-width=%2210%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%3Crect%20x=%22300%22%20y=%22450%22%20width=%2246%22%20height=%2270%22%20rx=%2222%22/%3E%3Crect%20x=%22290%22%20y=%22505%22%20width=%2266%22%20height=%2218%22/%3E%3Crect%20x=%22520%22%20y=%22470%22%20width=%2240%22%20height=%2252%22%20rx=%224%22/%3E%3Crect%20x=%22532%22%20y=%22452%22%20width=%2216%22%20height=%2228%22/%3E%3Crect%20x=%22520%22%20y=%22462%22%20width=%2240%22%20height=%2212%22/%3E%3Crect%20x=%22900%22%20y=%22445%22%20width=%2250%22%20height=%2278%22%20rx=%2225%22/%3E%3Crect%20x=%22890%22%20y=%22508%22%20width=%2270%22%20height=%2218%22/%3E%3Crect%20x=%221450%22%20y=%22462%22%20width=%2244%22%20height=%2260%22%20rx=%224%22/%3E%3Crect%20x=%221466%22%20y=%22440%22%20width=%2212%22%20height=%2230%22/%3E%3Crect%20x=%221452%22%20y=%22452%22%20width=%2240%22%20height=%2210%22/%3E%3C/g%3E%3Cg%20fill=%22%2307100a%22%20stroke=%22%2307100a%22%3E%3Ccircle%20cx=%22740%22%20cy=%22330%22%20r=%2244%22/%3E%3Cpath%20d=%22M690%20372q50%2040%20100%200v50H690z%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M700%20400L560%20350M780%20400L930%20340%22%20stroke-width=%2222%22%20stroke-linecap=%22round%22%20fill=%22none%22/%3E%3Cpath%20d=%22M560%20350l-30-30M560%20350l-34%204M560%20350l-26%2022M930%20340l32-28M930%20340l36%208M930%20340l24%2024%22%20stroke-width=%229%22%20stroke-linecap=%22round%22%20fill=%22none%22/%3E%3Crect%20x=%22690%22%20y=%22410%22%20width=%22100%22%20height=%22120%22%20rx=%2214%22%20stroke=%22none%22/%3E%3C/g%3E%3Ccircle%20cx=%22722%22%20cy=%22326%22%20r=%228%22%20fill=%22%23d1121f%22/%3E%3Ccircle%20cx=%22760%22%20cy=%22326%22%20r=%228%22%20fill=%22%23d1121f%22/%3E%3Cpath%20d=%22M722%20356h36%22%20stroke=%22%232a0608%22%20stroke-width=%225%22%20stroke-linecap=%22round%22/%3E%3Cg%20fill=%22%23050804%22%3E%3Cpath%20d=%22M1040%20520l-12-60%2010-4%206%2040%208-44%2010%202-4%2048%2010-36%2010%204-10%2054z%22/%3E%3Cpath%20d=%22M200%20524l-8-50%209-3%204%2034%207-38%209%202-3%2040%208-28%209%203-8%2044z%22/%3E%3C/g%3E%3Cg%20fill=%22%23050804%22%20opacity=%22.8%22%3E%3Cpath%20d=%22M300%2090q18-14%2030%200q12-14%2030%200q-14%206-30%2020q-16-14-30-20z%22/%3E%3Cpath%20d=%22M560%20160q14-10%2024%200q10-10%2024%200q-12%205-24%2016q-12-11-24-16z%22/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat; opacity: 0.9; }
.sky::after { content: ""; position: fixed; inset: auto 0 0 0; height: 200px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%22200%22%20viewBox=%220%200%201200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22f%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%238ed11f%22%20stop-opacity=%22.16%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%238ed11f%22%20stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width=%221200%22%20height=%22200%22%20fill=%22url%28%23f%29%22/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
[data-theme="light"] .sky::before { opacity: 0.18; filter: invert(1) hue-rotate(60deg); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .sky::before { opacity: 0.18; filter: invert(1) hue-rotate(60deg); } }
body::before { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55) 100%); }
[data-theme="light"] body::before { background: radial-gradient(ellipse at center, transparent 60%, rgb(26 36 18 / 0.25) 100%); }
body::after { content: none; }

h1, h2, h3, h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 400; }
h1 { text-shadow: 3px 3px 0 #5a0a10, 0 0 24px rgb(209 18 31 / 0.35); }
h2, h3 { color: var(--text-strong); }
.hero h1 span { background: none; -webkit-text-fill-color: currentColor; color: var(--primary-tint); text-shadow: 2px 2px 0 #1a2a06; }
::selection { background: var(--steel); color: #fff; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.2em; color: var(--steel); }
.eyebrow::before { content: "\2620"; width: auto; height: auto; background: none; color: var(--steel); font-size: 1rem; margin-right: 0.45rem; letter-spacing: 0; }

.site-header { border-bottom: 3px solid var(--steel); background: var(--panel-solid); }
.site-header::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2280%22%20height=%2222%22%20viewBox=%220%200%2080%2022%22%3E%3Cpath%20fill=%22%23a30d18%22%20d=%22M0%200H80V5H64v8a3.5%203.5%200%200%201-7%200V5H40v13a3.5%203.5%200%200%201-7%200V5H18v7a3.5%203.5%200%200%201-7%200V5H0z%22/%3E%3C/svg%3E") left top / 80px 22px repeat-x; }

.card, .tile, .step {
  position: relative;
  background: var(--panel-solid);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-m);
  padding-top: calc(1.25rem + 8px);
  clip-path: polygon(0 4px, 6% 0, 18% 3px, 34% 0, 52% 4px, 70% 0, 88% 3px, 100% 0, 100% calc(100% - 4px), 94% 100%, 76% calc(100% - 3px), 58% 100%, 40% calc(100% - 4px), 22% 100%, 8% calc(100% - 3px), 0 100%);
}
.card::after, .tile::after, .step::after { content: ""; display: block; inset: 0 0 auto 0; height: 22px; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2280%22%20height=%2222%22%20viewBox=%220%200%2080%2022%22%3E%3Cpath%20fill=%22%23a30d18%22%20d=%22M0%200H80V5H64v8a3.5%203.5%200%200%201-7%200V5H40v13a3.5%203.5%200%200%201-7%200V5H18v7a3.5%203.5%200%200%201-7%200V5H0z%22/%3E%3C/svg%3E") left top / 80px 22px repeat-x; opacity: 0.9; border-radius: 0; }

.btn, :root:root:root .btn-primary {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
}
:root:root:root .btn-primary { background: linear-gradient(180deg, var(--primary-tint), var(--primary-shade)); color: var(--on-primary); border: 2px solid #2d4a06; box-shadow: 0 0 22px -6px rgb(142 209 31 / 0.7); }
.btn:hover { border-color: var(--steel); }
.stat b { background: none; -webkit-text-fill-color: currentColor; color: var(--steel); font-family: var(--display); text-shadow: 2px 2px 0 rgb(0 0 0 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  h1 { animation: undeadFlicker 6s steps(1) infinite; }
  @keyframes undeadFlicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: 0.7; } 98% { opacity: 0.85; } }
}
@media (max-width: 640px) { .card, .tile, .step { clip-path: none; } }