@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --shell-ink: #07100d;
  --shell-paper: #f1f5eb;
  --shell-muted: #96a69f;
  --shell-acid: #d9ff55;
  --shell-line: rgba(219, 244, 226, 0.13);
  --shell-line-strong: rgba(219, 244, 226, 0.24);
  --shell-font: "Manrope", sans-serif;
  --shell-mono: "DM Mono", monospace;
}

body { padding-top: 72px; }
.site-shell-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 72px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--shell-line);
  background: rgba(7, 16, 13, .92);
  backdrop-filter: blur(18px);
}
.site-header .site-shell-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-header .brand, .site-footer .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--shell-paper); font: 800 20px var(--shell-font); letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.site-header .brand img, .site-footer .brand img { width: 29px; height: 29px; }
.site-header .brand > span, .site-footer .brand > span { color: var(--shell-paper); }
.site-header .brand span span, .site-footer .brand span span { color: var(--shell-acid); }
.site-header nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 19px; }
.site-header nav a { color: #bcc8c2; font: 600 13px var(--shell-font); text-decoration: none; white-space: nowrap; }
.site-header nav a:hover { color: var(--shell-paper); }
.site-header nav .site-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--shell-line-strong); border-radius: 7px; color: var(--shell-paper); font-size: 12px; font-weight: 800; }
.site-header nav .site-button-acid { border-color: var(--shell-acid); background: var(--shell-acid); color: var(--shell-ink); }
.site-header nav .site-button-acid:hover { color: var(--shell-ink); box-shadow: 0 12px 34px rgba(217, 255, 85, .12); }
.site-signout { padding: 8px 2px; border: 0; background: transparent; color: var(--shell-muted); cursor: pointer; font: 700 12px var(--shell-font); }
.site-signout:hover, .site-signout:focus-visible { color: var(--shell-paper); outline: 0; }
.site-signout[hidden] { display: none; }
.site-menu-button { display: none; border: 1px solid var(--shell-line); border-radius: 6px; padding: 8px 10px; background: transparent; color: var(--shell-paper); font: 600 12px var(--shell-font); }

.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--shell-line);
  background: #050b09;
  color: var(--shell-muted);
  font-family: var(--shell-font);
}
.site-footer p { max-width: none; }
.site-footer a { text-decoration: none; }
.site-footer-cta { display: none; }
.site-footer-kicker { color: var(--shell-acid); font: 10px var(--shell-mono); letter-spacing: .16em; }
.site-footer-cta h2 { margin: 14px 0 0; color: var(--shell-paper); font: 700 clamp(2.5rem, 4vw, 4rem)/1.02 var(--shell-font); letter-spacing: -.065em; }
.site-footer-cta .site-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border: 1px solid var(--shell-acid); border-radius: 7px; background: var(--shell-acid); color: var(--shell-ink); font: 800 13px var(--shell-font); white-space: nowrap; }
.site-footer-partners { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 28px; padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--shell-line); }
.site-footer-partners > span { color: var(--shell-acid); font: 9px var(--shell-mono); letter-spacing: .16em; }
.site-footer-partner-links { display: flex; gap: 10px; }
.site-footer-partner-links a { padding: 10px 13px; border: 1px solid var(--shell-line-strong); color: #dbe8e0; font: 10px var(--shell-mono); text-transform: uppercase; }
.site-footer-partner-links a:hover { border-color: var(--shell-acid); color: var(--shell-acid); }
.site-footer-partners p { margin: 0; color: #65766d; font-size: 10px; line-height: 1.55; }
.site-footer-main { display: grid; grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(130px, .65fr)); gap: 48px; padding-top: 54px; padding-bottom: 48px; }
.site-footer-brand { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
.site-footer-brand p, .site-footer-brand small { max-width: 390px; margin: 0; color: #819189; font-size: 11px; line-height: 1.65; }
.site-footer-brand small { color: #63746b; font: 9px/1.65 var(--shell-mono); }
.site-footer-column { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; }
.site-footer-column > span { margin-bottom: 4px; color: var(--shell-acid); font: 9px var(--shell-mono); letter-spacing: .14em; text-transform: uppercase; }
.site-footer-column a { color: #98a8a0; font-size: 11px; }
.site-footer-column a:hover { color: var(--shell-paper); }
.site-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--shell-line); color: #5f7067; font: 8px var(--shell-mono); text-transform: uppercase; }

@media (max-width: 980px) {
  .site-menu-button { display: block; }
  .site-header nav { display: none; position: absolute; inset: 72px 0 auto; padding: 18px 24px; border-bottom: 1px solid var(--shell-line); background: #09140f; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 12px 8px; }
  .site-header nav .site-button { margin-top: 6px; }
  .site-footer-partners { display: flex; align-items: flex-start; flex-direction: column; }
  .site-footer-partner-links { flex-wrap: wrap; }
  .site-footer-main { grid-template-columns: 1fr 1fr; }
  .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-shell-inner { width: min(100% - 30px, 1180px); }
  .site-footer-cta { align-items: flex-start; flex-direction: column; }
  .site-footer-main { grid-template-columns: 1fr; gap: 30px; }
  .site-footer-brand { grid-column: 1; }
  .site-footer-legal { flex-direction: column; }
}
