/* Theme B: light, vibrant, marketing-heavy.
   Inspired by modern SaaS landing pages: bright gradients, glass cards, big typography.
   Brand colour still comes from --brand-primary via brand.css.

   Loaded AFTER site.css — this file only overrides / adds on top of the base.
   It forces a light appearance regardless of system preference (marketing sites
   traditionally don't dark-mode — the brand has one canonical visual identity).
 */

:root {
  /* === theme-b color tokens === */
  --tb-bg: #f7f9fc;
  --tb-surface: #ffffff;
  --tb-surface-soft: #f0f4ff;
  --tb-ink: #0f172a;
  --tb-ink-soft: #475569;
  --tb-ink-faint: #94a3b8;
  --tb-line: #e2e8f0;
  --tb-line-soft: #f1f5f9;

  /* gradient stops — derived from brand primary via HSL-ish shifts */
  --tb-grad-1: var(--brand-primary, #3b5bff);
  --tb-grad-2: #7c3aed;
  --tb-grad-3: #06b6d4;

  --tb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.05);
  --tb-shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
  --tb-shadow-lg: 0 30px 60px -20px rgba(59, 91, 255, 0.25), 0 10px 30px -10px rgba(15, 23, 42, 0.1);

  --tb-radius-sm: 10px;
  --tb-radius: 16px;
  --tb-radius-lg: 24px;
  --tb-wrap: 1160px;
}

/* === reset & base overrides === */
body {
  background: var(--tb-bg);
  color: var(--tb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.container {
  max-width: var(--tb-wrap);
}

/* === navigation === */
.nav {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav { background: #fff; }
}
.nav-inner { max-width: var(--tb-wrap); padding: 16px var(--container-pad); }
.nav-brand { color: var(--tb-ink); }
.nav-link { color: var(--tb-ink-soft); font-weight: 500; }
.nav-link:hover { background: var(--tb-surface-soft); color: var(--tb-ink); }

/* theme-b: sign-in link in nav is de-emphasised; sign-up is the button */
.nav-actions .nav-link {
  color: var(--tb-ink-faint);
  font-size: 0.9rem;
}
.nav-actions .nav-link:hover { color: var(--tb-ink); background: transparent; }

.wordmark {
  font-size: 1.15rem;
  font-weight: 750;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wordmark-tagline {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tb-ink-faint);
  letter-spacing: 0.04em;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--tb-line);
}

.button {
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  border: none;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--tb-grad-2) 60%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--tb-grad-2) 70%, transparent);
  filter: brightness(1.05);
}
.button:active { transform: translateY(0); }

.button-secondary {
  background: #fff;
  color: var(--tb-ink);
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow-sm);
}
.button-secondary:hover {
  background: var(--tb-surface-soft);
  box-shadow: var(--tb-shadow-md);
  border-color: var(--tb-line);
  filter: none;
  color: var(--tb-ink);
}

.button-small { padding: 9px 18px; font-size: 0.88rem; }

/* === language switch === */
.lang-summary {
  background: #fff;
  border-color: var(--tb-line);
  color: var(--tb-ink-soft);
}
.lang-summary:hover { background: var(--tb-surface-soft); border-color: var(--tb-grad-1); color: var(--tb-ink); }
.lang-menu { background: #fff; border-color: var(--tb-line); box-shadow: var(--tb-shadow-md); }
.lang-option { color: var(--tb-ink-soft); }
.lang-option:hover { background: var(--tb-surface-soft); color: var(--tb-ink); }
.lang-option.is-current { background: var(--tb-surface-soft); color: var(--tb-ink); }

/* === hero === */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 85% -10%, color-mix(in srgb, var(--tb-grad-2) 18%, transparent), transparent 60%),
    radial-gradient(600px 400px at -5% 30%, color-mix(in srgb, var(--tb-grad-3) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #eef2ff 0%, var(--tb-bg) 100%);
  border-bottom: none;
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
}

.hero::before { display: none; }

.hero h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tb-ink);
  margin-bottom: 20px;
}

