/* SatsRail Custom Styles */

:root {
  /* The brand tokens — gold palette, type scale, mono face, motion, shared
     radius steps — live in ../../app/assets/stylesheets/brand_tokens.css.
     `rake website:build` copies that file to
     public/marketing/css/brand-tokens.css and the layouts link it ahead of
     this one, so the portal and the site cannot drift apart. Do not copy
     those tokens back in here.

     What follows is marketing-site-only: dark-canvas treatments and the
     spacing scale. */
  --radius-sm: 0.25rem;   /* the portal uses 0.375rem — deliberately different */
}

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

.bg-lightning {
  background: linear-gradient(135deg, var(--lightning-purple) 0%, #f7931a 100%);
}

.text-bitcoin {
  color: var(--bitcoin-orange);
}

.bg-bitcoin-gradient {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1400 40%, #0a0a0a 100%);
}

/* Force all submit inputs and buttons to respect Bootstrap styling */
input[type="submit"].btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-bitcoin {
  background: var(--bitcoin-orange);
  border: 2px solid var(--bitcoin-orange-dark);
  color: #0a0a0a;
  font-weight: 700;
  transition: all 0.15s;
}

.btn-bitcoin:hover {
  background: var(--btc-orange);
  border-color: var(--bitcoin-orange);
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(232, 181, 60, 0.4);
}

.btn-bitcoin:active {
  background: var(--bitcoin-orange-dark);
  color: #0a0a0a;
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.btn-bitcoin:disabled,
.btn-bitcoin.disabled {
  background: var(--bitcoin-orange);
  border-color: var(--bitcoin-orange-dark);
  color: #0a0a0a;
  opacity: 0.75;
}

/* Mobile-first form improvements */
@media (max-width: 575.98px) {
  .form-control-lg,
  .btn-lg {
    font-size: var(--fs-sm);
    padding: 0.75rem 1rem;
  }

  .card-body {
    padding: 1.5rem 1rem !important;
  }

  /* Mobile table improvements */
  .table {
    font-size: var(--fs-sm);
  }

  .table th,
  .table td {
    padding: 0.5rem 0.35rem;
  }

  .display-5 {
    font-size: var(--fs-xl);
  }
}

/* Table improvements */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.table thead th {
  border-bottom: 2px solid #dee2e6;
}

.hero-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1400 40%, #0a0a0a 100%);
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 70%, rgba(232, 181, 60, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(232, 181, 60, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.api-endpoint {
  font-family: 'Courier New', monospace;
  background: #f8f9fa;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border-left: 4px solid var(--lightning-purple);
}

.stats-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-5px);
}

/* Hero terminal — macOS Terminal.app style */
.hero-terminal {
  background: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: var(--fs-sm);
  line-height: 1.8;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: none;
}

.hero-terminal code {
  color: #cccccc;
  background: transparent;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* macOS title bar */
.hero-terminal .terminal-titlebar {
  background: linear-gradient(180deg, #3c3c3c 0%, #323232 100%);
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #1a1a1a;
}

.hero-terminal .terminal-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.hero-terminal .terminal-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.hero-terminal .terminal-dots .dot-close { background: #ff5f57; }
.hero-terminal .terminal-dots .dot-minimize { background: #febc2e; }
.hero-terminal .terminal-dots .dot-expand { background: #28c840; }

.hero-terminal .terminal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
  text-transform: none;
}

/* Terminal body */
.hero-terminal .terminal-body {
  padding: 1.25rem 1.5rem;
}

/* Syntax coloring */
.hero-terminal .term-prompt { color: #22c55e; }
.hero-terminal .term-flag { color: #79c0ff; }
.hero-terminal .term-url { color: #cccccc; }
.hero-terminal .term-string { color: #a5d6ff; }
.hero-terminal .term-comment { color: #6e7681; font-style: italic; }
.hero-terminal .term-key { color: #79c0ff; }
.hero-terminal .term-value { color: #a5d6ff; }

/* Comparison table */
.compare-table td,
.compare-table th {
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

.compare-table .satsrail-col {
  border-left: 3px solid #e8b53c;
  border-right: 3px solid #e8b53c;
}

.compare-table tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.02);
}

/* Global accordion styling */
.accordion {
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-bg: #fff;
  --bs-accordion-bg: #fff;
  --bs-accordion-active-color: #e8b53c;
}

.accordion .accordion-item {
  border: none;
  margin-bottom: 0.75rem;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  background-color: #fff;
}

.accordion .accordion-button {
  font-weight: 500;
  font-size: var(--fs-lg);
  padding: 1.25rem 1.5rem;
  background: #fff !important;
  text-shadow: none;
}

.accordion .accordion-button.collapsed {
  background: #fff !important;
  color: inherit;
}

.accordion .accordion-button:not(.collapsed) {
  background: #fff !important;
  color: #e8b53c;
  box-shadow: none;
}

.accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion .accordion-body {
  padding: 0 1.5rem 1.25rem;
  color: #6c757d;
  line-height: 1.7;
}

/* Custody section "can never do" cards */
.custody-cant-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
}

/* Social proof bar */
.social-proof-bar {
  border-bottom: 1px solid #e9ecef;
}

/* ============================================
   NAVBAR
   ============================================

   Moved to app/assets/stylesheets/navbar.css — one file, three surfaces
   (portal, marketing site, book). It was duplicated verbatim here and in
   the other satsrail.css under a comment asking humans to keep the two in
   sync by hand; they now read the same file instead.
   ============================================ */


/* ============================================
   FOOTER — Matches Navbar Monospace Theme
   ============================================ */
.footer-bitcoin {
  background: var(--gray-900);
  border-top: 1px solid rgba(232, 181, 60, 0.3);
  padding: 1rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-bitcoin .footer-brand {
  color: #fff;
  font-weight: 600;
  margin-right: 1rem;
}

.footer-bitcoin .footer-brand i {
  color: var(--bitcoin-orange);
  margin-right: 0.25rem;
}

.footer-bitcoin .footer-copyright {
  color: rgba(255, 255, 255, 0.5);
}

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

.footer-bitcoin .footer-link:hover {
  color: var(--bitcoin-orange);
  text-decoration: none;
}

.btn, .btn:hover, .btn:focus, .btn:active {
  text-decoration: none !important;
}

/* Hover lift effect for cards */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Hero proof points — accessible opacity */
.hero-proof-points {
  color: rgba(255, 255, 255, 0.9);
}

.hero-proof-points .bi {
  color: #e8b53c;
}

/* Use case card link colors */
a.text-decoration-none .card .text-bitcoin {
  transition: color 0.2s;
}

a.text-decoration-none:hover .card .text-bitcoin {
  color: #c44b00 !important;
}

/* Code Blocks */
pre {
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  font-family: 'Courier New', monospace;
}

/* Nav Tabs */
.nav-tabs .nav-link {
  color: #6c757d;
}

.nav-tabs .nav-link.active {
  color: #e8b53c;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   HOME PAGE — MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 767.98px) {
  /* --- Global section breathing room --- */
  section.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section.py-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Tighter section headings on mobile */
  section .mb-5 {
    margin-bottom: 2rem !important;
  }

  /* --- Hero section --- */
  .hero-section {
    padding: 2.5rem 0 2rem;
  }

  .hero-section h1.display-3 {
    font-size: 1.85rem;
    line-height: 1.2;
  }

  .hero-section .lead {
    font-size: 0.95rem;
  }

  .hero-section .badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem !important;
  }

  .hero-section .d-flex.gap-3 {
    gap: 0.5rem !important;
  }

  .hero-section .d-flex.gap-3 .btn {
    width: 100%;
  }

  .hero-proof-points {
    gap: 0 !important;
  }

  .hero-proof-points .col-auto {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
  }

  .hero-section .small.mt-3 {
    font-size: 0.75rem;
  }

  /* --- Social proof bar --- */
  .social-proof-bar {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  .social-proof-bar .col-auto {
    flex: 0 0 100%;
  }

  .social-proof-bar p {
    font-size: 0.8rem;
    line-height: 2;
  }

  .social-proof-bar .mx-2 {
    display: none;
  }

  /* --- How It Works --- */
  #how-it-works .col-md-4 {
    margin-bottom: 0.5rem;
  }

  #how-it-works .col-md-4 p {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }

  #how-it-works .rounded-circle {
    width: 60px !important;
    height: 60px !important;
  }

  #how-it-works .display-6 {
    font-size: 1.4rem;
  }

  #how-it-works .h4 {
    font-size: 1.05rem;
  }

  /* --- Security / Custody section --- */
  #security .h1 {
    font-size: 1.6rem;
  }

  #security .lead {
    font-size: 0.95rem;
  }

  #security .d-flex.align-items-start {
    margin-bottom: 1.25rem !important;
  }

  #security .d-flex.align-items-start .rounded-circle {
    width: 36px !important;
    height: 36px !important;
  }

  #security .bg-light.rounded-3 {
    padding: 1.25rem !important;
  }

  #security .bg-light.rounded-3 .fw-semibold {
    font-size: 0.9rem;
  }

  /* --- Features section --- */
  #features .h2 {
    font-size: 1.5rem;
  }

  #features .card-body {
    padding: 1.25rem !important;
  }

  #features .feature-icon {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
  }

  /* --- Use Cases section --- */
  #use-cases .h2 {
    font-size: 1.5rem;
  }

  #use-cases .card-body {
    padding: 1.25rem !important;
  }

  #use-cases .feature-icon {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }

  /* --- API section --- */
  #api .display-6 {
    font-size: 1.5rem;
  }

  #api .lead {
    font-size: 0.95rem;
  }

  #api .bg-white.bg-opacity-10 {
    font-size: 0.72rem !important;
    padding: 0.75rem !important;
    overflow-x: auto;
    word-break: break-all;
  }

  #api .bg-white.text-dark.rounded-3 {
    padding: 1.25rem !important;
  }

  #api .bg-white.text-dark .mb-3 .ms-5 {
    margin-left: 2.75rem !important;
  }

  #api .col-lg-6 .badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
  }

  #api .col-lg-6 code {
    font-size: 0.72rem;
  }

  #api .d-flex.gap-3 .btn {
    width: 100%;
  }

  /* --- FAQ section --- */
  #faq .h1 {
    font-size: 1.5rem;
  }

  .accordion .accordion-button {
    font-size: 0.95rem;
    padding: 1rem 1.15rem;
  }

  .accordion .accordion-body {
    padding: 0 1.15rem 1rem;
    font-size: 0.9rem;
  }

  .accordion .accordion-item {
    margin-bottom: 0.5rem;
  }

  /* --- Final CTA section --- */
  section.bg-bitcoin-gradient .h1 {
    font-size: 1.5rem;
  }

  section.bg-bitcoin-gradient .lead {
    font-size: 0.95rem;
  }

  section.bg-bitcoin-gradient .d-flex.gap-3 {
    gap: 0.5rem !important;
  }
}

