/* Local HarmonyOS Sans keeps Chinese text crisp without a network font dependency. */
@font-face { font-family: "HarmonyOS Sans Local"; src: url("fonts/HarmonyOS_Sans_Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HarmonyOS Sans Local"; src: url("fonts/HarmonyOS_Sans_Medium.ttf") format("truetype"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "HarmonyOS Sans Local"; src: url("fonts/HarmonyOS_Sans_Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }

/* Linear-inspired polish: quieter chrome, clearer rhythm, stronger product focus. */
* { letter-spacing: 0 !important; }

body { background: #08090a; overflow-x: clip; }
body, button, input, textarea { font-family: "HarmonyOS Sans Local", Inter, ui-sans-serif, system-ui, sans-serif; }
.mono, .eyebrow, .stage-topline, .stage-caption, .console-logo, .console-kicker, .panel-kicker, .panel-filter, .more, .chart-y, .chart-x, .workflow-head, .workflow-title span, .footer-meta, .contact-form label, .form-feedback { font-family: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }

.topbar {
  position: sticky;
  top: 0;
  height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,9,10,.86);
  backdrop-filter: blur(18px);
  transition: border-color .25s ease, background .25s ease;
}

.topbar.scrolled { border-bottom-color: rgba(255,255,255,.14); background: rgba(8,9,10,.96); }

.brand-mark { transform: rotate(45deg); }
.brand-cn { font-size: 15px; }
.brand-en { font-size: 11px; }
.main-nav { gap: 26px; }
.main-nav a { font-size: 13px; padding: 10px 2px; }
.lang-switch { font-size: 12px; padding: 10px 5px; }
.nav-cta { padding: 9px 17px; font-size: 13px; }

.hero { padding-top: 116px; }
.hero-copy { max-width: 760px; }
.eyebrow { margin-bottom: 34px; }
h1 { font-size: clamp(58px, 7vw, 86px); line-height: .94; margin-bottom: 34px; }
.hero-lede { max-width: 500px; font-size: 16px; }
.hero-stage { margin-top: 112px; position: relative; }
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 18% 0 -18%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(77,87,91,.28), transparent 63%);
  pointer-events: none;
}
.console-shell { min-height: 548px; border-color: rgba(255,255,255,.14); box-shadow: 0 34px 100px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.025); }
.console-main { background: #101314; }
.console-header { padding-top: 28px; padding-bottom: 24px; }
.metric { background: rgba(255,255,255,.025); }
.activity-panel, .agent-panel { background: rgba(255,255,255,.022); }
.stage-caption { padding-top: 13px; }

.signal-strip { margin-top: 112px; padding-top: 30px; padding-bottom: 30px; }
.story { padding-top: 168px; }
.capabilities, .manifesto, .contact { padding-top: 176px; }
.workflow-visual { min-height: 438px; border-color: rgba(255,255,255,.14); box-shadow: 0 26px 80px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02); }
.capability { padding-top: 29px; padding-bottom: 29px; }
.capability h3 { font-size: 19px; }
.manifesto h2 { max-width: 900px; }
.contact { padding-bottom: 180px; }

@media (max-width: 900px) {
  .hero { padding-top: 90px; }
  .hero-stage { margin-top: 86px; }
  .story { padding-top: 128px; }
  .capabilities, .manifesto, .contact { padding-top: 138px; }
}

@media (max-width: 640px) {
  .topbar { height: 64px; }
  .hero { padding-top: 68px; }
  h1 { font-size: clamp(45px, 13vw, 58px); line-height: .96; }
  .hero-stage { margin-top: 72px; }
  .hero-stage::before { inset: 20% 0 -12%; }
  .signal-strip { margin-top: 78px; }
  .story { padding-top: 106px; }
  .capabilities, .manifesto, .contact { padding-top: 112px; }
  .contact { padding-bottom: 112px; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .console-shell { animation: console-rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .chart-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: chart-draw 1.8s .35s ease-out forwards; }
  .live-dot, .pill i { animation: pulse 2.3s ease-in-out infinite; }
}

@keyframes console-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(228,242,34,.08); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button, .nav-cta, .cap-arrow { transition: none; }
}