/* =============================================================
   小王的实验  ·  finesse-ui build
   Register: brand · Soul: cinematic + luminous · Cyan lock
   All fonts self-hosted (see /fonts). No external network.
   ============================================================= */

/* ---- Local fonts (drop the files into /fonts, run download-fonts.ps1) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:        #05070E;
  --bg-2:      #070A12;
  --surface:   #0C1018;
  --ink:       #E9EEF7;
  --muted:     #9AA3B5;
  --iron:      #7C8599;
  --accent:    #38E1FF;
  --accent-dim:#0A5D73;
  --border:    rgba(255, 255, 255, .09);
  --border-2:  rgba(255, 255, 255, .05);
  --glow:      rgba(56, 225, 255, .18);
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 52px);
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- Ambient field (pure CSS, autonomous, no JS) ---- */
#field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 48% at 22% 18%, rgba(56, 225, 255, .16) 0%, transparent 60%),
    radial-gradient(52% 44% at 82% 12%, rgba(56, 225, 255, .10) 0%, transparent 58%),
    radial-gradient(70% 60% at 68% 88%, rgba(10, 93, 115, .28) 0%, transparent 62%),
    var(--bg);
}
#field .aurora {
  position: absolute; inset: -25%; pointer-events: none;
  background:
    radial-gradient(38% 30% at 30% 34%, rgba(56, 225, 255, .22) 0%, transparent 62%),
    radial-gradient(30% 26% at 72% 60%, rgba(56, 225, 255, .14) 0%, transparent 64%),
    radial-gradient(42% 34% at 54% 82%, rgba(10, 93, 115, .30) 0%, transparent 66%);
  filter: blur(14px);
  animation: drift 30s var(--ease) infinite alternate;
}
#field .grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--border-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-2) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 42%, #000 0%, transparent 78%);
          mask-image: radial-gradient(80% 70% at 50% 42%, #000 0%, transparent 78%);
  animation: gridpan 60s linear infinite;
}
#field .stars, #field .stars::after {
  position: absolute; inset: 0; pointer-events: none;
  background-repeat: repeat; background-color: transparent;
}
#field .stars {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(233, 238, 247, .9), transparent),
    radial-gradient(1.2px 1.2px at 38% 68%, rgba(233, 238, 247, .7), transparent),
    radial-gradient(1.6px 1.6px at 64% 14%, rgba(56, 225, 255, .9), transparent),
    radial-gradient(1.1px 1.1px at 82% 46%, rgba(233, 238, 247, .6), transparent),
    radial-gradient(1.3px 1.3px at 26% 88%, rgba(233, 238, 247, .7), transparent),
    radial-gradient(1.5px 1.5px at 92% 78%, rgba(56, 225, 255, .8), transparent),
    radial-gradient(1.1px 1.1px at 50% 40%, rgba(233, 238, 247, .5), transparent);
  background-size: 620px 620px;
  animation: twinkle 6.5s ease-in-out infinite;
}
#field .stars::after {
  content: ''; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 54%, rgba(233, 238, 247, .55), transparent),
    radial-gradient(1.2px 1.2px at 44% 8%, rgba(56, 225, 255, .6), transparent),
    radial-gradient(1px 1px at 70% 72%, rgba(233, 238, 247, .5), transparent),
    radial-gradient(1.3px 1.3px at 96% 30%, rgba(233, 238, 247, .55), transparent),
    radial-gradient(1px 1px at 18% 34%, rgba(56, 225, 255, .5), transparent);
  background-size: 430px 430px;
  animation: twinkle 9s ease-in-out infinite reverse;
}
@keyframes drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.14) rotate(6deg); }
}
@keyframes gridpan {
  from { background-position: 0 0; }
  to   { background-position: 74px 74px; }
}
@keyframes twinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.field-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, transparent 40%, rgba(5, 7, 14, .82) 100%),
    linear-gradient(180deg, rgba(5,7,14,.15) 0%, transparent 22%, transparent 68%, rgba(5,7,14,.7) 100%);
}
.content { position: relative; z-index: 5; }
.label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ---- 404 ---- */
.lost {
  position: relative; z-index: 5; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad);
}
.lost .code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(96px, 26vw, 300px); line-height: .84; letter-spacing: -.04em;
}
.lost .code .accent { color: var(--accent); text-shadow: 0 0 46px var(--glow); }
.lost p {
  margin-top: 22px; color: var(--muted); font-size: 16px;
  max-width: none; white-space: nowrap;
}
.lost .home {
  margin-top: 34px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 22px; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lost .home:hover, .lost .home:focus-visible { border-color: var(--accent); }
.lost .home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Nav (single line, non-interactive labels) ---- */
.nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--pad); z-index: 6;
}
.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  color: var(--ink);
}
.nav .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px 2px var(--glow);
}
.nav .meta {
  display: flex; gap: 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
@media (max-width: 640px) { .nav .meta { display: none; } }

/* ---- Hero ---- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad) 96px;
  max-width: var(--maxw); margin: 0 auto;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
}
.hero .eyebrow .rule { width: 46px; height: 1px; background: var(--accent); opacity: .6; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(58px, 12.5vw, 188px);
  line-height: .86; letter-spacing: -.04em; margin-bottom: 8px;
}
.hero h1 .glyph { display: block; color: var(--ink); }
.hero h1 .accent { color: var(--accent); text-shadow: 0 0 42px var(--glow); }
.hero .sub {
  max-width: 46ch; margin-top: 30px;
  font-size: clamp(15px, 1.7vw, 19px); color: var(--muted);
  font-weight: 300; line-height: 1.7;
}
.hero .en {
  margin-top: 18px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--iron);
}
.cue {
  position: absolute; left: var(--pad); bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--iron);
}
.cue .bar { position: relative; width: 42px; height: 1px; background: var(--border); overflow: hidden; }
.cue .bar::after {
  content: ''; position: absolute; inset: 0; width: 40%; background: var(--accent);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(280%); }
}

/* ---- Section frame ---- */
.section { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 11vw, 130px) var(--pad); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 54px;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 5vw, 62px); line-height: .96; letter-spacing: -.035em; max-width: 18ch;
}
.section-head .idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--iron); white-space: nowrap; }

