/* ============================================================================
   Quanzhou Weiwo Lianchuang Technology Co., Ltd.

   A plain company site. The audience is an Amazon reviewer checking that this
   is a real registered business, so everything here is arranged to answer
   that in the first screen and to stay out of the way afterwards.

   Notes this file is held to:
   - System font stack. No webfont request on the critical path.
   - One accent colour, used for links and the primary button only.
   - No decorative gradients, no shadows beyond a hairline, no illustrations.
   - The layout degrades to a single column below 800px.
   - Print block at the end. This page may be printed by whoever verifies it.
   ========================================================================= */

/* ─── tokens ──────────────────────────────────────────────────────── */

:root {
  --bg:        #ffffff;
  --tint:      #f7f8fa;
  --ink:       #16181d;
  --ink-2:     #4a4f58;
  --ink-3:     #767c87;
  --line:      #e4e6ea;
  --line-2:    #d3d6dc;
  --accent:    #1d3f8f;
  --accent-dk: #16306d;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --radius: 6px;
}

/* ─── base ────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 3.5vw, 4rem);
}

.mono {
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── header ──────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 0.9375rem; font-weight: 600; }
.brand-text em {
  font-size: 0.75rem;
  font-style: normal;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  font-size: 0.9375rem;
}
.nav a {
  color: var(--ink-2);
  white-space: nowrap;
}
.nav a:hover {
  color: var(--accent);
  text-decoration: none;
}
.nav-cta {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
}
.nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── hero ────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(4rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
  border-bottom: 1px solid var(--line);
}

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}

/* Grid children must be allowed to shrink or long words blow the track out. */
.hero-copy,
.split-col { min-width: 0; }

.eyebrow {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(1.375rem, 3.4vw, 3.5rem);
  letter-spacing: -0.028em;
  max-width: 30ch;
  overflow-wrap: break-word;
  word-break: normal;
}

