:root{
  --bg:#0a0a12; --panel:#14141f; --panel2:#1c1c2b; --line:#2a2a3e;
  --txt:#d8d8e8; --dim:#8a8aa0;
  --magenta:#ff2e88; --cyan:#22d3ee; --gold:#ffe066; --green:#4ade80; --violet:#7c6fd6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Courier New",ui-monospace,monospace;line-height:1.5}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px 60px}

header.hero{text-align:center;padding:46px 10px 22px}
.hero h1{margin:0;font-size:clamp(30px,7vw,58px);letter-spacing:6px;
  color:var(--magenta);text-shadow:0 0 18px #ff2e8855,4px 4px 0 #7c6fd6}
.hero .sub{color:var(--dim);letter-spacing:3px;margin-top:12px;font-size:13px}
.hero .blink{color:var(--gold);animation:bl 1.1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

.section-label{display:flex;align-items:center;gap:12px;margin:30px 4px 14px;
  color:var(--cyan);letter-spacing:2px;font-size:13px;text-transform:uppercase}
.section-label::after{content:"";flex:1;height:2px;background:var(--line)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

.card{position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:16px;
  transition:.15s;overflow:hidden;cursor:pointer}
.card:hover{border-color:var(--magenta);transform:translateY(-3px);box-shadow:0 8px 0 #00000055}
.card .top{display:flex;align-items:center;gap:12px}
.card .emoji{font-size:34px;line-height:1;filter:drop-shadow(0 0 6px #0008)}
.card h3{margin:0;font-size:18px;letter-spacing:1px}
.card .klimat{color:var(--cyan);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.card .desc{color:#b8b8cc;font-size:13.5px;margin:12px 0 10px;min-height:56px}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--dim);font-size:11px;letter-spacing:.5px}
.card .mech{color:var(--gold)}
.card .cta{margin-top:12px;font-weight:bold;letter-spacing:1px;font-size:13px;color:var(--magenta)}

.card.soon{opacity:.62;cursor:default}
.card.soon:hover{transform:none;border-color:var(--line);box-shadow:none}
.badge{position:absolute;top:10px;right:-30px;transform:rotate(38deg);
  background:var(--panel2);color:var(--dim);font-size:10px;letter-spacing:2px;
  padding:3px 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.badge.play{background:var(--green);color:#0a0a12;border-color:var(--green)}
.card .no{color:var(--dim);font-size:11px;letter-spacing:1px;text-align:center;margin-top:12px;text-transform:uppercase}

footer.foot{text-align:center;color:var(--dim);font-size:12px;margin-top:44px;letter-spacing:1px}