/* strip v2 2026-09-14
   Silvatech Lab register. Load AFTER Bootstrap with one link:
   <link rel="stylesheet" href="https://silvatech.bz/brand/silvatech-ui.css">
   Existing .btn, .btn-primary, .btn-secondary and .card markup is supported.
   Use .svt-whatsapp on a wa.me anchor; .svt-footer and .svt-legal for the footer.
   Self-contained: no companion stylesheet, font provider or runtime is required.
   Edit Lab rules here; the shared strip block at the end is generated from ecosystem-strip.css.
   Font stacks degrade locally; this file does not contact a font provider.
   Canonical contract: SILVATECH-ECOSYSTEM.md sections 2-4. No runtime required. */
:root {
  --brand-900: #192d40;
  --brand-500: #2b8ec8;
  --brand-300: #8ac5ea;
  --violet-500: #4f46e5;
  --success: #2bd4a6;
  --surface: #0f1c2b;
  --font-body: Inter, "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-heading: Sora, "Avenir Next", "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --svt-text: #eaf2f7;
  --svt-muted: #b6c6d2;
  --svt-border: #627c90;
  --svt-radius: 16px;
  --svt-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --svt-shadow-hover: 0 20px 40px rgba(43, 142, 200, 0.12);
}
body {
  background: var(--surface);
  color: var(--svt-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
code, pre, kbd, .svt-code { font-family: var(--font-code); }
a { color: var(--brand-300); text-underline-offset: 3px; }
a:hover { color: #ffffff; }
:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; }
.btn, .svt-button, .svt-whatsapp {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid var(--svt-border);
  border-radius: 8px;
  background: var(--brand-900);
  color: var(--svt-text);
  font: 600 1rem/1.4 var(--font-body);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
}
.btn-primary, .svt-button--primary { background: var(--violet-500); border-color: var(--brand-300); color: #ffffff; }
.btn-primary:hover, .svt-button--primary:hover { background: var(--violet-500); border-color: var(--brand-300); }
.btn-secondary, .svt-button--secondary { background: transparent; color: var(--brand-300); }
.btn-secondary:hover, .svt-button--secondary:hover { background: var(--brand-900); border-color: var(--brand-300); }
.svt-whatsapp { border-radius: 999px; background: var(--success); border-color: var(--success); color: #071420; }
.btn:hover, .svt-button:hover { color: #ffffff; transform: translateY(-1px); }
.svt-whatsapp:hover { background: #58e3bd; color: #071420; transform: translateY(-1px); }
.btn:focus-visible, .svt-button:focus-visible, .svt-whatsapp:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; box-shadow: none; }
.btn:disabled, .svt-button:disabled, .svt-whatsapp:disabled, [aria-disabled="true"].svt-button {
  opacity: 0.55; cursor: not-allowed; transform: none;
}
.btn svg, .svt-button svg, .svt-whatsapp svg { width: 20px; height: 20px; flex: 0 0 20px; }
.card, .svt-card {
  min-width: 0;
  border: 1px solid var(--svt-border);
  border-radius: var(--svt-radius);
  background: var(--brand-900);
  color: var(--svt-text);
  box-shadow: var(--svt-shadow);
  overflow-wrap: anywhere;
}
.svt-card { padding: 24px; }
.card-title, .svt-card h2, .svt-card h3 { font-size: 1.25rem; }
.card-header, .card-footer { background: transparent; border-color: var(--svt-border); }
.svt-card--interactive:hover { box-shadow: var(--svt-shadow-hover); }
.svt-footer { padding: 32px 16px; background: var(--surface); color: var(--svt-muted); border-top: 1px solid var(--svt-border); }
.svt-footer a { color: var(--brand-300); }
.svt-legal { max-width: 1120px; margin: 16px auto 0; color: var(--svt-muted); font-size: 0.875rem; line-height: 1.6; }
@media (max-width: 480px) { h1 { font-size: 2rem; } h2 { font-size: 1.625rem; } .svt-card { padding: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .svt-button, .svt-whatsapp { transition: none; }
  .btn:hover, .svt-button:hover, .svt-whatsapp:hover { transform: none; }
}

/* Shared strip: generated by npm run brand:build. */
/* strip v2 2026-09-14
   Shared by the React footer, standalone HTML reference, and silvatech-ui.css.
   Deliberately scoped: safe to load without adopting the Lab register. */
.svt-ecosystem-strip {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  background: #0f1c2b;
  color: #eaf2f7;
  font-family: Inter, "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  border-block: 1px solid #35516a;
}
.svt-ecosystem-strip ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.svt-ecosystem-strip li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.svt-ecosystem-strip li + li::before {
  content: "\00b7";
  color: #8ac5ea;
}
.svt-ecosystem-strip a,
.svt-ecosystem-strip__inactive {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 2px 0;
  color: #eaf2f7;
  font: inherit;
  overflow-wrap: anywhere;
}
.svt-ecosystem-strip a { text-decoration: underline; text-underline-offset: 4px; }
.svt-ecosystem-strip a:hover { color: #8ac5ea; }
.svt-ecosystem-strip a:focus-visible { outline: 2px solid #8ac5ea; outline-offset: 4px; border-radius: 2px; }
.svt-ecosystem-strip__inactive { color: #b6c6d2; }
@media (max-width: 480px) {
  .svt-ecosystem-strip ul { justify-content: flex-start; gap: 0 10px; }
  .svt-ecosystem-strip li { gap: 10px; }
}
