/* ============================================================
   PIXEL SOLUTIONS — English Website Styles
   8px grid · Stripe/Vercel/Linear inspired
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f7f9fc;
  --color-bg-dark: #07102f;
  --color-text: #0f1f3d;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-primary: #00a8e8;
  --color-primary-soft: #eef6ff;
  --color-accent: #7dd3fc;
  --color-warn: #f59e0b;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(15,31,61,0.04);
  --shadow-card-hover: 0 4px 14px rgba(15,31,61,0.08);
  --container-max: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px 18px; padding: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.text-center { text-align: center; }
.muted { color: var(--color-text-muted); }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--color-border); margin: 32px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: #008ec5; border-color: #008ec5; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-bg-soft); border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* ============================================================
   Site header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand img { height: 32px; width: auto; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.main-nav a:hover { background: var(--color-bg-soft); color: var(--color-primary); text-decoration: none; }
.main-nav a.active { color: var(--color-primary); background: var(--color-primary-soft); }
.main-nav .lang-toggle {
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  margin-left: 8px;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
@media (max-width: 880px) {
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .main-nav {
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    z-index: 1;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 12px var(--gutter);
    align-items: stretch;
    gap: 4px;
    display: none;
  }
  .site-header.open .main-nav { display: flex; }
  .site-header.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav a { height: 40px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 96px;
  background: linear-gradient(135deg, #07102f 0%, #0f1f3d 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,168,232,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(125,211,252,0.14), transparent 40%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; color: #fff; }
.hero .lead { font-size: 1.125rem; color: rgba(255,255,255,0.78); max-width: 760px; margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero-art { display: flex; justify-content: center; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
@media (max-width: 880px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Detail page hero (smaller) — inherits the dark theme above */
.hero.detail-hero { padding: 64px 0 56px; }
.hero .hero-content h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.hero .hero-content .badge { background: rgba(0,168,232,0.22); color: #7dd3fc; }

/* Page banner — same dark theme, slightly taller for readability */
.hero.page-banner {
  min-height: 240px;
  padding: 64px 0;
}
.hero.page-banner h1 { margin: 0 0 16px; }
.hero.page-banner .lead { margin-top: 8px; }

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip {
  padding: 32px 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-strip.tight { padding: 24px 0; }
.trust-strip-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   Sections
   ============================================================ */
section { padding: 80px 0; }
section.soft { background: var(--color-bg-soft); }
section.dark {
  background: linear-gradient(135deg, #07102f 0%, #0f1f3d 100%);
  color: #fff;
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: #fff; }
section.dark p { color: rgba(255,255,255,0.78); }
section.tight { padding: 48px 0; }

.section-head {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 720px;
}
.section-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 8px;
}
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--color-text-muted); font-size: 1.05rem; }

/* ============================================================
   Cards (shared)
   ============================================================ */
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.card-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid.cols-4, .card-grid.cols-3, .card-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Plain card (icon-grid items) */
.card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary);
}
.card .icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 10px;
  margin-bottom: 14px;
}
.card h3 { font-size: 1.0625rem; }
.card p { color: var(--color-text-muted); font-size: 0.875rem; margin: 0 0 8px; }
.card .link {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.85rem;
  margin-top: auto;
  padding-top: 8px;
}

