/* ============================================================
   欧创 Oltra · 官网共享样式
   主页 index.html 与下载页 download.html 共用这一份。
   token 严格对齐 OCut V1.1 skin；主页部分与原演示稿逐字一致（视觉零回归）。
   ============================================================ */
:root{
  --bg:#121214;
  --bg-soft:#161719;
  --surface:#1a1a1e;
  --raised:#242429;
  --steel-1:#292929;
  --steel-2:#2e3032;
  --steel-3:#303132;
  --input:#0e0e0e;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --brand:#ff5a1f;
  --brand-2:#ff6c37;
  --brand-hover:#ff7e4d;
  --brand-dim:rgba(255,90,31,.12);
  --brand-ring:rgba(255,90,31,.18);
  --t1:#f5f5f7;
  --t2:#a1a1a6;
  --t3:#6e6e73;
  --t4:#48484a;
  --ok:#7fae9d;
  --warn:#ffc46b;
  --err:#ff6257;
  --code:#8fd0a9;
  --mono:"SF Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --sans:"PingFang SC",-apple-system,BlinkMacSystemFont,"SF Pro Text","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--t1);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:rgba(255,90,31,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);border:2px solid transparent;background-clip:content-box}
a{color:inherit}

/* ============================================================
   顶栏 — 复刻 OltraHeader
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:46px;background:rgba(22,23,25,.86);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid #232323;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
}
.topbar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 30%,rgba(255,90,31,.4) 50%,rgba(255,255,255,.12) 70%,transparent);
}
.brand{display:flex;align-items:center;gap:8px;padding:2px 8px;border-radius:5px;cursor:pointer;perspective:320px;position:relative;text-decoration:none;color:inherit}
.brand:hover{background:rgba(255,255,255,.05)}
.brand-idle{display:flex;align-items:center;gap:8px;transform-origin:center top;backface-visibility:hidden;transition:transform .28s var(--ease),opacity .28s ease}
.brand:hover .brand-idle{transform:rotateX(86deg);opacity:0}
.brand-swap{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 8px;transform-origin:center top;backface-visibility:hidden;opacity:0;transform:rotateX(-86deg);transition:transform .28s var(--ease),opacity .28s ease;pointer-events:none}
.brand:hover .brand-swap{opacity:1;transform:rotateX(0);pointer-events:auto}
.brand-act{display:inline-flex;align-items:center;justify-content:center;flex:1;height:22px;border:1px solid #282828;background:#303132;color:#cbd5e1;border-radius:4px;font-size:10px;font-family:var(--mono)}
.brand-act.mcp{color:var(--brand);border-color:rgba(255,90,31,.35);background:var(--brand-dim)}
.logo-box{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#2b2b2b,#191919);border:1px solid #3b3b3b;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.logo-box span{font-family:var(--mono);font-weight:800;font-size:11px;color:#fff}
.logo-box i{position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;background:var(--brand)}
.brand-text{display:flex;align-items:baseline;gap:5px}
.brand-text b{font-size:13px;font-weight:700;color:#f8fafc;letter-spacing:-.01em}
.brand-text code{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--t2);text-decoration:none;font-size:12px;padding:5px 10px;border-radius:5px;transition:all .15s ease}
.nav a:hover{color:var(--t1);background:rgba(255,255,255,.05)}
.nav a[aria-current="page"]{color:var(--t1);background:rgba(255,255,255,.06)}
.nav .cta{background:linear-gradient(180deg,#ff6c37,#ff5a1f);color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.18)}
.nav .cta:hover{background:linear-gradient(180deg,#ff7e4d,#ff642c);color:#fff}
@media(max-width:720px){.nav a:not(.cta){display:none}}

/* ============================================================
   通用 section
   ============================================================ */
