:root {
  --dk-accent: #ff8c42;
  --dk-accent-dim: rgba(255, 140, 66, 0.15);
  --dk-accent-glow: rgba(255, 140, 66, 0.35);
  --dk-border: rgba(255, 255, 255, 0.08);
  --dk-border-strong: rgba(255, 255, 255, 0.14);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--bs-body-font-family);
  background-color: #0b0d0f;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

/* Headings & brand --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

.navbar-brand,
.hero-section h1,
.pricing-card .price,
.code-window {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.text-accent {
  color: var(--dk-accent) !important;
}

/* Navbar ------------------------------------------------------------------- */
.site-navbar {
  background-color: rgba(11, 13, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dk-border);
}

.site-navbar .navbar-brand {
  letter-spacing: -0.02em;
}

.site-navbar .nav-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.site-navbar .nav-link:hover {
  color: #fff;
}

/* Buttons ------------------------------------------------------------------ */
.btn-accent {
  --bs-btn-color: #1a0d03;
  --bs-btn-bg: var(--dk-accent);
  --bs-btn-border-color: var(--dk-accent);
  --bs-btn-hover-color: #1a0d03;
  --bs-btn-hover-bg: #ffa566;
  --bs-btn-hover-border-color: #ffa566;
  --bs-btn-active-bg: #f5751f;
  --bs-btn-active-border-color: #f5751f;
  font-weight: 600;
  box-shadow: 0 6px 20px -8px var(--dk-accent-glow);
}

/* Hero --------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--dk-accent-glow) 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

.hero-section h1 {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-badge {
  background-color: var(--dk-accent-dim);
  color: var(--dk-accent);
  border: 1px solid var(--dk-accent-glow);
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 2rem;
}

/* Code window -------------------------------------------------------------- */
.code-window {
  background-color: #11151a;
  border: 1px solid var(--dk-border-strong);
  border-radius: 0.75rem;
  overflow: hidden;
}

.code-window-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--dk-border);
}

.code-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}

.code-dot:nth-child(1) { background-color: #ff5f56; }
.code-dot:nth-child(2) { background-color: #ffbd2e; }
.code-dot:nth-child(3) { background-color: #27c93f; }

.code-window-title {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.code-window-body {
  padding: 1.25rem 1.5rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #c6cdd5;
  white-space: pre-wrap;
  word-break: break-word;
}

.c-kw      { color: #7ee787; }
.c-str     { color: var(--dk-accent); }
.c-key     { color: #79c0ff; }
.c-comment { color: #6e7781; font-style: italic; }
.c-punct   { color: #c6cdd5; }

/* Cards -------------------------------------------------------------------- */
.pricing-card {
  background-color: #11151a;
  border-color: var(--dk-border);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
  border-color: var(--dk-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -16px var(--dk-accent-glow);
}

.pricing-card .card-header {
  background: transparent;
  border-bottom-color: var(--dk-border);
}

/* Disclosures -------------------------------------------------------------- */
.disclosure-link {
  color: var(--dk-accent);
  text-decoration: none;
  font-weight: 500;
}

.disclosure-link:hover {
  color: #ffa566;
}

[data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.2s ease;
  font-size: 0.85em;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* FAQ accordion ------------------------------------------------------------ */
/* Bootstrap's dark-theme accordion defaults to a primary-blue active state
   (text, chevron and focus ring) that clashes with our dark/amber theme.
   Re-map its CSS variables onto the brand palette. */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: #c6cdd5;
  --bs-accordion-border-color: var(--dk-border);
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--dk-accent);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c6cdd5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff8c42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

/* How-to-integrate steps --------------------------------------------------- */
.steps {
  gap: 1rem;
}

.step-col {
  flex: 1 1 0;
  min-width: 0;
}

.step-card {
  position: relative;
  height: 100%;
  padding: 2rem 1.5rem;
  background-color: #11151a;
  border: 1px solid var(--dk-border);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
  border-color: var(--dk-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -16px var(--dk-accent-glow);
}

.step-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background-color: var(--dk-accent-dim);
  border: 1px solid var(--dk-accent-glow);
  color: var(--dk-accent);
  font-size: 1.6rem;
}

.step-index {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--dk-accent);
  margin-bottom: 0.35rem;
}

.step-connector {
  display: none;
  color: var(--dk-border-strong);
  font-size: 1.35rem;
}

@media (min-width: 768px) {
  .step-connector {
    display: flex;
    align-items: center;
  }
}

/* Sample tiles ------------------------------------------------------------- */
.sample-tile {
  background:
    linear-gradient(135deg, rgba(255, 140, 66, 0.06), rgba(255, 255, 255, 0.02)),
    #11151a;
  border: 1px solid var(--dk-border);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease;
}

.sample-tile video {
  border-radius: 0.5rem;
  object-fit: cover;
}

.sample-tile:hover {
  border-color: var(--dk-accent);
}

/* Clip player ---------------------------------------------------------------
   Bootstrap's `.ratio > *` rule pins children with `position: absolute;
   width/height: 100%` relative to the (small, fixed-aspect) `.ratio`
   wrapper. That author rule outranks the UA fullscreen stylesheet, so when
   the embedded iframe is promoted to fullscreen it keeps sizing itself
   against the original wrapper instead of the viewport, clipping the
   sides. Force viewport sizing while the iframe is fullscreened. */
.ratio > iframe:fullscreen,
.ratio > iframe:-webkit-full-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CTA ---------------------------------------------------------------------- */
.cta-section {
  border-top: 1px solid var(--dk-border);
  background:
    radial-gradient(circle at 50% 0%, var(--dk-accent-dim), transparent 55%);
}

/* Footer ------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--dk-border);
}

.footer-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--dk-accent);
}