/* ============================================================
   沛烨智能官网 — 严格还原 Ardot 画布设计稿
   画布尺寸: 1440 × 5435 | 缩放策略: 等比缩放 + 纵向滚动
   ============================================================ */

/* --- Design Tokens (from canvas fills) --- */
:root {
  --bg: #000000;
  --surface: #0D0D0D;
  --accent: #0070F3;
  --text: #FFFFFF;
  --muted: #A1A1AA;
  --hairline: rgba(255, 255, 255, 0.078);
  --card-border: rgba(255, 255, 255, 0.08);
  --strong-border: rgba(255, 255, 255, 0.16);
  --muted-text: rgba(255, 255, 255, 0.6);
  --dim-text: rgba(255, 255, 255, 0.4);
  --faint-text: rgba(255, 255, 255, 0.25);

  --font-cn: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-en: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --cw: 1440px; /* canvas width */
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--text); font-family: var(--font-cn); line-height: 1.5; }
body { background: var(--bg); overflow-x: hidden; }

#stage {
  width: 100%;
  min-height: 100vh;
}
#app {
  width: var(--cw);
  position: relative;
  left: 50%;
  transform-origin: top left;
}

a { text-decoration: none; color: inherit; transition: opacity .2s; }
a:hover { opacity: .75; }
img { display: block; max-width: 100%; }

.en { font-family: var(--font-en); }
.accent { color: var(--accent); }

/* --- Divider (1px hairline between sections) --- */
.divider {
  width: 100%; height: 1px;
  background: var(--hairline);
  flex-shrink: 0;
}

/* ============================================================
   NAV (2:3) — 1440×76
   ============================================================ */
