/* ==========================================================================
   Bota — page chrome: nav, mobile menu, footer.
   Chrome should be the quietest thing on the page. Everything here is built
   to recede.
   ========================================================================== */

/* ── Nav ──────────────────────────────────────────────────────────────────
   Transparent over the hero, then it *solidifies* — an opaque background and
   one hairline. Not a blur. Frosted-glass navs are the single most copied
   detail on the web right now, and a solid rule reads far more like print.
   ------------------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-crisp),
    border-color var(--dur-base) var(--ease-crisp);
}

.nav.is-scrolled {
  background: var(--background);
  border-bottom-color: var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 100%;
}

/* ── Wordmark ─────────────────────────────────────────────────────────────
   The Bota mark: an isometric three-tier stack with the top tier lit. Layers
   built on layers, and something igniting at the top of them — build on top
   of AI. Custom-drawn rather than a sparkle from an icon set, because a
   borrowed AI-sparkle is a tell in itself.

   No tile behind it. The mark carries its own light and its own dark faces,
   so a brand-coloured chip underneath would only mute it — and the tile was
   there to give a monochrome glyph a ground it no longer needs.
   ------------------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  flex: none;
}

.brand__mark {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: none;
}

.brand__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand__word {
  font-size: var(--t-sm);
  font-weight: 580;
  letter-spacing: -0.019em;
}

/* ── Nav links ────────────────────────────────────────────────────────────
   The active mark is a dot in the left margin rather than a pill or a
   underline sweep — it takes no layout space, so links never shift.
   ------------------------------------------------------------------------ */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav__links a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 460;
  color: var(--muted-foreground);
  transition: color var(--dur-fast) var(--ease-crisp);
}

.nav__links a:hover {
  color: var(--foreground);
}

.nav__links a.is-active {
  color: var(--foreground);
}

.nav__links a.is-active::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--brand);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Pricing leaves the page, so it sits with the account actions rather than
   with the in-page links — the one nav item that is a destination, not a
   heading, and it should not pretend otherwise. */
.nav__price {
  font-size: var(--t-sm);
  font-weight: 460;
  color: var(--muted-foreground);
  padding-inline: var(--s3);
  transition: color var(--dur-fast) var(--ease-crisp);
}

.nav__price:hover {
  color: var(--foreground);
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-crisp),
    color var(--dur-fast) var(--ease-crisp);
}

.icon-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* One icon is shown per theme; the other is removed from the box entirely so
   the button never reserves space for both. */
[data-theme="light"] .icon-moon,
[data-theme="dark"] .icon-sun {
  display: none;
}

.nav__burger {
  display: none;
}

/* ── Mobile menu ──────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  background: var(--background);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) var(--gutter) var(--s6);
  display: grid;
  gap: 2px;
  box-shadow: var(--shadow-lg);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  padding: var(--s3) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  border-bottom: 1px solid var(--rule);
}

.mobile-menu .btn {
  margin-top: var(--s5);
  border-bottom: 0;
}

/* ── Scroll progress ──────────────────────────────────────────────────────
   One brand hairline across the very top. It is the only always-on animated
   element on the page.
   ------------------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 101;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(0);
}

/* ── Footer ─────────────────────────────────────────────────────────────────
   The page's last plane, and its deepest. It sits below the canvas rather
   than on it, which is what makes the closing CTA above it read as lifted.
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--s9);
  background: var(--background-sunken);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: var(--s7) var(--col-gap);
  padding-bottom: var(--s9);
}

.footer__brand .brand {
  margin-right: 0;
  margin-bottom: var(--s4);
}

.footer__brand p {
  font-size: var(--t-sm);
  color: var(--muted-foreground);
  max-width: 30ch;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s4);
}

.footer__col a {
  display: block;
  padding: 5px 0;
  font-size: var(--t-sm);
  color: var(--muted-foreground);
  transition: color var(--dur-fast) var(--ease-crisp);
}

.footer__col a:hover {
  color: var(--foreground);
}

.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--faint);
}

.footer__bar a:hover {
  color: var(--foreground);
}

/* ── Responsive chrome ────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .nav__links,
  .nav__price,
  .nav__signin {
    display: none;
  }

  .nav__burger {
    display: grid;
  }
}

@media (max-width: 720px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}