/* CTA buttons full-width on mobile */
@media (max-width: 575.98px) {
  .d-flex.gap-3.justify-content-center .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POS DEMO TERMINAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Terminal-style activity log */
.pos-log {
  background: #0a0a0a;
  color: #c8c8c8;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  line-height: 1.6;
  min-height: 380px;
  max-height: 520px;
  overflow-y: auto;
  padding: 0.75rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  scrollbar-width: thin;
  scrollbar-color: #333 #0a0a0a;
}

.pos-log::-webkit-scrollbar {
  width: 6px;
}

.pos-log::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.pos-log::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

.pos-log-entry {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  word-break: break-word;
}

.pos-log-entry:last-child {
  border-bottom: none;
}

.pos-log-ts {
  color: #666;
  margin-right: 0.5em;
  white-space: nowrap;
}

.pos-log-info {
  color: #8ab4f8;
}

.pos-log-success {
  color: #81c995;
  font-weight: 600;
}

.pos-log-error {
  color: #f28b82;
  font-weight: 600;
}

.pos-log-warn {
  color: var(--bitcoin-orange);
  font-weight: 600;
}

/* Payment success flash animation */
@keyframes posPaymentFlash {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  30% { box-shadow: 0 0 20px 6px rgba(16, 185, 129, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pos-payment-flash {
  animation: posPaymentFlash 1.5s ease-out;
}

/* QR code container */
.pos-log + .card-body .bg-white {
  transition: transform 0.15s ease;
}

/* POS responsive tweaks */
@media (max-width: 991.98px) {
  .pos-log {
    min-height: 200px;
    max-height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   API DOCS
   ═══════════════════════════════════════════════════════════════════ */

/* Sticky sidebar navigation */
.api-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.api-sidebar .nav-link {
  color: var(--bs-body-color);
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: all 0.15s ease;
}

.api-sidebar .nav-link:hover {
  color: var(--bitcoin-orange);
  background: rgba(232, 181, 60, 0.05);
  border-left-color: rgba(232, 181, 60, 0.3);
}

.api-sidebar .nav-link.active {
  color: var(--bitcoin-orange);
  font-weight: 600;
  background: rgba(232, 181, 60, 0.08);
  border-left-color: var(--bitcoin-orange);
}

/* Endpoint cards */
.api-endpoint-card {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  transition: border-color 0.15s ease;
}

.api-endpoint-card:hover {
  border-color: rgba(232, 181, 60, 0.3);
}

/* Copy button positioned over code blocks */
.api-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  opacity: 0.75;
  transition: opacity 0.15s ease;
  background: #e8b53c !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
  border: none !important;
}

.api-copy-btn:hover {
  background: #f0c14d !important;
  color: #0a0a0a !important;
}

.position-relative:hover .api-copy-btn {
  opacity: 1;
}

/* Try It panel */
/* Normalize form field heights in Try It panels */
.api-try-form .form-control-sm,
.api-try-form .form-select-sm {
  height: 31px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.api-try-panel pre {
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.8rem;
}

/* Code blocks inside docs */
.api-endpoint-card pre,
#authentication pre,
#pagination pre,
#websocket pre,
#webhooks pre,
#errors pre {
  font-size: 0.8rem;
  margin-bottom: 0;
}

/* API docs responsive */
@media (max-width: 991.98px) {
  .api-sidebar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   EXCHANGE MARQUEE
   ═══════════════════════════════════════════════════════════════════ */

.exchange-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.exchange-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.exchange-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.exchange-logo-link {
  opacity: 0.5;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.exchange-logo-link:hover {
  opacity: 1;
}

.exchange-logo-link img {
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.exchange-logo-link:hover img {
  filter: grayscale(0%);
}

/* The animated hamburger → X toggle moved to app/assets/stylesheets/navbar.css
   with the rest of the navbar component. */

/* =========================================================================
   POLISH LAYER — Linear/Vercel dark aesthetic
   Refined typography, hairline borders, soft shadows, glow accents,
   subtle motion. Additive; overrides earlier rules where noted.
   ========================================================================= */

:root {
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius scale */
  --radius-xs: 0.25rem;

  /* Hairline borders — Linear's signature 1px rgba white */
  --hairline: 1px solid rgba(255, 255, 255, 0.08);
  --hairline-strong: 1px solid rgba(255, 255, 255, 0.14);
  --hairline-light: 1px solid rgba(255, 255, 255, 0.04);

  /* Shadow scale — soft, layered, dark-mode tuned */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ---------- Global tightening: typography, focus, scroll ---------- */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tight tracking on display-class headings (Linear/Vercel signature) */
.display-1, .display-2, .display-3, .display-4 {
  letter-spacing: -0.035em;
  font-weight: 700;
}

.display-5, .display-6 {
  letter-spacing: -0.025em;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Refined focus ring for keyboard nav */
:focus-visible {
  outline: 2px solid var(--bitcoin-orange);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Selection color */
::selection {
  background: rgba(232, 181, 60, 0.35);
  color: #fff;
}

/* ---------- Eyebrow labels (Vercel-style tiny mono section headers) ---------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bitcoin-orange);
  margin-bottom: var(--space-4);
}

.eyebrow--muted {
  color: rgba(255, 255, 255, 0.55);
}

.eyebrow--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: var(--space-2);
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ---------- Surfaces: dark cards with hairline borders ---------- */

.surface-dark {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  color: var(--text);
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.surface-dark:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.surface-ink {
  background: var(--ink);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  color: var(--text);
}

/* Replace dated bootstrap `card.shadow-sm` look on dark sections */
.section-dark .card,
.bg-dark .card {
  background: var(--surface);
  border: var(--hairline);
  color: var(--text);
}

/* ---------- Section system: dark sections with glow orbs + grid ---------- */

.section-dark {
  background: var(--ink);
  color: var(--text);
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
}

.section-dark > .container,
.section-dark > .container-fluid,
.section-dark > .container-xl {
  position: relative;
  z-index: 1;
}

/* Glowing orb backdrop — Linear's signature */
.section-dark--glow::before,
.section-dark--glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.section-dark--glow::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(232, 181, 60, 0.35), transparent 60%);
  top: -180px;
  left: -160px;
}

.section-dark--glow::after {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(247, 147, 26, 0.22), transparent 65%);
  bottom: -180px;
  right: -120px;
}

/* Subtle dot grid backdrop */
.bg-grid {
  position: relative;
}

.bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.bg-grid > * { position: relative; z-index: 1; }

/* Hairline section divider */
.divider-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  border: 0;
  margin: 0;
}

/* ---------- Refined button system ---------- */

/* Refresh .btn-bitcoin: drop chunky border, add subtle ring + soft motion */
.btn-bitcoin {
  background: var(--bitcoin-orange);
  border: 1px solid transparent;
  color: var(--ink);
  font-weight: 600;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-md);
  letter-spacing: -0.01em;
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.btn-bitcoin:hover {
  background: var(--btc-orange);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(232, 181, 60, 0.12), var(--shadow-md);
  transform: translateY(-1px);
}

.btn-bitcoin:active {
  background: var(--bitcoin-orange);
  transform: translateY(0);
  box-shadow: 0 0 0 4px rgba(232, 181, 60, 0.2);
}

/* Ghost / outline button — Linear/Vercel secondary CTA */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  font-weight: 500;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-md);
  letter-spacing: -0.01em;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text);
}

.btn-ghost:focus-visible {
  outline-offset: 2px;
}

/* Size variants compatible with btn-lg */
.btn-bitcoin.btn-lg,
.btn-ghost.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
}

/* ---------- Refined navbar polish ---------- */

/* The site's only licensed deviation from the shared navbar block above:
   this bar is sticky over a dark canvas, so it needs a translucent
   backdrop where the portal's sits solid above light content. Everything
   else about the navbar — type, spacing, hover, current page — comes from
   the shared block, and adding to this override is how the two surfaces
   drifted apart the last time.

   What used to live here was a 1px gold rule that slid out under
   `.nav-link:hover` and `.nav-link.active`. It is gone: it collided with
   the descenders, disappeared on wrapped mobile rows, made hover and
   "you are here" look identical, and the portal never had it at all. The
   shared block marks the current page with a gold chip on both surfaces. */
.navbar-bitcoin {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: var(--hairline);
}

/* The dropdown caret spacing and the ghost Sign In button moved to
   `.navbar-public` in app/assets/stylesheets/navbar.css, so the book gets
   them from rendering the same partial. */

/* ---------- Refined hero ---------- */

.hero-v2 {
  position: relative;
  background: var(--ink);
  color: var(--text);
  padding: 7rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 767.98px) {
  .hero-v2 {
    padding: 4.5rem 0 3rem;
  }
}

/* Layered glows behind the hero */
.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 30%, rgba(232, 181, 60, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(247, 147, 26, 0.14), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.hero-v2 h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.hero-v2 .hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
}

/* Gradient text accent on key phrase */
.text-gradient-gold {
  background: linear-gradient(135deg, #f0c14d 0%, #e8b53c 45%, #f7931a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero proof points — monospace mini-row */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1.75rem;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-proof i {
  color: var(--bitcoin-orange);
  font-size: 0.95rem;
}

/* Hero terminal card on the right side */
.hero-mock {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.hero-mock-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: var(--hairline);
  background: rgba(255, 255, 255, 0.02);
}

.hero-mock-header .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.hero-mock-header .dot-1 { background: rgba(255, 255, 255, 0.12); }
.hero-mock-header .dot-2 { background: rgba(255, 255, 255, 0.18); }
.hero-mock-header .dot-3 { background: var(--bitcoin-orange); box-shadow: 0 0 8px rgba(232, 181, 60, 0.55); }

.hero-mock-header .mock-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.hero-mock-body {
  padding: 1.25rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.hero-mock-body .mock-prompt { color: var(--bitcoin-orange); }
.hero-mock-body .mock-comment { color: rgba(255, 255, 255, 0.4); }
.hero-mock-body .mock-key { color: var(--bitcoin-orange); }
.hero-mock-body .mock-string { color: var(--btc-orange); }
.hero-mock-body .mock-success { color: var(--bitcoin-orange); }

/* ---------- Metric strip ---------- */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

.metric-strip > div {
  padding: 1.5rem 1.75rem;
  border-right: var(--hairline);
}

.metric-strip > div:last-child {
  border-right: 0;
}

@media (max-width: 767.98px) {
  .metric-strip > div {
    border-right: 0;
    border-bottom: var(--hairline);
  }
  .metric-strip > div:last-child { border-bottom: 0; }
}

.metric-strip .metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}

.metric-strip .metric-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.4rem;
}

/* ---------- Refined card hover (sitewide) ---------- */

.hover-lift {
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Replace `.use-case-card` dated look with hairline+lift */
.use-case-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.use-case-card:hover {
  transform: translateY(-3px);
  border-color: var(--bitcoin-orange);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(232, 181, 60, 0.18);
}

/* ---------- Footer expansion ---------- */

.site-footer {
  background: var(--ink);
  border-top: var(--hairline);
  color: rgba(255, 255, 255, 0.6);
  padding: 4rem 0 2rem;
  font-size: 0.9rem;
}

.site-footer h6 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  font-weight: 500;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li { margin-bottom: 0.6rem; }

.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--bitcoin-orange);
}

.site-footer .footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
}

.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.site-footer .footer-brand img {
  height: 22px;
  width: auto;
}

.site-footer .footer-tagline {
  max-width: 280px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ---------- Scroll reveal (Intersection Observer powered) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Eyebrow + heading + lead block (used across sections) ---------- */

.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.section-head--start {
  margin-left: 0;
  text-align: left;
}

.section-head h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: 700;
}

.section-head p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

.section-light .section-head p {
  color: #555;
}

/* ---------- Light section variant ---------- */

.section-light {
  background: #fff;
  color: #111;
  padding: var(--space-24) 0;
}

.section-light .section-head h2 {
  color: #0a0a0a;
}

/* ---------- Utility: subtle pill badge on dark ---------- */

.pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.pill-dark .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bitcoin-orange);
  box-shadow: 0 0 8px rgba(232, 181, 60, 0.7);
  animation: pill-pulse 2.2s ease-in-out infinite;
}