/* Plain card with image (older product-grid style) */
.card-image {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.card-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.card-image .thumb {
  aspect-ratio: 4/3;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 600;
}
.card-image .thumb.alt-1 { background: linear-gradient(135deg, #c7e7ff, #e0f3ff); color: #1a3a6e; }
.card-image .thumb.alt-2 { background: linear-gradient(135deg, #d6f5e3, #ecfbf2); color: #1e6b3c; }
.card-image .thumb.alt-3 { background: linear-gradient(135deg, #fde6cc, #fff2e0); color: #8a4a1a; }
.card-image .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card-image .body .meta {
  font-size: 0.72rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.card-image .body h3 { font-size: 1.0625rem; }
.card-image .body p { color: var(--color-text-muted); font-size: 0.875rem; }
.card-image .body .link { color: var(--color-primary); font-size: 0.85rem; font-weight: 500; margin-top: auto; padding-top: 8px; }

/* ============================================================
   6 admin-selectable card styles (item styles)
   ============================================================ */

/* ===== Card base (Stripe/Vercel/Linear inspired) ===== */
.card-item {
  position: relative;
  display: block;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  color: #1f2937;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-sizing: border-box;
}
.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15,31,61,0.08);
  border-color: var(--color-primary);
}
.card-item.non-clickable { text-decoration: none; color: inherit; cursor: default; }
.card-item.non-clickable:hover { transform: none; box-shadow: none; border-color: inherit; }
.card-item h3 {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.card-item p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.card-item .meta {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  font-weight: 600;
}
.card-item .link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.85rem;
  margin-top: auto;
  padding-top: 12px;
}

/* 1. mixed — fixed 55/45 split. The media slot keeps the image's
   natural aspect ratio (set inline from imageRatio) so the photo
   displays in full without being clipped or overflowing the card.
   Card keeps its normal border + hover affordance; the media slot
   uses the site's light tone so dark screenshots sit on a neutral
   surface without a harsh black block. */
.card-style-mixed {
  display: grid;
  grid-template-columns: 55% 45%;
  /* Fixed height for the "1 per row" look; the image scales to fit. */
  height: 320px;
  align-items: stretch;
}
.card-style-mixed__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
  gap: 6px;
}
.card-style-mixed__body > * { width: 100%; }
.card-style-mixed__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-style-mixed__media img {
  /* Scale the image to fit the fixed slot, preserving ratio — no crop,
     no overflow, no forced background fill. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 540px) {
  .card-style-mixed { grid-template-columns: 1fr; height: auto; min-height: 220px; }
  .card-style-mixed__media { aspect-ratio: 16/9; }
  .card-style-mixed__media img { width: 100%; height: 100%; }
}

/* 2. text-only — typography only */
.card-style-text { padding: 22px; min-height: 180px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.card-style-text__body { display: flex; flex-direction: column; height: 100%; align-items: stretch; gap: 6px; }
.card-style-text__body > *, .card-style-text > * { width: 100%; }
@media (max-width: 540px) { .card-style-text { min-height: 150px; } }

/* 3. overlay — full-bleed image, title sits on gradient */
.card-style-overlay { position: relative; min-height: 280px; overflow: hidden; }
.card-style-overlay__media { position: absolute; inset: 0; }
.card-style-overlay__media img { width: 100%; height: 100%; object-fit: cover; }
.card-style-overlay__mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7,16,38,0.94) 100%);
}
.card-style-overlay__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  color: #fff;
  z-index: 2;
}
.card-style-overlay__content h3 { color: #fff; font-size: 1.0625rem; }
.card-style-overlay__content p { color: rgba(255,255,255,0.85); margin: 0; }
.card-style-overlay__content .meta { color: #7dd3fc; }
.card-style-overlay__content .link { color: #fff; padding-top: 10px; }
@media (max-width: 540px) { .card-style-overlay { min-height: 220px; } }

/* 4. horizontal — top image, middle text, bottom meta+CTA */
.card-style-h { display: flex; flex-direction: column; align-items: stretch; }
.card-style-h__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-soft); }
.card-style-h__media img { width: 100%; height: 100%; object-fit: cover; }
.card-style-h__body { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.card-style-h__body > * { width: 100%; }
.card-style-h__foot {
  padding: 12px 22px;
  border-top: 1px solid #f0f3f8;
  background: #fafbff;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* 5. vertical-media — top image, then tag/title/text/CTA */
.card-style-v { display: flex; flex-direction: column; align-items: stretch; }
.card-style-v__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-soft); }
.card-style-v__media img { width: 100%; height: 100%; object-fit: cover; }
.card-style-v__body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; align-items: stretch; gap: 8px; }
.card-style-v__body > * { width: 100%; }
.card-style-v .meta.tag {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  align-self: flex-start;
  width: auto;
}
@media (max-width: 540px) {
  .card-style-v__media { aspect-ratio: 16/9; }
}

/* 6. custom — centered icon + bold title (link tiles) */
.card-style-custom {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  padding: 22px;
  min-height: 180px;
  justify-content: center;
  gap: 12px;
}
.card-style-custom__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 1.5rem;
}
.card-style-custom__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* ============================================================
   Metric row
   ============================================================ */
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.metric .num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #7dd3fc;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.metric .label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 720px) {
  .metric-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Forms
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,168,232,0.12);
}
.field textarea { resize: vertical; min-height: 80px; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
  position: relative;
  background: linear-gradient(135deg, #07102f 0%, #0f1f3d 100%);
  color: rgba(255,255,255,0.72);
  padding: 72px 0 32px;
  font-size: 0.92rem;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,168,232,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(125,211,252,0.14), transparent 40%),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.5px);
  background-size: auto, auto, 28px 28px;
  pointer-events: none;
}

