/* ============================================================
   Multilegs 站点设计系统（20260906 重构）
   风格：单栏大留白 / 超大 hero / 圆角细边框卡片 / 单一蓝色点缀
   （与 OptionStrat 同属浅底蓝点缀一系；细节见方案文档
   docs/plan/20260906-multilegs.com网站重构.md）。
   刻意不引外部字体与任何 JS/CSS 框架：自包含、国内可达。
   ============================================================ */

:root {
    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --blue-soft: rgba(0, 82, 255, .08);
    --ink: #0f172a;
    --ink-2: #1e293b;
    --gray: #64748b;
    --gray-2: #64748b;
    --gray-3: #64748b;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --bg-soft-2: #eef0f3;
    --border: #e2e8f0;
    --green: #05b169;
    --red: #cf202f;
    --yellow: #f4b000;
    --radius: 20px;
    --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei",
            "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── 顶栏 ──────────────────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.brand {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}
.brand:hover { color: var(--ink); }
.topnav { display: flex; gap: 22px; align-items: center; }
.topnav a { color: var(--gray); font-size: 14px; font-weight: 700; }
.topnav a:hover { color: var(--ink); }
.topbar-spacer { flex: 1; }
.topbar-auth { display: flex; gap: 12px; align-items: center; }
.topbar-auth .signin { color: var(--gray); font-size: 14px; }
.topbar-auth .signin:hover { color: var(--ink); }

/* ── 按钮 ──────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--gray-3); color: var(--ink); }
.btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 10px; }

/* ── hero ──────────────────────────────────────────────── */

.hero { padding: 96px 0 80px; text-align: center; }
.hero .badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 26px;
}
.hero h1 {
    margin: 0 auto 20px;
    max-width: 820px;
    font-size: 54px;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 800;
}
.hero .sub {
    margin: 0 auto 36px;
    max-width: 640px;
    font-size: 18px;
    color: var(--gray);
}
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .fineprint { margin-top: 22px; font-size: 13px; color: var(--gray-3); }

/* ── 区块通用 ──────────────────────────────────────────── */

.section { padding: 80px 0; }
.section.soft { background: var(--bg-soft); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow {
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.section-head h2 {
    margin: 0 0 12px;
    font-size: 34px;
    letter-spacing: -.02em;
    font-weight: 800;
}
.section-head p { margin: 0 auto; max-width: 620px; color: var(--gray); font-size: 16px; }

/* ── 功能卡片 ──────────────────────────────────────────── */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feature-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.feature-card .icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--mono);
    margin-bottom: 16px;
}
.feature-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.feature-card p { margin: 0; font-size: 14px; color: var(--gray); }

/* ── 截图 ──────────────────────────────────────────────── */

.shot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.shot-grid a { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.shot-grid a:hover { border-color: var(--gray-3); }
.shot-grid img { display: block; width: 100%; height: auto; }
.shot-wide { grid-column: 1 / -1; }

/* ── 定价 ──────────────────────────────────────────────── */

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.price-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
}
.price-card.hot { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.price-card .plan { font-size: 15px; font-weight: 700; color: var(--gray); }
.price-card .price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 18px; }
.price-card .price small { font-size: 14px; color: var(--gray-2); font-weight: 500; }
.price-card ul { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.price-card li { padding: 6px 0 6px 24px; font-size: 14px; color: var(--gray); position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.price-card .dl { display: flex; flex-direction: column; gap: 10px; }
.price-card .dl .btn { text-align: center; }

/* ── FAQ ───────────────────────────────────────────────── */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}
.faq summary {
    cursor: pointer;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gray-3); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 18px; color: var(--gray); font-size: 15px; }

/* ── CTA 尾区 ──────────────────────────────────────────── */

.cta-final { text-align: center; }
.cta-final h2 { font-size: 32px; margin: 0 0 14px; letter-spacing: -.02em; }
.cta-final p { color: var(--gray); margin: 0 0 28px; }

/* ── 页脚 ──────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--border); padding: 44px 0; margin-top: 40px; }
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.footer .col { font-size: 13px; color: var(--gray-2); }
.footer .col a { color: var(--gray-2); display: block; margin-bottom: 6px; }
.footer .col a:hover { color: var(--ink); }
.footer .brandline { font-weight: 700; color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.footer .legal { margin-top: 26px; text-align: center; font-size: 12px; color: var(--gray-3); }
.footer .legal a { color: var(--gray-3); }

/* ── 表单页（登录/注册/找回/重置；类名契约与旧版一致，
      auth 页 markup 不改也能直接吃到新皮） ─────────────── */

