/* ============================================================
   AI 模研智控 · 官网样式
   深色工业科技风 · 青蓝为主
   ============================================================ */

:root{
  /* 背景层次 */
  --bg-0: #06080C;
  --bg-1: #0A0D14;
  --bg-2: #0E121B;
  --bg-3: #141924;
  --bg-4: #1A2030;

  /* 边框 */
  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);

  /* 文本 */
  --tx-0: #F2F5FA;
  --tx-1: #D3DAE6;
  --tx-2: #8A94A8;
  --tx-3: #5C6577;
  --tx-4: #3A4152;

  /* 主色 */
  --pri: #4DA3FF;
  --pri-2: #2B7FE6;
  --cyan: #00E5D1;
  --cyan-2: #17B8B0;

  /* 状态色 */
  --warn: #F5A524;
  --danger: #FF5A4A;
  --ok: #4ADE80;

  /* 字体 */
  --font-sans: "Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono: "JetBrains Mono","SF Mono",Menlo,monospace;

  /* 尺寸 */
  --max: 1280px;
  --nav-h: 64px;
  --radius: 14px;
  --radius-sm: 8px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg-0); color:var(--tx-1); font-family:var(--font-sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:
    radial-gradient(ellipse 1200px 700px at 50% -200px, rgba(77,163,255,.08), transparent 60%),
    var(--bg-0);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.mono{ font-family:var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:.01em; }
em{ font-style:normal; background:linear-gradient(180deg,var(--pri) 0%,var(--cyan) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   NAV
============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background:rgba(10,13,20,.55);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.nav.scrolled{
  background:rgba(8,11,17,.85);
  border-bottom-color:var(--line-1);
}
.nav-inner{
  max-width:var(--max); height:100%; margin:0 auto;
  padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--tx-0); font-weight:600; font-size:16px;
  letter-spacing:.01em;
}
.brand-mark{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(77,163,255,.15), rgba(0,229,209,.08));
  border:1px solid rgba(77,163,255,.25);
  color:var(--pri);
}
.brand-mark.small{ width:24px; height:24px; border-radius:6px; }
.brand-dot{ color:var(--pri); margin:0 2px; font-weight:400; }
.brand-name{ display:inline-flex; align-items:center; }

.nav-links{ display:flex; gap:28px; }
.nav-links a{
  color:var(--tx-2); font-size:14px; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--tx-0); }

.nav-cta{ display:flex; gap:10px; align-items:center; }

/* ============================================================
   Buttons
============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:8px;
  font-size:14px; font-weight:500;
  font-family:var(--font-sans);
  cursor:pointer;
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn-lg{ height:48px; padding:0 22px; font-size:15px; border-radius:10px; }
.btn-sm{ height:32px; padding:0 12px; font-size:13px; }
.btn-primary{
  background:linear-gradient(180deg, #5AAAFF 0%, #2E82E6 100%);
  color:#04101F;
  border-color:rgba(255,255,255,.15);
  box-shadow: 0 6px 22px -8px rgba(77,163,255,.6), inset 0 1px 0 rgba(255,255,255,.25);
  font-weight:600;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: 0 10px 26px -8px rgba(77,163,255,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--tx-1);
  border-color:var(--line-2);
}
.btn-ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--line-3); color:var(--tx-0); }

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  padding: calc(var(--nav-h) + 48px) 32px 80px;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 900px 600px at 60% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 900px 600px at 60% 30%, black 30%, transparent 80%);
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.glow-a{ width:520px; height:520px; background:radial-gradient(circle, rgba(77,163,255,.35), transparent 70%); top:-140px; right:-60px; }
.glow-b{ width:420px; height:420px; background:radial-gradient(circle, rgba(0,229,209,.18), transparent 70%); top:200px; left:-80px; }

.hero-inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap:56px; align-items:center;
}

.hero-left{ padding-top:12px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
  border-radius:100px;
  font-size:12px; color:var(--tx-2);
  letter-spacing:.02em;
  margin-bottom:24px;
}
.dot-live{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,229,209,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,229,209,.6); }
  70%{ box-shadow:0 0 0 8px rgba(0,229,209,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,229,209,0); }
}

.hero-title{
  font-size:clamp(38px, 4.4vw, 60px);
  line-height:1.1; font-weight:700;
  color:var(--tx-0);
  margin:0 0 24px;
  letter-spacing:-.01em;
}
.hero-title .line{ display:block; }

.hero-sub{
  font-size:16px; line-height:1.7; color:var(--tx-2);
  max-width:520px;
  margin:0 0 32px;
}

.hero-ctas{ display:flex; gap:12px; margin-bottom:36px; flex-wrap:wrap; }

.hero-meta{
  display:flex; align-items:center; gap:24px;
  padding-top:24px; border-top:1px solid var(--line-1);
}
.meta-item{ display:flex; flex-direction:column; gap:4px; }
.meta-num{ font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--tx-0); letter-spacing:-.01em; }
.meta-num .unit{ font-size:14px; color:var(--tx-2); font-weight:500; margin-left:2px; }
.meta-lbl{ font-size:12px; color:var(--tx-2); }
.meta-sep{ width:1px; height:32px; background:var(--line-1); }

/* ---- Hero 右侧：Console ---- */
.hero-right{ position:relative; }
.console{
  position:relative;
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(77,163,255,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.console-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--line-1);
  background:rgba(255,255,255,.015);
}
.tb-left{ display:flex; align-items:center; gap:8px; }
.tb-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-3); }
.tb-dot:nth-child(1){ background:#ff5f57; opacity:.6; }
.tb-dot:nth-child(2){ background:#febc2e; opacity:.6; }
.tb-dot:nth-child(3){ background:#28c840; opacity:.6; }
.tb-title{ margin-left:8px; font-size:12px; color:var(--tx-2); font-weight:500; }
.tb-right{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--tx-3); }
.tb-tag{
  padding:2px 6px; border-radius:3px;
  background:rgba(0,229,209,.12); color:var(--cyan);
  font-size:10px; font-weight:600; letter-spacing:.05em;
}

.console-body{
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap:0;
}

/* Proj card 左 */
.proj-card{
  padding:20px;
  border-right:1px solid var(--line-1);
}
.proj-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; gap:12px; }
.proj-code{ font-size:10px; color:var(--tx-3); letter-spacing:.05em; margin-bottom:4px; }
.proj-title{ font-size:15px; font-weight:600; color:var(--tx-0); }
.proj-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; padding:4px 8px;
  border-radius:100px;
  border:1px solid;
  white-space:nowrap;
}
.stat-ok{ color:var(--ok); border-color:rgba(74,222,128,.25); background:rgba(74,222,128,.06); }
.stat-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }

