/* YKeyWorld space theme for the hub pages (Tools, Academy, Partners, Official links).
   Loaded after hub-v4.css, whose palette is already recoloured to the orange system. */
body {
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 138, 31, 0.10), transparent 30rem),
    radial-gradient(circle at 10% 30%, rgba(255, 183, 107, 0.05), transparent 28rem),
    #07080a;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 72%, #fff4e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 26%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 64%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 12%, #fff4e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 48%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 90%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 44%, #fff4e6 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 84%, #fff4e6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 86%, #fff4e6 50%, transparent 51%);
  background-size: 420px 420px;
}
.page-glow-a { background: #ff8a1f; opacity: 0.16; }
.page-glow-b { background: #ffb76b; opacity: 0.08; }

/* Brand: the YKeyWorld planet replaces the green signal dot */
.brand-signal {
  width: 30px;
  height: 30px;
  background: url("/assets/ykw/planet-orb-96.jpg") center / cover no-repeat;
  box-shadow: 0 0 18px rgba(255, 150, 60, 0.55);
}
.brand-signal::after { border-color: rgba(255, 154, 61, 0.35); }
.brand-name { letter-spacing: 0.04em; font-weight: 800; }
.brand-name span { color: inherit; }

/* Navigation pill, matching the home page */
.nav-links {
  justify-self: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 236, 214, 0.1);
  border-radius: 999px;
  background: rgba(15, 16, 19, 0.72);
}
.nav-links a { padding: 9px 15px; border-radius: 999px; }
.nav-links a[aria-current="page"] { background: #1c1814; color: #f4efe7; }

h1 span, .page-hero h1 span { color: #ff9a3d; }

/* Mobile header: keep the logo clear of the CTA and keep the section links reachable */
@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding-block: 12px; }
  .topbar .brand { min-width: 0; }
  .topbar .nav-links {
    display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 14px;
  }
  .topbar .nav-links::-webkit-scrollbar { display: none; }
  .topbar .nav-links a { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 430px) {
  .topbar .brand-name { font-size: 15px; }
  .topbar .brand-signal { width: 30px; height: 30px; }
  .topbar .nav-cta { padding-inline: 12px; font-size: 10px; white-space: nowrap; }
}