/* ═══════════════════════════════════════════════════════════
   Coati OS — coati-os.com
   设计 token 直接取自产品原型 coati-os-design/index.html。
   原则（沿用产品设计规格）：
     · 90% 的界面是黑/灰/白，颜色是信息不是装饰
     · 全站只有一处持续动效：像素精灵
     · 不给每个区块加入场动画 —— 那是模板感的来源
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 中性基底 */
  --ink:#0D0F10;
  --slate:#16191B;
  --haze:#1E2225;
  --line:#2C3134;
  --paper:#EDEFF0;
  --fog:#9AA0A6;
  --faint:#6B7276;

  /* 功能色：每种只回答一个问题 */
  --glow:#5CE6A8;        /* 绿 = 智能体正在活动 */
  --glow-soft:rgba(124,240,196,.14);
  --blue:#5B9DF9;        /* 蓝 = 可点击 */
  --amber:#F0B366;       /* 黄 = 需要你介入 */

  /* 玻璃材质 */
  --g-thick:rgba(20,22,24,.30);
  --g-card:rgba(20,22,24,.26);
  --g-ctrl:rgba(255,255,255,.12);
  --g-brd:rgba(255,255,255,.10);
  --g-brd-s:rgba(255,255,255,.16);
  --blur-lg:blur(34px) saturate(200%) brightness(1.15);
  --blur-md:blur(22px) saturate(180%) brightness(1.10);
  --blur-sm:blur(14px) saturate(160%) brightness(1.08);

  --mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  --ease:cubic-bezier(.3,.9,.3,1);
  --gut:clamp(20px,5vw,40px);
  --maxw:1140px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{
  font-family:var(--sans);
  color:var(--paper);
  background:radial-gradient(1100px 700px at 18% -8%,#15191b 0%,transparent 58%),#0A0C0D;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.wrap-narrow{max-width:820px;}

/* ─────────── 像素精灵（全站唯一持续动效） ─────────── */
.sprite{display:inline-block;position:relative;vertical-align:middle;flex:0 0 auto;}
.sprite i{position:absolute;background:var(--glow);}
.sprite .eye{background:#04201c;}
@keyframes hop{0%,72%,100%{transform:translateY(0)}80%{transform:translateY(-3px)}88%{transform:translateY(0)}}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,240,196,.45)}50%{transform:scale(1.06);box-shadow:0 0 0 7px rgba(124,240,196,0)}}

/* ═══════════ NAV ═══════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,12,13,.72);
  -webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
  border-bottom:1px solid rgba(44,49,52,.7);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:60px;display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.brand-mark{display:inline-flex;}
.brand-name{font-size:15px;font-weight:700;letter-spacing:-.2px;}
.nav-links{display:flex;gap:26px;margin-left:auto;}
.nav-links a{font-size:13px;color:var(--fog);transition:color .15s;}
.nav-links a:hover{color:var(--paper);}
.nav-right{flex:0 0 auto;}

.lang{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-family:var(--sans);font-size:12px;
  background:var(--g-ctrl);border:1px solid var(--g-brd);border-radius:999px;
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  padding:5px 11px;color:var(--faint);
}
.lang-opt{transition:color .15s;}
.lang-opt.on{color:var(--paper);font-weight:600;}
.lang-sep{opacity:.35;}

/* ═══════════ 滚动导航轴 ═══════════ */
/* 只在左边留得出空的宽度下出现——它是锦上添花，不能挤到正文。
   1280 是算出来的：正文最宽 1140 + 两侧 40 内边距，此时文字从 110px 起，
   轴右缘在 50px，留 60px 余量。再窄就贴脸了。 */
.rail{display:none;}
@media (min-width:1280px){
  .rail{
    display:block;position:fixed;z-index:90;
    left:36px;top:50%;transform:translateY(-50%);
    width:14px;height:min(54vh,360px);
  }
}
.rail-line{position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line);}
.rail-tick{position:absolute;left:0;width:14px;height:14px;transform:translateY(-50%);display:block;}
.rail-tick::after{
  content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;
  border-radius:50%;background:#0A0C0D;border:1px solid var(--line);
  transition:border-color .2s,background .2s;
}
.rail-tick:hover::after{border-color:var(--fog);}
.rail-tick.on::after{border-color:var(--glow);background:var(--glow);}

/* 章节名默认不出现——界面主体保持安静，需要时才给 */
.rail-lb{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  font:500 10.5px var(--mono);letter-spacing:.5px;white-space:nowrap;
  color:var(--fog);background:var(--g-ctrl);border:1px solid var(--g-brd);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border-radius:6px;padding:3px 8px;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.rail-tick:hover .rail-lb{opacity:1;}

/* 精灵骑在轴线上，位置由滚动进度驱动（不加 transition，否则会跟不上手感） */
.rail-runner{position:absolute;left:-1px;transform:translateY(-50%);pointer-events:none;}

/* ═══════════ HERO ═══════════ */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(52px,8vw,88px);}
.hero-in{display:grid;grid-template-columns:1fr 330px;gap:clamp(32px,6vw,72px);align-items:center;}

