@font-face { font-family: "Open Sans"; src: url("/fonts/open-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #0b0d0a; --card: #151913; --card2: #1b2019; --line: #2a3125; --line2: #3a4433;
  --text: #e7ece2; --muted: #9aa592; --dim: #6c7566;
  --lime: #8be04e; --lime-glow: rgba(139,224,78,.35);
  --gold: #e8b84a; --red: #ef5b4c; --grey: #7b8475;
  --radius: 16px; --shadow: 0 10px 32px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(139,224,78,.10), transparent 55%),
    radial-gradient(ellipse at 105% 15%, rgba(232,184,74,.07), transparent 50%),
    radial-gradient(ellipse at 50% 120%, rgba(90,140,220,.08), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px);
  background-attachment: fixed; line-height: 1.5; font-size: 16px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* Hero */
.hero { padding: clamp(3rem, 9vw, 6.5rem) 1.25rem clamp(2rem, 5vw, 3.5rem); text-align: center; }
.hero-inner { max-width: 900px; margin: 0 auto; }
.wordmark {
  /* v0.2: room above and below the glyphs so the gradient (background-clip: text) covers the
     full letters, including the descenders on the g's. line-height 1 with no padding clipped them. */
  display: inline-block; max-width: 100%;
  margin: 0; padding: .06em .12em .18em; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
  font-size: clamp(3rem, 12vw, 6.5rem);
  background: linear-gradient(180deg, #f2f7ec 10%, #b9c7ad 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(139,224,78,.18));
}
.wordmark .seven, .wordmark .zero {
  padding: .06em 0 .18em;
  background: linear-gradient(180deg, #b6f37f, var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { margin: 1rem 0 0; color: var(--muted); font-size: clamp(1rem, 2.6vw, 1.2rem); letter-spacing: .02em; }

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 2rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 .25rem 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); font-weight: 700; }
.checked { margin: 0; font-size: .8rem; color: var(--dim); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }

/* Card */
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.card.soon { opacity: .85; }
.card-art { position: relative; overflow: hidden; height: 170px; display: grid; place-items: center; font-size: 4rem; line-height: 1;
  background: radial-gradient(ellipse at 50% 30%, rgba(139,224,78,.14), transparent 70%), #10130e; border-bottom: 1px solid var(--line); }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.card.soon .card-art { background: radial-gradient(ellipse at 50% 30%, rgba(232,184,74,.12), transparent 70%), #10130e; filter: grayscale(.35); }
.card-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.card h3 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; }
.card p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .35rem; }

/* Badges + status dot */
.badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: .22rem .55rem; border-radius: 999px; white-space: nowrap; }
.badge.live { color: #0b0d0a; background: var(--lime); }
.badge.soon { color: #1a1206; background: var(--gold); }
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--grey); }
.status i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey); flex: none; }
.status.checking i { animation: pulse 1.4s ease-in-out infinite; }
.status.up { color: var(--lime); } .status.up i { background: var(--lime); box-shadow: 0 0 10px var(--lime-glow); }
.status.down { color: var(--red); } .status.down i { background: var(--red); box-shadow: 0 0 10px rgba(239,91,76,.45); }
.status.na { color: var(--dim); } .status.na i { background: transparent; border: 1px dashed var(--dim); }
@keyframes pulse { 50% { opacity: .35; } }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem 1.1rem; border-radius: 10px;
  font-weight: 700; font-size: .92rem; text-decoration: none; color: #0b0d0a; background: linear-gradient(180deg, #a6ef6c, var(--lime));
  box-shadow: 0 3px 0 #4e7f2a, 0 0 18px rgba(139,224,78,.18); transition: filter .15s ease, transform .1s ease; min-height: 40px; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4e7f2a; }
.btn:focus-visible { outline: 3px solid rgba(139,224,78,.6); outline-offset: 2px; }
.btn.disabled { color: var(--muted); background: #22281f; box-shadow: none; cursor: default; pointer-events: none; }

.foot { max-width: 1180px; margin: 1rem auto 1.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .8rem; text-align: center; }
.foot p { margin: 0; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .5rem; }
.whoami { color: var(--muted); overflow-wrap: anywhere; }
.foot .credit { margin-top: .35rem; font-size: .7rem; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--muted); }
.btn .ext { font-size: .8em; opacity: .75; margin-left: .1rem; }

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; gap: .9rem; }
  .card-art { height: 140px; font-size: 3.2rem; }
  .foot-line .sep { display: none; }
  .foot-line { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .btn { transition: none; } .card:hover { transform: none; } .status.checking i { animation: none; }
}