.hero .lead {
  font-size: 1.18rem;
  color: var(--tb-ink-soft);
  max-width: 60ch;
  line-height: 1.75;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(59, 91, 255, 0.2);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tb-grad-1);
  backdrop-filter: blur(8px);
}
.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.gradient-text {
  display: block;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--tb-grad-1) 0%, var(--tb-grad-2) 50%, var(--tb-grad-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 英文的三个口号比中文长得多（"No code · No hardware swap · One-click publish" 是
   中文那行字数的三倍），同一个字号在桌面会折成两行、还从词中间断。只压英文这一档字号，
   让它一行放得下；中文不动。html[lang] 选择器保证这规则只落在英文页上。 */
html[lang="en"] .gradient-text {
  font-size: 0.46em;
}

.cta-row { gap: 14px; margin: 32px 0 20px; }

/* === Hero with media (left copy, right image) === */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy { max-width: 100%; }
.hero-media {
  position: relative;
}
.hero-media-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(20, 40, 100, 0.25),
    0 10px 30px -10px rgba(20, 40, 100, 0.15);
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  line-height: 0;
}
.hero-media-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  border-radius: 16px;
  z-index: 2;
  pointer-events: none;
}
.hero-media-wrap img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* === Showcase blocks (alternating text + image) === */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.showcase-reverse .showcase-copy { order: 2; }
.showcase-reverse .showcase-media { order: 1; }

.showcase-copy h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--tb-ink);
}
.showcase-copy p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--tb-ink-soft);
  max-width: 50ch;
}

.showcase-media-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 48px -18px rgba(20, 40, 100, 0.22),
    0 8px 20px -8px rgba(20, 40, 100, 0.12);
  background: #fff;
  line-height: 0;
}
.showcase-media-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  border-radius: 14px;
  z-index: 2;
  pointer-events: none;
}
.showcase-media-wrap img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* responsive: stack on mobile */
@media (max-width: 860px) {
  .hero-grid,
  .showcase {
    grid-template-columns: 1fr;
  }
  .showcase-reverse .showcase-copy { order: initial; }
  .showcase-reverse .showcase-media { order: initial; }
  .hero-media { order: -1; }
}

.hero-note {
  font-size: 0.88rem;
  color: var(--tb-ink-faint);
  margin-top: 8px;
}

.offer-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 24px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(59, 91, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tb-ink-soft);
  max-width: fit-content;
}
.offer-line > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* hero stat row */
.hero-stats {
  display: grid;
  /* 现在是 hero-grid 下方整宽的一块：固定三列铺满容器，别再用 auto-fit——
     整宽下 auto-fit 会算出 5、6 列，三张卡只占半边，空出右半拉。 */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: 40px;
  border-top: 1px solid var(--tb-line);
}
/* 三个数字宽度差很多（"30 分钟" vs "100%" vs "0"），左对齐会显得七扭八歪，
   数字各自居中在它那格里、说明文字也跟着居中，才是这种统计条的正常样子。 */
.hero-stat {
  text-align: center;
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; gap: 28px; }
}
.hero-stat .stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-stat .stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--tb-ink-soft);
  line-height: 1.4;
}

/* === sections === */
.section { padding: clamp(72px, 9vw, 116px) 0; }
.section-soft { background: #fff; }
.section-tint {
  background:
    radial-gradient(600px 300px at 20% 0%, color-mix(in srgb, var(--tb-grad-1) 8%, transparent), transparent),
    var(--tb-bg);
}
.section-cta {
  background:
    radial-gradient(800px 400px at 50% 120%, color-mix(in srgb, var(--tb-grad-2) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #fff 0%, #eef2ff 100%);
  border-top: 1px solid var(--tb-line);
}

/* === 三层结构那一节的三张例卡 ===
   "它是一层界面，不是一套电视系统"这句本身已经说完了，下面再画一张分层图就是把同一句话
   换个形式再说一遍，等于重复。所以这里不给结论、给例子：这一层上你实际会改的三件事。
   三件事各自都停在表面（一张图、一个入口、一句话）——直播点播和硬件不在里面，
   这个结论让读者自己得出，比我们再宣告一遍有力。 */
.layer-copy {
  text-align: center;
}
.layer-copy p {
  font-size: 1.05rem;
  color: var(--tb-ink-soft);
  max-width: 60ch;
  margin: 16px auto 0;
}
.layer-examples {
  margin-top: 52px;
}
.layer-examples-title {
  text-align: center;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tb-ink-soft);
  margin-bottom: 24px;
}
/* 比功能卡轻一档：没有图标、正文一行，读起来是"顺带举的三个例子"，不是第二个功能区 */
.layer-examples .card {
  padding: 24px 26px;
}
.layer-examples .card h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.layer-examples .card p {
  font-size: 0.97rem;
  margin: 0;
}

.section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--tb-ink);
  margin-bottom: 16px;
}
.section h2 + p { color: var(--tb-ink-soft); font-size: 1.05rem; }

