/* ==========================================================================
   CUBOIDPILOT — THEME SYSTEM & BASE TOKENS
   Visual Reference: Intercom (Editorial, restrained, neutral, enterprise-grade)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Surface & Background Colors */
  --bg-primary: #ffffff;     /* Pure white hero & primary canvas */
  --bg-white: #ffffff;       /* Pure white for cards, dropdowns, inputs */
  --bg-secondary: #fbfbf9;   /* Secondary subtle section tone */
  --bg-tertiary: #f4f3ef;    /* Subtle highlight / accent neutral */
  --bg-dark: #111111;        /* Primary button & dark accents */
  --bg-dark-surface: #181818;

  /* Typography Colors */
  --text-primary: #111111;   /* Near black editorial text */
  --text-secondary: #575653; /* Charcoal body / supporting copy */
  --text-muted: #888680;     /* Refined small labels and timestamps */
  --text-inverse: #ffffff;   /* Pure white text on dark */

  /* Hairline Borders */
  --border-subtle: #e7e5de;  /* Default hairline border */
  --border-default: #dad7ce; /* Interactive elements / card outlines */
  --border-dark: #111111;    /* Strong borders */

  /* Functional Signal Colors (Restrained, low saturation) */
  --signal-green: #15803d;
  --signal-green-bg: #f0fdf4;
  --signal-green-border: #bbf7d0;

  --signal-amber: #b45309;
  --signal-amber-bg: #fffbeb;
  --signal-amber-border: #fde68a;

  --signal-blue: #0369a1;
  --signal-blue-bg: #f0f9ff;
  --signal-blue-border: #bae6fd;

  /* Container Sizing */
  --max-page-width: 1400px;
  --max-content-width: 1240px;
  --max-text-width: 720px;
  --max-hero-headline: 1120px;

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Smooth Typography */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
}

/* Responsive Editorial Headings */
.hero-headline {
  font-size: clamp(44px, 6.2vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text-primary);
}

.section-headline {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--text-primary);
}

.sub-headline {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text-primary);
}

.eyebrow-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead-body {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Hairline Utilities */
.border-subtle {
  border-color: var(--border-subtle);
}

.border-hairline {
  border: 1px solid var(--border-subtle);
}

.border-b-hairline {
  border-bottom: 1px solid var(--border-subtle);
}

.border-t-hairline {
  border-top: 1px solid var(--border-subtle);
}

/* Buttons adhering to Intercom precision (Crisp rectangular with subtle 4px radius, NO round pills) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-dark);
  color: var(--text-inverse);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid var(--bg-dark);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary:hover {
  background-color: #262626;
  border-color: #262626;
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-white);
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid var(--border-default);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-secondary:hover {
  background-color: #f7f6f2;
  border-color: #b8b5ab;
  transform: translateY(-1px);
}

.btn-sm {
  padding: 7px 15px;
  font-size: 13.5px;
  border-radius: 4px;
}

/* Restrained Minimal Badge */
.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: #f2f0ea;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge-signal-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: var(--signal-green-bg);
  color: var(--signal-green);
  border: 1px solid var(--signal-green-border);
}

.badge-signal-amber {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: var(--signal-amber-bg);
  color: var(--signal-amber);
  border: 1px solid var(--signal-amber-border);
}

/* Subtly Animated Pulse Dot */
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ==========================================================================
   SCROLLBAR UTILITIES & RESTRAINED SCROLLBAR STYLING
   ========================================================================== */
.no-scrollbar {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Global Modern Sleek Scrollbars (Intercom aesthetic - hairline, non-intrusive) */
* {
  scrollbar-width: thin;
  scrollbar-color: #d5d2c8 transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d5d2c8;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}