.proj-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
  margin-bottom:18px;
}
.pg-lbl{ font-size:11px; color:var(--tx-3); margin-bottom:3px; letter-spacing:.02em; }
.pg-val{ font-size:13px; color:var(--tx-0); font-weight:500; }

.proj-timeline{
  display:flex; align-items:center;
  padding:14px 8px 4px;
  border-top:1px dashed var(--line-1);
}
.tl-step{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:10px; color:var(--tx-3);
  flex:0 0 auto;
}
.tl-node{
  width:9px; height:9px; border-radius:50%;
  background:var(--bg-3); border:1.5px solid var(--tx-4);
}
.tl-step.done{ color:var(--tx-1); }
.tl-step.done .tl-node{ background:var(--pri); border-color:var(--pri); }
.tl-step.active{ color:var(--cyan); }
.tl-step.active .tl-node{
  background:var(--cyan); border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,209,.18);
  animation:pulse 2s infinite;
}
.tl-line{ flex:1; height:1.5px; background:var(--tx-4); margin:0 2px; margin-bottom:16px; }
.tl-line.done{ background:var(--pri); }
.tl-line.active{ background:linear-gradient(90deg, var(--pri), var(--cyan)); }

/* Chat card 右 */
.chat-card{ padding:20px; display:flex; flex-direction:column; gap:14px; }
.chat-head{ display:flex; justify-content:space-between; align-items:center; }
.chat-title{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tx-2); }
.chat-time{ font-size:11px; color:var(--tx-3); }
.chat-bubble{
  padding:12px 14px;
  background:var(--bg-3);
  border:1px solid var(--line-1);
  border-radius:10px;
  border-top-left-radius:2px;
  font-size:13px; color:var(--tx-1); line-height:1.55;
}

.ai-parse{
  border:1px solid rgba(77,163,255,.2);
  background: linear-gradient(180deg, rgba(77,163,255,.05), rgba(0,229,209,.02));
  border-radius:10px;
  padding:14px;
  position:relative;
}
.ai-parse-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ai-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--pri);
}
.ai-badge-dot{
  width:6px; height:6px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--pri), var(--cyan), var(--pri));
  animation:spin 3s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.ai-time{ font-size:10px; color:var(--tx-3); }

.ai-fields{ display:flex; flex-direction:column; gap:6px; }
.ai-field{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 8px;
  border-radius:6px;
  font-size:12px;
}
.ai-field.highlight{ background:rgba(77,163,255,.08); }
.af-key{ color:var(--tx-2); }
.af-val{ color:var(--tx-0); font-weight:500; }
.af-val.ok{ color:var(--ok); }

.ai-actions{ display:flex; gap:8px; margin-top:12px; }

/* Console foot */
.console-foot{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top:1px solid var(--line-1);
  background:rgba(0,0,0,.15);
}
.cf-item{
  padding:12px 16px;
  border-right:1px solid var(--line-1);
  display:flex; flex-direction:column; gap:4px;
}
.cf-item:last-child{ border-right:none; }
.cf-lbl{ font-size:10px; color:var(--tx-3); letter-spacing:.02em; }
.cf-val{ font-size:18px; font-weight:600; color:var(--tx-0); }
.cf-unit{ font-size:12px; color:var(--tx-2); margin-left:1px; }
.cf-item.warn .cf-val{ color:var(--warn); }

/* Console flow lines */
.console-flow{
  position:absolute; top:0; left:0; right:0; height:2px;
  overflow:hidden; pointer-events:none;
}
.flow-line{
  position:absolute; top:0; height:2px; width:80px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.7;
  animation: flow 4s linear infinite;
}
.flow-line.f1{ animation-delay:0s; }
.flow-line.f2{ animation-delay:1.4s; }
.flow-line.f3{ animation-delay:2.8s; }
@keyframes flow{
  0%{ left:-80px; }
  100%{ left:100%; }
}

