/* ============================================================
   /intro 产品简介单页（站外推广落地页）
   独立样式，与 sa.css 互不干扰；深色 Hero + 浅色正文
   ============================================================ */
:root{
    --ip-ink:#0f172a; --ip-text:#334155; --ip-text2:#64748b; --ip-line:#e2e8f0;
    --ip-accent:#2563eb; --ip-accent2:#1d4ed8; --ip-soft:#eff6ff;
    --ip-hero1:#0b1220; --ip-hero2:#101c34; --ip-hero3:#132a4d;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.ip-body{
    margin:0; background:#fff; 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.ip-body a{ color:var(--ip-accent); text-decoration:none; }
body.ip-body a:hover{ text-decoration:none; opacity:.85; }
body.ip-body h1,body.ip-body h2,body.ip-body h3{ color:var(--ip-ink); line-height:1.3; margin:0; }
body.ip-body 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:#c7d2e4; background:#f8fafc; }
.ip-btn.primary{ background:var(--ip-accent); border-color:var(--ip-accent); color:#fff !important; font-weight:600; box-shadow:0 4px 14px rgba(37,99,235,.25); }
.ip-btn.primary:hover{ background:var(--ip-accent2); border-color:var(--ip-accent2); box-shadow:0 6px 18px rgba(37,99,235,.32); }
.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:#cbd5e1 !important; }
.ip-btn.ghost:hover{ background:rgba(255,255,255,.1); border-color:transparent; }
.ip-btn.ghost-w{ background:transparent; color:#dbeafe !important; border-color:rgba(255,255,255,.28); }
.ip-btn.ghost-w:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }

/* ---------------- 顶栏 ---------------- */
.ip-top{
    position:sticky; top:0; z-index:80; height:64px;
    background:rgba(11,18,32,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:box-shadow .2s,background .2s;
}
.ip-top.scrolled{ background:rgba(11,18,32,.96); box-shadow:0 2px 14px rgba(2,6,23,.35); }
.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:#fff !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,#60a5fa,#2563eb); color:#fff; font-size:14px; font-weight:800;
}
.ip-nav{ display:flex; gap:2px; margin-left:8px; flex:1; }
.ip-nav a{ color:#94a3b8 !important; font-size:14px; padding:7px 12px; border-radius:8px; }
.ip-nav a:hover{ color:#fff !important; background:rgba(255,255,255,.09); opacity:1; }
.ip-top-r{ display:flex; align-items:center; gap:8px; }

/* ---------------- Hero ---------------- */
.ip-hero{
    background:
        radial-gradient(1100px 460px at 78% -8%, rgba(59,130,246,.30), transparent 62%),
        radial-gradient(700px 380px at 8% 8%, rgba(37,99,235,.20), transparent 60%),
        linear-gradient(170deg,var(--ip-hero1),var(--ip-hero2) 55%,var(--ip-hero3));
    color:#cbd5e1; padding:56px 0 64px;
}
.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:#bfdbfe;
    background:rgba(59,130,246,.16); box-shadow:inset 0 0 0 1px rgba(96,165,250,.35);
}
.ip-badge i{ width:7px; height:7px; border-radius:50%; background:#22d3ee; box-shadow:0 0 0 4px rgba(34,211,238,.20); animation:ipPulse 2s infinite; }
@keyframes ipPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.ip-badge.light{ color:#1e40af; background:#fff; box-shadow:none; }
.ip-badge.light i{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.ip-hero h1{ color:#fff; font-size:34px; font-weight:800; letter-spacing:-.5px; margin:20px 0 16px; }
.ip-lead{ font-size:16px; color:#a9b6ca; margin:0 0 26px; max-width:620px; }
.ip-lead b, .ip-lead strong{ color:#e2e8f0; 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:#7d8ba3; }
.ip-hero-note b{ color:#93c5fd; }
.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-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(2,6,23,.5); }
.ip-mock-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#f1f5f9; border-bottom:1px solid #e5e9f0; }
.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:#64748b; }
.ip-mock svg{ display:block; width:100%; height:auto; }
.ip-mock-tip{ margin-top:12px; font-size:12.5px; color:#7d8ba3; text-align:center; }

/* ---------------- 通用段落 ---------------- */
.ip-sec{ padding:68px 0; }
.ip-sec.alt{ background:#f8fafc; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; }
.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:#93c5fd; }

/* 工具网格 */
.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(15,23,42,.08); border-color:#dbe3ef; }
.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,#60a5fa,#2563eb); 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:linear-gradient(150deg,#0b1220,#14274a 60%,#173463);
    border-radius:18px; padding:36px 34px; color:#c7d2e3; box-shadow:0 18px 50px rgba(13,30,60,.22);
}
.ip-beta-l{ flex:1 1 0; min-width:0; }
.ip-beta h2{ color:#fff; font-size:27px; font-weight:800; margin:16px 0 10px; }
.ip-beta-desc{ color:#9fb0c8; 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:#fff; letter-spacing:-1px; }
.ip-beta-price .unit{ font-size:13px; color:#93a4bd; }
.ip-beta-price .unit em{ font-style:normal; opacity:.7; }
.ip-beta-r{
    flex:0 0 340px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
    border-radius:14px; padding:22px 22px 16px; backdrop-filter:blur(4px);
}
.ip-beta-rt{ font-size:13px; color:#93c5fd; font-weight:600; letter-spacing:.4px; margin-bottom:12px; }
.ip-beta-list li{ position:relative; padding-left:26px; font-size:14px; color:#dbe4f0; line-height:2.05; }
.ip-beta-list li::before{
    content:"✓"; position:absolute; left:0; top:0; color:#4ade80; font-weight:700; font-size:14px;
}
.ip-beta-foot{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#8496af; }

/* 三步 */
.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(37,99,235,.28);
}
.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:#f1f5f9; 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(15,23,42,.05); }
.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:#94a3b8; 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 */
.ip-final{
    padding:64px 0; text-align:center; color:#cbd5e1;
    background:
        radial-gradient(800px 320px at 50% 0%, rgba(59,130,246,.28), transparent 62%),
        linear-gradient(170deg,var(--ip-hero2),var(--ip-hero1));
}
.ip-final h2{ color:#fff; font-size:26px; font-weight:800; margin-bottom:10px; }
.ip-final p{ color:#9fb0c8; margin:0 0 26px; }

/* 页脚 */
.ip-foot{ padding:24px 0 30px; background:#0b1220; color:#5c6b83; font-size:13px; }
.ip-foot .ip-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ip-foot a{ color:#8ea0bb !important; }
.ip-foot .sep{ opacity:.5; }
.ip-foot-from{ margin-left:auto; color:#4a586e; }

/* 移动端吸底 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.ip-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; }
}