:root {
  --bg: #0e1216;
  --bg-accent: #18222b;
  --panel: #141a20;
  --panel-2: #1a2430;
  --text: #f2f5f7;
  --muted: #c2ccd4;
  --accent: #ffb347;
  --accent-2: #61d2ff;
  --ok: #58e07d;
  --warn: #ff8a8a;
  --shadow: rgba(7, 10, 13, 0.4);
  --gutter: clamp(16px, 5vw, 36px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 15% 10%, #223040 0%, transparent 60%),
              radial-gradient(900px 500px at 85% 0%, #2b1f2b 0%, transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, #0b0f13 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-orbit {
  position: fixed;
  inset: -40% -20% auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255,179,71,0.15), rgba(97,210,255,0.2), rgba(255,179,71,0.15));
  opacity: 0.6;
  pointer-events: none;
  animation: drift 12s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-40px, 20px) rotate(18deg); }
}

.hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 48px var(--gutter) 24px;
}

.brand {
  font-family: "Fraunces", serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  margin: 10px 0 8px;
}

.lead {
  color: var(--muted);
  max-width: 520px;
}

.hero-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card {
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 12px 30px var(--shadow);
}

.stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.stat-value { font-size: 26px; font-weight: 600; }

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter) 12px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search input {
  background: #131a22;
  color: var(--text);
  border: 1px solid #2c3945;
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 240px;
  height: 44px;
  font-size: 16px;
}

.chip {
  border: 1px solid #2c3945;
  background: transparent;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
}

.chip.active, .chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,179,71,0.15);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

main { padding: 12px var(--gutter) 48px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.tile {
  background: linear-gradient(180deg, #151b22 0%, #10161c 100%);
  border: 1px solid #243041;
  border-radius: 20px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  min-height: 170px;
  box-shadow: 0 12px 30px var(--shadow);
  transform: translateY(12px);
  opacity: 0;
  animation: rise 0.6s ease forwards;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

@keyframes rise {
  to { transform: translateY(0); opacity: 1; }
}

.tile::after {
  content: "";
  position: absolute;
  inset: auto -30% -30% auto;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(97,210,255,0.2), transparent 60%);
  opacity: 0.7;
}

.tile h3 { margin: 0 0 6px; font-size: 18px; }

.tile p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Segoe UI Symbol", "Noto Emoji", sans-serif;
  background: rgba(255, 179, 71, 0.12);
  border: 1px solid rgba(255, 179, 71, 0.3);
  margin-bottom: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #202a36;
}

.badge.ready { color: var(--ok); border: 1px solid rgba(88,224,125,0.4); }
.badge.prototype { color: var(--accent-2); border: 1px solid rgba(97,210,255,0.4); }
.badge.coming { color: var(--warn); border: 1px solid rgba(255,138,138,0.4); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.tag {
  font-size: 11px;
  padding: 4px 8px;
  background: #1b2430;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Segoe UI Symbol", "Noto Emoji", sans-serif;
}

.tag.board { border: 1px solid rgba(97, 210, 255, 0.3); color: #bfe9ff; }
.tag.arcade { border: 1px solid rgba(255, 179, 71, 0.35); color: #ffd08a; }
.tag.gadgets { border: 1px solid rgba(88, 224, 125, 0.3); color: #bdf5cd; }
.tag.experiment { border: 1px solid rgba(255, 138, 138, 0.3); color: #ffd0d0; }
.tag.tools { border: 1px solid rgba(194, 204, 212, 0.35); color: #e3e8ec; }
.tag.puzzle { border: 1px solid rgba(255, 208, 138, 0.35); color: #ffe4b3; }


.footer {
  padding: 12px var(--gutter) 32px;
  color: var(--muted);
  font-size: 13px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #202b36;
  color: var(--text);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 30px var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-right { width: 100%; grid-template-columns: repeat(2, 1fr); }
  .controls { flex-direction: column; align-items: flex-start; }
  .search { width: 100%; }
  .search input { width: 100%; }
}

@media (max-width: 640px) {
  .bg-orbit { width: 360px; height: 360px; opacity: 0.4; }
  .hero { padding-top: 32px; gap: 18px; }
  .hero-right { grid-template-columns: 1fr; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 22px; }
  .controls { gap: 12px; }
  .filters {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }
  .search { order: 1; width: 100%; }
  .filters { order: 2; }
  .toggle { order: 3; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .tile { padding: 14px; min-height: 140px; }
  .tile-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 26px; }
  .lead { font-size: 14px; }
  .chip { padding: 6px 12px; }
}

.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 179, 71, 0.5);
}

.tile.coming {
  opacity: 0.6;
  cursor: default;
  filter: grayscale(0.2);
}

.tile.coming:hover {
  transform: translateY(0);
  border-color: #243041;
}