/* Floating AI notice */
.floating-ai{
  position:absolute;
  bottom:-16px; left:-24px;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line-2);
  border-radius:10px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.6);
  max-width:280px;
}
.fa-icon{
  width:28px; height:28px; border-radius:8px;
  background:rgba(0,229,209,.12);
  color:var(--cyan);
  display:grid; place-items:center;
  flex-shrink:0;
}
.fa-title{ font-size:12px; font-weight:600; color:var(--tx-0); }
.fa-sub{ font-size:11px; color:var(--tx-2); margin-top:2px; }

/* Hero partners */
.hero-partners{
  max-width:var(--max); margin:80px auto 0;
  padding-top:32px;
  border-top:1px solid var(--line-1);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.hp-label{ font-size:12px; color:var(--tx-3); letter-spacing:.02em; }
.hp-tags{ display:flex; gap:20px; flex-wrap:wrap; }
.hp-tag{ font-size:13px; color:var(--tx-2); font-weight:500; }

/* ============================================================
   SECTION shell
============================================================ */
.section{ padding:120px 32px; position:relative; }
.section-inner{ max-width:var(--max); margin:0 auto; position:relative; }
.section-inner.narrow{ max-width:900px; }

.sec-head{ text-align:center; margin-bottom:64px; }
.sec-tag{
  display:inline-block;
  font-size:11px; letter-spacing:.15em;
  color:var(--pri);
  padding:4px 10px;
  border:1px solid rgba(77,163,255,.25);
  background:rgba(77,163,255,.05);
  border-radius:100px;
  margin-bottom:20px;
  text-transform:uppercase;
}
.sec-title{
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.2; font-weight:700; color:var(--tx-0);
  margin:0 0 16px; letter-spacing:-.01em;
}
.sec-sub{
  font-size:16px; color:var(--tx-2); line-height:1.6;
  max-width:640px; margin:0 auto;
}

/* ============================================================
   痛点区
============================================================ */
.pain{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.008) 40%, transparent); }
.pain-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.pain-card{
  position:relative;
  padding:28px 24px;
  background:var(--bg-1);
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  transition:all .25s ease;
  overflow:hidden;
}
.pain-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at top right, rgba(255,90,74,.06), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.pain-card:hover{ transform:translateY(-3px); border-color:var(--line-3); }
.pain-card:hover::before{ opacity:1; }
.pain-num{
  position:absolute; top:20px; right:20px;
  font-size:11px; color:var(--tx-4); letter-spacing:.05em;
}
.pain-icon{
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-1);
  color:var(--tx-2);
  margin-bottom:20px;
}
.pain-h{ font-size:18px; font-weight:600; color:var(--tx-0); margin-bottom:8px; }
.pain-p{ font-size:13px; color:var(--tx-2); line-height:1.6; margin-bottom:20px; }
.pain-tag{
  display:inline-block;
  font-size:11px; padding:3px 8px;
  border-radius:4px;
  background:rgba(255,90,74,.08); color:#ff8a7d;
  font-family:var(--font-mono);
}

/* ============================================================
   核心转变 Before/After
============================================================ */
.shift{ background:var(--bg-1); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.shift-grid{
  display:grid;
  grid-template-columns: 1fr 80px 1fr;
  gap:24px; align-items:stretch;
}
.shift-col{
  background:var(--bg-2);
  border:1px solid var(--line-1);
  border-radius:var(--radius);
  padding:28px;
  display:flex; flex-direction:column;
}
.shift-after{
  background:linear-gradient(180deg, rgba(77,163,255,.04), rgba(0,229,209,.02));
  border-color:rgba(77,163,255,.2);
  box-shadow:0 20px 60px -30px rgba(77,163,255,.3);
}
.shift-col-head{ margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line-1); }
.sc-tag{
  display:inline-block; font-size:10px; letter-spacing:.15em;
  padding:3px 8px; border-radius:3px;
  background:rgba(255,255,255,.04); color:var(--tx-3);
  margin-bottom:10px;
}
.sc-tag-ai{ background:rgba(77,163,255,.15); color:var(--pri); }
.sc-title{ display:block; font-size:16px; font-weight:600; color:var(--tx-0); }

.shift-steps{ list-style:none; padding:0; margin:0; flex:1; }
.shift-steps li{
  display:flex; align-items:center; gap:14px;
  padding:11px 0;
  font-size:14px; color:var(--tx-2);
  border-bottom:1px dashed var(--line-1);
}
.shift-steps li:last-child{ border-bottom:none; }
.ss-idx{
  width:28px; font-size:11px; color:var(--tx-4); letter-spacing:.02em;
}
.shift-before li.risk{ color:#ff8a7d; }
.shift-before li.risk .ss-idx{ color:var(--danger); }
.shift-after li{ color:var(--tx-1); }
.shift-after li .ss-idx{ color:var(--pri); }
.shift-after li.win{ color:var(--cyan); font-weight:500; }
.shift-after li.win .ss-idx{ color:var(--cyan); }

.shift-col-foot{
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line-1);
  display:flex; flex-direction:column; gap:10px;
}
.scf-item{ display:flex; align-items:center; gap:12px; font-size:12px; }
.scf-lbl{ width:64px; color:var(--tx-3); }
.scf-bar{
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.scf-bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--pri), var(--cyan));
}