.eyebrow{
  font-size:12px;color:var(--glow);letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--glow);box-shadow:0 0 7px var(--glow);}

.hero-h1{
  font-size:clamp(31px,5.1vw,54px);
  line-height:1.16;font-weight:800;letter-spacing:-1px;
  margin-bottom:22px;
}
html[lang="en"] .hero-h1{letter-spacing:-1.5px;}
.hero-sub{
  font-size:clamp(14.5px,1.5vw,16.5px);color:var(--fog);
  line-height:1.7;max-width:31em;margin-bottom:30px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;border-radius:12px;
  padding:11px 20px;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .15s var(--ease);
}
.btn-primary{background:var(--paper);color:#0D0F10;}
.btn-primary:hover{background:#fff;transform:translateY(-1px);}
.btn-ghost{
  background:var(--g-ctrl);border-color:var(--g-brd-s);color:var(--paper);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-ghost::after{content:"→";opacity:.6;}

.hero-foot{font-size:11.5px;color:var(--faint);display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.hero-foot .dot{opacity:.5;}

/* ─────────── 设备（自动播放展示） ─────────── */
/* 手机外壳与界面全部在 assets/demo.html 里（由设计原型生成），
   这里只负责给它留一块位置。pointer-events:none 保证页面滚动不被 iframe 吃掉。 */
.hero-device{display:flex;justify-content:center;}
.demo-frame{
  width:330px;height:712px;border:0;display:block;
  pointer-events:none;color-scheme:dark;background:transparent;
  /* iframe 和机身一样大，而机身是 50px 圆角——四角会露出 iframe 自己的画布
     （浅色模式下 Chrome 会把它刷成白色）。同样的圆角裁掉，白边就没了。
     外投影本来画在 iframe 内部会被裁掉，挪到这里补上。 */
  border-radius:50px;overflow:hidden;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.85);
}


/* ═══════════ SECTIONS ═══════════ */
.sec{padding:clamp(64px,8vw,106px) 0;border-top:1px solid rgba(44,49,52,.55);}
.sec-tight{padding:clamp(56px,7vw,86px) 0;}

.slab{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
  font-size:11.5px;color:var(--faint);letter-spacing:.6px;text-transform:uppercase;
}
.slab .mono{color:var(--glow);opacity:.8;}
.slab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}

.h2{
  font-size:clamp(23px,3.1vw,34px);line-height:1.28;font-weight:750;
  letter-spacing:-.6px;max-width:23em;margin-bottom:14px;
}
/* 英文单词长、中文字密，两种语言的理想行宽不同 */
html[lang="en"] .h2{max-width:17em;}
.h2-center{margin-left:auto;margin-right:auto;text-align:center;}
.lede{font-size:15px;color:var(--fog);line-height:1.7;max-width:38em;margin-bottom:40px;}

/* ─────────── 01 立足点 ─────────── */
.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lcard{
  padding:24px 22px 26px;border-radius:16px;
  background:var(--g-card);border:1px solid var(--g-brd);
  -webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
}
.lcard-on{border-color:rgba(124,240,196,.30);background:linear-gradient(180deg,rgba(124,240,196,.06),rgba(20,22,24,.26) 62%);}
.lcard-tag{font-size:11px;color:var(--faint);letter-spacing:.5px;margin-bottom:14px;display:block;}
.lcard-on .lcard-tag{color:var(--glow);}
.lcard-h{font-size:17px;font-weight:700;margin-bottom:10px;letter-spacing:-.2px;}
.lcard-p{font-size:13.5px;color:var(--fog);line-height:1.72;}

/* 次要补充行：比卡片更轻一档，明确是附注而不是主线 */
.note{
  margin-top:16px;padding:15px 20px;border-radius:12px;
  border:1px solid var(--line);background:rgba(20,22,24,.35);
  font-size:12.5px;color:var(--faint);line-height:1.7;
  display:flex;gap:14px;align-items:baseline;
}
.note-k{
  flex:0 0 auto;font-size:10.5px;color:var(--fog);letter-spacing:.5px;
  border:1px solid var(--line);border-radius:5px;padding:2px 7px;
}

/* ─────────── 02 产品 ─────────── */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pcard{
  padding:28px 26px 30px;border-radius:16px;
  background:var(--g-card);border:1px solid var(--g-brd);
  -webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
}
.pcard-lead{border-color:rgba(124,240,196,.24);}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;}
.pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.2px;}
.pill-blue{background:rgba(91,157,249,.14);color:var(--blue);border:1px solid rgba(91,157,249,.28);}
.pill-glow{background:var(--glow-soft);color:var(--glow);border:1px solid rgba(124,240,196,.28);}
.pcard-kind{font-size:11px;color:var(--faint);letter-spacing:.4px;}
.pcard-h{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.2;}
.pcard-sub{font-size:13px;color:var(--glow);margin:5px 0 16px;}
.pcard-lead .pcard-sub{color:var(--glow);}
.pcard:not(.pcard-lead) .pcard-sub{color:var(--blue);}
.pcard-p{font-size:13.5px;color:var(--fog);line-height:1.75;margin-bottom:20px;}
.pcard-list{list-style:none;display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:1px solid var(--line);}
.pcard-list li{font-size:12.5px;color:var(--fog);padding-left:17px;position:relative;line-height:1.6;}
.pcard-list li::before{
  content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:1px;
  background:var(--faint);
}
.pcard-lead .pcard-list li::before{background:var(--glow);opacity:.75;}

