/* ==========================================================
   揽月 · 对外展示站  —— 冷灰科技 · 浅色单页
   ========================================================== */

:root{
  color-scheme: light;
  --bg:        #f7f8fa;
  --bg-soft:   #f1f3f7;
  --panel:     #ffffff;
  --panel-2:   #f4f6f9;
  --line:      #e2e6ed;
  --line-soft: #edf0f5;

  --tx:        #12151c;
  --tx-dim:    #525a69;
  --tx-faint:  #858e9e;

  --accent:    #3b5bdb;
  --accent-dk: #2f4bc4;
  --accent-tx: #ffffff;
  --ok:        #0f9d66;

  --r:   14px;
  --r-s: 9px;
  --wrap: 1140px;


  /* 以下为「主题层」token：换配色只需要改这一整块 :root */
  --bg-blur:    rgba(247,248,250,.84);
  --accent-hov: #4a68e6;
  --accent-soft:      rgba(59,91,219,.08);
  --accent-soft-line: rgba(59,91,219,.20);

  --glow-a:   rgba(59,91,219,.10);
  --glow-b:   rgba(80,190,255,.08);
  --glow-cta: rgba(59,91,219,.10);
  --grid-line: #e8ebf1;

  --card-shadow:   0 1px 2px rgba(16,24,40,.04), 0 10px 28px -18px rgba(16,24,40,.16);
  --code-shadow:   0 20px 46px -24px rgba(16,24,40,.45);
  --panel-shadow:  none;

  --code-bg:   #12151c;
  --code-bar:  #1a1f29;
  --code-tx:   #e6e9ef;
  --code-line: #232935;
  --code-dot:  #3a4250;

  --syn-c: #79838f;
  --syn-k: #8ab4f8;
  --syn-s: #7fd3a3;
  --syn-p: #d3a8f0;
  --syn-d: #99a2b0;

  --notice-bg:   #eef2fd;
  --notice-line: #c3d0f2;
  --notice-tx:   #2f4694;

  --row-hover:    rgba(16,24,40,.022);
  --chip-bg:      #eef1f6;
  --inline-code-bg: #eef1f6;
  --plan-hot-line: rgba(59,91,219,.35);
  --plan-hot-bg:   rgba(59,91,219,.05);
  --logo-frame:    #d3d9e3;
  --border-hover:  #b9c1cd;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", Roboto, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
code,pre,kbd{ font-family:var(--mono); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--bg-blur);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__in{ display:flex; align-items:center; gap:28px; height:66px; }

.logo{ display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.2px; flex:0 0 auto; }
.logo svg{ width:26px; height:26px; display:block; }
.logo svg .lg-frame{ stroke:var(--logo-frame); fill:none; }
.logo svg .lg-mark{ stroke:var(--accent); fill:none; stroke-linecap:round; stroke-linejoin:round; }
.logo__sub{ font:500 11px/1 var(--mono); color:var(--tx-faint); letter-spacing:1.4px;
            border-left:1px solid var(--line); padding-left:10px; margin-left:2px; }

.nav__links{ display:flex; gap:26px; margin-left:6px; }
.nav__links a{ color:var(--tx-dim); font-size:14px; transition:color .18s; }
.nav__links a:hover{ color:var(--tx); }

.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-s);
  font-size:14px; font-weight:550; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:var(--accent-tx); }
.btn--primary:hover{ background:var(--accent-hov); }
.btn--ghost{ border-color:var(--line); color:var(--tx-dim); background:transparent; }
.btn--ghost:hover{ border-color:var(--border-hover); color:var(--tx); }
.btn--lg{ height:46px; padding:0 24px; font-size:15px; }
.btn--sm{ height:34px; padding:0 14px; font-size:13px; }
.btn--full{ width:100%; }

/* ---------- 通用区块 ---------- */
section{ position:relative; }
.sec{ padding:96px 0; border-top:1px solid var(--line-soft); }
.sec__head{ max-width:660px; margin-bottom:44px; }
.eyebrow{
  font:600 11px/1 var(--mono); letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--accent); opacity:.7; }
h2{ font-size:clamp(25px,3.4vw,33px); line-height:1.35; margin:0 0 14px; letter-spacing:-.4px; font-weight:650; }
h3{ font-size:16px; margin:0 0 8px; font-weight:600; letter-spacing:-.1px; }
.lede{ color:var(--tx-dim); font-size:15.5px; margin:0; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:74px 0 88px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:620px; pointer-events:none;
  background:radial-gradient(58% 62% at 30% 0%, var(--glow-a), transparent 68%),
             radial-gradient(46% 54% at 78% 12%, var(--glow-b), transparent 70%);
}
.hero__grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 10%, transparent 78%);
}
.hero__in{ position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  height:30px; padding:0 13px 0 11px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel);
  font-size:12.5px; color:var(--tx-dim); margin-bottom:24px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(70,209,138,.15); }

