/* ══════════════════════════════════════════════════════════
   知了科技服务 · 样式表
   规格见 DESIGN-SYSTEM.md —— 所有数值以该文件为准
   ══════════════════════════════════════════════════════════ */

/* ── 0. Tokens ── */
:root{
  /* 品牌色（实测自 logo）*/
  --orange:      #F09C00;
  --orange-deep: #C97F00;
  --orange-wash: #FFF6E3;
  --wing:        #30E4CC;

  /* 中性 */
  --ink:    #14110E;
  --ink-2:  #5A544C;
  --ink-3:  #6E675D;   /* 原 #9A948A 仅 2.84:1，加深至 5.0:1 达标 */
  --paper:  #FAF8F4;
  --paper-2:#F2EEE7;
  --line:   #E2DCD2;

  /* 字号 */
  --fs-micro: 11px;
  --fs-small: 13px;
  --fs-body:  15px;
  --fs-lead:  19px;
  --fs-h6:    12px;
  --fs-h5:    17px;
  --fs-h4:    22px;
  --fs-h3:    clamp(26px, 2.6vw, 38px);
  --fs-h2:    clamp(38px, 6vw, 92px);
  --fs-h1:    clamp(48px, 8.6vw, 144px);
  --fs-mega:  clamp(56px, 11vw, 190px);

  /* 行高 / 字距 */
  --lh-tight: 0.9;
  --lh-snug:  1.18;
  --lh-body:  1.68;
  --ls-tight: -0.03em;
  --ls-label: 0.15em;

  /* 间距 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --sec-y:      clamp(84px, 10vw, 180px);
  --sec-y-hero: clamp(104px, 14vw, 240px);

  /* 布局 */
  --wrap:    1600px;
  --gutter:  clamp(20px, 4vw, 64px);
  --measure: 66ch;

  /* 动效 */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .22s;
  --dur-base:  .45s;
  --dur-slow:  .8s;

  --nav-h: 72px;
}

/* ── 1. Reset ── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; }

::selection{ background:var(--orange); color:var(--ink); }

/* ── 2. 布局原语 ── */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── 3. 排版 ── */
.label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-h6);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s-5);
}
.h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  font-weight:600;
  letter-spacing:var(--ls-tight);
}
.accent{ color:var(--orange); }
.nb{ white-space:nowrap; }        /* 防止"上"字被甩到下一行形成孤字 */

.sec-head{ margin-bottom:clamp(48px,6vw,88px); }
.sec-sub{
  max-width:var(--measure);
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--ink-2);
  margin-top:var(--s-6);
}

/* ── 4. 按钮 ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:14px 28px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             background var(--dur-fast) var(--ease-soft),
             color var(--dur-fast) var(--ease-soft),
             border-color var(--dur-fast) var(--ease-soft);
  will-change:transform;
}
.btn--primary{
  background:var(--orange);
  color:var(--ink);
}
.btn--primary:hover{
  background:var(--orange-deep);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn--ghost:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}
.btn:active{ transform:translateY(0); }

/* ── 5. 导航 ── */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:height var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-soft),
             border-color var(--dur-base) var(--ease-soft);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:60px;
  background:rgba(250,248,244,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:var(--s-6);
}
.nav__brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.nav__brand img{ width:30px; height:auto; }
.nav__name{
  font-size:var(--fs-h5);
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:var(--s-6);
  margin-left:auto;
  font-size:var(--fs-small);
  color:var(--ink-2);
}
.nav__links a{
  position:relative;
  transition:color var(--dur-fast) var(--ease-soft);
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:100%; height:1px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{ flex-shrink:0; padding:11px 22px; }

/* ── 6. Hero ── */
.hero{
  padding-top:calc(var(--nav-h) + var(--sec-y-hero));
  padding-bottom:clamp(56px,7vw,110px);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(32px,5vw,96px);
}
.hero__col{ min-width:0; }
.hero__title{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  max-width:16ch;
}

/* 视觉锚点：拓扑图 */
.topo{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-5);
}
.topo svg{
  width:100%;
  max-width:420px;
  height:auto;
  overflow:visible;
}
.topo__ring{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
}
.topo__link line{
  stroke:var(--ink-3);
  stroke-width:1;
  stroke-opacity:.45;
}
.topo__core{ fill:var(--ink); }
.topo__node circle{ fill:var(--paper); stroke:var(--ink-3); stroke-width:1.5; }
.topo__wing{
  fill:var(--wing);
  filter:drop-shadow(0 0 6px rgba(48,228,204,.55));
}
.topo__cap{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.topo__cap-dot{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--line);
}
.hero__lead{
  margin-top:clamp(28px,3.4vw,44px);
  max-width:52ch;
  font-size:var(--fs-lead);
  line-height:1.65;
  color:var(--ink-2);
}
.hero__actions{
  margin-top:clamp(36px,4.4vw,56px);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
}

