/* ============================================================
   炯鹏AI · 国际主流 AI 产品官网风格（dark-first）
   参照 OpenAI / Anthropic / Linear / Vercel 的公共设计语言：
   深色中性底 · 单一品牌蓝 · 大圆角 · 玻璃导航 · 微光晕 · 克制动效
   ============================================================ */
:root{
  --bg:#0A0B0D;
  --bg-2:#0D0E11;
  --card:#14161B;
  --card-h:#191C22;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#F5F6F8;
  --sub:#A3A8B3;
  --faint:#6E737D;
  --brand:#7C9AFF;
  --brand-2:#45D8F5;
  --brand-soft:rgba(124,154,255,.12);
  --brand-line:rgba(124,154,255,.32);
  --grad:linear-gradient(92deg,#7C9AFF 0%,#45D8F5 100%);
  --r-card:18px;
  --r-btn:10px;
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --font:"Inter","SF Pro Display",-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--txt);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;letter-spacing:.002em;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.12}
.sub{color:var(--sub)}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 顶部公告 ---------- */
.notice{border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);font-size:13px}
.notice .container{display:flex;align-items:center;gap:12px;height:42px}
.notice .tagchip{font-size:11px;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:2px 10px;font-weight:600}
.notice a{margin-left:auto;color:var(--sub)}
.notice a:hover{color:var(--txt)}

/* ---------- 导航：玻璃拟态 ---------- */
.topbar{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(10,11,13,.68);border-bottom:1px solid var(--line)}
.topbar .container{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.logo .mark{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;flex:none}
.logo .mark svg{width:14px;height:14px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:14px;color:var(--sub);padding:7px 14px;border-radius:999px;transition:.15s;font-weight:500}
.nav a:hover{color:var(--txt)}
.nav a.on{color:var(--txt);background:rgba(255,255,255,.07)}
.top-cta{display:flex;gap:8px;align-items:center}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;border-radius:var(--r-btn);padding:11px 22px;
  transition:.15s;border:1px solid transparent;letter-spacing:.002em;white-space:nowrap}
