:root {
  --fa: 47px;
  --fb: 37px;
  --fc: 29px;
  --fd: 23px;
  --fe: 18px;
  --ff: 14px;
  --ga: 73px;
  --gb: 59px;
  --gc: 47px;
  --gd: 38px;
  --ge: 31px;
  --gf: 25px;
  --xa: 50px;
  --xb: 31px;
  --xc: 19px;
  --xd: 12px;
  --xe: 7px;
  --xf: 4px;
  --fx: 76.048px;
  --gx: 95.464px;
  --fy: 59.867px;
  --pm-red: #de0404;
  --pm-yellow: #ffdf38;
  --pm-black: #2c1810;
  --pm-red-glow: rgba(222, 4, 4, 0.25);
  --pm-yellow-glow: rgba(255, 223, 56, 0.2);
  --font-display: "IBM Plex Mono", serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --icon-bg: var(--pm-yellow);
  --card-hover-shadow: 0 7px 31px rgba(222, 4, 4, 0.12);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); }

[data-theme="dark"] {
  --color-bg: #0c0a09;
  --color-surface: #1c1917;
  --color-surface-elevated: #292524;
  --color-border: #44403c;
  --color-border-subtle: #292524;
  --color-text: #fafaf9;
  --color-text-muted: #a8a29e;
  --color-text-subtle: #78716c;
  --color-accent: #f97316;
  --color-accent-soft: rgba(249, 115, 22, 0.12);
  --color-accent-glow: rgba(249, 115, 22, 0.35);
  --color-standout: var(--pm-yellow);
  --nav-bg: rgba(12, 10, 9, 0.85);
  --avatar-bg: var(--pm-red);
  --avatar-color: var(--pm-yellow);
  --gradient-red: rgba(222, 4, 4, 0.08);
  --gradient-yellow: rgba(255, 223, 56, 0.04);
  --grid-color: rgba(255, 223, 56, 0.02);
  --code-key: #f472b6;
  --code-string: #a5d6ff; }

[data-theme="light"] {
  --color-bg: #fffbf7;
  --color-surface: white;
  --color-surface-elevated: #fff7f0;
  --color-border: #f5d5c0;
  --color-border-subtle: #fae8db;
  --color-text: var(--pm-black);
  --color-text-muted: #6b4c3a;
  --color-text-subtle: #9a7560;
  --color-accent: #e63900;
  --color-accent-soft: rgba(222, 4, 4, 0.08);
  --color-accent-glow: rgba(222, 4, 4, 0.25);
  --color-standout: var(--pm-red);
  --nav-bg: rgba(255, 251, 247, 0.92);
  --avatar-bg: var(--pm-yellow);
  --avatar-color: var(--pm-red);
  --gradient-red: rgba(222, 4, 4, 0.06);
  --gradient-yellow: rgba(255, 180, 50, 0.12);
  --grid-color: rgba(222, 4, 4, 0.04);
  --code-key: #c41d00;
  --code-string: #0c5a8a; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 31px;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease; }

.bg-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--gradient-red), transparent), radial-gradient(ellipse 60% 40% at 80% 60%, var(--gradient-yellow), transparent);
  transition: background 0.3s ease; }

.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%); }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 31px;
  flex-wrap: wrap;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--xc));
  padding: 19px 31px;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color 0.3s ease, border-color 0.3s ease; }

.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none; }
  .nav-logo svg {
    width: 38px;
    height: 38px;
    border-radius: 100%; }
    .nav-logo:hover svg {
      transform: scale(1.1);
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 38px;
  font-weight: 700;
  color: var(--color-text);
  transition: color 0.3s ease; }

.nav-links {
  display: flex;
  gap: 31px;
  list-style: none; }
  .nav-links a {
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--color-text-muted); }
    .nav-links a:hover {
      color: var(--pm-red); }
    [data-theme="dark"] .nav-links a {
      color: var(--color-text-muted); }
      [data-theme="dark"] .nav-links a:hover {
        color: var(--pm-yellow); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px; }

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden; }
  .theme-toggle:hover {
    background: var(--color-surface);
    border-color: var(--pm-red);
    transform: translateY(-1px); }
  .theme-toggle svg {
    width: 23px;
    height: 23px;
    position: absolute;
    transition: all 0.3s var(--ease-out-expo); }
  .theme-toggle .sun-icon {
    color: var(--pm-yellow);
    opacity: 1;
    transform: rotate(0deg) scale(1); }
    [data-theme="light"] .theme-toggle .sun-icon {
      opacity: 0;
      transform: rotate(90deg) scale(0.5); }
  .theme-toggle .moon-icon {
    color: var(--color-text-muted);
    opacity: 0;
    transform: rotate(90deg) scale(0.5); }
    [data-theme="light"] .theme-toggle .moon-icon {
      opacity: 1;
      transform: rotate(0deg) scale(1); }

