/* ==========================================================================
   SF Automations — custom styles (Tailwind handles utility layout/spacing)
   ========================================================================== */

:root {
  --ink:        #0F1115;   /* base background */
  --ink-raised: #171A21;   /* card surface */
  --ink-line:   #262B35;   /* hairline borders */
  --paper:      #F2EFE9;   /* warm off-white text */
  --paper-dim:  #9096A3;   /* muted text */
  --signal:     #F5A623;   /* amber — primary signal / CTA */
  --signal-dim: #7A5514;   /* amber, low-emphasis */
  --ok:         #2DD4BF;   /* teal — secondary signal */
}

* { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Visible keyboard focus everywhere — quality floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Status dot used in eyebrows */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

/* Card hover lift + amber edge */
.node-card {
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.node-card:hover {
  transform: translateY(-4px);
  border-color: var(--signal-dim);
  background-color: #1B1F28;
}

/* Gradient text for a single emphasized word, used sparingly */
.text-signal-glow {
  color: var(--signal);
  text-shadow: 0 0 24px rgba(245, 166, 35, 0.25);
}

/* Scroll-reveal: JS toggles .is-visible via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky nav shrink state, toggled by JS on scroll */
#navbar {
  transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
#navbar.scrolled {
  background-color: rgba(15, 17, 21, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--ink-line);
}

/* Pipeline diagram (hero signature element) */
.pipeline-node circle.node-ring {
  fill: none;
  stroke: var(--ink-line);
  stroke-width: 1.5;
}
.pipeline-node circle.node-core {
  fill: var(--ink-raised);
  stroke: var(--signal);
  stroke-width: 1.5;
}
.pipeline-path {
  stroke: var(--ink-line);
  stroke-width: 1.5;
  fill: none;
}
.pipeline-pulse {
  fill: var(--signal);
  filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.8));
}
.pipeline-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  fill: var(--paper-dim);
  font-size: 10.5px;
}

/* Minimal flow divider between Services and Process */
.flow-divider-pulse {
  fill: var(--ok);
  filter: drop-shadow(0 0 3px rgba(45, 212, 191, 0.7));
}

/* Respect reduced motion: freeze SMIL + CSS transitions/animations */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Form field states */
.field-error {
  border-color: #E5484D !important;
}
.field-error-msg {
  color: #F87171;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* WhatsApp float button pulse ring */
.wa-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25D366;
  opacity: 0.55;
  animation: wa-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes wa-ping {
  0%   { transform: scale(1);   opacity: 0.45; }
  75%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Custom scrollbar, subtle */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--signal-dim); }