:root {
  --color-main: #eaff4a;
  --color-goal: #30d158;
  --color-assist: #1a89ff;
  --color-defense: #ff9f0a;
  --color-speed: #64d2ff;
  --color-white: #efefef;
  --color-gray: #a3a5a9;
  --color-dark-gray: #636366;
  --color-black: #000;
  --color-black-1: #1c1c1e;
  /* 强调字体只需在此修改，整站荧光色斜体标题会同步更新。 */
  --font-accent: "Helvetica Neue", sans-serif;
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-white);
  background: var(--color-black);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { color: #101200; background: var(--color-main); }
:focus-visible { outline: 2px solid var(--color-main); outline-offset: 5px; }

.ambient {
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgb(48 209 88 / 26%), transparent 29rem),
    radial-gradient(circle at 83% 14%, rgb(26 137 255 / 31%), transparent 33rem),
    radial-gradient(circle at 82% 86%, rgb(255 159 10 / 19%), transparent 30rem),
    radial-gradient(circle at 38% 72%, rgb(234 255 74 / 10%), transparent 24rem),
    #000;
  filter: saturate(1.08);
  will-change: transform;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem var(--page-gutter);
}
.wordmark { font-size: 1.15rem; font-weight: 800; letter-spacing: .14em; }
.wordmark span { color: var(--color-main); }
nav { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); color: rgb(239 239 239 / 70%); font-size: .9rem; }
nav a { transition: color .25s ease; }
nav a:hover, nav a:focus-visible { color: var(--color-main); }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
  align-items: center;
  gap: 2rem;
  padding: 8rem var(--page-gutter) 5rem;
}
.hero-copy { position: relative; z-index: 2; max-width: 62rem; }
.eyebrow, .section-kicker {
  margin: 0 0 1.6rem;
  color: rgb(239 239 239 / 62%);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-main); box-shadow: 0 0 1.25rem var(--color-main); }
h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(4rem, 8.3vw, 9rem);
  font-weight: 560;
  letter-spacing: -.075em;
  line-height: .88;
}
h1 em { color: var(--color-main); font-family: var(--font-accent); font-weight: 700; font-style: italic; letter-spacing: -.045em; }
.hero-intro {
  max-width: 40rem;
  margin: 2.5rem 0 0;
  color: rgb(239 239 239 / 72%);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.25rem; }
