@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
}
:root{
  --ink:#0a0a0b;
  --panel:#131316;
  --line:#232328;
  --paper:#f4f4f2;
  --mute:#9a9aa2;
  --red:#e11d2e;
  --red-dark:#a31220;
  --display:'Chakra Petch',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}

/* ---- Layout ---- */
main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:760px;width:100%;margin:0 auto;padding:40px 24px;
  position:relative;
}

/* ---- Logo ---- */
.mark{width:72px;height:72px;margin-bottom:36px}

/* ---- Terminal-Zeile ---- */
.term{
  font-size:.82rem;letter-spacing:.06em;color:var(--mute);
  margin-bottom:22px;min-height:1.4em;
}
.term .prompt{color:var(--red)}
.term .cursor{
  display:inline-block;width:.55em;height:1.05em;background:var(--paper);
  vertical-align:-2px;margin-left:2px;
}
@media(prefers-reduced-motion:no-preference){
  .term .cursor{animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
}

/* ---- Headline ---- */
h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,9vw,4.8rem);line-height:1.02;letter-spacing:.01em;
}
h1 em{font-style:normal;color:var(--red)}
.tagline{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:clamp(.7rem,2.4vw,.95rem);
  color:var(--mute);margin-top:18px;
}
.tagline b{color:var(--red);font-weight:600}

/* ---- Pixel-Trail ---- */
.pxtrail{display:flex;gap:5px;margin:34px 0}
.pxtrail i{width:11px;height:11px;background:var(--red)}
.pxtrail i:nth-child(2){opacity:.75}
.pxtrail i:nth-child(3){opacity:.5}
.pxtrail i:nth-child(4){opacity:.3}
.pxtrail i:nth-child(5){opacity:.15}
.pxtrail i:nth-child(6){opacity:.07}

/* ---- Copy ---- */
.lead{font-size:.95rem;line-height:1.7;color:var(--mute);max-width:52ch}
.lead strong{color:var(--paper);font-weight:500}

/* ---- CTA ---- */
.cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;display:inline-block;
  transition:background .15s,border-color .15s,transform .12s;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn:active{transform:translateY(1px)}
.note{font-size:.75rem;color:var(--mute);letter-spacing:.04em}

/* ---- Status-Zeile ---- */
.status{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:28px;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
}
.status span b{color:var(--paper);font-weight:500}
.dot{
  display:inline-block;width:8px;height:8px;background:var(--red);
  margin-right:8px;vertical-align:0;
}
@media(prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.3}}
}

/* ---- Hintergrund-Mark ---- */
.bg-mark{
  position:fixed;right:-8vw;bottom:-6vh;width:min(52vw,540px);
  opacity:.05;pointer-events:none;z-index:-1;
}

/* ---- Footer ---- */
footer{
  border-top:1px solid var(--line);
  padding:20px 24px;
  font-size:.68rem;letter-spacing:.08em;color:var(--mute);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  max-width:760px;width:100%;margin:0 auto;
}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--paper)}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}