/* ─────────── 03 能力 · 辐射六边形 ─────────── */
/* 几何写死成 900×500：SVG 连线必须精确落在文字盒边上，
   百分比 + 固定字号会在中间宽度错位。窄屏直接换成竖向列表（见 @media）。 */
.hex{position:relative;width:900px;height:500px;margin:10px auto 0;}
.hex-web{position:absolute;inset:0;width:900px;height:500px;overflow:visible;}

.hx-ring{fill:none;stroke:var(--line);stroke-width:1;}
.hx-spokes line{stroke:var(--line);stroke-width:1;}
.hx-core{fill:none;stroke:rgba(124,240,196,.28);stroke-width:1;}
.hx-dots circle{fill:var(--glow);opacity:.85;}

.hex-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
}

/* top 直接写顶点的 y，再用 translateY(-50%) 居中——
   这样中英文说明换行导致盒高变化时，也始终对准顶点，不用写死盒高。 */
.hex-node{position:absolute;width:210px;transform:translateY(-50%);}
/* 左侧三个右对齐、右侧三个左对齐——文字始终背对中心，不压到连线 */
.hex .n1{top:103px;right:571px;text-align:right;}
.hex .n2{top:103px;left:571px;}
.hex .n3{top:250px;right:666px;text-align:right;}
.hex .n4{top:250px;left:666px;}
.hex .n5{top:397px;right:571px;text-align:right;}
.hex .n6{top:397px;left:571px;}

.hex-n{font-size:11px;color:var(--glow);opacity:.65;display:block;margin-bottom:8px;letter-spacing:.5px;}
.hex-h{font-size:16px;font-weight:700;margin-bottom:7px;letter-spacing:-.2px;}
.hex-p{font-size:12.5px;color:var(--fog);line-height:1.6;}

/* ─────────── 04 演示 ─────────── */
.video{margin-top:32px;}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:linear-gradient(168deg,#191E21 0%,#14181A 40%,#0F1213 100%);
  border:1px solid var(--g-brd);
  max-width:680px;margin:0 auto;
}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#0D0F10;}
.video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.video-txt{font-size:12.5px;color:var(--faint);letter-spacing:.3px;}
.video-cap{text-align:center;font-size:11.5px;color:var(--faint);margin-top:14px;}

/* ─────────── 05 架构 ─────────── */
.arch{display:grid;grid-template-columns:1fr 290px;gap:26px;align-items:start;}
.arch-stack{display:flex;flex-direction:column;gap:6px;}
.arow{
  display:flex;align-items:stretch;gap:14px;
  border:1px solid var(--g-brd);border-radius:12px;padding:14px 16px;
  background:var(--g-card);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
}
.arow-top{border-color:rgba(124,240,196,.28);background:linear-gradient(180deg,rgba(124,240,196,.07),rgba(20,22,24,.26));}
.arow-base{background:rgba(20,22,24,.5);border-style:dashed;}
.arow-n{font-size:11px;color:var(--faint);flex:0 0 20px;padding-top:2px;}
.arow-top .arow-n{color:var(--glow);}
.arow-b{flex:1;display:flex;flex-direction:column;gap:3px;}
.arow-h{font-size:14px;font-weight:650;letter-spacing:-.1px;}
.arow-p{font-size:11.5px;color:var(--faint);}
.arow-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.acell{display:flex;flex-direction:column;gap:3px;}
.acell b{font-size:13px;font-weight:650;}
.acell i{font-style:normal;font-size:11px;color:var(--faint);}