/* 跑马灯 */
.marquee{
  margin-top:clamp(64px,8vw,120px);
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:var(--s-4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:var(--s-6);
  width:max-content;
  animation:marquee 42s linear infinite;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-small);
  letter-spacing:.04em;
  color:var(--ink-2);
  white-space:nowrap;
}
.marquee__track .dot{ color:var(--orange); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ── 7. 问题陈述 ── */
.statement{
  padding-block:var(--sec-y);
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
.statement .h2{ max-width:26ch; }
.statement__grid{
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,72px);
  max-width:1180px;
}
.statement__grid p{
  color:var(--ink-2);
  font-size:var(--fs-body);
  line-height:1.72;
}

/* ── 8. 服务 ── */
.services{ padding-block:var(--sec-y); }

.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(20px,3vw,56px);
  padding-block:clamp(32px,3.6vw,52px);
  border-bottom:1px solid var(--line);
  transition:background var(--dur-base) var(--ease-soft);
}
.svc:hover{ background:var(--orange-wash); }
.svc__idx{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-small);
  color:var(--ink-3);
  padding-top:.5em;
}
.svc__title{
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:-.01em;
}
.svc__desc{
  margin-top:var(--s-4);
  max-width:56ch;
  color:var(--ink-2);
  font-size:var(--fs-body);
  line-height:1.72;
}
.svc__tag{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  color:var(--orange-deep);
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:999px;
  padding:6px 14px;
  white-space:nowrap;
  margin-top:.6em;
}

/* ── 9. 方法 ── */
.how{
  padding-block:var(--sec-y);
  background:var(--paper-2);
  border-block:1px solid var(--line);
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);
  padding-bottom:clamp(48px,6vw,88px);
  border-bottom:1px solid var(--line);
}
.stat__num{
  display:block;
  font-size:var(--fs-mega);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums;
}
.stat__unit{
  font-size:.3em;
  font-weight:500;
  letter-spacing:0;
  color:var(--orange);
  margin-left:.12em;
  vertical-align:super;
}
.stat__label{
  display:block;
  margin-top:var(--s-4);
  font-size:var(--fs-small);
  color:var(--ink-2);
  letter-spacing:.02em;
}

.steps{
  margin-top:clamp(48px,6vw,88px);
  display:grid;
  gap:0;
  counter-reset:s;
}
.steps li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);
  align-items:baseline;
  padding-block:var(--s-6);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-h5);
  color:var(--ink-2);
}
.steps li:first-child{ border-top:1px solid var(--line); }
.steps li:last-child{ border-bottom:0; }   /* 末行不画线，避免悬空 */
.steps li span{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-small);
  color:var(--orange-deep);
}