.nav-cta {
  background: var(--pm-red);
  color: white;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 19px var(--pm-red-glow); }
  [data-theme="dark"] .nav-cta {
    color: white; }

section {
  position: relative;
  z-index: 1;
  padding: var(--gx) 31px; }

.section-container {
  max-width: 1200px;
  margin: 0 auto; }

.centered-header {
  text-align: center;
  margin: 0 auto 50px; }

.section-label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pm-yellow);
  margin-bottom: 19px; }
  [data-theme="light"] .section-label {
    color: var(--pm-red); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fb), 4vw, var(--fa));
  line-height: clamp(var(--fa), 5.5vw, var(--gb));
  font-weight: 700;
  margin-bottom: 19px; }

.section-subtitle {
  font-size: 23px;
  line-height: 38px;
  color: var(--color-text-muted);
  max-width: 700px; }
  .centered-header .section-subtitle {
    margin: 0 auto; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 19px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none; }
  .btn.btn-primary {
    background: var(--pm-red);
    color: white; }
    .btn.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 19px var(--pm-red-glow); }
  .btn.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border); }
    .btn.btn-secondary:hover {
      background-color: var(--pm-yellow);
      color: var(--pm-black);
      border-color: var(--pm-red); }

.standout {
  color: var(--color-standout); }

@keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(30px); }


    to {
    opacity: 1;
    transform: translateY(0); }
 }
@keyframes fadeIn {
    from {
    opacity: 0; }


    to {
    opacity: 1; }
 }
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 6rem;
  z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(222, 4, 4, 0.1), rgba(255, 223, 56, 0.08));
  border: 1px solid rgba(255, 223, 56, 0.15);
  padding: 7px 19px;
  border-radius: 31px;
  font-size: 14px;
  line-height: 25px;
  font-weight: 600;
  color: var(--pm-yellow);
  margin-bottom: 31px;
  animation: fadeInUp 0.8s var(--ease-out-expo) both;
  text-transform: uppercase;
  letter-spacing: 0.05em; }
  [data-theme="light"] .hero-badge {
    background: linear-gradient(135deg, rgba(222, 4, 4, 0.1), rgba(255, 140, 50, 0.12));
    border-color: rgba(222, 4, 4, 0.2);
    color: var(--pm-red); }

.hero-badge-icon {
  font-size: 18px; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fa), 7vw, var(--fx));
  line-height: clamp(var(--gb), 8.5vw, var(--gx));
  font-weight: 700;
  background: linear-gradient(135deg, var(--pm-red), var(--color-accent), var(--pm-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 31px;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.1s both; }
  [data-theme="light"] .hero-title {
    background: linear-gradient(135deg, var(--pm-red), #ff6b2c, #ff9500);
    -webkit-background-clip: text;
    background-clip: text; }

.hero-subtitle {
  margin-bottom: 50px;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s both; }

.hero-actions {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.3s both; }

.hero-values {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 50px;
  padding-top: 31px;
  border-top: 1px solid var(--color-border-subtle);
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.5s both;
  flex-wrap: wrap; }

.hero-value {
  display: flex;
  align-items: center;
  gap: 12px; }

.hero-value-icon {
  width: 47px;
  height: 47px;
  background: var(--icon-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.4); }

.hero-value-text {
  font-weight: 600; }

.hero-value-sub {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }

.opportunity {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }

.opportunity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276.75px, 1fr));
  gap: 31px;
  margin-top: 50px; }

.opportunity-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 19px;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease; }
  .opportunity-card:hover {
    transform: translateY(-4px);
    border-color: var(--pm-red); }
    [data-theme="light"] .opportunity-card:hover {
      box-shadow: var(--card-hover-shadow); }

.opportunity-card-icon {
  width: 47px;
  height: 47px;
  background: var(--icon-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin: 0 auto 19px auto;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.4); }

.opportunity-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 31px;
  text-align: center;
  margin: 0 -12px 12px -12px; }

.opportunity-card-text {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }

.architecture {
  background: var(--color-bg); }

.architecture-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 50px; }

.architecture-visual {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 19px;
  position: relative;
  overflow: hidden; }

.architecture-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pm-red), var(--pm-yellow)); }

.code-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--color-border-subtle); }

.code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%; }

