/* NixLab is an openfp sub-brand: the design kit in the teal accent.
 * design-kit.css carries the type and the effects; this file sets the
 * theme and the page's own layout. */

@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'); }

:root {
  --dk-300: #5eead4; --dk-400: #2dd4bf; --dk-500: #14b8a6; --dk-600: #0d9488;
  --dk-500-rgb: 20, 184, 166;
  --dk-pop: #99f6e4;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: #020617; color: #e2e8f0;
  font-family: 'Open Sans', system-ui, sans-serif; line-height: 1.6; }
a { color: var(--dk-400); text-decoration: none; }
a:hover { color: var(--dk-300); }
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* The symbol sheet: drawn nowhere, referenced by every <use>. Each mark
 * lets its shadow spill past its box, which would otherwise cut the glow
 * off square. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-lockup svg, .hero-logo svg { overflow: visible; }

/* Chrome */
header.chrome { position: sticky; top: 0; z-index: 40;
  background: rgba(2, 6, 23, .72); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
header.chrome .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 4rem; }
.brand-lockup { display: flex; align-items: center; gap: .6rem; }
.brand-lockup svg { width: 30px; height: 30px; }
.wordmark { font-family: 'Montserrat', sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
.wordmark .lead { color: #fff; }
.wordmark .tail { color: var(--dk-400); }

.btn { display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .78rem;
  border-radius: .5rem; padding: .7rem 1.25rem; }
.btn.solid { background: var(--dk-500); color: #020617; }
.btn.solid:hover { color: #020617; }
.btn.ghost { border: 1px solid rgba(255, 255, 255, .18); color: #e2e8f0; }
.btn.ghost:hover { border-color: var(--dk-400); color: #fff; }
.btn.large { font-size: .9rem; padding: .95rem 1.75rem; }

/* Hero */
main.hero-grid { flex: 1; display: flex; align-items: center; }
.hero-content { width: 100%; }
.hero-content .wrap { display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: 1.1fr .9fr; padding-top: 3rem; padding-bottom: 3rem; }
h1.font-display { font-size: clamp(2.3rem, 5.5vw, 4.4rem); line-height: 1.05;
  max-width: 14ch; margin: 0 0 2.25rem; text-transform: uppercase; color: #fff; }
.hero-logo { display: flex; justify-content: center; }
.hero-logo svg { width: min(340px, 80%); height: auto; }

@media (max-width: 860px) {
  .hero-content .wrap { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .hero-logo { order: -1; }
  .hero-logo svg { width: min(200px, 55%); }
  h1.font-display { margin-left: auto; margin-right: auto; }
}

/* Footer */
footer.chrome { border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.75rem 0; color: #94a3b8; font-size: .85rem; }
footer.chrome .wrap { display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; justify-content: space-between; }
footer.chrome .brand-lockup svg { width: 22px; height: 22px; }
footer.chrome .wordmark { font-size: .95rem; }