/* ============================================================
   PONTANA · pontana.com
   方向：纸感底色 + 工程线框 + 点阵信号
   无外部依赖：系统字体、原生 CSS、原生 JS
   ============================================================ */

/* ---------- 1. 基底 ---------- */
:root{
  --paper:#ede9e1;
  --paper-2:#e4dfd5;
  --paper-3:#d9d3c7;
  --ink:#12110e;
  --ink-70:rgba(18,17,14,.72);
  --ink-50:rgba(18,17,14,.54);
  --ink-30:rgba(18,17,14,.36);
  --line:rgba(18,17,14,.16);
  --line-soft:rgba(18,17,14,.085);
  --accent:#ff4a16;
  --accent-ink:#b8340a;
  --accent-soft:rgba(255,74,22,.14);
  --on-accent:#fff8f2;

  --pad:clamp(18px,3.6vw,56px);
  --nav-h:64px;
  --max:1680px;

  --sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,.84,.24,1);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0c0c0b;
  --paper-2:#151513;
  --paper-3:#1e1e1b;
  --ink:#efece4;
  --ink-70:rgba(239,236,228,.72);
  --ink-50:rgba(239,236,228,.54);
  --ink-30:rgba(239,236,228,.34);
  --line:rgba(239,236,228,.2);
  --line-soft:rgba(239,236,228,.1);
  --accent:#ff5a24;
  --accent-ink:#ff7a4d;
  --accent-soft:rgba(255,90,36,.16);
  --on-accent:#0c0c0b;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* 声明只支持浅色：阻止部分安卓浏览器在系统深色模式下强制反色（颜色偏移的主因） */
  color-scheme:only light;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--on-accent)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.skip{
  position:fixed;top:8px;left:8px;z-index:10001;
  transform:translateY(-160%);
  background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:13px;
  transition:transform .2s;
}
.skip:focus{transform:none}

/* 纸张颗粒 */
.grain{
  position:fixed;inset:-50%;
  z-index:9990;pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
html[data-theme="dark"] .grain{opacity:.06}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2%,1.5%)}
  40%{transform:translate(1.5%,-1%)}
  60%{transform:translate(-1%,-2%)}
  80%{transform:translate(2%,1%)}
}

/* 阅读进度 */
.progress{
  position:fixed;left:0;right:0;bottom:0;height:2px;
  z-index:9996;pointer-events:none;
  background:transparent;
}
.progress span{
  display:block;height:100%;width:0;
  background:var(--accent);
  transform-origin:0 50%;
}

/* 自定义光标 */
.cursor{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;opacity:0;transition:opacity .25s}
html.has-cursor .cursor{display:block}
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .row,
html.has-cursor .service{cursor:none}
@media (hover:hover) and (pointer:fine){
  .cursor__dot,.cursor__ring{
    position:absolute;top:0;left:0;
    border-radius:50%;
    mix-blend-mode:difference;
    will-change:transform;
  }
  .cursor__dot{
    width:6px;height:6px;margin:-3px 0 0 -3px;
    background:#fff;
  }
  .cursor__ring{
    width:34px;height:34px;margin:-17px 0 0 -17px;
    border:1px solid rgba(255,255,255,.75);
    transition:width .28s var(--ease),height .28s var(--ease),
               margin .28s var(--ease),border-color .28s var(--ease),
               opacity .2s;
  }
  .cursor.is-big .cursor__ring{
    width:64px;height:64px;margin:-32px 0 0 -32px;
    border-color:#fff;
  }
  .cursor.is-big .cursor__dot{transform:scale(.4)}
}