.code-dot:nth-child(1) {
  background: #ef4444; }

.code-dot:nth-child(2) {
  background: #eab308; }

.code-dot:nth-child(3) {
  background: #22c55e; }

.code-title {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 25px;
  color: var(--color-text-muted);
  margin-left: 12px; }

.code-block {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 25px;
  color: var(--color-text-muted);
  overflow-x: auto; }
  .code-block .key {
    color: var(--code-key); }
  .code-block .string {
    color: var(--code-string); }
  .code-block .comment {
    color: var(--color-text-subtle);
    font-style: italic; }
  .code-block .bracket {
    color: var(--pm-yellow); }
    [data-theme="light"] .code-block .bracket {
      color: var(--pm-red); }

.architecture-features {
  display: flex;
  flex-direction: column;
  gap: 31px; }

.arch-feature {
  display: flex;
  gap: 19px; }

.arch-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 47px;
  height: 47px;
  font-size: 23px;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
  background: var(--icon-bg);
  border-radius: 12px; }

.arch-feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 31px;
  margin-bottom: 4px; }

.arch-feature-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 25px; }

.workflow {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }

.workflow-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 25px;
  background: rgba(255, 223, 56, 0.08);
  border: 1px solid rgba(255, 223, 56, 0.15);
  padding: 7px 19px;
  border-radius: 12px;
  color: var(--pm-yellow);
  margin-top: 31px; }
  [data-theme="light"] .workflow-note {
    background: linear-gradient(135deg, rgba(222, 4, 4, 0.08), rgba(255, 140, 50, 0.1));
    border-color: rgba(222, 4, 4, 0.2);
    color: #b91c00; }

.workflow-note-icon {
  font-size: 18px; }

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  position: relative; }
  .workflow-steps:before {
    content: '';
    position: absolute;
    top: 50px;
    left: calc(16.66% + 30px);
    right: calc(16.66% + 30px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-border), var(--pm-red), var(--pm-yellow), var(--color-border)); }
    [data-theme="light"] .workflow-steps:before {
      background: linear-gradient(90deg, var(--color-border), var(--pm-red), #ff8c32, var(--color-border)); }

.workflow-step {
  text-align: center;
  position: relative; }

.step-number {
  width: 56px;
  height: 56px;
  background: var(--color-bg);
  border: 2px solid var(--pm-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  color: var(--pm-red);
  margin: 0 auto 19px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease; }
  .workflow-step:hover .step-number {
    background: var(--pm-red);
    color: white;
    box-shadow: 0 0 31px var(--pm-red-glow); }

.step-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 31px;
  font-weight: 700;
  margin-bottom: 7px; }

.step-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 25px; }

.step-time {
  display: inline-block;
  background: rgba(222, 4, 4, 0.1);
  color: var(--pm-red);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 25px;
  margin-top: 19px; }

.capabilities {
  background: var(--color-bg); }

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 31px; }

.capability-card {
  background: var(--color-surface);
  padding: 31px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease; }
  .capability-card:hover {
    transform: translateY(-3px);
    border-color: var(--pm-red); }
    [data-theme="light"] .capability-card:hover {
      box-shadow: var(--card-hover-shadow); }

.capability-header {
  display: flex;
  gap: 19px;
  align-items: center;
  margin-bottom: 19px; }

.capability-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--fy);
  height: var(--fy);
  font-size: 29px;
  background: var(--icon-bg);
  border-radius: 12px;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.4); }

.capability-title {
  font-family: var(--font-display);
  font-weight: 700; }

.capability-text {
  color: var(--color-text-muted); }

.developers {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }

.developers-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  margin-top: 50px; }

.developers-text {
  color: var(--color-text-muted); }
  .developers-text h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 19px; }
  .developers-text p {
    margin-bottom: 19px; }
  .developers-text code {
    background: var(--color-bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.85em;
    color: var(--pm-yellow); }
    [data-theme="light"] .developers-text code {
      color: var(--pm-red); }

.developers-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 31px;
  margin-top: 50px; }

.dev-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.dev-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  font-size: 18px;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
  background: var(--icon-bg);
  border-radius: 7px; }

.dev-benefit-text {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }
  .dev-benefit-text strong {
    display: block;
    font-family: "IBM Plex Mono", serif;
    font-size: 18px;
    line-height: 31px;
    color: var(--color-text);
    margin-bottom: 4px; }

.valet-demo {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  overflow: hidden; }

.valet-demo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface-elevated);
  padding: 12px 19px;
  border-bottom: 1px solid var(--color-border-subtle); }

.valet-demo-tab {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1em;
  font-weight: 700;
  padding: 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none; }
  .valet-demo-tab:hover {
    color: var(--color-text); }
  .valet-demo-tab.active {
    background: var(--pm-red);
    color: white; }

.valet-demo-panel {
  display: none;
  padding: 19px 19px 12px 19px;
  animation: fadeIn 0.3s ease; }
  .valet-demo-panel.active {
    display: block; }

.valet-demo-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 7px;
  padding: 19px; }

