:root {
  --paper: #f1f0e8;
  --ink: #11120f;
  --muted: #66675f;
  --line: rgba(17, 18, 15, 0.18);
  --blue: #2752ff;
  --lime: #c8ff2f;
  --orange: #ff5c35;
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; padding: .75rem 1rem; background: var(--ink); color: white; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  min-height: 72px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 240, 232, .88);
  backdrop-filter: blur(16px);
  transition: min-height .25s ease, background .25s ease;
}
.site-header.is-compact { min-height: 58px; background: rgba(241, 240, 232, .96); }
.brand { display: inline-flex; align-items: center; width: max-content; font-size: 1.05rem; font-weight: 850; letter-spacing: -.06em; }
.brand-divider { color: var(--blue); margin: 0 .1em; }
.brand-bit { font-weight: 470; }
.desktop-nav { display: flex; gap: 2rem; font-size: .77rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav a { transition: opacity .2s ease; }
.desktop-nav a:hover { opacity: .48; }
.header-note { justify-self: end; color: var(--muted); font: .6rem/1 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }

.hero {
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100vh - 72px);
  padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 4vw, 4.5rem) 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.eyebrow, .section-index { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.live-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .55rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .28rem rgba(255, 92, 53, .12); }
.hero h1 { margin: 1.4rem 0 1.8rem; font-size: clamp(4.6rem, 10vw, 9.4rem); font-weight: 520; line-height: .82; letter-spacing: -.09em; }
.hero h1::first-line { color: var(--blue); }
.hero-lede { max-width: 34rem; margin: 0; font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.48; letter-spacing: -.025em; }
.hero-actions { margin-top: 3rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.primary-action { display: inline-flex; gap: 2.5rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--ink); font-size: .78rem; font-weight: 760; transition: color .2s, background .2s; }
.primary-action:hover { color: var(--paper); background: var(--ink); }
.hero-note { max-width: 14rem; color: var(--muted); font-size: .65rem; line-height: 1.55; letter-spacing: .08em; text-transform: uppercase; }