.button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .8rem 1.35rem; border-radius: 999px; font-size: .95rem; font-weight: 650; }
.button-primary { color: #101200; background: var(--color-main); box-shadow: 0 0 2rem rgb(234 255 74 / 14%); transition: transform .25s ease, box-shadow .25s ease; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 .5rem 2.2rem rgb(234 255 74 / 24%); }
.text-link { color: rgb(239 239 239 / 72%); font-size: .95rem; }
.text-link span { color: var(--color-main); margin-left: .3rem; }

.trace-field { position: relative; min-height: min(70vw, 43rem); opacity: .94; }
.trace-field svg { width: 100%; height: 100%; overflow: visible; }
.trace-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: reveal-dot .55s cubic-bezier(.2,.75,.25,1) var(--delay) forwards; }
.dot-main { fill: var(--color-main); filter: url(#trace-glow); }
.dot-soft { fill: rgb(239 239 239 / 42%); }
.dot-dim { fill: rgb(239 239 239 / 22%); }
.dot-goal { fill: var(--color-goal); }
.dot-assist { fill: var(--color-assist); }
.dot-terminal { filter: url(#trace-glow); }
.coordinate { position: absolute; color: rgb(239 239 239 / 42%); font: 500 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.coordinate-a { left: 12%; bottom: 13%; } .coordinate-b { right: 4%; top: 7%; }

.statement { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 7rem var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); }
.statement h2 { margin: 0; max-width: 19ch; font-size: clamp(2.7rem, 6vw, 6.5rem); font-weight: 480; letter-spacing: -.055em; line-height: 1.02; }
.statement-copy { max-width: 42rem; margin: 2.5rem 0 0 auto; color: rgb(239 239 239 / 65%); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.65; }

.section-shell { display: grid; grid-template-columns: minmax(9rem, .32fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(7rem, 12vw, 11rem) var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); }
.section-label { display: flex; gap: 1rem; align-items: flex-start; color: rgb(239 239 239 / 46%); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.section-label span { color: var(--color-main); }
.section-label p { margin: 0; }
.section-content > h2, .philosophy > h2, .focus > h2, .contact h2 { margin: 0; font-size: clamp(3rem, 6.3vw, 7rem); font-weight: 480; letter-spacing: -.06em; line-height: .98; }
.section-content > h2 em, .philosophy > h2 em, .contact h2 em { color: var(--color-main); font-family: var(--font-accent); font-weight: 700; font-style: italic; letter-spacing: -.04em; }
.large-copy { max-width: 48rem; margin: clamp(3rem, 6vw, 6rem) 0 0 auto; color: rgb(239 239 239 / 68%); font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.55; }

.capabilities { background: linear-gradient(180deg, rgb(28 28 30 / 20%), transparent); }
.capability-list { margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid rgb(239 239 239 / 15%); }
.capability-list article { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid rgb(239 239 239 / 15%); }
.capability-index { color: var(--color-main); font: 500 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.capability-list article > div { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(14rem, 1fr); gap: 1rem; }
.capability-list h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 520; }
.capability-list p { margin: 0; color: rgb(239 239 239 / 56%); line-height: 1.55; }

.philosophy { position: relative; overflow: hidden; padding: clamp(7rem, 12vw, 11rem) var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); background: radial-gradient(circle at 90% 24%, rgb(26 137 255 / 19%), transparent 30rem); }
.philosophy::after { content: ""; position: absolute; width: 33rem; height: 33rem; right: -14rem; top: 4rem; border: 1px solid rgb(100 210 255 / 20%); border-radius: 50%; box-shadow: 0 0 7rem rgb(26 137 255 / 14%); pointer-events: none; }
.principles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(5rem, 10vw, 10rem); background: rgb(239 239 239 / 13%); }
.principles article { min-height: 19rem; padding: 2rem; background: rgb(0 0 0 / 80%); }
.principles span { color: var(--color-main); font: 500 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.principles h3 { max-width: 12ch; margin: 5.5rem 0 1rem; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.principles p { max-width: 26rem; margin: 0; color: rgb(239 239 239 / 55%); line-height: 1.6; }

.product-card { overflow: hidden; display: grid; grid-template-columns: minmax(18rem, .85fr) minmax(20rem, 1.15fr); min-height: 36rem; border: 1px solid rgb(239 239 239 / 14%); border-radius: 1.5rem; background: rgb(28 28 30 / 74%); box-shadow: 0 2rem 8rem rgb(0 0 0 / 45%); }
.product-visual { position: relative; display: grid; place-items: center; min-height: 30rem; background: radial-gradient(circle at 40% 38%, rgb(48 209 88 / 18%), transparent 45%), radial-gradient(circle at 70% 75%, rgb(26 137 255 / 22%), transparent 46%), #07090a; }
.product-visual::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgb(234 255 74 / 12%); border-radius: 50%; }
.product-glow { position: absolute; width: 15rem; height: 15rem; border-radius: 50%; background: var(--color-main); filter: blur(7rem); opacity: .18; }
.product-visual img { position: relative; z-index: 1; width: min(52%, 16rem); height: auto; border-radius: 26%; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 60%); transform: rotate(-4deg); }
.product-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2.2rem, 5vw, 5rem); }
.product-type { margin: 0 0 1.25rem; color: var(--color-main); font-size: .76rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; }
.product-copy h2 { margin: 0; font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 520; letter-spacing: -.06em; }
.product-copy > p:not(.product-type) { max-width: 35rem; margin: 1.5rem 0 2.2rem; color: rgb(239 239 239 / 65%); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.button-outline { gap: .6rem; border: 1px solid rgb(239 239 239 / 24%); transition: border-color .25s ease, color .25s ease, transform .25s ease; }
.button-outline:hover { color: var(--color-main); border-color: rgb(234 255 74 / 60%); transform: translateY(-2px); }

.focus { padding: clamp(7rem, 12vw, 11rem) var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); }
.focus > h2 { max-width: 17ch; }
.focus-tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(4rem, 8vw, 7rem); }
.focus-tags span { padding: .8rem 1rem; border: 1px solid rgb(239 239 239 / 17%); border-radius: 999px; color: rgb(239 239 239 / 68%); font-size: .88rem; background: rgb(28 28 30 / 34%); }

.contact { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 4rem; min-height: 78vh; padding: clamp(7rem, 12vw, 11rem) var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); background: radial-gradient(circle at 75% 80%, rgb(255 159 10 / 18%), transparent 28rem), radial-gradient(circle at 20% 85%, rgb(48 209 88 / 17%), transparent 32rem); }
.contact h2 { max-width: 13ch; }
.contact-link { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 3rem 1.6rem 0; border-top: 1px solid rgb(239 239 239 / 27%); border-bottom: 1px solid rgb(239 239 239 / 27%); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.contact-link span { color: rgb(239 239 239 / 46%); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-link b { position: absolute; right: .25rem; bottom: 1.65rem; color: var(--color-main); font-size: 1.35rem; font-weight: 400; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.3rem var(--page-gutter); border-top: 1px solid rgb(239 239 239 / 10%); color: rgb(239 239 239 / 48%); font-size: .8rem; }
footer p { margin: 0; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a:hover { color: var(--color-main); }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes reveal-dot {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 760px) {
  .site-header { padding-top: 1.3rem; }
  nav a:not(:last-child) { display: none; }
  .hero { grid-template-columns: 1fr; align-content: center; padding-top: 7rem; }
  h1 { font-size: clamp(3.7rem, 18vw, 6rem); }
  .trace-field { position: absolute; inset: 20% -30% auto 32%; min-height: 34rem; opacity: .5; }
  .hero-intro { max-width: 30rem; }
  .statement { min-height: 60vh; }
  .statement-copy { margin-left: 0; }
  .section-shell { grid-template-columns: 1fr; }
  .section-label { margin-bottom: 1rem; }
  .large-copy { margin-left: 0; }
  .capability-list article { grid-template-columns: 2.5rem 1fr; }
  .capability-list article > div { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: 16rem; }
  .principles h3 { margin-top: 3.5rem; }
  .product-card { grid-template-columns: 1fr; }
  .product-visual { min-height: 23rem; }
  .contact { grid-template-columns: 1fr; align-items: center; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trace-dot { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}