:root{
  --pix-shadow: 4px 4px 0 rgba(0,0,0,.9);
  --pix-shadow-sm: 2px 2px 0 rgba(0,0,0,.9);
}

/* CRT deep background with faint scanlines */
body{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(900px 480px at 12% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(760px 460px at 92% 4%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 62%),
    var(--bg);
  image-rendering: pixelated;
}

img{ image-rendering: pixelated; }

/* Pixel-crisp headings */
h1,h2,h3,.hero-title{
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text);
}
.hero-title{
  color:var(--accent);
  text-shadow:3px 3px 0 rgba(0,0,0,.9);
}
h2{ color:var(--accent-2); }

/* Header bar */
.site-header{
  background:var(--panel);
  border-bottom:2px solid var(--line);
  box-shadow:0 4px 0 rgba(0,0,0,.6);
}

/* Hero block */
.hero{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, var(--panel)), var(--panel));
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow);
}
.facts .fact{
  background:var(--panel-2);
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow-sm);
}
.fact b{ color:var(--accent); }

/* Cards & features — blocky pixel panels */
.card,.feature,.faq-item{
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow);
  transition:transform .08s steps(2), box-shadow .08s steps(2), border-color .08s;
}
.card:hover,.feature:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(0,0,0,.9);
  border-color:var(--accent);
}

.feature .icon{
  background:var(--panel-2);
  color:var(--accent);
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow-sm);
}
.feature:hover .icon{ color:var(--accent-2); border-color:var(--accent-2); }

/* Buttons — stepped pixel shadow, hard press */
.btn{
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow);
  transition:transform .08s steps(2), box-shadow .08s steps(2);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(0,0,0,.9); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 rgba(0,0,0,.9); }
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn-ghost{ background:var(--panel-2); color:var(--text); }

/* Badges with blinking-cursor accent */
.badge{
  background:var(--panel-2);
  color:var(--accent);
  border:2px solid var(--line);
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.badge::after{
  content:"_";
  color:var(--accent-2);
  animation:vb-blink 1s steps(1) infinite;
}
@keyframes vb-blink{ 50%{ opacity:0; } }

/* Catalog tiles */
.tab{
  background:var(--panel-2);
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow-sm);
  text-transform:uppercase;
}
.tab.active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.tile{
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:0;
  box-shadow:var(--pix-shadow-sm);
  transition:transform .08s steps(2), box-shadow .08s steps(2), border-color .08s;
}
.tile:hover{ transform:translate(-2px,-2px); box-shadow:var(--pix-shadow); border-color:var(--accent); }
.tile .nm{ color:var(--text); text-transform:uppercase; letter-spacing:0.02em; }
.tile .gp{ color:var(--accent-2); }
.tile.noimg{
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 10%, var(--panel)) 0 8px, var(--panel) 8px 16px);
}

/* Article table & FAQ */
.table th{ background:var(--panel-2); color:var(--accent); border:2px solid var(--line); text-transform:uppercase; }
.table td{ border:2px solid var(--line); }
.faq-item{ box-shadow:var(--pix-shadow-sm); }
.faq-q{ color:var(--text); text-transform:uppercase; letter-spacing:0.02em; }
.faq-q:hover{ color:var(--accent); }

/* Footer */
.site-footer{ border-top:2px solid var(--line); background:var(--panel); }