/* ---------- 2. 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:var(--nav-h);
  display:flex;align-items:center;
  padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
}
.nav.is-scrolled{
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  width:100%;max-width:var(--max);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand__mark{
  width:36px;height:auto;
  transition:transform .5s var(--ease);
}
html[data-theme="dark"] .brand__mark{filter:invert(1)}
.brand:hover .brand__mark{transform:translateY(-2px)}
.brand__word{
  font-size:14px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  line-height:1;
}
.brand__sub{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);
  padding-left:12px;margin-left:2px;
  border-left:1px solid var(--line);
  line-height:1.2;
}

.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);margin-left:auto}
.nav__links a{
  position:relative;
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:13px;letter-spacing:.06em;
  text-decoration:none;color:var(--ink-70);
  padding:6px 0;
  transition:color .25s;
}
.nav__links a i{
  font-family:var(--mono);font-style:normal;
  font-size:8.5px;letter-spacing:.1em;
  color:var(--ink-30);
  transform:translateY(-3px);
  transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active{color:var(--ink)}
.nav__links a:hover i,
.nav__links a.is-active i{color:var(--accent-ink)}
.nav__links a:hover::after,
.nav__links a.is-active::after{transform:scaleX(1)}

.nav__links--seg{
  display:flex;align-items:stretch;
  height:34px;
  border:1px solid var(--line);
  background:var(--paper-2);
  background:color-mix(in srgb,var(--paper-2) 55%,transparent);
  margin-left:auto;
}
.nav__links--seg a{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 clamp(12px,1.4vw,18px);
  border-left:1px solid var(--line-soft);
  color:var(--ink-70);
  transition:background-color .28s var(--ease),color .28s var(--ease);
}
.nav__links--seg a:first-child{border-left:0}
.nav__links--seg a::after{display:none}
.nav__links--seg a i{transform:none}
.nav__links--seg a:hover{background:var(--paper-2);color:var(--ink)}
.nav__links--seg a.is-active{
  background:var(--ink);color:var(--paper);
}
.nav__links--seg a.is-active i{color:var(--accent)}
.nav__links--seg a.is-active:hover{background:var(--ink);color:var(--paper)}

.nav__tools{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:clamp(8px,1.4vw,20px)}
.clock{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-50);
  display:inline-flex;gap:6px;align-items:center;
  font-variant-numeric:tabular-nums;
}
.clock i{font-style:normal}

.icon-btn{
  width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  transition:border-color .25s,color .25s,transform .25s;
}
.icon-btn:hover{border-color:var(--ink);transform:rotate(15deg)}
.icon-btn__moon{display:none}
html[data-theme="dark"] .icon-btn__sun{display:none}
html[data-theme="dark"] .icon-btn__moon{display:inline}

.nav__cta{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  font-size:12px;letter-spacing:.08em;
  padding:9px 16px;
  border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:background-color .25s,color .25s,border-color .25s;
}
.nav__cta span{transition:transform .3s var(--ease)}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nav__cta:hover span{transform:translate(2px,-2px)}

.burger{display:none;width:32px;height:32px;position:relative}
.burger span{
  position:absolute;left:6px;right:6px;height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 3. 移动端菜单 ---------- */
.menu{
  position:fixed;inset:0;z-index:8900;
  background:var(--paper);
  padding:calc(var(--nav-h) + 24px) var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
  overflow-y:auto;
}
.menu.is-open{opacity:1;pointer-events:auto}
.menu[hidden]{display:none}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  display:flex;align-items:baseline;gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none;
  transform:translateY(14px);opacity:0;
  transition:transform .5s var(--ease-out),opacity .4s;
}
.menu.is-open .menu__nav a{transform:none;opacity:1}
.menu__nav a:nth-child(1){transition-delay:.05s}
.menu__nav a:nth-child(2){transition-delay:.09s}
.menu__nav a:nth-child(3){transition-delay:.13s}
.menu__nav a:nth-child(4){transition-delay:.17s}
.menu__nav a:nth-child(5){transition-delay:.21s}
.menu__nav a:nth-child(6){transition-delay:.25s}
.menu__nav i{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--accent-ink);letter-spacing:.1em}
.menu__nav span{font-size:clamp(26px,8vw,38px);font-weight:500;letter-spacing:.02em}
.menu__nav em{
  margin-left:auto;font-family:var(--mono);font-style:normal;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);
}
.menu__foot{margin-top:40px;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px}
.menu__foot a{text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.menu__foot p{color:var(--ink-50);font-size:11px;margin-top:6px;letter-spacing:.02em}

/* ---------- 4. 首屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;      /* iOS < 15.4 / Chrome < 108 的兜底 */
  min-height:100svh;
  padding:calc(var(--nav-h) + clamp(28px,5vw,64px)) var(--pad) clamp(56px,7vw,96px);
  display:flex;align-items:center;
}
.hero{overflow:hidden}
.hero__wm{
  position:absolute;left:0;right:var(--pad);bottom:150px;
  z-index:0;
  text-align:right;
  white-space:nowrap;
  font-size:clamp(44px,7.6vw,120px);
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(18,17,14,.036);
  color:color-mix(in srgb,var(--ink) 3.6%,transparent);
  pointer-events:none;user-select:none;
}
.hero__wm b{
  font-weight:500;
  color:rgba(18,17,14,.08);
  color:color-mix(in srgb,var(--ink) 8%,transparent);
}

