/* ==========================================================================
   site.css: the pieces of the light product-led design that inline styles
   can't express: hover states, focus rings, keyframes and breakpoints.
   Loaded on every page, because the shared Navbar and Footer use it too.
   Layout and static styling stay inline in the components.
   ========================================================================== */

@keyframes skFlow  { from { background-position: 0 0; } to { background-position: 48px 0; } }
@keyframes skFlowY { from { background-position: 0 0; } to { background-position: 0 48px; } }

/* ---------- Buttons ---------- */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.sk-btn-primary {
  padding: 15px 32px; border: none; color: #fff;
  background: linear-gradient(90deg, #2ec47a, #1a8fe0);
}
.sk-btn-primary:hover { opacity: 0.88; color: #fff; }
.sk-btn-primary.sk-btn-sm { padding: 9px 18px; font-size: 13px; }
.sk-btn-secondary {
  padding: 14px 32px; color: #0a1220; background: #fff;
  border: 1px solid rgba(30,58,100,0.18);
}
.sk-btn-secondary:hover { border-color: #1da869; color: #1da869; }
.sk-btn-secondary-dark {
  padding: 14px 32px; color: #e6eef9; background: transparent;
  border: 1px solid rgba(125,211,252,0.22);
}
.sk-btn-secondary-dark:hover { border-color: #2ee89a; color: #2ee89a; }

/* ---------- Links ---------- */
.sk-link { color: #1da869; text-decoration: none; font-weight: 600; }
.sk-link:hover { color: #1a6ed8; }
.sk-nav-link { color: #1e3a5f; text-decoration: none; transition: color 150ms; }
.sk-nav-link:hover { color: #13764a; }
.sk-nav-link[aria-current="page"] { color: #13764a; font-weight: 600; }
.sk-footer-link {
  color: #8ea3c0; text-decoration: none; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; transition: color 150ms;
}
.sk-footer-link:hover { color: #2ee89a; }

/* ---------- Clickable cards and chips ---------- */
.sk-agent-row { transition: border-color 150ms, box-shadow 150ms; }
.sk-agent-row:not(.is-on):hover { border-color: rgba(29,168,105,0.4) !important; }
.sk-agent-tab { transition: color 150ms; }
.sk-agent-tab:not(.is-on):hover { color: #0a1220 !important; }
.sk-console-mock { transition: box-shadow 150ms; }
.sk-console-mock:hover { box-shadow: 0 0 0 1px rgba(29,168,105,0.35), 0 12px 32px rgba(29,168,105,0.15) !important; }

/* ---------- Forms ---------- */
.sk-input {
  width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid #c4d2e2;
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px;
  color: #0a1220; background: #fff;
}
.sk-input:focus { outline: 2px solid #1da869; outline-offset: 1px; }
.sk-input::placeholder { color: #9aacc2; }

/* ---------- Section scaffolding ---------- */
.sk-section { padding: 96px 32px; }
.sk-hero { padding: 88px 32px 64px; }

/* ---------- Hero flow diagram: sources -> Skardi -> agent ---------- */
.sk-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px minmax(0,1.1fr) 64px minmax(0,1fr);
  align-items: center; max-width: 1040px; margin: 0 auto; text-align: left;
}
.sk-flow-line { height: 2px; background-size: 48px 2px; animation: skFlow 1.2s linear infinite; opacity: 0.7; }
.sk-flow-line.is-green { background-image: repeating-linear-gradient(90deg, #2ec47a 0 16px, transparent 16px 24px); }
.sk-flow-line.is-blue  { background-image: repeating-linear-gradient(90deg, #1a8fe0 0 16px, transparent 16px 24px); }

@media (max-width: 860px) {
  .sk-flow { grid-template-columns: minmax(0,1fr); max-width: 440px; }
  .sk-flow-line {
    width: 2px; height: 40px; margin: 8px auto;
    background-size: 2px 48px; animation-name: skFlowY;
  }
  .sk-flow-line.is-green { background-image: repeating-linear-gradient(180deg, #2ec47a 0 16px, transparent 16px 24px); }
  .sk-flow-line.is-blue  { background-image: repeating-linear-gradient(180deg, #1a8fe0 0 16px, transparent 16px 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-flow-line { animation: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
  .sk-section { padding: 64px 20px; }
  .sk-hero { padding: 56px 20px 48px; }
  .sk-btn-primary:not(.sk-btn-sm), .sk-btn-secondary, .sk-btn-secondary-dark { padding-left: 24px; padding-right: 24px; }
  .sk-footer { padding: 28px 20px !important; }
}