.shift-arrow{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
}
.sa-line{
  width:1.5px; flex:1;
  background:linear-gradient(180deg, transparent, var(--line-3), transparent);
}
.sa-icon{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--pri), var(--cyan));
  color:#04101F;
  display:grid; place-items:center;
  box-shadow:0 8px 24px -6px rgba(77,163,255,.5);
}

/* ============================================================
   AI 沟通识别
============================================================ */
.ai-demo{
  display:grid;
  grid-template-columns: 1fr 64px 1fr;
  gap:20px; align-items:stretch;
  margin-bottom:56px;
}
.ai-demo-input, .ai-demo-output{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:24px;
  display:flex; flex-direction:column;
}
.ai-demo-input{ background:linear-gradient(180deg,var(--bg-2), var(--bg-1)); }
.aid-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.aid-label{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--tx-2); }
.aid-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--cyan); }
.aid-text{
  flex:1;
  padding:18px 20px;
  background:var(--bg-3);
  border:1px solid var(--line-1);
  border-radius:10px;
  font-size:16px; color:var(--tx-0); line-height:1.6;
  min-height:120px;
}
.caret{
  display:inline-block; width:2px; margin-left:2px;
  color:var(--cyan);
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.aid-foot{
  margin-top:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.aid-hint{ font-size:11px; color:var(--tx-4); }

.ai-demo-arrow{
  display:grid; place-items:center;
}
.ada-dots{ display:flex; flex-direction:column; gap:8px; }
.ada-dots i{
  display:block; width:8px; height:8px; border-radius:50%;
  background:var(--pri);
  opacity:.3;
  animation: dotFade 1.4s infinite;
}
.ada-dots i:nth-child(2){ animation-delay:.2s; }
.ada-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dotFade{
  0%,100%{ opacity:.3; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.3); }
}

.ai-demo-output{
  background:linear-gradient(180deg, rgba(77,163,255,.06), rgba(0,229,209,.02));
  border-color:rgba(77,163,255,.25);
}
.ado-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ado-title{ font-size:13px; font-weight:600; color:var(--tx-0); }
.ado-conf{ font-size:11px; color:var(--cyan); }
.ado-rows{ display:flex; flex-direction:column; gap:2px; flex:1; }
.ado-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:6px;
  font-size:13px;
  border-bottom:1px dashed var(--line-1);
}
.ado-row:last-child{ border-bottom:none; }
.ado-row.hi{ background:rgba(77,163,255,.06); border-bottom-color:transparent; }
.ado-k{ color:var(--tx-2); font-size:12px; }
.ado-v{ color:var(--tx-0); font-weight:500; }
.ado-v.ok{ color:var(--ok); }
.ado-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

