/* Gearcian — production stylesheet, ported faithfully from the Claude Design
   handoff (design/handoff/). Phosphor terminal aesthetic: near-black green
   ground, JetBrains Mono everywhere, single --acc accent. */

/* Variable font, weights 400–800 in one file (latin subset, self-hosted). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: #0a0f0a;
  color: #e6f7e6;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  --acc: #35ff7a;
  position: relative;
  overflow-x: hidden;
}
a { color: inherit; }

/* ── header ── */
.hd {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(10, 15, 10, .82);
  border-bottom: 1px solid rgba(120, 255, 140, .16);
}
.hd-in {
  max-width: 1160px; margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #e6f7e6; }
.mark { width: 19px; height: 19px; flex: none; background: var(--acc); display: inline-block; box-shadow: 0 0 14px -1px var(--acc); }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); font-size: 13.5px; flex-wrap: wrap; }
.nav a { color: #7ba87b; text-decoration: none; transition: color .15s; }
.nav a:hover { color: var(--acc); }
.nav .nav-cta {
  padding: 8px 16px; border: 1px solid rgba(120, 255, 140, .32);
  border-radius: 3px; color: var(--acc); transition: .15s;
}
.nav .nav-cta:hover { background: var(--acc); color: #06120a; }

/* ── hero ── */
.hero { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 10vw, 132px) clamp(20px, 4vw, 44px) clamp(48px, 6vw, 80px); }
.eyebrow { font-size: 12.5px; color: #7ba87b; letter-spacing: .04em; }
.hero h1 {
  margin: 22px 0 0; max-width: 16ch;
  font-weight: 700; font-size: clamp(44px, 7.5vw, 88px);
  line-height: 1.02; letter-spacing: -.045em; color: #eafff0;
}
.lede { margin: 26px 0 0; max-width: 54ch; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #a6cfa6; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.btn-solid {
  display: inline-block; padding: 14px 26px;
  background: var(--acc); color: #06120a; border-radius: 3px;
  font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 0 32px -8px var(--acc); transition: filter .15s;
}
.btn-solid:hover { filter: brightness(1.12); }
.btn-line {
  display: inline-block; padding: 14px 26px;
  border: 1px solid rgba(120, 255, 140, .3); color: #e6f7e6;
  border-radius: 3px; font-weight: 500; font-size: 14px; text-decoration: none; transition: .15s;
}
.btn-line:hover { border-color: var(--acc); color: var(--acc); }

/* ── section bands ── */
.band { border-top: 1px solid rgba(120, 255, 140, .14); }
.band-in { max-width: 1160px; margin: 0 auto; padding: clamp(52px, 7vw, 84px) clamp(20px, 4vw, 44px); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-head h2, .sec-title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #eafff0; }
.sec-title { margin-bottom: 30px; }
.sec-note { font-size: 13px; color: #7ba87b; }

/* ── products ── */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.prod-card {
  display: flex; flex-direction: column;
  background: #0e140e; border: 1px solid rgba(120, 255, 140, .18);
  border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.prod-card:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 16px 44px -20px var(--acc); }
.prod-art {
  height: 164px; position: relative; background-color: #0e140e;
  background-size: cover; background-position: center;
}
.live-pill {
  position: absolute; top: 13px; right: 13px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #4ade9a;
  padding: 4px 10px; background: rgba(6, 18, 10, .72);
  border: 1px solid rgba(74, 222, 154, .32); border-radius: 100px;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade9a; box-shadow: 0 0 8px #4ade9a; }
.prod-body { padding: 24px; }
.prod-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.prod-title-row h3 { margin: 0; font-size: 20px; font-weight: 700; color: #eafff0; }
.prod-cat { font-size: 11px; color: #7ba87b; }
.prod-body p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: #a6cfa6; }
.prod-link { margin-top: 20px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--acc); }

.prod-soon {
  border: 1px dashed rgba(120, 255, 140, .22); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; min-height: 268px; color: #7ba87b;
}
.soon-box { width: 30px; height: 30px; border: 2px solid rgba(120, 255, 140, .3); border-radius: 6px; display: inline-block; }
.soon-title { margin-top: 18px; font-size: 14px; font-weight: 600; color: #a6cfa6; }
.soon-sub { margin-top: 9px; font-size: 11.5px; color: #5f855f; }
.prod-ghost {
  border: 1px solid rgba(120, 255, 140, .08); border-radius: 4px; min-height: 268px;
  background: repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(120, 255, 140, .02) 12px, rgba(120, 255, 140, .02) 24px);
}

/* ── pillars ── */
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pillar { border: 1px solid rgba(120, 255, 140, .14); border-radius: 4px; padding: 30px; background: #0e140e; }
.pillar-num { font-size: 12px; font-weight: 600; color: var(--acc); margin-bottom: 16px; }
.pillar h3 { margin: 0; font-size: 18px; font-weight: 700; color: #eafff0; }
.pillar p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: #a6cfa6; }

/* ── about ── */
#about .band-in { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 44px); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-h { margin: 0; font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #eafff0; }
.about-p { margin: 22px 0 0; font-size: 15.5px; line-height: 1.7; color: #a6cfa6; }
.lite { color: #eafff0; }
.work-card { border: 1px solid rgba(120, 255, 140, .16); border-radius: 4px; padding: 30px; background: #0e140e; }
.work-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: #eafff0; }
.work-card p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: #a6cfa6; }
.work-card .btn-solid { margin-top: 22px; padding: 13px 22px; font-size: 13.5px; box-shadow: 0 0 28px -10px var(--acc); }

/* ── footer ── */
.ft { border-top: 1px solid rgba(120, 255, 140, .14); }
.ft-in {
  max-width: 1160px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ft-brand { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: #5f855f; }
.ft-mark { width: 13px; height: 13px; flex: none; background: rgba(120, 255, 140, .4); display: inline-block; }
.ft-links { display: flex; gap: 22px; font-size: 12.5px; flex-wrap: wrap; }
.ft-links a { color: #7ba87b; text-decoration: none; transition: color .15s; }
.ft-links a:hover { color: var(--acc); }

/* ── policy page ── */
.doc-head { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 44px) clamp(28px, 4vw, 40px); }
.crumb { font-size: 12.5px; color: #7ba87b; letter-spacing: .03em; }
.crumb a { color: #7ba87b; text-decoration: none; }
.crumb a:hover { color: var(--acc); }
.crumb .here { color: var(--acc); text-transform: capitalize; }
.doc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 30px; }
.doc-tab {
  padding: 9px 16px; border-radius: 2px;
  font: 600 12.5px 'JetBrains Mono', monospace; cursor: pointer;
  border: 1px solid rgba(120, 255, 140, .22); background: transparent; color: #8fbf8f; transition: .15s;
}
.doc-tab:hover { border-color: var(--acc); color: var(--acc); }
.doc-tab.on { border-color: var(--acc); background: var(--acc); color: #06120a; }
.doc-title { margin: 0; font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: #eafff0; }
.doc-intro { margin: 16px 0 0; font-size: 14px; color: #a6cfa6; line-height: 1.6; }
.doc-updated { margin-top: 18px; font-size: 11.5px; color: #5f855f; }
.doc-body { max-width: 820px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px) clamp(60px, 9vw, 110px); }
.doc-rule { border-top: 1px solid rgba(120, 255, 140, .14); padding-top: clamp(28px, 4vw, 44px); }
.doc-sec { margin-bottom: 38px; }
.doc-sec-head { display: flex; align-items: baseline; gap: 12px; }
.doc-sec-num { font-size: 12px; color: var(--acc); }
.doc-sec h2 { margin: 0; font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; color: #cdf5cd; letter-spacing: -.01em; }
.doc-sec p { margin: 12px 0 0; padding-left: 32px; font-size: 14.5px; line-height: 1.75; color: #93c393; }
.doc-ask { margin-top: 46px; border: 1px solid rgba(120, 255, 140, .16); border-radius: 3px; padding: 26px; background: #0e140e; }
.doc-ask h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #eafff0; }
.doc-ask p { margin: 0; font-size: 14px; line-height: 1.65; color: #8fbf8f; }
.doc-ask a { color: var(--acc); text-decoration: none; }