.nav {
  width: 100%; height: 76px;
  display: flex; align-items: center;
  padding: 0 80px;
  justify-content: space-between;
  background: var(--bg);
}
.nav-inner {
  display: flex; align-items: center;
  width: 100%;
  gap: 64px;
}
.logo-group {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.logo-mark {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.logo-text {
  display: flex; flex-direction: column; gap: 1px;
}
.logo-cn {
  font-size: 24px; font-weight: 600; color: #fff;
  line-height: 30px;
}
.logo-en {
  font-family: var(--font-en); font-weight: 500;
  font-size: 11px; color: var(--muted);
  letter-spacing: .04em;
  line-height: 13px;
}
.nav-links {
  display: flex; align-items: center; gap: 36px;
  flex-shrink: 0;
}
.nav-link {
  font-size: 15px; font-weight: 500; color: #fff;
  white-space: nowrap;
}
.nav-link:not(.nav-link--active) { color: var(--muted); font-weight: 400; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 26px;
  background: var(--accent); color: #fff;
  border-radius: 6px;
  font-size: 15px; font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   HERO (2:20) — 1440×672
   ============================================================ */
.hero {
  width: 100%; height: 672px;
  display: flex; align-items: center;
  padding: 96px 80px;
  gap: 64px;
  background: var(--bg);
}
.hero-inner {
  width: 100%;
  display: flex; align-items: center;
  gap: 64px;
}
.hero-copy {
  width: 696px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 28px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--strong-border);
  width: fit-content;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.hero-badge span:last-child {
  font-size: 13px; color: var(--muted); font-weight: 400;
}
.hero-title {
  font-size: 72px; font-weight: 600; line-height: 110%;
  color: #fff; width: 432px;
}
.hero-desc {
  font-size: 18px; color: var(--muted); line-height: 160%;
  width: 520px;
}
.hero-buttons {
  display: flex; gap: 16px; margin-top: 4px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 53px; padding: 0 34px;
  border-radius: 6px;
  font-size: 16px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline {
  border: 1px solid var(--strong-border);
  color: #fff; background: transparent;
  font-weight: 400;
}
.btn--cta { width: 200px; height: 52px; border-radius: 26px; }
.hero-visual {
  width: 520px; height: 480px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 0;
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================
   STATS (2:35) — 1440×177
   ============================================================ */
.stats {
  width: 100%; height: 177px;
  display: flex; align-items: center;
  padding: 48px 80px;
  background: var(--bg);
}
.stats-row {
  display: flex; width: 100%;
}
.stat-item {
  width: 320px; display: flex; flex-direction: column; gap: 8px;
}
.stat-num {
  font-family: var(--font-en); font-weight: 600;
  font-size: 44px; color: #fff; line-height: 53px;
}
.stat-num.accent { color: var(--accent); }
.stat-label {
  font-size: 14px; color: var(--muted); font-weight: 400;
}

/* ============================================================
   ABOUT (2:49) — 1440×620
   ============================================================ */
.about {
  width: 100%; height: 620px;
  display: flex; align-items: center;
  padding: 100px 80px;
  gap: 72px;
  background: var(--bg);
}
.about-inner {
  width: 100%;
  display: flex; align-items: center;
  gap: 72px;
}
.about-copy {
  width: 728px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.kicker {
  font-family: var(--font-en); font-weight: 500;
  font-size: 24px; color: var(--accent);
  letter-spacing: 2.2px; text-transform: uppercase;
}
.about-title {
  font-size: 44px; font-weight: 600; line-height: 125%;
  color: #fff; width: 440px;
}
.about-p {
  font-size: 16px; color: var(--muted); line-height: 170%;
}
.about-visual {
  width: 480px; height: 420px;
  flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--card-border);
}
.about-visual img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================
   PRODUCTS (2:57) — 1440×1305
   ============================================================ */
.products {
  width: 100%; height: 1305px;
  display: flex; flex-direction: column;
  padding: 100px 80px;
  gap: 56px;
  background: var(--bg);
}
.products-header {
  display: flex; flex-direction: column; gap: 16px;
}
.section-title {
  font-size: 44px; font-weight: 600; color: #fff;
}
.section-sub {
  font-size: 17px; color: var(--muted); font-weight: 400;
  width: 586px;
}

/* Line title bar */
.line-title {
  display: flex; align-items: center; gap: 16px;
  height: 38px;
}
.line-bar {
  width: 4px; height: 28px; background: var(--accent);
  border-radius: 0; flex-shrink: 0;
}
.line-name {
  font-size: 26px; font-weight: 600; color: #fff;
}
.line-en {
  font-family: var(--font-en); font-weight: 500;
  font-size: 12px; color: var(--muted);
  letter-spacing: 2px; text-transform: uppercase;
}

/* Card grid system */
.cards {
  display: flex;
  gap: 24px;
}
.cards--3 > * { flex: 1; } /* 3-col: ~410.67 each */
.cards--4 > * { flex: 1; } /* 4-col: ~302 each */

.card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.card--product { border-radius: 0; }
.card--server { border-radius: 0; }
.card--field { border-radius: 0; }
.card--tech { border-radius: 0; }
.card--news { border-radius: 0; }

/* Product card image area */
.card-img {
  overflow: hidden;
}
.card--product .card-img { height: 220px; }
.card--server .card-img { height: 190px; }
.card--field .card-img { height: 200px; }
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Product card text body */
.card-body {
  display: flex; flex-direction: column;
  padding: 24px 24px 28px 24px;
  gap: 12px;
}
.card-body--sm {
  padding: 20px 20px 24px 20px;
  gap: 10px;
}
.card-title {
  font-size: 20px; font-weight: 600; color: #fff;
}
.card-title--sm { font-size: 18px; }
.card-desc {
  font-size: 14px; color: var(--muted); line-height: 160%;
}
.card-desc--sm { font-size: 13px; }

/* Tech cards (no image, pure text) */
.card-body--tech {
  padding: 28px;
  gap: 14px;
}
.tech-num {
  font-family: var(--font-en); font-weight: 600;
  font-size: 15px; color: var(--accent);
}
.card--tech .card-title { font-size: 19px; }
.card--tech .card-desc { font-size: 14px; }

/* News cards (no image) */
.card-body--news {
  padding: 28px 28px;
  gap: 14px;
}
.news-date {
  font-family: var(--font-en); font-weight: 500;
  font-size: 13px; color: var(--accent);
}
.card-title--news {
  font-size: 17px; font-weight: 600;
  line-height: 150%;
}
.card-desc--news { font-size: 14px; }

/* ============================================================
   TECHNOLOGY (2:108) — 1440×442
   ============================================================ */
.tech {
  width: 100%; height: 442px;
  display: flex; flex-direction: column;
  padding: 100px 80px;
  gap: 48px;
  background: var(--surface);
}
.tech-header {
  display: flex; flex-direction: column; gap: 16px;
}
.tech-cards {
  /* card height ≈ 100 per screenshot verification */
}
.card--tech {
  /* tech cards are compact, no explicit radius in design */
}

/* ============================================================
   APPLICATION FIELDS (2:130) — 1440×678
   ============================================================ */
.fields {
  width: 100%; height: 678px;
  display: flex; flex-direction: column;
  padding: 100px 80px;
  gap: 48px;
  background: var(--bg);
}
.fields-header {
  display: flex; flex-direction: column; gap: 16px;
}

/* ============================================================
   NEWS (2:151) — 1440×538
   ============================================================ */
.news {
  width: 100%; height: 538px;
  display: flex; flex-direction: column;
  padding: 100px 80px;
  gap: 48px;
  background: var(--bg);
}
.news-header {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.news-header-left {
  display: flex; flex-direction: column; gap: 16px;
}
.news-more {
  font-size: 14px; color: var(--muted); font-weight: 400;
  white-space: nowrap;
}

/* ============================================================
   CTA (2:171) — 1440×480
   ============================================================ */
.cta {
  width: 100%; height: 480px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.cta-card {
  width: 1200px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  padding: 48px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 24px;
}
.cta-kicker {
  font-family: var(--font-en); font-weight: 700;
  font-size: 26px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.cta-heading {
  font-size: 38px; font-weight: 700; color: #fff;
  text-align: center;
}
.cta-sub {
  font-size: 16px; color: var(--muted-text);
  text-align: center;
  max-width: 780px;
}

/* ============================================================
   FOOTER (2:178) — 1440×440
   ============================================================ */
.footer {
  width: 100%; height: 440px;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding-top: 0;
}
.footer-divider {
  width: calc(var(--cw) - 160px); height: 1px;
  margin: 0 auto;
  background: var(--hairline);
}
.footer-top {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 80px 0;
}
.f-col {
  display: flex; flex-direction: column; gap: 12px;
}
.f-col-brand { width: 320px; flex-shrink: 0; }
.f-col:nth-child(2) { width: 180px; flex-shrink: 0; }
.f-col:nth-child(3) { width: 200px; flex-shrink: 0; }
.f-col:nth-child(4) { width: 180px; flex-shrink: 0; }
.f-col:nth-child(5) { width: 140px; flex-shrink: 0; }

.f-brand { font-size: 24px; font-weight: 700; color: #fff; }
.f-brand-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 12px; color: var(--muted-text);
}
.f-brand-desc {
  font-size: 13px; color: var(--muted-text);
  width: 300px;
}
.f-col-title {
  font-size: 14px; font-weight: 700; color: #fff;
}
.f-link {
  font-size: 13px; color: var(--muted-text); font-weight: 400;
}
.f-link:hover { color: #fff; }

.footer-bottom {
  display: flex; flex-direction: column; gap: 8px;
  padding: 60px 80px 0;
}
.f-address, .f-contact {
  font-size: 13px; color: var(--dim-text);
}
.f-copy {
  font-size: 12px; color: var(--faint-text);
}