.ai-features{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.af-item{
  padding:20px;
  background:var(--bg-1);
  border:1px solid var(--line-1);
  border-radius:var(--radius-sm);
  transition:all .2s;
}
.af-item:hover{ border-color:var(--line-3); background:var(--bg-2); }
.af-num{ font-size:11px; color:var(--pri); letter-spacing:.05em; margin-bottom:12px; display:block; }
.af-h{ font-size:15px; font-weight:600; color:var(--tx-0); margin-bottom:6px; }
.af-p{ font-size:12px; color:var(--tx-2); line-height:1.6; }

/* ============================================================
   承诺追踪
============================================================ */
.commit{ background:var(--bg-1); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.commit-card{
  max-width:900px; margin:0 auto;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:32px;
}
.commit-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:24px; border-bottom:1px solid var(--line-1);
  margin-bottom:24px;
  gap:20px; flex-wrap:wrap;
}
.ch-code{ font-size:11px; color:var(--tx-3); margin-bottom:6px; letter-spacing:.02em; }
.ch-title{ font-size:18px; font-weight:600; color:var(--tx-0); }
.ch-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.ch-tag{
  font-size:11px; padding:4px 10px;
  border-radius:100px;
  background:rgba(255,255,255,.04);
  color:var(--tx-2);
  border:1px solid var(--line-1);
}
.ch-tag.warn{ background:rgba(245,165,36,.1); color:var(--warn); border-color:rgba(245,165,36,.25); }

.commit-list{ position:relative; margin-bottom:24px; }
.cm-row{ display:grid; grid-template-columns:60px 32px 1fr; gap:12px; padding:12px 0; }
.cm-date{ font-size:12px; color:var(--tx-3); padding-top:2px; }
.cm-line{ position:relative; }
.cm-line::before{
  content:""; position:absolute;
  left:50%; top:20px; bottom:-16px;
  width:1px; background:var(--line-2);
  transform:translateX(-50%);
}
.cm-row:last-child .cm-line::before{ display:none; }
.cm-node{
  width:12px; height:12px; border-radius:50%;
  background:var(--bg-3); border:2px solid var(--tx-3);
  position:absolute; left:50%; top:4px;
  transform:translateX(-50%);
  z-index:1;
}
.cm-node.warn{ border-color:var(--warn); background:rgba(245,165,36,.2); }
.cm-node.ok{ border-color:var(--ok); background:rgba(74,222,128,.2); }

.cm-body{ padding-bottom:8px; }
.cm-label{ font-size:11px; color:var(--tx-3); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
.cm-label.warn{ color:var(--warn); }
.cm-label.ok{ color:var(--ok); }
.cm-text{
  font-size:14px; color:var(--tx-1);
  padding:10px 14px;
  background:var(--bg-3);
  border:1px solid var(--line-1);
  border-radius:8px;
  margin-bottom:6px;
}
.cm-meta{ font-size:11px; color:var(--tx-3); }

.commit-summary{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-top:20px; border-top:1px solid var(--line-1);
  gap:16px;
}
.cs-item{ display:flex; flex-direction:column; gap:6px; }
.cs-lbl{ font-size:11px; color:var(--tx-3); }
.cs-val{ font-size:15px; color:var(--tx-0); font-weight:600; }
.cs-val.warn{ color:var(--warn); }
.cs-val.ok{ color:var(--ok); }

/* ============================================================
   风险预警
============================================================ */
.risk-wrap{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:32px;
  align-items:start;
}
.risk-alert{
  background:linear-gradient(180deg, rgba(245,165,36,.06), rgba(255,90,74,.02));
  border:1px solid rgba(245,165,36,.3);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: 0 24px 60px -30px rgba(245,165,36,.4);
}
.ra-head{
  display:flex; align-items:center; gap:14px;
  padding:20px 24px;
  border-bottom:1px solid rgba(245,165,36,.15);
  background:rgba(245,165,36,.04);
}
.ra-icon{
  width:36px; height:36px; border-radius:8px;
  background:rgba(245,165,36,.15);
  color:var(--warn);
  display:grid; place-items:center;
  flex-shrink:0;
}
.ra-titles{ flex:1; }
.ra-title{ font-size:15px; font-weight:600; color:var(--tx-0); }
.ra-sub{ font-size:11px; color:var(--tx-3); margin-top:2px; }
.ra-level{
  font-size:11px; padding:4px 10px;
  border-radius:100px;
  background:rgba(245,165,36,.15);
  color:var(--warn);
  font-weight:600;
}

.ra-body{ padding:24px; }
.ra-block{ margin-bottom:16px; }
.ra-block-lbl{ font-size:11px; color:var(--tx-3); margin-bottom:4px; letter-spacing:.02em; }
.ra-block-val{ font-size:14px; color:var(--tx-0); font-weight:500; }
.ra-block-val.quote{
  padding:10px 12px; background:var(--bg-3); border-radius:6px;
  border-left:2px solid var(--warn);
  color:var(--tx-1); font-weight:400;
}
.ra-hint{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  background:rgba(245,165,36,.08);
  border:1px dashed rgba(245,165,36,.3);
  border-radius:8px;
  font-size:13px; color:var(--tx-1);
  margin:16px 0;
}
.rh-dot{
  width:6px; height:6px; border-radius:50%; background:var(--warn);
  animation:pulse 2s infinite;
  box-shadow:0 0 0 0 rgba(245,165,36,.5);
  flex-shrink:0;
}
.ra-suggest{ margin-top:16px; }
.rs-title{ font-size:12px; font-weight:600; color:var(--tx-0); margin-bottom:10px; letter-spacing:.02em; }
.ra-suggest ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.ra-suggest li{
  font-size:13px; color:var(--tx-1);
  padding-left:16px; position:relative;
}
.ra-suggest li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:var(--tx-3);
}
.ra-actions{ display:flex; gap:8px; margin-top:20px; }

.risk-types{ display:flex; flex-direction:column; gap:12px; }
.rt-item{
  padding:18px 20px;
  background:var(--bg-1);
  border:1px solid var(--line-1);
  border-radius:var(--radius-sm);
  transition:all .2s;
}
.rt-item:hover{ border-color:var(--line-3); transform:translateX(3px); }
.rt-num{ font-size:11px; color:var(--pri); letter-spacing:.05em; margin-bottom:8px; display:block; }
.rt-h{ font-size:15px; font-weight:600; color:var(--tx-0); margin-bottom:4px; }
.rt-p{ font-size:12px; color:var(--tx-2); line-height:1.55; }

/* ============================================================
   工作台
============================================================ */
.workbench{ background:var(--bg-1); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.wb-wrap{ max-width:1080px; margin:0 auto; }

.wb-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:24px;
}
.wbs-item{
  padding:20px 22px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.wbs-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--pri);
  opacity:.6;
}
.wbs-item.warn::before{ background:var(--danger); }
.wbs-lbl{ font-size:12px; color:var(--tx-2); margin-bottom:8px; }
.wbs-val{ font-size:32px; font-weight:700; color:var(--tx-0); line-height:1; margin-bottom:8px; }
.wbs-item.warn .wbs-val{ color:var(--danger); }
.wbs-trend{ font-size:11px; color:var(--tx-3); }

.wb-list{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
}
.wbl-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px;
  border-bottom:1px solid var(--line-1);
  background:rgba(255,255,255,.015);
}
.wbl-title{ font-size:15px; font-weight:600; color:var(--tx-0); }
.wbl-sub{ font-size:11px; color:var(--tx-3); }

