/* MeowBuild brand home. System fonts only, no external requests, no JavaScript.
   Contrast (WCAG 2.x, recomputed by script; text needs 4.5, UI/large text 3.0):
   dark : fg/bg 16.88, fg/card 15.54, muted/bg 9.06, muted/card 8.34, muted/bg+glow(worst case) 7.23, link/bg 10.11,
          button text/amber 10.95, button text/mint 11.09, amber/card 10.26, mint/card 10.40, focus/bg 10.11, focus/card 9.31
   light: fg/bg 16.14, fg/card 17.55, muted/bg 6.62, muted/card 7.19, muted/bg+glow(worst case) 5.64, link/bg 7.62,
          button text/amber 6.16, button text/mint 7.01, amber/card 6.16, mint/card 7.01, focus/bg 7.62, focus/card 8.29
   The card hairline (--line) is decorative; each card edge is also carried by its accent top border and shadow. */
:root {
  color-scheme: dark light;
  --bg: #0f0c1a; --card: #19152a; --line: #2e2846;
  --fg: #f1eefb; --muted: #b4aecb; --link: #c4b0ff; --focus: #c4b0ff;
  --amber: #f0bd5a; --mint: #6fd8c4; --on-accent: #120e1f;
  --glow: rgba(124, 92, 230, .22); --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --r: 12px; --r-sm: 8px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f4fd; --card: #ffffff; --line: #ddd5f0;
    --fg: #1b1530; --muted: #5a5373; --link: #5a2fb8; --focus: #5a2fb8;
    --amber: #8a5600; --mint: #176456; --on-accent: #ffffff;
    --glow: rgba(140, 100, 230, .14); --shadow: 0 10px 30px rgba(60, 40, 110, .10);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--fg); background-color: var(--bg);
  background-image: radial-gradient(60rem 30rem at 50% -6rem, var(--glow), transparent 70%);
  background-repeat: no-repeat;
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  overflow-wrap: anywhere;
}
.page { max-width: 960px; margin: 0 auto; padding: 20px 20px 32px; }

.lang { margin: 0; text-align: right; font-size: 15px; }
.lang a { display: inline-block; padding: 10px 4px; color: var(--link); }

.hero { text-align: center; padding-top: clamp(8px, 4vw, 40px); }
.mascot { display: block; margin: 0 auto 16px; width: clamp(168px, 46vw, 260px); height: auto; }
.eyebrow { margin: 0 0 8px; font-size: 14px; letter-spacing: .14em; color: var(--muted); }
.hero h1 { margin: 0; font-size: clamp(2.75rem, 11vw, 5rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.lead { margin: 18px auto 0; max-width: 30em; font-size: clamp(1.0625rem, 2.6vw, 1.375rem); color: var(--muted); }

main { margin-top: clamp(36px, 7vw, 72px); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 701px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.card {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, 4vw, 32px); background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--art); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.card.c-test { --art: var(--mint); }
.card.c-spec { --art: var(--amber); }
.card:hover, .card:has(.go:focus-visible) { border-color: var(--art); transform: translateY(-3px); }
/* :has() fallback: browsers without it simply skip the lift; the button's own focus ring still shows. */
.card .art { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 20px; color: var(--art); }
.card h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.2; }
.card .host { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.card .desc { margin: 12px 0 0; color: var(--muted); }
.card .desc + .desc { margin-top: 8px; }
.card .spacer { flex: 1 1 auto; min-height: 24px; }
.go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  background: var(--art); color: var(--on-accent); font-weight: 700; text-decoration: none;
  border-radius: var(--r-sm);
}
.go .arrow { transition: transform .18s ease; }
.go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card:hover .arrow { transform: translateX(4px); }
.go:focus-visible, .lang a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

.sitefoot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }
.sitefoot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover, .card:has(.go:focus-visible), .card:hover .arrow { transform: none; }
}