/* SkyLab Industries — page + component styles
   Static reproduction of the Claude Design components used on the marketing
   page (Button, HexMark) plus the page's own inline styles. Component values
   mirror components/core/Button.jsx and components/core/HexMark.jsx from the
   design-system bundle. */

/* ---------- Page foundation (from the design's <style> block) ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-body); }
a { text-decoration: none; color: inherit; }

.sl-shell { min-height: 100vh; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-body); overflow-x: hidden; }

.sl-navlink { color: var(--text-secondary); transition: color var(--duration-base) var(--ease-standard); }
.sl-navlink:hover { color: var(--text-primary); }

.sl-svc-card { transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.sl-svc-card:hover { border-color: var(--border-hover) !important; transform: translateY(-3px); }

@keyframes sl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Button (mirrors components/core/Button.jsx) ---------- */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-base);
}

/* sizes */
.sl-btn--md { padding: 10px 18px; font-size: var(--text-sm);  gap: 8px;  border-radius: var(--radius-sm); }
.sl-btn--lg { padding: 14px 26px; font-size: var(--text-base); gap: 10px; border-radius: var(--radius-md); }

/* variants */
.sl-btn--primary {
  background: var(--action-primary);
  color: var(--text-on-brand);
  border: 1px solid var(--action-primary);
}
.sl-btn--primary:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
.sl-btn--secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.sl-btn--secondary:hover {
  border-color: var(--border-hover);
  background: var(--surface-inset);
}

/* ---------- HexMark lockup (mirrors components/core/HexMark.jsx) ---------- */
.sl-lockup { display: inline-flex; align-items: center; }
.sl-lockup__text { display: flex; flex-direction: column; line-height: 1; }
.sl-lockup__name {
  font-family: var(--font-mono-alt);   /* constellation lockup uses Space Mono */
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
}
.sl-lockup__sub {
  font-family: var(--font-mono-alt);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--green-500);
}

.sl-hex { display: block; flex-shrink: 0; }