section{padding:110px 24px;position:relative}
.wrap{max-width:1180px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--brand);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:24px;height:1px;background:var(--brand)}
h2{font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:18px 0 14px}
.lead{color:var(--t2);font-size:15px;max-width:620px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;
  background:
    radial-gradient(1200px 600px at 70% -10%,rgba(255,90,31,.07),transparent 60%),
    radial-gradient(800px 500px at 10% 110%,rgba(255,255,255,.03),transparent 60%),
    var(--bg);
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-bottom:60px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(34px,6vw,68px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:22px 0 18px;max-width:900px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .sub{color:var(--t2);font-size:17px;max-width:640px;margin-bottom:34px}
.hero .sub code{font-family:var(--mono);color:var(--t1);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:4px;font-size:14px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;font-size:13px;font-weight:500;border-radius:6px;border:1px solid var(--line);cursor:pointer;transition:all .15s var(--ease);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg,#ff6c37,#ff5a1f);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 2px 10px rgba(255,90,31,.35)}
.btn-primary:hover{box-shadow:0 4px 18px rgba(255,90,31,.5)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--t1)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.lg{height:44px;padding:0 22px;font-size:14px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn[aria-disabled="true"]:hover,.btn:disabled:hover{box-shadow:none}
.btn-block{width:100%;justify-content:center}

/* ============================================================
   欧视界 OVISION — 签名三面板五灯（hero 主视觉）
   ============================================================ */
.ovision{
  margin-top:64px;
  border-radius:6px;
  border:1px solid #121315;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#292929 0%,#2e3032 55%,#303132 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.55),0 24px 60px rgba(0,0,0,.6);
  padding:12px;
  position:relative;
}
.ovision::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:60px;height:16px;background:linear-gradient(180deg,#343434,#222222);
  border:1px solid #121315;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.4);
}
.ov-grid{display:grid;grid-template-columns:236px 1fr 200px;gap:10px;min-height:230px}
.ov-panel{
  background:linear-gradient(180deg,#191919,#222427);
  border:1px solid #0d0d0d;border-radius:4px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.035),0 1px 0 rgba(255,255,255,.045);
  padding:16px;position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
.ov-round-num{font-family:var(--mono);font-size:24px;font-weight:700;color:#dfe5ee;letter-spacing:.08em;line-height:1}
.ov-cap{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:#525b69;text-transform:uppercase}
.ov-status{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--brand);margin-top:auto}
.ov-codestrip{
  background:#121315;border:1px solid #06080b;border-radius:3px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6);
  padding:6px 10px;overflow:hidden;height:60px;
  font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--code);
}
.ov-codestrip .line{white-space:nowrap;opacity:.9}
.ov-codestrip .line::before{content:"› ";color:#525b69}
.caret{display:inline-block;width:7px;height:12px;background:var(--brand);vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ov-mid{display:flex;align-items:center;justify-content:center}
.lights{display:flex;gap:clamp(8px,2vw,24px)}
.lamp{
  width:64px;height:84px;
  background:linear-gradient(180deg,#1a1a1a,#202225);
  border:1px solid #0d0d0d;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#5a6472;transition:all .4s var(--ease);
}
.lamp svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lamp .zh{font-size:11px;font-weight:600;letter-spacing:.05em}
.lamp .en{font-family:var(--mono);font-size:8px;letter-spacing:.18em;opacity:.7}
.lamp.on{color:var(--brand);box-shadow:0 0 0 1px rgba(255,90,31,.5),0 0 24px rgba(255,90,31,.35);background:linear-gradient(180deg,rgba(255,90,31,.12),rgba(255,90,31,.04))}
.ov-metric{display:flex;flex-direction:column;gap:2px}
.ov-metric b{font-family:var(--mono);font-size:20px;font-weight:700;color:#dfe5ee;letter-spacing:.04em}
.ov-metric span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:#525b69}
@media(max-width:860px){
  .ov-grid{grid-template-columns:1fr;min-height:0}
  .ov-right{display:none}
  .lights{flex-wrap:wrap;justify-content:flex-start}
}
@keyframes roll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.code-scroll{animation:roll 14s linear infinite}

/* ============================================================
   五大特性卡片
   ============================================================ */
.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:50px}
@media(max-width:980px){.cards5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards5{grid-template-columns:1fr}}
.fcard{
  background:linear-gradient(180deg,#191919,#202225);
  border:1px solid #0d0d0d;border-radius:5px;padding:20px 16px;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  transition:all .3s var(--ease);cursor:default;
}
.fcard:hover{box-shadow:0 0 0 1px rgba(255,90,31,.4),0 0 24px rgba(255,90,31,.18)}
.fcard .lampmini{
  width:34px;height:34px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:#101113;border:1px solid #262a30;color:var(--brand);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.fcard .lampmini svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:15px;font-weight:600;margin-bottom:4px}
.fcard .en{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--t3);margin-bottom:10px}
.fcard p{font-size:12.5px;color:var(--t2);line-height:1.65}

/* ============================================================
   Harness 工具墙
   ============================================================ */
.two-col{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;margin-top:40px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.toolwall{
  background:linear-gradient(180deg,#141518,#1a1b1f);
  border:1px solid #0d0d0d;border-radius:6px;padding:22px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5);
}
.toolwall h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--t3);margin:14px 0 8px;text-transform:uppercase}
.toolwall h4:first-child{margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:11px;color:#c9d1d9;background:#0e0e0e;border:1px solid #23272e;border-radius:4px;padding:3px 8px;transition:all .15s ease}
.tag:hover{border-color:rgba(255,90,31,.5);color:var(--brand)}
.tag.hot{color:var(--brand);border-color:rgba(255,90,31,.35);background:var(--brand-dim)}

/* ============================================================
   AgentLoop 流水线
   ============================================================ */
.loopline{display:flex;align-items:stretch;gap:12px;margin-top:50px;padding:16px 4px 10px}
.node{flex:1;min-width:130px;position:relative;padding:18px 14px;background:linear-gradient(180deg,#191919,#202225);border:1px solid #0d0d0d;border-radius:5px}
.node .step{font-family:var(--mono);font-size:10px;color:var(--brand);letter-spacing:.2em}
.node h5{font-size:14px;font-weight:600;margin:6px 0 4px}
.node p{font-size:11.5px;color:var(--t2);line-height:1.55}
.arrow{display:flex;align-items:center;color:var(--brand);padding:0 6px;font-family:var(--mono)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
@media(max-width:720px){.metrics{grid-template-columns:1fr}}
.metric{background:#141518;border:1px solid #1d2025;border-radius:5px;padding:16px}
.metric b{font-family:var(--mono);font-size:22px;color:var(--brand);font-weight:700;display:block}
.metric span{font-size:12px;color:var(--t2)}

/* ============================================================
   引用 + Skills
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.panel-dark{background:linear-gradient(180deg,#141518,#1a1b1f);border:1px solid #0d0d0d;border-radius:6px;padding:26px;box-shadow:inset 0 2px 10px rgba(0,0,0,.5)}
.panel-dark h3{font-size:18px;margin-bottom:6px}
.panel-dark .en{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--brand);margin-bottom:16px}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.flow .box{font-family:var(--mono);font-size:11px;background:#0e0e0e;border:1px solid #23272e;border-radius:4px;padding:6px 10px;color:#c9d1d9}
.flow .box.hot{color:var(--brand);border-color:rgba(255,90,31,.4)}
.flow .arr{color:var(--t3);font-family:var(--mono)}
ul.tight{list-style:none;margin-top:10px}
ul.tight li{font-size:13px;color:var(--t2);padding:6px 0;border-bottom:1px dashed #1d2025;display:flex;gap:8px}
ul.tight li::before{content:"—";color:var(--brand)}

/* ============================================================
   MCP 代码块
   ============================================================ */
.codeblock{
  background:#0b0c0e;border:1px solid #1d2025;border-radius:6px;
  padding:20px 22px;font-family:var(--mono);font-size:12.5px;line-height:1.7;
  overflow-x:auto;color:#c9d1d9;margin-top:30px;
}
.codeblock .k{color:#7ee787}.codeblock .s{color:#a5d6ff}.codeblock .c{color:#6e7681}
.hosts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.host{font-family:var(--mono);font-size:12px;color:var(--t2);border:1px solid #23272e;border-radius:5px;padding:6px 14px}

/* ============================================================
   页脚 CTA
   ============================================================ */
.cta-final{text-align:center;padding:140px 24px;background:radial-gradient(800px 400px at 50% 120%,rgba(255,90,31,.08),transparent 70%),var(--bg)}
.cta-final h2{font-size:clamp(30px,5vw,54px)}
footer{border-top:1px solid #1d2025;padding:30px 24px;text-align:center;color:var(--t3);font-size:12px;font-family:var(--mono)}
footer b{color:var(--t2)}
footer a{color:var(--t2);text-decoration:none;border-bottom:1px dashed #33363b}
footer a:hover{color:var(--brand);border-color:var(--brand)}
footer .flinks{margin-top:10px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer .flinks a{color:var(--t3);text-decoration:none}
footer .flinks a:hover{color:var(--brand)}

/* ============================================================
   媒体展示卡片（不锈钢边框包装）
   ============================================================ */
.media-card{
  background:linear-gradient(180deg,#191919,#202225);
  border:1px solid #0d0d0d;border-radius:6px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55),0 20px 50px rgba(0,0,0,.5);
  padding:10px;position:relative;
}
.media-card .tagline{
  position:absolute;top:-9px;left:18px;
  background:linear-gradient(180deg,#343434,#222222);
  border:1px solid #121315;border-radius:3px;
  padding:2px 10px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--brand);
  z-index:2;
}
.media-frame{
  position:relative;border-radius:4px;overflow:hidden;
  background:#000;border:1px solid #000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.media-frame video,.media-frame img{
  display:block;width:100%;height:auto;
}
.media-caption{padding:12px 6px 4px;color:var(--t2);font-size:13px}
.media-caption b{color:var(--t1);display:block;font-size:14px;margin-bottom:2px}
.media-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:40px}
.media-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
@media(max-width:900px){.media-grid,.media-grid-3{grid-template-columns:1fr}}

/* ============================================================
   时间线模拟动画
   ============================================================ */
.timeline-demo{
  background:#0b0c0e;border:1px solid #1d2025;border-radius:6px;
  padding:18px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
  margin-top:30px;overflow:hidden;
}
.tl-ruler{height:18px;position:relative;margin-bottom:8px;border-bottom:1px solid #262a30}
.tl-tick{position:absolute;top:0;bottom:0;width:1px;background:#2a2e35}
.tl-tick span{position:absolute;top:0;left:4px;font-family:var(--mono);font-size:9px;color:var(--t3)}
.tl-track{position:relative;height:26px;margin-bottom:6px;background:rgba(255,255,255,.02);border-radius:3px}
.tl-clip{
  position:absolute;top:3px;height:20px;border-radius:3px;
  opacity:0;transform:translateX(-20px);
  background:linear-gradient(180deg,rgba(255,90,31,.35),rgba(255,90,31,.15));
  border:1px solid rgba(255,90,31,.5);
  animation:clipIn .6s var(--ease) forwards;
}
.tl-clip.b{background:linear-gradient(180deg,rgba(34,211,238,.3),rgba(34,211,238,.12));border-color:rgba(34,211,238,.5)}
.tl-clip.c{background:linear-gradient(180deg,rgba(127,174,157,.3),rgba(127,174,157,.12));border-color:rgba(127,174,157,.5)}
.tl-clip.d{background:linear-gradient(180deg,rgba(255,196,107,.3),rgba(255,196,107,.12));border-color:rgba(255,196,107,.5)}
@keyframes clipIn{to{opacity:1;transform:none}}
.tl-playhead{
  position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--brand);
  box-shadow:0 0 10px rgba(255,90,31,.8);
  animation:playhead 9s linear infinite;
}
.tl-playhead::before{
  content:"";position:absolute;top:0;left:-4px;
  border:4px solid transparent;border-top:6px solid var(--brand);
}
@keyframes playhead{0%{left:0}100%{left:100%}}

/* ============================================================
   视窗遥测仪表盘
   ============================================================ */
.gauge{
  width:140px;height:140px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #121315 56%, #0b0c0e 57%, #0b0c0e 100%);
  border:1px solid #1d2025;
  position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
}
.gauge .arc{
  position:absolute;inset:8px;border-radius:50%;
  background:conic-gradient(var(--brand) 0deg, var(--brand) var(--prog,240deg), #1d2025 var(--prog,240deg), #1d2025 360deg);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%);
          mask:radial-gradient(circle, transparent 58%, #000 60%);
}
.gauge .needle{
  position:absolute;left:50%;top:50%;width:2px;height:52px;background:var(--brand);
  transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(-120deg);
  animation:needleSwing 3.6s ease-in-out infinite alternate;
}
.gauge .num{position:relative;font-family:var(--mono);font-size:20px;font-weight:700;color:#dfe5ee;margin-top:30px}
@keyframes needleSwing{from{transform:translate(-50%,-100%) rotate(-110deg)}to{transform:translate(-50%,-100%) rotate(100deg)}}

/* 打字机 */
.typing{font-family:var(--mono);font-size:11px;color:var(--code);min-height:2.6em}
.typing::after{content:"▊";color:var(--brand);animation:blink .8s steps(1) infinite;margin-left:2px}

/* ============================================================
   Harness · 对话→时间线联动动画
   ============================================================ */
.agent-demo{
  background:#0b0c0e;border:1px solid #1d2025;border-radius:6px;
  padding:16px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;
}
.agent-chat{display:flex;flex-direction:column;gap:8px;min-height:150px}
.msg{
  max-width:85%;padding:8px 12px;border-radius:8px;font-size:12.5px;line-height:1.5;
  opacity:0;transform:translateY(6px);transition:all .4s var(--ease);
}
.msg.show{opacity:1;transform:none}
.msg.you{align-self:flex-end;background:linear-gradient(180deg,#ff6c37,#ff5a1f);color:#fff;border-bottom-right-radius:2px}
.msg.ai{align-self:flex-start;background:#1a1b1f;border:1px solid #262a30;color:#d8dde4;border-bottom-left-radius:2px}
.msg.ai .meta{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--brand);margin-bottom:3px}
.msg.ai .done{color:var(--ok)}
.agent-tl{margin-top:auto}
.agent-tl .tl-track{height:22px}
.agent-tl .tl-clip{height:16px;top:3px}
.agent-status{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.1em;display:flex;align-items:center;gap:6px}
.agent-status .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand);animation:blink 1s infinite}

/* ============================================================
   Loop · 循环流水线动画
   ============================================================ */
.loopline .node{transition:all .5s var(--ease)}
.loopline .node.active{
  border-color:rgba(255,90,31,.6);
  background:linear-gradient(180deg,rgba(255,90,31,.12),rgba(255,90,31,.04));
  box-shadow:0 0 0 1px rgba(255,90,31,.4),0 0 24px rgba(255,90,31,.25);
}
.loopline .node.active .step{color:var(--brand)}
.loopline .arrow{position:relative;overflow:hidden;min-width:28px}
.loopline .arrow .flow{
  position:absolute;top:50%;left:-6px;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 10px var(--brand);
  transform:translateY(-50%);
  animation:arrowFlow 1.1s var(--ease) infinite;
}
@keyframes arrowFlow{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
/* 窄屏：流水线由横排改竖排，连接件转成竖向点线 */
@media(max-width:860px){
  .loopline{flex-direction:column;align-items:stretch;gap:0}
  .loopline .node{min-width:0}
  .loopline .arrow{min-width:0;height:36px;justify-content:center;padding:0}
  .loopline .arrow::before{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
    background:repeating-linear-gradient(180deg,rgba(255,90,31,.4) 0 3px,transparent 3px 7px);
  }
  .loopline .arrow .flow{
    left:50%;top:-6px;transform:translateX(-50%);
    animation:arrowFlowV 1.1s var(--ease) infinite;
  }
}
@keyframes arrowFlowV{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
.loop-status{
  margin-top:22px;padding:12px 16px;border-radius:5px;
  background:#0e0f11;border:1px solid #1d2025;
  font-family:var(--mono);font-size:12px;color:var(--t2);
  display:flex;align-items:center;gap:10px;
}
.loop-status .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:blink 1s infinite}
.loop-status b{color:var(--t1);font-weight:600}

/* ============================================================
   引用屏：扫描 + 色板动画
   ============================================================ */
.scan-box{
  position:relative;height:120px;border-radius:4px;overflow:hidden;
  background:
    linear-gradient(135deg,#2a2c30,#1a1b1f),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);
  border:1px solid #262a30;
  margin:14px 0;
}
.scan-box .scanline{
  position:absolute;top:0;bottom:0;width:2px;background:var(--brand);
  box-shadow:0 0 12px var(--brand);
  animation:scanX 2.8s var(--ease) infinite;
}
.scan-box .scanline::after{
  content:"";position:absolute;top:0;left:-30px;width:60px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,90,31,.18),transparent);
}
@keyframes scanX{0%{left:5%}50%{left:95%}100%{left:5%}}
.swatches{display:flex;gap:8px;margin-top:10px}
.swatch{width:28px;height:28px;border-radius:4px;border:1px solid rgba(255,255,255,.1);opacity:0;transform:scale(.6);animation:popIn .4s var(--ease) forwards}
.swatch:nth-child(1){background:#d9480f;animation-delay:.2s}
.swatch:nth-child(2){background:#1864ab;animation-delay:.5s}
.swatch:nth-child(3){background:#2b8a3e;animation-delay:.8s}
.swatch:nth-child(4){background:#e67700;animation-delay:1.1s}
.swatch:nth-child(5){background:#343a40;animation-delay:1.4s}
@keyframes popIn{to{opacity:1;transform:none}}
.tag,.host{opacity:0;transform:translateY(6px);animation:tagIn .5s var(--ease) forwards}
.tag:nth-child(1){animation-delay:.1s}.tag:nth-child(2){animation-delay:.2s}
.tag:nth-child(3){animation-delay:.3s}.tag:nth-child(4){animation-delay:.4s}
.tag:nth-child(5){animation-delay:.5s}.tag:nth-child(6){animation-delay:.6s}
.tag:nth-child(7){animation-delay:.7s}.tag:nth-child(8){animation-delay:.8s}
@keyframes tagIn{to{opacity:1;transform:none}}
.host:nth-child(1){animation-delay:.2s}.host:nth-child(2){animation-delay:.4s}
.host:nth-child(3){animation-delay:.6s}.host:nth-child(4){animation-delay:.8s}
.host:nth-child(5){animation-delay:1s}
.host:hover{border-color:rgba(255,90,31,.5);color:var(--brand)}


/* ════════════════════════════════════════════════════════════════
   下载页 download.html
   同一套材质语言：不锈钢外壳 + 内凹面板 + 单点橘色强调。
   ════════════════════════════════════════════════════════════════ */

/* 下载页 hero：不要 100vh，内容更密 */
.dl-hero{padding-top:120px;padding-bottom:64px;
  background:
    radial-gradient(900px 460px at 78% -12%,rgba(255,90,31,.08),transparent 62%),
    radial-gradient(700px 420px at 6% 108%,rgba(255,255,255,.028),transparent 62%),
    var(--bg);
}
.dl-hero h1{font-size:clamp(32px,5.2vw,58px);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:20px 0 16px}
.dl-hero h1 em{font-style:normal;color:var(--brand)}

/* 版本条 */
.dl-verbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding:11px 16px;border-radius:6px;
  background:#0e0f11;border:1px solid #1d2025;
  font-family:var(--mono);font-size:11.5px;color:var(--t2);
}
.dl-verbar .sep{width:1px;height:12px;background:#2a2e35}
.dl-verbar b{color:var(--t1);font-weight:600}
.dl-verbar .ok{color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.dl-verbar .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* 平台卡两联 */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media(max-width:900px){.dl-grid{grid-template-columns:1fr}}

.pcard{
  position:relative;border-radius:7px;padding:26px;min-width:0;
  background:linear-gradient(180deg,#191919,#202225);
  border:1px solid #0d0d0d;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.045),0 18px 44px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:18px;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pcard.ready{border-color:rgba(255,90,31,.22)}
.pcard.ready:hover{box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 0 0 1px rgba(255,90,31,.34),0 18px 44px rgba(0,0,0,.5)}
.pcard.soon{opacity:.9}
/* 推荐角标（按访客系统点亮） */
.pcard .pick{
  position:absolute;top:-9px;left:22px;z-index:2;
  padding:2px 10px;border-radius:3px;
  background:linear-gradient(180deg,#ff6c37,#ff5a1f);
  border:1px solid rgba(255,255,255,.2);
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#fff;
  box-shadow:0 2px 10px rgba(255,90,31,.45);
}
.pcard .pick[hidden]{display:none}

.phead{display:flex;align-items:center;gap:14px}
.picon{
  width:46px;height:46px;flex:none;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#25262a,#161719);
  border:1px solid #2a2e35;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.45);
}
.picon svg{width:24px;height:24px;fill:#e6e8ea}
.pcard.soon .picon svg{fill:#7c8085}
.pname h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pname .plat{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--t3);text-transform:uppercase}
.pname .badge{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  padding:1px 7px;border-radius:3px;vertical-align:1px;
}
.pname .badge.now{color:var(--ok);border:1px solid rgba(127,174,157,.35);background:rgba(127,174,157,.1)}
.pname .badge.wait{color:var(--warn);border:1px solid rgba(255,196,107,.3);background:rgba(255,196,107,.08)}

/* 规格表 */
.specs{display:flex;flex-direction:column;border-top:1px solid #1d2025}
.specs div{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px dashed #1d2025;
  font-size:12.5px;
}
.specs dt,.specs .k{color:var(--t3);font-family:var(--mono);font-size:11px;letter-spacing:.06em;flex:none}
.specs .v{color:var(--t1);text-align:right;word-break:break-all}
.specs .v.mono{font-family:var(--mono);font-size:11.5px}
.specs .v.pending{color:var(--t4)}
.pcard .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.pnote{font-size:11.5px;color:var(--t3);line-height:1.6}
.pnote a{color:var(--t2);text-decoration:none;border-bottom:1px dashed #3a3d42}
.pnote a:hover{color:var(--brand);border-color:var(--brand)}

/* 校验值一行 + 复制 */
.hashrow{display:flex;align-items:center;gap:8px;margin-top:2px}
.hashrow code{
  flex:1;min-width:0;font-family:var(--mono);font-size:10.5px;color:var(--t2);
  background:#0b0c0e;border:1px solid #1d2025;border-radius:4px;
  padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy{flex:none;height:30px;padding:0 11px;font-size:11px;border-radius:4px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--t2);
  cursor:pointer;font-family:var(--mono);letter-spacing:.06em;transition:all .15s ease}
.copy:hover{color:var(--brand);border-color:rgba(255,90,31,.4);background:var(--brand-dim)}

/* 安装步骤 */
.steps{counter-reset:s;margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step-item{
  position:relative;padding:20px 18px 18px 18px;border-radius:6px;min-width:0;
  background:linear-gradient(180deg,#141518,#1a1b1f);
  border:1px solid #0d0d0d;box-shadow:inset 0 2px 10px rgba(0,0,0,.5);
}
.step-item::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--brand);
  display:block;margin-bottom:8px;
}
.step-item h4{font-size:14px;font-weight:600;margin-bottom:6px}
.step-item p{font-size:12.5px;color:var(--t2);line-height:1.65}
.step-item code{font-family:var(--mono);font-size:11.5px;color:var(--code);background:#0b0c0e;border:1px solid #1d2025;border-radius:3px;padding:1px 6px;word-break:break-all}

/* 门禁提示条（未签名 app 首次打开） */
.notice{
  margin-top:22px;padding:16px 18px;border-radius:6px;
  background:rgba(255,90,31,.05);border:1px solid rgba(255,90,31,.22);
  display:flex;gap:14px;align-items:flex-start;
}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notice h4{font-size:13.5px;font-weight:600;margin-bottom:4px}
.notice p{font-size:12.5px;color:var(--t2);line-height:1.7}
.notice code{font-family:var(--mono);font-size:11.5px;color:var(--code);background:#0b0c0e;border:1px solid #1d2025;border-radius:3px;padding:1px 6px;word-break:break-all}

/* 常见问题 */
.faq{margin-top:34px;display:flex;flex-direction:column;gap:8px}
.faq details{
  background:linear-gradient(180deg,#141518,#1a1b1f);
  border:1px solid #0d0d0d;border-radius:5px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:15px 18px;font-size:13.5px;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brand);font-size:15px;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--t1)}
.faq .a{padding:0 18px 16px;font-size:12.5px;color:var(--t2);line-height:1.75}
.faq .a code{font-family:var(--mono);font-size:11.5px;color:var(--code);background:#0b0c0e;border:1px solid #1d2025;border-radius:3px;padding:1px 6px;word-break:break-all}
.faq .a a{color:var(--t1);text-decoration:none;border-bottom:1px dashed #3a3d42}
.faq .a a:hover{color:var(--brand);border-color:var(--brand)}

/* 底部弹出式提示（与软件内一致） */
#toast-layer{position:fixed;left:0;right:0;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9999;pointer-events:none}
.toast{
  background:#242429;border:1px solid rgba(255,90,31,.4);color:#fff;
  padding:8px 16px;border-radius:6px;font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(10px);animation:toastIn .28s var(--ease) forwards;
}
.toast.out{animation:toastOut .35s var(--ease) forwards}
@keyframes toastIn{to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}