/* ==========================================================================
   Mini Parakeet — Site styles  ·  "Spec Grid"
   Layout + components for the software & AI umbrella homepage.
   Depends on tokens.css.
   ========================================================================== */

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

.gdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); display: inline-block; flex: none;
}

/* ==========================================================================
   SYSTEM BAR  (static, scrolls away above the sticky nav)
   ========================================================================== */
.mp-sysbar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,0.6);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7B8590;
}
.mp-sysbar > span { padding: 9px 16px; border-right: 1px solid var(--hair); }
.mp-sysbar .ok {
  color: var(--signal); margin-left: auto; border-right: 0;
  display: flex; align-items: center; gap: 7px;
}

/* ==========================================================================
   HEADER / NAV  (sticky)
   ========================================================================== */
.mp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,247,249,0.82);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.mp-header.is-scrolled { border-bottom-color: var(--hair); }
.mp-header-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative;
}
.mp-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.mp-logo .mp-bird { height: 30px; width: auto; display: block; }
.mp-logo .mp-wordmark-img { height: 22px; width: auto; display: block; }

.mp-nav { display: flex; gap: 26px; }
.mp-nav a {
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  transition: color var(--dur-quick) var(--ease);
}
.mp-nav a:hover, .mp-nav a.is-active { color: var(--ink); }

.mp-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent;
  border: 1px solid var(--hair-strong); border-radius: 8px; color: var(--ink); cursor: pointer;
}
.mp-nav-toggle .icon-close { display: none; }
.mp-nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.mp-nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   HERO
   ========================================================================== */
.mp-hero { padding: 60px 0 46px; }
.kick {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal-ink); margin: 0 0 22px;
}
.hero-t { font-size: clamp(38px, 6vw, 60px); line-height: 1.0; max-width: 16ch; }
.hero-sub {
  font-size: 18px; line-height: 1.55; color: var(--muted);
  max-width: 58ch; margin: 24px 0 0;
}
.ledger {
  display: inline-flex; flex-wrap: wrap; margin: 32px 0 0;
  border: 1px solid var(--hair-strong); border-radius: 9px;
  background: var(--surface); overflow: hidden; font-family: var(--font-mono);
}
.ledger div {
  padding: 12px 18px; border-right: 1px solid var(--hair-soft);
  font-size: 12px; color: #41494F; display: flex; align-items: center; gap: 8px;
}
.ledger div:last-child { border-right: 0; }
.ledger b { color: var(--ink); font-weight: 700; }
.mp-cta { display: flex; gap: 11px; margin-top: 30px; flex-wrap: wrap; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding-top: 52px; }
.seclabel {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--subtle); margin: 0;
}

/* ---------- portfolio modules ---------- */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.mod {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 11px;
  overflow: hidden; border-top: 2px solid var(--bc, var(--signal));
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.mod:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -16px rgba(16,21,27,0.28); }
.mod-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--hair-soft);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--subtle);
}
.mod-top b { color: var(--ink); font-weight: 600; }
.mod-body { padding: 18px 16px 16px; }
.mod-id { display: flex; align-items: center; margin: 0 0 12px; min-height: 36px; }
.mod-logo { width: auto; display: block; }
.mod-logo.fazr { height: 34px; }
.mod-logo.cretum, .mod-logo.vrrdict { height: 28px; color: var(--cretum); }
.mod-tag { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0 0 14px; min-height: 40px; }
.mod-spec { font-family: var(--font-mono); font-size: 11px; color: #7B8590; line-height: 1.7; }
.mod-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px; border-top: 1px solid var(--hair-soft);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.mod-foot .live { color: var(--signal); display: flex; align-items: center; gap: 7px; }
.mod-foot a { color: var(--muted); }
.mod-foot a:hover { color: var(--ink); }

/* ---------- quiet hardware strip ---------- */
.mp-hw {
  margin-top: 18px; border: 1px solid var(--hair); border-radius: 9px;
  background: rgba(255,255,255,0.55); padding: 16px 18px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.mp-hw .lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.mp-hw .items { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.mp-hw .items a { color: var(--muted); }
.mp-hw .items a:hover { color: var(--ink); }
.mp-hw .desc { font-size: 12.5px; color: #AAB2BB; margin-left: auto; }

/* ---------- thesis ---------- */
.thesis-h { font-size: 34px; margin: 14px 0 0; max-width: 20ch; line-height: 1.08; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 36px; }
.pr-n { font-family: var(--font-mono); font-size: 12px; color: var(--signal-ink); }
.pr-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 12px 0 8px; }
.pr-b { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- signal / newsletter ---------- */
.mp-signal {
  margin-top: 18px; border: 1px solid var(--hair-strong); border-radius: 13px;
  background: var(--surface); padding: 30px 28px;
  display: flex; justify-content: space-between; gap: 30px; align-items: center; flex-wrap: wrap;
}
.mp-signal h3 { font-size: 26px; letter-spacing: -0.025em; margin: 0 0 8px; }
.mp-signal p { font-size: 14.5px; color: var(--muted); }
.mp-form { display: flex; gap: 9px; }
.mp-form input {
  font-family: var(--font-mono); font-size: 13px; padding: 12px 14px;
  border: 1px solid var(--hair-strong); border-radius: 8px; width: 240px;
  background: var(--bg); color: var(--ink);
}
.mp-form input::placeholder { color: #9AA3AC; }
.mp-thanks {
  margin-top: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--signal-ink);
  display: flex; gap: 10px; align-items: center;
}
.mp-linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.mp-footer { margin-top: 56px; background: var(--surface); border-top: 1px solid var(--hair); }
.mp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; padding: 46px 0 34px; }
.mp-footer-brand img { height: 52px; width: auto; display: block; }
.mp-footer-tag { font-family: var(--font-mono); font-size: 11.5px; color: #7B8590; line-height: 1.6; margin: 16px 0 5px; }
.mp-footer-mini { font-family: var(--font-mono); font-size: 11px; color: var(--signal-ink); margin: 0; }
.mp-footer-col h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--subtle); font-weight: 500; margin: 0 0 14px;
}
.mp-footer-col a, .mp-footer-col span { display: block; font-size: 14px; color: #41494F; margin-bottom: 9px; }
.mp-footer-col a:hover { color: var(--ink); }
.mp-footer-col .sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #AAB2BB; margin: 16px 0 9px;
}
.mp-footer-bar {
  border-top: 1px solid var(--hair-soft); padding: 16px 0 60px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--subtle);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 780px) {
  :root { --gutter: 22px; }
  .mods, .principles { grid-template-columns: 1fr; }
  .mp-footer-grid { grid-template-columns: 1fr 1fr; }
  .mp-signal { flex-direction: column; align-items: flex-start; }
  .mp-form input { width: 200px; }
  .mp-hw .desc { margin-left: 0; }

  .mp-nav-toggle { display: inline-flex; }
  .mp-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--hair);
    padding: 8px var(--gutter) 16px;
    display: none;
  }
  .mp-nav.is-open { display: flex; }
  .mp-nav a { padding: 12px 0; font-size: 13px; }
}