/* MainVac 官网。shottr 式窄栏骨架 + 自己的氛围层：品牌蓝/青双色光斑背景、
   噪点纸面、截图垫渐变底板浮起。零卡片原则不变——修饰只给截图和图标，不给容器。 */
:root {
  color-scheme: light dark;
  --bg: #fcfcfd; --fg: #17171a; --muted: #6d6d76;
  --line: #e6e6ea; --accent: #1f6feb; --accent-2: #0ea5e9; --accent-fg: #fff;
  --glow-a: rgba(31,111,235,.14); --glow-b: rgba(14,165,233,.12);
  --pad-a: #dbeafe; --pad-b: #cffafe;           /* 截图底板渐变 */
  --mark: rgba(56,189,248,.32);                  /* 荧光笔 */
  --chip: rgba(31,111,235,.09);
  --bezel: #1c1c22;                              /* 手机边框 */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #101014; --fg: #f0f0f3; --muted: #9a9aa2; --line: #2a2a31;
          --accent: #4c8dff; --accent-2: #38bdf8;
          --glow-a: rgba(59,130,246,.16); --glow-b: rgba(14,165,233,.10);
          --pad-a: #16233f; --pad-b: #0e2a38;
          --mark: rgba(56,189,248,.24); --chip: rgba(76,141,255,.13); --bezel: #33333c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "PingFang TC", "Noto Sans CJK SC", sans-serif;
       -webkit-font-smoothing: antialiased; }
/* 氛围层：两团柔光 + 细噪点。fixed 让长页滚动时纸面稳定。 */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% -4%, var(--glow-a), transparent 68%),
    radial-gradient(640px 480px at 96% 14%, var(--glow-b), transparent 70%),
    radial-gradient(700px 520px at 50% 108%, var(--glow-a), transparent 74%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { body::after { mix-blend-mode: screen; opacity: .04; } }

main, header.site, footer.site { max-width: 680px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); }

header.site { padding-top: 22px; padding-bottom: 8px;
              display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 8px;
         font-weight: 650; font-size: 16px; color: var(--fg); text-decoration: none; }
.brand img { width: 22px; height: 22px; border-radius: 6px; }
nav.lang { font-size: 12.5px; }
nav.lang a { color: var(--muted); text-decoration: none; margin-left: 10px; }
nav.lang a.on { color: var(--fg); font-weight: 600; }

.hero { padding: 54px 0 8px; }
.hero h1 { font-size: 38px; line-height: 1.2; letter-spacing: -0.022em;
           font-weight: 750; margin: 0 0 14px; }
mark { background: linear-gradient(transparent 55%, var(--mark) 55%);
       color: inherit; padding: 0 2px; border-radius: 2px; }
.hero .tagline { font-size: 17px; color: var(--muted); margin: 0 0 26px; max-width: 34em; }
.button { display: inline-block; color: var(--accent-fg);
          background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
          box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px -8px var(--accent);
          font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 10px;
          text-decoration: none; transition: transform .06s ease; }
.button:active { transform: scale(.97); }
.aside-link { margin-left: 14px; font-size: 14px; }
.req { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* 截图：垫渐变底板，图带真投影浮起 */
.shot { margin: 42px 0 0; }
.pad { padding: clamp(14px, 4vw, 30px); border-radius: 18px;
       background: linear-gradient(135deg, var(--pad-a), var(--pad-b)); }
.pad.alt { background: linear-gradient(315deg, var(--pad-a), var(--pad-b)); }
.shot img { width: 100%; height: auto; display: block; border-radius: 9px;
            box-shadow: 0 22px 44px -18px rgba(9,30,66,.45), 0 3px 10px rgba(9,30,66,.14); }
.shot-caption { font-size: 13px; color: var(--muted); margin: 10px 2px 0; }

/* 手机：深色 bezel 框 + 错落 */
.phones { display: flex; gap: 16px; margin-top: 26px; overflow-x: auto;
          scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
          padding: 14px 4px 10px; }
.phones figure { flex: 0 0 182px; margin: 0; scroll-snap-align: start;
                 transition: transform .18s ease; }
.phones figure:nth-child(2) { transform: translateY(14px); }
@media (hover: hover) {
  .phones figure:hover { transform: translateY(-4px); }
  .phones figure:nth-child(2):hover { transform: translateY(10px); }
}
.phones img { width: 100%; height: auto; display: block; border-radius: 22px;
              border: 6px solid var(--bezel);
              box-shadow: 0 18px 36px -16px rgba(9,30,66,.4); }
.phones figcaption { font-size: 12.5px; color: var(--muted); margin: 9px 2px 0; line-height: 1.45; }

section { margin-top: 68px; }
section h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; }

/* 功能：图标 chip + 文字，两栏，无卡片 */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.features > div { display: flex; gap: 12px; align-items: flex-start; }
.features .ic { flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--chip);
                display: grid; place-items: center; color: var(--accent); }
.features .ic svg { width: 19px; height: 19px; }
.features h3 { font-size: 15px; font-weight: 650; margin: 1px 0 4px; }
.features p { font-size: 14px; color: var(--muted); margin: 0; }
kbd { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
      border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
      padding: 1px 5px; color: var(--muted); background: var(--bg); }

/* 定价：一行三项，中列 accent 数字 */
.plans { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan { flex: 1; padding: 20px 8px; text-align: center; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan .price { font-size: 27px; font-weight: 750; letter-spacing: -0.02em; }
.plan:nth-child(2) .price { color: var(--accent); }
.plan .cycle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.plan .note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.trial-line { font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.trial-line .button { margin-right: 12px; }

.faq details { border-bottom: 1px solid var(--line); padding: 11px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.faq p { color: var(--muted); font-size: 14px; margin: 8px 0 2px; }

footer.site { margin-top: 76px; padding-top: 20px; padding-bottom: 44px;
              border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
footer.site a { color: var(--muted); }
footer.site .links a { margin-right: 14px; }
footer.site p { margin: 10px 0 0; }

article h1 { font-size: 28px; margin: 44px 0 6px; letter-spacing: -0.02em; }
article .updated { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
article h2 { font-size: 17px; margin: 28px 0 6px; }
article p, article li { font-size: 15px; }