.wbl-row{
  display:grid;
  grid-template-columns: 90px 1fr 100px 80px;
  gap:16px; align-items:center;
  padding:16px 24px;
  border-bottom:1px solid var(--line-1);
  transition:background .15s;
}
.wbl-row:last-child{ border-bottom:none; }
.wbl-row:hover{ background:rgba(255,255,255,.015); }
.wbl-tag{
  font-size:11px; text-align:center;
  padding:4px 8px; border-radius:4px;
  font-weight:600; letter-spacing:.02em;
}
.wbl-tag.urgent{ background:rgba(255,90,74,.12); color:var(--danger); }
.wbl-tag.warn{ background:rgba(245,165,36,.12); color:var(--warn); }
.wbl-tag.normal{ background:rgba(255,255,255,.04); color:var(--tx-2); }
.wbl-main{ min-width:0; }
.wbl-code{ font-size:10px; color:var(--tx-3); letter-spacing:.02em; margin-bottom:2px; }
.wbl-name{ font-size:14px; font-weight:600; color:var(--tx-0); margin-bottom:3px; }
.wbl-desc{ font-size:12px; color:var(--tx-2); }
.wbl-desc .hl{ color:var(--tx-1); }
.wbl-meta{ font-size:11px; color:var(--tx-3); text-align:right; }

/* ============================================================
   Timeline
============================================================ */
.timeline{ }
.tl-card{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:32px;
}
.tl-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:24px; margin-bottom:32px;
  border-bottom:1px solid var(--line-1);
  gap:20px; flex-wrap:wrap;
}
.tlc-code{ font-size:11px; color:var(--tx-3); margin-bottom:6px; }
.tlc-title{ font-size:18px; font-weight:600; color:var(--tx-0); }
.tlc-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tlc-tag{
  font-size:11px; padding:4px 10px;
  border-radius:100px;
  background:rgba(255,255,255,.04);
  color:var(--tx-2);
  border:1px solid var(--line-1);
}
.tlc-tag.ok{ background:rgba(74,222,128,.1); color:var(--ok); border-color:rgba(74,222,128,.25); }

.tl-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  padding:32px 0 8px;
}
.tl-track::before{
  content:""; position:absolute;
  top:40px; left:5%; right:5%;
  height:2px;
  background:linear-gradient(90deg, var(--pri) 0%, var(--pri) 60%, var(--warn) 60%, var(--warn) 78%, var(--ok) 78%, var(--ok) 100%);
  opacity:.5;
}
.tl-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:0 6px;
  text-align:center;
}
.tli-node{
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-2);
  border:2px solid var(--tx-4);
  margin-bottom:14px;
  position:relative; z-index:1;
}
.tl-item.done .tli-node{ background:var(--pri); border-color:var(--pri); box-shadow:0 0 0 4px rgba(77,163,255,.15); }
.tl-item.done.warn .tli-node{ background:var(--warn); border-color:var(--warn); box-shadow:0 0 0 4px rgba(245,165,36,.15); }
.tl-item.done.ok .tli-node{ background:var(--ok); border-color:var(--ok); box-shadow:0 0 0 4px rgba(74,222,128,.2); }
.tl-item.done.ai .tli-node{
  background:conic-gradient(from 0deg, var(--pri), var(--cyan), var(--pri));
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,229,209,.15);
}
.tli-date{ font-size:10px; color:var(--tx-3); margin-bottom:4px; letter-spacing:.02em; }
.tli-title{ font-size:12px; font-weight:600; color:var(--tx-0); margin-bottom:4px; }
.tli-desc{ font-size:11px; color:var(--tx-3); line-height:1.5; }

/* ============================================================
   供应商
============================================================ */
.supplier{ background:var(--bg-1); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.sup-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-bottom:32px;
}
.sup-card{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
}
.sup-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px;
  border-bottom:1px solid var(--line-1);
}
.sup-name{ font-size:16px; font-weight:600; color:var(--tx-0); margin-bottom:4px; }
.sup-tag{ font-size:11px; color:var(--tx-3); letter-spacing:.02em; }
.sup-score{ text-align:center; }
.sup-score-num{
  font-size:32px; font-weight:700; color:var(--tx-0);
  line-height:1;
  background:linear-gradient(135deg, var(--pri), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sup-score-num.na{ background:none; color:var(--tx-4); -webkit-text-fill-color:var(--tx-4); }
.sup-score-lbl{ font-size:10px; color:var(--tx-3); margin-top:4px; }

.sup-body{ padding:20px 24px; }
.sup-metric{
  display:grid; grid-template-columns:1fr auto; gap:8px 16px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed var(--line-1);
}
.sup-metric:last-child{ border-bottom:none; }
.sm-lbl{ font-size:12px; color:var(--tx-2); }
.sm-val{ font-size:13px; color:var(--tx-0); font-weight:600; text-align:right; }
.sm-bar{
  grid-column:1 / -1;
  height:4px; border-radius:2px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  margin-top:2px;
}
.sm-bar i{
  display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--pri), var(--cyan));
}