html[data-theme="dark"] .hero__wm{
  color:rgba(239,236,228,.03);
  color:color-mix(in srgb,var(--ink) 3%,transparent);
}
html[data-theme="dark"] .hero__wm b{
  color:rgba(239,236,228,.065);
  color:color-mix(in srgb,var(--ink) 6.5%,transparent);
}

.hero__inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--max);margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
.hero__copy{min-width:0}

.eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-50);
  margin-bottom:clamp(20px,2.6vw,34px);
}
.eyebrow__sep{color:var(--ink-30)}

.pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  display:inline-block;flex:0 0 auto;
  position:relative;
}
.pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--accent);
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{
  0%{transform:scale(.6);opacity:.9}
  70%,100%{transform:scale(1.9);opacity:0}
}

.hero__title{
  font-size:clamp(33px,4.9vw,80px);
  line-height:1.06;
  font-weight:500;
  letter-spacing:-.015em;
  margin-bottom:clamp(22px,2.6vw,34px);
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .line span{display:block}
.js .hero__title .line span{
  transform:translateY(112%);
  transition:transform 1.1s var(--ease-out);
}
.js .hero__title .line:nth-child(2) span{transition-delay:.1s}
.js .hero__title.in .line span{transform:none}

.hero__lede{
  max-width:44ch;
  font-size:clamp(14.5px,1.12vw,16.5px);
  line-height:1.95;
  color:var(--ink-70);
  margin-bottom:clamp(26px,3vw,40px);
}

.chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 clamp(26px,3vw,38px);
  padding:0;list-style:none;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);
  font-size:10.5px;letter-spacing:.03em;
  color:var(--ink-70);
  padding:6px 10px;
  border:1px solid var(--line);
  background:transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease),
             background-color .3s var(--ease);
}
.chip b{
  font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.1em;
  color:var(--accent-ink);
}
.chip:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(30px,4vw,54px)}.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.06em;
  padding:14px 22px;
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.btn span{transition:transform .3s var(--ease)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn:hover span{transform:translate(3px,-3px)}

/* 点阵面板 */
.panel{margin:0 auto;width:100%;max-width:780px}
.panel__frame{
  position:relative;
  aspect-ratio:5/4.2;
}
#archCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.panel__word{
  position:absolute;z-index:2;left:0;right:0;top:74%;
  text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.56em;
  text-indent:.56em;
  text-transform:uppercase;color:var(--ink-50);
  pointer-events:none;
}
.panel__sub{
  position:absolute;z-index:2;left:0;right:0;top:calc(74% + 22px);
  text-align:center;
  font-family:var(--mono);font-size:8px;letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;color:var(--ink-30);
  pointer-events:none;
}


.scrollcue{
  position:absolute;left:var(--pad);bottom:clamp(18px,3vw,30px);
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--ink-50);
}
.scrollcue i{
  display:block;width:1px;height:34px;
  background:linear-gradient(180deg,var(--ink-50),transparent);
  position:relative;overflow:hidden;
}
.scrollcue i::after{
  content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;
  background:var(--accent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{
  0%{top:-50%}
  60%,100%{top:100%}
}

/* ---------- 6. 跑马灯 ---------- */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:clamp(14px,1.6vw,22px) 0;
  background:var(--paper-2);
}
.marquee__track{
  display:flex;width:max-content;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);
  padding-right:clamp(20px,2.4vw,38px);
  font-size:clamp(17px,2vw,28px);
  font-weight:500;letter-spacing:.02em;
  white-space:nowrap;
}
.marquee__group b{
  color:var(--accent);font-size:.62em;font-weight:400;
  transform:translateY(-1px);
}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- 7. 章节通用 ---------- */
.section{
  position:relative;
  width:100%;max-width:var(--max);
  margin-inline:auto;
  padding:clamp(52px,6.4vw,112px) var(--pad);
  scroll-margin-top:calc(var(--nav-h) + 8px);
}
.section + .section{border-top:1px solid var(--line-soft)}