.card {
    max-width: 420px;
    margin: 72px auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 34px;
}
.card h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.card .sub { margin: 0 0 24px; color: var(--gray-2); font-size: 14px; }

label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

input[type=text], input[type=email], input[type=password] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
}
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.card button {
    width: 100%;
    margin-top: 24px;
    padding: 11px;
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
}
.card button:hover { background: var(--blue-hover); }
.card button:disabled { background: var(--gray-3); cursor: default; }

.msg { margin-top: 16px; font-size: 13px; min-height: 18px; }
.msg.err { color: var(--red); }
.msg.ok { color: var(--green); }

.links { margin-top: 20px; font-size: 13px; text-align: center; }
.links a { margin: 0 8px; }

.hint { margin-top: 10px; font-size: 12px; color: var(--gray-3); line-height: 1.6; }

/* ── 响应式 ────────────────────────────────────────────── */

@media (max-width: 860px) {
    .hero h1 { font-size: 36px; }
    .hero { padding: 64px 0 56px; }
    .feature-grid { grid-template-columns: 1fr; }
    .shot-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .topnav { display: none; }
    .section { padding: 56px 0; }
    .section-head h2 { font-size: 27px; }
}

/* PayAI.plus 参考视觉：蓝青渐变、玻璃导航、浅色卡片；全站共用。 */
:root { --accent: #14b8a6; --shadow: 0 12px 40px rgba(15,23,42,.06); }
body { background: linear-gradient(140deg,#f8faff 0,#fff 48%,#f7fcfc 100%); }
.topbar { background: rgba(255,255,255,.82); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.topbar-inner { height: 72px; gap: 22px; }
.brand { font-size: 21px; white-space: nowrap; }
.brand::before { content: ''; display:inline-block; vertical-align:middle; width:32px; height:32px; margin-right:3px; background:url('/images/app-icon-small.png') center / contain no-repeat; }
.btn, .card button { border-radius:12px; }
.btn-primary, .card button { background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 8px 20px #2563eb20; }
.btn-primary:hover,.card button:hover { background:linear-gradient(135deg,#1d4ed8,#0891b2); }
.btn-ghost { background:#ffffffc9; box-shadow:var(--shadow); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.hero { overflow:hidden; padding:96px 0; background:linear-gradient(115deg,#2563eb0f,#8b5cf60b 45%,#14b8a609 72%,transparent); }
.hero-layout { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:32px; }
.hero-copy { text-align:left; }
.hero h1 { font-size:clamp(36px,4.2vw,56px); line-height:1.3; }
.gradient-text { background:linear-gradient(135deg,#2563eb,#14b8a6); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero .badge { background:#ffffffd9; border:1px solid #2563eb30; box-shadow:0 8px 28px #2563eb14; padding:8px 16px; }
.hero .badge::before { content:''; display:inline-block; width:8px; height:8px; background:#10b981; border-radius:50%; margin-right:8px; }
.hero .sub { line-height:1.9; font-size:17px; }
.hero .cta { justify-content:flex-start; }
.hero .fineprint { color:var(--gray); }
.strategy-orbit { height:440px; position:relative; isolation:isolate; }
.strategy-orbit::before { content:''; position:absolute; inset:35px; border-radius:50%; background:radial-gradient(circle,#cffafeaa,#ede9fe88 50%,transparent 72%); filter:blur(16px); }
.orbit-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #2563eb30; }
.orbit-outer { width:350px; height:350px; }.orbit-inner { width:260px; height:260px; border-color:#14b8a650; }
.orbit-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:190px; height:190px; border-radius:36px; background:radial-gradient(at 15% 0,#164e63,transparent 70%),radial-gradient(at 90% 100%,#5b21b6,transparent 65%),#0f172a; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 24px 60px #6366f145; border:1px solid #67e8f9; }
.orbit-core span { color:#67e8f9; font-size:10px; letter-spacing:2px; }.orbit-core strong { font-size:31px; margin:8px 0; }.orbit-core em { font-style:normal; color:#ddd6fe; font-size:16px; }.orbit-core small { margin-top:10px; border:1px solid #ffffff30; border-radius:20px; padding:2px 12px; color:#e2e8f0; }
.orbit-label { position:absolute; padding:16px; background:#fffffff0; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 12px 35px #6366f119; }.orbit-label strong,.orbit-label span { display:block; }.orbit-label strong { font-size:16px; }.orbit-label span { color:var(--gray); font-size:12px; margin-top:5px; }
.orbit-one { right:0; top:24px; border-color:#bae6fd; }.orbit-two { bottom:27px; right:0; border-color:#a7f3d0; }.orbit-three { left:0; bottom:52px; border-color:#ddd6fe; }
.feature-card,.price-card,.card { box-shadow:var(--shadow); border-color:#e2e8f0; }
.feature-card { padding:30px; transition:transform .2s,box-shadow .2s; }.feature-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px #2563eb12; }
.price-card { padding:36px 30px; }.price-card.hot { border:2px solid #2563eb; background:linear-gradient(145deg,#eff6ff,#fff 60%); box-shadow:0 16px 40px #2563eb16; }
.feature-card .icon { border-radius:12px; background:linear-gradient(135deg,#dbeafe,#ccfbf1); }
.faq details { background:#ffffffcc; padding:4px 22px; border:1px solid var(--border); border-radius:16px; margin-bottom:12px; }
.footer { background:#f8fafc; }.card { background:#ffffffed; }
@media(max-width:1000px) { .topnav { gap:12px; }.hero-layout { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero .cta { justify-content:center; }.strategy-orbit { max-width:480px; width:100%; margin:0 auto; }.hero { padding:60px 0 36px; } }
@media(max-width:600px) { .container { padding:0 20px; }.topbar-inner { padding:0 16px; gap:12px; }.brand { font-size:18px; }.topbar-auth { gap:8px; }.topbar-auth .btn { padding:8px 12px; }.strategy-orbit { height:370px; }.orbit-outer { width:290px; height:290px; }.orbit-inner { width:220px; height:220px; }.orbit-core { width:160px; height:160px; }.orbit-core strong { font-size:26px; }.orbit-label { padding:12px; }.orbit-label strong { font-size:14px; }.orbit-label span { font-size:11px; }.orbit-three { bottom:16px; }.orbit-two { bottom:0; }.card { margin:36px 16px; padding:28px 24px; }.hero h1 { font-size:34px; }.section { padding:52px 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* 首页品牌首屏：与产品视频的品牌画面一致，文案保留为可编辑文字。 */
.hero.hero-brand {
    padding: 100px 0 64px;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: #eaf3fc;
    background:
        linear-gradient(#1f8fff06 1px, transparent 1px),
        linear-gradient(90deg, #1f8fff06 1px, transparent 1px),
        radial-gradient(ellipse at center, #060e1c, #010309 78%);
    background-size: 116px 116px, 116px 116px, auto;
}
.hero-brand > .container { width: 100%; }
.hero-wordmark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .09em;
    font-size: clamp(64px, 10vw, 140px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.045em;
}
.hero-wordmark img { width: 1em; height: 1em; flex: none; }
.hero-legs { color: #008dff; }
.hero-underline { width: min(390px, 48%); height: 3px; margin: 24px auto 38px; background: #008dff; box-shadow: 0 0 9px #008dff44; }
.hero-brand h1 { font-size: clamp(25px, 3.5vw, 48px); line-height: 1.5; font-weight: 400; letter-spacing: .02em; margin: 0 auto 22px; }
.hero-topics { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0 0 42px; padding: 0; color: #9aa6b6; font-size: clamp(16px, 2.3vw, 29px); }
.hero-topics li + li::before { content: '·'; margin: 0 .55em; }
.hero-brand .cta { justify-content: center; }
.hero-brand .btn-primary { background: #0082ed; box-shadow: none; }
.hero-brand .btn-primary:hover { background: #169aff; }
.hero-brand .btn-ghost { background: transparent; border-color: #526175; color: #eaf3fc; box-shadow: none; }
.hero-brand .btn-ghost:hover { background: #ffffff0d; border-color: #9aa6b6; }
.hero-brand .fineprint { color: #8592a5; }
@media (max-width: 600px) {
    .hero.hero-brand { min-height: 580px; padding: 76px 0 48px; background-size: 64px 64px, 64px 64px, auto; }
    .hero-underline { margin: 20px auto 30px; }
    .hero-topics { max-width: 290px; margin: 0 auto 34px; row-gap: 8px; }
    .hero-topics li { width: 50%; }
    .hero-topics li + li::before { content: none; }
    .hero-brand .fineprint { font-size: 12px; margin-top: 24px; }
}

.product-video { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.product-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #010309; object-fit: contain; }
.product-video video:fullscreen { width: 100%; height: 100%; }
.product-video-link { margin-top: 12px; text-align: center; }

/* 下载版本卡片：统一边框、标题行和功能列表的起点。 */
#download .price-card { border-width: 2px; }
#download .price-card .plan { line-height: 1.5; }
#download .price-card .price { line-height: 1.3; margin: 12px 0 24px; }