html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--fg);
  background: var(--bg-0);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Default body font for Chinese text uses CN family */
:lang(zh-CN), :lang(zh) body,
h1, h2, h3, h4, h5, h6, p, li, a, button, label, input {
  font-family: var(--font-cn);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
}

.lede { font-size: var(--t-h3); line-height: 1.4; color: var(--fg-2); font-weight: 400; }
.accent {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }

.container {
  width: min(100% - calc(var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container-wide {
  width: min(100% - calc(var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
}

/* Section base */
section {
  position: relative;
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}
section + section { border-top: 1px solid transparent; }

/* Hero already has horizontal padding via hero__inner */
.hero { padding-inline: 0; }

/* Section heading pattern */
.section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.section-head__no { color: var(--accent-2); font-weight: 600; }
.section-head__line { flex: 0 1 240px; height: 1px; background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); }
.section-head__tag { color: var(--fg-2); }
.section-head--invert .section-head__line { background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); }

.section-title {
  font-size: var(--t-display-2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 1.5rem;
  word-break: break-word;
}
.section-title span { display: block; }
.section-lede {
  font-size: var(--t-h3);
  color: var(--fg-2);
  line-height: 1.7;
  max-width: 100%;
  font-weight: 400;
  word-break: break-word;
}

@media (max-width: 720px) {
  .section-title { line-height: 1.15; margin-bottom: 1rem; }
  .section-lede { font-size: 0.95rem; line-height: 1.75; }
  .section-head { margin-bottom: 2rem; }
  .section-head__no { font-size: 0.6rem; letter-spacing: 0.12em; }
  .section-head__line { flex: 0 1 120px; }
  .section-head__tag { font-size: 0.7rem; }
}

/* Reveal animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: 0ms;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="80"] { transition-delay: 80ms; }
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="160"] { transition-delay: 160ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="240"] { transition-delay: 240ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="700"] { transition-delay: 700ms; }

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__bars { display: flex; align-items: end; gap: 6px; height: 80px; }
.loader__bars span {
  display: block;
  width: 6px;
  background: var(--accent-grad);
  border-radius: 3px;
  animation: loader-bar 1.1s var(--ease-in-out) infinite;
}
.loader__bars span:nth-child(1) { animation-delay: 0ms; }
.loader__bars span:nth-child(2) { animation-delay: 80ms; }
.loader__bars span:nth-child(3) { animation-delay: 160ms; }
.loader__bars span:nth-child(4) { animation-delay: 240ms; }
.loader__bars span:nth-child(5) { animation-delay: 320ms; }
.loader__bars span:nth-child(6) { animation-delay: 400ms; }
.loader__bars span:nth-child(7) { animation-delay: 480ms; }
.loader__bars span:nth-child(8) { animation-delay: 560ms; }
.loader__bars span:nth-child(9) { animation-delay: 640ms; }
.loader__bars span:nth-child(10) { animation-delay: 720ms; }
.loader__bars span:nth-child(11) { animation-delay: 800ms; }
.loader__bars span:nth-child(12) { animation-delay: 880ms; }
.loader__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--fg-3);
}
@keyframes loader-bar {
  0%, 100% { height: 12px; opacity: 0.6; }
  50% { height: 64px; opacity: 1; }
}

/* Ambient layers */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ambient__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.ambient__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  animation: glow-drift 18s ease-in-out infinite;
}
.ambient__glow--a {
  top: -20vw; left: -10vw;
  background: radial-gradient(circle, rgba(255,107,31,0.45), transparent 60%);
}
.ambient__glow--b {
  bottom: -20vw; right: -10vw;
  background: radial-gradient(circle, rgba(255,184,91,0.35), transparent 60%);
  animation-delay: -9s;
  animation-duration: 22s;
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.1); }
}
.ambient__noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Cursor follower */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--accent-2);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-overlay);
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out), border-color 0.2s, background 0.2s, opacity 0.2s;
  opacity: 0;
  mix-blend-mode: difference;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover {
  width: 60px; height: 60px;
  background: rgba(255,107,31,0.15);
  border-color: var(--accent-3);
}
@media (hover: none) { .cursor { display: none; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}