h1{
  font-size:clamp(34px,4.9vw,52px); line-height:1.18; margin:0 0 20px;
  letter-spacing:-1.4px; font-weight:680;
}
h1 .hl{ color:var(--accent); }
.hero__tagline{ color:var(--accent); font-size:21px; line-height:1.5; margin:-4px 0 24px; }
.hero__lede{ font-size:16.5px; color:var(--tx-dim); margin:0 0 30px; max-width:520px; }
.hero__acts{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero__note{ margin-top:22px; font-size:13px; color:var(--tx-faint); }

/* 终端窗口 */
.term{
  background:var(--code-bg); border:1px solid var(--code-line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--code-shadow);
}
.term__bar{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:var(--code-bar); border-bottom:1px solid var(--code-line);
}
.term__dots{ display:flex; gap:6px; }
.term__dots i{ width:10px; height:10px; border-radius:50%; background:var(--code-dot); display:block; }
.term__title{ font:500 12px/1 var(--mono); color:var(--tx-faint); margin-left:6px; }
.term__body{ padding:18px 18px 20px; overflow-x:auto; }
.term__body pre{ margin:0; font-size:12.9px; line-height:1.85; white-space:pre; color:var(--code-tx); }

.t-c{ color:var(--syn-c); }   /* 注释 */
.t-k{ color:var(--syn-k); }     /* 命令/关键字 */
.t-s{ color:var(--syn-s); }           /* 字符串 */
.t-p{ color:var(--syn-p); }           /* 参数 */
.t-d{ color:var(--syn-d); }

/* ---------- 特性卡 ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; box-shadow:var(--card-shadow);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.card:hover{ border-color:var(--border-hover); background:var(--panel-2); }
.card__ico{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-soft-line); margin-bottom:15px;
}
.card__ico svg{ width:17px; height:17px; stroke:var(--accent); fill:none; stroke-width:1.7;
                stroke-linecap:round; stroke-linejoin:round; }
.card p{ margin:0; color:var(--tx-dim); font-size:14px; line-height:1.72; }

/* ---------- 提示条 ---------- */
.notice{
  display:flex; gap:11px; align-items:flex-start;
  border:1px dashed var(--notice-line); background:var(--notice-bg);
  border-radius:var(--r-s); padding:12px 15px; margin-bottom:26px;
  font-size:13.5px; color:var(--notice-tx);
}
.notice svg{ width:15px; height:15px; flex:0 0 auto; margin-top:4px; stroke:var(--accent);
             fill:none; stroke-width:1.8; stroke-linecap:round; }

/* ---------- 模型表 ---------- */
.tablewrap{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); }
.tablescroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:660px; }
thead th{
  text-align:left; font:600 11.5px/1 var(--mono); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--tx-faint); padding:13px 20px; background:var(--panel-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:14px 20px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--row-hover); }
td.model{ font-family:var(--mono); font-size:13px; color:var(--tx); }
td.num{ font-family:var(--mono); font-size:13px; color:var(--tx-dim); white-space:nowrap; }
tr.grouprow td{
  background:var(--panel-2); font:600 11.5px/1 var(--mono); letter-spacing:1.4px;
  color:var(--tx-faint); text-transform:uppercase; padding:10px 20px;
}
.tag{
  display:inline-block; font-size:11px; line-height:18px; padding:0 8px; border-radius:5px;
  background:var(--chip-bg); border:1px solid var(--line); color:var(--tx-dim); margin-right:5px;
  font-family:var(--mono);
}

