/* MYW Radar — anonymous 4D imaging radar chip concept site */
/* Design DNA v2: "editorial technical field-manual". Warm paper-grey ground, graphite ink,
   matte ochre signal, deep teal-grey structure. Image-forward: real concept renders carry the
   visual, framed in thin hairline rules with generous whitespace. IBM Plex Sans/Mono.
   Anti-slop: NO neon/glow, NO rotating radar sweep, NO ping animation, NO purple gradients.
   The prior navy-ink "oscilloscope" theme (glow + sweep) was retired per Gerry (弃黑科技风).
   Hard gate: distinct from gpuvera (warm-white mini-PC) AND inra (near-black terminal) —
   MYW = warm paper-grey + matte ochre + radar/point-cloud motif, science-communication tone. */

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

:root {
  /* Warm paper-grey ground — a lit workbench, not a dark scope */
  --bg:        #F4F5F3;   /* warm off-white paper */
  --bg-raised: #FBFBFA;   /* raised card, a touch brighter than ground */
  --bg-sunk:   #ECEDEA;   /* recessed well / image mat */
  --ink:       #1A1D1F;   /* graphite — primary text */
  --ink-2:     #4A5157;   /* secondary text */
  --ink-3:     #7C858B;   /* muted / captions */
  --line:      #DDDED9;   /* hairline rule */
  --line-2:    #C7C9C2;   /* stronger hairline */
  /* Signal: matte ochre — the single warm accent (no fluorescence) */
  --ochre:     #B4531F;
  --ochre-hi:  #C9642C;
  --ochre-wash:rgba(180, 83, 31, 0.08);
  /* Structure: deep teal-grey — cool counterpoint, used sparingly */
  --teal:      #2C4A52;
  --teal-2:    #3C6169;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono {
  font-family: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

a { color: var(--ochre); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ochre-hi); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---- NAV ---- */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  background: rgba(244, 245, 243, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 17px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px;
}
.logo .mark { width: 22px; height: 22px; flex: none; }
.logo .name b { color: var(--ink); font-weight: 700; }
.logo .name span { color: var(--ochre); font-weight: 500; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--ink-2); font-size: 14px; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: #fff; background: var(--ink);
  padding: 8px 15px; border-radius: 7px; font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.nav-cta:hover { background: var(--ochre); color: #fff; transform: translateY(-1px); }

/* ---- IMAGE SLOT (drop-in for IM-2 concept renders) ---- */
/* Usage: <figure class="imgslot"><img src="assets/img/<name>.png" alt="..."
     onerror="this.closest('.imgslot').classList.add('pending')"><figcaption>[概念渲染]</figcaption></figure>
   Before the render lands the slot shows a labeled, on-theme placeholder (no broken-image icon). */
.imgslot {
  position: relative; background: var(--bg-sunk);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.imgslot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgslot figcaption {
  position: absolute; left: 12px; bottom: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-3); background: rgba(251,251,250,0.82);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* placeholder state — clean labeled mat with a faint static range-ring motif */
.imgslot.pending {
  background:
    repeating-radial-gradient(circle at 78% 28%,
      transparent 0 26px, rgba(44,74,82,0.05) 26px 27px);
}
.imgslot.pending img { display: none; }
.imgslot.pending::before {
  content: attr(data-ph);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  color: var(--ink-3); letter-spacing: 0.04em; padding: 24px; line-height: 1.7;
}
.imgslot.r-16x9 { aspect-ratio: 16 / 9; }
.imgslot.r-21x9 { aspect-ratio: 21 / 9; }
.imgslot.r-1x1  { aspect-ratio: 1 / 1; }
.imgslot.r-4x3  { aspect-ratio: 4 / 3; }

/* ---- HERO ---- */
/* C1 concept texture (faint range rings / array dots) sits under the hero at low opacity —
   ground stays var(--bg) so text contrast is unaffected */
.hero {
  padding: 148px 0 78px; position: relative;
  background: url('assets/img/bg-c1.jpg') center top / cover no-repeat;
}
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); border: 1px solid var(--line-2);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 22px; background: var(--bg-raised);
}
.hero-eyebrow .blip { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); flex: none; }
.hero-title {
  font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600;
  color: var(--ink); margin-bottom: 20px;
}
.hero-title em { font-style: normal; color: var(--ochre); }
.hero-sub { color: var(--ink-2); font-size: 18px; max-width: 520px; margin-bottom: 30px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--ochre); padding: 12px 22px; border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
}
.btn-primary:hover { background: var(--ochre-hi); color: #fff; transform: translateY(-1px); }
.btn-ghost {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px;
  color: var(--ink); border: 1px solid var(--line-2); padding: 12px 22px; border-radius: 8px;
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--ochre); color: var(--ochre); }
/* hero visual is now an image slot (A1 concept effect render) */
.hero-visual .imgslot { max-width: 460px; margin-left: auto; }

/* ---- BAND (stat / spec strip) ---- */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.band-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.band-item { padding: 26px 24px; border-left: 1px solid var(--line); }
.band-item:first-child { border-left: none; }
.band-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.band-num em { font-style: normal; color: var(--ochre); }
.band-label { color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.band-note { color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }

/* ---- SECTIONS ---- */
.sec { padding: 76px 0; border-top: 1px solid var(--line); }
.sec-kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px;
}
.sec h2 { font-size: 32px; letter-spacing: -0.025em; margin-bottom: 16px; font-weight: 600; color: var(--ink); }
.sec .lede { color: var(--ink-2); font-size: 17px; max-width: 660px; margin-bottom: 10px; }

