:root {
  --tg-bg:      #0e1621;
  --tg-surface: #17212b;
  --tg-bot:     #182533;
  --tg-user:    #2b5278;
  --tg-code-bg: rgba(255,255,255,0.07);
  --tg-pre-bg:  rgba(0,0,0,0.25);
  --tg-header-border: rgba(255,255,255,0.04);
}

/* ── Page layout ── */
/* h1 rules scoped to .page-hero — keeps the marketing-page h1 styling
   from leaking onto any other h1 on the site. */
.page-hero { max-width: 720px; margin: 0 auto; padding: 5rem 2rem 3rem; }
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 2rem;
}
.page-hero h1 em { font-style: normal; color: var(--red); }

/* ── Example rows ── */
.examples { max-width: 1080px; margin: 0 auto; padding: 4rem 2rem 6rem; display: flex; flex-direction: column; gap: 5rem; }
.example { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.example.flip { direction: rtl; }
.example.flip > * { direction: ltr; }
.example-info { padding-top: 1rem; }
.example-tag { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 4px; padding: 0.2rem 0.6rem; margin-bottom: 1rem; }
.example-info h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 0.6rem; line-height: 1.3; }
.example-info p { font-size: 0.9rem; color: var(--muted); font-weight: 300; line-height: 1.65; }
@media (max-width: 780px) {
  .example { grid-template-columns: 1fr; gap: 1.5rem; }
  .example.flip { direction: ltr; }
}

/* ── Telegram chat window ── */
.tg-window {
  background: var(--tg-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
}
.tg-header {
  background: var(--tg-surface);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--tg-header-border);
}
.tg-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tg-avatar svg { width: 18px; height: 24px; }
.tg-header-text { display: flex; flex-direction: column; gap: 1px; }
.tg-name { font-size: 0.875rem; font-weight: 600; color: #e8f0f8; line-height: 1; }
.tg-status { font-size: 0.72rem; color: #4db6ac; }
.tg-body { padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }

/* ── Bubbles ── */
.bubble { max-width: 88%; font-size: 0.875rem; line-height: 1.55; position: relative; }
.bubble-bot {
  align-self: flex-start;
  background: var(--tg-bot);
  color: #c8d8e8;
  border-radius: 4px 14px 14px 14px;
  padding: 9px 12px 6px;
}
.bubble-user {
  align-self: flex-end;
  background: var(--tg-user);
  color: #e0ecf8;
  border-radius: 14px 4px 14px 14px;
  padding: 9px 12px 6px;
}
.bubble strong { color: #e8f4ff; font-weight: 600; }
.bubble em { font-style: normal; color: #7a9ab8; }
.bubble code {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  background: var(--tg-code-bg);
  border-radius: 3px;
  padding: 1px 4px;
}
.bubble pre {
  font-family: 'DM Mono', monospace;
  font-size: 0.77rem;
  line-height: 1.7;
  background: var(--tg-pre-bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
  white-space: pre;
  color: #a0c0d8;
}
.bubble-time { font-size: 0.67rem; color: #3d5a6e; text-align: right; margin-top: 3px; }

/* ── Footer override for examples ── */
.footer-links { margin-top: 0.75rem; display: flex; justify-content: center; gap: 1.5rem; }
.footer-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--text); }

/* ── Light-mode Telegram mockup overrides ── */
body.light-mode {
  --tg-bg:      #d4dde8;
  --tg-surface: #c2cdd8;
  --tg-bot:     #ffffff;
  --tg-user:    #5b8ac4;
  --tg-code-bg: rgba(0,0,0,0.07);
  --tg-pre-bg:  rgba(0,0,0,0.06);
  --tg-header-border: rgba(0,0,0,0.08);
}
body.light-mode .tg-window {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08);
}
body.light-mode .tg-name { color: #1a1a1a; }
body.light-mode .tg-status { color: #2e8b57; }
body.light-mode .bubble-bot { color: #1a1a1a; }
body.light-mode .bubble-user { color: #ffffff; }
body.light-mode .bubble strong { color: #1a1a1a; }
body.light-mode .bubble-user strong { color: #ffffff; }
body.light-mode .bubble em { color: #555; }
body.light-mode .bubble-user em { color: #ddeeff; }
body.light-mode .bubble pre { color: #2a4a6a; }
body.light-mode .bubble-time { color: #667; }