/* ── 10. 案例 ── */
.work{ padding-block:var(--sec-y); }
.cases{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
.case{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(28px,3vw,44px);
  display:flex;
  flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-soft),
             transform var(--dur-base) var(--ease-out);
}
.case:hover{
  border-color:var(--orange);
  transform:translateY(-3px);
}
.case__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.case__title{
  font-size:var(--fs-h4);
  font-weight:600;
  letter-spacing:-.005em;
}
.case__status{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  color:var(--ink-2);          /* 原 ink-3 对比度不足 */
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.case__status::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--wing);
  box-shadow:0 0 0 3px rgba(48,228,204,.18);
}
.case__desc{
  color:var(--ink-2);
  font-size:var(--fs-body);
  line-height:1.72;
  flex:1;
}
.case__meta{
  margin-top:var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4);
  font-size:var(--fs-small);
}
.case__meta dt{
  color:var(--ink-3);
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
  margin-bottom:6px;
}
.case__meta dd{ color:var(--ink); }
.case__link{
  margin-top:var(--s-6);
  font-size:var(--fs-small);
  color:var(--orange-deep);
  font-weight:500;
  transition:color var(--dur-fast) var(--ease-soft);
}
.case__link:hover{ color:var(--orange); }
.case__link--off{ color:var(--ink-3); cursor:default; }

/* ── 11. CTA ── */
.cta{
  padding-block:var(--sec-y);
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
.cta__title{ max-width:22ch; }
.cta__lead{
  margin-top:var(--s-6);
  max-width:var(--measure);
  font-size:var(--fs-lead);
  line-height:1.65;
  color:var(--ink-2);
}

/* ── 12. Footer ── */
.foot{
  padding-block:clamp(48px,5vw,80px);
  border-top:1px solid var(--line);
}
.foot__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-5) var(--s-7);
}
.foot__brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-body);
  font-weight:500;
}
.foot__brand img{ width:22px; height:auto; }
.foot__links{
  display:flex;
  gap:var(--s-6);
  font-size:var(--fs-small);
  color:var(--ink-2);
}
.foot__links a:hover{ color:var(--ink); }
.foot__note{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  color:var(--ink-3);
}

/* ── 13. 滚动 reveal ── */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--dur-slow) var(--ease-out) var(--d,0ms),
             transform var(--dur-slow) var(--ease-out) var(--d,0ms);
}
[data-reveal].in{
  opacity:1;
  transform:none;
}

/* ── 14. 响应式 ── */

/* ≤1024 平板 */
@media (max-width:1024px){
  .nav__links{ gap:var(--s-5); }
  .svc{ grid-template-columns:48px minmax(0,1fr); }
  .svc__tag{ grid-column:2; justify-self:start; margin-top:var(--s-3); }
  .statement__grid{ grid-template-columns:1fr; }
  .hero__grid{
    grid-template-columns:1fr;
    gap:clamp(36px,7vw,52px);
  }
  /* 手机上让标题先行，图形置后并缩小 —— 避免首屏被装饰图占据 */
  .topo{ order:1; }
  .topo svg{ max-width:220px; }
}

/* ≤768 小平板 */
@media (max-width:768px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; padding:10px 18px; }
  .nav__name{ font-size:var(--fs-body); }

  .hero__title{ max-width:14ch; }
  .stats{ grid-template-columns:1fr; gap:var(--s-7); }
  .stat__num{ font-size:clamp(56px,16vw,110px); }
  .cases{ grid-template-columns:1fr; }
  .case__meta{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .foot__inner{ flex-direction:column; align-items:flex-start; gap:var(--s-4); }
  .foot__note{ margin-left:0; }
  .foot__links{ flex-wrap:wrap; gap:var(--s-5); }
}

/* ≤540 手机 */
@media (max-width:540px){
  :root{
    --fs-body:15px;
    --fs-lead:17px;
    --sec-y:clamp(64px,14vw,88px);
    --sec-y-hero:clamp(72px,16vw,104px);
  }
  .nav__cta{ display:none; }
  .nav__brand img{ width:26px; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .svc{ grid-template-columns:36px minmax(0,1fr); gap:var(--s-4); }
  .svc__idx{ font-size:var(--fs-micro); }
  .steps li{ grid-template-columns:44px minmax(0,1fr); font-size:var(--fs-body); }
  .case__meta{ grid-template-columns:1fr; gap:var(--s-3); }
  .marquee__track{ font-size:var(--fs-micro); }
}

/* ── 15. 无障碍：减少动效 ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
}