/* ---------- 套餐 ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.plan{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 24px; display:flex; flex-direction:column;
}
.plan--hot{ border-color:var(--plan-hot-line); background:linear-gradient(180deg,var(--plan-hot-bg),transparent 46%); }
.plan__badge{
  position:absolute; top:-1px; right:20px; transform:translateY(-50%);
  font:600 10.5px/18px var(--mono); letter-spacing:1px; background:var(--accent); color:var(--accent-tx);
  padding:0 9px; border-radius:5px;
}
.plan{ position:relative; }
.plan__name{ font-size:14.5px; font-weight:600; margin-bottom:12px; }
.plan__price{ font-size:31px; font-weight:650; letter-spacing:-1px; line-height:1.2; }
.plan__unit{ font-size:13px; color:var(--tx-faint); margin-left:4px; font-weight:400; }
.plan__desc{ color:var(--tx-dim); font-size:13.5px; margin:10px 0 18px; }
.plan__list{ list-style:none; padding:0; margin:0 0 22px; flex:1; }
.plan__list li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:13.8px; color:var(--tx-dim); }
.plan__list li::before{
  content:""; position:absolute; left:2px; top:9px; width:9px; height:5px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- 接入步骤 ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }
.step{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.step__n{
  font:600 11px/22px var(--mono); width:22px; height:22px; text-align:center; border-radius:6px;
  background:var(--accent); color:var(--accent-tx); display:block; margin-bottom:13px;
}
.step p{ margin:0; color:var(--tx-dim); font-size:13.8px; }
.step code{ background:var(--inline-code-bg); padding:1px 6px; border-radius:4px; font-size:12.4px; color:var(--accent); }

/* 代码 tabs */
.tabs{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); }
.tabs__bar{ display:flex; gap:2px; padding:8px 8px 0; background:var(--panel-2);
            border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs__btn{
  appearance:none; border:none; background:transparent; cursor:pointer; white-space:nowrap;
  font:500 13px/1 var(--sans); color:var(--tx-faint); padding:9px 14px;
  border-radius:7px 7px 0 0; transition:color .16s, background .16s;
}
.tabs__btn:hover{ color:var(--tx-dim); }
.tabs__btn[aria-selected="true"]{ color:var(--tx); background:var(--panel); box-shadow:inset 0 -1px 0 var(--panel); }
.tabs__panel{ padding:20px 22px 22px; position:relative; }
.tabs__panel[hidden]{ display:none; }
.tabs__panel pre{ margin:0; font-size:12.9px; line-height:1.85; overflow-x:auto; white-space:pre; color:var(--code-tx); }
.copy{
  position:absolute; top:14px; right:16px; z-index:2;
  font:500 11.5px/1 var(--mono); color:var(--tx-faint);
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  padding:6px 9px; cursor:pointer; transition:color .16s, border-color .16s;
}
.copy:hover{ color:var(--tx); border-color:var(--border-hover); }

.endpoints{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.ep{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.ep__t{ font-size:13.5px; font-weight:600; margin-bottom:10px; }
.ep__row{ font:400 12.4px/1.9 var(--mono); color:var(--tx-dim); word-break:break-all; }
.ep__row b{ color:var(--accent); font-weight:500; }

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); }
details{ border-bottom:1px solid var(--line-soft); }
details:last-child{ border-bottom:none; }
summary{
  list-style:none; cursor:pointer; padding:17px 22px; font-size:14.8px; font-weight:520;
  display:flex; align-items:center; gap:14px; transition:background .16s;
}
summary::-webkit-details-marker{ display:none; }
summary:hover{ background:var(--panel-2); }
summary::after{
  content:""; margin-left:auto; flex:0 0 auto; width:8px; height:8px;
  border-right:1.6px solid var(--tx-faint); border-bottom:1.6px solid var(--tx-faint);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s;
}
details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
details[open] summary{ color:var(--accent); }
.faq__a{ padding:0 22px 20px 22px; color:var(--tx-dim); font-size:14px; line-height:1.8; }
.faq__a code{ background:var(--inline-code-bg); padding:1px 6px; border-radius:4px; font-size:12.4px; color:var(--accent); }

/* ---------- 结尾 CTA ---------- */
.cta{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:52px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:auto 0 -60% 0; height:220px;
  background:radial-gradient(50% 100% at 50% 100%, var(--glow-cta), transparent 70%);
}
.cta > *{ position:relative; }
.cta h2{ margin-bottom:12px; }
.cta p{ color:var(--tx-dim); margin:0 auto 26px; max-width:460px; }

/* ---------- 页脚 ---------- */
footer{ border-top:1px solid var(--line-soft); padding:44px 0 54px; }
.foot{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.foot__links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot__links a{ font-size:13.5px; color:var(--tx-dim); }
.foot__links a:hover{ color:var(--tx); }
.foot__meta{ color:var(--tx-faint); font-size:12.6px; line-height:1.9; }
.foot__meta a{ color:var(--tx-faint); text-decoration:underline; text-underline-offset:2px; }

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero__in{ grid-template-columns:1fr; gap:40px; }
  .cards,.plans,.steps,.endpoints{ grid-template-columns:1fr 1fr; }
  .nav__links{ display:none; }
}
@media (max-width:640px){
  .sec{ padding:68px 0; }
  .hero{ padding:48px 0 60px; }
  .cards,.plans,.steps,.endpoints{ grid-template-columns:1fr; }
  .wrap{ padding:0 18px; }
  .cta{ padding:38px 22px; }
  .logo__sub{ display:none; }
  .hero__acts .btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- 结尾 CTA 区块间距 ---------- */
.sec--cta{ border-top:none; padding-top:16px; }
@media (max-width:640px){ .sec--cta{ padding-top:0; } }

/* ---------- 小屏代码块 ---------- */
@media (max-width:640px){
  .term__body pre, .tabs__panel pre{ font-size:11.6px; line-height:1.8; }
  .term__body{ padding:14px; }
  .tabs__panel{ padding:16px 14px 18px; }
  .copy{ top:10px; right:10px; }
  h1{ letter-spacing:-.9px; }
}

/* 上线状态与服务说明 */
[hidden]{ display:none !important; }
.model-status{display:block;margin-top:6px;color:var(--tx-dim);font:12px/1.5 var(--sans);}
.service-copy{max-width:800px;padding-top:48px;padding-bottom:64px;}
.service-copy h1{font-size:32px;line-height:1.3;}
.service-copy h2{font-size:22px;margin-top:40px;}
.service-copy p,.service-copy li{color:var(--tx-dim);}
.service-copy a{color:var(--accent);text-decoration:underline;}
.service-copy nav{display:flex;gap:20px;flex-wrap:wrap;}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none !important;animation:none !important;}}