/* Black background. Bright yellow accent and cream text come from the company mark; the page logo
   (assets/logo.svg) uses a sky-blue background. App icons keep their own brand colours. */
:root {
  --yellow: #ffd23f;
  --cream: #f4efe6;

  --bg: #000;
  --surface: rgba(244, 239, 230, 0.04);
  --surface-hover: rgba(244, 239, 230, 0.08);
  --border: rgba(244, 239, 230, 0.10);
  --border-hover: rgba(255, 210, 63, 0.45);
  --text: var(--cream);
  --muted: rgba(244, 239, 230, 0.62);
  --faint: rgba(244, 239, 230, 0.38);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 32px 64px;
}

/* Header */
header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 64px;
}

.logo {
  flex: none;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(10, 108, 214, 0.35);
}

.brand {
  margin: 0;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 6px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 19px;
  color: var(--muted);
}
.prompt { color: var(--yellow); font-weight: 700; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 28px 20px;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.card h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 210, 63, 0.6);
}

.links { list-style: none; margin: 0; padding: 0; }

/* A group with many links (Development) spans two grid columns and lists its links in two columns.
   On narrow screens the grid has one column, so the card and its list stay single-column. */
.links--two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
@media (min-width: 760px) {
  .card--wide { grid-column: span 2; }
}
@media (max-width: 759px) {
  .links--two-col { grid-template-columns: 1fr; }
}

.link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px;
  margin: 0 -12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.link:hover,
.link:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  outline: none;
}

.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  padding: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.badge img { width: 100%; height: 100%; object-fit: contain; display: block; }

.label { flex: 1; font-size: 20px; font-weight: 500; }

.arrow {
  color: var(--faint);
  font-size: 18px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.15s, transform 0.15s;
}
.link:hover .arrow,
.link:focus-visible .arrow { opacity: 1; transform: none; color: var(--yellow); }

/* Footer */
footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 17px;
  color: var(--muted);
}
footer a:hover, footer a:focus-visible { color: var(--yellow); }

@media (max-width: 480px) {
  .wrap { padding: 48px 16px 40px; }
  header { gap: 16px; margin-bottom: 40px; }
  .logo { width: 60px; height: 60px; border-radius: 16px; }
  .tagline { font-size: 16px; }
  .card { padding: 24px 20px 14px; }
  .badge { width: 40px; height: 40px; padding: 8px; }
  .label { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .link, .arrow { transition: none; }
}