/* =========================================================
   wowfarsi — index page blocks
   ========================================================= */

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1rem 6rem;
}
.hero .brand-logo img { width: 168px; }
.hero-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: #8b93a6;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .hero-kicker { font-size: 11px; } }
.hero-title {
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 1.15;
}
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
.hero-sub { margin-top: 1.25rem; font-size: 1.125rem; color: var(--parch); }
@media (min-width: 768px) { .hero-sub { font-size: 1.25rem; } }
.hero-desc {
  margin: 1.25rem auto 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 2;
  color: var(--parch-dim);
}
@media (min-width: 768px) { .hero-desc { font-size: 1rem; } }
.hero-badge { margin-top: 1.75rem; }
.hero-ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

.flourish { margin-bottom: 1.5rem; opacity: 0.9; }

/* typographic stat line on a gold hairline */
.stat-strip { position: relative; margin-top: 5rem; width: 100%; max-width: 48rem; }
.stat-row { display: flex; align-items: stretch; justify-content: center; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0 1.25rem; }
@media (min-width: 768px) { .stat { padding: 0 2rem; } }
.stat b { font-size: 1.875rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .stat b { font-size: 2.25rem; } }
.stat span { font-size: 11px; font-weight: 700; color: var(--parch-dim); }
@media (min-width: 768px) { .stat span { font-size: 12px; } }
.stat-divider { display: none; width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(240, 199, 94, 0.25), transparent); }
@media (min-width: 768px) { .stat-divider { display: block; } }