/* split row: text + image slot */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 34px;
}
.split.rev { grid-template-columns: 1fr 1fr; }
.split .split-media .imgslot { width: 100%; }

/* dimension grid (4D pillars) */
.dim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.dim {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; position: relative; overflow: hidden;
}
.dim::after {
  content: attr(data-axis); position: absolute; top: 16px; right: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em;
}
.dim .dim-ord {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  color: var(--ochre); margin-bottom: 12px; letter-spacing: 0.04em;
}
.dim h4 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.dim p { color: var(--ink-2); font-size: 14.5px; }

/* application chips */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.app {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  transition: border-color .18s ease, transform .18s ease;
}
.app:hover { border-color: var(--line-2); transform: translateY(-2px); }
.app .app-ic {
  width: 34px; height: 34px; border-radius: 8px; background: var(--ochre-wash);
  display: grid; place-items: center; margin-bottom: 14px;
}
.app .app-ic svg { width: 18px; height: 18px; stroke: var(--ochre); }
.app h4 { font-size: 15.5px; margin-bottom: 6px; color: var(--ink); }
.app p { color: var(--ink-2); font-size: 13.5px; }

/* concept product block — now carries the B1/B2 concept renders */
.concept {
  margin-top: 34px; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 14px; padding: 30px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
}
.concept .c-tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  color: var(--ochre); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 3px 9px; display: inline-block; margin-bottom: 12px; letter-spacing: 0.04em;
}
.concept h4 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.concept p { color: var(--ink-2); font-size: 14px; }
.concept .c-note { color: var(--ink-3); font-size: 12px; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; }

/* prose (technology / about) */
.prose { max-width: 720px; }
.prose p { color: var(--ink-2); font-size: 16px; margin-bottom: 18px; }
.prose h3 {
  font-size: 21px; color: var(--ink); margin: 40px 0 12px; letter-spacing: -0.02em; font-weight: 600;
}
.prose ul { margin: 0 0 18px 0; padding-left: 0; list-style: none; }
.prose li {
  color: var(--ink-2); font-size: 15.5px; margin-bottom: 12px; padding-left: 26px; position: relative;
}
.prose li::before {
  content: "▸"; position: absolute; left: 4px; top: 0; color: var(--ochre); font-size: 13px;
}
.prose .concept-mark {
  color: var(--ochre); font-family: 'IBM Plex Mono', monospace; font-size: 0.86em;
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.callout {
  background: var(--ochre-wash); border-left: 3px solid var(--ochre); border-radius: 0 8px 8px 0;
  padding: 18px 22px; margin: 26px 0; color: var(--ink-2); font-size: 14.5px;
}
.callout strong { color: var(--ink); }

/* ---- FOOTER ---- */
footer { border-top: 1px solid var(--line); padding: 40px 0; margin-top: 20px; }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-legal { color: var(--ink-3); font-size: 13px; }
.footer-legal a { color: var(--ink-2); }
.footer-legal a:hover { color: var(--ochre); }
.footer-disclaimer {
  color: var(--ink-3); font-size: 12px; margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace; max-width: 640px; line-height: 1.7;
}

/* ---- MOTION (route A: matte micro-motion only) ----
   Constraints (locked in review): no glow/scan/ping, hero image untouched (LCP),
   concept-mark captions stay static, zero new assets. All motion is gated twice:
   this media query in CSS, and matchMedia in motion.js before any reveal state
   is applied — content is fully visible with reduced motion or without JS. */
@media (prefers-reduced-motion: no-preference) {
  /* page-load stagger on hero copy: fade + 6px rise */
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-copy > * { animation: rise-in .55s ease-out backwards; }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .15s; }
  .hero-copy > *:nth-child(3) { animation-delay: .25s; }
  .hero-copy > *:nth-child(4) { animation-delay: .35s; }

  /* eyebrow dot: slow opacity breathing — no expanding ring, no glow */
  @keyframes blip-breathe { 50% { opacity: .4; } }
  .hero-eyebrow .blip { animation: blip-breathe 3.2s ease-in-out infinite; }

  /* scroll reveal: applied only when motion.js adds .motion to <html> */
  html.motion .reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  html.motion .reveal.in { opacity: 1; transform: none; }
  /* gentle stagger inside grids (capped) */
  html.motion .reveal.in:nth-child(2) { transition-delay: .06s; }
  html.motion .reveal.in:nth-child(3) { transition-delay: .12s; }
  html.motion .reveal.in:nth-child(4) { transition-delay: .18s; }
  html.motion .reveal.in:nth-child(5) { transition-delay: .24s; }
  html.motion .reveal.in:nth-child(6) { transition-delay: .30s; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual .imgslot { margin: 0 auto; }
  .band-inner { grid-template-columns: repeat(2, 1fr); }
  .band-item:nth-child(3) { border-left: none; }
  .dim-grid, .app-grid, .split, .concept { grid-template-columns: 1fr; }
  .split .split-media { order: -1; }
}
@media (max-width: 560px) {
  .hero { padding: 128px 0 60px; }
  .hero-title { font-size: 38px; }
  .nav-links { display: none; }
  .band-inner { grid-template-columns: 1fr; }
  .band-item { border-left: none; border-top: 1px solid var(--line); }
  .band-item:first-child { border-top: none; }
  .sec h2 { font-size: 26px; }
}