.valet-demo-result-label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pm-yellow);
  margin-bottom: 12px; }
  [data-theme="light"] .valet-demo-result-label {
    color: var(--pm-red); }

.valet-demo-explanation {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted);
  margin-top: 12px; }

.mock-form {
  display: flex;
  flex-direction: column;
  gap: 19px; }

.mock-input {
  font-family: var(--font-display);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 7px;
  padding: 7px; }

.mock-input-label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px; }

.mock-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 7px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 7px; }

.mock-select-arrow {
  color: var(--color-text-muted); }

.mock-button {
  align-self: baseline;
  font-weight: 600;
  color: white;
  background: var(--pm-red);
  padding: 7px 12px;
  border: none;
  border-radius: 7px;
  cursor: default; }

.testimonials {
  background: var(--color-bg); }

.testimonials-header {
  text-align: center;
  margin: 0 auto 3.5rem; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 31px; }

.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 19px; }

.testimonial-text {
  color: var(--color-text);
  margin-bottom: 12px; }
  .testimonial-text em {
    font-style: normal;
    font-weight: 600;
    color: var(--pm-yellow); }
    [data-theme="light"] .testimonial-text em {
      color: #c41d00;
      background: linear-gradient(135deg, rgba(222, 4, 4, 0.08), rgba(255, 140, 50, 0.08));
      padding: 2px 4px;
      border-radius: 4px; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px; }

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  color: var(--avatar-color);
  background: var(--avatar-bg);
  border-radius: 50%; }

.testimonial-name {
  font-weight: 600; }

.testimonial-role {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }

.gain {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }

.gain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 31px; }

.gain-card {
  text-align: center;
  background: var(--color-bg);
  padding: 19px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease; }
  .gain-card:hover {
    transform: translateY(-4px);
    border-color: var(--pm-yellow); }
    [data-theme="light"] .gain-card:hover {
      border-color: #ff6b2c;
      box-shadow: 0 8px 30px rgba(255, 107, 44, 0.15); }

.gain-card-icon {
  font-size: 47px;
  line-height: 1em;
  margin-bottom: 19px; }

.gain-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 12px; }

.gain-card-text {
  color: var(--color-text-muted); }

.creator {
  background: var(--color-bg); }

.creator-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 19px;
  padding: 31px; }

.creator-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 19px; }

.creator-desc {
  max-width: 700px;
  color: var(--color-text-muted);
  margin-bottom: 31px; }

.creator-visual {
  font-size: var(--gx);
  line-height: 1em;
  opacity: 0.9;
  filter: grayscale(20%); }

.cta {
  background: var(--color-bg);
  text-align: center; }
  .creator + .cta {
    padding-top: 0; }

.cta-container {
  position: relative;
  background: linear-gradient(135deg, rgba(222, 4, 4, 0.12), rgba(255, 223, 56, 0.06));
  padding: 50px 19px;
  border: 1px solid rgba(222, 4, 4, 0.2);
  border-radius: 19px;
  overflow: hidden; }
  [data-theme="light"] .cta-container {
    background: linear-gradient(135deg, rgba(222, 4, 4, 0.08), rgba(255, 140, 50, 0.1), rgba(255, 200, 100, 0.08));
    border-color: rgba(222, 4, 4, 0.25); }
  .cta-container:before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle at 30% 30%, rgba(222, 4, 4, 0.08), transparent 40%), radial-gradient(circle at 70% 70%, rgba(255, 223, 56, 0.05), transparent 40%);
    animation: drift 25s ease-in-out infinite; }

.cta-content {
  position: relative;
  z-index: 1; }

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fb), 3.5vw, var(--fa));
  line-height: clamp(var(--gb), 5.5vw, var(--ga));
  font-weight: 700;
  margin-bottom: 19px; }

.cta-subtitle {
  max-width: 600px;
  margin: 0 auto 31px auto; }

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 19px;
  flex-wrap: wrap; }

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 31px;
  background: var(--color-surface);
  padding: 31px 31px;
  border-top: 1px solid var(--color-border-subtle); }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px; }
  .footer-logo svg {
    width: 38px;
    height: 38px; }

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 38px;
  font-weight: 700; }

.footer-links {
  display: flex;
  gap: 12px 31px;
  flex-wrap: wrap; }
  .footer-links a {
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--color-text-muted); }
    .footer-links a:hover {
      color: var(--pm-red); }
    [data-theme="dark"] .footer-links a {
      color: var(--color-text-muted); }
      [data-theme="dark"] .footer-links a:hover {
        color: var(--pm-yellow); }

.footer-copy {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 25px; }

.footer-tagline {
  color: var(--color-text-muted); }

@media (max-width: 1091px) {
  .nav-cta {
    display: none; } }