.arch-side{
  border:1px solid var(--g-brd);border-radius:12px;padding:18px 18px 6px;
  background:var(--g-card);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
}
.aside-lb{font-size:11px;color:var(--faint);letter-spacing:.6px;text-transform:uppercase;margin-bottom:16px;}
.cross{display:grid;grid-template-columns:3px 1fr;gap:0 12px;margin-bottom:18px;}
.cross .cx{grid-row:1/3;border-radius:2px;}
.cx-1{background:var(--glow);} .cx-2{background:var(--blue);} .cx-3{background:var(--amber);}
.cross b{font-size:13px;font-weight:650;}
.cross i{font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.55;}

/* ─────────── 06 进展 ─────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:44px;}
.stat{background:#0C0E0F;padding:24px 20px;}
.stat b{display:block;font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1;margin-bottom:11px;color:var(--paper);}
.stat b small{font-size:18px;font-weight:700;color:var(--faint);letter-spacing:-.5px;}
.stat i{font-style:normal;font-size:12px;color:var(--fog);line-height:1.55;display:block;}

.road{list-style:none;border-top:1px solid var(--line);}
.rd{
  display:grid;grid-template-columns:76px minmax(180px,1fr) 2.1fr;gap:18px;
  align-items:baseline;padding:17px 4px;border-bottom:1px solid var(--line);
}
.rd-k{font-size:10.5px;letter-spacing:.4px;padding:3px 0;}
.rd-done .rd-k{color:var(--glow);}
.rd-doing .rd-k{color:var(--amber);}
.rd-plan .rd-k{color:var(--faint);}
.rd-t{font-size:14px;font-weight:650;letter-spacing:-.1px;
      display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
/* 时间标签：中性描边，不用绿/黄——那两个颜色在这套系统里各有专职语义 */
.rd-when{
  flex:0 0 auto;font-size:10px;font-weight:500;letter-spacing:.3px;
  color:var(--fog);border:1px solid var(--line);border-radius:5px;
  padding:2px 7px;white-space:nowrap;
}
.rd-plan .rd-t{color:var(--fog);}
.rd-d{font-size:12.5px;color:var(--faint);line-height:1.65;}

/* ─────────── CLOSER ─────────── */
.closer{padding:clamp(72px,10vw,124px) 0;border-top:1px solid rgba(44,49,52,.55);text-align:center;}
.closer-sprite{display:inline-flex;margin-bottom:26px;}
/* 上面一行是规格条（给技术读者扫的），下面一行才是主张——
   所以上小下大，而不是原来那种上下同量级的对仗句式 */
.closer-q{
  font-size:clamp(12px,1.15vw,14px);font-weight:500;
  color:var(--faint);letter-spacing:.2px;line-height:1.8;
  max-width:46em;margin:0 auto 18px;
}
.closer-a{font-size:clamp(24px,3.4vw,40px);color:var(--paper);font-weight:800;letter-spacing:-.8px;line-height:1.3;}

/* ─────────── FOOT ─────────── */
.foot{border-top:1px solid var(--line);padding:26px 0 34px;}
.foot-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.foot-brand{font-size:13px;font-weight:650;}
.foot-links{display:flex;gap:20px;margin-left:auto;}
.foot-links a{font-size:12.5px;color:var(--fog);transition:color .15s;}
.foot-links a:hover{color:var(--paper);}
.foot-note{font-size:11.5px;color:var(--faint);}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:52px;}
  .hero-copy{max-width:640px;}
  .hero-sub{max-width:none;}
  .arch{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}

  /* 放不下 900px 的图了，换成带左侧细线轨的竖向列表。
     刻意不做成网格——否则刚去掉的网格感会换个地方长回来。 */
  .hex{width:auto;height:auto;margin:0;
       border-left:1px solid var(--line);padding-left:22px;}
  .hex-web,.hex-hub{display:none;}
  /* 选择器要写成 .hex .hex-node —— 上面的 .hex .n1 是两个类，
     单写 .hex-node 压不住它的 text-align:right */
  .hex .hex-node{position:static;width:auto;text-align:left;transform:none;
                 padding:15px 0;border-bottom:1px solid var(--line);}
  .hex .hex-node:last-child{border-bottom:0;padding-bottom:0;}
  .hex .hex-node:first-child{padding-top:0;}
  .hex-n{margin-bottom:6px;}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-in{gap:16px;}
  .nav-right{margin-left:auto;}
  .layer-grid,.prod-grid{grid-template-columns:1fr;}
  .rd{grid-template-columns:1fr;gap:6px;padding:16px 2px;}
  .rd-d{grid-column:1;}
  .arow-3{grid-template-columns:1fr;gap:10px;}
  .h2{max-width:none;}
}
@media (max-width:400px){
  /* iframe 里的手机是固定 330px，窄屏上整体缩一点，
     负 margin 把缩放省下的高度收回来，免得下面留一条空白 */
  .demo-frame{transform:scale(.86);transform-origin:top center;margin-bottom:-100px;}
  .stats{grid-template-columns:1fr;}
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}