.section > .container > h2::before,
.section-cta > .container > h2::before { display: none; }

/* === benefit cards (large, soft glass) === */
.card {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--tb-radius-lg);
  background: #fff;
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tb-grad-1), var(--tb-grad-2));
  opacity: 0;
  transition: opacity .25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tb-shadow-lg);
  border-color: transparent;
}
.card:hover::before { opacity: 1; }

.card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tb-ink);
  margin-bottom: 12px;
}
.card p { color: var(--tb-ink-soft); line-height: 1.7; }

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.grid-features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

/* icon badge for features */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tb-grad-1) 15%, #fff), color-mix(in srgb, var(--tb-grad-2) 15%, #fff));
  margin-bottom: 20px;
  font-size: 22px;
}

/* === pricing === */
.billing-toggle {
  background: #fff;
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow-sm);
  margin-bottom: 48px;
  font-size: 0.95rem;
}
.billing-toggle label { color: var(--tb-ink-soft); padding: 10px 28px; font-weight: 500; }
.billing-toggle input[type="radio"]:checked + label { color: var(--tb-ink); font-weight: 600; }
.billing-toggle-track {
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tb-grad-2) 50%, transparent);
}

.pricing-grid { gap: 28px; }

.tier {
  position: relative;
  padding: 36px 30px;
  border-radius: var(--tb-radius-lg);
  background: #fff;
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--tb-shadow-lg); border-color: transparent; }

.tier-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2)) border-box;
  box-shadow: 0 20px 50px -15px color-mix(in srgb, var(--tb-grad-2) 30%, transparent), var(--tb-shadow-sm);
  transform: translateY(-8px);
}
.tier-featured:hover { transform: translateY(-12px); }

.tier-badge {
  top: -14px;
  padding: 6px 18px;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--tb-grad-2) 60%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tier h3 { font-size: 1.3rem; font-weight: 700; color: var(--tb-ink); }

.price { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.price-value {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--tb-ink), var(--tb-ink-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.price-period { color: var(--tb-ink-soft); font-size: 0.92rem; }
.price-was { color: var(--tb-ink-faint); font-size: 1rem; }
.price-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, #22c55e 12%, #fff), color-mix(in srgb, #16a34a 12%, #fff));
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
}

.tier-devices { color: var(--tb-ink-soft); font-size: 0.95rem; margin-bottom: 8px; }

.tier-features { margin: 16px 0 20px; }
.tier-features li {
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--tb-line-soft);
  color: var(--tb-ink-soft);
  font-size: 0.93rem;
}
.tier-features li:last-child { border-bottom: 0; }
.tier-features li::before {
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
}
.tier-features li::after {
  left: 4px;
  top: 13px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.tier .button { width: 100%; }

/* tier region label (subtle, bottom of card) */
.tier-region {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--tb-line-soft);
  font-size: 0.78rem;
  color: var(--tb-ink-faint);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.pricing-footnote {
  text-align: center;
  margin-top: 32px;
  color: var(--tb-ink-faint);
  font-size: 0.9rem;
}

.pricing-region-note {
  text-align: center;
  margin-top: 8px;
  color: var(--tb-ink-faint);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* === list (bulleted) === */
.list { color: var(--tb-ink-soft); padding-left: 24px; }
.list li { margin-bottom: 10px; }
.list li::marker { color: var(--tb-grad-1); }

/* === steps === */
.steps { color: var(--tb-ink-soft); padding-left: 0; margin-top: 16px; counter-reset: step; list-style: none; display: grid; gap: 16px; }
.steps li {
  position: relative;
  padding: 16px 20px 16px 60px;
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tb-grad-1), var(--tb-grad-2));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
}

/* === product showcase (alternating text + screenshot) === */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.product-showcase.reverse {
  grid-template-columns: 1.2fr 1fr;
}
.product-showcase.reverse .showcase-text { order: 2; }
.product-showcase.reverse .showcase-media { order: 1; }

.showcase-text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--tb-ink);
}
.showcase-text p {
  font-size: 1.02rem;
  color: var(--tb-ink-soft);
  line-height: 1.75;
  margin-bottom: 20px;
}

