/* ============================================================
   /intro 产品简介单页（站外推广落地页）
   独立样式，与 sa.css 互不干扰；配色与主站 site.css 同一套
   （白顶栏 + 琥珀橙 --primary #d97706 + 浅灰底 #f6f7f9）
   ============================================================ */
:root{
    --ip-ink:#1f2937; --ip-text:#374151; --ip-text2:#6b7280; --ip-line:#e5e7eb;
    --ip-accent:#d97706; --ip-accent2:#b45309; --ip-soft:#fef3c7;
    --ip-bg:#f6f7f9;
    --ip-hero1:#fffaf3; --ip-hero2:#fff7ed; --ip-hero3:#fef3c7;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* 元素级兜底重置：无论 body class 是否匹配，四周都不允许出现默认边距 */
html, body{ margin:0; padding:0; }

body.intro-body{
    margin:0; background:var(--ip-bg); color:var(--ip-text); font-size:15px; line-height:1.75;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
body.intro-body a{ color:var(--ip-accent); text-decoration:none; }
body.intro-body a:hover{ text-decoration:none; opacity:.85; }
/* 用 :where() 把重置降为零优先级：兜底清默认 margin，同时不压过组件自身的布局 margin（如 .ip-hero h1 的 20px/16px） */
body.intro-body :where(h1,h2,h3){ color:var(--ip-ink); line-height:1.3; margin:0; }
body.intro-body :where(ul){ margin:0; padding:0; list-style:none; }
.ip-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }

/* ---------------- 按钮 ---------------- */
.ip-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:40px; padding:0 18px; border-radius:9px; border:1px solid var(--ip-line);
    background:#fff; color:var(--ip-text) !important; font-size:14px; font-weight:500;
    cursor:pointer; font-family:inherit; text-align:center; transition:.16s;
    white-space:nowrap;
}
.ip-btn:hover{ border-color:#fcd34d; background:#fffbeb; }
.ip-btn.primary{ background:var(--ip-accent); border-color:var(--ip-accent); color:#fff !important; font-weight:600; box-shadow:0 4px 14px rgba(217,119,6,.22); }
.ip-btn.primary:hover{ background:var(--ip-accent2); border-color:var(--ip-accent2); box-shadow:0 6px 18px rgba(217,119,6,.30); }
.ip-btn.lg{ height:48px; padding:0 26px; font-size:15px; border-radius:11px; }
.ip-btn.sm{ height:32px; padding:0 12px; font-size:13px; border-radius:7px; }
.ip-btn.ghost{ background:transparent; border-color:transparent; color:var(--ip-text2) !important; }
.ip-btn.ghost:hover{ background:#fef3c7; border-color:transparent; color:var(--ip-accent2) !important; }
.ip-btn.ghost-w{ background:#fff; color:var(--ip-accent2) !important; border-color:#fcd34d; }
.ip-btn.ghost-w:hover{ background:#fffbeb; border-color:var(--ip-accent); }

/* ---------------- 顶栏（与主站 .site-header 同款：白底 + 细底边框 + 浅阴影） ---------------- */
.ip-top{
    position:sticky; top:0; z-index:80; height:64px;
    background:rgba(255,255,255,.94); border-bottom:1px solid var(--ip-line);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:box-shadow .2s,background .2s;
}
.ip-top.scrolled{ background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.ip-top-in{ max-width:1120px; margin:0 auto; padding:0 20px; height:100%; display:flex; align-items:center; gap:18px; }
.ip-logo{ display:flex; align-items:center; gap:9px; color:var(--ip-ink) !important; font-weight:700; font-size:16px; letter-spacing:.3px; }
.ip-logo .dot{
    width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:14px; font-weight:800;
}
.ip-nav{ display:flex; gap:2px; margin-left:8px; flex:1; }
.ip-nav a{ color:var(--ip-text2) !important; font-size:14px; padding:7px 12px; border-radius:8px; }
.ip-nav a:hover{ color:var(--ip-accent) !important; background:#fef3c7; opacity:1; }
.ip-top-r{ display:flex; align-items:center; gap:8px; }

/* ---------------- Hero（浅暖渐变，与主站底色衔接） ---------------- */
.ip-hero{
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(251,191,36,.20), transparent 62%),
        radial-gradient(620px 320px at 6% 6%, rgba(245,158,11,.10), transparent 60%),
        linear-gradient(180deg,var(--ip-hero1),var(--ip-bg) 100%);
    color:var(--ip-text); padding:56px 0 64px; border-bottom:1px solid var(--ip-line);
}
.ip-hero-in{ display:flex; align-items:center; gap:44px; }
.ip-hero-txt{ flex:1 1 0; min-width:0; }
.ip-badge{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.4px;
    padding:6px 14px; border-radius:999px; color:var(--ip-accent2);
    background:#fef3c7; box-shadow:inset 0 0 0 1px #fde68a;
}
.ip-badge i{ width:7px; height:7px; border-radius:50%; background:var(--ip-accent); box-shadow:0 0 0 4px rgba(217,119,6,.18); animation:ipPulse 2s infinite; }
@keyframes ipPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.ip-badge.light{ color:var(--ip-accent2); background:#fff; box-shadow:inset 0 0 0 1px #fde68a; }
.ip-badge.light i{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16); }
.ip-hero h1{ color:var(--ip-ink); font-size:34px; font-weight:800; letter-spacing:-.5px; margin:20px 0 16px; }
.ip-lead{ font-size:16px; color:#4b5563; margin:0 0 26px; max-width:620px; }
.ip-lead b, .ip-lead strong{ color:var(--ip-ink); font-weight:600; }
.ip-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.ip-cta.center{ justify-content:center; }
.ip-hero-note{ margin-top:22px; font-size:13px; color:#9ca3af; }
.ip-hero-note b{ color:var(--ip-accent2); }
.ip-hero-note .sep{ margin:0 8px; opacity:.5; }

/* Hero 谱面示意图 */
.ip-hero-vis{ flex:0 0 470px; max-width:470px; }
.ip-mock{ background:#fff; border:1px solid var(--ip-line); border-radius:14px; overflow:hidden; box-shadow:0 18px 44px rgba(120,72,20,.14); }
.ip-mock-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#faf7f2; border-bottom:1px solid #efe9e1; }
.ip-mock-bar .d{ width:10px; height:10px; border-radius:50%; }
.ip-mock-bar .r{ background:#fda4af; } .ip-mock-bar .y{ background:#fcd34d; } .ip-mock-bar .g{ background:#86efac; }
.ip-mock-bar em{ margin-left:6px; font-style:normal; font-size:12px; color:#8a7f70; }
.ip-mock svg{ display:block; width:100%; height:auto; }
.ip-mock-tip{ margin-top:12px; font-size:12.5px; color:#9ca3af; text-align:center; }

/* ---------------- 通用段落 ---------------- */
.ip-sec{ padding:68px 0; }
.ip-sec.alt{ background:#fff; border-top:1px solid var(--ip-line); border-bottom:1px solid var(--ip-line); }
.ip-h2{ font-size:26px; font-weight:800; letter-spacing:-.3px; text-align:center; }
.ip-sub{ text-align:center; color:var(--ip-text2); margin:12px auto 40px; max-width:720px; }

/* 两种谱 */
.ip-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ip-two-card{
    background:#fff; border:1px solid var(--ip-line); border-radius:14px; padding:26px 24px;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.ip-two-ic{
    width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:var(--ip-soft); color:var(--ip-accent); font-size:19px; margin-bottom:14px;
}
.ip-two-card h3{ font-size:17px; margin-bottom:10px; }
.ip-two-card p{ margin:0 0 14px; color:var(--ip-text); }
.ip-two-card li{ position:relative; padding-left:20px; font-size:14px; color:var(--ip-text2); line-height:2; }
.ip-two-card li::before{ content:""; position:absolute; left:5px; top:14px; width:6px; height:6px; border-radius:50%; background:#f59e0b; }

/* 工具网格 */
.ip-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ip-tool{ background:#fff; border:1px solid var(--ip-line); border-radius:13px; padding:22px 20px; transition:.18s; }
.ip-tool:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(120,72,20,.10); border-color:#fcd34d; }
.ip-tool-ic{
    width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff; background:linear-gradient(135deg,#f59e0b,#d97706); margin-bottom:13px;
}
.ip-tool h3{ font-size:16px; margin-bottom:8px; }
.ip-tool p{ margin:0; font-size:14px; color:var(--ip-text2); }

/* 内测权益（白卡 + 琥珀描边） */
.ip-beta{
    display:flex; gap:34px; align-items:stretch;
    background:#fff; border:1px solid #fde68a; border-radius:18px; padding:36px 34px;
    color:var(--ip-text); box-shadow:0 14px 40px rgba(180,83,9,.08);
}
.ip-beta-l{ flex:1 1 0; min-width:0; }
.ip-beta h2{ color:var(--ip-ink); font-size:27px; font-weight:800; margin:16px 0 10px; }
.ip-beta-desc{ color:var(--ip-text2); margin:0 0 22px; }
.ip-beta-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:26px; }
.ip-beta-price .num{ font-size:40px; font-weight:800; color:var(--ip-accent2); letter-spacing:-1px; }
.ip-beta-price .unit{ font-size:13px; color:#9ca3af; }
.ip-beta-price .unit em{ font-style:normal; opacity:.7; }
.ip-beta-r{
    flex:0 0 340px; background:#fffaf2; border:1px solid #fde68a;
    border-radius:14px; padding:22px 22px 16px;
}
.ip-beta-rt{ font-size:13px; color:var(--ip-accent2); font-weight:600; letter-spacing:.4px; margin-bottom:12px; }
.ip-beta-list li{ position:relative; padding-left:26px; font-size:14px; color:var(--ip-text); line-height:2.05; }
.ip-beta-list li::before{
    content:"✓"; position:absolute; left:0; top:0; color:#16a34a; font-weight:700; font-size:14px;
}
.ip-beta-foot{ margin-top:14px; padding-top:12px; border-top:1px solid #f3ece2; font-size:12.5px; color:#9ca3af; }

/* ---------------- 内测进度（权益区内，浅琥珀） ---------------- */
.ip-bprog{
    margin:14px 0 18px; padding:16px 18px;
    background:#fffaf2; border:1px solid #fde68a; border-radius:12px;
}
.ip-bprog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ip-bprog-round{ font-size:15px; font-weight:700; color:var(--ip-ink); letter-spacing:.3px; }
.ip-bprog-count{ font-size:12.5px; color:var(--ip-text2); }
.ip-bprog-count b{ font-size:20px; color:var(--ip-ink); font-weight:800; margin-right:2px; }
.ip-bprog-bar{
    position:relative; height:10px; margin:10px 0 9px; border-radius:999px;
    background:#f4e6cf; overflow:hidden;
}
.ip-bprog-bar i{
    display:block; height:100%; border-radius:999px;
    background:linear-gradient(90deg,#f59e0b,#d97706);
    transition:width .6s ease;
}
.ip-bprog-note{ font-size:13px; color:var(--ip-text2); }
.ip-bprog-note b{ color:var(--ip-accent2); font-weight:700; }
.ip-bprog-steps{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:11px; border-top:1px solid #f3ece2; }
.ip-bprog-step{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; padding:4px 10px; border-radius:999px; color:#9ca3af;
    background:#fff; border:1px solid #f0e7da;
}
.ip-bprog-step em{ width:6px; height:6px; border-radius:50%; background:#d6cfc5; }
.ip-bprog-step.done{ color:#a8a29e; }
.ip-bprog-step.done em{ background:#16a34a; }
.ip-bprog-step.cur{ color:var(--ip-accent2); font-weight:600; background:#fef3c7; border-color:#fcd34d; }
.ip-bprog-step.cur em{ background:var(--ip-accent); box-shadow:0 0 0 3px rgba(217,119,6,.16); animation:ipPulse 2s infinite; }
.ip-bprog-step.next em{ background:#d6cfc5; }
@media (max-width:760px){
    .ip-bprog{ padding:13px 14px; }
    .ip-bprog-steps{ flex-direction:column; align-items:stretch; }
}

/* ---------------- 产品与价格（前台在售产品，标价公开） ---------------- */
.ip-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ip-plan{
    background:#fff; border:1px solid var(--ip-line); border-radius:14px; padding:22px 20px 18px;
    display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ip-plan:hover{ border-color:#fcd34d; box-shadow:0 12px 30px rgba(180,83,9,.10); transform:translateY(-2px); }
.ip-plan-nm{ font-size:16px; font-weight:800; color:var(--ip-ink); margin-bottom:6px; }
.ip-plan-sd{ font-size:12.5px; color:var(--ip-text2); line-height:1.7; min-height:42px; }
.ip-plan-pr{ display:flex; align-items:baseline; gap:4px; margin-top:10px; }
.ip-plan-pr b{ font-size:30px; font-weight:800; color:var(--ip-accent2); letter-spacing:-.5px; }
.ip-plan-pr span{ font-size:12.5px; color:#9ca3af; }
.ip-plan-yr{ font-size:12.5px; color:var(--ip-text2); margin-bottom:12px; }
.ip-plan-ft{ list-style:none; margin:0; padding:12px 0 0; border-top:1px dashed #f3ece2; }
.ip-plan-ft li{ position:relative; padding-left:18px; font-size:13px; color:var(--ip-text2); line-height:1.95; }
.ip-plan-ft li::before{ content:"·"; position:absolute; left:6px; top:0; color:var(--ip-accent); font-weight:800; }
.ip-plan-empty{ grid-column:1/-1; text-align:center; color:var(--ip-text2); font-size:14px; padding:24px 0; }
.ip-plan-note{
    margin-top:16px; font-size:12.5px; color:var(--ip-text2); text-align:center; line-height:1.9;
}
.ip-plan-note b{ color:var(--ip-accent2); }
@media (max-width:760px){
    .ip-plans{ grid-template-columns:1fr 1fr; gap:12px; }
    .ip-plan{ padding:18px 16px 16px; }
    .ip-plan-pr b{ font-size:24px; }
    .ip-plan-sd{ min-height:0; }
}
@media (max-width:480px){ .ip-plans{ grid-template-columns:1fr; } }

/* 三步 */
.ip-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.ip-step{ position:relative; background:#fff; border:1px solid var(--ip-line); border-radius:14px; padding:26px 22px 22px; }
.ip-step-n{
    width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--ip-accent); color:#fff; font-weight:800; font-size:15px; margin-bottom:14px;
    box-shadow:0 6px 16px rgba(217,119,6,.26);
}
.ip-step h3{ font-size:16px; margin-bottom:8px; }
.ip-step p{ margin:0 0 16px; font-size:14px; color:var(--ip-text2); }
.ip-wx{ display:flex; gap:12px; align-items:center; margin-top:4px; }
.ip-wx-qr{ width:96px; height:96px; border-radius:9px; border:1px solid var(--ip-line); object-fit:cover; background:#f3f4f6; flex:none; }
.ip-wx-r{ min-width:0; }
.ip-wx-label{ font-size:12px; color:var(--ip-text2); }
.ip-wx-id{ font-size:15px; font-weight:700; color:var(--ip-ink); margin:2px 0 8px; word-break:break-all; }

/* FAQ */
.ip-faq{ max-width:860px; margin:0 auto; }
.ip-faq details{ border:1px solid var(--ip-line); border-radius:12px; padding:0 20px; margin-bottom:10px; background:#fff; }
.ip-faq details[open]{ box-shadow:0 2px 12px rgba(120,72,20,.06); }
.ip-faq summary{
    cursor:pointer; list-style:none; padding:17px 30px 17px 0; font-size:15px; font-weight:600; color:var(--ip-ink);
    position:relative;
}
.ip-faq summary::-webkit-details-marker{ display:none; }
.ip-faq summary::after{
    content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
    font-size:19px; color:#9ca3af; font-weight:400;
}
.ip-faq details[open] summary::after{ content:"−"; }
.ip-faq details > div{ padding:0 0 18px; color:var(--ip-text2); font-size:14.5px; }

/* 底部 CTA（浅暖收尾，与 Hero 呼应） */
.ip-final{
    padding:64px 0; text-align:center; color:var(--ip-text);
    background:
        radial-gradient(760px 300px at 50% 0%, rgba(251,191,36,.22), transparent 62%),
        linear-gradient(180deg,var(--ip-hero2),var(--ip-hero3));
    border-top:1px solid var(--ip-line);
}
.ip-final h2{ color:var(--ip-ink); font-size:26px; font-weight:800; margin-bottom:10px; }
.ip-final p{ color:var(--ip-text2); margin:0 0 26px; }

/* 页脚（与主站一致：白底细边框） */
.ip-foot{ padding:24px 0 30px; background:#fff; border-top:1px solid var(--ip-line); color:#9ca3af; font-size:13px; }
.ip-foot .ip-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ip-foot a{ color:var(--ip-text2) !important; }
.ip-foot a:hover{ color:var(--ip-accent) !important; }
.ip-foot .sep{ opacity:.5; }
.ip-foot-from{ margin-left:auto; color:#b0a99f; }

/* 移动端吸底 CTA（默认隐藏） */
.ip-sticky{ display:none; }

/* ---------------- 响应式 ---------------- */
@media (max-width:980px){
    .ip-hero-in{ flex-direction:column; align-items:stretch; gap:34px; }
    .ip-hero-vis{ flex:none; max-width:100%; }
    .ip-tools, .ip-steps{ grid-template-columns:repeat(2,1fr); }
    .ip-beta{ flex-direction:column; gap:24px; padding:30px 26px; }
    .ip-beta-r{ flex:none; }
}
@media (max-width:760px){
    body.intro-body{ font-size:14.5px; }
    .ip-top{ height:56px; }
    .ip-top-in{ padding:0 14px; gap:10px; }
    .ip-nav{ display:none; }               /* 窄屏隐藏锚点，改用吸底 CTA */
    .ip-top-r{ margin-left:auto; }
    .ip-top-r .ip-btn{ height:36px; padding:0 14px; font-size:13.5px; }
    .ip-hero{ padding:40px 0 46px; }
    .ip-hero h1{ font-size:25px; margin:16px 0 14px; }
    .ip-lead{ font-size:15px; }
    .ip-cta{ flex-direction:column; }
    .ip-cta .ip-btn{ width:100%; }
    .ip-hero-note .sep{ display:none; }
    .ip-hero-note b{ display:inline; }
    .ip-sec{ padding:48px 0; }
    .ip-h2{ font-size:21px; }
    .ip-sub{ margin-bottom:26px; font-size:14px; }
    .ip-two, .ip-tools, .ip-steps{ grid-template-columns:1fr; }
    .ip-beta{ padding:26px 20px; border-radius:14px; }
    .ip-beta h2{ font-size:22px; }
    .ip-beta-price .num{ font-size:32px; }
    .ip-beta-list li{ font-size:13.5px; line-height:1.95; }
    .ip-faq summary{ font-size:14.5px; padding:15px 26px 15px 0; }
    .ip-final{ padding:48px 0 96px; }
    .ip-final h2{ font-size:21px; }
    .ip-foot .ip-wrap{ flex-direction:column; align-items:flex-start; }
    .ip-foot-from{ margin-left:0; }
    /* 吸底 CTA：宽度撑满、触控高度 ≥48px */
    .ip-sticky{
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
        padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
        background:rgba(255,255,255,.96); border-top:1px solid var(--ip-line);
        backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    }
    .ip-sticky .ip-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}