/* ==========================================================================
   WEAVE — the enterprise gradient desk (Stripe grammar).
   Ice-blue ground, navy ink, violet CTAs, skewed multicolor gradient bands,
   crisp columns and a code window. The site as financial-grade
   infrastructure.
   ========================================================================== */

.theme-weave {
  --paper:        #f6f9fc;
  --paper-2:      #ffffff;
  --paper-3:      #e9eff6;
  --dark:         #0a2540;
  --dark-2:       #103052;
  --dark-3:       #163a63;
  --ink:          #0a2540;
  --ink-2:        #3c4f6a;
  --muted:        #6b7c93;
  --muted-dark:   #8797ab;
  --clay:         #635bff;
  --clay-deep:    #4c45d6;
  --clay-soft:    #eceaff;
  --sky:          #00d4ff;
  --sage:         #14b8a6;
  --line:         rgba(10, 37, 64, 0.12);
  --line-strong:  rgba(10, 37, 64, 0.28);
  --line-dark:    rgba(246, 249, 252, 0.16);
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 999px;
  --serif: "Inter", sans-serif;
  --sans:  "Inter", sans-serif;
}

.theme-weave ::selection { background: var(--clay-soft); }
.theme-weave :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ---- chrome ---------------------------------------------------------- */

.theme-weave .site-header { background: rgba(246, 249, 252, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.theme-weave .promo { background: var(--dark); }
.theme-weave .promo a:hover { color: var(--clay-soft); }
.theme-weave .promo__close:hover { color: var(--clay-soft); }
.theme-weave .brand { font-weight: 700; letter-spacing: -0.02em; }
.theme-weave .brand-mark { color: var(--clay); }
.theme-weave .nav-link, .theme-weave .nav-trigger { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.theme-weave .nav-link:hover, .theme-weave .nav-trigger:hover { background: var(--paper-3); }
.theme-weave .nav-trigger .chev { color: var(--clay); }

.theme-weave .mega { border-color: var(--line); box-shadow: 0 24px 48px -24px rgba(10, 37, 64, 0.28); }
.theme-weave .mega__link:hover { color: var(--clay-deep); }
.theme-weave .drawer { background: var(--paper-2); }

/* ---- buttons & links -------------------------------------------------- */

.theme-weave .btn { font-weight: 600; letter-spacing: -0.005em; }
.theme-weave .btn--primary { background: var(--clay); }
.theme-weave .btn--primary:hover { background: var(--clay-deep); }
.theme-weave .btn--clay { background: var(--dark); border-color: var(--dark); }
.theme-weave .btn--clay:hover { background: var(--dark-2); }
.theme-weave .btn--outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.theme-weave .arrow-link { color: var(--clay); font-weight: 600; }
.theme-weave .arrow-link--ink:hover { color: var(--clay); }
.theme-weave .hub-link:hover, .theme-weave .lang-toggle:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

/* ---- type ------------------------------------------------------------- */

.theme-weave .hero h1,
.theme-weave .page-hero h1,
.theme-weave .section-head h2,
.theme-weave .callout__copy h2,
.theme-weave .card h3,
.theme-weave .tile__title,
.theme-weave .release__title,
.theme-weave .timeline__item h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.theme-weave .hero h1 { line-height: 1.06; color: var(--ink); }
.theme-weave .hero h1 a { color: var(--clay); text-decoration-color: rgba(99, 91, 255, 0.4); }
.theme-weave .eyebrow { color: var(--clay); }
.theme-weave .mission em { font-style: normal; color: var(--clay); }
.theme-weave .prose blockquote { border-left-color: var(--clay); }
.theme-weave .prose ul li::before { background: var(--clay); }
.theme-weave .chip { font-weight: 500; }
.theme-weave .chip--clay { color: var(--clay); border-color: rgba(99, 91, 255, 0.4); background: var(--clay-soft); }

/* CJK tuning */
html[lang^="zh"] .theme-weave .hero h1,
html[lang^="zh"] .theme-weave .page-hero h1 { line-height: 1.2; letter-spacing: 0; }

/* ---- surfaces --------------------------------------------------------- */

.theme-weave .hero__glow {
  background:
    radial-gradient(closest-side, rgba(99, 91, 255, 0.12), transparent 72%),
    radial-gradient(closest-side at 62% 58%, rgba(0, 212, 255, 0.1), transparent 70%);
}

.theme-weave .card { background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(10, 37, 64, 0.04); }
.theme-weave .card:hover {
  border-color: rgba(99, 91, 255, 0.4);
  box-shadow: 0 12px 28px -12px rgba(10, 37, 64, 0.18);
  transform: translateY(-2px);
}
.theme-weave .card--dark { background: var(--dark); color: #fff; }

.theme-weave .tile { background: var(--paper-2); border: 1px solid var(--line); }
.theme-weave .tile:hover { background: var(--paper-3); border-color: rgba(99, 91, 255, 0.35); }
.theme-weave .tile__arrow { color: var(--clay); }

.theme-weave .callout { background: var(--dark); }
.theme-weave .callout__viz {
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(99, 91, 255, 0.5), transparent 60%),
    radial-gradient(90% 80% at 12% 90%, rgba(0, 212, 255, 0.3), transparent 62%),
    var(--dark-3);
}

.theme-weave .table thead th { background: var(--paper-3); color: var(--ink); }
.theme-weave .table tbody tr:hover { background: var(--clay-soft); }
.theme-weave .tier { background: var(--clay); }

.theme-weave .note { background: var(--clay-soft); border-left: 3px solid var(--clay); }
.theme-weave .codeblock { border-color: var(--line); }
.theme-weave .codeblock__dot:first-child { background: var(--clay); }

.theme-weave .stat dd { color: var(--clay); }
.theme-weave .section--paper2 { background: var(--paper-2); }
.theme-weave .release:hover { background: var(--paper-2); }
.theme-weave .release__date { color: var(--clay); }
.theme-weave .timeline__year { color: var(--clay); }
.theme-weave .job:hover { color: var(--clay-deep); }
.theme-weave .person__photo { background: linear-gradient(160deg, var(--paper-3), var(--paper-2)); }

/* ---- forms ------------------------------------------------------------ */

.theme-weave .field input, .theme-weave .field select, .theme-weave .field textarea, .theme-weave .subscribe input {
  background: var(--paper-2);
  border-color: var(--line-strong);
  border-radius: var(--r-xs);
}
.theme-weave .field input:focus, .theme-weave .field textarea:focus, .theme-weave .subscribe input:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-soft);
}
.theme-weave .filter.is-active { background: var(--clay); border-color: var(--clay); }

/* ---- footer ----------------------------------------------------------- */

.theme-weave .site-footer { background: var(--dark); border-top: 1px solid var(--line-dark); }
.theme-weave .footer__brand .brand-mark { color: var(--clay-soft); }
.theme-weave .footer__social a:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

/* ---- sub-page polish --------------------------------------------------- */

/* eyebrow becomes a violet label chip */
.theme-weave .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: var(--r-pill);
  background: var(--clay-soft);
  color: var(--clay);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.theme-weave .eyebrow--clay { background: rgba(0, 212, 255, 0.12); color: #0891b2; }

/* violet rule under page titles */
.theme-weave .page-hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, #635bff, #00d4ff);
}

.theme-weave .table-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.theme-weave .table thead th { color: var(--clay-deep); }
.theme-weave .note { border-radius: var(--r-sm); }
.theme-weave .codeblock { border-radius: var(--r); }
.theme-weave .subscribe input { border-radius: var(--r-pill); }
.theme-weave .timeline__item { border-top-color: var(--line); }
.theme-weave .job { border-radius: var(--r-xs); }
.theme-weave .person { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.theme-weave .person__photo { border-radius: var(--r-sm); }
.theme-weave .release { border-radius: var(--r-xs); }

/* ==========================================================================
   WEAVE home — infrastructure-grade gradient.
   ========================================================================== */

.wv-hero { position: relative; max-width: 1160px; margin-inline: auto; padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(28px, 4vw, 48px); }
.wv-band {
  position: absolute;
  top: clamp(28px, 5vw, 64px);
  left: -8vw;
  right: -8vw;
  height: clamp(90px, 13vw, 170px);
  background: linear-gradient(100deg,
    #635bff 0%, #7a73ff 18%, #00d4ff 42%, #5eead4 58%, #ffd166 74%, #ff7ab0 92%);
  transform: skewY(-5deg);
  border-radius: 4px;
  opacity: 0.92;
  filter: saturate(1.05);
  /* feather the left/right ends so the band reads as a passing stripe */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.wv-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 249, 252, 0), rgba(246, 249, 252, 0.55) 85%);
  border-radius: 4px;
}
.wv-hero-inner { position: relative; }
.wv-hero h1 {
  margin: 0;
  max-width: 18ch;
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.wv-hero h1 em { font-style: normal; color: var(--clay); }
.wv-lede { margin: 24px 0 0; max-width: 52ch; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; color: var(--ink-2); }
.wv-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.wv-note { margin: 20px 0 0; font-size: 13px; color: var(--muted); }

/* trusted strip */
.wv-trusted {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(40px, 6vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.wv-trusted span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.wv-trusted b {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: rgba(10, 37, 64, 0.45);
  transition: color 0.25s var(--ease);
}
.wv-trusted:hover b { color: rgba(10, 37, 64, 0.7); }
@media (min-width: 900px) {
  .wv-trusted b + b { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 40px); }
}

.wv-section { max-width: 1160px; margin-inline: auto; padding: clamp(44px, 6vw, 84px) var(--gutter); }
.wv-section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.wv-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 12px;
}
.wv-h2 { margin: 0; font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); }
.wv-h2 em { font-style: normal; color: var(--clay); }

/* capability columns */
.wv-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wv-col {
  padding: 28px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 6px rgba(10, 37, 64, 0.04);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wv-col:hover { transform: translateY(-3px); border-color: rgba(99, 91, 255, 0.4); box-shadow: 0 16px 32px -14px rgba(10, 37, 64, 0.22); }
.wv-col-glyph {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--clay-soft);
  color: var(--clay);
  margin-bottom: 18px;
}
.wv-col h3 { margin: 0; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.wv-col p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.wv-col .arrow-link { display: inline-block; margin-top: 18px; }
@media (max-width: 880px) { .wv-cols { grid-template-columns: 1fr; } }

/* navy stats band with Stripe's sloped edges */
.wv-stats-wrap {
  background: var(--dark);
  margin-top: clamp(24px, 3.5vw, 48px);
  clip-path: polygon(0 3.5%, 100% 0, 100% 96.5%, 0 100%);
}
.wv-stats-wrap-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.wv-stat b {
  display: block;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.03em;
  color: #fff;
}
.wv-stat b span { color: var(--sky); }
.wv-stat p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(246, 249, 252, 0.62); }
@media (min-width: 900px) {
  .wv-stat + .wv-stat { border-left: 1px solid rgba(246, 249, 252, 0.14); padding-left: 28px; }
}
@media (max-width: 880px) { .wv-stats-wrap-inner { grid-template-columns: repeat(2, 1fr); } .wv-stats-wrap { clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); } }