.sup-card.empty .sup-body{ padding:32px 24px; }
.sup-empty{ text-align:center; color:var(--tx-3); }
.sup-empty svg{ margin:0 auto 12px; color:var(--tx-4); }
.sup-empty-h{ font-size:14px; color:var(--tx-1); font-weight:600; margin-bottom:6px; }
.sup-empty-p{ font-size:12px; line-height:1.6; margin-bottom:12px; }
.sup-empty-meta{
  display:inline-block;
  font-size:11px; padding:4px 10px;
  background:rgba(255,255,255,.03);
  border:1px dashed var(--line-2);
  border-radius:100px;
  color:var(--tx-2);
}

.sup-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px;
  background:rgba(77,163,255,.04);
  border:1px dashed rgba(77,163,255,.2);
  border-radius:8px;
  font-size:12px; color:var(--tx-2);
}
.sup-note-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pri);
}

/* ============================================================
   Value cards
============================================================ */
.value-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.val-card{
  padding:32px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  transition:all .25s;
}
.val-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--pri), var(--cyan), transparent);
  opacity:.4;
}
.val-card:hover{ transform:translateY(-4px); border-color:rgba(77,163,255,.3); }
.val-num{ font-size:11px; color:var(--pri); letter-spacing:.05em; margin-bottom:20px; display:block; }
.val-icon{
  width:52px; height:52px; border-radius:12px;
  background:rgba(77,163,255,.08);
  border:1px solid rgba(77,163,255,.2);
  color:var(--pri);
  display:grid; place-items:center;
  margin-bottom:20px;
}
.val-h{ font-size:20px; font-weight:600; color:var(--tx-0); margin-bottom:8px; }
.val-p{ font-size:13px; color:var(--tx-2); line-height:1.65; margin-bottom:24px; }
.val-metric{
  padding-top:20px; border-top:1px solid var(--line-1);
}
.vm-num{
  display:block;
  font-size:32px; font-weight:700;
  color:var(--tx-0); line-height:1; margin-bottom:6px;
  background:linear-gradient(180deg, var(--tx-0), var(--pri));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vm-unit{ font-size:16px; margin-left:2px; }
.vm-lbl{ font-size:11px; color:var(--tx-3); }

/* ============================================================
   Management dashboard
============================================================ */
.manage{ background:var(--bg-1); border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1); }
.mgm-dashboard{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:32px;
}
.mgm-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid var(--line-1);
  flex-wrap:wrap; gap:12px;
}
.mgm-title{ font-size:16px; font-weight:600; color:var(--tx-0); }
.mgm-period{
  display:flex; gap:2px;
  background:var(--bg-3);
  padding:3px;
  border-radius:8px;
  border:1px solid var(--line-1);
}
.mp-item{
  padding:5px 12px;
  font-size:11px; color:var(--tx-2);
  border-radius:5px;
  cursor:pointer;
}
.mp-item.active{ background:var(--bg-4); color:var(--tx-0); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

.mgm-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.mgm-cell{
  padding:20px;
  background:var(--bg-3);
  border:1px solid var(--line-1);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.mgm-cell.wide{ grid-column: span 4; }
.mgm-cell.warn{ border-color:rgba(255,90,74,.2); background:linear-gradient(180deg,rgba(255,90,74,.05), var(--bg-3)); }
.mgc-lbl{ font-size:11px; color:var(--tx-3); margin-bottom:12px; letter-spacing:.02em; }
.mgc-val{ font-size:32px; font-weight:700; color:var(--tx-0); line-height:1; margin-bottom:14px; }
.mgc-unit{ font-size:16px; color:var(--tx-2); }
.mgm-cell.warn .mgc-val{ color:var(--danger); }

.mgc-bar{
  display:flex; height:6px; border-radius:3px; overflow:hidden;
  margin-bottom:10px;
  background:rgba(255,255,255,.03);
}
.mgb-seg{ display:block; height:100%; }
.mgc-legend{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--tx-2); }
.mgc-legend span{ display:flex; align-items:center; gap:6px; }
.mgc-legend i{ width:8px; height:8px; border-radius:2px; }

.mgc-list{ display:flex; flex-direction:column; gap:8px; }
.mgc-list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px;
  background:rgba(0,0,0,.2);
  border-radius:5px;
  font-size:11px;
}
.mgc-list-row .mono{ color:var(--tx-2); }
.mgcl-tag{ color:var(--danger); font-size:10px; }

.mgc-trend{ display:flex; align-items:center; gap:12px; }
.spark{ flex:1; height:32px; }
.trend-lbl{ font-size:11px; color:var(--ok); white-space:nowrap; }

.mgc-ring{ display:grid; place-items:center; }
.mgc-ring svg{ width:70px; height:70px; }

.mgc-chart{
  position:relative;
  margin-bottom:10px;
}
.mgc-chart svg{ width:100%; height:100px; display:block; }
.mgc-chart-x{
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--tx-4);
  padding:0 4px;
  margin-top:4px;
}
.mgc-chart-meta{ font-size:11px; color:var(--tx-2); margin-top:6px; }

/* ============================================================
   产品理念
============================================================ */
.philosophy{
  padding:140px 32px;
  background:
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(77,163,255,.08), transparent 70%),
    var(--bg-0);
  border-top:1px solid var(--line-1);
  border-bottom:1px solid var(--line-1);
}
.phi-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
  border-radius:100px;
  font-size:11px; color:var(--pri);
  margin-bottom:40px;
  letter-spacing:.05em;
}
.phi-text{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.5; font-weight:600;
  color:var(--tx-0);
  margin:0 0 48px;
  letter-spacing:-.005em;
}
.phi-line{ display:block; }
.phi-line.dim{ color:var(--tx-3); font-weight:400; }
.phi-break{ height:24px; }