.btn-white{background:#F5F6F8;color:#0A0B0D}
.btn-white:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-brand{background:var(--grad);color:#06121F}
.btn-brand:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.sm{padding:8px 16px;font-size:13px;border-radius:9px}
.top-cta .btn[aria-current="page"]{opacity:.55;cursor:default}

/* ---------- 区块 ---------- */
.sec{padding:92px 0}
.sec.tight{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sec-head .over{font-size:13px;font-weight:600;color:var(--brand);margin-bottom:12px;letter-spacing:.02em}
.sec-head h2{font-size:clamp(28px,3.4vw,40px)}
.sec-head p{color:var(--sub);margin-top:10px;max-width:600px;font-size:15.5px}
.sec-head .more{font-size:14px;color:var(--sub);display:inline-flex;gap:6px;align-items:center;font-weight:500}
.sec-head .more:hover{color:var(--txt)}

/* ---------- 栏目页头 ---------- */
.pagehead{padding:96px 0 60px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehead .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 280px at 24% 0%,rgba(96,128,255,.14),transparent 70%)}
.pagehead .container{position:relative}
.pagehead h1{font-size:clamp(40px,5.2vw,60px);max-width:760px}
.pagehead .lede{color:var(--sub);font-size:17px;margin-top:18px;max-width:620px}
.pagehead .headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  transition:.2s;position:relative}
.card:hover{border-color:var(--line-2);background:var(--card-h)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,rgba(124,154,255,.2),rgba(69,216,245,.08));
  border:1px solid var(--brand-line);color:#9FB2FF}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font-size:12px;font-weight:500;border:1px solid var(--line-2);color:var(--sub);white-space:nowrap}
.pill.brand{background:var(--brand-soft);border-color:var(--brand-line);color:#9FB2FF}

/* ---------- 行式列表 ---------- */
.lrow{display:grid;align-items:center;gap:20px;padding:20px 26px;
  border-top:1px solid var(--line);transition:.15s;cursor:pointer}
.lrow:first-child{border-top:none}
.lrow:hover{background:rgba(255,255,255,.035)}
.lrow .t{font-size:15.5px;font-weight:600}
.lrow .d{font-size:13px;color:var(--faint);margin-top:2px}
.lrow .arr{color:var(--faint);transition:.15s;font-size:15px}
.lrow:hover .arr{color:var(--brand);transform:translateX(4px)}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12.5px;color:var(--faint);font-weight:500;text-align:left;padding:13px 22px;border-bottom:1px solid var(--line)}
.tbl td{padding:15px 22px;border-bottom:1px solid var(--line);font-size:14px}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.tbl .price{font-weight:600}

/* ---------- 光晕与网格背景 ---------- */
.glow-top{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.glow-top::before{content:"";position:absolute;width:900px;height:460px;left:50%;top:-190px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(96,128,255,.17),transparent 65%)}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 0%,#000 25%,transparent 74%);
  mask-image:radial-gradient(ellipse 75% 62% at 50% 0%,#000 25%,transparent 74%)}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);background:#070809;margin-top:40px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:64px 0 52px}
.f-brand p{color:var(--faint);font-size:13.5px;margin-top:14px;max-width:300px;line-height:1.75}
.f-col b{display:block;font-size:13px;color:var(--txt);font-weight:600;margin-bottom:16px}
.f-col li{padding:4.5px 0;font-size:13.5px}
.f-col a{color:var(--faint)}
.f-col a:hover{color:var(--txt)}
.f-bottom{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .nav{display:none}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .sec{padding:60px 0}
  .pagehead{padding:64px 0 44px}
  .f-top{grid-template-columns:1fr;gap:30px}
  .top-cta .btn:not(.theme-toggle){display:none}
}

/* ============================================================
   主题切换：亮色（light）覆盖层
   默认 :root 为「黑色（dark）」；html[data-theme="light"] 时为「亮色」
   所有文本对比度按 WCAG AA（≥4.5:1）校核
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F6F9;
  --bg-2:#FFFFFF;
  --card:#FFFFFF;
  --card-h:#EEF1F6;
  --line:rgba(15,18,26,.10);
  --line-2:rgba(15,18,26,.16);
  --txt:#0E1116;
  --sub:#4F5660;
  --faint:#676E78;
  --brand:#2B59E0;
  --brand-2:#0E9BB8;
  --brand-soft:rgba(43,89,224,.10);
  --brand-line:rgba(43,89,224,.30);
  --shadow:0 30px 80px rgba(15,23,42,.18);
}
/* 亮色下：深色主题里硬编码的浅色背景/透明白，需反向为浅深色 */
html[data-theme="light"] .topbar{background:rgba(244,246,249,.85)}
html[data-theme="light"] .notice{background:rgba(15,18,26,.03)}
html[data-theme="light"] footer{background:#E9ECF1}
html[data-theme="light"] .nav a.on{background:rgba(15,18,26,.06)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(15,18,26,.05)}
html[data-theme="light"] .lrow:hover{background:rgba(15,18,26,.035)}
html[data-theme="light"] .tbl tbody tr:hover{background:rgba(15,18,26,.035)}
html[data-theme="light"] .side .mi:hover{background:rgba(15,18,26,.04)}
html[data-theme="light"] .b-off{background:rgba(15,18,26,.05)}
html[data-theme="light"] .grid-bg{
  background-image:linear-gradient(rgba(15,18,26,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,18,26,.045) 1px,transparent 1px);}
/* 亮色下品牌蓝文字需加深：原 #9FB2FF 浅蓝在浅底上几乎看不见 */
html[data-theme="light"] .pill.brand,
html[data-theme="light"] .b-brand,
html[data-theme="light"] .side .mi.on,
html[data-theme="light"] .f-btn.on{color:#2747C0}
html[data-theme="light"] .ic{color:#2747C0}
/* 状态徽章在亮底上需加深文字，否则绿/琥珀几乎不可读 */
html[data-theme="light"] .b-ok{color:#0E9F6E}
html[data-theme="light"] .b-wait{color:#B45309}
/* 白色按钮在亮底上加描边，避免与背景融为一体 */
html[data-theme="light"] .btn-white{border-color:var(--line-2)}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle{position:relative}
.theme-toggle .ic-sun,.theme-toggle .ic-moon{width:16px;height:16px;flex:none}
.theme-toggle .ic-moon{display:none}
html[data-theme="light"] .theme-toggle .ic-sun{display:none}
html[data-theme="light"] .theme-toggle .ic-moon{display:inline-block}

/* ---------- 订阅介绍页（高端重制） ---------- */
.center{text-align:center}
.sub-hero{position:relative;overflow:hidden;padding:88px 0 36px;text-align:center}
.sub-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(ellipse 75% 60% at 50% 0,#000,transparent 72%);
  mask:radial-gradient(ellipse 75% 60% at 50% 0,#000,transparent 72%)}
.sub-head{position:relative;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.sub-title{font-size:clamp(30px,4.4vw,48px);margin-top:16px;letter-spacing:-.03em;line-height:1.12}
.sub-lede{color:var(--sub);font-size:16px;line-height:1.8;margin-top:16px;max-width:680px}
.sub-notice{display:inline-block;margin-top:18px;padding:10px 16px;border-radius:12px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FBBF24;font-size:13px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:6px}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:32px 26px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.plan:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.plan-hot{background:linear-gradient(180deg,var(--brand-soft),var(--card));
  border-color:var(--brand-line);box-shadow:0 18px 50px rgba(43,89,224,.22)}
.plan-hot::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.65}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#06121F;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;
  box-shadow:0 8px 22px rgba(43,89,224,.35);white-space:nowrap}
.plan-name{font-size:16px;font-weight:700;color:var(--txt)}
.plan-tag{color:var(--sub);font-size:13px;margin-top:6px;min-height:18px}
.plan-price{font-size:46px;font-weight:800;color:var(--txt);line-height:1;margin-top:18px;letter-spacing:-.02em}
.plan-price .cur{font-size:22px;vertical-align:top;font-weight:600;margin-right:2px;color:var(--sub)}
.plan-price .per{font-size:15px;color:var(--sub);font-weight:500;margin-left:4px}
.plan-cny{color:var(--sub);font-size:13px;margin-top:6px}
.plan-quota{margin-top:16px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;font-size:13px;color:var(--sub)}
.plan-quota b{color:var(--brand)}
.plan-cta{margin-top:20px;width:100%}
.plan-feats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--sub);
  padding:9px 0;border-top:1px solid var(--line)}
.plan-feats li svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--brand)}
.plan-feats li span{flex:1}
.sub-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.sub-col{transition:transform .2s ease,border-color .2s ease}
.sub-col:hover{transform:translateY(-4px);border-color:var(--line-2)}
.sub-col-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:var(--brand-soft);border:1px solid var(--brand-line);margin-bottom:14px}
.sub-faqcard{margin-top:24px}
.faq .q{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.faq .q:last-child{border-bottom:none}
.faq .q b{color:var(--txt)}
.faq .q span{color:var(--sub);font-size:13.5px;line-height:1.7}
html[data-theme="light"] .plan-hot{background:linear-gradient(180deg,#EDF1FC,var(--card))}
html[data-theme="light"] .plan-hot::before{opacity:.5}
html[data-theme="light"] .sub-notice{color:#B45309;border-color:rgba(180,83,9,.35);background:rgba(180,83,9,.1)}
@media (max-width:900px){
  .pricing{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .sub-cols{grid-template-columns:1fr}
}