/* developer split with code window */
.wv-dev { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.wv-dev h2 { margin: 14px 0 0; font-weight: 700; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.03em; }
.wv-dev p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.wv-dev .arrow-link { display: inline-block; margin-top: 20px; }
.wv-code {
  position: relative;
  background: var(--dark);
  border-radius: var(--r-lg);
  padding: 50px 24px 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  color: #c6d3e8;
  box-shadow: 0 24px 48px -20px rgba(10, 37, 64, 0.5);
  overflow-x: auto;
}
.wv-code::before {
  content: "resonance.py";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(246, 249, 252, 0.1);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(246, 249, 252, 0.55);
  background:
    radial-gradient(circle at 15px 21px, rgba(246, 249, 252, 0.28) 0 3.5px, transparent 4px),
    radial-gradient(circle at 31px 21px, rgba(246, 249, 252, 0.28) 0 3.5px, transparent 4px),
    radial-gradient(circle at 47px 21px, rgba(246, 249, 252, 0.28) 0 3.5px, transparent 4px),
    rgba(10, 37, 64, 0.35);
}
.wv-code .tok-k { color: #7a73ff; }
.wv-code .tok-s { color: #5eead4; }
.wv-code .tok-f { color: #00d4ff; }
.wv-code .tok-c { color: #5a718e; }
.wv-code .tok-n { color: #ffd166; }
@media (max-width: 880px) { .wv-dev { grid-template-columns: 1fr; } }

/* quote */
.wv-quote {
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.wv-quote::before {
  content: "\201C";
  display: block;
  font-size: 84px;
  line-height: 0.6;
  font-weight: 700;
  color: var(--clay);
  opacity: 0.35;
  margin-bottom: 18px;
}
.wv-quote blockquote {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--ink);
}
.wv-quote blockquote em { font-style: normal; color: var(--clay); }
.wv-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--muted);
}
.wv-quote cite a { color: var(--clay); text-decoration: none; border-bottom: 1px solid rgba(99, 91, 255, 0.4); }
.wv-quote cite a:hover { color: var(--clay-deep); border-color: var(--clay-deep); }
.wv-quote .arrow-link { display: inline-block; margin-top: 22px; }

/* CTA band */
.wv-cta {
  margin: 0 var(--gutter);
  border-radius: var(--r-xl);
  background: linear-gradient(110deg, #635bff 0%, #7a73ff 40%, #00d4ff 100%);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.wv-cta h2 { margin: 10px 0 0; font-weight: 700; font-size: clamp(28px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; }
.wv-cta p { margin: 14px 0 0; max-width: 48ch; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
.wv-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wv-cta .btn--primary { background: #fff; color: var(--clay); }
.wv-cta .btn--primary:hover { background: var(--paper); }
.wv-cta .btn--outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.wv-cta .btn--outline:hover { background: #fff; border-color: #fff; color: var(--clay); }
@media (max-width: 880px) { .wv-cta { grid-template-columns: 1fr; } }

/* colophon footer (shared markup, self-styled here) */
.theme-weave .at-colophon {
  max-width: 1160px;
  margin-inline: auto;
  padding: 18px var(--gutter) 48px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.theme-weave .at-colophon a { color: var(--clay); font-weight: 500; }

/* CJK tuning */
html[lang^="zh"] .wv-hero h1 { letter-spacing: 0; line-height: 1.24; }
html[lang^="zh"] .wv-h2, html[lang^="zh"] .wv-dev h2 { letter-spacing: 0; }
html[lang^="zh"] .wv-lede { line-height: 1.85; }
html[lang^="zh"] .wv-col p, html[lang^="zh"] .wv-dev p { line-height: 1.8; }
html[lang^="zh"] .wv-quote blockquote { line-height: 1.6; }
html[lang^="zh"] .wv-code { font-size: 12.5px; }