/* ============================================================
   ZORBE — editorial UI
   Light, text-forward, generous whitespace. Top wordmark nav,
   rules between sections, grouped multi-column footer.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

:root {
  --bg:     #ffffff;
  --ink:    #111111;
  --body:   #2b2b2b;
  --muted:  #6b6b6b;
  --faint:  #9a9a9a;
  --rule:   #e6e6e6;
  --link:   #1a1aff;
  --wash:   #f7f7f7;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 880px;
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #e6e6ff; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { opacity: .72; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }

/* ---------- top nav ---------- */
.site-nav { border-bottom: 1px solid var(--rule); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.wordmark img { width: 20px; height: 20px; border-radius: 4px; display: block; }
.wordmark:hover { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 15px; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); opacity: 1; }
.nav-links a.current { color: var(--ink); }

/* ---------- page container ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 64px 28px 40px; }
.page > h1 {
  font-size: clamp(28px, 4vw, 38px); font-weight: 600; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 18px;
}

/* ---------- homepage ---------- */
.hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.025em; color: var(--ink);
  max-width: 20ch;
}
.hero .lede { margin-top: 20px; font-size: clamp(18px, 2vw, 21px); color: var(--muted); }
.hero .lede strong { font-weight: 600; color: var(--ink); }
.hero .backer { margin-top: 10px; font-size: 15px; color: var(--faint); }

.statement { font-size: clamp(18px, 2vw, 20px); color: var(--ink); max-width: 66ch; line-height: 1.6; }

.parts-label {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 26px;
}
.part { margin-bottom: 34px; }
.part:last-child { margin-bottom: 0; }
.part h2 {
  font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 8px;
}
.part h2 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.part h2 a:hover { border-bottom-color: var(--ink); opacity: 1; }
.part p { color: var(--body); max-width: 68ch; }

.closer { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }

/* ---------- explainer pages ---------- */
.ex-head { margin-bottom: 34px; }
.ex-head h1 {
  font-size: clamp(28px, 4vw, 38px); font-weight: 600; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 12px;
}
.ex-head .def { font-size: clamp(17px, 1.8vw, 19px); color: var(--muted); max-width: 62ch; }

.tabwrap { display: block; }
.tablist {
  display: flex; flex-wrap: wrap; gap: 28px;
  border-bottom: 1px solid var(--rule); margin-bottom: 30px;
}
.tab {
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 12px; margin-bottom: -1px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab .tnum { display: none; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.panel { border: 0; padding: 0; }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.tabpane h2 { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px; }
.tabpane > p { color: var(--body); max-width: 66ch; }
.tabpane .art { margin-top: 30px; padding: 28px; background: var(--wash); border-radius: 4px; display: grid; place-items: center; }
.tabpane .art svg { width: 100%; max-width: 440px; height: auto; }

.ex-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }

/* ---------- team ---------- */
.intro { color: var(--body); margin-bottom: 36px; max-width: 66ch; }
.people { display: flex; flex-direction: column; gap: 26px; }
.person { display: flex; align-items: center; gap: 18px; }
.person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--wash); flex-shrink: 0; }
.person .pname { font-weight: 600; color: var(--ink); }
.person .prole { color: var(--muted); font-size: 15px; }
.person .plinks { font-size: 15px; margin-top: 2px; }
.person--zoom-yash img { object-position: center 22%; }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 26px 0 8px; }
.prose p { margin-bottom: 16px; }
.prose ul { list-style: none; margin: 0 0 18px; }
.prose li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose .meta { color: var(--faint); font-size: 15px; margin-bottom: 30px; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--wash); border-radius: 3px; padding: 1px 5px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 72px; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 28px 52px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-col h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
.foot-col a { display: block; font-size: 15px; color: var(--muted); text-decoration: none; padding: 4px 0; }
.foot-col a:hover { color: var(--ink); opacity: 1; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--faint);
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .nav-inner { padding: 18px 20px; gap: 14px; flex-wrap: wrap; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14.5px; }
  .page { padding: 44px 20px 32px; }
  hr { margin: 36px 0; }
  .tablist { gap: 20px; }
  .tabpane .art { padding: 20px; }
  .foot-inner { padding: 36px 20px 44px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-bottom { flex-direction: column; gap: 6px; }
}
@media (max-width: 420px) {
  .foot-cols { grid-template-columns: 1fr; }
  .person img { width: 54px; height: 54px; }
}