@charset "UTF-8";
: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: calc(47px * 1.6180339887);
  --gx: calc(59px * 1.6180339887);
  --fy: calc(37px * 1.6180339887);
  --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: #ffffff;
  --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 {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--pm-red);
}

.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 {
  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);
}

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 {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: var(--pm-red);
}

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

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

@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: 768px) {
  section, .nav {
    padding-left: 19px;
    padding-right: 19px;
  }
  .nav-links {
    display: none;
  }
  .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 {
    justify-content: center;
  }
}
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 #ccc;
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px #fff 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-subtle);
}

.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-subtle);
  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: "↔";
  color: #9a7560;
}
@media all and (min-width: 738px) {
  .menu {
    justify-content: center;
  }
  .menu:before {
    display: none;
  }
}

.bleed {
  display: flow-root;
  position: relative;
  width: 100vw;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: -19px;
}
.bleed + .bleed {
  margin-top: -50px;
}
.text:first-child > .page-content:first-child > .bleed:first-child {
  border-top: 0;
}
.page-content:last-child .bleed:last-child {
  border-bottom: 0;
}
@media all and (min-width: 738px) {
  .bleed {
    margin-left: calc((700px - 100vw) / 2);
  }
}
@media all and (min-width: 762px) {
  .bleed {
    margin-left: -31px;
  }
}
@media all and (min-width: 1262px) {
  .bleed {
    margin-left: calc((1200px - 100vw) / 2);
  }
}
.focus .bleed {
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.bleed .container {
  padding-top: 31px;
  padding-bottom: 31px;
}
.bleed pre {
  background-color: rgba(0, 0, 0, 0.1);
}
.bleed.no-border {
  border-top: none;
}
.bleed.red {
  background-color: hsl(0, 100%, 90%);
}
.bleed.red blockquote, .bleed.red .page-content > .small, .bleed.red .caption, .bleed.red .bar {
  color: hsl(0, 100%, 25%);
}
.bleed.salmon {
  background-color: hsl(20, 100%, 90%);
}
.bleed.salmon blockquote, .bleed.salmon .page-content > .small, .bleed.salmon .caption, .bleed.salmon .bar {
  color: hsl(20, 100%, 25%);
}
.bleed.orange {
  background-color: hsl(40, 100%, 90%);
}
.bleed.orange blockquote, .bleed.orange .page-content > .small, .bleed.orange .caption, .bleed.orange .bar {
  color: hsl(40, 100%, 25%);
}
.bleed.yellow {
  background-color: hsl(60, 100%, 90%);
}
.bleed.yellow blockquote, .bleed.yellow .page-content > .small, .bleed.yellow .caption, .bleed.yellow .bar {
  color: hsl(60, 100%, 25%);
}
.bleed.chartreuse {
  background-color: hsl(80, 100%, 90%);
}
.bleed.chartreuse blockquote, .bleed.chartreuse .page-content > .small, .bleed.chartreuse .caption, .bleed.chartreuse .bar {
  color: hsl(80, 100%, 25%);
}
.bleed.lime {
  background-color: hsl(100, 100%, 90%);
}
.bleed.lime blockquote, .bleed.lime .page-content > .small, .bleed.lime .caption, .bleed.lime .bar {
  color: hsl(100, 100%, 25%);
}
.bleed.green {
  background-color: hsl(120, 100%, 90%);
}
.bleed.green blockquote, .bleed.green .page-content > .small, .bleed.green .caption, .bleed.green .bar {
  color: hsl(120, 100%, 25%);
}
.bleed.aquamarine {
  background-color: hsl(140, 100%, 90%);
}
.bleed.aquamarine blockquote, .bleed.aquamarine .page-content > .small, .bleed.aquamarine .caption, .bleed.aquamarine .bar {
  color: hsl(140, 100%, 25%);
}
.bleed.turquoise {
  background-color: hsl(160, 100%, 90%);
}
.bleed.turquoise blockquote, .bleed.turquoise .page-content > .small, .bleed.turquoise .caption, .bleed.turquoise .bar {
  color: hsl(160, 100%, 25%);
}
.bleed.cyan {
  background-color: hsl(180, 100%, 90%);
}
.bleed.cyan blockquote, .bleed.cyan .page-content > .small, .bleed.cyan .caption, .bleed.cyan .bar {
  color: hsl(180, 100%, 25%);
}
.bleed.blue {
  background-color: hsl(200, 100%, 90%);
}
.bleed.blue blockquote, .bleed.blue .page-content > .small, .bleed.blue .caption, .bleed.blue .bar {
  color: hsl(200, 100%, 25%);
}
.bleed.steel {
  background-color: hsl(220, 100%, 90%);
}
.bleed.steel blockquote, .bleed.steel .page-content > .small, .bleed.steel .caption, .bleed.steel .bar {
  color: hsl(220, 100%, 25%);
}
.bleed.lavender {
  background-color: hsl(240, 100%, 90%);
}
.bleed.lavender blockquote, .bleed.lavender .page-content > .small, .bleed.lavender .caption, .bleed.lavender .bar {
  color: hsl(240, 100%, 25%);
}
.bleed.purple {
  background-color: hsl(260, 100%, 90%);
}
.bleed.purple blockquote, .bleed.purple .page-content > .small, .bleed.purple .caption, .bleed.purple .bar {
  color: hsl(260, 100%, 25%);
}
.bleed.orchid {
  background-color: hsl(280, 100%, 90%);
}
.bleed.orchid blockquote, .bleed.orchid .page-content > .small, .bleed.orchid .caption, .bleed.orchid .bar {
  color: hsl(280, 100%, 25%);
}
.bleed.magenta {
  background-color: hsl(300, 100%, 90%);
}
.bleed.magenta blockquote, .bleed.magenta .page-content > .small, .bleed.magenta .caption, .bleed.magenta .bar {
  color: hsl(300, 100%, 25%);
}
.bleed.pink {
  background-color: hsl(320, 100%, 90%);
}
.bleed.pink blockquote, .bleed.pink .page-content > .small, .bleed.pink .caption, .bleed.pink .bar {
  color: hsl(320, 100%, 25%);
}
.bleed.rose {
  background-color: hsl(340, 100%, 90%);
}
.bleed.rose blockquote, .bleed.rose .page-content > .small, .bleed.rose .caption, .bleed.rose .bar {
  color: hsl(340, 100%, 25%);
}

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

.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-subtle);
}
.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.12);
  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-subtle);
    content: "• ";
  }
}
@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;
}
label .required {
  font-weight: normal;
  color: #FFFFFF;
}

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;
}

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;
}

/*button, input[type=submit], .button {
	@include button;
}
button, .button {
	&.save {
		@include button-save;
	}
	&.delete {
		@include button-delete;
	}
	&.action {
		@include button-action;
	}
	&.update {
		@include button-update;
	}
	svg {
		vertical-align: inherit;
	}
}*/
/*---:[ 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 .field-email {
  border-radius: 0 12px 12px 0;
  margin-bottom: 7px;
}
.email-form button {
  padding-top: 8px;
  padding-bottom: 8px;
}
@media all and (min-width: 700px) {
  .email-form .field-email {
    display: inline-block;
    width: 55%;
    margin-right: 7px;
  }
}

/* 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: #fff;
  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;
}