:root {
  color-scheme: dark;
  --bg: #11100e;
  --bg-deep: #090a0a;
  --surface: #181714;
  --surface-raised: #201e19;
  --line: #3a3428;
  --line-soft: #29261f;
  --text: #eee9dc;
  --muted: #a39c8e;
  --faint: #6d685e;
  --gold: #e8bb57;
  --gold-bright: #f4cf77;
  --green: #50dfa0;
  --red: #ef6d72;
  --cyan: #66c5d8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.nav { position: absolute; z-index: 5; top: 0; right: 0; left: 0; display: flex; height: 70px; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 38px; height: 38px; border: 1px solid rgba(232,187,87,.48); border-radius: 7px; object-fit: cover; }
.brand span { display: grid; line-height: 1.15; }
.brand b { font: 800 12px var(--mono); }
.brand small { margin-top: 4px; color: var(--gold); font: 8px var(--mono); }
.nav-links { display: flex; align-items: center; gap: 24px; color: #c6c0b4; font-size: 12px; }
.nav-links a:hover { color: var(--gold-bright); }
.nav-download { padding: 8px 12px; border: 1px solid rgba(232,187,87,.45); border-radius: 5px; color: var(--gold-bright); background: rgba(17,16,14,.72); }

.hero { position: relative; display: flex; min-height: min(780px, 86vh); align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.hero-media { position: absolute; inset: 0; background: url("/assets/plugin-hero.png?v=0.18.1-original") center 44% / cover no-repeat; opacity: .76; }
.hero-shade { position: absolute; inset: 0; background: rgba(5,6,6,.68); }
.hero-content { position: relative; z-index: 2; padding-bottom: 74px; }
.kicker { margin: 0 0 16px; color: var(--gold); font: 11px var(--mono); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; color: var(--gold-bright); font-size: 76px; line-height: 1; }
.hero-line { max-width: 660px; margin-bottom: 30px; color: #e5dfd2; font-size: 22px; line-height: 1.5; }
.integration-proof { display: grid; width: fit-content; max-width: 100%; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; margin: 0 0 30px; padding: 11px 15px 11px 11px; border: 1px solid rgba(239,185,74,.62); border-left: 4px solid var(--gold); border-radius: 6px; background: rgba(41,31,10,.9); box-shadow: 0 10px 34px rgba(0,0,0,.28); }
.integration-label { display: grid; min-width: 58px; height: 30px; place-items: center; padding: 0 8px; border-radius: 4px; color: #171207; background: var(--gold); font: 900 11px var(--mono); }
.integration-proof strong { display: block; color: var(--gold-bright); font-size: 15px; }
.integration-proof small { display: block; margin-top: 3px; color: #e4ddcf; font-size: 11px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-actions > span { margin-left: 6px; color: var(--faint); font: 11px var(--mono); }
.button { display: inline-flex; height: 43px; align-items: center; padding: 0 20px; border-radius: 6px; font-weight: 800; }
.button.primary { color: #1b160a; background: var(--gold); }
.button.primary:hover { background: var(--gold-bright); }
.button.secondary { border: 1px solid #514a3c; color: #d8d1c4; background: rgba(18,17,15,.75); }

.band, .product-band, .matrix-band, .boundary-band { padding: 78px 0; border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 18px; margin-bottom: 38px; }
.section-head > span, .product-copy > span, .boundary-grid > div > span { color: var(--gold); font: 700 13px var(--mono); }
.section-head h2, .product-copy h2, .boundary-grid h2 { margin-bottom: 7px; font-size: 32px; }
.section-head p, .product-copy p { max-width: 680px; margin-bottom: 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); gap: 1px; }
.feature-grid article { min-width: 0; padding: 28px; background: var(--surface); }
.feature-grid article > small { color: var(--gold); font: 10px var(--mono); }
.feature-grid h3 { margin: 9px 0 8px; font-size: 20px; }
.feature-grid p { min-height: 52px; color: var(--muted); font-size: 13px; }
.feature-grid dl { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 0; border-top: 1px solid var(--line-soft); }
.feature-grid dl div { padding-top: 12px; }
dt { color: var(--faint); font-size: 10px; }
dd { margin: 3px 0 0; color: var(--green); font: 700 12px var(--mono); }

.product-band { background: #0d0e0e; }
.product-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0,1.3fr); gap: 52px; align-items: center; }
.product-copy h2 { margin-top: 10px; }
.product-copy ul { margin: 24px 0 0; padding: 0; list-style: none; }
.product-copy li { position: relative; padding: 8px 0 8px 19px; color: #c0b9ad; font-size: 13px; }
.product-copy li::before { position: absolute; left: 0; color: var(--gold); content: "▸"; }
.product-shot { margin: 0; overflow: hidden; border: 1px solid #4b4231; border-radius: 8px; background: #090a0a; box-shadow: 0 20px 70px rgba(0,0,0,.45); }
.product-shot img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top right; }
.product-shot figcaption { padding: 8px 11px; border-top: 1px solid var(--line-soft); color: var(--faint); font: 9px var(--mono); }
.matrix-band { background: #14130f; }
.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.matrix { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; }
.matrix th, .matrix td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.matrix th { color: var(--gold); background: #0e0f0e; font: 700 10px var(--mono); }
.matrix td { color: #bdb6aa; font-size: 12px; }
.matrix td:first-child { color: var(--text); font-weight: 750; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover td { background: rgba(232,187,87,.035); }

.steps { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; counter-reset: step; }
.steps li { position: relative; min-height: 126px; padding: 24px 24px 24px 58px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); counter-increment: step; }
.steps li:nth-child(even) { border-right: 0; }
.steps li::before { position: absolute; top: 23px; left: 0; color: var(--gold); content: counter(step, decimal-leading-zero); font: 700 24px var(--mono); }
.steps b { font-size: 15px; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
code { color: var(--gold-bright); font-family: var(--mono); }

.boundary-band { background: var(--surface); }
.boundary-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
.boundary-grid h2 { margin-top: 8px; }
.boundary-grid dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); gap: 1px; }
.boundary-grid dl div { padding: 18px; background: #141411; }
.boundary-grid dd { color: #c5beb1; font: 12px var(--sans); }
.footer { display: flex; min-height: 86px; align-items: center; justify-content: space-between; color: var(--faint); font: 10px var(--mono); }

@media (max-width: 760px) {
  .wrap { width: min(100% - 24px, 1120px); }
  .nav-links > a:not(.nav-download) { display: none; }
  .hero { min-height: 680px; }
  .hero-media { background-position: 61% center; opacity: .55; }
  .hero-content { padding-bottom: 48px; }
  h1 { font-size: 54px; }
  .hero-line { font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .integration-proof { width: 100%; gap: 10px; margin-bottom: 26px; }
  .hero-actions .button { width: 100%; justify-content: center; }
  .band, .product-band, .matrix-band, .boundary-band { padding: 54px 0; }
  .feature-grid, .product-layout, .steps, .boundary-grid { grid-template-columns: 1fr; }
  .feature-grid p { min-height: 0; }
  .steps li { border-right: 0; }
  .boundary-grid dl { grid-template-columns: 1fr; }
  .footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
}