/* Reusable components: nav, buttons, cards, chips, form, cursor, footer. */

/* ============================= NAV ============================= */

.nav {
  position: fixed;
  top: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: var(--container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}

.nav--scrolled {
  background: rgba(8, 9, 24, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--glass-border);
  padding-block: 0.5rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  flex: none;
}

.nav__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text);
}

/* Dot marker for the section currently in view. */
.nav__link::after {
  content: "";
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nav__link.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* Hamburger */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  position: relative;
}

.nav__toggle span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 26px; }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* Mobile sheet */
.nav__sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(5, 5, 16, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 6vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.nav__sheet.is-open {
  opacity: 1;
  visibility: visible;
}

.nav__sheet a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  opacity: 0;
  transform: translateY(24px);
}

.nav__sheet.is-open a {
  animation: sheet-in 0.5s var(--ease-out) forwards;
}

.nav__sheet.is-open a:nth-child(1) { animation-delay: 0.05s; }
.nav__sheet.is-open a:nth-child(2) { animation-delay: 0.1s; }
.nav__sheet.is-open a:nth-child(3) { animation-delay: 0.15s; }
.nav__sheet.is-open a:nth-child(4) { animation-delay: 0.2s; }
.nav__sheet.is-open a:nth-child(5) { animation-delay: 0.25s; }

@keyframes sheet-in {
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__actions .btn { display: none; }
}

/* ============================= BUTTONS ============================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

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

/* Primary. Accent fill with a pre-blurred glow layer we fade in (never animates filter).

   The label is ink, not white. White on --accent measures 3.16:1, and WCAG AA wants 4.5:1 at this
   size, so the site's most-clicked element was the one that failed. Ink on the same accent is
   6.4:1. Darkening the button instead would also have passed, but it would have put a second blue
   on the page, and one accent is the rule everything else here follows. */
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  filter: blur(16px);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease-out);
}

.btn--primary:hover::before {
  opacity: 0.9;
}

/* Ghost */
.btn--ghost {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  border-color: var(--glass-border-lit);
  background: var(--glass-strong);
}

.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.85rem;
}

/* Text link with an underline that wipes in. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================= CARD ============================= */

/* Glass card with a glow that follows the pointer via --mx/--my (set in JS). */
.card {
  position: relative;
  padding: var(--space-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(91, 140, 255, 0.16),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.card:hover {
  border-color: var(--glass-border-lit);
}

.card:hover::before {
  opacity: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block: 0.85rem 0.5rem;
}

.card__text {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Plain service card, used in the "Usually paired with" rows on detail pages.
   Lives here rather than in home.css because subpages never load home.css. When these rules
   were over there, the arrow on every service page rendered unstyled and cramped. */
.service {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}

.service .card__title {
  margin-bottom: 0.5rem;
}

.service__go {
  margin-top: auto;
  padding-top: 1.3rem;
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out);
}

.service:hover .service__go {
  transform: translateX(6px);
}

/* ============================= FORM ============================= */

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b90ad' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

.field select option {
  background: var(--bg-panel);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-strong);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--text-faint);
}

.field__error {
  font-size: var(--fs-small);
  color: var(--text-faint);
  min-height: 1.1em;
}

/* Honeypot. Hidden from humans, visible to naive bots. Not display:none. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Submit button success state, the mint callback to the pipeline's "Deployed" beat. */
.btn--sent {
  background: var(--accent) !important;
  color: #052e16 !important;
  pointer-events: none;
}

.btn--sent::before {
  background: var(--accent) !important;
  opacity: 0.6 !important;
}

.form__status {
  font-size: var(--fs-small);
  color: var(--text-dim);
  min-height: 1.2em;
}

.form__status--error {
  color: var(--text-faint);
}

/* ============================= CURSOR ============================= */

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

.cursor {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--text);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--glass-border-lit);
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out),
    margin 0.28s var(--ease-out), border-color 0.28s var(--ease-out),
    background 0.28s var(--ease-out);
}

.cursor-ring.is-hovering {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: rgba(91, 140, 255, 0.6);
  background: rgba(91, 140, 255, 0.09);
}

/* Only a fine pointer gets the custom cursor. */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor,
  body.has-cursor * {
    cursor: none;
  }
}

/* ============================= FOOTER ============================= */

.footer {
  position: relative;
  padding-block: var(--space-4) var(--space-3);
  border-top: 1px solid var(--glass-border);
  background: var(--bg-elev);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.footer__tag {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 30ch;
}

/* h2, not h4. These were <h4> directly after the page's last <h2>, which skips a level and breaks
   the document outline every crawler and screen reader reads. They are link-group labels in a
   landmark of their own, so h2 is the honest level, and the class keeps them looking identical. */
.footer__col .footer__heading {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.footer__col li + li {
  margin-top: 0.6rem;
}

.footer__col a {
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease-out);
}

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

.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-small);
  color: var(--text-faint);
}

@media (max-width: 820px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand-col {
    grid-column: 1 / -1;
  }
}

/* ============================= REVEAL ============================= */

/* Elements marked [data-reveal] have their start state set in JS, not here, so no-JS and reduced-motion visitors always see the content. */