:root {
  --ink: #171a1f;
  --muted: #687382;
  --line: #c8ced6;
  --surface: #ffffff;
  --soft: #f1f3f5;
  --accent: #e28a14;
  --accent-dark: #9a5100;
  --deep: #11151d;
  --deep-2: #1a1f29;
  --radius: 17px;
  --shadow: 0 22px 58px rgba(25, 31, 39, 0.15);
  --focus-ring: rgba(226, 138, 20, 0.28);
}

body {
  background:
    linear-gradient(rgba(23, 26, 31, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 26, 31, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 76% -12%, rgba(226, 138, 20, 0.09), transparent 31%),
    #e9edf1;
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.brand-mark {
  background: var(--accent);
  color: #231500;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(226, 138, 20, 0.25);
}

.brand > span:last-child > span,
.eyebrow,
.card-number,
.flow-step small,
.contact-list small,
.value-list article > b,
.prose a {
  color: var(--accent-dark);
}

.primary-nav a { color: #3e4652; }

.button {
  border: 1px solid rgba(154, 81, 0, 0.3);
  background: linear-gradient(145deg, var(--accent-dark), var(--accent));
  color: #231500;
  box-shadow: 0 9px 22px rgba(226, 138, 20, 0.22);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(226, 138, 20, 0.3), 0 0 0 3px var(--focus-ring);
  outline: none;
}

.button-light {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

.hero,
.page-hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(226, 138, 20, 0.13), transparent 31%),
    linear-gradient(180deg, #f8f9fa, #e9edf1);
}

.workspace-preview {
  border-color: var(--line);
  border-radius: 17px;
  background: #ffffff;
  transform: none;
}

.preview-chat {
  background: #f4f6f8;
  border-right-color: var(--line);
}

.chat-bubble.user {
  background: #f5a623;
  color: #231500;
}

.chat-bubble.assistant,
.composer,
.feature-card {
  background: #ffffff;
  border-color: var(--line);
}

.composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.status-pill,
.phase.live {
  background: #fff0d7;
  color: #9a5100;
}

.timeline li.complete > span,
.trust-row span::before,
.roadmap-item.active::before {
  background: var(--accent);
  border-color: var(--accent);
}

.soft-section { background: #f1f3f5; }
.dark-section { background: #11151d; }
.roadmap-item span,
.eyebrow.light,
.contact-card > span { color: #ffb224; }

.cta-card {
  background: linear-gradient(135deg, #11151d, #1a1f29);
  border: 1px solid #303640;
}

.contact-card { background: #11151d; }
.site-footer { background: #f8f9fa; }

.nav-toggle,
.primary-nav {
  border-color: var(--line);
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f6fa;
    --muted: #aebbd1;
    --line: #303640;
    --surface: #11151d;
    --soft: #151a23;
    --accent: #f5a623;
    --accent-dark: #ffb224;
    --deep: #0b0d11;
    --deep-2: #151a23;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    --focus-ring: rgba(245, 166, 35, 0.3);
    color-scheme: dark;
  }

  body {
    background:
      linear-gradient(rgba(244, 246, 250, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244, 246, 250, 0.025) 1px, transparent 1px),
      radial-gradient(circle at 76% -12%, rgba(245, 166, 35, 0.09), transparent 31%),
      #0b0d11;
    background-size: 42px 42px, 42px 42px, auto, auto;
  }

  .site-header { background: rgba(17, 21, 29, 0.94); }
  .primary-nav a { color: #aebbd1; }
  .hero,
  .page-hero { background: radial-gradient(circle at 80% 18%, rgba(245, 166, 35, 0.1), transparent 31%), #0b0d11; }
  .workspace-preview,
  .preview-canvas,
  .chat-bubble.assistant,
  .composer,
  .feature-card,
  .nav-toggle,
  .primary-nav { background: #11151d; }
  .preview-chat { background: #0e1219; }
  .soft-section { background: #151a23; }
  .site-footer { background: #11151d; }
  .button-light { background: #1a1f29; color: #f4f6fa; }
  .status-pill,
  .phase.live { background: rgba(245, 166, 35, 0.12); color: #ffb224; }
}