@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ── 重置 & 基础 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;line-height:1.6;scroll-behavior:smooth}
body{
  font-family:'Space Mono',ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  background:#f5f5f5;
  color:#1f1f1f;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:#1f1f1f;text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none}

/* ── CSS 变量 ── */
:root{
  --c-white:#ffffff;
  --c-light:#f5f5f5;
  --c-mid:#e0e0e0;
  --c-dark:#1f1f1f;
  --c-accent:#1f1f1f;
  --shadow-sm:0 1px 4px rgba(31,31,31,.08);
  --shadow-md:0 4px 12px rgba(31,31,31,.12);
  --shadow-lg:0 8px 24px rgba(31,31,31,.16);
  --shadow-xl:0 16px 48px rgba(31,31,31,.22);
  --nav-w:240px;
  --transition:0.22s cubic-bezier(.4,0,.2,1);
}

/* ── 层级系统 ── */
.layer-1{position:relative;z-index:1;box-shadow:var(--shadow-sm)}
.layer-2{position:relative;z-index:2;box-shadow:var(--shadow-md)}
.layer-3{position:relative;z-index:3;box-shadow:var(--shadow-lg)}
.layer-4{position:relative;z-index:4;box-shadow:var(--shadow-xl)}

/* ── 站点包裹 ── */
.site-wrap{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ════════════════════════════
   左侧固定导航
═══════════════════════════════ */
.site-header{
  position:fixed;
  top:0;left:0;
  width:var(--nav-w);
  height:100vh;
  background:var(--c-dark);
  color:var(--c-white);
  display:flex;
  flex-direction:column;
  padding:0;
  z-index:100;
  box-shadow:var(--shadow-xl);
  overflow-y:auto;
  overflow-x:hidden;
}

.brand-col{
  display:flex;
  align-items:center;
  gap:10px;
  padding:28px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}

.logo-sym{
  font-size:1.4rem;
  color:var(--c-white);
  flex-shrink:0;
}

.logo-mark{
  width:32px;height:32px;
  object-fit:contain;
  flex-shrink:0;
}

.brand-name{
  font-size:.78rem;
  font-weight:700;
  color:var(--c-white);
  letter-spacing:.04em;
  line-height:1.3;
  word-break:break-all;
}
.brand-name:hover{text-decoration:none;opacity:.8}

/* 导航链接区 */
.site-nav{
  flex:1;
  padding:16px 0;
  overflow-y:auto;
}

.site-nav p{
  display:flex;
  flex-direction:column;
  gap:0;
}

.site-nav p a{
  display:block;
  padding:12px 20px;
  font-size:.75rem;
  font-weight:400;
  color:rgba(255,255,255,.75);
  letter-spacing:.03em;
  line-height:1.4;
  border-left:2px solid transparent;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
  min-height:44px;
  word-break:break-all;
}

.site-nav p a:hover{
  color:var(--c-white);
  border-left-color:var(--c-white);
  background:rgba(255,255,255,.06);
  text-decoration:none;
}

/* CTA 按钮 */
.nav-cta{
  display:block;
  margin:16px 20px 28px;
  padding:12px 16px;
  background:var(--c-white);
  color:var(--c-dark);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  border:2px solid var(--c-white);
  transition:background var(--transition),color var(--transition);
  min-height:44px;
  flex-shrink:0;
}

.nav-cta:hover{
  background:var(--c-dark);
  color:var(--c-white);
  text-decoration:none;
}

/* ════════════════════════════
   主内容区（右侧）
═══════════════════════════════ */
main{
  margin-left:var(--nav-w);
  flex:1;
  min-width:0;
}

/* ════════════════════════════
   Hero 区块
═══════════════════════════════ */
.hero-section{
  min-height:70vh;
  background:var(--c-dark);
  color:var(--c-white);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:60px 48px 60px;
}

.hero-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

.hero-inner{
  display:flex;
  align-items:center;
  gap:60px;
  width:100%;
  max-width:960px;
  background:transparent;
  box-shadow:none;
}

.hero-text{
  flex:1;
  min-width:0;
}

.eyebrow-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  margin-bottom:16px;
}

.hero-text h1{
  font-size:clamp(1.6rem,4vw,2.8rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-white);
  margin-bottom:20px;
}

.hero-desc{
  font-size:1rem;
  color:rgba(255,255,255,.7);
  max-width:480px;
  margin-bottom:32px;
  line-height:1.7;
}

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

.hero-media{
  flex-shrink:0;
  width:220px;
}

.hero-media img{
  width:100%;
  height:auto;
}

/* 装饰色块 */
.hero-deco,.about-deco{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}

.deco-block{
  display:block;
  background:rgba(255,255,255,.1);
}
.deco-block.b1{width:120px;height:80px;transform:translateZ(8px)}
.deco-block.b2{width:80px;height:120px;margin-left:32px;background:rgba(255,255,255,.06);transform:translateZ(4px)}
.deco-block.b3{width:100px;height:60px;margin-left:16px;background:rgba(255,255,255,.15);transform:translateZ(12px)}

/* ════════════════════════════
   页面内页 Hero
═══════════════════════════════ */
.page-hero{
  background:var(--c-dark);
  color:var(--c-white);
  padding:60px 48px 48px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  gap:40px;
}

.page-hero-inner{
  flex:1;
  min-width:0;
  position:relative;
  z-index:2;
}

.page-hero h1{
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:700;
  line-height:1.25;
  color:var(--c-white);
  margin:12px 0 16px;
}

.page-hero-desc{
  font-size:.95rem;
  color:rgba(255,255,255,.7);
  max-width:560px;
  line-height:1.7;
}

.breadcrumb{
  font-size:.72rem;
  color:rgba(255,255,255,.45);
  letter-spacing:.06em;
  margin-bottom:8px;
}

.breadcrumb a{
  color:rgba(255,255,255,.6);
}
.breadcrumb a:hover{color:var(--c-white)}

.date-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:14px;
}

