/* ==========================================================================
   良友工控助手简介 —— 单页展示样式
   纯静态、无外部依赖、无构建步骤
   设计基调：深靛蓝（工业沉稳）+ 青绿（信号/数据流），浅色页面、长文易读
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  --brand-900: #0b1a33;
  --brand-800: #10254a;
  --brand-700: #16325f;
  --brand-600: #1e4380;
  --brand-500: #2d5fa8;
  --brand-300: #8fb4e0;
  --brand-100: #e8f0fa;
  --brand-50:  #f4f8fd;

  --accent-600: #0f766e;
  --accent-500: #14907f;
  --accent-100: #dcf5f0;
  --accent-50:  #effaf8;

  --text-1: #0f172a;
  --text-2: #26334a;
  --text-3: #5a6b83;
  --text-4: #94a3b8;

  --bg-page:    #f4f7fb;
  --bg-paper:   #ffffff;
  --line:       #e3e9f1;
  --line-soft:  #eef2f7;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-paper: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 40px -24px rgba(15, 23, 42, .18);

  --paper-max: 960px;

  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 2;
  color: var(--text-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, p, figure { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 18px;
  background: #fff;
  color: var(--brand-700);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ==========================================================================
   ① 顶部视觉栏 —— 整栏可点击，跳转官网
   ========================================================================== */
.hero {
  position: relative;
  background: var(--brand-900);
  overflow: hidden;
}

.hero__link {
  position: relative;
  display: block;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.hero__link:hover { text-decoration: none; }

/* 网格底纹：径向淡出，营造"信号 / 数据流"的工业氛围 */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(143, 180, 224, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143, 180, 224, .10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 88% at 50% 0%, #000 22%, transparent 76%);
  mask-image: radial-gradient(120% 88% at 50% 0%, #000 22%, transparent 76%);
}

.hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  pointer-events: none;
}
.hero__glow--a {
  width: 440px; height: 440px;
  left: -110px; top: -190px;
  background: radial-gradient(circle, rgba(34, 179, 160, .55), transparent 68%);
}
.hero__glow--b {
  width: 520px; height: 520px;
  right: -150px; top: -130px;
  background: radial-gradient(circle, rgba(45, 95, 168, .60), transparent 68%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 32px 32px;
  text-align: center;
}

/* 品牌区：图标 + 大字，横向居中排列 */
.hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}

/* 软件标识：正方形，与标题字高视觉齐平 */
.hero__logo {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
  /* 深色底上给轻微投影，避免图标边缘"贴"在背景上 */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .38));
}

/* 主标题：几个大字 */
.hero__title {
  display: block;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: .1em;
  text-indent: .1em; /* 补偿字距造成的视觉偏移 */
  line-height: 1.14;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  color: #a9c2e0;
  font-size: 14.5px;
  letter-spacing: .05em;
  line-height: 1.6;
}

.hero__sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(143, 180, 224, .45);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 25px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-800);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hero__cta svg { width: 16px; height: 16px; transition: transform .18s ease; }

.hero__link:hover .hero__cta {
  background: var(--accent-100);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(34, 179, 160, .6);
}
.hero__link:hover .hero__cta svg { transform: translateX(4px); }
.hero__link:active .hero__cta { transform: translateY(0); }

/* 顶部栏提示：整栏可点 */
.hero__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.hero__link:hover::after { opacity: 1; }

/* ==========================================================================
   ② 正文纸张
   ========================================================================== */
.page {
  max-width: var(--paper-max);
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.paper {
  padding: 56px 60px 60px;
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
}

/* 正文段落：统一首行缩进两字，符合中文排版习惯 */
.paper > p {
  font-size: 17px;
  line-height: 2.05;
  color: var(--text-2);
  text-align: justify;
  text-justify: inter-ideograph;
  text-indent: 2em;
  margin: 0 0 20px;
}

.paper > p:last-child { margin-bottom: 0; }

/* ---------- 插件小标题 ---------- */
.item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text-1);
  scroll-margin-top: 20px;
}

/* 首个标题紧接概述段落，无需再画分隔线 */
.paper > p + .item:first-of-type { border-top: none; padding-top: 0; }

