/* ==========================================================================
   钱小助官网样式表
   职责：保持可读性、键盘可用性和手机布局
   依赖：站点语义化 HTML
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全局变量
   -------------------------------------------------------------------------- */
:root {
  --paper: #f4f7fb;   /* 页面背景（冷白蓝） */
  --ink: #16294a;     /* 主文字（深藏蓝） */
  --muted: #5b6b85;   /* 次要文字（蓝灰） */
  --line: #dbe4f0;    /* 分割线（浅蓝灰） */
  --green: #1e40af;   /* 强调色（宝蓝） */
  --lime: #bfdbfe;    /* 深色区强调（浅天蓝） */
  --white: #ffffff;   /* 纯白 */

  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  overflow-x: clip;      /* ✅ 只裁剪，不创建滚动容器 */
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #2d5fbf;
}

a:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 6px;
}

/* 只提供给屏幕阅读器和搜索引擎的页面标题；视觉上由海报承担，不重复展示。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

p {
  line-height: 1.85;
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 0;
}

h1 {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: -2px;
  color: #0c2d6b;
}

h2 {
  font-size: clamp(32px, 3.8vw, 49px);
  line-height: 1.4;
}

h3 {
  font-size: 25px;
  line-height: 1.5;
}

em {
  font-style: normal;
  color: #2563eb;
}

/* --------------------------------------------------------------------------
   3. 布局容器
   -------------------------------------------------------------------------- */
.shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 64px;
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -80px;
  padding: 14px;
  background: var(--white);
}

.skip-link:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   4. 顶部导航
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--lime);
  height: 39px;
  width: 39px;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 600;
}

.brand-text {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -1px;
}

.brand-sub {
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 2px;
  display: block;
  margin-top: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.nav-contact {
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 8px 6px;
}

/* --------------------------------------------------------------------------
   5. Hero 首屏（蓝色渐变卡片）
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  gap: 60px;
  padding: 70px 60px;
  margin: 30px 0 70px;
  position: relative;
  overflow: hidden;
}

.eyebrow {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 23px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  height: 7px;
  width: 7px;
  background: #3b82f6;
  border-radius: 100%;
}

.hero-description {
  font-size: 17px;
  margin: 26px 0 32px;
}

.actions {
  display: flex;
  gap: 30px;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 17px 23px;
  border-radius: 4px;
  font-size: 16px;
  transition: background 0.2s;
}

.button-primary {
  background: linear-gradient(135deg, #2563eb, #0c2d6b);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  border: none;
}

.button-primary:hover {
  background: linear-gradient(135deg, #1e40af, #0a2455);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.45);
  transform: translateY(-2px);
}

.text-link {
  font-size: 15px;
}

.text-link span {
  margin-left: 13px;
}

.hero-footnote {
  display: flex;
  gap: 15px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 40px;
}

.hero-footnote i {
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: var(--muted);
}

/* Hero 右侧台球桌插画 */
.hero-art {
  position: relative;
  min-width: 0;
  height: 485px;
  overflow: hidden;
  background: #e2ecf8;
}

.table-rim {
  position: absolute;
  background: #284739;
  padding: 15px;
  transform: rotate(-7deg) translateY(22px);
}

.table-felt {
  position: relative;
  height: 100%;
  border: 2px solid #769680;
  border-radius: 130px 130px 5px 5px;
  overflow: hidden;
}

.pocket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 4px solid #bbac7f;
  border-radius: 50%;
  z-index: 2;
}

.pocket-a { top: 26px; left: 34px; }
.pocket-b { top: 26px; right: 34px; }
.pocket-c { top: 53%; left: -12px; }
.pocket-d { top: 53%; right: -12px; }
.pocket-e { bottom: -8px; left: -6px; }
.pocket-f { bottom: -8px; right: -6px; }

.ball {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  box-shadow: 7px 11px 8px #122a3655;
  display: grid;
  place-items: center;
  z-index: 3;
}

.ball b {
  border-radius: 50%;
  background: #f4f0dc;
  color: #17291f;
  font-family: Georgia, serif;
  font-size: 22px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.ball-cue {
  left: 28%;
  top: 66%;
  background: radial-gradient(circle at 30% 25%, #fffef5, #dbd9c8 70%, #9ea492);
  width: 55px;
  height: 55px;
}

.ball-eight {
  left: 54%;
  top: 37%;
  background: radial-gradient(circle at 30% 25%, #59625a, #14231d 60%, #06160f);
}

.ball-one {
  left: 72%;
  top: 26%;
  background: radial-gradient(circle at 30% 25%, #fae797, #ddb449 65%, #9b7c26);
}

.aim-line {
  position: absolute;
  left: 44%;
  top: 38%;
  height: 175px;
  border-left: 1px dashed #c8d9a9;
  transform: rotate(31deg);
}

.cue-stick {
  position: absolute;
  width: 9px;
  height: 245px;
  left: 21%;
  top: 83%;
  background: linear-gradient(90deg, #b98d51, #e3cf9e, #ad894d);
  border-top: 7px solid #d9e5cd;
  transform: rotate(34deg);
  transform-origin: top;
  z-index: 4;
}

.art-label {
  position: absolute;
  bottom: 22px;
  left: 31px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.art-label-en {
  font-family: Georgia, serif;
  letter-spacing: 1px;
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   6. 过渡标语
   -------------------------------------------------------------------------- */
.intro-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  gap: 20px;
}

.intro-strip p {
  font-size: 19px;
}

.intro-strip > span {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 2px;
}

.mobile-break {
  display: none;
}

/* --------------------------------------------------------------------------
   7. 通用章节
   -------------------------------------------------------------------------- */
.section {
  padding: 100px 0;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  margin-bottom: 43px;
}

.section-heading > p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   8. 品牌价值：2×2 图标卡片
   -------------------------------------------------------------------------- */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.feature-card {
  position: relative;
  background: linear-gradient(160deg, #dbe7f7 0%, #c8d9ee 100%);  /* ★ 加深一档 */
  border-radius: 0;                                                 /* ★ 改成直角 */
  padding: 32px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(22, 41, 74, 0.08);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  border: 1px solid rgba(22, 41, 74, 0.06);                         /* ★ 加一条细边框，直角卡片更清晰 */
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.feature-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(160deg, #d0dff2 0%, #b8cce6 100%);   /* ★ hover 再深一点 */
  box-shadow: 0 20px 40px rgba(22, 41, 74, 0.15);
}

.feature-icon {
  width: 76px;
  height: 76px;
  border-radius: 0;
  background: #b3c7e8;                    /* ★ 从 #ffffff 改成深藏蓝 */
  display: grid;
  place-items: center;
  font-size: 38px;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px rgba(22, 41, 74, 0.25);
}

.feature-card h3 {
  font-size: 22px;
  color: #0c2d6b;
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
/* --------------------------------------------------------------------------
   8.5 客户价值横条
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. 深蓝底部大区块
   -------------------------------------------------------------------------- */
/* ==========================================================================
   深色区 → 浅色区
   ========================================================================== */


.roles-section .eyebrow {
  color: #5b6b85;
  margin-bottom: 16px;
}

.roles-section h2 {
  color: #0c2d6b;
  margin-bottom: 20px;
}

.roles-intro {
  color: #4a5a72;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 50px;
  max-width: 560px;
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  margin-bottom: 50px;
}

.role-grid article {
  border-top: 1px solid rgba(22, 41, 74, 0.12);
  padding-top: 25px;
}

.role-label {
  font-size: 12px;
  color: #5b6b85;
  letter-spacing: 1px;
}

.role-grid h3 {
  margin: 20px 0 12px;
  color: #0c2d6b;
}

.role-grid p,
.role-grid li {
  font-size: 16px;
  color: #4a5a72;
}

.role-grid ul {
  padding: 0;
  list-style: none;
  margin: 25px 0 0;
}

.role-grid li {
  border-top: 1px solid rgba(22, 41, 74, 0.08);
  padding: 13px 0;
}

.role-grid li::before {
  content: '↗';
  padding-right: 13px;
  color: #1e40af;      /* 从浅天蓝改成主蓝 */
}

/* 按钮：从白底改成蓝底白字 */
.role-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: #1e40af;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  box-shadow: 0 8px 20px -8px rgba(30, 64, 175, 0.5);
  border: none;
}

.role-cta:hover {
  color: #ffffff;
  transform: translateY(-2px);
  background: #16294a;
  box-shadow: 0 12px 30px -10px rgba(30, 64, 175, 0.6);
}
/* --------------------------------------------------------------------------
   10. 联系方式（居中 CTA）
   -------------------------------------------------------------------------- */
.contact-section {
  text-align: center;
  padding: 100px 0;
}

.contact-cta {
  max-width: 640px;
  margin: 0 auto;
}

.contact-cta .eyebrow {
  justify-content: center;
}

.contact-intro {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin: 25px 0 40px;
}
/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid #41474f;
  padding: 64px 0 30px;
  background: #292e35;
  color: #edf0f3;
}

.site-footer a {
  color: #d6dce3;
}

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

.footer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 96px);
  max-width: 1040px;
  margin: 0 auto 30px;
  padding-bottom: 42px;
  border-bottom: 1px solid #41474f;
}

.footer-item {
  margin-bottom: 28px;
}

.footer-item:last-child {
  margin-bottom: 0;
}

.footer-label {
  display: block;
  font-size: 13px;
  color: #aeb6c0;
  margin-bottom: 12px;
}

.footer-phone {
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: 1px;
  color: #f3f5f7;
}

.footer-company p,
.footer-company address {
  font-size: 16px;
  font-style: normal;
  line-height: 1.8;
  color: #e0e4e8;
  overflow-wrap: anywhere;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #b8c0c9;
}

.footer-brand strong {
  font-size: 21px;
  color: #f3f5f7;
  margin-right: 12px;
}

.footer-brand span {
  font-size: 14px;
  color: #b8c0c9;
}

.footer-links {
  display: flex;
  gap: 25px;
  font-size: 14px;
}

.footer-links a {
  color: #c5cbd2;
}

.footer-links a:hover {
  color: #ffffff;
}
/* --------------------------------------------------------------------------
   12. 法律页面
   -------------------------------------------------------------------------- */
.legal-header {
  padding: 68px 0 36px;
  border-bottom: 1px solid var(--line);
}

.legal-header h1 {
  font-size: 46px;
  letter-spacing: -1px;
}

.legal-meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 18px;
}

.legal-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 55px;
  padding: 45px 0 90px;
}

.legal-nav {
  align-self: start;
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 14px;
}

.legal-nav a:hover {
  text-decoration: underline;
}

.legal-content {
  max-width: 850px;
  color: #354a6d;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.legal-content h2 {
  font-size: 25px;
  letter-spacing: 0;
  margin: 38px 0 16px;
  color: var(--ink);
  scroll-margin-top: 25px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 18px;
  letter-spacing: 0;
  margin: 24px 0 10px;
}

.legal-content p {
  margin: 12px 0;
}

.legal-content ul,
.legal-content ol {
  padding-left: 24px;
  line-height: 1.9;
}

.legal-content li {
  margin: 8px 0;
}

.legal-content a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notice {
  background: #e6efff;
  padding: 20px 24px;
  border-left: 3px solid #5a8dd0;
  margin-bottom: 28px;
}

.table-scroll {
  overflow-x: auto;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14px;
}

.legal-content th,
.legal-content td {
  border: 1px solid var(--line);
  padding: 13px;
  vertical-align: top;
  text-align: left;
  line-height: 1.8;
  min-width: 115px;
}

.legal-content th {
  background: #e8eff9;
}

.legal-breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}

.legal-breadcrumb a {
  text-decoration: underline;
}

.not-found {
  padding: 100px 0;
  min-height: 60vh;
}

.not-found p {
  margin: 22px 0;
}

.not-found h1 {
  font-size: 55px;
}

/* --------------------------------------------------------------------------
   13. 品牌 Logo
   -------------------------------------------------------------------------- */
.brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14. 顶部海报轮播
   -------------------------------------------------------------------------- */
.poster-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  
  /* ★ 铺满浏览器 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  
  max-width: none;                          /* 取消 max-width 限制 */
  box-shadow: 0 20px 40px rgba(22, 41, 74, 0.08);
}

.carousel-track {
  display: flex;
  width: 500%;
  animation: posterSlide 20s infinite ease-in-out;
}

.carousel-slide {
  width: 20%;
}

.carousel-slide img {
  display: block;
}




.carousel-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s;
}

.carousel-dots span:nth-child(1) { animation: dot1 20s infinite; }
.carousel-dots span:nth-child(2) { animation: dot2 20s infinite; }
.carousel-dots span:nth-child(3) { animation: dot3 20s infinite; }
.carousel-dots span:nth-child(4) { animation: dot4 20s infinite; }

@keyframes posterSlide {
  0%,  16%   { transform: translateX(0); }
  20%, 36%   { transform: translateX(-20%); }
  40%, 56%   { transform: translateX(-40%); }
  60%, 76%   { transform: translateX(-60%); }
  80%, 96%   { transform: translateX(-80%); }
  100%       { transform: translateX(-100%); }
}

