/* ============================================================
   Vlow — base: reset, fixed overlays, type, panels, buttons,
   waveform (brand), nav, kick labels, ticker, footer, reveal.
   NEON FOUNDRY language (Mind ENGINE).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-cjk);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* cold radial light source behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1100px 760px at 50% -6%, rgba(47,107,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 86% 6%, rgba(61,240,255,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 46%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--spark); color: #fff; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   fixed signature overlays
   ============================================================ */
/* world-map backdrop — canvas drawn by worldmap.js (the Mind ENGINE landing base) */
.fx-map {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; pointer-events: none; opacity: 0.9;
}

/* scanlines */
.fx-scanlines {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  opacity: 0.5; animation: fx-scan 8s linear infinite;
}
@keyframes fx-scan { to { background-position: 0 600px; } }

/* vignette */
.fx-vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(3,3,10,0.7) 100%);
}

/* soft neon bloom near the top */
.page-bloom {
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: min(900px, 100vw); height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47,107,255,0.22), transparent 72%);
  filter: blur(40px); opacity: 0.7;
}

/* film grain */
.grain {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============================================================
   typography
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.section-lead { text-wrap: balance; }
.hero-sub, p { text-wrap: pretty; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
em { font-style: normal; }
strong { font-weight: 600; color: var(--fg); }
.mono { font-family: var(--font-mono); }
/* cyan emphasis word (Mind ENGINE signature) */
.em { color: var(--beam); text-shadow: var(--glow-c); font-style: normal; }
.grad-neon {
  background: var(--neon-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   panels (was "glass") + angular clip cuts
   ============================================================ */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(124,140,255,0.05), rgba(124,140,255,0.015));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-lift);
}
.glass-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.9em; border-radius: var(--r-pill);
  background: var(--glass-bg); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  font-size: var(--text-sm);
}
/* corner-notch utilities neutralized — all glass cards keep clean rounded corners */
.clip-cut  { clip-path: none; }
.clip-tag  { clip-path: none; }

/* ============================================================
   buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.82em 1.5em; border-radius: var(--r-sm); white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); letter-spacing: 0;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  color: #fff; background: linear-gradient(180deg, var(--spark), var(--accent-deep));
  border: 1px solid var(--spark);
  box-shadow: 0 8px 22px -8px var(--spark);
}
.btn-primary:hover { box-shadow: 0 0 22px -2px rgba(47,107,255,0.6), 0 12px 30px -8px var(--spark); transform: translateY(-2px); }
.btn-ghost {
  color: var(--fg); background: var(--glass-bg); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--glass-bg-2); border-color: var(--spark); color: #fff; transform: translateY(-2px); box-shadow: 0 0 18px -6px var(--spark); }
.btn-sm { padding: 0.55em 1.05em; font-size: var(--text-sm); }
.btn-lg { padding: 1.05em 2em; font-size: 1.15rem; }
.btn-block { width: 100%; }

/* ============================================================
   rainbow waveform — Vlow brand gesture (kept intact)
   ============================================================ */
.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave .wbar {
  width: 4px; height: 40%; border-radius: var(--r-pill);
  background: var(--wave-c, var(--spark));
  transform-origin: center;
  animation: waveBounce 1s ease-in-out infinite;
}
.wave .wbar:nth-child(7n+1){ --wave-c: var(--wave-1); animation-delay: -.9s; }
.wave .wbar:nth-child(7n+2){ --wave-c: var(--wave-2); animation-delay: -.2s; }
.wave .wbar:nth-child(7n+3){ --wave-c: var(--wave-3); animation-delay: -.6s; }
.wave .wbar:nth-child(7n+4){ --wave-c: var(--wave-4); animation-delay: -.35s; }
.wave .wbar:nth-child(7n+5){ --wave-c: var(--wave-5); animation-delay: -.75s; }
.wave .wbar:nth-child(7n+6){ --wave-c: var(--wave-6); animation-delay: -.1s; }
.wave .wbar:nth-child(7n+7){ --wave-c: var(--wave-7); animation-delay: -.5s; }
@keyframes waveBounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1.6); } }
.wave-lg { height: 52px; gap: 4px; }
.wave-lg .wbar { width: 5px; }
.wave-sm { height: 18px; gap: 2px; }
.wave-sm .wbar { width: 3px; }
.wave.is-flat .wbar { animation: none; transform: scaleY(0.18); transition: transform var(--dur); }