.pub-date,.mod-date{
  font-size:.72rem;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em;
}

/* ════════════════════════════
   内容区（侧边栏 + 主内容）
═══════════════════════════════ */
.content-section{
  display:flex;
  gap:0;
  align-items:flex-start;
  min-height:400px;
}

/* 左侧边栏 */
.sidebar{
  width:220px;
  flex-shrink:0;
  background:var(--c-white);
  border-right:1px solid var(--c-mid);
  padding:32px 20px;
  position:sticky;
  top:0;
  min-height:100%;
  align-self:stretch;
}

.aside-title{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(31,31,31,.4);
  margin-bottom:12px;
  text-transform:uppercase;
}

.sidebar ul{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sidebar ul li a{
  display:block;
  padding:9px 10px;
  font-size:.8rem;
  color:var(--c-dark);
  border-left:2px solid transparent;
  transition:border-color var(--transition),background var(--transition);
  word-break:break-all;
  min-height:40px;
  line-height:1.4;
}

.sidebar ul li a:hover{
  border-left-color:var(--c-dark);
  background:var(--c-light);
  text-decoration:none;
}

/* 主内容 */
.main-content{
  flex:1;
  min-width:0;
  padding:40px 48px;
  background:var(--c-light);
}

/* ════════════════════════════
   Prose 正文
═══════════════════════════════ */
.prose{
  background:var(--c-white);
  padding:36px 40px;
  max-width:760px;
  border-bottom:3px solid var(--c-dark);
  font-size:1rem;
  line-height:1.8;
  color:var(--c-dark);
}

.prose h2,.prose h3,.prose h4{
  font-weight:700;
  margin:2em 0 .6em;
  line-height:1.3;
}

.prose h2{font-size:1.3rem}
.prose h3{font-size:1.1rem}

.prose p{margin-bottom:1.2em}

.prose ul,.prose ol{
  margin:1em 0 1.2em 1.4em;
}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.4em}

