:root{
  --bg:#070b10;
  --fg:#e8eef7;
  --muted:rgba(232,238,247,.82);
  --card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);

  --eco:#25d366;      /* green */
  --tech:#2aa8ff;     /* blue */
  --divine:#ffd35a;   /* gold */
}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* global accents without changing layout */
a{color:var(--tech);text-decoration:none}
a:hover{opacity:.92;text-decoration:underline;text-decoration-color:rgba(255,211,90,.7)}

hr{border:0;border-top:1px solid var(--border)}
h1,h2,h3{letter-spacing:.2px}
h1{position:relative}
h1:after{
  content:"";
  display:block;
  height:3px;
  margin-top:10px;
  width:min(280px,70%);
  border-radius:999px;
  background:linear-gradient(90deg,var(--eco),var(--tech),var(--divine));
  opacity:.95;
}

.badge,.pill{
  display:inline-block;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  background:rgba(255,255,255,.02);
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.grid-3x3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){
  .grid-3x3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid-3x3{grid-template-columns:1fr}
}

.slot-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  display:block;
}

.slot-title{font-weight:800;margin:10px 0 4px}
.slot-sub{opacity:.8;font-size:12px;line-height:1.4;margin:0}

/* subtle corner glow for brand */
.glow{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 28px rgba(42,168,255,.12),
    0 0 28px rgba(37,211,102,.10);
}