/* GENERATED from foundation/foundation.css by `npm run sync:foundation`. Do not edit. */
/*
 * pageBody Foundation -- the single source of truth for the chrome shared by
 * EVERY surface (the Hub and every magnet): tokens, top bar, footer, buttons,
 * and the book-a-call link. Defined once here, distributed by
 * scripts/sync-foundation.mjs (served at /spine/foundation.css for magnets,
 * copied into hub/public/ for the static Hub).
 *
 * EDIT HERE, then run `npm run sync:foundation`. Never hand-edit the copies.
 * Per ADR-0007: every page wears this chrome; a magnet brings its own body
 * flavor on top, never its own chrome.
 */
:root {
  --bg: #060706;
  --surface: rgba(18, 21, 18, 0.62);
  --surface-solid: #121512;
  --border: #242a23;
  --border-2: #2f372e;
  --fg: #f4f6f3;
  --muted: #9aa39a;
  --muted-2: #707870;
  --accent: #90fe00;
  --accent-dim: #6fc400;
  --danger: #ff5757;
  --amber: #ffc24b;
  --radius: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-brand: "Sora", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-brand);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
}
::selection { background: var(--accent); color: #060706; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Shared background layer (the signature green field) */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
#bg-veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(144, 254, 0, 0.10), transparent 55%),
    radial-gradient(100% 60% at 50% 110%, rgba(144, 254, 0, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 6, 0.30), rgba(6, 7, 6, 0.10) 40%, rgba(6, 7, 6, 0.45));
}
nav, header, main, section, footer { position: relative; z-index: 2; }

/* Top bar (shared on every page): logo left, book-a-call link right */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 64px);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(6, 7, 6, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; }
.logo { height: 21px; width: auto; display: block; }
.nav-cta {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 11px 20px; border-radius: 8px; background: var(--accent); color: #060706;
  transition: filter 0.2s var(--ease);
}
.nav-cta:hover { filter: brightness(1.08); }
@media (max-width: 760px) { .nav-cta { padding: 9px 15px; } }

/* Buttons (shared) */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 14px 24px;
  border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: #060706; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.975); }
.btn-ghost { background: rgba(6, 7, 6, 0.4); color: var(--fg); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Footer (shared on every page): brand + legal + LinkedIn. Book-a-call is a
   link to Calendly, never an embedded widget. */
footer { border-top: 1px solid var(--border); padding: 40px 0; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 22px 32px; justify-content: space-between; align-items: center; }
.foot-brand .fine { font-size: 12.5px; color: var(--muted-2); max-width: 52ch; margin-top: 12px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 13px; }
.foot-legal .copy { color: var(--muted-2); }
.foot-legal a { color: var(--muted); transition: color 0.2s var(--ease); }
.foot-legal a:hover { color: var(--fg); }
.li-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; background: #0a66c2; transition: opacity 0.2s var(--ease); }
.li-mark svg { width: 62%; height: 62%; fill: #fff; }
.li-mark:hover { opacity: 0.85; }