:root { --bg:#0a0a0a; --fg:#eaeaea; --muted:#9aa0a6; --card:#151515; --line:#222; --accent:#ffd089; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);background:#0b0b0b;position:sticky;top:0}
.brand{font-weight:700}
.links a{margin-left:16px;color:var(--muted)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.hero{padding:40px 0;text-align:center}
.hero h1{font-size:32px;margin:0 0 8px}
.section-title{margin:10px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{display:block;border:1px solid var(--line);background:var(--card);border-radius:12px;overflow:hidden;transition:transform .15s ease, border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:#333}
.card img{width:100%;height:220px;object-fit:cover;background:#0f0f0f}
.card-body{padding:12px}
.card-body h3{margin:0 0 6px;font-size:16px}
.status{margin-top:8px;color:var(--muted)}
.foot{border-top:1px solid var(--line);padding:16px;text-align:center;color:var(--muted);margin-top:40px}

/* === Rebel Temple Banner === */
.banner{position:relative;max-width:1200px;margin:20px auto;border-radius:14px;overflow:hidden;border:1px solid #222;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.banner img{display:block;width:100%;height:auto;filter:brightness(.95)}
.banner-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 80%)}
.banner-copy{padding:22px 18px}
.banner-title{font-size:34px;font-weight:700;color:#fff;margin:0 0 8px;text-shadow:0 0 10px #000}
.btn-store{display:inline-block;padding:10px 16px;border-radius:8px;background:linear-gradient(180deg,#ffb84d,#ff9933);color:#1c1206;font-weight:700;text-decoration:none}
.btn-store:hover{transform:translateY(-1px);filter:brightness(1.1)}

/* === Rebel Temple hero tweaks === */
.banner { position: relative; margin: 0 auto; max-width: 1200px; }
.banner-img {
  width: 100%;
  height: 380px;               /* desktop height */
  object-fit: cover;           /* crop without distortion */
  object-position: center 70%; /* bias crop downward to show train */
  display: block;
  filter: brightness(.95);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%);
  border-radius: 12px;
}
.banner-copy { padding: 22px 20px 18px; }
.banner-title { margin: 0 0 6px; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: .2px; }
.banner-sub { margin: 0 0 12px; color: #f2e9de; opacity: .9; }
.btn-store {
  display: inline-block; text-decoration: none;
  padding: 10px 16px; border-radius: 10px;
  font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(180deg, #ffd084, #ff9933);
  color: #201306; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: transform .12s ease, filter .12s ease;
}
.btn-store:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Mobile: slightly shorter hero, tighter text */
@media (max-width: 720px) {
  .banner-img { height: 300px; object-position: center 65%; border-radius: 0; }
  .banner-overlay { border-radius: 0; }
  .banner-title { font-size: 28px; }
}