.perception-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0c0d0b; color: #fff; box-shadow: 1.4rem 1.4rem 0 var(--blue); }
#perception-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-meta { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; display: flex; justify-content: space-between; font-family: Consolas, monospace; font-size: .59rem; letter-spacing: .12em; }
.stage-meta-top { top: 1rem; }
.focus-frame { position: absolute; z-index: 2; left: 24%; top: 33%; width: 47%; height: 29%; }
.corner { position: absolute; width: 22px; height: 22px; border-color: var(--lime); }
.corner-tl { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; }
.corner-tr { right: 0; top: 0; border-right: 2px solid; border-top: 2px solid; }
.corner-bl { left: 0; bottom: 0; border-left: 2px solid; border-bottom: 2px solid; }
.corner-br { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.focus-label { position: absolute; left: 0; top: calc(100% + .55rem); color: var(--lime); font: .55rem/1 Consolas, monospace; letter-spacing: .1em; }
.stage-caption { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: .65rem; align-items: center; font: .54rem/1 Consolas, monospace; letter-spacing: .08em; }
.stage-caption i { height: 1px; background: rgba(255,255,255,.32); }

.manifesto, .directions, .about { max-width: var(--max); margin: 0 auto; padding: 7rem clamp(1.25rem, 4vw, 4.5rem); }
.manifesto { border-top: 1px solid var(--line); }
.manifesto-grid { margin-top: 3rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; align-items: start; }
.manifesto-grid p { margin: 0; }
.manifesto-lead { font-size: clamp(2rem, 4vw, 4.25rem); line-height: 1.1; letter-spacing: -.055em; }
.manifesto-grid p:last-child { padding-top: .5rem; font-size: 1.05rem; line-height: 1.8; color: var(--muted); }

.section-heading { display: grid; grid-template-columns: .5fr 1.5fr 1fr; gap: 2rem; align-items: start; margin-bottom: 4.5rem; }
.section-heading h2 { margin: -.1em 0 0; font-size: clamp(2.4rem, 4.8vw, 5rem); font-weight: 520; line-height: .96; letter-spacing: -.065em; }
.section-heading > p:last-child { max-width: 23rem; justify-self: end; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.direction-list { border-top: 1px solid var(--ink); }
.direction-card { position: relative; min-height: 230px; padding: 2rem 0; display: grid; grid-template-columns: .5fr 1.5fr 1fr; gap: 2rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.direction-number { font: .75rem/1 Consolas, monospace; color: var(--blue); }
.direction-en { margin: 0 0 .5rem; color: var(--muted); font-size: .67rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.direction-copy h3 { margin: 0 0 1rem; font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 550; letter-spacing: -.05em; }
.direction-copy > p:last-child { max-width: 39rem; margin: 0; color: var(--muted); line-height: 1.7; }
.direction-tags { align-self: end; display: flex; gap: .4rem; flex-wrap: wrap; }
.direction-tags span { padding: .45rem .65rem; border: 1px solid var(--line); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.direction-glyph { position: absolute; right: 0; top: 1.7rem; width: 112px; height: 112px; opacity: .12; transition: opacity .25s, transform .4s; }
.direction-card:hover .direction-glyph { opacity: .9; transform: rotate(-4deg); }
.glyph-vision { border: 1px solid var(--blue); }
.glyph-vision::before, .glyph-vision::after { content: ""; position: absolute; background: var(--blue); }
.glyph-vision::before { left: 50%; top: 0; width: 1px; height: 100%; }
.glyph-vision::after { left: 0; top: 50%; width: 100%; height: 1px; }
.glyph-vision b { position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border: 2px solid var(--blue); }
.glyph-ego { border-radius: 50%; border: 1px solid var(--orange); }
.glyph-ego::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid var(--orange); }
.glyph-ego b { position: absolute; left: 49%; top: -10%; width: 2px; height: 120%; background: var(--orange); transform: rotate(38deg); }
.glyph-video { border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.glyph-video::before, .glyph-video::after, .glyph-video b { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); }
.glyph-video::before { top: 18%; }.glyph-video b { top: 50%; }.glyph-video::after { top: 82%; }

.about { border-top: 1px solid var(--line); }
.about-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 10vw; }
.about h2 { margin: 0; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; line-height: .92; letter-spacing: -.075em; }
.about-copy p { margin: 0 0 1.4rem; font-size: 1.05rem; line-height: 1.8; }.about-copy p:last-child { color: var(--muted); }
.principles { grid-column: 2; display: grid; margin-top: 1rem; border-top: 1px solid var(--ink); }
.principles span { padding: 1rem 0; border-bottom: 1px solid var(--line); font: .68rem/1.2 Consolas, monospace; letter-spacing: .08em; }

footer { max-width: var(--max); margin: 0 auto; padding: 2rem clamp(1.25rem, 4vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; border-top: 1px solid var(--ink); font-size: .67rem; }
footer p { margin: 0; } footer p:nth-child(2) { text-align: center; } footer p:last-child { text-align: right; color: var(--muted); }
.footer-demo { margin-left: .8rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25rem; transition: color .2s; }
.footer-demo:hover { color: var(--ink); }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }.desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }.perception-stage { max-width: 650px; width: 84%; justify-self: end; aspect-ratio: 5/4; }
  .manifesto-grid, .about-grid { grid-template-columns: 1fr; gap: 2rem; }.principles { grid-column: 1; }
  .section-heading { grid-template-columns: 1fr 2fr; }.section-heading > p:last-child { grid-column: 2; justify-self: start; }
  .direction-card { grid-template-columns: .3fr 1.7fr; }.direction-tags { grid-column: 2; }.direction-glyph { right: 1rem; }
}

@media (max-width: 620px) {
  .site-header { min-height: 62px; padding-inline: 1rem; }.header-note { font-size: .53rem; }
  .hero { padding-top: 4.5rem; gap: 4rem; }.hero h1 { font-size: clamp(4.2rem, 23vw, 6rem); }.hero-actions { align-items: flex-start; flex-direction: column; }
  .perception-stage { width: calc(100% - 1rem); aspect-ratio: 4/5; box-shadow: .8rem .8rem 0 var(--blue); }
  .manifesto, .directions, .about { padding-block: 5rem; }
  .manifesto-grid { margin-top: 2rem; }.manifesto-lead { font-size: 2.15rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 3rem; }.section-heading > p:last-child { grid-column: 1; }
  .direction-card { min-height: 280px; grid-template-columns: 2.2rem 1fr; gap: 1rem; }.direction-glyph { width: 76px; height: 76px; top: 1.2rem; opacity: .12; }.direction-copy > p:last-child { padding-right: .25rem; }
  footer { grid-template-columns: 1fr; gap: 1rem; align-items: start; } footer p:nth-child(2), footer p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}