/* ==========================================================================
   SignalB2B - Executive Bespoke Studio Design System
   Crafted with: Warm midnight obsidian, velvety matte graphite, and subtle
   titanium accents. Ergonomic, calm, easy on the eyes, and human-crafted.
   ========================================================================== */

:root {
  --color-canvas: #0c0e14;
  --color-surface: rgba(18, 20, 29, 0.75);
  --color-surface-hover: rgba(24, 27, 39, 0.85);
  --color-hairline: rgba(255, 255, 255, 0.06);
  --color-hairline-bright: rgba(255, 255, 255, 0.12);
  --color-brand-blue: #3b82f6;
  --color-brand-emerald: #10b981;
  --color-brand-white: #ffffff;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  background-color: var(--color-canvas);
  color: #f1f5f9;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.012em;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Velvety Smooth Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0c0e14;
}
::-webkit-scrollbar-thumb {
  background: #1e2230;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2e354b;
}

/* Restrained Text Selection */
::selection {
  background-color: rgba(59, 130, 246, 0.25);
  color: #ffffff;
}

/* Focus Visible */
a:focus-visible, button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}

/* Editorial Matte Glass Cards - Calm, Tactile, Non-Fatiguing */
.glass-card {
  background: rgba(17, 20, 29, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
}

/* Tactile Human-Designed Buttons */
.btn-solid-white {
  background: #ffffff;
  color: #0b0d13;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-solid-white:hover {
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.btn-solid-blue {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 4px 14px -2px rgba(37, 99, 235, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-solid-blue:hover {
  background: #1d4ed8;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 6px 18px -2px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Accordion Smooth Chevron */
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary .faq-chevron {
  transform: rotate(180deg);
}