:root {
  --ink: #08090b;
  --surface: #101216;
  --surface-high: #16191e;
  --line: #292d34;
  --line-soft: #1d2025;
  --text: #f1f2f4;
  --muted: #989da7;
  --purple: #9b87f5;
  --purple-deep: #6f58d9;
  --green: #68d391;
  --amber: #e8b86d;
  --gold: #d8c091;
  --cyan: #64d6ff;
  --magenta: #d85cff;
  --red: #e07a7a;
  --max-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--ink);
  background-size: 48px 48px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: white; color: black; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--max-width) + 48px);
  margin: 0 auto;
  padding: 22px 24px;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled { background: rgba(8,9,11,.85); border-color: var(--line-soft); backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: .84rem; font-weight: 800; letter-spacing: .18em; }
.wordmark-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--gold); font-family: "SFMono-Regular", Consolas, monospace; font-size: .72rem; letter-spacing: -.08em; }
nav { display: flex; align-items: center; gap: 28px; font-size: .78rem; color: #b5bac3; }
nav a { transition: color .2s ease; }
nav a:hover, nav a:focus-visible { color: white; }
.nav-app { padding: 9px 13px; border: 1px solid var(--line); background: #111318; color: white; }

.hero {
  position: relative;
  min-height: min(900px, 100svh);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 150px 24px 88px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; right: 4%; top: 22%; width: 420px; height: 420px; border: 1px solid rgba(216,192,145,.14); border-radius: 50%; box-shadow: inset 0 0 0 70px rgba(216,192,145,.014), inset 0 0 0 140px rgba(216,192,145,.014); }
.hero-ruler { position: absolute; left: 24px; right: 24px; bottom: 46px; height: 33px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #666b74; font: .61rem "SFMono-Regular", Consolas, monospace; padding-top: 12px; }
.hero-ruler::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, #40444c 0 1px, transparent 1px 2%, #30343b 2% calc(2% + 1px), transparent calc(2% + 1px) 4%); }
.hero-copy { position: relative; z-index: 2; max-width: 940px; }
.eyebrow, .section-number, .card-kicker { color: var(--muted); font: .7rem "SFMono-Regular", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; background: var(--green); box-shadow: 0 0 0 4px rgba(104,211,145,.09); }
h1 { margin: 30px 0 8px; font-size: clamp(4.2rem, 13.5vw, 10.8rem); line-height: .82; letter-spacing: -.075em; font-weight: 820; }
.hero-line { margin: 32px 0 0; font-size: clamp(1.45rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.hero-detail { margin: 10px 0 38px; color: var(--muted); font-size: .95rem; letter-spacing: .04em; }
.primary-action { display: inline-flex; align-items: center; gap: 28px; padding: 13px 13px 13px 18px; background: var(--text); color: #0a0b0d; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; transition: transform .2s ease, background .2s ease; }
.primary-action:hover { transform: translateY(-2px); background: white; }
.action-icon { display: grid; place-items: center; width: 30px; height: 30px; background: #d7d9de; }
.hero-index { position: relative; z-index: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-end; color: #686d76; font: .62rem "SFMono-Regular", Consolas, monospace; letter-spacing: .14em; }
.hero-index strong { color: #d5d7dc; font-size: 4.8rem; line-height: 1; letter-spacing: -.08em; font-weight: 300; }

.section-shell { max-width: var(--max-width); margin: 0 auto; padding: 110px 24px; }
.projects { border-top: 1px solid var(--line-soft); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 44px; }
.section-heading h2, .about h2 { margin: 10px 0 0; font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -.055em; }
.section-heading > p { max-width: 360px; margin: 0; color: var(--muted); }

.project-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(320px, .96fr); gap: 16px; }
.project-card { min-height: 390px; padding: 22px; display: flex; flex-direction: column; background: rgba(16,18,22,.94); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.project-card:hover { transform: translateY(-3px); border-color: #414751; background: var(--surface); }
.project-featured { grid-row: span 3; min-height: 760px; }
.project-unknown { min-height: 284px; position: relative; }
.card-topline { display: flex; justify-content: space-between; align-items: center; }
.card-index { color: #626873; font: .7rem "SFMono-Regular", Consolas, monospace; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #333842; color: #a9afb9; font: .61rem "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.status-active { border-color: rgba(104,211,145,.28); color: var(--green); background: rgba(104,211,145,.05); }
.status-active span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-building { color: var(--amber); border-color: rgba(232,184,109,.25); background: rgba(232,184,109,.04); }
.status-building span { width: 5px; height: 5px; border-radius: 1px; background: currentColor; }
.status-paper { color: var(--gold); border-color: rgba(216,192,145,.30); background: rgba(216,192,145,.05); }
.status-paper span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-private { color: #d8b4fe; border-color: rgba(216,92,255,.26); background: rgba(216,92,255,.05); }
.project-visual { position: relative; min-height: 310px; margin: 28px 0 38px; background: #0c0e11; border: 1px solid #1e2228; overflow: hidden; }
.project-visual > span { position: absolute; left: 14px; bottom: 12px; color: #5d636d; font: .55rem "SFMono-Regular", Consolas, monospace; letter-spacing: .13em; }
.market-visual { background-image: linear-gradient(#171a20 1px, transparent 1px), linear-gradient(90deg, #171a20 1px, transparent 1px); background-size: 36px 36px; }
.trading-visual { background-image: linear-gradient(#171a20 1px, transparent 1px), linear-gradient(90deg, #171a20 1px, transparent 1px); background-size: 36px 36px; }
.chart-bars { position: absolute; inset: 50px 32px 45px; display: flex; gap: 5%; align-items: end; }
.chart-bars i { flex: 1; border-top: 2px solid #777f8c; background: linear-gradient(#242932, #15181e); }
.chart-bars i:nth-child(1){height:28%}.chart-bars i:nth-child(2){height:44%}.chart-bars i:nth-child(3){height:37%}.chart-bars i:nth-child(4){height:62%;border-color:var(--amber)}.chart-bars i:nth-child(5){height:53%}.chart-bars i:nth-child(6){height:76%;border-color:var(--gold)}.chart-bars i:nth-child(7){height:68%}.chart-bars i:nth-child(8){height:88%;border-color:var(--green)}
.chart-line { position: absolute; inset: 45px 42px; }
.chart-line i { position: absolute; width: 2px; background: rgba(216,192,145,.36); transform-origin: bottom; }
.chart-line i:nth-child(1){height:72px;left:8%;top:46%;transform:rotate(52deg)}.chart-line i:nth-child(2){height:88px;left:24%;top:31%;transform:rotate(-45deg)}.chart-line i:nth-child(3){height:103px;left:39%;top:28%;transform:rotate(54deg)}.chart-line i:nth-child(4){height:120px;left:58%;top:10%;transform:rotate(-48deg)}.chart-line i:nth-child(5){height:78px;left:72%;top:14%;transform:rotate(51deg)}.chart-line i:nth-child(6){height:70px;left:85%;top:-1%;transform:rotate(-46deg)}
.tool-visual { min-height: 160px; background: linear-gradient(135deg, #111315, #171512); }
.measure-line { position: absolute; left: 26px; right: 26px; top: 35px; display: flex; justify-content: space-between; border-top: 1px solid #444a54; }
.measure-line b { width: 1px; height: 13px; background: #444a54; }
.measure-line b:nth-child(3n+1){height:22px}.measure-line b:nth-child(5){background:var(--amber)}
.plan-shape { position: absolute; inset: 71px 30px 38px; border: 1px solid #303640; border-right-color: var(--amber); }
.plan-shape i { position: absolute; background: #303640; }
.plan-shape i:nth-child(1){left:35%;top:0;width:1px;height:100%}.plan-shape i:nth-child(2){left:35%;top:53%;width:65%;height:1px}.plan-shape i:nth-child(3){right:22%;top:53%;width:1px;height:47%;background:var(--amber)}
.education-visual { min-height: 150px; background: linear-gradient(135deg, #071420, #0b1c2a); }
.signal-grid { position: absolute; inset: 34px 28px 48px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.signal-grid i { border: 1px solid rgba(100,214,255,.22); background: rgba(100,214,255,.05); }
.signal-grid i:nth-child(2) { border-color: rgba(104,211,145,.24); }
.signal-grid i:nth-child(3) { border-color: rgba(232,184,109,.24); }
.signal-grid i:nth-child(4) { border-color: rgba(100,214,255,.38); box-shadow: inset 0 0 0 1px rgba(100,214,255,.09); }
.research-visual { min-height: 150px; background: linear-gradient(135deg, #110b18, #171020); }
.lab-grid { position:absolute; inset:32px 28px 48px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lab-grid i { border:1px solid rgba(216,92,255,.22); background:rgba(216,92,255,.06); }
.lab-grid i:nth-child(2n) { border-color:rgba(100,214,255,.18); background:rgba(100,214,255,.035); }
.product-trading { border-color: rgba(216,192,145,.28); }
.product-build { border-color: rgba(232,184,109,.23); }
.product-market { border-color: rgba(100,214,255,.18); }
.product-research { border-color: rgba(216,92,255,.18); }
.card-content { margin-top: auto; }
.card-content h3 { margin: 9px 0 12px; font-size: clamp(1.65rem, 3vw, 2.8rem); line-height: 1.06; letter-spacing: -.045em; }
.card-content > p:not(.card-kicker) { max-width: 620px; color: #a4a9b2; margin: 0 0 28px; }
.card-link { display: inline-flex; align-items: center; gap: 20px; padding-bottom: 4px; border-bottom: 1px solid #8a909a; font-size: .78rem; font-weight: 720; text-transform: uppercase; letter-spacing: .09em; }
.card-link:hover { border-color: var(--gold); color: white; }
.card-link-muted { color: #707680; border-color: #343943; cursor: default; }
.unknown-mark { position: absolute; right: 20px; top: 52px; color: #22262d; font: 700 9rem/1 "SFMono-Regular", Consolas, monospace; }

.about { border-top: 1px solid var(--line-soft); }
.about-page { padding-top: 180px; min-height: 72vh; }
.about-page h1 { margin: 10px 0 0; font-size: clamp(3.2rem, 8vw, 7.2rem); line-height: .96; letter-spacing: -.06em; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.systems { border-top: 1px solid var(--line-soft); }
.system-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:start; }
.system-grid h2 { margin: 10px 0 0; font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -.055em; }
.system-list { display:grid; gap:12px; }
.system-list div { display:grid; grid-template-columns: 140px 1fr; gap:20px; padding:17px 0; border-bottom:1px solid var(--line-soft); }
.system-list strong { color:var(--text); font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; }
.system-list span { color:var(--muted); }
.about-lead { margin: 14px 0 24px; max-width: 560px; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.45; letter-spacing: -.025em; }
.about-note { max-width: 500px; color: var(--muted); }

footer { max-width: var(--max-width); margin: 0 auto; padding: 34px 24px 42px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #9da3ad; font: .8rem "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.footer-mark { color: #c4c7cd; font-size: .7rem; }
footer > div { display: flex; gap: 28px; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

@media (max-width: 820px) {
  .site-header { padding: 17px 18px; }
  nav { gap: 16px; }
  nav > a:not(.nav-app) { display: none; }
  .hero { padding: 130px 18px 80px; grid-template-columns: 1fr; }
  .hero::before { width: 280px; height: 280px; right: -90px; top: 24%; }
  .hero-ruler { left: 18px; right: 18px; }
  .hero-index { display: none; }
  h1 { font-size: clamp(4rem, 20vw, 7rem); }
  .section-shell { padding: 78px 18px; }
  .section-heading { align-items: start; flex-direction: column; gap: 20px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .project-featured { min-height: 580px; grid-row: auto; }
  .product-build, .product-market, .product-research { min-height: 430px; }
  .project-unknown { min-height: 330px; }
  .about-grid, .system-grid { grid-template-columns: 1fr; gap: 26px; }
  footer { margin: 0 18px; padding-left: 0; padding-right: 0; }
}

@media (max-width: 520px) {
  body { background-size: 32px 32px; }
  .wordmark { letter-spacing: .12em; }
  .nav-app { padding: 8px 10px; }
  .hero { min-height: 760px; }
  h1 { font-size: 22vw; }
  .hero-line { font-size: 1.45rem; max-width: 300px; }
  .hero-detail { max-width: 240px; }
  .project-card { padding: 17px; }
  .project-card, .project-featured, .product-build, .product-market, .product-research { min-height: auto; }
  .project-visual { min-height: 230px; margin-top: 22px; }
  .tool-visual, .education-visual, .research-visual { min-height: 170px; }
  .chart-bars { inset: 42px 20px 40px; }
  .system-list div { grid-template-columns: 1fr; gap: 5px; }
  .unknown-mark { font-size: 7rem; }
  footer { align-items: flex-start; flex-direction: column; gap: 26px; }
  footer > div { width: 100%; flex-direction: column; gap: 10px; }
}