.showcase-media {
  position: relative;
}
.showcase-media img {
  width: 100%;
  height: auto;
  display: block;
}

.demo-media {
  position: relative;
  border-radius: var(--tb-radius-lg);
  overflow: hidden;
  box-shadow: var(--tb-shadow-lg);
  border: 1px solid var(--tb-line);
  background: #fff;
}
.demo-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .product-showcase,
  .product-showcase.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product-showcase.reverse .showcase-text { order: 0; }
  .product-showcase.reverse .showcase-media { order: 0; }
}

/* === docs === */
.doc-item { padding: 24px 0; border-bottom: 1px solid var(--tb-line); }
.doc-item a { font-weight: 650; color: var(--tb-ink); font-size: 1.1rem; }
.doc-item a:hover { color: var(--tb-grad-1); }
.doc-item p { color: var(--tb-ink-soft); font-size: 0.95rem; margin-top: 6px; }

.note-banner {
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
}

/* 正文里的图（与 theme A 同一条规矩：不加装饰，截图是证据） */
figure { margin: 28px 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: #fff; }
figure figcaption { margin-top: 10px; color: var(--tb-ink-soft); font-size: 0.9rem; }

/* === prose (docs/legal) === */
.prose h1 { color: var(--tb-ink); font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.prose h2 { color: var(--tb-ink); font-size: 1.5rem; }
.prose ul, .prose ol { color: var(--tb-ink-soft); }
.prose blockquote {
  background: var(--tb-surface-soft);
  border-left: 4px solid var(--tb-grad-1);
  color: var(--tb-ink-soft);
}
.prose pre {
  background: #f8fafc;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
}

/* === footer === */
.footer {
  background: #fff;
  border-top: 1px solid var(--tb-line);
  margin-top: 0;
  padding: clamp(48px, 7vw, 72px) 0 clamp(36px, 5vw, 48px);
}
.footer-grid { max-width: var(--tb-wrap); gap: 32px; }
.footer-column h2 { font-size: 0.8rem; color: var(--tb-ink-faint); font-weight: 700; }
.footer-column a { color: var(--tb-ink-soft); }
.footer-column a:hover { color: var(--tb-grad-1); }
.footer-note { border-top: 1px solid var(--tb-line); padding-top: 24px; color: var(--tb-ink-faint); }
.footer-rights { color: var(--tb-ink-faint); }

/* === contact facts === */
.facts { gap: 24px; }
.facts dt { color: var(--tb-ink); font-weight: 700; }
.facts dd { color: var(--tb-ink-soft); }

/* === narrow screens === */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .hero { padding: clamp(48px, 12vw, 72px) 0 clamp(36px, 8vw, 56px); }
  .section { padding: 56px 0; }
  .tier-featured { transform: none; }
  .tier-featured:hover { transform: translateY(-4px); }
  .price-value { font-size: 2.2rem; }
  .hero-stats { gap: 16px; margin-top: 40px; padding-top: 28px; }
  .hero-stat .stat-num { font-size: 1.8rem; }
  .grid { gap: 20px; }
  .card { padding: 24px 22px; }
  .tier { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .button:hover, .card:hover, .tier:hover { transform: none; }
}

/* === Force light appearance in dark mode ===
   Marketing site always shows the light brand identity — never auto-switches to dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: var(--tb-ink);
    --ink-soft: var(--tb-ink-soft);
    --ink-faint: var(--tb-ink-faint);
    --line: var(--tb-line);
    --line-soft: var(--tb-line-soft);
    --surface: #fff;
    --surface-soft: var(--tb-surface-soft);
    --surface-raised: #fff;
    --accent-tint: color-mix(in srgb, var(--accent) 9%, #fff);
    --accent-tint-strong: color-mix(in srgb, var(--accent) 16%, #fff);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 30px 60px -20px rgba(59, 91, 255, 0.25), 0 10px 30px -10px rgba(15, 23, 42, 0.1);
  }
  body { background: var(--tb-bg); color: var(--tb-ink); }
  .nav { background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
  .nav-brand { color: var(--tb-ink); }
  .nav-link { color: var(--tb-ink-soft); }
  .footer { background: #fff; border-top: 1px solid var(--tb-line); }
  .footer-note { border-top: 1px solid var(--tb-line); }
  .section-soft { background: #fff; }
  .note-banner { background: #fff; border: 1px solid var(--tb-line); }
}