/* ==========================================================================
   上海光优讯联科技有限公司 · ICP 备案站
   样式取自 Holafly CN Design System（Figma "Holafly (3).fig" 导出的 token）。
   说明：不引用任何外部资源（无 Google Fonts / 无 CDN），全部本地托管，
   以保证中国大陆境内访问速度与可用性。
   ========================================================================== */

:root {
  /* 字体栈（design system: --stack-cn） */
  --stack-cn: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 品牌色 rose-500 及派生色 */
  --brand: rgb(230, 72, 92);
  --brand-hover: rgb(225, 43, 87);
  --brand-light: rgb(255, 159, 162);

  /* 中性色 */
  --ink: rgb(41, 43, 46);
  --ink-muted: rgb(86, 87, 90);
  --ink-subtle: rgb(123, 124, 126);
  --on-dark: rgb(204, 208, 215);
  --border: rgb(228, 230, 234);
  --field: rgb(248, 248, 251);
  --surface: #fff;

  /* 圆角 / 阴影 */
  --r-sm: 8px;
  --r-lg: 12px;
  --r-2xl: 24px;
  --r-full: 999px;
  --shadow-card: 0 10px 40px 0 rgba(0, 0, 0, 0.05);

  /* 布局 */
  --page-w: 1280px;
  --gutter: 48px;

  /* 渐变（design system 中产品唯一的那条 hero 渐变） */
  --hero-gradient: linear-gradient(152.936deg, rgb(200, 235, 254) 1.85%, rgb(252, 236, 248) 15.74%, rgb(255, 239, 239) 34.94%, rgb(255, 255, 255) 54.31%);
  --eco-gradient: linear-gradient(160deg, rgb(226, 245, 229) 0%, rgb(238, 248, 240) 45%, rgb(226, 240, 250) 100%);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--stack-cn);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
}

img { max-width: 100%; }

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

/* 居中容器：桌面端与设计稿 1280 画板逐像素一致 */
.wrap {
  max-width: var(--page-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --------------------------------------------------------------- 导航栏 */
.nav {
  box-shadow: inset 0 -1px 0 0 var(--border);
  background: var(--surface);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav__logo { height: 44px; width: auto; display: block; }
.nav__rule { width: 1px; height: 28px; background: var(--border); flex: none; }
.nav__entity { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nav__links { display: flex; gap: 32px; font-size: 15px; line-height: 22px; flex: none; }
.nav__links a { color: var(--ink-muted); }
.nav__links a:hover { color: var(--brand); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--brand); font-weight: 500; }

/* ------------------------------------------------------------------ Hero */
.hero { background: var(--hero-gradient); }
.hero__inner {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eyebrow {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.eyebrow--light { color: var(--brand-light); }
.hero__title {
  margin: 0;
  font-size: 48px;
  line-height: 64px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero__lede {
  font-size: 18px;
  line-height: 32px;
  color: var(--ink-muted);
  max-width: 820px;
  text-wrap: pretty;
}
.hero__lede--narrow { max-width: 760px; }

/* -------------------------------------------------------------- 通用区块 */
.section { padding-top: 56px; padding-bottom: 56px; }
.section--tight-top { padding-top: 0; }
.section--flush { padding-top: 0; padding-bottom: 56px; }

.h2 {
  margin: 0;
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
  color: var(--ink);
}
.h3 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ink);
}

/* 公司概况：文案 + 工商登记信息卡 */
.split { display: flex; gap: 32px; align-items: flex-start; }
.split__copy { flex: 0.56; display: flex; flex-direction: column; gap: 16px; }
.split__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 30px;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.split__aside { flex: 0.44; }

.card {
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
}
.card__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}

/* 定义列表：工商登记信息 */
.facts { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.facts__row { display: flex; flex-direction: column; gap: 4px; }
.facts__label { font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.facts__value { font-size: 15px; line-height: 22px; color: var(--ink); }
.facts__rule { height: 1px; background: var(--border); }

/* 经营范围（深色卡） */
.panel-dark {
  background: var(--ink);
  border-radius: var(--r-2xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel-dark__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #fff;
}
.panel-dark__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 28px;
  color: var(--on-dark);
  text-wrap: pretty;
}
.panel-dark__body p { margin: 0; }
.panel-dark__key { color: var(--brand-light); }

/* 三卡：这就是我们与众不同之处 */
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.feature {
  background: var(--field);
  border-radius: var(--r-2xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature--eco { background: var(--eco-gradient); }
.feature__icon { color: var(--brand); display: flex; }
.feature--eco .feature__icon { color: var(--ink); }
.feature__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}
.feature__text { font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* 联系页：两张联系卡 */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.contact-card {
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.contact-card__icon { display: flex; color: var(--brand); padding-bottom: 4px; }
.contact-card__label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}
.contact-card__value {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--brand);
}
.contact-card__value--sm {
  font-size: 20px;
  line-height: 28px;
  word-break: break-all;
}
.contact-card__value a { color: inherit; }
.contact-card__note { font-size: 14px; line-height: 20px; color: var(--ink-subtle); }

/* 技术支持（深色整行） */
.support {
  background: var(--ink);
  border-radius: var(--r-2xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.support__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #fff;
}
.support__text { margin: 0; font-size: 15px; line-height: 26px; color: var(--on-dark); }

/* ----------------------------------------------------------------- 页脚 */
.footer { background: var(--ink); }
.footer__inner {
  padding-top: 40px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  font-size: 14px;
  line-height: 22px;
  color: var(--on-dark);
}
.footer__brand { display: flex; flex-direction: column; gap: 8px; }
.footer__logo-plate {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  display: flex;
  align-self: flex-start;
}
.footer__logo-plate img { height: 32px; width: auto; display: block; }
.footer__col { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.footer__col-title { color: #fff; font-weight: 500; }
.footer__rule { height: 1px; background: rgba(255, 255, 255, 0.12); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-dark);
}
.footer__beian { display: flex; gap: 24px; flex-wrap: wrap; }
/* 备案号链接：审核要求可点击跳转工信部 / 公安部，且颜色需可读 */
.footer__beian a { color: var(--on-dark); }
.footer__beian a:hover { color: #fff; }

/* 无障碍：跳转到主内容 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 10;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------- 响应式
   设计稿为 1280 桌面端；以下断点仅做优雅降级，不改变 ≥1280 的呈现。 */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .split { flex-direction: column; }
  .split__copy, .split__aside { flex: 1 1 auto; width: 100%; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 38px; line-height: 52px; }
  .footer__top { flex-direction: column; gap: 24px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .nav__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav__links { gap: 24px; }
  .hero__inner, .section { padding-top: 40px; padding-bottom: 40px; }
  .section--flush, .section--tight-top { padding-top: 0; }
  .hero__title { font-size: 30px; line-height: 44px; }
  .hero__lede { font-size: 16px; line-height: 28px; }
  .h2 { font-size: 24px; line-height: 34px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .panel-dark, .support { padding: 24px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__beian { flex-direction: column; gap: 8px; }
}

/* 公安备案图标（取消 HTML 中 img 注释后生效） */
.footer__beian a { display: inline-flex; align-items: center; gap: 4px; }