:root {
  --bg: #f7f4ec;
  --surface: #fffefa;
  --ink: #20221f;
  --muted: #6d726a;
  --line: #dddcd2;
  --line-strong: #c8c7ba;
  --red: #f05a28;
  --red-dark: #d94718;
  --blue: #126e62;
  --cyan: #0f9b8e;
  --green: #2e9b58;
  --navy: #202721;
  --soft-blue: #e4f3ef;
  --soft-red: #fff0e8;
  --radius: 8px;
  --shadow: 0 22px 60px rgba(59, 50, 32, .13);
}

body {
  background:
    linear-gradient(90deg, rgba(45, 54, 44, .025) 1px, transparent 1px),
    var(--bg);
  background-size: 24px 24px;
}

.site-header { height: 76px; background: rgba(255, 254, 250, .94); border-bottom: 2px solid var(--ink); }
.logo-mark { border-radius: 4px; background: var(--red); }
.nav-links a { font-size: 12px; font-weight: 800; }
.nav-cta, .btn { border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); }
.btn:hover, .nav-cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-secondary { box-shadow: 3px 3px 0 var(--ink); }

.hero {
  min-height: 830px;
  background:
    radial-gradient(circle at 83% 28%, rgba(240, 90, 40, .14), transparent 25rem),
    linear-gradient(90deg, rgba(32,34,31,.06) 1px, transparent 1px),
    linear-gradient(rgba(32,34,31,.06) 1px, transparent 1px),
    #f7eecf;
  background-size: auto, 34px 34px, 34px 34px, auto;
}
.hero::after { display: none; }
.live-badge { border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
h1 span { color: var(--red); }
.app-window { border: 2px solid var(--ink); border-radius: 6px; box-shadow: 12px 12px 0 rgba(32,34,31,.12); }
.window-bar { background: #f8f6ee; border-color: var(--ink); }
.presence-card { border: 1px solid var(--ink); border-radius: 5px; box-shadow: 5px 5px 0 rgba(32,34,31,.14); }
.presence-card strong::before { content: "店铺工作台 · "; color: var(--red); }

.timezone-bar { border-block: 2px solid var(--ink); }
.timezone-grid { min-height: 108px; }
.timezone { border-color: var(--ink); }
.timezone small { color: var(--red); font-weight: 800; }

.eyebrow { color: var(--red); }
.eyebrow::before { border-radius: 2px; background: var(--red); box-shadow: none; }
.title span { color: var(--red); }
.section-dark .title span { color: #ffb38f; }

.feature-grid { gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.feature-card { border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: var(--surface); }
.feature-card:hover { z-index: 1; transform: translate(-4px, -4px); border-color: var(--ink); box-shadow: 8px 8px 0 var(--red); }
.feature-icon { border-radius: 4px; color: var(--red); background: var(--soft-red); }
.feature-card:nth-child(2) .feature-icon, .feature-card:nth-child(5) .feature-icon { color: var(--blue); background: var(--soft-blue); }
.card-presence::before { border-radius: 2px; }

.collab-media img { border: 2px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 rgba(32,34,31,.12); }
.floating-note { border: 1px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--red); }
.floating-note span { color: var(--red); }
.check-list li::before { border-radius: 4px; }

.section-dark { background: var(--navy); }
.download-grid { gap: 12px; }
.download-card { border-radius: 6px; border-color: #465148; background: #29312b; }
.platform { border-radius: 4px; color: #ffb38f; background: #3b463e; }

.scene-grid { gap: 0; border: 1px solid var(--ink); }
.scene-card { border: 0; border-right: 1px solid var(--ink); border-radius: 0; }
.scene-card:last-child { border-right: 0; }
.scene-graphic { border-radius: 6px; border-style: solid; }

.quotes { gap: 0; border: 1px solid var(--ink); }
.quote { border: 0; border-right: 1px solid var(--ink); border-radius: 0; }
.quote:last-child { border-right: 0; }
.avatar, .quote:nth-child(2) .avatar, .quote:nth-child(3) .avatar { border-radius: 4px; background: var(--red); }

.price-card { border-radius: 5px; border-color: var(--ink); }
.price-card.featured { color: white; background: var(--red); border-color: var(--ink); box-shadow: 10px 10px 0 rgba(32,34,31,.18); }
.plan { border-radius: 3px; color: var(--blue); }
.faq-question b { border-radius: 4px; color: var(--red); background: var(--soft-red); }
.cta-panel { border: 2px solid var(--ink); border-radius: 6px; background: var(--red); box-shadow: 10px 10px 0 rgba(32,34,31,.15); }

.page-hero { background: #f7eecf; border-bottom: 2px solid var(--ink); }
.page-media { border: 2px solid var(--ink); border-radius: 6px; box-shadow: 9px 9px 0 rgba(32,34,31,.12); }
.download-row, .help-card, .help-nav, .search-box { border-color: var(--ink); border-radius: 5px; }
.download-row { box-shadow: 4px 4px 0 rgba(32,34,31,.08); }
.help-card:hover { box-shadow: 6px 6px 0 var(--red); transform: translate(-3px, -3px); }
.site-footer { background: #171b18; }

@media (max-width: 980px) {
  .site-header .nav-links { top: 76px; border: 2px solid var(--ink); border-radius: 5px; }
}

@media (max-width: 680px) {
  .scene-grid, .quotes { border: 0; gap: 12px; }
  .scene-card, .quote { border: 1px solid var(--ink); }
}