/* ---- Bento grid (asymmetric) ---- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 30px; overflow: hidden; isolation: isolate;
}
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, var(--glow) 0%, transparent 46%); opacity: .5;
}
.card .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 12px;
}
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.65; max-width: 40ch; }
.card.feature p { max-width: none; }
.card .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7vw, 88px); line-height: .9; letter-spacing: -.04em; color: var(--ink);
}
.card .big .u { color: var(--accent); font-size: .42em; letter-spacing: 0; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-6 { grid-column: span 6; }
.row-2 { grid-row: span 2; }
.card.feature { display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.card .spectrum { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin-top: 24px; }
.card .spectrum span {
  flex: 1; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  opacity: .85; transform-origin: bottom; animation: eq 2.8s ease-in-out infinite;
}
@keyframes eq {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}
.orbit { position: relative; width: 100%; aspect-ratio: 1; max-width: 210px; margin: 10px auto 0; }
.orbit .ring { position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 50%; }
.orbit .ring:nth-child(2) { inset: 18%; border-color: var(--border-2); }
.orbit .ring:nth-child(3) { inset: 36%; }
.orbit .core {
  position: absolute; inset: 42%; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--accent-dim));
  box-shadow: 0 0 40px 6px var(--glow); animation: pulse 3.4s ease-in-out infinite;
}
.orbit .sat {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 2px var(--glow);
  animation: spin 9s linear infinite;
}
.orbit .sat.s2 { animation-duration: 15s; animation-direction: reverse; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.14); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0) translateX(74px) rotate(0); }
  to   { transform: rotate(360deg) translateX(74px) rotate(-360deg); }
}

/* ---- Manifesto band ---- */
.manifesto { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.manifesto p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 4.4vw, 56px); line-height: 1.18; letter-spacing: -.03em; max-width: 22ch;
}
.manifesto p .mut { color: var(--iron); }
.manifesto p .hi { color: var(--accent); }

/* ---- Marquee (single, decorative, autonomous) ---- */
.marquee {
  position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; padding: 26px 0; background: var(--bg-2);
}
.marquee .track { display: flex; gap: 48px; width: max-content; animation: slide 34s linear infinite; }
.marquee span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 3vw, 40px); letter-spacing: -.03em; color: var(--iron);
  display: inline-flex; align-items: center; gap: 48px;
}
.marquee span::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .7; }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Finale ---- */
.finale { text-align: center; padding: clamp(90px, 15vw, 180px) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.finale h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 13vw, 172px); line-height: .84; letter-spacing: -.04em;
}
.finale h2 .accent { color: var(--accent); text-shadow: 0 0 46px var(--glow); }
.finale .sub { margin-top: 26px; color: var(--muted); font-size: 16px; max-width: 40ch; margin-inline: auto; }

/* ---- Footer + Beian ---- */
.footer { position: relative; z-index: 5; border-top: 1px solid var(--border); background: var(--bg-2); }
.footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--pad) 40px; display: flex; flex-direction: column; gap: 28px; }
.footer .top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer .brand { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.footer .brand .accent { color: var(--accent); }
.footer .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--iron); }
.footer .hr { height: 1px; background: var(--border); }
  .beian { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 10px 22px; font-size: 13px; color: var(--muted); }
  .beian-divider { width: 1px; height: 14px; background: var(--border); }
.beian a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; transition: color .3s var(--ease); }
.beian a:hover, .beian a:focus-visible { color: var(--accent); }
.beian a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.beian img { width: 15px; height: 15px; display: block; }
.beian .copy { color: var(--iron); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .col-4, .col-3, .col-2 { grid-column: span 3; }
  .col-6 { grid-column: span 6; }
  .row-2 { grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .col-4, .col-3, .col-2, .col-6 { grid-column: span 1; }
  .section-head { margin-bottom: 36px; }
  .card { padding: 24px; }
}

/* ---- Motion off (freezes every animation to a static frame) ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #field .aurora, #field .grid, #field .stars { opacity: .6; }
}