.site-footer > .container { position: relative; }

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: stretch;
  margin-bottom: 48px;
}

.footer-brand {
  flex: 0 1 320px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
}

.footer-brand img {
  display: block;
  height: auto;
  max-height: 36px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  color: rgba(255,255,255,0.58);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 340px;
  margin-bottom: 24px;
}

.footer-contact { /* sits naturally below description */ }

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-divider {
  display: none;
}

.footer-email {
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: default;
  user-select: text;
}

.footer-links {
  flex: 1 1 0;
  min-width: 320px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px 40px;
  align-items: start;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col a {
  display: block;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 7px 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col a:hover {
  color: #fff;
  transform: translateX(3px);
}

.site-footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

.bottom-links { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; }

.site-footer .bottom a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .bottom a:hover { color: #fff; }

@media (max-width: 720px) {
  .site-footer { padding: 52px 0 24px; }
  .footer-grid { gap: 40px; margin-bottom: 40px; align-items: flex-start; }
  .footer-contact-row { flex-wrap: wrap; }
  .footer-links { grid-template-columns: 1fr; gap: 28px; border-left: none; padding-left: 0; }
  .footer-col a { white-space: normal; font-size: 0.86rem; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15,31,61,0.12);
  /* Hidden by default; JS adds .show to display it. */
  display: none;
  align-items: center;
  gap: 16px;
  z-index: 60;
  font-size: 0.88rem;
}
.cookie-banner.show { display: flex; }
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner .actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Legacy alias kept for any code that toggles .hidden instead of removing .show */
.cookie-banner.hidden { display: none; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Detail page
   ============================================================ */
/* ============================================================
   Detail page — borderless, content-width adaptive
   ============================================================ */
.detail-body { padding: 0 0 96px; }
.detail-body > .container { max-width: 780px; padding-top: 24px; padding-bottom: 24px; }
.article {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
}
.article h2 { margin-top: 32px; font-size: 1.5rem; color: var(--color-text); }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 1.15rem; margin-top: 24px; color: var(--color-text); }
.article p { font-size: 1rem; line-height: 1.75; color: #1f2937; margin: 0 0 16px; }
.article ul, .article ol { padding-left: 1.5em; margin: 0 0 16px; }
.article li { margin-bottom: 6px; line-height: 1.65; }
.article img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 16px 0; }
.article ul.list-plain { list-style: none; padding: 0; }
.article ul.list-plain li { padding: 4px 0; border-bottom: 1px solid var(--color-border); }

.detail-content { font-size: 1rem; line-height: 1.75; color: #1f2937; }
.detail-content > :first-child { margin-top: 0; }
.detail-content h2 { margin-top: 1.8em; font-size: 1.5rem; color: var(--color-text); }
.detail-content h3 { margin-top: 1.5em; font-size: 1.2rem; color: var(--color-text); }
.detail-content p { margin: 0 0 16px; }
.detail-content ul, .detail-content ol { padding-left: 1.5em; margin: 0 0 16px; }
.detail-content li { margin-bottom: 6px; line-height: 1.65; }
.detail-content img {
  /* Use block + margin auto so the image centers regardless of the
     surrounding <p>'s text-align, text-indent (Office paste artefacts),
     or inline flex/text-align quirks. */
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 20px auto;
}
.detail-content table {
  display: table;
  border-collapse: collapse;
  max-width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  /* Force horizontal centering with !important because Office-pasted
     tables carry inline `margin-left: -1.6pt` (or similar) that would
     otherwise override the auto margins and pin the table off-center. */
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto;      /* graceful overflow on narrow viewports */
}
/* Office-pasted tables arrive with width="100%" or style="width:100%",
   which blocks margin:auto centering. Strip the 100% so the table can
   shrink to its content and center naturally. */
.detail-content table[width="100%"],
.detail-content table[style*="width: 100%"],
.detail-content table[style*="width:100%"] {
  width: auto !important;
  max-width: 100%;
}
.detail-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.detail-content a:hover { color: #008ec5; }

.detail-attachments {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 0;
  background: transparent;
}
.detail-attachments h3 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--color-text);
}

.detail-gallery { margin-top: 48px; padding-top: 24px; border-top: 0; }
.detail-gallery h3 { font-size: 1.1rem; margin-bottom: 16px; color: var(--color-text); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.gallery-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.gallery-grid a img { width: 100%; height: 100%; object-fit: cover; }

/* Detail hero (banner) — content-width responsive, generous padding */
.hero.detail-hero { padding: 72px 0 56px; min-height: 240px; }
.hero.detail-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-top: 16px !important; max-width: 780px; }
.hero.detail-hero .lead { font-size: 1.0625rem; max-width: 640px; margin-top: 12px; margin-bottom: 24px; }
.hero.detail-hero .hero-content { max-width: 780px; }
.hero.detail-hero .hero-cta { gap: 12px; }
.hero.detail-hero .hero-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.hero.detail-hero .hero-cta .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }

@media (max-width: 540px) {
  .detail-body > .container { padding-left: 20px; padding-right: 20px; }
  .hero.detail-hero { padding: 48px 0 36px; }
  .hero.detail-hero h1 { font-size: 1.5rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.detail-attachments h3 { font-size: 1.05rem; margin-bottom: 12px; }
.attachment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.attachment {
  display: flex !important; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: var(--color-text);
  transition: background .12s, border-color .12s;
}
.attachment:hover { background: #fff; border-color: var(--color-primary); }
.att-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.att-name { flex: 1; font-weight: 500; }
.att-size { color: var(--color-text-muted); font-size: 0.85rem; }

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg svg { width: 100%; height: 100%; }

/* ============================================================
   Sitemap / legal pages
   ============================================================ */
.article ul.list-plain { list-style: none; padding: 0; }
.article ul.list-plain li { padding: 4px 0; border-bottom: 1px solid var(--color-border); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 540px) {
  section { padding: 56px 0; }
  .hero { padding: 48px 0 56px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .article { padding: 24px 20px; }
  .site-header .container { height: 56px; }
}

/* ============================================================
   Banner: balance Subtitle→图底 与 Eyebrow→图顶 间距
   ============================================================ */
.hero.page-banner .lead { margin-bottom: 0; }

/* ============================================================
   首页 Products & Solutions 板块 4 卡（2×2）严格对齐
   ============================================================ */
section[data-board="card-4"] .card-style-h { height: 100%; }
section[data-board="card-4"] .card-style-h__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
section[data-board="card-4"] .card-style-h__body h3 {
  min-height: calc(1.0625rem * 1.35 * 2);
}
section[data-board="card-4"] .card-style-h__body p { flex: 1 1 auto; margin: 0; }
section[data-board="card-4"] .card-style-h__foot { margin-top: auto; }