@keyframes pill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---------- Mobile refinements ---------- */

@media (max-width: 767.98px) {
  .section-dark,
  .section-light {
    padding: 3.5rem 0;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  .metric-strip .metric-value {
    font-size: 1.4rem;
  }
}

/* =========================================================================
   .section-dark — comprehensive inheritance
   Makes Bootstrap utilities (text colors, alerts, cards, badges, feature
   icons) render correctly inside any element with .section-dark, so we can
   flip a single class on a wrapper and have everything below it look right.
   ========================================================================= */

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--text);
}

.section-dark p,
.section-dark li {
  color: rgba(237, 237, 237, 0.82);
}

.section-dark .lead {
  color: rgba(255, 255, 255, 0.7);
}

.section-dark .text-muted { color: rgba(255, 255, 255, 0.55) !important; }
.section-dark .text-dark { color: var(--text) !important; }
.section-dark .text-body { color: var(--text) !important; }
.section-dark .text-secondary { color: rgba(255, 255, 255, 0.6) !important; }

/* Re-color Bootstrap semantic text utilities to palette */
.section-dark .text-danger { color: var(--btc-orange) !important; }
.section-dark .text-warning { color: var(--bitcoin-orange) !important; }
.section-dark .text-success { color: var(--bitcoin-orange) !important; }
.section-dark .text-info { color: var(--btc-orange) !important; }
.section-dark .text-primary { color: var(--bitcoin-orange) !important; }