.phi-sign{
  padding-top:32px;
  border-top:1px solid var(--line-1);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.phi-brand{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; color:var(--tx-0);
}
.phi-slogan{ font-size:13px; color:var(--tx-2); }

/* ============================================================
   CTA
============================================================ */
.cta{ padding:80px 32px 120px; }
.cta-card{
  position:relative;
  padding:80px 48px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid rgba(77,163,255,.25);
  border-radius:20px;
  overflow:hidden;
  text-align:center;
  box-shadow:
    0 40px 100px -40px rgba(77,163,255,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.cta-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.cta-glow{
  position:absolute;
  top:-100px; left:50%; transform:translateX(-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse, rgba(77,163,255,.3), transparent 65%);
  filter:blur(60px);
}
.cta-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image:radial-gradient(ellipse 500px 400px at 50% 50%, black, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 500px 400px at 50% 50%, black, transparent 80%);
}
.cta-content{ position:relative; z-index:1; }
.cta-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:rgba(77,163,255,.1);
  border:1px solid rgba(77,163,255,.25);
  border-radius:100px;
  font-size:11px; color:var(--pri);
  margin-bottom:24px;
  letter-spacing:.03em;
}
.cta-title{
  font-size:clamp(34px, 4vw, 52px);
  line-height:1.15; font-weight:700; color:var(--tx-0);
  margin:0 0 20px;
  letter-spacing:-.01em;
}
.cta-sub{
  font-size:16px; color:var(--tx-2); line-height:1.6;
  max-width:560px; margin:0 auto 36px;
}
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.cta-foot{
  display:flex; justify-content:center; gap:32px;
  font-size:12px; color:var(--tx-3);
  flex-wrap:wrap;
}

/* ============================================================
   Footer
============================================================ */
.footer{
  padding:64px 32px 24px;
  background:var(--bg-1);
  border-top:1px solid var(--line-1);
}
.footer-inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns: 1fr 2fr;
  gap:64px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line-1);
}
.foot-brand .brand{ margin-bottom:16px; }
.foot-tag{ font-size:13px; color:var(--tx-2); max-width:280px; margin:0; }

.foot-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.foot-col{ display:flex; flex-direction:column; gap:10px; }
.fc-title{ font-size:12px; font-weight:600; color:var(--tx-0); margin-bottom:6px; letter-spacing:.02em; }
.foot-col a{
  font-size:13px; color:var(--tx-2);
  transition:color .15s;
}
.foot-col a:hover{ color:var(--tx-0); }

.foot-bottom{
  max-width:var(--max); margin:0 auto;
  padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--tx-4);
  flex-wrap:wrap; gap:12px;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1100px){
  .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .console-body{ grid-template-columns:1fr; }
  .proj-card{ border-right:none; border-bottom:1px solid var(--line-1); }
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .ai-features{ grid-template-columns:repeat(2,1fr); }
  .sup-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .risk-wrap{ grid-template-columns:1fr; }
  .shift-grid{ grid-template-columns:1fr; }
  .shift-arrow{ flex-direction:row; height:60px; }
  .sa-line{ width:auto; height:1.5px; background:linear-gradient(90deg, transparent, var(--line-3), transparent); }
  .sa-icon{ transform:rotate(90deg); }
  .ai-demo{ grid-template-columns:1fr; }
  .ai-demo-arrow{ transform:rotate(90deg); padding:12px 0; }
  .tl-track{ grid-template-columns:1fr; padding:0; }
  .tl-track::before{ left:14px; right:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg, var(--pri), var(--pri) 60%, var(--warn) 60%, var(--warn) 78%, var(--ok) 78%); }
  .tl-item{ flex-direction:row; align-items:flex-start; text-align:left; padding:12px 0 12px 40px; }
  .tli-node{ position:absolute; left:8px; top:14px; margin:0; }
  .tli-date{ margin-right:12px; min-width:44px; }
  .mgm-grid{ grid-template-columns:repeat(2,1fr); }
  .mgm-cell.wide{ grid-column:span 2; }
  .commit-summary{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .foot-cols{ grid-template-columns:repeat(2,1fr); }
  .floating-ai{ display:none; }
}
@media (max-width:640px){
  .section{ padding:80px 20px; }
  .hero{ padding: calc(var(--nav-h) + 32px) 20px 60px; }
  .pain-grid, .ai-features, .wb-stats, .mgm-grid{ grid-template-columns:1fr; }
  .mgm-cell.wide{ grid-column:span 1; }
  .hero-meta{ flex-wrap:wrap; gap:16px; }
  .meta-sep{ display:none; }
  .wbl-row{ grid-template-columns:80px 1fr; gap:8px; }
  .wbl-meta, .wbl-row .btn{ grid-column:2; justify-self:start; }
  .commit-summary{ grid-template-columns:1fr 1fr; }
  .cta-card{ padding:48px 24px; }
  .foot-cols{ grid-template-columns:1fr; }
  .nav-cta .btn-ghost{ display:none; }
}