/* ---------- sync ---------- */
.sigil-flow { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
@media (min-width: 768px) { .sigil-flow { gap: 1.5rem; } }
.sigil { display: flex; width: 6rem; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
@media (min-width: 768px) { .sigil { width: 7rem; } }
.sigil-label { font-size: 13px; font-weight: 700; color: var(--parch); }
.sigil-sub { margin-top: 0.25rem; font-size: 10px; line-height: 1.4; color: var(--mut); }
.flow-line { position: relative; height: 1px; width: 2.5rem; flex: 1; background: linear-gradient(to left, rgba(240, 199, 94, 0.45), rgba(240, 199, 94, 0.22), rgba(240, 199, 94, 0.45)); }
@media (min-width: 768px) { .flow-line { width: 4rem; } }
@media (max-width: 767px) { .flow-line { display: none; } }

.build-banners {
  margin-top: 4rem;
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 1.25rem;
}
@media (min-width: 768px) { .build-banners { gap: 2.25rem; } }
.build-banner { padding: 1rem 2rem; text-align: center; }
.build-banner p:first-child { font-size: 0.875rem; font-weight: 700; }
.build-banner p:last-child { margin-top: 0.5rem; font-size: 11px; line-height: 1.5; color: var(--parch-dim); }
.build-x { display: none; align-items: center; color: #8b93a6; }
@media (min-width: 768px) { .build-x { display: flex; } }

.sync-notes {
  margin: 2.5rem auto 0;
  max-width: 48rem;
  text-align: center;
  font-size: 11px;
  line-height: 1.9;
  color: var(--mut);
}
@media (min-width: 768px) { .sync-notes { font-size: 12px; } }

.pipeline { margin-top: 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 1.25rem; }
.pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.pipeline-step span:last-child { font-size: 11px; font-weight: 700; color: #c3bdb0; }
@media (min-width: 768px) { .pipeline-step span:last-child { font-size: 12px; } }
.pipeline-dash { margin: 0 0.5rem; height: 1px; width: 2rem; background: rgba(240, 199, 94, 0.25); }
@media (min-width: 768px) { .pipeline-dash { margin: 0 0.75rem; width: 3.5rem; } }

/* ---------- classes ---------- */
.class-search { margin: 0 auto 3rem; max-width: 28rem; position: relative; }
.class-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--mut); }
.class-search input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.875rem; }

.crest-cloud { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; column-gap: 1.25rem; row-gap: 2.25rem; }
@media (min-width: 768px) { .crest-cloud { column-gap: 1.75rem; } }
.crest-cell { display: flex; width: 72px; flex-direction: column; align-items: center; gap: 0.625rem; }
@media (min-width: 768px) { .crest-cell { width: 84px; } }
.crest-cell .wf-crest { transition: transform 0.3s ease; }
.crest-cell:hover .wf-crest { transform: translateY(-6px); }
.crest-name {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; line-height: 1.25; text-align: center;
  color: #c3bdb0; transition: color 0.2s ease;
}
@media (min-width: 768px) { .crest-name { font-size: 10px; } }
.crest-empty { margin-top: 2.5rem; text-align: center; font-size: 0.875rem; color: var(--mut); display: none; }

.spellbook { margin: 4rem auto 0; max-width: 56rem; }
.spellbook-in { position: relative; padding: 2.25rem 1.5rem; }
@media (min-width: 768px) { .spellbook-in { padding: 2.75rem 3rem; } }
.book-spine {
  position: absolute; top: 1.75rem; bottom: 1.75rem; left: 50%;
  width: 1px; display: none;
  background: linear-gradient(180deg, transparent, rgba(240, 199, 94, 0.26), transparent);
}
@media (min-width: 768px) { .book-spine { display: block; } }
.book-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .book-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.book-id { display: flex; flex-direction: column; align-items: center; text-align: center; }
.book-id h3 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.03em; }
.book-meta { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.75; color: var(--parch-dim); }
.book-state { margin-top: 1.25rem; font-size: 0.75rem; font-weight: 800; }
.book-state-done {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(240, 199, 94, 0.4); background: rgba(240, 199, 94, 0.08);
  padding: 0.5rem 1rem; color: var(--gold-2);
}
.book-state-wait { color: var(--mut); }
.book-tree-link {
  margin-top: 1.25rem; display: inline-block;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--blue-1); transition: color 0.2s ease;
}
.book-tree-link:hover { color: var(--gold-2); }
.book-specs { align-self: center; }
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.5rem; }
.spec-row .spec-n { font-size: 0.875rem; font-weight: 700; color: var(--parch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-row .spec-h { margin-top: 0.375rem; font-size: 11px; line-height: 1.35; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 9999px; }

/* ---------- progress ---------- */
.progress-grid { display: grid; align-items: center; gap: 3.5rem; }
@media (min-width: 768px) { .progress-grid { grid-template-columns: auto 1fr; gap: 5rem; } }
.gauge-wrap { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.gauge-num { font-size: 2.25rem; font-weight: 900; }
@media (min-width: 768px) { .gauge-num { font-size: 3rem; } }
.gauge-cap { margin-top: 0.375rem; font-size: 11px; font-weight: 700; color: var(--mut); }
.gauge-sub { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 800; color: var(--parch); }
.gauge-sub2 { margin-top: 0.375rem; font-size: 11px; color: var(--mut); }
.class-progress { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.5rem; }
@media (min-width: 768px) { .class-progress { gap: 1rem; } }
.cp-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 9999px; }
.cp-name { flex-shrink: 0; width: 86px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #c3bdb0; }
@media (min-width: 768px) { .cp-name { width: 7rem; font-size: 12px; } }
.cp-track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(240, 199, 94, 0.09); overflow: hidden; }
.cp-fill { height: 100%; width: 0; border-radius: 999px; transition: width 1s ease-out; }
.cp-pct { flex-shrink: 0; width: 3.5rem; text-align: left; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--parch-dim); }
.progress-note {
  margin: 2.5rem auto 0; max-width: 42rem; text-align: center;
  font-size: 11px; line-height: 1.9; color: var(--mut);
}
@media (min-width: 768px) { .progress-note { font-size: 12px; } }

/* ---------- roadmap ---------- */
.quest-log { position: relative; margin: 0 auto; max-width: 42rem; }
.quest-list { display: flex; flex-direction: column; gap: 2.75rem; }
.quest { position: relative; padding-left: 3rem; }
.quest-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.375rem; }
.quest-head h3 { font-size: 1rem; font-weight: 900; color: var(--parch); }
@media (min-width: 768px) { .quest-head h3 { font-size: 1.125rem; } }
.quest-chip { padding: 0.125rem 0.5rem; font-size: 10px; font-weight: 800; }
.quest-chip-done { border: 1px solid rgba(240, 199, 94, 0.35); background: rgba(240, 199, 94, 0.08); color: var(--gold-2); }
.quest-chip-active { border: 1px solid rgba(240, 199, 94, 0.5); color: var(--gold-2); }
.quest-chip-wait { border: 1px solid rgba(168, 162, 148, 0.25); color: var(--mut); font-weight: 700; }
.quest p { margin-top: 0.5rem; font-size: 13px; line-height: 1.85; color: var(--parch-dim); }
.ci-card { margin: 3.5rem auto 0; max-width: 42rem; }
.ci-card-in { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; }
.ci-card-in p { font-size: 11px; line-height: 1.8; color: var(--parch-dim); }
@media (min-width: 768px) { .ci-card-in p { font-size: 12px; } }
.ci-icon { flex-shrink: 0; color: var(--gold-2); animation: wf-spin 9s linear infinite; }

/* ---------- contribute ---------- */
.steps { position: relative; margin: 0 auto; max-width: 56rem; display: grid; gap: 3rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.steps-rail { position: absolute; top: 2rem; left: 18%; right: 18%; border-top: 1px dashed rgba(240, 199, 94, 0.22); display: none; }
@media (min-width: 768px) { .steps-rail { display: block; } }
.step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-num {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 9999px;
  border: 1px solid rgba(240, 199, 94, 0.45);
  background: rgba(6, 8, 14, 0.7);
  font-size: 1.125rem; font-weight: 900; color: var(--gold-2);
  box-shadow: inset 0 0 18px rgba(240, 199, 94, 0.08), 0 0 14px rgba(240, 199, 94, 0.12);
}
.step h3 { margin-top: 1.5rem; font-size: 15px; font-weight: 900; color: var(--parch); }
.step p { margin-top: 0.625rem; max-width: 250px; font-size: 12px; line-height: 1.85; color: var(--mut); }
.clone-box { margin: 3.5rem auto 0; max-width: 36rem; }
.clone-box-in { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
.clone-box code {
  flex: 1; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--parch);
  direction: ltr;
}
.policy-note {
  margin-top: 2rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  text-align: center; font-size: 11px; color: var(--mut);
}
.policy-note svg { flex-shrink: 0; color: var(--gold-2); }