/* Cards become dark surfaces */
.section-dark .card {
  background: var(--surface);
  border: var(--hairline);
  color: var(--text);
}

.section-dark .card.shadow,
.section-dark .card.shadow-sm,
.section-dark .card.shadow-lg {
  box-shadow: var(--shadow-md);
}

.section-dark .card .card-title,
.section-dark .card-body h3,
.section-dark .card-body h4,
.section-dark .card-body h5,
.section-dark .card-body h6 {
  color: var(--text);
}

.section-dark .card-body p,
.section-dark .card-body li {
  color: rgba(255, 255, 255, 0.72);
}

.section-dark .card-body .text-muted { color: rgba(255, 255, 255, 0.55) !important; }
.section-dark .card-body.bg-light { background: var(--surface) !important; }

/* Card border accents collapse to a single gold-tinted hairline */
.section-dark .card.border-warning,
.section-dark .card.border-info,
.section-dark .card.border-success,
.section-dark .card.border-danger,
.section-dark .card.border-secondary,
.section-dark .card.border-primary {
  border: 1px solid rgba(232, 181, 60, 0.4) !important;
}

.section-dark .card.border-2 { border-width: 1px !important; }

/* Feature icons get a palette-tinted background + gold/btc color */
.section-dark .feature-icon {
  background: rgba(232, 181, 60, 0.1);
  color: var(--bitcoin-orange);
  border: var(--hairline);
  border-radius: var(--radius-md);
}

