/* Office Bots, "control room" draft: tokens, type, nav, buttons, footer.
   One theme on purpose (a dark control room is the look), one accent (mint) and one state colour
   (amber, only ever for "an agent is waiting for you", as in the office itself).
   Shapes: buttons and chips are pills; frames, panels and cards are --radius. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #06080b;
  --bg-raised: #0a0d12;
  --surface: #0d1117;
  --surface-2: #121821;
  --line: rgb(214 228 255 / 0.08);
  --line-strong: rgb(214 228 255 / 0.16);
  --text: #eef1f5;
  --muted: #9aa4b4;
  --dim: #636d7d;
  --accent: #6cf0c8;
  --accent-ink: #03140e;
  --accent-soft: rgb(108 240 200 / 0.12);
  --accent-glow: rgb(108 240 200 / 0.35);
  --wait: #ffb547;
  --radius: 18px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1320px, 100% - 48px);
  --nav-h: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* main.js shows and hides things with the hidden attribute; a class that sets display (like the
   waitlist form's grid) would otherwise keep a hidden element on screen. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Film grain on a fixed layer only, so scrolling never repaints it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.accent {
  color: var(--accent);
}

.lead {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  max-width: 60ch;
}

.mono {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.page {
  width: var(--page);
  margin-inline: auto;
}

.sprite {
  display: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex: none;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Draft markers: stay until the owner signs the site off (landing/README.md). */
.draft-bar {
  position: relative;
  z-index: 60;
  padding: 7px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: center;
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border: 1px solid rgb(255 181 71 / 0.4);
  border-radius: 999px;
  color: var(--wait);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* Navigation: a floating glass pill that tucks away while you read and comes back when you scroll up. */
.nav {
  position: fixed;
  top: 44px;
  left: 50%;
  z-index: 50;
  width: min(1040px, 100% - 32px);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 10px 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(20 26 36 / 0.72), rgb(10 13 18 / 0.6));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 20px 50px rgb(0 0 0 / 0.35);
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}

.nav.is-scrolled {
  top: 14px;
}

.nav.is-hidden {
  transform: translate(-50%, -140%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.navlinks a:not(.btn) {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.navlinks a:not(.btn):hover {
  color: var(--text);
  background: rgb(255 255 255 / 0.05);
}

.navlinks .btn {
  margin-left: 8px;
}

.nav-hamburger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: var(--text);
  cursor: pointer;
}

.nav-hamburger .icon {
  width: 22px;
  height: 22px;
}

.nav-hamburger .icon-close,
.nav-hamburger.open .icon-open {
  display: none;
}

.nav-hamburger.open .icon-close {
  display: block;
  margin: auto;
}

.nav-hamburger .icon-open {
  margin: auto;
}

/* Buttons */
.btn {
  --x: 0px;
  --y: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.98rem/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(var(--x), var(--y));
  transition: transform 0.35s var(--ease-out), background 0.25s, border-color 0.25s, box-shadow 0.35s;
}

.btn:active {
  transform: translate(var(--x), calc(var(--y) + 1px)) scale(0.98);
}

.btn .icon {
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .icon {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgb(108 240 200 / 0.4), 0 10px 40px -8px var(--accent-glow);
}

.btn-primary:hover {
  box-shadow: 0 0 0 1px rgb(108 240 200 / 0.6), 0 14px 60px -6px var(--accent-glow);
}

.btn-ghost {
  border-color: var(--line-strong);
  background: rgb(255 255 255 / 0.03);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  border-color: rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.07);
}

.btn-small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.92rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer */
.footer {
  position: relative;
  padding: 72px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 28px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .nav {
    top: 40px;
    padding-right: 8px;
  }

  .nav-hamburger {
    display: grid;
  }

  .navlinks {
    position: fixed;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgb(10 13 18 / 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks a:not(.btn) {
    padding: 14px 16px;
    font-size: 1.05rem;
  }

  .navlinks .btn {
    margin: 8px 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .draft-more {
    display: none;
  }

  /* One line on phones, so the floating nav never sits on top of it. */
  .draft-bar {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :root {
    --page: calc(100% - 32px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav,
  .navlinks,
  .btn-ghost {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}