@media (max-width: 1024px) {
  .architecture-content,
  .capabilities-grid,
  .developers-content,
  .testimonials-grid {
    grid-template-columns: 1fr; }

  .gain-grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 917px) {
  .nav-links {
    display: none; }

  .nav-cta {
    display: block; } }

@media (max-width: 768px) {
  section,
  .nav {
    padding-left: 19px;
    padding-right: 19px; }

  .hero {
    padding-top: 7rem;
    padding-bottom: 4rem; }

  .section-subtitle {
    font-size: 18px;
    line-height: 31px; }

  .hero-subtitle {
    margin-bottom: 31px; }

  .hero-values {
    flex-direction: column;
    gap: 31px;
    align-items: center; }

  .workflow-steps,
  .developers-benefits,
  .gain-grid {
    grid-template-columns: 1fr; }

    .workflow-steps:before {
      display: none; }

  .step-number {
    margin-bottom: 12px; }

  .capability-card {
    padding: 19px; }

  .creator-content,
  .footer {
    flex-direction: column;
    text-align: center; }

  .footer-links {
    justify-content: center; } }

@media (max-width: 455px) {
  .nav-cta {
    display: none; } }

h1 {
  font-family: "IBM Plex Mono", serif;
  font-size: 37px;
  line-height: 59px; }

h2 {
  font-family: "IBM Plex Mono", serif;
  font-size: 29px;
  line-height: 47px; }

h3 {
  font-family: "IBM Plex Mono", serif;
  font-size: 23px;
  line-height: 38px; }

h4 {
  font-family: "IBM Plex Mono", serif;
  font-size: 18px;
  line-height: 31px; }

a {
  color: var(--pm-red);
  text-decoration: none; }
  [data-theme="dark"] a {
    color: var(--pm-yellow); }
  p a,
  .page-content a {
    text-decoration: underline; }
    p a.button,
    .page-content a.button {
      text-decoration: none; }

blockquote {
  color: var(--color-text);
  padding-left: 19px;
  border-left: 7px solid rgba(0, 0, 0, 0.1); }
  [data-theme="dark"] blockquote {
    border-left: 7px solid rgba(255, 255, 255, 0.25); }
  blockquote > :last-child {
    margin-bottom: 0; }

sub,
sup {
  color: #9a7560; }

kbd {
  font-size: 14px;
  color: #4e4e4e;
  background-color: #f7f7f7;
  padding: 4px 7px;
  border: 1px solid #cccccc;
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px white inset;
  margin: 0 1px; }

svg {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom; }

hr {
  margin: 31px 0;
  border-width: 0 0 1px 0;
  border-style: dotted;
  border-color: rgba(0, 0, 0, 0.25); }
  [data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.25); }

.drop-cap {
  font-size: 62px;
  line-height: 1em;
  font-weight: bold;
  margin-right: 7px;
  float: left; }

.small {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }

.callout {
  padding: 19px;
  color: var(--color-text);
  background-color: rgba(79, 225, 162, 0.3); }
  [data-theme="dark"] .callout {
    background-color: rgba(79, 225, 162, 0.2);
    border: 1px solid rgba(79, 225, 162, 0.35); }
  .callout.alert {
    background-color: rgba(255, 237, 15, 0.3); }
    [data-theme="dark"] .callout.alert {
      background-color: rgba(255, 237, 15, 0.15);
      border: 1px solid rgba(255, 237, 15, 0.35); }
  .callout.note {
    background-color: rgba(79, 177, 225, 0.3); }
    [data-theme="dark"] .callout.note {
      background-color: rgba(79, 177, 225, 0.2);
      border: 1px solid rgba(79, 177, 225, 0.35); }
  .callout > :last-child {
    margin-bottom: 0; }

.highlight {
  background-color: #fffb7a;
  padding: 4px 0; }
  [data-theme="dark"] .highlight {
    background-color: rgba(255, 251, 122, 0.3); }

.impact {
  font-size: 23px;
  line-height: 38px;
  color: var(--color-text); }

.center {
  float: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto; }

.pop {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); }

.caption {
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted);
  margin-top: -26px; }
  .caption code {
    font-size: 13px; }
  .center + .caption {
    text-align: center; }
  blockquote + .caption {
    padding-left: 26px; }
  h1 + .caption,
  h2 + .caption {
    margin-top: -28px; }
  h3 + .caption {
    margin-top: -17.5px;
    margin-bottom: 19px; }

@media all and (min-width: 738px) {
  body h1 {
      font-size: 47px;
      line-height: 73px; }
    body h2 {
      font-size: 37px;
      line-height: 59px; }
    body h3 {
      font-size: 29px;
      line-height: 47px; }
    body h4 {
      font-size: 23px;
      line-height: 38px; }
    body h1 + .caption,
    body h2 + .caption {
      margin-top: -26px; }
    body h3 + .caption {
      margin-top: -16px; }

  .impact {
    font-size: 29px;
    line-height: 47px; }

  .left:not(.bar) {
    float: left;
    clear: both;
    margin-right: 31px; }

  .right:not(.bar) {
    float: right;
    clear: both;
    margin-left: 31px; } }

