/* ============ 首页首屏 Hero + Agent 工作台控制台 mock ============ */

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 460px at 50% -120px,rgba(0,176,224,.16),transparent 60%),
  radial-gradient(700px 360px at 92% 8%,rgba(10,110,153,.07),transparent 70%),
  radial-gradient(700px 360px at 6% 12%,rgba(0,176,224,.06),transparent 70%),#fff}

.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(10,110,153,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,110,153,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(800px 500px at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(800px 500px at 50% 30%,#000 30%,transparent 75%);pointer-events:none}

.hero-inner{position:relative;padding:72px 0 0;text-align:center;display:flex;flex-direction:column;align-items:center}

.hero .eyebrow{margin-top:0}

.h1{font-size:60px;line-height:1.16;letter-spacing:-.015em;font-weight:600;margin:22px 0 0;max-width:980px}

.h1-br-m{display:none}

.h1 .grad{background:linear-gradient(100deg,#0089B8,var(--brand-700));-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}

.hero-sub{margin-top:24px;font-size:20px;line-height:1.6;color:var(--t-2);max-width:680px}

.sub-m{display:none}

.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.hero-checks{margin-top:26px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;color:var(--t-3);font-size:14px}

.hero-checks span{display:inline-flex;align-items:center;gap:7px}

.hero-checks .i{width:16px;height:16px;color:var(--brand-600)}

/* Hero 控制台 mock */
.console-wrap{position:relative;width:min(1120px,calc(100% - 32px));margin:56px auto 0}

.console-glow{position:absolute;inset:-40px -20px -20px;background:radial-gradient(60% 60% at 50% 40%,rgba(0,176,224,.22),transparent 70%);filter:blur(20px);pointer-events:none;z-index:-1}

.console{background:#07141D;border-radius:18px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--sh-2);overflow:hidden;color:#E6EEF3;text-align:left}

.c-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:#0B1D2A}

.c-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#35C8EE,#0A6E99);position:relative;flex:0 0 auto}

.c-mark::after{content:"";position:absolute;inset:5px;border:2px solid rgba(255,255,255,.7);border-radius:3px;border-top-color:transparent;border-right-color:transparent}

.c-brand{font-size:14px;font-weight:600;color:#fff}

.c-sep{width:1px;height:16px;background:rgba(255,255,255,.12)}

.c-scene{font-size:13px;color:#9FB4C0}

.c-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.c-chip{font-size:12px;color:#7FDCF2;background:rgba(53,200,238,.1);border:1px solid rgba(53,200,238,.25);padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}

.c-live{font-size:12px;color:#9FB4C0;display:inline-flex;align-items:center;gap:6px}

.c-live i{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}

.c-body{display:grid;grid-template-columns:236px 1fr;min-height:440px}

.c-side{border-right:1px solid rgba(255,255,255,.07);padding:18px 14px;background:#091822}

.c-side-t{font-size:11px;letter-spacing:.12em;color:#6F828F;text-transform:uppercase;margin:14px 6px 8px}

.c-side-t:first-child{margin-top:0}

.c-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;font-size:13px;color:#AEC0CB;cursor:pointer}

.c-item:hover{background:rgba(255,255,255,.04)}

.c-item.is-active{background:rgba(53,200,238,.12);color:#fff}

.c-item span{font-size:11px;color:#6F828F}

.c-src{display:flex;flex-direction:column;gap:4px}

.c-src div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#AEC0CB;padding:5px 10px;border-radius:6px}

.c-src .i{width:15px;height:15px;color:#5DD5F1}

.c-main{padding:22px 24px;display:flex;flex-direction:column;gap:14px}

.c-user{align-self:flex-end;max-width:80%;background:linear-gradient(135deg,#0A6E99,#085A7D);color:#fff;padding:11px 15px;border-radius:14px 14px 4px 14px;font-size:14px}

.c-agentrow{display:flex;align-items:center;gap:9px;font-size:13px;color:#9FB4C0}

.c-avatar{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#35C8EE,#0A6E99);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}

.c-steps{display:flex;flex-direction:column;gap:7px;margin-left:33px}

.c-steps li{display:flex;align-items:center;gap:9px;font-size:13px;color:#BBD0DA}

.c-steps .i{width:15px;height:15px;color:#34D399}

.c-answer{margin-left:33px;background:#0B1D2A;border:1px solid rgba(53,200,238,.16);border-left:3px solid #35C8EE;border-radius:10px;padding:14px 16px}

.c-answer p{font-size:14px;line-height:1.7;color:#E6EEF3}

.c-src-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}

.c-src-tags span{font-size:11.5px;color:#7FDCF2;background:rgba(53,200,238,.08);border:1px solid rgba(53,200,238,.2);padding:3px 9px;border-radius:6px}

.c-input{margin-top:auto;display:flex;align-items:center;gap:10px;background:#0B1D2A;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 8px 8px 16px}

.c-input span{font-size:13.5px;color:#5C707C;flex:1}

.c-send{width:38px;height:38px;border-radius:9px;background:var(--action);display:grid;place-items:center;color:#fff}

.c-foot-note{margin-top:18px;font-size:12.5px;color:var(--t-3);text-align:center}

/* 浮动标注 */
.c-float{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--t-1);box-shadow:var(--sh-1);font-weight:500}

.c-float .i{color:var(--brand-600)}

.c-float-1{left:-26px;top:260px}

.c-float-2{right:-22px;bottom:120px}

@media (max-width:880px){
  .hero-inner{padding:48px 0 0;align-items:flex-start}
  .hero .eyebrow,.hero-cta{align-self:center}
  .h1{text-align:center}
  .h1{font-size:28px;line-height:1.35;max-width:100%}
  .h1 br,.h1-br-m{display:inline}
  .hero-sub{font-size:15px;text-align:left;max-width:100%}
  .sub-full{display:none}
  .sub-m{display:inline}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-checks{gap:14px;font-size:13px}
  .c-body{grid-template-columns:1fr;min-height:auto}
  .c-side{display:none}
  .c-brand,.c-sep,.c-chip{display:none}
  .c-scene{display:inline;white-space:nowrap}
  .c-main{padding:16px}
  .c-user{font-size:13px}
  .c-float{display:none}
}