.shead{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(30px,4.5vw,64px);
}
.shead__idx{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.shead__title{
  font-size:clamp(26px,3vw,40px);
  font-weight:500;letter-spacing:.01em;line-height:1;
}
.shead__en{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-50);
  transform:translateY(-2px);
}
.shead__hint{
  margin-left:auto;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-30);
  text-align:right;
}

.display{
  font-size:clamp(30px,4.4vw,68px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.012em;
}

/* ---------- 8. 定位 ---------- */
.pos{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,88px);
  align-items:start;
}
.pos__body{display:flex;flex-direction:column;gap:20px;max-width:52ch}
.pos__body p{
  font-size:clamp(14.5px,1.1vw,16px);
  line-height:1.95;color:var(--ink-70);
}
.pos__note{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--ink-30);
  padding-top:6px;
}

/* ---------- 9. 服务 ---------- */
.services{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
.service{
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  background:var(--paper);
  padding:clamp(22px,2.4vw,34px);
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.service::before{
  content:"";position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease-out);
}
.service:hover{border-color:var(--ink)}
.service:hover::before{transform:scaleX(1)}

.service__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:clamp(20px,2.4vw,32px);
}
.service__idx{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.service__en{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-30);text-align:right;
}
.service h3{
  font-size:clamp(19px,2vw,26px);
  font-weight:500;line-height:1.28;letter-spacing:.01em;
  margin-bottom:12px;
}
.service > p{
  font-size:13.5px;line-height:1.85;color:var(--ink-70);
  margin-bottom:22px;
}
.tagrow{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 18px;
}
.tagrow span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-70);
  padding:5px 9px;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.service:hover .tagrow span{border-color:var(--ink-30);color:var(--ink)}

.service ul{
  display:flex;flex-direction:column;gap:11px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.service li{display:flex;gap:12px;align-items:baseline}
.service li b{
  flex:0 0 34px;
  font-family:var(--mono);font-size:9.5px;font-weight:400;
  letter-spacing:.06em;color:var(--ink-50);
  font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.service li span{font-size:12.5px;line-height:1.7;color:var(--ink-70)}
.service:hover li b{color:var(--accent-ink)}

.service__stack,.service__note{
  font-family:var(--mono);
  font-size:10px;line-height:1.75;letter-spacing:.04em;
  color:var(--ink-50);
  margin-top:16px;
}
.service__stack{
  border-top:1px solid var(--line-soft);
  padding-top:14px;
}
.service--wide{grid-column:1 / -1}
.service--wide .service__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 32px;
}
.service--wide .service__note{
  border-top:1px solid var(--line-soft);
  padding-top:14px;
  max-width:92ch;
}
@media (min-width:1200px){
  .service--wide .service__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 10. 场景 ---------- */
.scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.scene{
  position:relative;
  border:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
  transition:border-color .35s var(--ease),transform .5s var(--ease);
}
.scene:hover{border-color:var(--ink)}
.scene__art{
  position:relative;
  aspect-ratio:8/3;
  overflow:hidden;
  background:var(--paper-2);
  border-bottom:1px solid var(--line-soft);
}
.scene__art svg{
  width:100%;height:100%;display:block;
  color:var(--ink);
  transition:transform .8s var(--ease);
}
.scene:hover .scene__art svg{transform:scale(1.02)}
.scene__body{padding:clamp(18px,2vw,26px)}
.scene__idx{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--accent-ink);
}
.scene h3{
  font-size:clamp(20px,2.1vw,28px);font-weight:500;line-height:1.2;
  margin:8px 0 10px;
}
.scene h3 em{
  font-family:var(--mono);font-style:normal;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-30);
  margin-left:10px;font-weight:400;
  display:inline-block;transform:translateY(-2px);
}
.scene p{font-size:13.5px;line-height:1.8;color:var(--ink-70);max-width:38ch}
.scene__line{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease-out);
}
.scene:hover .scene__line{transform:scaleX(1)}