.menu {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .menu::-webkit-scrollbar {
    display: none; }
  .menu li {
    margin-bottom: 0; }
    .menu li:last-child {
      margin-right: 0; }
  .menu a {
    display: block; }
  .menu:before {
    content: '\2194';
    color: #9a7560; }
  @media all and (min-width: 738px) {
    .menu {
  justify-content: center; }
    .menu:before {
      display: none; } }

.bleed:has(+.bleed) {
  border-bottom: 0; }

#content {
  padding-top: 50px;
  padding-bottom: 50px; }

  .page-container h1 {
    font-weight: bold;
    margin-bottom: 31px; }
  .page-container h2 {
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 31px; }
  .page-container h3 {
    font-weight: bold;
    margin-top: 31px;
    margin-bottom: 19px; }
  .page-container h4 {
    font-weight: bold;
    margin-bottom: 12px; }
  .page-container h1 + h2,
  .page-container h2 + h3,
  .page-container h1:first-child,
  .page-container h2:first-child,
  .page-container h3:first-child,
  .page-container hr + h2 {
    margin-top: 0; }
  .page-container ul {
    list-style-type: disc; }
  .page-container ul,
  .page-container ol {
    margin-left: 31px; }
  .page-container ul ul,
  .page-container ul ol,
  .page-container ol ul,
  .page-container ol ol {
    margin-top: 12px;
    margin-bottom: 0;
    margin-left: 19px; }
  .page-container li {
    margin-bottom: 12px; }
    .page-container li:last-child {
      margin-bottom: 0; }
  .page-container code,
  .page-container pre,
  .page-container kbd {
    font-family: "IBM Plex Mono", serif;
    font-size: 16px; }
  .page-container code {
    background-color: rgba(0, 0, 0, 0.08);
    padding: 4px;
    border-radius: 7px;
    margin: 0 1px; }
    strong .page-container code {
      font-weight: normal; }
  .page-container pre {
    background-color: rgba(56, 175, 224, 0.15);
    padding: 19px;
    border-radius: 0 12px 12px 0;
    border-left: 7px solid rgba(0, 0, 0, 0.1);
    overflow: auto; }
  .page-container p,
  .page-container ul,
  .page-container ol,
  .page-container blockquote,
  .page-container pre,
  .page-container img,
  .page-container .callout,
  .page-container .caption {
    margin-bottom: 31px; }

.headline-area {
  margin-bottom: 50px; }

.page-title {
  font-family: "IBM Plex Mono", serif;
  font-weight: bold; }
  .page-title a {
    color: #2c1810; }
    .page-title a:hover {
      color: #de0404; }
  .page-container .page-title {
    margin-bottom: 0; }

.page-title:has(+.byline) {
  margin-bottom: 12px; }

.byline {
  font-family: "IBM Plex Mono", serif;
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-muted); }
    .byline .page-author:after,
    .byline .page-date:after,
    .byline .page-edit:after {
      display: block;
      height: 0;
      content: '\a';
      white-space: pre; }

  .page-content > :last-child {
    margin-bottom: 0; }

.author-description {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 31px; }
  .author-description .avatar {
    float: left;
    width: 93px;
    height: 93px;
    margin-right: 19px; }

.author-description-intro {
  font-weight: bold; }

.page-container,
.headline-area,
.byline,
.page-content,
.author-description {
  display: flow-root; }

@media all and (min-width: 456px) {
  .byline .page-author:after,
      .byline .page-date:after {
        display: none; }
      .byline .page-author + .page-date-intro:before,
      .byline .page-author + .page-date:before,
      .byline .page-date + .page-date-intro:before {
        color: var(--color-text-muted);
        content: '\2022\0020'; } }

@media all and (min-width: 738px) {
  .headline-area {
    position: relative; } }

  .page-content + .modular-content {
    margin-top: 31px; }
  .modular-content > :last-child {
    margin-bottom: 0; }

.text {
  max-width: 700px;
  margin: 0 auto; }
  .text .headline-area,
  .text .featured-image-wrap,
  .text .page-content h1,
  .text h2,
  .text h3,
  .text h1 + .caption,
  .text h2 + .caption,
  .text h3 + .caption,
  .text .impact,
  .text .extend + .caption,
  .text .extend .caption {
    text-align: center; }
    .text .byline .avatar {
      margin-left: auto;
      margin-right: auto; }
  @media all and (min-width: 762px) {
    .text .headline-area,
    .text .page-content > h1,
    .text .page-content > h2,
    .text .page-content > h3,
    .text .page-content > .impact,
    .text .extend,
    .text .extend + .caption {
      margin-left: calc(381px - (100vw / 2));
      margin-right: calc(381px - (100vw / 2)); }
      .text .extend.right {
        margin-left: 31px; }
      .text .extend.left {
        margin-right: 31px; } }
  @media all and (min-width: 1262px) {
    .text .headline-area,
    .text .page-content > h1,
    .text .page-content > h2,
    .text .page-content > h3,
    .text .page-content > .impact,
    .text .extend,
    .text .extend + .caption {
      margin-left: -250px;
      margin-right: -250px; }
    .text .breakout {
      max-width: calc(584.5px + (100vw - 1200px) / 2);
      margin-left: 31px;
      margin-right: calc(350px - (100vw / 2)); }
      .text .breakout.left {
        margin-left: calc(350px - (100vw / 2));
        margin-right: 31px; }
    .text .pullout {
      max-width: calc(100vw - (100vw - 1200px) / 2 - 981px);
      margin-right: calc(-250px - (100vw - 1200px) / 2); }
      .text .pullout.left {
        float: left;
        margin-left: calc(-250px - (100vw - 1200px) / 2);
        margin-right: 0; }
      .text .extend .pullout {
        margin-left: auto;
        margin-right: auto; }
    .text .breakout,
    .text .extend .breakout {
      float: right;
      box-sizing: border-box;
      max-width: calc(584.5px + (100vw - 1200px) / 2);
      margin-left: 31px;
      margin-right: calc((1200px - 100vw) / 2); }
      .text .breakout.left,
      .text .extend .breakout.left {
        float: left;
        margin-left: calc((1200px - 100vw) / 2);
        margin-right: 31px; } }

label {
  display: block;
  font-weight: bold; }
  label .required {
    font-weight: normal;
    color: #dd0000; }

input,
textarea,
select {
  display: block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: inherit;
  padding: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1); }

input[type=checkbox],
input[type=radio],
input[type=image],
input[type=submit],
select {
  width: auto; }

input[type=checkbox],
input[type=radio] {
  display: inline-block; }
  input[type=checkbox] + label,
  input[type=radio] + label {
    display: inline;
    font-weight: normal;
    margin-left: 4px;
    user-select: none; }

textarea {
  line-height: inherit;
  padding: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1); }

select {
  border: 1px solid rgba(0, 0, 0, 0.1); }

button,
input[type=submit],
.button {
  display: inline-block;
  width: auto;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  line-height: 1em;
  vertical-align: top;
  color: #111111;
  text-decoration: none;
  background-color: #ffebb3;
  padding: 12px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom-width: 4px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  cursor: pointer;
  user-select: none; }
  button:hover,
  input[type=submit]:hover,
  .button:hover,
  button:active,
  input[type=submit]:active,
  .button:active {
    text-decoration: none;
    background-color: #fff5d9;
    transition: background-color 0.3s ease; }
  button:active,
  input[type=submit]:active,
  .button:active {
    border-bottom-width: 2px;
    margin-top: 2px; }

  button.save,
  .button.save {
    color: white;
    background-color: #509b26; }
    button.save:hover,
    .button.save:hover,
    button.save:active,
    .button.save:active {
      background-color: #60ba2e; }
  button.delete,
  .button.delete {
    color: white;
    background-color: #d50b0b; }
    button.delete:hover,
    .button.delete:hover,
    button.delete:active,
    .button.delete:active {
      background-color: #f31313; }
  button.action,
  .button.action {
    color: white;
    background-color: #12a7ff; }
    button.action:hover,
    .button.action:hover,
    button.action:active,
    .button.action:active {
      background-color: #38b5ff; }
  button.update,
  .button.update {
    color: #111111;
    background-color: #fcfc0d; }
    button.update:hover,
    .button.update:hover,
    button.update:active,
    .button.update:active {
      background-color: #fcfc33; }
  button svg,
  .button svg {
    vertical-align: inherit; }

.pln {
  color: black; }

@media screen {
  .str {
    color: #008800; }

  .kwd {
    color: #000088; }

  .com {
    color: #880000; }

  .typ {
    color: #660066; }

  .lit {
    color: #006666; }

  .pun,
  .opn,
  .clo {
    color: #666600; }

  .tag {
    color: #000088; }

  .atn {
    color: #660066; }

  .atv {
    color: #008800; }

  .dec,
  .var {
    color: #660066; }

  .fun {
    color: red; } }

@media print,
projection {
  .str {
    color: #006600; }

  .kwd {
    color: #000066;
    font-weight: 700; }

  .com {
    color: #660000;
    font-style: italic; }

  .typ {
    color: #440044;
    font-weight: 700; }

  .lit {
    color: #004444; }

  .pun,
  .opn,
  .clo {
    color: #444400; }

  .tag {
    color: #000066;
    font-weight: 700; }

  .atn {
    color: #440044; }

  .atv {
    color: #006600; } }

ol.linenums {
  margin-top: 0;
  margin-bottom: 0; }

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
  list-style-type: none; }

li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
  background: #eeeeee; }

/*
 * ---:[ Custom CSS ]:---
 */
  hr.hr-sine {
    height: 12px;
    background: url(/user-content/images/sine-wave.svg) repeat-x;
    border: none; }
    [data-theme="dark"] hr.hr-sine {
      background: url(/user-content/images/sine-wave-dark.svg) repeat-x; }

.email-form {
  text-align: center; }
  .email-form .form-field {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px; }
  .email-form .field-email {
    flex-grow: 1;
    max-width: 100%;
    border-radius: 0 12px 12px 0; }
  .email-form button {
    padding-top: 8.125px;
    padding-bottom: 8.125px; }
  @media all and (min-width: 700px) {
    .email-form .field-email {
      max-width: 55%; } }

/*
 * About This Show Box
 */
.about-show {
  border-radius: 7px;
  padding: 19px 31px;
  margin-bottom: 31px;
  color: #cbd5e1;
  background: linear-gradient(135deg, #6c6c97 0%, #334a88 100%);
  border-left: 4px solid rgba(0, 0, 0, 0.15); }
  .about-show > :last-child {
    margin-bottom: 0; }
  .about-show h3 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a5b4fc; }
  [data-theme="light"] .about-show {
    color: #1c1c65;
    background: linear-gradient(135deg, #c4d3e7 0%, #94cfe2 100%); }
    [data-theme="light"] .about-show h3 {
      color: #844c0b; }

/*
 * Key Stat Callout - Yellow
 */
.stat-callout {
  color: #422006;
  padding: 19px 31px;
  border-radius: 7px;
  margin-bottom: 31px;
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border-left: 4px solid #eab308; }
  .stat-callout .stat-label {
    display: block;
    font-weight: 600;
    color: #854d0e;
    text-transform: uppercase;
    margin-bottom: 7px; }
  .stat-callout strong {
    color: #854d0e;
    font-weight: 700; }
  .stat-callout > :last-child {
    margin-bottom: 0; }

/*
 * Definition Box - Blue
 */
.definition-box {
  border-radius: 7px;
  padding: 19px 31px;
  margin-bottom: 31px;
  color: #1e3a5f;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 4px solid rgba(50, 100, 255, 0.75); }
  .definition-box .term {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
    color: #1e40af; }
  .definition-box > :last-child {
    margin-bottom: 0; }

/*
 * FAQ Section
 */
.faq-section {
  padding: 19px;
  border-radius: 12px;
  margin-bottom: 31px;
  background-color: rgba(187, 214, 217, 0.35); }
  .faq-section h3 {
    color: #1e293b; }
  [data-theme="dark"] .faq-section {
    background-color: rgba(39, 173, 188, 0.35); }
    [data-theme="dark"] .faq-section h3 {
      color: var(--color-text); }

.faq-item {
  border-radius: 7px;
  padding: 12px 19px;
  margin-bottom: 19px;
  color: #475569;
  background: white;
  border: 1px solid #d5dfe8; }
  .faq-item .question {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px; }
  .faq-item strong {
    color: #437c92; }
  .faq-item > :last-child,
  .faq-item:last-child {
    margin-bottom: 0; }
  [data-theme="dark"] .faq-item {
    color: #bcc8da;
    background: #092325;
    border-color: #4d696b; }
    [data-theme="dark"] .faq-item .question {
      color: var(--color-text); }
    [data-theme="dark"] .faq-item strong {
      color: #7eeff7; }

/*
 * Chapter Timestamp Headers
 */
.chapter-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 20px 0; }
  .chapter-heading .timestamp {
    background: #6366f1;
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace; }
  .chapter-heading .title {
    font-size: 1.2em;
    font-weight: 600;
    color: #1e293b;
    margin: 0; }

/*
 * Alternative: Simple timestamp style if you prefer
 */
h3.chapter {
  padding-bottom: 7px;
  margin-top: 50px;
  color: var(--color-text);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08); }
  [data-theme="dark"] h3.chapter {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15); }
  h3.chapter span.ts {
    background: #6366f1;
    font-family: monospace;
    font-size: 18px;
    color: #eeefff;
    padding: 4px 7px;
    border-radius: 4px;
    margin-right: 7px;
    vertical-align: bottom; }
    h3.chapter span.ts a {
      color: white;
      text-decoration: none; }