@keyframes dot1 {
  0%, 19%   { background: #fff; opacity: 1; }
  20%, 79%  { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
  80%, 100% { background: #fff; opacity: 1; }
}

@keyframes dot2 {
  0%, 19%   { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
  20%, 39%  { background: #fff; opacity: 1; }
  40%, 100% { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
}

@keyframes dot3 {
  0%, 39%   { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
  40%, 59%  { background: #fff; opacity: 1; }
  60%, 100% { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
}

@keyframes dot4 {
  0%, 59%   { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
  60%, 79%  { background: #fff; opacity: 1; }
  80%, 100% { background: rgba(255, 255, 255, 0.5); opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   15. 响应式：平板（≤1000px）
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .shell { padding: 0 32px; }
  .hero { gap: 25px; min-height: 580px; }
  .hero-art { height: 430px; }
  .hero h1 { font-size: 53px; }
  .hero-description { font-size: 16px; }
  .art-label-en { display: none; }
  .site-nav { gap: 20px; }
  .contact-section { gap: 40px; }
  .feature-cards {
    grid-template-columns: repeat(2, 1fr);   /* 平板 2 列 */
  }
  .feature-card h3 { font-size: 20px; }
  .legal-grid {
    gap: 30px;
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   16. 响应式：手机（≤700px）
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .header-inner { height: 60px; gap: 10px; }
  .brand-text { font-size: 19px; }
  .brand-mark { width: 28px; height: 28px; font-size: 17px; }
  .site-nav { gap: 10px; font-size: 13px; }
  .nav-contact { padding: 7px 12px; }

  .hero h1 { font-size: 51px; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero-footnote { margin-top: 28px; }
  .hero-art { height: 385px; }
  .art-label-en { display: block; }

  .intro-strip { padding: 22px 0; align-items: flex-start; }
  .intro-strip p { font-size: 16px; }
  .intro-strip > span { font-size: 12px; letter-spacing: 0; max-width: 85px; line-height: 2; text-align: right; }
  .mobile-break { display: block; }

  .section { padding: 64px 0; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading > p { margin-top: 23px; font-size: 15px; }

  .features-block { padding: 40px 22px; border-radius: 16px; }
  .features-heading { grid-template-columns: 1fr; gap: 20px; }
  .features-heading > p { margin-top: 0; }
  .feature-cards { grid-template-columns: 1fr; gap: 16px; }
  .feature-card { padding: 24px; }
  .feature-icon { width: 60px; height: 60px; font-size: 30px; margin-bottom: 18px; }
  .feature-card h3 { font-size: 20px; }
  

  .value-strip { padding: 28px 22px; border-radius: 16px; margin-bottom: 50px; }
  .value-pills { gap: 12px; }
  .value-pill { padding: 12px 20px; font-size: 14px; }

  .roles-section { padding: 45px 24px; border-radius: 16px; margin-bottom: 50px; }
  .roles-intro { margin-bottom: 35px; }
  .role-cta { padding: 14px 22px; font-size: 15px; }
  .role-grid { grid-template-columns: 1fr; gap: 35px; }
  .roles-section h2 { font-size: 31px; }
  .role-grid p { font-size: 15px; }

  .contact-section { padding: 60px 0; }
  .contact-intro { margin: 20px 0 30px; } 

  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: none; padding-bottom: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; gap: 12px 20px; }
  .footer-phone { font-size: 24px; }
  .footer-bottom { gap: 12px; font-size: 12px; line-height: 1.8; }

  .legal-header { padding: 40px 0 26px; }
  .legal-header h1 { font-size: 36px; }
  .legal-meta { font-size: 13px; line-height: 1.9; }
  .legal-grid { display: block; padding: 25px 0 55px; }
  .legal-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 25px;
    margin-bottom: 30px;
  }
  .legal-content { font-size: 16px; }
  .legal-content h2 { font-size: 23px; }
  .notice { padding: 16px; }
  .actions { gap: 22px; }
  .button { gap: 24px; padding: 16px 19px; }

  .poster-carousel { margin: 0 22px; border-radius: 10px; }
  
  .carousel-dots { bottom: 12px; }
  .carousel-dots span { width: 6px; height: 6px; }

  
  /* 手机端隐藏原来的横向导航 */
  .site-nav {
    display: none;
  }

  /* 显示汉堡菜单 */
  .site-nav-mobile {
    display: block;
    position: relative;
    margin-left: auto;
  }

  /* 汉堡按钮 */
  .site-nav-mobile summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    background: #ffffff;
    user-select: none;
  }
  .site-nav-mobile summary::-webkit-details-marker {
    display: none;   /* 隐藏默认的三角 */
  }

  /* 展开的下拉菜单 */
  .site-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px -8px rgba(22, 41, 74, 0.15);
    display: flex;
    flex-direction: column;
    padding: 8px;
    z-index: 50;
  }

  .site-nav-dropdown a {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ink);
    border-radius: 6px;
    white-space: nowrap;
  }

  .site-nav-dropdown a:hover,
  .site-nav-dropdown a.is-active {
    background: #eaf2fc;
    color: #1e40af;
  }

  .site-nav-dropdown .nav-contact {
    border: none;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding-top: 12px;
  }
}

/* 桌面端隐藏汉堡菜单 */
@media (min-width: 701px) {
  .site-nav-mobile {
    display: none;
  }

}

/* --------------------------------------------------------------------------
   17. 无障碍：减少动画
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   18. 打印
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .legal-nav,
  .skip-link { display: none; }
  .shell { padding: 0; }
  .legal-grid { display: block; padding: 20px 0; }
  .legal-content { max-width: none; }
  .legal-content a { text-decoration: none; }
  .legal-content table { font-size: 12px; }
  .legal-header { padding: 15px 0; }
  body { background: white; color: black; }
}

/* --------------------------------------------------------------------------
   19. 功能详情页 - 模块区（全宽标题色块）
   -------------------------------------------------------------------------- */

/* 模块容器：去掉宽度限制和左右 padding，让标题可以全宽 */
.feature-modules {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 单个模块 */
.module {
  text-align: center;
  margin-bottom: 100px;
}

.module:last-child {
  margin-bottom: 0;
}

/* ★ 模块标题条：全屏宽度，紧凑色块 */
.module-head {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: #ffffff;
  padding: 14px 24px;                    /* ★ 从 20px 缩到 14px，色块更窄 */
  text-align: center;
  margin-bottom: 60px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.module-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);   /* ★ 适配窄色块，从 56px 降到 40px */
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.2;                       /* 让字在窄色块里居中和谐 */
}

.module-head p {
  display: none;
}

/* 图文交错区：居中，限制最大宽度 */
.feature-rows {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
/* --------------------------------------------------------------------------
   20. 功能详情页 - 顶部静态海报
   -------------------------------------------------------------------------- */
.poster-static {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 20px;
  margin-bottom: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 40px rgba(22, 41, 74, 0.08);
}

.poster-static img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .poster-static {
    margin-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   21. 功能详情页 - 分类导航
   -------------------------------------------------------------------------- */
.feature-nav {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: 16px 0;
  position: sticky;
  top: 72px;
  z-index: 10;

  /* ★ 让导航背景铺满浏览器 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.feature-nav .shell {
  display: flex;
  flex-wrap: nowrap;         /* ★ 强制不换行 */
  gap: 10px;
  justify-content: center;
  overflow-x: auto;          /* 窄屏可横向滑动 */
  scrollbar-width: none;
  max-width: none;           /* ★ 取消 shell 的 1520px 限制 */
  padding: 0 32px;
}

.feature-nav .shell::-webkit-scrollbar {
  display: none;
}

.feature-nav a {
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 20px;        /* ★ 从 12px 24px 缩小 */
  border-radius: 10px;
  font-size: 14px;           /* ★ 从 15px 缩小 */
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  white-space: nowrap;
}

.feature-nav a:hover {
  background: #eaf2fc;
  color: #0c2d6b;
  border-color: #93c5fd;
  transform: translateY(-2px);
}

/* "全部"默认高亮 */
.feature-nav a[href="#all"] {
  background: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}

/* 点击其他分类时，取消"全部"高亮 */
body:has(#data:target)      .feature-nav a[href="#all"],
body:has(#order:target)     .feature-nav a[href="#all"],
body:has(#product:target)   .feature-nav a[href="#all"],
body:has(#table:target)     .feature-nav a[href="#all"],
body:has(#store:target)     .feature-nav a[href="#all"],
body:has(#member:target)    .feature-nav a[href="#all"],
body:has(#marketing:target) .feature-nav a[href="#all"],
body:has(#notice:target)    .feature-nav a[href="#all"] {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

/* 锚点高亮 */
body:has(#data:target)      .feature-nav a[href="#data"],
body:has(#order:target)     .feature-nav a[href="#order"],
body:has(#product:target)   .feature-nav a[href="#product"],
body:has(#table:target)     .feature-nav a[href="#table"],
body:has(#store:target)     .feature-nav a[href="#store"],
body:has(#member:target)    .feature-nav a[href="#member"],
body:has(#marketing:target) .feature-nav a[href="#marketing"],
body:has(#notice:target)    .feature-nav a[href="#notice"] {
  background: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}

/* 点击"全部"时其他都取消高亮 */
body:has(#all:target) .feature-nav a:not([href="#all"]) {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

.anchor-target {
  scroll-margin-top: 150px;
  height: 0;
}

.module {
  scroll-margin-top: 150px;
}

@media (max-width: 700px) {
  .feature-nav { padding: 12px 0; top: 60px; }
  .feature-nav .shell {
    gap: 8px;
    padding: 0 16px;
    justify-content: flex-start;  /* 手机端靠左，方便横滑 */
  }
  .feature-nav a { padding: 8px 14px; font-size: 13px; }
  .module { scroll-margin-top: 130px; }
}

/* --------------------------------------------------------------------------
   22. 功能模块 - 截图展示 + 详细功能点
   -------------------------------------------------------------------------- */

/* 截图区：横排，居中，可横向滑动 */
.module-showcase {
  display: flex;
  gap: 24px;
  justify-content: center;
  overflow-x: auto;
  padding: 40px 0;
  scrollbar-width: none;
  margin: 0 -56px;                /* 让截图可以溢出内容区 */
}
.module-showcase::-webkit-scrollbar { display: none; }

.module-showcase img {
  flex-shrink: 0;
  height: 460px;                  /* 统一高度 */
  width: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(22, 41, 74, 0.25);
  object-fit: cover;
  background: #fff;
}

/* 详细功能点：两列网格 */
.module-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 60px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.detail-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.detail-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eaf2fc;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.detail-item h3 {
  font-size: 17px;
  color: #0c2d6b;
  margin-bottom: 6px;
  font-weight: 600;
}

.detail-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* 手机端 */
@media (max-width: 700px) {
  .module-showcase {
    gap: 16px;
    padding: 24px 0;
    margin: 0;
    justify-content: flex-start;
    padding-left: 22px;
    padding-right: 22px;
  }
  .module-showcase img { height: 340px; }
  .module-details { grid-template-columns: 1fr; gap: 22px; }
  .detail-icon { width: 42px; height: 42px; font-size: 20px; }
  .detail-item h3 { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   23. 功能模块 - 图文交错布局
   -------------------------------------------------------------------------- */

/* 每个模块内部的图文行 */
.feature-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 60px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* 交错：偶数行图文对调 */
.feature-row.reverse .feature-img { order: 2; }
.feature-row.reverse .feature-text { order: 1; }

/* 截图区 */
.feature-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-img img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(22, 41, 74, 0.25);
  display: block;
  background: #fff;
}

/* 无截图时的图标代替 */
.feature-icon-lg {
  width: 180px;
  height: 180px;
  border-radius: 30px;
  background: linear-gradient(160deg, #ffffff 0%, #eaf2fc 100%);
  display: grid;
  place-items: center;
  font-size: 80px;
  box-shadow: 0 20px 50px -20px rgba(22, 41, 74, 0.2);
}

/* 文字区 */
.feature-text h3 {
  font-size: 30px;                      /* ★ 从 26px 调到 30px */
  color: #062254;                       /* ★ 从 #0c2d6b 加深到 #062254，颜色更深 */
  margin-bottom: 20px;
  font-weight: 800;                     /* ★ 从 700 加粗到 800 */
  letter-spacing: -0.5px;
}

.feature-text p {
  font-size: 17px;                      /* ★ 从 16px 调到 17px */
  color: #4a5a72;                       /* ★ 稍微加深灰色，阅读更清晰 */
  line-height: 1.9;
  margin: 0;
}

@media (max-width: 768px) {
  .feature-rows { gap: 50px; margin-top: 40px; }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .feature-row.reverse .feature-img { order: 0; }
  .feature-row.reverse .feature-text { order: 0; }
  .feature-img img { max-width: 300px; }
  .feature-icon-lg { width: 140px; height: 140px; font-size: 60px; }
  .feature-text h3 { font-size: 22px; }       /* 手机端保持合理字号 */
  .feature-text p { font-size: 15px; }
}

@media (max-width: 700px) {
  .module-head {
    padding: 12px 20px;
    margin-bottom: 40px;
  }
  .module-head h2 { font-size: 24px; font-weight: 900; }
}

/* ==========================================================================
   24. 首页全宽重排（覆盖卡片式设计）
   ========================================================================== */

/* --------------------------------------------------------------------------
   24.1 所有首页 section 全宽 + 内容居中限制
   -------------------------------------------------------------------------- */
.hero,
.intro-strip,
.features-block,
.value-strip,
.roles-section,
.contact-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  box-sizing: border-box;

  /* 内容限制在 1320px 内，用 padding 模拟居中 */
  padding-left: max(24px, calc((100vw - 1320px) / 2));
  padding-right: max(24px, calc((100vw - 1320px) / 2));
}

/* --------------------------------------------------------------------------
   24.2 分区颜色节奏：白 → 浅灰蓝 → 米黄 → 深蓝 → 白
   -------------------------------------------------------------------------- */

/* 1. Hero：极浅蓝白 */
.hero {
  min-height: auto;    /* 取消原来的 655px 最小高度 */
}

/* 2. 过渡标语：白色 */

/* 3. 品牌价值：浅灰蓝 */

/* 4. 客户价值：浅米黄 */

/* 5. 前后台协作区：浅蓝 */

/* 6. 联系方式：白色 */
.contact-section {
  border-top: none;
}

/* --------------------------------------------------------------------------
   24.3 手机端适配
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero,
  .features-block,
  .value-strip,
  .roles-section,
  .contact-section {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   25. Hero 区滑入动画（纯 CSS，页面加载时自动播放）
   ========================================================================== */

/* 左侧内容：从左滑入 */
.hero-copy {
  animation: heroSlideInLeft 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* 右侧图片：从右滑入，延迟 0.15s 形成错落感 */
.hero-art {
  animation: heroSlideInRight 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s backwards;
}

/* 关键帧：从左滑入 */
@keyframes heroSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 关键帧：从右滑入 */
@keyframes heroSlideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 尊重"减少动画"系统设置 */
@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero-art {
    animation: none;
  }
}

/* ==========================================================================
   26. 首页各区块滚动进入动画（跟随滚动慢慢播放）
   ========================================================================== */

@keyframes fadeInFromLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInFromRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInFromBottom {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {

  /* ---- 过渡标语 ---- */
  .intro-strip p:first-child {
    animation: fadeInFromLeft 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
  }
  .intro-strip > span {
    animation: fadeInFromRight 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
  }

  /* ---- 品牌价值 ---- */
  .features-heading > div {
    animation: fadeInFromLeft 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }
  .features-heading > p {
    animation: fadeInFromRight 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }
  .feature-cards {
    animation: fadeInFromBottom 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
  }

  /* ---- 深色区 ---- */
  .roles-section .eyebrow,
  .roles-section h2,
  .roles-intro {
    animation: fadeInFromLeft 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 45%;
  }
  .role-grid article:nth-child(1) {
    animation: fadeInFromLeft 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 55%;
  }
  .role-grid article:nth-child(2) {
    animation: fadeInFromRight 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 55%;
  }
  

  /* ---- 联系方式 ---- */
  .contact-cta {
    animation: fadeInFromBottom 1.5s linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-strip p:first-child,
  .intro-strip > span,
  .features-heading > div,
  .features-heading > p,
  .feature-cards,
  .roles-section .eyebrow,
  .roles-section h2,
  .roles-intro,
  .role-grid article,
  .role-cta,
  .contact-cta {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   28. 会员管理 - 图文交错两组
   -------------------------------------------------------------------------- */

/* 每组：横向排布，两组之间留 80px 间距 */
.member-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;      /* 图片区略宽，文字区略窄 */
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 56px;
}

.member-row:last-child {
  margin-bottom: 0;
}

/* 交错：第二组图文位置互换 */
.member-row.reverse {
  grid-template-columns: 1fr 1.4fr;
}
.member-row.reverse .member-row-images { order: 2; }
.member-row.reverse .member-row-text   { order: 1; }

/* 图片区：两张图并排 */
.member-row-images {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.member-row-images img {
  flex: 1;
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(22, 41, 74, 0.25);
  display: block;
  background: #fff;
}

/* 文字区 */
.member-row-text h3 {
  font-size: 24px;
  color: #062254;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.member-row-text p {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.9;
  margin: 0;
}

/* 手机端：单列，图片上下排列，文字在下 */
@media (max-width: 768px) {
  .member-row,
  .member-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 22px;
    margin-bottom: 50px;
  }
  .member-row.reverse .member-row-images { order: 0; }
  .member-row.reverse .member-row-text   { order: 0; }
  .member-row-images {
    flex-direction: column;
    gap: 14px;
  }
  .member-row-images img { max-width: 300px; }
  .member-row-text h3 { font-size: 20px; }
  .member-row-text p { font-size: 15px; }
}


/* --------------------------------------------------------------------------
   30. 首页 - 产品介绍
   -------------------------------------------------------------------------- */
.product-intro {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 56px;
}

.product-intro-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  color: #0c2d6b;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.product-intro-desc {
  font-size: 16px;
  color: #5b6b85;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
  line-height: 1.8;
}

/* 终端卡片 */
.product-terminal {
  background: linear-gradient(160deg, #ffffff 0%, #eaf2fc 100%);
  border-radius: 24px;
  padding: 48px 40px;
  margin-bottom: 40px;
  box-shadow: 0 16px 50px -20px rgba(22, 41, 74, 0.15);
}

.product-terminal:last-of-type {
  margin-bottom: 50px;
}

.product-terminal-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 36px;
}

.product-terminal-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.3);
}

.product-terminal-badge {
  display: inline-block;
  padding: 5px 12px;
  background: #1e40af;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.product-terminal-head h3 {
  font-size: 26px;
  color: #0c2d6b;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.product-terminal-head p {
  font-size: 15px;
  color: #4a5a72;
  line-height: 1.8;
  margin: 0;
}

/* 截图区：横向滚动，每张统一高度 */
.product-terminal-shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 24px;
  scrollbar-width: none;
  margin-bottom: 4px;
}

.product-terminal-shots::-webkit-scrollbar { display: none; }

.product-terminal-shots img {
  flex-shrink: 0;
  height: 300px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(22, 41, 74, 0.25);
  background: #fff;
  display: block;
}

/* --------------------------------------------------------------------------
   电脑端截图：2 列网格（覆盖默认横滑）
   -------------------------------------------------------------------------- */

/* 只针对第一个 .product-terminal（电脑端） */
.product-terminal:first-of-type .product-terminal-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 4px;
  padding: 0;
  overflow-x: visible;    /* 取消横滑 */
}

.product-terminal:first-of-type .product-terminal-shots img {
  flex-shrink: initial;
  width: 100%;
  height: auto;           /* 取消固定高度，按比例显示 */
  border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(22, 41, 74, 0.25);
  background: #fff;
  display: block;
}

/* --------------------------------------------------------------------------
   手机端截图：3 张整体居中
   -------------------------------------------------------------------------- */
.product-terminal:last-of-type .product-terminal-shots {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
/* 第 5 张：跨两列，居中，缩到 60% 宽 */
.product-terminal:first-of-type .product-terminal-shots img:nth-child(5) {
  grid-column: 1 / -1;
  max-width: 60%;
  margin: 0 auto;
}

/* 功能亮点：两列 */
.product-terminal-points {
  list-style: none;
  padding: 32px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  border-top: 1px solid rgba(22, 41, 74, 0.08);
}

.product-terminal-points li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: #0c2d6b;
  font-weight: 500;
  line-height: 1.6;
}

.product-terminal-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* "了解更多"按钮 */
.product-intro-more {
  text-align: center;
}

.product-intro-more .button {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  gap: 12px;
}

/* 手机端 */
@media (max-width: 768px) {
  .product-intro {
    padding: 0 22px;
    margin-bottom: 60px;
  }
  .product-intro-desc { margin-bottom: 40px; }
  .product-terminal {
    padding: 32px 22px;
    border-radius: 18px;
    margin-bottom: 24px;
  }
  .product-terminal-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }
  .product-terminal-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }
  .product-terminal-head h3 { font-size: 22px; }
  .product-terminal-head p { font-size: 14px; }
  .product-terminal-shots { gap: 12px; padding-bottom: 18px; }
  .product-terminal-shots img { height: 220px; }
  .product-terminal-points {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 24px;
  }
  .product-terminal-points li { font-size: 14px; }
}

/* ==========================================================================
   31. 首页 - 补充板块（产品概述 / 痛点 / 优势）
   ========================================================================== */

/* --------------------------------------------------------------------------
   31.1 产品概述
   -------------------------------------------------------------------------- */
.product-overview {     /* 去掉白色卡片背景 */
  padding: 80px 0;          /* 去掉底部边框 */
}

.product-overview-inner {
  text-align: center;
}

.product-overview .eyebrow {
  justify-content: center;
  color: var(--muted);
  margin-bottom: 20px;
}

.product-overview-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  color: #0c2d6b;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

/* --------------------------------------------------------------------------
   31.2 通用居中标题
   -------------------------------------------------------------------------- */
.center-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  color: #0c2d6b;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.center-subtitle {
  font-size: 16px;
  color: #5b6b85;
  text-align: center;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 50px;
}

/* --------------------------------------------------------------------------
   31.3 核心痛点
   -------------------------------------------------------------------------- */
.pain-points {
  padding: 60px 56px 60px;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.pain-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 26px;
  box-shadow: 0 8px 24px -10px rgba(22, 41, 74, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -14px rgba(22, 41, 74, 0.15);
}

.pain-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eaf2fc;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 18px;
}

.pain-card h3 {
  font-size: 18px;
  color: #0c2d6b;
  font-weight: 700;
  margin-bottom: 10px;
}

.pain-card p {
  font-size: 14px;
  color: #5b6b85;
  line-height: 1.8;
  margin: 0;
}

/* --------------------------------------------------------------------------
   31.4 产品优势
   -------------------------------------------------------------------------- */
.advantages {
  padding: 80px 56px;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.advantage-item {
  position: relative;
  padding: 28px 24px 28px 24px;
  border-left: 3px solid #1e40af;
  background: #f9fbfd;
  border-radius: 0 12px 12px 0;
  transition: background 0.3s, transform 0.3s;
}

.advantage-item:hover {
  background: #eaf2fc;
  transform: translateX(4px);
}

.advantage-num {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.advantage-item h3 {
  font-size: 18px;
  color: #0c2d6b;
  font-weight: 700;
  margin-bottom: 10px;
}

.advantage-item p {
  font-size: 14px;
  color: #5b6b85;
  line-height: 1.8;
  margin: 0;
}

/* --------------------------------------------------------------------------
   31.5 联系方式按钮组
   -------------------------------------------------------------------------- */
.contact-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-buttons .button-outline {
  background: transparent;
  color: #0c2d6b;
  border: 1px solid #0c2d6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 23px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}

.contact-buttons .button-outline:hover {
  background: #0c2d6b;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   31.6 手机端适配
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-overview { padding: 50px 0; }
  .product-overview-inner { padding: 0 22px; }

  .pain-points { padding: 50px 22px; }
  .pain-grid { grid-template-columns: 1fr; gap: 16px; }
  .pain-card { padding: 24px 20px; }
  .center-subtitle { margin-bottom: 30px; font-size: 15px; }

  .advantages { padding: 50px 22px; }
  .advantages-grid { grid-template-columns: 1fr; gap: 16px; }
  .advantage-item { padding: 22px 18px; }

  .contact-buttons { flex-direction: column; align-items: center; }
  /* C1 主按钮与次要按钮：文字与箭头居中。
     主按钮原继承 .button 的 space-between + gap:35px，与 .button-outline 的 gap:12px 不一致，
     手机端统一为居中 + 12px 图标间距。 */
  .contact-buttons .button,
  .contact-buttons .button-outline { width: 100%; max-width: 280px; justify-content: center; gap: 12px; }
}

/* ==========================================================================
   32. 客户价值区块（改造版）
   ========================================================================== */
.value-strip {      /* 保留米黄底 */
  padding: 80px 0;
}

.value-inner {
  margin: 0 auto;
  text-align: center;
}

.value-strip .eyebrow {
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
}

.value-title-main {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  color: #0c2d6b;
  margin-bottom: 50px;
  letter-spacing: -0.5px;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: left;
  box-shadow: 0 10px 30px -12px rgba(22, 41, 74, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -14px rgba(22, 41, 74, 0.18);
}

.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fef7e0;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 20px;
}

.value-card h3 {
  font-size: 20px;
  color: #0c2d6b;
  font-weight: 700;
  margin-bottom: 10px;
}

.value-card p {
  font-size: 14px;
  color: #5b6b85;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .value-strip { padding: 50px 0; }
  .value-inner { padding: 0 22px; }
  .value-title-main { margin-bottom: 30px; }
  .value-cards { grid-template-columns: 1fr; gap: 16px; }
  .value-card { padding: 28px 22px; }
}

/* --------------------------------------------------------------------------
   33. 顶部导航 - 当前页面高亮
   -------------------------------------------------------------------------- */
.site-nav a {
  position: relative;
  transition: color 0.3s;
}

/* 当前页面：文字变蓝 + 底部高光线 */
.site-nav a.is-active {
  color: #1e40af;
  font-weight: 600;
}

.site-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1e40af);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.4);
}

/* 鼠标悬停时也轻微提示 */
.site-nav a:not(.nav-contact):not(.is-active):hover {
  color: #1e40af;
}

/* 手机端：底部线放低一点 */
@media (max-width: 700px) {
  .site-nav a.is-active::after {
    bottom: -4px;
    height: 2px;
  }
}

/* --------------------------------------------------------------------------
   34. 首页 - 双端简介（简短版）
   -------------------------------------------------------------------------- */
.terminal-brief {
  background: #eaf2fc;       /* ★ 从 #f4f7fb 改成 #eaf2fc，和上面对齐 */
  padding: 0 0 100px;        /* ★ 顶部 0，底部 100px */
  text-align: center;
}

.terminal-brief-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 56px;
}

.terminal-brief .eyebrow {
  justify-content: center;
  color: var(--muted);
  margin-bottom: 20px;
}

.terminal-brief-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  color: #0c2d6b;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.terminal-brief-desc {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.9;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .terminal-brief { padding: 50px 0; }
  .terminal-brief-inner { padding: 0 22px; }
}

/* --------------------------------------------------------------------------
   35. 功能页 - 面包屑 + 开篇介绍
   -------------------------------------------------------------------------- */

.features-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.features-lead-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
}

.features-lead-list li {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.8;
  padding-left: 20px;
  position: relative;
}

.features-lead-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e40af;
}

.features-lead-list strong {
  color: #0c2d6b;
  font-weight: 700;
}

.features-lead-note {
  font-size: 15px;
  color: #5b6b85;
  margin: 0;
}

@media (max-width: 768px) {
  .features-breadcrumb { font-size: 13px; margin-bottom: 18px; }
  .features-lead-list li { font-size: 14px; padding-left: 16px; }
}

/* --------------------------------------------------------------------------
   38. 帮助文档页
   -------------------------------------------------------------------------- */
.guide-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 56px 100px;
}

.guide-header {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 45px;
}

.guide-breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}

.guide-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.guide-header h1 {
  font-size: 46px;
  color: #0c2d6b;
  margin-bottom: 14px;
  letter-spacing: -1px;
}

.guide-meta {
  font-size: 14px;
  color: var(--muted);
}

.guide-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 60px;
}

.guide-nav {
  align-self: start;
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.guide-nav-group {
  font-size: 12px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 1px;
  margin: 12px 0 4px;
}

.guide-nav a {
  color: var(--muted);
}

.guide-nav a:hover {
  color: #1e40af;
  text-decoration: underline;
}

.guide-content {
  max-width: 800px;
}

.guide-content section {
  margin-bottom: 60px;
  scroll-margin-top: 100px;
}

.guide-content h2 {
  font-size: 26px;
  color: #0c2d6b;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaf2fc;
}

.guide-intro {
  font-size: 15px;
  color: #5b6b85;
  line-height: 1.8;
  margin-bottom: 20px;
}

.guide-content h3 {
  font-size: 17px;
  color: #0c2d6b;
  margin: 24px 0 12px;
}

.guide-content ol,
.guide-content ul {
  padding-left: 24px;
  color: #4a5a72;
  line-height: 1.9;
}

.guide-content li {
  margin-bottom: 8px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .guide-page { padding: 40px 22px 60px; }
  .guide-header h1 { font-size: 32px; }
  .guide-grid { grid-template-columns: 1fr; gap: 30px; }
  .guide-nav { position: static; max-height: none; }
}



/* 子级：3.4.1 ~ 3.4.5，缩进 + 弱化 */
.guide-nav a.guide-nav-sub {
  padding-left: 16px;
  font-size: 13px;
  color: #6b7b95;
  position: relative;
}

/* 子级前面加一条竖线，视觉上"挂在"父级下 */
.guide-nav a.guide-nav-sub::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #dbe4f0;
}

/* 子级 hover / 当前锚点高亮时，颜色更明显 */
.guide-nav a.guide-nav-sub:hover {
  color: #1e40af;
}

/* --------------------------------------------------------------------------
   39. 帮助文档 - 占位符
   -------------------------------------------------------------------------- */
.guide-placeholder {
  color: #9aa8bd;
  font-style: italic;
  font-size: 14px;
  padding: 16px 20px;
  background: #f4f7fb;
  border-left: 3px solid #dbe4f0;
  border-radius: 4px;
  margin: 16px 0;
}
/* --------------------------------------------------------------------------
   40. 帮助文档 - 视频
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   41. 帮助文档 - 补充样式
   -------------------------------------------------------------------------- */

/* 顶部使用提示 */
.guide-tip {
  margin-top: 24px;
  padding: 18px 24px;
  background: #eaf2fc;
  border-left: 3px solid #1e40af;
  border-radius: 4px;
  font-size: 15px;
  color: #0c2d6b;
  line-height: 1.8;
}

/* h4 小标题 */
.guide-content h4 {
  font-size: 16px;
  color: #1e40af;
  margin: 22px 0 10px;
  font-weight: 700;
}

/* 嵌套列表 */
.guide-content ol ul,
.guide-content ul ul {
  margin: 8px 0;
  padding-left: 20px;
}

/* 提示框 */
.guide-note {
  margin: 20px 0;
  padding: 14px 20px;
  background: #fff8e6;
  border-left: 3px solid #f0b429;
  border-radius: 4px;
  font-size: 14px;
  color: #6b5420;
  line-height: 1.8;
}

/* 视频 */
.guide-video {
  margin: 20px 0 32px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(22, 41, 74, 0.15);
  background: #000;
}

.guide-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

/* 移动端 */
@media (max-width: 768px) {
  .guide-tip { padding: 14px 16px; font-size: 14px; }
  .guide-content h4 { font-size: 15px; }
}

/* ==========================================================================
   42. 首页框架统一（覆盖原有定义）
   规则：所有区块全宽 + 内容居中 1200px + 背景色浅蓝 ↔ 白交替
   ========================================================================== */

/* --------------------------------------------------------------------------
   42.1 基础框架：所有区块全宽，内容居中 1200px
   -------------------------------------------------------------------------- */
.hero,
.intro-strip,
.product-overview,
.pain-points,
.features-block,
.advantages,
.value-strip,
.roles-section,
.contact-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  border-radius: 0;

  /* 内容限制在 1200px 内并居中 */
  padding-left: max(24px, calc((100vw - 1200px) / 2));
  padding-right: max(24px, calc((100vw - 1200px) / 2));
}

/* --------------------------------------------------------------------------
   42.2 背景色交替 + 上下留白
   浅蓝 #f4f7fb ↔ 白 #ffffff
   -------------------------------------------------------------------------- */

/* 1. Hero：浅蓝 */
.hero {
  background: #f4f7fb;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
}

/* 2. 过渡标语：白 */
.intro-strip {
  background: #ffffff;
  border-top: none;
  border-bottom: none;
}

/* 3. 产品概述：浅蓝 */
.product-overview {
  background: #f4f7fb;
  padding-bottom: 80px;
  border-bottom: none;
}

/* 4. 核心痛点：白 */
.pain-points {
  background: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* 5. 品牌价值（含双端协同）：浅蓝 */
.features-block {
  background: #f4f7fb;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 0;
}

/* 6. 产品优势：白 */
.advantages {
  background: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* 7. 客户价值：浅蓝（原来是米黄） */
.value-strip {
  background: #f4f7fb;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 0;
}

/* 8. 前后台协作：白（原来是浅蓝） */
.roles-section {
  background: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 0;
}

/* 9. 联系方式：浅蓝（原来是白） */
.contact-section {
  background: #f4f7fb;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* --------------------------------------------------------------------------
   42.3 内部容器宽度修正
   -------------------------------------------------------------------------- */

/* 产品概述内部容器 */
.product-overview-inner {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* 双端简介 */
.terminal-brief {
  max-width: 800px;
  margin: 80px auto 0;
}

/* 客户价值内部 */
.value-inner {
  max-width: 100%;
  padding: 0;
}

/* 痛点 / 优势网格撑满 */
.pain-grid,
.advantages-grid {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   42.4 手机端适配
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero,
  .intro-strip,
  .product-overview,
  .pain-points,
  .features-block,
  .advantages,
  .value-strip,
  .roles-section,
  .contact-section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero { padding-top: 50px; padding-bottom: 50px; }
  .intro-strip { padding-top: 24px; padding-bottom: 24px; }
  .product-overview { padding-top: 50px; padding-bottom: 50px; }
  .pain-points { padding-top: 60px; padding-bottom: 60px; }
  .features-block { padding-top: 60px; padding-bottom: 60px; }
  .advantages { padding-top: 60px; padding-bottom: 60px; }
  .value-strip { padding-top: 60px; padding-bottom: 60px; }
  .roles-section { padding-top: 60px; padding-bottom: 60px; }
  .contact-section { padding-top: 60px; padding-bottom: 60px; }
}

/* --------------------------------------------------------------------------
   43. 区块标题 - 蓝色标签 + 标题条
   -------------------------------------------------------------------------- */

/* 标题行：标签 + 标题条 横向排列 */

/* 左侧蓝色标签（带右尖角） */

/* 右侧标题条 */
.section-title-box {
  border-left: none;
}

/* 手机端：标签和标题条上下排列 */
@media (max-width: 700px) {
  .section-label {
    border-radius: 6px;
  }
  .section-title-box {
    width: 100%;
    border-left: 1px solid #dbe4f0;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   44. 区块标题行 - 全宽版（覆盖 43 节）
   -------------------------------------------------------------------------- */

/* 标题行：突破父容器，全宽 */

/* 左侧蓝色标签 */

/* 右侧标题条：浅蓝底，延伸到屏幕右边 */

/* 手机端：标签和标题条上下排列，全宽 */
@media (max-width: 700px) {
  .section-label {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   45. 区块标题行 - 紧密连接版（覆盖 44 节）
   -------------------------------------------------------------------------- */

/* 过渡标语区：去掉底部 padding，让下面紧贴 */

/* 产品概述区：去掉顶部 padding，让标签条从顶部开始 */

/* 标题行：全宽，无间隙 */
.section-title-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 40px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
}

/* 蓝色标签：固定宽度，右端尖角 */
.section-label {
  position: relative;
  z-index: 2;                     /* ★ 蓝色标签压在上面 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 44px 24px 28px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;

  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

/* 浅蓝标题条：向左延伸，藏在蓝色标签下方 */
.section-title-box {
  position: relative;
  z-index: 1;                     /* ★ 压在蓝色标签下面 */
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: -18px;             /* ★ 向左延伸 18px，覆盖尖角区域 */
  padding: 24px 28px 24px 36px;
  border: none;
  border-radius: 0;
}

.section-title-box h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: #0c2d6b;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.3;
}

/* 手机端 */
@media (max-width: 700px) {
  .section-title-row {
    flex-direction: column;
    align-items: stretch;
  }
  .section-label {
    padding: 14px 24px;
    font-size: 13px;
    clip-path: none;
    justify-content: center;
  }
  .section-title-box {
    margin-left: 0;
    padding: 16px 22px;
    border-radius: 0;
  }
  .section-title-box h2 { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   46. 修正过渡标语 + 标题字居中（覆盖 45 节）
   -------------------------------------------------------------------------- */

/* 过渡标语：恢复下方的呼吸空间，让文字不贴住标签条 */
.intro-strip {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* 产品概述：标签条紧贴过渡标语，但过渡标语本身有 padding */
.product-overview {
  padding-top: 0;
}

/* 浅蓝标题条：文字水平居中 */
.section-title-box {
  justify-content: center;
}

/* 可选：如果你想让标题字完全居中于"整个屏幕"，
   而不是浅蓝条内部，用下面这段替换上面那行
.section-title-box {
  justify-content: center;
  padding-left: 68px;   补偿左侧蓝色标签的宽度
}
*/

/* --------------------------------------------------------------------------
   47. 各区块标题条背景色微调
   -------------------------------------------------------------------------- */

/* 白底区块上的标题条：浅蓝 */
.advantages .section-title-box,
.roles-section .section-title-box {
  background: #eaf2fc;
}

/* 浅蓝底区块上的标题条：白色 */
.pain-points .section-title-box,
.value-strip .section-title-box,
.contact-section .section-title-box {
  background: #ffffff;
}

/* 品牌价值区块（浅蓝底）的标题条：白色 */
.features-block .section-title-box {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   48. 统一标题条样式 + 紧贴上方区块（覆盖 47 节）
   -------------------------------------------------------------------------- */

/* 所有标题条统一浅蓝（不管区块背景是什么） */

/* 所有带标题行的区块：去掉顶部 padding，让标题条贴住上方 */
.product-overview,
.pain-points,
.features-block,
.advantages,
.value-strip,
.roles-section,
.contact-section {
  padding-top: 0;
  padding-bottom: 100px;
}

/* 标题条下方与内容的间距 */
.section-title-row {
  margin-bottom: 60px;
}

/* 手机端 */
@media (max-width: 700px) {
  .product-overview,
  .pain-points,
  .features-block,
  .advantages,
  .value-strip,
  .roles-section,
  .contact-section {
    padding-top: 0;
    padding-bottom: 60px;
  }
  .section-title-row {
    margin-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
   49. 首页 - 区块导航
   -------------------------------------------------------------------------- */

.home-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.home-nav a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.home-nav a:hover {
  background: #eaf2fc;
  color: #0c2d6b;
  border-color: #93c5fd;
  transform: translateY(-2px);
}

/* "全部"默认高亮 */
.home-nav a[href="#top"] {
  background: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}

/* 点击其他锚点后，"全部"取消高亮 */
body:has(#overview:target)   .home-nav a[href="#top"],
body:has(#pain:target)       .home-nav a[href="#top"],
body:has(#product:target)    .home-nav a[href="#top"],
body:has(#advantages:target) .home-nav a[href="#top"],
body:has(#value:target)      .home-nav a[href="#top"],
body:has(#scenarios:target)  .home-nav a[href="#top"],
body:has(#contact:target)    .home-nav a[href="#top"] {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

/* 点击的锚点按钮高亮 */
body:has(#overview:target)   .home-nav a[href="#overview"],
body:has(#pain:target)       .home-nav a[href="#pain"],
body:has(#product:target)    .home-nav a[href="#product"],
body:has(#advantages:target) .home-nav a[href="#advantages"],
body:has(#value:target)      .home-nav a[href="#value"],
body:has(#scenarios:target)  .home-nav a[href="#scenarios"],
body:has(#contact:target)    .home-nav a[href="#contact"] {
  background: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}

/* Homepage core capabilities only. */
.home-core-capabilities {
  padding: 68px clamp(20px, 4vw, 56px) 76px;
  background: #f7faff;
}

.home-overview {
  padding: clamp(56px, 6vw, 76px) max(24px, calc((100vw - 1200px) / 2));
  background: #f4f7fb;
}

.home-overview-inner {
  display: grid;
  width: min(100%, 1200px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}

.home-overview-copy { min-width: 0; }

.home-overview-eyebrow {
  margin: 0 0 12px;
  color: #2762a5;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.home-overview-copy h2 {
  margin: 0 0 18px;
  color: #123b70;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.38;
  letter-spacing: -0.04em;
}

.home-overview .product-overview-desc {
  width: auto;
  max-width: 34em;
  margin: 0;
  padding: 0;
  color: #4a5a72;
  font-size: 17px !important;
  line-height: 1.85;
}

.home-overview-visual {
  min-width: 0;
  margin: 0;
  padding: clamp(8px, 1vw, 13px);
  border: 1px solid #e2eaf4;
  border-radius: 22px;
  background: #edf4fc;
  box-shadow: 0 12px 30px rgba(28, 62, 104, 0.1);
}

.home-overview-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}

.home-core-capabilities .section-title-row {
  justify-content: center;
  margin-bottom: 12px;
}

.home-core-capabilities .section-title-box {
  justify-content: center;
  padding: 0;
  background: transparent !important;
}

.home-core-capabilities .section-title-box h2 {
  color: #123b70;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.035em;
  text-align: center;
}

.home-core-capabilities .center-subtitle {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #586b83;
  text-align: center;
}

.home-capability-grid {
  display: grid;
  width: min(100%, 1200px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.home-capability-card {
  min-width: 0;
  padding: 32px 34px 30px;
  border: 1px solid #d4e2f5;
  border-radius: 18px;
  background: #eaf2ff;
  box-shadow: 0 4px 14px rgba(24, 62, 110, 0.05);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-capability-card:hover {
  transform: translateY(-3px);
  border-color: #b9d2f1;
  box-shadow: 0 10px 24px rgba(24, 62, 110, 0.09);
}

.home-capability-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 13px;
  background: #dceaff;
  color: #2166b5;
}

.home-capability-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.home-capability-card h3 {
  margin: 0 0 9px;
  color: #173e70;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.home-capability-card p {
  margin: 0;
  color: #5b6b80;
  font-size: 14px;
  line-height: 1.75;
}

.home-pain-points {
  padding: 76px clamp(20px, 4vw, 56px);
  background: #fff;
}

.home-pain-points .section-title-row,
.home-advantages .section-title-row,
.home-value .section-title-row {
  margin-bottom: 16px;
}

.home-pain-points > .center-subtitle,
.home-advantages > .center-subtitle {
  margin-bottom: 30px;
}

.home-pain-grid {
  display: grid;
  max-width: 1100px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
}

.home-pain-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 22px 0;
  border-bottom: 1px solid #e7edf5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-pain-card:hover { transform: none; box-shadow: none; }
.home-pain-card .pain-icon { width: 42px; height: 42px; margin: 0; font-size: 21px; }
.home-pain-card h3 { margin: 1px 0 6px; font-size: 17px; }
.home-pain-card p { font-size: 14px; line-height: 1.65; }
.home-pain-card .home-pain-resolution { margin-top: 8px; color: #345d89; }
.home-pain-resolution strong { margin-right: 5px; color: #1e5ea8; font-weight: 700; }

.home-advantages {
  padding: 76px clamp(20px, 4vw, 56px);
  background: #fff;
}

.home-advantages .advantages-grid {
  max-width: 1100px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.home-advantages .advantage-item {
  min-width: 0;
  padding: 12px 22px;
  border-left: 1px solid #d8e3f0;
  border-radius: 0;
  background: transparent;
  transition: border-color 180ms ease;
}

.home-advantages .advantage-item:first-child { border-left: 0; }
.home-advantages .advantage-item:hover { transform: none; border-color: #4b86c5; background: transparent; }
.home-advantages .advantage-num { margin-bottom: 10px; }
.home-advantages .advantage-item h3 { font-size: 16px; line-height: 1.5; }
.home-advantages .advantage-item p { font-size: 13px; line-height: 1.7; }

.home-value {
  padding: 76px 24px;
  background: #f4f7fb;
}

.home-value .value-inner { width: min(100%, 1200px); margin-inline: auto; }
.home-value .value-cards { gap: 24px; }
.home-value .value-card {
  min-width: 0;
  padding: 14px 22px;
  border-left: 1px solid #d4dfec;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color 180ms ease;
}
.home-value .value-card:first-child { border-left: 0; }
.home-value .value-card:hover { transform: none; box-shadow: none; }
.home-value .value-icon { background: #e6eef9; }

.home-roles .roles-intro { margin-bottom: 28px; }
.home-roles .role-grid { max-width: 1100px; margin: 0 auto 32px; gap: 36px; }
.home-roles .role-grid article { min-width: 0; }
.home-roles .role-grid p,
.home-roles .role-grid li { line-height: 1.75; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .home-advantages .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .home-advantages .advantage-item:nth-child(odd) { border-left: 0; }
}

@media (max-width: 700px) {
  .home-core-capabilities { padding: 48px 18px 56px; }
  .home-core-capabilities .center-subtitle { margin-bottom: 22px; }
  .home-capability-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-capability-card { padding: 19px 17px; border-radius: 14px; }
  .home-capability-icon { width: 42px; height: 42px; margin-bottom: 14px; border-radius: 11px; }
  .home-capability-icon svg { width: 22px; height: 22px; }
  .home-capability-card h3 { font-size: 17px; }
  .home-capability-card p { font-size: 13px; }
  .home-pain-points,
  .home-advantages { padding: 52px 22px; }
  .home-pain-grid { grid-template-columns: minmax(0, 1fr); }
  .home-pain-card { padding: 18px 0; }
  .home-advantages .advantages-grid { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .home-advantages .advantage-item,
  .home-advantages .advantage-item:first-child,
  .home-advantages .advantage-item:nth-child(odd) { padding: 14px 4px; border-left: 0; border-bottom: 1px solid #e1e9f2; }
  .home-value { padding: 52px 22px; }
  .home-value .value-inner { padding: 0; }
  .home-value .value-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-value .value-card,
  .home-value .value-card:first-child { padding: 16px 0; border-left: 0; border-bottom: 1px solid #d4dfec; }
  .home-overview { padding: 48px 22px 56px; }
  .home-overview-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-overview-copy { max-width: 620px; }
  .home-overview .product-overview-desc { max-width: 42em; font-size: 16px !important; line-height: 1.8; }
  .home-roles .role-grid { gap: 24px; }
}

@media (max-width: 480px) {
  .home-capability-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .home-capability-icon { grid-row: span 2; margin: 0; }
  .home-capability-card h3 { margin-bottom: 3px; }
}

/* 手机端 */
@media (max-width: 700px) {
  .home-nav-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;                  /* 导航盒已由 .shell 提供左右内边距，这里不再叠加 */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-nav-inner::-webkit-scrollbar { display: none; }
  .home-nav a {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   50. 首页 - 导航吸顶（覆盖 49 节）
   -------------------------------------------------------------------------- */

/* 与产品体验页(.experience-nav)保持一致：吸顶元素本身保持普通块级盒，
   不再用 width:100vw + 负外边距把自己撑出 .shell；跨栏背景、分割线与阴影
   改由 ::before 绘制，这样吸顶盒不会横向溢出父容器。 */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  isolation: isolate;            /* 让 ::before 的 z-index:-1 只作用于本导航内部 */
  padding: 16px 0;
  background: #ffffff;
}

/* 跨栏背景：视觉上仍铺满整屏，但不影响 .home-nav 自身的盒模型与吸顶 */
.home-nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 4px 12px -6px rgba(22, 41, 74, 0.08);
}

/* 手机端分类导航同样贴齐视口顶部，并收窄内边距。
   注意：.home-nav 必须是 <main> 的直接子元素，父级要覆盖整页高度；
   一旦被短容器（如旧的 .home-nav-slot）包住，sticky 的粘滞范围就只到
   该容器底边，导航会随滚动滑出视口。 */
@media (max-width: 700px) {
  .home-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 12px 0;
  }
}

/* --------------------------------------------------------------------------
   51. 首页区块滚动偏移（防止标题被吸顶导航遮挡）
   -------------------------------------------------------------------------- */
#top,
#overview,
#pain,
#product,
#advantages,
#value,
#scenarios,
#contact {
  /* 吸顶偏移：html 的 scroll-padding-top(100px) 与本值相加才是总偏移。
     70px → 总偏移 170px，跳转后目标标题落在吸顶导航条下方约 20px。 */
  scroll-margin-top: 70px;
}

@media (max-width: 700px) {
  #top,
  #overview,
  #pain,
  #product,
  #advantages,
  #value,
  #scenarios,
  #contact {
    /* 手机端总偏移 = 100 + 40 = 140px */
    scroll-margin-top: 40px;
  }
}

/* ==========================================================================
   53. 品牌价值 - 双端重组
   ========================================================================== */

/* 双列网格 */
.terminal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 50px;
}

/* 单列卡片 */
.terminal-column {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 12px 40px -16px rgba(22, 41, 74, 0.12);
  border-top: 4px solid #1e40af;
  transition: transform 0.3s, box-shadow 0.3s;
}

.terminal-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(22, 41, 74, 0.2);
}

/* 卡片头部：图标 + 标题 */
.terminal-column-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eaf2fc;
}

.terminal-column-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #eaf2fc;
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}

.terminal-column-head h3 {
  font-size: 22px;
  color: #0c2d6b;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.terminal-column-role {
  font-size: 13px;
  color: #5b6b85;
  margin: 0;
}

/* 能力列表 */
.terminal-column-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terminal-column-list li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 15px;
  color: #4a5a72;
  line-height: 1.6;
  border-bottom: 1px dashed #eaf2fc;
}

.terminal-column-list li:last-child {
  border-bottom: none;
}

.terminal-column-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* 查看完整功能按钮 */
.terminal-more {
  text-align: center;
}

.terminal-more .button {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  gap: 12px;
}

/* 手机端 */
@media (max-width: 768px) {
  .terminal-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .terminal-column {
    padding: 28px 24px;
    border-radius: 16px;
  }
  .terminal-column-head {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .terminal-column-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 12px;
  }
  .terminal-column-head h3 { font-size: 19px; }
  .terminal-column-list li { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   54. 标题条颜色加深（覆盖之前定义）
   -------------------------------------------------------------------------- */
.section-title-box {
  background: #dbe7f7 !important;   /* 从 #eaf2fc 加深到 #dbe7f7 */
}

/* ==========================================================================
   55. 功能页 - 顶部开篇介绍（紧凑版）
   ========================================================================== */

/* 区块本身：上下留白缩小 */
.features-header {
  background: #f4f7fb;
  padding: 40px 0 50px;
}

/* 面包屑：保持不变，稍微紧凑 */
.features-breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* 主标题：字号从 48px 缩小到 32-36px */
.features-main-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: #0c2d6b;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

/* 开篇介绍文字 */
.features-lead {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 800px;
}

/* 双端卡片行 */
.features-terminal-row {
  margin: 0 auto;          /* ★ 新增：水平居中 */
}

/* 单张卡片 */

/* 图标 */
.features-terminal-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eaf2fc;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

/* 文字区 */

/* 手机端 */
@media (max-width: 768px) {
  .features-header { padding: 30px 0 36px; }
  .features-main-title { font-size: 24px; }
  .features-lead { font-size: 15px; margin-bottom: 24px; }
  .features-terminal-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 8px;
  }
}

/* --------------------------------------------------------------------------
   56. 首页标题条 - 统一为功能详情页样式（深蓝渐变 + 白字）
   -------------------------------------------------------------------------- */
.home-page .section-title-box,
.product-overview .section-title-box,
.pain-points .section-title-box,
.features-block .section-title-box,
.advantages .section-title-box,
.value-strip .section-title-box,
.roles-section .section-title-box,
.contact-section .section-title-box {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
}

.home-page .section-title-box h2,
.product-overview .section-title-box h2,
.pain-points .section-title-box h2,
.features-block .section-title-box h2,
.advantages .section-title-box h2,
.value-strip .section-title-box h2,
.roles-section .section-title-box h2,
.contact-section .section-title-box h2 {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   57. 功能页 - 双端卡片（带真实图标）
   -------------------------------------------------------------------------- */

.features-terminal-item {          /* 图标和文字垂直居中 */
  gap: 20px;
  border-left: 4px solid #1e40af;
}

/* 真实图标 */

/* 文字区 */
.features-terminal-text {
  min-width: 0;
}

/* 手机端：图标稍小，卡片改单列 */
@media (max-width: 768px) {
  .features-terminal-item {
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   58. 功能页 - 双端卡片（方案2：图标居中大气版）
   -------------------------------------------------------------------------- */

.features-terminal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
}

/* 卡片：纵向布局，全部居中 */
.features-terminal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #dbe4f0;
  border-top: 4px solid #1e40af;
  transition: transform 0.3s, box-shadow 0.3s;
}

.features-terminal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(22, 41, 74, 0.18);
}

/* 大图标 */
.features-terminal-icon-img {
  flex-shrink: 0;
  display: block;
}

/* 文字区：居中 */
.features-terminal-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.features-terminal-text strong {
  font-size: 20px;
  color: #0c2d6b;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.features-terminal-text span {
  font-size: 14px;
  color: #5b6b85;
  line-height: 1.8;
  max-width: 320px;
}

/* 手机端 */
@media (max-width: 768px) {
  .features-terminal-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .features-terminal-item {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .features-terminal-text strong { font-size: 17px; }
  .features-terminal-text span { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   59. 双端卡片图标 - 放大版
   -------------------------------------------------------------------------- */

.features-terminal-icon-img {
  width: 140px;                    /* ★ 从 100px 放大到 140px */
  height: 140px;
   object-fit: contain;          /* ★ 关键：保持比例，完整显示 */
  border-radius: 28px;
  margin-bottom: 28px;
  box-shadow: 0 20px 40px -16px rgba(30, 64, 175, 0.4);
}

@media (max-width: 768px) {
  .features-terminal-icon-img {
    width: 100px;                  /* 手机端也放大一点 */
    height: 100px;
    border-radius: 22px;
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   60. 产品概述描述文字 - 放大
   -------------------------------------------------------------------------- */
.product-overview-desc {
  font-size: 19px !important;      /* 从 16px 放大到 19px */
  line-height: 2;                   /* 行高也稍微加大，阅读更舒服 */
  color: #4a5a72;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .product-overview-desc {
    font-size: 16px;               /* 手机端回到 16px，避免太大 */
    line-height: 1.9;
  }
}

/* --------------------------------------------------------------------------
   62. 帮助文档 - 截图尺寸修正（覆盖 61 节）
   -------------------------------------------------------------------------- */
.guide-figure img {
  width: 100%;
  max-width: 720px;              /* ★ 限制最大宽度，不撑满内容区 */
  height: auto;
  display: block;
  margin: 0 auto;                /* ★ 居中 */
  border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(22, 41, 74, 0.2);
  background: #fff;
  border: 1px solid #eaf2fc;
}

@media (max-width: 768px) {
  .guide-figure img {
    max-width: 100%;             /* 手机端可以撑满 */
  }
}

/* --------------------------------------------------------------------------
   62. 帮助文档 - 竖屏截图（手机截图）尺寸限制
   -------------------------------------------------------------------------- */
.guide-figure-portrait img {
  max-width: 100%;
  max-height: 500px;              /* ★ 限制最大高度 */
  width: auto;                    /* 宽度按比例自动 */
  margin: 0 auto;
  display: block;
}

@media (max-width: 768px) {
}

/* --------------------------------------------------------------------------
   63. 帮助文档 - 多张图并排
   -------------------------------------------------------------------------- */
.guide-figure-row {
  display: flex;
  gap: 16px;
  margin: 28px 0;
  align-items: flex-start;
}

.guide-figure-row .guide-figure {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.guide-figure-row .guide-figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 500px;      /* 高度和竖屏图一致 */
  object-fit: contain;    /* 保持比例，完整显示 */
  margin: 0 auto;
  display: block;
}

/* 手机端：改成纵向排列 */
@media (max-width: 768px) {
  .guide-figure-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   64. 帮助文档 - 去掉图片边框和阴影（覆盖之前定义）
   -------------------------------------------------------------------------- */
.guide-figure-row .guide-figure img {
  border: none;                  /* ★ 去掉白色边框 */
  box-shadow: none;              /* ★ 去掉阴影 */
  border-radius: 8px;            /* 圆角保留一点，也可以删 */
  background: transparent;       /* ★ 去掉白色背景 */
}

/* ==========================================================================
   65. 手机端（≤768px）细节修复
   范围：仅 @media (max-width: 768px)，桌面端（>768px）样式不受影响。
   关联问题：H4 / H1 / GD3 / GD4
   ========================================================================== */
@media (max-width: 768px) {
  /* H4 模块导航在 375px 下横向溢出：改为单行横向滚动，隐藏滚动条 */
  .home-nav-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;   /* 配合 nowrap，避免居中导致左侧项滚不到 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .home-nav-inner::-webkit-scrollbar { display: none; }
  .home-nav a { flex-shrink: 0; }

  /* H1 首页轮播图在 375px 下右侧被切。
     成因：≤700px 的规则把 margin 改成 20px 22px 0，而宽度仍是 100vw
     （第 14 节「铺满浏览器」），多出的 22px 被 body 的 overflow-x: clip 裁掉。
     这里按视口重新计算宽度与左偏移，使左右各留 22px，右侧不再溢出。 */
  .poster-carousel {
    max-width: 100vw;
    overflow: hidden;
    width: calc(100vw - 44px);
    margin-left: calc(50% - 50vw + 22px);
    margin-right: 0;
  }

  /* GD3 帮助文档正文在 375px 下左边距过深：收窄列表缩进（含嵌套列表） */
  .guide-content ol,
  .guide-content ul,
  .guide-content ol ul,
  .guide-content ul ul { padding-left: 16px; }

  /* GD4 帮助文档截图在 375px 下太小：取消高度上限，按容器宽度自适应 */
  .guide-figure-portrait img {
    max-height: none;              /* 原 500px 上限过紧 */
    max-width: 100%;
    height: auto;
  }
  .guide-figure-row .guide-figure { width: 100%; }
  .guide-figure-row .guide-figure img {
    max-height: none;              /* 原 400px 上限过紧 */
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   67. 无障碍修复
   ========================================================================== */

/* 键盘聚焦时出现的“跳到正文”链接需盖在吸顶元素之上，避免被遮挡。
   模块导航 z-index 20，跳转链接取 40 保证在最上层。 */
.skip-link {
  z-index: 40;
}

/* ==========================================================================
   68. 手机端帮助文档折叠目录（<details> 原生折叠，无客户端 JS）
   ========================================================================== */

/* 桌面端（>768px）隐藏折叠目录，侧边 .guide-nav 保持原样 */
.guide-nav-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* 手机端隐藏桌面端侧边目录 */
  .guide-grid .guide-nav {
    display: none;
  }

  /* 手机端显示折叠目录 */
  .guide-nav-mobile {
    display: block;
    margin-bottom: 24px;
  }

  /* 折叠按钮样式 */
  .guide-nav-mobile summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 14px 18px;
    background: #eaf2fc;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1e40af;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
  }
  .guide-nav-mobile summary::-webkit-details-marker {
    display: none;
  }
  .guide-nav-mobile summary:hover {
    background: #dbe7f7;
  }
  .guide-nav-mobile[open] summary {
    border-radius: 10px 10px 0 0;
  }

  /* 展开的目录面板 */
  .guide-nav-dropdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .guide-nav-dropdown .guide-nav-group {
    font-size: 12px;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 1px;
    margin: 12px 0 4px;
  }

  .guide-nav-dropdown a {
    font-size: 14px;
    color: #4a5a72;
    padding: 6px 0;
    line-height: 1.6;
  }

  .guide-nav-dropdown a:hover {
    color: #1e40af;
  }

  /* 子级缩进和竖线保留 */
  .guide-nav-dropdown a.guide-nav-sub {
    padding-left: 16px;
    font-size: 13px;
    color: #6b7b95;
    position: relative;
  }
  .guide-nav-dropdown a.guide-nav-sub::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: #dbe4f0;
  }

  /* 正文全宽 */
  .guide-content {
    max-width: 100%;
  }
}

/* 首页主视觉优化：保持内容与插画结构，仅统一最终展示样式。 */
.hero {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
  padding-top: clamp(64px, 7vw, 92px);
  padding-bottom: clamp(64px, 7vw, 92px);
  background: linear-gradient(135deg, #f4f9ff 0%, #eaf3ff 55%, #f7fbff 100%);
}

.hero-copy {
  width: 100%;
  max-width: 560px;
}

.hero h1 {
  max-width: 10em;
  color: #123b78;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.18;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero-description {
  max-width: 32em;
  color: #536b8d;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.85;
}

.hero .button-primary {
  min-height: 54px;
  padding: 16px 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2878ed, #1552b4);
  box-shadow: 0 10px 24px rgba(31, 103, 205, 0.24);
}

.hero .button-primary:hover {
  background: linear-gradient(135deg, #216bd8, #103f91);
  box-shadow: 0 12px 28px rgba(31, 103, 205, 0.3);
}

.hero .button-primary:focus-visible {
  outline: 3px solid #8bc3ff;
  outline-offset: 4px;
}

.hero-art {
  width: 100%;
  height: auto;
  min-height: 0;
  background: transparent;
}

.table-rim {
  inset: 28px 24px 66px;
  border: 8px solid #315b91;
  border-radius: 130px 130px 12px 12px;
  background: linear-gradient(145deg, #527bad, #294b79);
  box-shadow: 0 18px 28px rgba(21, 55, 95, 0.28);
}

.table-felt {
  border-color: #91b5d4;
  background: radial-gradient(ellipse at 32% 26%, #3f9b8d, #176f70 72%, #145964);
}

.pocket {
  background: #183a4b;
  border-color: #b7d0df;
}

.aim-line {
  border-color: rgba(225, 244, 255, 0.72);
}

.art-label {
  color: #24466c;
  font-weight: 600;
}

.art-label-en {
  color: #66809d;
}

@media (max-width: 700px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 46px 22px 42px;
  }

  .hero-copy {
    max-width: 560px;
    margin: 0 auto;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(38px, 10vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.035em;
  }

  .hero-description {
    max-width: 100%;
    margin: 18px 0 24px;
    font-size: 16px;
  }

  .hero .actions {
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero .button-primary {
    min-height: 50px;
    padding: 14px 20px;
  }

  .hero-art {
    width: 100%;
    max-width: 470px;
    height: auto;
    justify-self: center;
  }

  .table-rim {
    inset: 18px 18px 60px;
    border-width: 6px;
    border-radius: 96px 96px 10px 10px;
    transform: rotate(-5deg) translateY(18px);
  }

  .ball {
    width: 48px;
    height: 48px;
  }

  .ball-cue {
    width: 43px;
    height: 43px;
  }

  .ball b {
    width: 23px;
    height: 23px;
    font-size: 18px;
  }

  .cue-stick {
    height: 190px;
  }

  .art-label {
    left: 20px;
    right: 16px;
    bottom: 16px;
    font-size: 12px;
  }

  .art-label-en {
    font-size: 8px;
  }
}

/* Feature page: consistent business groups and compact screenshot rows. */
.feature-modules {
  counter-reset: feature-module;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 32px 36px 72px;
  box-sizing: border-box;
}

.module {
  counter-increment: feature-module;
  margin: 0;
  padding: clamp(24px, 3.5vw, 42px);
  scroll-margin-top: 138px;
  border: 1px solid #e1eaf5;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(30, 64, 110, 0.045);
  text-align: left;
}

.module:nth-child(even) {
  background: #f7faff;
}

.module-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 24px;
  width: auto;
  margin: 0 0 28px;
  padding: 0 0 20px;
  border-bottom: 1px solid #dfe9f5;
  background: transparent;
  color: #123b78;
  text-align: left;
}

.module-head h2 {
  margin: 0;
  color: #123b78;
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.module-head h2::before {
  content: counter(feature-module, decimal-leading-zero);
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  place-items: center;
  border-radius: 10px;
  background: #e8f2ff;
  color: #3473bf;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  vertical-align: 4px;
}

.module-head p {
  display: block;
  max-width: 620px;
  margin: 0;
  color: #5b6b85;
  font-size: 15px;
  line-height: 1.8;
}

.feature-rows {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 28px;
}

.feature-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
  padding: 0 0 28px;
  border-bottom: 1px solid #e7eef7;
}

.feature-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.feature-img {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #e1eaf5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(29, 62, 102, 0.08);
}

.feature-img img {
  width: 100%;
  max-width: 390px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: none;
}

.feature-text h3,
.member-row-text h3 {
  margin: 0 0 14px;
  color: #123b78;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.feature-text p,
.member-row-text p {
  margin: 0;
  color: #53647e;
  font-size: 15px;
  line-height: 1.85;
}

.feature-icon-lg {
  width: 150px;
  height: 150px;
  border: 1px solid #dce9f8;
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff, #eaf3ff);
  color: #3473bf;
  font-size: 64px;
  box-shadow: 0 12px 28px rgba(29, 62, 102, 0.08);
}

.member-row,
.member-row.reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 52px);
  max-width: none;
  margin: 0;
  padding: 0 0 28px;
  align-items: center;
}

.member-row + .member-row {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #e7eef7;
}

.member-row.reverse {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.member-row-images {
  align-items: flex-start;
  gap: 14px;
}

.member-row-images img {
  max-width: 280px;
  border: 1px solid #e1eaf5;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(29, 62, 102, 0.08);
}

@media (max-width: 900px) {
  .module-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
  }

  .feature-row,
  .member-row,
  .member-row.reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .feature-row.reverse .feature-img,
  .member-row.reverse .member-row-images {
    order: 0;
  }

  .feature-row.reverse .feature-text,
  .member-row.reverse .member-row-text {
    order: 0;
  }

  .member-row + .member-row {
    margin-top: 24px;
    padding-top: 24px;
  }
}

@media (max-width: 700px) {
  .feature-modules {
    gap: 16px;
    padding: 20px 14px 48px;
  }

  .module {
    padding: 22px 18px;
    border-radius: 18px;
    scroll-margin-top: 122px;
  }

  .module-head {
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 16px;
  }

  .module-head h2 {
    font-size: 23px;
  }

  .module-head h2::before {
    width: 30px;
    height: 30px;
    margin-right: 9px;
    font-size: 12px;
    vertical-align: 3px;
  }

  .module-head p {
    font-size: 14px;
  }

  .feature-rows {
    gap: 22px;
  }

  .feature-row {
    gap: 18px;
    padding-bottom: 22px;
  }

  .feature-img {
    padding: 8px;
    border-radius: 15px;
  }

  .feature-img img {
    max-width: 360px;
  }

  .feature-text h3,
  .member-row-text h3 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .feature-text p,
  .member-row-text p {
    font-size: 14px;
    line-height: 1.8;
  }

  .member-row-images img {
    max-width: 300px;
  }
}

/* 首页首屏：统一轮播视窗高度，完整保留海报画面。
   比例与 src/assets 中 5 张海报的实际尺寸 2560×832 一致；不设 max-height，
   否则宽屏下会被压成更扁的比例，object-fit: contain 又会重新露出上下留白。 */
.poster-carousel {
  height: auto;
  aspect-ratio: 2560 / 832;
  max-height: none;
  margin-top: 0;
  background: #f4f8fd;
}

/* 首页轮播直接贴合顶部导航，明确清除主容器与首个区块的顶部间距。 */
.site-header + #main {
  padding-top: 0;
}

.site-header + #main > .poster-carousel {
  margin-top: 0;
}

.carousel-track {
  height: 100%;
  align-items: stretch;
}

.carousel-slide {
  height: 100%;
  display: grid;
  place-items: start center;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.poster-carousel + .hero {
  padding-top: clamp(24px, 2vw, 32px);
}

@media (max-width: 768px) {
  .poster-carousel {
    height: auto;
    aspect-ratio: 2560 / 832;
    max-height: none;
    margin-top: 0;
  }

  .site-header + #main > .poster-carousel {
    margin-top: 0;
  }

  .carousel-track,
  .carousel-slide {
    height: 100%;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .poster-carousel + .hero {
    padding-top: 18px;
  }
}

/* Homepage hero miniature image frame. */
.hero-art {
  overflow: hidden;
  border: 1px solid rgba(111, 164, 225, 0.3);
  border-radius: 26px;
  background: linear-gradient(145deg, #dcecff, #c8e0ff);
  box-shadow: 0 24px 56px rgba(42, 104, 180, 0.16);
}

.hero-miniature-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 深蓝站点导航：桌面与移动端顶栏统一使用品牌色。 */
.site-header {
  border-bottom-color: #1e40af;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: #f4f8ff;
}

.site-header .brand-text,
.site-header .brand-sub {
  color: #f4f8ff;
}

.site-header .site-nav a {
  color: #e2edfb;
}

.site-header .site-nav a.is-active {
  color: #ffffff;
}

.site-header .site-nav a.is-active::after {
  background: linear-gradient(90deg, #9bd2ff, #ffffff);
  box-shadow: 0 2px 10px rgba(146, 204, 255, 0.5);
}

.site-header .site-nav a:not(.nav-contact):not(.is-active):hover {
  color: #a9d5ff;
}

.site-header .site-nav .nav-contact {
  border-color: rgba(220, 237, 255, 0.72);
  color: #ffffff;
}

.site-header .site-nav .nav-contact:hover {
  background: rgba(255, 255, 255, 0.12);
}

.site-header .site-nav-mobile summary {
  border-color: rgba(220, 237, 255, 0.58);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* 首页首屏：收敛为单一产品介绍区，保留左文右图结构。 */
.hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  min-height: 0;
  padding-top: clamp(52px, 6vw, 76px);
  padding-bottom: clamp(52px, 6vw, 76px);
  background: linear-gradient(135deg, #f0f7ff 0%, #e5f1ff 54%, #f5faff 100%);
}

.hero-copy {
  max-width: 520px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 7px 12px;
  border: 1px solid #d5e7fb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #3972b9;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.hero h1 {
  display: grid;
  gap: 2px;
  max-width: 10em;
  margin: 0;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.055em;
}

.hero-title-accent {
  width: fit-content;
  background: linear-gradient(100deg, #1d5db6 8%, #438bea 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  max-width: 34em;
  margin: 22px 0 28px;
  line-height: 1.9;
}

.hero .actions {
  gap: 14px;
  flex-wrap: wrap;
}

.hero .actions .button {
  min-height: 52px;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.hero .actions .button-outline {
  border: 1px solid #2b5fae;
  background: #ffffff;
  color: #194b96;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero .actions .button-outline:hover {
  border-color: #194b96;
  background: #edf5ff;
  color: #123b78;
}

.hero-art {
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1323 / 816;
  justify-self: end;
  align-self: center;
  border-color: rgba(112, 170, 235, 0.28);
  background: linear-gradient(145deg, #eaf5ff, #d9ebff);
  box-shadow: 0 22px 52px rgba(42, 104, 180, 0.14);
}

.hero-miniature-image {
  height: 100%;
  object-fit: contain;
}

@media (max-width: 700px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 42px 24px 46px;
  }

  .hero-copy {
    max-width: 560px;
  }

  .hero-kicker {
    margin-bottom: 14px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .hero h1 {
    font-size: clamp(36px, 9vw, 46px);
  }

  .hero-description {
    margin: 16px 0 22px;
    font-size: 16px;
  }

  .hero .actions {
    gap: 12px;
  }

  .hero .actions .button {
    min-height: 48px;
    padding: 12px 16px;
  }

  .hero-art {
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }
}

/* Independent product experience page. */
.experience-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  color: #16294a;
  background: #f4f8fd;
}

.experience-shell {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

.experience-hero {
  overflow: hidden;
  padding: clamp(48px, 5.6vw, 72px) 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e5f1ff 54%, #f5faff 100%);
}

.experience-hero-inner {
  display: grid;
  max-width: 1300px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.experience-hero-copy {
  max-width: 560px;
  animation: heroSlideInLeft 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.experience-hero-art {
  width: 100%;
  max-width: 650px;
  margin-right: -24px;
  justify-self: end;
  animation: heroSlideInRight 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s backwards;
}

.experience-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 22px 52px rgba(42, 104, 180, 0.14);
}

.experience-hero .experience-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 7px 12px;
  border: 1px solid #d5e7fb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #3972b9;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.experience-hero h1 {
  max-width: 10em;
  margin: 0;
  background: linear-gradient(100deg, #173d70 4%, #1d5db6 78%, #438bea 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.055em;
}

.experience-lead {
  max-width: 34em;
  margin: 22px 0 28px;
  color: #526d8e;
  font-size: 16px;
  line-height: 1.9;
}

.experience-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.experience-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 650;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.experience-button:hover {
  transform: translateY(-2px);
}

.experience-button-primary {
  background: linear-gradient(135deg, #2878ed, #1552b4);
  box-shadow: 0 10px 24px rgba(31, 103, 205, 0.2);
  color: #ffffff;
}

.experience-button-primary:hover {
  background: #174a9c;
  color: #ffffff;
}

.experience-button-outline {
  border-color: #c7d9ef;
  background: rgba(255, 255, 255, 0.72);
  color: #194b96;
}

.experience-button-outline:hover {
  border-color: #8db5e5;
  background: #ffffff;
  color: #123b78;
}

.experience-terminals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.experience-terminals span {
  padding: 8px 13px;
  border: 1px solid #d5e7fb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #496888;
  font-size: 13px;
}

.experience-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  border-bottom: 1px solid #dce6f2;
  padding: 16px 0;
  background: #ffffff;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px -6px rgba(22, 41, 74, 0.08);
}

.experience-nav-inner {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  scrollbar-width: none;
}

.experience-nav-inner::-webkit-scrollbar {
  display: none;
}

.experience-nav a {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #ffffff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.experience-nav a:hover,
.experience-nav a:focus-visible {
  border-color: #93c5fd;
  background: #eaf2fc;
  color: #0c2d6b;
  transform: translateY(-2px);
}

.experience-nav a[href="#open-table"] {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

body:has(#orders:target) .experience-nav a[href="#open-table"],
body:has(#members:target) .experience-nav a[href="#open-table"],
body:has(#goods-assist:target) .experience-nav a[href="#open-table"],
body:has(#stores:target) .experience-nav a[href="#open-table"] {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

body:has(#orders:target) .experience-nav a[href="#orders"],
body:has(#members:target) .experience-nav a[href="#members"],
body:has(#goods-assist:target) .experience-nav a[href="#goods-assist"],
body:has(#stores:target) .experience-nav a[href="#stores"] {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

.experience-groups {
  display: grid;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.experience-group {
  scroll-margin-top: 148px;
  padding: clamp(22px, 3.5vw, 42px);
  border: 1px solid #e0eaf5;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(28, 63, 108, 0.055);
}

.experience-group:nth-child(even) {
  background: #f9fbff;
}

.experience-group-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(26px, 4vw, 56px);
}

/* 订单收银的截图是整屏界面：图片在左、文字在右，只比其它组略宽一点，
   既能看清表格文字，又不至于占满整行。 */
.experience-group-orders .experience-group-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}

.experience-group-orders .experience-gallery-single {
  width: 100%;
}

.experience-group-orders .experience-shot {
  padding: 12px;
}

.experience-group-orders .experience-shot img {
  width: 100%;
  object-fit: contain;
}

.experience-group-reverse .experience-group-copy {
  order: 2;
}

.experience-group-reverse .experience-gallery {
  order: 1;
}

.experience-group-copy {
  max-width: 430px;
}

.experience-group-index {
  margin-bottom: 12px;
  color: #4781c7;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.experience-group-copy h2 {
  margin: 0 0 12px;
  color: #123b78;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.experience-group-summary {
  margin-bottom: 18px;
  color: #526984;
  font-size: 16px;
  line-height: 1.8;
}

.experience-group-copy ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.experience-group-copy li {
  position: relative;
  padding-left: 22px;
  color: #586b84;
  font-size: 14px;
  line-height: 1.75;
}

.experience-group-copy li::before {
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4388e6;
  content: '';
}

.experience-gallery {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

/* 含「桌面整屏 + 手机」截图的分组：把宽度更多给截图列，手机列略收窄，
   这样桌面截图看得清、手机截图也不至于被压到看不清，整体仍是"左文右图"。 */
.experience-group-layout:has(.experience-gallery-wide-phone) {
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.54fr);
}

.experience-gallery-wide-phone {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.28fr);
}

.experience-gallery-wide-pair,
.experience-gallery-phone-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 两组手机截图统一尺寸：容器固定最大宽度并居中，实际列宽由它决定，
   这样「左文右图」和「左图右文」两种排布得到的截图尺寸完全一致。 */
.experience-gallery-phone-pair {
  width: min(100%, 420px);
  margin-inline: auto;
  gap: clamp(14px, 2vw, 28px);
}

.experience-gallery-single {
  grid-template-columns: minmax(0, 1fr);
}

.experience-shot {
  min-width: 0;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  border: 1px solid #e0e9f4;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(30, 64, 110, 0.09);
}

.experience-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  object-fit: contain;
}

.experience-shot figcaption {
  padding: 9px 3px 1px;
  color: #667890;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.experience-cta {
  padding: 48px 0;
  background: linear-gradient(115deg, #e7f2ff, #f6faff);
  border-top: 1px solid #dfebf8;
}

.experience-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.experience-cta h2 {
  margin: 0 0 8px;
  color: #123b78;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.35;
}

.experience-cta-inner > div:first-child > p:last-child {
  color: #5b6b85;
  font-size: 15px;
}

.experience-cta .experience-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 900px) {
  .experience-group-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .experience-group-orders .experience-group-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-group-reverse .experience-group-copy,
  .experience-group-reverse .experience-gallery {
    order: initial;
  }

  .experience-group-copy {
    max-width: 680px;
  }

  .experience-gallery-wide-phone {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.28fr);
  }
}

@media (max-width: 700px) {
  .experience-hero {
    padding: 42px 0 46px;
  }

  .experience-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .experience-hero-copy {
    max-width: 560px;
  }

  .experience-hero .experience-eyebrow {
    margin-bottom: 14px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .experience-mobile-break {
    display: none;
  }

  .experience-hero h1 {
    font-size: clamp(36px, 9vw, 46px);
  }

  .experience-lead {
    margin: 16px 0 22px;
    font-size: 15px;
  }

  .experience-hero-art {
    max-width: 520px;
    margin-right: 0;
    justify-self: center;
  }

  .experience-hero-art img { border-radius: 16px; }

  .experience-actions {
    gap: 9px;
    margin-top: 20px;
  }

  .experience-button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .experience-terminals {
    margin-top: 20px;
  }

  .experience-nav {
    top: 0;
    padding: 10px 0;
  }

  /* 手机端把 5 个分组按钮压缩到一行放得下；再窄时自动换行，
     而不是横向滚动把首尾两个按钮截掉。 */
  .experience-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding-inline: 10px;
    overflow-x: visible;
  }

  .experience-nav a {
    padding: 6px 7px;
    font-size: 12px;
  }

  .experience-groups {
    gap: 16px;
    padding-top: 22px;
    padding-bottom: 40px;
  }

  .experience-group {
    padding: 20px 16px;
    border-radius: 18px;
    scroll-margin-top: 116px;
  }

  .experience-group-layout {
    gap: 18px;
  }

  .experience-group-index {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .experience-group-copy h2 {
    margin-bottom: 8px;
    font-size: 26px;
  }

  .experience-group-summary {
    margin-bottom: 13px;
    font-size: 15px;
  }

  .experience-group-copy ul {
    gap: 8px;
  }

  .experience-gallery {
    gap: 8px;
  }

  .experience-gallery-wide-phone {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.32fr);
  }

  .experience-shot {
    padding: 6px;
    border-radius: 12px;
  }

  .experience-shot img {
    border-radius: 7px;
  }

  .experience-shot figcaption {
    padding-top: 7px;
    font-size: 10px;
  }

  .experience-cta {
    padding: 34px 0;
  }

  .experience-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .experience-cta .experience-actions {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-hero-copy,
  .experience-hero-art { animation: none; }
}

@media (max-width: 480px) {
  .experience-gallery-wide-phone,
  .experience-gallery-wide-pair,
  .experience-gallery-phone-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-shot-phone,
  .experience-gallery-phone-pair .experience-shot {
    width: min(100%, 260px);
    justify-self: center;
  }
}

/* 功能详情页：突出经营价值与少量代表性操作界面。 */
.feature-page {
  --feature-page-blue: #1d5db6;
  --feature-page-ink: #173d70;
  --feature-page-muted: #526d8e;
  --feature-page-line: #d9e9fa;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  color: var(--feature-page-ink);
}

.feature-page-shell {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.feature-page-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  border-bottom: 1px solid #dce6f2;
  padding: 16px 0;
  background: #ffffff;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px -6px rgba(22, 41, 74, 0.08);
}

.feature-page-nav-inner {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  padding-inline: 24px;
  scrollbar-width: none;
}

.feature-page-nav-inner::-webkit-scrollbar { display: none; }

.feature-page-nav a {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #ffffff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.feature-page-nav a:hover,
.feature-page-nav a:focus-visible {
  border-color: #93c5fd;
  background: #eaf2fc;
  color: #0c2d6b;
  transform: translateY(-2px);
}

.feature-page-nav a[href="#feature-overview"] {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

body:has(#feature-details:target) .feature-page-nav a[href="#feature-overview"] {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

body:has(#feature-details:target) .feature-page-nav a[href="#feature-details"] {
  border-color: #1e40af;
  background: #1e40af;
  color: #ffffff;
}

.feature-overview,
.feature-details { scroll-margin-top: 148px; }

.feature-page-hero {
  overflow: hidden;
  padding: clamp(48px, 5.6vw, 72px) 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e5f1ff 54%, #f5faff 100%);
  border-bottom: 1px solid #dcecff;
}

.feature-page-hero-inner {
  display: grid;
  max-width: 1300px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.feature-page-hero-copy {
  max-width: 560px;
  animation: heroSlideInLeft 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.feature-page-hero-art {
  width: 100%;
  max-width: 650px;
  margin-right: -24px;
  justify-self: end;
  animation: heroSlideInRight 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s backwards;
}

.feature-page-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 22px 52px rgba(42, 104, 180, 0.14);
}

.feature-page-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 7px 12px;
  border: 1px solid #d5e7fb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #3972b9;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.feature-page-hero h1 {
  margin: 0;
  max-width: 10em;
  background: linear-gradient(100deg, #173d70 4%, #1d5db6 78%, #438bea 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.055em;
}

.feature-page-lead {
  max-width: 34em;
  margin: 22px 0 28px;
  color: var(--feature-page-muted);
  font-size: 16px;
  line-height: 1.9;
}

.feature-page-hero .feature-page-actions { gap: 14px; }

.feature-page-hero .feature-page-button {
  min-height: 52px;
  padding-inline: 20px;
  border-radius: 8px;
}

.feature-overview { padding-block: clamp(36px, 4.5vw, 56px); }

.feature-page-section-heading {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.feature-page-section-heading h2,
.feature-page-cta h2 {
  margin: 0;
  color: var(--feature-page-ink);
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.feature-page-section-heading > p:last-child {
  margin: 10px 0 0;
  color: var(--feature-page-muted);
  font-size: 15px;
  line-height: 1.7;
}

.feature-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.feature-overview-card {
  grid-column: span 2;
  min-width: 0;
  padding: 23px 22px 21px;
  border: 1px solid var(--feature-page-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26, 70, 128, 0.055);
}

.feature-overview-card:nth-child(4) { grid-column: 2 / span 2; }
.feature-overview-card:nth-child(5) { grid-column: 4 / span 2; }

.feature-card-index {
  display: inline-block;
  margin-bottom: 13px;
  color: #4a82cb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.feature-overview-card h3 {
  margin: 0 0 11px;
  color: var(--feature-page-ink);
  font-size: 19px;
}

.feature-overview-card p {
  margin: 0;
  color: var(--feature-page-muted);
  font-size: 14px;
  line-height: 1.7;
}

.feature-overview-card p strong { color: #294c7c; font-weight: 700; }

.feature-overview-card .feature-card-value {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf2f9;
  color: #245cb2;
  font-weight: 650;
}

.feature-details {
  padding-block: clamp(38px, 4.8vw, 60px);
  background: #f5f8fd;
  border-block: 1px solid #e8eef7;
}

.feature-details-heading { margin-bottom: 34px; }

.feature-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
  padding: 36px;
  border: 1px solid #e2eaf5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(31, 66, 112, 0.055);
}

.feature-detail + .feature-detail { margin-top: 22px; }
.feature-detail-reverse .feature-detail-visual { order: 2; }
.feature-detail-reverse .feature-detail-copy { order: 1; }

.feature-detail-visual {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid #e4ebf4;
  border-radius: 16px;
  background: #f9fbfe;
}

.feature-detail-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
}

.feature-detail-visual figcaption {
  padding: 10px 4px 1px;
  color: #71819a;
  font-size: 12px;
}

.feature-detail-visual-phone {
  justify-self: center;
  width: min(100%, 350px);
}

.feature-detail-visual-phone img { max-height: 520px; }
.feature-detail-copy { max-width: 470px; }

.feature-detail-index {
  margin: 0 0 10px;
  color: #4380cb;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.07em;
}

.feature-detail-copy h3 {
  margin: 0;
  color: var(--feature-page-ink);
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.feature-detail-intro {
  margin: 13px 0 16px;
  color: var(--feature-page-muted);
  font-size: 15px;
  line-height: 1.8;
}

.feature-detail-copy ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-detail-copy li {
  position: relative;
  padding-left: 19px;
  color: #314e76;
  font-size: 14px;
  line-height: 1.7;
}

.feature-detail-copy li::before {
  position: absolute;
  top: 0.68em;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4d8de0;
  content: "";
}

.feature-page-cta {
  padding-block: 50px;
  background: linear-gradient(120deg, #edf5ff, #f8fbff);
}

.feature-page-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.feature-page-cta h2 { font-size: clamp(23px, 2.6vw, 30px); }

.feature-page-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.feature-page-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.feature-page-button:hover { transform: translateY(-1px); }

.feature-page-button-primary {
  color: #fff;
  background: linear-gradient(135deg, #2e7dde, #1d5db6);
  box-shadow: 0 9px 20px rgba(40, 115, 190, 0.2);
}

.feature-page-button-outline {
  border-color: #8eb7e6;
  color: #194b96;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .feature-page-hero-copy,
  .feature-page-hero-art { animation: none; }
}

@media (max-width: 900px) {
  .feature-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-overview-card,
  .feature-overview-card:nth-child(4),
  .feature-overview-card:nth-child(5) { grid-column: auto; }
  .feature-detail {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
    gap: 28px;
    padding: 26px;
  }
  .feature-detail-visual img { max-height: 340px; }
}

@media (max-width: 700px) {
  .feature-page-shell { width: min(100% - 32px, 560px); }
  .feature-page-nav { top: 0; padding: 12px 0; }
  .feature-page-nav-inner { gap: 6px; padding-inline: 16px; }
  .feature-page-nav a { padding: 8px 14px; font-size: 13px; }
  .feature-overview,
  .feature-details { scroll-margin-top: 120px; }
  .feature-page-hero { padding: 42px 0 46px; }
  .feature-page-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .feature-page-hero-copy { max-width: 560px; }
  .feature-page-hero .feature-page-eyebrow { margin-bottom: 14px; padding: 6px 10px; font-size: 12px; }
  .feature-page-hero h1 { font-size: clamp(36px, 9vw, 46px); }
  .feature-page-lead { margin: 16px 0 22px; font-size: 15px; }
  .feature-page-hero .feature-page-actions { gap: 12px; }
  .feature-page-hero .feature-page-button { min-height: 48px; padding-inline: 15px; }
  .feature-page-hero-art { max-width: 520px; margin-right: 0; justify-self: center; }
  .feature-page-hero-art img { border-radius: 16px; }
  .feature-overview { padding-block: 48px; }
  .feature-page-section-heading { margin-bottom: 24px; text-align: left; }
  .feature-page-section-heading > p:last-child { font-size: 14px; }
  .feature-overview-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-overview-card { padding: 19px; border-radius: 15px; }
  .feature-card-index { margin-bottom: 8px; }
  .feature-overview-card h3 { margin-bottom: 8px; font-size: 18px; }
  .feature-overview-card .feature-card-value { margin-top: 9px; padding-top: 9px; }
  .feature-details { padding-block: 44px; }
  .feature-detail,
  .feature-detail-reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
    border-radius: 17px;
  }
  .feature-detail-reverse .feature-detail-visual,
  .feature-detail-reverse .feature-detail-copy { order: initial; }
  .feature-detail + .feature-detail { margin-top: 14px; }
  .feature-detail-visual img { max-height: none; }
  .feature-detail-visual-phone { width: min(100%, 300px); }
  .feature-detail-copy h3 { font-size: 23px; }
  .feature-detail-intro { margin: 10px 0 13px; font-size: 14px; }
  .feature-page-cta { padding-block: 38px; }
  .feature-page-cta-inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .feature-page-actions { width: 100%; }
  .feature-page-button { flex: 1; padding-inline: 13px; }
}

/* Keep the three primary page heroes aligned at the same desktop height. */
@media (min-width: 701px) {
  .hero,
  .experience-hero,
  .feature-page-hero {
    min-height: 620px;
    box-sizing: border-box;
  }

  .experience-hero-copy,
  .feature-page-hero-copy {
    position: relative;
    top: clamp(8px, 1vw, 14px);
  }

  .experience-hero-art,
  .feature-page-hero-art {
    position: relative;
    top: clamp(22px, 2.8vw, 38px);
  }
}