.section-dark .feature-icon.bg-warning,
.section-dark .feature-icon.bg-warning.bg-opacity-10 {
  background: rgba(232, 181, 60, 0.12) !important;
  color: var(--bitcoin-orange) !important;
}

.section-dark .feature-icon.bg-success,
.section-dark .feature-icon.bg-success.bg-opacity-10 {
  background: rgba(232, 181, 60, 0.12) !important;
  color: var(--bitcoin-orange) !important;
}

.section-dark .feature-icon.bg-info,
.section-dark .feature-icon.bg-info.bg-opacity-10 {
  background: rgba(247, 147, 26, 0.12) !important;
  color: var(--btc-orange) !important;
}

.section-dark .feature-icon.bg-danger,
.section-dark .feature-icon.bg-danger.bg-opacity-10 {
  background: rgba(247, 147, 26, 0.12) !important;
  color: var(--btc-orange) !important;
}

.section-dark .feature-icon.bg-secondary,
.section-dark .feature-icon.bg-secondary.bg-opacity-10 {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.section-dark .feature-icon.bg-primary,
.section-dark .feature-icon.bg-primary.bg-opacity-10 {
  background: rgba(232, 181, 60, 0.12) !important;
  color: var(--bitcoin-orange) !important;
}

/* Bootstrap alerts → palette-styled callouts */
.section-dark .alert {
  background: rgba(247, 147, 26, 0.08);
  border: 1px solid rgba(247, 147, 26, 0.25);
  color: var(--text);
  border-radius: var(--radius-xl);
}

.section-dark .alert-danger {
  background: rgba(247, 147, 26, 0.08);
  border-color: rgba(247, 147, 26, 0.28);
  color: var(--text);
}

.section-dark .alert-warning {
  background: rgba(232, 181, 60, 0.1);
  border-color: rgba(232, 181, 60, 0.3);
  color: var(--text);
}

.section-dark .alert-success {
  background: rgba(232, 181, 60, 0.08);
  border-color: rgba(232, 181, 60, 0.25);
  color: var(--text);
}

.section-dark .alert h3,
.section-dark .alert h4,
.section-dark .alert h5 {
  color: var(--btc-orange);
}

/* Bootstrap badges */
.section-dark .badge.bg-warning {
  background: rgba(232, 181, 60, 0.18) !important;
  color: var(--bitcoin-orange) !important;
  border: 1px solid rgba(232, 181, 60, 0.35);
}

.section-dark .badge.bg-warning.text-dark { color: var(--bitcoin-orange) !important; }

.section-dark .badge.bg-success {
  background: rgba(232, 181, 60, 0.18) !important;
  color: var(--bitcoin-orange) !important;
}

.section-dark .badge.bg-info {
  background: rgba(247, 147, 26, 0.18) !important;
  color: var(--btc-orange) !important;
}

.section-dark .badge.bg-primary {
  background: rgba(232, 181, 60, 0.18) !important;
  color: var(--bitcoin-orange) !important;
}

.section-dark .badge.bg-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Bootstrap bg-opacity utilities */
.section-dark .bg-light,
.section-dark .bg-white {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Links inside dark sections (skip buttons/nav/etc) */
.section-dark a:not(.btn):not(.dropdown-item):not(.navbar-brand):not(.nav-link):not(.text-decoration-none) {
  color: var(--bitcoin-orange);
}

.section-dark a:not(.btn):not(.dropdown-item):not(.navbar-brand):not(.nav-link):hover {
  color: var(--btc-orange);
}

/* Bootstrap btn-outline-dark inside dark sections is invisible — flip to ghost */
.section-dark .btn-outline-dark {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
}

.section-dark .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--text);
}