.prose a{
  color:var(--c-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.prose hr{
  border:none;
  border-top:1px solid var(--c-mid);
  margin:2em 0;
}

.prose blockquote{
  border-left:3px solid var(--c-dark);
  padding-left:16px;
  color:rgba(31,31,31,.65);
  font-style:italic;
  margin:1.4em 0;
}

.prose code{
  font-family:inherit;
  background:var(--c-light);
  padding:2px 6px;
  font-size:.9em;
}

/* ════════════════════════════
   按钮
═══════════════════════════════ */
.btn-primary{
  display:inline-block;
  padding:13px 28px;
  background:var(--c-white);
  color:var(--c-dark);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  border:2px solid var(--c-white);
  transition:background var(--transition),color var(--transition),transform var(--transition);
  cursor:pointer;
  min-height:44px;
}

.btn-primary:hover{
  background:transparent;
  color:var(--c-white);
  text-decoration:none;
  transform:translateY(-2px);
}

.btn-outline{
  display:inline-block;
  padding:13px 28px;
  background:transparent;
  color:var(--c-white);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  border:2px solid rgba(255,255,255,.4);
  transition:border-color var(--transition),color var(--transition),transform var(--transition);
  cursor:pointer;
  min-height:44px;
}

.btn-outline:hover{
  border-color:var(--c-white);
  color:var(--c-white);
  text-decoration:none;
  transform:translateY(-2px);
}

/* 正文区内的按钮（深色背景 */
.main-content .btn-primary{
  background:var(--c-dark);
  color:var(--c-white);
  border-color:var(--c-dark);
}
.main-content .btn-primary:hover{
  background:transparent;
  color:var(--c-dark);
}

.main-content .btn-outline{
  color:var(--c-dark);
  border-color:var(--c-dark);
}
.main-content .btn-outline:hover{
  background:var(--c-dark);
  color:var(--c-white);
}

/* ════════════════════════════
   Feature / 功能格栅
═══════════════════════════════ */
.features-section,.children-section,.faq-cta-section{
  padding:60px 48px 60px calc(var(--nav-w) + 0px);
  background:var(--c-light);
  margin-left:0;
}

/* 这些 article 在 main>section 内，已有 margin-left:nav-w */
.features-section,.children-section,.faq-cta-section{
  padding:60px 48px;
}

.features-section h2,.children-section h2,.faq-cta-section h2{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:.02em;
}

.features-section hr,.children-section hr,.faq-cta-section hr{
  border:none;
  border-top:2px solid var(--c-dark);
  margin-bottom:32px;
}

.feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:2px;
}

.feat-item{
  background:var(--c-white);
  padding:28px 24px;
  border-bottom:3px solid var(--c-dark);
  transition:transform var(--transition),box-shadow var(--transition);
}

.feat-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

.feat-num{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  color:rgba(31,31,31,.35);
  margin-bottom:12px;
}

.feat-item h3{
  font-size:.9rem;
  font-weight:700;
  margin-bottom:10px;
}

.feat-item h3 a{color:var(--c-dark)}
.feat-item h3 a:hover{text-decoration:underline}

.feat-item p{
  font-size:.82rem;
  color:rgba(31,31,31,.65);
  line-height:1.6;
}

.faq-cta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:2px;
}

/* ════════════════════════════
   子页卡片
═══════════════════════════════ */
.child-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2px;
}

.child-card{
  background:var(--c-white);
  border-bottom:3px solid var(--c-dark);
  display:flex;
  flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition);
}

.child-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

.child-card .card-img{
  width:100%;
  height:160px;
  object-fit:cover;
}

