:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg: #050812;
  --panel: rgba(11, 18, 34, 0.68);
  --line: rgba(133, 219, 255, 0.16);
  --muted: #8795aa;
  --text: #eef7ff;
  --cyan: #5ce1ff;
  --violet: #8f7cff;
  --lime: #b7ffcb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}
button, a { font: inherit; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 36%, rgba(38, 82, 142, 0.16), transparent 26%),
    linear-gradient(145deg, #04070e 0%, #070a16 47%, #050812 100%);
}
.ambient__orb {
  position: absolute;
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.13;
  animation: drift 15s ease-in-out infinite alternate;
}
.ambient__orb--cyan { top: -16%; right: 2%; background: var(--cyan); }
.ambient__orb--violet { bottom: -24%; left: -8%; background: var(--violet); animation-delay: -6s; }
.ambient__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(106, 210, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 210, 255, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, black, transparent 83%);
}

.site-header,
main,
footer {
  width: min(1440px, calc(100% - 96px));
  margin-inline: auto;
}

.site-header {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand__mark { position: relative; width: 38px; height: 38px; transform: rotate(30deg); }
.brand__mark i {
  position: absolute;
  width: 23px;
  height: 23px;
  border: 1px solid var(--cyan);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.brand__mark i:nth-child(1) { left: 7px; top: -2px; }
.brand__mark i:nth-child(2) { left: -1px; top: 12px; border-color: var(--violet); }
.brand__mark i:nth-child(3) { right: -1px; top: 12px; border-color: var(--lime); }
.brand strong { display: block; font-size: 13px; letter-spacing: 0.22em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: 0.28em; }
.system-status { color: #7c8ba1; font: 600 10px/1.2 ui-monospace, "Cascadia Code", monospace; letter-spacing: 0.18em; }
.system-status span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime);
  animation: pulse 1.8s ease-in-out infinite;
}

.hero {
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 42px;
  padding: 74px 0 96px;
}
.hero__copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 28px; color: #75859d; font: 600 11px/1 ui-monospace, "Cascadia Code", monospace; letter-spacing: 0.18em; }
.eyebrow span { margin-right: 12px; color: var(--cyan); }
h1 { max-width: 740px; margin: 0; font-size: clamp(48px, 5.9vw, 88px); line-height: 1.02; letter-spacing: -0.065em; font-weight: 680; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #fff 4%, #77e6ff 48%, #9a8dff 96%); background-clip: text; -webkit-background-clip: text; }
.hero__english { margin: 26px 0 0; color: #9ca9bb; font-size: clamp(13px, 1.2vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; }
.hero__intro { max-width: 620px; margin: 34px 0 0; color: #a2aec0; font-size: 17px; line-height: 1.95; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 42px; }
.want-button {
  min-width: 178px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 0 18px 0 26px;
  border: 1px solid rgba(92, 225, 255, 0.65);
  border-radius: 3px;
  color: #06101a;
  background: linear-gradient(105deg, #b9f7ff, #6be4ff 65%, #a8a0ff);
  font-weight: 750;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 12px 42px rgba(74, 212, 255, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.want-button:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(74, 212, 255, 0.3); filter: brightness(1.05); }
.want-button:focus-visible { outline: 3px solid rgba(183, 255, 203, 0.5); outline-offset: 4px; }
.want-button:disabled { cursor: default; transform: none; filter: saturate(0.5); }
.want-button__arrow { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 8, 18, 0.13); font-size: 18px; }
.demo-button { min-width: 168px; height: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px 0 24px; border: 1px solid rgba(120, 220, 255, 0.32); border-radius: 14px; color: #d9f8ff; background: rgba(18, 39, 65, 0.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.demo-button:hover { transform: translateY(-3px); border-color: rgba(120, 220, 255, 0.7); background: rgba(25, 58, 92, 0.72); }
.demo-button:focus-visible { outline: 3px solid rgba(183, 255, 203, 0.5); outline-offset: 4px; }
.demo-button__arrow { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #06101a; background: #79e7ff; font-size: 17px; }
.interest-copy { margin: 0; color: #68788f; font-size: 12px; letter-spacing: 0.04em; }

.hero__visual { min-height: 680px; display: grid; place-items: center; }
.radar { position: relative; width: min(42vw, 620px); aspect-ratio: 1; }
.radar::before, .radar::after { content: ""; position: absolute; inset: 50%; width: 78%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); transform: translate(-50%, -50%); }
.radar::after { transform: translate(-50%, -50%) rotate(90deg); }
.radar__ring { position: absolute; inset: 50%; border: 1px solid rgba(108, 218, 255, 0.16); border-radius: 50%; transform: translate(-50%, -50%); }
.radar__ring--one { width: 94%; height: 94%; animation: rotate 24s linear infinite; border-style: dashed; }
.radar__ring--two { width: 68%; height: 68%; border-color: rgba(147, 126, 255, 0.22); }
.radar__ring--three { width: 42%; height: 42%; box-shadow: inset 0 0 60px rgba(73, 200, 255, 0.06), 0 0 80px rgba(120, 99, 255, 0.05); }
.radar__sweep { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 75%, rgba(92, 225, 255, 0.16) 92%, transparent 100%); animation: rotate 8s linear infinite; }
.radar__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 164px; height: 164px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(92, 225, 255, 0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 61, 89, 0.9), rgba(5, 10, 22, 0.92) 66%);
  box-shadow: 0 0 54px rgba(80, 211, 255, 0.18), inset 0 0 28px rgba(118, 224, 255, 0.1);
  transform: translate(-50%, -50%);
}
.radar__core::before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(164, 255, 211, 0.16); border-radius: 50%; }
.radar__core span, .radar__core small { color: #7f93aa; font: 600 8px/1 ui-monospace, monospace; letter-spacing: 0.22em; }
.radar__core strong { margin: 8px 0; font-size: 44px; line-height: 1; letter-spacing: -0.08em; background: linear-gradient(135deg, #fff, var(--cyan)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.node {
  position: absolute;
  width: 158px;
  padding: 16px 18px;
  border: 1px solid rgba(121, 214, 255, 0.2);
  background: rgba(7, 13, 27, 0.8);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
}
.node::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.node span { color: var(--cyan); font: 600 9px/1 ui-monospace, monospace; }
.node strong { display: block; margin: 7px 0 5px; font-size: 15px; }
.node small { color: #66768c; font-size: 8px; letter-spacing: 0.12em; }
.node--quant { left: -1%; top: 25%; }
.node--quant::after { right: -4px; top: 50%; }
.node--ai { right: -2%; top: 27%; }
.node--ai::after { left: -4px; top: 50%; background: var(--violet); box-shadow: 0 0 14px var(--violet); }
.node--human { left: 50%; bottom: 2%; transform: translateX(-50%); }
.node--human::after { left: 50%; top: -4px; background: var(--lime); box-shadow: 0 0 14px var(--lime); }

.advantages { padding: 110px 0 140px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; align-items: end; margin-bottom: 64px; }
.section-heading h2 { margin: 0; font-size: clamp(36px, 4vw, 62px); line-height: 1.12; letter-spacing: -0.045em; font-weight: 580; }
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.advantage-grid article { min-height: 370px; padding: 32px; border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(15, 25, 43, 0.64), rgba(7, 11, 22, 0.38)); transition: background 200ms ease, transform 200ms ease; }
.advantage-grid article:last-child { border-right: 0; }
.advantage-grid article:hover { background: rgba(17, 31, 53, 0.78); transform: translateY(-5px); }
.card-index { color: #637187; font: 600 9px/1 ui-monospace, monospace; letter-spacing: 0.15em; }
.card-icon { width: 66px; height: 66px; margin: 66px 0 36px; border: 1px solid rgba(92, 225, 255, 0.2); border-radius: 50%; position: relative; }
.card-icon::before, .card-icon::after { content: ""; position: absolute; }
.card-icon--chart::before { left: 17px; right: 17px; bottom: 18px; height: 18px; border-left: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); transform: skewY(-25deg); }
.card-icon--ai::before { inset: 18px; border: 1px solid var(--violet); transform: rotate(45deg); box-shadow: 0 0 16px rgba(143, 124, 255, 0.4); }
.card-icon--human::before { left: 50%; top: 15px; width: 12px; height: 12px; border: 1px solid var(--lime); border-radius: 50%; transform: translateX(-50%); }
.card-icon--human::after { left: 17px; right: 17px; bottom: 15px; height: 17px; border: 1px solid var(--lime); border-radius: 18px 18px 3px 3px; border-bottom-color: transparent; }
.advantage-grid h3 { margin: 0 0 18px; font-size: 22px; font-weight: 600; }
.advantage-grid p { margin: 0; color: #8d9aae; font-size: 14px; line-height: 1.9; }

.coming-soon { padding: 130px 0 160px; text-align: center; }
.coming-soon__line { width: 1px; height: 82px; margin: 0 auto 34px; background: linear-gradient(transparent, var(--cyan)); }
.coming-soon p { margin: 0 0 24px; color: #64748a; font: 600 9px/1 ui-monospace, monospace; letter-spacing: 0.3em; }
.coming-soon h2 { margin: 0; font-size: clamp(64px, 10vw, 142px); line-height: 1; letter-spacing: -0.075em; color: transparent; -webkit-text-stroke: 1px rgba(187, 235, 255, 0.55); text-shadow: 0 0 60px rgba(84, 211, 255, 0.08); }
.coming-soon small { display: block; margin-top: 30px; color: #718096; font-size: 14px; letter-spacing: 0.12em; }

footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #4f5d70; font: 600 9px/1.4 ui-monospace, monospace; letter-spacing: 0.14em; }
.toast { position: fixed; z-index: 20; right: 28px; bottom: 28px; max-width: 340px; padding: 15px 19px; border: 1px solid rgba(92, 225, 255, 0.3); border-radius: 4px; color: #dffaff; background: rgba(7, 14, 27, 0.94); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: 180ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.36; transform: scale(0.78); } }
@keyframes drift { to { transform: translate3d(7%, 8%, 0) scale(1.08); } }

@media (max-width: 1050px) {
  .site-header, main, footer { width: min(100% - 48px, 900px); }
  .hero { grid-template-columns: 1fr; padding-top: 90px; }
  .hero__copy { max-width: 780px; }
  .hero__visual { min-height: 610px; }
  .radar { width: min(74vw, 600px); }
  .section-heading { grid-template-columns: 1fr; }
  .advantage-grid { grid-template-columns: 1fr; }
  .advantage-grid article { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
  .advantage-grid article:last-child { border-bottom: 0; }
  .card-icon { margin-top: 44px; }
}

@media (max-width: 640px) {
  .site-header, main, footer { width: calc(100% - 32px); }
  .site-header { height: 86px; }
  .system-status { display: none; }
  .hero { min-height: auto; padding: 68px 0 78px; }
  h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero__intro { font-size: 15px; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .hero__visual { min-height: 480px; margin-inline: -8px; }
  .radar { width: min(92vw, 470px); }
  .radar__core { width: 128px; height: 128px; }
  .radar__core strong { font-size: 36px; }
  .node { width: 132px; padding: 12px; }
  .node strong { font-size: 13px; }
  .node--quant { left: 0; }
  .node--ai { right: 0; }
  .advantages { padding: 80px 0 100px; }
  .advantage-grid article { padding: 26px; }
  .coming-soon { padding: 90px 0 110px; }
  footer { padding: 24px 0; align-items: flex-start; flex-direction: column; gap: 12px; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

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