/* Same for btn-light / btn-outline-light when used as secondary on dark */
.section-dark .btn-light {
  background: var(--text);
  color: var(--ink);
  border: 1px solid var(--text);
}

.section-dark .btn-light:hover {
  background: #fff;
  color: var(--ink);
}

/* Refresh use-case-card inside dark sections — drop the light hover shadow */
.section-dark .use-case-card {
  background: var(--surface);
  border: var(--hairline) !important;
  color: var(--text);
}

.section-dark .use-case-card:hover {
  border-color: rgba(232, 181, 60, 0.45) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Tables in dark sections — drive Bootstrap's CSS vars so every row inherits
   light text, not the default near-black emphasis color. */
.section-dark .table,
.section-dark .table-striped {
  --bs-table-color: var(--text);
  --bs-table-color-state: var(--text);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-color: var(--text);
  --bs-table-active-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.section-dark .table > :not(caption) > * > *,
.section-dark .table-striped > tbody > tr > *,
.section-dark .table-striped > tbody > tr:nth-of-type(odd) > *,
.section-dark .table-striped > tbody > tr:nth-of-type(even) > * {
  color: var(--text);
}

.section-dark .table thead th {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
}

.section-dark hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Form controls inside dark sections */
.section-dark .form-control,
.section-dark .form-select,
.section-dark .input-group-text {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.section-dark .form-control::placeholder { color: rgba(255, 255, 255, 0.4); }

.section-dark .input-group-text.bg-white {
  background: var(--surface) !important;
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

.section-dark .input-group-text .text-muted {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Table zebra striping override */
.section-dark .table > :not(caption) > * > * { background-color: transparent; }
.section-dark tr.bg-light,
.section-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: var(--text);
}

/* Details/summary disclosure inside dark sections */
.section-dark details {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  color: var(--text);
}

.section-dark details summary {
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.section-dark details[open] summary { color: var(--bitcoin-orange); }

/* Accordion (FAQ) inside dark sections — palette-consistent surface */
.section-dark .accordion {
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-active-bg: var(--surface);
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--text);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-active-color: var(--bitcoin-orange);
  --bs-accordion-border-color: rgba(255, 255, 255, 0.08);
}

.section-dark .accordion .accordion-item {
  background: var(--surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
}

.section-dark .accordion .accordion-button,
.section-dark .accordion .accordion-button.collapsed {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.section-dark .accordion .accordion-button:not(.collapsed) {
  background: var(--surface) !important;
  color: var(--bitcoin-orange) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.section-dark .accordion .accordion-button:hover {
  color: var(--bitcoin-orange) !important;
}

.section-dark .accordion .accordion-button::after {
  filter: invert(1) brightness(1.4);
  opacity: 0.7;
}

.section-dark .accordion .accordion-button:not(.collapsed)::after {
  filter: invert(72%) sepia(56%) saturate(581%) hue-rotate(2deg) brightness(95%) contrast(89%);
  opacity: 1;
}

.section-dark .accordion .accordion-body {
  color: rgba(237, 237, 237, 0.72);
  background: var(--surface);
}

.section-dark .accordion .accordion-body p,
.section-dark .accordion .accordion-body li {
  color: rgba(237, 237, 237, 0.72);
}

/* =========================================================================
   .hero-v2 — legacy content inheritance
   Make legacy badge/heading/button patterns auto-theme inside .hero-v2 so
   sub-pages that haven't been rewritten yet still look correct.
   ========================================================================= */

.hero-v2 .badge {
  background: rgba(232, 181, 60, 0.15) !important;
  color: var(--bitcoin-orange) !important;
  border: 1px solid rgba(232, 181, 60, 0.3);
}

.hero-v2 h1.display-3,
.hero-v2 h1.display-4 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--text);
}

.hero-v2 .lead {
  color: rgba(255, 255, 255, 0.72);
}

.hero-v2 .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text);
  background: transparent;
}

.hero-v2 .btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.hero-v2 .btn-light {
  background: var(--text);
  color: var(--ink);
  border: 1px solid var(--text);
}

.hero-v2 .btn-light:hover {
  background: #fff;
  color: var(--ink);
}

/* =========================================================================
   INTERACTION LAYER — dynamic components
   Cursor-aware spotlights, animated borders, count-up metrics, staggered
   reveal groups, terminal typing, scroll progress. Companion script:
   src/partials/_interactive.html (must load BEFORE _scroll_reveal.html).
   Palette rule: gold + BTC orange + white-alpha only — no new colors.
   Every effect honors prefers-reduced-motion.
   ========================================================================= */

/* ---------- Scroll progress bar (element injected by JS) ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--bitcoin-orange-dark), var(--bitcoin-orange) 60%, var(--btc-orange));
  box-shadow: 0 0 8px rgba(232, 181, 60, 0.45);
  z-index: 1100;
  pointer-events: none;
}

/* ---------- Cursor spotlight — gold radial follows the pointer ----------
   JS sets --mx/--my on pointermove. Also auto-applied to .use-case-card. */

.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(232, 181, 60, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.spotlight:hover::after {
  opacity: 1;
}

/* Keep card content above the spotlight overlay */
.spotlight > * {
  position: relative;
  z-index: 1;
}

/* ---------- Glint — animated gold border sweep for featured surfaces ---- */

@property --glint-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.glint {
  position: relative;
}

.glint::before {
  content: '';
  position: absolute;
  inset: 0; /* not -1px: glint hosts often have overflow:hidden, which would clip a negative inset */
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--glint-angle),
              rgba(232, 181, 60, 0) 0%,
              rgba(232, 181, 60, 0.9) 10%,
              rgba(247, 147, 26, 0.55) 18%,
              rgba(232, 181, 60, 0) 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: glint-spin 5s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes glint-spin {
  to { --glint-angle: 360deg; }
}

/* ---------- Count-up metrics ---------- */

[data-countup] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Terminal line typing (hero-mock and friends) ----------
   JS arms the container (.tt-armed) only when it will actually run,
   so content stays visible without JS / with reduced motion. */

[data-terminal-type].tt-armed > div {
  opacity: 0;
}

[data-terminal-type].tt-armed > div.tt-visible {
  opacity: 1;
}

[data-terminal-type] .tt-caret::after {
  content: '▋';
  color: var(--bitcoin-orange);
  margin-left: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* ---------- Subtle 3D tilt (JS-driven; don't combine with .hover-lift) -- */

.tilt {
  transition: transform var(--t-base) var(--ease-out);
  will-change: transform;
}

/* ---------- Button shine sweep on primary CTA ---------- */

.btn-bitcoin {
  position: relative;
  overflow: hidden;
}

.btn-bitcoin::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

.btn-bitcoin:hover::after {
  animation: btn-shine 650ms var(--ease-out);
}

@keyframes btn-shine {
  from { left: -60%; opacity: 1; }
  to   { left: 120%; opacity: 0; }
}

/* ---------- Arrow nudge — any CTA arrow slides on hover ---------- */

.btn .bi-arrow-right,
a .bi-arrow-right {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .bi-arrow-right,
a:hover .bi-arrow-right {
  transform: translateX(4px);
}

/* ---------- Reveal groups — JS staggers children automatically ----------
   Usage: add .reveal-group to a grid row; optional data-stagger="80" (ms). */

/* (children receive .reveal + transition-delay from JS; base styles reuse .reveal) */

/* ---------- Reduced motion: kill the decorative animation, keep content -- */

@media (prefers-reduced-motion: reduce) {
  .glint::before { animation: none; }
  .btn-bitcoin::after { display: none; }
  .scroll-progress { display: none; }
  [data-terminal-type] .tt-caret::after { animation: none; }
  .spotlight::after { display: none; }
  .btn:hover .bi-arrow-right,
  a:hover .bi-arrow-right { transform: none; }
}