.card-body{
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card-body h3{
  font-size:.9rem;
  font-weight:700;
  margin-bottom:8px;
}

.card-body h3 a{color:var(--c-dark)}
.card-body h3 a:hover{text-decoration:underline}

.card-date{
  font-size:.72rem;
  color:rgba(31,31,31,.4);
  margin-bottom:8px;
}

.card-date time{font-size:.72rem}

.card-desc{
  font-size:.82rem;
  color:rgba(31,31,31,.65);
  line-height:1.6;
  flex:1;
  margin-bottom:16px;
}

.card-cta{
  display:inline-block;
  padding:8px 16px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  border:1px solid var(--c-dark);
  transition:background var(--transition),color var(--transition);
  align-self:flex-start;
  min-height:40px;
  line-height:24px;
}

.card-cta:hover{
  background:var(--c-dark);
  color:var(--c-white);
  text-decoration:none;
}

/* ════════════════════════════
   Cases 表格
═══════════════════════════════ */
.table-wrap{
  background:var(--c-white);
  overflow-x:auto;
  border-bottom:3px solid var(--c-dark);
  margin-top:24px;
}

.cases-table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}

.cases-table thead{
  background:var(--c-dark);
  color:var(--c-white);
}

.cases-table th{
  padding:14px 18px;
  font-weight:700;
  letter-spacing:.06em;
  text-align:left;
  font-size:.75rem;
}

.cases-table tbody tr{
  border-bottom:1px solid var(--c-mid);
  transition:background var(--transition);
}

.cases-table tbody tr:hover{
  background:var(--c-light);
}

.cases-table td{
  padding:13px 18px;
  vertical-align:middle;
  line-height:1.5;
}

.cases-table td a{
  color:var(--c-dark);
  font-weight:700;
}
.cases-table td a:hover{text-decoration:underline}

/* ════════════════════════════
   联系模块
═══════════════════════════════ */
.contact-blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin-top:32px;
}

.contact-block{
  background:var(--c-white);
  padding:32px 28px;
  border-bottom:3px solid var(--c-dark);
}

.contact-block h2{
  font-size:1rem;
  font-weight:700;
  margin-bottom:8px;
}

.contact-block hr{
  border:none;
  border-top:1px solid var(--c-mid);
  margin-bottom:16px;
}

.contact-block p{
  font-size:.88rem;
  line-height:1.7;
  color:rgba(31,31,31,.7);
  margin-bottom:20px;
}

/* ════════════════════════════
   About 元数据格
═══════════════════════════════ */
.about-meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin-top:24px;
}

.meta-block{
  background:var(--c-white);
  padding:24px 22px;
  border-bottom:3px solid var(--c-dark);
}

.meta-block strong{
  display:block;
  font-size:.9rem;
  font-weight:700;
  margin:8px 0 10px;
}

.meta-block p{
  font-size:.85rem;
  color:rgba(31,31,31,.65);
  line-height:1.6;
}

.about-logo{
  max-width:120px;
  height:auto;
  margin-bottom:12px;
}

/* ════════════════════════════
   h2 + hr 装饰（全局）
═══════════════════════════════ */
h2+hr{
  border:none;
  border-top:2px solid var(--c-dark);
  margin:.5em 0 1.5em;
}

h3+hr{
  border:none;
  border-top:1px solid var(--c-mid);
  margin:.4em 0 1.2em;
}

/* ════════════════════════════
   页脚
═══════════════════════════════ */
.site-footer{
  margin-left:var(--nav-w);
  background:var(--c-dark);
  color:var(--c-white);
  padding:32px 48px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 32px;
}

.footer-brand{
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--c-white);
  flex-shrink:0;
}

.footer-address{
  font-style:normal;
  font-size:.78rem;
}