/* 场景图形：按部门作业画的四段小示意（12s 闭环） */
@keyframes sceneFade{
  0%{opacity:0}
  4%{opacity:1}
  92%{opacity:1}
  100%{opacity:0}
}

/* ---------- 01 销售：画像卡 → 话术 → 周报 ---------- */
.art--crm .crm-scene{animation:sceneFade 12s linear infinite}

.art--crm .crm-values rect{
  transform-box:fill-box;transform-origin:left center;
  animation:12s cubic-bezier(.2,.7,.2,1) infinite;
}
.art--crm .crm-values .v1{animation-name:v1In}
.art--crm .crm-values .v2{animation-name:v2In}
.art--crm .crm-values .v3{animation-name:v3In}
@keyframes v1In{0%,6%{transform:scaleX(0)}16%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes v2In{0%,20%{transform:scaleX(0)}30%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes v3In{0%,34%{transform:scaleX(0)}44%{transform:scaleX(1)}100%{transform:scaleX(1)}}

.art--crm .crm-lines rect{animation:12s linear infinite}
.art--crm .crm-lines .tl1{animation-name:tl1In}
.art--crm .crm-lines .tl2{animation-name:tl2In}
.art--crm .crm-lines .tl3{animation-name:tl3In}
@keyframes tl1In{0%,48%{opacity:0}54%{opacity:1}100%{opacity:1}}
@keyframes tl2In{0%,53%{opacity:0}59%{opacity:1}100%{opacity:1}}
@keyframes tl3In{0%,58%{opacity:0}64%{opacity:1}100%{opacity:1}}

.art--crm .crm-bars rect{
  transform-box:fill-box;transform-origin:bottom center;
  animation:12s ease-out infinite;
}
.art--crm .crm-bars .b1{animation-name:b1In}
.art--crm .crm-bars .b2{animation-name:b2In}
.art--crm .crm-bars .b3{animation-name:b3In}
.art--crm .crm-bars .b4{animation-name:b4In}
.art--crm .crm-bars .b5{animation-name:b5In}
@keyframes b1In{0%,70%{transform:scaleY(0)}75%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes b2In{0%,73%{transform:scaleY(0)}78%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes b3In{0%,76%{transform:scaleY(0)}81%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes b4In{0%,79%{transform:scaleY(0)}84%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes b5In{0%,82%{transform:scaleY(0)}87%{transform:scaleY(1)}100%{transform:scaleY(1)}}

.art--crm .crm-dot{animation:crmDot 3s ease-in-out infinite}
@keyframes crmDot{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- 02 客服：知识库 → 自动回复 → 转人工 ---------- */
.art--chat .chat-scene{animation:sceneFade 12s linear infinite}

.art--chat .kb-hit{animation:kbHit 12s linear infinite}
@keyframes kbHit{
  0%,8%{opacity:0}
  12%{opacity:.3}
  38%{opacity:.3}
  46%{opacity:0}
  100%{opacity:0}
}

.art--chat .arw1{animation:arw1In 12s linear infinite}
@keyframes arw1In{0%,12%{opacity:0}16%{opacity:1}100%{opacity:1}}

.art--chat .bot{animation:botIn 12s linear infinite}
@keyframes botIn{0%,26%{opacity:0}32%{opacity:1}100%{opacity:1}}

.art--chat .bot-lines rect{animation:12s linear infinite}
.art--chat .bot-lines .bl1{animation-name:bl1In}
.art--chat .bot-lines .bl2{animation-name:bl2In}
.art--chat .bot-lines .bl3{animation-name:bl3In}
@keyframes bl1In{0%,36%{opacity:0}41%{opacity:1}100%{opacity:1}}
@keyframes bl2In{0%,41%{opacity:0}46%{opacity:1}100%{opacity:1}}
@keyframes bl3In{0%,46%{opacity:0}51%{opacity:1}100%{opacity:1}}

.art--chat .arw2{animation:arw2In 12s linear infinite}
@keyframes arw2In{0%,58%{opacity:0}62%{opacity:1}100%{opacity:1}}

.art--chat .human{animation:humanIn 12s linear infinite}
@keyframes humanIn{0%,64%{opacity:0}68%{opacity:1}100%{opacity:1}}

.art--chat .human-dot{animation:humanDotIn 12s linear infinite}
@keyframes humanDotIn{0%,68%{opacity:0}72%{opacity:1}100%{opacity:1}}

/* ---------- 03 研发：日志 → 报错 → 修复 → 通过 ---------- */
.art--log .log-scene{animation:sceneFade 12s linear infinite}

.art--log .lines rect{animation:12s linear infinite}
.art--log .lines .l1{animation-name:l1In}
.art--log .lines .l2{animation-name:l2In}
.art--log .lines .l3{animation-name:l3In}
.art--log .lines .l4{animation-name:l4In}
@keyframes l1In{0%,5%{opacity:0}10%{opacity:.5}100%{opacity:.5}}
@keyframes l2In{0%,8%{opacity:0}13%{opacity:.5}100%{opacity:.5}}
@keyframes l3In{0%,11%{opacity:0}16%{opacity:.5}100%{opacity:.5}}
@keyframes l4In{0%,14%{opacity:0}19%{opacity:.5}100%{opacity:.5}}

.art--log .err{animation:errIn 12s linear infinite}
@keyframes errIn{0%,24%{opacity:0}28%{opacity:1}100%{opacity:1}}

.art--log .squiggle{
  stroke-dasharray:190;stroke-dashoffset:190;
  animation:squiggle 12s linear infinite;
}
@keyframes squiggle{
  0%,26%{stroke-dashoffset:190}
  38%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}

.art--log .fix{animation:fixIn 12s linear infinite}
@keyframes fixIn{0%,52%{opacity:0}56%{opacity:1}100%{opacity:1}}

.art--log .check{
  stroke-dasharray:62;stroke-dashoffset:62;
  animation:checkDraw 12s linear infinite;
}
@keyframes checkDraw{
  0%,66%{stroke-dashoffset:62}
  76%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}

/* ---------- 04 法务：比对稿 → 扫描 → 高亮 → 用印 ---------- */
.art--doc .doc-scene{animation:sceneFade 12s linear infinite}

.art--doc .doc-back{animation:docBackIn 12s linear infinite}
@keyframes docBackIn{0%,4%{opacity:0}8%{opacity:1}100%{opacity:1}}

.art--doc .sweep{animation:docSweep 12s linear infinite}
@keyframes docSweep{
  0%,8%{transform:translateY(0);opacity:0}
  12%{opacity:1}
  46%{transform:translateY(200px);opacity:1}
  54%,100%{transform:translateY(200px);opacity:0}
}

.art--doc .clause{animation:clauseHi 12s linear infinite}
@keyframes clauseHi{
  0%,28%{opacity:0}
  34%{opacity:.2}
  46%{opacity:.2}
  54%,100%{opacity:0}
}

.art--doc .stamp{
  transform-box:fill-box;transform-origin:center;
  animation:stampIn 12s ease-out infinite;
}
@keyframes stampIn{
  0%,58%{opacity:0;transform:scale(.86)}
  64%{opacity:1;transform:scale(1)}
  100%{opacity:1;transform:scale(1)}
}

/* 适用对象 */
.who{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(40px,5vw,68px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);
}
.who__item span{
  display:block;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--accent-ink);margin-bottom:12px;
}
.who__item h4{
  font-size:clamp(14px,1.15vw,16px);font-weight:500;
  line-height:1.4;margin-bottom:8px;
}
.who__item p{font-size:12.5px;line-height:1.8;color:var(--ink-70);max-width:34ch}

/* ---------- 11. 流程 ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
}
.step{
  position:relative;
  padding-top:26px;
  display:flex;flex-direction:column;
  min-height:220px;
}
.step__bar{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);
}
.step__bar::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease-out);
}
.step:hover .step__bar::after{transform:scaleX(1)}
.step__idx{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink-30);margin-bottom:18px;
}
.step h3{
  font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1;
  margin-bottom:14px;
}
.step h3 em{
  display:block;
  font-family:var(--mono);font-style:normal;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-30);
  margin-top:10px;font-weight:400;
}
.step p{font-size:13.5px;line-height:1.8;color:var(--ink-70);max-width:30ch}
.step__meta{
  margin-top:auto;padding-top:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--accent-ink);
}

.mailto{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;
  padding-bottom:8px;
  border-bottom:1px solid var(--ink-30);
  transition:color .3s,border-color .3s;
  overflow-wrap:anywhere;
  max-width:100%;
}
.mailto span{overflow-wrap:anywhere}
.mailto i{font-style:normal;font-size:.8em;transition:transform .3s var(--ease)}
.mailto:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.mailto:hover i{transform:translate(4px,-4px)}

/* ---------- 14. 页脚 ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(40px,5vw,64px) var(--pad) clamp(24px,3vw,36px);
  max-width:var(--max);margin-inline:auto;
}
.foot__top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(26px,4vw,72px);
  align-items:start;
  padding-bottom:clamp(30px,4vw,48px);
  border-bottom:1px solid var(--line-soft);
}
.foot__brand{grid-column:1;grid-row:1 / span 2}
.foot__contact{grid-column:2;grid-row:1 / span 2;max-width:620px;align-self:center}
.foot__contact .mailto{font-size:clamp(14px,1.7vw,21px)}
.foot__addr{
  margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-50);
}
.foot__brand img{width:132px;opacity:.92}
html[data-theme="dark"] .foot__brand img{filter:invert(1)}
.foot__slogan{
  margin-top:16px;
  font-size:12px;letter-spacing:.34em;color:var(--ink-50);
}
.foot__nav{
  grid-column:3;grid-row:1;
  display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:8px clamp(14px,1.6vw,26px);
}
.foot__nav a{
  font-size:12.5px;text-decoration:none;color:var(--ink-70);
  transition:color .25s;
}
.foot__nav a:hover{color:var(--accent-ink)}
.foot__top-link{
  grid-column:3;grid-row:2;justify-self:end;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-50);
  transition:color .25s;
}
.foot__top-link:hover{color:var(--accent-ink)}
.foot__top-link span{display:inline-block;transition:transform .3s var(--ease)}
.foot__top-link:hover span{transform:translateY(-3px)}

.foot__bottom{
  display:flex;justify-content:center;align-items:baseline;
  padding-top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-50);
  text-align:center;
}

/* ---------- 15. 入场 ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.js .reveal.in{opacity:1;transform:none}

/* 网格辅助线（按 G 显示） */
.grid-overlay{
  position:fixed;inset:0;z-index:9995;pointer-events:none;
  opacity:0;transition:opacity .25s;
  background-image:
    linear-gradient(90deg,var(--accent) 0 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,74,22,.18) 0 1px,transparent 1px);
  background-size:calc(100% / 12) 100%,calc(100% / 96) 100%;
  mix-blend-mode:multiply;
}
html[data-theme="dark"] .grid-overlay{mix-blend-mode:screen}
html.show-grid .grid-overlay{opacity:1}

/* ---------- 16. 响应式 ---------- */
@media (max-width:1280px){
  .rail{display:none}
  .brand__sub{display:none}
}

@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__cta{display:none}
  .nav__tools{margin-left:auto}
  .hero__inner{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
  .hero__title{font-size:clamp(38px,7vw,68px)}
  .panel{max-width:520px}
  .panel__frame{aspect-ratio:4/3.4}
  .contact{grid-template-columns:1fr}
  .pos{grid-template-columns:1fr;gap:28px}
  .services{grid-template-columns:1fr}
  .who{grid-template-columns:1fr;gap:22px}
}

@media (max-width:820px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .step{min-height:0}
  .scenes{grid-template-columns:1fr}
  .shead__hint{display:none}
  .foot__top{grid-template-columns:1fr;gap:24px;align-items:start}
  .foot__brand{grid-column:1;grid-row:auto}
  .foot__contact{grid-column:1;grid-row:auto}
  .foot__nav{grid-column:1;grid-row:auto;justify-content:flex-start}
  .foot__top-link{grid-column:1;grid-row:auto;justify-self:start}
  .scrollcue{display:none}
  .service--wide .service__grid{grid-template-columns:1fr;gap:11px}
}

/* 移动端首屏重构：点阵从「文案下方一张图」改为「通栏背景层」，
   文案压在它上面，拱门从按钮下方出血铺开，首屏读作一张海报。 */
@media (max-width:820px){
  .hero{
    min-height:100vh;
    min-height:100svh;
    padding-top:calc(var(--nav-h) + 20px);
    padding-bottom:clamp(16px,3vh,28px);
    align-items:flex-start;
  }
  .hero__inner{gap:0}
  .hero__wm{display:none}

  /* 背景层：左右通栏，拱门放大到出血，锚在首屏底边、腿部被屏幕裁掉 */
  .hero{align-items:stretch}
  .hero__inner{grid-template-rows:auto 1fr}
  .panel{
    width:calc(100% + var(--pad) * 2);
    max-width:none;
    align-self:end;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    margin-bottom:calc(-1 * clamp(28px, 13vw, 60px));
    pointer-events:none;
  }
  .panel__frame{aspect-ratio:1/0.75}
  #archCanvas{opacity:.72}
  /* 标语：填住按钮与拱门之间的空档，替代桌面版被隐藏的幽灵大字 */
  .panel::before{
    content:"算力流动 · 筑桥可渡";
    display:block;text-align:center;
    font-size:11px;letter-spacing:.32em;text-indent:.32em;
    color:var(--ink-50);
    margin-bottom:14px;
  }

  .hero__title{font-size:clamp(31px,9.2vw,46px);margin-bottom:16px}
  .hero__lede{
    font-size:14.5px;line-height:1.82;
    margin-bottom:18px;max-width:none;
  }
  .chips{margin-bottom:20px}
  .hero__actions{margin-bottom:0}
  /* 颗粒层在移动端只保留静帧，省一次全屏合成 */
  .grain{animation:none}
}

@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .clock{display:none}
  .hero__title{font-size:clamp(28px,9vw,38px)}
  .nav__cta{display:none}
  .btn{padding:13px 18px;font-size:12.5px}
  .shead{gap:10px;flex-wrap:wrap}
  .shead__en{transform:none}
  .chips{gap:6px}
  .chip{font-size:9.5px;padding:6px 10px}
  .service{padding:20px}
}

/* ---------- 17. 老引擎兜底 ---------- */

/* iOS < 15 / 老安卓不支持 aspect-ratio 时，点阵面板会塌成 0 高（动画整个消失）。
   用 padding-bottom 撑出等比盒子，画布是绝对定位，照旧铺满。 */
@supports not (aspect-ratio: 1 / 1){
  .panel__frame::before{
    content:"";display:block;width:100%;padding-bottom:84%;
  }
  .scene__art::before{
    content:"";display:block;width:100%;padding-bottom:37.5%;
  }
  .scene__art svg{position:absolute;inset:0}
  @media (max-width:1080px){ .panel__frame::before{padding-bottom:85%} }
  @media (max-width:820px){ .panel__frame::before{padding-bottom:78%} }
  @media (max-width:560px){ .panel__frame::before{padding-bottom:74%} }
}

/* 触屏：去掉 iOS 的灰色点击高亮，避免按钮出现方块闪一下 */
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent}
  a,button,.chip{touch-action:manipulation}
}

/* iOS 会在聚焦 font-size < 16px 的输入框时自动放大页面；这条兜住 */
@supports (-webkit-touch-callout:none){
  input,select,textarea{font-size:16px}
}

/* ---------- 18. 减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal,.js .hero__title .line span{opacity:1!important;transform:none!important}
  .grain{display:none}
  .cursor{display:none!important}
  .marquee__track{animation:none}
}