.hero-cn {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.hero-lede {
  margin-top: 1.75rem;
  max-width: 62ch;
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.btn:hover {
  border-color: var(--ink-3);
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #fff;
}

/* ─── hero side card ─────────────────────────────────────────────── */

.entity-card {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.entity-title {
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.entity-list { margin: 0; }
.entity-list > div + div { margin-top: 1.05rem; }

.entity-list dt {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.entity-list dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}

.entity-more {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.entity-more::after {
  content: " \2192";
}

/* ─── sections ────────────────────────────────────────────────────── */

.sec {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
.sec + .sec { border-top: 1px solid var(--line); }

.sec-tint { background: var(--tint); }

.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.sec-head h2 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
}

.sec-sub {
  margin-top: 0.9rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

/* ─── facts table ─────────────────────────────────────────────────── */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}

.fact {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}

.fact dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.6;
}

.fact dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
}

.verify-note {
  margin-top: 2rem;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--accent);
  background: var(--tint);
  font-size: 0.9375rem;
  color: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ─── cards ───────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.card {
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.65rem;
}
.card p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ─── split lists ─────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.split-title {
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ticks li,
.crosses li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.6rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.ticks li::before,
.crosses li::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-weight: 700;
}

.ticks li::before {
  content: "\2713";
  color: var(--accent);
}

.crosses li::before {
  content: "\00D7";
  color: var(--ink-3);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ─── controls ────────────────────────────────────────────────────── */

.controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.control h4 {
  margin-bottom: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.control p {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ─── contact ─────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.contact-item h3 {
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-item p {
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.7;
}
.contact-cn {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ─── footer ──────────────────────────────────────────────────────── */

.site-foot {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 2rem;
  background: var(--ink);
  color: #c9ccd3;
  font-size: 0.9375rem;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.foot-brand { display: flex; flex-direction: column; gap: 0.3rem; }
.foot-brand strong { color: #fff; font-size: 1rem; font-weight: 600; }
.foot-brand span { font-size: 0.875rem; }
.foot-code {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: #8f96a3;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.foot-nav a {
  color: #c9ccd3;
  font-size: 0.9375rem;
}
.foot-nav a:hover { color: #fff; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: #8f96a3;
}

/* ─── responsive ──────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .facts { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-item { max-width: 40rem; }
}

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; }
  .entity-card { max-width: 34rem; }
}

@media (max-width: 800px) {
  /* Two rows below 800px. The header stops sticking so it cannot eat the
     viewport, and every section stays reachable from the nav instead of
     being hidden behind a menu this page does not need. */
  .site-head { position: static; }

  .head-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 0;
    padding-block: 0.9rem;
  }

  .nav {
    width: 100%;
    gap: 1.15rem;
    font-size: 0.875rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .fact {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .split { gap: 2rem; }

  .legal-toc { padding: 1.1rem 1.25rem; }
  .legal-toc ol { columns: 1; column-gap: 0; }

  .legal-sec h2 { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 620px) {
  .cards,
  .controls { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand-text em { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .foot-in { flex-direction: column; gap: 1.5rem; }
}

/* ─── legal / privacy page ─────────────────────────────────────────── */

/* Legal pages are read, not scanned, so the measure stays deliberately
   narrow. The block is centred rather than pinned left: on a wide screen
   there is white space on BOTH sides, which reads as a choice, not a bug. */
.legal-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.5rem;
  max-width: 1180px;
  margin-inline: auto;
}

@media (min-width: 1080px) {
  .legal-in {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  /* Contents on the left, body on the right. Placement is explicit because
     the body comes first in the markup, which is the order a reader wants
     once the page collapses to a single column. */
  .legal { grid-column: 2; grid-row: 1; }
  .legal-side {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 5.5rem;
  }
}

.legal-head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-2);
}

.legal-head h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
}

.legal-meta {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.legal-meta-cn {
  letter-spacing: 0.06em;
}

.legal-side-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.legal-toc {
  padding: 1.25rem 1.4rem;
  background: var(--tint);
  border-radius: var(--radius);
}

.legal-toc-title {
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Single column by default, which is how it sits in the sidebar track. */
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: 0;
  font-size: 0.875rem;
}

/* Below the two column breakpoint the contents block moves under the body and
   has the full width to itself, so it spreads out again. Bounded on both sides
   so it cannot fight the 800px block below. */
@media (min-width: 801px) and (max-width: 1080px) {
  .legal-toc ol {
    columns: 2;
    column-gap: 2.5rem;
  }
}

.legal-toc li {
  padding: 0.28rem 0;
  break-inside: avoid;
}

.legal-toc a {
  color: var(--ink-2);
}
.legal-toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.legal-sec {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.legal-sec h2 {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

.legal-n {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.legal-body {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.legal-body > * + * { margin-top: 0.85rem; }

.legal-body strong {
  color: var(--ink);
  font-weight: 600;
}

.bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  position: relative;
  padding-left: 1.35rem;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
}

.legal-cn {
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ─── reveal ──────────────────────────────────────────────────────────
   The hidden state is added by motion.js, never by this stylesheet. If the
   script does not run, nothing is armed and nothing is hidden.
   ──────────────────────────────────────────────────────────────────── */

.reveal-armed {
  opacity: 0;
  transform: translateY(10px);
}

.reveal-armed.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ─── reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── print ───────────────────────────────────────────────────────── */

@media print {
  .site-head,
  .skip,
  .hero-actions,
  .foot-nav { display: none; }

  /* Nothing sticks to a sheet of paper. */
  .legal-side { position: static; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-foot {
    background: #fff;
    color: #000;
    border-top: 1px solid #ccc;
  }
  .foot-brand strong,
  .foot-nav a { color: #000; }

  .sec,
  .hero { padding-block: 1.5rem; }

  .sec-tint { background: #fff; }

  .card,
  .entity-card,
  .verify-note { border: 1px solid #ccc; }

  .fact,
  .split-title,
  .contact-item h3 { break-inside: avoid; }

  a { color: #000; text-decoration: underline; }
}