:root {
  --bg: #070809;
  --panel: #101214;
  --panel-2: #15171a;
  --ink: #f7f4ed;
  --muted: #9aa1aa;
  --soft: #d8dde5;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --violet: #7c6cff;
  --cyan: #1cc9d8;
  --green: #17c964;
  --gold: #f0b84a;
  --red: #ff5c5c;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(124,108,255,.16), transparent 34%, rgba(28,201,216,.09) 60%, transparent 100%);
  background-size: 52px 52px, 52px 52px, auto;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 920px;
  margin-bottom: 24px;
  font-size: 88px;
  line-height: .98;
  letter-spacing: 0;
  font-weight: 700;
}
h2 {
  margin-bottom: 0;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 650;
}
h3 { margin-bottom: 12px; font-size: 21px; letter-spacing: 0; font-weight: 650; }
p { margin-bottom: 0; }

.section-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.nav {
  position: sticky;
  top: 12px;
  z-index: 20;
  width: min(1180px, calc(100% - 40px));
  margin: 12px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(10, 11, 12, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--violet), var(--cyan), var(--green), var(--gold), var(--violet));
  color: #060708;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.nav nav { display: flex; gap: 18px; align-items: center; color: var(--soft); font-size: 13px; font-weight: 560; }
.nav nav a { opacity: .82; transition: opacity .2s, color .2s; }
.nav nav a:hover { opacity: 1; color: white; }
.nav-cta { padding: 9px 13px; border-radius: 999px; background: white; color: #070809; opacity: 1 !important; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  border-bottom: 1px solid var(--line-soft);
}
#opsCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .78; pointer-events: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.hero-grid {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(350px, .72fr);
  gap: 42px;
  align-items: center;
  padding: 72px 0 78px;
}
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255,255,255,.045);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.pill.accent { color: #071011; background: var(--cyan); border-color: transparent; }
.lead {
  max-width: 780px;
  color: var(--soft);
  font-size: 22px;
  line-height: 1.58;
}
.lead-en { max-width: 720px; margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-actions.center { justify-content: center; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 14px;
  border: 1px solid var(--line);
  transition: transform .18s, background .18s, border-color .18s;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: white; border-color: white; color: #070809; }
.button.ghost { background: rgba(255,255,255,.045); color: var(--soft); }
.command-center {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,21,24,.88), rgba(8,9,10,.84));
  box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.terminal-bar span:nth-child(2) { background: var(--gold); }
.terminal-bar span:nth-child(3) { background: var(--green); }
.terminal-bar b { margin-left: auto; font-weight: 500; }
.signal-row { display: flex; justify-content: space-between; align-items: center; padding: 22px; border-bottom: 1px solid var(--line-soft); }
.signal-row small { color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.signal-row strong { color: var(--green); font-size: 36px; }
.metric-stack { display: grid; gap: 1px; background: var(--line-soft); }
.metric-stack div { padding: 20px 22px; background: rgba(12,14,16,.92); }
.metric-stack span { display: block; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.metric-stack b { display: block; margin: 8px 0 4px; font-size: 44px; line-height: 1; color: white; }
.metric-stack em { color: var(--soft); font-style: normal; font-size: 13px; }
.loop-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); }
.loop-map span { padding: 14px 8px; text-align: center; background: rgba(255,255,255,.045); color: var(--cyan); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--muted); font-size: 12px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 28px 0 8px; }
.stats div, article, .step, .platform-panel, .case-panel, .investor-points div {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.stats div { padding: 22px; }
.stats strong { display: block; margin-bottom: 7px; font-size: 30px; }
.stats span, article small, .panel-label { color: var(--cyan); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.stats p { margin-top: 9px; color: var(--muted); line-height: 1.55; font-size: 14px; }

.section-block { padding: 92px 0; }
.section-heading { display: grid; grid-template-columns: .46fr 1fr .72fr; gap: 28px; align-items: end; margin-bottom: 34px; }
.section-heading.split { grid-template-columns: .46fr 1fr; }
.section-heading p:not(.eyebrow) { color: var(--muted); line-height: 1.75; }
.eyebrow { margin-bottom: 0; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.grid { display: grid; gap: 14px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
article { min-height: 250px; padding: 24px; }
article p, .step p, .platform-panel p { color: var(--muted); line-height: 1.72; }
article small { display: block; margin-bottom: 18px; }
.icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--cyan); font-weight: 800; }

.case-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.case-panel { padding: 28px; }
.main-panel { min-height: 380px; background: linear-gradient(135deg, rgba(124,108,255,.16), rgba(255,255,255,.035)); }
.main-panel h3 { font-size: 32px; }
.proof-line { display: grid; grid-template-columns: 72px 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.proof-line b { color: var(--gold); }
.proof-line span { color: var(--soft); line-height: 1.6; }
.dash-list { display: grid; gap: 10px; }
.dash-list div { padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(0,0,0,.2); }
.dash-list b { display: block; margin-bottom: 8px; color: white; font-family: 'JetBrains Mono', monospace; }
.dash-list span { color: var(--muted); line-height: 1.6; }

.roi-lab { border-top: 1px solid var(--line-soft); }
.roi-grid { display: grid; grid-template-columns: .82fr 1fr; gap: 14px; align-items: stretch; }
.roi-controls, .roi-output {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.roi-controls { display: grid; gap: 22px; padding: 26px; }
.roi-controls label { display: grid; gap: 12px; }
.roi-controls label span { display: flex; justify-content: space-between; gap: 18px; color: var(--soft); line-height: 1.5; }
.roi-controls label b { color: var(--cyan); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.roi-controls input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}
.roi-output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; background: var(--line-soft); }
.roi-number, .roi-note { background: rgba(12,14,16,.92); }
.roi-number { min-height: 190px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.roi-number span { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.roi-number strong { display: block; color: white; font-size: 38px; line-height: 1.05; word-break: keep-all; }
.roi-note { grid-column: 1 / -1; padding: 24px; }
.roi-note b { display: block; margin-bottom: 10px; color: var(--gold); font-size: 20px; }
.roi-note p { color: var(--soft); line-height: 1.7; }

.audience { border-top: 1px solid var(--line-soft); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.audience-card { min-height: 360px; }
.audience-card.highlight { background: linear-gradient(135deg, rgba(28,201,216,.14), rgba(124,108,255,.10), rgba(255,255,255,.035)); border-color: rgba(28,201,216,.22); }
.audience-card ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.audience-card li { position: relative; padding-left: 18px; color: var(--soft); line-height: 1.55; }
.audience-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.deliverable-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--line-soft); }
.deliverable-strip div { min-height: 150px; padding: 20px; background: rgba(12,14,16,.92); }
.deliverable-strip span { color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.deliverable-strip b { display: block; margin: 24px 0 8px; color: white; font-size: 17px; line-height: 1.2; }
.deliverable-strip p { color: var(--muted); line-height: 1.55; font-size: 14px; }

.method, .platform { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.018); }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.step { padding: 22px; min-height: 258px; }
.step b { display: block; margin-bottom: 36px; color: var(--green); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.platform-panel { padding: 26px; min-height: 236px; }
.platform-panel.large, .platform-panel.wide { grid-column: span 2; }
.panel-label { margin-bottom: 16px; color: var(--green) !important; }
.global-readiness { border-top: 1px solid var(--line-soft); }
.global-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.market-card {
  min-height: 360px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.market-card span { color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; }
.market-card h3 { margin-top: 42px; font-size: 30px; line-height: 1.12; }
.market-card p { color: var(--muted); line-height: 1.75; }
.cn-card { background: linear-gradient(135deg, rgba(240,184,74,.12), rgba(255,255,255,.035)); }
.en-card { background: linear-gradient(135deg, rgba(28,201,216,.13), rgba(124,108,255,.11), rgba(255,255,255,.035)); }
.market-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.market-tags b { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--soft); font-size: 12px; font-weight: 650; background: rgba(0,0,0,.18); }

.usecase-list { display: grid; gap: 10px; }
.usecase-list div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.usecase-list b { color: var(--ink); }
.usecase-list span { color: var(--muted); line-height: 1.65; }
.investor { display: grid; grid-template-columns: 1fr .92fr; gap: 34px; align-items: start; }
.investor-copy p:not(.eyebrow) { margin-top: 22px; color: var(--muted); line-height: 1.8; font-size: 18px; }
.investor-points { display: grid; gap: 12px; }
.investor-points div { padding: 22px; }
.investor-points b { display: block; margin-bottom: 10px; color: var(--gold); font-size: 22px; }
.investor-points span { color: var(--soft); line-height: 1.65; }
.cta { padding: 105px 20px; text-align: center; border-top: 1px solid var(--line-soft); }
.cta h2 { max-width: 890px; margin: 14px auto 20px; }
.cta > p { max-width: 720px; margin: 0 auto; color: var(--muted); line-height: 1.8; }
.diagnosis-panel {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: 14px;
  margin-top: 34px;
  text-align: left;
}
.diagnosis-copy, .diagnosis-form {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.diagnosis-copy { padding: 30px; background: linear-gradient(135deg, rgba(28,201,216,.13), rgba(255,255,255,.035)); }
.diagnosis-copy span { color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; }
.diagnosis-copy h3 { margin-top: 40px; font-size: 30px; line-height: 1.12; }
.diagnosis-copy p { color: var(--soft); line-height: 1.75; }
.diagnosis-form { display: grid; gap: 14px; padding: 24px; }
.diagnosis-form label { display: grid; gap: 8px; color: var(--soft); font-size: 14px; line-height: 1.4; }
.diagnosis-form input, .diagnosis-form textarea {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0,0,0,.22);
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
  outline: none;
}
.diagnosis-form textarea { resize: vertical; min-height: 112px; }
.diagnosis-form input:focus, .diagnosis-form textarea:focus { border-color: rgba(28,201,216,.55); box-shadow: 0 0 0 3px rgba(28,201,216,.10); }
.diagnosis-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form-status { min-height: 24px; color: var(--green) !important; font-size: 14px; line-height: 1.6 !important; }
.pitch-actions { margin-top: 18px; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px 0 48px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.footer p { margin: 8px 0 0; }

.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

@media (max-width: 1040px) {
  h1 { font-size: 64px; }
  h2 { font-size: 42px; }
  .nav nav { display: none; }
  .hero-grid, .section-heading, .section-heading.split, .case-grid, .roi-grid, .global-grid, .investor, .diagnosis-panel { grid-template-columns: 1fr; }
  .stats, .grid.three, .grid.four, .timeline, .platform-grid, .roi-output, .audience-grid { grid-template-columns: 1fr 1fr; }
  .platform-panel.large, .platform-panel.wide { grid-column: span 1; }
  .deliverable-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .section-shell, .nav { width: min(100% - 24px, 1180px); }
  .brand-name { display: none; }
  .hero { min-height: auto; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; padding: 62px 0 74px; }
  h1 { font-size: 43px; line-height: 1.04; }
  h2 { font-size: 32px; line-height: 1.12; }
  .lead { font-size: 18px; }
  .lead-en { font-size: 15px; }
  .command-center { display: none; }
  .stats, .grid.three, .grid.four, .timeline, .platform-grid, .roi-output, .audience-grid, .deliverable-strip { grid-template-columns: 1fr; }
  .section-block { padding: 70px 0; }
  .section-heading { gap: 16px; }
  .usecase-list div { grid-template-columns: 1fr; gap: 8px; }
  .diagnosis-actions .button { width: 100%; }
  .footer { flex-direction: column; }
}