.footer-address a{
  color:rgba(255,255,255,.6);
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
.footer-address a:hover{color:var(--c-white)}

.footer-links{
  display:flex;
  gap:0;
  flex-wrap:wrap;
}

.footer-links li a{
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  font-size:.75rem;
  color:rgba(255,255,255,.55);
  min-height:40px;
  border-left:1px solid rgba(255,255,255,.15);
  transition:color var(--transition);
}

.footer-links li:first-child a{border-left:none}
.footer-links li a:hover{color:var(--c-white);text-decoration:none}

.footer-copy{
  width:100%;
  font-size:.7rem;
  color:rgba(255,255,255,.3);
  letter-spacing:.06em;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

/* ════════════════════════════
   Service Hero 媒体
═══════════════════════════════ */
.service-hero-media{
  flex-shrink:0;
  width:200px;
  position:relative;
  z-index:2;
}

.service-hero-media img{
  width:100%;
  height:auto;
}

/* ════════════════════════════
   Scroll Reveal 动效
═══════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .5s ease,transform .5s ease;
  }
  .reveal.visible{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ════════════════════════════
   响应式 ≤1024px
═══════════════════════════════ */
@media(max-width:1024px){
  :root{--nav-w:200px}
  .hero-section{padding:48px 32px}
  .page-hero{padding:48px 32px}
  .main-content{padding:32px}
  .features-section,.children-section,.faq-cta-section{padding:48px 32px}
  .site-footer{padding:28px 32px}
}

/* ════════════════════════════
   响应式 ≤768px（导航顶部）
═══════════════════════════════ */
@media(max-width:768px){
  :root{--nav-w:0px}

  .site-header{
    position:fixed;
    top:0;left:0;right:0;
    width:100%;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    padding:0;
    z-index:100;
    overflow:visible;
  }

  .brand-col{
    padding:12px 16px;
    border-bottom:none;
    border-right:1px solid rgba(255,255,255,.1);
    flex-shrink:0;
  }

  .brand-name{font-size:.72rem}

  .site-nav{
    flex:1;
    padding:0;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .site-nav p{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:0;
    white-space:nowrap;
  }

  .site-nav p a{
    padding:0 12px;
    min-height:48px;
    font-size:.7rem;
    border-left:none;
    border-bottom:2px solid transparent;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  .site-nav p a:hover{
    border-bottom-color:var(--c-white);
    border-left-color:transparent;
    background:rgba(255,255,255,.06);
  }

  .nav-cta{
    margin:8px 12px;
    padding:10px 14px;
    min-height:40px;
    flex-shrink:0;
    align-self:center;
  }

  main{
    margin-left:0;
    padding-top:64px;
  }

  .site-footer{
    margin-left:0;
  }

  .hero-section{
    min-height:auto;
    padding:40px 20px;
  }

  .hero-inner{
    flex-direction:column;
    gap:32px;
  }

  .hero-text h1{font-size:1.5rem}

  .hero-deco,.about-deco{display:none}

  .page-hero{
    padding:40px 20px;
    flex-direction:column;
  }

  .content-section{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
    position:static;
    border-right:none;
    border-bottom:1px solid var(--c-mid);
    padding:20px;
  }

  .sidebar ul{flex-direction:row;flex-wrap:wrap;gap:4px}
  .sidebar ul li a{padding:8px 12px;border-left:none;border:1px solid var(--c-mid);min-height:40px}

  .main-content{padding:24px 16px}

  .prose{padding:24px 20px;max-width:100%}

  .feat-grid,.faq-cta-grid{grid-template-columns:1fr}
  .child-grid{grid-template-columns:1fr}
  .about-meta-grid{grid-template-columns:1fr}
  .contact-blocks{grid-template-columns:1fr}

  .features-section,.children-section,.faq-cta-section{padding:32px 16px}

  .site-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:24px 16px;
    gap:12px;
  }

  .footer-brand{font-size:1.2rem}

  .footer-links{flex-wrap:wrap;gap:4px}
  .footer-links li a{border-left:none;padding:0 8px}
}

/* ════════════════════════════
   响应式 ≤375px
═══════════════════════════════ */
@media(max-width:375px){
  .hero-text h1{font-size:1.25rem}
  .prose{padding:16px}
  .main-content{padding:16px}
  .page-hero{padding:28px 16px}
  .nav-cta{display:none}
}