@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* brand gradient — lifted from the bytes.io mark (purple → pink → orange) */
  --b-purple: #7C4DFF;
  --b-pink:   #EC4899;
  --b-orange: #FB923C;
  --b-gradient: linear-gradient(135deg, var(--b-purple) 0%, var(--b-pink) 55%, var(--b-orange) 100%);

  /* neutrals */
  --ink:        #14141c;
  --ink-soft:   #4a4a58;
  --muted:      #85859a;
  --line:       #eaeaf0;
  --line-soft:  #f2f2f6;
  --bg:         #ffffff;
  --bg-soft:    #fafafc;
  --bg-card:    #ffffff;

  /* H# — the language this whole index exists for */
  --hsharp-1: #9c1120;
  --hsharp-2: #5c0510;
  --hsharp-glow: #ff5468;

  /* type */
  --f-display: 'Sora', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(20,20,28,.04), 0 8px 24px -12px rgba(20,20,28,.10);
  --shadow-pop:  0 12px 32px -8px rgba(20,20,28,.18), 0 2px 8px rgba(20,20,28,.08);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

.wrap{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible{
  outline: 2px solid var(--b-pink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- nav (shared across pages) ---------- */
.site-nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em;
}
.brand-mark{
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--b-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 12px -4px rgba(124,77,255,.55);
}
.nav-links{ display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-links a{ transition: color .15s ease; }
.nav-links a:hover{ color: var(--ink); }
.nav-cta{
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.nav-cta:hover{ border-color: var(--b-pink); transform: translateY(-1px); }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 36px 0 46px;
  margin-top: 80px;
}
.site-footer .wrap{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.site-footer p{ margin: 0; font-size: 13px; color: var(--muted); }
.site-footer a{ color: var(--ink-soft); font-size: 13px; }
.site-footer a:hover{ color: var(--ink); }

/* ---------- generic pill / badge ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-soft);
}
.dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }