/* 安心云 公开前台（营销站）样式。与控制台 styles.css 同源的设计变量，面向访客的展示层。 */
:root {
  --ink-950:#101413; --ink-800:#232827; --ink-600:#5d6663; --ink-400:#8b9490;
  --paper-050:#fbfaf7; --paper-100:#f4f3ee; --paper-000:#ffffff;
  --line-200:#dfe0da; --line-100:#ecece6;
  --teal-700:#076b65; --teal-600:#0b8a82; --teal-500:#14a398; --teal-100:#dcf0ec; --teal-050:#eef8f6;
  --amber-600:#b7791f; --amber-100:#f7eddc;
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --shadow-soft:0 1px 2px rgba(16,20,19,.05), 0 12px 32px -16px rgba(16,20,19,.18);
  --shadow-lift:0 2px 4px rgba(16,20,19,.06), 0 20px 44px -18px rgba(16,20,19,.24);
  --wrap:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper-050); color:var(--ink-950); font:16px/1.65 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }

/* ---------- 头部导航 ---------- */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(251,250,247,.86); border-bottom:1px solid var(--line-100); }
.site-header .bar { max-width:var(--wrap); margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:760; font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",ui-sans-serif,system-ui,sans-serif; text-decoration:none; letter-spacing:.01em; }
.brand-name { font-weight:760; letter-spacing:.01em; }
.brand strong { font-weight:inherit; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; flex:none; }
.brand-mark img { width:100%; height:100%; display:block; }
.main-nav { display:flex; gap:6px; margin-right:auto; }
.main-nav a { text-decoration:none; color:var(--ink-600); font-size:14.5px; font-weight:550; padding:8px 12px; border-radius:999px; transition:color .15s, background .15s; }
.main-nav a:hover { color:var(--ink-950); background:var(--paper-100); }
.main-nav a.active { color:var(--teal-700); background:var(--teal-050); }
.header-actions { display:flex; align-items:center; gap:10px; }
.nav-toggle { display:none; border:1px solid var(--line-200); background:var(--paper-000); border-radius:var(--radius-sm); width:38px; height:38px; font-size:17px; }

/* ---------- 按钮 ---------- */
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:11px 22px; font-size:15px; font-weight:620; text-decoration:none; background:var(--ink-950); color:#fff; transition:transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform:translateY(-1px); box-shadow:var(--shadow-soft); background:#000; }
.button.primary { background:var(--teal-600); }
.button.primary:hover { background:var(--teal-700); }
.button.secondary { background:transparent; color:var(--ink-950); border:1px solid var(--line-200); }
.button.secondary:hover { border-color:var(--ink-400); box-shadow:none; }
.button.ghost-light { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); }
.button.ghost-light:hover { background:rgba(255,255,255,.2); box-shadow:none; }
.button.large { padding:14px 28px; font-size:16px; }
.text-link { color:var(--teal-700); font-weight:600; text-decoration:none; }
.text-link:hover { text-decoration:underline; }

/* ---------- 区块骨架 ---------- */
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
section.band { padding:96px 0; }
.section-head { max-width:640px; margin:0 auto 56px; text-align:center; }
.eyebrow { font-size:12px; font-weight:720; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-700); margin:0 0 12px; }
h1,h2,h3 { letter-spacing:-.022em; line-height:1.18; margin:0; }
.section-head h2 { font-size:clamp(28px, 3.6vw, 40px); font-weight:760; }
.section-head p { color:var(--ink-600); margin:14px 0 0; font-size:16.5px; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--ink-950); color:#f4f6f4; padding:104px 0 96px; }
.hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(720px 420px at 82% -10%, rgba(20,163,152,.28), transparent 62%),
  radial-gradient(560px 380px at 6% 110%, rgba(20,163,152,.16), transparent 60%); }
.hero .wrap { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#d9efe9; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--teal-500); box-shadow:0 0 10px var(--teal-500); }
.hero h1 { font-size:clamp(38px, 5.2vw, 60px); font-weight:780; margin:20px 0 0; }
.hero h1 em { font-style:normal; background:linear-gradient(92deg, #6fd6c8, #2fbfae 60%, #d9efe9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { max-width:32em; margin:20px 0 0; display:grid; gap:8px; }
.hero-lede .lede-line { margin:0; font-size:18px; line-height:1.6; }
.hero-lede .lede-fast { color:#f4f6f4; }
.hero-lede .lede-safe { color:#6fd6c8; }
.hero-lede .lede-easy { color:#e8c37a; }
.hero .lead { color:#b8c4c0; font-size:18px; max-width:32em; margin:20px 0 0; }
.hero-actions { display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-facts { display:flex; gap:0; margin:44px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.hero-facts > div { padding:18px 28px 0 0; margin-right:28px; border-right:1px solid rgba(255,255,255,.1); padding-right:28px; }
.hero-facts > div:last-child { border-right:0; }
.hero-facts dt { font-size:24px; font-weight:760; color:#fff; }
.hero-facts dd { margin:2px 0 0; font-size:13px; color:#93a29d; }
.hero-shot { position:relative; }
.hero-shot img { border-radius:var(--radius-lg); box-shadow:0 40px 80px -24px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); }
.hero-shot figcaption { color:#8fa09b; font-size:12.5px; margin-top:14px; text-align:center; }
.hero-shot::after { content:""; position:absolute; inset:-14% -10% auto auto; width:70%; height:70%; background:radial-gradient(closest-side, rgba(20,163,152,.22), transparent); z-index:-1; }

/* ---------- 信任条 ---------- */
.trust-strip { border-bottom:1px solid var(--line-100); background:var(--paper-000); }
.trust-strip .wrap { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding-top:22px; padding-bottom:22px; }
.trust-item { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:560; color:var(--ink-800); padding:8px 12px; }
.trust-item .ico { width:36px; height:36px; flex:none; border-radius:10px; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; font-size:16px; }

/* ---------- 功能网格 ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.feature-card { background:var(--paper-000); border:1px solid var(--line-100); border-radius:var(--radius-lg); padding:28px; transition:transform .18s, box-shadow .18s; }
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.feature-card .ico { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, var(--teal-050), var(--teal-100)); color:var(--teal-700); display:grid; place-items:center; font-size:20px; margin-bottom:18px; }
.feature-card h3 { font-size:17.5px; font-weight:680; }
.feature-card p { color:var(--ink-600); font-size:14.5px; margin:10px 0 0; }
.feature-card .tag { display:inline-block; margin-top:16px; font-size:11.5px; font-weight:650; color:var(--teal-700); background:var(--teal-050); border-radius:999px; padding:3px 10px; }

/* ---------- 三步开始 ---------- */
.steps-band { background:var(--paper-000); border-block:1px solid var(--line-100); }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; counter-reset:step; }
.step { position:relative; padding:30px 26px 26px; border-radius:var(--radius-lg); background:var(--paper-050); border:1px solid var(--line-100); }
.step::before { counter-increment:step; content:"0" counter(step); display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink-950); color:#fff; font-weight:720; font-size:15px; margin-bottom:18px; }
.step h3 { font-size:17.5px; font-weight:680; }
.step p { color:var(--ink-600); font-size:14.5px; margin:10px 0 0; }
.step .step-meta { display:block; margin-top:14px; font-size:12.5px; color:var(--ink-400); }

/* ---------- 节点区域 ---------- */
.region-band { background:var(--ink-950); color:#eef2f0; }
.region-band .section-head h2 { color:#fff; }
.region-band .section-head p { color:#9fb0ab; }
.region-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.region-card { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:var(--radius-md); padding:22px; }
.region-card .flag { font-size:22px; }
.region-card h3 { font-size:16px; margin-top:10px; color:#fff; }
.region-card p { font-size:13px; color:#93a29d; margin:6px 0 0; }
.region-note { text-align:center; color:#7f8f8a; font-size:12.5px; margin-top:26px; }

/* ---------- 套餐 ---------- */
.billing-toggle { display:inline-flex; background:var(--paper-100); border:1px solid var(--line-200); border-radius:999px; padding:4px; gap:4px; margin:0 auto 44px; }
.billing-toggle button { border:0; background:transparent; border-radius:999px; padding:9px 22px; font-size:14.5px; font-weight:600; color:var(--ink-600); }
.billing-toggle button.active { background:var(--ink-950); color:#fff; }
.billing-toggle .save-chip { font-size:11px; font-weight:700; color:var(--teal-700); background:var(--teal-050); border-radius:999px; padding:2px 8px; margin-left:8px; }
.pricing-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; align-items:stretch; margin-top:34px; }
.price-card { position:relative; background:var(--paper-000); border:1px solid var(--line-200); border-radius:20px; padding:24px 24px 30px; display:flex; flex-direction:column; }
.price-card.featured { border-color:var(--teal-600); box-shadow:var(--shadow-lift); }
.plan-badge-slot { height:30px; display:flex; align-items:center; justify-content:center; margin:-24px -24px 0; }
.price-card .pop-badge, .price-card .soon-badge { position:static; display:inline-block; white-space:nowrap; line-height:1.2; background:var(--teal-600); color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:5px 16px; }
.price-card .plan-badge-slot > .pop-badge, .price-card .plan-badge-slot > .soon-badge { transform:translateY(-15px); }
.price-card h3 { font-size:20px; font-weight:740; }
.price-card .plan-for { color:var(--ink-600); font-size:14px; line-height:1.5; min-height:42px; margin:6px 0 0; }
.price-line { display:flex; align-items:baseline; gap:8px; min-height:53px; margin:18px 0 4px; white-space:nowrap; }
.price-line strong { font-size:44px; font-weight:780; letter-spacing:-.03em; }
.price-line span { color:var(--ink-400); font-size:15px; flex:none; }
.price-note { font-size:13px; line-height:1.4; color:var(--ink-400); min-height:37px; margin:0; }
.price-feats { list-style:none; min-height:153px; margin:22px 0 28px; padding:0; display:grid; gap:11px; }
.price-feats li { display:flex; gap:10px; font-size:14.5px; color:var(--ink-800); }
.price-feats li::before { content:"✓"; color:var(--teal-600); font-weight:740; }
.price-feats li.dim { color:var(--ink-400); }
.price-feats li.dim::before { content:"—"; color:var(--ink-400); }
.price-card .button { margin-top:auto; white-space:nowrap; padding-inline:16px; }
.price-card .soon-badge { background:var(--paper-100); color:var(--ink-600); border:1px solid var(--line-200); }
.price-card.muted { background:var(--paper-050); box-shadow:none; }
.price-card.muted .price-line strong { color:var(--ink-400); }
.price-card.muted h3, .price-card.muted .plan-for { color:var(--ink-600); }
.pricing-paymethods { max-width:680px; margin:8px auto 0; text-align:center; color:var(--ink-400); font-size:13px; }
.pricing-fineprint { max-width:680px; margin:36px auto 0; text-align:center; color:var(--ink-400); font-size:12.5px; line-height:1.7; }
.offer-banner { margin:0 auto 22px; max-width:930px; border:1px solid #e5c98e; background:var(--amber-100); color:#74571d; border-radius:var(--radius-md); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; }
.offer-banner strong { color:#513b12; }
.offer-banner[hidden] { display:none; }
.offer-banner button { border:1px solid #b7791f; background:transparent; color:#74571d; border-radius:999px; padding:7px 14px; font-weight:700; white-space:nowrap; }

/* ---------- 信任/证据 ---------- */
.evidence-band { background:var(--paper-000); border-block:1px solid var(--line-100); }
.evidence-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.evidence-card { border-left:3px solid var(--teal-600); background:var(--paper-050); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:24px 26px; }
.evidence-card .num { font-size:13px; font-weight:740; color:var(--teal-700); letter-spacing:.08em; }
.evidence-card h3 { font-size:16.5px; margin:8px 0 0; }
.evidence-card p { color:var(--ink-600); font-size:14px; margin:8px 0 0; }

/* ---------- FAQ ---------- */
.faq-list { max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-list details { background:var(--paper-000); border:1px solid var(--line-100); border-radius:var(--radius-md); padding:0; overflow:hidden; }
.faq-list summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-weight:640; font-size:15.5px; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .chev { transition:transform .2s; color:var(--ink-400); font-size:13px; }
.faq-list details[open] summary .chev { transform:rotate(180deg); }
.faq-list details .faq-body { padding:0 22px 20px; color:var(--ink-600); font-size:14.5px; }
.faq-list details .faq-body a { color:var(--teal-700); }

/* ---------- CTA 收尾 ---------- */
.cta-band { background:linear-gradient(120deg, #0d1513, #12211e 55%, #0d1513); color:#fff; text-align:center; padding:96px 0; }
.cta-band h2 { font-size:clamp(28px, 3.6vw, 42px); font-weight:770; }
.cta-band p { color:#a7b7b2; margin:16px auto 0; max-width:36em; }
.cta-band .hero-actions { justify-content:center; margin-top:34px; }
.cta-band .fineprint { color:#74857f; font-size:12.5px; margin-top:22px; }

/* ---------- 页脚 ---------- */
.site-footer { background:var(--paper-100); border-top:1px solid var(--line-200); padding:52px 0 40px; font-size:14px; }
.site-footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.site-footer .brand { margin-bottom:12px; }
.site-footer p { color:var(--ink-600); font-size:13px; margin:8px 0 0; max-width:26em; }
.site-footer h4 { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); margin:0 0 14px; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.site-footer ul a { color:var(--ink-800); text-decoration:none; }
.site-footer ul a:hover { color:var(--teal-700); }
.site-footer .legal { border-top:1px solid var(--line-200); margin-top:36px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; color:var(--ink-400); font-size:12.5px; flex-wrap:wrap; }

/* ---------- 速度×安全双主张 ---------- */
.duo-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.duo-card { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:var(--radius-lg); padding:30px 30px 26px; }
.duo-card h3 { font-size:19px; color:#fff; margin-bottom:16px; }
.duo-card ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.duo-card li { color:#b8c4c0; font-size:14.5px; padding-left:22px; position:relative; }
.duo-card li::before { content:"▸"; position:absolute; left:0; color:var(--teal-500); font-weight:740; }
.region-grid-light .region-card { border-color:var(--line-200); background:var(--paper-050); }
.region-grid-light .region-card h3 { color:var(--ink-950); }
.region-grid-light .region-card p { color:var(--ink-600); }

/* ---------- 套餐卡表情清单变体 ---------- */
.price-feats.emoji li::before { content:none; }
.price-feats.emoji li { padding-left:0; font-size:14.5px; }
.price-feats.emoji li .ico { margin-right:0; flex:none; }

/* ---------- 指南页 ---------- */
.guide-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start; }
.guide-toc { position:sticky; top:88px; display:grid; gap:4px; }
.guide-toc a { text-decoration:none; color:var(--ink-600); font-size:14px; padding:8px 12px; border-radius:var(--radius-sm); border-left:2px solid transparent; }
.guide-toc a:hover { color:var(--ink-950); background:var(--paper-100); }
.guide-toc a.active { color:var(--teal-700); border-left-color:var(--teal-600); background:var(--teal-050); font-weight:620; }
.guide-section { background:var(--paper-000); border:1px solid var(--line-100); border-radius:var(--radius-lg); padding:32px 34px; margin-bottom:22px; scroll-margin-top:88px; }
.guide-section h2 { font-size:21px; font-weight:720; display:flex; align-items:center; gap:12px; }
.guide-section h2 .step-no { width:30px; height:30px; flex:none; border-radius:50%; background:var(--teal-050); color:var(--teal-700); display:grid; place-items:center; font-size:14px; font-weight:740; }
.guide-section p { color:var(--ink-600); font-size:14.5px; margin:12px 0 0; }
.guide-section ul { color:var(--ink-600); font-size:14.5px; margin:12px 0 0; padding-left:20px; display:grid; gap:8px; }
.guide-section code { background:var(--paper-100); border:1px solid var(--line-100); border-radius:6px; padding:1px 7px; font-size:13px; }
.platform-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.platform-chips span { border:1px solid var(--line-200); background:var(--paper-050); border-radius:999px; padding:7px 16px; font-size:13.5px; font-weight:560; color:var(--ink-800); }
.callout { display:flex; gap:12px; background:var(--teal-050); border:1px solid var(--teal-100); border-radius:var(--radius-md); padding:14px 16px; margin-top:16px; font-size:13.5px; color:var(--ink-800); }
.callout.warn { background:var(--amber-100); border-color:#ecdcc0; }
.callout .ico { flex:none; }

/* ---------- 进场动画 ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns:1fr; gap:44px; }
  .hero-facts { flex-wrap:wrap; }
  .feature-grid, .steps, .evidence-grid { grid-template-columns:1fr 1fr; }
  .region-grid { grid-template-columns:1fr 1fr; }
  .duo-grid { grid-template-columns:1fr; }
  .trust-strip .wrap { grid-template-columns:1fr 1fr; }
  .pricing-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns:1fr 1fr; }
  .guide-layout { grid-template-columns:1fr; }
  .guide-toc { position:static; display:flex; flex-wrap:wrap; }
}
@media (max-width: 640px) {
  section.band { padding:64px 0; }
  .hero { padding:72px 0 64px; }
  .main-nav { display:none; position:absolute; top:64px; left:0; right:0; background:var(--paper-000); border-bottom:1px solid var(--line-200); flex-direction:column; padding:12px 16px 16px; gap:2px; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:12px 14px; border-radius:var(--radius-sm); }
  .nav-toggle { display:grid; place-items:center; }
  .header-actions .button { display:none; }
  .feature-grid, .steps, .evidence-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .hero-facts { flex-direction:column; border-top:0; }
  .hero-facts > div { border-right:0; border-top:1px solid rgba(255,255,255,.1); padding:14px 0 0; margin:14px 0 0; width:100%; }
}