/* ---------- brand mark (mini rainbow V — kept) ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.55em; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; padding: 0 1px; }
.brand-mark .bar { width: 3px; border-radius: 2px; }
.brand-mark .b1 { height: 100%; background: var(--wave-1); }
.brand-mark .b2 { height: 76%;  background: var(--wave-2); }
.brand-mark .b3 { height: 52%;  background: var(--wave-3); }
.brand-mark .b4 { height: 30%;  background: var(--wave-4); }
.brand-mark .b5 { height: 52%;  background: var(--wave-5); }
.brand-mark .b6 { height: 76%;  background: var(--wave-6); }
.brand-mark .b7 { height: 100%; background: var(--wave-7); }
.brand-mark.sm { height: 18px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }

/* ============================================================
   nav
   ============================================================ */
.nav-wrap { position: sticky; top: 0; z-index: 100; padding: 14px var(--gutter) 0; }
.nav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.8rem 0.6rem 1.05rem; border-radius: var(--r-sm);
  background: rgba(10,10,24,0.62); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.nav-links { display: flex; gap: 1.3rem; font-size: var(--text-sm); color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.01em; }
.nav-links a { transition: color var(--dur-fast), text-shadow var(--dur-fast); }
.nav-links a:hover { color: var(--beam); text-shadow: var(--glow-c); }
.nav-actions { display: flex; align-items: center; gap: 0.7rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 1px; padding: 0.45em 0.7em;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.lang-toggle:hover { color: var(--fg); border-color: var(--spark); }
.lang-toggle .lang-sep { opacity: 0.4; margin: 0 1px; }
.lang-toggle .lang-zh, .lang-toggle .lang-en { transition: color var(--dur-fast), opacity var(--dur-fast); }
body[data-lang="zh"] .lang-toggle .lang-zh { color: var(--beam); font-weight: 700; text-shadow: var(--glow-c); }
body[data-lang="en"] .lang-toggle .lang-en { color: var(--beam); font-weight: 700; text-shadow: var(--glow-c); }
body[data-lang="zh"] .lang-toggle .lang-en,
body[data-lang="en"] .lang-toggle .lang-zh { opacity: 0.5; }

/* ============================================================
   section scaffolding + mono kick labels
   ============================================================ */
main > section { padding: var(--space-section) var(--gutter); max-width: var(--maxw); margin: 0 auto; position: relative; scroll-margin-top: 92px; }
.section-head { max-width: var(--maxw-narrow); margin: 0 auto clamp(2rem, 5vw, 3.4rem); text-align: center; }
.section-head h2 { font-size: var(--text-h2); }
.kicker {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--spark); box-shadow: 0 0 10px var(--spark); animation: dotPulse 2.6s infinite;
}
.kicker .kno { color: var(--beam); }
.section-lead { margin-top: 1rem; font-size: var(--text-lead); color: var(--fg-muted); line-height: 1.7; }

@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,255,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(47,107,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,107,255,0); }
}

/* ============================================================
   marquee ticker (full-bleed band)
   ============================================================ */
.fx-ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-1); }
.fx-ticker .track { display: inline-flex; align-items: center; gap: 30px; padding: 12px 0; white-space: nowrap; animation: fx-marq 30s linear infinite; }
.fx-ticker:hover .track { animation-play-state: paused; }
.fx-ticker .it { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.fx-ticker .it.hot { color: var(--spark); text-shadow: var(--glow-m); }
.fx-ticker .it.cool { color: var(--beam); text-shadow: var(--glow-c); }
.fx-ticker .sep { color: var(--fg-dim); }
@keyframes fx-marq { to { transform: translateX(-50%); } }

/* ============================================================
   footer
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: clamp(3rem,6vw,4.5rem) var(--gutter) 2rem; margin-top: var(--space-section); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.footer-brand { max-width: 300px; }
.footer-brand .brand-mark { vertical-align: middle; }
.footer-brand .brand-name { vertical-align: middle; margin-left: 0.4em; }
.footer-tag { margin-top: 0.8rem; color: var(--fg-faint); font-size: var(--text-sm); font-family: var(--font-mono); letter-spacing: 0.02em; }
.footer-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); font-weight: 600; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.14em; }
.footer-col a { color: var(--fg-muted); font-size: var(--text-sm); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--beam); }
.footer-bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; color: var(--fg-dim); font-size: var(--text-xs); font-family: var(--font-mono); }

/* ============================================================
   scroll reveal (JS adds .in)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }