/* ============ Variant B — "Paper" ============
   Light Stripe/Notion corporate: warm white page, ink text,
   dark product mockups floating in frames. */

:root {
  --ink: #faf9f6;
  --ink-soft: #f1efe9;
  --ink-card: #ffffff;
  --line: rgba(20, 23, 31, 0.1);
  --bone: #171a21;
  --bone-dim: #4d5564;
  --bone-faint: #7a8090;
  --accent: #2f6ae0;
  --accent-deep: #1e50c0;
  --accent-glow: rgba(47, 106, 224, 0.22);
}

/* page-level surfaces */
.nav {
  background: rgba(250, 249, 246, 0.85);
  border-bottom-color: var(--line);
}
.hero-glow {
  background: radial-gradient(ellipse, rgba(47, 106, 224, 0.1), transparent 65%);
}
.btn-ghost { background: #ffffff; }
.btn-ghost:hover { background: #f3f1ec; }
.trust-strip li { background: #ffffff; }
.why-item { background: #ffffff; }
.feature { box-shadow: 0 1px 3px rgba(20, 23, 31, 0.04); }
.module-card { box-shadow: 0 1px 3px rgba(20, 23, 31, 0.04); }
.module-flagship {
  background: linear-gradient(135deg, rgba(47, 106, 224, 0.06), #ffffff 45%);
}
.module-node { background: var(--ink); }
.pill-soon { background: rgba(20, 23, 31, 0.06); color: #7a8090; }
.pill-live { background: rgba(16, 122, 87, 0.1); color: #107a57; }
.pill-dev { background: rgba(146, 102, 0, 0.1); color: #926600; }
.check-list li::before, .module-list li::before { color: #107a57; }
.hero-points li::before { background: var(--accent); }
.cta {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(47, 106, 224, 0.1), transparent 60%),
    var(--ink-soft);
}

/* ---- mockups stay DARK: re-scope tokens inside the frames ---- */
.panel, .shot, .big-phone, .phone-panel {
  --line: rgba(255, 255, 255, 0.08);
  --bone: #f4f1ea;
  --bone-dim: #b9bcc4;
  --bone-faint: #8a8f99;
  --ink-card: #161b25;
  --live: #34d399;
  --dev: #fbbf24;
  color: var(--bone);
}
.panel, .shot { background: #161b25; border-color: rgba(255, 255, 255, 0.08); }
.panel { box-shadow: 0 24px 64px rgba(24, 36, 70, 0.22); }
.shot { box-shadow: 0 24px 64px rgba(24, 36, 70, 0.22); }
.shot .pill-live, .panel .pill-live { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.shot .pill-dev { background: rgba(251, 191, 36, 0.13); color: #fbbf24; }
.shot-phone-wrap { background: none; border: none; box-shadow: none; }
.big-phone {
  background: linear-gradient(180deg, #181d28, #11151d);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 72px rgba(24, 36, 70, 0.28);
}
.phone-panel { background: linear-gradient(180deg, #181d28, #12161f); }