.item__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--brand-700);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.item__text { display: inline-block; }

/* 结语：无编号 */
.item--plain {
  display: block;
  padding-left: 0;
}

/* ---------- 回到顶部 ---------- */
.backtop {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 14.5px;
}

.backtop a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-subtle, #f8fafc);
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .04em;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.backtop a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
}

/* ==========================================================================
   ③ 页脚 —— 整块可点击，跳转官网
   ========================================================================== */
.site-footer {
  background: var(--brand-900);
  border-top: 3px solid var(--accent-500);
}

.foot__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.foot__link:hover { text-decoration: none; background: rgba(255, 255, 255, .035); }

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 46px 32px 42px;
}

.foot__main { display: block; min-width: 260px; }

.foot__brand {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  line-height: 1.4;
}

.foot__tagline {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  letter-spacing: .06em;
  color: #8299ba;
}

.foot__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 24px;
  border: 1px solid rgba(143, 180, 224, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #d3e2f4;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.foot__cta svg { width: 15px; height: 15px; transition: transform .18s ease; }

.foot__link:hover .foot__cta {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}
.foot__link:hover .foot__cta svg { transform: translateX(4px); }

/* 二维码 */
.foot__qr {
  display: flex;
  gap: 22px;
}

.qr {
  display: block;
  text-align: center;
}

.qr img {
  width: 126px;
  height: 126px;
  padding: 7px;
  border-radius: var(--radius);
  background: #fff;
  object-fit: contain;
  transition: transform .2s ease, box-shadow .2s ease;
}
.foot__link:hover .qr img {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
}

.qr__cap {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .1em;
  color: #8fa6c4;
}

/* 备案信息条 */
.foot__record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 32px 22px;
  border-top: 1px solid rgba(143, 180, 224, .14);
}

.record {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #9db3d0;
  letter-spacing: .02em;
  line-height: 1.6;
  transition: color .15s ease;
}
.record:hover { color: #fff; text-decoration: none; }

.record__sep { color: #4a6285; font-size: 13px; }

.record__icon {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}

/* ==========================================================================
   ④ 响应式
   ========================================================================== */
@media (max-width: 820px) {
  body { font-size: 16.5px; }

  .hero__inner { padding: 28px 20px 26px; }
  .hero__brand { gap: 12px; margin-bottom: 10px; }
  .hero__logo { width: 44px; height: 44px; }
  .hero__title { letter-spacing: .07em; text-indent: .07em; }
  .hero__sub { font-size: 13.5px; gap: 9px; margin-bottom: 16px; }

  .page { padding: 26px 14px 52px; }
  .paper { padding: 36px 24px 40px; border-radius: var(--radius); }

  .paper > p { font-size: 16.5px; line-height: 2; }

  .item { font-size: 18px; gap: 11px; margin-top: 38px; }
  .item__num { min-width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }

  .foot__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding: 40px 22px 36px;
  }
  .foot__brand { font-size: 23px; }
  .foot__qr { gap: 16px; }
  .qr img { width: 108px; height: 108px; }

  .foot__record { padding: 14px 22px 20px; }
}

@media (max-width: 420px) {
  .paper { padding: 28px 18px 32px; }
  .qr img { width: 96px; height: 96px; }
  .foot__sep, .hero__sep { display: none; }
  .hero__brand { gap: 10px; }
  .hero__logo { width: 38px; height: 38px; }
}

/* ==========================================================================
   ⑤ 动效与打印
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  body { background: #fff; font-size: 12pt; }
  .hero { background: #fff; border-bottom: 2px solid #000; }
  .hero__grid, .hero__glow, .hero__cta, .foot__cta, .backtop { display: none; }
  .hero__logo { filter: none; }
  .hero__title, .hero__sub { color: #000; }
  .paper { box-shadow: none; border: none; padding: 0; }
  .site-footer { background: #fff; border-top: 1px solid #000; }
  .foot__brand, .foot__tagline, .record { color: #000; }
  .foot__record { border-top-color: #ccc; }
  .item { break-after: avoid; }
  .paper > p { orphans: 3; widows: 3; }
}